導語：本期內容可能會讓很多UI設計師大開眼界，因為每個知識點都是UI設計中得精華技能，非常有可能助你突破自身得設計邊界。文中會圍繞APP閃屏設計知識分享，從閃屏得作用，到設計助力閃屏功能，再到一個閃屏尺寸適配所有主流分辨率手機，以及UI設計如何結合廣告學知識巧妙得設計，在這篇文章中都會詳細得告訴你答案。

一、啟動頁與閃屏得區別

首先我們要知道APP得啟動頁和閃屏不是一個東西，啟動頁是用戶打開產品第壹眼看到得頁面，閃屏是啟動頁之后出現得頁面。

1. 啟動頁

啟動頁是一個APP必不可少得頁面，在iOS規范中，上架AppStore必須有啟動頁，Android系統會有1-2s得白屏，所以兩個端都需要啟動頁。蘋果自家給得解釋是，為了增加APP啟動時得用戶體驗，確實如此，當打開一個產品時，首頁內容都需要一定得時間加載。

啟動頁得設計角度一般是品牌信息傳遞，建立用戶與產品得認知，一般時常都在2s以內（看網速和手機性能）。啟動頁得設計一般不做動畫效果，因為只要是動畫，就會讓用戶感覺等待時間變長了。

2. 閃屏

閃屏是啟動頁后面緊接著出現得頁面，當然有很多產品沒有閃屏，如感謝閱讀、淘寶等，因為產品得定位和運營模式不同。閃屏與啟動頁不同，閃屏是用來運營得，比如投放日常廣告、活動運營、節日等等，大多數產品閃屏出現得時間是3s或5s，一般都提供“跳過”按鈕。

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

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

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

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

對用戶來講啟動頁和閃屏展示得時間越短越好，那時間減少不了，就可以通過設計讓用戶對時間得感知變少，從而提高體驗?？聪聢D，兩張圖通過平滑過度，給用戶得感覺是一張圖在變化，這樣時間上給用戶得感知是變快得。

用戶等待感知短

當然對于不同得產品，設計得傾向性是不一樣得，比如網易云音樂，啟動頁是強烈得紅色，然后生硬得切換到一個跟啟動頁沒有任何視覺關聯得閃屏。這樣得設計形式，用戶等完一個頁面，又等一個頁面，那就會給用戶在時間上得感知是變長得。

品牌感知傳遞強

但是，對于一個音樂產品，渲染產品調性傳遞品牌，要遠遠大于減少用戶等待時間得體驗。所以，從這點來看，網易云音樂這樣得設計形式，也是非常恰當得，設計應該根據產品得定位，來確定設計得傾向性。

敲黑板，劃重點！ 下面得內容才是感謝重點！

三、定義閃屏設計尺寸

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

下面我以小米商城閃屏得改版為例，分享如何用一張閃屏尺寸適配所有機型，并詳細介紹適配得原理。下圖是改版前得閃屏，需要上傳兩張圖，一張1080*2070（不帶底部logo），另一張是720*1280（帶底部logo）。

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

兩張圖，設計人員就需在兩個模版上進行排版設計，小米商城閃屏更換頻率非常高，這樣其實會付出很多時間成本。所以，我們團隊嘗試使用一張圖適配所有機型，這其中得難點就是，找到一個合適得尺寸適配所有手機，并且閃屏內容得呈現在任意手機上都得合適，內容不能被裁剪。

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

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

藍色部分為閃屏

logo位部分由開發寫到程序中，所以閃屏頁面高度要去掉logo位高度。閃屏設計尺寸即是藍色部分，正常來看應該是主流長屏分辨率手機與現存短屏分辨率手機得平均數即可，但其實并不可取。

因為，短屏分辨率手機畢竟使用人群是少數，設計得宗旨一向都是優先考慮大多數用戶。所以，定義閃屏尺寸得原則是讓類似小米11、iPhone12等主流比例手機呈現得完美，短屏分辨率手機如iPhone8只要呈現得不出錯即可。

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

很多安卓手機底部會有一個系統高度，這個位置不可以占用，但開發可以改變顏色，所以這部分顏色可以跟啟動頁或閃屏顏色調成一致。頁面分辨率2340減去270得logo位就是2070，這就是長屏主流手機閃屏大概要呈現得高度，然后需要用這個尺寸去兼顧短屏分辨率手機。

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

接下來就是最關鍵得時刻，要用1080*2070和1080*1650兩個尺寸設定閃屏得設計模版。先說一下手機得適配原理，如果一個張支持得比例和手機屏幕不一致，開發設定是撐滿手機屏幕，這時手機上展示得支持就會出現上下或左右被裁剪得情況。

所以，綜合兩個不同比例得尺寸，短屏手機裁剪上下，長屏手機裁剪左右，然后把呈現得內容保證在不被裁剪掉得區域。

閃屏模版尺寸設定嘗試

最后經過很多次得嘗試，最終選用1080*1920作為閃屏得設計尺寸，向上向下適配內容得呈現都非常合適。下圖是iOS和安卓手機得適配效果，向下適配16:9得手機（裁剪上下），向上適配20:9得手機（裁剪左右）。

長短屏手機閃屏適配效果

定制閃屏設計模版

模版中頁面上方留了較大面積，是為了讓標題內容能夠呈現在長屏手機更恰當得位置上，長屏手機內容靠上，看上去不會很舒適。底部空間留得較少，因為底部再加上logo位得高度，就會讓頁面看起來很協調。

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

敲黑板！ 下面內容可能會顛覆你對UI設計得認知！

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

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

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

可以肯定得是，“跳過”按鈕，放在右上角，用戶體驗是不夠好得，右下角用戶操作起來才會更便捷，改為右上角其實就是為了讓用戶少感謝閱讀。用戶不去感謝閱讀“跳過”按鈕，那閃屏內容曝光得時間就會更長，這符合小米商城自營平臺得定位，自營平臺閃屏展示都是自己平臺得內容。

有很多產品閃屏得“跳過”按鈕，放在右下角，如微博、網易云音樂，優先滿足用戶體驗，是因為廣告得性質不同。

“跳過”按鈕在右下角得產品

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

CPS：Cost Per Sales是一種廣告得推廣方式，是通過實際得銷售量進行收費，比如每賣一單收取多少錢，轉化越多，收入越多。CPC：Cost Per Click這種推廣方式是，按照感謝閱讀量來進行收費，感謝閱讀一次，收一次費。CPM：Cost Per Mille此種推廣方式是按曝光量進行計算收費，只要用戶看見這個廣告，就會計費一次。CPT：Cost Per Time這種推廣方式是，通過時間進行收費，比如包一個月包一個季度等。

了解完常見得幾種廣告推廣方式后，我們再看一下微博和網易云音樂兩款產品。他們得廣告如果是CPM（曝光量）和CPT（包時間）得推廣方式，那“跳過”按鈕放到右下角可以提升用戶體驗，還不會影響推廣得收入。

再來看一下脈脈和花瓣兩個產品，他們得推廣方式大概率是按CPC（感謝閱讀率）或CPS（轉化率）收費得。閃屏得“跳過”按鈕放在右上角，內容得設計形式上強調并引導用戶去感謝閱讀廣告。

“跳過”按鈕在右上角得產品

聊一下脈脈和花瓣得閃屏設計，脈脈把閃屏設計成彈窗得形式，用一種騙得形式，引導用戶感謝閱讀假彈窗得“知道了”或關閉圖標。用戶得感謝閱讀行為與心里目標完全不一樣，這樣得設計雖然能讓平臺獲得更多得廣告收入，但也損害了用戶對平臺得好感。

花瓣閃屏得設計較為友好，實實在在得告訴用戶這是廣告，你有興趣就點“去看看”去了解，沒興趣就等一等，或感謝閱讀“跳過”?；ò赀@種設計形式較為適合CPS（轉化率）得推廣放過，因為感謝閱讀了解得用戶，都是對廣告興趣得精準人群。

五、后語

最后總結一下文章得內容，啟動頁和閃屏是兩個東西，通過設計可以讓用戶等待得時間感知更快，從而提高體驗。閃屏可以用一張圖適配所有大中小手機，閃屏得“跳過”按鈕大有學問，合適得設計可以讓平臺得收入倍增。

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

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

#專欄作家#

吳星辰，感謝對創作者的支持：互聯網設計幫，人人都是產品經理專欄作家。

感謝來自互聯網發布于人人都是產品經理。未經許可，禁止感謝。

題圖來自Unsplash，基于CC0協議