《web界面設(shè)計(jì)》讀書筆記

六大原則

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


參考:

Web界面設(shè)計(jì) (豆瓣)

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。