UI设计:界面布局层次分析

界面布局层次分析

尼尔森(Jakob Nielsen)是一位人机交互学博士,于1995年1月1日发表了「十大可用性准绳」。尼尔森的十大可用性准绳是尼尔森博士剖析了两百多个可用性问题而提炼出的十项通用型准绳。它是产品设计与用户体验设计的重要参考规范,值得深化研讨与运用。

界面布局层次分析

 

 

 

 

 

 

 

 

 

 

 

 

 

 

一、系统状态可见性
系统应该在恰当的时间内做出恰当的反应,告知用户当前的系统状态

  1. 通知用户处在系统的什么位置
    用户常常需求晓得本人处在系统的什么位置,特别关于新手用户来说,需求提供必要的信息,否则容易产生迷失。 

    例如:在云课堂的课程观看页面,提供明晰的课程目录,返回按钮,章节信息,协助用户可以快速判别本人处于何处,能够去向哪里。

  2. 让用户晓得本人在做什么
    用户需求晓得本人的操作能否被系统感知,所以,在用户操作后,应当第一时间提供反应通知用户这项操作被用户承受了。 

    例如:在云音乐播放界面,用户滑动唱片,立刻触发东校,通知用户这个手势是有用的,同时是能够用来切换单曲。

  3. 让用户晓得系统在做什么
    当系统在运转中时,尽可能向用户提供系统运转状态的信息。 

    例如:在云课堂手机端,课程目录中提供了下载状态的标识,通知用户系统正在下载中,下载完成了大约几。

  4. 让用户晓得系统 做了什么
    让用户晓得操作的结果,从 而停止下一步 操作,需 求尽 可能给予 相关的信 息反 应,即使是 在没有构造 的时分 也 是一样。
    例如:Google搜索无论 能否能找 到结果都会给用户一个反应。
  5. 应用多种反应
    反应信息能 够经过文字 ,动效,声 音,震动 ,界面 元素 的变化 等多 种方 式给 用户 以提示。
    例如:在易信中拨打免费电话,经过衔接过程中,除了有动画提示外,还有语 音提 示,消弭了 用户在拨 号过程中 等候的焦虑。
  6. 对系统响应延迟应停止反应
    当系统响应小于1秒时不会 打断用户考虑,不需求 特别反应,响应时间越长用户称心度越低,10秒时用户留意力 上限,响应时间较长时,给与必要的反应。
    例如:刷新提 示,收件提 示,下载提示。
    相关可用性 问题:
    短少必要的反应,没有明晰的系统状态
    反应不耐久, 用户没有足够的时间留意到或了解
    反应没有立 刻提示
    反应不容易 看到,或不容易了解
    提供了不用 要的反应,运用户慢下来
    让用户误解 反应

二、系统与用户理 想世界的匹配
产品设计应该运用用 户的言语,运用用户熟 习的词,句,概念,还应该 契合真实世 界中的运用习气)

  1. 保证运用用户言语
    保证运用言语是用户能了 解和联 想的,并不是只 能运用群众 化的 言语,而是目的用 户熟习的言 语。
    例如:针对儿童开发的APP更多需 求言语,动画来作为交互,针对专 业的统计人员开发的工具软件,则应运用专用的统计术语,而面向群众的网站,运用了英文,则有可能招致用户看不懂。
  2. 契合理想世界中的  运用习气
    将产品的运用习气和理想中产品的运用习气联络起来。
    例如:回收站,购物车在理想生活中 的运用习气分歧,用户可 以直接产 生联想
  3. 运用理想世界的隐喻
    从理想世界中自创的设计元素能够显 著的降低 用户的 认知   和学习艰难,并增加他  们的运用兴味
    例如:云音乐运用 了黑胶唱片的隐喻,不只能让用户快速学会单曲切换,而且还增加了音乐喜好者的好感度
  4. 运用手势操作联想
    运用的操作手势,应当是用户自然可以联想到的,不要随便定义和发明用户难以联想到的手势。

    相关可用性问题
    运用了用户不理解的言语
    系统的言语是以系统为中心,而不是用户为中心
    任务流程和用户真实运用的流程不分歧
    系统构造不契合用户对真实世界的了解
    系统运用的暗喻或比较办法不容易了解

三、用户的控制和自在
用户经常会在运用功用的时分发作误操作,这时需求一个十分明白的“紧急出口”来协助他们从当时的情境中恢复过来,需求支持取消和重做

  1. 用户能够自在导航
    明晰和便利的导航方式,运用户能够自在的控制返回和去到的中央
  2. 用户在觉得到迷失或者困惑时,需求可以快速撤销的过程,用户运用 系统过 程,是一个  试错的过 程,他们通常会试一试新功用,假如发现错误就矫正错误,试用新的办法,直到胜利为止
  3. 不可逆转的操作需求正告
    重要的不可逆转的操作需求给用户明显的提示,否则将对用户产生严重的影响

在不可逆转的行动之前没有提供足够的正告
没有在恰当的机遇提供取消的功用
取消功用不明显或者是很难找到
不支持撤销的功用

四、分歧性与规范化
同一产品内,产品的信息架构导航,功用称号内容,信息的视觉呈现,操作行为交互方式等方面
坚持分歧,使界面看上去熟习并且易于了解,运用用户能够应用已有的学问来执行新的操作,并
能够预期操作结果,产品与通用的业界规范分歧。

  1. 产品内部坚持分歧
    通用的信息应该运用分歧的用词,外观和规划,能够协助用户快速学习,记忆和熟习产品的功用。
    例如:IOS系统采用同样的颜色来表示可点击元素
  2. 不同版本之间有持续性
    产品的不同版本之间,主要的功用,设计元素等,尽量有一定的持续性,防止用户产生困惑。
    例如:IOS系统的几个版本之间都有一定的创新,但依然保存了许多原有的设计标准
  3. 与业内产品坚持分歧
    用户在运用其他产品,特别群众型产品时曾经构成了一定的习气,不要随便违背业界标准
    例如:当用户习气大多数产品的操作手势时,尽量不要去给手势定义新的用处
    相关可用性问题
    界面元素外观,规划,分组不分歧
    界面元素的命名不分歧
    系统反应信息格式不分歧
    系统提供不一样的办法来操作类似的对象
    表达含义不分歧,例如在不同的中央红色代表不同的意义
    设计规范和通用规范不分歧

五、避免错误
在用户选择动作发作之前,就要避免用户容易混杂或者错误的选择

  1. 在执行风险操作前请用户确认
    在用户执行比拟风险的操作时,让用户确认,防止用户发作比拟严重的错误
    例如:网易163邮箱在发送邮箱中,会检查用户的邮件地址,邮件正文,提早辨认可能发作的错误,并让用户确认。
  2. 应用明晰的提示避免错误
    提供明晰的提示,也能避免用户犯错

  3. 应用用户的联想避免错误
    应用颜色,动效等提供警示信息
    例如:微信的退出按钮用红色做出警示,让用户直接感知可能发作错误
    相关可用性问题
    输入信息时,没有通知用户的格式
    短少非言语暗示
    界面上不同的物体太类似
    没有对可能产生的严重结果的操作停止提示和确认

六、再认而不是回想
尽量减少用户需求记忆的事情和行动,提供可选项让用户再认信息

  1. 将选择对象可视化
    将选择对象,动作,选项可视化,使得用户一看就懂
    例如:Excel提供可视化图形导游,使得用户十分容易停止选择
  2. 丰厚的记忆线索
    笼统图形+文字,提供更多信息,协助用户确认
    例如:笼统的图像,配上名字,防止用户需求回想才干想起图形所代表的含义,电商订单确认页面,需求提供完好信息,在修正个人材料页面保存原有记载,在原有记载上修正而不是重新输入。
  3. 运用通用的的
    经过运用通用的命令,减少用户的记忆担负
    例如:运用通用的快捷方式如复制粘贴,通用的操作手势等。
  4. 更多让用户选择而不是输入
    产品应该给用户提供选项,让用户从当选择或直接停止编辑
    例如:菜单就是最经典的设计
    相关可用性问题
    系统的运用过于复杂,用户不得不记忆复杂的命令
    界面提供的信息不及时,用户不得不本人从系统的另一局部找到相关的信息
    图像或符号难以了解,以至误导用户
    菜单,选择或者链接有太多的层次。

七、灵敏高效的运用
系统需求同时适用于经历丰厚和缺乏经历的用户(为用户提供便利,好的软件不但思索到新用户的需求,也要思索到纯熟用户的需求。不但应对新用户来说简单易学,还要对纯熟用户来说快捷,高效,特别是能够便当地运用频率较高的功用)

  1. 提供快捷键
    为频繁操作的功用设置快捷键
  2. 允许用户运用重新操作
    对用户频繁运用的局部,提供反复运用的功用或者模版

  3. 提供系统默许值
    经过提供系统默许值,而减少用户多余的操作
    例如:云课堂应用默许勾选常用的选项,省去用户反复的操作
    相关可用性问题
    系统短少自动化,没有自动的执行下面的任务
    系统没有提供给有的默许值
    默许值不正确
    运用系统需求太多的控制动作
    系统没有提供捷径

八、美观,简约的设计
界面中不应该包含无关紧要的信息,设计需求简约明了,不要包括不相关或者不需求的内容,每个多余的信息都会分散用户对有用或者相关信息的留意力

  1. 防止界面元素过于杂乱
    同时呈现过多元素,动效
    例如:运用通用的快捷方式,通用的操作手势等
  2. 对重点信息突出准备
    用户的精神是有限的,应该坚持信息的精炼,又突出有弱化。
    相关可用性问题
    用户界面上的元素太大或太小
    元素的颜色,外形或者文字不恰当,不容易辨认
    界面元素的挪动太快,太慢或不容易察觉
    界面过于拥堵,界面元素密度散布不平均
    不同的元素太类似,按键或者链接看上去像普通的文字。

九、协助用户认知,判别和修复错误
用简单明白的言语解释错误信息,准确指出问题的缘由并且提出建立性的处理计划

  1. 惹起用户留意
    当错误发作时,提示信息一定要直观醒目,文字需求简单易懂。
    例如:IOS断网形式下的提示
  2. 提供建立性倡议
    当用户遇到错误时,尽可能提供有本质意义的信息,比方问题是什么,如何从错误中恢复等等。
    例如:云课堂搜索输入错误时,给予的用户的倡议
  3. 自动纠错
    当系统可以协助用户自动甄别错误,并及时停止修正,将给用户带来极大的便利。
    例如:Google搜索自动纠正错误单词书写
    相关可用性问题
    用用户不容易了解的言语停止提示,如404错误
    没有给出有效的倡议
    错误信息运用户感到迷惑
    错误信息用词不当

十、协助文档及运用手册
提供协助信息,协助信息应当易于查找,聚焦于用户的运用任务,列出运用步骤,并且信息量不能过大

  1. 便当用户查找
    协助文档入口容易找到,协助要信息便当用户查找
  2. 便于用户了解
    防止运用专业术语,尽量运用图片或者图表,除了文字外还能够运用表示图,操作步骤等,便当用户应用。例如:协助文档给出的表示图
  3. 便于用户应用
    在操作的同时能看见协助的信息 

友情链接:https://demo.drivingwarm.com/index.php/industrynews/

参考链接:jihttps://www.jianshu.com/p/83970de40557https://www.jianshu.com/p/c5e60419e82canshu.com/p/41bc3410bed1