一、研发关注的UED(用户体验设计)
1.交互设计四策略
原本的遥控器
应用交互设计四策略:删除、组织、隐藏、转移,改进的效果
1.1删除
- 只保留有价值的信息,删减非必要信息
- 删减页面元素
-
- 精简文字,能用5个字能表达清楚的,就不要用20个字;
- 简化布局,去除多余元素,减少分块,突出核心元素;
- 精简样式,去除多余样式,如多余的线条、色块等。
- 避免错删
-
- 例如,把一切难以实现的功能统统抹杀掉就是典型的错误做法
1.2组织
- 内容分块组织
- 按流程组织
- 分类清晰易懂
- 页面元素组织
1.3隐藏
- 隐藏次要/使用频率低的功能
- 隐藏高级/自定义设置
- 采用渐进展示、阶段展示
- 适时出现
1.4转移
根据不同的设备特性,设计功能;
考虑用户和系统复杂度的平衡,复杂的处理过程尽可能交给计算机,而将结果交给人;
删除不要的
组织重要的
隐藏次要的
转移难要的
2.用户体验五要素
战略层——范围层——结构层——框架层——表现层
2.1.战略层:这层关注用户需求和产品商业目标。
2.2.范围层:根据产品战略,确定需要给用户提供哪些功能或内容,确定需求优先级。
2.3.结构层:规划产品有哪几个模块,有哪些内容分类,用户如何交互。
结构层=信息架构+交互设计;
信息架构包括信息的内容、类别及层级结构。
常见的层级结构:树形层级结构、矩阵结构(信息多维度连接)、自然结构(信息没有分类和明确的指示)、线性结构;
交互设计就是关注用户可能的行为,定义系统如何配合与响应。用户动一步,产品动一步。
交互设计常常在错误处理方面出问题。错误处理不好的话,用户很容易产生强烈的挫败感。
- 最好的设计是让用户不可能犯错。比如汽车如果不在P档启动汽车很可能会损坏变速系统的中轴和复合件,导致汽车突然前滑,伤到路人。为了防止这种情况,自动档的汽车都会设计成——除非在P档,否则不能启动发动机。想启动必须清空档位。
- 第二个方法就是提供纠错方式,比如“撤销”功能。
- 警告提醒可以预防出错。但是尽量不要一连串的“你确定吗”,避免骚扰用户。
2.4.框架层:界面布局,设计导航栏,确定信息的呈现方式。到这一步,才出现用户能“看到”的东西。
框架层要将界面设计,导航设计,信息设计三个元素紧密结合。
框架层=界面设计+导航设计+信息设计
界面设计,让用户接触具体功能;
- 开始设计之前,要了解、尊重用户的习惯。比如PC端界面,退出登陆按钮、个人信息查看入口,都是在右上角,所以不要设计成其他布局,让用户重新适应;
- 选择正确的界面元素。常用的按钮、输入框、复选框等等通常使用平台的标准控件,或者统一的控件。
- 让用户一眼就看到最重要的东西。简单的办法就是把用户最可能点击的按钮设计成最大的。
- 让用户完成目标的过程更容易,可以给界面上每个选项赋予默认值。或者记住用户上次选择的状态。
导航设计,让用户在信息结构中自由穿行;
- 引导用户去下一步前,要告诉用户当前在哪。
- 颜色、标签等等指示标识可以帮助用户很快地得到一个概念地图。
信息设计,给用户展示哪些信息;
- 图片、图表是比文字更好的展现方式。
- 把信息分组,看上去更简单明了。
2.5.表现层:页面配色、排版、美化等等。
3.平面设计4原则
对比:避免元素太过相似。如果元素不同,就让他们截然不同
重复:视觉要素在作品中重复出现,增加条理性和统一性
对齐:每一元素与另一元素有某种视觉联系。另外观清晰、精巧、清爽
亲密性:彼此相关的项归组在一起,建立一个视觉单元。组织信息、减少混乱、结构清晰
4.体验优化-阿里云制定的一套适合云产品与中后台等B端产品的体验模型--UES(User Experience System)
4.1性能
4.2一致性
- 视觉一致性:颜色(主色、辅色、渐变规律、点缀色、提示色、字体颜色等)、风格、元素属性(字体、控件、间距、图标、图片风格等);
- 交互一致性:在各种页面控件布局、操作交互、页面跳转逻辑等的一致性;
- 文案一致性:语气、句式结构统一;专业名词、相同功能名称、相同操作统一;
- 跨平台一致性:不同的设备上界面结构一致;
4.3易用性
- 易操作性
-
- 键盘、快捷键---支持常用的快捷键、减少频繁鼠标和键盘的切换。
- 扩大点击范围
- 操作反馈---及时对用户的操作给与反馈,包含成功、失败、等待时间等。
- 符合预期---任何操作及跳转都要符合用户心里预期。
- 避免重复/过多的操作---不要要求用户多次输入相同的内容或同一操作。
- 用户的控制度和自由度---能够执行“取消”操作,选择开通或不开通。
- 遵循惯例
- .......
- 易学性
-
- 新手引导
- 通俗易懂的文案---将复杂的术语、行话和缩写用通俗易懂的方式表达清楚,“说人话”。
- 清晰的选项---提供清晰的表单列表,分组明确,需要步骤的明确需要几步,需要准备的东西提前告知。
- .......
- 易见性
-
- 可交互的元素应该更清楚的显示出来,避免非交互的元素看起来是可交互的
- 选取行高亮
- 明确表单必填项
- ......
4.4满意度
必备属性:这一类的产品功能特性是,没有会很糟糕,有了勉强可以及格,但远未达到满意的地步。比如家用冰箱,制冷就属于它的必备属性,即使你把制冷温度能够降到-100度,我也没觉得他让我多么满意,这就是必备属性。必备属性就如同他的名字一样,必须具备但是适可而止,这不是产品功能核心竞争力。
期望属性:这一类产品功能特性是,没有会很糟糕,有了会让人满意度大幅提升。比如一款电动车,如果不能充电续航,我会觉得很垃圾,但是随着你续航里程的持续提升我的好感度会越来越高。这类功能也不是竞争的主战场,不过从用户体验角度来说,100-1=0,我们的产品不应有明显的短板,即便你其他全部满分,期望属性如果有一门打0分,你的总体得分可能也高不到哪里去。因此,最好的状态是期望属性达到平均分即可。
魅力属性:这一类产品功能特性是,没有我也无所谓,而有了会让人满意度大幅提升。如果能把魅力属性提升,那么也就是所谓的“超越预期”的用户体验。提升魅力属性才是我们产品的核心竞争力。
4.5任务效率
二、可参考网站
1.design-principles-52设计原则
01帕累托法则应用于表单设计中:众多选项中,可以默认选中一个常用的选项;
04曝光效应应用于设计中:界面横幅广告;
05形式追随功能;
07古腾堡图表;
2.京东JELLY,京东设计中心
- 指标卡、卡片树:强调某几个数据,相比于表格数据过于详细无法突出重点,指标卡能够美观大方的展现每一个粒度的数据,对不同的信息进行整合,提高用户信息获取速度,减少用户思考时间,拥有表格的准确和统计图的美观等特点。多个指标卡形成卡片数,以父子层次结构来组织对象。
- 文案怎么写经验稿
- 弹框显示
3.antdesign
全局样式中的色彩、布局、字体、图标;
设计模式中的文案、反馈、原则;
动效;