實戰分析!4個優秀案例幫你掌握引導頁設計方法 - 優設網 - UISDC

實戰分析!4個優秀案例幫你掌握引導頁設計方法

2015/05/20 14732評論區

4-guide-page-design-example-1

當今移動應用引導流程的設計可謂是環肥燕瘦。有些就如同創建賬戶或是登錄頁面一樣簡單,而更多的則是包含了應用引導或是操作指南之類的內容。無論你打算如何設計引導流程,看看別人是怎么做的總是有價值的,并且也能從中獲得一些啟發 >>>

本文譯者微信號 開卷有譯,歡迎關注呦。

接下來我將給大家介紹4個不同應用的引導設計——Days、Duolingo、Acorns和Authenpic。

Days

Days是一個倒計時應用,你可以通過它查看當前距離某一個重大事件還有多少日子。打開應用,首先映入眼簾的是一個干凈簡潔的歡迎頁,上面有應用的Logo以及一段簡短的介紹。這是個非常好的設計,對于那些即使下載了這個應用卻還仍然一知半解的用戶,他們就不用再去猜測了。

在這個頁面的底部,有個明確的引導操作指示用戶向下滑,下滑后用戶將會看到應用的引導,而且這個引導還是交互式的:首先你會看到一個iPhone的屏幕中加載出一些預設好的事件,接著它引導你通過滑動屏幕來瀏覽。然后,其中一個事件會打開,向你展示全屏顯示單個事件時是什么樣的。這樣你對整個應用就心里有數了。

js20150520 (1)

接著它繼續引導你向上滑,讓你了解即使在事件的詳情頁你也可以通過簡單操作跳到下一個事件。引導流程的最后一步是讓用戶去點擊分享按鈕,這個很顯然,是一個社交營銷。最后,引導結束時,有一個大大地綠色按鈕出現,你可以通過點擊他開始使用Days。

js20150520 (2)

這時,你就身處應用中,并且已經非常清楚地知道應用該如何使用了。不經歷交互式引導用戶是無法到達這里的,所以對用戶來說這是個很好的開始,因為他們已經對應用有了足夠的了解,就可以開始創建自己的事件倒計時了。

Duolingo

Duolingo是個很有趣的應用,用戶可以通過每天幾分鐘的小練習來學習一門語言。打開應用,很自然地,你會看到一個簡單的問候頁面,而不是讓你先創建賬號。如果你已經有賬號了,你只需登錄即可;如果沒有的話,Duolingo將會帶你開啟一段美妙的初體驗。

js20150520 (3)

首先,你需要選擇一種語言。應用針對說英語的用戶提供了9種語言,說其他語言的則有更多可以選擇(例如只懂荷蘭語的用戶也許會要學波蘭語)。選定之后,應用就詢問你是否要進行一個分級測試,這個測試能檢測你的語言能力,從而避免你在已經知道的知識上浪費時間。如果你一無所知的話就直接從最基礎的課程開始。

js20150520 (4)

對于菜鳥而言,Duolingo也不玩任何的小把戲,直接讓你開始上第一課了。只有當你完成了第一關后,應用才會推薦你注冊賬號來保存進度。這樣的注冊流程設計很有趣而且特別好,你已經取得一定進展并且花了精力在上面了,如果不注冊把進度保存下來反而是浪費時間了。而此時,用戶也對應用有了大致的了解,他們似乎更容易轉化成注冊用戶因為他們已經體驗過了。

Acorns

Acorns是個自動投資的手機應用。他會將你平時花銷的找零進行投資從而獲得長久的收益。打開應用后的四屏介紹了這個應用的功能,大致可以讓你知道Acorns是如何工作的。引導頁用引人入勝的動畫以及少量的文字展現了該應用進行投資的不同步驟。

js20150520 (5)

最后一頁是個注冊登錄頁。這也是個很典型的做法。然而,當你準備要創建一個賬戶,開始填入郵箱和密碼時,界面發生了一些些變化,以騰出空間顯示密碼要求。不僅是這樣,應用還會告訴你那些要求你的密碼已經滿足,那些還沒有達到。這個體驗非常的好,有以下兩個原因。

第一,它讓這個流程變得更加輕松,顯示出具體的密碼需求讓你清楚地知道還有哪些沒有滿足,這樣你一次就能夠成功地設置好密碼。根本不需要猜,“需要一個特殊字母嘛?還是數字就好?”

第二,也是更為重要的就是Acorn顯示出它的透明性。這是第一次讓用戶感覺到應用是很關心用戶的,并且愿意與用戶一起攜手走過每一步的。它并沒有讓任何事情懸而未決,哪怕像創建密碼這樣一件小事,都是確保你馬上做出正確地選擇。

js20150520 (6)

當你成功創建了賬號,你就完成了Acorns第一階段的引導。接下來就是設置投資賬戶和綁定銀行卡了。和之前一樣,這次的引導也是帶著用戶一步步設置的。這其實是個很長的流程,但是Acorns并不會讓你覺得那么難以忍受,因為它將事情都說的很清楚并且讓你可以輕松完成。這是他們品牌形象的重要部分,得以在引導流程的設計中展現出來。

Authenpic

如果你喜歡驚喜喜歡拍照,這個應用就是為你量身定做的。它就像老式的膠片機。你可以用它拍24張照片,但是不能預覽,也不能重拍。如果你想看看自己拍得如何,你需要購買然后可以收到打印出來的相片。

這是個很有趣的應用,讓我們回歸真實。不讓放棄重拍并且制造驚喜會讓事情變得很有趣。當你首次打開應用的時候,你會看到Facebook第三方登錄的按鈕,這使得注冊登錄流程變得更加簡單。

js20150520 (7)

如果你沒有facebook賬戶,就也可以用傳統的方法來創建一個Authenpic賬戶。當你完成注冊之后,你將會看到一個快速引導。

首先你會看到綠色的大按鈕,這是開啟你“膠片”之旅的開關。接著你會看到一段文字來確認你,也就是用戶,明白這個應用的規則:你不能預覽或是重拍。接下來,你就可以開始拍照了。

一旦你同意你就會看到界面在給你介紹一些不同的東西,比如你還剩多少張照片可拍,拍下一張照的按鈕在哪。這是一個超級簡潔的應用,也有一個簡潔的引導流程。

這些對你的應用意味這什么?

引導在應用設計中是個非常重要的流程,因為他是用戶第一次打開應用會看到的東西,也會第一次帶你了解這個應用。引導流程幾乎都會根據應用而相應變化的,所以我希望通過這篇文章讓大家明白有許多不同的方法都可以用來設計引導流程。一旦引導中信息足夠清楚并且有用,你就已經邁出成功的第一步了。

【有哪些值得推薦的高端字體?】

高端中文字體:
《超實用!有哪些活潑而高端且不俗套的中文字體?》

UI設計字體:
《新手進階寶典!UI實戰指南之留在電腦里的字體(一)》

高端英文字體:
《永不過時!有哪些值得推薦的經典款英文字體?(已打包)》

原文地址:designmodo

【優設網 原創文章 投稿郵箱:[email protected]

================關于優設網================
“優設網uisdc.com“是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/
設計微博:擁有粉絲量95萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的”福利”嗎?
添加 優秀網頁設計 微信號:【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加:

sdcweixin

優設大課堂

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址:http://www.wydhjd.tw/4-guide-page-design-example

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

版式設計 交互設計師 界面設計 排版布局 職場 優設專訪 設計師干貨 優設大課堂 設計達人 配色 視覺設計 web前端開發 素材下載 AI教程 設計流程 設計理論 神器下載 字體下載 設計師專訪 psd下載 設計規范 海報設計 用戶體驗設計 設計趨勢 平面設計 動效設計 logo設計 圖標設計 ICON 產品設計 神器推薦 App設計 字體設計 職場規劃 酷站推薦 交互設計 ui設計 優秀網頁設計 設計師職場 ps技巧 酷站 用戶體驗 PS教程 網頁設計 經驗分享

您還沒有登錄

優設啟用更安全省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里

94期香港马会三肖中特