思考电商桌面端首页设计

0 前提
笔者在本文当中针对的是电商中的奢侈品电商，而在这里笔者将奢侈品广泛的定义为那些客单价较高，主要满足中产阶级乃至高收入人群需求的产品。同时本文中的首页设计，针对桌面端的设计而言，其他平台的首页设计在本文暂不讨论。

1 商业需求的考量落地

绕开商业上的利益需求讨论电商首页设计几乎不太可能。从一开始，电商首页设计就是为商业需求铺路的，无论从导航与搜索——方便顾客搜寻与找回，到商品的展示陈列——方便顾客浏览探索，最终都是希望成功转化流量成为实在的销量。
要设计奢侈品电商，就要理解这类商品与日用零售类商品在品类上有着极大区别。在这里商品的购买过程中，消费者通常知识获取倾向更强这是因为对应商品价格较贵，同时购买人群普遍教育水平也较高。当然，用情感去驱动消费者，激发消费者兴趣，也是非常重要的辅助手段。具体落实到商业需求上，就是我们需要提供充分空间，清晰而突出重点的展现我们的商品与专题，同时我们也应该提供足够明确的导航与页面架构方便顾客搜寻与找回他们感兴趣的商品，进行进一步决策。

2 信息架构与信息传递

既然商业需求中，既需要吸引那些没有明确目的，随意搜寻的顾客，也需要帮助那些带有目的性的或是对目标品类有一定认识的顾客继续浏览过程，那么信息架构的设计也应该同时充分考虑这两个方面的需求。笔者认为，没有明确目的的顾客，更多是希望触发他们的情感引发他们进一步浏览与搜寻。那么随之而来页面设计就需要更多吸引他们的视线，在视觉与信息传递上都需要传达这种意图。对于那些目标明确的或是认知需求更强的顾客，就需要满足他们对于获取更多商品信息的需求。虽然这一点更多会体现在商品详情页的设计上，但是首页的导航以及分类体系，是指引顾客进入商品详情页面的重要途径。

3 我们身处的时代环境

* 屏幕分布率的变化
根据cnzz的统计表明，在2010年7月，1024x768是43%网络使用者所使用的屏幕分辨率，而1440x900和1280x800占据了18%与11%的使用率。现在，2014年8月，1366x768，1400x900分别占有20%的屏幕分辨率，而1024x768的占有率下降了一半，大概只有17%,而1920x1080,则占有13的屏幕分辨率。由此可见，屏幕分辨率变得更大，是大势所趋。
* 多屏幕
虽然本文的主要探讨内容应为桌面端的首页设计，但是桌面端的首页设计也没法绕开移动端的迅猛发展趋势。移动端迅猛的发展趋势带来的不仅是需要针对移动端重新设计，也促进桌面端与移动性必须充分整合。具体表现就是除了内容上需要有一定的一致性（否则顾客从移动端回到桌面就无法找回内容），也意味着设计风格需要统一，以传递一致的品牌形象。
与此同时，桌面端的设计不仅要考虑桌面端，还要考虑使用平板电脑浏览桌面端网站的页面兼容性。桌面端的设计如果能够兼顾平板电脑的浏览需求，在页面设计与布局安排上进行优化，那么或许可以采取流式布局而不必专门为平板电脑制作app或是移动站。
（在浏览习惯与场景上，桌面与平板比平板与手机更为接近。

* 潮流的变化
Android的卡片设计，iOS7的扁平化设计，不仅在移动应用上横扫千军，也同时影响到桌面端设计风格的转变。以往强调拟物高光，现在却偏爱简洁的纯色色块与图标。而随着桌面浏览器的升级换代，html5与css3也给页面设计带来更多灵活的空间。 html5 WebSocket 高效双向通信机制,对本地存储的支持，以及对圆角阴影等系统特效的快速处理的支持（虽然主要是CSS3的支持，但是背后也与html5规范体系的普及有关），还有对简单动画以及各种媒体更好的支持，都减少开发者的实现难度，也给web设计带来更多空间。

4 国内高档奢侈品电商首页设计趋势

*趋势

在笔者对国内主流奢侈品销售站点，如，天猫，寺库，优品，优众网，尚品网，珍品网，进行研究后，总结出当前电商桌面首页设计的趋势。
1 以天猫为基准 首屏简化页面逻辑与视觉层次，使用大型轮转展现商品海报。
2 第二屏以及后续的屏幕都在左边设置一定的导航，同时中间突出使用较大幅海报，旁边放置更小的海报（比例约为4：1）。这些后续屏幕背景多数是白色，内容清晰简单，而且大多数没有复杂的轮转与页面设计。
3 第二屏以及后续屏幕的视觉逻辑与信息架构都趋向于清晰与一致。
4 下拉扩展式的导航较为常见。

*具体启示

1简化轮转 限制数量
首页顶端没有必要使用过多轮转，反而针对这些轮转从视觉设计与网页制作角度，提供更多动效带来的视觉冲击力会更好，如第五大道的首页banner。

2提供视觉焦点 减少罗列
无论是主屏海报，还是后续屏幕的展示banner，多数奢侈品网站都更为强化视觉焦点，并且减少背景素材的使用，这样带来留白方便消费者关注于最核心的展示内容。

3右侧导航 节约空间
随着屏幕逐渐变宽，以及对空间使用的考虑，天猫采取了把顶部导航栏放置到屏幕右侧，节约纵向展示空间。

4采用动效 延伸页面
通过动效来隐藏与展现导航条与搜索栏，节约纵向展示空间。

5内容分组 减少组别与逻辑
强化第二屏以及后续屏幕的内容分组，提供逻辑明确但是无论视觉风格还是信息架构上都相似却有变化的区间分块。

5 总结 重新思考——我们为何而设计

电商首页的设计归根到底是为了促成交易完成商业需求，但是具体商业需求如何达成却有很多路径。电商经营有着多种策略，有些电商以价格与服务打动人，他们的首页设计即使较为混乱但是受众也并不在乎，有些电商面向日用品类所以更希望展现丰富的页面刺激消费者下单购买。不同商业模式与不同首页设计相互相承，具体的商业策略如果并没有仔细思考并且清晰传递到页面的设计与方案执行，那么结果必定大打折扣。
这里似乎陷入了一个死循环，而解开这个死循环，需要管理层与商业部门对于市场与用户的洞悉，也需要具体产品设计层面上积极听取用户反馈，理清商业需求到具体设计的层层转化。没有这些清晰的从上而下的架构，单单从下而上的简单优化，对于整体布局与风格的改善，可能恰恰是倒行逆施。