用户体验和UI 设计的总结[转]

 

最近由于自己要做一个小网站，但是还苦于找不到一个合适的美工和设计，只能自己上了。于是便看了一些关于用户体验和UI方面的书。

这个就当是个读书笔记吧。

1. 常规的页面布局

常规上来说，我们把网页布局按照分栏的多少分为一栏式，二栏式和三栏式。

对于一栏式页面布局来说，一般在页面上放置一个具有冲击力的图片或者Flash来给用户留下深刻的印象，但是，这样的页面所能够容纳的信息量非常有限。所以常用于企业网站，以及一些小网站的首页，用于让用户记住你的站。此外，对于功能性比较单一的页面，也一般用一栏式布局，比如搜索引擎，注册和登录页面等等。

二栏式布局是最为常见的布局方式，二栏式又分为左宽右窄和左窄右宽式。这两种模式的选择是由于网站的性质所决定的。对于用户来说，他的浏览关注顺序是从左到右，那么窄的部分一般来说都是导航栏，而宽的部分则是主体内容部分，那么用哪一种方式将取决于你的站是内容占主体还是导航占主体，换句话说，是内容驱动导航还是导航来驱动内容。

举个例子，拿www.dangdang.com来说，一般用户来买东西是有着明确目的的，他知道自己要买的东西是哪个类别，而对于主站的内容只是给用户的一个推荐。但是对于cnblogs来说，显然内容应该是大于导航的。所以其实在我看来，博客园的设计其实是并不合理的。

对于三栏式布局来说，最大的好处就在于容纳的信息量比较大，但是重点不突出，降低了用户对网站的可控性，因此一般意义上不推荐。

当然，如果当用户需要比较多样化的时候，也可以让用户自由来设计布局，多常见于个人博客。

2. 页面的通透性

页面的通透性是指尽量使整个页面的模块比例统一，同时通过线条，颜色等视觉元素增加各模块间的区分度，使得用户的视线轨迹可以有规则地通过各个模块，而不会被模块之间不规则的交叉所打断。

此外，根据“F”原则，也应该尽量将重要地，用户所关系地内容放在页面的左上角位置。

3. 页面的配色方案

每个网站都要有自己的主色调，主色调指的就是页面色彩的主要色调，总趋势，其他配色的综合不能超过主色调的50%（白色背景除外）。

在选择颜色的时候，不仅仅要考虑颜色本身所代表的含义，如安全，浪漫等，还有考虑以下几种因素。

A. 目标用户群体。不同的用户群体对于颜色的审美爱好以及理解都不同，其中包括性别，年龄，职业等。

B. 当地文化风俗。如中国把红色作为喜庆的颜色，而欧洲大部分却把红色作为杀戮的象征。

C. 网站的类型。如电子商务站一般用暖色调来刺激用户购买，而SNS站则营造一个轻松的氛围。而垂直类网站一般都与自己的领域特色相关。

D. 品牌形象。我总结一句话就是根据自己的Logo以及企业形象来选择色调。比如IBM就一定会选择蓝色作为主色调。

4. 页头和页尾

页头分为设计型头部和简约型头部。一般的大型网站，由于已经有着一定的网站知名度，所以无需在通过渲染头部来提高网站对用户的吸引力，加深印象。所以一般采用比较简单的简约型头部，比如新浪，腾讯，都是这样的效果。对于一些小网站来说，采用设计性头部给用户留下深刻印象，创造品牌效应，但是当设计性头部过于繁杂时，却使得内容的容纳量变小，从而造成一种头重脚轻的感觉。所以这个需要设计师的一种折中。

在页头上最重要的就是Logo，在现代网站的设计中，Logo起到两个作用，一个是标识，一个是让用户回到首页。

页尾一般来说并不重要，用户可到达的机会也少，所以尽量地去简化它，避免它占用内容所占据的位置。

5. 搜索区

现在的网站一般都带有站内搜索的功能，目前有两种设计方式。

一种将搜索淡化，因为搜索只是一种手段，适用于浏览型网站，我并不鼓励你搜索，而是希望你一条一条地看下去。比如说豆瓣。我希望你去看社区的动态，而不是希望你来豆瓣为了找人。

一种是搜索为主，最简单的就是淘宝。一般来说用户来电子商务站都是有着明确的目的，所以搜索是用户找到他想要商品的最主要方式。

另外，对于搜索框来说，如果你鼓励用户使用搜索框，在页面刚刚打开的时候，就可以让光标在搜索框上，这样用户可以直接搜索内容，而省去了一次操作。但是如果并非如此，就不要让光标在文本框上，因为这样用户变没有办法使用键盘来让整个页面下移。 

6. 登陆和注册

首先是究竟是淡化登陆注册还是强调登陆注册，这个取决于该站点的目的。两个典型便是新浪和豆瓣。对于新浪来说，需要的只是网站的浏览量，与是否注册关系不大，所以只是将登陆弱化，没有登录一样可以享受基本所有权利，其中包括“匿名”评论等功能。而豆瓣以及很多SNS站点都需要来通过用户注册来扩展好友关系，所以在豆瓣的首先都是将登陆注册放在最显眼的位置，然后用一些优点来煽动用户注册。

但是个人认为随着SNS站点的逐渐做大，虽然不会像新浪等资讯站一样如此弱化用户的登陆注册，但是也不会在将登陆注册变为浏览，发帖等必须的一部，而会将匿名作为可选的一项。而新浪等资讯站随着发展，也会逐渐地走向社交网络，从而在网络中达到一种资讯站与SNS的折中。

7. 关于广告

广告从来都是互联网的主要盈利手段之一。可是不得不承认，没有人喜欢看广告。因此广告主和用户之间总是存在着无可避免的直接矛盾，而且一定意义上，网络广告没有任何约束，这也就导致了网站广告的混乱和不合理性。

但是我们在网站中穿插广告时，应该保证我们自己网站不会影响用户的浏览。

首先，据调查，用户最能接受的广告形式是游动式广告和横幅式广告，而弹出广告和邮件广告是用户最讨厌的。

其次，从布局上看，我们不能让广告切断页面的相关内容，因为很多用户一旦看到广告就会习惯性地认为该页面的内容已经中止，不在继续浏览了，所以这样的话会影响整个网站内容的关联性。

然后，我们要避免过多的广告同时出现。也要规范网站广告的尺寸大小。

8. 表单的布局设计

这里就从注册来看，这个是最典型的表单。

从布局上讲分为三种方式，其中包括垂直对齐，左对齐和右对齐。

垂直对齐的优势在于可大量减少眼睛一动和填写表单的时间，但是缺点在于增加了垂直的空间，当注册项较多时，会增加页面的滚动。适用于搜集的信息和资料是熟悉的，需要较少的完成时间。

左对齐便于用户浏览标签，同时会减少垂直空间。但是如果某标签过长，则会造成文字与文本框距离过远。适用于对所需的信息不熟悉，而且标签文字不会太长。

右对齐则让左边参差不齐的空包让用户很难快速检索表单要填写的内容。

另外，在设计时，最好将注册时相关的项进行分组，这样可以让用户以尽可能少的视觉元素来分出关系，避免视觉噪音。

对于很多选项来说，不妨提供默认选项，来尽量减少用户的操作。并且给予适当的提示来给予用户帮助，记得一定是适当的，不要过多。

此外，还可用一些较大的字体以及间距，不要让用户产生局促感。

9. 模块标签

模块标签，就是用于页面内某模块中，在内容上方使用一列标签形式的链接进行切换。

使用模块标签时，首先一定要具备一个最基本的前提，内容必须都相对独立，不能存在上下文的关系。

在设计模块标签与下面模块内容时，我总结为两点：突出对比和加强关联。

突出对比是说，突出已选中标签和未选中标签的对比，而加强关联是说加强以选中标签和其内容模块的关联。

10. 按钮

首先要用较大的，与背景色形成鲜明对比的按钮来使所需主要强调的按钮从网页中跳跃出来。

其次，我们需要根据按钮的主次来选择性强调和弱化某按钮。但是同一个方式的弱化，可能到另一个方面则会是强调。这个需要根据经验来结合之前的知识来考虑。

还有也要注意按钮的摆放位置，比如说用户的视线是从上向下，从左至右，这样用户也会依照这样的顺序做出选择。

11. 反馈

Nielsen可用性原则中有一条痕重要的原则，就是系统必须提供必要的反馈。其中包括成功提示和失败提示。

成功提示是最简单的一种提示，他应该仅仅起到提示的作用，而不该中断用户的操作。我们应该只需要让用户知道就可以了。不应该让用户进行任何不必要的操作，比如弹层就是一个非常愚蠢的做法。

失败提示是很重要的提示，从理论上说分为两种方式，一种是直接在网页上用文字提示，一种是弹出警告框来提示。但是我个人认为弹出警告框是非常不可取的，因为最重要的一点是alert的时候会发出声音，这样的用户体验是非常差的，所以自己做一个弹出层倒是一个折中的做法。

还有一个很重要的是错误页面，比如说404页面，优秀的404页面应该能够改善用户的不良体验，减少用户的挫败感，还应该将用户引导到他原本打算去往的相关联的去处，以减少用户的流失率。

关于进度条，据研究表明，超过1秒就要提供相应的提示信息，比如进度条，而超过10秒就不仅仅需要提示信息，还需要提供完成的百分比。

12. 其他个人想法About验证码

比如说验证码，验证码是用来防止恶意注册的，但是不是用来防止正常用户的，我们不应该让用户因为验证码产生挫败感。如果让我设计一个验证码，我会将英文的“O”和数字的“0”，英文的“L”和数字的“1”都排除在验证码之外。

此外我有个想法是觉得，首先，密码是在post回去的过程中是无法保存原有状态的，所以唯一的办法只能是ajax回发验证。但是在何时Ajax，只能是在失去焦点时。所以我认为最好把验证码放在页面最顶端，这样用户比较容易离开焦点从而触发Ajax验证。

 

来源：http://www.cnblogs.com/kym/archive/2010/11/17/1879486.html