[系列]APP設計之一:啟動頁

2020-12-17 人人都是產品經理

最近一直在花時間琢磨各種各樣的app。看得多了,對於如何設計app有了一些自己的小心得,準備針對app的常見模塊總結下自己的想法,以加深學習效果。

今天從app的啟動頁開始。

一、什麼是啟動頁?

每個做產品的聊起來啟動頁都頭頭是道,但究竟什麼啟動頁很少有人能夠給一個定義。多數時候在解釋不清楚的時候,我們會打開一個app,然後指著啟動頁說「喏,這就是啟動頁」。贊,漂亮地解決了問題。但在這裡我還是想要說下啟動頁的定義。因為,從定義中我們可以看出一個東西的根本,有利於我們討論如何設計它。

啟動頁的定義:

當應用程式被用戶打開時,在程序啟動過程中被用戶所看到的過渡頁面(或動畫)都被我們統稱為啟動頁。由於啟動頁在每次打開應用時都會出現,並且往往停留很短的時間,就像閃現的效果一樣,所以也有人把啟動頁稱之為閃屏。

以上這段定義是參考了網絡上對啟動頁的各種描述後的總結,沒找到標準的定義或系統設計官方的定義(ios人機互動指南裡頁沒能搜索到)。個人覺得還是比較靠譜的。

二、為什麼要有啟動頁?

由定義可以看出,啟動頁的作用在於過渡。也就是說,它是用戶啟動和真正能使用app功能的中間階段。那麼,必然地,時間儘可能地短成為了啟動頁的基本要求。讓用戶儘快用上功能才是王道啊。OK,既然應該讓用戶最快地使用app的功能,為什麼不能沒有啟動頁呢。當然,這是一種非常好的想法,ios人機互動指南也提到了:

「Start Instantly

It’s often said that people spend no more than a minute or two evaluating a new app. When you make the most of this brief period by presenting useful content immediately, you pique the interest of new users and give all users a superior experience.

快速啟動

常言說,人們至多花一兩分鐘來判斷一個新應用。當你能夠在最短的時間內向用戶展現有用的內容時,你就勾起了新用戶的興趣,同時能夠給所用用戶一種卓越的體驗。

As much as possible, avoid displaying a splash screen or other startup experience. It’s best when users can begin using your app immediately.」

因此,要儘可能地避免展現一個啟動頁或其它啟動體驗。讓用戶立即用上你的應用是最好的。

摘錄來自: Apple Inc. 「iOS Human Interface Guidelines」。

但是,理想很豐滿,現實很骨感啊。現實中,產品啟動過程中多數時候是需要一定的時間的,特別大型的app,如繪圖軟體或是遊戲,啟動的時間都相對較長。此時,如果不給予用戶合理的反饋,就會讓用戶覺得:

  1. app是卡死、奔潰了?還是出什麼問題了?
  2. 界面難看死了,一看就知道不是啥好app。比如啟動頁是一個進度條。

因此,理論上啟動頁應該是一種不存在事物,但卻成為了一種合理的事物。

三、怎麼設計啟動頁?

既然啟動頁不可避免,那麼就應該設計好它,以給用戶儘量好的體驗。在這裡要強調一句,從某種意義上說啟動頁是一種不得已的選擇。因此,個人的觀點是:

  1. 應用設計上,要讓啟動頁展現的時間要儘可能地短。
  2. 由於展現時間短,啟動頁的設計要儘可能地簡單。

以下是幾種常見的啟動頁設計模式:

1.設計與主界面相似的圖片,給用戶快速啟動的感覺。

這是ibooks的啟動頁。當我們在主屏幕上點擊應用程式圖標時會立即顯示這個啟動圖像。真正啟動後界面會把書展現出來。但由於啟動頁和真實界面上非常相似,會讓你有啟動了的錯覺,好像應用啟動很快。

這種啟動頁設計方式好像越來越少了。

2.使用應用logo和slogan作為主元素,傳遞品牌信息。

當然,也有更狠的,只放一個logo,更加簡潔。但本質是相同的。這種模式目前比較普遍。

3.使用意境化啟動頁,引起情感上的共鳴

這種模式的重點在於情感共鳴,其實設計難度是最大的。建議沒有必然的信心就別嘗試了。

4.使用廣告圖片,賺錢或宣傳其他。

這種模式簡直了。不知道該說啥。而且,很多時候,為了能夠讓用戶看到廣告圖片。app在設計上就故意給啟動頁留了幾秒的時間。這完全讓啟動頁變味兒了。完全不推薦。除非你不在乎用戶體驗或你的應用是網易新聞這種級別的,那你強姦用戶我也沒啥好說的。

5.動畫。

這種模式以前見過,但一下子沒找到合適的。不貼圖了。同上一種模式一樣,個人完全不推薦這種模式。完全違背了啟動頁的初衷。屬於強姦用戶。

四、如果我來設計啟動頁

那麼:

  1. 在應用設計時,讓啟動頁展現的時間要儘可能地短。
  2. 使用應用logo和slogan作為主元素,簡單有效地傳遞品牌信息。要知道,很多公司為了讓自己的logo和slogan能夠出現在用戶面前,不斷加深用戶對自己的印象,往往花費成百上千萬隻為讓其在種種場景下出現。所以,在自家的應用上就不要浪費了。每一次啟動都是一次印象的加深,都是增加粘性的機會。
  3. 從始至終,儘量用同一個啟動頁。理由同第二條。
  4. 始終記住啟動頁只是一個過渡,過渡就意味著應該快、不重要,沒必要花費太多的精力在設計上(一次就夠了)。

完。

#專欄作家#

嶽山丘,微信公眾號:iamyueshanqiu,人人都是產品經理專欄作家,慕課網產品經理。兜兜轉轉好多年,一直在教育行業做產品。初始做內容,後來開始做WEB端。關注在線教育、網際網路金融(順便賺點小錢花)。最近一段時間開始研究移動APP產品,希望能夠多學習一些東西。

本文系作者授權發布,未經許可,不得轉載。

相關焦點

  • App啟動頁淺析:啟動頁分類與設計邏輯
    文章目錄如下:啟動頁設計目的啟動頁分類及樣式啟動頁邏輯及細節一、啟動頁設計目的當用戶點開app時,需要對於app內的素材進行加載,比如說加載圖片信息等等,為了給用戶呈現一個完整友好的app界面,這個加載素材的過程需要一定的時間,為了讓用戶在等待這一小段時間的時候減少一些困惑
  • APP設計中啟動頁的設計方法
    啟動頁的設計形式有以下幾種:快速啟動型快速啟動性啟動頁採用iOS設計規範,儘量讓用戶不去感知界面的存在,並且無縫銜接到應用當中。如iOS系統自帶的瀏覽器Safari體量較小,首頁板塊也較為固定,所以屬於快速啟動型。
  • UI基礎知識:啟動頁、閃屏和引導頁的區別
    01 啟動頁 (launch screen )1. 定義當app被用戶打開時,在app啟動過程中被用戶所看到的過渡頁面(或動畫)都被我們統稱為啟動頁。作用APP在用戶打開過程中需要一定的時間,啟動頁的展示是為了給用戶一個過渡頁面,緩解用戶打開app時等待的焦慮心情。類似於在app在加載過程中loading動畫一樣,都是為了通過設計的手段來解決用戶的焦慮情緒。3.
  • android啟動頁設計專題及常見問題 - CSDN
    轉載請註明出處:http://blog.csdn.net/wangjihuanghun/article/details/63255144啟動頁幾乎成為了每個app的標配,有些商家在啟動頁中增加了開屏廣告以此帶來更多的收入。
  • 特殊情況下的APP設計(2):啟動頁面設計
    iOS的設計規範規定,要在啟動APP時,設計一個啟動頁,來填補這段用戶等待的時間。3.怎麼設計啟動頁?按照功能和達成目的的維度,我將啟動頁分為了五類,分別是快速啟動類、品牌類、情感共鳴類、廣告類、節日類。
  • APP界面設計中的引導頁!
    所謂前置引導即在用戶安裝完成軟體應用,並第一次打開的時候出現的引導頁,該引導頁一般由2到6頁連續或不連續的相關頁面構成,某些應用引導頁可達10頁。前置引導是用戶使用軟體應用前所看到的內容,此時用戶對所安裝的產品了解並不多,對於產品的功能、布局、具體操作方法等內容還沒有相關的認知。
  • 蘋果Apple Store App更新:重新設計課程頁 可查折抵金額
    IT之家3月22日消息 今天蘋果iPhone和iPad上的Apple Store app迎來5.3版本更新,Today at Apple新增了數十種激發靈感的課程,重新設計的「課程」標籤頁;現在可在app內更輕鬆地查看自己設備的折抵金額。
  • 如何用流程圖描述APP啟動流程?
    流程描述軟體啟動時,APP自檢測是否首次啟動;首次啟動時,進入啟動頁,停留2秒後進入新手引導,用戶可跳過引導,或操作引導後,進入軟體首頁,此時做網絡判斷,如果無網絡,則打開該APP原始的靜態首頁;非首次啟動時,若當前無網絡,則進入啟動頁,停留2秒,此過程中調用上次使用後本地保存的緩存數據,進入APP緩存首頁;,若為2G網絡狀態,則進入啟動頁
  • 蘋果Apple Store iOS 版 App 更新:重新設計 「課程」頁,可查折抵...
    IT之家3月22日消息 今天蘋果iPhone和iPad上的Apple Store app迎來5.3版本更新,Today at Apple 新增了數十種激發靈感的課程,重新設計的「課程」標籤頁;現在可在 app 內更輕鬆地查看自己設備的折抵金額。
  • app界面設計的流行趨勢
    app界面設計的流行趨勢,界面作為我們認識app的第一道門檻,是app的「面子」,更是不可忽視的一項重點設計,為了建立有效的ui,設計師需要根據移動端app本身的特性和當下趨勢,作出不一樣的改變。但當今設計趨勢瞬息萬變,在沒有統一標準的設計規則之下,緊跟設計趨勢,才能保證ui對用戶的吸引力常在。一、首頁作為設計師,一定要做到多看多用才能夠找到更適合產品本身的展示方式。下面介紹一下首頁最常見的4種表現形式,分別是列表型首頁、圖標型首頁、卡片型首頁和綜合性首頁,不同類型的首頁布局承載著不同的內涵。
  • 電商APP界面設計的思考
    電商APP界面設計之一:電商服飾設計系列關鍵詞:色彩搭配、彌散陰影這是一款很典型的簡約扁平化風格的APP界面設計,仔細欣賞給人感覺很舒服,右側詳情頁採用卡片式方式陳列,布局整齊又美觀。這款APP設計很好地運用了漸變色彩,讓用戶在駐足品味商品後,有衝動點開「Show more」或直接購買。不得不說,漸變色的使用無論何時都是APP設計師提升設計逼格的重要手法之一。
  • Axure教程:以微信為例,製作APP啟動頁的效果
    每次手機打開微信,進入到首頁之前,都需要等待一段時間,等待時我們看到的那張人站在星球上的圖片實際上就是微信的啟動頁。啟動頁的作用除了緩和用戶等待的焦慮情緒外,還有為APP定調性的作用,現在有很多APP的引導頁已經變成了廣告位,用以實現盈利。今天我們以微信為例,一起來看下這種效果的實現方法。
  • 初頁app製作出翻頁多圖的具體操作流程介紹
    各位知道使用初頁app如何製作出翻頁多圖嗎?不懂的話就去下面看看初頁app製作出翻頁多圖的操作流程介紹。初頁系列軟體最新版本下載初頁電腦版軟體版本:3.8.11手遊電腦版立即查看初頁軟體版本:3.8.11Android軟體立即查看初頁軟體版本:3.8.4iOS軟體立即查看1、打開初頁點擊中間的+號2、選擇自己喜歡的模板3、點擊編輯區內的圖片
  • 網易嚴選APP品牌設計
    版式設計嚴選app首頁版面採用兩欄布局進行設計,在內容的展現上做到適度克制,從而簡化了內容,再配以淺色背景或者大面積的白色,把核心展示都留給了商品本身,整體給人簡約、寧靜的感受,不強制,不給人壓迫感。相比其他電商app的四欄乃至更多的內容呈現,從視覺上做到了較強的辨識度。
  • APP閃屏設計這樣玩才顯逼格
    所以,選擇合適的app閃屏設計形式和常用字體,都能影響你的app閃屏界面設計。春節馬上來了,很多app閃屏都換上了春節的外衣。1、極簡設計形式最常見的APP閃屏設計形式就是國內常規閃屏,品牌色+logo+名稱+slogan,這類閃屏佔據大多數,因為相對簡潔明了,清晰明了的,主題突出。
  • 「起底醫美app」系列報導之一:虛假案例廣告頻現 醫院資質審核存疑
    原標題:「起底醫美app」系列報導之一:虛假案例廣告頻現 醫院資質審核存疑 基於消費者對醫美信息的需求,一些醫美app應運而生,為醫院醫生和用戶建立起溝通橋梁。   然而記者調查後發現,醫美app並非如表面一般讓用戶喜聞樂見,反而為一些用戶帶來了不小的困擾。
  • 譯文| 怎樣設計App可以獲得快速增長
    Kamo Asatryan (Primer CEO) 也許是創業圈裡最神秘的創業者之一。那麼開發團隊就可以將4頁的引導圖省略掉,從而將位置信息的權限要求頁面放到第二頁,並且該頁面的文案也修改成「Enable Location Permissions」(允許獲取位置),並強調這是為了用戶獲得更好地服務。更激進的是,Asatryan設計頁面無法跳到下一頁,除非用戶選擇「Yes」(允許app獲取位置信息)!
  • 設計小結:新聞資訊類App的UX淺析
    而文字與背景的文本對比度應為7:1相對閱讀更舒適(根據Material Design設計語言推薦)。因而在UX的設計上,我們也應該多考慮用戶不同場景中對app體驗的不同需求。1. 日夜模式/室內外模式用戶使用的第一高頻場景是在睡覺前,使用場景中唯一的光源——燈光,光線較弱,結合我們在上文中提到的光線水平影響我們選擇文字顏色與背景顏色來調節閱讀舒適度。
  • APP啟動圖標設計方法!
    啟動圖標是應用軟體的主要入口,能直接引導用戶下載並使用應用程式。設計師需要始終以用戶的角度來審視啟動圖標的設計,只有這樣才能達到精確的信息傳達與和諧的視覺效果共存。①了解設計趨勢。在設計領域視覺風格的變化是實時的,使用者們更能接受新的視覺潮流,也願意在自己的行動裝置中看到最流行的視覺元素。這就需要在設計圖標前,先了解最新的設計潮流,並將其視覺風格融入到應用圖標設計中。②分析競爭對手。對於圖標設計來說,更重要的是在其他應用市場中保證它們能在眾多相關功能類的圖標中脫穎而出,戰勝目標市場上的其他競爭者。
  • App 啟動流程,從點擊桌面開始
    目錄下,/data/app目錄是用戶有權限訪問的目錄,在安裝apk的時候會自動選擇該目錄存放用戶安裝的文件,而系統出場的apk文件則被放到了/system分區下,包括/system/app,/system/vendor/app,以及/system/priv-app等等,該分區只有ROOT權限的用戶才能訪問,這也就是為什麼在沒有Root手機之前,我們沒法刪除系統出場的app的原因了。