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

用户体验设计原则及案例解析（上）

本文要点：

1. 建立对于设计原则的理解

2. 告别设计中设计技法的“堆砌”

3. 增强用户体验设计与设计技法相结合的意识

其实设计师平时做设计的工作，可以比作成人在走路或在跑步，走路和跑步的原理是需要两条腿相互配合才能完成跑步的动作，做设计也是一样。设计技法是非常重要的一条腿，熟练的运用设计软件来完成，ICON的绘制、页面的设计、运营活动的设计，这都是非常重要的。但是其中还有另外一条腿，就是另外一项设计师非常必备的思考方式，也就是用户体验设计的一些原则。一定是这两者相互配合，才能够完成设计师的跑步的动作，来完成一个真正既能够体现你设计能力，又能够符合用户真正使用场景的设计，也就是我们这里面比喻的跑步。这些原则说起来似乎高大上，触不可及，但其实是非常的接地气的。

下面请看一个界面的案例及设计师对各界面的反馈：

界面一：如果作为一个用户，如上图左的页面，我会觉得看起来特别不好用，想退出这个界面。因为它太小了，这上面的字第一次看到之后，就会觉得看的特别不清楚。我看到这个页面的第一直觉是想跳出，第二如果我必须要登录的话，我会把它放大，然后去输入，还要把手机拿得近一点，这样凑近了看，可能就会清楚一点。

界面二：如果用如上图右的页面来登录，我是用户的话，打开这个页面会发现，它的文字信息比较多，然后再仔细看这些文字的时候，会发现它的信息层级会比较少，我想找的重点信息不容易发现。阅读顺序方面，我读这个页面会从上往下读。而操作方面，会觉得按钮太小了，可能会误操作。

界面三：如果用如上图左这个界面，作为用户来注册一个百度账号，看起来挺不错的，只是要输入的内容其实还挺多的。但跟之前的两个界面相比，这个至少操作起来比较简单。另外，有一点不太好的，我上面要输数字，下面要输拼音和数字，感觉还是挺麻烦的。

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

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

其实这四个页面我选的是非常有故事的，我们来看看这四个页面背后的逻辑。其实第一个页面不是一个移动端的页面，完全就是一个PC端的注册页面。不过我们把它放到手机上面来看，而且放上来的时候没有做任何的适配，可以看到内容非常的小。如果

不进行放大的话，你是什么内容基本上都看不到的，它的可视性会非常非常的不好。当放大之后，你看到页面当中的一部分信息，当输入完手机号之后，又要非常大面积的往下滚动，才可以又看到下面的输入框，操作起来又会造起来很麻烦。所以这种操作在PC端的时候是非常好用的，因为电脑会有一个非常大的屏幕，然后用鼠标来进行操作，可以精确点击你想点击的输入框，点击你想点击的按钮，操作起来都很方便。但到了手机端，可视区域就会很小，同时操作起来又会相对麻烦一些，这个界面就显得非常不好用。

而第二个界面背后的逻辑在于，这种界面在功能机的时候不会有问题。因为功能机的界面会比较的小，刚开始只看到页面一部分的内容，这样输入用户名，然后再通过这个方向键往下一拨，输入第一次密码，再往下一拨，输入再一次的密码。在功能机的时候，操作还是比较方便的，也比较符合那个时候界面的这种尺寸。而现在，一次性展现如此多的信息，输一次用户名、两次密码，选择性别，再点击确认。所有这些东西全都呈现出来的时候，作为用户来讲看起来压力会很大，无从读起。同时，操作时这个小的这些控件又会很难点，因为它的操作尺寸。如果大家了解移动端的设计的话，个像素点会是一个比较好点的空间，而现在这个会很难操作。比如下面有一个输入框、一个下拉列表、一个确认按钮，当用户来点想点这个控件时，点三次，可能至少有两次点错了原本想点的东西，其实操作起来是不太方便的。

而第三个界面，听起来大家的反馈的意见会少一些，起码觉得它还相对的可用。第三个页面也就是一个比较标准的手机端的注册页面的设计。可以看到上来让你输一个用户名，然后下面是进行一次密码的输入，下面来点击注册。整体来讲，页面的布局很清爽，内容并不是很多，每一个控件的可交互区域也都会比较合理，手比较好触碰。同时如果细心一点的用户可以看到，第二个页面和第三个页面的区别。第二个页面可以看到，它输入密码的时候是两次的输入，来完成了这个密码的设定。这种交互的方式是完全是PC端的交互方式，因为PC上有一个大的键盘，操作起来是比较方便的，保证两次输入的一样就可以了。而手机端操作成本是比较高的，如果让你来完成两次的输入的话，成本很高，很可能第一次输的是123456，第二次还想输123456，但是点错了，输成,123457，造成密码没有匹配上，要再重新输入一次是一件很头疼的事情。所以移动端的这个设计做了一个适配，相当于可以进行明码和暗码的切换，只要输入一次就可以，让你亲眼看见你输的密码的具体数字，明确这是我想要的密码，我确定，就可以了。而且这个设计在我们看起来是比较适合移动端的设计，原因就在于PC端可能这个设计不合适，会觉得不安全。因为密码会显示出来，而手机端是一个很私密的空间，只有自己看得到见它的界面，输入密码点击注册基本上安全性是有保护的。因为用户不是在注册一个银行卡的账号，只是注册了一个互联网通用服务账号，所以说它的可操作性也还是相对不错的。

第四个页面是第三个页面的加强版。第四个页面的操作逻辑是只要输入手机号就可以了，然后点击注册，这个时候就会下发一个短信。我相信很多同学都应该走过这个流程，下发一个验证码短信到你手机上，输入验证码就可以来完成注册的这个过程是更加的简单。所以其实从界面一到界面四这四个的可操作性是越来越好的一个过程，其实前

几个页面并不是不好，只是在体验上缺少了一些符合人操作的原则而所需要的这些体验，而后面的页面更适合手机端来进行操作。

一、体验设计原则点

以下为体验设计的原则点：

比如刚才的案例中，很多同学提到了可读性，包括用户的视线，怎样阅读页面，视觉的焦点，以及包含的信息是否过多，第一眼是否能看见想看的东西，这是视觉层面的。还有一些交互层面的，比如交互的热区，每一个想让用户操作的是否好点，空间是否足够能点到它，包括界面之间是否一致，用户的习惯是否可以延续，是否符合用户的直觉，这些都是我们设计的原则点。其实这些原则点需要大家去理解它们，同时在后面的学习工作中不断的积累深入的认识它们，来通过这些原则点做用户体验的设计，来指导你的设计技法和应用。下面将精细的讲解设计原则点的应用和一些思考的逻辑。

1.视觉焦点

视觉焦点的设计原则目标，是增强设计的可读性，提高页面阅读效率，使设计整体增强。简单来说，就是通过视觉设计的这些技法，来帮助用户快速阅读我们的页面，从中获得需要获得的这些信息，或者想要完成的一些功能性的操作。其实传统的阅读来讲，用户简单来说是从上到下，从左到右的阅读顺序。但是通过互联网这么久的产品设计，我们发现在用户用互联网产品的时候，他的阅读并不是简单传统的阅读方式。

第一张图叫做眼动图，如上左图，记录的是用户来看这个界面时，他眼睛看界面的顺序，他先看了哪里后看了哪里，包括看这些地方看的时间长短（紫色圆圈的大小代表时间的大小）。所以我们可以看出，用户来读这个界面时是直奔主题的，直接看页面中的内容，比如，直接看列表的第一项，再去看第二项、第三项，他没有找到想找的东西的时候，会往上面来看，看一些筛选、排序相关等功能。所以他的阅读顺序是非常有意思的，我们要通过视觉的各种设计技法，来为用户阅读效率来服务。

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

所以眼动图和交互热力图结合起来后，我们作为设计师能够明白，视觉焦点对用户来说是多么的重要。因为如果是内容型的这种服务，通过视觉焦点帮助用户阅读页面当中的内容。如果是功能型的这种界面，需要通过视觉焦点来帮助用户，来完成他需要操作的任务流，其实与这种用户体验是非常相关的。

明白了视觉焦点的原理和重要性后，我们应该怎样来做呢？

首先我们来看上图中的左图，第一个案例是我们找的一张真实的国外互联网产品的设计。看到这样一个手机端的界面，可以看到它的页面的内容是相当丰富的，从上面的一个Title Bar到一级的导航，再到一个二级的导航，再到这个页面的这个列表，横条项目是音乐，再到底下它的Navigation Bar，整个页面的内容会非常的丰富。我们可以看

到这个设计师的技法，其实也是相对丰富的，从这个Icon的绘制，对于页面质感的各种处理，包括底下这种玻璃的质感，扁平化的内容，以及上面这种突起的这种质感，可以看到这种技法是不错的。对于导航条的这种设计，也都是有了他的这种想法在里面。但是这个页面整个的看起来，如果专业来看更像是设计技法的堆砌，他把各种各样的设计技法都混在一起，所以整个页面整个来看，整体感会弱一点，碎片感比较强。回到视觉焦点的角度来讲，你可以感觉到他想突出的东西会很多，下面内容他也想突出，用一张海报图，加上红色的文字这样来突出，导航也在突出，他用各种设计的质感来突出他的导航，包括当前焦点的这种导航就做的更强了，比如“Livestrong”做的是很强的红色，上面这个“All”也是，整个也是跟底下白黑的这种对比。他想突出的东西会很多，

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

再来看第二个界面，如上第二张图片中，第二个界面是我们百度的一款产品，是百度的股市通这样一款产品的设计。这个界面是股票的一个详情页，可以看到这个页面的元素也非常的多，从股票的股价到涨跌幅，到股票相关等细节的参数，再到下面这个K线图，以及下面如果页面滚动的话，有新闻、公告等内容，可以看到页面内容也非常的多。 但是，视觉焦点的处理方面，首先它的页面的风格会比较统一，都是这种扁平化的这种风格。我相信大家第一眼看到的是上面的股价，也是大家作为股民来讲最关心的信息，当前是多少钱，包括涨了还是跌了，股票股民非常熟悉的红色来表示涨，如果是跌的话 会是绿色，一眼就能够看明白。但进入这个场景的时候，那我看完股价，用户第二个想看的应该是为什么是当前的股价呢，包括股价现在的走势的趋势是什么。因此，第二眼看到就是下面这个K线图，K线图可以看到在设计技法上是通过蓝和白的这种对比，包括视觉空间的这种处理，它的空间还是比较大的。在你看完股价时，第二眼能够看到的是它的分时K线，股票的这个走势，所以说整个视觉的焦点有比较多的思考在里面。第一眼看哪里，第二眼看哪里，当这个页面往下滚动的时候，去看下面的一些关于股票的这个概况、财务 、股东等信息的时候，同时上面也有Title Bar留在这里，这个红色来告诉你现在的股价是什么。在阅读下方信息的同时，可以通过上面颜色，简单的可以知道涨跌情况，这种阅读起来都会比较容易的。所以整个来讲，视觉焦点如果做的好的话，对于用户来阅读页面是非常有帮助的。

另外一个和视觉焦点非常相关的一个原则叫做视觉的耐久度。就是用户来第一眼看你的界面时，可能要熟悉并学习下你的页面，学习后，当用户以后已经习惯了你的设计后，他已经学会了你的产品，便是直接奔着内容去看的。比如股票的详情页是每天用户打开最多的一个页面，其实他了解了之后，第一眼就会去看你的股价，第二眼就看你的K

线图，他是有这种操作习惯在里面。你的视觉焦点如果处理的好，能够快速的让他去找到他想找到的这些信息，他阅读起来会非常流畅，你的视觉耐久度也会很不错。而不是那种只是第一次看起来还比较精致，比较好看，在后面使用的时候效率很低的页面，这也是我们所不提倡的。

我们在第一个案例中便讲解视觉焦点，是因为它真的非常的重要。因为在真实的互联网产品的设计当中，如果和产品经理来合作的话，如果产品经理并不是非常的资深，他可能跟你说这个界面所有的东西都很重要，这里很重要，那里也很重要。当你来处理这样界面的时候就会很难，你这边也想突出，那边也想突出，就会造成你的页面哪边都做不到突出，而且页面看起来会很繁乱，用户来讲 读起来会效率很低。所以视觉焦点是一个非常重要的设计原则，希望大家来理解这个设计原则之后，在应用里设计技法时，首先技法不要乱用，应使得你的页面是一个整体的风格。第二，以用户的体验和阅读顺序为主，思考页面应该用怎样的技法，提高用户的阅读效率和使用效率。

2.可视性&流程

设计原则目标：提高页面内容可视感，不需要用户猜想，交互起来流程短。

先看一个案例，上图大家看到的这个场景是一个素材中心，素材中心这个产品也就是说一个美化的软件，它本身会带一些素材在里面，当你想用更多的素材的时候，你要去我们的服务器这边进行下载，下载到你本地来进行应用。左图也就是素材中心的一个导航页，基本上这个页面里面分成红框中标注的三个功能区域，相对于把我们的素材做了一个分类。每一个大的分类下面又会有小分类，点击其中一个小的分类，可以看到这个分类里面具体的素材，可以选择进行下载。但是这个界面当时我们作为设计师，看到这个界面的时候并不是非常的满意，也感觉我们没有一种欣喜的感觉，就是因为可视性非常的差，这个页面就像一个传统的导航一样，冷冰冰的放在那里。

而我们进行改版的一个思路，是把它改版成了这样一个如上第二张图的界面，作为用户来讲，一进来就可以看到很热闹，有很多很漂亮的这些素材可以进行下载，而想进行这种类别选择的时候，我们把它设计成在底下的这样一个导航，用户可以来切换，可以看贴纸类的素材，也可以看相框类的素材等，来进行这种切换。而一进来的时候，这种可视性会非常的好。同时这里面还会有一个操作流程的问题，比如说改造之前左图的这个界面，改造之前的这个界面大的分类的逻辑，也是贴纸、相框这个样子，但是我相信因为没有图片展示给大家，大家只能通过这些文字来理解。比如说搞笑这样一个关键词，我相信我脑子里面认为搞笑的素材，和你认为的搞笑的素材是不一样的，如果你点击了搞笑这个类目进来之后，发现这里不是你想要的东西，再返回，再看下一个类目再点击进入，可能要来回来回几次的切换，才能够找到你心目中想要的素材。而我们第二类的优化了之后的界面，大家可以看到，下面通过一个导航，可以快速的在贴纸、素材、相框之间切换，包括这种小的这种类目，我们也是通过上面的二级的导航，你可以快速的从搞怪切换到其他类。

所以说在我们这个地方设计的时候，视觉层面要做到的是让我们的素材更可视，给用户的视觉冲击越强越好，让用户第一眼看到这个素材是什么，而不是通过更多的文字，让用户去猜想素材属于哪一个分类，包括这个分类里面点开是什么，而是直白的展示给他。而交互层面你要到做的设计是，让用户可以快速的在不同类目之间切换，我进入这

个类目，看到了这些素材不是我想要的，我通过一步的点击，就可以去看到别的类目的这些素材，可以快速的切换。而不是让用户前进发现不是，后退再前进，其实这种操作就非常的不好。

整个素材中心的设计理念是一致的，比如最右图就是大家比较熟悉的微信的素材中心，微信的素材中心的设计也是一样的感觉，一进来就更多是让你看到素材长什么样子，可以去下载你想要的东西。其实互联网或者说用户体验的设计，说深奥也深奥，说简单也简单。因为什么样是好的体验，其实就是让用户的第一感觉是“Wow”的体验，也就是说超乎了他的预期，你给的服务比他想象中的更好，他就会觉得你体验好。如果你提供的服务和他想的一样，那就是符合他心理预期的设计。如果你提供的设计比他的心理预期要差，那可能用户觉得不好给你差评，所以说用户的预期是非常重要的，我们要拿捏用户的心理。

下面跟大家分享的另一个案例是我们百度相册里面的一个功能，也就是我们群相册的一个功能。这个产品的背景，就是用户来进行照片的分享，我们就设计了这样一个功能。首先你要建一个这种相册的群，如上图，你可以通过微信、QQ，或者短信的方式来邀请你的朋友们，我们会自动的给你生成一段邀请的文字，减少你的输入，邀请的文字和链接会作为话语或者对话，传给你想分享的这些朋友们。

其中这里面会非常的有意思，用户见到第三张图的界面是有一个什么样的预期呢。其实作为一个接收人，如果我的好朋友跟我分享，我分享照片给你，我收到链接，我点其中的邀请链接，我肯定想看到的就是照片，这样最直接，而且也是我心里想的。这个也就是我们当时的设计，当你点其中邀请链接的时候，可以让你马上看到，你的分享来源给你分享的这个图片，这就是一个符合用户预期的一个设计，但是想做到这一点是非常非常难的。因为如果大家了解一些互联网技术的话，来实现这个点，可以想象一下，就是在第一个界面和第二个界面的时候，是在百度相册的APP里面给你分享照片，第三个界面是我在微信里面，我作为一个接收者来看到这个界面，点了其中的链接，而第四个界面又是百度相册的界面。里面涉及到两个APP之间的跳转，而且有很多页面的跳转，

其实实现它技术是非常非常的难的，我们作为设计师也一直努力跟工程师配合，就为了给用户能够达到这个体验，让他可以看到他心里所想的这些照片。举一个例子，我收到了这样的邀请链接之后，我点击这个邀请链接，如果这时候没装百度相册APP怎么办。其实我们并没有走一般的设计的流程，说让用户打开App Store，去下载这个APP。因为这样子，我们觉得很不符合用户预期和操作习惯，因为你打断了用户心里所想的东西，而且让他去下载。他有可能在地铁上面，可能走在路上，让用户用G的环境下，花四五十兆流量去下一个应用程序，这肯定是用户不喜欢的。如果在这种场景下，我收到链接，我点击链接，我没有装的话，简单的给你用浏览器，用H的页面来打开这个相册里面的照片，让你第一眼能够看到照片。如果你作为用户你想下载这些照片，你可以在回到家之后把应用程序下载下来，再去看这些照片的细节。这样子的话，其实做的所有的目的，都是为了符合用户的预期，符合人的这种基本认知的操作习惯。

该文档的版权为百度UE讲堂所有，如需转载请注明出处。