• <input id="iosu8"><samp id="iosu8"></samp></input>
    <object id="iosu8"></object>
  • <kbd id="iosu8"><td id="iosu8"></td></kbd>
  • <input id="iosu8"><sup id="iosu8"></sup></input>
  • 深色界面下,需要注意哪些細節?

    產品小白專屬,10周線上特訓,測、練、實戰,22位導師全程帶班,11項求職服務,保障就業!了解詳情

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

    前文

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

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

    深色界面下你需要注意的細節

    深色界面下你需要注意的細節

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

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

    文字顏色

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

    深色界面下你需要注意的細節

    深色界面下你需要注意的細節

    文字間距

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

    深色界面下你需要注意的細節

    深色界面下你需要注意的細節

    文字字體

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

    深色界面下你需要注意的細節

    深色界面下你需要注意的細節

    圖標形狀

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

    深色界面下你需要注意的細節

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

    如下圖:

    深色界面下你需要注意的細節

    再比如,下面這些圖標:

    深色界面下你需要注意的細節

    深色界面下你需要注意的細節

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

    按鈕狀態

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

    如下圖右:

    深色界面下你需要注意的細節

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

    深色界面下你需要注意的細節

    分割線

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

    深色界面下你需要注意的細節

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

    深色界面下你需要注意的細節

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

    深色界面下你需要注意的細節

    色彩

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

    深色界面下你需要注意的細節

    深色界面下你需要注意的細節

     

    再比如,按鈕的顏色。

    深色界面下你需要注意的細節

    深色界面下你需要注意的細節

    色彩傾向

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

    深色界面下你需要注意的細節

    深色界面下你需要注意的細節

    色彩感知

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

    深色界面下你需要注意的細節

    深色界面下你需要注意的細節

    黑色

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

    深色界面下你需要注意的細節

    視覺層次

    在深色界面下面更應該注重視覺層次,每個版塊之間的對比要清晰明了,層次分明,否則用戶會很容易在布局間迷失,造成不好的體驗。

    深色界面下你需要注意的細節

    深色界面下你需要注意的細節

    深色界面下你需要注意的細節

    深色界面下你需要注意的細節

    深色界面下你需要注意的細節

    深色界面下你需要注意的細節

    留白

    深色界面給人沉重的感覺,擁擠的布局會加重這種感受,所以在深色界面下我們更應該使用留白,或者說是“留黑”,這樣才能平衡布局,使元素更清晰的呈遞,從而吸引用戶注意。

    深色界面下你需要注意的細節

    深色界面下你需要注意的細節

    結語

    以上這些就是我在設計深色界面時,對一些小細節的梳理。其中有幾點在淺色界面下也同樣適用,只是在設計深色界面時更應該把握好那個“度”,來彌補深色界面的缺點,揚長避短,使深色界面在普遍的淺色系界面下脫穎而出,展現個性。

     

    作者:姜永超,網易郵箱大師資深視覺設計師,層做過短視頻,車載系統和后臺等產品,相信設計源于生活,細節成就品質。

    圖片:網絡 / 原創

    本文來源于人人都是產品經理合作媒體@網易UEDC,作者@姜永超

    題圖來自Unsplash,基于CC0協議

    給作者打賞,鼓勵TA抓緊創作!
    評論
    歡迎留言討論~!
    1. 一看就會,一做就廢

      回復
    2. 一看就會,一做就廢 :arrow:

      回復
    3. 作者介紹里有錯別字,“曾”寫成了“層”

      回復
    4. 作者名字一聽就知道是自己人

      回復
    5. 我記得黑色情況下文字與背景有個專用的公式來著。

      回復
    宁夏11选5走势图