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

合理的文本長(zhǎng)度

我們隨便打開(kāi)一個(gè)web網(wǎng)頁(yè)，或者拿過(guò)一份報(bào)紙，數(shù)一數(shù)會(huì)發(fā)現(xiàn)大多都是在40個(gè)漢字左右。這是因?yàn)槊啃形淖诌^(guò)長(zhǎng)會(huì)讓用戶閱讀難度增大，致使用戶扭動(dòng)脖子頻繁，造成疲勞；再者從上一行文字移動(dòng)到下一行也容易串行，干擾閱讀效率。

正常文字閱讀

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

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

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

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

合理的toast時(shí)間

中國(guó)人默讀的速度是400-500字一分鐘，均1s鐘6.5-8.5，我們按照7字/s計(jì)算。根據(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)于消失機(jī)制：1.默認(rèn)的時(shí)間后自動(dòng)消失；2.帶關(guān)閉按鈕（因?yàn)槿说哪托臅r(shí)間是3s，但是字?jǐn)?shù)略多的情況下，對(duì)于閱讀速度快的人有足夠的時(shí)間去點(diǎn)擊關(guān)閉提示，不給出關(guān)閉按鈕，會(huì)影響一部分人的體驗(yàn)。）。

合理的加載時(shí)間

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

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

所以在進(jìn)行加載loading的規(guī)范如下圖：

合理的對(duì)比顏色

視覺(jué)曲線圖：

亮度越高的時(shí)候，視覺(jué)識(shí)別難度更大，眼睛更容易疲勞。

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

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

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