火星網(wǎng)校
如何設(shè)計(jì)令用戶愉悅的暗黑模式主題
發(fā)布時(shí)間：2024-02-27 20:17:48 瀏覽量：184次
如何設(shè)計(jì)令用戶愉悅的暗黑模式主題
Hi,筒子們，今天我們來聊一聊幾個(gè)國內(nèi)App的暗黑模式設(shè)計(jì)。
暗黑模式主題從2019年開始風(fēng)靡，現(xiàn)在這個(gè)趨勢也是越來越盛，同樣也會(huì)成為2021年的設(shè)計(jì)趨勢之一，但是，目前國內(nèi)市場上卻沒有一家大廠摸索出了正確答案，因?yàn)檫@里面的門道太多了。
根據(jù)谷歌和蘋果提供的人機(jī)界面交互指南（指南鏈接不掛了大家可以去百度），我們可以提煉出一些設(shè)計(jì)暗黑模式主題的技巧，以下會(huì)結(jié)合幾個(gè)實(shí)例來說明。
1.基礎(chǔ)色彩
首先要知道的一點(diǎn)是，暗黑模式不是簡單地將白(默認(rèn))模式的色彩和陰影簡單地反轉(zhuǎn)。二者也是通過不同的方式來表現(xiàn)內(nèi)容的層級(jí)的。
比較直觀的看法就是，白模式通過陰影的大小來表示層級(jí)，而暗模式是通過不同程度的灰度色彩來表示層級(jí)的，灰度越淺離我們的視覺就越近。
谷歌推薦的背景基礎(chǔ)色值是#121212灰，而iOS的推薦背景色值是#000000。
所以，設(shè)計(jì)暗模式需要通過這一方法來表現(xiàn)內(nèi)容的層級(jí)，來看看微信的首頁：
微信通過不同的材質(zhì)和不同程度的灰色來區(qū)分出了內(nèi)容層級(jí)，最頂層是最近的對話框。
知乎頁面中部的卡片是通過陰影來表現(xiàn)層級(jí)的，但是這種陰影其實(shí)在灰色的背景下很難區(qū)分開來，所以兩個(gè)卡片粘在了一起。
2.文本層級(jí)通過透明度展現(xiàn)
另外我們還看到微信的白色文本分別根據(jù)內(nèi)容的層級(jí)使用了不同的透明度，這能很好地劃分出信息結(jié)構(gòu)。
當(dāng)淺色文本出現(xiàn)在深色背景上（此處顯示為黑色白色）時(shí)，應(yīng)使用以下不透明度級(jí)別：
高強(qiáng)調(diào)文字的不透明度為87％
中強(qiáng)調(diào)文字和提示文字的不透明度為60％
禁用文字的不透明度為38％
3.減少大面積鮮艷的色彩的使用
在暗黑主題中使用大面積色塊會(huì)使得用戶焦點(diǎn)模糊而不能夠集中到信息上。舉個(gè)例子：
在白模式中，粉紅色的蒙層不會(huì)分散對話框的焦點(diǎn)。但是在我們的黑暗主題中，相同的粉色蒙層會(huì)分散我們注意力。
把這個(gè)蒙層更改為黑色后，很明顯我們就專注于對話框的內(nèi)容了。
來看看58同城的暗黑模式首頁：
橙色屬于亮色系，本身很容易刺激到用戶的視覺神經(jīng)，大面積的橙色背景和多彩高飽和度的圖標(biāo)在暗模式下，使得用戶很難集中在本身就很多元的信息中，整個(gè)信息內(nèi)容結(jié)構(gòu)就顯得很混亂。
4.合理的色彩飽和度
延續(xù)上一個(gè)例子，我們可以看到過度鮮艷的色彩在暗模式下是十分不友好的，所以在設(shè)計(jì)暗模式時(shí)應(yīng)避免使用過量的飽和色，因?yàn)轱柡蜕蕰?huì)在深色背景上產(chǎn)生光學(xué)振動(dòng)，從而引起眼睛疲勞。（來自谷歌material黑暗主題設(shè)計(jì)指南）
50-400之間的閾值是合理的。
豆瓣的飽和度閾值就非常舒適了。
5.針對性對細(xì)節(jié)做優(yōu)化
另外除了色彩和內(nèi)容層級(jí)需要注意外，我們還需要針對暗黑模式做許多的細(xì)節(jié)調(diào)整。（包括圖標(biāo)和圖像）必須傳達(dá)其含義。
我們可以看看微信的這個(gè)表情圖標(biāo)其實(shí)是很怪異的，它只是簡單反轉(zhuǎn)了顏色，沒有針對性地進(jìn)行更好的設(shè)計(jì)。其實(shí)在白模式下使用空心輪廓的圖標(biāo)在暗模式下實(shí)心填充形狀會(huì)更好。
知乎首頁細(xì)節(jié)其實(shí)還不夠，基本廠牌的辨識(shí)度也已經(jīng)是沒有了，內(nèi)容層級(jí)劃分也很模糊。
建議大家需要設(shè)計(jì)暗黑模式App的事先了解下谷歌和蘋果出的人機(jī)交互指南，還是很有幫助的。
熱門課程推薦
熱門資訊
-
1. iPhone6的UI設(shè)計(jì)尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設(shè)計(jì)的尺寸規(guī)范嗎？這里為您詳細(xì)介紹iPhone6的UI設(shè)計(jì)尺寸規(guī)范，包括界面尺寸、圖標(biāo)尺寸、可點(diǎn)擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
2. 12個(gè)絕佳的UI設(shè)計(jì)網(wǎng)站，助力你的創(chuàng)作之旅!
將為大家介紹12個(gè)絕佳的UI設(shè)計(jì)網(wǎng)站,這些網(wǎng)站不僅可以為你提供靈感,還可以幫助你學(xué)習(xí)新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個(gè)面向設(shè)計(jì)師的...
-
3. 移動(dòng)端UI設(shè)計(jì)中常見的5種APP界面類型，你get到了嗎？
通過介紹移動(dòng)端UI設(shè)計(jì)中的閃屏頁、引導(dǎo)頁、浮層引導(dǎo)頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設(shè)計(jì)的基本知識(shí)
-
4. 10個(gè)免費(fèi)學(xué)習(xí)UI設(shè)計(jì)的網(wǎng)站 提升你的設(shè)計(jì)能力
怎樣可以提升你的UI設(shè)計(jì)能力!第一個(gè):站酷站酷想必是設(shè)計(jì)師都知道的一個(gè)網(wǎng)站,里面不止有UI設(shè)計(jì)的資源,還有其他設(shè)計(jì)的,不如:平面設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)、字體...
-
5. 移動(dòng)端列表頁和表單頁設(shè)計(jì)秘訣:讓你的APP點(diǎn)擊率翻倍
在移動(dòng)端設(shè)計(jì)中,列表頁和表單頁是不可或缺的部分。一個(gè)好的列表頁和表單頁設(shè)計(jì)能夠讓用戶輕松地獲取信息并產(chǎn)生點(diǎn)擊欲望,從而提高點(diǎn)擊率。本文將為你...
-
6. 推薦10本適合UI設(shè)計(jì)師看的書籍，輕松掌握技能!
對于想要提高自己的設(shè)計(jì)能力和創(chuàng)造力的小白和UI設(shè)計(jì)師來說,這本書是一個(gè)很好的選擇。4.《設(shè)計(jì)的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
-
7. 零基礎(chǔ)學(xué)UI設(shè)計(jì)要多久？培訓(xùn)完能拿多少工資？
探索零基礎(chǔ)UI設(shè)計(jì)培訓(xùn)的時(shí)長與薪資前景。了解數(shù)字藝術(shù)教育領(lǐng)域的專業(yè)課程，以及培訓(xùn)后的職業(yè)發(fā)展機(jī)會(huì)。
-
8. 物聯(lián)網(wǎng)APP UI設(shè)計(jì):創(chuàng)造智能硬件領(lǐng)域的沉浸式體驗(yàn)
ui設(shè)計(jì)應(yīng)該讓用戶一目了然,能夠快速找到所需的信息和功能。在設(shè)計(jì)過程中,應(yīng)盡量使用簡潔的圖標(biāo)、文字和色彩,避免過多的視覺干擾。符合用戶習(xí)慣:ui設(shè)...
-
9. 武漢UI設(shè)計(jì)培訓(xùn)班費(fèi)用怎么樣？想學(xué)UI設(shè)計(jì)要多少錢？
想了解武漢UI設(shè)計(jì)培訓(xùn)班的費(fèi)用是多少嗎？不知道學(xué)UI設(shè)計(jì)要花多少錢？不妨看看這篇文章，了解UI設(shè)計(jì)培訓(xùn)班的學(xué)費(fèi)價(jià)格以及學(xué)習(xí)內(nèi)容。
-
10. 設(shè)計(jì)中的色彩心理學(xué):淺析中西方色彩的歷史演變與設(shè)計(jì)應(yīng)用
摘要:本文探討了色彩的歷史演變和設(shè)計(jì)應(yīng)用。通過對色彩在早期文明社會(huì)中的實(shí)用運(yùn)用、不同文化背景下色彩觀念的差異、色彩在設(shè)計(jì)中的重要性以及新興技...
最新文章
