β

视觉设计从哪几个方面影响用户体验?

13Tech 19 阅读

作者:产品悟语

视觉元素为什么很重要?

人是视觉动物,而网站是一个视觉媒体。任何一个网站的用户体验都会受到视觉元素的影响,这些视觉元素是UI设计的一部分,并作为视觉线索提示用户网站的交互方式。

本文将着重介绍5类最突出的视觉元素,用户在 成百上千的网站中都会见到这5类元素,他们也直接影响着一个网站的用户体验。他们分别是:

  1. 字体排版
  2. logo
  3. 引导按钮
  4. 留白
  5. 图像

在一个好的用户体验中,这5类视觉元素分别有着各自独一无二的作    用。如果一个设计师能够理解这5类视觉元素是如何影响用户体验的,那么他将能设计出不同的体验以吸引用户和提高产品的转化率。仅仅改变一个看似简单的视觉元素的属性(无论是尺寸还是位置)也能显著的影响用户体验。

一、字体排版

当谈到字体排版的时候,不同的字体和排版会给我们带来不同感受,或好或不好,这些感受来自于字体不同的大小、一句话的长度、或者合适的间隙等等。

在一个网站中,字体通常是承载内容的主体,因此,字体排版对用户体验有着重要的影响。在卡耐基梅隆大学的最近研究中,字体排版决定着线上的阅读体验,从可读性和理解性上来说,他们得出的结论是:较大的字体阅读体验更好。

参与此次研究的人们,使用的是维基百科来作为测试阅读体验的网站,维基百科可能是目前最流行,文字量也最多的网站。根据记录,当字体更大的时候,阅读起来更容易,也更容易理解内容。因此,研究者建议,网站主要内容的字号应使用18pt,正如他们所说,个人主观认为,18pt字号拥有最佳可读性,然而当字号提高到22pt时,可读性上的提升微乎其微。

字体对人的影响也与人的文化背景有关,在选择字体的时候也需要考虑到这一点,很多人会将Helvetica这个字体与美国政府联系起来,因为美国的税单上用的就是这个字体。再比如中文字体的衬线体多数会用在与中国文化相关的设计中,而非衬线体则更适合现代化的设计风格,因为非衬线体是现代才出现的,而以前的中国是没有非衬线体的。

再来看一个例子,美国银行的网站。

原版网站

改变字体后的网站

当改变字体后,美国银行看起来没有那么可信了,因为这种字体一般用于报纸的标题。

字体都是由人设计的,通常来说字体本身也包含着设计者赋予它的特定意义。你绝不会想要字体本身传达的意思与你想要的传达的意思大相径庭。

那么,该如何设计好的内容来使阅读者感觉良好呢?

下面有几个方式。

  1. 选择合适的字体。用于网上阅读的大段文字的字体要避免使用手写体和装饰较多的字体,这些字体难以识别,这会严重降低人们的阅读速度。应该使用简单的非衬线体字体。
  2. 选择合适的字号。 最小字号不要低于12pt
  3. 每一行的文字数量要合适。一行字太短,人的实视线需要频繁的左右移动来寻找开始和结束的位置。若一行字太长,人们又很难找到下一行开始的地方。一行字的长短最合适的范围是50~75个英文字符,对应于中文字符,差不多是27~40字之间。
  4. 合适的间隙。右边的字体更容易阅读。

二、logo

当我们第一眼看到一个logo的时候,我们首先识别的是它的颜色,形状和形式,而不会直接把不同的部分当作一个整体来识别。然后,我们的大脑再把我们看到的这些视觉图案和我们脑袋里既有的经验做匹配,以此来解释我们看到这个图案,最后我们才能理解一个logo的含义。所以,我们在设计logo的时候,就需要向用户传达更多的意思,而不仅仅用于区分不同的企业。

通常,logo仅仅是作为一个公司的品牌识别符号,当然,把logo放在一个页面的顶部有着营销上的原因,当用户想要买某个产品或者赞同某个观点的时候,他们能立刻知道是哪个品牌在销售这个产品或者哪个品牌持有同样的观点。但logo的作用不仅仅如此。

从用户体验的角度来看,logo也是用户定位自己位置的一种方式,通常来说,它是回到网站首页的一种快捷方式。另外,logo也是网站的一个最重要的识别符号,把logo始终放在一个固定的位置,一定程度上提升了用户体验。

在尼尔森诺曼集团的一项研究中,参与者被要求完成一个导航任务,结果显示,当logo放在左边的时候,用户体验更好,当想要返回首页的时候,logo放在中间相较于logo放在左上角,操作起来要困难6倍。

三、引导按钮

通常来说,引导按钮反应了用户的目标,他们引导用户单击,点按或者选择,以此使得用户进入下一步操作,因此,放置好引导按钮对创造好的用户体验很重要。使用户越容易发现和理解引导,让用户做出直觉上的反应,用户体验就越好。

一个好的引导按钮有哪些特征呢?

  1. 有足够的视觉吸引力,使得用户很想要去点击。
  2. 按钮上的文案要简洁, 字数不能太多,不要超过5个字
  3. 文字需要是引导性的动词,比下载、注册、开始等等。
  4. 使用高对比的颜色,但又要能和谐融入整个设计风格中。
  5. 按钮要足够大,要从较远的距离上都能看见,但又不能大到让用户从主要内容上分心。
  6. 操作结果要可预期,让用户能明白点击后会发生什么。

四、留白

留白在一个网站上随处可见,它指的是那些元素周围的空白空间。留白能帮助用户将视线聚焦到那些重要的内容上,无论是一个引导按钮,还是一个视频。任何被留白包围的元素在页面上都会显得很突出,使得其更容易被看到。在页面上增加留白的同时,也使得内容更容易被理解。

一个能说明合适的留白能显著的增加用户体验的例子就是美国航空的官网,直到去年,他们的网站几乎是填满了内容,在页面上几乎看不到留白,相反,在新设计中,网页的各个地方都增加了大量留白,用户现在终于能把注意力集中在页面的主要内容上了,而旧版设计则很容易让用户在网站中迷路,使用户不知道该关注哪里,进而给用户带来使用上的困难和负面情绪。

旧版设计

新版设计

五、图像

在谈论视觉设计的时候,难以忽视的一个重要视觉元素就是:图像。

我们的大脑在处理图像信息的时候,速度是很惊人的,只需要13毫秒。

这极快的处理速度能帮助我们更快的获取到信息。例如,当我们在看一个卖鞋的网页时,看到一双鞋子的图片,我们能马上知道是什么类别,我们是否喜欢,如果喜欢,我们下一步才是去看价格。

使用图片也能显著增加一个网站的用户转化率,可以想象一下,有多少人会在一个不提供商品图片的网站上购买商品。

同时,配了图的文章比没配图的文章,阅读量要多94%。

总结

视觉设计上的一点小改动也能显著的影响用户体验,同时也影响着用户转化率和参与度。改进网站的视觉线索(引导按钮+导航),增加网站的视觉吸引力(留白+图像),使用户更容易获取重要信息(留白+字体排版),不仅是设计上的正确选择,同时也是商业上的正确选择。

文章转载来源: 产品悟语 (公众号)

推荐阅读

屏幕尺寸越来越多,“首屏为王”还有效么?
Medium评选的年度最佳设计文章2016

【可报名】6周锻造1名优秀的产品设计师

我们对轮播图的设计,都错了
如何做一份视觉竞品分析
作者:13Tech
专注用户体验,只为UXRen
原文地址:视觉设计从哪几个方面影响用户体验?, 感谢原作者分享。

发表评论