网站的首页是一个让人头疼的东西。有时它看起来很简单:首页就是网站内容的整合,一个产品经理随便从网站里拿点东西出来,就能堆出一个看上去靠谱的首页。也正因此,它往往非常麻烦:很多人都可以发表自己的见解,而这时交互设计师的一些手段(比如流程图、概念图等),在面对首页设计时也难派上用场,以致最终陷入到无尽的争执中。所以,本文希望寻找一些实用的方法一定程度上帮助设计师来决策,也让大家在争执过程也有些共同的依据。

首页之所以难设计,我认为因为它不仅要解决用户“能做”的问题,更多时候要解决用户“想做”的问题。“能做”对应的是可用性,相对容易解决,专家评估、可用性测试可以很有效地帮助设计师;而“想做”对应的是PET(Persuation,Emotion,Trust,说服、情感、信任),可能涉及到心理学,人种学,营销学等陌生的知识,交互设计师在这方面就不再是专家了,但一些经验和方法仍可以有效,下文中会讲到。
将可用性和PET分开考虑
浏览首页的用户基本分为两种:有目标的用户和无目标的用户。Alan Cooper的“目标导向”理念告诉我们,用户的目标驱动任务,有目标的用户直接开始“任务”,我们只要为他们解决可用性的问题。而那些无目标的用户,他们只是随便逛逛,需要首页的PET足够好,将此类用户“转化”成有目标的用户,尽量避免他们“流失”。

所以我将浏览首页的用户分为这两类,针对两类用户不同的特点来进行设计,会让我们的思路变得清晰。

一些现实例子
谷歌首页
对于搜索型产品,所有用户都是有明确目标的,即便首页是多么“死板”,因为没有任何干扰,用户都可以迅速进入自己的任务。所以谷歌首页没有任何PET的内容

赶集网(或58同城)
这类网站的设计也完全服务于“有目标的用户”,把“无目标用户”无情地抛弃,本人觉得这种设计并不是最高效的方式,因为毕竟浪费掉了大量用户。

京东商城
对于电子商务网站,存在两种典型的用户情景:
理性消费者,想要找的东西很明确,或者挑选的范围很小,这就要求首页有很好的可用性,帮助他找到商品,如下图中的蓝色部分就是服务这类用户。
冲动型消费者,并不知道自己需要什么,只是随便看看有没有合适的或促销的东西可以买,这就要求首页有很好的PET,吸引用户点击,如下图中的红色部分就是服务于这类用户。

倘若京东商城不考虑无目标的用户,也许首页就会长成下面这样:
对于想找商品的用户,也许更方便直观了,而对于没有目标的用户,就只能离开了。

人人网
对SNS类网站来说,用户大多数时间是在“随便看看大家都在干什么”,当然也有时,用户来到首页进行发表日志,上传照片等目标明确的操作。

讨论:“随便看看”是不是一种用户目标?
我觉得不是,“随便看看”不能直接驱动任务,故不能用来测试产品可用性;在可用性测试中的任务设计时,随便看看不能作为任务。“随便看看”的过程中,用户决定要做某件事了,这才是用户目标。
澄清一些可能存在的误解
服务无目标的用户的模块(如上面例子中的红色区域),并不是说不需要可用性,只是在设计的难度上,要把PET做好更难更需要思考,而可用性要求较容易满足。反之亦然。
比如京东商城中的促销模块设计,是很典型的服务于无目标用户的模块,PET要求能表现产品质量好,价格便宜,买的人多,存货不多等等难以表现的信息;而可用性只要求商品易浏览,可点击等,任何设计者都不会出错。
情非得已
21个Sketch实用高频小技巧2019-02-15
25款值得收藏的优秀网站模板免费下载2015-09-16
20套高质量的免费网页模版PSD素材2013-09-02
20款国外时尚大气的按钮开关PSD素材下载2013-07-31
CSS实例教程:十步学会用CSS建站2011-10-05
网页设计师:浅淡网页BANNER设计2010-09-27
网页细节教程:WEB设计精确点滴2010-09-13
网页设计中的点滴细节把握2010-09-01
总结交互组件创新的四种方式2010-06-28
最全的国外电子商务CSS模板下载2010-06-18
实例解析3种文档大屏适配方法
相关文章2632020-03-09
详细解析UI设计中搜索栏设计的技巧
相关文章6092019-03-31
5个网站设计实例解析网页设计趋势
相关文章4452018-11-29
详细解析iPhone 2018全面屏适配详解
相关文章2572018-09-14
解析2018年移动端UI设计趋势预测
相关文章5272018-01-11
浅谈WEB端布局框架的思考与设计
相关文章4912018-01-10
深度解析尼尔森十大交互设计原则
相关文章3552018-01-10
详细解析10个2018年网页设计趋势
相关文章5182017-12-17
