从研发角度,关注用户体验

219 阅读8分钟

一、研发关注的UED(用户体验设计)

1.交互设计四策略

原本的遥控器

应用交互设计四策略:删除、组织、隐藏、转移,改进的效果

1.1删除

  1. 只保留有价值的信息,删减非必要信息
  2. 删减页面元素
    1. 精简文字,能用5个字能表达清楚的,就不要用20个字;
    2. 简化布局,去除多余元素,减少分块,突出核心元素;
    3. 精简样式,去除多余样式,如多余的线条、色块等。
  1. 避免错删
    1. 例如,把一切难以实现的功能统统抹杀掉就是典型的错误做法

1.2组织

  1. 内容分块组织
  2. 按流程组织
  3. 分类清晰易懂
  4. 页面元素组织

1.3隐藏

  1. 隐藏次要/使用频率低的功能
  2. 隐藏高级/自定义设置
  3. 采用渐进展示、阶段展示
  4. 适时出现

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一致性

  1. 视觉一致性:颜色(主色、辅色、渐变规律、点缀色、提示色、字体颜色等)、风格、元素属性(字体、控件、间距、图标、图片风格等);
  2. 交互一致性:在各种页面控件布局、操作交互、页面跳转逻辑等的一致性;
  3. 文案一致性:语气、句式结构统一;专业名词、相同功能名称、相同操作统一;
  4. 跨平台一致性:不同的设备上界面结构一致;

4.3易用性

  1. 易操作性
    1. 键盘、快捷键---支持常用的快捷键、减少频繁鼠标和键盘的切换。
    2. 扩大点击范围
    3. 操作反馈---及时对用户的操作给与反馈,包含成功、失败、等待时间等。
    4. 符合预期---任何操作及跳转都要符合用户心里预期。
    5. 避免重复/过多的操作---不要要求用户多次输入相同的内容或同一操作。
    6. 用户的控制度和自由度---能够执行“取消”操作,选择开通或不开通。
    7. 遵循惯例
    8. .......
  1. 易学性
    1. 新手引导
    2. 通俗易懂的文案---将复杂的术语、行话和缩写用通俗易懂的方式表达清楚,“说人话”。
    3. 清晰的选项---提供清晰的表单列表,分组明确,需要步骤的明确需要几步,需要准备的东西提前告知。
    4. .......
  1. 易见性
    1. 可交互的元素应该更清楚的显示出来,避免非交互的元素看起来是可交互的
    2. 选取行高亮
    3. 明确表单必填项
    4. ......

4.4满意度

必备属性:这一类的产品功能特性是,没有会很糟糕,有了勉强可以及格,但远未达到满意的地步。比如家用冰箱,制冷就属于它的必备属性,即使你把制冷温度能够降到-100度,我也没觉得他让我多么满意,这就是必备属性。必备属性就如同他的名字一样,必须具备但是适可而止,这不是产品功能核心竞争力。

期望属性:这一类产品功能特性是,没有会很糟糕,有了会让人满意度大幅提升。比如一款电动车,如果不能充电续航,我会觉得很垃圾,但是随着你续航里程的持续提升我的好感度会越来越高。这类功能也不是竞争的主战场,不过从用户体验角度来说,100-1=0,我们的产品不应有明显的短板,即便你其他全部满分,期望属性如果有一门打0分,你的总体得分可能也高不到哪里去。因此,最好的状态是期望属性达到平均分即可。

魅力属性:这一类产品功能特性是,没有我也无所谓,而有了会让人满意度大幅提升。如果能把魅力属性提升,那么也就是所谓的“超越预期”的用户体验。提升魅力属性才是我们产品的核心竞争力

4.5任务效率

二、可参考网站

1.design-principles-52设计原则

01帕累托法则应用于表单设计中:众多选项中,可以默认选中一个常用的选项;

04曝光效应应用于设计中:界面横幅广告;

05形式追随功能;

07古腾堡图表;

2.京东JELLY,京东设计中心

  • 指标卡、卡片树:强调某几个数据,相比于表格数据过于详细无法突出重点,指标卡能够美观大方的展现每一个粒度的数据,对不同的信息进行整合,提高用户信息获取速度,减少用户思考时间,拥有表格的准确和统计图的美观等特点。多个指标卡形成卡片数,以父子层次结构来组织对象。
  • 文案怎么写经验稿
  • 弹框显示

3.antdesign

全局样式中的色彩、布局、字体、图标;

设计模式中的文案、反馈、原则

动效

4.antv设计中心-图表设计

三、参考链接

《交互设计四策略》

《用户体验要素》

《前端如何提升To B产品用户体验》