网站设计要点解析

类别：品牌设计
内容简介：在交互设计中，存在着几条普遍的法则令网页设计更有效。最重要的一条是“别让我思考”，越简洁越好。绝大多数主流电商的网站主页都被信息塞得满满的，它们把首页设计成货架式，尽可能地将商品铺开，把网站整体的信息架构展现出来。

关键词：

作者: 许诗雨朱小坤

设计师的每一个动作，都能看出背后电子商务正在发生的变化。

京东商城变得好看了一点。

2月初，京东推出了最新的页面设计，页面宽度扩展到1210像素，同时改变了原来单纯按照品类划分的展示方式，新首页将按照主题划分在6个楼层里。每个楼层再设1个特价商品和4个商品分类标签，而不是原来以“疯狂抢购”和“特价专区”为主体的页面结构。

这个改动的核心变化是：在页面没有变得更拥挤的前提下，增加了60个广告位。因为看似宽泛的大类，其实每个标签下容纳的商品信息增加了，如果考虑4个滚动商品信息位的话，视觉上并没有给用户增加负担。2周后，京东拿掉了新版主页上的“返回旧版”链接，正式完成页面改版。

虽然仍然有用户抱怨他们需要不停地滚动屏幕，商品展示也太过眼花缭乱，但仅仅从视觉效果上看，京东似乎已经在努力去除那种嘈杂的浏览方式。不是尽量多地展示单件商品，而是尽量多地展示产品类别：这符合京东想变成百货电商的意图。

网页设计师Steve Krug在他写的那本《点石成金—访客至上的网页设计秘笈》里说，别妄想用户会认真地看你所设计的每一个板块，他们不是阅读，而是扫描。

在交互设计中，存在着几条普遍的法则令网页设计更有效。最重要的一条是“别让我思考”，越简洁越好。比如不要因为奇怪的表达方式强迫用户停下来思考，“搜索”要比“快速搜索”体验好。

“每个问号都会加重我们的认知负担。这种干扰也许很轻微，但它们会累计起来，有时候这样的干扰不用太多，就足够让我们抓狂。”Steve Krug说。

网页的外表其实并不重要。如果它好看，当然更好；如果它不好看，可能京东会有更多的思考。

绝大多数主流电商的主页都被信息塞得满满的，它们把首页设计成货架式，尽可能地将商品铺开，把网站整体的信息架构展现出来。因为消费者在购物时往往没有确定的目的，商品展示和推荐可以刺激他们的购物欲，产生更多的二次跳转。

有图片优势的奢侈品网站大多都不会考虑货架式的首页设计，比如阿玛尼在线商店，因为它存在的目的里，品牌展示意义大过卖货。团购网站吸引用户的有效做法是省略不必要的文字，仅仅展示诱人的图片加诱人的价格。

单就电子商务网站而言，它们除了B2C，还有B2B2C；销售的类别早就突破了数码产品和家用电器，向百货类进发；也有专注于创意设计单品和奢侈品；而最近火起来的Pinterest式网站，用像瀑布一样没完没了的载入方式不断呈现更多单品，而图片的组合方式又不会让你觉得粗陋无趣。

青蛙设计创意总监Mario Van Der Meulen最欣赏这样的电子商务交互体验：我来买东西，你记住我是个男性用户，而且我喜欢相机。下次再来购物时，左右的推荐栏中就出现了相机推荐，亚马逊就是这样。

他认为就B2C而言，如果用户的购物步骤从原先的7步减少到3步，同时网页设计师的设计令用户买了更多的东西，那就是有效的。

但是绝大多数电子商务网站都会在用户选择“去购物车结算”时，加入一个推荐购买页面，类似再买多少钱就可免运费的凑单页面、“购买过这件商品的用户还买了”页面，或者是“猜你喜欢”。这个设计增加了用户购物流程，有违简洁的原则。但是就像有人喜欢自助购物，有人更喜欢有店员推荐一样，这一步设计虽然使一部分用户要多点击一次才能完成购物，但却满足另一部分用户“逛一逛”的需求，而且有机会帮网站提高客单价。

Mario说，简洁可以是画面上的，也可以是操作上的。比如从偏重增加高光、亮丽的水晶按钮、图案的页面设计，向Windows 8的大方块靠拢是一种画面上的简化。然而，好的设计并非单纯做减法，一个成功的网站同时还应加入特有的品牌身份标识。把亚马逊、苹果的Logo拿掉，仅看页面，你还是能一眼认出它们。

名叫Gilt.com的精品购物网站，在Mario看来就在满足画面和操作极简的同时又具备独有的品牌特色上做得很好。它采取类似Windows 8界面的商品及图片的简单展示，无需跳转页面，用户将鼠标移到他中意的商品图片后，对应表单下方就会显示出S、M、L各种尺码是否有库存，点击尺码就能直接进入购物车。它还会记住你的信用卡号码，下次购物时你只需输入信用卡后三位安全码即可，省去了复杂的购物程序又保证了安全感。

更多人已经逐渐用移动设备购物，这要比网页更加简单。凡客来自移动客户端的成交量已经达到10%，乐淘网2011年7月份来自手机客户端、Wap站点的订单量占总订单的比例已接近20%。而2012年，美国移动电子商务销售额将达60亿美元，这个数字在2010年为30亿。

京东的设计师对这次化简为繁改版的说明是由于战略改变。为此他们才扩充了品类，让更多二级页面的促销信息浮上主页，希望能迎合女性消费习惯，带来一种逛街感。

从去年8月开始，京东对网页的设计做循环的持续改进。王宇是京东商城用户体验部门的高级经理，他的团队有40人左右，分成交互设计、视觉设计、前端开发、数据支持和测试四个小组，每次修正后他们后续根据用户点击情况、跳转率、周围人感性反应等多种途径的反馈再做修改。他们还在网页上设置问卷，征求用户意见。

而在国外的同行们看来，最有效的办法是做用户测试。细微差别的优劣令人难以决断，但操作时的直觉会显现出区别。Krug坚持，如果想建立一个优秀的网站，一定要测试。为一个网站工作几个星期会让设计师失去新鲜感，测试会提醒设计师不是每个人的想法都和你一样。

针对首页变宽问题，京东相关负责人称首页能够根据显示设备的尺寸和分辨率自动切换尺寸，以满足移动用户的视觉效果和操作体验。但事实是，即使使用宽屏显示器，喜欢开着收藏夹的用户不得不来回滑动滚轴才能看全京东的主页。

京东的交互设计师们很苦恼，负责交互设计的赵汗青告诉《第一财经周刊》：“有些需求是彼此互补的，要做的是想到一种好的执行办法。有些需求不是那么互补，那就是商业力量之间的较量。商业设计领域很难说哪个设计是最好的，只能说哪个设计最有效。”

他承认，从用户角度一键下单最好，但为了让用户买更多，他们会在用户选好后增加一个推荐页面。设计师每天做最多的是选择题，给用户带来的收益是否超过给他们带来的麻烦。“所以说纯艺术家都疯了。”

由于痛苦选择产生的分裂在第一屏和第二屏形成了鲜明的对比。不少用户很喜欢第一屏，居中后突出的搜索框更顺手，横向分类导航更精简，在第一屏就能看见手机充值，彩票，机票信息，用起来更方便。而对于第二屏开始的改变，他们觉得冗余。有不少互联网媒体直接将其解读为为了增加广告位，赚取广告费。

广告是电子商务网站的一大收入来源。大型电子商务网站能像一个房东一样把页面位子租给某个品牌，让某个品牌自己去打理。任何项目，只要在主页上有一个醒目的链接，肯定会得到更多的访问量，这会让其他的利益相关者想到：“为什么我不来一个？”

根据Business Insider的报道，亚马逊正在快速扩张自己的广告业务，他们不仅出售自己和第三方合作伙伴的商品，而且开始介入出售那些与它没有合作关系的第三方机构的广告和链接。亚马逊将这些广告和链接置于商品页面的底端。依靠这样的方式，亚马逊每年大约从中获得近10亿美元的收入。如果考虑到亚马逊在电子商务的领导者角色，这已经足够让另一个广告公司─谷歌心生忧虑。

广告总是跟购物在一起才完美，但在Krug看来，这种盲目扩充主页推荐量的行为总是反复出现。“问题是，在主页上增加更多项目所得到的和付出的并不一致。得到推介的栏目获得了巨大的访问量，而由于主页变得更混乱而造成的有效性总体损失则要由所有的栏目一同承担。”

所谓改版，必须做到现在做的东西必须比以前好才是成功的。无论出于怎样的商业目的，如果不注重用户体验，用户最终都会跑到其他网站上去。用户永远不会排斥更容易、更快速、更简明的交互体验。

设计的价值，可能跟技术、平台和广告都有关系。Pinterest瀑布式页面设计之所以让很多网站趋之若鹜，因为它给“如何使用户黏在页面上”带来了新思路。在你看着网站不断载入内容的时候，你的时间也不断流逝，但你不会感到厌烦。

Mario说：“我并不介意瀑布式的加载，因为它有运作良好的现场感，可以使我们无尽地发现还有一个庞大而活跃的社区。”对于购物网站来说，没完没了……没准也是一件好事。

本文转载自中国互联网行业社交媒体-速途网：

上一篇： 标准的中式信封的设计
下一篇： 随笔：芬兰人生活中的设计

网站设计要点解析

最新品牌设计案例