导图社区 图标设计
这是一篇关于图标设计的思维导图,其中内容包含图标设计风格的分类,方便快速了解,系统掌握图标的设计知识点。
在设计过程中会遇到文本处理,6个实用的处理技巧,帮助快速处理好文本。包含放大字号、调整字体颜色、文字反白处理、数字英文图形化等。
本导图带你快速了解交互设计知识,有针对性和指导性的学习,讲述了设计方法、设计原则、用研工具、软件工具等,希望梳理的内容对你有所帮助!
这是一篇在职场上产品设计的思维导图,产品设计的职场发展方向建议,让人初步了解,方便进行职业规划和准备。
社区模板帮助中心,点此进入>>
互联网9大思维
产品立项报告
产品经理如何做好项目管理
经验分享:产品经理必懂的产品思维
产品诞生过程
产品周期图
开门红的思考
招创智搜
网易星球
教学教务系统
图标设计
图标风格
线性
单色
特征
简洁、清晰
单调
视觉层级
较低
适用
基础功能图标
范围
B端常见
移动端
设置页面
导航栏通知、分享
双色
比单色配色丰富
提升趣味性
提高
丰富的配色偏向年轻化
考虑产品风格,流行目标用户审美
渐变
科技感、炫酷感
车载UI常见
丰富的渐变配色更适合运营入口设计
年轻化、热烈的氛围
不透明度
线性双色VS不透明度
线性双色:视觉更跳跃,个性更鲜明
普适性更强
丰富配色细节,避免视觉过于活跃
大多数场景下
一笔成型
风格设计感和个性极强
考验设计师对造型绘制的把控
功底不足,导致设计出现识别问题
延展性弱,难以表达复杂语义,使用需谨慎
断点
个性,趣味性
注意产品目标人群年龄段
面性
通过调节前后不透明度可以带来较强的空间感
使用场景较广泛
晶白
白质感图标
常见品类图标设计
手法
通过透明度、投影、渐变等参数调节,使整体立体感和空间感都很强
磨砂玻璃
毛玻璃
通背景模糊,或剪切模糊图层的技法来表达通透,有层次,精致的视觉感受
容易与浅色背景相融,造成对比度不足,难以识别的问题
使用中需要注意无障设计
等轴侧(2.5D)
趣味性很强,识别度高
适合重要入口或运营设计
多见于网页插画配图设计
风格卡通,表现花哨
注意应用场景及目标人群年龄段,避免干扰信息阅读和不符合产品风格
很好的吸引用户注意力
电商、美食类产品中较常见,注意配色干净协调。
新拟态
色彩相对单一,与北京融合度较高
通过高光、投影表现一定的立体感
通常整个产品就是新拟态风格时才使用
局限性较大
背景对比较弱,无障设计问题较大
轻质感
通过大量渐变、投影来表现立体感,整体风格偏年轻化
常在教育类产品中
注意配色干净和和谐
明暗质感
通过调节同一色相不同明度、饱和度来营造前后空间感
整体风格统一
写实
图标特点很明显,有极高的识别度
美团外卖品类入口
整体偏向年轻化
主要考虑设计师造型绘制、技法表现能力
抽象
通过几何图形组合、色彩使用表达美的视觉感受。
艺术装饰价值更大,不追求识别度,美观即可
卡通插画
可图标可空状态插图
设计美观有特色
像素风格
移动端界面较少,海外电商产品(jollychic)中看过,
像素游戏
【泰拉瑞亚】
【我的世界】
面性视觉面积更大,整体视觉层级比线性高
线面
和线性双色图标类似,趣味性较强,具备个性化特点
可以做Tab选中状态
描边插画
类似卡通插画
在卡通插画基础上加入描边
同样颜色。在一些特定的前后交接处利用线条做区分
一种设计表现形式,美观有特色
性格
粗线
力量感
稳重
男性等感受
细线
品质感
精致
女性化
圆角
直角