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

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

初衷

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

因此但愿本身作的东西也能像别人家的那样，因而就想写这样一篇文章，写文章的过程会不断的查阅相关书籍和网络资源来提高本身，文章完成也能分享给你们，但愿读者能从这微不足道的言语中得到一些东西。可是这类文章容易写着写着写成假大空，也没有因此我文字尽可能精简，多举证。

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

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

1、用户体验核心是用户

1. 用户心理学

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

【用户习惯】

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

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

从图二看，① 跟 ③被阅读到的可能性大于二、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，霓虹风格的运营活动界面你放山歌，合适吗对吧）等

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

2、从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这块强烈推荐《写给你们看的设计书》，通俗易懂很实用。就算你要设计一些很酷有创意的东西，应用到这本书上的东西确定会更出色的。

3、关于速度

1. 首次渲染速度

由于快节奏的生活和频繁的上网，致使用户对网页的要求愈来愈高，无论是好看层面的仍是时间层面的，你们都但愿愉快又节省时间的在网站上搞定本身的需求。

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

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

---

2. 动画速度

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

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

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

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

举个例子，好比我点击SF的右上角的建立>写文章，他给我来个三、5秒的酷炫动画，而后我才能开始码字，你说我气不气，嗯，能够说是很气了。尤为是频繁的操做，若是夹杂很长的动画，应该会让人抓狂吧。

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

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

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

---

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

当用户进行一些页面上的操做，须要咱们给出视觉反馈。

好比：

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

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

但愿你正确的去作视觉反馈而不是这样：
悬浮前：

悬浮后：

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

有一些操做可能确实没有任何须要反馈的，能够考虑是否须要一些tips去提高他的操做是成功仍是失败的状态。

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

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

发请求的状况下：遵循二、五、10原则，相关文章请自行搜索。

4、用户体验地图

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

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

5、前端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

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

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

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

补充：业界有不少都是参考阿里的设计规范，值得细看ant design

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