這是《App產(chǎn)品設(shè)計(jì)指南》系列文章的第7篇內(nèi)容聊闯，更多精彩可以點(diǎn)擊下方鏈接查看卷胯。

《App產(chǎn)品設(shè)計(jì)指南》專欄目錄

經(jīng)過前面幾篇內(nèi)容預(yù)熱赚楚，相信大家已經(jīng)對(duì)App產(chǎn)品的設(shè)計(jì)理念，研發(fā)流程有了一定的認(rèn)知宠页。接下來我們來正式切入正題，一起來學(xué)習(xí)關(guān)于App產(chǎn)品設(shè)計(jì)的具體知識(shí)點(diǎn)举户。需要說明的是烤宙，后續(xù)的文章為了讓大家更直觀地理解，語言上會(huì)比較直白俭嘁。文章之外的很多細(xì)節(jié)，比如說B站的情感化設(shè)計(jì)屯远，微信克制的初心蔓姚，這些都需要大家主動(dòng)思考和發(fā)散才能深刻的理解。

在本文中我會(huì)重點(diǎn)介紹一下App產(chǎn)品的通用模塊慨丐。在產(chǎn)品初期一定要設(shè)計(jì)好產(chǎn)品的通用模塊坡脐，這些模塊會(huì)伴隨著產(chǎn)品的一生。如果沒有設(shè)計(jì)好备闲，后續(xù)迭代多半會(huì)踩坑填坑捅暴。我目前在用的機(jī)器是小米9，所以后面會(huì)出現(xiàn)較多的安卓系統(tǒng)的案例蓬痒。

全局加載

經(jīng)常會(huì)在App中看到轉(zhuǎn)圈加載的交互，這個(gè)就屬于全局加載狱掂。在數(shù)據(jù)沒有獲取到之前顯示加載中的特效；數(shù)據(jù)請(qǐng)求后再渲染頁面趋惨，這樣的交互能讓用戶不至于焦慮惦蚊。下面介紹幾種常見的設(shè)計(jì)：

（1）App頁面中顯示loading圖標(biāo)，增加文案引導(dǎo)蹦锋。由于一般是圓圈加載，速成菊花圖葛圃。

餓了嗎&簡(jiǎn)書

（2）App頁面中顯示由矩形巫湘、圓形等圖案組合的輪廓效果昏鹃。這種效果有一個(gè)學(xué)名叫做骨架屏。

需要說明的是骨架屏最好根據(jù)頁面內(nèi)容來顯示輪廓效果阅嘶，如果使用相同的設(shè)計(jì)效果就會(huì)不太理想。

騰訊新聞&一點(diǎn)資訊

（3）webview頁面中在頁面頂部顯示進(jìn)度條讯柔，表示對(duì)應(yīng)的加載進(jìn)度。

全局加載需要設(shè)置一個(gè)數(shù)據(jù)請(qǐng)求上限粗截，比如說10S捣炬。如果達(dá)到上限還沒有請(qǐng)求到數(shù)據(jù)，就要顯示對(duì)應(yīng)的失敗提示湿酸，下文中會(huì)提到這種場(chǎng)景。

淘寶&網(wǎng)易云音樂

空白頁

在列表頁面中經(jīng)常會(huì)出現(xiàn)沒有數(shù)據(jù)的情況推溃，我們要明確的告訴這是什么，為什么出現(xiàn)蜂奸，用戶要做什么厢呵。在實(shí)際情況中，上面3種處理會(huì)組合出現(xiàn)襟铭。

不同頁面的內(nèi)容都不一樣，所以空白頁最好能根據(jù)頁面的內(nèi)容來進(jìn)行設(shè)計(jì)

得到&喜馬拉雅

網(wǎng)絡(luò)異常

用戶進(jìn)入新頁面時(shí)赐劣，本地判斷網(wǎng)絡(luò)情況哩都。如果網(wǎng)絡(luò)異常則顯示該狀態(tài)，一般都會(huì)增加“重新加載”“點(diǎn)擊刷新”“查看網(wǎng)絡(luò)設(shè)置”這種操作提示孽锥。

類似微信釘釘?shù)仁褂瞄L(zhǎng)連接機(jī)制的App，如果網(wǎng)絡(luò)中斷化撕，頁面頂部會(huì)顯示網(wǎng)絡(luò)異常提示约炎。

網(wǎng)絡(luò)異常屬于可以實(shí)時(shí)判斷的情況蟹瘾，進(jìn)入頁面時(shí)就能立刻判斷掠手。

美團(tuán)&可聽

錯(cuò)誤提示

這種情況一般發(fā)生在服務(wù)器出問題的時(shí)候，相當(dāng)于網(wǎng)頁上的404狀態(tài)众雷。比如說連接人數(shù)特別多魁衙，或者服務(wù)器宕機(jī)，此時(shí)就會(huì)觸發(fā)該狀態(tài)剖淀。

上面說的錯(cuò)誤提示需要客戶端請(qǐng)求數(shù)據(jù)一段時(shí)間（比如說10S）之后才會(huì)觸發(fā)。一般包括整個(gè)頁面出錯(cuò)翻诉，部分內(nèi)容出錯(cuò)兩種場(chǎng)景捌刮。前者需要有對(duì)應(yīng)的頁面設(shè)計(jì)，后者一般使用toast這種輕度的設(shè)計(jì)绅作。

熊貓直播&即刻

刷新加載

上拉加載

如果數(shù)據(jù)量比較少，可以一次性加載完个少；而數(shù)據(jù)量較多時(shí)眯杏，就需要分頁加載。比如先加載20條數(shù)據(jù)岂贩，然后再繼續(xù)加載。

（1）觸發(fā)上拉加載分為2種情況卸伞，一種是用戶看完當(dāng)前頁向上滑動(dòng)時(shí)再加載數(shù)據(jù)锉屈；另外一種是預(yù)加載，即用戶還在瀏覽當(dāng)前數(shù)據(jù)部念，程序在后臺(tái)自動(dòng)加載數(shù)據(jù)。比如抖音App妓湘，你在瀏覽視頻時(shí)乌询，系統(tǒng)會(huì)自動(dòng)加載后面幾個(gè)視頻。

（2）數(shù)據(jù)全局加載完妹田，顯示觸底提示，文案如“沒有更多數(shù)據(jù)了”“我可是有底線的”驶拱。

（3）如果上拉加載數(shù)據(jù)失敗晶衷，在底部顯示加載失敗并顯示“重試”按鈕。這種場(chǎng)景也可以不予考慮晌纫。

IT之家

下拉刷新

用戶在頁面頂端主動(dòng)進(jìn)行下拉操作，當(dāng)前頁面數(shù)據(jù)進(jìn)行刷新箭养。如果有其他頁面的數(shù)據(jù)或者配置發(fā)生變化哥牍，也可以同步更新。下拉刷新一般分為以下4個(gè)步驟：

（1）用戶向下拉動(dòng)時(shí)提示用戶在進(jìn)行刷新操作砂心；

（2）用戶下拉是有區(qū)域范圍的，一般在屏幕的1/3處左右坎弯。當(dāng)下拉達(dá)到這個(gè)區(qū)域時(shí)译暂，提示用戶此時(shí)松開可以刷新數(shù)據(jù)。

（3）顯示刷新中的交互效果外永；

（4）提示用戶刷新成功，可以把刷新成功的數(shù)字顯示出來囚灼。如果擠在失敗則toast刷新失敗。

今日頭條

在寫作過程中灶体，如果有意見或者想法，歡迎有興趣的讀者添加我的微信一起交流探索政钟，共同進(jìn)步樟结。