前面幾篇文章里面分析了交互設(shè)計(jì)的三維度：框架、流程和狀態(tài)，詳細(xì)內(nèi)容請(qǐng)見《三個(gè)維度，解析產(chǎn)品的交互設(shè)計(jì)》。本文將會(huì)是總結(jié)篇的最后一篇，主要詳細(xì)來講講頁(yè)面狀態(tài)和展示規(guī)則的一些門道。

現(xiàn)如今的移動(dòng)app應(yīng)用越來越成熟，用戶對(duì)于產(chǎn)品的用戶體驗(yàn)的要求也越來越高，一個(gè)好的用戶體驗(yàn)需要一個(gè)好的產(chǎn)品框架，一個(gè)流暢的操作流程，以及清晰的頁(yè)面狀態(tài)和展示規(guī)則。而對(duì)于頁(yè)面狀態(tài)的思考，我將其總結(jié)為5個(gè)方面：角色、網(wǎng)絡(luò)、內(nèi)容、時(shí)間、環(huán)境。

1、角色

用戶的當(dāng)前角色不同，其展示的頁(yè)面功能和樣式也是完全不同的。常見的角色區(qū)分主要有：登錄用戶和游客用戶（非登錄）；管理員用戶和普通用戶；會(huì)員用戶和非會(huì)員用戶；女性用戶和男性用戶等等。

舉個(gè)例子，上圖展示了用戶登錄前和登錄后頁(yè)面狀態(tài)展示的變化，這里要思考的是對(duì)于游客用戶和登錄用戶分別需要展示什么內(nèi)容？?jī)烧咴诠δ苁褂蒙嫌惺裁床顒e？用戶目標(biāo)的差別等等，當(dāng)然最重要的是思考這樣做的原因是什么。

2、網(wǎng)絡(luò)

網(wǎng)絡(luò)對(duì)于頁(yè)面狀態(tài)展示相對(duì)較為復(fù)雜，目前主要考慮的網(wǎng)絡(luò)形式有：無網(wǎng)、弱網(wǎng)、加載、加載失敗、斷網(wǎng)、wifi-3G/4G切換等等。

網(wǎng)絡(luò)異常的情況一直以來都是比較容易忽視的存在，但是往往這些細(xì)節(jié)的考慮會(huì)大大提升用戶體驗(yàn)。

網(wǎng)絡(luò)狀態(tài)的變化非常復(fù)雜，要考慮到每個(gè)點(diǎn)其實(shí)是不容易的，比如無網(wǎng)和瀏覽中突然斷網(wǎng)是兩種不同的場(chǎng)景，雖然有時(shí)候頁(yè)面展示相同，但用戶當(dāng)前的心理狀態(tài)是不同的；再比如加載中的頁(yè)面，加載是用戶端在獲取服務(wù)器的內(nèi)容，這個(gè)過程本身就是多變的，有可能是系統(tǒng)自動(dòng)請(qǐng)求獲取，也有可能是用戶手動(dòng)刷新獲取，這兩者在展示上也是有區(qū)別的，如果再極端一點(diǎn)，用戶不停地刷新獲取，那么對(duì)服務(wù)器產(chǎn)生壓力，設(shè)計(jì)上該怎么避免？另外加載過程需要請(qǐng)求時(shí)間，時(shí)間長(zhǎng)短跟網(wǎng)絡(luò)情況好壞有關(guān)，如果網(wǎng)絡(luò)不好，那么加載時(shí)間又怎么控制？加載成功和失敗又該怎么反饋？所有這些細(xì)節(jié)點(diǎn)都是要在交互設(shè)計(jì)的過程中思考的，雖然每個(gè)設(shè)計(jì)師的思路可能不同，但是都是為了給用戶帶來更好的體驗(yàn)。

3、內(nèi)容

內(nèi)容是頁(yè)面承載的主體，這里會(huì)影響頁(yè)面狀態(tài)幾個(gè)因素是：內(nèi)容為空、內(nèi)容太少、內(nèi)容溢出。

看個(gè)例子，上圖是郵箱的列表頁(yè)，這個(gè)頁(yè)面也會(huì)隨著內(nèi)容的變化頁(yè)面狀態(tài)也隨之變化，如果按照上面的方式思考的話，內(nèi)容為空、內(nèi)容太少和內(nèi)容溢出。內(nèi)容為空的狀態(tài)就是空頁(yè)面，內(nèi)容溢出就是你的消息內(nèi)容超出規(guī)定的范圍，這個(gè)時(shí)候需要考慮內(nèi)容溢出的展示樣式是什么樣子的？默認(rèn)展示多少字符？消息未讀是什么狀態(tài)？消息已讀又是什么狀態(tài)？?jī)?nèi)容太少的樣式又該如何展示？等等這些在設(shè)計(jì)這類頁(yè)面的時(shí)候都是要考慮清楚的。

4、時(shí)間

時(shí)間顧名思義是在不同的時(shí)間點(diǎn)頁(yè)面的某些元素會(huì)有不同的狀態(tài)

前段時(shí)間做了一些運(yùn)營(yíng)活動(dòng)設(shè)計(jì)，活動(dòng)經(jīng)常有個(gè)時(shí)間段，所以頁(yè)面按鈕的狀態(tài)會(huì)出現(xiàn)活動(dòng)開始前的“”即將開搶“”，活動(dòng)中的“”抽紅包“”，活動(dòng)結(jié)束后的“”已結(jié)束“”。當(dāng)然還有一些辦公類審批報(bào)銷類功能也涉及到時(shí)間與狀態(tài)的變化，這里的狀態(tài)變化相對(duì)比較復(fù)雜，不僅僅涉及到時(shí)間還有不同角色的區(qū)別，有興趣的朋友可以自己去體驗(yàn)一下。

5、環(huán)境

環(huán)境是一個(gè)比較少見的情況，但是在某類app中會(huì)顯得很重要，比如地圖類、天氣類應(yīng)用，常見的環(huán)境類型有位置、氣候、溫度、海拔、空氣質(zhì)量等等。地圖類應(yīng)用可以根據(jù)當(dāng)前的定位給你展示最近的路線方案；天氣類應(yīng)用可以根據(jù)當(dāng)前的溫度給你推薦不同的出行裝備；還有一些AR類應(yīng)用會(huì)根據(jù)你前的地理位置和環(huán)境做一些游戲類的互動(dòng)，qq和支付寶都做過這些嘗試，未來這樣的新興的交互方式也會(huì)越來越多，而對(duì)于交互設(shè)計(jì)師來說，除了要了解本身的知識(shí)學(xué)習(xí)之外，更是為了準(zhǔn)備好即將到來的新時(shí)代。

最后將上面5個(gè)要素重新梳理一下，下面舉個(gè)例子：

這是微信的消息頁(yè)，這個(gè)頁(yè)面的狀態(tài)也是非常多的，按照上面的思路來分析：角色-網(wǎng)絡(luò)-內(nèi)容-時(shí)間-環(huán)境。

角色：首先看看是否有登錄用戶和游客用戶的區(qū)別，微信是強(qiáng)登錄，所以這里只有登錄后狀態(tài)；然后看看有沒有什么會(huì)員、管理員與普通用戶的區(qū)別，目前微信好像沒有什么會(huì)員體系，所以這里也沒有這種狀態(tài)。

網(wǎng)絡(luò)：思考一下網(wǎng)絡(luò)中斷的展示方式？然后加載中、加載失敗和加載成功都是什么樣式的？弱網(wǎng)條件下又展示哪些內(nèi)容？加載機(jī)制又是什么樣子的？ 等等等等……微信這方面的考慮還是很周全的，有興趣可以自己去嘗試看一下。

內(nèi)容：消息列表為空頁(yè)面怎么展示？消息內(nèi)容溢出該如何表達(dá)？默認(rèn)的字符要多少？未讀消息怎么表現(xiàn)？超過99該如何？超過999又該如何？消息已讀后如何展現(xiàn)？

時(shí)間：想想不同的時(shí)間點(diǎn)頁(yè)面狀態(tài)會(huì)不會(huì)有區(qū)別和變化，這里的時(shí)間主要是不同的時(shí)間點(diǎn)消息的推送，這里的狀態(tài)主要是內(nèi)容的變化導(dǎo)致的。

環(huán)境：考慮下不同的地理位置、空氣、氣候、溫度等等因素會(huì)不會(huì)產(chǎn)生影響，目前來看這個(gè)方面對(duì)頁(yè)面不會(huì)有什么狀態(tài)影響。

其實(shí)在實(shí)際的工作中，頁(yè)面的狀態(tài)變化是非常復(fù)雜的，這里總結(jié)的幾個(gè)維度，姑且可以作為設(shè)計(jì)工作中參考的幾個(gè)點(diǎn)，讓我們?cè)谧鼋换ピO(shè)計(jì)的過程中能夠有一個(gè)比較全面的思考方向，也能夠盡量避免一些重要狀態(tài)的缺失。交互設(shè)計(jì)的價(jià)值不僅僅需要有合理的框架、流暢的流程，更需要每個(gè)頁(yè)面狀態(tài)的精雕細(xì)琢，然而對(duì)于用戶來說，可能每一個(gè)細(xì)節(jié)體驗(yàn)的提升都代表了用戶對(duì)產(chǎn)品的認(rèn)可。

相關(guān)閱讀

交互總結(jié)篇（一）：框架與布局

交互總結(jié)篇（二）：流程設(shè)計(jì)

本文由 @小米渣和大冬瓜 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自PEXELS，基于CC0協(xié)議