UI设计知识梳理-02
一.什么是工具类产品
01:未解决某一具体需求,能够让用户提高效率节约时间的产品 可用性:信息识别度:背景干扰文字、按钮不明显误操作 控件体验: 图标、 缺乏美感、比例失衡 配色、不考究、不和谐 字体、字号乱用、层次不分 美感
02:类型分类:狭义,解决需求单一、实现路径单一 广义,互联网产品基本都算工具类产品:社交类、购物类......
二.工具类产品4大关键词:
简洁:导航架构上的简洁、1:模块化设计 2:隐藏相似功能 视觉层次上的简洁、1:使用卡片来区分内容 2:用线条来隔分信息 3:通过字号颜色来区分信息 页面信息上的简洁、 1:把用户最想看到的内容放在首屏 2:学会隐藏,把大段内容精简 3:简洁的同时保证内容可识别
易懂:图标+文字,先能用,后能看,1:优先考虑功能的理解和识别性, 2:其次考虑视觉美感,最后两者平衡
快速:工具类产品的目的,就是想通过功能产品化,来提升用户的工作效率 预见:预见下一步操作,比如推荐最近联系人等 填充:默认项的填充,简化用户输入和操作 减缓等待,动效设计 新功能引导:1,第一次打开app,2,专门的帮助引导中心,3,智能引导 引导减少用户的距离感,有助于用户快速使用功能,聪明的引导帮助用户快 速完成任务
三.工具类产品特征
字体:
1:字体性格
儿童类产品 安全亲和,方正卡通体、汉仪乐喵体、汉仪歪歪体
文艺类产品 复古韵味,康熙字典体,麋宋,方正清刻本悦宋简体
工具类产品 系统自带
女性时尚类产品 纤瘦轻盈,方正兰亭黑,汉仪清雅体
2:iOS中文字体 iOS9及以上 苹方-简
iOS8及以下 华文细黑 iOS英文字体 san francisco 特别字体 当产品有强烈的自已性格时,要选择符合产品定位和调性的字体
3:网页常见字体 英文 非衬线:helvetica 非衬线:Arial 中文 衬线字:宋体 非衬线字体:微软雅黑
注意:避免加载字体显示缓慢,字体缺失下,行距,排版,会替换默认字体,会影响排版效果不佳,默认字体经过长时间考验,识别性和约定体验比较好
字体总结:pc端:微软雅黑/Arial ios/MAC端:苹方-简/San Francisco Android端:思源黑体/Robot 突出产品调性:特别字体
特别产品要用特别字体,工具类产品要用系统默认字体
配色
如何选择色彩 ?
色彩心理学:
邮件类,蓝色:色彩心理学:和平、宁静、理性。行业色:IT蓝
绿色:自然地颜色,提升幸福感。健康产品。新生、新理念
黄色:乐观向上,使人厌烦,集中注意力(例,指示牌)
红色:激情、时尚化妆品牌、食物、提示操作、强调警示
白色:纯粹、纯洁、冷静现代、中性百搭
品牌色的延展、现实中实物的颜色
总结:1:产品定位和使用场景可以决定产品的选择。2:品牌的延续性对颜色的选择也会有影响。3:避免选择影响用户的颜色(例:大红大紫颜色杂乱的)4:选择颜色的目的从功能性出发,减少视觉干扰,提高产品效率
确定色彩比例
60%背景色:30%主色:10%点缀色
效率优先原则
减少色相,减少视觉干扰,突出内容。
总结:1:工具类产品配色更加克制,2:首先符合自已的产品定位。3:效率原则优先
配图
工具类产品:直接选择产品里有重要功能界面来当配图
总结:选取产品界面当配图,是展示产品特点最直接的方式,让浏览的用户对你的产品一目了然
图标
根据产品定位来决定产品的风格走向:工具类产品不会使用可爱的风格,少色。
线性:标签栏,线条大小,2px,3px
细节越多直观表现力越弱
细节少,表现力提升
线性图标属性,抽象轮廓,强化特点
面性:设计中与线性一致