淺談app加載頁面設(shè)計
![](http://image.woshipm.com/wp-files/img/102.jpg)
都說好的交互設(shè)計的評判標(biāo)準(zhǔn)之一是“別讓我等”,但互聯(lián)網(wǎng)產(chǎn)品總是受制于實際的網(wǎng)絡(luò)問題。移動端產(chǎn)品則更為明顯,2G、3G環(huán)境下加載不夠給力,wifi環(huán)境也未必每次都是那么順利。因此“別讓我等”更像是種奢望,我們倒應(yīng)該思考的是“如何優(yōu)雅而不令人煩躁的等”。與之最直接關(guān)聯(lián)的就是app加載頁面的設(shè)計。
一個app加載頁面,大致分為3類:
(一)啟動加載頁
啟動加載是我們打開app的第一眼所看到界面。會給用戶留下該產(chǎn)品的第一印象。
通常啟動加載頁設(shè)計有幾種:
1、固定的加載頁
Logo、slogan、產(chǎn)品主色、版本號、出品團隊,這是初級啟動頁面的基本構(gòu)成元素,設(shè)計者的目的就是最直接快速的向用戶傳達產(chǎn)品形象,這也是讓用戶最直接了解產(chǎn)品的手段之一。但也因為實現(xiàn)成本低,且樣式固定簡單,久而久之容易審美疲勞。于是加載頁開始升級。
這里要提到讓加載頁不那么孤立、突兀的方法:
視覺的延續(xù)性
。例如weiconote的加載頁背景和它的主界面背景一致,視覺上達到了和諧的過度。
動效的使用
。通過淡出或開門等轉(zhuǎn)場效果,讓加載頁面和內(nèi)容頁完美的過渡。例如豆瓣電影和天貓客戶端。
2、會變的加載頁
當(dāng)一塵不變的加載頁開始尋求出路,結(jié)果會是什么?對,會變的加載頁。但是任何變化總得有跡可循,讓用戶得以理解。目前有2種維度:
1.節(jié)假日定制加載頁
在不同的節(jié)日,啟動加載頁都會圍繞節(jié)日&產(chǎn)品進行設(shè)計。在突出產(chǎn)品形象的同時,傳達節(jié)日信息,是情感化設(shè)計的一個范例。例如掌上百度symbian。
![](https://image.woshipm.com/wp-files/2012/12/eccbc87e4b5ce2fe28308fd9f2a7baf33.png)
![](https://image.woshipm.com/wp-files/2012/12/a87ff679a2f3e71d9181a67b7542122c2.png)
![](https://image.woshipm.com/wp-files/2012/12/e4da3b7fbbce2345d7772b0674a318d52.jpg)
另外一個有趣的例子是有些應(yīng)用的啟動頁面,在用戶生日時埋下的彩蛋:這種都是轉(zhuǎn)移用戶注意力的手段,讓用戶不再沉浸在等待中,而是通過這段等待時間傳達其他有效信息,讓用戶不再煩躁。
2.不同版本定制加載頁
當(dāng)app版本升級后,啟動加載頁也隨之升級,可根據(jù)當(dāng)前版本的主題、特性或新增功能,設(shè)計符合該版本的加載頁面。也增強了用戶對新版本、新功能的認(rèn)知度。
![](https://image.woshipm.com/wp-files/2012/12/1679091c5a880faf6fb5e6087eb1b2dc1.jpg)
![](https://image.woshipm.com/wp-files/2012/12/8f14e45fceea167a5a36dedd4bea25432.png)
![](https://image.woshipm.com/wp-files/2012/12/c9f0f895fb98ab9159f51fd0297e236d1.jpg)
(上左新浪微博夏日版\上右新浪微博新年版\下左zaker嵌入游戲動漫版塊廣告)
3.同主界面的啟動頁
用app的內(nèi)容頁作為啟動頁面的內(nèi)容,從啟動加載頁到加載完成的首頁,版式內(nèi)容幾乎看不出差別。這樣的啟動頁,讓用戶提前進入主要界面,強化用戶對主界面的印象。也不容易造成很大的視覺跳躍感。但也存在問題,長得像主界面的加載頁會給用戶造成可用的假象,但如果加載的時間過長,點擊偽主頁如果無響應(yīng),也許會讓用戶惱火。
![](https://image.woshipm.com/wp-files/2012/12/45c48cce2e2d7fbdea1afc51c7c6ad261.jpg)
![](https://image.woshipm.com/wp-files/2012/12/d3d9446802a44259755d38e6d163e8201.jpg)
(pull time)
4.使用動畫的啟動頁
在游戲app中,這種方式較為常見,在loading的過程中,用戶看到是一段動態(tài)的flash。有時也有可能配以相關(guān)的游戲音樂。例如游戲subway surf。這種方式雖然最有富媒體效果,但同時卻也因為比較消耗資源。有時候因為加載負(fù)擔(dān)太重,甚至?xí)斐僧嬅娌涣鲿?。因此需?jǐn)慎選擇。
![](https://image.woshipm.com/wp-files/2012/12/6512bd43d9caa6e02c990b0a82652dca2.jpg)
(二)內(nèi)容加載頁
目前較常見的內(nèi)容加載頁會用加載模態(tài)框去表示當(dāng)前正在加載中,實在是不怎么美觀,且加載前和加載后的頁面關(guān)聯(lián)性很弱。這種體驗實在是很令人頭痛和不悅。
![](https://image.woshipm.com/wp-files/2012/12/c20ad4d76fe97759aa27a0c99bff67101.jpg)
![](https://image.woshipm.com/wp-files/2012/12/c51ce410c124a10e0db5e4b97fc2af392.jpg)
(zaker)
那有沒有內(nèi)容加載的好體驗?
幾種優(yōu)化手段:
1.增加加載頁面間的關(guān)聯(lián)性,避免使用模態(tài)框
例如line的通知加載。加載進程在加載的通知項上進行,這時候不妨礙用戶瀏覽上下的內(nèi)容。
![](https://image.woshipm.com/wp-files/2012/12/aab3238922bcc25a6f606eb525ffdc561.jpg)
![](https://image.woshipm.com/wp-files/2012/12/9bf31c7ff062936a96d3c8bd1f8f2ff31.jpg)
2.加載時就顯示加載后的頁面樣式,最大化保持視覺連貫性
這種手法也就是為了盡可能多的在加載過程中告知用戶有效信息,“你稍后即將看到的頁面會是什么樣”“會有哪些內(nèi)容”,讓用戶提前有個預(yù)期,也讓用戶有了等待的欲望。
![](https://image.woshipm.com/wp-files/2012/12/c74d97b01eae257e44aa9d5bade97baf1.jpg)
(flipboard)
3.加載時,預(yù)填充內(nèi)容
這里的內(nèi)容有2種??梢允翘崆邦A(yù)設(shè)好的,例如next day里的頭圖,再沒加載出來前都用一直可愛的兔子圖替代。另一種是,顯示上次瀏覽留下的內(nèi)容,像最近更新后的path,加載時,用戶可以查看上次加載成功的內(nèi)容,而且很巧妙的把加載中的圖片黑白虛化處理。
![](https://image.woshipm.com/wp-files/2012/12/70efdf2ec9b086079795c442636b55fb1.jpg)
![](https://image.woshipm.com/wp-files/2012/12/6f4922f45568161a8cdf4ad2299f6d231.jpg)
(三)下載、應(yīng)用的加載頁
另一個常見的加載是下載/應(yīng)用時的加載頁面。下載和應(yīng)用的過程可以看做是一個連貫的過程。而不要想象成兩個獨立的模態(tài)框。
在cardmon這個應(yīng)用中,下載和應(yīng)用的過程就被包裝成了一個連續(xù)而精致的過程。
設(shè)計者找到了card和下載之間的聯(lián)系,運用云端向信封連續(xù)不斷發(fā)送卡片的動效,再加上下載進度條,讓原本枯燥無味的下載等待過程展現(xiàn)出了那么一絲生氣。在下載完成之后,進度條順理成章的過渡成安裝過程。動畫效果依舊圍繞著之前的卡片logo進行。同樣的安裝進度條依舊可以提示用戶剩余的時間。
![](https://image.woshipm.com/wp-files/2012/12/1f0e3dad99908345f7439f8ffabdffc41.jpg)
![](https://image.woshipm.com/wp-files/2012/12/98f13708210194c475687be6106a3b841.jpg)
這一包裝手法的要點即是,找到產(chǎn)品與下載之間的某種關(guān)聯(lián),合理運用動效、進度條、連續(xù)的處理下載安裝過程。
另一種,是weico主題下載的形式,將下載和安裝看做獨立的兩個過程。下載和安裝分離的使用場景通常是,用戶也許希望瀏覽、下載多個主題,再確定使用哪個。因此,下載被處理成取代下載按鈕的進度條會比較合適,而非模態(tài)框。因為這樣的加載方式不影響用戶再瀏覽其他內(nèi)容,不會讓下載模態(tài)中斷用戶原本的瀏覽行為。
![](https://image.woshipm.com/wp-files/2012/12/3c59dc048e8850243be8079a5c74d0791.jpg)
以上就是app加載的幾種形式和設(shè)計方法??此撇黄鹧鄣募虞d頁面其實恰是整個app是否用心和精致的點睛之筆。這一點點的等待時間也許會改變整個用戶體驗。再次總結(jié),以上倡導(dǎo)的幾個原則:
1.合理利用啟動頁面,賦予等待時間更多的意義
2.避免使用模態(tài)打斷用戶
3.加載頁面,為用戶提供預(yù)期,和更多有意義的信息
4.注意保持視覺的連貫性
來源:百度MUX
- 目前還沒評論,等你發(fā)揮!