蘋(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講堂