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