有圖有案例!125個提升網頁可用性的優化小技巧(一)

發表於2016-05-05

在介面中突出強調一個聚焦點

每個介面都應該有一個清晰的起點。使用者應該從哪裡看起?要設計清楚。

19zxsj20160504

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

通過視覺的層次引導使用者

通過介面引導控制使用者體驗。他們應該從哪裡先看起,第二和第三步又看哪裡?設計要建立層次結構。

2zxsj20160504

△ UX策略2 – 避免在構圖中補漏留白

3zxsj20160504

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

4zxsj20160504

△ UX策略4 – 重疊設計元素,強調連續性

使用格式塔原則進行佈局設計

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

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

5zxsj201605046zxsj20160504

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

7zxsj20160504

△ UX策略6 – 標題位置與對應章節內容更靠近

8zxsj20160504

△ UX策略7 – 限制標題與章節內容在同一界限內

在不干擾使用者的前提下呈現介面變化

有一些介面變化會發生在使用者使用期間,這些變化要做到明顯但不干擾使用者。

9zxsj20160504

△ UX策略8 – 用明顯的動畫呈現介面變化

10zxsj20160504

△ UX策略9 – 將出錯的元素區分顯示出來,錯誤提醒資訊放置在表單頂部

刪除或弱化不必要的資訊

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

11zxsj20160504

△ UX策略10 – 彈出或模態視窗背景模糊處理

12zxsj20160504

△ UX策略11 – 在所有影像中最大限度地提高資料墨水比率(讓資料更凸顯)

13zxsj20160504

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

14zxsj20160504

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

15zxsj20160504

△ UX策略14 – 隱藏不常用但必要的設定、功能和資訊

提示首屏以下是否還有內容

現在大多數瀏覽器在頁面處於非活動狀態時隱藏滾動條,你需要“滾動提示”告知使用者首屏以下是否還有內容

16zxsj20160504

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

17zxsj20160504

△ UX策略16 – 新增陰影以指示深度

18zxsj20160504

△ UX策略17 – 用文字或圖形表示有更多內容

未完待續…

相關文章