提高WEB用户体验至关重要的几点

一个精通算法经验丰富的后端工程师，也不一定能够完成出色的前端页面，对逻辑经验丰富的程序员来说，html/css显得繁琐低效，即便是SASS、LESS这样的框架也难以让传统程序员理解前端工程师，多数人眼中前端是编程与设计各占一部分的新职业，特别是在众人把用户体验挂在口中时，更让人觉得前端应当对此有独特的理解。其实在我看来，用户体验这东西不管是从哪方面来说都没有一个确切的定义，可能前端可以更多的用经验来认识它，亦有可能在不同人眼中的web用户体验有所差别，只不过方向相同而已。

我也从自己的经验中总结了一些WEB中用户体验的实际细节，当然也不可能面面俱到，限于篇幅我就只分享几个包含显著特征容易被认可的细节：

AJAX。

看到这里肯定有人忍不住笑出声，的确这已经不算什么新技术，但要让我站在用户的角度来评价网站技术上的变化中给访问者带来最大友好性的一项，我肯定会选AJAX。

记得在我刚刚开始学会上网时候，不管是注册页面还是登录都是我最烦的，那时候网速又不快，打开一个注册页面就要几秒时间，然后从上往下有几十个选项 要全部填满，比如其中有一项让我填写“密码保护问题”，这个设计简直让人想吃电脑，因为很多人一看这种问题应该都会和我一样随便写几个数字就提交，然后等 几秒加载完网页提示“密码保护问题”不允许有数字，同时之前填写的十几项数据全部清空需要重新再来一遍，再花几分钟写完之后提交又提示不允许有字母，再来 一遍，有时候还会提示字符太短太长有空格超时之类，总之如果你第一次注册这种页面，至少要花掉十几分钟，而且还是在重复做一件事。从网站运营者角度来看这 也很烦，重复十几分钟填写表单很容易就失去很多潜在用户。

如今的注册页面

在AJAX的异步请求出现之后，这种情况明显的改善，给用户的体验感最明显。用户并不知道何时已经提交请求，就拿刚才表单的例子来说，如果每填写一 项都会在当前表单的最后提示具体错误类型(在用户未点击时已经异步提交了请求并且用返回数据更新部分页面)，这就给用户很直观的提示，这种即时的互动让访 问者能够很直观的感受到这是一个友好的网站。(当然用javascript也能做到部分表单验证,这只是举一个例子)。在不重新加载整个页面，通过操作 DOM来改写小部分数据这点上也能给访问者带来极大的交互感，现在流行的微博就是最好的例子，在发送微博/评论/转发之后用户会发现不用刷新等待整个页面 加载，操作之后立刻会有小部分的页面发生变化，虽然看起来微不足道，但对一个访问者来说，这足以让他们欣喜。

网页字体。

网站中所有的文字内容表达方式都是通过字体，合理的字体无疑会给用户更好的体验感。在业内来说豆瓣可能是对字体研究最多的一个网站，拿豆瓣读书都来他们用Helvetica和Arial这两种差别非常小的字体，这种非衬线字体很容易让人一目了然同时富有一些科技感，豆瓣本身就是以图片加上简短语句组成，让人能够从字体中快速找到重心是设计的目标所在。

有人担心非衬线用作正文对阅读体验有影响，实际上不难发现国外很多网站都用非衬线字体来处理正文，当然也不排除他们可能考虑的更多是英文。其实我还 是非常喜欢非衬线体，它们看起来更富美感，而且如今大量的文字在互联网上比较少见，一些活泼具有现代感的非衬线字体也逐渐被更多的开发者认同而且使用。

Infinity字体

除去这些，字体还可以在选择上再细分一些，记得曾经看过一篇统计，不同的字体会影响用户对站点权威性的信赖程度。比方说在一个公司网站上大量使用类似于幼圆、Cursive一类字体，很容易让访问者不信任网站，当然如果是以娱乐为主的网站也不能过于严肃和简朴，在使用时既要考虑到大众用户的接受程度，也要知道自己的网站是什么定位，当然技术性的问题也不能忽略，像是火狐比IE区分sans-serif要更模糊一些，有的字体“O”和“0”、“L”和“1”容易让人难以区分(代码较多的站点需要考虑)等等，这样综合对比选择得到的字体无疑能让网站更有魅力，从而留下更多的用户。

顺便一提，在使用字体时注意版权。

加载速度。

很多用户在还未见到你出色的设计和内容之前就已经离开了页面，这是因为网站加载时间实在是太长，已使访问者失去耐心。其实很多的访客不关心脚本和图 片的加载顺序，他们只要看到网站的整体结构能够迅速的加载出来就可以开始浏览，即便是其他元素逐渐加载也可以接受，基于这点，我们可以使用很多延时加载的 方法来使用户更快的见到页面。除此之外还有很多因素可能会对加载速度造成影响，也有逐一优化的办法，之前我已经写了两篇相关文章来解决此问题(提高网站加载速度的解决方案有多少)，不再细述。

结构设计。

不知道大家发现没有，近来很多网站都喜欢把菜单fixed在顶部(维特博客就是个例子)，只要这个菜单选择项不是太多，访客对这样的固定菜单接受程 度还是很高的，这只是设计中的一个小例子，相类似的有很多，比如在表单中以深浅颜色区分每一行，以提高可阅读性；在激活窗口时为当前控件添加一个边框，使 用户能够更建议的分辨自己在操作哪个窗口等等。很多的设计与排版方式都已经得到了大众认可，可以作为网站设计时的参考。

网站结构设计的好看不好看对访客来说虽然有影响，但也不至于立刻离开，而且即便是非常精致的页面却对用户不怎么友好，想必也不会有多少人愿意访问。
举个例子，以前我用好搜(360搜索)的时候总感觉怪怪的，没有google和百度顺手，研究了一段时间之后才发现好搜的的主页搜索框比百度和 google要低一些，Google到顶部固定菜单的距离是286px，百度是192px(未登录238px)，而好搜则是328px。相比之下，好搜的搜索框更趋向于屏幕中间，而百度与Google则是在屏幕中上方， 对于已经常年习惯了百度和Google搜索的用户来说，想要改变这个习惯来适应好搜多少有些困难，除此之外搜索框还有结果页也有几个问题不一一细 述，360这样做无外乎两点，一个是不在乎/不知道/不关心用户体验，一个就是故意有所不同，想要培养自己的用户习惯。(在我看来也不怎么成功)

细节决定成败。

乔布斯的父亲是个木匠，曾经教给乔布斯一个理念，就是橱柜的背面里层也要细致处理甚至是打磨光滑，即便用户看不见。在理想主义的伟大试验品“麦金 塔”出世之后，有人甚至感叹，就连电路板上的电路图都能当作艺术品，的确如此，乔布斯就曾经开除一个对电路图美学设计不满的员工。一个伟大产品的诞生并不 是一蹴而就的，必然经过了长期的沉淀积累与琢磨，但仅此依旧不能称之为伟大，只能算成功。一个产品细节上的最后润色可能才是决定它价值的关键。对于WEB开发者来说，更是如此。

这样说未免显得有些夸夸其谈，再用回刚才百度与好搜的例子，在它们首页的左上角都能见到一个天气提示框，提示文字除了空气质量数字等级的差别基本相同，但把鼠标移上去就能看到有对未来几天天气以及相关信息的展望，来看看具体区别。

百度天气提示框

百度的提示框版面直观，最上面是一排日期包括农历，然后在下方列出未来4天的天气相关信息。有意思的是当前日期(当日天气)的字体加粗，同时宽度也 明显不同，处于第一位也很容易被用户一眼看出。而最重要的是，每日的天气信息非常少，仅仅只有日期，形象的天气图、气温、文字天气与风向。

好搜天气提示框

360在标题栏上重复了原来的地理位置却没有提示日期，显示未来两日的天气，问题是如果用户不看天气上的文字很难区分不出哪一天是今天，好搜并没有 将当日天气放大加粗。如果仅仅是这样还也还能算是一个不错的提示框，但是下面这个空气指数还有一堆废话介绍什么穿衣指数是什么鬼？我不相信除了页面开发者 有人能把这些废话看完，而且也没有科学性和规范性，最重要的是它影响了弹出框体整体布局的简易型，很多时候用户体验也遵循“lessismore”，堆积如山的垃圾信息不仅无用还破坏了整体的用户感受，这也就是所谓的设计细节决定成败。

如果把WEB用户体验展开来说，就算说个一天一夜也说不完，太多的细微之处需要我们留意，而且想要做好任何一处都并不是简单的事。对于开发者来说，对用户体验有更深更实际的理解就是把自己视为用户，在逐渐满足自己细枝末节体验感的同时，也丰满了站点的用户体验感受。