您的【用户体验优化方案】到了，请签收~

用户体验（User Experience，简称UX 或是UE），它指用户在使用一个产品、系统或者服务时建立起来的纯主观感受。

初衷

写这篇文章的初衷呢是因为前段时间的项目重构，发现原项目以前不是很注重产品的用户体验，UI设计比较糟糕、交互及交互反馈也没有考虑，响应速度也有待提高。总之，就是就是能用，好不好用用户知道。第二个原因是自己也没有涉猎这块的书籍或文章，直到看到网易UEDC的网站网易UEDC，里面有很多关于UI设计、交互设计及用户体验的文章，走马观花式的看了十来篇，有些文章还是说的很好的（剩下的个人觉得不算干货，也可能是自己菜看不懂，其实干货的文章也有所保留，有些精华人家当然不会分享了，点到为止），再加上平时生活中用的网易的产品或游戏从产品文案到UI到交互到性能都是非常棒的~

所以希望自己做的东西也能像别人家的那样，于是就想写这样一篇文章，写文章的过程会不断的查阅相关书籍和网络资源来提升自己，文章完成也能分享给大家，希望读者能从这微不足道的言语中获得一些东西。但是这类文章容易写着写着写成假大空，也没有所以我文字尽量精简，多举证。

推荐书籍《破茧成蝶：用户体验设计师的成长之路》《写给大家看的设计书》

重要说明：本人不是UX设计师而是一个小前端，本文只是一些学习心得或者个人经验，可适用于一些UX不是很好的网站获得一些建议，不能拔高，并非专业

一、用户体验核心是用户

1. 用户心理学

首先，用户体验是围绕用户来说的，如果对用户一无所知，谈何做出用户喜欢的产品。比如我要做一款针对小学生的产品，我自己对00后的小学生可以说是一无所知了，那我第一步不是去做产品，而是去研究00后，研究他们的行为习惯、心理特征、消费理念等等。

【用户习惯】

习惯在用户体验中是必须考虑的因素，因为，习惯几乎是每个人都会有的，比如浏览网页（个人偏向PC端，这里以PC端网页为例，下同）的习惯，著名的F型浏览模式：

图一（图片来源百度）
首先：通过点击链接或地址栏输入网址打开一个网页，从空白页到DOM元素渲染完成（一般情况都是同时渲染完成，这里不考虑极端情况），页面印入眼帘，习惯性的目光聚焦在第一行，这是为什么？
因为一般人的阅读习惯都是自上而下，这种习惯具体追溯到哪，我也不知道，就我或者说大多数人而言，上学的时候书本内容是自上而下、自左而右的。
另外，很多网站都有导航栏，而且一般都在网页顶部，这种设计也是迎合用户阅读习惯的，久而久之，导航栏在顶部也成了约定成俗的设计。
后来者的设计也会参考前者的习惯，假如世界上首个网页导航栏在右侧，久而久之，导航栏在右侧才是现在的主流设计。
图二（图片来源：为什么喜欢运用F型浏览模式来设计网站界面）

从图二看，① 跟 ③被阅读到的可能性大于2、4，而1又大于3，一般情况下，1的位置放什么内容，logo，比较成功的logo设计很容易让人一眼就铭记于心的。这个例子就不说了，某东、某宝大部分网站都是这样的。然后1->3的位置出现菜单的也相对算多，尤其是那种管理类网站，这种布局不要太经典，经典到好用，没有审美疲劳...

说是F，第二横的话一般指一些具体内容,如图一。正文内容的话，出现网格排布的list也是很多的，比如百度图片、某东、宝具体商品，以图片流式布局或网格线排布。但整个网页无导航无菜单的纯流式或网格排布的网站平常见的相对较少。

这里只是说习惯性的设计，倒不是说非习惯性设计就是失败的作品。人是有惰性的，你要驱使他改变，你就要付出代价。比如说你家儿子习惯用铅笔写字，后来升学了得用钢笔写，他写不习惯不想写，你可以给他糖或者揍他让他学着用钢笔。用户也是一样的。
所以说，创新很难，难在新以及需要为打破习惯而买单，创新设计一定要做好权衡利弊然后判断设计是否得当，甚至可以搜集用户感受以便改变

内容参考及推荐阅读：什么是F型浏览模式？从F型网页浏览看用户对网页的浏览习惯

比如：


无法想象体验者的心情...
但是，创新的东西有时候会需要打破习惯，如果打破这种习惯仍然能正常使用该产品，权衡之后，利大于弊则可以算是过关的创新，具体效果当然得看具体设计。
比如：

跟普通热水壶整体相差不大，握把设计略有差别，一般情况下使用区别不大，如果烧水位置比较高需要手举放上去，会不如普通握把方便，一般也没谁烧个水会放在比自己个子还高的地方。然后形象比较活泼可爱像大象，出水口够高没有生活常识的人装满烧水都不容易喷溅

【用户目标】

小时候都知道写作文要突出中心思想，这个快节奏年代，直入主题很重要，尤其是功能性网站（展示类另说），没人跟你墨迹，精简才是王道。（精简之上可以辅助美化细节）
举个反例：前段时间看世界杯大家没少看广告，有一款黄轩代言的马某窝，全程就几句台词循环，关键是最后也没说一些产品重点，原词大概是这样的：

A：旅游之前
B: 为什么要上马某窝
A：旅游之前
B: 为什么要上马某窝
A：旅游之前
B: 为什么要上马某窝
A：旅游之前
B: 嗷嗷嗷~

旅游相关的产品不要太多，你需要说你的优点、特性之类的内容去吸引用户，而不是嗷~

再举个正面例子：

就记得彩虹糖有一款鹿吃彩虹拉彩虹糖的，记忆犹新。广告词叫：遇上彩虹，吃定彩虹（大概）

桂纶镁和彭于晏一起演的益达口香糖广告。（暴露年龄了~）广告词：饭后嚼两粒（大概），故事性很强，比较有意思同时直入主题，饭后吃益达口香糖有益健康。

还有一种，循环三遍，也是一句话X3的，但是人家目的明确，虽不美观，但也达到目的了，洗脑式植入，有时候莫名就记住了。

【产品目标用户信息收集】
说实话，之前做项目都是顺带考虑UX的，最多的就是换位思考，站在用户的角度考虑问题，揣摩用户的心思。总体来说就是没有一个严格又标准的流程，比较业余。书里(破茧成蝶)说道，揣摩用户的心思远远不够，你不可能完整的想到别人在想什么，所以还需要去体验用户的生活。当然，这个用户是我们产品的目标用户，不然你的产品是给学生用的，你去体验老大爷喝茶下象棋的生活

收集信息比较常见的方式就是问卷了，以前是纸质问卷，现在网页问卷不要太方便。很多产品用户第一次使用的时候会有一个是否加入用户体验优化计划的，勾选的用户会在一些产品阶段收到UX问卷调查
其他方式我就不介绍了，请自行思考...

然后把收集到的信息分析整合到需求中，错误的分析得到错误的结果后果很严重啊，直接影响产品质量...（比如我，一般问卷我是懒得填的，有时候需要应付就随便写写，你认真分析的对象都是假的，慎重...）

【关于用户的一些事要权衡好利弊】
关于一个交互，A说单击好B说单击不好，C说了一些鸡毛蒜皮或者不相关的小事，D提了一条天马行空的建议，EFG...
其实可能有些比较靠谱的建议，也不要一下就肯定，还需要考虑一些开发周期开发成本等问题，付出全组程序员三个月全部精力改善了产品某出体验，产品质量提升千分之一（比方里的数据都是随意捏造，为了表达意思可能夸张，真实数据我会说明，下同）
所以说需要权衡

2. 人接收信息的方式

既然研究好了目标用户，那么我们需要了解下如何把我们的表达传递给用户。谷歌了下人接收信息的途径及使用占比，数据都是别人调研的，具体多少权威我不敢说，配合我们自己的生活工作体验该数据仅供参考，如图：

最主要的就是视觉了，83的占比可以说是绝对地位了，我又要打比方了，比如两个小说网站，A的界面比较杂乱，字体、字体大小、字体颜色、模块背景颜色都很乱，不方便获得信息，B网站主题色，各级字体及大小都设计的赏心悦目，UX很直观的不在一个档次了。所以，从我上小学的时候看到的接近0css的网页到现在所想即所得的网页效果，网页的‘脸’也是越来越好看了。

然后听觉也占了一定比例，给我印象最多的就是web或H5的背景音乐，还有交互时候的声音，还有音乐网站、视频网站类的。从声音能想到跟UX有关的就是是否需要声音、声音大小、声音是否应景（一个可爱风格的运营活动H5 你放一首DJ，霓虹风格的运营活动界面你放山歌，合适吗对吧）等

关于嗅觉、触觉、味觉，目前跟网页好像没啥关系，相信在以后会应用到，比如餐厅的订餐系统网页，不仅提供菜肴的图片还能闻到菜肴的香味

二、从UI提升UX

从第一章我们可以了解到，人接收信息有百分之83是通过视觉来获得的，那么你的网页就有83%左右的信息是通过视觉传递给用户的（这里不要咬文嚼字啊，83只是一个网络调研数值，还是广义上的，意义在于视觉是一个绝对地位需要高度重视的点，如果你要具体到你的产品，啊，我们的产品网站是做音乐的，80%信息都是通过听觉传递给用户，你这瞎说不靠谱。我只想说，你怕是在刁难我小猪佩奇）
根据从业经验及相关书籍我从以下几个方面简单说明下：

1. 产品文案

我不确定把产品文案划分到UI类中会不会有点不妥，我理解的是产品文案是直观、直接的形式把信息分享给用户，而其他几个方面都是间接的传递，比如背景高亮，用户能观察到这个元素跟其他不一样，自然会提高关注度或者说用户可以很快知道自己当前选中的元素等等。

我这里说的文案指文字内容，不是指字体表现形式，字体属于单独一个模块。

产品文案不仅是网站中很常见的元素之一，而且是生活中随处可见的，没错，就是广告了，上面我也举例说了文案相关的。
我想说的几点有篇文章已经概括的很好了，而且举证很多，比较有说服力UI设计师对广告文案的思考：我们，真的不需要懂文案吗？

2. 颜色

颜色也是构成网站重要的元素之一。

颜色有独立的象征、寓意

我们常见的网站比如思否、京东、网易等等有一个共同点，就是有主题色，包括我自己在做的，也有主题色。

多次的使用同一种颜色符合【重复】的设计原则（Bootstrap、element-ui等一些UI库也有）

(图片来自《写给大家看的设计书》截图)

首先这种颜色一定是要让人觉得舒适，因为会频繁使用，比如黄色这种，太艳、刺眼，当主题色很容易让人不舒服（当然，如果你的网站定位就是很燥的前卫的也可以，但是会筛选掉一批用户，这批用户大多数都不是你们的目标用户），然后主题色基本就定格了你的网站的风格，比如你是一家低调奢华的XX公司，主题色选了个粉色，效果就不言而喻了。而主题色选的好的，很容易形成特点让人记住

主题色配上辅色，会让网站更有层次感，主题色的内容会更突出。
然后颜色不要太多，如果你的网站用了七八上十重颜色，用户一眼看去肯定不会觉得：哇，彩虹哎~ ， 而是觉得： 好乱~

颜色分深色浅色，经常会见到浅色搭配深色类似这种的。效果还不错。而且还有很多

字体颜色的深浅可以体现出想表达的权重，浅灰色的字体常常用作辅助文字

（用书里的话说叫亮色暗色）

亮色

暗色

3. 字体

这块我是盲的，有点高深。

推荐两篇网易uedc说字体的文章，我只能懂一点点。字体图形化设计小谈、字体的性格

更多的请阅读《写给大家看的设计书》字体篇，写的很详细。

4. 布局

常见的布局什么的，其实都是上中下左中右的搭配，比如XXX管理系统：

（图片来自百度图片）

比较符合习惯性的阅读方式也就是F型浏览模式，也有叫F型布局的，这一看就能看到个F，也是比较符合大众‘审美‘的布局（习惯）。
不过这种XXX系统的网站基本都是相关人员在操作的，保持页面逻辑清晰就好了，一般做这种系统的项目他们也不会太care UX。

然后还有一些诸如：对称布局、几何图形布局、网格线布局等等

这是整体上的布局，没什么好说的，看UI组的能力了，再往细看，就具体到模块的

【对齐】：

模块内布局左对齐

这一块没啥好说的，基本上的网站都能遵循到这一原则，如果一个内容较多的网站连一处对齐都没有，这个网站简直没法看。
就连CMS建站工具都能做到。

【亲密性】：

红线标记的是一块内容，一篇文章的一些属性：标签、标题、配图、内容、点赞、作者、发布时间等信息
好了，让我来搞点事情

这样看，你知道这个点赞这个标签是哪篇文章的吗？这就是违反亲密性原则的反例。

反例是强有力的证明手段，我喜欢举反例。
违反亲密性原则的网站会让用户感到迷惑，从而降低用户体验，不能匹配去找对应元素的相关信息。上面的列表例子，模块内间距等于甚至大于模块间间距的时候，这就很容易让用户对应错信息，之前的视频列表我有考虑到此原则。

【重复】：

说颜色的时候说到了，主题色符合重复性的设计原则，重申一次

（图片来自《写给大家看的设计书》）

形状（圆角）的重复使用，刚毕业那年第一次来到SF社区就觉得，啊这个主题色我喜欢，这个UI风格我喜欢，于是就定居于SF了，写写东西看看别人的分享。后来SF的app端UI风格大改，很难看，原来的好看多了。后来app就用的少了。

这个的反例不是很容易想到，大家有推荐的可以评论区说出来 我补上...感谢~

【对比】：

加了一段css后

* {
    font-size: 15px!important;
    color: #666 !important;
    font-family: ‘微软雅黑‘!important;
    background: #fff !important;
    font-weight: normal !important;
}

对比前面一张图片来看，去掉了字体大小种类颜色粗细的对比、改变了背景色对比，显然，这样的网站一眼望去，抓不到重点，而且样式太单调，让人审美疲劳，想找个需要的内容都不能很快找到，这里涉及到一个速度问题，速度分两类，一是视觉反馈速度（比如页面渲染、用户操作后的事件处理及反馈）这个会在后面单独一个章节说到、二是用户获取信息速度（用户是带着目的或者潜意识都带着目的来的，通过他们的感官获取需要的感兴趣的信息，这个读取信息的过程的快慢）

这是设计类的书籍（《写给大家看的设计书》），关于用户获取信息的速度而影响到主观感受是我做的延伸。

对比可以让UI具有一定丰富性，防止页面太多相同处、主观感受略压抑，可以突出重点方便用户获取所需信息，从而降低消耗时间长带来的负面情绪。

关于UI这块强烈推荐《写给大家看的设计书》，通俗易懂很实用。就算你要设计一些很酷有创意的东西，应用到这本书上的东西肯定会更出色的。

三、关于速度

1. 首次渲染速度

因为快节奏的生活和频繁的上网，导致用户对网页的要求越来越高，不管是好看层面的还是时间层面的，大家都希望愉快又节省时间的在网站上搞定自己的需求。

首页或者说首屏是打开网页的第一印象，如果这个首屏姗姗而来，让你等半天，再美的网页也没那么美了吧。

关于性能优化这些都是向BAT和类BAT看齐，因为大多数网站都不会有这类公司需求高。他们一个网站信息量这么大，依然可以做到首页秒开。网上关于他们的首页或首屏加载方案有很多，大家可以自行搜索查阅

2. 动画速度

还记得小时候只有HTML没有css的网页吗，基本上只有一些线条和间距围绕内容的网页，慢慢的，技术在发展，到如今各种炫酷的网站。css3、canvas、three.js等等这类已经很常见了。

但是，关于动画，我想说，不管你是做什么动画，都要考虑时间问题（展示类网站除外），这是用户的成本，效果固然重要，但绝不能以消耗过多成本为代价。

另外一点，人的肉眼有视觉停留，只能观察到0.1s及以上的动画，如果你的动画时间低于0.1s，可以说是多余的了。

做过的动画有很多，经常会在各个时间值之间切换尝试，寻找一个视觉上过渡的最佳时间同时节约用户时间成本。当然，我选的也并不一定就是最佳的。只能说我尽量往这个无标准的最佳靠近。

举个例子，比如我点击SF的右上角的创建>写文章，他给我来个3、5秒的酷炫动画，然后我才能开始码字，你说我气不气，嗯，可以说是很气了。尤其是频繁的操作，如果夹杂很长的动画，应该会让人抓狂吧。

所以，动画的时间需要花时间斟酌好，既能表现你想表现的效果同时兼顾用户的时间成本。

为什么精简的设计风格在任何设计领域始终占有一席之地，首先，精简风格有它的美，另外，节约时间绝对是它吸引人的优点之一，可能很多人自己都没意识到这一点，喜欢简单直接，这可以是潜意识的也可以是有意识的。

tips：当你页面信息量很大时，一定要注重好UI设计尤其是布局。对于非专业的设计，我们前端只是辅助设计将网页更好的呈现，如果部分公司没有设计需要自己动手的话，看一些设计类的书籍加上模仿的话应该也能应付的过去。区分一下抄袭和模仿，把别人的框架布局拿来然后往里面填充自己的内容叫抄袭，学习别人的设计优点之处、融合到自己的设计，融合的得当，符合自己的内容及风格可以算是模仿。（个人理解）

3. 用户操作的视觉反馈及响应速度

当用户进行一些页面上的操作，需要我们给出视觉反馈。

比如：

鼠标悬停的时候对应按钮下会出现背景色且鼠标指针变成小手
（截图截不到这个代替下见谅哈）
，反馈给用户的信息就是：你当前处在首页按钮上，点击会跳转到首页而不是问答页。而且背景色块和小手给人一种心理暗示：这是一个按钮，可以点击的。

如果没有这些视觉反馈，当用户移动到首页跟问答按钮中间的时候（如上图红色方框），他以为（没有像素眼的用户）点击可以去到首页，结果事与愿违去到了问答页，这可能是属于用户操作失误类的，但是你没有利用代码或者其他手段尽量去帮助用户更好的操作。

希望你正确的去做视觉反馈而不是这样：
悬浮前：

悬浮后：

说实话，很尴尬。如果说hover的效果把颜色改掉应该好很多。这样去掉样式不知道什么样的脑瓜子想出来的。

有一些操作可能确实没有任何需要反馈的，可以考虑是否需要一些tips去提升他的操作是成功还是失败的状态。

然后还有，
比如，点击某个按钮切换展示不同的模块，JS要处理逻辑、页面要局部重新渲染，或者有什么需要去后台请求才能拿到的东西。
这个响应分两类：发请求和不发请求

不发请求的情况下：理想的响应时间是100ms内，这个在《高性能JavaScript》书中快速响应的用户界面章节有说到，如果懒得找书可以参考我之前的文章高性能JavaScript整理总结

发请求的情况下：遵循2、5、10原则，相关文章请自行搜索。

四、用户体验地图

当我了解到有用户体验地图这一块的时候，我才发现UX这类看似没有衡量标准的东西，在专业的人手里是有标准有规范有流程的，后来才知道有专业的UX书籍，比如《破茧成蝶》，所以觉得UX这个东西我不能只停留在主观上去想一些办法优化而没有具体手段具体流程，当然，写这篇文章我也只是阅读并参考部分内容。暂时没精力去了解太多。

交互设计知识点——用户体验地图我觉得这篇文章把用户体验地图说的很好了，可以看下。
（图片来自上文）

五、前端er可以用到的一些方法（建议）

可能对于上面那些叽叽歪歪的废话而言，这章应该是目的性很强的读者比较愿意一看的内容了，所以我也尽量整理好分享给大家：

 1. 一个有辨识度设计得当的标签页icon，如果是经常访问的用户这样容易培养感情容易记住，好感度+1
 
 2. 一个目录直观清晰、层次分明的导航条可以带领用户更好的玩转你的网站，好感度+1
 
 3. 一个高亮的背景色块让用户自己自己处于什么位置，好感度+1
 
 4. 鼠标悬停时高亮当前元素背景色，颜色浅于已选中背景色色值，有助于区分，好感度+1
 
 5. 图片不要忘记设置alt属性，当资源丢失时，可以进行这张图片的文字说明，而且利于SEO，好感度+1
 
 6. 能用css或者图标字体实现的效果就避免使用图片，性能+1，速度+1，流量+1，好感度+1
 
 7. 用心推敲你的产品文案，表达清晰、通俗易懂不晦涩、贴近环境风格、幽默，好感度+1
 
 8. 避免使用过多的颜色，同样避免颜色单一单调，好感度+1
 
 9. 颜色的亮色暗色搭配使用，对比突出亮色，容易抓住重点，好感度+1
 
 10. 布局得当，方便阅读，千万不要做些反人类的设计，好感度+1
 
 11. 巧妙、合理的使用对齐原则，不要乱用，网页内需要相同也需要不同，好感度+1
 
 12. 遵循亲密性原则，逻辑单元内亲近，单元之间保持距离以示区分，好感度+1
 
 13. 重复使用一些字体以增加条理性和统一性，用非重复字体突出特殊文字的特殊性。方便抓住重点。好感度+1
 
 14. 把握好每个动画的时间，效果得当且节约用户时间成本，好感度+1
 
 15. 使用的图片像素大小准确，避免图片模糊效果不佳或者浪费带宽浪费时间浪费性能，好感度+1
 
 16. 一个表意清晰、大小、空间得当的logo（如果需要的话），跟标签页icon类似，好感度+1
 
 17. 在需要的地方设置title属性，尤其是使用了css的三个点属性的地方（正文除外），进行友好提示，好感度+1
 
 18. 同样可以使用字号大小的对比来实现已选中状态，避免当色块对比过多的情况，好感度+1
 
 19. 当一些图片或内容可能有些晦涩难懂时，在旁边注上小小的浅色的文字说明，好感度+1
 
 20. 检查代码逻辑，优化复杂逻辑代码，减少js执行时间，减少用户等待时间，好感度+1
 
 21. 针对比较慢的请求，建议后端人员进行SQL优化，减少等待时间，好感度+1
 
 22. 简化复杂的操作流程，不要把用户想的太聪明，简单的操作更适合用户，好感度+1
 
 23. 处理浏览器兼容性问题，避免用户遇到异常情况，好感度+1
 
 24. 不要忽视颜色的默认寓意，比如绿色常常代表成功，黄色警告，红色错误等等，切记不要用混，好感度+1
 
 25. 适当的替用户做主，减少用户操作，好感度+1

六、一些设计、交互细节值得借鉴的网站

推荐个网站：一些不错的网站汇总
永远保持学习的心态，别人做的好的地方去观摩去学习去借鉴。

总结：UX看起来好像跟代码关系不是很多，但是想做好是需要花时间花心思的，当然也离不开代码技术的支持。但是，很多公司很多项目都只追求数量，不停的需求迭代，开发新功能，开发时间有限。所以开发计划里面没有排UX的时间，他们的时间只够你开发功能的。这个时候希望大家在开发功能的时候可以顺手做一些能做到的UX优化的事，至于更多的，时间不允许的话，我们也只能just so so了，尽力就好。

【注】：内容有不当或者错误处请指正~转载请注明出处~谢谢合作！