MUI设计基础-图标设计

1、图标设计设计方法与案例分析ICON DESIGN-THE DESIGN METHOD AND CASE ICON DESIGN-THE DESIGN METHOD AND CASE ANALYSISANALYSIS 夕阳黄昏人物夕阳黄昏人物 中国传统皮影中国传统皮影 中国传统剪纸中国传统剪纸 平面设计平面设计-LOGO-LOGO 网页设计网页设计- -剪影表现剪影表现 操作系统操作系统- -剪影表现剪影表现 各大移动平台设备各大移动平台设备 剪影图标的分类剪影图标的分类 图标的制作灵感，全部来自对生活的观察和经验图标的制作灵感，全部来自对生活的观察和经验线性线性块状块状功能图标的特点？功能图标

2、的特点？ 减少文字阅读的复杂性减少文字阅读的复杂性 高度浓缩并快速传达信息，便于加深记忆识别高度浓缩并快速传达信息，便于加深记忆识别 加或减都会严重影响到信息传达的准确性加或减都会严重影响到信息传达的准确性 创意请注重客户的视觉习惯创意请注重客户的视觉习惯 保持固有形态进行优化设计保持固有形态进行优化设计 使用用户日常习惯的颜色使用用户日常习惯的颜色 用颜色状态来反馈用户的操作用颜色状态来反馈用户的操作 统一规范的状态让用户知道能够做什么统一规范的状态让用户知道能够做什么 百度百度4646* *46464848* *48484646* *4646天猫天猫微信微信 布尔运算与锚点制作剪影图标布尔

3、运算与锚点制作剪影图标 剪影图标提案剪影图标提案 2X2X与与3X3X 偶数偶数+4+4的倍数为了适配的倍数为了适配 半像素：又称次像素（虚边）对象绘制路径没有对齐像素网格半像素：又称次像素（虚边）对象绘制路径没有对齐像素网格 半像素解决方法？半像素解决方法？PSPS1.1.偶数原则（避免出现小数点），自由变换偶数原则（避免出现小数点），自由变换- -上下左右箭头移动；上下左右箭头移动；2.2.矩形工具属性栏：对齐边缘；矩形工具属性栏：对齐边缘；3.3.首选项首选项- -工具（常规）工具（常规）- -将适量工具与变化和像素网格对齐；将适量工具与变化和像素网格对齐；AIAI1.1.新建新建- -

4、单位像素单位像素- -颜色模式颜色模式RGB-RGB-栅格栅格72-72-使新建对象与像素网格对齐；使新建对象与像素网格对齐；2.2.参考线和网格参考线和网格- -网格线间隔网格线间隔10px10px、次分割线、次分割线10px10px；3.3.单位单位- -常规像素常规像素- -描边像素；描边像素；创作原则创作原则 图标底色框绘制方法图标底色框绘制方法 黄金分割比黄金分割比 图标底色框绘制方法图标底色框绘制方法 图标图标底色框底色框绘制方法绘制方法 课堂案例课堂案例- -扁平化图标扁平化图标 课堂案例课堂案例-Google-Google浏览器浏览器 渐变方法渐变方法 投影方法投影方法 案例分

5、析案例分析 内阴影内阴影 可做高光与反光，与径向渐变很像可做高光与反光，与径向渐变很像 内嵌与外浮内嵌与外浮 质感质感 金属质感：黑金属质感：黑- -灰灰- -白白- -灰灰- -环境色（亮）环境色（亮）- -黑黑反光质感：黑反光质感：黑- -灰灰- -黑黑- -环境色（亮）环境色（亮）- -黑黑- -灰灰- -黑（两层渐变上层为杂色类型）黑（两层渐变上层为杂色类型） 斜面浮雕斜面浮雕 使用方法：内斜面、浮雕效果、枕状浮雕使用方法：内斜面、浮雕效果、枕状浮雕描描边：第边：第2 2个使用形状做内嵌效果，第个使用形状做内嵌效果，第3 3个为描边（渐变）个为描边（渐变） 内发光内发光 内发光：增强外

6、浮感与径向渐变类似；内发光：增强外浮感与径向渐变类似；描描边：模拟物体自发光现象；边：模拟物体自发光现象； 降低用户的学习成本与理解难度降低用户的学习成本与理解难度 拟物化设计代表作品：代表作品：IOS7.0IOS7.0以下时代的大部分以下时代的大部分appapp特点：特点：1 1界面：模拟真实物体的材质、质感、细节、光亮等；界面：模拟真实物体的材质、质感、细节、光亮等；2 2交互：人机交互也拟物化，模拟现实中的交互方式；交互：人机交互也拟物化，模拟现实中的交互方式；好处：学习成本低，一学就会，而且传达了丰富的人性化的感情；好处：学习成本低，一学就会，而且传达了丰富的人性化的感情；坏处：拟物化

7、本身就是个约束，会限制功能本省的设计；坏处：拟物化本身就是个约束，会限制功能本省的设计；扁平化设计代表作品：代表作品：iOS7.0iOS7.0及以上，微软的及以上，微软的Metro UIMetro UI，Windows8Windows8特点：特点：1 1界面：简单纯色组合（界面：简单纯色组合（iOSiOS系）、单色极简的抽象矩形色块（微软系）、系）、单色极简的抽象矩形色块（微软系）、大字体、光滑、现代感十足，有种蒙德里安的感；大字体、光滑、现代感十足，有种蒙德里安的感；2 2交互：因为扁平化设计核心是对功能本省的使用（对内容本身的消费），交互：因为扁平化设计核心是对功能本省的使用（对内容本身的消费），所以去掉了冗余的界面和交互，而是使用更直接的设计来完成任务；所以去掉了冗余的界面和交互，而是使用更直接的设计来完成任务；好处：界面和交互简约，信息更直观，信息量更大；好处：界面和交互简约，信息更直观，信息量更大；坏处：需要一定的学习成本，且传达的感情不丰富，甚至过于冰冷；坏处：需要一定的学习成