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

蘋(píng)果官方對(duì)于iOS啟動(dòng)頁(yè)的設(shè)計(jì)說(shuō)明:

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

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

1、啟動(dòng)頁(yè)與UI間的關(guān)系

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

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

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

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

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

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

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

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

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

(1)特性性功能類

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

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

(2)推廣類

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

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

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

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

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

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

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

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

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

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

(2)貼合主題

頁(yè)面的圖片、文案、按鈕,的風(fēng)格要與產(chǎn)品的風(fēng)格統(tǒng)一。圖片要結(jié)合產(chǎn)品與文案來(lái)設(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)比例合理,特征明顯

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

 

文章來(lái)源:百度ue講堂

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