如何提升网站用户体验 || 墨叽第17聚回顾文

墨加的各位小伙伴们大家晚上好！

我是AnyForWeb用户体验设计师尛沫，很高兴能在墨加平台上和小伙伴们一起分享，先感谢墨加邀请我作为本期分享嘉宾，当然也感谢各位小伙伴们的捧场。

今天分享的内容主要是自己学习和公司项目中积累的一些经验，对设计师和前端开发人员来说比较实用。给项目经理、产品经理、网站运营人员也能带来一些灵感。讲的不好的地方还请大家多多包涵。

本次分享的内容主要是关于怎样提升网站用户体验方面的，分别从网站、页面布局设计、图片、文字这几个方面进行阐述。下面是分享的大纲图：

开篇 初识用户体验

先讲一下用户体验，不知道大家有没有这种感觉，互联网行业的人近几年都在说用户体验，感觉这个词有被用烂的感觉。那么，用户体验到底是什么，我给大家举几个小例子。

比如说，下班后我会跟同事去吃饭，点餐后，服务员就走了。我们几个人就坐等上菜，同事中有很多都是北方人，他们会经常说“服务员来几杯水”他们对上海这边的餐厅服务通常是不太满意。在北方，就算是很小的餐厅，服务员给顾客倒水也是必备的服务，这边的用户体验真的是不太好。

也有可能是南北方服务的一些差异，不管是因为什么，但是对我的同事来说，这种服务的意识让他觉得不满。所以他们会抱怨，说餐厅的用户体验不好，他们就会考虑换一家餐厅。其实这是一个小细节，但对顾客来说，影响还挺大的。

另一个例子，小伙们一定对年前12306网站设置的验证码印象深刻吧，其实设计一套这样复杂的验证方法其实是防止黄牛，这个设计是用来对付机器的。但是结果大家看到了验证图片让大量用户无法识别，延误了大家很多买票的时间。在网上遭到了猛烈的吐槽。虽然知道12306的用户体验不好，但大家也很无可奈何，因为买票的渠道非常有限，如果不在网上买票，总不能去火车站售票厅排队等吧。

以上的两个事例是大家在生活中都会遇到的，每个人或多或少都会有类似经历。虽然用户体验这个说法是从互联网行业开始兴起的，但对于各行各业都是适用的。

用户体验的官方解释：

用户使用产品过程中建立起来的主观感受，我今天分享的内容主要是关于网站的用户体验，所以主要是从视觉设计的角度分析的。后面会涉及到一小部分内容是关于网站运营维护的。

关于网站的用户体验，我先讲一个小案例。

我们公司自己有好几个网站，包括公司的官网、业务网站、产品网站、博客等。其中，我刚刚自我介绍时提到的AnyForWeb是我们公司的一个业务品牌，主要是为客户做网站定制的，到目前为止AnyForWeb已经是第五个版本，其中5.0版本会在月底上线。

提升网站用户体验的依据和方法：

我们公司具体用到了其中的三种方法：

用户调研：针对网站的情况，跟用户群体调研

用户测试：改版过程中设计稿的AB测试

用户分析：数据监测、用户浏览热力点击图

小伙伴们会好奇，很多公司网站即使不运营十年差不多也要运营三五年，除非有新的业务需求，公司发展的战略上的考虑，或者网站上出现了大的BUG等否则是不他们是不会考虑网站的改版。

这里抛出一个问题给大家：说到网站的改版，我们的AnyForWeb为什么要不停的改版优化？

一、页面布局和设计

对于页面设计师来说可参考的布局有很多：纵向一致性、F型、Z型布局、黄金分割、三分法等，这些页面布局可以给网页的设计带来视觉吸引力的功能设计。

布局：

在互联网行业有个很著名的尼尔森F型网页浏览模式，它是遵循用户浏览的视觉原理，这个浏览模式很像英文字母F的形状，它的阶是根据眼动轨迹的研究成果而得出的。

打开网页后，一般浏览者会在网页的上部形成水平的浏览轨迹（横向的），然后眼光第二步会往下移，段范围内水平移动。扫描的区域会比第一步短。第三步，将目光在网页的左边垂直扫描，这一步他们会浏览的比较慢，比较有条理、有系统。

以上是研究中使用的热力图。其中红色是浏览停留时间比较长的，黄色是中间，蓝色比较少，其中用户根本不会关注灰色的区域。除了F型研究结果，还有之字形布局研究，也是根据眼动研究的。当浏览者不是很专注时，他的视觉流向很自然的呈现出之字形。这个模式跟F型很类似，用户会在红点处有短暂停留。

这几个结论会在互联网行业中广泛应用，做网站优化的会用到这些结论。利用人的视觉原理，把要吸引人的信息放到左上角或者采用二分之一的布局，把内容放到之子的端点（红色端点）处。比如：苹果的官网，左侧是产品右侧是文字，或者左侧是文字右侧是产品。

二、图片要有高颜值

所有的设计师都知道用图的重要性，我之前写过《网页设计中用户大脑中的原始人》，在墨加的平台上也发表过。文章中指出，每个用户的大脑中都有一个原始人。其中有说到，在原始时代人的大脑要处理的内容大多和图像有关。比如祖先最关心哪里？新长出来可以吃的果实，哪里有野兽出没需要避开危险，哪里有新的猎物。

这些重要的地点和周边环境会通过视觉和记忆保留在大脑里，在经历漫长的进化后，人类逐渐进化出最适宜生存的大脑结构。所以，人类天生擅长处理视觉图像。有研究说，人类对图像的处理速度要比对文字的处理速度快6万倍，因此“一图胜千言”的说法也非常经典。“一图胜千言”也不是说只要图片好看就可以，实际上要提升用户体验这块还是要把握图片的意图。设计师在设计图片时要有一个目标，这个目标要根据客户需求和网站的产品特色决定的。或者文字内容表达的一个意思，图片能够让客户不看文字就知道图片在说什么。

更上一个层次

通过图片里的人物模特视线引导用户观看文案：首先根据模特视线可看到文案内容。其次，他们关注产品、文案、LOGO进一步达到图片设计的目标。有些网站在观测用户浏览习惯时，发现用户喜欢会盯着图片模特的脸看，会忽略掉旁边的文字信息或者是对用户来说更重要的信息，转化率降低很多。通过对模特视线的引导，重要的信息就会被用户看到，也会解决用户只盯着模特的脸看的这个问题。对很多用户来说，比较生活化的图片实际上是浓缩了日常生活的场景，对用户来说有种亲切、熟悉的感觉。用的好的图片能够达到更好的结果：营造氛围、渲染用户情绪，达到塑造品牌的效果。平时大家开玩笑说“男生都是视觉动物”其实人类都是视觉动物，图片用得好，对用户来说是很重要的。

刚才说的图片的重要性

设计师在使用图片中需要注意的是：构图、对称、黄金比例。构图用的好，对图片质量是很大的提升。因为网站上的图片使用会涉及到版权问题。如果自己出图，有专业摄影师是最好的，如果不能那就选择购买图片，尽量避免版权问题。自己拍摄的话，构图是要注意的，要注意留白。在后期处理时会有更多的选择。

色彩的搭配和平衡

在图片中，色彩平衡很重要。高明度色彩的照片，它的页面也需要高明度色彩。如果照片色彩与页面不能保持一致的话，需要后期调色，让整体色彩比较平衡。如果图片的构图和色彩处理的好的话，比如SAP的解决方案、微软的网站，会让人直接感觉他们的风格是一致的。这就是让图片可以塑造一个公司的品牌形象。

三、用文字激发网页的活力

平面设计和网页设计有很重要的区别。在平面设计中，文字设计更注重视觉效果，字体要尽量有创意。在网页设计中，设计师经常抱怨可使用的中文字体很少，创意字体即使设计出来也没有办法实现，或者说实现的成本太大了，对创意的发挥有很大的限制。网页设计师在很多网页设计教程中都看到，建议设计师不要在中文字体上做太多创意。好像网页设计师不能像平面设计那样发挥更多的创意，国外的网站创意字体比较多，国内网站上基本上是黑体、宋体、楷体等。其他字体比较少，除非是Bunner图上的把字体放在图片上的形式。其实这是因为用户的操作系统上自带的字体是有限的，如果使用创意字体的话，打开网页还要下载，英文字体下载只包括标点和英文字母。中文字符的文件比较大，网站打开的速度比较慢，因此导致用户体验比较差。用户很有可能在网站还没有完全打开的时候就把网站关闭了。

不能用特殊字体咋办？从网站排版优化，提升用户体验。

分享几个规范：

排版中，一行文字太长的话，用户在视线移动时，左右移动视线长。用户比较难注意到文字段落的起点和终点。太短，眼睛不停扫视，破坏阅读节奏。

合适的字数，提高易读性，阅读体验好：

传统图书排版：55-75字符/行

网站文字排版：75-85字符/行

中文14号字体的话，35-45个文字/行

行距：

文字间距根据字体大小选1-1.5倍行距

段间距：1.5到2倍

行对齐和文字留白：

行对齐：基本的规范

文字留白：为了保证视觉的美观度，避免大段文字堆积

文字交互效果：

很多国内网站对文字的交互效果不重视，一般网站有默认，别的效果基本上是没有的。有的需要展示特色的地方，这些都被网站的开发者忽略掉了。在互联网行业大家比较热衷于设计产品，注重产品在使用中的交互，在网页这块，交互是被忽略的，看国外的酷炫网站，欧美注重交互设计和用户体验，很多很好的文字交互是在国外的网站看到的。国内近几年也已经好很多了，很多新的网站上面也有比较好的文字交互。在讲图片时讲到，每个人脑子里都有一个原始人。和图片相比，一些动态的效果实际上更能吸引用户注意力。交互效果巧妙的使用的话，不仅可以让网页瞬间亮起来，在用户的感知度和感官体验上起到一些无可替代的作用。

国外的网站做的交互效果，尽管我现在不需要这个网站的产品，但是因为网站上的交互效果做的很好，酷炫的动态吸引我的注意力。如果我以后有需要这个网站上的产品，我肯定会主动再次在这个网站上进行搜索。文字的交互效果是吸引用户的好奇心的，可以增加用户浏览网页时停留的时间，让他们对网站印相深刻，留在记忆力。在之后的某个点上可以触发你再次想起这个网站。这点和塑造品牌所起到的作用是一样的。值得注意的一点是和用户的互动，好的文字交互效果就可以很好的实现网站与用户的互动。

四、总结

通过符合用户体验习惯的布局设计、合适的图片、文字搭配可以让网站有更清晰的定位，从整体上给用户带来更好的用户体验。设计师在考虑用户体验之前，对客户需求和网站定位做规划和分析。

之前提到AnyForWeb网站已经是第五个版本了，我们改版原因如下：

每次改版后，对数据进行长期检测：热力点击图、PVUV、用户浏览习惯在哪里停留的时长。检测数据从新分析，哪里可以再优化，提出改进方案。后面一直这样改进、检测、再循环。大家会觉得对网站做这么多改版好像没有什么必要。不像产品会做1.0、2.0的更新。以我们的网站为例，每次改版在数据统计上都会有明显的变化。比如网站跳出率降低，相比之前项目情况，目前我们的网站跳出率维持在40%，比行业标准平均水平降低20%。通过热力点击图的观测，我们优化部分的一些位置，可以看到用户停留时间明显增多。这些数据都可以证明我们的改版是很有用的，对提升用户体验这块起到很好的效果。

网站运维

对网站来说，除了网站设计师开发人员做的工作外，项目交付到客户手里，网站的维护还是要靠客户自己。有些客户不是很懂，在上传图片时，客户对网站上传的图片像素什么的不是很懂，在后期维护中，比如图片被拉伸，用了低像素的图片等，这样对网站也造成影响。所以如何选择合适的文字内容，以及如何准备合适的图片，对运营的人来说也是需要注意的问题。

问答环节

1. 从设计师的角度，怎么把握用户体验层面需求的众口难调这个问题？

对设计师是比较大的挑战，行业内更多的设计师更注重是视觉设计。对设计师来说一个更重要的前提工作是，了解客户业务需求和公司战略定位。根据定位，设计出适合的网站。

2. 首页大图，在国外网站基本成为一个潮流，国内现在也有很多新创公司跟这个潮流，逼格确实上去了，但另一个案例是豆瓣，知乎，果壳这种，这种则设计会把首页做成网站各个板块内容的一个集中展示，怎么看这两种设计体验？

我们网站改版了很多次，都没有用过大图，跟我们网站定位有关。

每次改版都是有一定风险的，用户常浏览的网站，他们已经熟悉了网页的布局，改版后会造成用户的流失。豆瓣、这种样式已经很不错了，如果变成大图，我会很不习惯。

3. 网页设计该遵循用户需求还是用户习惯？

不能单一下结论，实际考虑因素比较多，终究要商业利益，在这个方面，正常情况下要遵循用户需求，按照用户需求把网站改版后，造成用户大量流失，商业利益有损失。这种情况公司是不会这么做的。