在網(wǎng)頁設(shè)計中如何引導(dǎo)用戶的注意力

3 評論 13231 瀏覽 155 收藏 6 分鐘

在界面中突出強調(diào)一個聚焦點

每個界面都應(yīng)該有一個清晰的起點。用戶應(yīng)該從哪里看起?要設(shè)計清楚。

△ UX策略1 – 在頁面標題部分添加視覺對比

通過視覺的層次引導(dǎo)用戶

通過界面引導(dǎo)控制用戶體驗。他們應(yīng)該從哪里先看起,第二和第三步又看哪里?設(shè)計要建立層次結(jié)構(gòu)。

2zxsj20160504

△ UX策略2 – 避免在構(gòu)圖中補漏留白

3zxsj20160504

△ UX策略3 – 使用單列布局

4zxsj20160504

△ UX策略4 – 重疊設(shè)計元素,強調(diào)連續(xù)性

使用格式塔原則進行布局設(shè)計

根據(jù)格式塔心理學(xué),人會通過簡化感知克服混亂。所以我們將事物分組,將元素分類,我們看“整體”。

這些原則包括:相似,接近,閉合,連接,連續(xù)和圖形/背景。

5zxsj20160504 6zxsj20160504

△ UX策略5 – 按照接近性將相似功能或菜單項分組顯示

7zxsj20160504

△ UX策略6 – 標題位置與對應(yīng)章節(jié)內(nèi)容更靠近

8zxsj20160504

△ UX策略7 – 限制標題與章節(jié)內(nèi)容在同一界限內(nèi)

在不干擾用戶的前提下呈現(xiàn)界面變化

有一些界面變化會發(fā)生在用戶使用期間,這些變化要做到明顯但不干擾用戶。

9zxsj20160504

△ UX策略8 – 用明顯的動畫呈現(xiàn)界面變化

10zxsj20160504

△ UX策略9 – 將出錯的元素區(qū)分顯示出來,錯誤提醒信息放置在表單頂部

刪除或弱化不必要的信息

人的注意力是有限的。不必要的元素會消耗這些注意力。因此,保持用戶專注在重要信息和功能上。

11zxsj20160504

△ UX策略10 – 彈出或模態(tài)窗口背景模糊處理

12zxsj20160504

△ UX策略11 – 在所有圖像中最大限度地提高數(shù)據(jù)墨水比率(讓數(shù)據(jù)更凸顯)

13zxsj20160504

△ UX策略12 – 去掉不必要的邊框

14zxsj20160504

△ UX策略13 – 刪除冗余或不言自明的說明

15zxsj20160504

△ UX策略14 – 隱藏不常用但必要的設(shè)置、功能和信息

提示首屏以下是否還有內(nèi)容

現(xiàn)在大多數(shù)瀏覽器在頁面處于非活動狀態(tài)時隱藏滾動條,你需要“滾動提示”告知用戶首屏以下是否還有內(nèi)容

16zxsj20160504

△ UX策略15 – 通過首屏延伸頁面下方信息元素

17zxsj20160504

△ UX策略16 – 添加陰影以指示深度

18zxsj20160504

△ UX策略17 – 用文字或圖形表示有更多內(nèi)容

未完待續(xù)…

 

譯文來自@企業(yè)官網(wǎng)設(shè)計精選

原文地址:nickkolenda

 

【系列文章回顧】戳下面鏈接快速到達:

1)在網(wǎng)頁設(shè)計中幫助用戶實現(xiàn)目標

2)在網(wǎng)頁設(shè)計中如何引導(dǎo)用戶的注意力

3)在網(wǎng)頁設(shè)計中如何少讓用戶費腦筋,保持操作流暢

4)在網(wǎng)頁設(shè)計中兼顧所有用戶和場景的3個技巧

5)當用戶操作錯誤時,如何在不影響用戶體驗的情況下快速處理好

 

 

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 非常好!!

    來自浙江 回復(fù)
  2. ?? 贊!

    來自天津 回復(fù)
  3. 來自廣東 回復(fù)