用户界面中的图标，怎么设计才更合理？

工具栏在工作中是经常出现的，如路标中的上坡提示重要信息标（下图），或是是公开场合明令禁止吸烟的提示重要信息标（中图），又或是是停放提示重要信息标（下图）等，总的来看。

较之文档而言，那些工具栏能让人在更短的时间内知觉并介绍重要信息，因此能大幅提高重要信息的听觉耐用性。

从交互式的视角而言，采用工具栏比采用文档更具有竞争优势。因为工具栏单纯、显眼且亲善，与此同时在介面的许多内部空间较细的边线，工具栏能替代几段乏味乏味的文档说明，并增加结构设计的表演艺术感染力；在采用者介面中采用工具栏，是一种采用者津津乐道的结构程序语言。

虽然工具栏有那些缺点，但如果不考量其许多消极影响，可能会引致出现许多不容用的问题。

比如，在许多脆弱边线采用辨识度不高的工具栏，可能会引致采用者的错误操作。同时，工具栏置放边线不最合适，或是表演艺术风格不标准化，也会给采用者引致许多不当体会。

上面数艺君将极为深入细致传授一下各种工具栏的绘出方式与应用领域情景。

1

App工具栏

应用领域工具栏领略到采用者对商品的印象。从某种意义上而言，采用者能通过应用领域工具栏推论出这款商品的优劣。一个好的应用领域工具栏应该能明晰地传达出商品的涵义。

应用领域工具栏的常用结构设计方式：

应用领域工具栏的结构设计方式较多样化，包括抽象化绘图、文档、米老鼠形像和机能绘图的利用。

（1）抽象化绘图的利用

随着结构设计行业的不断发展，拟物化工具栏逐渐消失，取而代之的是扁平化工具栏。扁平化工具栏通常由抽象化元素制作而成，虽然看起来单纯了，但其实对结构设计提出了更高的要求。

比如，“QQ音乐”与“网易云音乐”的音符绘图（左一图和左二图），“微信”的聊天气泡绘图（左三图），以及“墨迹天气”的云朵绘图（左四图）等，总的来看。

在应用领域工具栏结构设计中，利用抽象化绘图的缺点是能让采用者第一眼看到工具栏时就知道这大概是一个什么商品，因此使得品牌具有独特性；

利用抽象化绘图的缺点是对结构设计要求较高且结构设计难度较大，一旦绘图被结构设计得太过抽象化，就会降低商品的辨识度，因此无法使其很好地与其他工具栏区分开来，质感较差。

（2）文档的利用

采用者对汉字的脆弱程度远远高于绘图。因此，如今越来越多的商品开始采用文档来结构设计应用领域工具栏了。在采用文档结构设计应用领域工具栏时，一般会选择商品名称中具有代表性的文档，因此会通过对字体笔画做出许多变化，使得工具栏能够与商品的属性相融合。

一般而言，品牌名称不超过3个字的商品，都适合采用此类结构设计方式进行工具栏结构设计，如“淘宝”工具栏（左一图）、“知乎”工具栏（左二图）及“闲鱼”工具栏（左三图）等；而针对品牌名称超过3个字的商品，最好筛选具有代表性的文档作为工具栏，如“字里行间”工具栏（左四图）等。总的来看。

在应用领域工具栏结构设计中，文档利用的缺点是能让采用者更好地记住商品；文档利用的缺点是品牌延展性较差。在营造商品格调时，文档工具栏较之绘图工具栏而言难度要大许多，因此对于许多极为小众的商品而言，仅通过文档是很难明晰地传达出商品的属性的。

（3）米老鼠形像的利用

随着各大主流商品吉祥物的出现，很多品牌商索性把吉祥物的米老鼠形像融入应用领域工具栏的结构设计中，如“京东商城”的米老鼠小狗形象（左一图）、“转转”的米老鼠小熊形像（左二图）、“美团外卖”的米老鼠袋鼠形像（左三图），以及“斗鱼直播”的米老鼠鲨鱼形像（左四图）等，总的来看。

在应用领域工具栏结构设计中，米老鼠形像利用的缺点是能让商品更具情感，相比抽象化的绘图和纯粹的文档利用与表达而言，会显得更亲切许多。米老鼠形像利用的缺点是听觉上较容易与其他同类工具栏产生雷同的情况。

（4）机能绘图的利用

针对许多体量较细且机能性较单一的商品，为了更明晰地传达商品属性，结构设计师可能会直接根据机能需求来结构设计出相应的机能绘图并利用到工具栏中。比如，iOS 系统自带的计算器应用领域工具栏（左一图）、“秒拍”的相机工具栏（左二图）、“高德地图”的工具栏（左三图），以及“360 日历”工具栏（左四图）等，总的来看。

在应用领域工具栏结构设计中，机能绘图利用的缺点是能强调工具属性，减少采用者知觉成本；机能绘图利用的缺点是针对许多机能体量较大的商品，很难通过一个机能绘图将商品属性重要信息传达清楚，而且不容易表现出与同类商品工具栏的差异化。

应用领域工具栏的结构设计技巧及注意事项：

（1）简洁的结构设计元素

应用领域工具栏在手机屏幕中的显示尺寸仅为120px×20px，甚至有的情况下工具栏显示的尺寸还会比这个尺寸更小。因此，在结构设计应用领域工具栏时要做到尽量简洁，避免小尺寸展示时出现不明晰甚至无法辨识的情况。与此同时，简洁的效果也能从一定程度上提高工具栏的质感。

总的来看，“QQ音乐”工具栏（下图）与“饿了么”工具栏（下图）结构设计元素都非常简洁，即使缩小也能看得清结构。

（2）结构设计语言符合商品性格

应用领域工具栏能领略到采用者对商品的印象，所以应用领域工具栏的结构设计语言一定要符合商品的性格。

总的来看，“抖音”的工具栏（下图）能体现出商品青春、动感的性格，“ONE”的工具栏（下图）能体现出商品安静、文艺的性格。

（3）不宜采用照片

在应用领域工具栏结构设计中，应尽量避免直接采用照片。因为图片缩小后很多细节都不容易看清，如此会影响工具栏的辨识性。与此同时，由于工具栏缩小后图片质量也可能会降低，因此对工具栏的质感体现也会有影响。

（4）明亮鲜活的色彩

iOS10系统人机介面指南中阐明了其色彩搭配的许多规范，其内置的应用领域程序选择采用了许多更具个性的、纯粹的且干净的颜色。

比如，iOS系统内置的“图书”应用领域工具栏采用的是橙色，“天气”和“视频”应用领域工具栏采用的是蓝色，“健康”应用领域工具栏采用的是粉红色等，都从一定程度上体现了商品的机能应用领域属性，更方便采用者区分，总的来看。

2

APP机能工具栏

机能工具栏的样式有很多，作用也各不相同，在具体结构设计时要基于不同的应用领域情景选择不同属性的工具栏。

与此同时，由于不同工具栏所表达的意义不同，其样式、复杂程度及大小也有所不同。机能工具栏能让介面充满结构设计感，且通过绘图化的结构设计让采用者浏览介面时效率更高。

机能工具栏的结构设计原则：

（1）预见性

去了辨识性，就有些本末倒置了。

许多比较抽象化的工具栏很难让采用者一眼就辨识清楚，在优化过程中，结构设计师能进行相关元素的联想，然后将它处理得尽量贴合表意。

当然，针对有些以文档为主的装饰性工具栏，就不需要这么强的辨识性了，但也要贴合文档内容主题去进行结构设计。总的来看，以工具栏为主的机能入口一般结构设计得极为明晰和直观，而以文档为主的机能入口则会结构设计得极为单纯、抽象化许多。

（2）耐用性

针对机能工具栏的制作，在保证辨识性的前提下，要尽量做到耐用。单个工具栏的耐用呈现除了靠造型与配色，更多地体现在细节处理上。这里讲几个比较重要的细节。

如果将许多复杂的工具栏放在不重要且面积较细的边线，会很难被辨识，也就无法达到耐用的效果了；如果将许多太过单纯的工具栏放在主要机能入口，会显得粗糙。因此，将不同样式的工具栏置放在最合适的边线，才能达到耐用的目的。

以“虾米音乐”为例，其主要机能入口的工具栏稍显复杂，而个人中心页的工具栏则极为单纯，如此既表意明确，又使得介面整体看起来耐用，总的来看。

这里还需要注意的一点是，在结构设计线性机能工具栏时，注意切忌用反白的方式。因为线条无法压住大面积的色块，与此同时在有底色的背景上置放线性工具栏，也可能会使工具栏看起来粗糙。线性工具栏和面性工具栏采用反白效果对比总的来看。

（3）标准化性

在一个商品中，机能工具栏的数量往往较多，因此工具栏的标准化性就显得尤为重要。标准化的工具栏能提高商品的品质感，因此同一属性的工具栏如果保持样式上的标准化，可以降低采用者知觉成本，提高采用者的采用效率。

在机能工具栏结构设计中，要先保证同一属性的工具栏从表演艺术风格、听觉大小、粗细、端点、圆角、复杂程度及特殊元素上实现标准化。

表演艺术风格上的标准化很好理解，因此不做过多描述。对于听觉大小的标准化而言，人的听觉是有误差的，因此有时完全保证两个工具栏的标准化，在听觉上却并不一定协调。下图所示为两个高度相等的绘图，我们看上去却会明显感觉到左边的正方形要大许多，而右边的圆形要小许多。

基于以上分析，在进行系列工具栏结构设计时，能考量将矩形稍微调小许多，或是将圆形稍微调大许多，使两者在听觉上看起来大小标准化，总的来看。

粗细标准化、端点标准化和圆角标准化是细节上要留意的点，基本上没有难度。比如，针对同一表意目的的两个线性工具栏，如果一个工具栏的描边粗细是1pt，那么另外一个也要保持1pt才行。

端点标准化与圆角标准化也是同理，针对同一表意目的的两个线性工具栏，如果一个工具栏的端点采用了圆角样式，那么另外一个也需要采用圆角样式，总的来看。

复杂程度的标准化指同一组工具栏内细节程度的标准化。针对同一表意目的的机能工具栏，如果其中一个工具栏细节丰富，因此轮廓明晰，那么整组工具栏都要保持这样的细节程度才行，总的来看。

很多结构设计师在结构设计工具栏时，喜欢加入许多特殊元素，以此达到塑造商品性格并烘托商品气氛的目的。针对同一表意目的的机能工具栏，如果其中一个工具栏添加了这种特殊元素，其他工具栏都要添加才行，总的来看。

以上讲述的是同一表意目的的工具栏结构设计需要注意的原则。针对不同表意目的的工具栏，就不需要过多地强调细节上的标准化了，迎合整个商品的性格即可，如“唱吧”等偏娱乐化因此目标采用者多为年轻人的商品，总的来看。

机能工具栏的表现方式及适用情景:

（1）线性工具栏

线性工具栏是通过提炼绘图的轮廓，然后单纯勾勒而成的工具栏，线条描边多为1pt。线条描边越粗，听觉层级越高。由于线性工具栏听觉层级较低，因此多在同一商品内且机能入口较多的情况（如在未点击状态下的底部导航按钮和辅助机能按钮等）下采用，而很少在主要机能入口采用。下图所示为线性工具栏的采用情况。

线性机能工具栏不宜过于复杂，工具栏在介面中越小就越要单纯，总的来看。许多机能入口工具栏在介面中所占面积可能较大，需要多许多细节才行，防止听觉上的单调。这种细节主要体现在端点、粗细线条结合及绘图点缀等多种方式的结合处理上。

另外要注意的一点是，纯色线性工具栏适用于大部分常规的商品介面中，而多色线性工具栏更显活泼、年轻化，听觉层级较高，需要谨慎采用。多色线性工具栏总的来看。

（2）面性工具栏

在介面结构设计中，面性工具栏更容易吸引采用者的听觉，一般常用于许多重要的快捷入口处。面性工具栏又分为反白工具栏和形状工具栏两种类型。

反白工具栏是指底部由绘图背景托起的图标。一般这种工具栏层级较高，常用于首页介面中，因此一屏的工具栏数量不超过10个，总的来看。

形状工具栏是指没有底部背景，由纯粹的形状绘图组成的工具栏，总的来看。这种工具栏应用领域较广泛，结构设计方式也相对固定。在结构设计过程中尤其要注意的是绘图表演艺术风格与结构设计语言的标准化。

（3）线面结合性工具栏

线面结合性工具栏比线性工具栏和面性工具栏多了许多细节，听觉层级也更高，常用在机能入口、空状态及标签栏等边线，总的来看。线面结合性工具栏能突显年轻、文艺的听觉效果，对于属性极为稳重的商品介面结构设计而言不太适用。

3

常用的工具栏库

目前，由于互联网商品迭代较快，很多基础的工具栏并不需要结构设计师手动绘出，而是直接在网上的工具栏库下载调用即可。

如此能为结构设计节省很多时间，让结构设计师有更多的精力去思考采用者体验方面的优化。而其中采用最多的是“iconfont”（阿里巴巴矢量工具栏库），总的来看。

京东自营图书“年货节”开启！

千万好书，优惠共享！

1月17日——1月31日，

会场好书每满100减50

！

抓紧时间抢购吧！

国外大神用C4D还原

颅内高潮“电流感”！

看更多有趣结构设计。

加入数艺设交流群

结构设计素材下载  学习视频资源

读者交流学习  图书售后服务

软件安装指导  读者意见反馈

数艺设QQ群：

PS学习交流群：979858128

进群暗号：PS    

   手绘学习交流群：1098997319  

   游戏UI交流群：1146198611

《规律与逻辑——采用者体验结构设计法则》