客服热线:021-64338901

人机交互主流设计原则

本篇文章要讲的设计原则包含六类:

  • 1.尼尔森十大可用性原则
  • 2.三大原则定律
  • 3.Ant Design设计原则
  • 4.微信小程序设计原则
  • 5.iOS设计原则
  • 6.Material Dedign 设计原则

 

尼尔森十大可用性原则

尼尔森(Jakob Nielsen)是一位人机交互学博士,于1995年1月1日发表了「十大可用性原则」。十大可用性原则不仅适用于Web端,也适用于移动端。

熟练掌握十大可用性原则对于指导设计来说意义重大,可提升整个产品的可用性体验。

十大可用性原则分别为:状态可感知、贴近用户认知、操作可控、一致性、防错、识别好过回忆、灵活高效、美学和最简主义原则、容错、人性化帮助。

 

原则一 状态可感知

定义:告知系统的当前状态,让用户可清晰的感知所处的操作状态。

例如:淘宝注册,用户所处流程情况通过步骤条,可以清晰告知用户注册整体的注册流程状态。

例如:微信转发消息,发送成功时,通过底部的snakcbar提示告知用户转发成功。

 

 

则二 贴近用户认知

定义:尽量将生活中的逻辑和设计逻辑保持统一,这样就会更贴近用户的认知,用户上手成本也就更低。

例如:iOS7之前的iPhone解锁,滑动解锁,这和生活中的用户侧拉开门的场景一样。这个设计非常贴切日常生活认知,用户上手成本特别低。

例如:微信红包的设计,红包样式和现实中用户认知的红包基本一致,都是红色且外观相似。

用户要发红包时,先要塞钱进红包。其他人点击红包时,有一个拆开的按钮,用户拆开就会存入零钱,整个流程完全贴近用户的生活认知。

 

原则三 操作可控

定义:用户对于行为可预期可控制。对于用户的误操作,提供二次确认或者撤销的功能,这样可提高用户的操作可控性。

例如:移动端中对于毁灭性操作,大部分都做二次确认,这样是防止用户误操作带来的删除损失。用户不用因为操作带来的心里负担,从而提升操作可控性。

例如:微信聊天对话列表,用户删除列表,由于会清空消息记录,因此,通过对话框提示用户,这种做法可提升操作可控。

原则四 一致性

定义:遵循统一的产品设计规范/逻辑。这里的一致性也包含产品和跨平台产品之间的一致性。

产品间的一致性,包含视觉和交互的一致性,无论是文案、视觉风格、组件样式等都包含一致性。

例如:微信的卡片结构设计,列表的提示文案都是卡片里面,这个遵循Material design设计规范,ios中设计则提示语在卡片下方。

原则五 防错

定义:设置防错的机制,减少用户犯错。避免因为没有做防错措施,导致用户去犯错误。

例如:微信朋友圈发动态时,什么都没有输入时,发表按钮置灰。如果不置灰时,点击发送是空数据,是不允许发送的。所以防错设计可以减少用户出错概率。

原则六 识别好过回忆

定义:减少用户记忆负荷,尽量提供用户需要获取的信息。

例如:boss直聘,二次筛选时,所有填写是我筛选条件都展示出来,方便用户查看和修改。

原则七 灵活高效

定义:提供灵活的操作和高效的获取信息的操作。

例如:mac原生邮件客户端上,提供过滤方式:未读,点击未读即可筛选出所有未读的邮件,灵活高效。