http://www.kingmx.com Copyright (C) 2006 金麦网络-Kingmx.com All Rights Reserved. http://www.kingmx.com/article.php?id=15184 2007-4-14 http://www.kingmx.com/article.php?id=15117 2007-3-13 http://www.kingmx.com/article.php?id=15116 2007-3-13 http://www.kingmx.com/article.php?id=15115 2007-3-13 http://www.kingmx.com/article.php?id=15114 2007-3-13 http://www.kingmx.com/article.php?id=15113 2007-3-13 http://www.kingmx.com/article.php?id=15102 2007-2-27 http://www.kingmx.com/article.php?id=15038 2007-2-8 http://www.kingmx.com/article.php?id=15036 2007-2-8 http://www.kingmx.com/article.php?id=15033 2007-2-6 http://www.kingmx.com/article.php?id=15032 2007-2-6 图注：网上的兄弟们自己“颁发”的“Web2.0设计师证”，你也可以给自己来一个。 我真的希望看到这里的你觉得我上面的解释是一大堆废话！因为这说明你真的知道作为一个设计师自己应该去做些什么，想些什么。 视觉的进化与沿革 Evolution of Visual Elements 谈到视觉元素的沿革，很多人兴趣就高涨起来了——你看看论坛上的那些个帖子，点击量最高的，回复最多的不就是“最新XXX效果，附教程”之类的吗。一些人又说了：我们这不是一直追赶潮流吗？是啊，弄潮和追潮只有一字之差而已。 好吧，就从论坛的热点帖子说起：之前有个帖子是关于Web2.0的Logo的，这个话题真是热得烫手。可惜的是，我在查找证据之后发现，许多所谓的“大公司的新Web2.0风格Logo”其实是某些“好事者”所为。呵呵，不必失望，这些行为颇有点Web2.0的风格，况且，其中的有据可查的确实被采用的Logo，有一小部分，也可以从这些版本中找到——你现在可以把你喜欢的样式直接推荐给产品影响全球数以万亿计客户量的大公司，影响它们，改变它们！你不觉得Web2.0的可爱吗？ 换个角度来讲，很多公司在“Web1.0时代”没有改变它们的Logo，现在到了“Web2.0时代”为什么就都迫不及待的要改变Logo的设计呢？这除了说明Web2.0是“真正意义上的网络”以外，难道你还觉察不出“Web2.0的视觉设计”的重要吗？ screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='点击在新窗口查看全图\nCTRL+鼠标滚轮放大或缩小';}}" border=0> 图注：上面这些Logo，下排都是未被证实的“自作多情”作品。和“现任”Logo的比对。 screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='点击在新窗口查看全图\nCTRL+鼠标滚轮放大或缩小';}}" border=0> 图注：还是来看看真正的Web2.0的色彩和符号在怎么玩吧！大公司老是跑在前面，一点不错，后续的文章还会详细介绍关于“可口可乐”的进化例子。 我想说的是，你应该从这些真真假假的Logo中看出来，哪些才是真的符合Web2.0的标准而不被表象的那些所谓的渐变应该怎么拉，高光应该怎么做，影子的参数是多少所迷惑。觉得有些难度是吧？我们的这几篇文章不是为了Web2.0而说Web2.0，只是想从“视觉进化”的规则中告诉你怎么来鉴别和找出“真正的Web2.0风格”！ 进化的概念 What's the meaning of "Evolution"? 很清楚，所谓“进化”，就是在原有“物种”的基础上向前进步。在英语中的“Evolution”也可以翻译成“演变”，但是我宁可用“进化”这个比较积极的词汇。 对于视觉元素的进化，由来久矣。谈到这里，我不得不提到一个人，因为我在分析新Web2.0的Logo走向（趋势）时，好多的Logo源头都指向了他，上面那个图里面4个原有的logo，3个都是他设计的。他的名字是：保罗·兰德（Paul Rand　1914-1996） screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='点击在新窗口查看全图\nCTRL+鼠标滚轮放大或缩小';}}" border=0> 图注：兰德为IBM做的海报，视觉音译了I.B.M (Eye, Bee, M) 你可能会奇怪，他怎么会出现在苹果的“想法与众不同”(Think Different)海报里，这里我引用一段介绍，详细的，你可以区下面的链接找寻。 保罗.兰德（Paul Rand，1914-1996）兰德作为当今美国乃至世界上最杰出的图形设计师、思想家及设计教育家之一，其先导地位和作用是勿庸争辩的。 兰德1929-1932年就学于纽约Parsons设计学院。年仅23岁便成为Esquire Coronet广告公司的艺术指导，在随后的三十多年里他一直担任纽约广告代理公司的创意指导，也曾受聘为许多美国著名大公司的设计师或设计顾问，其中包括美国广播公司(ABC)、IBM公司、西屋电器公司、NEXT电脑公司、UPS快递公司、耶鲁大学等艺术顾问。他为这些公司和机构所设计的企业标志 ，已成了家喻户晓的经典之作。 半个多世纪以来，他在视觉设计方面的建树和前卫精神对整个图形设计领域而言，影响巨大而深远。 详细: http://www.artcn.cn/Article/pmsj/wgsjs/200604/9407.html screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='点击在新窗口查看全图\nCTRL+鼠标滚轮放大或缩小';}}" border=0> 图注：上面用亮色表明年代的Logo，即是兰德的杰作了。 我们向兰德致敬，感谢他为我们留下了这么多可以追寻的脉络，可以让我们踏着他的脚印向正确的方向行进。从某种意义上讲，我们现在面临的课题，也是当年兰德遇到的问题。但是庆幸的是，我们现在有了更多更便捷的方式来获取资讯，完成新一轮的“视觉元素的进化”过程。 苹果风格是否就是web2.0风格？ 为了不使有些人觉得枯燥，我决定把这个小节提到前面来讲。同时，我也正在改善我的“笔调”更Web2.0一些，希望大家不是正襟危坐的凝视这几行字，而是陷在沙发的一角用手机看小说的感觉。 screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='点击在新窗口查看全图\nCTRL+鼠标滚轮放大或缩小';}}" border=0> 苹果风格是否就是web2.0风格？这个话题好像会使人感到困惑：的确，那些该死的苹果设计师团队每天都在“Think Different”，难怪它们会跑在前面，因为它们会最快的找到“Good of Different”。不可否认，苹果确实创造并引领了好长一段时间的潮流。但是给我的感觉，自从1997年微软的“毒血”注入苹果之后，苹果的创造力就大不如前。（注：1997年8月6日，微软首次动用1.5亿美元购买苹果公司非投票股份） 撇开这些“政治经济学”不谈，我们还是从理念上分析一下苹果的行为： ①提高产品使用的愉悦感（不仅是舒适感），超越仅限于功能的满足。 ②为了愉悦视觉触觉感官而不惜代价（严格规定所有产品表面不能有可见的螺丝钉，iMac的外壳铸模造价高出同类型产品30%，为研究透明塑料如何看起来不“低档”，显得“舒适，科技感”而将工业造型设计师蹲点到糖果厂看软糖生产过程。等等） ③追求自我“i”为中心，个性独特，尝试不同。 你可能读到这里会想起一个人：斯皮尔伯格。对，没错，就是他。1亿2千万美元拍《兄弟连》，没想过卖不卖得出去，但是他成功了。他持股的公司“梦工厂”，其中一个股东就是原苹果公司的创始人之一。不过他们这种不计成本的玩法，不太符合市场经济，所以不幸的，“梦工厂”在2005年圣诞节前被派拉蒙公司以16亿美元收购，不玩了。 那么，说到这里，一些对于“Web2.0精神”比较熟悉的人就会发现差异。 ① 人群不同：苹果的理念是创造独特，原本不是为了愉悦“大众”而是满足少数能欣赏之“小众”，若不是自iBook之后采取扩展低端市场的做法，估计现在iPod，iPhone是不可能轻易流于“民间”。然而，“Web2.0”是“大熔炉”，体现参与性，互动性。几乎所有上网的人都是“受众”，是自娱自乐自作自受的“众乐乐”。从年龄跨度上讲“Web2.0”也要宽泛许多。 ② 氛围不同：因为人群的关系，两者的感情色彩和氛围就大相径庭了。苹果有一点“后雅皮”的影子，感觉象一个受过优良教育，会用科技来改善生活却有着顽皮不羁性格，享乐人生态度的大男孩。Web2.0就有点纽约皇后区的喧嚣或者说北京春节白云观逛庙会的感觉。人们为自己感兴趣的事情蜂拥而至，乘兴而来兴尽而归，嬉笑怒骂无拘无束。 ③ 表现不同：因为上述的一些关系，导致视觉表现上，苹果的东东对于Web2.0就有些消化不良。最明显的例子就是所谓的“水晶按钮”，其为表现完美所花费的步骤，对于芸芸众生的Web2.0网站来讲，一是制作过于复杂，二是视觉表现浪费。一件裘皮大衣，配上骨质的扣会给人感觉很纯朴，配上银质的钮会给人感觉很高贵。但是问题不在于钮扣，而是在于你的网站是不是要弄成那件裘皮大衣。 好了，既然结论是：苹果风格 ≠ web2.0风格，那么关于为什么说“过于复杂，视觉表现浪费”的问题就留在以后的文章里面详细讲吧。 特别注意，文章中不少链接是去往维基百科，如果不能访问，请使用代理设置 还是和以往一样，欢迎各位兄弟姐妹的发言，Web2.0！不要吝啬你们的声音！ ]]> http://www.kingmx.com/article.php?id=14960 2007-1-18 http://www.kingmx.com/article.php?id=14891 2007-1-6 http://www.kingmx.com/article.php?id=14890 2007-1-6 http://www.456bereastreet.com/archive/200505/transparent_custom_corners_and_borders/">Transparent custom corners and borders</a>.</p>   <p>This is a demo of a flexible box with custom corners and custom borders. The box will expand to contain any amount of content vertically, will handle any text size, and can become very wide before the horizontal borders start breaking up. How wide depends on the width of one of the background images.</p>   <p>Two images are used. <a href="box.gif"><code>box.gif</code></a> is a complete box. For the sake of this demo I&rsquo;ve made it 1600 pixels wide. It is used for the corners and the horizontal borders. The other image, <a href="borders.gif"><code>borders.gif</code></a>, contains the vertical borders. Why use a single, large image for the corners instead of several smaller ones? There are several reasons:</p>   <ul>    <li>Splitting the image into a bunch (six in this case &ndash; one for each corner plus the top and bottom borders) of smaller images may actually increase the total file size, depending on the look of the corners and borders.</li>    <li>To minimize the number of HTTP requests sent to the server.</li>    <li>Convenience. When changing the look of the borders and corners, replacing two files is faster than replacing eight files.</li>   </ul>   <p>Some extra markup is needed to put the corners and borders in place. A bit annoying, yes, but this extra, non-semantic XHTML is quite minimal, and won&rsquo;t get in the way if CSS is off, so I think I can live with it. It is possible to get rid of some more markup by using the <code>:before</code> and <code>:after</code> pseudo-elements, but since Internet Explorer doesn&rsquo;t support them I&rsquo;ll leave the extra markup in there.</p>   <p>The main content area of this box can be filled with any elements you like, as long as their background colour is set to white (or whatever colour the inside of your box has), and their margins are zeroed. If the content is transparent the left border will be doubled because the image used to create it also contains the right border. You can avoid the need for that by splitting the image in two, or adding an extra <code>div</code> to put all your content in.</p>   <div class="bb"><div></div></div>  </div> </div> <div class="adwrap"> <script type="text/javascript"><!-- google_ad_client = "pub-1103643514001337"; google_ad_width = 468; google_ad_height = 60; google_ad_format = "468x60_as"; google_ad_channel ="0994997786"; google_color_border = "CCCCCC"; google_color_bg = "FFFFFF"; google_color_link = "000000"; google_color_url = "666666"; google_color_text = "333333"; //--></script> <script type="text/javascript"   src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div> <div id="labfooter">  <p><a href="/lab/">Lab Index</a> | <a href="/">456 Berea Street Home</a> | Copyright &#169; 2003-2007 Roger Johansson</p>  <img src="http://www.bloggportalen.se/BlogPortal/view/Statistics?id=910" alt=""> </div> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script> <script type="text/javascript"> _uacct = "UA-78628-1"; urchinTracker(); </script></body> </html>]]> http://www.kingmx.com/article.php?id=14889 2007-1-6 http://www.kingmx.com/article.php?id=14888 2007-1-6 http://www.kingmx.com/article.php?id=14887 2007-1-6 http://www.kingmx.com/article.php?id=14886 2007-1-6 http://www.kingmx.com/article.php?id=14885 2007-1-6 http://www.kingmx.com/article.php?id=14875 2007-1-5