2012-9-21 藍(lán)藍(lán)設(shè)計(jì)的小編
轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)( www.jghy.net )是一家專(zhuān)注而深入的設(shè)計(jì)機(jī)構(gòu) ，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的 BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
來(lái)源：http://www.uisheji.com/114587.html
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
點(diǎn)擊圖標(biāo)，等待應(yīng)用程序啟動(dòng)。在這個(gè)簡(jiǎn)單的過(guò)程中，啟動(dòng)畫(huà)面會(huì)呈現(xiàn)在我們眼前。有時(shí)候它讓我們眼前一亮，有時(shí)候它會(huì)讓我們感到困惑，有時(shí)候它會(huì)讓我們感到厭倦……
小小的啟動(dòng)畫(huà)面到底有什么學(xué)問(wèn)，它對(duì)產(chǎn)品用戶體驗(yàn) 都有哪些影響？本篇文章做了一些分析和總結(jié)，希望對(duì)你有幫助。
什么是啟動(dòng)畫(huà)面
當(dāng)用戶啟動(dòng)一個(gè)操作系統(tǒng)、軟件或者應(yīng)用程序的時(shí)候，首先出現(xiàn)的承載產(chǎn)品標(biāo)識(shí)及相關(guān)信息的圖形界面 。例如，Office軟件程序的啟動(dòng)畫(huà)面，上面有產(chǎn)品的標(biāo)識(shí)，發(fā)行公司以及一些可能的操作。
為什么需要啟動(dòng)畫(huà)面
按照體驗(yàn)設(shè)計(jì) 法則——讓用戶快速的開(kāi)始任務(wù)，啟動(dòng)畫(huà)面貌似是用戶開(kāi)始任務(wù)前的障礙。其實(shí)不然，實(shí)際情況是程序的啟動(dòng)是需要一點(diǎn)時(shí)間的，有時(shí)這個(gè)時(shí)間會(huì)比較長(zhǎng)，比如操作系統(tǒng)的啟動(dòng)、大型制圖或者辦公軟件的啟動(dòng)等等。而在這段時(shí)間里，如果顯示黑屏顯然不恰當(dāng)，如果顯示一段段正在運(yùn)行的程序代碼又過(guò)于機(jī)械（早起的DOS操作系統(tǒng)大家應(yīng)該有所印象）。
啟動(dòng)需要時(shí)間，所以帶來(lái)了一些用戶體驗(yàn) 的問(wèn)題
1.用戶不知道機(jī)器在做什么，會(huì)懷疑機(jī)器遲鈍、效率低下
2.用戶等待會(huì)有厭煩情緒，直接影響對(duì)機(jī)器的情感
為了解決這些體驗(yàn)問(wèn)題，人們使用一個(gè)畫(huà)面來(lái)代替后臺(tái)正在運(yùn)行的代碼，換來(lái)人們對(duì)機(jī)器的好感。為了做到這一點(diǎn)，很多公司都用心良苦，動(dòng)畫(huà)越來(lái)越細(xì)膩，形式也越來(lái)越多。這里不贅述舉例，主要談?wù)勔苿?dòng)應(yīng)用客戶端的啟動(dòng)畫(huà)面（以iOS平臺(tái)為例）。
移動(dòng)應(yīng)用程序的啟動(dòng)畫(huà)面存在的環(huán)境
移動(dòng)應(yīng)用程序存在的環(huán)境是惡劣的，這是相對(duì)PC來(lái)說(shuō)。即使產(chǎn)品設(shè)計(jì) 支出對(duì)功能做了很多減法，即使工程師日日夜夜在做性能優(yōu)化，應(yīng)用程序的啟動(dòng)還是需要一些時(shí)間。啟動(dòng)畫(huà)面在移動(dòng)客戶端產(chǎn)品存在的必要性不得而知。
移動(dòng)應(yīng)用程序啟動(dòng)畫(huà)面的設(shè)計(jì)法則一 ——避免顯示無(wú)關(guān)內(nèi)容，包括一個(gè)漂亮的圖，要盡力讓啟動(dòng)畫(huà)面變得有意義。對(duì)于用戶來(lái)說(shuō)，他們希望立即體驗(yàn)?zāi)愕膽?yīng)用程序而不是欣賞一些無(wú)用信息。
如何理解這個(gè)法則，如何使用這個(gè)法則，下面的例子說(shuō)明了一切，你也可以下載并體驗(yàn)這些應(yīng)用，了解更多有關(guān)啟動(dòng)畫(huà)面的秘密，歡迎隨時(shí)交流。
場(chǎng)景一 品牌含義的延伸
如果啟動(dòng)時(shí)間不是一兩秒那么短的時(shí)間，我們可以利用這個(gè)時(shí)間展示應(yīng)用程序的品牌。但是不要只是展示品牌，最好能夠結(jié)合應(yīng)用程序所提供的服務(wù)，將品牌的含義延伸到畫(huà)面中，帶給用戶一種親切感，或者讓用戶了解到產(chǎn)品的文化，或者其他你想讓用戶了解的故事。
案例一
只是標(biāo)識(shí)的設(shè)計(jì)。很多應(yīng)用都是這樣設(shè)計(jì)的。將自己的標(biāo)識(shí)往中間一放，告訴用戶我就是我。然后沒(méi)有任何情感的進(jìn)入了內(nèi)容界面。有的時(shí)候，標(biāo)識(shí)本身?yè)碛匈|(zhì)感，讓畫(huà)面還能充滿視覺(jué)的期待，如果像bing這樣，有點(diǎn)……
案例二
平面設(shè)計(jì) 還是很贊的。比如新浪新聞應(yīng)用，讓這種科技感和品質(zhì)感體現(xiàn)出來(lái)了。一個(gè)地球也符合人們對(duì)新聞國(guó)際化和時(shí)效性的理解。Adobe Photoshop的啟動(dòng)畫(huà)面，將其對(duì)色彩和光的專(zhuān)業(yè)洞察力體現(xiàn)了出來(lái)，它一定會(huì)喚起adobe粉絲對(duì)其技術(shù)的共鳴。（缺少了人情味，不過(guò)科技感增強(qiáng)了。
案例三
講個(gè)故事吧。利用啟動(dòng)畫(huà)面可以為標(biāo)識(shí)講一個(gè)故事。也許是章魚(yú)保羅的月亮之旅也可以是大眼睛過(guò)大年?？傊?，不僅僅是標(biāo)識(shí)，還有讓你欣喜的故事。當(dāng)然這種畫(huà)面如果不經(jīng)常更新，也會(huì)讓你的應(yīng)用程序過(guò)于偏向某個(gè)事件或某類(lèi)人群，容易引起部分用戶的反感。
案例四
有的放矢的標(biāo)識(shí)補(bǔ)充。能夠做到即能體現(xiàn)應(yīng)用對(duì)用戶的作用，又不花哨。下面的例子是值得學(xué)習(xí)的。周末畫(huà)報(bào)，就是喝著咖啡來(lái)看報(bào)，有情調(diào)的共鳴。網(wǎng)盤(pán)就是大堆的文件、圖片、媒體信息的倉(cāng)庫(kù)。
場(chǎng)景二 直接進(jìn)入應(yīng)用程序主界面
iphone 上的某些應(yīng)用程序采用了默認(rèn)界面框架作為啟動(dòng)畫(huà)面。用戶會(huì)感覺(jué)應(yīng)用程序響應(yīng)很快——這一點(diǎn)在移動(dòng)端非常有用，大多數(shù)應(yīng)用程序沒(méi)有這么做。如果加載時(shí)間過(guò)長(zhǎng)，用戶會(huì)認(rèn)為是網(wǎng)絡(luò)問(wèn)題或者程序死機(jī)。利用界面框架作為啟動(dòng)界面，可以緩解用戶對(duì)應(yīng)用程序響應(yīng)延遲的厭倦感。（一般這個(gè)界面是一張圖，而不是真的控件組成的。）
案例一
谷歌應(yīng)用程序在啟動(dòng)后，展現(xiàn)了一張簡(jiǎn)略的界面，有導(dǎo)航欄和標(biāo)簽欄。幾秒后，搜索框出現(xiàn)，告訴你可以使用該應(yīng)用了。值得注意的是，由于是一張假的圖，所以不要將可用的功能或者可操作的模塊做在這張啟動(dòng)畫(huà)面上，誤導(dǎo)用戶程序已經(jīng)可以使用。
案例二
Facebook應(yīng)用程序啟動(dòng)的時(shí)候需要判斷是否聯(lián)網(wǎng)以及帳號(hào)綁定情況。首先呈現(xiàn)的是一張假圖，只有導(dǎo)航欄。如果沒(méi)有綁定帳號(hào)則顯示登錄界面；如果綁定了帳號(hào)則進(jìn)入信息中心界面。
案例三
Google Earth應(yīng)用程序是從一個(gè)地球的全景開(kāi)始的。所以啟動(dòng)畫(huà)面就是一個(gè)靜幀的地球，這與應(yīng)用程序啟動(dòng)以后的畫(huà)面幾乎一致，可以讓用戶感覺(jué)到非?？焖俚那榫撤答?。
iphone 內(nèi)置的應(yīng)用程序大都采用了這種啟動(dòng)畫(huà)面的做法（通訊錄、短信、iTunes、AppStore設(shè)置、天氣等等），讓用戶無(wú)需有等待的感覺(jué)，直接與操作界面見(jiàn)面。當(dāng)然這要求應(yīng)用程序本身無(wú)需太多時(shí)間啟動(dòng)。
也許有人認(rèn)為沒(méi)有品牌logo的啟動(dòng)畫(huà)面感覺(jué)沒(méi)有把品牌得到宣傳。用蘋(píng)果官方的解釋?zhuān)脩粝螺d和打開(kāi)你的應(yīng)用的時(shí)候，就已經(jīng)知道你的品牌了。你的品牌是否能夠給用戶留下好的印象，在于后續(xù)任務(wù)的用戶體驗(yàn)，其中包括讓用戶立即享用你的服務(wù)而不需要任何等待。
場(chǎng)景三 過(guò)渡到有用的模塊
如果你的應(yīng)用程序需要用戶在使用之前有必要的操作，你可以將之與啟動(dòng)畫(huà)面結(jié)合起來(lái)，而不需要單獨(dú)顯示。這也是提升效率的一種做法。
案例一
將登錄注冊(cè)環(huán)節(jié)結(jié)合進(jìn)來(lái)。當(dāng)應(yīng)用程序確定聯(lián)網(wǎng)了以后，需要用戶登錄，則啟動(dòng)畫(huà)面自動(dòng)過(guò)渡到登錄環(huán)節(jié)。Yahoo messenger、MSN做得都非常自然。這回讓你的用戶感覺(jué)到非常細(xì)心的設(shè)計(jì)品質(zhì)，提升用戶對(duì)應(yīng)用程序的好感。（一般這類(lèi)應(yīng)用程序在用戶第一次使用——未綁定帳號(hào)的情況下，會(huì)出現(xiàn)登錄窗口，如果已經(jīng)綁定帳號(hào)，并默認(rèn)登錄，啟動(dòng)畫(huà)面會(huì)采取場(chǎng)景二中的方案。
案例二
局部聯(lián)網(wǎng)刷新出有用的信息
Twitter官方客戶端在首次啟動(dòng)會(huì)直接打開(kāi)“搜索模塊”界面，只是在界面頂部導(dǎo)航欄下方切出一個(gè)區(qū)域給注冊(cè)按鈕。此時(shí)界面下方內(nèi)容區(qū)開(kāi)始刷新，展現(xiàn)出即時(shí)簡(jiǎn)約的信息。
場(chǎng)景四 適當(dāng)?shù)膭?dòng)畫(huà)
使用適當(dāng)?shù)膭?dòng)畫(huà)，可以讓?xiě)?yīng)用程序的啟動(dòng)更加震撼。務(wù)必要做到適當(dāng)，用戶不是每次都想在啟動(dòng)應(yīng)用程序的時(shí)候欣賞一段短片，除非相當(dāng)精彩而且有必要。
案例一
攝影畫(huà)報(bào)應(yīng)用程序在啟動(dòng)的時(shí)候，是一圈逐漸清晰的圖片。隨著圖片一張張呈現(xiàn)，程序啟動(dòng)完成，進(jìn)入內(nèi)容列表界面。這種將應(yīng)用內(nèi)容作為啟動(dòng)元素的方案，讓用戶能夠從啟動(dòng)那一刻開(kāi)始，欣賞應(yīng)用程序提供的服務(wù)。
案例二
The Daily的啟動(dòng)時(shí)間是公認(rèn)的長(zhǎng)啊長(zhǎng)。顯示一個(gè)靜幀的圖片，然后是一段標(biāo)識(shí)展示視頻，其次是模擬顯示天空的界面，此時(shí)數(shù)據(jù)還在加載。體驗(yàn)不能說(shuō)很好，每次為了看這個(gè)應(yīng)用的內(nèi)容，都要等至少一分鐘。
所以用一段視頻做你的應(yīng)用程序，可要慎重。即增加了用戶的下載時(shí)間，又延遲了用戶啟動(dòng)應(yīng)用程序的時(shí)間。
移動(dòng)應(yīng)用程序啟動(dòng)畫(huà)面的設(shè)計(jì)法則二——啟動(dòng)畫(huà)面的出現(xiàn)，潛意識(shí)告知用戶選擇正確的手持方向。
•在iPhone上，為了能獲得更多內(nèi)容，人們大多數(shù)是豎屏使用，所以iPhone桌面不提供橫屏模式。如果你的應(yīng)用程序只支持橫屏，那么在顯示啟動(dòng)畫(huà)面的時(shí)候，就應(yīng)該是橫屏模式顯示，這樣直接告訴用戶需要扭轉(zhuǎn)屏幕，而不是進(jìn)入到任務(wù)里面再告知用戶。
•在ipad 上，由于屏幕尺寸更大，人們大多數(shù)是橫屏使用，這樣能看到更多內(nèi)容（在iPad上，橫屏模式可以顯示更多操作或者隱藏內(nèi)容）。這樣用戶在橫豎屏方向上會(huì)出現(xiàn)頻繁的切換，所以你的應(yīng)用程序最好支持所有方向使用。如果你的應(yīng)用程序只支持一個(gè)方向，例如橫屏，那么在顯示啟動(dòng)畫(huà)面的時(shí)候，就應(yīng)該是橫屏模式顯示，這樣直接告訴用戶需要扭轉(zhuǎn)屏幕，而不是進(jìn)入到任務(wù)里面再告知用戶。
在iPad上，如果你的應(yīng)用程序，同時(shí)支持橫、豎屏，則需要顯示一副正確的啟動(dòng)畫(huà)面——與用戶當(dāng)前的使用方向一致即可。
后記
小小啟動(dòng)畫(huà)面蘊(yùn)藏著很多講究吧~。很多人認(rèn)為啟動(dòng)畫(huà)面這類(lèi)比較視覺(jué)的工作是視覺(jué)設(shè)計(jì) 師的工作，孰不知產(chǎn)品任何一個(gè)環(huán)節(jié)都需要精明的策略，單憑視覺(jué)好看或者交互來(lái)做用戶體驗(yàn)，永遠(yuǎn)是不夠的，也是不可能的。切實(shí)了解用戶體驗(yàn)對(duì)知識(shí)要求的綜合性，才能真正做好用戶體驗(yàn)，做好產(chǎn)品。
希望這篇文章能夠?qū)δ阍O(shè)計(jì)產(chǎn)品有幫助，歡迎留言探討。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.jghy.net