2021-7-27 ui設(shè)計(jì)分享達(dá)人
作為設(shè)計(jì)師，我們希望做出來(lái)的產(chǎn)品對(duì)于用戶而言易于訪問(wèn)、易于瀏覽、易于理解和可供所有人使用。而我們?cè)谧鲰?yè)面的過(guò)程還要考慮具有視力障礙、行動(dòng)不便等殘疾類人群
萬(wàn)維網(wǎng)的創(chuàng)始人蒂姆·伯納斯·李 (Tim Berners Lee) 也重申了這一點(diǎn)，他說(shuō)：
“網(wǎng)絡(luò)的力量在于它的普遍性。無(wú)論是否殘疾，
每個(gè)人都可以訪問(wèn)是一個(gè)重要方面?！?
因此，這里有十種方法可以使你的界面更易于訪問(wèn)和更具包容性，并確保你是為用戶設(shè)計(jì)的產(chǎn)品
1、顏色對(duì)比
2、導(dǎo)航選項(xiàng)
3、不僅僅使用顏色來(lái)指示狀態(tài)變化
4、視覺(jué)焦點(diǎn)
5、預(yù)先加載
6、設(shè)計(jì)表達(dá)
7、視覺(jué)層級(jí)
8、合理交互
9、用戶測(cè)試
10、無(wú)障礙設(shè)計(jì)
色彩是設(shè)計(jì)的主要方面之一。確保背景和元素模塊之間有適當(dāng)?shù)膶?duì)比，可以使用適當(dāng)?shù)年幱昂皖伾珜?duì)比來(lái)
區(qū)分，突出重要信息是使你的產(chǎn)品更易于訪問(wèn)的最簡(jiǎn)單的方法。
這里推薦使用工具WebAIM 顏色對(duì)比度檢查器來(lái)實(shí)現(xiàn)平衡的顏色對(duì)比度。該工具允許輸入特定的十六進(jìn)制代碼或從色輪中進(jìn)行選擇，然后進(jìn)行增量調(diào)整以達(dá)到元素之間的 AA（最低對(duì)比度）或 AAA（增強(qiáng)對(duì)比度）對(duì)比度標(biāo)準(zhǔn)。
在用戶使用時(shí)，導(dǎo)航的便利性是最重要的因素之一
（確保產(chǎn)品內(nèi)跨頁(yè)面的導(dǎo)航具有一致的命名、樣式和定位）
（為用戶提供站點(diǎn)搜索或站點(diǎn)地圖）
（通過(guò)提供方向提示例如面包屑和清晰的標(biāo)題幫助用戶了解他們?cè)诰W(wǎng)站或頁(yè)面上的位置）
雖然顏色對(duì)于傳達(dá)信息很有用，但它不應(yīng)該是傳達(dá)信息的唯一方式。在使用顏色來(lái)區(qū)分元素時(shí)，請(qǐng)確保始終提供不依賴于顏色感知的額外標(biāo)識(shí)，以便于用戶易識(shí)別
比如在做表單的情況可以通過(guò)以下方式去做區(qū)分
（除了顏色之外，還使用星號(hào)來(lái)指示所需的表單字段）
（使用提示標(biāo)簽來(lái)區(qū)分狀態(tài)）
（添加說(shuō)明文字）
一些用戶使用手機(jī)端產(chǎn)品時(shí)很難去聚焦于某個(gè)點(diǎn)，作為設(shè)計(jì)者這時(shí)需要去通過(guò)手法去制造焦點(diǎn)引導(dǎo)用戶進(jìn)行操作。
以手機(jī)屏幕為例，用戶閱讀的習(xí)慣分為兩種，一種是“z”習(xí)慣型另一種是“F”習(xí)慣
比如可以在用戶瀏覽路徑上去做視覺(jué)焦點(diǎn)，引導(dǎo)告知用戶進(jìn)行點(diǎn)擊，下面是列出的有效焦點(diǎn)指標(biāo)：
（具備清晰的對(duì)比度）
（具有與元素互補(bǔ)的形狀和大小）
（使用互補(bǔ)但引人注目的配色方案）
（好的動(dòng)畫(huà)可以幫助用戶跟蹤焦點(diǎn)移動(dòng)）
（元素位置大小等適配各種型號(hào)）
在產(chǎn)品上不管是文字還是圖片都需要提前告訴用戶當(dāng)前狀態(tài)，不同的使用環(huán)境下用戶的網(wǎng)絡(luò)相對(duì)是有波動(dòng)情況，在網(wǎng)絡(luò)不好的情況下用戶打開(kāi)產(chǎn)品如果產(chǎn)品沒(méi)有做預(yù)加載大概率會(huì)造成用戶直接關(guān)閉產(chǎn)品
“沒(méi)有用戶喜歡點(diǎn)擊他不想點(diǎn)的入口”聽(tīng)起來(lái)比較繞，你可以這樣理解，我們平常看到的按鈕是什么樣呢如果在頁(yè)面中我們把一個(gè)按鈕做成一個(gè)灰色上面寫(xiě)著點(diǎn)擊進(jìn)入，作為設(shè)計(jì)者的我們?cè)谟龅竭@樣的一個(gè)按鈕相信都會(huì)猶豫的，灰色傳達(dá)給用戶的信息是禁止不可點(diǎn)擊，用戶已經(jīng)被培養(yǎng)出這樣一種習(xí)慣，但是遇到這種按鈕上面還寫(xiě)著《點(diǎn)擊進(jìn)入》就會(huì)造成信息傳達(dá)不準(zhǔn)確（不僅僅是按鈕）。
（樣式符合用戶理解范圍內(nèi)）
（交互給用戶合理反饋，點(diǎn)擊后狀態(tài)、按壓狀態(tài)、禁止?fàn)顟B(tài)）
建立視覺(jué)層次結(jié)構(gòu)， 元素在你的頁(yè)面設(shè)計(jì)中的定位方式，并在這些相應(yīng)元素之間建立一定的連貫性。
（不要擠滿屏幕，否則會(huì)提升用戶閱讀成本）
（視力受損的人可能需要放大屏幕上的元素，因此請(qǐng)使你的內(nèi)容具有可擴(kuò)展性）
（將重要信息放在視線水平附近）
（使用空格和鄰近度使內(nèi)容之間的關(guān)系更加明顯）
一個(gè)好的交互能夠讓產(chǎn)品達(dá)到一個(gè)沉浸式體驗(yàn)，相反一個(gè)差的交互會(huì)造成用戶的反感；什么是合理的交互例如在使用閱讀產(chǎn)品時(shí)，翻頁(yè)功能是模仿現(xiàn)實(shí)中書(shū)本的翻頁(yè)效果作用到線上就會(huì)制造出一個(gè)良好的體驗(yàn)
交互不僅僅是操作反饋還包含頁(yè)面布局、元素展示、場(chǎng)景使用等
（符合用戶對(duì)現(xiàn)實(shí)物體的認(rèn)知，達(dá)到聯(lián)覺(jué)效果）
（內(nèi)容簡(jiǎn)潔，具備吸引力）
（出現(xiàn)場(chǎng)景是否合情合理）
（具備反饋能力）
即使在前期工作做的足夠好的情況下，在你覺(jué)得整個(gè)產(chǎn)品設(shè)計(jì)易于用戶使用之后，使用產(chǎn)品的用戶也可能會(huì)發(fā)現(xiàn)某些地方并不像你希望的那樣友好
避免這類問(wèn)題的最佳和最有效的方法是通過(guò)用戶測(cè)試，在整個(gè)產(chǎn)品開(kāi)發(fā)項(xiàng)目中進(jìn)行非正式評(píng)估比在項(xiàng)目結(jié)束時(shí)進(jìn)行正式的可用性測(cè)試更有效，用戶測(cè)試有很多好處，至關(guān)重要的是你能夠了解你的產(chǎn)品還存在哪些不足那些設(shè)計(jì)不到位，然后針對(duì)這些不足進(jìn)行問(wèn)題解決
創(chuàng)建無(wú)障礙設(shè)計(jì)最重要的部分之一在于知道它絕不是創(chuàng)新的障礙，但是它可以讓你創(chuàng)新你的設(shè)計(jì)，在做產(chǎn)品的時(shí)候要考慮到產(chǎn)品不單單只服務(wù)一部分人，所以在設(shè)計(jì)時(shí)應(yīng)當(dāng)考慮到具備一定障礙的群體
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
文章來(lái)源：站酷 作者：愛(ài)吃貓的魚(yú)_
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.teruid.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.teruid.com