六大原則
直截了當(dāng)：在哪里輸出，就允許在哪里輸入。讓用戶直接對(duì)對(duì)象進(jìn)行操作，所見即所得。
簡化交互：減少操作步驟，縮短交互流程，簡化功能層級(jí)。根據(jù)當(dāng)前的情境顯示合適的界面元素。
足不出戶：在當(dāng)前頁面完成操作，減少頁面切換，更好保持上下文。
提供邀請(qǐng)：增加功能的可發(fā)現(xiàn)性，引導(dǎo)用戶進(jìn)入下一交互層次。
巧用變換：動(dòng)畫過渡的形式，暗示關(guān)聯(lián)性，增強(qiáng)趣味性、增加與用戶的溝通。
即時(shí)反應(yīng)：及時(shí)響應(yīng)用戶的操作，提供反饋、建議等，防止用戶出錯(cuò)。
直接了當(dāng)
一、頁內(nèi)編輯
what：
在頁面中或者使用浮層直接編輯，不用新開頁面或彈窗，減少跳轉(zhuǎn)。浮層可以提供更加復(fù)雜的編輯器，如日期選擇。
一般會(huì)有一個(gè)操作（按鈕、雙擊等）進(jìn)入編輯狀態(tài)。
how：
進(jìn)入編輯狀態(tài)的方式，需要給與用戶提示。
對(duì)稱性原則：進(jìn)入和退出編輯模式應(yīng)當(dāng)采取同樣的交互風(fēng)格。
讓編輯狀態(tài)與顯示狀態(tài)平滑過渡。
覆蓋層可以同時(shí)對(duì)多個(gè)字段同時(shí)調(diào)整。
只要可能，應(yīng)當(dāng)允許用戶拖動(dòng)覆蓋層，以便查看被遮住的內(nèi)容。
why：
減少頁面跳轉(zhuǎn)，可以不脫離上下文，在編輯過程中可以為用戶提供參考。
所見即所得，修改后可以立即看到結(jié)果，更加直觀。
二、利用拖放
what：
利用鼠標(biāo)拖放可以更改位置、排序、從屬關(guān)系、分組、對(duì)被放置對(duì)象執(zhí)行操作（如刪除）。
how：
讓用戶知道哪些可以拖動(dòng)、那些不能拖動(dòng)。
拖動(dòng)過程中給予視覺反饋，告知可以放到哪里以及拖動(dòng)后的效果。
why：
直觀、便捷、自由度大。
三、直接選擇
what：
多個(gè)對(duì)象時(shí)，可以直接點(diǎn)擊對(duì)象選擇部分對(duì)象，或者點(diǎn)擊按鈕/框選全部對(duì)象，之后批量進(jìn)行操作。
how：
區(qū)分選擇與未選擇狀態(tài)。
提示選擇的數(shù)量。
支持shift/Ctrl鍵的多選。
簡化交互
四、上下文工具
what：
就相關(guān)聯(lián)的內(nèi)容放到一起，同時(shí)對(duì)應(yīng)的操作放在內(nèi)容旁邊，方便用戶操作。
how：
將工具和內(nèi)容放到一起，讓人知道二者之間的關(guān)系。
鼠標(biāo)懸浮顯示操作，注意操作部分與顯示部分的遮擋關(guān)系。
通過開關(guān)進(jìn)入編輯狀態(tài)，在內(nèi)容旁顯示操作按鈕。
雙擊/右鍵單擊對(duì)象顯示更多操作。
why：
不同點(diǎn)擊內(nèi)容之后再進(jìn)去一層才能操作，層次更加扁平，操作流程更加簡單。
使用懸浮/開關(guān)進(jìn)入編輯狀態(tài)，頁面顯示會(huì)更加簡潔、清晰。
足不出戶
五、覆蓋層
what：
通過點(diǎn)擊/懸浮激活浮層形式，更加輕量。可以展示操作、詳情等。
how：
使用亮盒效果（即周圍變暗）突出內(nèi)容。
注意遮擋對(duì)于當(dāng)前操作和下一步操作的影響。
六、嵌入層
what：
從當(dāng)前區(qū)域擠出一塊臨時(shí)的內(nèi)容空間，可以執(zhí)行操作、查看詳細(xì)信息（如列表中的更多信息，通過點(diǎn)擊后行高增加來顯示）等。
使用標(biāo)簽頁的形式并列放置多項(xiàng)主題的內(nèi)容。
how：
打開與關(guān)閉操作應(yīng)該保持對(duì)稱性。
將重要內(nèi)容放在第一個(gè)標(biāo)簽頁，許多用戶可能不會(huì)查看其它標(biāo)簽頁。
七、虛擬頁面
what：
每頁加載一定數(shù)量的內(nèi)容，分頁加載，分步顯示。
how：
下拉過程中逐步加載/翻頁控件/拖動(dòng)過程中逐步加載（如地圖）。逐步加載可先顯示占位內(nèi)容，再顯示加載后的內(nèi)容。
使用上一步/下一步的傳送帶模式，分屏展示。
還有一種就是類似prizi模式的，先看到一個(gè)全貌，可以無限放大進(jìn)入更細(xì)節(jié)的頁面。
why：
當(dāng)前頁面可以顯示大量的內(nèi)容，創(chuàng)造了一個(gè)無盡顯示空間的感覺。
八、流程處理
what：
魔法原理：能否通過某種魔法來幫用戶完成任務(wù)。跳過技術(shù)驅(qū)動(dòng)的制約。也就是用戶目標(biāo)是什么，如何直接達(dá)成目標(biāo)。讓任務(wù)完成的流程符合用戶的思維方式。
how：
交互式單頁：組合篩選時(shí)，一個(gè)篩選條件的改變會(huì)影響其他篩選條件的值。
嵌入式部件：通過輕量的浮層來顯示/完成附加步驟，不影響主線任務(wù)的流程。
對(duì)話框：使用彈窗來完成一系列分步任務(wù)，在彈窗中分頁展示，不用整個(gè)頁面都產(chǎn)生變動(dòng)。需要給出當(dāng)前位置的提示。
配置程序：實(shí)時(shí)預(yù)覽不同選擇的組合結(jié)果，及時(shí)反饋。
靜態(tài)單頁：從上到下按順序排列任務(wù)，在一個(gè)頁面內(nèi)上下拖動(dòng)完成，減少頁面跳轉(zhuǎn)。
單頁適合步驟較少的任務(wù)。多頁適合步驟復(fù)雜的任務(wù)。同時(shí)多頁有助于人們聚焦于當(dāng)前的步驟，上下文/前后頁之間的聯(lián)系比較弱。
提供邀請(qǐng)
九、靜態(tài)邀請(qǐng)
what：
直接在頁面上給出交互提示。
how：
引導(dǎo)操作邀請(qǐng)：將步驟列出來，告知用戶需要幾步完成操作；空白區(qū)域的提示文本；CTA（行為召喚）按鈕；露出部分內(nèi)容，提示還有更多內(nèi)容。
需要在可發(fā)現(xiàn)性與干擾用戶之間做出平衡。
十：動(dòng)態(tài)邀請(qǐng)
what：
在用戶交互過程中的某個(gè)點(diǎn)上吸引用戶，并引導(dǎo)他們繼續(xù)下一步操作。
how：
鼠標(biāo)懸停是觸發(fā)；拖動(dòng)時(shí)提示可以拖動(dòng)的元素以及可以放置的位置；推斷人們的下一步操作，并給出提示。
why：
動(dòng)態(tài)邀請(qǐng)的功能沒有靜態(tài)邀請(qǐng)那樣直接、明顯，但是可以減少頁面的視覺干擾，適合于在某種時(shí)機(jī)下才需要使用的功能。
巧用變換
十一、變換模式
what：
通過變化來吸引、引導(dǎo)人們的注意力。
how：
加亮/減暗，讓用戶聚焦于某一塊內(nèi)容。
擴(kuò)展/折疊，在用戶交互過程中逐步顯示更多內(nèi)容。
動(dòng)畫效果，表明狀態(tài)過程（如增加、刪除、移動(dòng)等），增強(qiáng)上下文聯(lián)系。
變化的方式：滑入滑出、面板互換、翻轉(zhuǎn)、傳送帶、折疊窗格、縮放、漸進(jìn)顯示。
十二、變換的目的
why：
增加吸引力；增進(jìn)溝通，告知用戶操作的結(jié)果、對(duì)象之間的關(guān)系，更好的保持上下文聯(lián)系。吸引用戶的注意力，更好地引導(dǎo)用戶。
即時(shí)反映
十三、查詢模式
how：
自動(dòng)完成：輸入一部分，系統(tǒng)給出可用選項(xiàng)，如同下拉選項(xiàng)中的可搜索。
實(shí)時(shí)建議：輸入一部分，通過數(shù)據(jù)庫給出常用的搜索建議，如百度搜索時(shí)的建議。
實(shí)時(shí)搜索：輸入過程中及時(shí)展現(xiàn)結(jié)果，無需點(diǎn)擊查詢按鈕。
微調(diào)搜索：搜索后對(duì)結(jié)果進(jìn)行篩選。
十四：反饋模式
how：
實(shí)時(shí)預(yù)覽：在提交輸入之前就給與用戶反饋，如輸入郵箱，用戶切換焦點(diǎn)后顯示格式錯(cuò)誤。或者密碼強(qiáng)度的實(shí)時(shí)提示。
漸進(jìn)展示：輸入一部分內(nèi)容后再顯示與之相關(guān)的接下來的內(nèi)容。如填寫用戶名后再顯示密碼輸入框。
進(jìn)度指示：顯示任務(wù)處理的實(shí)時(shí)進(jìn)度，如上傳進(jìn)度條、搜索時(shí)加載占位內(nèi)容、文字輸入時(shí)顯示還可以輸入多少字。
定時(shí)刷新：自動(dòng)刷新內(nèi)容。過于頻繁會(huì)導(dǎo)致頁面抖動(dòng)劇烈，干擾用戶。
