本文有@百度MUX 團隊所撰。都說好的交互設計的評判標準之一是「別讓我等」，但互聯網產品總是受制于實際的網路問題。移動端產品則更為明顯，2G、3G環境下載入不夠給力，wifi環境也未必每次都是那麼順利。因此「別讓我等」更像是種奢望，我們倒應該思考的是「如何優雅而不令人煩躁的等」。與之最直接關聯的就是App載入頁面的設計。
一個app載入頁面，大致分為3類：
一、啟動載入頁
啟動載入是我們打開App的第一眼所看到介面。會給使用者留下該產品的第一印象。通常啟動載入頁設計有幾種：
1、固定的載入頁
Logo、slogan、產品主色、版本號、出品團隊，這是初級啟動頁面的基本構成元素，設計者的目的就是最直接快速的向使用者傳達產品形象，這也是讓使用者最直接瞭解產品的手段之一。但也因為實現成本低，且樣式固定簡單，久而久之容易審美疲勞。於是載入頁開始升級。
這裡要提到讓載入頁不那麼孤立、突兀的方法：
視覺的延續性
例如Weiconote的載入頁背景和它的主介面背景一致，視覺上達到了和諧的過度。
動效的使用
通過淡出或開門等轉場效果，讓載入頁面和內容頁完美的過渡。例如豆瓣電影和天貓用戶端。
2、會變的載入頁
當一成不變的載入頁開始尋求出路，結果會是什麼？對，會變的載入頁。但是任何變化總得有跡可循，讓使用者得以理解。目前有2種維度：
1.公休日定制載入頁
在不同的節日，啟動載入頁都會圍繞節日&產品進行設計。在突出產品形象的同時，傳達節日資訊，是情感化設計的一個範例。例如掌上百度Symbian。
另外一個有趣的例子是有些應用的啟動頁面，在使用者生日時埋下的彩蛋：這種都是轉移使用者注意力的手段，讓使用者不再沉浸在等待中，而是通過這段等待時間傳達其他有效資訊，讓使用者不再煩躁。
2.不同版本定制載入頁
當App版本升級後，啟動載入頁也隨之升級，可根據當前版本的主題、特性或新增功能，設計符合該版本的載入頁面。也增強了使用者對新版本、新功能的認知度。
(左新浪微博夏日版\中新浪微博新年版\右zaker嵌入遊戲動漫版塊廣告)
3.同主介面的啟動頁
用App的內容頁作為啟動頁面的內容，從啟動載入頁到載入完成的首頁，版式內容幾乎看不出差別。這樣的啟動頁，讓使用者提前進入主要介面，強化使用者對主介面的印象。也不容易造成很大的視覺跳躍感。
但也存在問題，長得像主介面的載入頁會給使用者造成可用的假像，如果載入的時間過長，點擊偽主頁如果無回應，也許會讓使用者惱火。
(pull time)
4.使用動畫的啟動頁
在遊戲App中，這種方式較為常見，在Loading的過程中，使用者看到是一段動態的Flash。有時也有可能配以相關的遊戲音樂。例如遊戲Subway Surf。這種方式雖然最有富媒體效果，但同時卻也因為比較消耗資源。有時候因為載入負擔太重，甚至會造成畫面不流暢。因此需謹慎選擇。
二、內容載入頁
目前較常見的內容載入頁會用載入模態框去表示當前正在載入中，實在是不怎麼美觀，且載入前和載入後的頁面關聯性很弱。這種體驗實在是很令人頭痛和不悅。
(zaker)
那有沒有內容載入的好體驗？
幾種優化手段：
1.增加載入頁面間的關聯性，避免使用模態框
例如line的通知載入。載入進程在載入的通知項上進行，這時候不妨礙使用者流覽上下的內容。
2.載入時就顯示載入後的頁面樣式，最大化保持視覺連貫性
這種手法也就是為了盡可能多的在載入過程中告知使用者有效資訊，「你稍後即將看到的頁面會是什麼樣」「會有哪些內容」，讓使用者提前有個預期，也讓使用者有了等待的欲望。
(Flipboard)
3.載入時，預填充內容
這裡的內容有2種。可以是提前預設好的，例如next day裡的頭圖，再沒載入出來前都用一直可愛的兔子圖替代。另一種是，顯示上次流覽留下的內容，像最近更新後的path，載入時，使用者可以查看上次載入成功的內容，而且很巧妙的把載入中的圖片黑白虛化處理。
三、下載應用的載入頁
另一個常見的載入是下載/應用時的載入頁面。下載和應用的過程可以看做是一個連貫的過程。而不要想像成兩個獨立的模態框。
在cardmon這個應用中，下載和應用的過程就被包裝成了一個連續而精緻的過程。
設計者找到了card和下載之間的聯繫，運用雲端向信封連續不斷發送卡片的動效，再加上下載進度條，讓原本枯燥無味的下載等待過程展現出了那麼一絲生氣。在下載完成之後，進度條順理成章的過渡成安裝過程。動畫效果依舊圍
繞著之前的卡片logo進行。同樣的安裝進度條依舊可以提示使用者剩餘的時間。
這一包裝手法的要點即是，找到產品與下載之間的某種關聯，合理運用動效、進度條、連續的處理下載安裝過程。
另一種，是weico主題下載的形式，將下載和安裝看做獨立的兩個過程。下載和安裝分離的使用場景通常是，使用者也許希望流覽、下載多個主題，再確定使用哪個。
因此，下載被處理成取代下載按鈕的進度條會比較合適，而非模態框。因為這樣的載入方式不影響使用者再流覽其他內容，不會讓下載模態中斷使用者原本的流覽行為。
以上就是App載入的幾種形式和設計方法。看似不起眼的載入頁面其實恰是整個App是否用心和精緻的點睛之筆。這一點點的等待時間也許會改變整個使用者體驗。再次總結，以上宣導的幾個原則：
- 合理利用啟動頁面，賦予等待時間更多的意義
- 避免使用模態打斷使用者
- 載入頁面，為使用者提供預期，和更多有意義的資訊
- 注意保持視覺的連貫性
團隊博客：百度MUX
特別注意：本站所有轉載文章言論不代表本站觀點，本站所提供的攝影照片，插畫，設計作品，如需使用，請與原作者聯繫，文章轉自alibuybuy