激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

iOS13深色UI要來(lái)了，國(guó)外老哥總結(jié)做好深色UI的8個(gè)實(shí)用技巧

發(fā)布時(shí)間：2024-02-27 09:11:56 瀏覽量：119次

全文共1759詞，閱讀大約需要10分鐘，記得點(diǎn)擊上面的 藍(lán)字 關(guān)注我喲！

深色系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è)試工具（
https://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%

  • 禁用文本使用38%的不透明度

小提示：淺色文本在深色背景上會(huì)比深色文本在淺色背景上顯得更粗，這就是為什么在深色模式下要使用更細(xì)的字體。

選擇一個(gè)稍微暗一點(diǎn)的白色，這樣可以防止畫面形成太強(qiáng)的對(duì)比。

5. 考慮界面?zhèn)鬟_(dá)的情緒

如果接到需求是為應(yīng)用做一個(gè)深色主題改版，你可能覺(jué)得只是改一下配色就萬(wàn)事大吉了，但界面所傳達(dá)出來(lái)的情緒經(jīng)常容易被忽略。

不同的背景顏色所帶來(lái)的感知是不同的。

這意味著深色主題和淺色主題在傳達(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ì)。

更高的明度，更輕的界面。

層級(jí)越高，顏色就越明亮

Music Player UI by Martin Mro?

7. 允許用戶從普通模式切換到暗色模式

很容易讓系統(tǒng)決定何時(shí)開啟或關(guān)閉深色主題。然而，這種設(shè)計(jì)決策可能會(huì)導(dǎo)致糟糕的用戶體驗(yàn)。這相當(dāng)于從用戶那邊搶奪了控制權(quán)，并讓系統(tǒng)為他們做出決定。

所以最好不要使用自動(dòng)切換模式，而應(yīng)該允許用戶使用UI控件打開（或關(guān)閉）深色主題。用戶應(yīng)該能夠根據(jù)自己的實(shí)際需要來(lái)手動(dòng)選擇不同的模式。

深色主題控制開關(guān)

8. 測(cè)試淺色和深色的主題

最后，需要查看UI在這兩種情況下的外觀細(xì)節(jié)，并根據(jù)需要調(diào)整設(shè)計(jì)以適應(yīng)不同情況?？梢钥紤]在天黑以后，在開燈的環(huán)境下，測(cè)試自己的產(chǎn)品。

原文：
https://uxplanet.org/8-tips-for-dark-theme-design-8dfc2f8f7ab6

作者：Nick Babich

譯者: 彩云Sky

本文翻譯已獲得作者的正式授權(quán)

授權(quán)截圖

---- 留言區(qū) ----

熱門課程推薦

熱門資訊

請(qǐng)綁定手機(jī)號(hào)

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請(qǐng)保持電話暢通！
確定