清晰明了的 UI 通常是最好的 UI


伏尔泰曾经说过:“ 常识并不是大家都知道、常见的东西。”

当我们在谈论产品设计的常识时,我们现在看到的非常明显的事物可能在当设计师刚开始设计时并没有那么明显。很长的一段时间,设计师努力致力于让产品尽可能易用和操作。然而,为了强调产品的特点,需要设计师花时间去理解用户的需求和痛点,并不断迭代改进。

底部导航栏 = 增加使用率

谷歌产品总监 Luke Wroblewski 倡导 “obvious always wins” 的设计原则,并且让设计师认识到清晰的交互好于取巧的设计。我们把一个有半隐藏式汉堡菜单导航的 App 变成了一个有更加明显底部导航栏的 App,分析了用户参与度的数据后,Wroblewski 看到了一个趋势。他在一次采访中这样和我说:“导航显示了一个 App 里面可能有什么,并且当人们不清楚可能有什么时,他们可能不会知道在这个 App 里他们能做什么或者应该做什么。” 可视性的提高促进了使用率的提高。

当项目管理 App 「Redbooth」从汉堡菜单变成底部导航栏的形式后,访问时间增加了70%,并且日活用户几乎在一晚就增加了 65%. 在功能层面上,那些之前隐藏在汉堡按钮里的的功能现在都被移到最外层的位置,方便 Redbooth 的用户找到。


另一方面,Wroblewski 发现当人们要找到常用的功能十分困难时,会降低用户的参与度。Polar App 将它的导航设计从一个分段式控制菜单,转变成一个切换菜单,来使这个设计看起来“干净”,用户参与度也因为这个主功能不再持续地曝光给用户而下降了。

底部导航栏和易用性

让设计更加的清楚明了可能会和让设计更加的易用有同样的额外好处。人机工程学上,使用大型手机或平板电脑的用户用一根手指触摸底部导航栏比用一只手握住手机,另一只手触摸左上方的汉堡菜单栏更容易。底部导航栏对于易用性来说也很重要。在一次电子邮件采访中,谷歌的品牌经理 Aubrie Lee 说过患有肌肉萎缩或者行动有障碍的人是不容易触摸到屏幕的上部分区域。“ 这是一场行业的变革。对于残疾人来说,技术带来的不仅仅是一种便利,它通常是限制自由和独立自主的区别。对我们大多数人来说,底部导航按钮给我们生活带来了很大的便利。

“明显的” 图标不总是 “普适的” 图标

清楚明了的设计不仅与元素的摆放位置有关,还与用户理解 UI 中的操作和选项的容易程度有关。举个例子,不是所有的用户都在第一眼看到图标和符号后,会立即理解它们的含义。 $ 表示元,是美国、加拿大和其他一些国家的货币单位,但它不是世界上所有货币的标志。

从小玩带软盘电脑长大的人很可能就知道软盘是什么,并且知道软盘图标代表 “保存” 的意思。但是,对于那些在 21 世纪才开始使用电脑并且从没见过软盘的人来说,软盘图标可能更像一个移动电话 SIM 卡。这些用户可能不会明白软盘图标代表的意思。


The upload, delete, voicemail, speaker, save, and credit card icons are common, yet may confuse users if they are not paired with a text label.

为了第一眼就能够理解设计的含义,可以考虑下面两个建议:

给图标配上文字

在谷歌 IO 大会上,Garen Checkley 和 Tracy Lindsay 说过图标和文字的组合对于用户记住某个功能有什么作用是很重要的。“接收” 按钮由文字和图标组合,可以让用户清楚地知晓当点击按钮后会发生什么。

文字和图标的组合同样让你的产品更加易用。当按钮配有文字和图标后,用户浏览整个页面时可以更加容易理解某个按钮的含义。

下面这个图是 Google 翻译的主输入框,它的功能点都由文字和图标组合一起, “用户手写” 这一功能的使用率提升了25%. 在改动之前, 尽管这个功能已经存在很久了,但仍然有一些用户以为这个功能是新加的。原因在于没有文字配在图标旁的话,用户理解不了其功能的含义,因此也不会去使用这个功能。


仅使用文字,添加提示性文字,给图标增加文案

“上传” 图标对于那些习惯将内容上传到云端服务器的用户来说是可以理解其含义的。但是,对于一些用户来说,当遇到要将他们电脑里的照片添加到云端相册时,他们或许对 “上传” 或者 “下载” 这一操作没有概念。

为了让 Google 相册桌面网页版的用户清楚的知道怎样通过照片和上传新的照片来搜索,Google 相册团队将上传图标替换成了一个 “上传” 文字按钮,并且在搜索框中增加了搜索提示文案。和YouTube的做法一样, Google 相册团队在图标下方也加上了文字标签 “相册” , “帮助” 和 “照片”。


复制别人的 UI 并不会确保得到一个清楚明了的设计

然而,让 UI 更加清楚明了并不意味着其他家 App 独有的界面设计也十分适合你自己的产品。我们似乎很容易去复制其他家 App 的设计,特别是有名的 App, 并且会认为这是好的设计方案。但是你不知道一家公司尝试选择某个设计样式或元素的背后花费了多少调查研究。

要想找到答案,就要去靠近问题

没有数年的用户使用数据,也没雇佣研究员,那设计师如何才能知道什么样的设计才是对用户清楚明了的? Wroblewski 说过: “ 你越痛苦,你就会越关心怎样去解决它。” 如果你正在做的产品解决了你现在存在的一个问题,那你很可能就知道这个产品的核心功能是怎样解决你的问题的。

如果你不是你产品的目标用户,那你就去观察用户,就去学、去迭代。这不需要大量的调查和经费,或者是大量的使用数据。你需要和潜在的和现有的用户去交谈,找到他们现有的问题。Wroblewski 倡导快速迭代测试和改进(RITE)。不管我们做的是什么产品, 每周我们都会把产品带在身边,把产品放在别人面前,然后看着他们尝试使用它。你要将自己融入到用户里或者是潜在用户的场景里。

经常定期的和用户待在一起,你的设计会更加目的明确、合适和清楚明了。直到你了解了问题,你才能够清晰的鉴别什么是清楚明了的、甚至是“常识性的”,并且让你的设计更加易用。

原文链接:https://medium.com/google-design/the-obvious-ui-is-often-the-best-ui-7a25597d79fd

你可能感兴趣的:(清晰明了的 UI 通常是最好的 UI)