不簡單的啟動(dòng)畫面 軟件的啟動(dòng)畫面介紹(圖文)
發(fā)布時(shí)間:2012-07-12 14:28:49 作者:佚名
我要評論
小小的啟動(dòng)畫面到底有什么學(xué)問,它對產(chǎn)品用戶體驗(yàn)都有哪些影響?本篇文章做了一些分析和總結(jié),希望對你有幫助。

小小的啟動(dòng)畫面到底有什么學(xué)問,它對產(chǎn)品用戶體驗(yàn)都有哪些影響?本篇文章做了一些分析和總結(jié),希望對你有幫助。
什么是啟動(dòng)畫面
當(dāng)用戶啟動(dòng)一個(gè)操作系統(tǒng)、軟件或者應(yīng)用程序的時(shí)候,首先出現(xiàn)的承載產(chǎn)品標(biāo)識及相關(guān)信息的圖形界面。例如,Office軟件程序的啟動(dòng)畫面,上面有產(chǎn)品的標(biāo)識,發(fā)行公司以及一些可能的操作。

按照體驗(yàn)設(shè)計(jì)法則——讓用戶快速的開始任務(wù),啟動(dòng)畫面貌似是用戶開始任務(wù)前的障礙。其實(shí)不然,實(shí)際情況是程序的啟動(dòng)是需要一點(diǎn)時(shí)間的,有時(shí)這個(gè)時(shí)間會(huì)比較長,比如操作系統(tǒng)的啟動(dòng)、大型制圖或者辦公軟件的啟動(dòng)等等。而在這段時(shí)間里,如果顯示黑屏顯然不恰當(dāng),如果顯示一段段正在運(yùn)行的程序代碼又過于機(jī)械(早期的DOS操作系統(tǒng)大家應(yīng)該有所印象)。

1.用戶不知道機(jī)器在做什么,會(huì)懷疑機(jī)器遲鈍、效率低下
2.用戶等待會(huì)有厭煩情緒,直接影響對機(jī)器的情感
為了解決這些體驗(yàn)問題,人們使用一個(gè)畫面來代替后臺(tái)正在運(yùn)行的代碼,換來人們對機(jī)器的好感。為了做到這一點(diǎn),很多公司都用心良苦,動(dòng)畫越來越細(xì)膩,形式也越來越多。這里不贅述舉例,主要談?wù)勔苿?dòng)應(yīng)用客戶端的啟動(dòng)畫面(以iOS平臺(tái)為例)。
移動(dòng)應(yīng)用程序的啟動(dòng)畫面存在的環(huán)境
移動(dòng)應(yīng)用程序存在的環(huán)境是惡劣的,這是相對PC來說。即使產(chǎn)品設(shè)計(jì)支出對功能做了很多減法,即使工程師日日夜夜在做性能優(yōu)化,應(yīng)用程序的啟動(dòng)還是需要一些時(shí)間。啟動(dòng)畫面在移動(dòng)客戶端產(chǎn)品存在的必要性不得而知。
移動(dòng)應(yīng)用程序啟動(dòng)畫面的設(shè)計(jì)法則一 ——避免顯示無關(guān)內(nèi)容,包括一個(gè)漂亮的圖,要盡力讓啟動(dòng)畫面變得有意義。對于用戶來說,他們希望立即體驗(yàn)?zāi)愕膽?yīng)用程序而不是欣賞一些無用信息。
如何理解這個(gè)法則,如何使用這個(gè)法則,下面的例子說明了一切,你也可以下載并體驗(yàn)這些應(yīng)用,了解更多有關(guān)啟動(dòng)畫面的秘密,歡迎隨時(shí)交流。
場景一 品牌含義的延伸
如果啟動(dòng)時(shí)間不是一兩秒那么短的時(shí)間,我們可以利用這個(gè)時(shí)間展示應(yīng)用程序的品牌。但是不要只是展示品牌,最好能夠結(jié)合應(yīng)用程序所提供的服務(wù),將品牌的含義延伸到畫面中,帶給用戶一種親切感,或者讓用戶了解到產(chǎn)品的文化,或者其他你想讓用戶了解的故事。
案例一 只是標(biāo)識的設(shè)計(jì)。很多應(yīng)用都是這樣設(shè)計(jì)的。將自己的標(biāo)識往中間一放,告訴用戶我就是我。然后沒有任何情感的進(jìn)入了內(nèi)容界面。有的時(shí)候,標(biāo)識本身擁有質(zhì)感,讓畫面還能充滿視覺的期待,如果像bing這樣,有點(diǎn)……




iphone上的某些應(yīng)用程序采用了默認(rèn)界面框架作為啟動(dòng)畫面。用戶會(huì)感覺應(yīng)用程序響應(yīng)很快——這一點(diǎn)在移動(dòng)端非常有用,大多數(shù)應(yīng)用程序沒有這么做。如果加載時(shí)間過長,用戶會(huì)認(rèn)為是網(wǎng)絡(luò)問題或者程序死機(jī)。利用界面框架作為啟動(dòng)界面,可以緩解用戶對應(yīng)用程序響應(yīng)延遲的厭倦感。(一般這個(gè)界面是一張圖,而不是真的控件組成的。)
案例一 谷歌應(yīng)用程序在啟動(dòng)后,展現(xiàn)了一張簡略的界面,有導(dǎo)航欄和標(biāo)簽欄。幾秒后,搜索框出現(xiàn),告訴你可以使用該應(yīng)用了。值得注意的是,由于是一張假的圖,所以不要將可用的功能或者可操作的模塊做在這張啟動(dòng)畫面上,誤導(dǎo)用戶程序已經(jīng)可以使用。



也許有人認(rèn)為沒有品牌logo的啟動(dòng)畫面感覺沒有把品牌得到宣傳。用蘋果官方的解釋,用戶下載和打開你的應(yīng)用的時(shí)候,就已經(jīng)知道你的品牌了。你的品牌是否能夠給用戶留下好的印象,在于后續(xù)任務(wù)的用戶體驗(yàn),其中包括讓用戶立即享用你的服務(wù)而不需要任何等待。
場景三 過渡到有用的模塊
如果你的應(yīng)用程序需要用戶在使用之前有必要的操作,你可以將之與啟動(dòng)畫面結(jié)合起來,而不需要單獨(dú)顯示。這也是提升效率的一種做法。
案例一 將登錄注冊環(huán)節(jié)結(jié)合進(jìn)來。當(dāng)應(yīng)用程序確定聯(lián)網(wǎng)了以后,需要用戶登錄,則啟動(dòng)畫面自動(dòng)過渡到登錄環(huán)節(jié)。Yahoo messenger、MSN做得都非常自然。這回讓你的用戶感覺到非常細(xì)心的設(shè)計(jì)品質(zhì),提升用戶對應(yīng)用程序的好感。(一般這類應(yīng)用程序在用戶第一次使用——未綁定帳號的情況下,會(huì)出現(xiàn)登錄窗口,如果已經(jīng)綁定帳號,并默認(rèn)登錄,啟動(dòng)畫面會(huì)采取場景二中的方案。)


Twitter官方客戶端在首次啟動(dòng)會(huì)直接打開“搜索模塊”界面,只是在界面頂部導(dǎo)航欄下方切出一個(gè)區(qū)域給注冊按鈕。此時(shí)界面下方內(nèi)容區(qū)開始刷新,展現(xiàn)出即時(shí)簡約的信息。

使用適當(dāng)?shù)膭?dòng)畫,可以讓應(yīng)用程序的啟動(dòng)更加震撼。務(wù)必要做到適當(dāng),用戶不是每次都想在啟動(dòng)應(yīng)用程序的時(shí)候欣賞一段短片,除非相當(dāng)精彩而且有必要。
案例一 攝影畫報(bào)應(yīng)用程序在啟動(dòng)的時(shí)候,是一圈逐漸清晰的圖片。隨著圖片一張張呈現(xiàn),程序啟動(dòng)完成,進(jìn)入內(nèi)容列表界面。這種將應(yīng)用內(nèi)容作為啟動(dòng)元素的方案,讓用戶能夠從啟動(dòng)那一刻開始,欣賞應(yīng)用程序提供的服務(wù)。


移動(dòng)應(yīng)用程序啟動(dòng)畫面的設(shè)計(jì)法則二——啟動(dòng)畫面的出現(xiàn),潛意識告知用戶選擇正確的手持方向。
•在iphone上,為了能獲得更多內(nèi)容,人們大多數(shù)是豎屏使用,所以iPhone桌面不提供橫屏模式。如果你的應(yīng)用程序只支持橫屏,那么在顯示啟動(dòng)畫面的時(shí)候,就應(yīng)該是橫屏模式顯示,這樣直接告訴用戶需要扭轉(zhuǎn)屏幕,而不是進(jìn)入到任務(wù)里面再告知用戶。

在iPad上,如果你的應(yīng)用程序,同時(shí)支持橫、豎屏,則需要顯示一副正確的啟動(dòng)畫面——與用戶當(dāng)前的使用方向一致即可。

小小啟動(dòng)畫面蘊(yùn)藏著很多講究吧~。很多人認(rèn)為啟動(dòng)畫面這類比較視覺的工作是視覺設(shè)計(jì)師的工作,孰不知產(chǎn)品任何一個(gè)環(huán)節(jié)都需要精明的策略,單憑視覺好看或者交互來做用戶體驗(yàn),永遠(yuǎn)是不夠的,也是不可能的。切實(shí)了解用戶體驗(yàn)對知識要求的綜合性,才能真正做好用戶體驗(yàn),做好產(chǎn)品。
希望這篇文章能夠?qū)δ阍O(shè)計(jì)產(chǎn)品有幫助,歡迎留言探討,幫助我繼續(xù)完善文章。
轉(zhuǎn)載請注明出自”百度MUX”
相關(guān)文章

AudioContext 實(shí)現(xiàn)音頻可視化(web技術(shù)分享)
這篇文章主要分享的是web技術(shù)的 AudioContext 實(shí)現(xiàn)音頻可視化,要實(shí)現(xiàn)音頻可視化得先實(shí)現(xiàn)一些炫酷的效果需要借助 Web Audio API提供的一些方法 AudioContext,下面詳細(xì)內(nèi)容2022-02-23
這篇文章主要給大家介紹了web技術(shù)中的WebRTC記錄音視頻流,文章內(nèi)容圍繞主題展相關(guān)資料,需要的小伙伴可以參考一下,希望對你有所幫助2022-02-23- 這是我通過網(wǎng)上查閱資料總結(jié)的一些編碼規(guī)范,用于鞏固對html,css頁面重構(gòu)時(shí)的基礎(chǔ),需要的朋友可以參考下2020-12-19
前端編碼規(guī)范(4)—— CSS 和 Sass (SCSS) 開發(fā)規(guī)范
這篇文章主要介紹了前端編碼規(guī)范(4)—— CSS 和 Sass (SCSS) 開發(fā)規(guī)范,需要的朋友可以參考下2017-01-21Web前端開發(fā)規(guī)范2017(HTML/JavaScript/CSS)
這是一份旨在增強(qiáng)團(tuán)隊(duì)的開發(fā)協(xié)作,提高代碼質(zhì)量和打造開發(fā)基石的編碼風(fēng)格規(guī)范,其中包含了 HTML, JavaScript 和 CSS/SCSS 這幾個(gè)部分。我們知道,當(dāng)一個(gè)團(tuán)隊(duì)開始指定并實(shí)行2017-01-21- 這篇文章主要為大家介紹了前端開發(fā)團(tuán)隊(duì)遵循和約定的代碼書寫規(guī)范,意在提高代碼的規(guī)范性和可維護(hù)性,需要的朋友可以參考下2017-01-21
響應(yīng)式Web之流式網(wǎng)格系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了響應(yīng)式Web之流式網(wǎng)格系統(tǒng)的相關(guān)資料,感興趣的小伙伴們可以參考一下2016-07-04在網(wǎng)頁標(biāo)題欄上和收藏夾顯示網(wǎng)站logo的實(shí)現(xiàn)方法
下面小編就為大家分享一篇在網(wǎng)頁標(biāo)題欄上和收藏夾顯示網(wǎng)站logo的實(shí)現(xiàn)方法。希望對大家有所幫助。一起跟隨小編過來看看吧,祝大家游戲愉快哦2016-03-16Visual Foxpro 6.0 中文版安裝向?qū)?圖解)
基于很多用戶都在下載Visual Foxpro 6.0,但是有安裝vtp6.0經(jīng)驗(yàn)的朋友確很少,在安裝過程中總會(huì)出現(xiàn)這樣那樣的問題,基于這些問題,下面小編抽個(gè)時(shí)間把Visual Foxpro 6.02015-09-09網(wǎng)站日志200 0 64狀態(tài)碼的分析(協(xié)議子狀態(tài))
網(wǎng)站日志200 0 64狀態(tài)碼的分析介紹2012-10-29



