很基础，不简单！Tubik Studio 帮你解读图标设计中的门道

编者按：经常看Dribbble和Behance的同学可能早就听说过Tubik Studio 这个工作室，他们的UI设计案例和图标设计一直以简约传神而著称，色彩搭配上也相当的有一套。作为一个在UI设计领域深耕的工作室，Tubik Studio 在图标设计上也非常的有经验。今天的文章内容并不复杂，也许你看过之后就忘掉了，但是确实是经验之谈，仔细思考，你会发现要做到也并不简单。希望能这篇文章能给你一点启发~

眼睛可以让我们在短短的一瞬间获得大量的信息，更重要的是，这种信息获取方式并不费劲——至少绝大多数的信息都是下意识获得并吸收的。所以，在设计领域当中，视觉感知其实起到了相当重要的作用，不论是产品设计，还是解决用户的问题。

今天的文章缘起于Quora 上的一个问题：“在UI界面中，人对于图标的感知是否比文字更快？”作为在UI领域深耕的 Tubik Studio 曾在Quora 中对此作出回答，而今天的文章则将之前的答案更系统的整理出来。关于图标设计、文字内容以及人的视觉感知之间的关系，其实并不是一眼看上去那么简单。

感知的速度

对于人而言，视觉感知的确是大脑获得信息最快的途径之一。视觉感知对于生活和工作各方面的影响是如此之多，以至于在进行产品设计的时候完全无法忽视它的存在。这也是为什么现如今的界面设计中，图标设计占据了如此之大的比例。如果你回溯数字设计的历史的话，会发现图标设计在过去很长的一段时间中，图标设计几乎一直都是GUI领域的核心之一。

在对视觉感知进行系统化的科学研究和理论分析之后，A. Santella 得出了这样的结论：“通过大量的眼动追踪研究之后，我们发现一些有趣的现象。这些现象表明，人们对于抽象概念甚至一些艺术化形象的理解并不差，它们并不是艺术家才有的神秘能力，而是几乎每个人都有的视觉感知能力。虽然不并不是每个人都能画出来，但是几乎每个人都能在计算机的帮助下制作渲染出来。”绝大多数的人在视觉识别、感知、标记、数据化甚至将图片高度抽象化上都有不俗的能力，可以说，人们在视觉能力范围上宽广得难以置信。而这一重要的事实对于设计师而言就非常重要了，在此基础上设计师可以提出更具有易用性和适配性的解决方案。

如果设计师只关注图标传递信息的速度的话，那么相比文字，图标确实可以更快的被用户感知到。绝大多数的用户都是被视觉感知所驱动的，所以成熟的视觉感知机制是更有效的信息传递途径，并且应当作为设计中最值得重视的方面：

·人眼识别图像的速度比阅读文字快的多
·心理学家声称，人眼可以在十分之一秒内遍历、识别一个视觉场景或者元素，而这个时间段内阅读一段文字则明显是吃力的
·图像被传递到大脑的速度会更快，即使是通过文字传递的信息，传递到大脑也通常是以图像的形式被处理
·背景与文字的可读性息息相关，但是图片的信息则很少受到周围元素与背景的影响
·图像更容易在长期记忆中保存，这也意味着交互界面本身比起数据更容易记忆和留存

除此之外，图标和界面中的其他视觉元素让信息可以更容易被不同国家、不同语言和不同文化背景的用户所接受，可以说，从某种程度上，图标提升了界面中信息的被理解性。对于有诸如阅读障碍这样的用户而言，视觉化的界面也更容易理解。

图标在界面许多地方都有应用，其中最普遍也是最典型的就是标签栏中的图标运用。标签作为一种功能性的交互元素，所占据的空间是有限且固定的，这样一来，简明直观的图标就成了一个非常高效的解决方案了。上图的概念设计是由设计师 Sergey Valiukh 所设计，简约的线性图标配合微交互让这个底部菜单显得直观、清晰而又有趣。

接下来的这个天气界面的设计案例则展示了图标是如何展示呈现不同的视觉信息的。符号化的图标设计清晰得传递出不同的天气信息，在保持界面整洁、不占用太多空间的前提下，让用户轻松掌控一整周的天气情况。

许多界面中，基础的交互和内容信息需要用户花费好几秒来进行吸收和获取，而图形化以及图标化的信息呈现能将这个过程缩短。但是，影响信息获取的因素，并不只是文本和图标的配比。

图标的含义

在Tubik Studio 所设计和参与的诸多设计项目的经验基础上，我们在创建界面的过程中，图标本身并不是传递信息速度的唯一影响因素。的确，图标以图像的形式向用户传递信息，但是如果信息传递的不够准确，出现的双关或者歧义，传递速度再快，体验也不好。图标传递出的信息被误读，这就没法被定型为“识别”了，它只是很快被“关注”到而已。真正意义上的识别，不止是被快速看到，而且得被正确理解、正确操作才行。

诸如电话、电子邮件、搜索这类图标的设计，已经为大家所熟知，如果在UI中使用这样的图标设计，传递信息肯定比文案快速准确得多。然而，如果你所使用的图标形象不够清晰明确的情况下，那么你需要对它进行充分的思考。如果和最终要传达的信息不相符，那么最好替换掉，这个时候信息传递的速度并不重要。这就是为什么有的设计需要同时使用文字和图标来传递信息，这个时候可能图标对功能的“描述”不够精准，需要文字来作为辅助。

在这个概念设计中，图标和文案是相互搭配的。这个界面中，一个交互加入了多个高识别度的感知元素，通过动效、CTA元素以及文案让用户对与操作拥有更高更清晰的识别度。能够快速识别图标的用户通常不用再去阅读文字，而对于文字有较高感知度的用户而言，文字的存在让他们不用去猜图标的含义（比如很少上网的老年人）。同时使用文字和图标的确会降低用户曲解图标含义的机率。

另外一个常见的案例就侧边栏的设计，简单的文本和简单的线性图标的搭配就可以传递出足够清晰的概念。

这个博客APP的概念设计展示了图标是如何作为一个多功能的视觉元素而存在的。首先，图标作为博客的分类目录不同条目的视觉识别形象而存在，同时，图标中的图案信息能够传递出类别的相关信息，不同的色彩则成为了用户分辨不同类别的重要视觉信号。所有的这一切让用户能够更加清晰地识别信息，交互也更加明了，强化了整体的可用性和导航的有效度。

无论你最终决定使用图标、文字还是说两者都用，主要是取决于你的受众和你的目标，通过分析需求和最终目的来进行合理的选取。

使用图标的理由

综上所述，我们可以总结出界面中使用图标的主要好处：

·提升用户对信息和数据的感知速度
·通过视觉化的图像来提升用户对于各种元素的记忆性
·通过视觉引导提升导航的便捷度
·无需过长的文字说明，更加节省界面和屏幕空间
·支持文案和内容，以视觉的方式传递信息
·强化设计感，与界面样式保持协调

值得思考的因素

很显然，图标不论如何设计，都是无法满足所有用户的需求，并且无法覆盖到所有用户的认知，但是在视觉设计上依然有一些普适而基础的因素值得我们注意和思考：

·目标受众（能力、年龄、文化背景、教育水平等）
·典型用户的阅读水平
·产品的使用环境
·产品在全球或者地区的推广和普及程度
·所用图标和图形本身的识别度
·所用图标和图形让人分心或者集中注意力的程度

上面所说的因素都和人们的认知与视觉感知息息相关，影响着视觉表达的质量和效率。对于设计师而言，让用户仅仅看到界面是不够的，让用户能够识别、理解界面才是核心，这样他们才能真正与界面进行有效的交互。文案和图标是相互扶持、互为支撑的，它们能够协调一致地呈现信息才能给用户带来真正好的用户体验。

【技多不压身的设计师才有高薪资！】

1. 平面设计：《超赞！设计师完全自学指南》
2. 交互设计：《交互设计师修炼指南！教你从零开始成为优秀交互设计师》
3. UI设计：《超实用新手指南！零基础如何自学UI设计？》
4. 前端开发：《天猫高手来教你！零基础如何系统地学习前端开发？》
5. 抠图技巧：《从菜鸟到高手！PHOTOSHOP抠图全方位攻略》
6. 配色方案：《色彩搭配速成！3个实用方法帮你全面搞定配色》
7. DPI指南：《基础知识学起来！为设计师量身打造的DPI指南》
8. 交互设计自学路径图：《零基础入门！给非科班生的自学路径图之交互设计篇》

原文地址：Medium
原文作者：Tubik Studio
优设译文：@陈子木

本文由优设网原创翻译，请尊重版权和译者成果，转摘请附上优设链接，违者必究。谢谢各位编辑同仁配合。

【优设网 原创文章 投稿邮箱：2650232288@qq.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量130万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com