插畫類引導頁常見的幾種類型

原標題：插畫類引導頁常見的幾種類型

原文地址：海鹽社（公眾號）

作者：潘糰子

現在的APP數量越來越多，製作也是越來越精美，特別是引導頁，各種APP都希望能在設計上與其他APP區分開，從而給用戶留下好的第一印象，並且更能吸引到用戶的注意。

我最近一段時間一直在做引導頁的練習，在設計的過程中也有了一些自己的思考，文章主要討論了幾個問題：為什麼引導頁中要用插畫？以及插畫引導頁設計六種常見的套路。

為什麼引導頁中要用插畫？

1、引導頁是什麼？

引導頁是只針對第一次啟動APP的新用戶才能看到的頁面，目的是介紹產品的某些功能/流程，讓用戶能夠快速了解。就是說手機安裝好APP後第一次打開，就會看到引導頁。當你關閉後，再次打開，是再也看不到的（除非某些app內在設置模塊中，能看到新用戶介紹入口）。

2、為什麼要用插畫？

因為插畫的視覺衝擊力強，很容易就能給用戶「驚艷」的感覺，同時能增加趣味，使頁面顯得不那麼單調和乏味，承載更多的信息量。

插畫引導頁設計五個常見的套路

很多設計師可能一聽說要畫引導頁，第一個想到的就是用插畫，但是用什麼插畫心裡卻不清楚，插畫也分很多類型的，不同種類的插畫引導頁特點和適合的產品也有所不同，下面我們就五種不同的插畫套路來詳細說明。

1、扁平插畫類引導頁

扁平插畫是現在很流行，也是最常用的風格，用簡單線條或者色塊概括的外部輪廓,繪製出「平」的感覺。

以上圖為例，採用簡單的色塊是不是就能讓你看出這是在地鐵中的場景，搭配文案，讓用戶對產品的內容一目了然。

這種類型的插畫優勢是新手能夠快速上手，難度不大，同時畫風簡潔明了，突出重點，能夠快速的讓用戶了解內容；缺點就是因為比較普遍，視覺上難以讓用戶記住。

使用場景：扁平風引導頁形象的插畫和簡單的文案一起，就能快速的讓用戶了解產品要表達的信息，適合用於功能介紹和問題總結。

2、肌理插畫類引導頁

這是在扁平插畫的升級版，增加了顆粒感，這種類型插畫最明顯的特點是比扁平插畫有質感，且會突出光影關係。

以上圖為例，我們可以看到都是由簡單的物體加上光影效果，就能搭配出俯視的感覺，顆粒的感覺讓整個畫面更有質感。

優勢是上手也沒那麼難，而且視覺效果比扁平插畫好；缺點就是對頁面的精緻感要求比較高，光感要是把握不好，畫面難出彩。

使用場景：肌理類引導頁通過一些清新、生活化的場景搭配簡潔的文案很能渲染出產品的基調，除了產品功能介紹外，還適合用在推廣類的引導頁上。

3、手繪插畫類引導頁

手繪插畫的風格比較多，表現力和精緻度比上面說的兩種好，視覺衝擊力也很容易就能表現出來。

從上面的案例可以看出，人物和建築與整個環境的色彩搭配都十分舒服，頁面整體感覺很清新自然，符合春的主題，視覺感很抓人眼球。

優勢是展現的東西很多，應用範圍也很廣，有趣味的同時還能夠驚艷到用戶；缺點是難特別高，對設計師的美術功底要求也是最高的，先從扁平畫練起吧。

使用場景：手繪類的引導頁視覺衝擊力很強，很容易就能體現出產品的態度和調性，適用於推廣類的引導頁上。

4、MBE插畫類引導頁

MBE插畫的特點就是簡潔、圓潤、可愛，斷點和周圍的小點綴加上一些微微的光澤感，是它的標誌。

以上圖為例，整個引導頁的畫風很簡潔，對物體的描繪也很簡單，明亮的色彩搭配、斷線加上點綴使整體給人感覺比較可愛。

優勢是難度係數小，能夠快速上手；缺點是因為風格偏可愛，所以範圍比較局限，能夠適用的產品不是很多，目前市面上用的比較少。

使用場景：MBE類引導頁畫面簡潔，界面展示能夠簡要明白，通俗易懂，適用於功能介紹和使用說明類型的引導頁上。

5、立體插畫類引導頁

立體插畫是採用2.5D或者3D的風格，在二維的空間里表現出三維的事物，讓扁平的東西能夠營造出立體感。

從上面的例子可以看出，2.5D風格的插畫大多是以近似色為主，就能簡單的營造出立體感，搭配一些對比色做點綴，整個畫面的視覺感就能有好的體現。

優勢是整體畫面能夠抓住用戶眼球，有一定的氛圍感；缺點是對空間感、造型能力和光感要求比較高，耗時久。

使用場景：有一定的視覺表現力，同時能夠營造出氛圍感，適用於推廣類和問題解決類的引導頁。

總結

1、選擇適合文案想要表達的插畫風格，功能介紹和使用說明類型的文案就用扁平、立體和MBE風格的插畫，推廣類型的文案用肌理和手繪風格的插畫，解決問題類型的文案用扁平和立體風格的插畫。

2、每頁的插畫要保持一致的設計風格，並且與產品的氣質保持一致。

3、插畫要儘可能的有創意，雖然我知道這很難做到，但是也要體現出設計師的想法和心思在裡面，最重要的是注意細節，細節決定成敗。

參考鏈接：

https://www.sohu.com/a/192121780_99976576

超全面！為什麼越來越多的移動APP 使用插畫設計？

https://www.jianshu.com/p/0af570915a22APP

引導頁設計1-引導頁的分類

http://www.woshipm.com/pd/920315.html

《淺談啟動頁/廣告頁/引導頁設計思想》

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！