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

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