2022-5-16 純純
iOS作為UI/UE設計的風向標，一直是行業的引領者，不管你愿不愿意承不承認，他的每一次更新變化總能帶動UI設計行業的一些大大小小的變革，并且產生更多的追隨者，比如當年的iOS7開始的扁平化設計風格，對后續設計風格的影響直到現在已經7年了。
在最近半年，iOS在UI設計風格上最大的變革莫過于DarkMode（深色模式），在DarkMode之前，我們熟悉的UI界面往往都是淺白色界面為主，而從iOS13開始正式使用了DarkMode，界面突然可以變深色了，蘋果官方說這樣設計可以讓眼睛更舒服的長時間閱讀，為革命保護視力，而且更加省電增長續航，具體結果我們不得而知，需要科學家們去驗證了，但是對于我們設計師來說帶來的挑戰就是要“黑白無常”了。
其實DarkMode從測試版算起已經差不多推出了有半年的時間了，一些知名的APP產品早已經有了自己的兼容方案，同時iOS原生界面也給了我們很多最佳實踐案例，按道理大家對于DarkMode的設計方式方法應該已經掌握了差不多了，但直到這幾天微信正式推出了自己的DarkMode兼容方案，才發現對DarkMode的探索還需要設計師們多多努力。謹以此文表達一下自己的觀點，不妥之處敬請海涵。
列表試圖（TableView）是iOS中最常見的界面組件，一般常見于設置與欄目列表頁面
iOS設置界面的淺色模式和深色模式看起來都非常協調。
下面我們看看微信發現頁面，這個頁面和iOS設置是很相似的。
如果單獨看微信發現頁面的淺色模式實際效果還是不錯的。
但是直接轉換到深色模式下就感覺突然差的很多了，甚至可以說是有點難看，這次微信真的做了一次黑天鵝？
到底是什么原因讓微信發現頁面在深色模式下視覺體驗如此之差呢？
我們不妨將兩個功能布局都相似的深色進行放在一起進行一下比較
在色彩這塊在這兩個頁面中微信和iOS基本保持一致，四層灰度設計能更好的保持頁面整體干凈整潔且層次分明，但是被A背景色上，微信的背景色選擇了黑色偏綠的顏色，應該是微信設計師還是想體現出產品的標志色原色。
文字的顏色也較iOS略微深一點，但是在整體上影響并不大。
看來在主要色彩上并沒有什么問題，那么為什么微信這個界面與iOS界面比起來視覺上要感覺差一些呢？
下面來看一下圖標
圖標上的差別主要在于線寬與外框，微信采用無外框統一線寬的線形圖標，iOS采用的是有外框剪影圖標。
我們我們把圖標進行互換會怎么樣呢？
觀察到了嗎？別看錯了！
是的，我把故意位置做了對調，左邊是iOS，右邊是微信。替換圖標后的微信明顯加分不少，整個界面都整齊多了，而iOS換了圖標后明顯變得不夠整齊了，潦草很多。
那么結論是微信的無框線性圖標在深色模式下兼容有問題？是的的確如此。但是等一下，還有一些細節你注意到嗎？換了圖標的微信界面和之前的iOS界面比起來明顯還是有點不夠整齊，為什么呢？
來我們回過頭來從細節再看一下iOS界面。
我們按照這個思路把剛才微信替換圖標界面再排序一下！
界面視覺體驗明顯整齊了很多是不是！
為什么細線圖標和無框圖標會在深色背景表現不夠好，而在淺色背景下就沒問題呢？
是不是所有的UI都會存在這樣的問題呢？
我們再來看一些例子：
看來結論是一樣的，線性圖標在深色背景下的表現都是差強人意，反觀帶框圖標適應性很強，淺色和深色模式下均能良好的適配，我來分析一下原因。
當年伽利略用望遠鏡往天上看，發現木星比金星大，換成肉眼看后金星則比木星大。他認為是眼睛的某種視覺特性造成了這種現象。
德國物理學家赫爾曼把這種錯覺稱為輻照錯覺，就是說在黑暗背景下，亮度越高的物體看起來面積越大。
再來看一張圖片
哪個圓圈看起來更大，顯然是黑色背景下的白色圓形，實際上這只是一種錯覺，所有圓圈是一樣大。
光亮刺激會使得神經元產生非線性放大作用，導致刺激比實物本身看起來更大，白色圓形更亮，所以看起來更大一些。
線性圖標是用線條勾畫圖案達到隱喻效果，一般線粗是2px~6px像素。
設計師在設計時候都是以最終視覺作為參考，而設計稿本身多是淺色背景，所以在淺色背景的映襯下圖標視覺會顯得稍大，視覺基本是平衡的，假如設計是4px而呈現出的效果其實是6px左右。
是不是覺得哪里有點不對了？按照這個邏輯黑色背景下白色線圖標不應該是視覺更大、更明顯嗎？
我們還需要考慮一個因素，那就是色彩，之前的幾個界面案例的線性圖標都是彩色的，特別是黑色背景下，不同色彩的圖標放在一起，會有明顯的忽大忽小的感覺，會讓界面感覺非常凌亂。
是不是感覺黃色最大，紅色的最??？但是其實是一樣的，這還是相同形狀的，要是圖標形狀不同感受會更明顯
看一個實際中的例子：
由于都是單色線性圖標，在淺色和深色下表現還都不錯的，但是單色圖標略顯界面單調，并不太建議這么設計。
毫無疑問，未來的UI場景需要適配多背景色風格，圖標除了具備好看隱喻之外，更需要具備抗干擾性
帶框圖標是一個不錯的解決方法，大膽預測帶框圖標會將成為未來一段時間圖標設計主流！
1：深色模式中灰度色階在一個界面最多可分為四層。
2：為了適配深色模式，今后有框圖標將會成為圖標設計風格主流。
3：同樣為了適配深色模式，細線圖標將會被淘汰，剪影和粗線圖標會流行起來。
4：圖標除了個體設計上用心，在排列上也會極大影響到頁面的整合視覺，光譜排列法是個不錯的選擇。
原文地址：站酷
作者：殘酷de樂章
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司