移动互联网|详细解读图标设计!( 二 )




图标要表达一定的含义就往往须组合不同的形态 , 借助单个形态所传达的内在信息 , 拼合在一起去传达另外一种信息 。 例如:在设计“导航”功能图标时 , 设计师第一反应是与卫星有关 , 但就以单个卫星的外形来传达导航的含义恐怕不够 , 于是再联想与导航有关的信息图示 , 如“坐标”“旗帜”“陆地”等 。 再经过设计师以视觉平衡原理合理地布置它们之间的主次、空间关系 。

需要注意的是 , 不可随便使用其与要表达功能相关的图形或物体 , 要经过精心的挑选 , 最好是大家熟悉、易记的物或形 , 毕竟目的是要帮助用户更形象地理解程序的内在功能含义 , 以易记、易懂为前提 。 也不能借助过多的图形来表达图标含义 , 因为过于复杂反而影响用户的理解 。


在前面的流程完成后 , 设计师设计的草图已经很清楚地表达了自己的想法 , 并且也能与功能信息密切地吻合 , 那就需要使用 PS、 AI等软件进行绘制 , 这要看个人的习惯以及对软件的熟悉程度 。


①常规扁平式
特点:纯色、剪影图形 。
优点:简洁清新、识别性良好、色彩明朗、设计感强烈 。

②渐变折痕式
特点:纯色、折痕、轻渐变 。
优点:比常规扁平化丰富 , 有轻微空间感、色彩明朗 , 视觉统一性好 。

③轻质感式
特点:简单层次、轻投影、轻渐变 。
优点:简洁、明朗 , 有一定的精致感 , 有简单的层次 , 内容丰富 。

④长投影式
特点:层次、投影 。
优点:色彩对比度大 , 有明显而单纯的投影 , 有鲜明的层次感和空间感 , 视觉冲击力强 。

⑤轻厚度式
特点:厚度、细节、轻投影 。
优点:有明显的厚度 , 既有明显的立体感 , 有厚重感和细节感 , 但相对于复杂统一性没有 。


所谓立体图标 , 就是在图标的设计中运用了空间透视、投影效果、浮雕效果、色彩渐变效果等 , 使图标本身看上去具有视觉上的立体效果的图标设计 。 立体指的是具有长宽高空间因素 , 平面图标的立体表现和设计师绘画中的立体感表现是一致的 , 相比起简洁的扁平化图标而言 , 立体的图标具有以下一些显而易见的独特优势 。

①三维立体 , 视觉震撼 。
②形象生动、易于识别 。
③个性多样、美感十足 。
④新颖别致、独具一格 。

立体图标赋予了图标本身更高的艺术性 , 也使得图标本身拥有了得天独厚的视觉传达优势 。 立体图标拥有强烈的空间感、立体感和视觉冲击力 , 图标在显示屏中会更加的真实灵动、触手可及 , 同时对用户而言 , 也增加了图形的趣味性并引起用户的点击欲 。