UI的设计－从图标到界面完美解析第六章 系列图标.pptxVIP

从图标到界面完美解析 UI 设计 第六章 系列图标 CONTENTS 目 录 01 什么是系列图标 02 系列图标的特点及设计方法 03 系列图标制作 04 如何设计系列图标 05 能力拓展 01 什么是系列图标 第六章 系列图标 什么是系列图标 系列图标一般为某一款手机或者是某款移动端特有的风格类似的一系列手机图标 第六章 系列图标 什么是系列图标 系列图标类型 02 系列图标的特点 及设计方法 第六章 系列图标 系列图标的特点及设计方法 统一性： 系列图标要求所有图标具有统一的风格，在视觉上具有一致性。一致性并非是完全相同而是指在变化中求统一。 规范性： 图标内容完整，完成度高，符合产品设计规范； 独特性： 有独特的设计创意和设计风格； 表现力： 有感染力的艺术表现手法，视觉效果突出，能够将设计创意完美表达； 易用性： 信息传递准确，符合使用逻辑和用户习惯； 在绘图本上，将构思的系列图标描绘出大概的图形，并不断修改。 草图效果 电脑绘制图也叫作正稿，即将绘制的草稿图在电脑上实现，并上色优化效果。 电脑效果图 创意（想法—定位—收集—交互） 提出想法——收集与“想法”有关的文字及图片资料来丰富它——发散思维 第六章 系列图标 系列图标的特点及设计方法 系列图标——设计方法 第六章 系列图标 系列图标的特点及设计方法 系列图标——设计方法——案例 效果图 该系列图标的灵感来自于“道家文化”。 第六章 系列图标 系列图标的特点及设计方法 系列图标——设计方法——案例 创意——视觉 形：系列图标，首先考虑整齐性。 色：考虑原则：1、贴合主体，2、美观。 质：质感，即物品的材质体现感，——肌理。 光：是做写实效果的，关键点。光使用有三个维度：角度、高度、强度。 1 2 3 4 第六章 系列图标 系列图标的特点及设计方法 系列图标——设计方法——案例 创意——绘意 “主题样式” 五行标志性的太极图标， 意——循环往复，变化无穷 “华为商店” 黄金与白银在五行中同属金，属金的颜色为黄色和白色 03 系列图标制作 第六章 系列图标 系列图标制作 案例操作——绘制一种逼真玉石感的图标背板，从而体会作者的制作方法 新建适宜的画布，背景色填为灰色。再用圆形的形状工具绘制，通过布尔运算构建环形。 第六章 系列图标 系列图标制作 双击“环形图层”新建图层样式，我们会用到“斜面与浮雕，等高线，内阴影，投影”等几个属性 第六章 系列图标 系列图标制作 接下来，我们来制造一些玉石的自然纹理，另外新建一个画布（尺寸大于圆圈即可）将前景色与背景色分别调整为纯黑与纯白，再使用【滤镜】-【渲染】-【云彩】，得到如下图片，可以反复多次重复效果，直到得到想要的效果。 第六章 系列图标 系列图标制作 04 如何设计系列图标 第六章 系列图标 如何设计系列图标 系列图标设计的方法 图形内部结构要注意元素构成之间的比例，有黄金比例分割也有感性的平衡方法。 第六章 系列图标 如何设计系列图标 系列图标设计的方法 同一个尺寸规格，但根据不同形状的图标，会导致面积占比引起的视差大小不同，但要在参考尺寸范围内绘制进行调整。 02 视差平衡 第六章 系列图标 能力拓展 系列图标设计的方法 利用Photoshop绘制“糖果”系列图标。 1、图标风格为拟物化，色彩风格为“马卡龙”色系。 2、背板都是导圆角的矩形，背板都有一定的厚度和高光 3、每个图标的主要图案都嵌在图标背板里。 Thank YOU end