本書描述了6個設計原理,即直截了當、簡化交互、足不出戶、提供邀請、使用變換、即時反應。瀏覽器
1、直截了當(alan cooper:"在哪裏輸出,就要容許在哪裏輸入")工具
1.1 行內編輯和覆蓋層編輯的最佳實踐oop
經過使用業內編輯,用戶在修改頁面顯示的內容時能夠觀察到上下文的變化。如下是一些相關的最佳實踐:佈局
對單個字段使用行內編輯。性能
當編輯多個項中的一個時使用行內編輯。這樣能夠保持視圖中的上下文。動畫
儘量保證顯示和編輯模式的大小相同。這樣能夠避免頁面抖動,同時減小兩個模式間切換對用戶形成的干擾。操作系統
儘量讓顯示與編輯模式之間的變換平滑而連續。設計
在主要考慮易讀性時,經過鼠標懸停邀請用戶編輯。對象
不要讓用戶經過雙擊切換至編輯模式。事件
若是用戶頻繁編輯某個項的可能性較大(便可編輯性與易讀性同等重要),或者需要編輯的項比較少,能夠再被編輯項旁邊放一個加方括號的「[edit]」連接。這樣既能夠從視覺上區分連接與顯示的文本,又不至於分散用戶注意力。
在編輯系列中的某一項時,應該在原地顯示編輯連接(以便保持上下文)。
若是需要用戶更多地關注被編輯的項,可使用覆蓋層。這樣能夠消除意外修改關鍵值的可能性。
不要針對多個字段建立多個覆蓋層。若是想經過複雜的表單編輯一系列元素,應該使用一個覆蓋層。
在使用覆蓋層時,儘可能使用最輕量級的樣式,以減小顯示與編輯狀態切換形成的干擾。
若是隱式地提交編輯結果不明顯,可使用按鈕。
在空間容許的狀況下,要讓用戶經過按鈕來保存和取消編輯。
只要可能就要容許用戶拖動覆蓋層,以便看到被遮住的內容。
1.2表格編輯的最佳實踐
要格外關注表格數據顯示的可讀性。
不要經過鼠標懸停啓動單元格編輯。不然,不只會讓用戶有進入「地雷陣」之感,更會干擾到正常的界面交互。
要經過鼠標單擊啓動編輯功能。儘管使用鼠標雙擊也並不是徹底不能接受(由於這會讓人感受像在使用Excel),但單擊更方便一些。
注意要爲編輯操做提供稍大一些的空間,例如使用下列編輯框或增大編輯單元格。
儘量模仿用戶已經熟悉的常規性單元格切換操做(例如使用Excel的慣例)。
1.3羣組編輯與模塊配置的最佳實踐
若是有必定數量的項需要編輯,應該使用可切換的編輯模式;不然,直接顯示編輯元素會形成視覺干擾。
啓用和禁用功能要儘量類似(對稱性交互)。進入和退出編輯模式的操做應該更像是切換。
在將配置做爲重要功能的狀況下,應該讓模塊支持行內編輯式的配置。
若是模塊配置沒有顯示內容重要,則應該以全局方式開啓/關閉模塊配置。
選擇編輯模式的原則:
若是頁面中有一個字段需要編輯,應該優先使用單字段行內編輯。
對於多個字段或更復雜的編輯,可使用多字段行內編輯。
若是編輯時的上下文可有可無,或者用戶在編輯時應該全神貫注,則使用覆蓋層編輯。
對於網格編輯,應該遵循表格編輯模式。
在處理頁面中的多個項時,羣組編輯是平衡視覺干擾與易發現性的有效方案。
若是想讓用戶直接配置模式,則應該使用模塊配置模式。
2.1拖放模塊的最佳實踐
若是在拖動期間清晰地展現預覽效果很重要,應該使用佔位符目標。
若是想避免頁面抖動(保持佈局穩定),應該使用插入條目標。
要使用被拖動對象的中心點來肯定放置位置。
要使用稍微透明的被拖動對象(幻影),不要使用不透明的版本。
若是讓用戶拖動表示模塊的縮略圖,應該使用插入條目標。
2.2拖放列表的最佳實踐
只要可能,就應該實時拖動列表項並使用佔位符。
要使用鼠標位置來肯定拖動目標的位置。
若是目標是保證拖動速度,或者被拖動的項很大,應該考慮使用插入目標。由於呈現插入條與動態重排列表相比,更容易實現。
因爲列表中的拖放功能不容易被發現,應該考慮提供重排列表的替代方式。
當用戶使用替代方式重排列表時,再借機經過一次性提示,告知下次可使用拖放。
2.3拖放對象的最佳實踐
若是對象間的視覺關係很複雜,要使用插入目標來表示放置位置(以便下降拖動對頁面佈局的干擾)。
對於父/子關係,突出顯示父對象也能夠代表放置位置。
只要有可能,就要在鼠標懸停時顯示拖動提示,以代表能夠拖動。
在對象被拖動3像素或鼠標按下超過0.5秒時啓動拖動。
與光標同步直接定位被拖動的對象。偏移拖動對象會讓人感受它與拖動操做不相關。
鼠標懸停在能夠拖動的對象上時,要經過改變光標代表能夠拖動。
2.4拖放操做的最佳實踐
在WEB界面中使用拖放操做必須有所節制,由於該項功能不容易發現,有時甚至達不到指望的效果。
爲完成相同的操做提供一種可替代方案。將拖放操做做爲一種快捷機制。
不要使用拖放來設置簡單的屬性。應該使用更直接的方式設置對象屬性。
不要僅僅爲了實現拖放而建立人造視覺元素。拖放應該符合對象在界面中的天然表現。
在鼠標懸停時提供明確的邀請,以說明能夠執行的操做。
2.5拖放集合的最佳實踐
要提供歸集項目的可替代方式(例如,提供向購物車中添加商品的不一樣方式)。
在拖動開始時,突出顯示有效地放置區域以提示用戶能夠把項目放在哪裏。
要提供備用提示,以告訴用戶也可使用拖放歸集項目。
關於拖放的最佳實踐
在拖動對象時儘可能保持頁面抖動最小化。
在用戶按下鼠標並拖動了3像素或按住鼠標超過0.5秒時啓動拖動。
經過拖放執行直接操做應該做爲界面中更直截了當方式的替代方法。
應該關注拖放過程當中的全部趣味瞬間。記住,必須讓用戶在整個過程當中隨時可以獲得必要的信息。
使用邀請來提示用戶可使用拖放。
3.1切換選擇的最佳實踐
在選擇位於行中的元素時,使用切換選擇。
爲便於選擇非連續的元素,要使用切換選擇。
在列表中,除了複選框以外再突出顯示行可以明確選擇狀態。
在分頁顯示內容時,應該只把操做應用於當前頁中的選中項。
若是提供「選擇所有」選項,則還應考慮跨越多個分頁選擇所有元素的方式。
對選中了多少個元素給出清晰地反饋。
只要可能,就在沒有選中項的狀況下禁用沒法使用的操做。若是不由用相關操做,必須添加其餘界面元素說明爲何不能執行該操做。
3.2集合選擇的最佳實踐
若是容許用戶在多頁中選擇項,應該把(從每一頁)選擇的項歸集到一個獨立的區域。這樣,即便用戶在不一樣頁面間切換,也會保持明確的選擇狀態。
在同個界面中,能夠經過集合選擇來混合切換選擇和對象選擇。
要注意經過集合選擇歸集的項目與在當前頁面中選擇的項或對象可能帶來的二義性。
3.3對象選擇的最佳實踐
在可選元素可以被拖動時使用對象選擇。
在模仿桌面式交互的Web應用程序中使用對象選擇。
支持標準的修改鍵擴展(Shift擴展選項;Ctrl用於非連續選項)。
在瀏覽器能力有限的狀況下,應考慮將對象選擇降級爲切換選擇。
混合選擇的最佳實踐
使用複選框選擇對象能夠沒必要打開對象。
使用對象選擇來選擇並打開對象。
2、簡化交互
4.1實時可見工具的最佳實踐
若是上下文工具涉及邀請用戶執行很是重要的操做,則應該保持其始終可見。
保持視覺干擾最少化。
保持可見項目最少化。
4.2懸停即現工具的最佳實踐
若是操做不過重要且但願突出內容的易讀性(或還有其餘更重要的可見工具),應該把上下文工具隱藏於鼠標懸停以後。
在顯示上下文工具時要避免使用覆蓋層。覆蓋層有可能致使懸停與遮擋反模式,並且用戶爲執行最基本的操做還會過多使用鼠標。
在顯示上下文工具時,要保證頁面各個部分的佈局不變。
避免任何元素出現幾像素的偏移,以及頁面元素的移位。這樣會把用戶的視線從真正應該關注的地方轉移開。
確保顯示的圖標清楚且容易理解。若是可能,只使用文本標籤。
工具覆蓋層應該即刻顯示。與信息覆蓋層不一樣,用戶需要使用其中的工具儘快執行操做。
4.3開關顯示工具的最佳實踐
若是操做並非主要目的,但又想爲用戶直接操做頁面對象提供方便時,能夠爲頁面或其中某個區域添加打開/關閉工具的開關。
要儘可能保證打開和關閉編輯模式的對稱性。
要保證顯示與編輯視圖的切換儘量平滑穩定,從而爲編輯提供一種「軟模式」。
4.4級聯遞進工具的最佳實踐
若是不想基於鼠標懸停顯示上下文工具,可使用級聯遞進工具。
利用級聯遞進工具確保用戶能明確地激活上下文工具。
在需要提供默認的常規操做和其餘不經常使用的操做時,可使用Mutton。
在可能的狀況下,最好能避免使用級聯。爲了使用下一級菜單而執行過多鼠標操做,很容易致使用戶反感。
儘量把操做放在距離激活點最近的位置上。
4.5二級菜單的最佳實踐
能夠把替代命令或快捷方式放在二級菜單中。
能夠考慮在用戶按住鼠標1秒鐘時激活二級菜單,讓用戶沒必要使用右鍵單擊。
應該爲二級菜單應用不一樣於瀏覽器標準二級菜單的樣式。
不要經過二級菜單顯示除備用命令以外的操做。
不要再與傳統網頁類似的地方使用二級菜單。
可使用二級菜單操做一組選中的對象。
上下文工具的通用實踐
上下文工具是方便用戶操做的有效手段。把工具放在接近焦點的地方,並且讓它容易被激活,能夠達到簡化交互的目的。
在不能選擇元素並對它們集中處理的狀況下,可使用上下文工具。
在想爲用戶操做頁面中的項提供快捷方式時,可使用上下文工具。
若是想在焦點位置明確地邀請操做,可使用上下文工具。
要儘可能作到讓操做即時生效,不要讓用戶多浪費一步。
當在一般認爲不可能的地方提供操做時(懸停顯示上下文工具),要儘量運用常見技術(超連接、下拉箭頭、按鈕)。
讓操做明確而直接。除了公認的圖標(如(X)或垃圾桶表示刪除)以外,不要使用其餘意義不明顯的圖標。
經過按鈕實現首要操做,經過連接實現次要操做。
要確保用於打開菜單或擴展信息的目標足夠大。千萬不要使用8像素X8像素大的目標。
要保證工具容易理解、容易定位,並且執行快捷。以便用戶感受既簡單又容易。
3、足不出戶
5.1對話框覆蓋層的最佳實踐
應該儘可能使用對話框覆蓋層,避免使用瀏覽器的彈出窗口。
若是覆蓋層中包含用戶不能忽略的重要信息,或者應該使用模態對話框,則能夠爲覆蓋層應用亮盒效果。
避免使用沒必要要的對話框覆蓋層(白癡對話框),以防打斷用戶的流程。
在頁內交互能夠知足須要的狀況下,就不要使用覆蓋層。
儘可能不要使用JavaScript警告框,由於警告框在不一樣操做系統中的表現不一。
5.2詳情覆蓋層的最佳實踐
使用詳情覆蓋層顯示更多的附加信息,以便減小沒必要要的頁面變換。
對於懸停激活的詳情覆蓋層,在激活以前設置短暫時間延遲(約0.5秒)。這樣能夠避免頁面的行爲相似捕獲器。
對於懸停激活的詳情覆蓋層,也提供一種簡單的禁用方式(例如,鼠標移出)。
設計詳情覆蓋層時,要 保持激活和禁用操做的對稱性(不要讓關閉覆蓋層比激活它還困難)。
在激活後,不要使用長時間動畫或效果延遲顯示詳情覆蓋層。若是單擊對象會調用其餘操做,要使用懸停。在Yahoo! News中,單擊連接會打開新聞頁面;而懸停則能夠爲用戶提供快速預覽。
在沒有明確提供獲取更多信息的方式時,要使用懸停。若是使用懸停激活覆蓋層,則沒必要再添加用於激活的其餘用戶界面控件。
若是想讓用戶經過更明確的方式獲取更多信息,可使用單擊。在使用單擊時,通常要提供「更多內容」連接或相似打開詳細信息的按鈕。
若是要在覆蓋層中提供其餘連接,要使用單擊。儘可能在適當位置顯示覆蓋層(經過懸停來激活),並將單擊其中的一個連接做爲默認操做(即鼠標不用移動)。
5.3輸入覆蓋層的最佳實踐
使用輸入覆蓋層簡化表單外觀。將詳細的幫助信息放在覆蓋層中。
在使用輸入覆蓋層時,要保證表單字段與覆蓋層中字段的惟一區別是有意爲之的(例如,爲覆蓋層中的輸入字段應用加粗的邊框)。
在使用輸入覆蓋層時,要讓用戶單擊任何地方均可以退出覆蓋層。
6.1對話框嵌入層的最佳實踐
使用對話框嵌入層實現頁面自定義。這樣,既能夠調整頁面,又能夠同時看到結果。
爲了消除在頁面中嵌入對話框的突兀感,可使用快速的滑動動畫。
使用對話框嵌入層來聯繫觸發它的元素和對話框。
使用對話框嵌入層顯示不過重要、不屬於頁面主流程的工具。
6.2詳情嵌入層的最佳實踐
可使用詳情嵌入層在上下文中顯示附加信息,且不會遮擋其餘信息。
使用詳情嵌入層能夠避免懸停與遮擋反模式。
關閉嵌入層的操做要簡單。
6.3標籤頁的最佳實踐
使用標籤頁在當前頁頁面中顯示附加信息。
避免在一個頁面上使用多組標籤頁。
若是確實需要在一個頁面中使用多組標籤頁,要讓它們的內容區域在視覺上有所差異。
把最重要的內容放在第一個標籤頁中。許多用戶可能不會查看其餘標籤頁。
經過鼠標單擊來激活標籤頁。
若是其餘標籤頁中的內容一樣很重要,能夠採用懸停來激活標籤頁——不過,這種方式必須謹慎使用,由於有可能引發用戶的反感。
7.1虛擬滾動的最佳實踐
保證讓用戶隨時知道本身所處的位置。不管使用工具提示條仍是狀態欄,總之要告訴用戶他們滾動後呈現的數據範圍。
在用戶等待數據加載期間給出反饋。
對於既定的數據集,應該創造一個徹底加載狀態下的虛擬空間的假象。
對於搜索結果,要隨着滾動持續擴展虛擬空間。
爲了提供優雅的往返導航體驗,應該在用戶瀏覽搜索結果時保持有限的虛擬空間。
7.2內置分頁的最佳實踐
使用內置分頁來呈現天然地「分塊」效果,同時還能保證切換頁面時平滑流暢的體驗。
正確處理後退按鈕。要讓後退按鈕也對分頁有效。
在使用內置分頁時,要只更新「虛擬頁面」,而不是整個頁面。
在使用內置分頁時,要考慮以漸進加載方式向虛擬空間中加載更多的內容。
7.3傳送帶的最佳實踐
傳送帶很是適合顯示有明顯視覺差別的內容。圖像、cd封面、電影劇照,都很是適合。
若是內容排列雜亂無章,用戶使用起來容易迷惑。
若是開始處的內容相關性高,越日後越低,則傳送帶也是一個不錯的選擇;由於它能夠突出顯示關係最緊密的項。
若是要顯示的內容不少,而傳送帶提供的窗口又過小,那麼在實際查找內容時其實並不方便。
因爲全部內容共享有限空間,所以能夠經過傳送帶把虛擬內容排成一行。
若是傳送帶並非循環傳送內容,或者用戶需要往返瀏覽內容,則在兩端放置箭頭可能會使人厭煩。
把往返箭頭放在一塊兒雖然能夠方便操做,但卻不太容易被發現。換句話說,這種方案雖然解決了往返瀏覽內容的問題,但按鈕卻脫離了人們指望的位置。
要保證內容足夠大,內容間的空白也要足夠,以便區分。
要支持部分顯示下一項內容。這樣能夠吸引用戶滾動內容,即經過部份內容查看完整內容。
單擊左箭頭應該是從左向右滾動內容,單擊右箭頭應該是從右向左滾動內容。
7.4虛擬搖攝的最佳實踐
將虛擬搖攝做爲滾動無窮大的2D畫面的替代手段。
儘可能在搖攝漫遊過程當中體現出慣性運動。
7.5虛擬空間的最佳實踐
針對基於時間的內容使用混合的滾動分頁。
在移動畫面時使用虛擬搖攝。
使用ZUI顯示包含豐富細節的大量信息。
8.1交互式單頁和嵌入式部件的最佳實踐
利用這兩個模式來簡化用戶操做流程。
利用這兩個模式來增長交易機會。
在上下文中顯示預覽。
實時顯示無效選項。這樣能夠體現用戶注意本身選擇的結果。
儘量以嵌入方式顯示購物車。
把購物車視爲一類界面元素,而不是額外的過程。
若是推薦建議與用戶有關且重要,能夠展現附加步驟。
8.2靜態單頁最佳實踐
若是過程比較複雜,可使用多頁流程。
若是想隱藏以前或以後的上下文,同時把用戶注意力集中在多步中的一個任務上,可使用多頁流程。
若是步驟較少,並且不想讓用戶因頁面跳轉而退出,可使用靜態單頁。
使用視覺處理技巧減小用戶心理上的步驟數。
在多步操做中,對用戶當前位置所剩步驟給出提示。
儘量聚集默認選項,以簡化整個流程。
運用參照信息、顏色提示、互動手法及簡單的視覺樣式達到簡化步驟的效果。
把最簡單的操做放在多步流程的前面。
4、提供邀請
9.1引導操做邀請的最佳實踐
針對主要操做使用引導操做邀請。
針對簡單的1-2-3步驟使用引導操做邀請。
把引導操做的區域設計得容易吸引用戶注意力。但不要干擾整個頁面的視覺外觀。
能夠利用空白區域來引導用戶操做。
能夠利用(看起來)未完成的區域引導用戶操做。人類的天性會促使用戶想要「完成」它。
9.2漫遊探索邀請的最佳實踐
在從新設計站點或發佈新站點並須要向用戶介紹一系列功能時,可使用漫遊探索邀請。
儘量密切漫遊探索邀請與站點自己的聯繫。
要保持漫遊探索邀請簡明扼要,還要使其容易退出並且容易從新啓動。
不要期望經過漫遊解決界面自己存在的問題。
保持漫遊過程簡單。
10.1懸停邀請的最佳實踐
當操做不如內容重要,並且但願界面整潔時,使用懸停邀請。
在實現懸停邀請時,能夠經過改變光標、改變背景和顯示提示條共同配合代表所邀請的操做。
在懸停邀請期間,盡力爲用戶提供單擊後產生結果的預覽。
在交互的不一樣階段,儘可能點綴一些用戶熟悉的元素。經過熟悉的概念引出新概念有助於用戶快速理解新功能。最多見的元素是按鈕、連接、下拉箭頭和衆所周知的圖標。
經過距離代表邀請操做做用的目標對象。當用戶鼠標懸停於某個對象上時改變光標,意味着操做將做用於鼠標下方的對象。
10.2預期功能邀請的最佳實踐
經過人們習覺得常、司空見慣的概念引出新的、不熟悉的交互方式(例如,在上下文工具中顯示一個執行操做的超連接)。
使用可感知的預期功能來給出邀請提示(例如,用向下的箭頭表示能夠打開下拉菜單,而用向上的箭頭表示能夠關閉菜單)。
把邀請安排在適當的上下文中,特別是要靠近交互的主體。
10.3拖放邀請的最佳實踐
在拖放期間,儘量利用多個瞬間確保用戶理解每一次細微的邀請。
在鼠標位於可拖動區域時,應該改變光標形狀。
在用戶拖動明確提供一個能夠抓握的空間。
5、巧用變換
變換的最佳實踐
變換是與用戶溝通和交流的重要手段。雖然有可能被濫用,但也有可能用得其所。
變化越快,代表事件越重要。
快速移動看起來要比快速的顏色變化更重要。
朝向用戶移動看起來要比遠離用戶移動更重要。
很是慢的變化能夠用在不干擾用戶注意力的處理上。
移動能夠表達對象的位置變換。看着對象從一個地方移動到另外一個地方,用戶就能記住它的去向,便於未來找到該對象。
正常狀況下,變換應該具備反射性。若是某個對象移動並收縮到了新位置,用戶應該可以再次打開該對象,同時還應該看到相反的打開變換效果。若是用戶刪除的對象淡出頁面,那麼建立的對象就應該淡入頁面。這就是對稱性交互(Symmetry of Interaction)原理的實際應用。
濫用效果的廣告提醒咱們,必定不要過分使用變換。
儘可能不要只依靠變換來表達界面的變化。
讓變換髮生在用戶視力的焦點區附近。這樣變換就更容易被用戶擦覺,也更不像廣告。
花裏胡哨的效果使人討厭;只能干擾用戶,不利於向用戶傳達信息。
6、即時反應
13.1實時建議邀請的最佳實踐
把實時建議做爲輔助提示的手段,而不是直接的搜索關鍵詞。
在提供建議時,要注意給出每條建議的上下文。
在合理的延遲(如輸入中的暫停)以後再給出建議。
界面應該可以幫助用戶縮小目標選項,但不要過度限制用戶。
13.2實時搜索的最佳實踐
針對自由開放式搜索使用實時搜索。
爲返回的每一個搜索結果提供適量的上下文。應該迅速返回結果。
爲幫助用戶縮小查找範圍,應該顯示足夠多的結果,但也不能因顯示太多而分散用戶注意力。
在有條件的狀況下,能夠在一個界面中組合實時建議和實時搜索。
13.3微調搜索的最佳實踐
具備多種特徵(多個側面)的商品,適合使用微調搜索來篩選結果。
選用具備視覺衝擊力的篩選控件。
謹慎使用滑動條,由於滑動條不容易控制。
使用動畫效果來平滑每一次微調迭代。
經過適當的時間延遲來避免沒必要要的微調搜索(等到用戶設置完篩選條件再觸發搜索)。
14.1實時預覽的最佳實踐
使用實時預覽防止出錯。
使用實時預覽喚起用戶的參與感。
即時給出反饋。
把預覽放在操做的上下文中。
儘可能讓用戶即時看到對象的變化。
使用實時預覽避免頁面切換。
在性能能夠接受的狀況下,基於輸入字段中每一個字符的輸入給出實時預覽。不然,在焦點離開字段時觸發預覽。或者,提供明確的操做邀請按鈕,讓用戶啓動預覽。
14.2漸進展示的最佳實踐
使用漸進展示引導用戶完成較長的過程。
只在必要時顯示必需的幫助信息。
用戶一離開輸入字段就移出幫助信息。
在適當的時候,對將要顯示什麼給出提示。
14.3進度指示的最佳實踐
使用進度指示改善感知性能。
使用簡單的指示器。
把指示器放在接近發生操做的位置。
若是焦點是用戶輸入框,則在輸入框旁邊顯示進度指示器。
若是焦點是輸入或操做的結果,則在結果區域上方顯示進度指示器。
儘量經過指示器顯示實際的進度。不然,能夠用循環動畫代替(轉輪圖標、往復動畫,等等)。
14.4定時刷新的最佳實踐
用定時刷新保持站點內容新鮮。
使用定時刷新代表內容的關聯度。
刷新不能太頻繁;要在易讀性和關聯之間尋求平衡。
爲用戶提供控制自動刷新的手段。能夠顯示提供也能夠隱式提供;一般隱式提供最好。通常來講:能夠將在相應區域發生的事件做爲暫停刷新的信號。