APP中的閃屏設(shè)計

7 評論 36917 瀏覽 160 收藏 11 分鐘

本文主要講APP的閃屏頁(也就是啟動頁 launch image)部分,詳細的說說關(guān)于它的一些內(nèi)容。

我們先整體看一下閃屏頁的大致類型:

(聲明:以下圖片來源于應(yīng)用截圖,僅作為學習交流使用)

一、常規(guī)閃屏

為什么叫常規(guī)閃屏?

因為這類閃屏比較普通,我沒有想到什么更專業(yè)的詞匯,暫且就叫常規(guī)閃屏吧。這類閃屏的使用國內(nèi)的和國外有點不同,因為按照蘋果官方的說法是,用戶打開應(yīng)用能立即使用是最好的體驗,例如:系統(tǒng)自帶的一些應(yīng)用,是沒有閃屏的。再甚者閃屏最好就是讓用戶感覺不到,和首頁能有一個完美的融合和過渡。

這種體驗也很棒,國外的instagram、facebook等就是使用這種設(shè)計,閃屏長得很像首頁,更像是一張加載類的占位符。

當然,因地制宜,國內(nèi)的我們已經(jīng)習慣了閃屏作為App品牌的宣傳和推廣手段,一般由logo+名稱+slogan+品牌色組成,界面還是相對簡潔明了的,但還是很明顯的違背了蘋果官方的指導說法,但是沒辦法,這就是商業(yè)需要。

這樣設(shè)計也有利處,可以減少用戶在打開App時的焦慮感,也可以讓用戶更直觀的了解品牌,傳遞一些情懷、理念,多看一次閃屏,也是讓用戶強化品牌記憶的過程,只是不知道是好的記憶點還是壞的,就要我們自己斟酌了。

二、廣告閃屏

廣告閃屏,顧名思義就是產(chǎn)品本身為了進行流量變現(xiàn)從而獲得盈利,給一些商家打廣告或者進行合作設(shè)計的一類閃屏,這是無可厚非的。不過廣告閃屏自帶被“嫌棄”屬性,應(yīng)該很多用戶看到這類閃屏的心理是比較排斥的。

至少對我來說,我是很少關(guān)注這類閃屏,除非閃屏設(shè)計的非常的酷炫,我愿意多看一下,否則的話我就想立刻把它關(guān)掉,所以在這類閃屏上加上“倒計時(loading)和跳過”就顯得很必要,并且“跳過”的位置也要方便用戶點擊。

這類閃屏最好只出現(xiàn)每天第一次打開App時,避免讓用戶厭煩。不管出于何種目的,都需要在商業(yè)利益和用戶體驗之間保持一個平衡,不然用戶會流失的很快,用戶流失了,何談盈利呢?

另外廣告閃屏和下面要說的活動閃屏一樣,會有一個模板:底部是閃屏圖片,上面蓋上一層logo模板。

App啟動時會從服務(wù)器拉取閃屏數(shù)據(jù),本地會保存logo模板。如果服務(wù)器更新了閃屏數(shù)據(jù)會拉取數(shù)據(jù)進行展示,如果沒有更新或是網(wǎng)絡(luò)不佳,就會默認展示緩存的閃屏數(shù)據(jù),以免發(fā)生卡頓現(xiàn)象,以保證流暢的用戶體驗。

三、活動閃屏

活動閃屏和廣告閃屏有點類似,出于產(chǎn)品運營方面的需要,它起到活動宣傳的作用,每年的雙十一、雙十二期間,各大電商App的閃屏都會用到活動閃屏,還有一些商家自己造的一些節(jié)日:品牌周、年貨節(jié)、會員日、狂歡周…相信大家已經(jīng)見怪不怪了。

近期我留意到一個問題,就是我們在使用App時,經(jīng)常會在應(yīng)用之間進行切換使用。如果我們從其他應(yīng)用再次返回時,最好不要再加載一次閃屏,會給用戶很不好的用戶體驗。目前使用下來,淘寶、天貓等這類主流應(yīng)用都有這種問題,但是我想這應(yīng)該他們有意為之。

四、節(jié)日閃屏

每逢一些節(jié)假日,各大品牌都會推出一些當日的閃屏,那么為什么要設(shè)計節(jié)日閃屏?

我覺得有幾點原因:

  • 長期看常規(guī)閃屏,用戶很容易會有視覺上的一種疲勞,節(jié)日閃屏會給用戶一種不經(jīng)意的驚喜和新鮮感;
  • 可以蹭一蹭節(jié)日的熱點,提升產(chǎn)品本身的品牌調(diào)性;
  • 在節(jié)日給用戶以問候和關(guān)懷,和用戶在情感上產(chǎn)生共鳴,從而更好的連接用戶和產(chǎn)品,我想這應(yīng)該是最重要的原因。

節(jié)日閃屏比較吸引用戶的注意力,它不像廣告類閃屏,我看見這類閃屏就會忍不住的多瞅幾眼,所以設(shè)計這類閃屏的時候要非常重視,因為用戶愿意等待,這是非常求之不得的,這就需要設(shè)計師具有比較強的表現(xiàn)能力了。

我們在設(shè)計的時候可以先進行思維上的發(fā)散,或者是逆向思維之類的,比如:春節(jié)將近,我們可以聯(lián)想到是什么,理清一個思緒,要有節(jié)日的氛圍,可以活潑、可愛、夸張…切忌呆板。

我記憶中這類閃屏大部分是使用插畫類的手法比較多,這是我個人觀點,或許是我對這種手法記憶比較深刻,如果不是,請不要噴我。

五、大版本升級閃屏

在App進行了大版本升級后,要向用戶展示產(chǎn)品新功能的操作方法。這類閃屏也可以稱為引導頁,頁面數(shù)量控制在3-5頁,每一頁都有一個對應(yīng)的主題,主題要精簡,切忌文字過多。

而且每一頁設(shè)計形式要類似,否則會給用戶一種視覺落差感。頁面上要加上“跳過”功能,因為用戶更希望盡快體驗新版本,而不是看你的這些教導,在最后一頁要加上類似“立即體驗”的button。

六、閃屏設(shè)計的幾種形式

1. 極簡類

這種形式就是上面所說的國內(nèi)常規(guī)閃屏,品牌色+logo+名稱+slogan,這類閃屏占據(jù)大多數(shù),因為相對簡潔明了,就不多贅述了。

2. 插畫類

這種形式會給我們傳遞一種溫暖的感受,容易引起共鳴感,可以喚起我們某個時間段的回憶。插畫手法用的比較多的是肌理插畫、手繪插畫、2.5D插畫、漸變插畫等,這幾類手法都比較流行。

3. 動圖&小視頻

有一些App采用的是動圖或者小視頻作為閃屏,比如:早期的uber更新新logo時,啟動頁是采用的動圖閃屏。早期的快的打車,采用小視頻作為閃屏。

另外現(xiàn)在還有一些輕閱讀類App的閃屏,在顯示完常規(guī)閃屏后,還會展示出和產(chǎn)品調(diào)性相關(guān)的圖片閃屏,并且圖片會變大后再進入首頁,以突出產(chǎn)品的文藝氣息。

使用這類手法的時候,一定要三思,首先難度較大,而且因為用戶每次打開應(yīng)用都會看一次,早晚會失去新鮮感,并且對網(wǎng)絡(luò)環(huán)境也有要求,有可能會出現(xiàn)卡頓情況。

4. 和產(chǎn)品調(diào)性相關(guān)的圖片

為了和用戶產(chǎn)生情感上的共鳴,很多App使用和產(chǎn)品調(diào)性相匹配的圖片作為閃屏,最為熟悉的就屬微信閃屏了,前一段時間微信換閃屏的熱點已經(jīng)刷爆朋友圈,相信大家已經(jīng)關(guān)注到了。這類閃屏要能突出產(chǎn)品本身的調(diào)性,否則謹慎使用,風險較大。

一般閃屏只有3秒鐘,一閃而過,好的閃屏設(shè)計會讓用戶忍不住多看幾眼,如果你設(shè)計的閃屏能讓用戶關(guān)掉App再看一次,那你就厲害了。

 

作者:Eason張UED,公眾號:Eason張UED(ID:EasonZhangUED)

本文由 @Eason張UED 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 你這是誤人子弟,根本不叫閃屏

    來自福建 回復
    1. 這是啟動頁嗎,分不清楚這兩個

      來自重慶 回復
  2. Get 回去畫插畫去了。

    回復
  3. 微信啥時候換啟動頁了?我咋沒看見?

    回復
    1. 更新了地球圖片

      回復
    2. 哪里看得出?

      來自廣東 回復
  4. 好的產(chǎn)品都是慢慢打磨出來的

    回復