界面的语言:图标与文案的二重奏

2019-04-03    来源:腾讯CDC

容器云强势上线!快速搭建集群,上万Linux镜像随意使用

文案在界面设计中的重要性不言而喻, 但如此重要的部分却仍然没有专属的职位不得不说有一些遗憾。今天特别结合自己这段时间的工作总结和之前编译过的一篇文章来谈一谈"文案"(Copy-writing)的重要性。

Facebook的"喜欢"和Google的"+1"间的区别咋看起来微不足道, 最终却足以影响到用户的行为和选择。使用合适的文字来定义控件是界面设计中最重要的一环。 杰森.佛莱德(Jason Fried)早在"现实点"(Getting Real) 一书中就阐述了文案的重要性, 但在5年之后文案仍然是界面设计中常见的"阿喀琉斯之踵"。

明确第一, 巧妙第二

合理的用词可以让你的设计更明晰。 图标就像一匹很难被驯服的烈马:温顺时可以自如的表达用意和动作,一旦暴躁就难以驾驭甚至伤害用户。一个放大镜可以表示放大或搜索; 一个向下的箭头可以表示下载, 保存或简单的"下落";一个向后的箭头并不能明确的告诉用户修改是否会被保存;X 在一个用户看来可能是关闭,另一个用户却会理解为取消, 甚至在有的用户眼里表示删除。所以在创建图标时,设计师应该尽量遵循拟物的原则——借助真实生活中对等的动作或物体以最明确的表达操作。

丹麦的设计师Peter Steen Høgenhaug仔细研究了一些知名的网站和应用中表示"加入链接"动作的图标, 你可能会认为它们的设计都有规可循, 但结果却并非如此。

就像你看到的一样, 大多数网站管理(CMS)系统和应用都在图标中使用了链条图案。 唯一与众不同的就是Facebook – 使用一个记事贴和大头针, 而Peter认为这比链条还要不靠谱。 在接下来的一项测试中, 他专门安排了一系列不同的任务让实验对象完成, 其中的一项就是添加一个链接。实验还包括其它一些常用的图标:

一部分测试对象将链条图标理解成"把东西绑定到一起"或"把不同元素连接起来"。 这么理解并不算错, 但问题是他们并不真正了解绑定到一起的"东西"到底是什么, 所以图标按钮并不能像文字按钮那样准确的表达意思。 例如, 测试对象针对"链接2"地球图标按钮的理解就有"你能访问互联网", "搜索"或 "上传到互联网"等许多不同的解释。

总的来看, 只有35.29%的实验对象能正确理解链条图标, 而其中只有25%的对象能理解"链接2"。 虽然实验没有设定代表可用性的最小值, 但显然25%在任何情况下都意味着糟糕的用户体验。 一位实验对象在访谈中甚至问道:

"为什么不用WWW呢? 地球人都知道的!"

的确, 像他说的那样可以将"WWW"理解为"访问互联网"或类似动作, 在后来的试验中也证实每个实验对象都能正确理解"WWW"文字图标。 可能在许多应用和设计中它不是最佳的解决方案, 但是在实验里它是用来表达链接的最佳选择。

明确第一, 巧妙第二

如同上面的例子一样, 尽管你可以在视觉设计上尝试各种信封和箭头的组合, 但却没有什么能比"发送消息"这四个字更能直观的表达这个动作的含义。 这并不是说以图标控件为主的界面就一定不好, 长远来讲, 它们为了界面的美观而稍稍牺牲了用户初次使用时的体验流畅度和一致性。而这正是你作为一个设计师需要根据场景和预算做出的艰难决断。

当我在设计一个控件按钮时就遇到了这样的情况: 某个特定界面中按钮的操作只有用文字才能最好的表达, 但图标却可以使界面更美观和统一。 考虑到这个项目周期所剩时间不多, 我们给出了两个方案, 先使用最直观的文字按钮, 在以后的迭代中如果视觉上能做出美观和巧妙的图标我们再沿用第二套方案使用图标按钮。 因为好的图标不可能一撮而就, 它们不但需要设计师灵感的爆发还需要所谓的那么一点点运气 =P。

标签: 交互设计 界面设计 文案 

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点!
本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。

上一篇:从中国好声音和莫言的百度指数看网络营销制约因素

下一篇:如何描述你的产品