close

細節決定成敗 總結項目中的交互設計 -網上推廣


總結一下這次項目設計過程中的交互,(因為項目沒上線,所以不能透漏項目的名稱)雖然某些上線前實現不了。

1:使可點擊的元素看起來都是可點擊的.

對象本身的靜態視覺啟示:

全站統一的鏈接顏色,鏈接顏色與普通文字的顏色要有明顯的區別;

按扭有立體效果,看起來像按扭;

動態改變對象的視覺啟示,光標經過對象時改變光標的視覺啟示:

鼠標滑過鏈接的下劃線;鼠標滑過圖標的視覺變化;

圖標與文字的組合,鼠標滑過顯示的熱點區域應包含圖標,而不僅僅是鏈接.

按扭和鏈接滑過的光標啟示為手形,普通文字的光標啟示為"工"形.這樣的習慣用法,用戶會很清晰此處不可點擊,但可復制。

2:盡量使每個操作都有可撤消的功能,避免使用"確認"的彈出框.減少人機的交互.例如刪除功能,當用戶單擊刪除時,80%的用戶是確認要刪除,彈出確認的操作是沒有必要的.撤消功能的出現使20%用戶可能出現的誤操作可以撤消.又不會讓80%的用戶受到彈出框的打擾。

 

3:在視覺上表現元素之間平行(同一層次),包含(上下等級)的關系.

平行關系通過元素之間的間距來體現;

包含關系通過元素之間的縮進來表現;

4:使操作與結果的反饋更順暢.

通過排序的方式,如下圖:

 

上圖中,操作在上面,結果在下面,所以排序的方式,應該是最新的記錄與輸入框的距離最近。越老的記錄與輸入框的距離越遠,因為最新的結果此時在用戶視覺的中心。

再看下圖:結果在上面,操作在下面,則排序的方式與上圖的相反。也是因為視覺中心所在位置的緣故。

 

好友搜索,結果在當前頁中顯示。

 

搜索結果與搜索條件在同一頁面顯示,比頁面跳轉的交互會更好,同時支持再次搜索。


arrow
arrow
    創作者介紹
    創作者 pagepe 的頭像
    pagepe

    pagepe的部落格

    pagepe 發表在 痞客邦 留言(0) 人氣()