QRコードをスキャン QRコードをアップロード
ドメインストア
リンクブロックを回避するプラットフォームタイプを選択
アクセス許可するプラットフォームタイプを選択

让用户一眼看懂的界面,往往才是最好的设计

设计师脑子不太容易被框住,想法总是往外蹦。可一旦开始做产品,早一点把“清晰易用”四个字放在心上,能省掉很多弯路。用户并不需要那种得想一想才会用的聪明交互,他们想要的是看一眼就知道该往哪儿点的清晰交互。



伏尔泰有句大实话:Le sens commun est fort rare——常识其实很少见。

这话乍一听有点刻薄,放到产品设计里却格外贴切。你得有足够的生活经验,才能准确地意识到某些东西其实是常识,而一旦它们沉淀为常识,旁人就不再需要分析,只觉得“本来就该这样”。今天很多我们觉得理所当然的设计,对最早那批探索的设计师来说,一点都不显然。他们花了大量时间泡在用户的问题和需求里,一遍遍迭代,才把那些“不显然”一点点磨成了“常识”。

把导航栏从角落挪到屏幕底部,会发生什么

Google 产品总监 Luke Wroblewski 很早就提出一个原则:“Obvious always wins”——明显的东西总是赢。他鼓励设计师认清一件事:清晰的交互往往比聪明的交互更有效。Wroblewski 专门对比过两种导航方式的数据,一种是藏在汉堡菜单图标后面的半隐藏导航,另一种是直接铺在屏幕底部的导航栏。他得出的结论很直白:导航的作用就是告诉用户这个 App 能做什么,如果用户看不见这些信息,他们就不知道眼下可以做什么、应该做什么。

可见性一旦提高,利用率自然会跟着往上走。项目管理 App Redbooth 把导航从汉堡菜单改到底部导航栏以后,用户使用时间增加了 70%,日活几乎一夜之间涨了 65%。原本缩在汉堡菜单里的功能被挪到了界面最显眼的前排中部,用户找起来毫不费力,用得自然就多了。反过来,一旦常用功能变得难找,活跃度就会往下掉。Polar App 曾把分段控制菜单简化成顶部的一个切换菜单,界面确实更干净了,但因为主要功能不再直接暴露给用户,用户每天的活跃度应声下跌。干净是干净了,但用户找不到路,也就懒得走了。

底部导航栏不只是方便,还更公平

把设计做得更清晰可见,有时候还能带来额外的通用性好处。从人体工学来看,用大屏手机或平板时,手指自然够到屏幕底部,比一只手握着手机、另一只手伸过去够左上角的汉堡菜单要舒服得多。底部导航栏对单手操作友好太多。



Google 品牌经理 Aubrie Lee 在邮件采访里提到,患有肌肉营养不良或其他行动不便问题的人,往往很难触碰到屏幕的上半部分。对他们来说,底部导航栏这种设计能彻底改变使用体验。技术能给残障人士带来的不只是便利,有时不同的设计会让他们活得更受限,还是更独立。而把导航放在底部,受益的远不只是少数人,它其实推动了大多数人的使用体验。

一个图标,未必所有人都认识

明显的设计不光跟组件位置有关,还跟用户理解界面上的操作和选项有多难有关。比如,不是所有用户都能迅速看懂图标和符号。“$”在美国、加拿大等一些国家代表美元,但它并不是全球通用的货币符号。用磁盘形状代表“保存”,对在电脑时代长大的人也许很自然,但对那些 21 世纪才开始用电脑、从没见过实体磁盘的用户来说,那个图标可能更像一块圆角矩形,甚至像手机 SIM 卡。上传、删除、语音信箱、扬声器、保存、信用卡……这些图标看似常见,但拿掉文字,相当一部分用户会完全摸不着头脑。

想让用户快速理解,有两个很实在的建议。

第一个是把文字和图标搭配在一起。YouTube Go 的 Garen Checkley 和 Tracy Lindsay Chan 在 Google I/O 大会上分享过为新互联网用户设计 App 的经验,特别指出图标和文字的组合对用户记住功能至关重要。接收按钮既有图标也有文字,用户按下前就知道会发生什么,理解门槛明显降低,产品也因此变得更通用。



谷歌翻译的做法也很有说服力。它在主翻译框下方的功能里,给图标加上了文字标签。结果,手写功能的利用率一下提升了 25%。这个功能其实已经存在很多年,但不少用户以为是新功能。没有文字标签的时候,用户根本搞不清那些图标代表什么,自然就不会去点。

第二个建议是,可以只用文字,也可以加提示文字,或者用带文字的图标。上传图标对习惯把内容传到云服务的用户可能一目了然,但对另一些用户来说,当他们把照片从电脑加到云端时,脑子里并没有“向上”或“向下”的动作概念。谷歌相册的桌面端团队为了让用户清楚知道怎么用照片搜索和上传新照片,直接把上传图标换成了“上传”文字按钮,同时在搜索框里加了搜索提示。另外,他们还借鉴了 YouTube Go 和谷歌翻译里图标加文字的做法,在相册、助手、照片这些图标下面添上了文字标签。这一系列改动——把图标换成文字按钮、加提示、补文字标签——合在一起,让谷歌相册的易用性明显上了一个台阶。



抄别人的 UI,抄不出“明显”

做一个明显的设计,并不等于看到另一个 App 用了某种设计,就照搬过来用。复制其他产品(尤其是那些很火、你觉得设计很棒的 App)看起来容易,但你根本不知道对方在选定这个设计模式或组件背后,做了多少研究,经历过多少轮试错。

要做出明显的设计,必须真正靠近问题本身。设计师怎么知道对用户来说什么是明显的?难道只能等数据或等研究员花几年时间调研吗?Wroblewski 的建议是:你离痛点越近,就越想解决它。如果你自己就是目标用户,很可能天然就知道产品的核心功能是什么,以及它怎么解决你的问题。如果不是,那就必须去观察用户,去学习,去不断迭代。

这并不需要什么庞大的研究预算或差旅经费,甚至不一定需要海量的用户数据。它需要的是跟潜在用户和现有用户聊一聊,或者把自己代入用户视角,去摸清他们遇到的问题。Wroblewski 很推崇一种叫 RITE(快速迭代测试与评估)的方法,他说:“每周,我们都会把本周做的东西放到真实用户面前,看看他们是怎么用的。你总是需要回到客户或潜在客户那里去测试。”设计师跟用户坐在一起,发现他没法做成想做的事,因为设计失败了——这种时候,问题就再清楚不过了。

经常和用户待在一起,你的设计就会更贴合他们的问题,更适应他们的习惯,也就更“明显”。直到你真正搞懂了问题,才可能清楚地知道什么是明显的、甚至接近常识的设计,然后才能做出真正好用的产品。