当前位置:主页 > 设计理论 >

人机交互主流设计原则【干货】

  • 2019-08-08 17:46
  • 来源/作者:吴轶/吴轶
  • 己被围观 次

本篇文章要讲的设计原则包含六类: 1.尼尔森十大可用性原则 2.三大原则定律 3.Ant Design设计原则 4.微信小程序设计原则 5.iOS设计原则 6.Material Dedign 设计原则

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

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

 

尼尔森十大可用性原则

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

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

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

 

原则一 状态可感知

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

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

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

 

原则二 贴近用户认知

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

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

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

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

原则三 操作可控

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

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

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

例如:gmail邮箱,用户发送邮件成功后,可点击撤回操作。

原则四 一致性

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

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

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

 

原则五 防错

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

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

原则六 识别好过回忆

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

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

例如:三星手机相册,当删除相册时,对话框会把选择删除的数量标题上展示,提示用户会删除多少张,减少用户回忆。

原则七 灵活高效

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

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

例如:短信提供批量删除和全选删除,这也是灵活高效的一个常见范例。

原则八 美学和最简主义原则

定义:保留产品最核心的信息,如果不是视觉信息优先级不是普适需求,要尽一切可能避免去影响产品的简洁和美观。

qq空间和微信朋友圈的feed流形成比较明显的对比。相比于qq空间,微信朋友圈更符合美学和最简主义原则。

原则九 容错

定义:用户在使用产品过程中出现了问题,及时准确的告知用户出现问题的原因。

例如:淘宝注册时,用户输入手机号时,光标离开输入框时,进行较验,如果手机格式错误会出现原位提示用户手机格式不正确。

例如:邮件发送失败时,会提示用户邮件已保存至发件箱。

原则十 人性化帮助

定义:在用户可能需要的时候,提供必要的帮助说明。

例如:在淘宝注册时,用户注册失败影响注册成功率,提供帮助入口,提高用户注册率。

三大原则定律

三大原则定律包括:格式塔原则、菲茨定律和剃刀法则。



(责任编辑:HX)

*PSjia.COM 倾力出品,转载请注明来自PS家园网(www.psjia.com)

分享到:

加群交流
  • 设计理论
  • PS快捷键大全
  • 免费PSD素材
  • 常见问题解答

更多精彩内容

  • 如何更好地使用栅格系统 如何更好地使用栅格系统
  • 人机交互主流设计原则【 人机交互主流设计原则【
  • 社交互动创新:从点赞到 社交互动创新:从点赞到
  • 2019年流行的网页设计趋势 2019年流行的网页设计趋势