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

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


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

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

合理的文本长度

我们随便打开一个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

相关推荐

  • 聊聊Axure RP 8 的动态面板(文末赠书)

    点击上方“蓝字”关注本公众号《Axure RP 8入门手册》本书的写作初衷是面向初学者,由浅至深地引导读者学习Axure RP 8.0的使用方法,从而实现最终的学习目标。本书不但适合初学者学习,在知识结构与案例的安排上,也非常适合工作中的查阅与参考。初学者只需要按照从前至后的顺序进行学习,就能够迅速、全面地掌握原型开发技能。具备一定原型开发基础的读者,也能够在本书的大量案例之中,获得各种实战的参考。书中的案例均为网站或App中采用的一些...

    2018-04-09
  • 终极神器!Sketch 一键转成 PSD 格式!

    曾经有很多人问图翼君Sketch转PSD怎么弄?今天就给大家分享一神器,大招一放So easy!工具下载地址关注本公众号回复“39”支持PSD、XCF、Sketch、Any格式使用方法:1、打开神器,选择Open Frome Computer 打开要转换的Sketch文件2、选择你的Sketch文件,工作台会显示你的文件3、选择右上角File  -  选择Save as PSD, 保存成PSD文件。4、保存后,浏览器会自动下载转好的PS...

    2018-04-09
  • 如何发现交互设计中的思维盲区

    在一个项目中,交互设计起着承上启下的作用。开发人员根据交互文档搭建初步的程序框架,视觉设计师基于交互设计进行精细的界面设计,之后再交付开发。交互设计方案的改动涉及多方的调整,虽然不及产品需求变更那样…

    2015-08-26
  • [译]UX设计之按钮使用实例、类型和状态

    按钮是一个普通的、日常交互中都可能碰到的基本元素。但对创建一个流畅的交互体验过程来讲,按钮则是一个至关重要的元素,因此,投入一定精力到该元素的设计上是非常有意义的。另外,我们也为大家梳理出元素的基本…

    2016-06-30
  • 基于Axure的移动端APP产品设计规范

    文章结构:① 全局元素与控件设计规范 ② 全局注释规范 ③ 一些基本的产品设计原则一、全局控件元素设计规范我们经常会看到很多产品都有一个标志颜色,来增加产品的辨识度,例如淘宝的橙色,小黄车的黄色等。在产品设计过程中,为了保持视觉的统一性,通常会有一套配色方案,配色方案确定了产品的主色调和辅色调,所有的控件和元素都应用这一套配色来设计。除了配色还有,还有字体元素,按钮元素,以及其他控件元素等,产品设计开始就应该定义好这些基本规范,不仅能保...

    2018-03-04
  • 由爱奇艺视频弹幕引发的思考

    弹幕一词最早用于军事领域,指代对某一区域进行密集火力攻击。2006年,日本视频分享网站Niconico首次尝试在视频画面上实时显示用户评论。由于评论在屏幕上快速飘过的形态类似飞行中的子弹,因此它被形象地称为“弹幕”。
    被称为“A站”的AcFun最早在2007年上线,是国内首个推出弹幕视频的网站。与Niconico相似,早期的AcFun同样聚焦动漫和游戏内容。2009年,哔哩哔哩(Bilibili,又被称为“B站”,最初站名为Mikufans)成立,其目标是为用户提供一个稳定的弹幕视频分享站点。

    2017-06-04
  • 深入智能商业用户体验 —— 艺土咨询(ETU)

    4月10日下午,本协会会长王日华和副秘书长王索飞等一行前往位于长宁区凯旋路166号上的本协会理事单位上海艺土界面设计有限公司走访,该公司董事长林钦、资深用户体验设计师梁雯琦热情接待了王会长一行。在该公司的会议室,林总首先用PPT形式向王会长一行简单介绍了艺土公司的发展情况。她说,艺土(ETU)自2004年成立以来,深耕用户体验行业14载,通过与160多个知名企业进行760多个项目的深度合作探讨,帮助企业通过洞察市场价值、理解用户价值需求...

    2018-04-12
  • 客户体验,体验的是什么?

    近年来,“客户体验”成了一个很常用的词,但就像“创新”和“设计”一样,你实际上很难给它找到一个众所公认的明确定义,尽管许多企业都将改进客户体验视为一项差异化的竞争优势。可是,如果我们连某种东西的定义都说不清楚,又如何谈得上对其加以改进呢?

    2017-05-29
  • 用好的交互设计来管理复杂-“个人中心”

    “复杂是世界的一部分,但它不应该令人困惑,好的设计能够帮助我们驯服复杂,不是让事物变得简单(如果复杂是符合需求的),而是去管理复杂”。复杂是可以被管理的,但要做到这一点,我们都必须做好自己该做的那部分工作。

    2017-05-19
  • 从“注意力”的角度,谈交互设计如何避免入坑

    前段时间UIMAX团队在做“新浪新闻客户端用户画像项目”时,用研人员访谈用户的过程中,发现一个这样的问题:多数用户完全没注意到过页面上的“长按可排序或删除”这段文字,反馈“不知道可以对新闻频道进行排序” 设计师…

    2017-06-05