颜色、字体、图标，这些视觉元素是怎样影响用户体验的？|大家都是产物司理 ...
http://image.woshipm.com/wp-files/img/95.jpg文章重要分析了差别的视觉计划元素是怎样影响网站用户体验，盼望通过文章的解读可以或许对你的产物计划带来些开导。大概是由于我在视觉计划上没有太多履历，我发现寻常在与视觉计划师讨论计划方案时，我们经常讨论的是：“我以为如许结构很希奇”、“我以为A不太悦目”、“这个地方给我带来了某种XXX的感觉”、“如许表现会不会给用户带来某种误解”……
不难发现，大多数时间我们讨论的是一种捉摸不透的“感觉”。视觉计划固然必要美感和源于直觉的创造力，但是作为一个“计划”范畴，它必要有更多理性的思索。为什么应该是如许？这对用户的感情和举动带来了怎样的影响？我们必要一些研究效果和履历法则作为参考，知其以是然才气做出好的计划。
以下是原文：
先容
为网站、APP或产物计划一个美丽的用户界面必要技能、天赋和灵感的特别组合。
但是用户界面的计划不是美丽就行。它应该资助用户往做他们必要做的事变。
为了创造出不光有吸引力，而且可以或许服务于用户体验的计划，你必要清晰地熟悉到你的计划决议是怎样资助大概拦阻你的用户的。
我们在UserTesting实行和分析过数十万个可用性研究，从中看过了许多有用的（以及不那么有用的）视觉计划决议。如今我们想分享一下我们从这些研究中学到的东西。
本文是关于差别的视觉计划元素是怎样影响网站、APP或产物中的用户体验的。我们将谈判到以下内容：
[*]颜色
[*]排版
[*]图标
[*]和用户一起测试你的计划
你将会学到怎样做出对用户友爱的计划决议，而且为你的公司带来最好的效果。
颜色
在计划师的工具箱中，颜色是最有力的工具之一。
你可以利用颜色往影响用户的情绪，吸引他们的留意力，把他们置进适于购物的感情体验中。颜色同时也是客户对一个品牌认知的重要因素之一。
由于大概的颜色组合是无穷的，很难往决定哪种颜色会对你的网站或应用产生最大影响。往测试全部的颜色是不大概的，但是我们总结了关于颜色怎样影响用户的态度和举动的一些本领和趋势。
颜色理论与用户体验
底子颜色理论的原理是雕琢用户体验的一个紧张出发点。
互补色可以用来吸引观看者的留意力而且创造活力，而雷同色可以用来在计划中创造和谐感和同等感。思量一下在主页大概主屏幕上你可以怎样利用互补或雷同的配色方案，往为用户奠基基调而且让用户进进可以或许促使他们接纳你盼望的举动的心态中往。
http://image.woshipm.com/wp-files/2017/07/PxcgtTp8QKB2OUjT73yQ.png
当你在文本中利用颜色时，记着把两种低对比度的颜色放在一起会使它们非常难以阅读（不管它们是互补色照旧雷同色）。
http://image.woshipm.com/wp-files/2017/07/tMlWezSWh1n3Y1Jjev7X.png
在手机屏幕上尤其云云，由于用户更大概在户外大概豁亮的地方利用手机以致屏幕比力耀眼。
（译注：原文形貌了他们做的一个关于颜色偏好的性别差别的研究，但由于样本只有50人且差别不大，在此不译，感爱好的同砚可以检察原文。）
颜色带来的遐想在差别文化下，对差别的个体都不一样。差别性别常常有差别的颜色偏好，年度盛行色对年轻人大概高收进人群都大概更有吸引力。
色彩生理学与关联
众所周知，颜色可以唤起情绪，以下是传统上与颜色关联的情绪：
[*]赤色：气力，热情，食欲，爱，伤害
[*]橘色：自大，兴奋，友爱
[*]黄色：芳华，幸福，暖和，阳光
[*]绿色：发展，款项，治愈，情况，妒忌
[*]蓝色：信托，宁静，忠诚，阳刚，安全
[*]紫色：皇室，秘密，灵性，创造
[*]棕色：户外，食品，守旧，地球
[*]玄色：正式，奢华，高雅，殒命
[*]白色：春节，质朴，善良，奇怪
商标与行业
许多闻名公司在客户购买之前好久就已经用颜色唤起了特定的感情。
http://image.woshipm.com/wp-files/2017/07/CB76fcr4IzuyUtkgFriT.png
客户也会将颜色和特定的行业创建接洽，好比蓝色和科技，绿色和康健，赤色和快餐。当有些公司为了匹配客户盼望而选择用行业通用色时，有些公司发现反其道而行之可以快速让人留下印象。
举个栗子。在旅游业中，蓝色对于网站和应用来说黑白经常用的。看一看下面这个网站主页：
http://image.woshipm.com/wp-files/2017/07/SMzWDfziZWnv5BwzMRpQ.png
蓝色代表着可信任，这对旅游公司来说是一个功德。但是旅游网站利用蓝色并不是一个铁则。
维珍美国航空在计划网站时就选择了反其道而行。
当它与用户对航空网站的等待差别时，就会显得比力突出。选择一个料想之外的颜色可以有用地让用户体验到兴奋，而且让他们记着你的公司。
[*]思量你的目的客户有多传统。
[*]他们对背离规范有什么反应？
[*]这会令他们感到开心照旧疑惑？
[*]假如你的配色背离了传统预期，你的公司转达出了什么信息？
http://image.woshipm.com/wp-files/2017/07/V7imkRmGpTX0xhTbJuJv.png
颜色与可及性
你的网站或应用对有视觉停滞的用户来说是什么样子的？
约莫8%的男性和0.5%的女性患有某种情势的色盲。色盲有多种环境，但红绿色盲是最常见的。红绿色盲患者无法区分赤色，绿色和具有相似值的黄色，尤其是当绿色中含有的黄色比蓝色更多时，好比下面的橄榄色配景色。
http://image.woshipm.com/wp-files/2017/07/r6SHQx6T88mUeeEW79M1.png
同样的按钮，左边是视力正常者看到的，右边是红绿色盲看到的
假如你在利用低对比度的颜色，要知道色盲用户大概根本无法辨认笔墨大概图片。在冷假这个题目尤其严峻，大量网站充斥着节日喜庆的赤色和绿色。记着，假如有8%的男性访客无法看到按钮上的笔墨“Buy Now”，那么你大概正在流失掉数目可观的转化。
假如你不得不利用对色盲患者来说难以区分的颜色组合，你仍旧可以通过进步颜色之间的对比度来包管可及性。好比下面这张图利用了非常暗的赤色和非常亮的绿色，不管是否色盲都很轻易看清晰。
http://image.woshipm.com/wp-files/2017/07/JxQ2UpCaexx8UMhKDnxV.png
同样的按钮，左边是视力正常者看到的，右边是红绿色盲看到的
另有一些关于可及性的要点：不要忘记那些大概在利用屏幕阅读器访问你的网站的用户。你是否曾经在填写表格的时间收到一个错误信息，好比“标红的字段是必填的”？这对于那些无法看到赤色字符的人来说是极其糟糕的体验。最好制止在网站大概应用中提到颜色，而且提供更加详细的错误信息，好比“邮件地点是必填的”。
可及性测试工具
有一些很棒的工具可以资助你测试网站的可及性。
[*]下载Color Oracle的色盲模仿器，有Windows，Mac和Linux版本；
[*]将你的静态图片上传到Coblis，可以用九种差别的颜色视角往体验它们；
[*]乃至可以约请色盲患者往测试网站，看是否有他们难以看清的东西。
颜色对转化率的影响
有些优化转化率的专家会声称对按钮来说最好的颜色是大胆的、吸引眼球的赤色，但也有人说绿色最佳由于绿色表现“开始”。
有大量的A/B测试表现了CTA按钮（CallToAction）的颜色改变会对转化带来极大的影响。HubSpot在从前仍叫做Performable的时间分享了这个闻名的测试：
http://image.woshipm.com/wp-files/2017/07/4B85WaddDzDchJMAIVoG.png
HubSpot的A/B测试
只管他们原来猜测绿色按钮会体现得更好，但是赤色按钮带来的点击量高了21%。但是他们仍旧提示读者，这个测试效果自己不应该使全部人都把按钮酿成赤色。大概的表明是他们的用户就是喜好赤色，只管其他的用户大概更喜好绿色。大概，更大概的环境是，这个赤色按钮得到了更多留意是由于它是这个页面上唯一的赤色物体。
坏消息是并不存在一种邪术颜色能在全部网站上都体现最优。好消息是有一些履历法则可以资助你有用地利用颜色。
履历法则
对比是关键
这看起来很显着，但是我们照旧要说：假如你盼望用户点击某处，你要让它充足突出。假如你的网站或应用利用了许多橘色，用户大概不会立刻留意到一个橘色的按钮，不管这个橘色按钮在其他公司的A/B测试中体现多好。
在我们的研究中，我们让用户指出他们在每个网站上起首会点击的东西。不出料想，用户更大概点击与配景形成猛烈对比的CTA按钮。
豁亮令人难忘
在上面提到的谁人50人的研究中，我们问的末了一个题目是用户访问的哪个网站最令人印象深刻。
50%的用户选择了豁亮的网站。风趣的是许多选择深色大概白色网站的用户是出于一些与计划无关的缘故原由。好比一个用户以为Dropbox是最印象深刻的由于她已经有了Dropbox账号。
字体
笔墨的重要目标是资助用户往做你必要让他们做的事变——不管是探索产物，学习怎样玩一个游戏，照旧欣赏一些令人舒畅的故事。
遗憾的是，在网站和应用排版中有许多相互抵牾的选项，而且没有一个实用于全部环境的严酷规则（否则事变也太简朴了吧）。但是你可以做一些事变，以包管你为网站或应用选择的字体对你和你的用户有所资助，而不是跟你唱反调。
字号与行长
笔墨的尺寸和结构会对在线阅读的体验带来巨大影响。年事较大的人大概有视力停滞的人在面临小字的时间尤其痛楚。纵然是视力正常的人盯着屏幕太久后也会以为疲惫——当他们为了阅读不得不斜视大概放大时会感到激愤。
看看下面这个例子：对于台式机来说，正文较好的处置惩罚方式是每行50-75个字符，字号不低于16pt。
http://image.woshipm.com/wp-files/2017/07/gt4NzjClGkoXIh2kQpPw.png
对比下面这个页面，每行有100个字符，而且字体更小。
http://image.woshipm.com/wp-files/2017/07/VvqZ7tXxiYVi9MENt6mU.png
这个题目在手机上有所延伸。对用户来说在一个小的豁亮的屏幕上阅读是一件很头疼的事变。比力好的做法是在手机上每行表现30-40个字符。下面是在智能手机上看到的两个网站，第一个利用了30-40个字符，而第二个利用了为台式机计划的网站上的尺寸。
http://image.woshipm.com/wp-files/2017/07/g2axwx5yPTX0u3voy8i7.png
由于写死的字号（好比，16px）在差别的装备上表现结果差别，以是试着利用rem单元往界说字号（译注：rem是CSS3引进的字体巨细单元，是指相对于根元素的字体巨细，便于实现相应式计划）。
文本的颜色对比度
关于文本颜色和可读性，有两种差别意见：
[*]一种以为高对比度更好，白底黑字是最具有可读性的组合；
[*]另一种以为太大的对比度反而难以阅读，利用灰色阴影更好。
应用多少对比度必要玄妙的均衡。由于屏幕之间的差别太大，在计划师的屏幕上显得充足深的灰色在用户的屏幕上大概更淡。
在手机上有充足的对比度尤其紧张，由于用户大概必要在户外大概豁亮的地方利用。
W3C网站内容可及性指南是一个不错的开始。他们设定了最小对比度的尺度，包管适度低视力的用户可以或许阅读你的文本。你可以利用一个对比率工具快速找到你设定的对比度是否在符合范围中。
但是纯黑的文本（#000000）对于诵读困难者来说更难以阅读，而且颠末长时间阅读后会导致眼睛疲惫。
许多计划师选择利用非常深的灰色大概现实的玄色（而不是纯黑），好比#0D0D0D，#0F0F0F，大概#141414。
一旦你选择了颜色，让真实用户在天然情况中利用任何你能想到的装备试用是尽对必要的。假如任何测试用户在阅读你的文本时碰到了贫苦，那么有来由信赖你的客户正在遭遇雷同的题目。
我们的研究效果：衬线与非衬线
在传统的印刷排版中有个知识，衬线字体可以通过在程度方向上温顺地引领视线而进步可读性和阅读速率。
但是关于这两种字体的现实区别的研究效果非常不确定。我们必要本身做试验，以是我们做了一个研究，让30个用户阅读两个除了字体之外完全雷同的页面（A利用的是Arial，B利用的是Times New Roman），并丈量阅读时间和明白水平。
我们得出的效果同样是难下定论的。
阅读非衬线字体页面的用户均匀阅读速率高了9%，但是差别没有到达统计明显程度。而且，用户的明白率也非常靠近：阅读衬线字体页面的用户的明白分数高了1%，同样也是不明显的。
唯一值得留意的区别是阅读衬线字体的用户诉苦的次数是另一组的两倍（表现段落很难阅读的用户在衬线字体组和非衬线字体组分别是6人和3人）。
以是衬线字体有什么题目呢？
起首，衬线改变了每个字母的表面，以是它们对有诵读困难症或视力停滞的人来说更难辨认。
第二，由于这些程度线非常小，它们在低分辨率的老盘算机屏幕上表现结果很差。（智能手机宁静板上的Retina屏幕有更高的分辨率，会让衬线字体更轻易阅读。）
这意味着我们在电子产物上只应该利用非衬线字体吗？
尽对不是。这只是意味着当你选择利用衬线字体的时间，要确保利用干净而正确的在线字体，而且——你知道的——用真实用户往测试你的选择。
选择对用户来说符合的字体
你选择的字体是用户在你的网站或应用中的团体体验中的重要部门。思量完备的情境，而不是只是在计划的时间依靠某些规则。
你的用户等待什么？
有什么更复杂的东西吗？兴趣？极简主义？在访问网站或打开你的应用之前，用户对你的品牌已经有哪些相识？你想要创造怎样的第一印象？
客户在利用什么装备？
对于大多数电子装备来说，你的用户会在火车上，在电视前，在阳光妖冶的露台上阅读你的文本。确保保持他们的留意力，不要用难以阅读的笔墨把他们赶跑。
用户试图完成什么？
购物？学习？娱乐？确保你提供的体验与用户的需求（以及你的贸易目的）相匹配。
假如你盼望客户快速明白你的产物特点以便他们决定下单，那么选择让他们瞄一眼就可以或许明白的字体。假如你盼望用一个长而吸引人的故事保持读者的留意力，那么选择让用户轻易保持盯住页面的字体。
图标
不管计划的是网站照旧应用，在用户界面上的任何图标都应该为某个目标服务。固然，图标的存在是为了节省屏幕空间。但是更紧张的是，图标应该资助你的用户。假如得到精确的处置惩罚，图标可以帮你引导用户快速而直观地完成使命，而不必要过多地依靠文本。但是假如处置惩罚得欠好，图标也会疑惑用户，把他们带向错误的路径，并摧毁他们利用产物的体验。
由于有许多的应用和网站都在利用令人疑惑的图标，我们想知道一个题目：让一个图标到达用户友爱必要做什么呢？
我们做了一个长途可用性研究往探索移动应用上的图标带来的用户体验。我们观察了35个用户与一系列安卓应用上的190个图标的交互过程。有些图标是很显着的，好比放大镜表现搜刮功能。有一些不太显着，好比一个旌旗表现群成员。有一些有笔墨标签，有一些则没有。
图标范例及其对用户体验的影响
令人惬意的图标
有一些图标险些是通用的。一个屋子外形的图标会带你到主页大概主屏幕，一个购物车会让你购买东西，这都是相称安全的推测。
在大多数环境下，图标不是一个用来发挥创意的地方。你可以依靠其他计划元素往转达品牌信息。你的图标的主要工作是引导你的用户到他们想要往的地方。用奇异的大概过分智慧的图标表现根本功能，会摧毁用户体验。保持简朴就好。
图标的作用是引导用户。请保持简朴。
令人疑惑的和抵牾的图标
当你利用有着抵牾大概多重寄义的常用图标时，贫苦就来了。
http://image.woshipm.com/wp-files/2017/07/HrS9IXjpYQShyeYP0cIv.png
想象一下你在一个应用中的一张图片下面看到这个图标。它表现什么？假如你点击了它会发生什么？这个图标是用来表现你喜好某些东西，这非常清晰。
但是它会把这个图片或项目生存到收躲夹列表吗？它会关照或人你喜好了它吗？它会塑造你的偏好并在你的信息泉源中添加相似的图片或项目吗？大概它只是对支持的一种通用表达？
就像这个心，有许多图标我们经常在多种情境下见到，但是它们在差别图标中的的功能都稍有差别。思量以下这些有多重寄义的常用图标：
http://image.woshipm.com/wp-files/2017/07/RXDwCVkShd5sJbgfwX2x.png
纵然是在应用自己的情境中，这些符号也大概很令人疑惑，用户大概等待某个效果但却得到了一个差别的效果。
更别说iOS和安卓体系惯例的差别了。差别操纵体系的栏图标大概非常差别，给用户带来了额外的狐疑。假如你对这件事变不太确信，请阅读这篇形貌了分享图标的12种变革的文章，此中几种很轻易被误解为其他东西而不是分享。
过期的图标
许多常用的图标参照了过期的大概废弃的技能。许多应用中保存的生存图标，对于大多数利用过软盘的人来说没有题目，但许多95后会以为这些老人家们对峙利用这种图标是个怪癖。继承利用像软盘这种图标会让你的品牌对年轻用户群来说显得过期。纵然是电话图标也大概必要演变，由于年轻的用户已经不太可以或许辨认出电话机了。
唯一无二的图标
最棘手的图标挑衅之一是当你的产物有唯一无二的功能，不在分享、喜好、上传图片、输进文本等尺度动作之内时，应该怎么做。你怎样利用一个简朴的符号转达更加抽象的概念——好比观看你即将到来的旅游，向朋侪发送一个有声读物，检察你的汗青订单，大概追踪你的就寝模式？
许多计划师在做实验，许多计划师失败了。无论在你知道一个图标应该代表什么之后图标具有怎样的意义，对于第一次利用的用户来说它都大概带来完全差别的体验。
这并不是说假如你想要创造一个可用的用户界面，就不能阔别通用图标。有一些独特的图标不管对新用户照旧老用户来说都能有用地转达它们的意义。
推特闻名的羽管笔图标就是很好的例子。只管没有标签，在我们的研究中仍旧有80%的用户精确地猜到它是干什么的。
http://image.woshipm.com/wp-files/2017/07/NCN6a7s4juGfFZ10fsPp.png
让我们看看推特在这个图标上做了些什么：
[*]结构。推特将用来创造（写推特，照相，以及上传图片）和用来探索（消息泉源，关照，信息，人和搜刮）的图标分开了。假如用户想要写一篇帖子，屏幕的底部就是一站式服务区。
[*]在桌面版上的笔墨。许多人是起首在电脑上利用推特的。如许他们就会很显着地看到这个图标旁边的表明笔墨。
[*]可影象性。固然羽管笔可以被以为是过期的技能，就像软盘一样，但是它黑白常独特的，而且轻易影象。你不会在许多应用中看到羽管笔，以是用户不必实验往分辨与其他产物功能上的渺小差别。
[*]品牌化。笔上的羽毛与推特logo上的羽毛对应。这在品牌和发表推文的动作之间创造了一种团体感。
标签与可用性
针对于那些以为一图胜千言的人来说大概会有些扫兴：
文本标签会极大地进步图标的可用性。
我们很轻易盼望用户（尤其是手机用户）会随处点，兴奋地实验全部差别的图标直到他们发现了每个图标是干嘛的。
但现实上，用户会被新的用户界面吓到而且不会像我们盼望的那样在他们的舒服区之外探索。在一个不认识的产物中，用户想要在接纳动作之前就清晰地知道如许做会发生什么。
你的图标必要在用户点击之前为用户设定清晰的盼望，而这通常意味着利用文本标签。
我们的研究效果：有标签VS没有标签
在我们的研究中，我们发现对有标签的图标来说，在88%的环境下用户可以或许在点击之前精确地猜测将会发生什么。
而对于没有标签的图标来说，这个比率只有60%。
而且假如没有标签的图标在应用中是唯一无二的，那么用户在点击之前精确猜测将会发生什么的比例只有34%。
好比说，Meetup应用利用一个名牌图标表现小组运动并加上了一些额外的品牌辨认。但是，由于一个空的名牌不会让大多数人想起运动大概关照，以是他们增长了标签。100%的测试到场者可以或许精确地推测出这个加了标签的图标醒目什么。
http://image.woshipm.com/wp-files/2017/07/JAotHqskFdW5Z2NT0cr6.png
变通方法
有一些计划师发现加标签违反了利用图标的目标，而且利用户界面显得紊乱。为了制止利用标签，他们在教程大概引导页面中加上了关于利用图标的阐明，盼望练习用户怎样与图标交互。
固然这大概是用来先容独特的大概不通用的图标的好方式，但是这不应该替换更加直觉化的计划。记着一件事：用户经常跳过教程大概很快地忘记了他们学过的统统。教程应该是一个工具，而不是一个依赖。
对计划决议举行测试和验证
在做一个新的计划的时间，跟随最佳实践好比高对比度按钮和可读性强的字体是一个很好的开始。但是终极，精确的计划决议是可以或许带来预期效果的谁人。往发现你的计划决议是否给用户带来直觉而且以你盼望的方式影响他们。
验证你的假设
把你的计划当做是你必要经常往验证、反证或改进的假设。这会给你信心往实验许多实行并发现什么才气够带来最好的贸易效果以及愉悦你的用户。
做定期的用户测试，往听用户怎样形貌他们在利用你的网站、应用大概产物时的体验。你将会听到他们形貌你的品牌与什么情绪接洽在一起，你会看到许多由于令人迷惑的图标大概难以阅读的笔墨而让他们感到狐疑的地方。
但是你不必比及有了一个开辟完成的真实的产物才气往网络用户反馈；你可以在原型计划阶段就开始用户测试。这会资助你验证你的计划决议并带着信心继承，大概快速发现和修复全部不起作用的计划。
假如你的计划已经实现了，利用A/B测试验证你的计划决议是否影响了用户举动，转化率以及以你盼望的方式带来的收益。
简朴的用户测试题目
这是当你在验证你的计划时可以扣问用户的一些题目：
[*]在利用【你的网站或应用】之前，请告诉我们你对一个从事【你的公司的业务】的公司的盼望。你以为它可以或许做什么？你以为这个网站或应用应该长什么样子？
[*]你起首会点击的是什么东西？
[*]你会用哪三个词形貌这个网站或应用？
[*]利用1分（非常不舒畅）到5分（非常舒畅）评价这个网站或应用给你的感觉？
[*]你有多大大概性信托这家公司？
[*]这个网站或应用相比起你的盼望怎样？
[*]不要点击，告诉我们你以为点击了一个这种外形的图标会发生什么？然后点击它，现实上发生了什么？
假如你的计划决议对用户起作用而且可以或许引导他们利用你的用户界面，那么用户就可以或许完成你盼望他们完成的事变了。这不但是一个有用的计划——这也是一种奇妙的贸易举动。
译者：cyan_zheng
译文地点：http://downloads.usertesting.com/white_papers/UserTesting_eBook_Designing_a_brilliant_UX.pdf
本文由 @cyan_zheng 翻译发布于大家都是产物司理。未经允许，克制转载。
http://www.fyguaji.com
页:
[1]