<em id="09ttv"></em>
    <sup id="09ttv"><pre id="09ttv"></pre></sup>
    <dd id="09ttv"></dd>

        • 提升產(chǎn)品易用性的10個知識點

          2021-7-27    鶴鶴

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

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

          “網(wǎng)絡(luò)的力量在于它的普遍性。無論是否殘疾,

          每個人都可以訪問是一個重要方面。”

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


          文章內(nèi)容包含以下:

          1、顏色對比

          2、導(dǎo)航選項

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

          4、視覺焦點

          5、預(yù)先加載

          6、設(shè)計表達

          7、視覺層級

          8、合理交互

          9、用戶測試

          10、無障礙設(shè)計


          1、顏色對比

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

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


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

          網(wǎng)址:https://webaim.org/resources/contrastchecker/


          2、導(dǎo)航選項

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

          (確保產(chǎn)品內(nèi)跨頁面的導(dǎo)航具有一致的命名、樣式和定位)

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

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


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

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


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


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

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

          (添加說明文字)



          4、視覺焦點

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

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


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

          (具備清晰的對比度)

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

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

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

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


          5、預(yù)先加載

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


          6、設(shè)計表達

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




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

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


          7、視覺層級

          建立視覺層次結(jié)構(gòu), 元素在你的頁面設(shè)計中的定位方式,并在這些相應(yīng)元素之間建立一定的連貫性。


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

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

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

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


          8、合理的交互

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

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

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

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

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

          (具備反饋能力)


          9、用戶測試

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


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



          10、無障礙設(shè)計

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

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

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



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

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

          免責(zé)聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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



          日歷

          鏈接

          個人資料

          藍藍設(shè)計的小編 http://m.sdgs6788.com

          存檔

          久久夜色精品国产噜噜麻豆 | 久久久青草青青亚洲国产免观| 久久午夜福利无码1000合集| 青青热久久国产久精品 | 欧美精品乱码99久久蜜桃| 热久久视久久精品18| 久久超碰97人人做人人爱| 国产一级持黄大片99久久| 伊人精品久久久久7777| 88久久精品无码一区二区毛片| 伊人久久久AV老熟妇色| 精品乱码久久久久久夜夜嗨| 久久WWW免费人成一看片| 久久久久亚洲AV片无码下载蜜桃| 久久99精品久久久久久| 囯产极品美女高潮无套久久久| 久久精品国产69国产精品亚洲| 伊人久久五月天| 久久精品无码av| 99久久99久久精品国产片果冻| 久久久无码精品亚洲日韩京东传媒 | 久久人人妻人人爽人人爽| 久久亚洲2019中文字幕| 久久99精品国产99久久| 亚洲精品无码久久久影院相关影片 | 久久亚洲国产午夜精品理论片| 99久久精品免费看国产一区二区三区 | 国产精品久久久久免费a∨| 精品人妻伦一二三区久久| 99久久99久久| 久久电影网一区| 国产精品久久久久久影院| 久久久婷婷五月亚洲97号色| 亚洲国产精品无码久久久蜜芽 | 久久夜色精品国产噜噜亚洲a| 久久99精品久久久久久水蜜桃| 亚洲国产二区三区久久| 久久精品国产影库免费看| 欧美久久综合性欧美| 91麻精品国产91久久久久| 国产成人精品久久亚洲|