产品原型-3.易用性 - 交互设计黄金7原则
易用性 - 交互设计黄金7原则
![学新通 学新通](/static/whole/images/alert/data-load/load-15.gif)
① . 费茨定律
Fitts’ Law
•费茨定律可以简单理解为:任意一点移动到目标中心位置所需时间与该点到
目标的距离和大小有关,距离越大时间越长,目标越大时间越短。
•设计师只要知道游标与目标物距离D,及目标物与游标的垂
直宽度W与操作速率有关即可。而座落在萤幕边端的目标,
因为滑鼠移动至低时,会停在边界,可视为目标物的宽度无
限大,亦即操作速率最快。
![学新通 学新通](/static/whole/images/alert/data-load/load-15.gif)
实际案例
•按钮可点击的对象需要合理的尺寸大小,将用户越可能想要点击的按钮尽量放大目标越大,越容易点击或操作
![学新通 学新通](/static/whole/images/alert/data-load/load-15.gif)
② . 希克定律
Hick’s Law
•即为用户提供更简单的选择
•简单的说,一个人所面临的选择越多,做出选择所花的时间就越多,当面临选择的数量增加,做出决定的时间也会跟着增加
![学新通 学新通](/static/whole/images/alert/data-load/load-15.gif)
③ . 7±2 法则
•1956年乔治米勒提出的短时记忆,他发现人类头脑最好的状态能记忆含有7
(±2)项信息块,称之为“组块”,在记忆了 5-9 项信息后人类的头脑就
开始出错。
•不论信息多少,都可以通过结构化将简化为符合7±2法则的短信息组块,这
样当用户查看信息时可以更容易的将注意力放在他们所关心的信息上,能够
更快的找到他们要找的东西,更容易理解,更容易记忆。
•导航和选项卡尽量不超过9个
•如果导航和选项卡内容很多,可以用一个层级结构来
展示各段及其子段,并注意其深广度的平衡。
![学新通 学新通](/static/whole/images/alert/data-load/load-15.gif)
![学新通 学新通](/static/whole/images/alert/data-load/load-15.gif)
④ . 奥卡姆剃刀原理
Occam’s Razor
•这个原理称为“如无必要,勿增实体”,即“简单有效原理”,他说“切勿
浪费较多东西去做,用较少的东西,同样可以做好的事情。”
•雅虎UED 《交互设计原理之奥卡姆剃刀原理》
1) 只放置必要的东西
2) 减少点击次数
3) “外婆”规则
4) 减少段落的个数
5) 给予更少的选项
实际案例
•运用在产品设计中我们可以去掉不必要的干扰元素,
这样页面会比较纯粹、简洁。
•几个功能相同的设计,在都可用的情况下,选择视觉
干扰较少的设计,保证主要流程的设计即可
![学新通 学新通](/static/whole/images/alert/data-load/load-15.gif)
![学新通 学新通](/static/whole/images/alert/data-load/load-15.gif)
优化功能路径
⑤ . 泰斯勒原理
The Law Of Proximity
又称为“复杂性守恒定律”,根据复杂性守恒定律,每个应用程序都具有
其内在的、无法简化的复杂度。无论在产品开发环节还是在用户与产品的
交互环节,这一固有的复杂度都无法依照我们的意愿去除,只能设法调整
、平衡。
当我们在处理某个难题,可以尝试将固有的复杂性从一个地方移动到另外
一个地方。比如我们如果发现页面的功能是必须的,但当前的页面信息过
载,那么就需要将次要的功能收起或者转移
•如图,当我们不了解用户的兴趣爱好
从而无法推荐匹配的内容时,把这个问
题交给用户来处理,让用户主动选择他
们感兴趣的内容,以此给用户打上标签。
![学新通 学新通](/static/whole/images/alert/data-load/load-15.gif)
⑥ . 接近法则
The Law Of Proximity
接近法则是感知组织格式塔法的一部分,它指出彼此接近或接近的物体往
往被组合在一起。
换句话说,我们的大脑可以很容易地将物体彼此靠近地关联起来,比分开
很远的物体更好。这种聚类的发生是因为人类具有组织和组合事物的自然
倾向。 从另一个角度说,此相关的物体应当靠近,归组到一起。
•如图,我们会自然地将两种
深浅颜色的圆各归为一组
•另外一边则是,圆形和方形各
成一组
![学新通 学新通](/static/whole/images/alert/data-load/load-15.gif)
⑦ . 防错原则
防错原则认为大部分的意外都是由设计的疏忽,而不是人为操作疏忽。因此,在设计中要有必要的防错机制。在此,特别要注意在用户操作具有毁灭性效果的功能时要有提示,防止用户犯不可挽回的错误。
•有用的约束
•提供建议
•选择良好的默认值
•使用宽容格式
•提供帮助、引导和使用文档
实际案例
![学新通 学新通](/static/whole/images/alert/data-load/load-15.gif)
登录时,用户不填写完整信息,登录按钮置灰若有错误会直接提示用户”账号或密码错误“
![学新通 学新通](/static/whole/images/alert/data-load/load-15.gif)
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhihbjgi
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
excel图片置于文字下方的方法
PHP中文网 06-27 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
微信提示登录环境异常是什么意思原因
PHP中文网 04-09 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22 -
微信人名旁边有个图标有什么用
PHP中文网 03-11