人机工程学在交互设计中的运用

大家在做设计的时候都会遵循一些交互规范或者常用的一些规律,但是经常情况下,我们都没有深入的研究为什么这样定义这个数值,这个数值是否合理?如果没有严格的理论支持,在设计中直接运用一些规律,就有被挑战的可能。下面我谈谈几点我从人机工程角度分析的我们通常使用的一些数值。


大家在做设计的时候都会遵循一些交互规范或者常用的一些规律,但是经常情况下,我们都没有深入的研究为什么这样定义这个数值,这个数值是否合理?如果没有严格的理论支持,在设计中直接运用一些规律,就有被挑战的可能。下面我谈谈几点我从人机工程角度分析的我们通常使用的一些数值。

人机工程学在交互设计中的运用

合理的文本长度

我们随便打开一个web网页,或者拿过一份报纸,数一数会发现大多都是在40个汉字左右。这是因为每行文字过长会让用户阅读难度增大,致使用户扭动脖子频繁,造成疲劳;再者从上一行文字移动到下一行也容易串行,干扰阅读效率。

正常文字阅读

所以正常情况下,从规律总结上得出:在宽度上一般控制在450px-700px为宜。参考网页字号大小,汉字一般在30-40最佳;英文字母一般80-100最佳。

这点大家可能都知道,但是为什么这样的长度最佳?我经过研究人际工程学发现:人在集中注意力的时候最佳视角是30度,按照平均人眼到视屏的距离是40cm,算出来宽度约470px,按照正常字号14号字,可以显示33字。

人机工程学在交互设计中的运用

网页及客户端toast、tips文案长度

根据数据研究发现,人在面对有速度的内容时候,集中注意力的视角会变为原有的1/2。所以针对于tips和toast文案,一般控制在普通的阅读内容的一半,即15-20字(225px-350px)之间。而且仅显示一行的情况下,用户还需要一定的定位时间,综合以上,把字数限制再20字以内上非常合理的区间。

合理的toast时间

中国人默读的速度是400-500字一分钟,均1s钟6.5-8.5,我们按照7字/s计算。根据数据最终规定如下:a.1-5字显示1s消失;b.6-10字显示1.5s消失;c.11-15字,带关闭按钮,显示2s消失;d.15-20字,带关闭按钮,显示3s消失。

关于消失机制:1.默认的时间后自动消失;2.带关闭按钮(因为人的耐心时间是3s,但是字数略多的情况下,对于阅读速度快的人有足够的时间去点击关闭提示,不给出关闭按钮,会影响一部分人的体验。)。

人机工程学在交互设计中的运用

合理的加载时间

对于人的反应时间:经过调查发现,正常人的反应时间是0.15-0.4s(“飞人”刘翔的反应时间为0.139s)。据说刘国梁的反应时间比其他运动员要快0.01s,所以才能取得好成绩。

在设计的时候发现,大多的产品,尤其是web的加载时长很多情况下,基本可以在1s内完成。在baidu期间的项目中对于旧版的产品loading的优化中发现有的情况下,不计算时间,直接出现加载动画,这种情况造成的影响是:对于1s内的加载,用户反应时间是0.4s,其实加载loading的显示时长相当于是0.6s,时间非常短暂,用户需要去识别这种没有冗余的信息,增加用户处理信息量,给用户造成了系统卡顿感觉。

所以在进行加载loading的规范如下图:

人机工程学在交互设计中的运用

合理的对比颜色

视觉曲线图:

亮度越高的时候,视觉识别难度更大,眼睛更容易疲劳。

人机工程学在交互设计中的运用

人眼的视觉曲线是指对于不同波长(不同颜色)的光,主观亮度的相对值曲线。如上图,右边的曲线称为明视觉曲线,是在明亮的环境下(5尼特)的光谱响应。可以看出,人眼最灵敏的点是在555毫微米的黄绿色光。对于475毫微米的蓝色光和650毫微米的橙红色光,需要10倍的强度才能引起与这黄绿色光相同的亮度感觉,而对于685毫微米的红色光,灵敏度就更下降到1%了。如上图的暗视觉曲线,是在0.001尼特以下的亮度下测定的。可以看出,峰值已经转移到510毫微米的绿色光,相应10%灵敏度的点分别为420毫微米和585毫微米。这是杆状细胞在起作用。

那对于设计中的颜色,白色是白频光,全放射光对人眼的刺激最大,所以可以看到很多印刷品采用淡黄色和米白色的纸张。而针对于电脑本身就带有发光,所以同样的颜色对于用户的阅读难度已经增大。另外有眼睛表明,同样的文字,在电脑上的阅读效率仅仅能达到纸张上的80%不到。因此为了网页的浏览速度和舒适度,越来越多的网页设计采用了淡灰色/淡蓝色/淡绿色等等。

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

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/22819/

(0)
CatherineCatherine
上一篇 2017-05-03 02:34
下一篇 2017-05-03 04:25

相关推荐

  • 2017年UX设计的3大预测

    本文作者总结了他在2016年对UX设计的预测,且又对2017年的UX设计进行了预测。

    2017-04-29
  • 为什么用户会无视网站首页的轮播图?

    数据显示:在三百万个网站中只有大约1%的网站首页上的轮播图会被点击。一个在首页上如此之醒目的元素竟然只有这么低的点击率……到底怎么回事?个中原因相比会让你大吃一惊。

    2017-05-19
  • 不扁平的设计:我们的世界没有一处是光滑和平整的

    “当我们在思考一个问题的时候,我们需要开放模式;但一旦我们找到一个解决方案,我们必须切换到闭合模式去实现它”

    2017-05-25
  • UE干货:Material Design App 实战经验分享

    Material Design(以下简称MD)是Google在Android 5.0发布后主推的ue设计规范,旨在解决Android平台设计风格不统一的问题,其核心理念“材质化”是基于拟物与扁平之间的设计,强调真实世界元素的物理规律与空间关系,既避免了拟物设计的低效问题,又解决了太“扁平”带来的交互层级困惑,个人很认同这种设计理念。本次我们在进行一款孵化型产品-明星App的设计时,也采用了这种设计理念,与大家分享一下实战经验(由于是设计讨论,本次关于这款产品的来龙去脉就先不细表咯)。

    2017-06-05
  • 视觉设计,是优秀产品不可或缺的一部分

    视觉设计的重要性跟这个世界看脸一样,不言而明。译者注:Huggies是一个婴儿尿不湿的品牌。译者注:有时候设计师会先收集一些图片文字之类的东西弄出一个合集,作为设计的参考和灵感来源,这类东西叫做moodboard。具体介绍可参考:https://en.wikipedia.org/wiki/Mood_board

    2017-05-07
  • APP切图命名规范:介绍一种通用的命名规则

    今天菜心要分享的内容是关于切图命名的规范,由于最近正在总结这一部分内容,所以拿出来和大家一起分享探讨一下。组件_类别_功能_状态@2x.png模块_类别_功能_状态@2x.png

    2017-05-10
  • 订阅渠道

    一些第三方媒体渠道大家需要的可以订阅我是UE网最新文章,订阅阅读交互设计教程文章 微博:http://t.im/iamuewb 微信:http://t.im/nw5y 网易云课堂:http://t.im/iamue 网易云阅读的:http://t.im/iamue1 或者:ht…

    交互设计 2015-06-30
  • 交互设计的闭环体验

    交互闭环体验的定义交互设计的闭环体验体现在产品的每个功能的细节上,产品可以看作是一整套交互的集合。一般只涉及一种使用场景的交互,只体现为一种功能,且只完成一件事。比如:修改设置、上传文件、设定闹钟、更改密码、打开家用电器、登录、设置状态消息、收藏等。交互设计的闭环体验主要由4方面构成:触发控件:交互闭环的起始点设计规则:交互闭环所遵循的交互方式信息反馈:用户与产品的互动过程关闭(循环)模式:交互闭环过程的结束(循环)模式交互闭环体验的定...

    2018-02-14
  • 【UXRen原创】一款金融股单APP的设计之路

    作者: 股单小分队 @ 国信证券的产品设计中心   一、交互设计的那些事 许多朋友问我:你大学学的专业不是工业设计吗?都是做产品造型的呀,现在怎么跑去证券公司做交互了? 相信许多做交互设计的朋友和都会遇到这样…

    交互专题 2017-08-07
  • 案例分析|一次消灭产品文档的实践探索

    作者:Dougee全文共 2120 字 5 图,阅读需要 5 分钟———— / BEGIN / ————在刚入职眼前这一份工作的时候,CTO就对产品组提出了新的要求:以后不用再另外输出产品文档,直接在原型上标注就可以了,而且以后要输出动态原型。先介绍一下我本人的情况:产品经验2年,对于Axure的交互设计有一定实践经验,但从来没有想过把动态的原型与产品说明结合来表达需求。对于CTO的决定,我想了一下,大概是出于以下三点原因:太多文件数量...

    2018-03-27