如何設計空狀態界面？來看這篇超全面的總結
2020-11-05
想要設計出優秀的空狀態，首先要學會理解需求。
因為工作變（tiao）更（cao）許久沒有更新了，各位讀者老爺見諒?？紤]到未來職業規劃，同時想在年輕時多接觸一些新的設計方向，因此毅然決然的投入到了B端UX的行列，這對我來說是一個挑戰，但我喜歡挑戰，目前逐漸適應，正好手上有空狀態相關的設計任務，因此在構思階段整理了本文，希望大家有所收獲。
那么開始我們文章正文。
什么是空狀態，空狀態是指用戶在使用產品時遇到的因無數據展示而中斷體驗的場景?？諣顟B并不全指異常狀態，并不局限于產生錯誤的異常場景。
錯誤異常類： 出現錯誤如404，斷網，加載失敗等場景
中性類：搜索結果為空、數據為空、地址未添加、新用戶未使用導致的內容為空等狀況
積極正向類：任務或事項被清空，用戶主動促成的空狀態界面
針對三種情況有不同的設計傾向。
1. 針對錯誤類
試想此時的場景如何，洞察用戶的想法，感受，此時用戶一般正在進行一項任務，異常場景導致任務被打斷。這導致的結果是，一方面用戶任務受阻中斷，亟需接續任務流程，另一方面用戶對異常和錯誤產生厭煩的不適情緒，通過安撫用戶來挽回產品形象，避免用戶流失。針對這兩點我們需要提供對應的解決方案。
闡述問題：告知用戶問題出在哪里，緩解用戶不適情緒
恢復任務：需要提供明確的解決方案輔助用戶回到任務正軌，如一個跳轉按鈕，或者一句解決方案說明
2. 針對中性類
中性類常見的為數據為空的情況，它并不能歸咎于產品異?；蝈e誤，而是正常狀態，如購物車未添加商品，新用戶未發布內容。在此類空狀態場景下，產品需要說明當前狀態，即陳述事實，同時針對某些場景可以提供對應的推薦方案,以解決數據為空的問題。
陳述事實：描述清楚數據為空的事實，原因
推薦方案：展示我們建議的方案，幫助用戶解決數據為空的情況，但并不強制而只是推薦，如推薦一些商品、引導去發布內容等等。
3. 針對積極類
積極場景下，表明用戶通過正向操作獲得正向結果，此時需要一些正向反饋，因此建議采用一些鼓勵性質的文案來呼應用戶此時的狀態，心理。某些操作成功的結果頁也可以歸屬于積極類空狀態頁面。
針對以上三類空狀態，我們在設計時僅需要分為兩種場景考慮。
其一，針對異常錯誤類空狀態，最高優先級的設計目標是保證任務接續，使用戶清晰明確地了解任務中斷原因，并能夠快速獲得解決方案，此類場景下，空狀態下的設計要素主要用于解決用戶面臨的迫切難題，其核心主旨是“恢復和救援”。
其二，除異常類的其他兩類空狀態。中性及偏積極的空狀態場景下，產品自身處于無過錯的一方，此時的空狀態也并沒有影響到用戶的原體驗流程。因此針對此類空狀態的設計可以更自由的組合各種頁面內容，例如反饋、建議、引導等。根據對用戶的理解和對場景的分析來預測用戶行為，想用戶所想，展示用戶亟需或感興趣的內容與功能，消滅空白，保證體驗貫通。其核心主旨是“預測和補充”。
且此種場景下，設計師可以在保證體驗的基礎上融入更多業務向的考量，轉化為設計表現則是一些對業務有幫助的信息推介，商品推介，如淘寶空購物車下可以根據用戶偏好推薦一些優質商品，課程類產品在用戶清空學習事項后推薦一些新的課程等等。
當然業務不僅僅局限于顯性的利潤，可以將目光放的更長遠，例如如何利用空狀態下的內容設計來促進留存及用戶粘性，提高用戶忠誠度及品牌認同，這些作為隱性的業務價值同樣能為產品帶來出乎意料的神助攻。
以上，我們定義了什么是空狀態，概括了空狀態的三種類別（異常類、中性類及積極類）。同時我們也分析了兩種場景下，設計空狀態頁面的考量與傾向。針對異常類場景，解決造成用戶體驗中斷的問題是其核心要點，而針對非異常場景，設計可以結合體驗和業務對空狀態頁面的內容進行更自由的組合，預測用戶行為，使用用戶感興趣的內容填補空白，以及基于商業化目的去進行對應的商品及信息的曝光。
1. 有哪些常見的形式
常用的信息元素或組件有以下四種
Content(信息模塊)：陳述結果，解釋狀態，闡述方案（純展示）包含插畫&文案
Operate（操作模塊）：CTA按鈕，明確的，用于解決當前問題的操作
Guide（引導操作模塊）：當前頁面存在操作控件，引導模塊需要給予位置提示或操作提示
Box&Card（定制化內容容器）：內容元素與操作組件的自由組合，根據產品特定體驗目標或業務目標自定義的信息集合。
實際場景下的排列組合
純配圖
此形式在商業產品中使用較少，多見于飛機稿及一些小眾產品。一圖勝千言是理想的情況，真實場景下，孤零零的一張配圖無法闡述當前發生了什么以及應該如何擺脫困境。不建議使用。
純文案
純文案能夠簡潔清晰描述問題或狀態，幫助用戶快速定位問題點。適用于極簡產品、對視覺沒有極致要求的B端產品，有個性設計語言的小眾產品等。缺點是略顯單調，無法進一步觸發場景，產生共鳴。創造更多價值。
插畫配圖+文案
比較主流的空狀態內容形式，通過精心設計的插畫陳述產品狀態，引導體驗路徑甚至傳達品牌價值，輔之對應的精確文案。從傳達信息的角度幫助用戶理解當前所處的狀態，遇到的問題，以及解決方案。
插畫配圖+文案+CTA按鈕
同上，在插畫加文案的信息模塊的基礎上增加了一個操作按鈕，該操作基于用戶所處的場景來配置功能，可以用來解決用戶面臨的緊迫問題，也可以用來引導新用戶開始產品體驗旅程。
插畫配圖+文案+引導線索
當前頁面已經存在解決空狀態的操作控件，如新建功能，而空狀態提示需要完成的任務時吸引用戶注意力到對應的功能，幫助新用戶熟悉產品，快速掌握核心功能。
定制化的內容容器
需要展示更復雜的內容，提供更多樣功能，此時設計師可以根據產品訴求，對確定的內容規格進行“封裝”，封裝后的形式就像是一個BOX或者說我們熟悉的卡片設計，一個box模塊包含富文本信息、操作功能等多樣的內容。作為定制化的特殊組件，它更契合你的產品形態，契合業務訴求，擁有更強的陳述能力和解決方案等能力。
2. 有哪些常見的樣式：
按照三維屬性劃分：線性、面性、2.5D&偽3D、3D
按照配色風格劃分：灰色、灰色+彩色點綴、彩色
是否有人像插畫參與：是、否
除此之外，空狀態插畫還可以有動效、游戲化等形式，但并不作為主流形式來參考。根據以上三個分類的排列組合，我們能夠創造出足夠飽滿的插畫配圖。同樣，在選取不同風格的組成元素時，這里也有一些參考建議。
關于三維屬性的選?。?/strong>
線性插畫更加輕盈，沒有過于復雜的細節，具有高度概括性，適用范圍較廣，且容易制作，擁有獨特的簡潔美感。接受度較高，是比較主流的配圖樣式。特別適合不張揚，無需強調和分散注意力的場景，只作為輔助元素為產品界面增添細節及搭配體驗文案來陳述內容。但不精心打磨的情況下，線性插畫容易產生簡陋感，粗糙感，因此需要注意形體構造和顏色的搭配。
面性插畫同樣是主流的插畫表現形式，與線性構成對比。面性插畫種類繁多，根據添加的細節多寡，從完全扁平的2D形式，到擁有復雜光影光影表現的質感形式，可供選擇的方向較多。更加考驗設計師的視覺設計能力、配色能力等。需要注意的是面性插畫能夠與豐富的顏色搭配創造視覺沖擊力，其聚焦用戶注意力的能力較強，需要根據體驗目標和業務目標在合適的場景使用。
2.5D和3D屬于較新潮的風格，尤其是近幾年新興的3D設計，他們的共同點是擁有更強的表現力視覺感染力，符合新的視覺趨勢，容易引發用戶視覺到情感上的共鳴，但新潮的趨勢往往并不敢用于大體量的成熟產品，需要兼顧多種類型的用戶群，總之謹慎選擇，同時3D和2.5D都對設計師提出新的技能要求，有一定的操作門檻。
關于顏色的選?。?/strong>
首先，灰色系是最不容易出錯，且最契合空狀態場景的配色方案，其朦朦朧朧的視覺呈現效果即能夠豐富界面細節，又不會作為視覺重心削弱其他核心信息的獲取效率。其次灰色系配色的設計下限較高，簡單的講就是容易出效果，即便沒有太好的配色功底也能僅僅通過明暗的搭配來產出具有高級質感的配圖。
彩色擁有更豐富的視覺表現力，但也有著與之對應的復雜性。彩色配圖容易“搶焦”，需要考慮是否會干擾到主信息的傳達效率，如果插畫的視覺重心甚至超過了CTA按鈕，那必然是不可取的。
所以，遇事不決，量子力學，中庸之道。 選擇灰色系與彩色點綴的方式未嘗不是一個終極解決方案。
空狀態的設計有一個廣度的目的，即保證用戶的體驗流暢一致，以及更進一步的滿意度乃至信任感。這實際上是用戶體驗設計的一個核心命題，即盡可能提升用戶使用產品的體驗。
空狀態在其中擔任著橋梁、救援隊的角色，專門處理一些特殊場景的體驗問題，如新用戶初次登錄，如何快速的被教育為基礎用戶，被引導熟悉核心流程？因網絡、設備、誤操作等原因導致的產品體驗流程的中斷如何才能快速恢復？空狀態界面曝光的場景下，如何把空白頁轉化為機會，融合業務價值及品牌價值？
因此可以見得，空狀態在不同場景下，可以有很多目標，這要根據實際產品情況來判斷，但一個總的指導原則可以確定，即優先解決用戶面臨的問題（通過闡述當前狀態、原因、及提供解決方案），其次考慮如何接力打力增加用戶價值（用戶愉悅性、接受度、用戶粘性、信任感等），然后融合業務價值（增加利于商業化的內容模塊），最后注意整體使用情感化的表達方式，從體驗文案到配圖。
下面提供一些實際案例，來講解一下比較典型的空狀態設計目標
1. 解決異常問題
針對異常類空狀態，設計目的在于解決問題，恢復任務。因此主流做法是陳述問題、說明原因，闡述解決方案，最好能夠提供直接的解決方案，如跳轉、刷新按鈕。
以下圖中的兩個無網絡狀態舉例，文案與配圖主要用于陳述當前遇到的網絡問題，同時左側的網易云闡述了解決方案——檢查網絡設置，右側的美團則提供了解決當前問題的加載按鈕。由于PC端和移動端的差異，因此兩者在設計空狀態方案時也略有不同。PC端不需要加載按鈕，因為網絡連接后會自動加載，移動端網絡問題主流場景是弱網狀態，其次是網絡連接中斷，用戶恢復網絡后需要手動去刷新。
2. 數據為空場景
數據為空的場景實際有很多種，但大多數都不應該被定義為異常，例如搜索結果為空，描述的是當前庫內存在的數據不包含搜索項這樣一個既定事實。以告知結果為主。
新用戶初次使用，未執行任何操作，此時空狀態頁面一方面闡述當前狀態，另一方面提供對應的引導，指導用戶快速學習產品，上手并填充內容，教育用戶的同時解決了空狀態的情況。
另一種情況則是涉及到用戶權限，例如登錄使用的權限。產品內的某些模塊、信息與賬號體系屬于強綁定的關系，需要登錄后才可瀏覽，另外登錄使用高級功能也可能是基于業務的考量。由于這類權限空狀態會打斷用戶原有體驗流程，因此需要謹慎選擇。例如淘寶不會在用戶未登錄時不予展示商品。
3. 積極結果頁
今日事項已清空、任務list已清空，未讀郵件已清空，此類用戶主動促成“空狀態”的場景可以被定義為積極類空狀態，此種場景下，清空任務，達成空狀態是用戶的目的，而不是異常場景。屬于用戶完成任務后的成功反饋，因此其設計應當偏向正向，積極的主題，適合的鼓勵用戶，促進用戶與產品的互相認可。此類場景是情感化設計最容易發揮作用的地方，從文案的字句斟酌，到插畫的情感化融入都有無窮的可操作性。
4. 品牌價值的傳達
品牌價值作為用戶潛意識層的影響因素，是一個需要持續發力的設計層面。成熟的產品團隊都會結合自家產品特色，歷史品牌建設來打造專屬品牌形象，如釘釘的釘三多、飛豬的小飛豬等，一個形象打造好可以發揮極大地品牌價值，占領用戶心智，從而間接提高市場占有率。打造專屬品牌形象，與幽默風趣的主題插畫配合，講故事、談理想、獲取共鳴，強化品牌觀一氣呵成。而空狀態界面正是其優質的載體，制作精良的品牌主題插畫更可以緩解用戶焦慮、張揚產品個性，與競品構成差異化。
最后，希望設計師在設計前能夠花費一定的時間來思考設計，而不是快速進入設計制作階段，閱讀了上面這些內容，你應該能意識到，空狀態設計中，插畫的美觀性反而是最次要的，當前頁面的設計目標，體驗上的考量、業務上的思考等內在才是其核心要素，想要設計出優秀的空狀態，首先要學會理解需求，理解當前場景下，用戶需要什么，公司與團隊期望從中獲的什么，沒想清楚這些，再精美的插畫也沒有意義。
