特殊情況下的APP設(shè)計（2）：啟動頁面設(shè)計

不管一個產(chǎn)品的啟動頁呈現(xiàn)哪種形式，都不該該忘了啟動頁存在的根來源根基因：為了減少用戶在等待APP啟動時的焦慮感。

心理學(xué)上有一個“7秒理論”，說的是，一個人對另一個人的印象，在初次見面的七秒內(nèi)就會形成，比來更有研究表白，這個時間可能更短——不到1秒。所以初次見面所展示的形象真的很重要。同理，用戶在使用APP時，每次啟動呈現(xiàn)在用戶面前的界面重要程度不言而喻，而這個界面就是大家熟知的啟動頁。

在iOS的規(guī)范中，啟動頁的英文叫Launch Screen，指的是啟動APP時呈現(xiàn)的第一個界面。其實(shí)這種描述不夠嚴(yán)謹(jǐn)，從啟動APP到APP首頁的出現(xiàn)之前的頁面，都可以稱為啟動頁（新手引導(dǎo)頁除外：用戶第一次使用APP，有可能還會出現(xiàn)新手引導(dǎo)頁）。引導(dǎo)頁也是一個重要的話題，我們先按下不表，以后再聊。

由于APP啟動的過程很短，從幾百毫秒到幾秒不等，所以啟動頁也被稱為閃屏。

了解我的人可能都知道，經(jīng)常說的一句話就是“需求決定功能，功能決定設(shè)計形式”，這是我做產(chǎn)品的一個價值不雅觀。每種設(shè)計形式的出現(xiàn)都是有它背后的邏輯和機(jī)制的，了解了a這個Why，能讓我們做產(chǎn)品的時候變得更智慧。

那為什么會存在啟動頁這種形式？

首先目前的APP所相關(guān)的兩大平臺Android和iOS，是用Java和swift這些編程語言寫出來的，而計算機(jī)的元器件只有開和關(guān)這兩種狀態(tài)。當(dāng)啟動APP時，設(shè)備（手機(jī)、平板等）需要將編程語言進(jìn)行編譯成計算機(jī)能夠讀懂的二進(jìn)制語言，計算機(jī)只認(rèn)識1和0（對應(yīng)元器件的開和關(guān)）。這個編譯過程需要時間，同時，啟動過程還存在向辦事器請求數(shù)據(jù)的情況，這也需要時間。也就是說，在點(diǎn)擊啟動APP圖標(biāo)，到APP首頁的出現(xiàn)，是存在一個時間，這個時間的長短取決于設(shè)備的性能和網(wǎng)絡(luò)環(huán)境，從幾百毫秒到幾秒不等。

在這段空白時間，為了不讓用戶感到困惑或因?yàn)榈却a(chǎn)生焦慮。iOS的設(shè)計規(guī)范規(guī)定，要在啟動APP時，設(shè)計一個啟動頁，來填補(bǔ)這段用戶等待的時間。

根據(jù)功能和達(dá)成目的的維度，我將啟動頁分為了五類，別離是快速啟動類、品牌類、情感共鳴類、廣告類、節(jié)日類。

對于啟動頁的設(shè)計，官方是有明確規(guī)定的，iOS的設(shè)計規(guī)范是這么描述的：

“為了增強(qiáng)應(yīng)用程序啟動時的用戶體驗(yàn)，您應(yīng)該提供一個啟動圖像。啟動圖像與應(yīng)用程序的首屏幕看起來非常相似。當(dāng)用戶在主屏幕上點(diǎn)擊您的應(yīng)用程序圖標(biāo)時，iPhone OS會立即顯示這個啟動圖像。一旦準(zhǔn)備就緒，您的應(yīng)用程序就會顯示它的首屏幕，來替換掉這個啟動占位圖像。”

查看原文：https://developer.apple.com/ios/human-interface-guidelines/graphics/launch-screen/

國外的APP大多采用這種方案，它的最大好處是，啟動頁和首頁很相似，過度自然，用戶感覺不到有啟動這個過程，用戶體驗(yàn)很棒。

Instagram

Foodie

Path

Facebook

如果首頁的框架和內(nèi)容是變革的，不固定的，那怎么辦？不要慌，還是有措施的：采用和首頁顏色接近的圖來作為啟動頁。如“VSCO”等。

VSCO

如果是在國外，這篇文章講到這就要結(jié)束了，因?yàn)橛涀∫粭l方法論就行“設(shè)計一張和首屏相似的頁面作為啟動頁，如果首屏內(nèi)容是動態(tài)的，則采用和首屏整體最接近的顏色作為啟動頁”

但是國內(nèi)的APP決定要走出一條本身的路，所以有了下面的八門五花的啟動頁。

盡管蘋果明確提出，啟動頁不是你品牌展示的窗口，但將啟動頁做成“品牌logo+名稱+slogan”成了國內(nèi)最主流的啟動頁設(shè)計。放幾張圖，大家自行感受。

有道云條記&UC瀏覽器

上圖的兩個例子是目前國內(nèi)APP最主流的方式，這種形式一是沒有設(shè)計，二是啟動頁和首屏有明顯的割裂感，真的不如直接用一張和首屏相似的圖片作為啟動頁。

那如果真的要在啟動這么短的時間內(nèi)來強(qiáng)調(diào)公司或品牌，可以有更好的方案，Uber啟動頁利用品牌元素進(jìn)行動態(tài)變革的設(shè)計，品牌元素從出現(xiàn)，到變革，再到消失一氣呵成，并且和首屏的銜接過渡的也很自然，在確保體驗(yàn)的前提下，也起到了強(qiáng)化品牌的作用。我從Uber的這種做法提煉出了三個思路，一是除了靜態(tài)圖片還可以考慮動態(tài)展示的形式；二是將啟動頁做得更具設(shè)計感；三讓啟動頁和首屏的過度動畫更自然?？梢宰鳛槠放祁悊禹撛O(shè)計的方法論來用。

再來看幾個例子：

XY&開眼

輕芒閱讀&一個

標(biāo)簽：九江 東營 鹽城 烏魯木齊 林芝