这一期我想跟大家聊一聊页面中的图标应用。这里的图标不是UI类目的图标，请不要搞混哦。图标的应用在页面设计中有两个比较重要的作用： 1、节省[color=#FF0000][b]寻找大量不太好找的配图[/b][/color]的时间，快速明确的制作页面 2、让[b][color=#FF0000]没有多少阅读欲望的长篇文案[/color][/b]具有直观的识别性，明确内容 [align=center][img=山岩ps小课堂24_02.jpg]http://image.135editor.com/files/users/417/4174976/201805/FZd7bxFE_ztxA.jpg[/img][/align][align=center][size=14px]①、9个功能如果都做配图展示，要罗列非常长的页面，且配图不好寻找，费时费力[/size][/align][align=center][size=14px]②、上半部分文字让人提不起阅读兴趣，下半部分用图标提取主要部分，表达直观[/size][/align] 可是很多设计师往往会由于图标的体积较小而不去重视它，应用起来非常随意，使它的作用变得弱化，甚至变成画面中不忍直视的部分。图标的合理应用是可以给图片加不少分数的，而图标应用最为核心的部分就是它的统一性。 [align=center]常见图标统一性[/align][align=center][b][color=#FF0000]1、外围轮廓统一[/color][/b][/align][align=center][b][color=#FF0000]2、图标轮廓统一[/color][/b][/align][align=center][b][color=#FF0000]3、文字提取统一[/color][/b][/align][align=center][b][color=#FF0000]4、单一图标统一[/color][/b][/align] [align=center][img=山岩ps小课堂24_04.jpg]http://image.135editor.com/files/users/417/4174976/201805/PnSzBdbG_Ir6k.jpg[/img][/align] 图标的外轮廓可以分为线（描边）、面（填充）、线面结合三种。我们用圆角矩形来做例子，如下图: [align=center][img=山岩ps小课堂24_06.jpg]http://image.135editor.com/files/users/417/4174976/201805/pbhM3cxa_9Jex.jpg[/img][/align] 所以我们在应用图标的时候一定要让同一版块中多个图标的外轮廓是统一的，如果混合起来应用会让图片的统一性受到破坏，视觉上是比较别扭的。 [align=center][img=山岩ps小课堂24_08.jpg]http://image.135editor.com/files/users/417/4174976/201805/kBTMAqhu_cS5S.jpg[/img][/align] 图标的应用中，针对轮廓的视觉感受，可以有[color=#FF0000]渐变、图案、具象图形、具象物体[/color]等不同的手法去做设计性，下图为例： [align=center][img=山岩ps小课堂24_10.jpg]http://image.135editor.com/files/users/417/4174976/201805/UJNjh2MO_9Nrq.jpg[/img][/align] [align=center][img=山岩ps小课堂24_12.jpg]http://image.135editor.com/files/users/417/4174976/201805/jW5wx5rs_6Y7b.jpg[/img][/align] 图标轮廓的应用可以分两种，一种是[color=#FF0000]带外轮廓的图标[/color]，一种是[color=#FF0000]没有外轮廓的图标[/color]，带外轮廓的图标要在注意外轮廓线、面、具象化统一性的同时，还要注意图标本身的线、面、具象化统一性。 [align=center][img=山岩ps小课堂24_14.jpg]http://image.135editor.com/files/users/417/4174976/201805/JXtVNcwO_mka8.jpg[/img][/align] 外轮廓由于是复制应用的原因，他的形状统一是很容易满足的，但是图标是需要每个针对的去寻找相应的样子，所以很容易忽略他的[color=#FF0000]外形统一性[/color]，下图为例： [align=center][img=山岩ps小课堂24_16.jpg]http://image.135editor.com/files/users/417/4174976/201805/kncDMXME_2c6Z.jpg[/img][/align] 做了渐变效果的面（填充）的外轮廓是很统一的，但是图标部分，第四个是面（填充）的结构，前面三个是线（描边）的结构。 [align=center][img=山岩ps小课堂24_18.jpg]http://image.135editor.com/files/users/417/4174976/201805/VYG9yTJd_gbLY.jpg[/img][/align] 把最后一个改为线的结构，但还是会感觉有些不舒服，主要原因是因为前面三个图标都是偏圆形的，最后一个是偏三角形的，所以尽量让图标的形状结构相似一些。 [align=center][img=山岩ps小课堂24_20.jpg]http://image.135editor.com/files/users/417/4174976/201805/vGXMNmjT_Mqm7.jpg[/img][/align] 这里要说的一个点是，如果你做的图标中有超过两个不同的形状结构，是可以不去做统一的。比如下图中的图标有宽矩形、窄矩形、倒三角、正三角四种形状结构。 [align=center][img=山岩ps小课堂24_22.jpg]http://image.135editor.com/files/users/417/4174976/201805/k6eNI755_5mAT.jpg[/img][/align] 没有外轮廓的图标有形状类型和非形状类型两种，因为没有轮廓的限制，在注意上边的统一性问题的同时还要注意[color=#FF0000]高度的统一感[/color]，而有些图标由于结构问题，在同样高度的情况下比另一个看起来更大，这种时候需要缩小一些，然后让这些图标在[color=#0070C0]垂直中心[/color]上是一条线。 [align=center][img=山岩ps小课堂24_24.jpg]http://image.135editor.com/files/users/417/4174976/201805/2QpUakng_OVCT.jpg[/img][/align] [align=center][img=山岩ps小课堂24_26.jpg]http://image.135editor.com/files/users/417/4174976/201805/Bb25Bnpz_N2rP.jpg[/img][/align] 文字提取是图标中较为简便和应用较为广泛的一种形式，通过提取需要表达的文字部分的[color=#FF0000]第一个字、主要的字或能够概括其含义的词语[/color]，应用一个外轮廓进行统一。这种方式不容易出现太大的错误，当然也相较于图形应用方式来说有些单调。 [align=center][img=山岩ps小课堂24_28.jpg]http://image.135editor.com/files/users/417/4174976/201805/g4mAuqXC_XSLa.jpg[/img][/align] 针对文案概括部分我要说一个设计师的通病，设计师很多时候都[color=#FF0000]不注意文案的内容[/color]，有些人也根本不去阅读自己要做的这部分文案，这是很不好的习惯，即便是为了做统一感我们也要具备一定的文案识别和应用能力，如下图中的应用： [align=center][img=山岩ps小课堂24_30.jpg]http://image.135editor.com/files/users/417/4174976/201805/Wm6G66dL_YbpB.jpg[/img][/align] 第一个框中的结构跟后边不一样，很不舒服，这里完全可以去掉“外表”直接写“不起皮”，如果客户需求必须保留“外表”，那么相应的后边四个就要增加前缀词，比如“无气味”可以写成“烤漆无气味”、“不怕水”可以写成“琴身不怕水”等等。最后一个框中的“耐磨”也是一个道理，前面既然都是三个字，这里可以用三个字就尽量用三个字，可以用“耐磨损”等。 文字的外轮廓应用跟前面的外轮廓应用是一样的，可以有线、面、具象化等多种表达。 [align=center][img=山岩ps小课堂24_32.jpg]http://image.135editor.com/files/users/417/4174976/201805/Fs6n9IWZ_gped.jpg[/img][/align] [align=center][img=山岩ps小课堂24_34.jpg]http://image.135editor.com/files/users/417/4174976/201805/XAqak8bS_uapa.jpg[/img][/align] 利用完全一样的一个图标进行统一表达，也是图标应用中较为普遍的应用方式，这种方式可以使画面统一性、整体性更强，显得更加规范，不过在一个图片中大量出现这种形式会显得比较单调。 [align=center][img=山岩ps小课堂24_36.jpg]http://image.135editor.com/files/users/417/4174976/201805/Iq4z7bau_eAXt.jpg[/img][/align] 希望大家在之后的图标应用中，能够有更好的思路，争取把图标用对，用好。