慣了淺色界面的設(shè)計(jì)？本文將帶你了解深色界面的設(shè)計(jì)，聊聊深色界面下的設(shè)計(jì)細(xì)節(jié)，使你設(shè)計(jì)的深色界面在普遍的淺色系界面下脫穎而出，展現(xiàn)個(gè)性。
去年的 WWDC 上蘋果發(fā)布了 macOS Mojave 系統(tǒng)，提供了一種 Dark 模式（暗色模式），相信有些小伙伴已經(jīng)開始在體驗(yàn)了。
至于什么是 Dark 模式？簡(jiǎn)單地說(shuō)它是 macOS Mojave 系統(tǒng)的一種全新界面外觀，把所有 UI 換成黑色或者深色的一個(gè)模式。它強(qiáng)調(diào)內(nèi)容為核心，讓用戶更加聚焦內(nèi)容本身，對(duì)于從事創(chuàng)作工作的專業(yè)人士很有幫助，同時(shí)它也適合每個(gè)想要集中精力完成工作任務(wù)的用戶，所以無(wú)論你想專注的寫一篇文章，還是讀一部小說(shuō)， Dark 模式都將是種不錯(cuò)的選擇。
這也是這次主題的由來(lái)，關(guān)于深色界面的設(shè)計(jì)，深色界面它有著明顯的優(yōu)缺點(diǎn)，不太普適，設(shè)計(jì)合理能彰顯高端、優(yōu)雅、奢華的氛圍；相反，它又可能毀掉頁(yè)面中你所有精心設(shè)計(jì)的 UI ，甚至影響使用效率，體驗(yàn)上大打折扣。
以下是我在設(shè)計(jì)網(wǎng)易郵箱大師 Mac 版 Dark 模式時(shí)，整理得一些視覺上需要注意的小細(xì)節(jié)，希望對(duì)大家在設(shè)計(jì)深色相關(guān)的界面時(shí)有所幫助或啟發(fā)。
在深色界面下，文字顏色盡量不要使用純白。對(duì)于黑底白字的形式，白色文字更加容易吸睛，視覺刺激更加強(qiáng)烈，但強(qiáng)烈的同時(shí)會(huì)帶來(lái)視覺疲勞，造成不適的閱讀體驗(yàn)，甚至極端情況下的對(duì)比會(huì)使白色產(chǎn)生眩光，不利于文字的識(shí)別。
大多數(shù)研究表明，在可讀性方面深色界面相比淺色界面略差，所以適當(dāng)?shù)脑黾游淖值亩温溟g距，行高等，是在深色界面下增強(qiáng)文字可讀性的重要途徑。
在深色界面下，無(wú)襯線字體相比襯線字體可讀性更強(qiáng)，但是襯線字體相比無(wú)襯線字體在深色界面下更顯優(yōu)雅，前提是字體需要放大，留足空白。
我們應(yīng)該仔細(xì)地觀察圖標(biāo)，做出藝術(shù)性的反轉(zhuǎn)，讓它在淺色和深色界面下都能很好的傳遞表意。例如下圖的笑臉圖標(biāo)，一般在深色界面下做法可能就只換了顏色。
初看似乎沒有什么大的問(wèn)題，但是仔細(xì)觀察就會(huì)發(fā)現(xiàn)，淺色界面下使用邊框形式來(lái)設(shè)計(jì)圖標(biāo)，中間是空白的，這樣做是因?yàn)榭梢岳冒咨尘皝?lái)更好展現(xiàn)它的形狀；但是，如果把它同樣放在深色界面下，它的形狀感和體積感好像都消失了，變得有點(diǎn)奇怪，此時(shí)我們要反轉(zhuǎn)下，強(qiáng)化它的形狀和體積。
如下圖：
再比如，下面這些圖標(biāo)：
當(dāng)然，有的時(shí)候你可以根據(jù)實(shí)際情況去衡量要不要把圖標(biāo)反轉(zhuǎn)，比如考慮到圖標(biāo)風(fēng)格、統(tǒng)一性等。
按鈕的點(diǎn)擊狀態(tài)，如果在淺色界面下，一般的做法是加深按鈕背景（如下圖左），但是在深色界面下面也采用這種方式，就會(huì)發(fā)現(xiàn)點(diǎn)擊狀態(tài)下的按鈕顏色跟背景更加接近，模糊了按鈕的邊界和輪廓。
如下圖右：
所以在深色界面下，一般建議用加亮背景色的方式來(lái)處理，如下圖右：
分割線也是我們?cè)O(shè)計(jì)中常用到的元素之一，用來(lái)創(chuàng)建內(nèi)容間的視覺分割。然而，在深色界面下如果只是簡(jiǎn)單的反轉(zhuǎn)，黑底上用白線來(lái)做視覺分割，效果并不是那么理想。我們可以看個(gè)例子，下圖是寫信界面，直接反轉(zhuǎn)分割線顏色，用白線來(lái)做分割，會(huì)感覺線特別多，很干擾。
那如果我們都用黑線來(lái)做分割，這樣又會(huì)覺得比較悶，不夠精致。
所以我覺得用于不同區(qū)域之間的分割，可以用黑線，同一區(qū)域之間的區(qū)分可以是比較弱的白線，這樣顯得畫面更加細(xì)膩，而且語(yǔ)意明確，認(rèn)知簡(jiǎn)單。
相比淺色界面，深色界面下色彩應(yīng)該更亮，更飽和些。舉個(gè)例子，看下圖郵件列表的焦點(diǎn)色，相同的藍(lán)色在深色界面下顯得有點(diǎn)泛白；優(yōu)化后，藍(lán)色更純正，跟深色界面也更加匹配。
再比如，按鈕的顏色。
在深色背景中加入有彩色點(diǎn)綴，可以是品牌色或者其他顏色，這會(huì)使設(shè)計(jì)顯得更加優(yōu)雅、高級(jí)。
從色彩心理學(xué)上來(lái)說(shuō)黑色會(huì)傳遞出高端、正式、名望、權(quán)力的感覺，這也是為什么許多大品牌會(huì)圍繞黑色來(lái)做視覺設(shè)計(jì)，并且使用黑白來(lái)做主要的配色方案。
自然界中沒有百分百的黑色，我們?nèi)粘Ｉ钪锌吹胶谏鋵?shí)是深灰色，如果設(shè)計(jì)中使用了純黑色，會(huì)顯得不自然。因?yàn)榧兒谏梢詨旱挂磺校w過(guò)一切其他元素。
在深色界面下面更應(yīng)該注重視覺層次，每個(gè)版塊之間的對(duì)比要清晰明了，層次分明，否則用戶會(huì)很容易在布局間迷失，造成不好的體驗(yàn)。
深色界面給人沉重的感覺，擁擠的布局會(huì)加重這種感受，所以在深色界面下我們更應(yīng)該使用留白，或者說(shuō)是“留黑”，這樣才能平衡布局，使元素更清晰的呈遞，從而吸引用戶注意。
以上這些就是我在設(shè)計(jì)深色界面時(shí)，對(duì)一些小細(xì)節(jié)的梳理。其中有幾點(diǎn)在淺色界面下也同樣適用，只是在設(shè)計(jì)深色界面時(shí)更應(yīng)該把握好那個(gè)“度”，來(lái)彌補(bǔ)深色界面的缺點(diǎn)，揚(yáng)長(zhǎng)避短，使深色界面在普遍的淺色系界面下脫穎而出，展現(xiàn)個(gè)性。
作者：姜永超，網(wǎng)易郵箱大師資深視覺設(shè)計(jì)師，層做過(guò)短視頻，車載系統(tǒng)和后臺(tái)等產(chǎn)品，相信設(shè)計(jì)源于生活，細(xì)節(jié)成就品質(zhì)。
圖片：網(wǎng)絡(luò) / 原創(chuàng)
本文來(lái)源于人人都是產(chǎn)品經(jīng)理合作媒體@網(wǎng)易UEDC，作者@姜永超
題圖來(lái)自Unsplash，基于CC0協(xié)議
日杭州濱江區(qū)H3C等企業(yè)的員工發(fā)現(xiàn)在他們公司的門口網(wǎng)易郵箱大師正在給他們送來(lái)夏日冰飲。企業(yè)員工只需在網(wǎng)易郵箱大師搭建的展臺(tái)前，下載網(wǎng)易郵箱大師并綁定企業(yè)郵箱賬號(hào)，即可免費(fèi)領(lǐng)取夏日冰飲一份。活動(dòng)深受企業(yè)員工熱捧與好評(píng)，現(xiàn)場(chǎng)人頭攢動(dòng)，員工們紛紛前來(lái)掃碼領(lǐng)取網(wǎng)易郵箱大師送來(lái)的夏日冰飲。
“冰飲很好喝！網(wǎng)易郵箱大師的活動(dòng)不僅在炎熱的夏日給我們帶來(lái)了清涼，還給我們帶來(lái)了這么好用的移動(dòng)郵箱APP。體驗(yàn)了網(wǎng)易郵箱大師的產(chǎn)品和服務(wù)后，真心覺得這個(gè)APP使用起來(lái)比系統(tǒng)自帶的郵件管理APP更加方便。不愧是專業(yè)做郵箱服務(wù)的專家，給網(wǎng)易郵箱大師點(diǎn)個(gè)贊。” H3C企業(yè)員工小陳在網(wǎng)易郵箱大師的活動(dòng)現(xiàn)場(chǎng)告訴記者。
網(wǎng)易郵箱大師是網(wǎng)易公司依托于中文郵箱第一品牌網(wǎng)易郵箱18年的專業(yè)運(yùn)營(yíng)經(jīng)驗(yàn)，打造的一款移動(dòng)郵箱APP。網(wǎng)易郵箱大師不僅支持126、163等網(wǎng)易旗下郵箱，也支持Gmail、139郵箱、新浪郵箱、各類企業(yè)郵箱和高校郵箱等，是一款通用性非常強(qiáng)的全能移動(dòng)郵件管理工具。同時(shí)網(wǎng)易郵箱大師還擁有收發(fā)郵件快速、國(guó)家級(jí)專業(yè)安全認(rèn)證、零流量轉(zhuǎn)發(fā)附件等獨(dú)到產(chǎn)品體驗(yàn)，尤其受到企業(yè)辦公人士青睞，在移動(dòng)辦公領(lǐng)域占據(jù)重要地位。
現(xiàn)在公司不管是內(nèi)部溝通還是外部溝通，郵件都是企業(yè)員工工作中最重要的一個(gè)工具。尤其像一些企業(yè)市場(chǎng)、合作等部門的員工，每天要收發(fā)上百封郵件還會(huì)經(jīng)常出差，所以通過(guò)移動(dòng)郵件管理工具進(jìn)行郵件高效管理的需求就非常迫切。
自網(wǎng)易郵箱推出企業(yè)郵服務(wù)以來(lái)，已有包括恒大地產(chǎn)集團(tuán)、國(guó)泰君安證券、第一財(cái)經(jīng)日?qǐng)?bào)、廣州電視臺(tái)、友邦保險(xiǎn)、宅急送等超過(guò)35萬(wàn)家企業(yè)超過(guò)千萬(wàn)名用戶選擇網(wǎng)易企業(yè)郵箱的服務(wù)。在移動(dòng)端，網(wǎng)易郵箱大師同樣希望有更多的企業(yè)用戶來(lái)體驗(yàn)其推出的出色產(chǎn)品。
據(jù)網(wǎng)易郵箱大師產(chǎn)品相關(guān)負(fù)責(zé)人介紹，公司用戶是網(wǎng)易郵箱大師使用最多、粘性最大的用戶。網(wǎng)易郵箱大師將組建企業(yè)郵箱俱樂(lè)部，把可靠、安全、便捷的移動(dòng)郵件服務(wù)送達(dá)到更多的企業(yè)用戶中，并會(huì)給相關(guān)企業(yè)提供特制版網(wǎng)易郵箱大師等移動(dòng)郵件服務(wù)。
接下來(lái)，網(wǎng)易郵箱大師一方面要繼續(xù)將夏日冰飲等市場(chǎng)推廣活動(dòng)帶到更多的企業(yè)，讓更多的企業(yè)員工來(lái)體驗(yàn)和使用網(wǎng)易郵箱大師的高效服務(wù)；另一方面，通過(guò)走進(jìn)企業(yè)活動(dòng)也可以幫助網(wǎng)易郵箱大師收集更多的用戶反饋，使網(wǎng)易郵箱大師能夠持續(xù)更新和投入，為公司員工們提供最優(yōu)質(zhì)的移動(dòng)郵件服務(wù)。
日，網(wǎng)易郵箱大師APP發(fā)布了7.0版本。在版本新功能介紹中，官方強(qiáng)調(diào)：英文郵件可以在讀信頁(yè)“一鍵翻譯”，結(jié)合有道翻譯技術(shù)，翻譯準(zhǔn)確，省時(shí)高效。
1秒內(nèi)精確翻譯1000字英文郵件
據(jù)悉，網(wǎng)易郵箱大師APP7.0版本的英文郵件翻譯功能，結(jié)合了有道人工智能翻譯技術(shù)，翻譯準(zhǔn)確度高且省時(shí)高效：1000字的英文郵件內(nèi)容，不到1秒即能翻譯完成，翻譯準(zhǔn)確率超過(guò)國(guó)際同類型產(chǎn)品。
這不是網(wǎng)易郵箱第一次上線英文郵件翻譯功能。早在2007年，網(wǎng)易郵箱已經(jīng)率先在郵箱里引入了詞典功能，為用戶提供單詞翻譯。2009年，就成為了全國(guó)首家支持全文翻譯的郵箱。2014年，網(wǎng)易郵箱大師APP誕生，廣受好評(píng)的英文郵件翻譯功能也隨之上線。
此次版本升級(jí)后，當(dāng)用戶收到的郵件正文里英文單詞數(shù)量大約為正文一半時(shí)，頁(yè)面會(huì)自動(dòng)出現(xiàn)全文翻譯功能選擇。
如上圖，用戶只需點(diǎn)擊郵件正文左上方的“翻譯”按鈕，即可將英文段落翻譯成中文，方便查看。
“千字一秒”是這樣實(shí)現(xiàn)的
此次在網(wǎng)易郵箱大師APP上線的翻譯功能，其翻譯質(zhì)量的大幅提升，源于有道團(tuán)隊(duì)的通力合作。
網(wǎng)易有道翻譯產(chǎn)品相關(guān)負(fù)責(zé)人介紹，有道基于過(guò)去十幾年的機(jī)器翻譯積淀，攻克了非常多的技術(shù)難關(guān)，也對(duì)各種場(chǎng)景進(jìn)行了大規(guī)模的優(yōu)化。針對(duì)不同的行業(yè)積累了非常多垂直領(lǐng)域的語(yǔ)料，有些領(lǐng)域有單獨(dú)的模型，系統(tǒng)自動(dòng)判斷文本領(lǐng)域，分配不同的模型進(jìn)行翻譯。針對(duì)郵箱用戶高頻使用的商務(wù)貿(mào)易談判場(chǎng)景，不同的行業(yè)將會(huì)調(diào)用不同的模型，使一些行業(yè)內(nèi)特定的術(shù)語(yǔ)翻譯得更準(zhǔn)確而貼切。此外，有道翻譯在郵箱的場(chǎng)景也有了十年以上的積累，根據(jù)英文郵件寫法的諸多特點(diǎn)，有道也深入地做了很多優(yōu)化。
為了減少用戶翻譯中等待的時(shí)間，同時(shí)也大幅度地提高同時(shí)可進(jìn)行翻譯的人數(shù)，網(wǎng)易有道AI團(tuán)隊(duì)在工程方面也做了數(shù)十項(xiàng)的優(yōu)化。比如根據(jù)機(jī)器翻譯的需求，有道對(duì)GPU上的基本計(jì)算模塊進(jìn)行了針對(duì)性的重寫和優(yōu)化，大幅度提高了整體的翻譯性能；同時(shí)也采取了分布式的主從工作節(jié)點(diǎn)和服務(wù)節(jié)點(diǎn)架構(gòu)，提供了高并發(fā)、更穩(wěn)定的服務(wù)。
由此看來(lái)，網(wǎng)易郵箱大師APP此次引入高質(zhì)量有道人工智能翻譯技術(shù)，將極大提高翻譯的效率和精準(zhǔn)度。對(duì)于網(wǎng)易郵箱大師APP用戶來(lái)說(shuō)，閱讀英文郵件，so easy。
網(wǎng)易產(chǎn)品體系相互貫通 用戶體驗(yàn)更佳
網(wǎng)易郵箱大師APP產(chǎn)品負(fù)責(zé)人介紹，此次網(wǎng)易郵箱大師APP英文郵件的“一鍵翻譯”功能，是基于網(wǎng)易有道翻譯數(shù)據(jù)及AI技術(shù)上的強(qiáng)大積累。對(duì)于網(wǎng)易郵箱大師APP用戶來(lái)說(shuō)，國(guó)際化的溝通更順暢了；對(duì)于網(wǎng)易有道來(lái)說(shuō)，是人工智能技術(shù)應(yīng)用領(lǐng)域的又一次突破。可以說(shuō)，這是一次對(duì)用戶、對(duì)產(chǎn)品成長(zhǎng)都極有意義的技術(shù)貫通。
各產(chǎn)品間相互貫通，讓功能更強(qiáng)大，是網(wǎng)易一直以來(lái)的策略。這種產(chǎn)品相互貫通的策略，對(duì)于提升網(wǎng)易產(chǎn)品用戶粘性和增強(qiáng)各產(chǎn)品間的用戶互動(dòng)非常有效。未來(lái)，網(wǎng)易郵箱大師APP還將規(guī)劃接入有道精品課、嚴(yán)選好物等網(wǎng)易體系內(nèi)更優(yōu)質(zhì)的新服務(wù)和新內(nèi)容，為用戶帶來(lái)更多的驚喜。