提升產品易用性的10個知識點

2021-7-27    ui設計分享達人

作為設計師,我們希望做出來的產品對于用戶而言易于訪問、易于瀏覽、易于理解和可供所有人使用。而我們在做頁面的過程還要考慮具有視力障礙、行動不便等殘疾類人群

萬維網的創(chuàng)始人蒂姆·伯納斯·李 (Tim Berners Lee) 也重申了這一點,他說:

“網絡的力量在于它的普遍性。無論是否殘疾,

每個人都可以訪問是一個重要方面?!?

因此,這里有十種方法可以使你的界面更易于訪問和更具包容性,并確保你是為用戶設計的產品


文章內容包含以下:

1、顏色對比

2、導航選項

3、不僅僅使用顏色來指示狀態(tài)變化

4、視覺焦點

5、預先加載

6、設計表達

7、視覺層級

8、合理交互

9、用戶測試

10、無障礙設計


1、顏色對比

色彩是設計的主要方面之一。確保背景和元素模塊之間有適當?shù)膶Ρ龋梢允褂眠m當?shù)年幱昂皖伾珜Ρ葋?

區(qū)分,突出重要信息是使你的產品更易于訪問的最簡單的方法。


這里推薦使用工具WebAIM 顏色對比度檢查器來實現(xiàn)平衡的顏色對比度。該工具允許輸入特定的十六進制代碼或從色輪中進行選擇,然后進行增量調整以達到元素之間的 AA(最低對比度)或 AAA(增強對比度)對比度標準。

網址:https://webaim.org/resources/contrastchecker/


2、導航選項

在用戶使用時,導航的便利性是最重要的因素之一

(確保產品內跨頁面的導航具有一致的命名、樣式和定位)

(為用戶提供站點搜索或站點地圖)

(通過提供方向提示例如面包屑和清晰的標題幫助用戶了解他們在網站或頁面上的位置)


3、不僅僅使用顏色來指示狀態(tài)變化

雖然顏色對于傳達信息很有用,但它不應該是傳達信息的唯一方式。在使用顏色來區(qū)分元素時,請確保始終提供不依賴于顏色感知的額外標識,以便于用戶易識別


比如在做表單的情況可以通過以下方式去做區(qū)分


(除了顏色之外,還使用星號來指示所需的表單字段)

(使用提示標簽來區(qū)分狀態(tài))

(添加說明文字)



4、視覺焦點

一些用戶使用手機端產品時很難去聚焦于某個點,作為設計者這時需要去通過手法去制造焦點引導用戶進行操作。

以手機屏幕為例,用戶閱讀的習慣分為兩種,一種是“z”習慣型另一種是“F”習慣


比如可以在用戶瀏覽路徑上去做視覺焦點,引導告知用戶進行點擊,下面是列出的有效焦點指標:

(具備清晰的對比度)

(具有與元素互補的形狀和大小)

(使用互補但引人注目的配色方案)

(好的動畫可以幫助用戶跟蹤焦點移動)

(元素位置大小等適配各種型號)


5、預先加載

在產品上不管是文字還是圖片都需要提前告訴用戶當前狀態(tài),不同的使用環(huán)境下用戶的網絡相對是有波動情況,在網絡不好的情況下用戶打開產品如果產品沒有做預加載大概率會造成用戶直接關閉產品


6、設計表達

“沒有用戶喜歡點擊他不想點的入口”聽起來比較繞,你可以這樣理解,我們平??吹降陌粹o是什么樣呢如果在頁面中我們把一個按鈕做成一個灰色上面寫著點擊進入,作為設計者的我們在遇到這樣的一個按鈕相信都會猶豫的,灰色傳達給用戶的信息是禁止不可點擊,用戶已經被培養(yǎng)出這樣一種習慣,但是遇到這種按鈕上面還寫著《點擊進入》就會造成信息傳達不準確(不僅僅是按鈕)。




(樣式符合用戶理解范圍內)

(交互給用戶合理反饋,點擊后狀態(tài)、按壓狀態(tài)、禁止狀態(tài))


7、視覺層級

建立視覺層次結構, 元素在你的頁面設計中的定位方式,并在這些相應元素之間建立一定的連貫性。


(不要擠滿屏幕,否則會提升用戶閱讀成本)

(視力受損的人可能需要放大屏幕上的元素,因此請使你的內容具有可擴展性)

(將重要信息放在視線水平附近)

(使用空格和鄰近度使內容之間的關系更加明顯)


8、合理的交互

一個好的交互能夠讓產品達到一個沉浸式體驗,相反一個差的交互會造成用戶的反感;什么是合理的交互例如在使用閱讀產品時,翻頁功能是模仿現(xiàn)實中書本的翻頁效果作用到線上就會制造出一個良好的體驗

交互不僅僅是操作反饋還包含頁面布局、元素展示、場景使用等

(符合用戶對現(xiàn)實物體的認知,達到聯(lián)覺效果)

(內容簡潔,具備吸引力)

(出現(xiàn)場景是否合情合理)

(具備反饋能力)


9、用戶測試

即使在前期工作做的足夠好的情況下,在你覺得整個產品設計易于用戶使用之后,使用產品的用戶也可能會發(fā)現(xiàn)某些地方并不像你希望的那樣友好


避免這類問題的最佳和最有效的方法是通過用戶測試,在整個產品開發(fā)項目中進行非正式評估比在項目結束時進行正式的可用性測試更有效,用戶測試有很多好處,至關重要的是你能夠了解你的產品還存在哪些不足那些設計不到位,然后針對這些不足進行問題解決



10、無障礙設計

創(chuàng)建無障礙設計最重要的部分之一在于知道它絕不是創(chuàng)新的障礙,但是它可以讓你創(chuàng)新你的設計,在做產品的時候要考慮到產品不單單只服務一部分人,所以在設計時應當考慮到具備一定障礙的群體

藍藍設計建立了UI設計分享群,每天會分享國內外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png



文章來源:站酷    作者:愛吃貓的魚_

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯(lián)系,我們立即更正或刪除。

藍藍設計m.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務



日歷

鏈接

個人資料

藍藍設計的小編 http://m.yvirxh.cn

存檔