人機工程學(xué)在交互設(shè)計中的運用

12 評論 14296 瀏覽 74 收藏 7 分鐘

大家在做設(shè)計的時候都會遵循一些交互規(guī)范或者常用的一些規(guī)律,但是經(jīng)常情況下,我們都沒有深入的研究為什么這樣定義這個數(shù)值,這個數(shù)值是否合理?如果沒有嚴(yán)格的理論支持,在設(shè)計中直接運用一些規(guī)律,就有被挑戰(zhàn)的可能。下面我談?wù)剮c我從人機工程角度分析的我們通常使用的一些數(shù)值。

合理的文本長度

我們隨便打開一個web網(wǎng)頁,或者拿過一份報紙,數(shù)一數(shù)會發(fā)現(xiàn)大多都是在40個漢字左右。這是因為每行文字過長會讓用戶閱讀難度增大,致使用戶扭動脖子頻繁,造成疲勞;再者從上一行文字移動到下一行也容易串行,干擾閱讀效率。

正常文字閱讀

所以正常情況下,從規(guī)律總結(jié)上得出:在寬度上一般控制在450px-700px為宜。參考網(wǎng)頁字號大小,漢字一般在30-40最佳;英文字母一般80-100最佳。

這點大家可能都知道,但是為什么這樣的長度最佳?我經(jīng)過研究人際工程學(xué)發(fā)現(xiàn):人在集中注意力的時候最佳視角是30度,按照平均人眼到視屏的距離是40cm,算出來寬度約470px,按照正常字號14號字,可以顯示33字。

網(wǎng)頁及客戶端toast、tips文案長度

根據(jù)數(shù)據(jù)研究發(fā)現(xiàn),人在面對有速度的內(nèi)容時候,集中注意力的視角會變?yōu)樵械?/2。所以針對于tips和toast文案,一般控制在普通的閱讀內(nèi)容的一半,即15-20字(225px-350px)之間。而且僅顯示一行的情況下,用戶還需要一定的定位時間,綜合以上,把字?jǐn)?shù)限制再20字以內(nèi)上非常合理的區(qū)間。

合理的toast時間

中國人默讀的速度是400-500字一分鐘,均1s鐘6.5-8.5,我們按照7字/s計算。根據(jù)數(shù)據(jù)最終規(guī)定如下:a.1-5字顯示1s消失;b.6-10字顯示1.5s消失;c.11-15字,帶關(guān)閉按鈕,顯示2s消失;d.15-20字,帶關(guān)閉按鈕,顯示3s消失。

關(guān)于消失機制:1.默認的時間后自動消失;2.帶關(guān)閉按鈕(因為人的耐心時間是3s,但是字?jǐn)?shù)略多的情況下,對于閱讀速度快的人有足夠的時間去點擊關(guān)閉提示,不給出關(guān)閉按鈕,會影響一部分人的體驗。)。

合理的加載時間

對于人的反應(yīng)時間:經(jīng)過調(diào)查發(fā)現(xiàn),正常人的反應(yīng)時間是0.15-0.4s(“飛人”劉翔的反應(yīng)時間為0.139s)。據(jù)說劉國梁的反應(yīng)時間比其他運動員要快0.01s,所以才能取得好成績。

在設(shè)計的時候發(fā)現(xiàn),大多的產(chǎn)品,尤其是web的加載時長很多情況下,基本可以在1s內(nèi)完成。在baidu期間的項目中對于舊版的產(chǎn)品loading的優(yōu)化中發(fā)現(xiàn)有的情況下,不計算時間,直接出現(xiàn)加載動畫,這種情況造成的影響是:對于1s內(nèi)的加載,用戶反應(yīng)時間是0.4s,其實加載loading的顯示時長相當(dāng)于是0.6s,時間非常短暫,用戶需要去識別這種沒有冗余的信息,增加用戶處理信息量,給用戶造成了系統(tǒng)卡頓感覺。

所以在進行加載loading的規(guī)范如下圖:

合理的對比顏色

視覺曲線圖:

亮度越高的時候,視覺識別難度更大,眼睛更容易疲勞。

人眼的視覺曲線是指對于不同波長(不同顏色)的光,主觀亮度的相對值曲線。如上圖,右邊的曲線稱為明視覺曲線,是在明亮的環(huán)境下(5尼特)的光譜響應(yīng)??梢钥闯觯搜圩铎`敏的點是在555毫微米的黃綠色光。對于475毫微米的藍色光和650毫微米的橙紅色光,需要10倍的強度才能引起與這黃綠色光相同的亮度感覺,而對于685毫微米的紅色光,靈敏度就更下降到1%了。如上圖的暗視覺曲線,是在0.001尼特以下的亮度下測定的??梢钥闯?,峰值已經(jīng)轉(zhuǎn)移到510毫微米的綠色光,相應(yīng)10%靈敏度的點分別為420毫微米和585毫微米。這是桿狀細胞在起作用。

那對于設(shè)計中的顏色,白色是白頻光,全放射光對人眼的刺激最大,所以可以看到很多印刷品采用淡黃色和米白色的紙張。而針對于電腦本身就帶有發(fā)光,所以同樣的顏色對于用戶的閱讀難度已經(jīng)增大。另外有眼睛表明,同樣的文字,在電腦上的閱讀效率僅僅能達到紙張上的80%不到。因此為了網(wǎng)頁的瀏覽速度和舒適度,越來越多的網(wǎng)頁設(shè)計采用了淡灰色/淡藍色/淡綠色等等。

本文由 @xueyan 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 大大,有什么人機工程學(xué)的數(shù)據(jù)適合產(chǎn)品看的嗎

    來自廣東 回復(fù)
  2. 點贊支持??

    回復(fù)
    1. 謝謝支持

      來自北京 回復(fù)
  3. 深度好文+1

    來自廣東 回復(fù)
    1. 謝謝支持

      來自北京 回復(fù)
  4. 深度好文

    回復(fù)
    1. 感謝鼓勵,后期會不斷更新 ??

      來自北京 回復(fù)
  5. 理工科的讀來很有感覺,數(shù)字背后的真相!

    來自江蘇 回復(fù)
    1. 嗯,理工科工業(yè)設(shè)計出身

      回復(fù)
  6. 學(xué)習(xí)了~感謝~

    來自上海 回復(fù)
  7. 謝謝分享,學(xué)習(xí)了!

    來自上海 回復(fù)
    1. 謝謝支持

      來自北京 回復(fù)