加入收藏 | 设为首页 | 会员中心 | 我要投稿 核心网 (https://www.hxwgxz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 建站 > 正文

颜色、字体、图表,这些视觉元素是如何影响用户体验的?

发布时间:2017-09-19 17:12:18 所属栏目:建站 来源:人人都是产品经理
导读:副标题#e# 文章主要分析了不同的视觉设计元素是如何影响网站用户体验,希望通过文章的解读能够对你的产品设计带来些启发。 也许是因为我在视觉设计上没有太多经验,我发现平常在与视觉设计师讨论设计方案时,我们常常讨论的是:“我觉得这样布局很奇怪”、

可及性测试工具

有一些很棒的工具可以帮助你测试网站的可及性。

  • 下载Color Oracle的色盲模拟器,有Windows,Mac和Linux版本;

  • 将你的静态图片上传到Coblis,可以用九种不同的颜色视角去体验它们;

  • 甚至可以邀请色盲患者去测试网站,看是否有他们难以看清的东西。

颜色对转化率的影响

有些优化转化率的专家会声称对按钮来说最好的颜色是大胆的、吸引眼球的红色,但也有人说绿色最佳因为绿色表示“开始”。

有大量的A/B测试显示了CTA按钮(CallToAction)的颜色改变会对转化带来极大的影响。HubSpot在以前仍叫做Performable的时候分享了这个著名的测试:

颜色、字体、图表,这些视觉元素是如何影响用户体验的?

HubSpot的A/B测试

尽管他们原来预测绿色按钮会表现得更好,但是红色按钮带来的点击量高了21%。但是他们仍然提醒读者,这个测试结果本身不应该使所有人都把按钮变成红色。可能的解释是他们的用户就是喜欢红色,尽管其他的用户可能更喜欢绿色。或者,更可能的情况是,这个红色按钮得到了更多注意是因为它是这个页面上唯一的红色物体。

坏消息是并不存在一种魔法颜色能在所有网站上都表现最优。好消息是有一些经验法则可以帮助你有效地使用颜色。

经验法则

对比是关键

这看起来很明显,但是我们还是要说:如果你希望用户点击某处,你要让它足够突出。如果你的网站或应用使用了很多橘色,用户可能不会马上注意到一个橘色的按钮,不管这个橘色按钮在其他公司的A/B测试中表现多好。

在我们的研究中,我们让用户指出他们在每个网站上首先会点击的东西。不出意料,用户更可能点击与背景形成强烈对比的CTA按钮。

明亮令人难忘

在上面提到的那个 50 人的研究中,我们问的最后一个问题是用户访问的哪个网站最令人印象深刻。

50%的用户选择了明亮的网站。有趣的是很多选择深色或者白色网站的用户是出于一些与设计无关的原因。比如一个用户认为Dropbox是最印象深刻的因为她已经有了Dropbox账号。

字体

文字的主要目的是帮助用户去做你需要让他们做的事情——不管是探索产品,学习如何玩一个游戏,还是浏览一些令人愉快的故事。

遗憾的是,在网站和应用排版中有很多相互矛盾的选项,并且没有一个适用于所有情况的严格规则(否则事情也太简单了吧)。但是你可以做一些事情,以保证你为网站或应用选择的字体对你和你的用户有所帮助,而不是跟你唱反调。

字号与行长

文字的尺寸和布局会对在线阅读的体验带来巨大影响。年龄较大的人或者有视力障碍的人在面对小字的时候尤其痛苦。即使是视力正常的人盯着屏幕太久后也会觉得疲劳——当他们为了阅读不得不斜视或者放大时会感到激怒。

看看下面这个例子:对于台式机来说,正文较好的处理方式是每行50- 75 个字符,字号不低于16pt。

颜色、字体、图表,这些视觉元素是如何影响用户体验的?

对比下面这个页面,每行有 100 个字符,并且字体更小。

颜色、字体、图表,这些视觉元素是如何影响用户体验的?

这个问题在手机上有所延伸。对用户来说在一个小的明亮的屏幕上阅读是一件很头疼的事情。比较好的做法是在手机上每行显示30- 40 个字符。下面是在智能手机上看到的两个网站,第一个使用了30- 40 个字符,而第二个使用了为台式机设计的网站上的尺寸。

颜色、字体、图表,这些视觉元素是如何影响用户体验的?

因为写死的字号(比如,16px)在不同的设备上显示效果不同,所以试着使用rem单位去定义字号(译注:rem是CSS3 引入的字体大小单位,是指相对于根元素的字体大小,便于实现响应式设计)。

(编辑:核心网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读