31 - 功能图标一资料

第31课功能图标一主讲师：牛MO王“来瓶A弟钙，撸标嗷嗷快”本课程由哇哈哈A弟钙奶赞助播出课时课程大纲课程简介主讲导师第31节功能图标一功能图标设计原则及规范，正负形图标实操牛MO王第32节功能图标二利用矢量工具及图层样式设计扁平功能图标牛MO王第33节天气图标设计拟物风格、扁平风格、线性风格三种天气设计方法及创作思路牛MO王第34节UI

Kit一利用图层样式设计一款播放器轻拟物化界面牛MO王第35节UI

Kit二设计扁平化和磨砂风格的Dashboard界面牛MO王第36节产品实战一闪屏页面、注册页面和登录页面的设计方法及思考牛MO王第37节产品实战二实战设计APP社交风格方向及原则牛MO王第38节产品实战三实战设计APP新闻、贴吧页面风格方向及原则牛MO王第39节产品实战四实战设计APP工具、统计页面方向及原则牛MO王第40节交互动画实现动效基本原理应用技巧及PS简单的步骤实现的交互动画牛MO王每天一项技能成果预览设计思路设计步骤成果展示设计延展本章总结Class31准确什么是功能图标？成果预览设计思路设计步骤成果展示设计延展本章总结Class31在界面中传达并具有功能意义存在的图形什么是功能图标？成果预览设计思路设计步骤成果展示设计延展本章总结Class31什么是功能图标？成果预览设计思路设计步骤成果展示设计延展本章总结Class31功能图标的特点是什么？成果预览设计思路设计步骤成果展示设计延展本章总结Class31高度浓缩并快捷传达信息、便于加深记忆v功能图标的特点是什么？成果预览设计思路设计步骤成果展示设计延展本章总结Class31化繁为简并保留核心元素功能图标的特点是什么？成果预览设计思路设计步骤成果展示设计延展本章总结Class31把抽象和虚拟进行图形表达云彩？备份？为什么要学习功能图标？成果预览设计思路设计步骤成果展示设计延展本章总结Class31A：找不到合适的素材B：为了设计更加专业C：设计师必备的技能D：勤奋一次偷懒一生C：设计师必备的技能为什么要学习功能图标？成果预览设计思路设计步骤成果展示设计延展本章总结Class31设计不是不停地素材拼凑设计需要通过自己的双手来呈现自己脑海中的创意设计要做的是为了符合产品本质、统一产品风格，并不是一味追求好看架轻熟就才能真正意义的“偷懒”为什么要学习功能图标？成果预览设计思路设计步骤成果展示设计延展本章总结Class31连小事都做不好如何挑大梁？功能图标常用的尺寸成果预览设计思路设计步骤成果展示设计延展本章总结Class3116

x

16

|

24

x

24

|

32

x

32

|

48

x

48

|

64

x

64

128

x

128

|

256

x

256

|

512

x

51212

x

12

|

18

x

18

|

72

x

72

|

96

x

96

……偶数+

4的倍数！！偶数+

4的倍数！！偶数+

4的倍数！！为什么尽量不要出现奇数？成果预览设计思路设计步骤成果展示设计延展本章总结Class3132

x

2

=

6433

x

2

=

6632

x

3

=

9633

x

3

=

99无法居中对齐32

x

1.5

=

4833

x

1.5

=

49.5无法保证不虚功能图标的重要性成果预览设计思路设计步骤成果展示设计延展本章总结Class31减少文字阅读的复杂性增加板式布局的清晰性辅助信息识别的功能性帮助用户使用的简易性Aiki006Aiki001Aiki007Aiki002Aiki005Aiki004Aiki009Aiki003Aiki008Aiki00EAiki00GAiki00BAiki00FAiki00CAiki00AAiki00HAiki00IAiki00D功能图标的构成要素成果预览设计思路设计步骤成果展示设计延展本章总结Class31识别颜色状态是否能让用户看懂是否阅读产生歧义是否增加用户喜爱是否需要颜色辅助是否符合用户习惯是否符合产品风格是否正确表达用途是否提供用户反馈是否干扰用户思考功能图标的构成要素——识别成果预览设计思路设计步骤成果展示设计延展本章总结Class31加或减都会严重影响到信息传达的准确度功能图标的构成要素——识别成果预览设计思路设计步骤成果展示设计延展本章总结Class31飞行模式不要轻易的天马行空创意你的设计功能图标的构成要素——识别成果预览设计思路设计步骤成果展示设计延展本章总结Class31个人中心不要轻易的天马行空创意你的设计功能图标的构成要素——识别成果预览设计思路设计步骤成果展示设计延展本章总结Class31设置保持固有形态进行优化设计功能图标的构成要素——颜色成果预览设计思路设计步骤成果展示设计延展本章总结Class31使用用户日常生活中已经习惯的颜色功能图标的构成要素——颜色成果预览设计思路设计步骤成果展示设计延展本章总结Class31尽可能保持实体物质的相近色功能图标的构成要素——状态成果预览设计思路设计步骤成果展示设计延展本章总结Class31用颜色状态来反馈用户的操作功能图标的构成要素——状态成果预览设计思路设计步骤成果展示设计延展本章总结Class31用在准确的地方而不是随便用功能图标的构成要素——状态成果预览设计思路设计步骤成果展示设计延展本章总结Class31统一规范的状态让用户知道能做什么选中选中不可用未选中未选中不可用功能图标设计中最重要的是易懂、易用成果预览设计思路设计步骤成果展示设计延展本章总结Class31功能图标设计时候的注意事项（实操讲解）成果预览设计思路设计步骤成果展示设计延展本章总结Class311）图标清晰满格像素2）倾斜角度尽可能保持45°3）比例协调4）视觉平衡关于内圆角的算术公式成果预览设计思路设计步骤成果展示设计延展本章总结Class31外角半径–边缘高度=内角半径8

–

4

=

4px外角半径–边高/2

=内角半径8

–

4/2

=

6px关于命名格式成果预览设计思路设计步骤成果展示设计延展本章总结Class31模块_类别_功能_状态Nav_button_message_selAndroid平台不支持“-”，所以用“_”。Ios不需要highlight状态切图，但是Android需要。Disable状态在移动端出现情况较少，其他三种属于必备输出（nor.hig.sel.）功能图标设计时候的注意事项

-视觉平衡成果预览设计思路设计步骤成果展示设计延展本章总结Class31功能图标设计时需要的工具成果预览设计思路设计步骤成果展示设计延展本章总结Class31ABCDEFG功能图标设计时需要的工具成果预览设计思路设计步骤成果展示设计延展本章总结Class31ABCDEFG本章作业成果预览设计思路设计步骤成果展示设计延展本章总结Class31根据提供的模板