UI設(shè)計(jì)中開(kāi)屏頁(yè)如何設(shè)計(jì)

　　大家好，今天AAA教育郭老師為大家?guī)?lái)的文章是開(kāi)屏頁(yè)設(shè)計(jì)。用戶只需要50毫秒(0.05秒)就能對(duì)網(wǎng)站/App做出評(píng)價(jià)，從而決定是留下還是離開(kāi)。開(kāi)屏頁(yè)設(shè)計(jì)的合理性很大程度上影響了用戶的初體驗(yàn)。
 

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

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

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

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

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

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

 

　　2、啟動(dòng)畫(huà)面(開(kāi)屏頁(yè))

 

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

 

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

 

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

 

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

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

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

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

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

　　開(kāi)屏頁(yè)設(shè)計(jì)方法解析
 

　　通過(guò)對(duì)問(wèn)題的梳理，這里總結(jié)了開(kāi)屏頁(yè)設(shè)計(jì)的5種方法，有效吸引用戶的注意力。1、自定義圖標(biāo)為用戶帶來(lái)個(gè)性化的體驗(yàn)從iOS10開(kāi)始，開(kāi)發(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é)合來(lái)傳達(dá)信息啟動(dòng)頁(yè)像是一種持續(xù)的營(yíng)銷活動(dòng)，因?yàn)橛脩裘看蜷_(kāi)一次App就會(huì)加深對(duì)品牌的印象。

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

 

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

 

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

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

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

 

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

 

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

 

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

 

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

 

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

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

        對(duì)于大多數(shù)應(yīng)用來(lái)說(shuō)，使用開(kāi)屏頁(yè)+骨架屏的形式更有意義，因?yàn)檩p量級(jí)的應(yīng)用通常加載速度非?？?，骨架屏能獲得更流暢的體驗(yàn)。

 

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

 

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

 

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

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

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

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

 

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

 

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

　　總結(jié)
 

　　看了這么多案例，啟動(dòng)畫(huà)面到底要顯示多長(zhǎ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)頁(yè);
 

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

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

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