深色模式該從何處著手設計又要考慮哪些因素？一起來看看~
其實回顧我們常用的APP，有很多都更新了深色模式，而且每個APP對深色的定義和設計都有差異。
實際上深色模式已經來臨，而且在很多產品中都能發現它的身影，之后也會愈加流行。那么設計師面對深色模式，該從何處著手設計又要考慮哪些因素呢？
本文就為大家提供一份全面的總結。文章目錄如下：
1. 需求趨勢
過去一年以來，Android 10和iOS 13上都適配了深色模式，而且Apple和Google也一直致力于將資源和注意力投入到深色模式中，這也讓深色模式備受用戶的關注。
2. 專注內容
深色模式在弱光環境下具有更好的可讀性，讓我們更專注于眼前的屏幕。同時深色的背景會降低內容周圍元素的影響，特別是以圖片和視頻為主的應用，讓用戶更專注于內容。
作為內容消費型應用的Netflix ，把深色背景作為默認設計樣式，深色的設計讓用戶更能集中注意力，延長使用時間。
3. 減輕刺激
相對于其他顏色，深色系的設計在夜晚看著最舒服。可能晚上玩手機不用擔心光線太刺眼，但是深色模式對護眼并沒有什么幫助，只能說可以減少對眼睛的刺激。
4. 提高續航
深色模式更省電只適用于OLED屏幕。OLED面板的每個像素點可以單獨發光，當使用深色模式時，部分像素點被熄滅，只點亮部分像素，屏幕的一部分相當于處在休眠狀態，所以會更加省電。
在深色模式下，Apple重新審視了iOS中UI樣式和顏色的含義，讓我們來看看在iOS上設計深色模式帶來的變化。
語義化顏色（Semantic Colors）
所謂語義化顏色，就是不再通過某一固定的RGB色值來描述顏色，而是根據用途來描述，讓界面元素可以自動適配當前的外觀模式。
淘寶團隊就參考了蘋果官方的適配建議，通過語義化顏色的方式進行適配，使適配成本大幅降低。設計師根據不同UI元素的特性先期制定顏色語義化規則，進而技術在框架層面通過「顏色自動反轉」技術實現顏色反轉。
系統顏色
除了語義化顏色，Apple還提供了9種預定義的系統顏色，在淺色和深色模式中，這些顏色會動態變化，支持整個系統的外觀，同樣也可以自適應選定的界面樣式。
模糊與動態效果
在iOS13上，蘋果引入了4種模糊效果和8種動態效果，它們自動適應iOS界面樣式。這是在淺色和深色模式下不同的模糊效果。
蘋果還在iOS深色模式排版套件中引入4種動態效果，其中3種為疊加效果，1種分隔效果。
谷歌提供了廣泛的文檔支持，幫助設計師了解深色主題如何在Android生態系統中運行。
Elevation（陰影）
UI界面元素間的投影最能讓用戶清晰地感知用戶界面的深度。在設計深色主題時，組件將保留與淺色主題相同的默認陰影組件。Elevation越靠上, 顏色就會越淺。
無障礙性與對比
深色UI設計中的背景應足夠暗以顯示白色文本。設計師要注意背景和文字之間至少使用15.8:1的對比度。這樣可以確保將正文放在最前面時，能通過WCAG（Web內容無障礙指南，使網站內容更容易訪問）的AA標準。
顏色
深色模式必須避免飽和的顏色，以免引起眼睛疲勞。相反，設計師應專注于使用不飽和的顏色，以增加清晰度。主色和輔色的選擇還取決于對淺色和深色UI主題的考慮。
文字不透明度
在深色背景上設計淺色文字時，高度強調的文字不透明度為87％；一般提示文字的不透明度為60％；禁用文字的不透明度為38％。
蘋果和谷歌都利用各自的設計原則，為深色模式設計做準備工作。在實際設計過程中，不單需要這些基本原則，更重要的是要注意設計深色模式的實用要點。
設計深色背景時不是簡單的把白變成黑，而是對背景使用比較暗的色調，以減少眼睛疲勞。
在淺色模式中，我們傾向于用細微的陰影來傳達界面深度，使用起來更加自然。但是在大多數深色模式下，陰影的效果并不明顯，通常用顏色的深淺來傳達界面的層級關系。
關鍵點：注意應用場景
在知乎的深色模式中，背景的設計從深到淺使用了三級灰度，讓頁面的層級更分明。
一級灰度的應用場景主要是大的背景色，使用面積相對比較大顏色最深；二級灰度的應用場景是選項的背景色，根據選項的數量設置使用面積，位置排布比較靈活；三級灰度的顏色最淺，使用面積最小，通常用在分割線中。
白底黑字和黑底白字帶給我們的用眼體驗是不一樣的。設計不當的深色模式常常因為強對比而變得很刺眼，同時為了提高對光線的吸收虹膜會張得更開，更容易造成眼部疲勞。
關鍵點：文字間的對比
深色模式中，文字的用色通常是純灰色，不同位置的文字例如標題、正文和注釋使用深淺不同的顏色作對比。上圖是深色的微信，就利用這種方法來區分不同文字內容，展示文字層次關系。
另外每個應用的定位都不一樣，界面中想傳達的信息也有差異，所以要注意不同的設計思路。
關鍵點：文字與背景的對比
已經更新深色模式的應用主要分為兩大類，一類屬于工具型應用例如QQ、微信、百度網盤等，這類應用追求的是信息的有效傳達，在設計時文字內容和背景色的區分比較明顯。
上圖是百度網盤的深色模式，可以看出來標題文字與背景有很明顯的對比，保障了用戶使用時的可操作性和易讀性。
這樣的設計不需要用戶過于沉浸式的閱讀，只需要幫助用戶快速找到有用的信息并方便使用，這是工具型應用在設計深色模式時必備的原則。
另一類屬于內容型應用例如知乎、簡書等，這些應用更注重沉浸式的閱讀體驗，因為用戶通常會在某個界面中停留很久來查看內容，所以需要文字與背景的低對比度為閱讀營造柔和的氛圍。
簡書的深色模式中，文字與背景的對比關系就設計得很弱，整個界面呈現出灰色調，這樣的設計有助于在弱光環境下的長時間閱讀和瀏覽。
深色模式應該避免使用特別鮮艷的顏色，較高的明度和飽和度會與深色背景形成強烈的對比，讓頁面的可讀性變差并加深刺激。
關鍵點：降低色彩明度
在由淺變深的過程中，知乎對改變了界面中所有圖標的顏色。界面里面的圖標和主題按鈕的色彩，在色相、飽和度上都沒有變化，但是明度被不同程度的降低，保證了在不同光照條件下的內容的可讀性。
這是深色模式中處理色彩的一種方法，雖然在淺色界面中，我們更喜歡鮮艷的顏色，但明度低的顏色更適合深色主題。匹配這兩個模式另一個比較好的方法是創建互補的色板。
無論深色或者淺色，都只是產品向用戶呈現的一種界面狀態，最終的目的是為了更良好的使用體驗。
不管選擇什么樣的模式，都要記得從產品自身出發，并牢記這幾點：
文章來源：優設 作者：Clip設計夾
財務和金融相關的應用是一個相對專業的分支，在這個領域當中創造體驗優異的設計并不是一件簡單的事情。身為資深設計師Taras Bakusevych 在這篇文章當中，分享了10個確保這類產品足夠優秀的核心設計原則。
為何深色模式看起來不自然？它的實用性到底怎么樣？深色模式是不是對眼睛更健康？結合文獻，我們一起來探究深色模式的種種！
在過去的幾年中，深色模式一直是用戶最期待的一個功能。你可以自由切換你喜歡的模式來適應當前的場景，iOS和Android也都在2019年布局了系統級的深色模式，深色模式可獲得出色的視覺體驗，尤其是在弱光環境中……有助于你專注地開展工作，因為內容會較為顯眼，而顏色加深的控制項和窗口則會隱入背景之中。但真是這樣嗎，或者只是一種實際上弊大于利的操作？
雖然各種軟件界面的色調和顏色會有所不同，但是對深色模式的處理方式都是在深色背景上顯示明亮文本和界面元素的配色方案。相比之下，在淺色背景上顯示深色文本和界面元素的配色方案，在這里我們稱之為淺色模式。
而事實上，深色模式比淺色模式早了幾十年。在其最初的階段，深色模式并不是一種有意的解決方案，而僅僅是當時計算顯示設備是陰極射線管（CRT），且只能顯示單色的顯示，屏幕看上去就是黑的，黑底白字或者黑底綠字就是計算機行業的早期狀態。直到1980年代彩色顯示器發明后，微軟視窗系統上線之后，黑底顯示才退出主流。蘋果在1984年推出“麥金塔”個人電腦，第一次發布采用圖形用戶界面，由此開啟了計算機屏幕白底顯示的主流之路。
ibm 5151單色監視器
淺色模式出現的確切時間很難確定，但可以追溯到施樂Parc圖形用戶界面，它也極大地影響了早期蘋果的“麥金塔”和其他操作系統，該界面使用了以白色背景為主的深色文本和界面元素。它與顯示技術的進步和現代圖形用戶界面的出現密切相關。這種能夠顯示色彩的且更先進的RGB CRT顯示器拉開了淺色模式的序幕。
1973年的施樂Alto是最早使用輕型接口模式的計算機之一
深色模式的實用性有多少，每個人看法也不一樣。盡管深色模式的界面可能不像淺色模式那樣觀感清晰，但深色模式的界面卻具有一定的魅力，可以讓你聯想到新穎，高端，精致，神秘，力量，奢華這些詞。但是，黑色也是一種會引起人們強烈的情感一個顏色，并且在過度使用時很容易使人無法承受。
2019年9月，蘋果公司上線深色模式（Dark Model）時，在官網上如是宣傳道。從iPhone到Mac，當庫克決定在蘋果公司幾乎所有產品上線深色模式、甚至要求所有在AppStore上架的應用都必須兼容深色模式時，安卓陣營的谷歌、華為、三星等頭部公司也紛紛在其手機中推出了深色模式，相應地從WhatsApp到微信等全球主流的應用也都推出了深色模式。
但是，想要獲得良好的深色模式是相對比較難的。一方面，深色模式迫使放大瞳孔來捕獲必要的視覺信息，從而導致整體清晰度的降低。而同時界面中高亮的部分又迫使我們的瞳孔縮小去適應亮度，以便提高清晰度。這也就能理解為什么白色背景上的黑色文本在你的眼睛中通常會顯得更清晰的原因。
擴大的瞳孔讓光線更多，但感覺到的銳度受到損害
行業對深色模式追逐的群羊效應，也進一步加劇、放大了一個見解：深色模式對眼睛更友好更健康！
但是，事實并非如此。對于一些有散光的人來說，在某種程度上深色模式對他們的眼睛來說更糟糕，深色模式比淺色模式更友好更健康的科學仍有待討論。斯坦福·拜爾斯眼科研究所的眼科專家對此表示：“鑒于文獻中的數據，我認為深色模式對眼睛沒有任何的友好和健康?！?nbsp;這種深色模式對眼睛疲勞和潛在的眼睛健康的影響時，使用時間可能比設備的亮度或亮度更重要。
根據美國驗光協會的說法稱，大多數人的眼睛在某種程度上都患有散光，但通常不會引起注意。據美國眼科學院統計，每三個美國人中就一個存在散光的情況，1.5億美國人需要佩戴眼鏡來矯正視力；香港理工大學針對2700多人的臨床檢測發現，在21歲的30歲的香港人中，近40%以上患有100度以上散光。
一起看下面的說明性圖像。即使你有完美的視覺，你也很可能在黑色背景上看到白色文字周圍的光暈。
淺色模式與深色模式
如果增加文字并降低文字的大小，這種效果可能會更強：
右邊的圖像你應該會看到更多的光暈，如果你有散光癥狀，深色模式可能會讓你看屏幕更費勁。在深色模式下，虹膜打開以接收更多的光，并且瞳孔的變形在眼睛上產生了更加模糊的焦點，因此，當你在深色屏幕上看到淺色文本時，其邊緣似乎滲入黑色背景，也就是所謂的“光暈效果”。雖然深色模式可能更適合夜晚等弱光環境下使用，但不一定能幫助更好地閱讀，對于散光患者來說，可能還會加劇視疲勞。
當然，從實用性上講，深色模式也有它的好處，深色模式利用OLED屏幕在純黑的背景下不發光的特性，確實能有效的省電，讓你的電子設備續航上提升很大，這也是很多人一直在追求深色模式的一個重要原因，只要手機續航強比啥都重要！這也可能是蘋果公司決定在幾乎所有產品上線深色模式的一個原因。
另外深色模式更有利于給用戶營造一種沉浸體驗，對于視覺娛樂應用尤為如此。當你想突出顯示特定類型的內容時，深色模式會特別有用。豆瓣、數字尾巴、網易云音樂是我常用的幾個軟件，它們都已經適配了深色模式。在這種模式下你的目光會更加注意到電影的海報、數碼產品和充滿活力的音樂專輯上。
豆瓣、數字尾巴、網易云音樂的深色模式
一是由于我們人腦的組織結構造成的，從多年來的多項科學研究和調查得出的結論是，從物種進化來看，人類99%的時間都是在白天中活動，人腦更傾向于在淺的背景上顯示深色的圖像。所以無論白天還是黑夜，淺色的背景都可以讓你更快地專注于顯示的元素，而深色的背景則使其難以辨別文字和視覺界面元素，從而影響你的閱讀效果并最終使你的眼睛疲勞。 其實從世界各地多個洞穴中發現的史前壁畫也能說明為什么我們傾向于喜歡淺色模式。
追逐獵物的獅子，法國Chauvet Cave，約公元前30,000-28,000
德國帕紹大學曾經做過一次測試。在該研究要求參與者閱讀屏幕上的正極性（白色背景上的黑色文本）或負極性（黑色背景上的白色文本）的文本。隨后，參與測試的人員會執行基本的校對任務，例如查找拼寫或語法錯誤。研究人員還測量了每種模式下參與者的閱讀速度。結果是所有參與者在正極性條件下的表現都會更好，他們檢查出更多的錯誤以及閱讀的速度更快。
可讀性差異
另一個學習發現正極性對于在顯示器上讀取小文本特別有利。人腦具有更快的可讀性，更喜歡在光線背景下顯示的深色文本和物體。
二是由于含有大量藍光的光源會使我們眼睛不舒服，當我們談論屏幕對眼睛的潛在破壞性影響時，我們通常是在談論“藍光”，這是由短、高能量波長構成的光譜的一部分。研究發現藍光可能是導致眼睛疲勞的一個因素，但指出長時間不眨眼的干眼也是導致眼睛疲勞的一個更嚴重的原因，當然也有是因為字體太小，以及散光這樣的原因。
當我們身處暗室或是在黃昏或夜晚時，眼睛會切換成不同的視覺模式；在弱光環境下，人眼會從對綠色敏感變成對高能量藍光敏感，這代表我們在大量的接收藍光，因此對刺眼強光的敏感度會增強。這類情形對駕駛人而言并不陌生，當他們被來車車頭燈的強光照射時，特別是使用現代化氙氣燈或LED頭燈的車輛，可能會暫時喪失視力。
平板電腦、智能手機和其他電子顯示屏，不僅改變了我們所接觸的光譜，也使我們的視覺行為發生轉變。我們必須意識到，我們現在用于“近距離”視物的時間比以往多得多，這通常是因為背景亮度太暗所致。
在德國光學公司蔡司官方網站上，對于藍光也作一分為二的評價：“好處是當外界環境變亮也就是藍光較多時，身體便釋放出血清素—它是其中一種快樂荷爾蒙以及皮質醇—這是一種壓力荷爾蒙。這兩種荷爾蒙能讓我們保持清醒，富有活力，同時也應用于冬季抑郁和失眠的治療中。但過多的紫外光和藍紫光可能會對肉眼造成損傷，除了可能導致令人難受的結膜和角膜發炎，也可能會破壞眼睛的晶狀體（例如白內障），尤其是傷害我們的視網膜（黃斑病變）?！?
在WWDC 2019大會上，蘋果宣布了iOS13的深色模式功能，在令人興奮之余，作為設計師和開發人員，我們應該考慮的該如何去實現它。蘋果和安卓已經發布了為應用程序設計深色模式的設計指南。當然，沒有硬性規定要求遵循他們提供的設計指南，這些只是指導原則。
由于Material Design設計語言的原因，投影的占比是非常大的。在淺色模式下還好，但這不太適用于深色模式，因為深色背景上的黑色陰影在視覺上不容易察覺，為此安卓還提供了在深色模式下不同層級的卡片與投影上的參考。
根據設計文檔來看，iOS背景為純黑色，色值為＃000000，Google 則更喜歡深灰色，色值為＃121212。
通過提供的設計指南，我們可以輕易上手來設計和開發我們的軟件，但要注意的是深色模式并不是簡單的與淺色模式顏色對調，必須為所有的元素進行單獨配色。
淺色模式下的白色不會在深色模式下轉換成純黑色
這樣也就能理解為什么很多軟件并沒有全部去適配新的深色模式，一方面使用場景決定的，另一方面就是深色模式并不是簡單地換個換個顏色就行，很多元素需要重新設計和開發。
在去年的 WWDC 大會上，蘋果人機交互團隊的設計師曾對 macOS 的深色模式使用場景做了進一步的解釋。
他指出，只有閱讀瀏覽或是內容創作型 App 才需要長期啟用深色模式，比如文字或代碼編輯。它們會借助黑底白字的高對比度特性來讓用戶視線保持集中，其它大部分軟件對于深色模式的需求反而并不強烈。
或則你可以通過使用場景去選擇，在明亮的環境中使用淺色模式，在昏暗的環境中使用深色模式。
但是在大多數情況下，真正幫助你避免眼睛疲勞的是不要整天盯著屏幕，而不是糾結到底用深色還是淺色模式。
轉自：站酷-
微信是一種生活方式。作為月活超 10 億的國民級產品，它有著獨特的設計之道。
同時，微信也是互聯網界的一個異類，張小龍曾在微信公開課上回應道：「我們只是守住了做一個好產品的底線，居然就與眾不同了」。
好產品自然是體驗和價值至上。下面，我就為大家解讀微信的用戶體驗設計。
先從最簡單的二次確認講起。
微信針對首頁消息和收藏列表的刪除操作，做了二次確認的微創新。像同類 IM 聊天工具，如 iOS 短信、Facebook Messenger、飛聊等等，二次確認都是采用底部系統彈窗。這樣做，從程序架構的角度來看兼容性和通用性更強。
而從體驗設計的角度來看，則剛好相反，因為從第一次刪除操作，到第二次確認系統彈窗。之間的目標距離太長，耗時也就變長了。根據菲茨定律（Fitts’ Law），獲取目標的時間取決于目標的距離和大小。這意味著提升交互的效率，不僅需要減少距離，同時還要增加目標大小。
△ 收藏列表
回過頭看來微信，就是這樣設計的。二次確認是在第一次的基礎上延展，距離幾乎為 0，同時，目標按鈕的寬度也增加了幾倍，大大地提升了交互效率。
其實，商業和用戶體驗往往是有沖突的。而微信廣告很好的平衡了這一點。
通過豐富有趣的互動體驗式創意，或畫圓、或畫方、或畫愛心，吸引大家主動參與互動。
1. 開放首條評論
另外，首條評論功能讓品牌像朋友一樣與大家對話，利用明星效應，從而帶動更多人參與評論，有效提升評論區活躍度和廣告點擊率。
△ 朋友圈劉雯廣告
以劉雯發布的朋友圈廣告為例，大表姐把款的 vivo X30 系列手機交到你手中，并在首條評論中邀請你幫她拍照。數十萬用戶積極回復劉雯，評論率高于歷史均值 40 倍+，「你這么漂亮怎么拍都好看」、「天天給你拍」，大表姐的魅力折服了眾多用戶，有效提升了品牌的親和力與好感度。
2. 打開儀式 · 最強震動級別
在交互方面，如果你是 iPhone 用戶，可以體驗到 Taptic Engine 線性震動馬達，通常力度由輕到重分別是 Light、Medium、Heavy。在打開廣告的那一刻，它給你的是最強震動級別，滿滿的儀式感！整個微信應該找不到第二個這樣級別的震動了。
再舉一個震動的例子，當你的好友拍攝了時刻視頻后，可以看到 TA 的頭像右上角多了一個藍色的小圈圈，雙擊它就能看到好友的時刻視頻了。
當然，你雙擊沒有拍攝時刻視頻的好友，TA 的頭像會左右晃動，并且會有 Failure 的震動反饋，動畫和震動節奏完美匹配，這個體驗就像你解鎖 iPhone 輸錯密碼時的震動是一樣的。
△ 沒有時刻視頻時的反饋
我們做產品設計時也一樣，對于用戶的操作，應當給予清晰明了的反饋，幫助用戶更好地理解信息。
微信的起步階段是基于手機來做 App，不基于 PC 來做，PC 端只是輔助，而現在，它的跨平臺能力也逐漸增強。
一周前，微信 PC 版「微信測試版 for Windows」發布了 2.9.0 的內測，同步了移動端的新功能，主要有兩點：
支持打開小程序，也可以玩「貪吃蛇」「跳一跳」等小游戲了。
△ Windows 微信客戶端
另外，此前的微信 PC 端只支持引用文字消息，也沒有達到手機上引用消息的視覺效果。此次更新中，還新增了很多支持的應用類型，包括但不限于圖片/視頻、表情包、公眾號鏈接、小程序、文件等。
如此看來，Mac 端的更新也不遠了，可以期待一下。
最近的微信更新了，除了引入深色模式之外。值得一提的是，語音消息的交互體驗得到了優化，上滑轉文字更方便了。
此前的方式是按住說話，滑到轉文字按鈕，說完松開手指后，才把語音解析成文字。
現在交互則少了一步操作，達到了實時邊說邊轉文字的功能。別小看這一步界面上的優化，它背后代表的是微信語音識別能力上的技術突破。
△ 語音實時轉文字
微信有很多隱性和顯性的錨點，隱性錨點就比如你打開的這篇文章，關閉后，再重新點進來，還是顯示上次閱讀的位置。
△ 訂閱號列表
顯性的錨點就比如上面這個：當你刷公眾號列表時候，如果有新文章更新，標題欄會出現一個錨點按鈕，點擊它讓你快速回到頂部，方便查看文章。
△ 朋友圈「跳到還沒看的位置」
基于此，在新版微信朋友圈中，增加了一個「跳到還沒看的位置」。很多信息流產品是往下刷內容，直到給你一個分界線提示：下面內容已經看過了。而微信這是一個逆向操作，我認為這個功能還是很有必要的，因為經常會有刷朋友圈刷到一半聊天退出去，當回來查看朋友圈時，需要重新拉到底部，費時費力。
《在你身邊，為你設計》一書中有提到語音聽筒播放的優化。大家都知道，手機帶有距離感應器，在感應到耳邊貼近時，屏幕會關閉以節省電力，并且避免由于耳朵與屏幕的觸碰導致的誤操作。
微信在聊天界面中，也啟用了距離感應，以實現手機貼近耳邊時，自動將語音從揚聲器切換到聽筒進行播放，這樣你可以用最自然的姿勢來聽語音，這是一個很好的體驗。
但要完美地實現這個體驗，就需要解決距離感應器的時延問題。播放語音時，如果你非常迅速地將手機移至耳邊，這時候距離感應器并不會同樣迅速地對這個動作產生反饋。大約在延遲了 300 毫秒后，感應器發出信號，微信將 iPhone 的屏幕關閉。而在這個時間內，你的耳廓極有可能已經觸碰到了 iPhone 的屏幕上。觸碰的位置大部分時候是左上角的返回按鈕區域。于是很容易出現手機移至耳邊，語音戛然而止。
△ 延時響應判斷流程圖
為了解決這個問題，微信設計了一個解決辦法：在響應返回操作時，先等待 500 毫秒，這時候如果偵聽到距離感應器有發出信號，則認為是貼耳的動作，此情況下不執行返回操作，如上圖所示。而 500 毫秒的延時大部分時候你是不會感知到的。這一解決辦法極大降低了貼耳時候的誤操作。
在微信的產品設計中，我們看到了交互的細微迭代和背后的技術突破，我們看到了商業創意與用戶體驗的平衡。給用戶帶來希望，讓創造者體現價值，這就是微信的設計之道。
文章來源：優設 作者：洋爺
缺省頁指頁面的信息內容為空或信息響應異常的狀態；設計缺省狀態的作用不僅是引導用戶在異常邊界狀態的操作提示，同時也是安撫用戶體驗情緒的重要場景；更重要的是為邊界場景營造出良好用戶體驗。通過分析缺省狀態產生的原理，從而更為準確地把握交互缺省頁的設計原則。
談到缺省頁面可能是設計師最容易忽略輸出的范圍，可能直到對接的開發同學提出來，「這個頁面，如果沒有數據的時候，該怎么顯示?。俊?。為了更好地把控設計缺省頁交互狀態，首先要了解缺省頁出現的原理。App 頁面內容（包括圖片、文字、數據字段等等）都是請求服務器數據，順利返回后，正常顯示到客戶端頁面。在了解清楚基礎實現邏輯后，就可以開始梳理、整理缺省狀態的設計思路。
△ 圖1 缺省狀態的場景梳理圖
缺省狀態包括：系統層、信息層、空白層。
系統層：指當用戶請求服務器時，返回提示請求提交失敗，并檢測到失敗原因時呈現的頁面；例如：加載失敗、服務器異常、無網絡等；頁面一般會有重新請求的快捷按鈕。文案上可做失敗原因的細分描述，也可節約成本使用網絡異常的統一文案。
信息層：請求服務器數據成功，但返回的數據異常的頁面；例如：內容已刪除、內容已下架、內容不存在；文案內容以提示數據類型的缺失為主。顯示形式除了常有的全屏缺省圖，還會出現在數據列表下單一內容缺失的缺省模塊化的情況，例如：單一作品在書架上顯示已下架。
空白層：請求服務器數據成功，但顯示無數據；內容頁在無數據時需要缺省狀態進行表達；例如：頁面空數據、搜索無結果等?？瞻醉撁鎸儆谡＞W絡顯示場景，所以一般會在缺省頁附帶有相似屬性模塊的用戶引導，爭取用戶重復消費的目標，滿足用戶的操作的訴求。
最后根據每個不同的缺省狀態，梳理產品相對應的場景。逐一根據場景特點來設計頁面內容。那缺省頁的設計有哪些表現形式呢？
沒有用心設計的缺省頁無法給用戶帶來良好用戶體驗，并可能給用戶帶來困擾，如下圖：某小眾直播平臺的拉新邀請頁面，無邀請記錄狀態下沒有任何有效反饋信息，用戶不能明確得知到底是網絡問題還是賬號同步出錯，亦或者是沒有一次邀請。正確的缺省頁設計內容理應明確表達出符合用戶心理預期的視覺場景表達（圖形）；和使用易理解和語法恰當地表達當前的異常狀態（標題）甚至于引導用戶解決問題的文案描述。
△ 圖5 缺省頁的錯誤示范
1. 視覺圖案+文案
此類缺省設計形式一般應用于表達系統性無響應或初始空白態的缺省場景。視覺圖案一般使用 app 吉祥物或主色調延展出的 icon 或插畫來表示缺省狀態；文字：通常為「標題」或「標題+描述」結構；標題通常是表達出現缺省的原因；描述文案則說明結束缺省狀態的解決辦法，如「請檢查網絡是否順暢」 等等。
2. 視覺圖案+文案+引導
此類缺省設計形式一般運用于需要用戶引導操作來達到業務目標的缺省場景。在視覺圖案+文案的基礎上加入引導模塊，主要作用于避免用戶在數據邊界的狀態下，會因為無法達到操作目的而提高的跳出率。引導模塊的內容包括：相似屬性內容，相似行為目標按鈕或解決缺省狀態操作按鈕，加入引導，用戶進行某項行為或者感知某些信息，對于功能的教學和使用頻率的提升有著重要作用。引導模塊的形式也是日新月異，逐漸變成新用戶業務引導的作用，不僅限于頁面平鋪，也可以做成固定氣泡微動效，例如：抖音的發布缺省頁。
缺省頁除了常規的提示型設計方法，還有許多其他的設計技巧，幫助用戶在遇到困難，更好地安撫用戶的情緒。這些設計技巧有些是替代原來的缺省內容，讓用戶有更多的消費空間與深度。有些是拓展缺省狀態的補充內容，讓用戶不容易跳出頁面，增加用戶的消費時長。具體如下：
1. 使用推薦內容
缺省狀態中的空白層非常影響邊界情況的用戶體驗，提出一種假設，是否可以刻意推薦相同屬性的內容呢？這樣的界面既不會顯得蒼白無力又可以留住用戶的注意力。相似性的內容也可以解決用戶目標的迫切性。所以說，這種方法非常適合內容型產品中使用。例如：新用戶在打開電商產品的購物車時候，理應是空白無消費行為的操作記錄。那么平臺方通過用戶畫像與熱門排行算法推薦了一個商品流。這樣可以解決用戶無目標性挑選的訴求，增加消費時長。至于產品如果確定用戶畫像的推薦算法，可以通過獲取第三方登錄的個人基本數據之后，才給我推薦了數據庫內相對應標簽的熱門商品，這樣推薦的精準度也會高些。
2. 使用緩存
是否使用緩存內容代替缺省狀態？根據產品特性來判斷，工具類、金融類等同類型產品不適合使用緩存；因為用戶交互操作的數據必須保持實時性與真實性。而內容型、電商類等類型產品適合使用緩存來代替缺省狀態；理由：用戶消費內容的轉化路徑是先消費后轉化的行為特點，不存在系統操作門檻，且緩存內容可以代替產品的缺省狀態，安撫用戶操作失敗所帶來跳出率過高的風險。
3. 情感化表達
當缺省頁給到用戶時，通常省時省力的做法就是老老實實告訴用戶當前的狀態，最多配上一個具有通識性的灰色 icon。但是，秉持著以用戶體驗為己任的時代，我們其實可以把缺省內容表達得更加生動形象一些。在這里會加入一些情感化的表達，而不是僅僅只是做到準確的目標而已，比如加上活潑的插圖故事，或者把文案寫得更加擬人化、戲劇化一些。這些配圖在讓用戶明白當前的狀態的同時，往往也能引發用戶會心一笑，從而彌補空白頁面帶來的失落感甚至可以帶給用戶一些正面的情感。如下圖：
4. 提供新任務
通常缺省頁的引導模塊都著眼于解決當前任務。如果碰到沒有解決方案的情況（例如：404，服務器崩潰等）可以提供給用戶具有情感共情的新任務，讓他們暫時忘記無法達到目標的挫敗感，又有體諒的情懷。幫助建立正向積極的品牌價值觀。例如：訪問騰訊網時訪問失敗的時候，網頁除了顯示 404 狀態之外，還會顯示騰訊「寶貝回家」的公益尋人計劃。將缺省頁與公益內容相結合，不僅改善到用戶缺省狀態。也貫徹騰訊價值觀「用戶為本，科技向善」的輸出。一個好的缺省頁也可以承擔社會責任，讓公益傳播到每個角落。
△ 圖10 騰訊網404公益任務缺省頁
結語：作為設計師有時會聽到需求方表述「這種極少出現的情況，我們可以暫且不管它?！沟羌毠澮娬嬲?，所有優秀的體驗設計都必須照顧到方方面面的缺省情況。讓每個用戶的流量價值發揮到最大，產生相互信任的良好的品牌關系。這樣的平臺生態是良性的，這樣的產品會更有流量轉化的商業化價值。
文章來源：優設 作者：騰訊動漫TCD
通過一些案例進行比較與實驗，探索如何將 UI 深色模式設計得更好。
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 場景需要適配多背景色風格，圖標除了具備好看隱喻之外，更需要具備抗干擾性。
帶框圖標是一個不錯的解決方法，大膽預測帶框圖標會將成為未來一段時間圖標設計主流！
在這之前我得先提及一本書──《簡約至上：交互式設計四策略》。這本書基本算得上是交互設計的入門必讀書籍了，非常適合身處項目環節中上游的人員閱讀與學習。
作者 Giles Colborne 在書中提出了四個令交互設計成果最大化的簡易策略：合理刪除、分層組織、適時隱藏和巧妙轉移。這四個策略幾乎成為我設計與優化每一個頁面時的自我指導方針。
我參閱了大量的應用，想總結出它們是如何運用導航欄來給產品賦能的。竟然很巧地發現，再花式的導航欄設計也難逃「四策略」手法。
首先，導航欄作為一個獨立控件，它本身就已經是「分層組織」策略的一種表現形式。接下來我們來看看，優秀的產品設計是如何運用另外三種策略來設計好導航欄的。
導航欄不能輕易刪除，但凡事沒有絕對。什么時候我們可以合理地刪除導航欄呢？
Nike Run Club（下文簡稱NRC）是耐克官方出品的一款跑步記錄 APP。既然做產品要站在用戶角度出發，那我們就來復原一下主要功能的用戶使用場景。
當你的老板要求你一天出 150 個界面設計的時候，你怕了，準備跑路，同時又不想浪費一天中任何一次記錄運動的機會。于是你打開 NRC，你的目的很明確：認真地跑路，并記錄運動。
點擊「開始」按鈕，當你一旦開始跑步，手機基本就不再使用了，直到跑步結束。
△ NRC在運動狀態下的界面刪除了導航欄
在用戶記錄跑步這樣一個單一事件中，NRC 知道你會專注運動，很少存在關注其他功能、瀏覽其他頁面的可能性。于是 NRC 可以很干脆地刪掉導航欄，而返回按鈕用了界面中的「結束」按鈕代替。
滴滴出行在呼叫快車時也做了刪除導航欄的處理。用戶一旦發單，開始呼叫司機時，呼叫頁面內的所有操作都只聚集在界面下方的一個視覺區域內。
△ 滴滴出行在呼叫過程中刪除了導航欄
上面兩個刪除導航欄的示例有什么共通點呢？
第一，用戶在當前頁面的事件狀態明確，不需要導航標題提醒用戶當前在什么位置，用戶也極少可能在當前頁面發生其他事件操作，于是完全可以去除導航標題與內容控件。
第二，雖然刪除了返回按鈕，但都采用了很典型的「費茨定律」，就算用戶誤操作，也能便捷地撤銷正在發生的事件。反而這比循規蹈矩地運用導航欄來承載返回按鈕合理了許多。
△ 費茨定律簡易圖解
既然導航欄內所有的規范元素都有可取代方案，為什么不刪除它呢？正如 Giles Colborne 在書中告訴我們的：大膽地刪除，但也不要極端到盲目刪除。
隱藏和刪除看起來十分相似，但其實不然。我們如何區分這兩個技巧呢？
隱藏最常見的情況是，當導航欄的出現會成為打擾用戶沉浸體驗的障礙時，我們會選擇隱藏，例如看視頻、瀏覽圖片等顯示全屏媒體的場景，有導航欄反而會分散用戶的注意力。
△ 顯示全屏媒體時需要隱藏導航欄
不知道你有沒有發現到一個細節，在大多數情況下，需要沉浸體驗的頁面不但會隱藏導航欄，同時也會隱藏狀態欄，導航欄中載有當前頁面的標題、導航按鈕和內容控件；狀態欄中會載有時間、Wi-Fi 等系統設備信息。
iOS 在人機交互指南中提醒我們，顯示全屏媒體時，請考慮暫時隱藏狀態欄，但請避免永久隱藏。如果沒有狀態欄，當用戶需要查看時間或其他設備信息時必須離開應用。設計師應該讓用戶可以使用簡單的手勢重新顯示隱藏的狀態欄。
△ 用戶可以方便地查看時間或其他設備信息
另一種情況是當前頁面非常注重一屏內容展現時，我們會隱藏導航欄。
京東在用戶搜索了商品之后，頭部有三個信息欄，非常冗長。分別是：
△ 京東搜索商品后屏幕頭部的信息欄
用戶在搜索了商品之后，向上滑動頁面，京東會隱藏導航欄和全局篩選欄。
一是因為用戶搜索關鍵詞后，滑動頁面大概率表示已經開始在挑選商品，這時候可以大膽地猜測用戶行為，認為搜索與排序的重要級下降了，搜索結果垂直內容篩選的重要級上升了，便可以只保留下重要的操作。
二是可以讓內容區域高度增加，隱藏頂部兩個欄目區域可以大致增加一個商品位的提前露出，增大了商品觸達用戶的可能性。這不就是 UI 設計為商業目標賦能的一個案例嗎？
△ 隱藏導航欄，增加了屏幕利用率
基于導航欄層級始終高于頁面內容的特性，隨著用戶劃出第一屏，許多 APP 做了重要內容或重要控件轉移到導航欄的設計。
豆瓣在影評討論區，用戶上滑頁面時，會將當前影片的信息轉移到導航欄。其實這種轉移很常見，許多內容社區 APP 都有這樣的交互設計，比如瀏覽的公眾號文章，再回到頂部試試。方便用戶時刻知道自己當前所瀏覽的內容是關于哪一個主題的。這一類轉移是單純站在用戶體驗角度的考量。
△ 豆瓣在屏幕滾動后轉移影片信息到導航欄
但如果你仔細觀察，有一類轉移卻是綜合了用戶體驗與產品目標的共同抉擇。如果你再稍微了解一點該產品背后的故事，甚至可以讓你洞悉到，為了鞏固產品的調性和目標，PM 和 UI 們在頁面設計時做了多少細枝末節的引導。
知乎在用戶瀏覽當前問題時向上滑動頁面，也會像豆瓣一樣，將當前問題標題轉移到導航欄上，但與此同時會將「寫回答」的操作也轉移到導航欄。標題轉移是出于用戶體驗，和大多數內容社區的做法大同小異；而「寫回答」的按鈕轉移，正符合知乎想要打造一個內容交流社區的產品調性，他們希望刺激用戶進行問答互動，多輸出 UGC 內容，希望用「寫回答」的按鈕轉移進一步激發用戶創作內容的可能性。
△ 知乎轉移「寫回答」讓用戶更方便地進行問答互動
京東在店鋪首頁上滑頁面時，會將「關注」按鈕轉移到導航欄，方便用戶在瀏覽的過程中可以隨時收藏店鋪，增加了用戶對品牌店鋪的關注度和復購的可能性。京東靠自營模式發家，近幾年來開始慢慢重視 B2C 市場，在這個小小的關注按鈕上，是不是可以算略顯端倪呢？雖然我不能非?？隙?，可能提高用戶收藏操作只是為了輔助京東更好地進行營銷權重劃分，不過「關注」按鈕的轉移，確實能為 B2C 業務的滲透提供一份助力。
△ 京東轉移「關注」讓用戶更方便地收藏店鋪
所以我這里說到的「轉移」的目的，其實和 Giles Colborne 在書中講到的并不十分一致，Giles Colborne 是希望設計師將當前頁面低頻、冗雜的操作轉移到另一個頁面中去，而我提到的「轉移」反而是產品越注重什么功能，越可以利用導航欄層級的先天優勢來實現轉移。
合理刪除、分層組織、適時隱藏和巧妙轉移已經是我做設計和分析界面常用的一個手法，它并不一定是萬能的，但是它多多少少可以輔助我們做出更合理的設計。
這篇文章想要告訴大家的是，在平臺規范里的導航欄是死板又相對靜態的，但在四個策略的輔助下，結合用戶的操作手勢，也可以將它變得十分靈活，幫助頁面實現更好的用戶體驗。不要被規范限制的太死，轉換設計師的角色變成用戶，你可以研究出更多好玩的操作。隨便打開一個應用，去研究研究，你可能會樂在其中的。
文章來源：優設 作者：UCD耍家
如今我們的生活，到處都是大幅圖像廣告，紛擾喧鬧的各類短視頻與直播。這是一個快節奏時代，我們更傾向閱讀圖像。為什么我們偏愛圖像視覺超過文字？從人類進化角度來看，原始時代的祖先通過五感感知著這個世界，其中通過視覺來感知判斷生活，其他四感輔助之。即使后面我們發明了文字，但發展至今，對圖像的本能吸引力依舊強烈。因為在我們認知的潛意識里圖像相較于文字更能讓我們快速輕松理解并記憶。
圖像如此重要，設計作品中當然也必不可少。因為圖片，它能一定程度上決定畫面基調；引導視覺流程；調劑平衡多段文字信息的枯燥性，讓閱讀變得輕松容易。
在UI設計中，我們經常需要把設計輸出物拿給產品經理或者其他有設計決斷力的人看，UI設計中圖片使用的好與壞，能很大程度上影響著決策者的感知，以及你的設計過稿率。
如下左圖：商品視角、調性、細節，都沒有右圖來的統一、有質感。單看這兩張圖，會讓用戶有這樣的心理感知：左圖感覺像山寨盜版商城；右圖則會認為是嚴肅官方認證商城。所以，在同樣頁面布局下，不同的圖片使用與處理，能讓UI頁面的品質有較大的感知差異。
圖片的使用如此重要。那么，我們在正式做UI設計前，首先需要弄清楚圖片在頁面的占比情況以及后續圖片的支撐來源問題。
在構思UI頁面階段，首先需要了解以下兩個問題：1.圖片區域占比問題；2.圖片來源問題。當頁面圖片占比多，且讓用戶自定義，那么需要預估到APP上線后設計可控率會降低。換句話說，實際上線效果會不盡人意。如下圖：由于淘寶和網易嚴選平臺屬性不同，在圖片品控上就有著不同的視覺感受。當然，不是說淘寶做的不好，而是當一個平臺集納不同的店鋪，不同調性的產品類型，即使有圖片規范，也難如統一品類、調性的產品來的統一。
弄清圖片內容的可控性問題后，開始進入設計環節，那么我們該如何選擇圖片？
在不同的場合有恰當合適的場景搭配，是十分基礎且重要的事情。在UI設計中，任何一個部分的設計以及元素運用都需要為產品服務。圖片也不例外。如果你是廚房類APP，頭圖選用小清新感的圖片，就顯得不夠合適，帶有環境食材元素的圖片才更讓用戶有共鳴。
2.是否能清晰表達產品核心內容？
圖片是否主體明確？能一眼正確無誤的傳達核心內容？會不會因為其他元素元素搶了主體視覺，找不到視覺重點？
3.是否美觀、有品質、讓人想擁有？
圖片是否能表達美好生活以及美好品質的向往？光影關系是否自然？圖片是否高清有細節？
當明白圖片如何選擇后，還想和你分享一些冷門且重要的圖片過稿小技巧。記下來，將大大提升你的設計過稿率。
漂亮圖片有很多，如果我們都以漂亮為基準，找出來的圖片也會形色各異。由于用戶的實際使用場景是：瀏覽一個完整APP，統一風格調性比美更重要。如果商品角度不一樣；飽和度高低不同；抽象與具象等，都會形成產品不統一，用戶視覺不適應等問題。
有時我們為了趕時間，直接用圖片填充插件，讓圖片區域自動填充。但我還是想要給到你這樣一個建議：一個專業且成熟的設計師，即使是設計初稿，也不能隨便拿張圖，湊合一下。任何時候的匯報，都需要有著處女座對于事物的完美要求，過自己這關。因為任何時候你的表達與表現，都形成了你在別人心目中專不專業的看法，從而影響著后續的設計話語權問題。如下圖都是商城陳列頁面，右側的圖片給出上線的實際效果，更貼合產品，方便設計決策者給出建議方向，或做出決策。
我們都是視覺動物，不管你是否愿意承認：我們常常通過視覺表象，才決定是否愿意去更深入的了解某個東西。
設計就是在做產品視覺表象的表達，我們需要盡可能使用貼切的，漂亮的圖片。讓UI視覺看起來更加美觀，讓用戶愿意停留，認可以及信賴平臺。
轉自：站酷-丘丘的設計筆記
對于以下場景，你是不是有那么一點點熟悉：
視覺A：「視覺 B，把你之前的稿子發我下，我的頁面里也有組件 A」
視覺A：「稿子里的組件 A 怎么跟視覺 C 剛剛發群里的不一樣啊，我以哪個為主？」
視覺B：「剛剛業務通知組件 A 得修改，這次大促有 30+ 個頁面都用到，這修改量這么大咋辦？」
交互A：「這個 tab 上的文字看不清」，視覺A：「我覺得挺清晰的了」
開發：「為什么每次給的設計稿，明明長得都差不多，可尺寸就差了幾個像素，我又得寫新的樣式表進去」
以上的對話，在大型且多人合作的項目中尤為常見。
隨著大促項目體量越來越大，參與人員越來越多，這些問題越發明顯，直接影響了活動的視覺統一性和整體的工作效率。因此我們開展了營銷組件庫的設計。
組件庫就是界面設計常用控件或元件的集合，「組」是設計元素的組合方式，「件」由不同的元件組成。
其工作方式和樂高原理差不多，玩家（設計師）通過小元件（設計元素）或組件（模板）的不同組合形式，層層搭建和嵌套，最終組成建筑（頁面）。
△ 樂高W16搭建過程，圖片來自「什么值得買」
△ 頁面設計過程
1. 保證用戶體驗的一致性
對于大促這種含有多個子項目，涉及到 30+ 的頁面同期輸出的復雜項目，每個獨立的子項目雖然在需求上有一定區別，但整體的用戶體驗需要滿足基本的一致性，減少用戶認知和負擔，提高用戶的使用效率。組件庫的建立，其統一的設計語言能保持設計結果的統一性，避免多人多風格的現象。
2. 提升效率
不同行業、不同產品、不同項目的組件庫因其業務特點不同，其差異會非常大。那怎樣的組件庫才能滿足「大促營銷類」的項目需求？
分析研究
行業設計：行業優秀的設計系統、組件庫搭建思維，以及其源文件，是最寶貴的學習資源。
主站設計：保證全站設計的一致性的同時，也是重要的學習參考；
過往問題：對過去項目的橫向和縱向對比和分析，理解業務結構以及特點，從需求出發，拆解頁面表達結構和所需組件的特點。
設計方向
通過前期的分析，明確了針對營銷大促類組件庫的設計方向：
拆分重組的組件化思維，解決模板靈活性和一致性的訴求
在設計方法上，我以 2013 年 Brad Forst 提出的原子設計方法論作為指導。方法的本質其實就是將頁面拆解為最小元素（原子），然后原子可以演變成分子，分子通過多維度的組合形式成為組織，再到模板，最終生成頁面（原理如下圖）。
營銷需求的多變性體現在分子的組合方式各不相同，但其共用特征是最小元素（原子）基本相同，因此統一最小元素，定義其組合的規則，即可從源頭把控設計的一致性。同時通過特定的組合原則，設計師結合各項目需求根據組合和應用原則（布局、文字等）進行設計，從而實現其靈活性。
原子設計理論延展閱讀：
明確了設計方向和設計方法后，結合營銷項目自身的特點，開始了組件庫的設計實施，整體流程如下：
梳理組件庫
將近幾期具有典型代表的頁面收集整理分析，主要是為了以下 2 個方面的內容
ps：組件庫強調的是通用和復用，因此無需把所有模塊都納入整理清單，做「合適」的，而不是大而全但可能臃腫的組件庫。關于這個組件庫的體量應該如何選擇，可以看下文末的參考文獻。
設計環節
梳理完組件庫，按照原子設計方法論組件嵌套的形式進行組件設計。在 Brad 的概念里，是將系統分為了 5 個層級，但針對營銷業務的多變性，要滿足復用性和靈活性，越往上的層級復用性越差，因此在現階段，采用了 3 個層級「原子-分子-組織」構成營銷組件庫。
「全局考慮」在設計的整個過程中，需考慮每個組件后續的使用場景以及設計師的使用方法，利用 sketch 功能（symbol 嵌套、豐富的配置項、響應式設計等），可以設計出一個高通用性的組件（如下圖），以此達到增強每個組件的復用性，以及精簡組件庫的目的。（因文章篇幅受限，詳細內容可見文末參考文獻）
下面為每一個層級的詳細設計：
第一層：「原子」是最基本和最小顆粒度的單位，工作中常以「元素」命名，例如：顏色、文字、圖標、分割線等
布局：系統布局規范，需要通過統一的設計元素和間距規范去引導使用者們使用并且能夠適配不同屏幕尺寸，目的是達到一致性，可適配、可控性原則。
「網格系統」通過前期的研究，網格系統采用的是目前最常用的「8點網格」，能更好地適配不同屏幕尺寸，2 倍的變化均能更好地保持偶數，不出現小數點的情況。
「設計原則」遵循格式塔理論：建立良好的信息層級，能讓用戶快速獲取和理解有用、感興趣的信息，并產生下一步行為。
顏色體系：「色值標準」為保證文本可識別性，結合Web內容無障礙指南（WCAG）2.0標準，做了以下定義：
顏色對比度檢測工具：https://contrast-finder.tanaguru.com/
「衍生色設定規則」規律性設定衍生色，更好地打造頁面信息層級
根據以上規則設定顏色體系
文字體系：項目中字體根據實現類型分為系統字體以及圖片字體
「系統字體」為了較好的用戶瀏覽體驗，設計中優先采用開發直接寫的系統實現的字體類型，不會因適配而產生文字不清晰或做圖時不同系統渲染效果不同導致的不統一。
「圖片字體」考慮到版權，以及字體在不同系統下渲染差異化的原因，選擇了免費商用的思源黑體。
基礎原子：「靈活性設置」充分考慮應用場景，利用 sketch 功能提高其包容性和靈活性。
第二層：「分子」原子排列組合構成了分子，工作中多以「模板」命名，例如：品牌模板、單品模板等
「局部到整體，整體到局部」原子和分子，其實是一個系統中，相互依賴的元素。因此在分子的設計過程中，會遇到原子包容性不足的情況，因此實際設計中，是不斷在原子分子之間切換設計，不斷完善各自的設計。
第三層：「組織」原子、分子排列組合構成了組織，工作中多以「模塊」命名，例如：商品列表、內容卡片、入口模塊、瀑布流圖等
「保持克制，寧缺毋濫」該層面設計時，「局部影響整體，整體影響局部」的關系體現得更為明顯，會在原子/分子/組織三個層面不斷切換，進一步完善各個層面的設計。但過程中需保持克制，所有的設計應是圍繞「復用性」和「靈活性」進行設計的，而非組合方式越多越好，多即意味著一致性在一定程度會受到影響。因此，應是從過往項目中，預測未來可能出現的情況，窮舉后提取通用的組合規則后進行設計。
過程中多嘗試不同方案設計，結合實際項目測試，擇取最優方案。
整理設計文件，輸出設計規范文檔和使用說明。除了整理設計文件，梳理設計規范外，組件庫相當于一個產品，需要有一份使用說明，為用戶提供基礎學習，提升團隊成員的使用效率。
4. 迭代設計和維護
一個優秀的組件庫絕不是 30 天速成班就結束的項目，而是一款產品，需有專人長期的跟進和維護，例：優化組件包容性；補充組織的種類等，從而逐步建立起適用于團隊的組件庫。
1. 打造組件庫的幾個關鍵步驟
2. 項目成果
組件庫在 19 年雙 11 項目中的應用，統一性顯著提升，對比往年節省 76 人/天，平均效率提升 30%，其中主會場提升了 50%。
3. 項目反思
4. 設計小感悟：
這里討論的是從細節處提升表單的設計
最近一直在做公司的內部辦公項目，涉及到了排版和表單的問題最多，而且大部分都是來自于網頁端的改版，因此在畫界面的時候，關于表單里很多小細節都不太清楚，并且界面十分的冗長，因此就想把這段時間關于表單的設計做一個簡單的總結，希望能幫到大家。
我們今天換個角度來說，最近學了原子設計，所以我們從原子的角度上將表單拆開來說，讓我們更全面細節的了解表單，分為以下六個模塊：結構、標簽、操作、幫助、驗證、反饋，首先我們先了解一下表單是什么？
表單是我們在網頁和APP中使用頻率比較高的模塊，大多是數據采集的功能，并且都是需要用戶自己填寫或者編輯的，因此會在很多功能模塊中見到，例如12306的信息填寫頁，個人中心信息、評論和動態發布以及登錄頁等等。
我從項目當中最深切的感受就是產品太摳了，網頁上的信息哪個都舍不得刪，整個搬下來，導致頁面使用下來用戶的體驗很差，雖然很多時候表單里的一些內容是無法去掉的，但是還是希望能夠簡化表單，如下圖所示：
用戶注冊表單時要一并填寫姓名和生日，這種與注冊無關的信息填寫除了增加用戶的提高留時間之外，降低對產品的好感度
信息的填寫最好是從用戶相對無抵觸的信息開始逐漸到隱私的信息，而不是一開始就讓用戶萌生退意，如下圖所示：
自如的房東簽約里的內容個人覺得門檻還是挺高的，剛選擇完自己的行業，就要填寫公司的名稱和地址，以及學歷信息，這種比較隱私的問題一開始就讓用戶填寫，其實會讓用戶對這個產品萌生退意。
如果實在是信息量很大但一定要在一個界面里展示，那么就將相關的內容進行分類組合，并且通過增加一些額外的空間或者主標題來分類。如下圖所示：
12306、愛彼迎以及知乎的個人信息填寫都比較多，但是將信息分類以后，就增加了頁面呼吸和節奏感，從而幫助用戶更加輕松完成表單。
而且這里在設計的時候需要注意的一個是分割形式，上圖的三個例子分別使用了背景分割和留白分割，其中留白分割在填寫時使用的比較多，因為大家要注意的是在編輯狀態是有很多填寫提示的下劃線，背景分割或者分割線分割勢必會造成視覺上分割感更強，因此在編輯狀態留白風格是比較好的選擇辦法。
但是展示的時候分割線確實比較好的選擇辦法，如下圖所示：
在表單中，標簽問題比較多的在于標簽的位置放在那里，我們經?？吹降挠凶髮R、右對齊、頂部對齊和浮動標簽。如下圖所示：
浮動標簽和頂部對齊目前來說是使用的比較少的情況，這種位置符合自然視線，能夠快速幫助用戶完成表單，但是卻用的不是很多，因為關于表單的填寫，產品還是希望用戶能夠慢下來的，通過左右閱讀，讓用戶仔細閱讀標簽，如下圖所示：
目前手機端使用較多的是右對齊為主，畢竟用戶理解和填寫速度都屬于適中。
在操作的設計問題上，我們一般拿不準的就是不知道按鈕要放在界面右上角還是下方，我們先說第一種：
這是目前不管是設計還是使用，都是界面中出現頻次比較高的一種方式，如下圖所示：
這種形式適用于界面信息內容不多，并且用戶的可控性比較強，在UGC的產品中較多出現。
優勢：按鈕的視覺層級不是很高，方便用戶更專注于當前頁面的填寫
缺點：按鈕在右上角，不太方便用戶一只手操作。
用主題色作為按鈕的主色，并且固定在界面底部位置，如下圖所示：
優點：位于屏幕下方，方便用戶點擊，同時視覺層級高能夠吸引用戶的注意力
缺點：會遮擋表單，導致用戶會錯過一些信息，因此這樣的按鈕大部分都是會放在信息不重要或者不用完全都填寫的表單界面上。
這里的底部與第二種不同，第二種是固定在界面的底部，但是這種是固定在表單的底部，如下圖所示：
優點：符合用戶的閱讀習慣，同時能夠引導用戶將表單信息看完，因此這種比較適合用在表單有必填項目的表單中使用。
缺點：如果表單內容比較少，在視覺上就會顯得擁擠
幫助提示大多出現在產品的登錄頁和隱私信息的填寫界面，不同的步驟需要考慮不同的情況。
未填寫時給與用戶的提示，這種情況是最常見的表單形式，如下圖所示：
將需要用戶填寫的表單信息給予的一定的提示和解釋，安撫用戶在面對大量需要填寫信息時的情緒。
填寫驗證后出現報錯或者不符合要求時，需要作出反饋，可以有下圖幾種情況：
上圖中兩種不同的情況，針對性的報錯和局部的報錯，都分別代表了不同的場景，個人認為針對性的報錯在登錄頁的報錯上也能夠極大的提高用戶的體驗。
在用戶未對當前頁面有操作時，按鈕需有不同的表現形式，讓用戶對操作的行為及結果有預先的心理感知，如下圖所示：
很多操作前的按鈕都會置灰，顯示不可點擊的狀態，除了給用戶提示之外，也是為了避免誤操作，當然現在還有一種方法就是如果誤觸頁面會有提示
點擊按鈕后給頁面增加一些微動效，提起用戶的興趣，同時提升表單的轉化率。
轉自；站酷-潘團子
藍藍設計的小編 http://www.skdbbs.com