非设计师谈设计一胖胡斐谈改版

　　设计是一件好像人人都能看懂的东西，所以常有设计师抱怨老板指手划脚、客户不懂装懂。我们认为，设计是一门综合性极强的学科。可以说，它就是人人都能看懂，只不过，大家都是从自己的角度来看。设计师说用户体验说视觉说风格，客户、老板说商业说运营说营销，开发工程师说技术说实现。这些都是设计师要了解，要倾听，要理解的现实，一个只考虑用户体验的设计不会是一个好设计，除非这个设计的目的就是为了展示用户体验。对绝大多数的商业设计来说，用户、商业、技术的完美结合，才能产生出完美的设计。
　　从这个角度考虑，我们决定在这个blog上陆续载一些非设计师谈设计的文章。当然，我们会先从淘宝的牛同事们开始（窝边草容易吃）。第一期是我们Super可爱的胖胡斐，他是淘宝资深的营销专家，投广告无数、做活动无数，对设计如何支持商业目标有独道的经验和见解，被誉为淘宝设计部之外最牛B的设计师。
　　胡斐这篇谈Apple改版的文章分了两部分，前半部分纯谈设计，后半部分从营销谈设计。希望设计师们从一个非设计师的眼中，可以看到对设计不一样的理解
　　我从来不否认apple在我眼里就是神，因为它是教父级的品牌，喜欢apple带着信仰的。就像我前两天会翻来覆去看iPhone的电视广告，没有想到一个产品可以做成这样，没有想到一个产品广告可以用单纯的产品把消费者利益说的这么清楚。iPhone电视广告看这里。
　　今天说的，是apple网站改版了。准确说是今天早上发现的，具体什么时候改的我都不清楚，一周前访问的时候还没有改（后来确认是北京时间12日，和WWDC2007一起改的）。我习惯经常上一下apple。com，因为总有很多值得学习的地方，比如表达产品卖点的方式，比如产品照片拍摄的角度，比如网页布局的安排，等等。apple网站和taobao内容比起来可能是几万分之一，几乎是静态的，但是人家的访问量一直是TOP100以内。很多人把apple。com像apple的产品一样当成艺术品来欣赏。
　　先看首页，改动最大的就是这里，简单说，变成了黑色，也就是Leopard的风格。我拿现在的apple。com。cn网站来比较（基本上这个就是原先apple。com的中文版）。看上去更酷了吧？乍看上去也就是变了颜色，其实改动非常大。
　　首先，页面变胖了。淘宝前段时间变胖的时候我们的UED还有过一篇文章记录。以前apple实际宽度是适合800像素的，现在完全是全屏1024宽，更宽敞。可以放更多东西。
　　导航重新组织重新设计了，这是最大的变动。这不光是重新设计了，最重要的是重新组织了导航。我们看下面，以前是2级导航，选了一层之后还有另一层需要选。现在不用。第一层，apple按照主打产品分类，也就是在用户心中，提到apple，会联想到的产品：Mac、iPod、iPhone非常简单非常直观。
　　做了一年的活动，和大少爷总结起来，把信息进行分类应该是最重要的环节了。帮助用户更快更方便的找到自己想要的东西，这才是设计。
　　导航上增加了search。这个早就该有啦。Mac风格的搜索栏很简单。
　　一直都觉得apple的首页很好看，简单画了一个首页的iBoard（诠释的dalson台湾GG跟我说的词，一般我说页面Layout和视觉路线）。我们会发现，它具备了好的平面设计、好的网页设计所必须的关键条件。
　　只有一条视觉路线：我们说好的网页能够引导用户的视线，用户不会不知道往哪里看，不会不知道什么时候该不该拉滚动条。同时，让用户花最多的时间在最重要的信息上，理解为在重要元素上的视觉路线最长。
　　只有一个视觉中心：apple网站的视觉中心太明显了，就是中间的大图，经常会换，永远是推他们目前最重要的产品。
　　接下来，我们看内容页面。就点首页的Mac电脑进去，我们分别看到内容同样的界面。我印象里面白色版本的Mac主页已经是变胖后的了。变胖之后，分栏的方式改成了平均分，以前是左7右3的。记得承志说过，网页作成1024宽的，分列就特别重要，分成4列的话，用户会找不到东西。所以163、sina改版变胖后用了3列。我们发现apple现在是2列，大家可以体会一下拉着滚动条从上往下拉的时候，眼睛是不需要左右晃的，不像3列或者4列的，这样就会让用户比较轻松。
　　在内容页面发现一个重要变化。页面下面都放上了导航区，像下面这样的。包括了所有的相关内容导航。这样有些网站也做过，像flickr。可好几十行文字放到一起还能这样漂亮还真不容易。注意到他的信息分类了么？在这里Mac又分成了硬件（Macs）、软件（MacOSX）、网络服务（。Mac）、应用程序（Applications）、附件（Acceseries），之后每一项又分出来。看上去有点象我们的类目，但是更加清晰。不能让用户迷路，可能是设计时最重要的考虑。
　　（看过评论之后加的这段，感谢mimiqiao）：最早在网易上看到一篇文章，说到了这种TabbedBreadcrumbNavigation（看这里），又找到了原文。Yahoo就是这么做的，但我肯定apple这个更精华。
　　原文介绍的：TabbedBreadcrumbNavigation，原文看这，中文评论看这里。
　　接着点，看到Store也做了小改动。变宽之后的页面分成三个大列，分别是产品导航、产品价格和图片、店铺信息。这是一个品牌的产品售卖页面，它不可能做成促销感很强的，但是我实在没想太明白，这么大量的留白，像做平面稿一样的做这个页面好像很难直接促成销售，不过apple也不指望这个地方销售。
　　iPodiTunes这个页面变化太大，变得漂亮极了。除了cool我真的没什么语言来形容这个页面。值得注意的是产品出现了横向的滚动条，看到没？第一次看到横向的，是在一个俄罗斯网站，但远没有这感觉。曾经有人说过一个忌讳，就是不要让用户向下拉同时还要向右拉，那是很shit的事情。说实话apple有点大胆，这种横向的滚动条并不是用户习惯的操作工具。用户不知道，他们会觉得无所谓，知道了，要么觉得好cool，要么觉得垃圾。所以，如果我们的设计没有达到apple这种水品，这样冒险的事情要多想想喽。
　　另一个地方，iPodShuffleII的首页，其实老版本的也有，就有一个很有魅力的地方。又会说到营销上产品的魅力属性，就是说有一种产品属性，如果没有，用户不觉得不应该，但是如果有了，用户会觉得相当体贴，更进一步，如果原来有后来又没了，用户会觉得你极其SB的。就像下面这个，每次刷新会随机出现一种颜色的Shuffle，右上角可以选择颜色，超级大的图片会显示你的Shuffle，然后下面的buynow和产品包装图片也会跟着变成你选的颜色。很好玩，也会再次彻底爱上apple。
　　换一个角度说这个事儿。上面是设计，下面说这件事儿看到apple的品牌管理和整合营销传播。
　　Apple是当之无愧的快品牌（《快品牌》是本书，详情，购买），从2001年第一台iPod上市，apple就开始了它严格到BT的品牌管理。所有接触过apple公司的人都知道，apple专卖店里面的每一张单页都是从美国直接邮寄的，中国和任何一个驻外公司没有资格印制或者散发任何自制资料。这也就是我们看到任何一个地方的apple专卖店都是一样的，任何一款产品的单页都是一样的。这就是我们说的传播的一致性。对于apple这样的快品牌，这样曾经在199x年没落了的品牌，迅速发展过程中必须要做的就是严格保持传播的一致性。apple要做到，在任何地方，看到任何一个局部，都可以让消费者明确认出（recognize）这就是apple。百年老品牌要如此，高速成长品牌更要如此，否则会在成长起来之后失去根基。
　　要保持一致，所以我们看到iPod做了5代变化并不大，所以我们看到Mac电脑无论怎么变都是Simple，所以我们看到apple的鼠标无论如何都是看上去只有一个键因为apple必须保证它的品牌精髓渗透到每一个产品的每一个地方。iPod也是一个品牌，方框中间有个圈圈的基本造型永远都不会变，因为在消费者心中，这就是iPod，任何一个人用铅笔10秒钟内能画出的iPod就是这个样子，在传播的时候，一致比创新更加重要。
　　要保持传播的一致，所以apple必须在每一个接触点上都保持传播的一致。接触点是IMC（IntergratedMarketingCommunication整合营销传播）中一个重要概念，就是品牌能够和消费者建立沟通的地方。同一时间，在不同接触点上保持传播信息的一致非常重要。所以，apple在WWDC2007推出Leopard的同时，将apple网站改版了，就改成了Leopard的样子。正因为网站是和消费者沟通的重要接触点。WWDC可以同时跟3000多个工程师沟通，但是和全世界数亿喜欢apple的人沟通，只能通过网站和专卖店。因此，当apple把Aqua风格的Mac放进历史的时候，也是把Aqua的网站改版的时候了。这告诉消费者两件事：1。Leopard是apple最重要的产品，我们所有的形象都在因它而变。2。是时候和你的Aqua说再见了。换句话说，网站改版，对apple来说传播意义要远大于实际意义。
　　有个不一致的，就是看到主导航的内容变化太大，很多人也在猜测是不是apple的组织结构也在发生变化。这无所谓，关键是，这是从消费者的角度出发的分类方式，原先的更加倾向于产品分类。这也同时传播给消费者一种信息：你想到的全部的apple就这些东西：Store、iPodiTunes、iPhone、Mac至少，我以前想看Mac电脑一定要从二级分类的硬件产品里面再点一下才能看到，现在不用了，因为我干吗要关心Mac在apple眼里是硬件还是软件？也就是说，改版，让apple和消费者的沟通更加顺畅，距离更加近了。
　　到这吧，事情实在太多，本来想分享一组广告的。下次。
　　【转载自：TaoBaoUED】PS：我发表转载的时候，添加图片老是失败呢？难道我人品不好？纠结