瞬間的規(guī)劃 II

好的規(guī)劃絕不是單純的因?yàn)樘觳诺臉?gòu)思或者創(chuàng)意爆發(fā)的一瞬間而發(fā)生的，只要規(guī)劃師在“繼續(xù)改進(jìn)”的迭代方法中才干到達(dá)好的效果，你必須經(jīng)過不斷的“質(zhì)疑自己”，在不同的規(guī)劃種找到缺陷，并尋求 更好的計(jì)劃來改進(jìn)它。Bill Scott在他的《Web界面規(guī)劃》里提到了關(guān)于富交互規(guī)劃的六個(gè)準(zhǔn)則告知咱們?cè)趺窗l(fā)現(xiàn)并找到處理的方法，我遵循這些規(guī)劃準(zhǔn)則，經(jīng)過實(shí)例和數(shù)據(jù)來和咱們一起剖析一些有趣的瞬間，輔導(dǎo)咱們的規(guī)劃。

一、直接操縱準(zhǔn)則

直接操縱準(zhǔn)則就像Alan Cooper在《ABOUT FACE 2.0》中陳說的那樣”：“在哪里輸入，就在哪里輸出“。例如修正內(nèi)容的操作完全能夠不用從頭打開頁面，而直接在當(dāng)時(shí)頁面進(jìn)行就能夠了。

flickr是用到即時(shí)修正相片信息的網(wǎng)站。這種方法更開門見山，用戶不用切換當(dāng)時(shí)頁面就能完結(jié)。他們將更樂意為他們相片改名字，那么也就意味著會(huì)有更多與相片有關(guān)的元數(shù)據(jù)被記載下來，方便其他用戶更好的搜索和閱讀。咱們先剖析一下在這個(gè)操作的交互瞬間。

每個(gè)交互元素在不同觸發(fā)事 件下所表現(xiàn)的呼應(yīng)狀況。其中橘黃色區(qū)域是隱藏在初始狀況后面發(fā)生的動(dòng)作和呈現(xiàn)的元素。

約請(qǐng)修正——默認(rèn)情況下，標(biāo)題正常顯現(xiàn)。當(dāng)鼠標(biāo)懸停在標(biāo)題上，標(biāo)題馬上顯現(xiàn)黃色布景條和一個(gè)“click to edit”的提示條呈現(xiàn)，這種約請(qǐng)?zhí)崾镜暮锰幨恰�—告知用戶�?dāng)時(shí)區(qū)域是可修正的并引導(dǎo)他們?nèi)�點(diǎn)擊。

修正——單擊今后，就當(dāng)即進(jìn)入到修正模式，標(biāo)題原位置呈現(xiàn)了標(biāo)題表單和”save”“cancel”按鈕，用戶就能非常清楚他們是在修正標(biāo)題。（這種方法的缺陷就是多出來的按鈕會(huì)把相片頂?shù)较乱恍�，造成排版不穩(wěn)定）

完結(jié)——保存方法有很多種，flickr采用了文本的”saving…“臨時(shí)替換標(biāo)題，一旦保存完結(jié)，新標(biāo)題就會(huì)以非修正的款式呈現(xiàn)。

上述過程中，運(yùn)用到了一些約請(qǐng)?zhí)崾居脩敉杲Y(jié)修正，只滿意了”可操作性“。那么用戶怎樣才干發(fā)現(xiàn)這個(gè)功用呢？這就涉及到”可拜訪性“問題。上述比如只要在鼠標(biāo)移上去時(shí)才干被用戶發(fā)現(xiàn)是可修正性的，那么很可能存在一部分用戶沒有用鼠標(biāo)移上去而疏忽這些約請(qǐng)。為了讓功用更易被發(fā)現(xiàn)，能夠采用在標(biāo)題邊放”修正“鏈接。單擊該鏈接便可觸發(fā)修正。（不過這也會(huì)影響到頁面的視覺攪擾問題，如果有過多的功用提示會(huì)造成頁面噪點(diǎn)過多，可用率下降。）因此，做規(guī)劃是要權(quán)衡易讀性和易修正性哪個(gè)重要，做出取舍。

二、保持輕量級(jí)

Digg在早期的時(shí)分，用戶想要推一篇文章，需要經(jīng)過兩步操作。而現(xiàn)在的改進(jìn)版——只要單擊”digg“馬山就能夠記載一次投票。就因?yàn)椤眴螕�，完畢“簡略了一點(diǎn)，帶來了用戶活躍度和網(wǎng)站點(diǎn)擊率的飛速添加，這正是交互輕量級(jí)規(guī)劃的一大效果。

怎樣經(jīng)過簡化交互，完成操作更接近內(nèi)容，然后保證規(guī)劃的輕量級(jí)呢？

1.費(fèi)茨規(guī)律

費(fèi)茨規(guī)律指的是：移動(dòng)到方針上的時(shí)刻(T)和移動(dòng)間隔(D)的對(duì)數(shù)(S)成正比。用公式表示為：

T = a + b log2 ( D / S + 1 )來核算。其中

D：鼠標(biāo)到達(dá)方針的間隔
S：方針的寬度（尺寸）

咱們能夠簡略的理解為：方針定位越簡略，間隔鼠標(biāo)當(dāng)時(shí)的位置就應(yīng)該越近，方針占用空間應(yīng)該更大。為了簡略，咱們能夠把功用都會(huì)集到一塊（如放在菜單欄和工具欄中）�？墒沁@樣就違反了費(fèi)茨規(guī)律（找起來會(huì)很費(fèi)力，間隔也會(huì)添加）。經(jīng)過上下文工具把操作放在相關(guān)內(nèi)容鄰近是不錯(cuò)的方法。[注：上下文工具是桌面右鍵菜單的web版]

2.實(shí)時(shí)可見的工具

digg在每篇文章周圍，有一個(gè)推舉的記分卡，下方的”digg it“按鈕要比其他的操作顯得顯著。鼠標(biāo)懸停的時(shí)分”digg it“的按鈕邊框變成黑色杰出顯現(xiàn)，單擊”digg“后，投票結(jié)果馬上記載并在記分卡上實(shí)時(shí)更新。一起”digg“按鈕灰掉不可點(diǎn)，標(biāo)簽文本也變成灰色”dugg“。

和digg一樣，豆瓣的打分也是網(wǎng)站的中心功用。因此明確的操作（評(píng)級(jí)）約請(qǐng)非常重要。打分后，用戶能夠隨意更改打分分值，對(duì)評(píng)價(jià)作出刪去和修正。

shutterstock把參加的收藏的圖片總是顯現(xiàn)在頁面底部的遮罩層中，用戶能夠隨時(shí)看到并修正自己添加的圖片。

3.保持要害內(nèi)容可見

Gmail在頁面加載的時(shí)分考慮了用戶慢速銜接的運(yùn)用情況，減少款式的加載，運(yùn)用備選計(jì)劃保證主要內(nèi)容可見。

淘寶的listing頁面一次改版，鼠標(biāo)懸停在寶物圖片上時(shí)，不只呈現(xiàn)大圖，一起還在時(shí)刻維度上對(duì)賣家推薦的商品輪播顯現(xiàn)，用戶相同能夠點(diǎn)擊下方的小圖來挑選查看。不只保證了要害內(nèi)容可見，一起處理了多信息的展示和交互。

4.只做一件工作

Linkdin音訊列表中，用戶名承載著兩個(gè)交互行為：鼠標(biāo)點(diǎn)擊后會(huì)跳轉(zhuǎn)到用戶profile頁面，而鼠標(biāo)懸停0.5秒今后呈現(xiàn)彈出層，顯現(xiàn)該用戶的簡介。如果咱們不做0.5秒的限制，就會(huì)呈現(xiàn)用戶在鼠標(biāo)以上去時(shí)馬上顯現(xiàn)彈出層，那么很可能會(huì)有用戶認(rèn)為這個(gè)鏈接只具有這一種操作功用，而疏忽了它能夠點(diǎn)擊的功用。所以對(duì)一個(gè)交互行為只賦予它一種功用，多種功用需要考慮用其它方法去完成。

Amazon用別的一種方法來處理多功用的展示。星星打分的信息包括兩方面：鼠標(biāo)懸停展示彈出層顯現(xiàn)每顆星的打分人數(shù)；鼠標(biāo)點(diǎn)擊后顯現(xiàn)評(píng)價(jià)詳情頁面。如果把這兩個(gè)信息一起經(jīng)過點(diǎn)擊星星來完成就會(huì)呈現(xiàn)上述類似問題。Amazon則是經(jīng)過添加一個(gè)類似下拉的按鈕來承載鼠標(biāo)懸停的交互行為，把點(diǎn)擊行為只留給星星。