實戰(zhàn)技巧 | APP閃屏的設計門道

▲點擊"三分設"關注，回復"社群"加入我們

歡迎來到專業(yè)設計師學習交流社區(qū)

三分設｜連接知識，幫助全球 1 億設計師成長

轉自：互聯(lián)網(wǎng)設計幫

編輯：章成愉

共 2104 字，預計閱讀 6 分鐘

前言 

本期的內(nèi)容可能會讓很多 UI 設計師大開眼界，因為每個知識點都是 UI 設計中的精華技能，非常有可能助你突破自身的設計邊界。

文中會圍繞 APP 閃屏設計知識分享，從閃屏的作用，到設計助力閃屏功能，再到一個閃屏尺寸適配所有主流分辨率手機，以及UI設計如何結合廣告學知識巧妙的設計，在這篇文章中都會詳細的告訴你答案。

一、啟動頁與閃屏的區(qū)別 

首先我們要知道 APP 的啟動頁和閃屏不是一個東西，啟動頁是用戶打開產(chǎn)品第一眼看到的頁面，閃屏是啟動頁之后出現(xiàn)的頁面。

1.啟動頁

啟動頁是一個 APP 必不可少的頁面，在 iOS 規(guī)范中，上架 App Store 必須有啟動頁，Android 系統(tǒng)會有 1-2s 的白屏，所以兩個端都需要啟動頁。

蘋果官方給的解釋是，為了增加 APP 啟動時的用戶體驗，確實如此，當打開一個產(chǎn)品時，首頁內(nèi)容都需要一定的時間加載。

啟動頁的設計角度一般是品牌信息傳遞，建立用戶與產(chǎn)品的認知，一般時常都在 2s 以內(nèi)（看網(wǎng)速和手機性能）。

啟動頁的設計一般不做動畫效果，因為只要是動畫，就會讓用戶感覺等待時間變長了。

2.閃屏

閃屏是啟動頁后面緊接著出現(xiàn)的頁面，當然有很多產(chǎn)品沒有閃屏，如微信、淘寶等，因為產(chǎn)品的定位和運營模式不同。

閃屏與啟動頁不同，閃屏是用來運營的，比如投放日常廣告、活動運營、節(jié)日等等，大多數(shù)產(chǎn)品閃屏出現(xiàn)的時間是 3s 或 5s，一般都提供“跳過”按鈕。

閃屏的設計為了運營，所以可以適當有動畫效果或者視頻，目的是能夠更加吸引用戶，加深印象或是提高點擊率。

3.為什么啟動頁不能用來運營？

啟動頁是寫在安裝包里面的程序，如果更換就得發(fā)版，閃屏的程序設計是從后臺配置完成，所以可以滿足日常更換。

二、如何減少用戶等待感知 

對用戶來講啟動頁和閃屏展示的時間越短越好，那時間減少不了，就可以通過設計讓用戶對時間的感知變少，從而提高體驗。

看下圖，兩張圖通過平滑過度，給用戶的感覺是一張圖在變化，這樣時間上給用戶的感知是變快的。

用戶等待感知短

當然對于不同的產(chǎn)品，設計的傾向性是不一樣的，比如網(wǎng)易云音樂，啟動頁是強烈的紅色，然后生硬的切換到一個跟啟動頁沒有任何視覺關聯(lián)的閃屏。

這樣的設計形式，用戶等完一個頁面，又等一個頁面，那就會給用戶在時間上的感知是變長的。

品牌感知傳遞強

但是，對于一個音樂產(chǎn)品，渲染產(chǎn)品調性傳遞品牌，要遠遠大于減少用戶等待時間的體驗。

所以，從這點來看，網(wǎng)易云音樂這樣的設計形式，也是非常恰當?shù)模O計應該根據(jù)產(chǎn)品的定位，來確定設計的傾向性。

敲黑板，劃重點！  下面的內(nèi)容才是本文重點！

三、定義閃屏設計尺寸 

手機尺寸那么多，閃屏設計尺寸應該如何定義，很多 APP 的解決方案是使用兩張不同比例的閃屏，還有一部分 APP 是區(qū)分系統(tǒng)，iOS 適配一張圖，Android 適配一張圖。

下面我以小米商城閃屏的改版為例，分享如何用一張閃屏尺寸適配所有機型，并詳細介紹適配的原理。

下圖是改版前的閃屏，需要上傳兩張圖，一張 1080*2070（不帶底部 logo），另一張是 720*1280（帶底部 logo）。

老版本閃屏需要上傳兩個尺寸圖

兩張圖，設計人員就需在兩個模版上進行排版設計，小米商城閃屏更換頻率非常高，這樣其實會付出很多時間成本。

所以，我們團隊嘗試使用一張圖適配所有機型，這其中的難點就是，找到一個合適的尺寸適配所有手機，并且閃屏內(nèi)容的呈現(xiàn)在任意手機上都得合適，內(nèi)容不能被裁剪。

先跟大家普及一下小米公司 APP 的設計稿尺寸，因為小米手機是 Android 系統(tǒng)，所以 UI 設計稿會優(yōu)先適配安卓的主流手機，即 1080*2340，這個尺寸接近 iPhone12 的比例和尺寸，切圖相當于 3 倍圖。

所以，閃屏寬度設定一定是 1080px，然后高度分為兩部分組成，一個是內(nèi)容運營區(qū)（閃屏內(nèi)容設計區(qū)域），一個是 logo 位，如下圖所示。

藍色部分為閃屏

logo 位部分由開發(fā)寫到程序中，所以閃屏頁面高度要去掉 logo 位高度。

閃屏設計尺寸即是藍色部分，正常來看應該是主流長屏分辨率手機與現(xiàn)存短屏分辨率手機的平均數(shù)即可，但其實并不可取。

因為，短屏分辨率手機畢竟使用人群是少數(shù)，設計的宗旨一向都是優(yōu)先考慮大多數(shù)用戶。

所以，定義閃屏尺寸的原則是讓類似小米 11、iPhone12 等主流比例手機呈現(xiàn)的完美，短屏分辨率手機如 iPhone8 只要呈現(xiàn)的不出錯即可。

以安卓主流分辨率 1080*2340 為例（這個比例接近 iPhone12），如下圖，logo 位高度設定為 270px，把這個圖切給開發(fā)，讓開發(fā)等比縮放去適配所有手機即可。

很多安卓手機底部會有一個系統(tǒng)高度，這個位置不可以占用，但開發(fā)可以改變顏色，所以這部分顏色可以跟啟動頁或閃屏顏色調成一致。

頁面分辨率 2340 減去 270 的 logo 位就是 2070，這就是長屏主流手機閃屏大概要呈現(xiàn)的高度，然后需要用這個尺寸去兼顧短屏分辨率手機。

把短屏手機也計算出來，安卓最短的手機比例是 16:9（比例等同于 iOS 的 iPhone8），以 1080*1920 為例，如下圖，1920 同樣是減去 logo 位的 270 像素等于 1650。

接下來就是最關鍵的時刻，要用 1080*2070 和 1080*1650 兩個尺寸設定閃屏的設計模版。

先說一下手機的適配原理，如果一個張圖片的比例和手機屏幕不一致，開發(fā)設定是撐滿手機屏幕，這時手機上展示的圖片就會出現(xiàn)上下或左右被裁剪的情況。

所以，綜合兩個不同比例的尺寸，短屏手機裁剪上下，長屏手機裁剪左右，然后把呈現(xiàn)的內(nèi)容保證在不被裁剪掉的區(qū)域。

閃屏模版尺寸設定嘗試

最后經(jīng)過很多次的嘗試，最終選用 1080*1920 作為閃屏的設計尺寸，向上向下適配內(nèi)容的呈現(xiàn)都非常合適。

下圖是 iOS 和安卓手機的適配效果，向下適配 16:9 的手機（裁剪上下），向上適配 20:9 的手機（裁剪左右）。

長短屏手機閃屏適配效果

定制閃屏設計模版

模版中頁面上方留了較大面積，是為了讓標題內(nèi)容能夠呈現(xiàn)在長屏手機更恰當?shù)奈恢蒙?，長屏手機內(nèi)容靠上，看上去不會很舒適。

底部空間留的較少，因為底部再加上 logo 位的高度，就會讓頁面看起來很協(xié)調。

最終小米商城的閃屏就是用一個尺寸適配了所有分辨率的手機，思路和適配原理都已經(jīng)講清楚，如果自家的產(chǎn)品是優(yōu)先滿足 iOS 手機，完全可以用上面介紹的方法嘗試。

敲黑板！  下面內(nèi)容可能會顛覆你對UI設計的認知

 四、“跳過”按鈕位置設計 

閃屏尺寸說完了，閃屏上面還有一個“跳過”按鈕，這個按鈕的位置設計非常非常重要，而且大有學問，會牽扯到廣告學，按鈕合理的設計會讓一個產(chǎn)品的收入倍增。

還是以小米商城的閃屏為例，之前的閃屏“跳過”按鈕在頁面右下角，新版我把“跳過”按鈕放到了右上角，為什么？

可以肯定的是，“跳過”按鈕，放在右上角，用戶體驗是不夠好的，右下角用戶操作起來才會更便捷，改為右上角其實就是為了讓用戶少點擊。

用戶不去點擊“跳過”按鈕，那閃屏內(nèi)容曝光的時間就會更長，這符合小米商城自營平臺的定位，自營平臺閃屏展示都是自己平臺的內(nèi)容。

有很多產(chǎn)品閃屏的“跳過”按鈕，放在右下角，如微博、網(wǎng)易云音樂，優(yōu)先滿足用戶體驗，是因為廣告的性質不同。

“跳過”按鈕在右下角的產(chǎn)品

在廣告學中有這樣幾個詞：CPS、CPC、CPM、CPT。

CPS

Cost Per Sales 是一種廣告的推廣方式，是通過實際的銷售量進行收費，比如每賣一單收取多少錢，轉化越多，收入越多。

CPC

Cost Per Click 這種推廣方式是，按照點擊量來進行收費，點擊一次，收一次費。

CPM

Cost Per Mille 此種推廣方式是按曝光量進行計算收費，只要用戶看見這個廣告，就會計費一次。

CPT

Cost Per Time 這種推廣方式是，通過時間進行收費，比如包一個月包一個季度等。

了解完常見的幾種廣告推廣方式后，我們再看一下微博和網(wǎng)易云音樂兩款產(chǎn)品。

他們的廣告如果是 CPM（曝光量）和 CPT（包時間）的推廣方式，那“跳過”按鈕放到右下角可以提升用戶體驗，還不會影響推廣的收入。

再來看一下脈脈和花瓣兩個產(chǎn)品，他們的推廣方式大概率是按 CPC（點擊率）或 CPS（轉化率）收費的。

閃屏的“跳過”按鈕放在右上角，內(nèi)容的設計形式上強調并引導用戶去點擊廣告。

“跳過”按鈕在右上角的產(chǎn)品

聊一下脈脈和花瓣的閃屏設計，脈脈把閃屏設計成彈窗的形式，用一種騙的形式，引導用戶點擊假彈窗的“知道了”或關閉圖標。

用戶的點擊行為與心里目標完全不一樣，這樣的設計雖然能讓平臺獲得更多的廣告收入，但也損害了用戶對平臺的好感。

花瓣閃屏的設計較為友好，實實在在的告訴用戶這是廣告，你有興趣就點“去看看”去了解，沒興趣就等一等，或點擊“跳過”。

花瓣這種設計形式較為適合 CPS（轉化率）的推廣放過，因為點擊了解的用戶，都是對廣告興趣的精準人群。

 五、后語 

最后總結一下文章的內(nèi)容，啟動頁和閃屏是兩個東西，通過設計可以讓用戶等待的時間感知更快，從而提高體驗。

閃屏可以用一張圖適配所有大中小手機，閃屏的“跳過”按鈕大有學問，合適的設計可以讓平臺的收入倍增。

設計從來都是用來滿足商業(yè)目的的，一個小小的按鈕設計，都會很大影響到平臺的收入，所以UI設計任何時候都需要清楚的了解產(chǎn)品定位以及商業(yè)模式，這樣才能有效的產(chǎn)出設計。

身為設計師，為了滿足商業(yè)目的可以做討巧的設計，但要拒絕無底線無原則的設計，做一個有品，有良心的設計師很重要。

---

超值課程推薦

華為用戶體驗設計的體系搭建方法

超 10 億用戶的產(chǎn)品，到底是怎么做用戶體驗的？

揭秘滴滴、蔚來等大廠的用戶體驗設計策略

原創(chuàng)好文推薦

一款為你帶來難忘體驗的美食 APP

Web Vitals —— 谷歌的新一代 Web 性能體驗和質量指標

2021 年用戶體驗設計趨勢分析

想要引導用戶行為轉化，設計師必須深刻理解這 4 個認知心理學理論

讓設計圈一片嘩然的 Google 新 logo 到底出了什么問題？國外的設計專家這么說

如何系統(tǒng)的增強用戶粘性，提升產(chǎn)品轉化率？你要懂得“行為設計學”

設計新趨勢「玻璃擬態(tài)」到底是什么？這里有一份實現(xiàn)效果的詳細教程

如何將設計系統(tǒng)快速的從 Sketch 切換到 Figma？這里有 6 個需要注意的關鍵點

---

歡迎大家關注三分設，每天分享優(yōu)質設計、創(chuàng)意靈感、新知新識，定期大咖老師直播分享，零距離連麥，答疑解惑。