優(yōu)秀產(chǎn)品和一般產(chǎn)品差距往往不在大家都能感知到的顯眼位置，而在那些各種異常狀態(tài)下的細節(jié)處理。對于特殊狀態(tài)的處理不僅能夠反應設計師的細心程度，更是對產(chǎn)品邏輯的完整思考的呈現(xiàn)。筆者對兩種特殊的數(shù)據(jù)狀態(tài)進行探討：數(shù)據(jù)為空和數(shù)據(jù)過多，希望對大家有所幫助。

一、數(shù)據(jù)為空狀態(tài)

對于頁面空狀態(tài)的處理方法，大家應該都比較熟悉，在這里做下簡單的歸納。除了基本的當前狀態(tài)的顯示外，還可以充分利用空頁面，顯示額外的信息引導，考慮展示以下三種信息：

1. 功能入口：提供相關功能的入口，引導用戶到其他頁面去查看內(nèi)容（如圖1-QQ閱讀）。
2. 推薦數(shù)據(jù)：提供熱門數(shù)據(jù)、個性化推薦數(shù)據(jù)供用戶選擇。常見于電商購物車等頁面，能夠有效地提升轉(zhuǎn)化率、購買率（如圖2-考拉海購）。
3. 操作引導：提供相關操作的示意和引導，尤其是對于一些較為隱藏的交互操作，能夠起到良好的引導作用（如圖3-網(wǎng)易云閱讀）。

（圖1-QQ閱讀、圖2-考拉海購、圖3-網(wǎng)易云閱讀）

要特別注意的是，對于這些額外內(nèi)容，要考慮其與頁面本身的關聯(lián)性。只有關聯(lián)性強且用戶可能感興趣的內(nèi)容，才合適在頁面中呈現(xiàn)。

二、數(shù)據(jù)過多狀態(tài)

對于數(shù)據(jù)過多的情況，通?？梢詫⑿畔⑦M行折疊或者省略。折疊即將內(nèi)容收起，顯示部分內(nèi)容，并提供查看更多的操作。而省略即是直接將內(nèi)容折斷，略去超出部分不展示。

1、信息的折疊

信息折疊默認只展示部分信息，同時提供一個查看全部信息的操作。對于查看更多信息的操作方式，通常有三種方式：一是點擊直接在當前頁面向下展開，二是點擊跳轉(zhuǎn)至二級頁面，三是點擊展開半屏浮層，在浮層上顯示全部信息。

這三種方操作方式，在界面中顯示時需要能夠明確的告知其操作結(jié)果，比如向下展開信息，通常配有向下箭頭，示意用戶內(nèi)容向下展開。

（1）入口的折疊

入口較多無法完全展示，可以向下展開全部入口。入口有反復查看的需求，因此入口折疊后通常需要有收起操作，便于用戶反復查看。

（圖4-網(wǎng)易新聞）

（2）內(nèi)容的折疊

多用于評論、簡介等較長的文字內(nèi)容。內(nèi)容通常一次性閱讀后繼續(xù)往下瀏覽其他內(nèi)容，較少返回頁面上方，因此通常不需要收起操作。

• Case1：評論折疊后，點擊更多是向下展開，還是跳到新頁面？

向下展開信息，內(nèi)容自然向下延續(xù)，有利于閱讀的連貫性。但當所展開的內(nèi)容非常多時，會大大增加頁面長度。（如圖5-網(wǎng)易新聞）

跳轉(zhuǎn)至新頁面便于展示更多內(nèi)容信息，同時不影響頁面長度。但對當前閱讀打擾較大，并且跳到新頁面后需要查找上次閱讀的斷點繼續(xù)閱讀，閱讀效率較低。（如圖6-騰訊新聞）。

（圖5-網(wǎng)易新聞）

（圖6-騰訊新聞：為了解決用戶需要尋找斷點繼續(xù)閱讀的問題，騰訊新聞在新頁面中對上級頁面中已顯示的內(nèi)容進行飄灰處理，提升了閱讀體驗）

對于這兩種方式，需要根據(jù)產(chǎn)品的定位和具體需求進行選擇。對于網(wǎng)易新聞來說，跟貼內(nèi)容是非常重要并且有特色的內(nèi)容，鼓勵用戶多發(fā)評論和回復進行跟貼蓋樓，內(nèi)容越長越具有傳播意義，鼓勵用戶多停留在跟貼頁面。因此采用了向下展開內(nèi)容的方式。

接下來給大家再安利一個內(nèi)容折疊展開的顯示邏輯：

• Case2：默認顯示內(nèi)容為最多X行，多于X行后內(nèi)容收起為Y行，X≥Y。

以網(wǎng)易新聞的跟貼內(nèi)容為例，跟貼內(nèi)容最多顯示7行，多于7行后內(nèi)容收起為5行。

通常的處理方式是多于7行就收起為7行，這樣就造成點擊展開后可能只展開了一兩個字，大大的降低了點擊展開的操作和顯示效率。

收起行數(shù)小于最大顯示行數(shù)的折疊展開邏輯，能夠有效避免這種情況。同時保證更多內(nèi)容能完全展示，也節(jié)省了折疊后空間。

• Case3：折疊后點擊出現(xiàn)半屏浮層

露出部分內(nèi)容，點擊展開半屏浮層顯示全部內(nèi)容，如下圖。

（圖7-優(yōu)酷視頻）

這種方式常見于視頻播放等頁面。頁面內(nèi)承載了多個內(nèi)容模塊，每個模塊顯示部分內(nèi)容，點擊展開浮層顯示全部內(nèi)容。一方面保證了觀看體驗，避免跳出頁面對觀看體驗的打斷，另一方面有利于多個內(nèi)容模塊的展現(xiàn)。

2、信息的省略

多用于標題、昵稱、簡介等文字信息，通常是在內(nèi)容列表頁進行省略顯示。需要注意的是在列表頁省略的標題、簡介等，在內(nèi)容詳情頁盡量保證能夠完全顯示。否則在整個app內(nèi)沒有能夠查看到完整信息的頁面。如下圖中在列表中標題省略后，在詳情頁標題需要最多顯示兩行保證完全露出。

（圖8-網(wǎng)易云閱讀）

以上是筆者對數(shù)據(jù)特殊狀態(tài)設計的一些總結(jié)思考，通過筆者在設計中最常遇到的案例，選取了一些角度進行分析，希望對大家在處理類似情況時有所幫助。

作者：小能

來源：微信公眾號【ME網(wǎng)易移動設計】