六大原則
直截了當(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)劇烈,干擾用戶。