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