ui设计-从图标到界面完美解析第六章系列图标-23页文档资料.docx

UI设计 图标到 界面完 美解析 弟八早 系列图标 CONTENTS 目录 01 |什么是系列图标 02 |系列图标的特点及设计方法 03 |系列图标制作 04 |如何设计系列图标 05 能力拓展 什么是系列图标 第六章系列图标 什么是系列图标 3??0Q; w ?;?v<鏗亠 o 3??0Q; w ?; ?v<鏗亠 o tr ⑨t^r 上湾 Phcr.gord% Sc^Ooi M^c CatMlMor ■蛍鼻耕 A *l*o Not” n?%4g?t<in Syitsn Vpi?\9 系列图标一般为某一款手机或者是某款移动端特有的风格类似的一系列手机图标 海勰图标  系列图标类型 01 01 设置、主题、相机、拨号、联系人、短信、图 >库、音乐视频、日历、盼中、电子邮件、文 件管理、计算器、备忘录、录音机 浏览器、手机管家、手机服务、语音助手、 天气、收音机、备份、系统软件更新、下载 < 内容、游戏中心、应用安装等 系列图标的特点 及设计方法 ■SSSI十方法 统一性： 系列图标要求所有图标具 有统一的风格，在视觉上 具有一致性。一致性并非 是完全相同而是指在变化 中求统一O 规范性: 图标内容完整，完成度-高,符合产品设计规范; 独特性: 有独特的詁计创意和设计风格; 01 02表现力： 02 有感染力的艺术表现手法f 视觉效果突出,能够将设计 创意完美表达; 易用性: 信息传递忌确,符合使用逻辑和用户习惯; SSSI十方法系列图标-创意 SSSI十方法 系列图标- 提出想法——收集与"想法"有关的 文字及图片资料来丰富它——发散思 维 设计方法草图效果 设计方法 在绘图本上，将构思的系列图标描绘 出大概的图形，并不断修改。 电脑效果图 电脑绘制图也叫作正稿,即将绘制的草 稿图在电脑上实现,并上色优化效果。 系列图标 系列图标——设计方一案例 系列图标 系列图标——设计方一案例 第六章系列图标系列图标的特点及设计方法效果 第六章系列图标 系列图标的特点及设计方法 效果 该系列图标的灵感来自于"道家文化"。 SSSI十方法 形：系列图标,首先考虑整齐性。 色：考虑原则：1、贴合主体,2、美观。 质：质感，即物品的材质体现感,——肌理。 光：是做写实效果的,关键点。光使用有三个 维度：角度、咼度、强度。E度 形：系列图标,首先考虑整齐性。 色：考虑原则：1、贴合主体,2、美观。 质：质感，即物品的材质体现感,——肌理。 光：是做写实效果的,关键点。光使用有三个 维度：角度、咼度、强度。 E度 SSSI十方法 创意 住题样式“ 五行标志性的太极图标, 意一环往复,变化无穷 "华为商店" 黄金与白银在五行中同属金,属金的颜色为黄 色和白色 系列图标制作 第六章系列图标 系列图标制作 案例操作——绘制一种逼真玉石感的图标背板,从而体会作者的制作方法 第六章系列图标 系列图标制作 新建适宜的画布，背景色 填为灰色。再用園形的形 状工具绘制，通过布尔运 算构建环形。 新建图形 眈L ?> □ □ R 無 w： 103 总条 8 “： X:亦 0蕉 Y: 129 ■ ? ：|怡 ? _? 口 = E - T ： >4 St鈔标 ?n6isip?u aw : 双击〃环形图层〃新建图 - 层样式，我们会用到"斜 : 面与浮雕，等高线,内阴 ! 影，投影〃等几个雇性 图层样式 R4 ■3 斑侏口 53 ■ 方同■上 T 知如 U 43 耐 ra/t nx/e WXlAJ.i 5硬V) ElKl^kl 畑3? 驱枷■ 【 a± 】 U4 3 ?nwr ?：? 篇么疗卫:州... st鈔标 接下来r我们来制造一些 玉石的自然纹理，另外新 建一个画布（尺寸大于園 圈即可）将前景色与背景 色分别调整为纯黑与纯白， 再使用【滤谟】-【渲染】 -【云彩】,得到如下图 片,可以反复多次重复效 果,直到得到想要的效果。 图层样式 如何设计系列图标 梆喋标 系列图标设计的方法 图形内部结构要注意元素构成 之间的比例，有黄金比例分割 也有感性的平衡方法。 梆喋标 系列图标设计的方法 系列图标设计的方法 同一个尺寸规格，但根据不同形 状的图标，会导致面积占比引起 的视差大小不同，但要在参考尺 寸范围内绘制进行调整。 豔系列图标 系列 标设计的方法 PHOTOTHJMESCTUPRLE PHOTO THJME SCTUP RLE 利用Photoshop绘制〃糖果”系列图标。 1、 图标风格为拟物化，色彩风格为"马卡龙"色系。 2、 背板都是导園角的矩形，背板都有一走的厚度和高光 3、 每个图标的主要图案都嵌在图标背板里。 end Thank YOU