用户体验（简称UX或UE），是指用户在使用产品、系统或服务时所产生的纯主观体验。写这篇文章的初衷是因为前段时间项目重构，发现原来的项目并没有太注重产品的用户体验，UI设计很差，没有考虑交互和交互反馈，响应速度有待提高。简而言之，它只是有效，用户知道它是否有效。第二个原因是我没有涉足这方面的书籍或文章，直到看到了网易UEDC的网站NetEaseUEDC，里面有很多关于UI设计、交互设计和用户体验的文章。有些文章还是很不错的（我觉得剩下的都不是干货，也可能菜品看不懂。其实干货文章也是保留的。当然有些精华就不分享了，点这里)，再加上生活中用到的网易产品或者游戏，从产品文案到UI到交互到性能都非常好~所以希望自己做的东西能和别人的一样，所以想写这样一篇文章，在在写文章的过程中，我会不断的查阅相关的书籍和网络资源来提升自己，写完之后可以分享给大家。希望读者能从这微不足道的文字中有所收获。但这种文章容易写和写得假假空洞，根本没有这回事，所以我尽量简化文字，多提供证据。推荐书籍《破茧成蝶：用户体验设计师的成长之路》《写给大家看的设计书》重要提示：我不是UX设计师，而是一个小前端。本文只是一些学习心得或个人经验。它可以应用于一些UX较差的网站，以获得一些建议。怎么说都不为过，也算不上专业。一、用户体验的核心是用户1、用户心理首先，用户体验是围绕用户展开的。如果你对用户一无所知，你怎么能做出用户喜欢的产品。比如我要做小学生的产品，我对00后小学生一无所知，所以我第一步不是做产品，而是去研究00后，他们的行为习惯，心理特征，消费观念等[用户习惯]习惯是用户体验必须考虑的因素，因为几乎每个人都有习惯，比如浏览网页的习惯（个人更喜欢PC端，这里我们以PC端为例以网页为例，下同），著名的F型浏览模式：图1（图片来源百度）首先：通过点击链接或在地址栏输入网址打开网页，渲染完成从一个空白页面到一个DOM元素（一般是同时渲染完成，这里不考虑极端情况），页面印入眼帘，习惯性的目光聚焦在第一行。为什么是这样？因为大多数人的阅读习惯都是自上而下的，而且我不知道这个习惯能追溯到哪里。就我或大多数人而言，我在学校的时候，书的内容是自上而下，从左到右的。另外，很多网站都有导航栏，一般都在网页的顶部。这种设计也迎合了用户的阅读习惯。随着时间的推移，顶部的导航栏已经成为一种习惯设计。后来者的设计也会参考前者的习惯。如果说世界上第一个网页导航栏是靠右的，久而久之，靠右的导航栏就是现在的主流设计。图2（图片来源：为什么我喜欢用F型浏览方式设计网站界面）从图2来看，①和③被阅读的可能性大于2，4，1大于3。在总的来说，位置1放什么内容，logo，一个比较成功的logo设计，一眼就容易记住。这个例子就不说了，谋东、谋宝的网站大部分都是这样的。然后1->3位置出现的菜单比较多，尤其是管理网站那种。这种布局应该不会太经典。参考一些具体的内容，如图1所示。在文字内容方面，也有很多以网格排列方式出现的列表，比如百度图片、Xdong、宝的具体产品，都是以图片-流的方式排列的布局或网格线。但是，整个网页没有导航和菜单的纯流量或网格排列的网站是比较少见的。这里只是说习惯性设计，并不是说非习惯性设计就是失败的作品。人都是懒惰的，要想带动他改变，就得付出代价。比如你儿子习惯用铅笔写字，后来升学了，也得用钢笔写字了。如果他不习惯写字不想写，你可以给他吃糖或者打他，让他学会用笔。用户也是如此。因此，创新是困难的。困难在于新鲜感和打破习惯的需要。创新设计必须权衡利弊，然后判断设计是否合适。您甚至可以收集用户体验来更改内容。参考与推荐阅读：什么是F型浏览模式？从F型网页浏览看用户的网页浏览习惯，比如：无法想象体验者的心情……但是，创新的东西有时候需要打破习惯。如果改掉这个习惯，您仍然可以正常使用产品。权衡之后，如果利大于弊，也算是一个及格的创新。具体效果当然要看具体的设计。例如：整体上与普通水壶没有太大区别，只是手柄的设计略有不同。总的来说，使用上没有太大区别。如果开水位置比较高，需要用手套上，就没有普通手柄那么方便了，一般也不会有人烫。一个水会放在比自己高的地方。那么形象就更像一头大象活泼可爱了，出水口也够高，没有生活常识的人也可以装满开水，不容易溅水。【用户目标】小时候就知道写作要突出中心思想。在这个快节奏的时代，直奔主题非常重要，尤其是功能型网站（展示类另当别论），没人会告诉你，化繁为简才是王道。（简化可以帮助美化细节）举个反例：前段时间大家看世界杯的广告。有一个黄轩代言的马某窝，整个过程就那么几句台词。原话大致是这样的：A：旅行前B：为什么要去某窝A：旅行前B：为什么要去某窝A：旅行前B：为什么要去去某窝A：旅游前B：哇~旅游相关产品不要太多，要讲自己的优势，特点等内容吸引用户，不要吼~我再举个正面的例子:记得SkittleCandy有小鹿吃彩虹拉Skittles，记忆犹新。广告语是：遇见彩虹，吃彩虹（大概）由桂纶镁、彭于晏主演的亿达口香糖广告。（年龄暴露~）广告：饭后嚼两颗（大概），故事性很强，比较有趣，开门见山，饭后吃亿达口香糖有益健康。还有一种，重复三遍，也是X3的一句话，但是人有明确的目的，虽然不漂亮，但是达到了目的，洗脑植入，有时候莫名其妙的就记住了。【产品目标用户信息收集】说实话，在做项目之前，我一直顺便考虑一下UX。总的来说，没有严格规范的流程，比较业余。书中（CraftingintoaButterfly）说，仅仅揣摩用户的想法是远远不够的。你不能完全去想别人在想什么，所以你还是要去体验用户的生活。当然这个用户就是我们产品的目标用户。否则，你的产品是为学生准备的。你去体验一下老爷子喝茶下棋的生活。问卷不能太方便。很多产品用户在第一次使用的时候，都会有是否加入用户体验优化计划的疑问。检查它的用户将在某些产品阶段收到UX问卷。其他方法我就不介绍了。请自己思考一下……然后把收集到的信息进行分析，综合到需求中。错误的分析和错误的结果后果是很严重的，直接影响到产品质量...（比如我懒得填一般的问卷，有时候需要处理的时候随便写。对象你仔细分析都是假的，小心点。。。）【权衡用户一些事情的利弊】关于一次交互，A说点击好，B说点击不好，C说一些琐碎或无关紧要的话一件小事，D提出了一个天马行空的建议，EFG。。。其实可能还有一些比较靠谱的建议，不要一下子就确定，还需要考虑一些开发周期开发成本等问题，付费整个程序员团队三个月的努力提升了产品的某个体验，产品质量提升了千分之一（比如文章中的数据都是随意捏造的，可能夸大表达意义。我会解释真实的数据，下同）。因此，需要权衡2.人接收信息的能力既然我们研究了目标用户，我们就需要了解如何将我们的表达传达给用户。谷歌列出了人们接收信息的方式和使用比例。资料都是别人研究出来的。我不敢说有多大的权威。数据仅供参考，符合我们自己的生活和工作经验，如图：最重要的是视野，83的比例可以说是一个绝对的位置，我再打个比方。比如两个小说网站，A的界面比较乱，字体、字号、字体颜色、模块背景颜色都很乱，获取信息不方便，B站的主题色，各级字体和字号都设计得赏心悦目，UX非常直观，不在一个档次。因此，从小学时看到的接近0css的网页，到现在得到的我认为的网页效果，网页的“面子”越来越好。那么听力也占了一定的比例。印象最深的是网页或者H5的背景音乐，还有交互时的声音，还有音乐网站和视频网站。从声音的角度，可以想象UX关系到对声音的需求，声音的大小，声音是否适合场合（一个萌系的操作活动H5，你打个DJ，还有霓虹灯风格的操作界面，你放民歌，合适吗？）等等。关于嗅觉、触觉、味觉，目前好像和网页没有关系，相信以后会是应用在未来。例如，餐厅点餐系统的网页不仅提供菜品图片，还可以闻到菜品的香味。2.从UI改善UX从第一章我们可以知道，人接收到的信息83%是通过视觉获得的，那么你网页上大约83%的信息是通过视觉传递给用户的（这里不要啰嗦,83%只是一个在线调查)价值，广义上是指愿景是一个绝对的位置，需要被高度重视。你要指定你的产品啊,我们的产品网站是做音乐的,80%的信息都是通过听觉传递给用户的，你的废话不靠谱。我只是想说，你是怕刁难我小猪佩奇。）根据我的经验和相关书籍，我简单说明一下以下几个方面：1、对产品文案没有把握。分到UI类不合适吗？我的理解是，产品文案是一种直观直接的与用户分享信息的方式，而其他方面则是间接传递，比如背景高亮，用户可以观察到这个元素有别于其他，自然会增加关注度或者用户可以快速知道他们当前选择的是什么元素等等。这里说的文案是指文字的内容，而不是字体的形式。字体属于单个模块。产品文案不仅是网站中非常常见的元素之一，在生活中也随处可见。是的，这是广告。上面我也提到了文案相关的例子。我想说的点在一篇文章里总结的很好，而且证据也很多，比较有说服力。UI设计师思考广告文案：我们真的需要懂文案吗？2.颜色颜色也是网站最重要的元素之一。颜色具有独立的符号和含义。我们常见的网站如四福、京东、网易等都有一个共同点，就是都有主题色，包括我在做的，也是有主题色的。多次使用同一种颜色符合【重复】的设计原则（一些UI库如Bootstrap、element-ui也有）（图片来自《写给大家看的设计书》截图）首先这个颜色一定要让人感觉舒服，因为会经常用到，比如黄色，太鲜艳太刺眼，作为主题色容易让人不舒服（当然，如果你的网站定位很干涩前卫，也可以，但是会筛选掉一批用户，而且这些用户大部分都不是你的目标用户），然后主题色基本上就把你网站的风格定格了。比如你是低调奢华的XX公司，你选择粉色作为主题色，效果不言而喻。而且如果主题色选择得好，很容易形成让人记住的特点，主题色和辅助色会让网站更有层次感，主题色的内容也会更加突出。并且不要使用太多颜色。如果你的网站用了十几种颜色，用户肯定不会觉得：哇，彩虹~，而是觉得：好乱啊~颜色分为深色和浅色，经常看到这样的东西从浅到深。效果还不错。此外，还有很多字体颜色可以体现你想要表达的重量。浅灰色字体常被用作辅助文字（书中称其为亮色和暗色）。推荐两篇网易uedc关于字体的文章，我也只能看懂一点点。关于字体的图形设计和字体的特性，请阅读《写给大家看的设计书》字体，非常详细。4、布局常见的布局其实就是上中下左中右的组合，比如XXX管理系统：（图片来自百度图片）比较习惯的阅读方式是F型浏览模式，也叫F-type布局，一眼就能看到一个F，也是比较符合大众“审美”的布局（习惯）。但是，这种XXX系统的网站基本上都是由相关人员操作的。保持页面逻辑清晰是好的。一般来说，对于这类系统的项目，他们不会太在意UX。然后就是一些东西比如：对称布局，几何布局，网格线布局等等。这就是整体布局，没什么好说的，看UI组的??能力，再仔细看，就具体了tothe[alignment]ofthemodule:模块中布局的左对齐没什么好说的。网站基本上可以遵循这个原则。如果一个内容很多的网站连一个对齐方式都没有，那么这个网站简直就是不可读。即使是CMS网站建设者也可以做到。【亲密度】：红线标示了一条内容，一篇文章的一些属性：标签、标题、图片、内容、点赞数、作者、发布时间等信息。好吧，让我做点什么。这样看，你知道这篇文章喜欢这个标签吗？这是违反亲密原则的反例。反例是有力的证明手段，我喜欢举反例。违反亲和原则的网站会使用户产生混淆，从而降低用户体验，无法匹配和找到相应元素的相关信息。在上面的列表示例中，当模块间距等于甚至大于模块间距时，用户很容易响应错误信息。我在之前的视频列表中考虑过这个原则。[重复]：我在讲颜色的时候提到过。主题色符合重复的设计原则。我重申形状（圆角）的重复使用（图片来自《写给大家看的设计书》）。刚毕业第一次来到SF社区。我想，啊，我喜欢这个主题色，我喜欢这个UI风格，所以我就入驻顺丰，写看别人的分享。后来顺丰的app的UI风格大改，丑了，比原来好多了。后来这个app用的越来越少了。这个的反例不好想。大家有什么建议可以在评论区告诉我，我会补充的。。。谢谢~【对比】：加一段css后*{font-size:15px!important;颜色：#666！重要；font-family:'MicrosoftYahei'!important;背景：#fff！重要；font-weight:normal!important;}和上一张图相比去掉了字号、字型、颜色、粗细的对比，改变了背景的颜色对比，显然，这样的网站抓不住重点一眼望去，风格过于单调，让人感到疲倦。如果你想找到你需要的内容，你不能很快找到它。这里涉及到一个速度问题，速度分为两类，一类是视觉反馈的速度（比如页面渲染、事件处理、用户操作后的反馈），后面会单独章节讲到，另一类是用户获取信息的速度（用户是有目的或下意识而来的，通过感官获取自??己需要的有趣信息，阅读信息过程的速度）这是一本设计书(《写给大家看的设计书》)，关于速度用户获取信息并影响主观感受是我工作的延伸。对比可以让UI更丰富，防止页面雷同太多，主观感觉略显压抑。突出重点，方便用户获取所需信息，从而减少长时间消费带来的负面情绪。关于UI，强烈推荐《写给大家看的设计书》，通俗易懂，非常实用。即使你打算设计一些很酷、很有创意的东西，如果应用到本书中，它一定会变得更好。三、关于速度1、首次渲染的速度由于快节奏的生活和频繁的上网，用户对网页的要求越来越高。在线获取您自己的需求。主页或第一个屏幕是您打开网页时的第一印象。如果第一屏来的慢，让你等了很久，再漂亮的网页也不会那么漂亮。关于性能优化，这些都是符合BAT和BAT-like的，因为大部分网站对这类公司的要求不会太高。他们网站的信息量这么大，还是秒开首页的。互联网上有许多针对他们的主页或首屏的加载解决方案。您可以自己搜索它们。2.动画速度还记得小时候，只有HTML，没有CSS的网页。基本上，网页内容周围只有一些线条和间距。慢慢地，技术在发展，直到现在各种炫酷的网站。CSS3、canvas、three.js等已经很普遍了。但是关于动画，我想说，不管你做什么动画，都要考虑时间的问题（展示网站除外），就是用户的成本。效果固然重要，但绝不能以过高的成本为代价。还有一点就是人的肉眼有视觉停顿，只能观察0.1s及以上的动画。如果你的动画时间小于0.1s，可以说是多余的。我做过很多动画，我经常尝试在各种时间值之间切换，以找到视觉过渡的最佳时间，同时节省用户时间和成本。当然，我选择的不一定是最好的。只能说我是尽力去接近这个非标准的极品。比如我点击SF右上角的Create>WriteArticle，他就会给我一个3、5秒的炫酷动画，然后我就可以开始coding了。你说我生气，嗯，可以说是很生气。尤其是频繁的操作，如果夹杂着长长的动画，应该会让人抓狂。所以动画的时间需要慎重考虑，既能表达出你想表达的效果，又能兼顾用户的时间成本。为什么流线型设计风格在任何设计领域总能占有一席之地？首先，流线型的款式有它的美感。此外，节省时间绝对是其吸引人的优势之一。很多人可能没有意识到这一点。他们喜欢简单直接，可以是下意识的，也可以是有意识的。Tips：当你的页面信息量很大时，一定要注意良好的UI设计，尤其是排版。对于非专业的设计，我们的前端只是辅助设计，更好的呈现网页。如果有的公司没有设计，需要自己做，看一些设计书，模仿一下，应该是可以搞定的。区分抄袭和模仿。拿别人的框架布局并用自己的内容填充它被称为剽窃。学习别人设计的优点，融入到自己的设计中，如果融入得当，符合自己的内容和风格，也算是模仿。.（个人理解）3、用户操作的视觉反馈和响应速度当用户在页面上进行一些操作时，我们需要给予视觉反馈。例如：当鼠标悬停时，相应按钮下方会出现背景色，鼠标指针会变成一只小手（恕我无法在截图中捕捉到），反馈给用户的信息是：您当前在主页按钮上，点击它跳转到主页而不是问答页面。而且，背景色块和小手给人一种心理暗示：这是一个可以点击的按钮。如果没有这样的视觉反馈，当用户移动到首页中间和问答按钮（如上图红框所示）时，他认为（没有像素眼的用户）可以点击进入首页，却没有去到问答页面，这可能属于用户操作失误的范畴，但你没有用代码或者其他方式去尝试帮助用户更好的操作。希望你得到正确的视觉反馈而不是这个：悬浮之前：悬浮之后：老实说，这很尴尬。如果悬停效果改变颜色，应该会好很多。不知道是什么脑洞想出这样去除样式的。可能有一些操作不需要任何反馈。你可以考虑是否需要一些技巧来提高他手术的成败。然后就是，比如点击一个按钮切换显示不同的模块，JS要处理逻辑，页面要局部重新渲染，或者有什么东西需要后台请求获取。这个响应分为两类：发送请求和不发送请求的情况：理想的响应时间在100ms以内。《高性能JavaScript》一书中的快速响应用户界面章节中提到了这一点。如果懒得找书，可以参考一下。我之前的文章高性能JavaScript排序总结在发送请求的情况下：遵循2、5、10的原则，相关文章请自行搜索。4.用户体验图当我了解到有用户体验图的时候，我才发现，看似没有标准的UX，在专业人士的手中却有标准、规范和流程。后来才知道有专业的UX书籍，比如《破茧成蝶》，所以觉得不能只停留在UX的主观方面，没有具体的手段和具体的流程去想一些优化的方法。当然，我在写这篇文章的时候只是阅读和参考了部分内容。我现在没有精力学太多。交互设计知识点——用户体验图我觉得这篇文章讲的用户体验图很好，可以看看。（图片来源于上）5.前端er可以使用的一些方法（建议）。或许对于上面的废话，这一章应该是目的性强的读者更愿意阅读的内容。所以我也尽量整理分享给大家：1.一个有辨识度且设计良好的标签页图标，如果是经常访问的用户，容易培养感情，容易记住，好感度+12.目录直观清晰，层次分明导航栏可以引导用户更好的玩你的网站，好感度+13.高亮的背景色块让用户自己定位，好感度+14.突出显示当前元素鼠标悬停时背景色，颜色比选中的背景色值浅，有助于区分，好感度+15.不要忘记设置图片的alt属性，当资源丢失时，可以对这张图片做一个文字描述，对SEO有好处，好感度+16.如果可以用css或者icon字体来达到效果，就避免用图片，性能+1，速度+1，流量+1，好感度+17.仔细思考你的产品文案，清晰易懂晦涩难懂，贴近环境风格，幽默风趣，好感度+18.避免使用过多的颜色，也避免单一和单调的颜色，好感度+19.使用亮色与暗色组合，对比突出亮色，容易抓住重点，好感度+110.布局得当，易读，不做反人性设计，好感度+111.聪明合理运用对齐原则，不要乱用，需要在网页中相同或不同，好感度+112.遵循亲近原则，逻辑单元内靠拢，单元间保持距离，以示区别，好感度+113、重复使用部分字体增加秩序和统一性，使用不重复的字体突出特殊字符的特殊性。容易进入正题。好感度+114.把握好每个动画的时间，效果恰到好处，节省用户的时间成本，好感度+115.所用图片的像素大小准确，避免图片出现模糊效果或浪费带宽、时间和性能，良好的敏感度+116.一个标志，含义清晰，大小合适，空间适当（如果需要），类似于标签页图标，好感度+117.在需要的地方设置title属性，尤其是用css的三个点代替属性（文本除外），友情提示，好感度+118.也可以用字体大小的比较来实现选中状态，避免出现有色块太多，好感度+119.当有些图片或者内容可能有些晦涩难懂的时候，在旁边写一个浅色的小文字说明，好感度+120.检查代码逻辑，优化复杂逻辑代码，减少js执行时间，减少用户等待时间，好感度+121。对于比较慢的请求，建议后端人员进行SQL优化，减少等待时间，好感度+122。简化复杂的操作流程，不要觉得用户太聪明，简单的操作更适合用户，好感度+123。处理浏览器兼容性问题，避免用户遇到异常情况，好感度+124。不要忽略颜色的默认含义，比如绿色常表示成功，黄色警告，红色错误等，切记不要混用，好感度+125。适当为用户做决定，减少用户操作，好感度+16。一些在设计和交互细节上值得借鉴的网站推荐一个网站：一些不错的网站总结始终保持学习的心态，其他做得好的地方值得观察和借鉴。总结：UX看似和代码的关系不大，但是要做好是需要时间和心思的，当然也离不开代码技术的支持。但是很多公司、很多项目只追求数量，不断迭代需求，开发新功能，开发时间有限。所以开发计划里没有UX的时间，他们的时间只够你开发功能。这个时候希望大家可以做一些在开发功能的时候可以顺利完成的UX优化。至于更多，如果时间不允许，我们也只能这样，尽力而为。补充：业内很多参考了阿里的设计规范，蚂蚁设计值得一看【注】：内容不当或错误请指正~转载请注明出处~谢谢合作！
