幾何

等待,無盡的等待——當我打開一個APP的時候,產品品宣、Slogan、第三方廣告冷冷得在我臉上胡亂地拍,網絡不太好的時候再加上旋轉的菊花碼,我要經過一個漫長的過程才能來到我想到的頁面。

唐納德·諾曼可說過,用戶是永遠不是錯的(攤手)。網絡問題,怪運營商;一連串的開屏頁,那必須得怪產品設計人員了。

作為一名UI,我知道有時出于品宣和商業目標,我們不得不在PM與運營的淫威下屈服。但今天我還是要來聊聊,怎么把開屏頁落地,做到存在且合理。

 

一、平臺規范下的啟動頁

iOS 與 Material Design 對于啟動頁(Launch Screen)存在的價值都保持一致的積極態度,都認為啟動頁可以讓用戶減少對于應用程序啟動加載過久的認知。說直白點,啟動頁存在的價值,其實就是應用程序啟動加載的一塊遮羞布。

雖然兩個平臺對于設置啟動頁的意見一致,但卻有著各自差異性的設計指導準則和實施標準。

首先,iOS在規范的迭代中從來沒有改變過“以用戶體驗為核心”的初心,時至今日 iOS 也依舊認為啟動頁應該設計為類似應用程序打開后第一屏的屏幕骨架,這樣不容易引人注意,看上去就像一啟動應用程序就已經加載出了應用框架,剩下的時間只是在請求服務器數據,給人一種應用程序打開很快的感覺。

而MD比較與時俱進,除了和iOS一樣,指導設計者可以用第一屏骨架作為啟動頁方案之外,還提供了為推廣品牌而做品牌曝光用途的第二方案。

曾經有許多應用程序都是按照iOS指定規范來落地啟動頁的(國外軟件居多),類似Instagram、Facebook,但現在也都已經變成了品牌曝光。但iOS內置的應用程序,還是保持著初心。

其次,對于實施落地,在iOS中啟動頁是必需的,要求開發人員在Xcode編寫工具中上傳啟動頁png圖片,沒有啟動頁會影響到上線審核。

而MD卻沒有強制規定啟動頁,當應用程序沒有設置啟動頁時,系統會自動展示一個白屏作為默認啟動頁。其實這反而會讓用于誤認為程序出錯,所以為了體驗考慮,許多設計者在安卓端還是會老老實實設置啟動頁圖片。

但隨著硬件、軟件技術手段的提升,應用程序啟動的速度會越來越快,啟動頁停留時間也將會越來越短,有時候用戶來不及看上一眼,啟動頁一閃而過就已經加載到主頁面了。(不信你試試一些輕量級的工具型軟件,我為了給你們截圖案例,竟然發現手速比不過啟動頁過渡的速度…導致我最后只能錄屏后來抽出幀畫面。)

這也給許多產品設計者增加閃屏提供了立足理由。

 

二、啟動頁/閃屏/引導頁的區別

軟件加載的速度越來越快,啟動頁停留的視覺也越來越短,可為什么我們還是會在啟動應用程序時遭遇好幾次開屏“攔截”呢。

這里就要弄清楚啟動頁、閃屏、引導頁的區別了。

· 啟動頁:平臺規范所明確定義的開屏頁,常用方案為首屏骨架或品牌露出,有且只有一個,持續時間有時不超過1秒;

· 閃屏:多數應用借閃屏展現品牌精神、Slogan,或為了商業目標而設計的廣告宣傳,閃屏可能會有連續多個,并且一般會設置“跳過”按鈕;

· 引導頁:在用戶首次打開應用或應用更新時,指導用戶操作或展示更新內容的頁面。

網絡上流傳著各式各樣風格的幾個開屏頁的視覺設計手法,這里我就不過多贅述了,我想更多的從交互與體驗方面解析這三個頁面的作用。

首先啟動頁與閃屏、引導頁最大的區別就在于:啟動頁是平臺規范所明確規定的程序啟動加載準則,它在應用上線時就已經內嵌在了應用程序之中,并且是必需的。可以理解為一張“死圖”,當我們更換啟動頁后,會涉及到發版上線、用戶更新等一系列流程,相對于比較繁瑣。

而閃屏、引導頁則是“活圖”,開發可以自由掌控它們的顯示與隱藏,并且更新開屏廣告也不會涉及到發版上線,相對比較靈活。所以盡管你沒有更新你的APP,每次打開應用時,你可能都會看到不同的開屏廣告。

一個是必需,一個是可有可無。于是乎,就有了當我們打開應用程序時,開屏頁可能會有“啟動頁+閃屏/引導頁”的任意組合形式,甚至于有些不經過推敲的應用程序會出現“啟動頁+(多個)閃屏+引導頁”的情形。

閃屏與引導頁并沒有平臺規范來形成標準,那我們該如何設計這幾個開屏頁,才能存在且合理呢?

我在網絡上看過同行總結過這樣一張圖:

首先應在開屏過程中判斷用戶性質,來選擇閃屏與引導頁選擇其一展示即可。以免導致用戶操作過多步驟才能進行實際應用使用,操作時間太久,友好度不高,也容易增加用戶跳出。

其次閃屏如果是長期不會更換的品宣類圖片,可選擇以啟動頁展示。比如唱吧的iOS端(安卓端沒有這個現象),開屏后會顯示三個開屏畫面,非常繁瑣。在我個人開來,第二屏的Slogan完全可以用啟動頁來承載。

 

三、開屏頁面適配方法

前面說到了,啟動頁是一張“死圖”,是平臺規范所定義的。所以iOS給予了明確的啟動頁圖片上傳尺寸,UI需輸出以下尺寸.png圖片給開發人員:

  • [email protected]:640px * 1136px;
  • iPhoen4s/4(@2x) :640px * 960px;
  • iPhone 8/7/6(@2x) :750px?*?1334px;
  • iPhone 8/7/6 plus (@3x) :1242px?*?2208px;
  • iPhone x (@3x) :1125px?*?2436px

系統將會自動獲取設備長寬比,選擇對應的啟動頁尺寸去適配。

而閃屏與引導頁則是產品設計過程中添加的,可靈活配置,導致我見過許多對適配不太了解的UI經手的項目,制作的閃屏或引導頁,放在大屏設備上直接被拉伸變形了…所以在此給大家介紹一個非常實用且簡單的出圖方式:

UI 輸出一張1125px * 2436px閃屏圖片,該尺寸對于iPhoneXS(375pt * 812pt)、iPhoneXR(414pt * 896pt )、iPhoneXS Max(414pt * 896pt)機型可以等比例縮放適配。而對于iPhoneSE(320pt * 560pt)、iPhone8(375pt * 667pt)、iPhone 8 Plus(414pt * 736pt)等無法等比例縮放適配的機型,可以前端采取居中裁剪上下的方式。由此可以推算出:在該尺寸下做閃屏圖片,主要內容安全區域為 1125px * 1968px。

 

四、總結

呈現開屏頁面給用戶本來是無可厚非,但呈現形式與呈現質量其實是需要產品設計者去推敲的。友好的、有趣的開屏頁面,不但不會打擾到用戶,甚至還會給用戶帶來新鮮感和愉悅感。

希望本文能夠幫助你了解幾個開屏頁的區別,并且做出更合理、不被用戶嫌棄的開屏頁面。

 

原文地址:UCD耍家(公眾號)

作者:Howie_t

轉載請注明:學UI網 » 聊聊加載等待的那些事之”啟動頁”

登錄收藏
 
你可能喜歡的:
UI組件-滑塊 用戶超愛的選擇小助手UI組件-滑塊 用戶超愛的選擇小助手
啥?你說我不懂如何設計消息中心?啥?你說我不懂如何設計消息中心?
界面布局| 移動端常見8種界面布局的分析與運用界面布局| 移動端常見8種界面布局的分析與運用
砂之船奧萊數字化零售項目砂之船奧萊數字化零售項目
Material Design Shape and motion 形狀與動效Material Design Shape and motion 形狀與動效
Material Design Shape as expression 形狀表達Material Design Shape as expression 形狀表達
細說控件| Button按鈕的不同樣式與狀態細說控件| Button按鈕的不同樣式與狀態
Material Design Shape and hierarchy 形狀與層級Material Design Shape and hierarchy 形狀與層級
聊聊加載等待的那些事之“進度指示器”(原則篇)聊聊加載等待的那些事之“進度指示器”(原則篇)
Material Design About shape 形狀指南Material Design About shape 形狀指南
?
街机捕鱼城金库券 超级七星彩APP下载 欧洲秒速赛车开奖官网 上海11选5有什么诀窍吗 福建快三走势图福建快3基本走势 排列7开奖号码今天开 安全靠谱的理财大平台 广西福彩快乐双彩开奖 华夏配资网vip杨方配资靠谱 三分彩怎么玩 炒股赚钱靠谱吗