4個優(yōu)秀案例幫你掌握引導(dǎo)頁設(shè)計方法
當(dāng)今移動應(yīng)用引導(dǎo)流程的設(shè)計可謂是環(huán)肥燕瘦。有些就如同創(chuàng)建賬戶或是登錄頁面一樣簡單,而更多的則是包含了應(yīng)用引導(dǎo)或是操作指南之類的內(nèi)容。無論你打算如何設(shè)計引導(dǎo)流程,看看別人是怎么做的總是有價值的,并且也能從中獲得一些啟發(fā)。
接下來我將給大家介紹4個不同應(yīng)用的引導(dǎo)設(shè)計——Days、Duolingo、Acorns和Authenpic。
Days
Days是一個倒計時應(yīng)用,你可以通過它查看當(dāng)前距離某一個重大事件還有多少日子。打開應(yīng)用,首先映入眼簾的是一個干凈簡潔的歡迎頁,上面有應(yīng)用的 Logo以及一段簡短的介紹。這是個非常好的設(shè)計,對于那些即使下載了這個應(yīng)用卻還仍然一知半解的用戶,他們就不用再去猜測了。
在這個頁面的底部,有個明確的引導(dǎo)操作指示用戶向下滑,下滑后用戶將會看到應(yīng)用的引導(dǎo),而且這個引導(dǎo)還是交互式的:首先你會看到一個iPhone的 屏幕中加載出一些預(yù)設(shè)好的事件,接著它引導(dǎo)你通過滑動屏幕來瀏覽。然后,其中一個事件會打開,向你展示全屏顯示單個事件時是什么樣的。這樣你對整個應(yīng)用就 心里有數(shù)了。
接著它繼續(xù)引導(dǎo)你向上滑,讓你了解即使在事件的詳情頁你也可以通過簡單操作跳到下一個事件。引導(dǎo)流程的最后一步是讓用戶去點(diǎn)擊分享按鈕,這個很顯然,是一個社交營銷。最后,引導(dǎo)結(jié)束時,有一個大大地綠色按鈕出現(xiàn),你可以通過點(diǎn)擊他開始使用Days。
這時,你就身處應(yīng)用中,并且已經(jīng)非常清楚地知道應(yīng)用該如何使用了。不經(jīng)歷交互式引導(dǎo)用戶是無法到達(dá)這里的,所以對用戶來說這是個很好的開始,因?yàn)樗麄円呀?jīng)對應(yīng)用有了足夠的了解,就可以開始創(chuàng)建自己的事件倒計時了。
Duolingo
Duolingo是個很有趣的應(yīng)用,用戶可以通過每天幾分鐘的小練習(xí)來學(xué)習(xí)一門語言。打開應(yīng)用,很自然地,你會看到一個簡單的問候頁面,而不是讓你先創(chuàng)建賬號。如果你已經(jīng)有賬號了,你只需登錄即可;如果沒有的話,Duolingo將會帶你開啟一段美妙的初體驗(yàn)。
首先,你需要選擇一種語言。應(yīng)用針對說英語的用戶提供了9種語言,說其他語言的則有更多可以選擇(例如只懂荷蘭語的用戶也許會要學(xué)波蘭語)。選定之 后,應(yīng)用就詢問你是否要進(jìn)行一個分級測試,這個測試能檢測你的語言能力,從而避免你在已經(jīng)知道的知識上浪費(fèi)時間。如果你一無所知的話就直接從最基礎(chǔ)的課程 開始。
對于菜鳥而言,Duolingo也不玩任何的小把戲,直接讓你開始上第一課了。只有當(dāng)你完成了第一關(guān)后,應(yīng)用才會推薦你注冊賬號來保存進(jìn)度。這樣的 注冊流程設(shè)計很有趣而且特別好,你已經(jīng)取得一定進(jìn)展并且花了精力在上面了,如果不注冊把進(jìn)度保存下來反而是浪費(fèi)時間了。而此時,用戶也對應(yīng)用有了大致的了 解,他們似乎更容易轉(zhuǎn)化成注冊用戶因?yàn)樗麄円呀?jīng)體驗(yàn)過了。
Acorns
Acorns是個自動投資的手機(jī)應(yīng)用。他會將你平時花銷的找零進(jìn)行投資從而獲得長久的收益。打開應(yīng)用后的四屏介紹了這個應(yīng)用的功能,大致可以讓你知道Acorns是如何工作的。引導(dǎo)頁用引人入勝的動畫以及少量的文字展現(xiàn)了該應(yīng)用進(jìn)行投資的不同步驟。
最后一頁是個注冊登錄頁。這也是個很典型的做法。然而,當(dāng)你準(zhǔn)備要創(chuàng)建一個賬戶,開始填入郵箱和密碼時,界面發(fā)生了一些些變化,以騰出空間顯示密碼要求。不僅是這樣,應(yīng)用還會告訴你那些要求你的密碼已經(jīng)滿足,那些還沒有達(dá)到。這個體驗(yàn)非常的好,有以下兩個原因。
第一,它讓這個流程變得更加輕松,顯示出具體的密碼需求讓你清楚地知道還有哪些沒有滿足,這樣你一次就能夠成功地設(shè)置好密碼。根本不需要猜,“需要一個特殊字母嘛?還是數(shù)字就好?”
第二,也是更為重要的就是Acorn顯示出它的透明性。這是第一次讓用戶感覺到應(yīng)用是很關(guān)心用戶的,并且愿意與用戶一起攜手走過每一步的。它并沒有讓任何事情懸而未決,哪怕像創(chuàng)建密碼這樣一件小事,都是確保你馬上做出正確地選擇。
當(dāng)你成功創(chuàng)建了賬號,你就完成了Acorns第一階段的引導(dǎo)。接下來就是設(shè)置投資賬戶和綁定銀行卡了。和之前一樣,這次的引導(dǎo)也是帶著用戶一步步設(shè) 置的。這其實(shí)是個很長的流程,但是Acorns并不會讓你覺得那么難以忍受,因?yàn)樗鼘⑹虑槎颊f的很清楚并且讓你可以輕松完成。這是他們品牌形象的重要部 分,得以在引導(dǎo)流程的設(shè)計中展現(xiàn)出來。
Authenpic
如果你喜歡驚喜喜歡拍照,這個應(yīng)用就是為你量身定做的。它就像老式的膠片機(jī)。你可以用它拍24張照片,但是不能預(yù)覽,也不能重拍。如果你想看看自己拍得如何,你需要購買然后可以收到打印出來的相片。
這是個很有趣的應(yīng)用,讓我們回歸真實(shí)。不讓放棄重拍并且制造驚喜會讓事情變得很有趣。當(dāng)你首次打開應(yīng)用的時候,你會看到Facebook第三方登錄的按鈕,這使得注冊登錄流程變得更加簡單。
如果你沒有facebook賬戶,就也可以用傳統(tǒng)的方法來創(chuàng)建一個Authenpic賬戶。當(dāng)你完成注冊之后,你將會看到一個快速引導(dǎo)。
首先你會看到綠色的大按鈕,這是開啟你“膠片”之旅的開關(guān)。接著你會看到一段文字來確認(rèn)你,也就是用戶,明白這個應(yīng)用的規(guī)則:你不能預(yù)覽或是重拍。接下來,你就可以開始拍照了。
一旦你同意你就會看到界面在給你介紹一些不同的東西,比如你還剩多少張照片可拍,拍下一張照的按鈕在哪。這是一個超級簡潔的應(yīng)用,也有一個簡潔的引導(dǎo)流程。
這些對你的應(yīng)用意味這什么?
引導(dǎo)在應(yīng)用設(shè)計中是個非常重要的流程,因?yàn)樗怯脩舻谝淮未蜷_應(yīng)用會看到的東西,也會第一次帶你了解這個應(yīng)用。引導(dǎo)流程幾乎都會根據(jù)應(yīng)用而相應(yīng)變化 的,所以我希望通過這篇文章讓大家明白有許多不同的方法都可以用來設(shè)計引導(dǎo)流程。一旦引導(dǎo)中信息足夠清楚并且有用,你就已經(jīng)邁出成功的第一步了。
原文來自:designmodo
譯者:微信號 開卷有譯
來源:優(yōu)設(shè)網(wǎng)
原文地址:http://www.uisdc.com/4-guide-page-design-example
真奇怪 我在頂部點(diǎn)擊收藏 竟然跳到了這里