网站首页的设计

标签: 视觉设计 PET | 发表时间:2013-05-05 02:07 | 作者:标点符
出处:http://www.biaodianfu.com

网站首页的设计是一件非常让人头痛的事。虽然她看上去很简单:产品经路随便从网站里拿点东西出来,堆出一个看上去靠谱的页面。也正因此,它往往非常麻烦:很多人都可以发表自己的见解,以致最终陷入到无尽的争执中。

首页的设计相对于其他页面要难的原因是,其他页面更多的是解决用户“能做”的问题,而首页的更多要解决用户“想做”的问题。“能做”对应的是 可用性,相对容易解决,专家评估、可用性测试都可以很有效地帮助策划师或设计师;而“想做”对应的是 PET(Persuation,Emotion,Trust,说服、情感、信任),可能涉及到心理学,消费学,营销学等陌生的知识,设计师在这方面就不再是专家了。

从用户群体分,首页可以分为以下三种用户:不了解的新用户、有兴趣的新用户、老用户。

对于新用户而言,他们势必会问到这些问题:

  • 我在这能做些什么?
  • 这个网站能提供哪些对我很重要的东西?

对于已经有兴趣的用户也会有些其他的疑问:

  • 我应该怎么开始?
  • 我是否必须注册?如果是,应该怎样注册?

总得来说,首页应该解答新用户的疑惑并且帮助他们找到功能的入口;而对于老用户,则需要更明显、快捷的登录入口。《designing for the social web》一书将用户的使用分为几个步骤:不了解——感兴趣——第一次使用——常规使用——有情感。而首页对于前面三个步骤至关重要!

user

这样看来,首页有两个目标:

  1. 让不了解的用户了解网站并产生兴趣,最终促成用户使用。
  2. 让有兴趣的用户尽快开始使用。

从用户的浏览行为,首页又可以分为两种用户:有目标的用户和无目标的用户

Alan Cooper的“目标导向”理念告诉我们,用户的目标驱动任务,有目标的用户直接开始“任务”,我们只要为他们解决可用性的问题。而那些无目标的用户,他们只是随便逛逛,需要首页的PET足够好,将此类用户“转化”成有目标的用户,尽量避免他们“流失”。

target

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

design

在首页页设计之前,一定要做的就是调查分析网站用户,是“有目标”的多,还是“无目标”的多,以确定页面上两类模块的比例。一般网站同时兼顾两种用户。但“可用性“和“PET”这两点,存在天然矛盾,前者要求页面清晰,而从后者的角度来说,清晰意味着死板,后者要求页面丰富,而从前者的角度来说,丰富意味着杂乱。故在设计时要注意权衡。为解决上述矛盾,要求“可用性模块”和“PET模块”要明确区分,可以识别,不能相互掺杂。让两类用户能第一时间关注到需要看的部分。可用性是基础,一定要先做好,PET是更高要求,属于上层建筑,切不可为上层建筑放弃基础。

首页的可用性设计

  1. 尊重用户习惯,不要擅自创新,采用用户习惯的网站头,包括主导航,全局导航,搜索,LOGO。
  2. 突出导航信息,对导航内容进行分类,对导航信息进行一定程度的架构。
  3. 尽量保持页面布局规矩,使用网页栅格系统设计页面,最好不出现两列和三列混排的设计。
  4. 模块中使用尽可能简单的列表,简单列表更容易被理解和读懂,且设计运营开发成本低。

首页的PET设计

1、清晰表现品牌和产品服务类型。这首先实现PET中的Trust,只有用户第一时间了解网站品牌和服务(特别是一些大品牌),才能够立即建立用户的信任。但这个实践起来却相当有难度,特别是一些全新的服务,篇幅小了说不清,篇幅大了用户直接略过。可以采用 5秒测试来验证此目的有没有达到。

给一个新用户(目标用户)看首页设计5秒,让它说出:

  • 这是什么网站?
  • 这个网站提供什么服务?
  • 首先吸引你的是什么内容?
  • 这个网站和类似竞争对手有什么不一样吗?
  • 你对这个网站和它的服务有没有兴趣?

然后让用户仔细浏览该首页,再纠正上面的答案。另外想要用户容易记你的网站或品牌,你可以把你的网站LOGO放到网站适当位置,而且要配合网站风格,这样会比较容易让用户记住你的网站LOGO,在用户心中留下一定的印象,下次用户访问网站的时候,看到你这个标志就可以知道是你的。

2、使用吸引人的图片和标题。说白了就是标题党,虽然这招定被广大设计师唾弃,但它的效果绝对不容小觑。网站首页就像是一本书的封面或是杂志封面,它是用户浏览网站时第一眼看到的,因此,你的首页设计必须第一眼就能吸引用,否则它就失去了首页的用途和目的。你可以看大部分网站的首页,他们都是很吸引人的,你可以全色彩或者只有黑白,也可以利用有吸引力的图像与文字组合来创作你的首页。

3、使用非对称的设计,有主有次,展现丰富性。但注意,非对称设计会增加认知负担,降低可用性。

4、利用好数字来说服用户,因为数字“不会说慌”。比如限量限时促销,突出价格和价格对比等。

5、在首页显示其他用户的活动来说服用户(其他用户购买记录,评价,晒单等)。调查显示,让用户信任一个站点的最有效途径,就是在线其他消费者的意见。

6、视觉设计上要符合产品和服务的定位,在情感上与用户拉近距离。

网站首页的设计是一项非常重要的工作, 在实际项目中还需对更具体的场景进行分析、考虑运营性的需求、对单个模块的交互进行推敲,最终才能得到一个能吸引用户、留住用户的有效首页。

参考文章:

http://uedc.163.com/4327.html

相关 [网站 首页 设计] 推荐:

网站首页的设计

- - 标点符
网站首页的设计是一件非常让人头痛的事. 虽然她看上去很简单:产品经路随便从网站里拿点东西出来,堆出一个看上去靠谱的页面. 也正因此,它往往非常麻烦:很多人都可以发表自己的见解,以致最终陷入到无尽的争执中. 首页的设计相对于其他页面要难的原因是,其他页面更多的是解决用户“能做”的问题,而首页的更多要解决用户“想做”的问题.

社交型网站首页面设计分析

- - 互联网的那点事
本文希望通过对社交型网站主页进行的对比分析得到一些思考,并和大家分享探讨提升社交型网站的注册转化率的优秀设计原则. 一般来说用户注册转化流程大致由以下几个部分组成:. 1. 能吸引用户注册的主页内容;. 2. 简便、快速的注册流程;. 3. 有效的寻找、邀请朋友机制;. 4. 吸引新用户注意力的引导.

工具型网站首页的设计思考

- - 腾讯CDC
我们先从wikipedia上了解三组概念:. 工具:是指能够方便人们完成工作的器具. application:用来帮助用户完成某个单独的或是一组相关的工作的计算机软件. web application:指通过使用Web和Web浏览器技术,跨越网络完成一个或多个任务的应用程序,通常需要使用Web浏览器.

企业网站首页设计常见的6种布局方式

- - 飞鱼的声纳
在群里和大家交流时,看到太多的网页设计师发布企业站的个人作品,设计中总是摆脱不了大框套小框的设计布局思路,不加思索的跳入单一的网页布局形式中,于是就有了把企业站常用的页面布局方式总结一下的想法,让大家包括我自己全面的了解一下企业站的常见布局方式,做到对此种类型的网站布局心中有数,跳出狭隘、单一的设计思路,于是就有了这篇文章.

北邮网站首页被黑

- andi - Solidot
wmr 写道 "“北邮人论坛”的一个帖子的截图显示,网站首页被替换成一个“GFW不灭明年我还会来”之后是一些敌对势力网站的名称. 最嚣张的是大字“immmmm.com求GFW. ”稍有常识的人都知道,假如我们的人民公仆轻轻一碰指尖,这个螳臂当车歹徒的网站不就被封了吗. 然而该网站上并没有违法内容,所以也没有封,这只能说明,我们的网络管理,是完全依法的.

网站首页点击分布分析

- - 蓝鲸的网站分析笔记
首页,是网站中最重要的一个页面,通常也是被浏览次数最多的页面. 我相信在大部分网站的Google Analytics内容报告中,首页在 综合浏览量指标中都是排在第一位的. 同时,首页也是网站中最特殊的一个页面,他相当于整个网站的一个目录,为访问者提供了网站中最有价值的内容简介和入口链接,通过首页访问者可以到达网站的大部分区域.

首页设计的可用性和PET

- BEAsThAnG - 所有文章 - UCD大社区
网站的首页是一个让人头疼的东西. 有时它看起来很简单:首页就是网站内容的整合,一个产品经理随便从网站里拿点东西出来,就能堆出一个看上去靠谱的首页. 也正因此,它往往非常麻烦:很多人都可以发表自己的见解,而这时交互设计师的一些手段(比如流程图、概念图等),在面对首页设计时也难派上用场,以致最终陷入到无尽的争执中.

浅析网页界面设计-首页

- 多二度 - 所有文章 - UCD大社区
开宗明义,无论是对于一篇文章、一场会议或一部专题片,还是对于一个网站 来说,都是必不可少的. 那么能为一个网站开宗明义的地方(标签)就是Title(标题)和Description(描述、副标题),而能够为Title和 Description提供进一步诠释的就是网站的首页. 页面的重要性是建立在它所呈现信息的基础之上,反过来说,页面要向用户展示哪些信息是决定其重要与否的首要指标.

内容首页设计经验

- - 坏脾气的小肥
前些日子,有位老同事来和我讨论频道首页的设计,这才想起来我原来是做媒体的,以前还画过不少内容页面原型. 悲惨的是,我对内容页面的理解在转型产品后才渐渐成熟,以前画的那些都挺平庸. 做媒体的又有几个人去研究内容界面的交互心理呢. 过去从实践与反省中得来的经验之谈,不妨讲讲. 第一条和界面设计没关系,和定位有关系.

国内三大B2C网站首页的信息架构

- yonghai - 所有文章 - UCD大社区
随着电子商务的成熟,国内涌出了很多B2C网站,我经常访问的有:当当网、1号店、京东商城、易迅网、为为网和新蛋网等. 这类网站很好的利用了计算机技术、互联网技术、即时通信技术和物流渠道,实现整个商务过程中的电子化、数字化和网络化,让不少用户得以不出户购天下物. 在访问这些网站的过程中,我发现其首页的信息架构拥有一些共同特点,也有各自的特色,遂以京东商城、新蛋网和易迅网为例,撰粗评一篇,拿来分享.