清晰明了的 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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 196,165评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,503评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 143,295评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,589评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,439评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,342评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,749评论 3 387
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,397评论 0 255
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,700评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,740评论 2 313
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,523评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,364评论 3 314
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,755评论 3 300
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,024评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,297评论 1 251
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,721评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,918评论 2 336

推荐阅读更多精彩内容