從UI設計師角度認識啟動頁

2021-10-05 08:57:28 字數 2638 閱讀 4782

啟動頁的作用很多,在緩解使用者等待焦慮的同時,也能夠通過啟動頁來奠定品牌的基調或者實現商業價值,其重要性可見一斑。

唐納德·諾曼可說過,使用者是永遠不是錯的(攤手)。網路問題,怪運營商;一連串的開屏頁,那必須得怪產品設計人員了。作為一名ui,我知道有時出於品宣和商業目標,我們不得不在pm與運營的淫威下屈服。但今天我還是要來聊聊,怎麼把開屏頁落地,做到存在且合理。

一、平台規範下的啟動頁

ios 與 material design 對於啟動頁(launch screen)存在的價值都保持一致的積極態度,都認為啟動頁可以讓使用者減少對於應用程式啟動載入過久的認知。說直白點,啟動頁存在的價值,其實就是應用程式啟動載入的一塊遮羞布。

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

首先,ios在規範的迭代中從來沒有改變過「以使用者體驗為核心」的初衷,時至今日 ios 也依舊認為啟動頁應該設計為類似應用程式開啟後第一屏的螢幕骨架,這樣不容易引人注意,看上去就像一啟動應用程式就已經載入出了應用框架,剩下的時間只是在請求伺服器資料,給人一種應用程式開啟很快的感覺。

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

曾經有許多應用程式都是按照ios指定規範來落地啟動頁的(國外軟體居多),類似instagram、facebook,但現在也都已經變成了品牌**。但ios內建的應用程式,還是保持著初心。

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

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

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

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

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

軟體載入的速度越來越快,啟動頁停留的時間也越來越短,可為什麼我們還是會在啟動應用程式時遭遇好幾次開屏「攔截」呢。這裡就要弄清楚啟動頁、閃屏、引導頁的區別了。

啟動頁:平台規範所明確定義的開屏頁,常用方案為首屏骨架或品牌露出,有且只有乙個,持續時間有時不超過1秒;閃屏:多數應用借閃屏展現品牌精神、slogan,或為了商業目標而設計廣告宣傳,閃屏可能會有連續多個,並且一般會設定「跳過」按鈕;

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

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

首先啟動頁與閃屏、引導頁最大的區別就在於:啟動頁是平台規範所明確規定的程式啟動載入準則,它在應用上線時就已經內嵌在了應用程式之中,並且是必需的。可以理解為一張「死圖」,當我們更換啟動頁後,會涉及到發版上線、使用者更新等一系列流程,相對於比較繁瑣。

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

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

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

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

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

三、開屏頁面適配方法

iphonese@2x: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)等無法等比例縮放適配的機型,可以前端採取居中裁剪上下的方式。

四、總結

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

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

ui設計師技能, 熟練的ui設計師

ui設計師技能,熟練的ui設計師。作為乙個ui設計師,到底應該具備什麼技能,是不是只要可以熟練的應用軟體或者只要具備一定的思維就可以成為乙個優秀的ui設計師呢?很顯然不是,那麼ui設計師應該具備怎麼樣的技能呢,今天就跟我一起來了解了解吧!1 軟體工具的熟練 首先是ps軟體,不管我們是做ui介面還是運...

UI設計師前景

ui大時代 ui設計概述 前言 近幾年,有乙個新興的詞在設計領域誕生,這個詞就是 ui 在短短的幾年裡ui設計師越來越多,設立ui部門的企業越來普遍,各大院校也出現了和ui相關的專業,ui 設計的組織和 層出不窮。這一切都預示著乙個 ui 大時代已經到來。到底什麼叫ui設計,什麼是ui設計師,ui設...

採訪UI設計師Kiro

採訪ui設計師kiro 曾子鋒 網名 kiro來自團隊 eicostudio eicostudio的採訪 2s space 所獲獎項 2006 gui國際冠軍賽最佳易用性圖示 金獎 之後,就把他當成努力的目標。2s space是我和coffee一起創立的乙個ui設計工作室。早期我們只建立了乙個名為2...