15 分类图标设计
消费类App提供的商品种类和服务项目多而杂。为了让用户更加明确地知道App中都包含哪些商品或服务，同时让用户操作能够更加高效和便利，便有了分类这个功能。分类图标通常被放在底边工具栏中。
视频演示
◎ 元素提炼
分类即“分门别类”的意思。也许最早的“分类”就是家庭主妇在整理家务时将同样的杂物放在一个箱子里，再将不同的箱子罗列在一起的行为。图书馆管理书籍、超市摆放货品及码头摆放集装箱等行为，都属于分类行为。基于此，分类的原始图形是叠在一起的盒子，也可以用排列的线段表示。而在消费类App中，点击分类图标是为了寻找商品，于是有的分类图标里会带有放大镜这个图形元素。
◎ 结构分析
这个图标的结构相对简单，由3个矩形和一个放大镜图形构成。其中，放大镜图形的绘制在前期依然是需要借助矩形框来完成的。
◎ 设计思路
在这个图标设计过程中，左上角矩形左上方的角被设计成了直角的样式，此矩形其他的角和第2个、第3个矩形的所有角都统一为圆角样式。右下角代表放大镜的图形整体比较简洁，并且右下方的轮廓线采用了风格化虚线，使图标的细节感更强。
◎ 绘制过程
01 定出图标各个部分在画面中的位置和大小。
02 从上到下、从左到右地绘制出各个图形的基本形态。针对圆角矩形的绘制，要先画出4条一样长短的边，再补齐圆角。注意第一个矩形的左上角需要表现为直角。
03 画好3个矩形和放大镜图形的大致形态。放大镜图形的画法和搜索图标中放大镜的画法是差不多的。先确定圆的大小，然后用直线表现把手，并使其呈45°倾斜。
04 画出放大镜图形。用高光橡皮擦出放大镜图形右下角的风格化虚线。同时在圆和直线的交界处以圆弧的形式完善图标，使图标的线条看起来更圆润、流畅，结束绘制。
提示
在绘制倾斜式图形时，要先确定倾斜的角度是否合适，倾斜的角度一般有15°、30°、45°和60°这4种样式。针对对称图形的绘制，可以根据倾斜的角度先绘制出对称轴，然后确定其他图形的位置和大小。
经验分享：底边工具栏中图标的设计规范
底边工具栏几乎是所有的移动端App都有的部分，也是App的基础部分。在设计底边工具栏中的图标时有5个规范：（1）图标必须在正方形范围内进行设计与绘制。（2）设计风格必须保持统一。可以线性图标为主，也可采用线面相结合的方式进行呈现。（3）符合语义。图标图形必须符合其功能语义并能满足用户需求，也可根据具体情况进行创作。（4）符合用户审美。图标美观的重要性虽不及语义表达，但是也非常重要。（5）在Photoshop中绘制图标时必须符合相应的设计规范和尺寸要求，以满足不同屏幕、不同平台的适配需要。
思维拓展：底边工具栏图标的设计形式与风格有哪些
底边工具栏图标的设计形式多种多样，大概可划分为4种。（1）圆角图标。给人以友好且富有亲和力的感觉。制作时要注意对圆角大小的控制。（2）直角图标。相比其他形式的图标来说更时尚、尖锐且有个性，与面性图标的结合性较强。（3）断点图标。具体可以细分出两种制作方式。第一种是在线描图形结合处有断点，或者在边线上有一些断点。第二种是使断点处形成风格化虚线，以使图标细节较明显，让人印象深刻。风格化虚线和面性图标相结合之后，会形成MBE风格的图标。（4）高光图标。用弧线或直线根据图标的结构绘制图标的高光。高光一般在左上角。
同时，底边工具栏图标的设计风格也多种多样，主要有4种。（1）简约风格。由极其简单的规范图形组成，如圆形、三角形及半圆形等。线条以直线和规范的曲线为主，或者用圆点代替。（2）大众风格。通过简约的方式、粗线条或面积填充的方式来表达图标的语义和功能。图标设计的主要目的是让用户快速厘清图标的语义。图标的设计风格非常中性，需要在符合大多数人审美的标准下进行设计，并且尽可能多地体现设计感。（3）时尚风格。所选图形元素更多元化，图形间的对比更强烈，以曲线、直线及不同图形的组合为主。（4）魔幻风格。图形表达很抽象，以渲染气氛和风格表现为主，语义表现为辅。