描述：以一種合適的方式告訴用戶正在發(fā)生什么，將會發(fā)生什么，減少用戶的等待感。
上下文情境：用戶進(jìn)行一種操作后，打開APP，點(diǎn)擊列表，點(diǎn)擊下載等等，需要一定的時(shí)間的等待，加載結(jié)束后的過渡和隨后呈現(xiàn)。
任務(wù)流程：操作，加載，同時(shí)反饋，結(jié)果呈現(xiàn)
構(gòu)成元素：進(jìn)度條，無限循環(huán)指示器，
相關(guān)元素：太多，不列舉
設(shè)計(jì)標(biāo)準(zhǔn)：不要讓用戶無聊；給予用戶及時(shí)的反饋；讓用戶有流暢的使用體驗(yàn)；用戶隨時(shí)可以取消

按照加載出現(xiàn)的前置條件可以分為下列幾種，只是列舉，可能會有考慮不全的地方

1開屏加載

這個(gè)是最常見的花樣也是最多的，各種開屏加載方式五花八門在iOS的設(shè)計(jì)規(guī)范中，對開屏的加載方式有了比較詳盡的指導(dǎo)：

盡可能避免使用啟動(dòng)畫面或類似的啟動(dòng)體驗(yàn)。最好讓用戶可以立即開始使用你的app
顯示一個(gè)和app首屏及其相似的啟動(dòng)畫面（框架，或背景色）。這可以讓用戶感覺你的app非?？?，并讓你有足夠的時(shí)間去加載內(nèi)容
但作為一個(gè)開屏畫面，使用app的用戶都能看到的地方，不對它上下其手，是在不符合我們的商業(yè)利益，所以在開屏動(dòng)畫這里一般會放入以下幾個(gè)東西代替交互規(guī)范的推薦

1）品牌展示

通常包括LOGO，品牌名稱，slogan；或者還有分發(fā)渠道（某某首發(fā)等）

2）活動(dòng)頁面

在一些活動(dòng)上線，或者一些隱藏功能，起到告知用戶的作用

3）廣告頁面

不解釋，不過最好配一些高大上的，有逼格的廣告

最后還有這個(gè)微信這個(gè)獨(dú)樹一幟的，充滿情懷的啟動(dòng)畫面

2層級內(nèi)切換

在同級頁面如tab間的切換，如果信息不多或可以復(fù)用，可以在一個(gè)頁面內(nèi)先加載完成。如很多APP中的我的模塊，基本都是采用一個(gè)頁面加載多個(gè)的方式。如微信的個(gè)性信息。你進(jìn)入微信后，即使關(guān)閉網(wǎng)絡(luò)，也能看到我頁面的信息。這樣在同級頁面間切換時(shí)會很流暢，同時(shí)也不會消耗太多流量，是一種平衡。

3層級間跳轉(zhuǎn)

如列表頁進(jìn)入詳情頁，圖片詳情等。
1）如果頁面內(nèi)容單一，采取全頁面加載，頁面會處于空白，這個(gè)時(shí)候需要一個(gè)無限加載循環(huán)或進(jìn)度條來顯示狀態(tài)，讓用戶保持耐心。這個(gè)常見于只有一個(gè)元素的載入情形，或者也適用于全屏圖片加載。

2）如果頁面元素比較多，但框架比較固定，搜索進(jìn)入進(jìn)入結(jié)果頁，首頁進(jìn)入列表頁等。可以采取分塊加載的方式。分塊加載，分步加載，優(yōu)先重要內(nèi)容，易加載信息；如果模塊有關(guān)聯(lián)性優(yōu)先加載父內(nèi)容；框架固定的，內(nèi)容更新的，先把框架加載出來。加載用戶的等待感；帶入前置窗口已加載過的部分信息（如知乎，請忽略內(nèi)容~）。

注意：這種加載方式要注意加載失敗的狀態(tài)，不能多個(gè)模塊提示多個(gè)錯(cuò)誤，可以根據(jù)信息的優(yōu)先級來決定哪些數(shù)據(jù)失敗采用默認(rèn)狀態(tài)，哪些數(shù)據(jù)采用失敗提示。
在這方式下，可以采用預(yù)置的格式化信息（圖片的占位符，信息分割樣式，按鈕形狀顏色），在信息傳入前就把信息傳遞給用戶。

3）預(yù)先加載，這種在新聞列表頁面比較常見的一種加載方法，預(yù)判用戶會點(diǎn)擊的列表項(xiàng)，在用戶點(diǎn)擊前就加載頁面內(nèi)容；或者在一些功能使用流程中（如閱讀中的預(yù)先加載下一頁），預(yù)判用戶操作流程提前一步。這種加載方式給予用戶無縫的使用體驗(yàn)，使得用戶在使用產(chǎn)品過程中更直接流程，沒有被打斷的感覺。但這種加載方式容易消耗不必要的流量，要結(jié)合網(wǎng)絡(luò)情況和加載內(nèi)容進(jìn)行綜合考慮，可以只加載文字信息或關(guān)鍵信息。同時(shí)預(yù)先加載也是需要消耗時(shí)間，所以要同時(shí)考慮一種正常情況下的加載方式。

4界面內(nèi)加載

1）模態(tài)提示層，app在觸發(fā)后加載后，出現(xiàn)模態(tài)提示層，防止用戶在加載過程中進(jìn)行其他操作，導(dǎo)致當(dāng)前加載出錯(cuò)。如果采用模態(tài)加載，肯會因?yàn)榫W(wǎng)絡(luò)原因或內(nèi)容過多導(dǎo)致長時(shí)間處于加載狀態(tài)，建議提供一個(gè)“取消”的操作。同時(shí)在安卓中的后退按鈕能關(guān)閉模態(tài)提示。

2）控件自身加載，把操作加載的狀態(tài)與控件的樣式結(jié)合起來，對某個(gè)控件進(jìn)行操作后，控件變?yōu)榧虞d狀態(tài)，此時(shí)控件不能重復(fù)操作，當(dāng)加載完畢后，控件再作為顯示加載結(jié)果的狀態(tài)。比如說appstore的免費(fèi)/獲取/打開按鈕，還要支付寶的支付按鈕，音頻軟件中常見的下載按鈕。這種加載方式是控件的自身狀態(tài)，不影響其他操作，所以用戶也可以對頁面進(jìn)行操作，因此也會導(dǎo)致同時(shí)有多個(gè)請求的情況，增加了加載失敗的風(fēng)險(xiǎn)。請求失敗后可配合提示告知用戶失敗的原因。
3）導(dǎo)航欄加載，這個(gè)在微信里面比較常見，以導(dǎo)航欄的形式展現(xiàn)加載狀態(tài)，如剛進(jìn)入的連接中，消息數(shù)，對方正在輸入等。將導(dǎo)航欄標(biāo)題臨時(shí)變?yōu)榧虞d信息，在用戶與產(chǎn)品互動(dòng)過程中提供實(shí)時(shí)反饋，此時(shí)的產(chǎn)品不再是一堆冷冰冰的界面，而是一位善于溝通的人。

4）后臺加載，用戶在操作后，app立即反饋操作成功，然后把加載過程放到后臺，用戶不需要了解也不需要等待，例如微信里面的點(diǎn)贊。但因?yàn)楹笈_操作，可能有時(shí)候明明顯示成功，但其實(shí)失敗，所以一些比較重要的操作不太適合用這種方式來呈現(xiàn)。
5）界面內(nèi)刷新，自從teitter出了下拉刷新后，這種無盡列表加載方式（下拉刷新，上拉加載更多）已經(jīng)已經(jīng)為廣大用戶所接受。列表頁面默認(rèn)加載部分，在用戶進(jìn)行操作后，根據(jù)用戶行為俠士更多列表內(nèi)容，無需點(diǎn)擊下一頁。但這個(gè)會導(dǎo)致用戶沒有足夠的定位信息，不知道自己閱讀到哪里。很難再次找到以前見過的一些信息。懶注意，加載時(shí)需要注意一次要加載的內(nèi)容的數(shù)量，一般是根據(jù)內(nèi)容的大小和高度來決定，既能較快的載入內(nèi)容，又能讓用戶更順暢地查看而不用一直等待加載；另一方面是加載的時(shí)間，好的懶加載會根據(jù)用戶的瀏覽速度去調(diào)節(jié)加載的時(shí)間點(diǎn)，而不是在瀏覽加載完內(nèi)容后才開始繼續(xù)加載。
看看微信逆天下之大不違把小視頻放在聊天窗口的下拉里，導(dǎo)致網(wǎng)上罵聲一片，最近在最新的版本里有偷偷改掉。有些用戶習(xí)慣，可以被挑戰(zhàn)，有些不能~

5上述劃分是根據(jù)層級關(guān)系進(jìn)行的加載方式區(qū)分，另外還有從網(wǎng)絡(luò)情況角度進(jìn)行考慮

1）智能加載方式，根據(jù)網(wǎng)絡(luò)環(huán)境自適應(yīng)加載。在不同的網(wǎng)絡(luò)情況下，智能判斷是否下載圖片，圖片質(zhì)量（花瓣上傳）等，并且在網(wǎng)絡(luò)情況發(fā)生變化時(shí)提醒用戶變化情況。對于2G用戶給用戶提供最核心的少量內(nèi)容，同時(shí)在更多內(nèi)容的情況下也要提供手動(dòng)查看這部分信息的操作（知乎圖片）。

2）離線訪問，移動(dòng)場景帶來的網(wǎng)絡(luò)情況的多樣性，有時(shí)候用戶沒有網(wǎng)絡(luò)（網(wǎng)絡(luò)覆蓋），或者關(guān)閉網(wǎng)絡(luò)（流量限制）?？梢跃彺嬉徊糠?jǐn)?shù)據(jù)來進(jìn)行離線訪問，這樣在斷網(wǎng)情況下也能使用英語，并能訪問已有的數(shù)據(jù)；減少流量的消耗；減少訪問時(shí)間。但考慮到手機(jī)空間，要設(shè)計(jì)合適的離線機(jī)制。并配合一定的清理緩存的機(jī)制。另外要考慮現(xiàn)在安卓手機(jī)清理軟件的橫行，要提醒用戶加入白名單，不然用戶會經(jīng)常以為app出問題。

6使用一個(gè)確定的指示器

在加載過程中盡量使應(yīng)用加載過程令人愉快，這時(shí)候有一個(gè)狀態(tài)指示可以減少用戶等待的焦慮感，同時(shí)在長時(shí)間加載中不會誤以為app崩潰。

對于完成部分可以確定的情況下，使用一個(gè)確定的指示器，他們會告知用戶操作所需的時(shí)間。
對于完成部分不確定，用戶需要等待，無需告知后臺的情況以及所需時(shí)間，這時(shí)可以使用一個(gè)不確定的指示器。

1)無限循環(huán)指示器

用于表明app正在執(zhí)行某些處理。如果正在執(zhí)行的處理影響范圍較大，可以使用模態(tài)的無限循環(huán)指示器。如果只是界面的一部分，可以采用小尺寸的提示信息。
如果顯示時(shí)間較長，筆者建議改用進(jìn)度條來提示用戶當(dāng)前的執(zhí)行進(jìn)度以及還需要等待多少時(shí)間，這樣能減少用戶的焦躁感。同時(shí)讓用戶可以取消這個(gè)狀態(tài)，或執(zhí)行其他操作
ios（多個(gè)顏色深淺隨時(shí)間變化的圓角長方形來營造旋轉(zhuǎn)的感覺），安卓采用一個(gè)不斷旋轉(zhuǎn)的色彩深淺不一的環(huán)形圖標(biāo)

2)進(jìn)度條

瀏覽器的進(jìn)度條是一種較為常見的進(jìn)度告知設(shè)計(jì)，通過這個(gè)進(jìn)度告知，讓用戶有了更加明確的知情權(quán)，也能更好的預(yù)期到加載完成的時(shí)間。但即便是小小的進(jìn)度條，也有很多的設(shè)計(jì)技巧在里面。
一個(gè)非常經(jīng)典的體驗(yàn)設(shè)問，同樣是3s的加載時(shí)間，勻速的進(jìn)度條、先慢后快的進(jìn)度條、先快后慢的進(jìn)度條，哪個(gè)讓用戶感覺上最快?經(jīng)過科學(xué)的實(shí)驗(yàn)證實(shí)，先慢后快的進(jìn)度條是讓用戶心理感受上最快的設(shè)計(jì)。這是因?yàn)橛脩糇钊菀子涀∽詈笠凰查g的感覺，如果最后一瞬間，感知到了快，就覺得順暢了。但這點(diǎn)論點(diǎn)存疑，微信朋友圈網(wǎng)頁打開后進(jìn)度條會快速前進(jìn)一大半，然后再緩慢加載。不知道是不是有另外的依據(jù)。

3)自定義的動(dòng)畫

自定義動(dòng)畫現(xiàn)在是比較常見的指示器方式，加入與品牌相關(guān)的元素，增加趣味性。

一些相關(guān)書籍文章
《iOS設(shè)計(jì)規(guī)范》
《移動(dòng)設(shè)計(jì)》
《APP這樣設(shè)計(jì)才好賣》
淺談移動(dòng)端App的頁面載入方式
iOS App中數(shù)據(jù)加載的6種方式
隱藏在背后的交互設(shè)計(jì)

作者：靜默之思

來源：http://www.jianshu.com/p/5349de8d0c9c