習慣了淺色界面的設計？本文將帶你了解深色界面的設計，聊聊深色界面下的設計細節(jié)，使你設計的深色界面在普遍的淺色系界面下脫穎而出，展現個性。

前文

去年的 WWDC 上蘋果發(fā)布了 macOS Mojave 系統，提供了一種 Dark 模式（暗色模式），相信有些小伙伴已經開始在體驗了。

至于什么是 Dark 模式？簡單地說它是 macOS Mojave 系統的一種全新界面外觀，把所有 UI 換成黑色或者深色的一個模式。它強調內容為核心，讓用戶更加聚焦內容本身，對于從事創(chuàng)作工作的專業(yè)人士很有幫助，同時它也適合每個想要集中精力完成工作任務的用戶，所以無論你想專注的寫一篇文章，還是讀一部小說， Dark 模式都將是種不錯的選擇。

這也是這次主題的由來，關于深色界面的設計，深色界面它有著明顯的優(yōu)缺點，不太普適，設計合理能彰顯高端、優(yōu)雅、奢華的氛圍；相反，它又可能毀掉頁面中你所有精心設計的 UI ，甚至影響使用效率，體驗上大打折扣。

以下是我在設計網易郵箱大師 Mac 版 Dark 模式時，整理得一些視覺上需要注意的小細節(jié)，希望對大家在設計深色相關的界面時有所幫助或啟發(fā)。

文字顏色

在深色界面下，文字顏色盡量不要使用純白。對于黑底白字的形式，白色文字更加容易吸睛，視覺刺激更加強烈，但強烈的同時會帶來視覺疲勞，造成不適的閱讀體驗，甚至極端情況下的對比會使白色產生眩光，不利于文字的識別。

文字間距

大多數研究表明，在可讀性方面深色界面相比淺色界面略差，所以適當的增加文字的段落間距，行高等，是在深色界面下增強文字可讀性的重要途徑。

文字字體

在深色界面下，無襯線字體相比襯線字體可讀性更強，但是襯線字體相比無襯線字體在深色界面下更顯優(yōu)雅，前提是字體需要放大，留足空白。

圖標形狀

我們應該仔細地觀察圖標，做出藝術性的反轉，讓它在淺色和深色界面下都能很好的傳遞表意。例如下圖的笑臉圖標，一般在深色界面下做法可能就只換了顏色。

初看似乎沒有什么大的問題，但是仔細觀察就會發(fā)現，淺色界面下使用邊框形式來設計圖標，中間是空白的，這樣做是因為可以利用白色背景來更好展現它的形狀；但是，如果把它同樣放在深色界面下，它的形狀感和體積感好像都消失了，變得有點奇怪，此時我們要反轉下，強化它的形狀和體積（如下圖）。

再比如，下面這些圖標。

當然，有的時候你可以根據實際情況去衡量要不要把圖標反轉，比如考慮到圖標風格、統一性等。

按鈕狀態(tài)

按鈕的點擊狀態(tài)，如果在淺色界面下，一般的做法是加深按鈕背景（如下圖左），但是在深色界面下面也采用這種方式，就會發(fā)現點擊狀態(tài)下的按鈕顏色跟背景更加接近，模糊了按鈕的邊界和輪廓（如下圖右）

所以在深色界面下，一般建議用加亮背景色的方式來處理（如下圖右）。

分割線

分割線也是我們設計中常用到的元素之一，用來創(chuàng)建內容間的視覺分割。然而，在深色界面下如果只是簡單的反轉，黑底上用白線來做視覺分割，效果并不是那么理想。我們可以看個例子，下圖是寫信界面，直接反轉分割線顏色，用白線來做分割，會感覺線特別多，很干擾。

那如果我們都用黑線來做分割，這樣又會覺得比較悶，不夠精致。

所以我覺得用于不同區(qū)域之間的分割，可以用黑線，同一區(qū)域之間的區(qū)分可以是比較弱的白線，這樣顯得畫面更加細膩，而且語意明確，認知簡單。

色彩

相比淺色界面，深色界面下色彩應該更亮，更飽和些。舉個例子，看下圖郵件列表的焦點色，相同的藍色在深色界面下顯得有點泛白；優(yōu)化后，藍色更純正，跟深色界面也更加匹配。

再比如，按鈕的顏色。

色彩傾向

在深色背景中加入有彩色點綴，可以是品牌色或者其他顏色，這會使設計顯得更加優(yōu)雅、高級。

色彩感知

從色彩心理學上來說黑色會傳遞出高端、正式、名望、權力的感覺，這也是為什么許多大品牌會圍繞黑色來做視覺設計，并且使用黑白來做主要的配色方案。

黑色

自然界中沒有百分百的黑色，我們日常生活中看到黑色其實是深灰色，如果設計中使用了純黑色，會顯得不自然。因為純黑色可以壓倒一切，蓋過一切其他元素。

網頁名稱：網頁深色界面下你需要注意的細節(jié)
URL鏈接：http://jinyejixie.com/news45/109145.html

成都網站建設公司_創(chuàng)新互聯，為您提供定制開發(fā)、動態(tài)網站、微信小程序、云服務器、營銷型網站建設、企業(yè)建站

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯