如何設(shè)計(jì)更好的app的啟動引導(dǎo)頁面?

蘋果官方對于iOS啟動頁的設(shè)計(jì)說明:

當(dāng)用戶在主屏幕上點(diǎn)擊您的應(yīng)用程序圖標(biāo)時,iPhone OS會立即顯示這個啟動圖像。一旦準(zhǔn)備就緒,您的應(yīng)用程序就會顯示它的首屏幕,來替換掉這個啟動占位圖像。請記住,啟動圖像并不是為您提供機(jī)會進(jìn)行藝術(shù)展示;它完全是為了增強(qiáng)用戶對應(yīng)用程序能夠快速啟動并立即投入使用的感知度。

一、啟動頁、引導(dǎo)頁與UI間的關(guān)系

1、啟動頁與UI間的關(guān)系

為了增強(qiáng)應(yīng)用程序啟動時的用戶體驗(yàn),您應(yīng)該提供一個啟動圖像。最終的目的是為了增強(qiáng)用戶對應(yīng)用程序APP 能夠快速啟動并立即投入使用的感知度。一般只有1張圖或動畫,停留時間控制在3秒左右。

現(xiàn)在啟動頁面的幾個設(shè)計(jì)角度:

(1)品牌展現(xiàn)

品牌傳遞類的啟動頁相對較簡單,基本采用產(chǎn)品名稱+產(chǎn)品標(biāo)志語為結(jié)構(gòu),簡單突出主題即可。

(2)情感化設(shè)計(jì)

通過一張短短的啟動頁去說一個故事或是表達(dá)情懷,確實(shí)不是一件容易的事情。

2、引導(dǎo)頁與UI的關(guān)系

所謂引導(dǎo)頁,就是引導(dǎo)用戶學(xué)習(xí)app用法或了解app作用的頁面,其核心在于“引導(dǎo)”二字。一般出現(xiàn)在全新概念的APP上,或是產(chǎn)品的迭代之后。頁面控制在5頁以內(nèi)。一個好的APP引導(dǎo)頁面可以最快速的抓住用戶的眼球,讓你快速的了解APP價值和功能。也就是說好的UI可以引導(dǎo)用戶更快的進(jìn)入使用環(huán)境。

引導(dǎo)頁的設(shè)計(jì)類型:

(1)特性性功能類

對主要產(chǎn)品的主要功能進(jìn)行展示。以文案與插圖組合再加上點(diǎn)狀指示器的方式來表現(xiàn)。

點(diǎn)狀指示器的功能:明確告知引導(dǎo)頁的數(shù)量,和當(dāng)前所在位置。

(2)推廣類

含類似市場專題推廣,情感化內(nèi)容運(yùn)營。

(3)品牌展現(xiàn)類

主要以與APP理念相符合的圖片來表現(xiàn)主題。例如,美食類的APP圖片采用食材圖片來表現(xiàn);社交類的以人物圖片來表現(xiàn)。

在產(chǎn)品更新迭代后,利用半透明的蒙版遮罩與功能指引圖片來告知產(chǎn)品的功能調(diào)整或增加及如何使用等。

二、人、物的設(shè)計(jì)方法

不論啟動頁還是引導(dǎo)頁,它們的形式都是以圖片為主,配合文案、點(diǎn)狀指示器來表現(xiàn),文案的設(shè)計(jì)方法與Banner相似,點(diǎn)狀指示器的設(shè)計(jì)也比較簡單,下面我們就來了解圖片主題的設(shè)計(jì)吧。

1 如何做扁平化設(shè)計(jì)?

(1)腦暴構(gòu)思,剪影化

扁平化設(shè)計(jì),就是舍棄具體的實(shí)物的細(xì)節(jié),進(jìn)行輪廓剪影的概括。例如蘋果的LOGO設(shè)計(jì):

又如下圖扁平化引導(dǎo)頁中的PAD,其實(shí)它是有厚度,有質(zhì)感的。當(dāng)把這些東西舍棄后,它就是以個長方形加按鈕和聽筒的形式存在。剪影化就是保留物體特征,舍去多余細(xì)節(jié)。

(2)貼合主題

頁面的圖片、文案、按鈕,的風(fēng)格要與產(chǎn)品的風(fēng)格統(tǒng)一。圖片要結(jié)合產(chǎn)品與文案來設(shè)計(jì);文字部分層次要分明,字?jǐn)?shù)不能太多,控制在2-3行;按鈕部分的顏色,圓角大小需與產(chǎn)品規(guī)范統(tǒng)一。

(3)構(gòu)圖合理

構(gòu)圖需分清主題與背景,中心不能偏移。突出主體,吸引用戶目光。

(4)色彩的運(yùn)用

自身色感的培養(yǎng),關(guān)注潮流的配色風(fēng)格,借鑒好的作品,才能運(yùn)用好色彩。

2、人與人的扁平設(shè)計(jì)方法

與物的設(shè)計(jì)類似,也是剪影化,只是風(fēng)格比較多。

(1)高度概括,舍棄細(xì)節(jié)

(2)比例合理,特征明顯

以上就是今日所有的分享,希望對你的設(shè)計(jì)之路有所幫助!

 

文章來源:百度ue講堂

每天更新,
全站高品質(zhì)素材免費(fèi)下載!