大家好，我是Clippp。今天為大家?guī)淼奈恼率?b>「開屏頁」設(shè)計(jì)。用戶只需要50毫秒(0.05秒)就能對(duì)網(wǎng)站/App做出評(píng)價(jià)，從而決定是留下還是離開。開屏頁設(shè)計(jì)的合理性很大程度上影響了用戶的初體驗(yàn)。
第一印象很重要！很多用戶會(huì)根據(jù)App/網(wǎng)站的初始形象來判斷是否能信任這家公司或產(chǎn)品。
那么如何解決快速感知的問題呢？首先將關(guān)注點(diǎn)放在App帶給我們的第一印象上。合理的啟動(dòng)頁能激發(fā)用戶的潛意識(shí)，有助于吸引和留存合適的用戶。
在深入研究設(shè)計(jì)策略之前，先來了解一下啟動(dòng)畫面的基本知識(shí)。?
一、什么是啟動(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í)中與用戶交流，并設(shè)定對(duì)未來的預(yù)期；
- 通過隱藏加載過程來減少可感知的等待時(shí)間；
- 向用戶介紹App的用途和品牌；
- 為用戶提供愉快的體驗(yàn)。
三、 開屏頁設(shè)計(jì)方法解析
通過對(duì)問題的梳理，這里總結(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ì)加深對(duì)品牌的印象。
通過在啟動(dòng)頁中添加標(biāo)志性的slogan或者圖像，既能強(qiáng)調(diào)App的用途也為用戶設(shè)定了一定的期望。
例如上圖的3個(gè)應(yīng)用將品牌logo放在開屏頁中，這樣的設(shè)計(jì)對(duì)用戶的感官有直接的刺激。
上圖的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)畫，用戶能對(duì)產(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)
對(duì)于大多數(shù)應(yīng)用來說，使用開屏頁+骨架屏的形式更有意義，因?yàn)檩p量級(jí)的應(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í)間。
對(duì)于這類應(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í)間和用戶：
· 各個(gè)階段的用戶要有不一樣的啟動(dòng)體驗(yàn)；
· 先考慮應(yīng)用的大小再選擇合理的啟動(dòng)頁；
· 用圖像傳達(dá)信息，動(dòng)畫作為引導(dǎo)；
· 盡可能使用獨(dú)特的圖標(biāo)來進(jìn)行品牌推廣。
希望文章能夠讓你有所收獲～
精彩推薦：
2、案例分析：柵格系統(tǒng)的布局設(shè)計(jì)
