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

    • UI設計基礎知識:使用分屏式設計時需注意哪些事項
    • SEO優化技巧:如何正確設定301轉址,將網站改版的傷害將至最低
    • 網頁設計技巧:如何利用卡片式設計來直觀高效地傳遞介面信息
    • 分析本港目前主流的網絡廣告經營重點!助力商家快速提升業績
    • 【重視首頁設計的好處】哪些網頁設計技巧能製作令人怦然心動的首頁
  • 網上推廣

    • SEO優化技巧:如何正確設定301轉址,將網站改版的傷害將至最低
    • 分析本港目前主流的網絡廣告經營重點!助力商家快速提升業績
    • Google Ads三月產品更新整理:哪些廣告投放技巧能帶來更多回報
    • 2023年SEO優化怎麼做?掌握四大SEO優化技巧,輕鬆提升網站競爭力
    • 如何利用SEO優化技巧來加強YouTube行銷的成效
  • 網頁設計

    • UI設計基礎知識:使用分屏式設計時需注意哪些事項
    • 網頁設計技巧:如何利用卡片式設計來直觀高效地傳遞介面信息
    • 【重視首頁設計的好處】哪些網頁設計技巧能製作令人怦然心動的首頁
    • UI設計技巧:如何做好微交互來增加產品的魅力值
    • 如何讓網站設計更具吸引力?這六種配色方案可以幫到你!
  • APP開發

    • Headspace APP設計案例分析:APP設計實踐中需運用哪些UX設計定律
    • APP設計技巧:設計優秀的新手引導體驗,激發用戶使用APP的積極性
    • 如何提高UI設計的精緻度?掌握這五個UI設計技巧
    • APP設計技巧:掌握這些APP設計細節,讓你的APP變得更加精緻
    • 【案例分析】韓國UI設計特點 提升作品的質感和設計感

UI設計基礎知識:Dark Mode的設計要點有哪些

分類: 最新資訊, 網頁設計 Tags: #UI設計基礎知識, UI設計, 網頁設計 日期: 2021-04-12

自iOS和Andriod相繼推出Dark Mode後,Dark Mode成為了APP UI設計中的一個必備選項。從Light Mode過渡到Dark Mode,我們需抽離原來的慣性思考,從UX設計的視角出發,探討用戶到底想要怎樣的Dark Mode效果。

UI設計基礎知識:Dark Mode的設計要點有哪些

UI設計基礎知識

UI設計基礎知識:Dark Mode需遵循哪些設計原則?

在進行APP UI設計之前,首先我們要建立對Dark Mode設計的正確思維,才能確定UI設計的出發點及落腳點。也就是說,在設計開始到結束這個過程,我們都需要遵循Dark Mode的設計原則來進行。

● Dark Mode設計原則一:保證操作上的熟悉性

UI設計基礎知識:Dark Mode的設計要點有哪些

UI設計基礎知識

無論產品有多少Mode,我們都應該確保用戶能通過相同操作而獲得相對應的預期結果,而不是影響用戶的慣性操作動線,否則會破壞用戶對產品早已形成的心理模式。

● Dark Mode設計原則二:維持平台上的一致性

UI設計基礎知識:Dark Mode的設計要點有哪些

UI設計基礎知識

Dark Mode的設計工作並不能僅針對某一終端設備來進行,而是針對所有終端設備。這就要求我們需要綜合各個終端設備的特點,通過不斷試驗來保持產品UI設計在各終端設備的屬性上,能保持一致性,包括顏色、外觀以及模式切換等。

● Dark Mode設計原則三:清晰的信息層級

UI設計基礎知識:Dark Mode的設計要點有哪些

UI設計基礎知識

無論用戶正在使用哪種模式,他在相同界面所關注的內容都是一致。因此,我們在設計Dark Mode過程,需繼續保持Light Mode的信息層級特性,確保用戶能輕鬆地獲取想要的信息以及完成主要的操作。

● Dark Mode設計原則四:無障礙操作

UI設計基礎知識:Dark Mode的設計要點有哪些

UI設計基礎知識

關於「無障礙操作」這一設計原則,我們大致可分解為四個方面來分析:

1. 視覺無障礙設計:應遵循WCAG(Web內容無障礙指南)。

2. 聽覺無障礙設計:應確保界面所有空間在沒有聲音時都能正常使用。

3. 行動無障礙設計:應給予輔助功能(如語音控制功能),幫助用戶完成操作。

4. 認知無障礙設計:應配備輔助理解工具(如翻譯、釋義、鏈接等),幫助用戶理解其含義,並保證信息的準確性。

● Dark Mode設計原則五:保持簡單

UI設計基礎知識:Dark Mode的設計要點有哪些

UI設計基礎知識

「簡單交互」一直是用用戶體驗設計的核心,目的是讓產品更容易被使用,甚至沒有經驗的用戶都可通過簡單的學習快速掌握產品的正確使用方法。在進行APP UI設計過程中,Dark Mode應延續Light Mode「簡單交互」的原則,保證用戶獲取簡單、掌握簡單、操作簡單。

UI設計基礎知識:Dark Mode的設計要點有哪些?

簡單來說,Dark Mode的設計原則主要是偏向「交互」而言,下面我們從「視覺設計」出發,探討如何從視覺方面將Dark Mode更好地呈現出來。

● Dark Mode設計要點一:避免使用純黑色

在我們的認知中,純黑色往往被定義為「百搭色」,然而套入到UI設計中純黑色卻是一個極為尷尬的顏色。即使在Light Mode的界面中,我們很少會看到純黑色的元素出現,而是大多會使用深灰色替代。

UI設計基礎知識:Dark Mode的設計要點有哪些

UI設計基礎知識

純白背景與純黑文字搭配,我們的眼睛往往會因為這種巨大的顏色亮度落差而造成視覺刺激,需要一定時間去適應。另外,長時間觀看這種光線對比懸殊的畫面,眼睛也會明顯感覺到疲勞。

UI設計基礎知識:Dark Mode的設計要點有哪些

UI設計基礎知識

同樣道理,純黑背景與純白文字組合所呈現視覺感受殊途同歸,結論不言而喻。因此我們在設計Dark Mode界面時,盡量避免使用純黑色。

● Dark Mode設計要點二:避免使用高純色

在Light Mode下,純度(飽和度)較高的顏色往往會帶給我們激情、生動、活力的感受,同時純色與淺色背景恰到好處的對比度,也會讓我們的眼睛很好地適應且不會出現違和或刺眼的感覺。

UI設計基礎知識:Dark Mode的設計要點有哪些

UI設計基礎知識

但個別純色放到Dark Mode後會出現恍惚、震動的視覺感受,可讀性差,容易造成視覺疲勞,影響界面整體的用戶體驗。面對這種情況,我們需要對顏色進行減低純度的處理,使元素更容易被識別和閱讀。

● Dark Mode設計要點三:規範使用顏色對比

在UI設計過程中,無論是文字、圖標、圖標,亦或是圖像,都應該確保與背景顏色的對比度,以幫助有視力障礙或閱讀困難人群能更好地使用產品,從而提升產品的價值。

UI設計基礎知識:Dark Mode的設計要點有哪些

UI設計基礎知識

根據WCAG2.0(Web內容無障礙指南2.0)對比度的標準,界面元素和背景的對比度至少要滿足AA級標準,即4.5:1的對比度。在iOS規範中,建議對比度至少滿足7:1;在Andriod規範中,因涉及不同背景層級的概念,甚至要求主要文字與最深色背景的對比度達到15.5:1的標準。

UI設計基礎知識:Dark Mode的設計要點有哪些

UI設計基礎知識

因此,我們可以根據產品特性建立屬於自己的對比度規範標準,保證讓用戶看到且影響判斷的元素,與背景顏色對比度不低於4.5:1。

● Dark Mode設計要點四:規範設置元素層級

界面內各元素都是用戶獲取信息的途徑,規範設置界面內元素的層級,是提升產品用戶體驗的關鍵。從Light Mode 過渡到Dark Mode,保持各個元素層級一致的同時,Dark Mode也需要一套全新的設計理論方法:

UI設計基礎知識:Dark Mode的設計要點有哪些

UI設計基礎知識

▶ 組件(包括區塊、卡片等):設置不同透明度,通過與背景色不同明度的對比,產生視覺效果差,讓用戶第一時間看到他們想要的內容,還可清晰地分辨距離自己更近的內容。

▶ 文字:不同優先級的文字,設置不同透明度,有效保證用戶的閱讀效率,同時還能幫助他們更好地區分清晰邏輯關係,從而提高該界面的用戶留存率。

● Dark Mode設計要點五:自由切換

UI設計基礎知識:Dark Mode的設計要點有哪些

UI設計基礎知識

當我們使用智慧型手機啟動Dark Mode時,系統會彈出「是否支持根據時間自動切換兩種模式」的問題,這種建議有點像「到了傍晚手機會自動切換到護眼模式」的設置。然而,護眼模式不會將手機界面進行翻天覆地的改變,而是適當地增加屏幕色溫、減低顏色對比度,以緩解眼睛疲勞之感。

但Dark Mode明顯不是這樣的操作,而是改變我們對界面的視覺感受,價值Dark Mode並不能完全傳達Light Mode相同的情感訴求,這種設置有可能會給用戶提供更差的體驗。因此,將選擇權交給用戶,在應用顯眼的位置或設置界面提供選項,讓用戶根據喜好自由且主動地完成模式切換。

● Dark Mode設計要點六:場景測試

UI設計基礎知識:Dark Mode的設計要點有哪些

UI設計基礎知識

Dark Mode並不適合所有場景使用,例如在日間白天或燈光環境下,Light Mode的白底黑字特性能讓界面很好地適應光照環境下,但這種情景下反而會讓Dark Mode處於劣勢。

我們需要根據不同的使用後環境、場景的特性,針對Dark Mode中的元素進行反覆測試與調整,保證無論是白天還是夜間,都能清晰讀取信息、舒適實用應用,最終達到理想效果。

了解有關Dark Mode的設計原則與要點後,我們需要將這些理論融入到實際的UI設計工作中,並驗證這些理論是否符合公司的產品應用以及用戶的使用場景。如果您還想了解更多關於Dark Mode的內容或正在找一間專業靠譜的網站製作公司為您打點一切,歡迎諮詢我們!

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.

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