UI設計中開屏頁如何設計

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

　　第一印象很重要!很多用戶會根據App/網站的初始形象來判斷是否可以信任這家公司或這個產品。
 

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

　　在深入研究設計策略之前，先來了解一下啟動畫面的基本知識。
 

　　什么是啟動畫面?
 

　　啟動畫面指一系列連續(xù)的使用體驗——從用戶點擊應用圖標開始到內容加載完成為止。通常包括以下五種形式：
 

　　1、應用圖標(參與啟動體驗的第一個環(huán)節(jié))

 

　　2、啟動畫面(開屏頁)

 

　　3、開屏頁跳轉到內容頁

 

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

 

　　5、動畫式開屏(加載更多內容)

 

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

　　在潛意識中與用戶交流，并設定對未來的預期;
 

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

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

　　為用戶提供愉快的體驗。
 

　　開屏頁設計方法解析
 

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

 

　　MLB允許用戶選擇自己喜歡的團隊作為啟動圖標。

 

　　2、品牌與Slogan相結合來傳達信息啟動頁像是一種持續(xù)的營銷活動，因為用戶每打開一次App就會加深對品牌的印象。

        通過在啟動頁中添加標志性的slogan或者圖像，既能強調App的用途也為用戶設定了一定的期望。

 

　　例如上圖的3個應用將品牌logo放在開屏頁中，這樣的設計對用戶的感官有直接的刺激。

 

　　上圖的History、DocuSign和Ted三個App，通過在開屏中添加標語來強化價值主張。

        3、使用交互動畫實現開屏頁到內容頁的無縫體驗

        從點擊圖標到內容加載，中間有一段可感知的加載時間，如果在這段時間內融入合適的動畫，用戶能對產品狀態(tài)有提前的了解。

 

　　上圖的三個App都利用動畫在開屏頁和內容頁之間建立了無縫的橋梁。

 

　　Google，TinyFax和Cinamatic這些App利用動畫將圖標巧妙地轉換成內容。

 

　　同樣上面的三個App雖然使用的動畫不算很細膩，也能完成從初始頁到內容的過渡。

 

　　有些應用的動效則保持簡單，如上圖只將標志作為突出展示。

 

　　Chick-fil-A在開屏頁上添加提示動畫，成功將用戶引導到內容頁。

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

        對于大多數應用來說，使用開屏頁+骨架屏的形式更有意義，因為輕量級的應用通常加載速度非?？?，骨架屏能獲得更流暢的體驗。

 

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

 

　　上圖的應用通過預加載和動畫來把握時間，給人一種“即將到來”的印象。

 

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

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

        有些App啟動時需要加載大量數據，例如視頻、音頻，所以需要大量加載時間。

        對于這類應用，稍微長一點的動畫更有意義。隨著數據的緩存和加載時間的縮短，動畫可以變得越來越短。

 

　　上圖的App使用動畫來加載數據，給用戶帶來反饋的時間。

 

　　Clashem，Tumbleweed和Chefsfeed使用有趣的動畫在加載數據的同時又加強了品牌體驗。
 

　　總結
 

　　看了這么多案例，啟動畫面到底要顯示多長時間呢?這應該考慮應用的配置和加載數據需要的時間。自定義啟動體驗以適應不同的使用時間和用戶：
 

　　1.各個階段的用戶要有不一樣的啟動體驗;
 

　　2.先考慮應用的大小再選擇合理的啟動頁;
 

　　3.用圖像傳達信息，動畫作為引導;
 

　　4.盡可能使用獨特的圖標來進行品牌推廣。
 

　　5. 因此，您現在已經了解了與UI設計師的工作相關的主要技能。如果您想了解更多信息，請訪問AAA教育，包含有關在該領域工作的更多相關文章。