40個精彩紛呈的移動引導(dǎo)頁設(shè)計

界面設(shè)計
2016-7-11 06:08:55 文/饒?zhí)斐?圖/紀(jì)嘉澍
現(xiàn)在的用戶下載app時最先看到的東西就是引導(dǎo)頁。一個引導(dǎo)頁就像一個導(dǎo)游,它會快速的向用戶介紹app本身對用戶有什么用處已經(jīng)該如何操作。這是描述應(yīng)用本身最簡單的方式,但是它的設(shè)計卻不是那么容易。
一個引導(dǎo)頁最基本的功能包括以一種最簡單,熱情和友好的方式來呈現(xiàn)給用戶,這也是設(shè)計師必須考慮的重中之重。引導(dǎo)頁面就像創(chuàng)造告知和教育用戶空狀態(tài)欄。雖然并不是每一個app都需要建立引導(dǎo)頁面,但是我認為通過這個可以節(jié)省用戶摸索應(yīng)用流程的時間,這樣就會減少一定由于不會使用而引起的沮喪情緒,提升用戶體驗。
接下來讓我們看一些例子吧,以下的這些經(jīng)典案例是我們從世界各地的廣告素材中精選出來的移動應(yīng)用的引導(dǎo)頁面設(shè)計,看完他們你可能會有一些靈感,或者你也可以談?wù)勀銓σ龑?dǎo)界面設(shè)計的看法。
看看這些來自Virgil Pana靈感的作品。光滑的插圖和動畫的表現(xiàn)形式,所有設(shè)計都是基于一定的教育理念。
這個旅游app的引導(dǎo)界面設(shè)計在相同的圓形中插入了不同的山體,或者其他風(fēng)景,一切相映成趣。設(shè)計師Anggit Yuniar Pradito映在他的引導(dǎo)頁面設(shè)計中加入了多個不同的元素進行組合。
這是一款名叫Bemyspot的app的一部分的引導(dǎo)界面,這款app主要業(yè)務(wù)是購物應(yīng)用,鼓勵用戶在平臺上發(fā)布自拍,發(fā)現(xiàn)的有趣的事和分享身邊的故事。由Rosario Sarracino and Ivan Paudice.設(shè)計
這些界面上的每一個圖像都在向用戶傳達這樣一個信息:它提供郵票服務(wù)。設(shè)計師 Anastasiia Andriichuk認為,傳達一個有趣的觀念就像分娩一樣,需要很長的時間。
設(shè)計師Sasha Gorosh 通過太空船得到靈感,設(shè)計了這款耐看且有趣的引導(dǎo)界面。每個插圖都相當(dāng)簡單,一看到你就知道它想要表達什么。
“愿原力與你同在!”一款行星改造的引導(dǎo)界面設(shè)計,靈感來自星球大戰(zhàn),設(shè)計師Anton Chandra。
通過幾張插圖, Aika告訴了你可以通過使用這個旅行app做什么,你同樣可以選擇滑動頁面跳過或者點擊“X”關(guān)閉它們。
本設(shè)計中的布局,梯度,插圖和色彩的運用都是相當(dāng)驚人的。底部橙色CTA按鈕在藍色的背景中看起來有點奇怪,但是卻相當(dāng)獨特,引人注目。一個不錯的設(shè)計來自 Murat Gursoy。
這些可愛的小人形象向你展示了這個app的功能,并吸引了你的注意力。它們看起來相當(dāng)可愛,雖然可愛,卻十分嚴(yán)謹。
對于界面中圖標(biāo)的使用相當(dāng)巧妙,在灰色的部分設(shè)置綠色的插畫相當(dāng)好看,由Nitesh Chandora.設(shè)計
這是多一個多頁面界面設(shè)計,采用了綠色環(huán)保的主題和簡約醒目的插圖。導(dǎo)航按鈕被放置在屏幕的底部,相當(dāng)方面。Martin Strba.設(shè)計。
這些插圖顯示了世界各地的風(fēng)景名勝?雌饋砭拖褚粋簡約的旅游指南,位置的簡要說明增加了誘惑力。來自Anton Chandra.的又一著作。
聊天氣泡和插圖中的圓球繪制相當(dāng)細致。我可以想象這在app中動態(tài)的表現(xiàn)將多么令人驚嘆。不錯的作品,來自Ghani Pradita.。
這些插畫同Ghani Pradita的軌道系列相似,但是在所有引導(dǎo)界面中被使用,這些設(shè)計來自Faiz Al-Qurni.
這些來自的 Ivy Mukherjee插畫十分有趣并且富有創(chuàng)意,但是畫面中的文本有點小所以閱讀困難。然而說明正確的插圖在設(shè)計中的重大作用是,這簡直堪稱完美典范。