2023-02-8 图标的分类以及应用场景
图标的分类以及应用场景
图表定义:通过相似性或类比来代表的符号,比语言更容易理解,传递更高效。
相似性-表象符号
类比性-表意符号
风格分类
线性 剪影 填充 扁平 手绘 微质感 拟物写实
图标分类
线性图标 Outline icons
剪影图标 Glyph icons
线性填充 Filled-line icons
扁平化图标 Flat icons
手绘图标 Hand-drawn icons
微质感图标 Textrue icons
拟物化图标 Skeuomorphic icons
功能的分类
功能引导、辅助说明
图标应用场景
网页 软件 APP 其他
图标绘制标准化流程
确定图标主题
拟定关键词
搞清指代、隐喻
手稿
绘制中的标准化流程
风格 软件 尺寸栅格 结构造型 细节优化 色彩
绘制后的输出 包装 总结
优化输出 润色包装 设计总结
图标绘制的基本原则
图标设计的重要性:传递引导、指引方向、具有方向性。
具有趣味性
图标设计原则
掌握好的规范原则,让你的设计更符合调性
1.协调美观【审美统一】:统一的视觉风格有很多种元素,包含圆角,线面,线条粗细,涉及形式等。
统一的线条粗细,统一的断点设计,统一的色彩运用
统一的色彩,统一的线条,统一的圆角
2.易于理解【可辨识性高】:简单、直观
3.视觉平衡【面积一致性】
4.色彩搭配、质感、透视与光效的统一性
5.避免模糊像素 保证图标都是矢量图形
图标设计参考网站
设计软件以及图标大小工具
PA AI XD Sketch
图标设计尺寸详解
掌握更好地规范原则,让你的设计更符合调性 1024 * 1024px
工具栏和导航栏图标
状态栏 导航栏 标签栏 iphone6: 44 * 44px
图标分类
icon的分类
不可点击的展示图标 通常尺寸:16 * 16px 24 * 24px 28 * 28px 32 * 32px
可点击的按钮图标
一个宏观的产品流程
战略层
明确用户需求和产品目标 这一般是老板干的事
范围层
明确功能规格和内容需求 这是产品经理干的事
结构层
分为交互设计与信息框架 交互设计师、系统架构师
框架层
细化具体的产品原型 这一般是产品结构师做的事(出产品原型图) 界面设计 导航设计 信息设计
表象层
将最终的产品呈现在用户面前。 视觉设计师干的事儿
UI设计师
经历从产品需求到最终产品设计整个阶段
一、产品定位与市场分析阶段
了解产品市场定位、产品定义、客户群体、运行方式等
二、用户研究与分析阶段
收集相关资料分析目标用户的使用特征、情感、习惯、心里、需求等,提出用户研究报告和可用性设计建议。这部分工作由团队配合完成。时间与项目需求允许的情况下,更可以制定实景用户分析。
三、架构设计阶段
根据可用性定制交互设计、操作和跳转流程、结构、布局、信息和其他元素。界面设计、图标设计、风格设计。