1.親密性的根本目的是實(shí)現(xiàn)組織性，讓用戶(hù)對(duì)頁(yè)面結(jié)構(gòu)和信息層次一目了然

縱向示例

縱向間距三種規(guī)格分別為：8px（小號(hào)間距）、16px（中號(hào)間距）、24px（大號(hào)間距）

2.對(duì)比是增加視覺(jué)效果最有效方法之一，同時(shí)也能在不同元素之間建立一種有組織的層次結(jié)構(gòu)，讓用戶(hù)快速識(shí)別關(guān)鍵信息。

注意：突出的方法，不局限于強(qiáng)化重點(diǎn)項(xiàng)，也可以是弱化其他項(xiàng)。

在一些需要用戶(hù)慎重決策的場(chǎng)景中，系統(tǒng)應(yīng)該保持中立，不能替用戶(hù)或者誘導(dǎo)用戶(hù)做出判斷。

3.不要為了編輯內(nèi)容而打開(kāi)另一個(gè)頁(yè)面，應(yīng)該直接在上下文中實(shí)現(xiàn)編輯。

單字段行內(nèi)編輯

當(dāng)『易讀性』遠(yuǎn)比『易編輯性』重要時(shí)，可以使用『?jiǎn)螕艟庉嫛?/b>

單擊編輯示例

狀態(tài)一：普通的瀏覽模式，不區(qū)分可編輯行和不可編輯行；

狀態(tài)二：鼠標(biāo)懸停時(shí)，『指針』變?yōu)椤菏中汀?，編輯區(qū)域底色變黃，出現(xiàn)『Tooltips』提示單擊編輯；

狀態(tài)三：鼠標(biāo)點(diǎn)擊后，出現(xiàn)『輸入框』、『確定』、『取消』表單元素，同時(shí)光標(biāo)定位在『輸入框』中。

當(dāng)『易讀性』為主，同時(shí)又要突出操作行的『易編輯性』時(shí)，可使用『文字鏈/圖標(biāo)編輯』

文字鏈/圖標(biāo)編輯示例

狀態(tài)一：在可編輯行附近出現(xiàn)文字鏈/圖標(biāo)；

狀態(tài)二：鼠標(biāo)點(diǎn)擊『編輯』后，出現(xiàn)『輸入框』、『確定』、『取消』表單元素，同時(shí)光標(biāo)定位在『輸入框』中。

注：在『多字段行內(nèi)編輯』的情況下，顯示的內(nèi)容和編輯時(shí)所需的字段會(huì)存在比較大的差異，所以更需要『巧用過(guò)渡』原則中的『解釋剛剛發(fā)生了什么』來(lái)消除這種視覺(jué)影響。

多字段行內(nèi)編輯示例

編輯模式在不破壞整體性的前提下，可擴(kuò)大空間，以便放下『輸入框』等表單元素；其中，在 Table 中進(jìn)行編輯模式切換時(shí)，需要保證每列的不跳動(dòng)。

4.利用拖放

拖放列表示例

狀態(tài)一：鼠標(biāo)懸停該行時(shí)，出現(xiàn)可移動(dòng)的『圖標(biāo)』；

狀態(tài)二：鼠標(biāo)懸停在該『圖標(biāo)』時(shí)，指針變?yōu)椤菏中汀?，點(diǎn)擊即可進(jìn)行拖動(dòng)；

狀態(tài)三：拖動(dòng)到可放置區(qū)塊，出現(xiàn)藍(lán)色描邊，告知用戶(hù)該區(qū)塊可放置該對(duì)象。

拖放圖片/文件示例

5.能在這個(gè)頁(yè)面解決的問(wèn)題，就不要去其它頁(yè)面解決。

因?yàn)槿魏雾?yè)面刷新和跳轉(zhuǎn)都會(huì)引起變化盲視（Change Blindness），導(dǎo)致用戶(hù)心流（Flow）被打斷。

變化盲視（Change Blindness）：指視覺(jué)場(chǎng)景中的某些變化并未被觀察者注意到的心理現(xiàn)象。產(chǎn)生這種現(xiàn)象的原因包括場(chǎng)景中的障礙物，眼球運(yùn)動(dòng)、地點(diǎn)的變化，或者是缺乏注意力等。

心流（Flow）：也有別名以化境 (Zone) 表示，亦有人翻譯為神馳狀態(tài)，定義是一種將個(gè)人精神力完全投注在某種活動(dòng)上的感覺(jué)；心流產(chǎn)生時(shí)同時(shí)會(huì)有高度的興奮及充實(shí)感。

推薦示例

用戶(hù)點(diǎn)擊『刪除』后，直接操作；出現(xiàn) Message 告知用戶(hù)操作成功，并提供用戶(hù)『撤銷(xiāo)』的按鈕；用戶(hù)進(jìn)行下一個(gè)操作或者 1 分鐘內(nèi)不進(jìn)行任何操作， Message 消失，用戶(hù)無(wú)法再『撤銷(xiāo)』。

推薦示例

特例：在執(zhí)行某些無(wú)法『撤銷(xiāo)』的操作時(shí)，可以點(diǎn)擊『刪除』后，出現(xiàn) Popconfirm 進(jìn)行二次確認(rèn)，在當(dāng)前頁(yè)面完成任務(wù)。

不推薦示例

濫用 Modal 進(jìn)行二次確認(rèn)，就像『狼來(lái)了』一樣，既打斷用戶(hù)心流（無(wú)法將上下文帶到彈出框中），也無(wú)法避免失誤的發(fā)生。

6.輸入覆蓋層：在覆蓋層上，讓用戶(hù)直接進(jìn)行少量字段的輸入。

輸入覆蓋層示例

鼠標(biāo)『點(diǎn)擊』圖標(biāo)觸發(fā)；鼠標(biāo)『點(diǎn)擊』懸浮層以外的其他區(qū)塊后，直接保存輸入結(jié)果并退出。

輸入覆蓋層：在覆蓋層上，讓用戶(hù)直接進(jìn)行少量字段的輸入。

7.流程處理

對(duì)于某些『流程處理』而言，讓用戶(hù)始終待在同一個(gè)頁(yè)面上則更有必要。

雖然彈出框的出現(xiàn)會(huì)打斷用戶(hù)的心流，但是有時(shí)候在彈出框中使用『步驟條』來(lái)管理復(fù)雜流程也是可行的。

如果某個(gè)操作不那么重要，或者使用『實(shí)時(shí)可見(jiàn)工具』過(guò)于啰嗦會(huì)影響用戶(hù)閱讀時(shí)，可以在懸停在該對(duì)象上時(shí)展示操作項(xiàng)。

懸停即現(xiàn)工具示例

鼠標(biāo)懸停時(shí)，出現(xiàn)操作項(xiàng)。

如果某些操作只需要在特定模式時(shí)顯示，可以通過(guò)開(kāi)關(guān)來(lái)實(shí)現(xiàn)。

開(kāi)關(guān)顯示工具示例

用戶(hù)點(diǎn)擊『修改』后，Table 中『文本』變成『輸入框』，開(kāi)啟編輯功能。

8.解釋剛剛發(fā)生了什么

新增一條對(duì)象時(shí)，該行『高亮』告知用戶(hù)這是新增項(xiàng)；幾秒后『高亮』消失，以免過(guò)度干擾用戶(hù)。