UI設(shè)計(jì)中開屏頁如何設(shè)計(jì)

　　大家好，今天AAA教育郭老師為大家?guī)淼奈恼率?a href="http://m.lb577.com/ui/2768.html" target="_blank">開屏頁設(shè)計(jì)。用戶只需要50毫秒(0.05秒)就能對網(wǎng)站/App做出評價(jià)，從而決定是留下還是離開。開屏頁設(shè)計(jì)的合理性很大程度上影響了用戶的初體驗(yàn)。
 

　　第一印象很重要!很多用戶會(huì)根據(jù)App/網(wǎng)站的初始形象來判斷是否可以信任這家公司或這個(gè)產(chǎn)品。
 

　　那么如何解決快速感知的問題呢?首先將關(guān)注點(diǎn)放在App帶給我們的第一印象上。合理的啟動(dòng)頁能激發(fā)用戶的潛意識，有助于吸引和留存合適的用戶。
 

　　在深入研究設(shè)計(jì)策略之前，先來了解一下啟動(dòng)畫面的基本知識。
 

　　什么是啟動(dòng)畫面?
 

　　啟動(dòng)畫面指一系列連續(xù)的使用體驗(yàn)——從用戶點(diǎn)擊應(yīng)用圖標(biāo)開始到內(nèi)容加載完成為止。通常包括以下五種形式：
 

　　1、應(yīng)用圖標(biāo)(參與啟動(dòng)體驗(yàn)的第一個(gè)環(huán)節(jié))

 

　　2、啟動(dòng)畫面(開屏頁)

 

　　3、開屏頁跳轉(zhuǎn)到內(nèi)容頁

 

　　4、骨架屏的啟動(dòng)形式(待加載狀態(tài))

 

　　5、動(dòng)畫式開屏(加載更多內(nèi)容)

 

　　開屏頁能解決哪些問題?開屏頁是產(chǎn)品體驗(yàn)的門戶，通過模擬更快的加載時(shí)間、創(chuàng)建無縫的啟動(dòng)體驗(yàn)來提升用戶體驗(yàn)。設(shè)計(jì)不只關(guān)注外觀，更關(guān)注解決特定用戶問題的方法。啟動(dòng)頁能解決哪些問題呢?
 

　　在潛意識中與用戶交流，并設(shè)定對未來的預(yù)期;
 

　　通過隱藏加載過程來減少可感知的等待時(shí)間;
 

　　向用戶介紹App的用途和品牌;
 

　　為用戶提供愉快的體驗(yàn)。
 

　　開屏頁設(shè)計(jì)方法解析
 

　　通過對問題的梳理，這里總結(jié)了開屏頁設(shè)計(jì)的5種方法，有效吸引用戶的注意力。1、自定義圖標(biāo)為用戶帶來個(gè)性化的體驗(yàn)從iOS10開始，開發(fā)者可以將預(yù)定義的圖標(biāo)進(jìn)行個(gè)性化設(shè)置。例Bear允許用戶根據(jù)主題色調(diào)整圖標(biāo)的顏色。

 

　　MLB允許用戶選擇自己喜歡的團(tuán)隊(duì)作為啟動(dòng)圖標(biāo)。

 

　　2、品牌與Slogan相結(jié)合來傳達(dá)信息啟動(dòng)頁像是一種持續(xù)的營銷活動(dòng)，因?yàn)橛脩裘看蜷_一次App就會(huì)加深對品牌的印象。

        通過在啟動(dòng)頁中添加標(biāo)志性的slogan或者圖像，既能強(qiáng)調(diào)App的用途也為用戶設(shè)定了一定的期望。

 

　　例如上圖的3個(gè)應(yīng)用將品牌logo放在開屏頁中，這樣的設(shè)計(jì)對用戶的感官有直接的刺激。

 

　　上圖的History、DocuSign和Ted三個(gè)App，通過在開屏中添加標(biāo)語來強(qiáng)化價(jià)值主張。

        3、使用交互動(dòng)畫實(shí)現(xiàn)開屏頁到內(nèi)容頁的無縫體驗(yàn)

        從點(diǎn)擊圖標(biāo)到內(nèi)容加載，中間有一段可感知的加載時(shí)間，如果在這段時(shí)間內(nèi)融入合適的動(dòng)畫，用戶能對產(chǎn)品狀態(tài)有提前的了解。

 

　　上圖的三個(gè)App都利用動(dòng)畫在開屏頁和內(nèi)容頁之間建立了無縫的橋梁。

 

　　Google，TinyFax和Cinamatic這些App利用動(dòng)畫將圖標(biāo)巧妙地轉(zhuǎn)換成內(nèi)容。

 

　　同樣上面的三個(gè)App雖然使用的動(dòng)畫不算很細(xì)膩，也能完成從初始頁到內(nèi)容的過渡。

 

　　有些應(yīng)用的動(dòng)效則保持簡單，如上圖只將標(biāo)志作為突出展示。

 

　　Chick-fil-A在開屏頁上添加提示動(dòng)畫，成功將用戶引導(dǎo)到內(nèi)容頁。

        4、開屏頁和骨架屏相結(jié)合來加強(qiáng)反饋循環(huán)

        對于大多數(shù)應(yīng)用來說，使用開屏頁+骨架屏的形式更有意義，因?yàn)檩p量級的應(yīng)用通常加載速度非?？欤羌芷聊塬@得更流暢的體驗(yàn)。

 

　　這些應(yīng)用在啟動(dòng)頁面預(yù)加載主頁的內(nèi)容，Breathe(中間)使用與主頁內(nèi)容相似的彩色骨架。Transit(右邊)使用地圖的骨架作為啟動(dòng)頁，加載完成后方便用戶直接點(diǎn)擊。

 

　　上圖的應(yīng)用通過預(yù)加載和動(dòng)畫來把握時(shí)間，給人一種“即將到來”的印象。

 

　　和前面的應(yīng)用相比，Snow 、Dribbble和Launch Pro使用的骨架狀態(tài)很少。

        5、使用加載動(dòng)畫創(chuàng)造有趣的體驗(yàn)

        有些App啟動(dòng)時(shí)需要加載大量數(shù)據(jù)，例如視頻、音頻，所以需要大量加載時(shí)間。

        對于這類應(yīng)用，稍微長一點(diǎn)的動(dòng)畫更有意義。隨著數(shù)據(jù)的緩存和加載時(shí)間的縮短，動(dòng)畫可以變得越來越短。

 

　　上圖的App使用動(dòng)畫來加載數(shù)據(jù)，給用戶帶來反饋的時(shí)間。

 

　　Clashem，Tumbleweed和Chefsfeed使用有趣的動(dòng)畫在加載數(shù)據(jù)的同時(shí)又加強(qiáng)了品牌體驗(yàn)。
 

　　總結(jié)
 

　　看了這么多案例，啟動(dòng)畫面到底要顯示多長時(shí)間呢?這應(yīng)該考慮應(yīng)用的配置和加載數(shù)據(jù)需要的時(shí)間。自定義啟動(dòng)體驗(yàn)以適應(yīng)不同的使用時(shí)間和用戶：
 

　　1.各個(gè)階段的用戶要有不一樣的啟動(dòng)體驗(yàn);
 

　　2.先考慮應(yīng)用的大小再選擇合理的啟動(dòng)頁;
 

　　3.用圖像傳達(dá)信息，動(dòng)畫作為引導(dǎo);
 

　　4.盡可能使用獨(dú)特的圖標(biāo)來進(jìn)行品牌推廣。
 

　　5. 因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息，請?jiān)L問AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。