為何深色模式看起來不自然？它的實用性到底怎么樣？深色模式是不是對眼睛更健康？結合文獻，我們一起來探究深色模式的種種！
在過去的幾年中，深色模式一直是用戶最期待的一個功能。你可以自由切換你喜歡的模式來適應當前的場景，iOS和Android也都在2019年布局了系統級的深色模式，深色模式可獲得出色的視覺體驗，尤其是在弱光環境中……有助于你專注地開展工作，因為內容會較為顯眼，而顏色加深的控制項和窗口則會隱入背景之中。但真是這樣嗎，或者只是一種實際上弊大于利的操作？
雖然各種軟件界面的色調和顏色會有所不同，但是對深色模式的處理方式都是在深色背景上顯示明亮文本和界面元素的配色方案。相比之下，在淺色背景上顯示深色文本和界面元素的配色方案，在這里我們稱之為淺色模式。
而事實上，深色模式比淺色模式早了幾十年。在其最初的階段，深色模式并不是一種有意的解決方案，而僅僅是當時計算顯示設備是陰極射線管（CRT），且只能顯示單色的顯示，屏幕看上去就是黑的，黑底白字或者黑底綠字就是計算機行業的早期狀態。直到1980年代彩色顯示器發明后，微軟視窗系統上線之后，黑底顯示才退出主流。蘋果在1984年推出“麥金塔”個人電腦，第一次發布采用圖形用戶界面，由此開啟了計算機屏幕白底顯示的主流之路。
ibm 5151單色監視器
淺色模式出現的確切時間很難確定，但可以追溯到施樂Parc圖形用戶界面，它也極大地影響了早期蘋果的“麥金塔”和其他操作系統，該界面使用了以白色背景為主的深色文本和界面元素。它與顯示技術的進步和現代圖形用戶界面的出現密切相關。這種能夠顯示色彩的且更先進的RGB CRT顯示器拉開了淺色模式的序幕。
1973年的施樂Alto是最早使用輕型接口模式的計算機之一
深色模式的實用性有多少，每個人看法也不一樣。盡管深色模式的界面可能不像淺色模式那樣觀感清晰，但深色模式的界面卻具有一定的魅力，可以讓你聯想到新穎，高端，精致，神秘，力量，奢華這些詞。但是，黑色也是一種會引起人們強烈的情感一個顏色，并且在過度使用時很容易使人無法承受。
2019年9月，蘋果公司上線深色模式（Dark Model）時，在官網上如是宣傳道。從iPhone到Mac，當庫克決定在蘋果公司幾乎所有產品上線深色模式、甚至要求所有在AppStore上架的應用都必須兼容深色模式時，安卓陣營的谷歌、華為、三星等頭部公司也紛紛在其手機中推出了深色模式，相應地從WhatsApp到微信等全球主流的應用也都推出了深色模式。
但是，想要獲得良好的深色模式是相對比較難的。一方面，深色模式迫使放大瞳孔來捕獲必要的視覺信息，從而導致整體清晰度的降低。而同時界面中高亮的部分又迫使我們的瞳孔縮小去適應亮度，以便提高清晰度。這也就能理解為什么白色背景上的黑色文本在你的眼睛中通常會顯得更清晰的原因。
擴大的瞳孔讓光線更多，但感覺到的銳度受到損害
行業對深色模式追逐的群羊效應，也進一步加劇、放大了一個見解：深色模式對眼睛更友好更健康！
但是，事實并非如此。對于一些有散光的人來說，在某種程度上深色模式對他們的眼睛來說更糟糕，深色模式比淺色模式更友好更健康的科學仍有待討論。斯坦?！ぐ轄査寡劭蒲芯克难劭茖＜覍Υ吮硎荆骸拌b于文獻中的數據，我認為深色模式對眼睛沒有任何的友好和健康。” 這種深色模式對眼睛疲勞和潛在的眼睛健康的影響時，使用時間可能比設備的亮度或亮度更重要。
根據美國驗光協會的說法稱，大多數人的眼睛在某種程度上都患有散光，但通常不會引起注意。據美國眼科學院統計，每三個美國人中就一個存在散光的情況，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 缺省狀態的場景梳理圖
缺省狀態包括：系統層、信息層、空白層。
系統層：指當用戶請求服務器時，返回提示請求提交失敗，并檢測到失敗原因時呈現的頁面；例如：加載失敗、服務器異常、無網絡等；頁面一般會有重新請求的快捷按鈕。文案上可做失敗原因的細分描述，也可節約成本使用網絡異常的統一文案。
信息層：請求服務器數據成功，但返回的數據異常的頁面；例如：內容已刪除、內容已下架、內容不存在；文案內容以提示數據類型的缺失為主。顯示形式除了常有的全屏缺省圖，還會出現在數據列表下單一內容缺失的缺省模塊化的情況，例如：單一作品在書架上顯示已下架。
空白層：請求服務器數據成功，但顯示無數據；內容頁在無數據時需要缺省狀態進行表達；例如：頁面空數據、搜索無結果等。空白頁面屬于正常網絡顯示場景，所以一般會在缺省頁附帶有相似屬性模塊的用戶引導，爭取用戶重復消費的目標，滿足用戶的操作的訴求。
最后根據每個不同的缺省狀態，梳理產品相對應的場景。逐一根據場景特點來設計頁面內容。那缺省頁的設計有哪些表現形式呢？
沒有用心設計的缺省頁無法給用戶帶來良好用戶體驗，并可能給用戶帶來困擾，如下圖：某小眾直播平臺的拉新邀請頁面，無邀請記錄狀態下沒有任何有效反饋信息，用戶不能明確得知到底是網絡問題還是賬號同步出錯，亦或者是沒有一次邀請。正確的缺省頁設計內容理應明確表達出符合用戶心理預期的視覺場景表達（圖形）；和使用易理解和語法恰當地表達當前的異常狀態（標題）甚至于引導用戶解決問題的文案描述。
△ 圖5 缺省頁的錯誤示范
1. 視覺圖案+文案
此類缺省設計形式一般應用于表達系統性無響應或初始空白態的缺省場景。視覺圖案一般使用 app 吉祥物或主色調延展出的 icon 或插畫來表示缺省狀態；文字：通常為「標題」或「標題+描述」結構；標題通常是表達出現缺省的原因；描述文案則說明結束缺省狀態的解決辦法，如「請檢查網絡是否順暢」 等等。
2. 視覺圖案+文案+引導
此類缺省設計形式一般運用于需要用戶引導操作來達到業務目標的缺省場景。在視覺圖案+文案的基礎上加入引導模塊，主要作用于避免用戶在數據邊界的狀態下，會因為無法達到操作目的而提高的跳出率。引導模塊的內容包括：相似屬性內容，相似行為目標按鈕或解決缺省狀態操作按鈕，加入引導，用戶進行某項行為或者感知某些信息，對于功能的教學和使用頻率的提升有著重要作用。引導模塊的形式也是日新月異，逐漸變成新用戶業務引導的作用，不僅限于頁面平鋪，也可以做成固定氣泡微動效，例如：抖音的發布缺省頁。
缺省頁除了常規的提示型設計方法，還有許多其他的設計技巧，幫助用戶在遇到困難，更好地安撫用戶的情緒。這些設計技巧有些是替代原來的缺省內容，讓用戶有更多的消費空間與深度。有些是拓展缺省狀態的補充內容，讓用戶不容易跳出頁面，增加用戶的消費時長。具體如下：
1. 使用推薦內容
缺省狀態中的空白層非常影響邊界情況的用戶體驗，提出一種假設，是否可以刻意推薦相同屬性的內容呢？這樣的界面既不會顯得蒼白無力又可以留住用戶的注意力。相似性的內容也可以解決用戶目標的迫切性。所以說，這種方法非常適合內容型產品中使用。例如：新用戶在打開電商產品的購物車時候，理應是空白無消費行為的操作記錄。那么平臺方通過用戶畫像與熱門排行算法推薦了一個商品流。這樣可以解決用戶無目標性挑選的訴求，增加消費時長。至于產品如果確定用戶畫像的推薦算法，可以通過獲取第三方登錄的個人基本數據之后，才給我推薦了數據庫內相對應標簽的熱門商品，這樣推薦的精準度也會高些。
2. 使用緩存
是否使用緩存內容代替缺省狀態？根據產品特性來判斷，工具類、金融類等同類型產品不適合使用緩存；因為用戶交互操作的數據必須保持實時性與真實性。而內容型、電商類等類型產品適合使用緩存來代替缺省狀態；理由：用戶消費內容的轉化路徑是先消費后轉化的行為特點，不存在系統操作門檻，且緩存內容可以代替產品的缺省狀態，安撫用戶操作失敗所帶來跳出率過高的風險。
3. 情感化表達
當缺省頁給到用戶時，通常省時省力的做法就是老老實實告訴用戶當前的狀態，最多配上一個具有通識性的灰色 icon。但是，秉持著以用戶體驗為己任的時代，我們其實可以把缺省內容表達得更加生動形象一些。在這里會加入一些情感化的表達，而不是僅僅只是做到準確的目標而已，比如加上活潑的插圖故事，或者把文案寫得更加擬人化、戲劇化一些。這些配圖在讓用戶明白當前的狀態的同時，往往也能引發用戶會心一笑，從而彌補空白頁面帶來的失落感甚至可以帶給用戶一些正面的情感。如下圖：
4. 提供新任務
通常缺省頁的引導模塊都著眼于解決當前任務。如果碰到沒有解決方案的情況（例如：404，服務器崩潰等）可以提供給用戶具有情感共情的新任務，讓他們暫時忘記無法達到目標的挫敗感，又有體諒的情懷。幫助建立正向積極的品牌價值觀。例如：訪問騰訊網時訪問失敗的時候，網頁除了顯示 404 狀態之外，還會顯示騰訊「寶貝回家」的公益尋人計劃。將缺省頁與公益內容相結合，不僅改善到用戶缺省狀態。也貫徹騰訊價值觀「用戶為本，科技向善」的輸出。一個好的缺省頁也可以承擔社會責任，讓公益傳播到每個角落。
△ 圖10 騰訊網404公益任務缺省頁
結語：作為設計師有時會聽到需求方表述「這種極少出現的情況，我們可以暫且不管它?！沟羌毠澮娬嬲拢袃炐愕捏w驗設計都必須照顧到方方面面的缺省情況。讓每個用戶的流量價值發揮到最大，產生相互信任的良好的品牌關系。這樣的平臺生態是良性的，這樣的產品會更有流量轉化的商業化價值。
文章來源：優設 作者：騰訊動漫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的產品中較多出現。
優勢：按鈕的視覺層級不是很高，方便用戶更專注于當前頁面的填寫
缺點：按鈕在右上角，不太方便用戶一只手操作。
用主題色作為按鈕的主色，并且固定在界面底部位置，如下圖所示：
優點：位于屏幕下方，方便用戶點擊，同時視覺層級高能夠吸引用戶的注意力
缺點：會遮擋表單，導致用戶會錯過一些信息，因此這樣的按鈕大部分都是會放在信息不重要或者不用完全都填寫的表單界面上。
這里的底部與第二種不同，第二種是固定在界面的底部，但是這種是固定在表單的底部，如下圖所示：
優點：符合用戶的閱讀習慣，同時能夠引導用戶將表單信息看完，因此這種比較適合用在表單有必填項目的表單中使用。
缺點：如果表單內容比較少，在視覺上就會顯得擁擠
幫助提示大多出現在產品的登錄頁和隱私信息的填寫界面，不同的步驟需要考慮不同的情況。
未填寫時給與用戶的提示，這種情況是最常見的表單形式，如下圖所示：
將需要用戶填寫的表單信息給予的一定的提示和解釋，安撫用戶在面對大量需要填寫信息時的情緒。
填寫驗證后出現報錯或者不符合要求時，需要作出反饋，可以有下圖幾種情況：
上圖中兩種不同的情況，針對性的報錯和局部的報錯，都分別代表了不同的場景，個人認為針對性的報錯在登錄頁的報錯上也能夠極大的提高用戶的體驗。
在用戶未對當前頁面有操作時，按鈕需有不同的表現形式，讓用戶對操作的行為及結果有預先的心理感知，如下圖所示：
很多操作前的按鈕都會置灰，顯示不可點擊的狀態，除了給用戶提示之外，也是為了避免誤操作，當然現在還有一種方法就是如果誤觸頁面會有提示
點擊按鈕后給頁面增加一些微動效，提起用戶的興趣，同時提升表單的轉化率。
轉自；站酷-潘團子
本文分享國際化司機端首頁改版完整思考過程，化繁為簡提升司機使用效率，提升產品用戶體驗。
隨著滴滴國際化業務腳步不斷加快，司機端始終是作為承載全球化業務運力的基礎保障。
同時，在移動通信技術高速發展的背景下，不同國家間的傳輸速度與硬件設備差距正在不斷縮小，用戶對應用產品的期望由基礎的可接受、可使用、功能齊全，向更易用、簡約、更為專注的產品使用體驗上轉變。
在新階段下，「為全球司機用戶提供一個「克制」「可依賴」的產品使用體驗」、「為業務拓展提供有力的體驗支撐」是體驗設計團隊在新的階段下提出的目標。
2018 年 9 月我們與產品同學深入拉美當地對司機側進行為期 2 周的產品體驗調研。雖然在當地的時間較為短暫，但是我們依舊感受到了拉美國家的習俗文化和人文特點。
相比中國人的含蓄內斂，巴西與墨西哥人顯然更加熱情隨和。
在巴西，這個世界上假期最多的國家，處處體現著人們對生活的享受才是自始至終的追求。無論是世界杯一個月狂歡長假，還是周末下午兩點開門的商區，總會讓人羨慕的同時刷新你對享受生活的認知。
而娛樂至上的墨西哥人，熱情友好，能歌善舞，我們常說的放飛自我在這里幾乎成為墨西哥人每天的生活常態。他們喜歡享受當下，后天下之憂而憂。他們覺得工作賺錢就是為了更好的休息，大多數人每天都是開朗樂觀的處世態度。
同樣，落后的基礎建設、糟糕的交通狀況、教育水平低下、價格昂貴的電子產品以及相對不太穩定的社會環境，也是它們共同存在的問題。
在當地，我們通過實地調研與用戶訪談等方式，針對產品體驗的問題與司機進行面對面溝通。收集了很多寶貴的用研資料與司機訴求，如司機希望平臺為他們推薦訂單引導，司機希望獲得更多的實時動態訊息和司機每天都可以查看自己的收入狀況等，集中體現在效率、感知、體驗這三大方面。
其次，伴隨著業務的不斷增長，越來越多的功能使得我們的產品變的更加復雜，舊版的框架布局早已是不堪重負，無論是現存的體驗優化問題，還是未來業務功能的拓展問題，舊的框架體系都是難以為繼，無法再通過簡單的修補來滿足用戶和業務未來的訴求。
改版升級對產品本身來說是一件非常重要的事情，需要對多方因素進行慎重考慮。經過多次的溝通討論，權衡改版對產品可能產生的利弊關系，采用小步快跑，快速試錯，分階段分模塊的方式進行。
首頁既作為承載核心功能（發車）的載體又是其他重要板塊的分發的入口，在內容呈現與用戶感知上都存在很大的體驗提升空間；我們通過拆解業務中長遠需求規劃得知，大多數重點需求依賴于首頁框架布局，而現存首頁框架無法滿足業務訴求；在競品的改版中首頁的變化最大，并在司機群體中取得比較正向的反饋；通過上述分析，決定率先對首頁進行優化改造。
首先我們與產品、運營側進行深入討論，結合用戶訪談整理的用戶訴求，對此次首頁改版的目標達成一致。
在舊版的框架體系中，大量信息在首頁呈現，功能層級復雜，重點功能難以突破和查找，關聯較弱的信息架構嚴重影響和分散了司機的關注點。隨著業務模式不斷擴展，首頁新需求類型逐漸增多，一套更加具備靈活的拓展能力和管理能力的首頁框架尤為重要。
首先我們將舊版的首頁布局打破重建，對現有模塊進行整理。功能相似、定義模糊、司機操作相對低頻的模塊進行合并、刪減。
對司機高頻操作模板進行場景劃分，將相關信息進行聚合處理，通過對入口的強化，來明確司機對不同模塊的認知。
出車管理
將與出車相關信息進行組織聚合，結合司機不同的使用場景，將功能與模塊進行結合，加強認知，減少司機多余的思考與判斷，快速響應，提升工作效率，同樣也為業務在有關出車功能方面提供靈活可拓展的組件框架。
收入管理
通過顯示司機最關注的今日收入信息，為司機提供方便快捷的查看功能，使司機更專注于工作本身。同時對收入管理入口起到了強化認知作用。
信息管理
對關于個人相關的信息通知及功能操作進行聚合，方便司機對個人信息進行快速查看，提高查看效率。
通過對框架模塊的標準化定義，后續的業務需求便可以進行歸類管理，根據不同需求的不同屬性，結合功能使用場景，選擇合適的模塊進行展示，提高司機使用效率同時增加首頁的業務框架擴展能力。
通過對框架的重構，有效的解決了首頁信息承載壓力過大，功能層級復雜的問題，同時地圖的面積相比舊版首頁也大幅增加，信息呈現更加簡潔、輕量。
出車操作作為首頁的核心功能，通過調研得知，司機普遍反映在舊版首頁中存在出車操作感知弱、收出車狀態區分不明顯的問題，對司機的操作體驗和感知體驗造成了比較大困惑。
在首頁改版過程中我們著重對出車操作進行了設計分析，基于對業務的了解和競品的分析，得出以下三個結論：
通過「兩強一弱」，減少司機困惑提升發單效率的同時，間接的延長司機的在線時長。
完成頁面設計后我們發現，操作按鈕通過靜態視覺角度去表達收出車空間位置關系是十分困難的，僅通過 Toast 提示會造成用戶理解的斷層，于是提出使用動效去進行「搭線」串聯，搭線發車前按鈕的點擊和收納后的位置提醒進行視覺體驗上的串聯，從而達成感知增強，解決視覺體驗層面不容易解決的問題。
豐富的訂單獎勵活動是我們與競品相比重要的競爭優勢，司機在完成定量訂單的同時提供了更多的額外收入。查看每日獎勵活動，已成大多數司機每日上線必做的事情。
與舊版相比，在新版首頁中通過提升獎勵入口層級，縮短了查看獎勵活動操作路徑，從而方便司機快速查看。
通過首頁透傳的獎勵卡片，司機在首頁即可獲取到推送的獎勵相關信息，及時獲取到獎勵預告和進度，提升了司機工作效率的同時加強了司機對獎勵活動的感知。
在經歷了快速奔跑的粗放階段，我們也在思考司機端產品究竟以怎樣的品牌氣質傳遞給海外的司機群體。
在當地，我們在司機心目中更像是合作伙伴，憑借真誠互利的態度贏得了當地司機的用戶。
真誠、熱情與融合我想這就是我們想要傳達的核心品牌情感，而克制、可依賴將作為產品體驗的設計原則貫穿始終。
顏色系統
司機端顏色系統在基于現有品牌色基礎上，結合不同國家顏色文化的理解，新增加符合本地化的輔助色系，以提升產品的親和力，傳遞品牌情感。
文字系統
針對司機用戶的操作使用場景，對文字字號梯度進行提升，通過文字粗細、顏色、大小加強信息對比度，使司機在更多復雜場景下可快速獲取重要信息，提升閱讀體驗。
在此次改版中新引入 Barlow 與 DIN Alternate 字族作為模式數字展示字體，兩款字體分別為 Android 及 iOS 系統下默認包含字體，相比 Roboto 與 SF Pro text 兩款字族，在數字展示上更為明確、識別性更強，同時因為自身「纖瘦」的特性，在屏幕橫向面積上節省更多空間。
業務在不同的階段有不同的側重方向及打法，設計側根據業務所處階段應及時的調整自身的目標定位，快速響應，積極探索設計的機會和突破點，在不同的階段發揮自身價值，助力業務達成共同目標，為用戶創造更便捷的產品使用體驗。
首頁改版從立項到設計再到研發，多部門同學緊密配合，在有限的時間內最大化的完成預期上線效果。
全量上線后，通過問卷對首頁改版進行滿意度收集，司機對新版首頁的滿意度平均值高達 93%。取得的成績離不開每一位參與改版的同學支持，也得益于國際化團隊自始至終對產品體驗的重視與認同。
作為司機端體驗升級的第一步，首頁改版只是一個開始，希望通過不斷的打磨優化，秉持初心，為全球司機提供更克制、可依賴的出行平臺。
文章來源：優設
運營類活動是在某一段時間內進行的，有明確業務目標（業務轉化、品牌傳播）及營銷群體，依賴游戲化手段帶來優秀用戶體驗，從而獲得成功的一類活動。
1. 生命周期短
運營類活動生命周期較短，常在某一段時間（可能是周期性的），一般跟隨時節熱點或者運營節奏來進行。較短的生命周期給設計、開發、數據等帶來較大挑戰，設計程式化提供基本設計思路，組件化降低設計成本。
2. 業務目標明確
運營類活動一般以產品營銷、品牌運營為目標，發放各類優惠券大眾目標用戶，從而帶來業務轉化，或者營銷企業品牌，比如常見的年底 h5。
3. 有一定故事場景及氛圍
運營類活動需要較強的故事場景。良好的場景設計、氛圍營造可以帶來沉浸式的用戶體驗，與用戶建立情感共鳴。從而提升用戶參與度、帶來好的業務轉化。
故事場景結合時節熱點，同時考慮活動需要營造的體感氛圍。
4. 人群細分
運營類活動的特征在發起之初就有特殊的運營目的和特定特征的用戶群體。為實現最優的業務轉化，需要在設計之初明確活動覆蓋的用戶人群。同時在各個環節都能考慮到特定用戶群體的不同需求，尤其是在業務轉化的過程中，好的人群細分往往帶來事半功倍的效果。
5. 游戲化
引入游戲機制及游戲元素。
運營類活動結合時節熱點，通過富有故事性的視覺傳達（插圖、動效、聲音等設計元素）帶給用戶沉浸式的體驗，與用戶建立情感共鳴，從而有效的鼓勵用戶行為。
沉浸體驗的營造對設計師提出了更高要求，可以從活動設計的故事感、用戶代入感、產品互動感、主體差異感幾個方面來思考入手。
運營類活動中廣泛應用了游戲化機制和元素，它們是活動成功的有效保障。設計時綜合考慮業務及用戶需求，從用戶動機激勵、行為引導的角度出發，將運營活動游戲化?？梢栽诨顒訁⑴c深度的各個階段引導用戶操作，從而達成活動目標。以下列舉了運營活動中常見的用戶動機，后續我會從用戶參與路徑出發，盡可能詳細的描述在用戶參與的每一個階段起作用的為動機，以及實現的手段。
大獎帶來的誘因效應
動輒百萬的大獎獎勵幾乎已經成為運營活動的標配，在動機理論中，用戶行為的產生來源于需要，需要導致內驅力，引發行為，從而推動用戶實現特定的目標。當目標的誘惑力很大時，即使沒有內部驅動也能激發行為。這也是眾多運營類活動大獎存在的理由。
占便宜的心理
愛占便宜是人的本性，從心理學角度講，占便宜就像是額外得到的驚喜和獎賞，可以讓人產生滿足感！用戶在這種心理作用下，會為了小利益去做出設計預設的行為，將業務需求設置在‘占便宜’的路徑中可有效提高參與、轉化率。比如在設計中用中獎動態彈幕來強化用戶參與的動機，提高參與率。
有趣和好奇心
人天生具有好奇心，它幫助我們適應不斷變化的環境、發現新的資源，是一種「無法抗拒」的行為動機。在運營活動中，用戶會被有趣的活動頁面，未知的規則設計所吸引，從而開始主動「探索」。這也是用戶參與的動機之一，設計中精致的 UI、有效的頁面信息傳達保證了用戶好奇的有效性。
即時反饋及階段性成就
「即時反饋」是沉迷現象發生的原因。學習之所以痛苦正是因為其反饋鏈路太長，你只有在考試或者應用到所學知識時才能獲得反饋，還有可能是負面的。在活動設計中，每一次用戶操作都會有及時、細膩的反應，可以給用戶帶來精神愉悅，同時設計的階段性成就又給用戶帶來成就感，用戶會不知不覺中在活動中越走越遠。
隨機獎勵的多巴胺效應
人類的本能熱衷于冒險，隨機的、不確定的獎勵能夠刺激大腦分泌多巴胺，帶來愉悅感，從而刺激用戶行為的重復。在活動設計中，常用到這一理論，比如抽獎機制。
所有權與擁有感
當用戶感到他們擁有或控制某樣東西時，會自然而然的強化它的屬性、發揮其價值。尤其是通過適當的付出和自身努力，用戶還可能不合理的高估其價值。在活動設計中，常使用戶通過易實現的行為獲得權益，通過「幸苦操作」強化了擁有感，提升其心理價值，從而促進用戶對權益的使用。
稀缺性與用戶渴望
稀缺性的心理學原理在于人們想要獲得某樣東西的原因僅僅是它太罕見，或者無法立刻獲得。它破滅了人們對情況的控制感，人們會為了重獲控制而采取行動。設計時，可以利用這種心理鼓勵用戶做出期望的行為。常見的有時間限制、權利限制等。
使命感/社交影響/損失規避……
運營類活動中數據和策略思維是保證活動效果最大化的有效手段?；顒有枨筇岢鰰r，即考慮可能的參與用戶細分；活動開始時，考慮引流途徑和引流方式、物料的差異化；活動進行時，根據用戶細分策略化任務推送，根據埋點數據監測積極調整相關設計元素。事無巨細才能確?；顒映晒?。
文章來源：優設
藍藍設計的小編 http://www.syprn.cn