起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識魔鬼細節篇｜對兩種特殊的數據狀態進行探討
優秀產品和一般產品差距往往不在大家都能感知到的顯眼位置，而在那些各種異常狀態下的細節處理。對于特殊狀態的處理不僅能夠反應設計師的細心程度，更是對產品邏輯的完整思考的呈現。筆者對兩種特殊的數據狀態進行探討：數據為空和數據過多，希望對大家有所幫助。
一、數據為空狀態
對于頁面空狀態的處理方法，大家應該都比較熟悉，在這里做下簡單的歸納。除了基本的當前狀態的顯示外，還可以充分利用空頁面，顯示額外的信息引導，考慮展示以下三種信息：
- 功能入口：提供相關功能的入口，引導用戶到其他頁面去查看內容（如圖1-QQ閱讀）。
- 推薦數據：提供熱門數據、個性化推薦數據供用戶選擇。常見于電商購物車等頁面，能夠有效地提升轉化率、購買率（如圖2-考拉海購）。
- 操作引導：提供相關操作的示意和引導，尤其是對于一些較為隱藏的交互操作，能夠起到良好的引導作用（如圖3-網易云閱讀）。
（圖1-QQ閱讀、圖2-考拉海購、圖3-網易云閱讀）
要特別注意的是，對于這些額外內容，要考慮其與頁面本身的關聯性。只有關聯性強且用戶可能感興趣的內容，才合適在頁面中呈現。
二、數據過多狀態
對于數據過多的情況，通?？梢詫⑿畔⑦M行折疊或者省略。折疊即將內容收起，顯示部分內容，并提供查看更多的操作。而省略即是直接將內容折斷，略去超出部分不展示。
1、信息的折疊
信息折疊默認只展示部分信息，同時提供一個查看全部信息的操作。對于查看更多信息的操作方式，通常有三種方式：一是點擊直接在當前頁面向下展開，二是點擊跳轉至二級頁面，三是點擊展開半屏浮層，在浮層上顯示全部信息。
這三種方操作方式，在界面中顯示時需要能夠明確的告知其操作結果，比如向下展開信息，通常配有向下箭頭，示意用戶內容向下展開。
（1）入口的折疊
入口較多無法完全展示，可以向下展開全部入口。入口有反復查看的需求，因此入口折疊后通常需要有收起操作，便于用戶反復查看。
（圖4-網易新聞）
（2）內容的折疊
多用于評論、簡介等較長的文字內容。內容通常一次性閱讀后繼續往下瀏覽其他內容，較少返回頁面上方，因此通常不需要收起操作。
- Case1：評論折疊后，點擊更多是向下展開，還是跳到新頁面？
向下展開信息，內容自然向下延續，有利于閱讀的連貫性。但當所展開的內容非常多時，會大大增加頁面長度。（如圖5-網易新聞）
跳轉至新頁面便于展示更多內容信息，同時不影響頁面長度。但對當前閱讀打擾較大，并且跳到新頁面后需要查找上次閱讀的斷點繼續閱讀，閱讀效率較低。（如圖6-騰訊新聞）。
（圖5-網易新聞）
（圖6-騰訊新聞：為了解決用戶需要尋找斷點繼續閱讀的問題，騰訊新聞在新頁面中對上級頁面中已顯示的內容進行飄灰處理，提升了閱讀體驗）
對于這兩種方式，需要根據產品的定位和具體需求進行選擇。對于網易新聞來說，跟貼內容是非常重要并且有特色的內容，鼓勵用戶多發評論和回復進行跟貼蓋樓，內容越長越具有傳播意義，鼓勵用戶多停留在跟貼頁面。因此采用了向下展開內容的方式。
接下來給大家再安利一個內容折疊展開的顯示邏輯：
- Case2：默認顯示內容為最多X行，多于X行后內容收起為Y行，X≥Y。
以網易新聞的跟貼內容為例，跟貼內容最多顯示7行，多于7行后內容收起為5行。
通常的處理方式是多于7行就收起為7行，這樣就造成點擊展開后可能只展開了一兩個字，大大的降低了點擊展開的操作和顯示效率。
收起行數小于最大顯示行數的折疊展開邏輯，能夠有效避免這種情況。同時保證更多內容能完全展示，也節省了折疊后空間。
- Case3：折疊后點擊出現半屏浮層
露出部分內容，點擊展開半屏浮層顯示全部內容，如下圖。
（圖7-優酷視頻）
這種方式常見于視頻播放等頁面。頁面內承載了多個內容模塊，每個模塊顯示部分內容，點擊展開浮層顯示全部內容。一方面保證了觀看體驗，避免跳出頁面對觀看體驗的打斷，另一方面有利于多個內容模塊的展現。
2、信息的省略
多用于標題、昵稱、簡介等文字信息，通常是在內容列表頁進行省略顯示。需要注意的是在列表頁省略的標題、簡介等，在內容詳情頁盡量保證能夠完全顯示。否則在整個app內沒有能夠查看到完整信息的頁面。如下圖中在列表中標題省略后，在詳情頁標題需要最多顯示兩行保證完全露出。
（圖8-網易云閱讀）
以上是筆者對數據特殊狀態設計的一些總結思考，通過筆者在設計中最常遇到的案例，選取了一些角度進行分析，希望對大家在處理類似情況時有所幫助。
作者：小能
來源：微信公眾號【ME網易移動設計】
很棒的分享，尤其是跟帖內容的展示收起邏輯