iOS13深色UI要來(lái)了，國(guó)外老哥總結(jié)做好深色UI的8個(gè)實(shí)用...
深色系UI一直給人的感覺(jué)就是酷炫的，突出內(nèi)容的一種設(shè)計(jì)風(fēng)格，隨著蘋果iOS13和sketch深色模式的推出，已經(jīng)有越來(lái)越多的產(chǎn)品和用戶，運(yùn)用和注意到這種風(fēng)格的設(shè)計(jì)。而作為設(shè)計(jì)師的我們，更應(yīng)該掌握好這種風(fēng)格的設(shè)計(jì)，我本人也是深色系UI的忠實(shí)粉絲，所以我計(jì)劃給大家挖掘一系列國(guó)外深色系UI的設(shè)計(jì)技巧文章，和大家一起，學(xué)習(xí)好這種風(fēng)格的設(shè)計(jì)。來(lái)自apple ios13官網(wǎng)截圖
來(lái)自sketch深色模式官網(wǎng)截圖
深色主題是過(guò)去幾年中最受歡迎的風(fēng)格之一，蘋果和谷歌都將深色主題作為UI的重要組成部分。深色主題通過(guò)把亮度降低，創(chuàng)造了一個(gè)在黑暗條件下使用產(chǎn)品的舒適環(huán)境，減少了眼部疲勞。為了能做好深色UI設(shè)計(jì)，我這里總結(jié)了8個(gè)實(shí)用技巧，希望大家有些幫助。1. 避免純黑
不要在一張純黑的界面上使用純白的文字。實(shí)際上，這種非常高的對(duì)比度，會(huì)讓眼睛不舒服。
相比于完全純黑的顏色（#000000），使用深灰色作為主要界面的配色會(huì)更安全。由于在深灰色界面上文字的對(duì)比度相對(duì)于純黑色界面上文字的對(duì)比度會(huì)更小，對(duì)人眼的壓力也就小很多。另外，深灰色的界面也能有更多的顏色選擇，投影也更好做（純黑色是不好做黑色投影的）。谷歌設(shè)計(jì)規(guī)范推薦使用#121212作為深色主題的主要配色2. 避免使用太高飽和度的顏色
飽和度高的顏色在淺色界面上看起來(lái)很棒，但在深色界面上卻會(huì)讓用戶產(chǎn)生視覺(jué)抖動(dòng)，使得內(nèi)容難以閱讀。使用較淺的顏色（顏色在200-50之間）會(huì)使得內(nèi)容有更好的可讀性。飽和度降低不會(huì)降低UI的表現(xiàn)力，但可以幫助產(chǎn)品在不引起眼部疲勞的前提下保證適當(dāng)?shù)膶?duì)比度。飽和度較低的顏色可以提高可讀性，減少視覺(jué)抖動(dòng)3. 符合無(wú)障礙顏色對(duì)比度標(biāo)準(zhǔn)
確保內(nèi)容在深色模式下依然清晰易讀，內(nèi)容與背景之間的對(duì)比度要合適。谷歌設(shè)計(jì)規(guī)范推薦在文本內(nèi)容與背景之間的對(duì)比度至少要達(dá)到15.8：1的比例。使用對(duì)比度測(cè)試工具（http://uxpro.cc/toolbox/accessibility/color-accessibility/）來(lái)檢測(cè)是否符合這個(gè)標(biāo)準(zhǔn)。4. 對(duì)文字使用不同透明度來(lái)強(qiáng)調(diào)不同層級(jí)
文字在深色主題下默認(rèn)會(huì)被設(shè)置為純白色（#FFFFFF），但#FFFFFF是一種很明亮的顏色。它會(huì)在黑暗的背景下產(chǎn)生視覺(jué)“抖動(dòng)”，這就是為什么谷歌設(shè)計(jì)規(guī)范推薦使用稍微暗一些的白色：- 最需要強(qiáng)調(diào)的文本不透明度為87%
- 中等強(qiáng)調(diào)的文本不透明度為60%
小提示：淺色文本在深色背景上會(huì)比深色文本在淺色背景上顯得更粗，這就是為什么在深色模式下要使用更細(xì)的字體。選擇一個(gè)稍微暗一點(diǎn)的白色，這樣可以防止畫面形成太強(qiáng)的對(duì)比。5. 考慮界面?zhèn)鬟_(dá)的情緒
如果接到需求是為應(yīng)用做一個(gè)深色主題改版，你可能覺(jué)得只是改一下配色就萬(wàn)事大吉了，但界面所傳達(dá)出來(lái)的情緒經(jīng)常容易被忽略。這意味著深色主題和淺色主題在傳達(dá)信息上是有區(qū)別的，深色和淺色的主題風(fēng)格總是會(huì)讓用戶產(chǎn)生不同的情緒。要善用這種區(qū)別，重新思考產(chǎn)品的特性，并及時(shí)優(yōu)化自己設(shè)計(jì)。暗色模式并不是總是必須從現(xiàn)有的淺色中直接得來(lái)。
圖片來(lái)源： Sergey Zolotnikov
6.善用灰色營(yíng)造空間感
與淺色主題設(shè)計(jì)時(shí)一樣，在做深色主題設(shè)計(jì)時(shí)，同樣要達(dá)到清晰的層次結(jié)構(gòu)并需要突出界面中的重要元素。空間感是我們用來(lái)傳達(dá)元素層次結(jié)構(gòu)的工具。
在淺色模式下，我們使用陰影來(lái)突出空間感。界面空間感越強(qiáng)，投影就越寬。同樣的方法在暗色模式下就行不通了，在暗色的背景下很難看到陰影。最好是使用不同的亮度來(lái)表達(dá)元素的空間感。在谷歌設(shè)計(jì)規(guī)范中，深色主題的空間感使用不同的明度來(lái)設(shè)計(jì)。Music Player UI by Martin Mro?7. 允許用戶從普通模式切換到暗色模式
很容易讓系統(tǒng)決定何時(shí)開(kāi)啟或關(guān)閉深色主題。然而，這種設(shè)計(jì)決策可能會(huì)導(dǎo)致糟糕的用戶體驗(yàn)。這相當(dāng)于從用戶那邊搶奪了控制權(quán)，并讓系統(tǒng)為他們做出決定。所以最好不要使用自動(dòng)切換模式，而應(yīng)該允許用戶使用UI控件打開(kāi)（或關(guān)閉）深色主題。用戶應(yīng)該能夠根據(jù)自己的實(shí)際需要來(lái)手動(dòng)選擇不同的模式。8. 測(cè)試淺色和深色的主題
最后，需要查看UI在這兩種情況下的外觀細(xì)節(jié)，并根據(jù)需要調(diào)整設(shè)計(jì)以適應(yīng)不同情況?？梢钥紤]在天黑以后，在開(kāi)燈的環(huán)境下，測(cè)試自己的產(chǎn)品。原文：http://uxplanet.org/8-tips-for-dark-theme-design-8dfc2f8f7ab6「評(píng)論」功能設(shè)計(jì)總結(jié)全球設(shè)計(jì)機(jī)構(gòu)都在用的設(shè)計(jì)思維框架UI中國(guó) 專業(yè)用戶體驗(yàn)設(shè)計(jì)平臺(tái)
本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)
點(diǎn)擊舉報(bào)。
