用户体验设计原则及案例解析(上)

用户体验设计原则及案例解析（上）本文要点：1. 建立对于设计原则的理解2. 告别设计中设计技法的“堆砌”3. 增强用户体验设计与设计技法相结合的意识其实设计师平时做设计的工作，可以比作成人在走路或在跑步，走路和跑步的原理是需要两条腿相互配合才能完成跑步的动作，做设计也是一样。

设计技法是非常重要的一条腿，熟练的运用设计软件来完成，ICON的绘制、页面的设计、运营活动的设计，这都是非常重要的。

但是其中还有另外一条腿，就是另外一项设计师非常必备的思考方式，也就是用户体验设计的一些原则。

一定是这两者相互配合，才能够完成设计师的跑步的动作，来完成一个真正既能够体现你设计能力，又能够符合用户真正使用场景的设计，也就是我们这里面比喻的跑步。

这些原则说起来似乎高大上，触不可及，但其实是非常的接地气的。

下面请看一个界面的案例及设计师对各界面的反馈：界面一：如果作为一个用户，如上图左的页面，我会觉得看起来特别不好用，想退出这个界面。

因为它太小了，这上面的字第一次看到之后，就会觉得看的特别不清楚。

我看到这个页面的第一直觉是想跳出，第二如果我必须要登录的话，我会把它放大，然后去输入，还要把手机拿得近一点，这样凑近了看，可能就会清楚一点。

界面二：如果用如上图右的页面来登录，我是用户的话，打开这个页面会发现，它的文字信息比较多，然后再仔细看这些文字的时候，会发现它的信息层级会比较少，我想找的重点信息不容易发现。

阅读顺序方面，我读这个页面会从上往下读。

而操作方面，会觉得按钮太小了，可能会误操作。

界面三：如果用如上图左这个界面，作为用户来注册一个百度账号，看起来挺不错的，只是要输入的内容其实还挺多的。

但跟之前的两个界面相比，这个至少操作起来比较简单。

另外，有一点不太好的，我上面要输数字，下面要输拼音和数字，感觉还是挺麻烦的。

界面四：如果是如上图右界面来做它的注册，我觉得这个就省心多了，相当于基本上没有什么操作步骤，直接连调出键盘都已有了，可以直接输了，所以看起来就不太需要想，可以直接用。

从大家如上的意见反馈中可以看到，大家心目中评价这些界面好不好用，其实有非常多我们所涉及到的设计原则点，包括它是否好看见，是否可读，包括这个操作起来是否麻烦 是否可点。

其实这四个页面我选的是非常有故事的，我们来看看这四个页面背后的逻辑。

其实第一个页面不是一个移动端的页面，完全就是一个PC端的注册页面。

不过我们把它放到手机上面来看，而且放上来的时候没有做任何的适配，可以看到内容非常的小。

如果不进行放大的话，你是什么内容基本上都看不到的，它的可视性会非常非常的不好。

当放大之后，你看到页面当中的一部分信息，当输入完手机号之后，又要非常大面积的往下滚动，才可以又看到下面的输入框，操作起来又会造起来很麻烦。

所以这种操作在PC端的时候是非常好用的，因为电脑会有一个非常大的屏幕，然后用鼠标来进行操作，可以精确点击你想点击的输入框，点击你想点击的按钮，操作起来都很方便。

但到了手机端，可视区域就会很小，同时操作起来又会相对麻烦一些，这个界面就显得非常不好用。

而第二个界面背后的逻辑在于，这种界面在功能机的时候不会有问题。

因为功能机的界面会比较的小，刚开始只看到页面一部分的内容，这样输入用户名，然后再通过这个方向键往下一拨，输入第一次密码，再往下一拨，输入再一次的密码。

在功能机的时候，操作还是比较方便的，也比较符合那个时候界面的这种尺寸。

而现在，一次性展现如此多的信息，输一次用户名、两次密码，选择性别，再点击确认。

所有这些东西全都呈现出来的时候，作为用户来讲看起来压力会很大，无从读起。

同时，操作时这个小的这些控件又会很难点，因为它的操作尺寸。

如果大家了解移动端的设计的话，个像素点会是一个比较好点的空间，而现在这个会很难操作。

比如下面有一个输入框、一个下拉列表、一个确认按钮，当用户来点想点这个控件时，点三次，可能至少有两次点错了原本想点的东西，其实操作起来是不太方便的。

而第三个界面，听起来大家的反馈的意见会少一些，起码觉得它还相对的可用。

第三个页面也就是一个比较标准的手机端的注册页面的设计。

可以看到上来让你输一个用户名，然后下面是进行一次密码的输入，下面来点击注册。

整体来讲，页面的布局很清爽，内容并不是很多，每一个控件的可交互区域也都会比较合理，手比较好触碰。

同时如果细心一点的用户可以看到，第二个页面和第三个页面的区别。

第二个页面可以看到，它输入密码的时候是两次的输入，来完成了这个密码的设定。

这种交互的方式是完全是PC端的交互方式，因为PC上有一个大的键盘，操作起来是比较方便的，保证两次输入的一样就可以了。

而手机端操作成本是比较高的，如果让你来完成两次的输入的话，成本很高，很可能第一次输的是123456，第二次还想输123456，但是点错了，输成,123457，造成密码没有匹配上，要再重新输入一次是一件很头疼的事情。

所以移动端的这个设计做了一个适配，相当于可以进行明码和暗码的切换，只要输入一次就可以，让你亲眼看见你输的密码的具体数字，明确这是我想要的密码，我确定，就可以了。

而且这个设计在我们看起来是比较适合移动端的设计，原因就在于PC端可能这个设计不合适，会觉得不安全。

因为密码会显示出来，而手机端是一个很私密的空间，只有自己看得到见它的界面，输入密码点击注册基本上安全性是有保护的。

因为用户不是在注册一个银行卡的账号，只是注册了一个互联网通用服务账号，所以说它的可操作性也还是相对不错的。

第四个页面是第三个页面的加强版。

第四个页面的操作逻辑是只要输入手机号就可以了，然后点击注册，这个时候就会下发一个短信。

我相信很多同学都应该走过这个流程，下发一个验证码短信到你手机上，输入验证码就可以来完成注册的这个过程是更加的简单。

所以其实从界面一到界面四这四个的可操作性是越来越好的一个过程，其实前几个页面并不是不好，只是在体验上缺少了一些符合人操作的原则而所需要的这些体验，而后面的页面更适合手机端来进行操作。

一、体验设计原则点以下为体验设计的原则点：比如刚才的案例中，很多同学提到了可读性，包括用户的视线，怎样阅读页面，视觉的焦点，以及包含的信息是否过多，第一眼是否能看见想看的东西，这是视觉层面的。

还有一些交互层面的，比如交互的热区，每一个想让用户操作的是否好点，空间是否足够能点到它，包括界面之间是否一致，用户的习惯是否可以延续，是否符合用户的直觉，这些都是我们设计的原则点。

其实这些原则点需要大家去理解它们，同时在后面的学习工作中不断的积累深入的认识它们，来通过这些原则点做用户体验的设计，来指导你的设计技法和应用。

下面将精细的讲解设计原则点的应用和一些思考的逻辑。

1.视觉焦点视觉焦点的设计原则目标，是增强设计的可读性，提高页面阅读效率，使设计整体增强。

简单来说，就是通过视觉设计的这些技法，来帮助用户快速阅读我们的页面，从中获得需要获得的这些信息，或者想要完成的一些功能性的操作。

其实传统的阅读来讲，用户简单来说是从上到下，从左到右的阅读顺序。

但是通过互联网这么久的产品设计，我们发现在用户用互联网产品的时候，他的阅读并不是简单传统的阅读方式。

第一张图叫做眼动图，如上左图，记录的是用户来看这个界面时，他眼睛看界面的顺序，他先看了哪里后看了哪里，包括看这些地方看的时间长短（紫色圆圈的大小代表时间的大小）。

所以我们可以看出，用户来读这个界面时是直奔主题的，直接看页面中的内容，比如，直接看列表的第一项，再去看第二项、第三项，他没有找到想找的东西的时候，会往上面来看，看一些筛选、排序相关等功能。

所以他的阅读顺序是非常有意思的，我们要通过视觉的各种设计技法，来为用户阅读效率来服务。

第二张图叫做交互热力图，这张图简单来讲，记录的是用户在一张图里面，他操作了哪些点，他操作了多少。

操作越多 越偏向于红色，操作越少 是越偏向于绿色。

所以眼动图和交互热力图结合起来后，我们作为设计师能够明白，视觉焦点对用户来说是多么的重要。

因为如果是内容型的这种服务，通过视觉焦点帮助用户阅读页面当中的内容。

如果是功能型的这种界面，需要通过视觉焦点来帮助用户，来完成他需要操作的任务流，其实与这种用户体验是非常相关的。

明白了视觉焦点的原理和重要性后，我们应该怎样来做呢？首先我们来看上图中的左图，第一个案例是我们找的一张真实的国外互联网产品的设计。

看到这样一个手机端的界面，可以看到它的页面的内容是相当丰富的，从上面的一个Title Bar到一级的导航，再到一个二级的导航，再到这个页面的这个列表，横条项目是音乐，再到底下它的Navigation Bar，整个页面的内容会非常的丰富。

我们可以看到这个设计师的技法，其实也是相对丰富的，从这个Icon的绘制，对于页面质感的各种处理，包括底下这种玻璃的质感，扁平化的内容，以及上面这种突起的这种质感，可以看到这种技法是不错的。

对于导航条的这种设计，也都是有了他的这种想法在里面。

但是这个页面整个的看起来，如果专业来看更像是设计技法的堆砌，他把各种各样的设计技法都混在一起，所以整个页面整个来看，整体感会弱一点，碎片感比较强。

回到视觉焦点的角度来讲，你可以感觉到他想突出的东西会很多，下面内容他也想突出，用一张海报图，加上红色的文字这样来突出，导航也在突出，他用各种设计的质感来突出他的导航，包括当前焦点的这种导航就做的更强了，比如“Livestrong”做的是很强的红色，上面这个“All”也是，整个也是跟底下白黑的这种对比。

他想突出的东西会很多，这样会使得他反而，你所有东西都想突出，所有东西也就做的不够突出。

比如说我们找三个同学看这个页面，记录他第一眼看到的会是哪里，估计三个同学给出来的答案都不会一样，因为它所有的地方都在做强调，每个人读它的顺序也就不一样了。

再来看第二个界面，如上第二张图片中，第二个界面是我们百度的一款产品，是百度的股市通这样一款产品的设计。

这个界面是股票的一个详情页，可以看到这个页面的元素也非常的多，从股票的股价到涨跌幅，到股票相关等细节的参数，再到下面这个K线图，以及下面如果页面滚动的话，有新闻、公告等内容，可以看到页面内容也非常的多。

但是，视觉焦点的处理方面，首先它的页面的风格会比较统一，都是这种扁平化的这种风格。

我相信大家第一眼看到的是上面的股价，也是大家作为股民来讲最关心的信息，当前是多少钱，包括涨了还是跌了，股票股民非常熟悉的红色来表示涨，如果是跌的话 会是绿色，一眼就能够看明白。

但进入这个场景的时候，那我看完股价，用户第二个想看的应该是为什么是当前的股价呢，包括股价现在的走势的趋势是什么。

因此，第二眼看到就是下面这个K线图，K线图可以看到在设计技法上是通过蓝和白的这种对比，包括视觉空间的这种处理，它的空间还是比较大的。