文字/图标/文字加图标

September 14, 2015 / leiwaa

界面设计上,「一个按钮应该使用纯文字、纯图标还是文字加图标」是一个在实际工作中经常有得吵的话题。一般来说,纯文字指意清晰,但没有纯图形美观,对初学者友好,对于高级用户来说效率又偏低。一些专业名词,文字与图形相比反而显得更抽象,例如「居中」。图形与文字的优劣几乎是相反的,图形相对更美观,对于高频度用户来说在识别上更有效率,也更利于二次识别(相对于文字,更容易唤起相关的记忆),但是对新手用户以及一般用户来说又不够友好。

理想情况是能兼顾美观与语义。常见的解决方案有两个:一个为默认显示图标,但是当鼠标指向(或悬停)在某图标时出现一个小 Tips,例如 Mac OS 下的 Dock 栏。另一种常见的作法是在软件(通常是桌面端的专业软件)中预留可配置的选项,根据个人需求来设置到底是显示文字,还是图标,还是两者同时显示。

到了移动端,这两种做法显然都不太合适,移动端主要依靠触按操作,一般无法预判用户的动作,自带配置选项对于轻量快捷的移动端来说又过于复杂了。

最近做了个概念方案,通过文字与图标的动态切换去综合一下,当用户主动需要的时候,能看得清晰的提示,当用户不需要的时候,又不会经常注意到它,下面是两个示例。不过动效显得过于强调了,实际应用应该将其做得更弱一点。

点击查看 Demo1 | Demo2

本文采用 Creative Commons BY-NC-ND 授权,转载请注明出处

Comments
Write a Comment