如何从零构建UI组件及设计规范(二):设计原则

1 评论 7375 浏览 67 收藏 8 分钟

本篇为如何从零构建UI组件及设计规范之设计原则篇,主要介绍在组件和界面设计中,产品体验原则、界面设计原则以及常见设计定理。

《如何从零构建UI组件及设计规范》共分为5个系列,分别为《一:介绍篇》、《二:设计原则》、《三:全局样式》、《四:基础组件》、《五:通用模版》

一、产品体验原则

要有 → 高效 → 易用 → 美观。要有是基础的体验,有总比没有的要好;然后是使用效率,效率得到提升后,再然后就是需要好用容易使用;最后才是要好看。

当然丑也是不行的,只不过他的重要性相对是排到最后。

  • 要有:有是最基础的体验,是产品的基石,没有功能就没有其他。
  • 高效:注重用户的长期使用效率。
  • 易用:短时间内是否更快的学习上手等。
  • 美观:B端产品是不应该优先考虑好看的,不管从用户价值还是商业价值。相对而言,美观的侧重点是简洁好用,它也是美观的范畴范围。

高效 & 易用的区别:

  • 水电煤缴费,每个月都用一次,由于间隔时间较长,可能就忘了上次怎么操作的。所以这时候的侧重点就是“容易学会并能够很快上手”,符合「别让我思考」的逻辑,宁愿多点一次也别让用户多想;
  • 商家工作台的预付款也符合此原理,商家使用间隔时间较长,但是一定要能够使用简单。所以我们采用的是分步骤页面,这时用户并不在乎多点击一次还是两次;
  • 商家工作台“出入库”功能,对于商家可能就是每天都用,用很多次,使用频率非常之高。这个时候就要主要“使用效率”,需要保证高效操作。所以表单设计时即使有再多内容也都是放一个页面填写,不要每次都要点击很多次次才能完成一个任务。

二、界面设计原则

对于企业类型的产品,完成目标任务永远是第一位的。

1)清晰

帮助人们更准确的理解和使用产品,文案、界面或操作等。不让用户进行深度思考,说人话,不要设置专业门槛。帮助用户在足够清晰的界面环境中完成任务,达成目标。

2)高效

让流程更顺畅,更智能化。优化功能逻辑,预判需求,让使用对象更加轻松快捷。提升效率:某人掌握产品的速度越快,使用该产品的效率就越高。设计时可采用以下3种方法:

  • 删除:删除不必要的因素,将页面的元素进行简化处理;
  • 隐藏:根据用户使用的场景,让某些元素进行隐藏,需要进行说明的时候再进行呈现;
  • 重组:即分类,可以将相近功能进行组织和分类,最常用的就是将不常用的功能分类在「更多」栏目中。

3)一致

“封闭高速路”哲学,判断本身就是成本。对于我们的心灵来说,两点之间,不一定是直线最短。没有路口的封闭高速路,可能更短。

李楠《iPhone 可有设计哲学》

  • 界面保持一致:少数服从多数,一致性可以减少用户思考的次数和时间,让用户的注意力更集中在当前的任务中,进行业务上的判断,即心流体验。
  • 表达方式一致:文案界面保持一致,不多多样化。从开始到结束,从 A 产品到 B 产品,从界面交互到文案内容。
  • 保留一定的空间:保留一定程度的空间,不要为了追求一致性而牺牲更加重要的东西。所以这是放在第三位。

细心打磨界面外观,让使用对象感到我们的产品值得他花费时间与精力去使用。美观是提升体验、激发愉悦的重要手段,但不将它的重要性排在其他任何设计原则之前。

三、常见设计定理

1)数量6原则

数量上一般采取的叫做7+2原则,就是说一般人的记忆容量约为7±2,即5~9之间。这边我将原则简化为6原则,比如按钮(含链接)文字、单选框复选框的标签文字、表单的标签文字、tag标签等。

2)席克定律

当选项增加时,用户下决定的时间也在增加。在人机交互界面中,选项越多意味着用户决策的时间也越长,用户越不知道选择什么。用户在某一场景对选项的反应时间取决于三个要素:

  • 前期的认知和观察;
  • 根据认知后,处理的时间;
  • 选项的数量。

3)几乎没人会改默认设置

  • 几乎没有用户更改默认设置的,只要专家级用户才会更改,正常用户只会使用产品提供的默认设置。
  • 产品设计时,高级设置等功能绝大多数用户不会去用。

4)习惯路径的设计,比少一次点击更重要

  • 《不要让我思考》书中提到,可以多点一次,每次都不需要思考,是基本的原则。所以少点、多点一次没那么重要,重要的是让用户形成习惯性路径思考。
  • 让用户明确内容和信息,知道自己要做什么,点击哪里,比单纯的减少点击次数更为重要。

 

本文由 @徐银高 原创发布于人人都是产品经理,未经作者许可,禁止转载。

题图来自Unsplash,基于CC0协议

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 7±2这里我没明白 你句的例子:按钮(含链接)文字、单选框复选框的标签文字、表单的标签文字、tag标签等。具体在设计中怎么使用呢?是只需要这几个吗?还是…?

    来自广东 回复