好的設(shè)計(jì)絕不是單純的因?yàn)樘觳诺膭?chuàng)意或者靈感爆發(fā)的一瞬間而產(chǎn)生的，只有設(shè)計(jì)師在“持續(xù)改進(jìn)”的迭代方法中才能達(dá)到好的效果，你必須通過(guò)不斷的“質(zhì)疑自己”，在不同的設(shè)計(jì)種找到缺點(diǎn)，并尋求 更好的方案來(lái)改進(jìn)它。Bill Scott在他的《Web界面設(shè)計(jì)》里提到了關(guān)于富交互設(shè)計(jì)的六個(gè)原則告訴我們?nèi)绾伟l(fā)現(xiàn)并找到解決的辦法，我遵循這些設(shè)計(jì)原則，通過(guò)實(shí)例和數(shù)據(jù)來(lái)和大家一起分析一些有趣的瞬間，指導(dǎo)我們的設(shè)計(jì)。

一、直接操縱原則

直接操縱原則就像Alan Cooper在《ABOUT FACE 2.0》中陳述的那樣”：“在哪里輸入，就在哪里輸出“。例如編輯內(nèi)容的操作完全可以不用重新打開(kāi)頁(yè)面，而直接在當(dāng)前頁(yè)面進(jìn)行就可以了。

flickr是用到即時(shí)編輯照片信息的網(wǎng)站。這種方式更直截了當(dāng)，用戶不用切換當(dāng)前頁(yè)面就能完成。他們將更樂(lè)意為他們照片改名字，那么也就意味著會(huì)有更多與照片有關(guān)的元數(shù)據(jù)被記錄下來(lái)，方便其他用戶更好的搜索和瀏覽。我們先分析一下在這個(gè)操作的交互瞬間。

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

邀請(qǐng)編輯——默認(rèn)情況下，標(biāo)題正常顯示。當(dāng)鼠標(biāo)懸停在標(biāo)題上，標(biāo)題立刻顯示黃色背景條和一個(gè)“click to edit"的提示條出現(xiàn)，這種邀請(qǐng)?zhí)崾镜暮锰幨恰嬖V用戶當(dāng)前區(qū)域是可編輯的并引導(dǎo)他們?nèi)c(diǎn)擊。

編輯——單擊以后，就立即進(jìn)入到編輯模式，標(biāo)題原位置出現(xiàn)了標(biāo)題表單和”save"“cancel"按鈕，用戶就能非常清楚他們是在編輯標(biāo)題。（這種方式的缺點(diǎn)就是多出來(lái)的按鈕會(huì)把照片頂?shù)较乱恍?，造成排版不穩(wěn)定）

完成——保存方式有很多種，flickr采用了文本的”saving...“臨時(shí)替換標(biāo)題，一旦保存完成，新標(biāo)題就會(huì)以非編輯的樣式出現(xiàn)。

上述過(guò)程中，使用到了一些邀請(qǐng)?zhí)崾居脩敉瓿删庉?，只滿足了”可操作性“。那么用戶怎樣才能發(fā)現(xiàn)這個(gè)功能呢？這就涉及到”可訪問(wèn)性“問(wèn)題。上述例子只有在鼠標(biāo)移上去時(shí)才能被用戶發(fā)現(xiàn)是可編輯性的，那么很可能存在一部分用戶沒(méi)有用鼠標(biāo)移上去而忽略這些邀請(qǐng)。為了讓功能更易被發(fā)現(xiàn)，可以采用在標(biāo)題邊放”編輯“鏈接。單擊該鏈接便可觸發(fā)編輯。（不過(guò)這也會(huì)影響到頁(yè)面的視覺(jué)干擾問(wèn)題，如果有過(guò)多的功能提示會(huì)造成頁(yè)面噪點(diǎn)過(guò)多，可用率下降。）因此，做設(shè)計(jì)是要權(quán)衡易讀性和易編輯性哪個(gè)重要，做出取舍。

二、保持輕量級(jí)

Digg在早期的時(shí)候，用戶想要推一篇文章，需要經(jīng)過(guò)兩步操作。而現(xiàn)在的改進(jìn)版——只要單擊”digg“馬山就可以記錄一次投票。就因?yàn)椤眴螕?，結(jié)束“容易了一點(diǎn)，帶來(lái)了用戶活躍度和網(wǎng)站點(diǎn)擊率的飛速增長(zhǎng)，這正是交互輕量級(jí)設(shè)計(jì)的一大作用。

怎樣通過(guò)簡(jiǎn)化交互，實(shí)現(xiàn)操作更接近內(nèi)容，從而保證設(shè)計(jì)的輕量級(jí)呢？

1.費(fèi)茨定律

費(fèi)茨定律指的是：移動(dòng)到目標(biāo)上的時(shí)間(T)和移動(dòng)距離(D)的對(duì)數(shù)(S)成正比。用公式表示為：

T = a + b log2 ( D / S + 1 )來(lái)計(jì)算。其中

D：鼠標(biāo)達(dá)到目標(biāo)的距離
S：目標(biāo)的寬度（尺寸）

我們可以簡(jiǎn)單的理解為：目標(biāo)定位越容易，距離鼠標(biāo)當(dāng)前的位置就應(yīng)該越近，目標(biāo)占用空間應(yīng)該更大。為了簡(jiǎn)單，我們可以把功能都集中到一塊（如放在菜單欄和工具欄中）。但是這樣就違反了費(fèi)茨定律（找起來(lái)會(huì)很費(fèi)勁，距離也會(huì)增加）。通過(guò)上下文工具把操作放在相關(guān)內(nèi)容附近是不錯(cuò)的辦法。[注：上下文工具是桌面右鍵菜單的web版]

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

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

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

shutterstock把加入的收藏的圖片總是顯示在頁(yè)面底部的遮罩層中，用戶可以隨時(shí)看到并編輯自己添加的圖片。

3.保持關(guān)鍵內(nèi)容可見(jiàn)

Gmail在頁(yè)面加載的時(shí)候考慮了用戶慢速連接的使用情況，減少樣式的加載，使用備選方案保證主要內(nèi)容可見(jiàn)。

淘寶的listing頁(yè)面一次改版，鼠標(biāo)懸停在寶貝圖片上時(shí)，不僅出現(xiàn)大圖，同時(shí)還在時(shí)間維度上對(duì)賣(mài)家推薦的商品輪播顯示，用戶同樣可以點(diǎn)擊下方的小圖來(lái)選擇查看。不僅保證了關(guān)鍵內(nèi)容可見(jiàn)，同時(shí)解決了多信息的展現(xiàn)和交互。

4.只做一件事情

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

Amazon用另外一種方式來(lái)解決多功能的展現(xiàn)。星星打分的信息包括兩方面：鼠標(biāo)懸停展現(xiàn)彈出層顯示每顆星的打分人數(shù)；鼠標(biāo)點(diǎn)擊后顯示評(píng)價(jià)詳情頁(yè)面。如果把這兩個(gè)信息同時(shí)通過(guò)點(diǎn)擊星星來(lái)實(shí)現(xiàn)就會(huì)出現(xiàn)上述類(lèi)似問(wèn)題。amazon則是通過(guò)增加一個(gè)類(lèi)似下拉的按鈕來(lái)承載鼠標(biāo)懸停的交互行為，把點(diǎn)擊行為只留給星星。