為了設計更好的深色模式

2020-4-23    ui設計分享達人

通過一些案例進行比較與實驗,探索如何將UI深色模式設計的更好。

iOS作為UI/UE設計的風向標,一直是行業(yè)的引領者,不管你愿不愿意承不承認,他的每一次更新變化總能帶動UI設計行業(yè)的一些大大小小的變革,并且產生更多的追隨者,比如當年的iOS7開始的扁平化設計風格,對后續(xù)設計風格的影響直到現(xiàn)在已經7年了。



在最近半年,iOS在UI設計風格上最大的變革莫過于DarkMode(深色模式),在DarkMode之前,我們熟悉的UI界面往往都是淺白色界面為主,而從iOS13開始正式使用了DarkMode,界面突然可以變深色了,蘋果官方說這樣設計可以讓眼睛更舒服的長時間閱讀,為革命保護視力,而且更加省電增長續(xù)航,具體結果我們不得而知,需要科學家們去驗證了,但是對于我們設計師來說帶來的挑戰(zhàn)就是要“黑白無?!绷?。



其實DarkMode從測試版算起已經差不多推出了有半年的時間了,一些知名的APP產品早已經有了自己的兼容方案,同時iOS原生界面也給了我們很多最佳實踐案例,按道理大家對于DarkMode的設計方式方法應該已經掌握了差不多了,但直到這幾天微信正式推出了自己的DarkMode兼容方案,才發(fā)現(xiàn)對DarkMode的探索還需要設計師們多多努力。謹以此文表達一下自己的觀點,不妥之處敬請海涵。


從一個“列表頁面”說起:

列表試圖(TableView)是iOS中最常見的界面組件,一般常見于設置與欄目列表頁面


iOS設置界面的淺色模式和深色模式看起來都非常協(xié)調。

下面我們看看微信發(fā)現(xiàn)頁面,這個頁面和iOS設置是很相似的。


如果單獨看微信發(fā)現(xiàn)頁面的淺色模式實際效果還是不錯的。

但是直接轉換到深色模式下就感覺突然差的很多了,甚至可以說是有點難看,這次微信真的做了一次黑天鵝?

 

到底是什么原因讓微信發(fā)現(xiàn)頁面在深色模式下視覺體驗如此之差呢?

我們不妨將兩個功能布局都相似的深色進行放在一起進行一下比較


組成色彩分析:

在色彩這塊在這兩個頁面中微信和iOS基本保持一致,四層灰度設計能更好的保持頁面整體干凈整潔且層次分明,但是被A背景色上,微信的背景色選擇了黑色偏綠的顏色,應該是微信設計師還是想體現(xiàn)出產品的標志色原色。

文字的顏色也較iOS略微深一點,但是在整體上影響并不大。


看來在主要色彩上并沒有什么問題,那么為什么微信這個界面與iOS界面比起來視覺上要感覺差一些呢?

下面來看一下圖標


圖標設計分析:


圖標上的差別主要在于線寬與外框,微信采用無外框統(tǒng)一線寬的線形圖標,iOS采用的是有外框剪影圖標。

我們我們把圖標進行互換會怎么樣呢?



觀察到了嗎?別看錯了!

是的,我把故意位置做了對調,左邊是iOS,右邊是微信。替換圖標后的微信明顯加分不少,整個界面都整齊多了,而iOS換了圖標后明顯變得不夠整齊了,潦草很多。


那么結論是微信的無框線性圖標在深色模式下兼容有問題?是的的確如此。但是等一下,還有一些細節(jié)你注意到嗎?換了圖標的微信界面和之前的iOS界面比起來明顯還是有點不夠整齊,為什么呢?

來我們回過頭來從細節(jié)再看一下iOS界面。


我們按照這個思路把剛才微信替換圖標界面再排序一下!

界面視覺體驗明顯整齊了很多是不是!


疑問:

為什么細線圖標和無框圖標會在深色背景表現(xiàn)不夠好,而在淺色背景下就沒問題呢?

是不是所有的UI都會存在這樣的問題呢?

我們再來看一些例子:


看來結論是一樣的,線性圖標在深色背景下的表現(xiàn)都是差強人意,反觀帶框圖標適應性很強,淺色和深色模式下均能良好的適配,我來分析一下原因。


當年伽利略用望遠鏡往天上看,發(fā)現(xiàn)木星比金星大,換成肉眼看后金星則比木星大。他認為是眼睛的某種視覺特性造成了這種現(xiàn)象。

德國物理學家赫爾曼把這種錯覺稱為輻照錯覺,就是說在黑暗背景下,亮度越高的物體看起來面積越大。


再來看一張圖片


哪個圓圈看起來更大,顯然是黑色背景下的白色圓形,實際上這只是一種錯覺,所有圓圈是一樣大。


光亮刺激會使得神經元產生非線性放大作用,導致刺激比實物本身看起來更大,白色圓形更亮,所以看起來更大一些。


線性圖標是用線條勾畫圖案達到隱喻效果,一般線粗是2px~6px像素。



設計師在設計時候都是以最終視覺作為參考,而設計稿本身多是淺色背景,所以在淺色背景的映襯下圖標視覺會顯得稍大,視覺基本是平衡的,假如設計是4px而呈現(xiàn)出的效果其實是6px左右。


是不是覺得哪里有點不對了?按照這個邏輯黑色背景下白色線圖標不應該是視覺更大、更明顯嗎?


我們還需要考慮一個因素,那就是色彩,之前的幾個界面案例的線性圖標都是彩色的,特別是黑色背景下,不同色彩的圖標放在一起,會有明顯的忽大忽小的感覺,會讓界面感覺非常凌亂。


是不是感覺黃色最大,紅色的最小?但是其實是一樣的,這還是相同形狀的,要是圖標形狀不同感受會更明顯


看一個實際中的例子:

由于都是單色線性圖標,在淺色和深色下表現(xiàn)還都不錯的,但是單色圖標略顯界面單調,并不太建議這么設計。


毫無疑問,未來的UI場景需要適配多背景色風格,圖標除了具備好看隱喻之外,更需要具備抗干擾性

帶框圖標是一個不錯的解決方法,大膽預測帶框圖標會將成為未來一段時間圖標設計主流!



結論

1:深色模式中灰度色階在一個界面最多可分為四層。

2:為了適配深色模式,今后有框圖標將會成為圖標設計風格主流。

3:同樣為了適配深色模式,細線圖標將會被淘汰,剪影和粗線圖標會流行起來。

4:圖標除了個體設計上用心,在排列上也會極大影響到頁面的整合視覺,光譜排列法是個不錯的選擇。



轉自:站酷-

分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://bouu.cn

存檔