瞬間設(shè)計(二)

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

一、直接操縱原則

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

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

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

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

編輯――單擊以后，就立即進入到編輯模式，標(biāo)題原位置出現(xiàn)了標(biāo)題表單和”save"“cancel"按鈕，用戶就能非常清楚他們是在編輯標(biāo)題。（這種方式的缺點就是多出來的按鈕會把照片頂?shù)较乱恍校斐膳虐娌环€(wěn)定）

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

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

二、保持輕量級

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

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

1.費茨定律

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

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

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

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

2.實時可見的工具

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

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

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

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

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

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

4.只做一件事情

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

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