24小時查詢服務熱線
香港網頁集團
  • 公司概覽 
    • 概覽 
    • 客戶群組 
    • 職位空缺 
  • 網頁設計 
    • 網頁設計 
    • 人才外判計劃 
  • 網絡行銷 
    • SEO搜尋引擎優化 
    • SEM搜尋引擎行銷 
    • 社交網絡推廣策略及推廣 
    • EDM 電郵宣傳策略及設計 
  • 政府資助 
    • BUD專項基金(BUD Fund) 
    • EMF中小企業市場推廣基金 
    • TVP科技券計劃 
  • 作品展示 
  • 最新資訊 
    • 網頁設計 
    • 網上推廣 
    • APP開發 
  • 聯絡我們 
  • sitemap 
Home » UI設計技巧:如何提高UI設計的可用性
  • 近期文章

    • 無可替代的神秘力量:探索黑色配色方案在網頁設計中的高級應用
    • 掌握7大網店設計原則,打造顧客「一逛就買」的完美購物體驗
    • 如何挑選和購買好的網域?開啓網站維護征程的關鍵一步
    • 網站維護的主要工作有哪些?讓網站持續吸引流量
    • 8種超簡單的平面設計技巧!讓品牌海報從「能看」升級為「吸睛」
  • 網上推廣

    • 網站維護的主要工作有哪些?讓網站持續吸引流量
    • 【網絡推廣核心邏輯】三大實戰策略突破Meta廣告的「創意疲勞」瓶頸
    • 提速網站FCP分數:全面攻略助你搶佔香港SEO先機
    • 精準流量變現的關鍵:香港企業如何利用SEO提升會員轉化率?
    • SEO公司緊急警報:網站流量突然暴增?小心黑帽SEO植入
  • 網頁設計

    • 無可替代的神秘力量:探索黑色配色方案在網頁設計中的高級應用
    • 掌握7大網店設計原則,打造顧客「一逛就買」的完美購物體驗
    • 如何挑選和購買好的網域?開啓網站維護征程的關鍵一步
    • 8種超簡單的平面設計技巧!讓品牌海報從「能看」升級為「吸睛」
    • 商城設計秘籍:解密產品列表頁設計的五大黃金技巧
  • APP開發

    • APP設計技巧:如何利用重疊設計來增加APP的魅力
    • UX設計技巧:如何做好APP的BAR設計?提升整體APP的用戶體驗
    • APP設計策略:如何將信息對比應用APP設計中,以提高用戶體驗?
    • UI設計指南:底部彈出框需要重視哪些設計原則
    • Headspace APP設計案例分析:APP設計實踐中需運用哪些UX設計定律

UI設計技巧:如何提高UI設計的可用性

分類: 最新資訊, 網頁設計 Tags: #UI設計技巧, UI設計, 網頁設計 日期: 2021-02-22

如何提高UI設計的可用性?無論是網頁設計還是APP設計,要確保產品的可訪問性是一件知易行難的事情。很多UX設計師的工作都是由一系列的小決定堆疊起來,最終積累構建成一個龐大的產品。但同樣這些小決策所帶來的小問題也會影響每一個用戶,尤其是對身體、認知有障礙的用戶,造成巨大的障礙。因此,我們需要善於提升產品的可訪問性,繼而影響整個產品的可用性。

UI設計技巧:如何提高UI設計的可用性

UI設計技巧

如何提高UI設計的可用性?

UI設計技巧一:給用戶提供較大的目標區域

UI設計技巧:如何提高UI設計的可用性

UI設計技巧

每個人面對光標和交互目標時,或多或少都高估或低估自己的交互操作效率。如果給用戶設置的目標區域或交互元素太小,也沒有提示出發的懸停效果,雖然絕大多數健全用戶會在操作過程快速通過微調和校正來儘快達到交互目標,但對有行動或認知障礙的用戶而言,會造成非常大的麻煩,甚至是巨大的挑戰。

通過給用戶提供更大的目標交互區域以及懸停效果,可以讓用戶更方便地同頁面元素交互,從而減少更多不確定性。

UI設計技巧二:使用高對比色彩

UI設計技巧:如何提高UI設計的可用性

UI設計技巧

視力障礙用戶在閱讀低色彩對比度內容時,會明顯感覺到困難,提高UI對比度不僅對這類用戶友好,而且對於降低視覺疲勞也有顯著效果。

另外,根據W3C規定,高於4.5:1的色彩對比度,能給界面帶來更清晰的輪廓,也更利於用戶分辨不同元素和控件邊界。

UI設計技巧三:不單純使用色彩表達

UI設計技巧:如何提高UI設計的可用性

UI設計技巧

同樣對於視力有障礙的用戶而言,單純使用色彩向他們傳遞「禁止」、「完成」等含義,在大多情況下會顯得不夠清晰,甚至他們可能無法直接識別。再者,顏色本身的含義是後天被賦予,部分是被約定俗成,但並不是每個人對此都有足夠清晰的認知,甚至同一種色彩在不同文化和場景會表達出截然相反的含義,例如:白色在西方國家代表純潔,但對於東亞國家而言是死亡、葬禮之意。

因此,通過清晰的文本和符號協助色彩完成信息的傳達,會讓UI信息更加清晰直觀,甚至當你去掉色彩是,UI界面中的內容和文本同樣能被用戶正確識別。

UI設計技巧四:為連結和按鈕添加指引性文本標籤

UI設計技巧:如何提高UI設計的可用性

UI設計技巧

按鈕和連結上對應的文本不應該是簡單的「是否」、「確定」、「取消」,在很多語境中,這些詞彙會有多種理解方式,容易給用戶帶來誤解。

為連結和按鈕添加指引性更強的文本標籤,能幫助用戶了解按鈕實際的功能和指向性,也便於有視力障礙用戶無需過多猜測。

除此之外,按鈕和連結文本要控制好色彩對比度,吸引用戶快速關注,從而提高UI的可訪問性。

UI設計技巧五:使用有意義的標題和結構

UI設計技巧:如何提高UI設計的可用性

UI設計技巧

對用戶而言,閱讀長篇大論的文本是有門檻的,相反結構化文本在這方面會強很多。

就算文本內容不多,也要確保分段清晰,帶有明確主題總結的小標題,能讓用戶立刻抓住段落的核心信息,保證他們在瀏覽過程不會因為走神而找不到內容。此外,標題除了具有總結性,最好使用表述性語句,方便用戶理解內容功能,保證標題和內容的相關度足夠高。

UI設計技巧六:用佔位符演示表單內容

UI設計技巧:如何提高UI設計的可用性

UI設計技巧

表單是界面中極為重要的組件之一,為了保持界面乾淨整潔,使用佔位符描述表單內容是一種常見的手段。如果用戶輸入時佔位符消失,他們可能會忘記應該輸入什麼內容或採用什麼樣的樣式。

為了降低認知負荷,直接使用對應字段格式的佔位符來展示給用戶,通過字段輸入框外確定文本告知用戶具體輸入的字段。這樣不管什麼時候,用戶都不會存在不清楚填寫什麼問題的情況。

UI設計技巧七:用清晰報錯指引幫助用戶

UI設計技巧:如何提高UI設計的可用性

UI設計技巧

在填寫表單字段時,即使有明確的指引,用戶依然有相當大的概率填寫錯誤,這個時候報錯提示就顯得十分重要。

用戶在填寫表單過程中難免會出現,這時要確保錯誤提示的色彩對比度足夠強,方便用戶能夠定位。同時兼顧有視力障礙的用戶,儘可能簡單用詞,告訴用戶如何解決這些錯過,避免用戶去猜。

UI設計技巧八:使用高對比度的焦點指示器

UI設計技巧:如何提高UI設計的可用性

UI設計技巧

雖然絕大多數用戶都會使用鼠標和觸控板操控,但依然有部分用戶習慣使用鍵盤,再者再進行多字段表單輸入時,使用鍵盤Tab按鍵快速切換也的確比鼠標交互要快。

當用戶使用鍵盤進行快速切換,選中按鍵和輸入框的焦點指示器,儘可能使用對比度高的色彩,方便用戶清楚知道當前選中的控件,以便產生疑惑或模糊不清的感覺。

提高控制界面可訪問性,能兼顧更大範圍用戶,有效延長產品本身的價值,從而提高產品所帶來的轉換。

Share This Post!

Subscribe to our RSS feed. Tweet this! StumbleUpon Reddit Digg This! Bookmark on Delicious Share on Facebook
訂閱電子報 公司最新資訊 Inspirr咨詢熱線
公司最新資訊
Inspirr咨詢熱線
公司最新資訊
Inspirr咨詢熱線
    • 網頁設計
    • 平面設計
    • 網上推廣
    • 程式開發
    Inspirr網頁設計香港
    公司資訊
    概覽
    職位空缺
    服務範圍
    網站設計流程
    SEO網站優化
    手機程式開發
    平面設計
    作品案例
    網頁設計案例
    手機程式案例
    多媒體設計案例
    平面商業設計案例
    聯繫我們
    • inspirr Facebook
    • inspirr vimeo
    • inspirr blog
    • 雅虎認證官網
    • 新浪微博認證

    Inspirr網頁設計公司專業設計網站

    網頁設計、網上商店、編寫程序、網上顧問、網上廣告、網上行銷等。我們擁有優秀專業的團隊,獨特的網頁設計功能,Web Design等技術,秉持網上商店品質、創新、服務的經營理念,集合設計、科技及網上推廣的元素。

    inspirr地址

    香港上環德輔道中248號東協商業大廈6樓601室

    Inspirr聯繫電話

    (852) 3749 9734

    Inspirr郵箱

    Copyright @ 2023 Inspirr Creation. All rights reserved.

    友情鏈接: 香港網頁設計 公司網站管理