- 原文地址:The Details That Matter
- 原文做者:Nick Babich
- 译文出自:掘金翻译计划
- 译者:ivyxuan
- 校对者:ylq167、gaozp
一个产品的成功是由各类因素共同造就的,而其中最重要的因素,就是总体的用户体验。在设计一款新的应用或是网站的时候,坚持最佳的实践规范是一个可靠的方法,可是在创造宏伟蓝图的时候,人们很容易就会省略掉那些能让人有更好的体验但却并不是必要的设计元素。然而,设计的优劣每每在于咱们能设计出多么体贴的细节。html
在这篇文章中,我将会重点关注 可视化反馈、小的文字信息 还有 留白 这几个方面,你将会发现为何这些不起眼的细节和那些显眼的设计元素相比一样重要,而这些细节又是怎样决定你产品成败的。前端
可视化反馈在较大的设计方案里很容易就会被忽视掉,但它实际上贯穿总体的用户体验流程。能够说,若是没有反馈就没有所谓的交互,你能想象和一我的聊天,可他一点反应也不给你吗 —— 你根本就聊不下去。而对于你的应用也是一样的道理。react
缺少可视化的反馈会让用户感到困惑。android
你必需要确保对用户的每一个动做都有相应的反馈,这样才能让用户感受应用运行一切正常。可视化反馈ios
在现实生活中,按钮、开关还有其余东西都会对咱们的动做有所回应,人们以为世界就是这样运转的。而一样,人们也会期待应用里的元素能有相似的回应。git
图片来源:Ramotiongithub
当你须要告诉用户他的操做结果是什么的时候,可视化反馈就颇有用了,你能够利用现有的元素去传递反馈信息。后端
图片来源:Colin Garvencookie
在系统中,用户任什么时候候都会想知道他此刻的状态是什么,而这不该该让用户本身去猜 —— 因此系统应该经过恰当的可视化反馈告诉用户此刻正在发生什么。对于一些常见并且次要的操做,简单的反馈就能够了,而对于不寻常并且重要的操做,反馈就须要更明显一点。布局
图片来源:Eddy Gann
应用加载信息的时候,进度条能够避免让用户感到困惑。图片来源:Mark
少许的文字信息是一些用来是指导用户行为的一点点文字。举一些例子就是,错误信息、按钮对应的标签、提示信息。乍看之下,这么少的文字和整个应用设计比起来一点也不重要,但出人意料的是,它们对转化率有着极为重要的影响。
在应用里写出好的文字信息,和让应用正常运行、用户界面易于使用同样重要。
有一个快速的方法能让你的 UI 变得温暖而不呆板,就是用人说话的口吻去描述内容。若是你的产品听起来好像是一我的,用户就会更加的信任你。
Yelp 表现得好像他们是真人在负责这件事情。
Airbnb 的提示听起来像人说的话并且语气还很随和。
表达错误信息的方式会严重影响产品的用户体验。一般来讲,省略错误信息或是没有正确描述错误信息都会让用户感到挫败。
像“出错啦”这种警告对全部的用户都会形成困扰,并且还会惹恼专家级用户。可是,一个精心设计过的错误信息,会顿时化失望为欣喜。因此,把报错变得人性化、不用技术性的语言而且适合你的用户群体。
错误状态必定要具体、友好并且有用,要告诉用户下一步怎么作。
这些少许的文字信息是很情景化的,这也是为何它很重要的一个缘由。它能够解答用户具体状况下的问题,并针对他们所担心的事情进行直接地交流。举例来讲,当用户选择订阅或是提供了具体信息的时候,一些文字信息对于消除用户担心会起到至关关键的做用。对于优秀的营销人员来讲,“不会有群发消息或是自动关注”是理所固然的事情,但用户本身会存疑。所以,当用户添加了他们的邮箱地址或者绑定了 Twitter 帐户的时候,必定要明确表态“咱们和你同样讨厌垃圾消息”。
这只是一小段紧凑的文字,却涵盖了用户全部潜在的担心。
留白(或者说是负空间)是设计师没有摆放设计元素的地方。而设计元素间的留白是指处在图片间距、内边距、外边距、行间距和字间距的空白。虽然不少人以为这些空白浪费了宝贵的界面位置,但其实,留白是用户界面设计的一个重要元素。
杂乱的堆砌是很糟糕的一件事情。在界面上杂乱堆砌元素会给用户带来过多的信息:每个被添加的按钮、图片和文字都会让界面显得更加复杂。若是你不想你的设计有任何刻意的留白的话,下面这个例子就能很明白的告诉你,有太多东西一块儿吸引你的注意力是多么可怕的事情。
杂乱堆砌的 UI 尤为是没有视觉层次的 UI 会让用户没有一点想要审视的欲望。
留白之因此很重要,是由于用户的注意力还有记忆力是颇有限的。咱们的短时间记忆只能够在短期内(一般来讲是 10 到 15 秒钟、或者是 1 分钟之内)记住一点有效的既有信息(一般来讲是 7 个事物或者比这个更少)。
用户的注意力是很宝贵的资源,因此必须合理的分配。
若是是由于界面上胡乱堆砌而使得用户接收过多的信息,那么减小一些杂物就能提升用户的理解。大方地使用留白可让凌乱的界面变得简单而有吸引力,留白削减了用户乍看之下接收到的元素数量,这使得浏览信息变得更加容易。留白的使用技巧在于,只给用户提供他能消化吸取的数量的内容(必定数量的内容),而后去掉没必要要的细节。
Medium 是一个典型的例子,它善于使用留白来改善用户对内容和 UI 的理解。
留白在设计中是经过在元素周围留出空白,以让元素更加突出或是和其余元素以进行区分。它能够告诉用户什么是最重要并且是须要格外注意的。
元素周围的留白越多,元素就会越引人注目。
谷歌搜索的首页就是一个使用留白的典型例子,它经过在正中央摆放其最重要的交互元素(搜索框),而且在周围留出足够的空白以凸显其重要性的布局,直接实现了用户目标。
去掉其余的元素能够更加凸显留下来的元素。
接近法则描述了人的眼睛是如何划分视觉元素的,它阐述说距离更近的物体看起来更类似。咱们能够利用留白,在不一样的元素间产生视觉联系。你看下面这幅图片,几乎全部人都会说看到了两组点,而不是16个点。
将信息拆分红合适的组别可让信息更好的被识别和阅读。右边的表单将 15 栏拆分红 3 组,这样填写表单也变得相对容易了。虽然内容的数量仍然相同,可是给用户的感受却彻底不一样。
图片来源:NNGroup
用心设计,应用界面上的每个小的细节都值得细心揣摩,由于用户体验就是由这些小的细节相互协调做用而成的:
“细节不仅是细节,细节成就了设计。” —— Charles Eames
谢谢!
掘金翻译计划 是一个翻译优质互联网技术文章的社区,文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、React、前端、后端、产品、设计 等领域,想要查看更多优质译文请持续关注 掘金翻译计划。