如何設計移動應用引導頁

如今上真,移動應用對首次使用的用戶呈現歡迎頁已經越來越普遍了贩幻。這樣做的目的就是向用戶介紹并展示我們的應用吸申。本文給移動應用的引導頁面設計提供了很多參考,非常值得一讀歹嘹。

閱讀原文請戳傳送門

歡迎關注我的微信公眾號“開卷有譯”獲得新文章推送箩绍。本文為原創(chuàng)譯文,如需轉載請聯系作者尺上,注明出處微信公眾號“開卷有譯”或簡書原文地址材蛛。

-----------------我是分割線----------------

如今,移動應用對首次使用的用戶呈現歡迎頁已經越來越普遍了怎抛。這樣做的目的就是向用戶介紹并展示我們的應用卑吭。

?引導頁往往是與用戶進行交互的第一組界面,于此同時马绝,這些界面還將影響用戶對應用的期望豆赏。因此,對于參與到產品研發(fā)的團隊成員——產品經理、設計師以及開發(fā)人員來說河绽,花些時間好好評估一下這些引導頁是否必要就顯得至關重要了己单,一旦需要,那就做到最好 耙饰。

本文將提供給您一些設計引導頁的小貼士纹笼、一些常見的實現方式、不同的設計方法以及資源苟跪,以幫助您為用戶提供最佳的體驗廷痘。

是否需要引導頁?

?近年來件已,關于移動應用引導頁實用性的討論層出不窮笋额。于此同時,也流行著另一種反對的聲音:如果一個應用需要引導頁篷扩,那么它本身就是一個缺陷兄猩,因為這說明了該應用缺乏簡單和用戶友好的基本要素。雖然聽起來很有邏輯鉴未,但這個結論畢竟過于籠統(tǒng)枢冤。

數字化設計中有大量的規(guī)則和成功案例,這是很好的铜秆。這些規(guī)則讓設計師和工程師不必每次在開發(fā)一個產品的時候都需要推倒重來淹真。更重要的是,它們避免了用戶在使用全新的應用時手足無措连茧,相反核蘸,用戶可以放心地知道編輯功能是由鉛筆圖標代表的,“大拇指”的圖標則代表了“喜歡”啸驯。規(guī)則總是個好東西客扎。

但事實是,每個應用都有其獨到之處坯汤,它是做什么的虐唠、怎么做以及誰使用它。應用間的這些不同點使得引導頁在特定的情況下成為一個可靠惰聂、務實疆偿、人性化的功能存在。讓我們來看一些使用案例搓幌。

使用案例1: 非常規(guī)交互

?如果應用所支持的交互行為并不是大部分用戶能夠輕易通過常規(guī)方式找到的——尤其是主打手勢交互的應用——那么引導頁是必不可少的杆故。手勢驅動的應用程序目前仍處于試驗和探索階段,因此溉愁,開發(fā)人員需要指引用戶如何用這些手勢進行交互处铛,清晰呈現每一個手勢以及它們相對應的功能饲趋。

例如,鬧鐘應用Timely撤蟆,就給用戶詳細地指出了點擊屏幕中的具體區(qū)域會使鬧鐘的時間增加或減少5分鐘奕塑。

Timely針對每個手勢都對用戶進行指導并且展示出期望的結果。

使用案例2: 空頁面

那些默認為空頁面家肯,并且需要用戶通過一個或多個步驟才能填充內容的應用龄砰,也是非常適合使用引導頁的。即便引導頁只有一個步驟讨衣,也能讓用戶打消疑慮换棚,知道自己的操作是正確的。

Feedly展示了用戶該如何在應用中獲得第一批內容

使用實例3:系列產品

如果你的應用是一個產品系列中的一部分——比如反镇,產品同時還有桌面端和網頁版——引導頁可以大大提高用戶體驗固蚤,尤其是當移動應用不具備其他版本的全部功能時。這在復雜的企業(yè)應用中更顯得尤為重要歹茶,因為不同的版本都有其針對的用戶角色夕玩、特定的訪問權限和以及安全限制。

大部分情況下惊豺,網絡版和桌面端會支持所有功能(如創(chuàng)建风秤、查看、編輯和刪除內容)扮叨,而移動應用就相對局限(比如只支持瀏覽)。在這種情況下领迈,簡要介紹移動應用的功能也將幫助現有用戶了解移動端在整個產品系列中扮演的角色彻磁。

使用案例4: 個人信息

如果您的應用程序依賴于用戶的個人信息(如年齡、體重狸捅、性別衷蜓、婚姻狀況),那么可以通過引導頁來收集它們尘喝。通過一步步的引導磁浇,

用戶可以清楚地知道為什么應用需要這些信息。記得確保允許用戶可以隨時更改這些信息 (通常是通過應用中的設置)

Fitbit 告訴用戶為什么需要進行個人信息的采集并且引導用戶提供它們

即使你的應用不適用以上任何案例朽褪,用戶仍可以通過引導頁受益置吓。謹記任何與產品進行交互的用戶至少都需要知道他們能通過這個產品得到些什么。而這些也是你可以在引導頁中呈現的信息缔赠,我將在之后的功能導向引導頁(譯者注:原作者應該是寫錯了衍锚,結合上下文,這里應該說的是“利益導向引導頁”)中詳述嗤堰。

當然戴质,我們的首要責任是設計直觀,易于使用的產品。但是告匠,我們不應該因此而放棄引導頁戈抄,它能給用戶帶來價值并且提供更加令人愉悅的體驗。


該用何種方法后专?

通常來說划鸽,引導頁的設計有以下三種方法:

- 利益導向

- 功能導向

- 漸進式

?我們來逐一看看并且探討一下它們的設計規(guī)范

方法1: 利益導向

?這樣的好處不言自明。通過這種方法行贪,你能讓用戶知道應用能帶來的好處漾稀,讓用戶了解如下的問題:

?我們的應用能做些什么?

用戶如何在生活中使用它建瘫?

這樣使用能給用戶帶來什么價值崭捍?

NYT now通過清晰簡要的描述給用戶展示了它能提供的益處

?應用這個方法,需要考慮到如下原則:

最大化展示應用的三個好處

這個數字并不是一個硬性規(guī)定啰脚,出于給用戶快速預覽的目的殷蛇,三是個安全的數字(不包括標題頁)。這樣橄浓,用戶即能了解該應用也不會因為過多的信息而感到厭煩或是被拖慢使用的節(jié)奏粒梦。

一頁只說一件事

回想一下你聽過的演說中什么樣的信息能讓你印象最深刻。一個幻燈頁面中僅有一個清晰且有重點的信息也許是最易形成沖擊而且最難忘的荸实。這同樣適用于引導頁匀们。

“一頁只說一件事”的規(guī)則有助于用戶關注內容并且分開消化吸收。一次性將所有的內容都展現出來不僅在視覺上有許多干擾准给,更會分散了用戶的注意力泄朴。

?優(yōu)先級,優(yōu)先級露氮,還是優(yōu)先級

?控制住自己想要展示應用中酷炫部分的沖動祖灰。回到用戶數據畔规,提醒自己用戶面臨的問題以及他們的需求局扶。然后,想辦法通過引導頁來告訴用戶我們的應用是如何切實地回應他們的需求叁扫。

?使用一致的詞匯

?Evernote Food三妈,在文案中使用動詞來快速吸引注意力,并傳達其主要益處莫绣。這種方法相當高效并且足夠簡潔沈跨。如果你憋不出幾個高大上的動詞或形容詞,那么簡單的短語或兩個詞也行兔综。只要你能確保它們的一致性饿凛。工整連貫的文案狞玛,無論是在視覺效果還是語言上,都有助于給產品的用戶體驗提供積極作用涧窒。

Evernote Food突出說明了用戶通過應用能得到的實際好處

引導頁先于注冊/登錄

引導頁提供的是應用的概況心肪,應當在用戶注冊或登錄前展示。一旦用戶決定進行登錄纠吴,用戶并不希望被你提供的“益處”所打斷硬鞍。?

保持簡潔

或許你還在糾結引導頁是否有必要。難道它不就只是在重復應用商店(App Store)中的描述嗎戴已?完全不是固该。 App Store中的描述有包含各種信息,甚至有應用的大小糖儡,而引導頁需要簡潔伐坏,正因如此,請專注于重中之重握联。此外桦沉,很多人會跳過應用商店的說明然后去嘗試探索應用。所以金闽,一個簡單的說明能夠幫助用戶很快了解我們的應用纯露。

別學!這是反面教材

Readability是個超贊的工具類應用代芜,不幸的是埠褪,平臺間的一致性并沒有做好。它的設計失誤在安卓版的引導頁中尤為明顯:

用戶一共有7頁的內容需要閱讀消化挤庇。

有些頁面中的說明文字太長组橄。例如,關于共享的那一頁完全可以簡化罚随,顯示分享的內容以及社交網絡的圖標。

?其中有一個頁面在鼓勵用戶安裝Firefox(火狐瀏覽器)的插件羽资,這似乎放錯地方了淘菩,而且之前的一頁還提到了“Readability是個網頁和移動應用⊥郎”移動應用的引導頁不應該成為系列產品的營銷手段潮改,應該關注在移動平臺相關的內容上。

避免出現過多頁面腹暖,并且保持內容與平臺的相關性
?

方法2: 功能導向

?另一種選擇是放棄對益處的展示汇在,把重點放在應用的關鍵功能上。這有時也被稱為“指引標記“脏答。使用這種方法糕殉,你需要給用戶展示:

什么是關鍵的功能(例如亩鬼,如何開始或什么是最常見的操作)

何時使用(例如,查看搜索結果)

如何使用(例如阿蝶,點擊或左劃)

Carousel 一上來就給用戶介紹了關鍵功能

使用功能導向來設計引導頁雳锋,需要謹記:

顯而易見的無需說明

從互聯網興起之初,無論時桌面程序還是網頁亦或是移動應用中羡洁,“X”始終代表關閉玷过,退出或取消。所以筑煮,除非該圖標在你的應用中有不同用途辛蚊,在引導頁中給予說明沒有任何意義。

Adobe Kuler給用戶展示顯而易見的東西

分成三頁真仲,每頁介紹一個功能

如果你想用幻燈片的方式來介紹應用的功能袋马,可以用上文我在“利益導向”章節(jié)中提到的原則:最多三張圖(不包括標題頁),每張圖介紹一個功能袒餐。

幫助用戶入門

?如果你的應用打開時默認是個空頁面的飞蛹,你可以圍繞這點來設計引導頁。不要讓你的用戶第一次打開應用就面對一個空白頁灸眼,你可以給用戶一個快速上手的指南卧檐,這樣他們就不會疑惑——哪怕只是一秒鐘——這個空白頁到底是個問題還是功能需要。

Spendee 通過告訴用戶如何開始使用以打消他們的疑慮

引導頁先于注冊/登錄

理由同上文“利益導向”章節(jié)的說明

別學焰宣!這是反面教材

攝影應用500px有著令人驚艷的內容和豐富的功能霉囚,一直被用戶稱道。 然而匕积,iPhone版的引導頁卻有許多不得體的地方:

詳細展示了應用的導航欄以及具體功能盈罐,告訴用戶他們可以通過導航欄來使用,但是這是件顯而易見的事情闪唆。

?一些頁面展示了如喜歡盅粪,收藏和分享按鈕。所有這三個功能都是由那些常用的圖標來表示悄蕾,所以通過引導頁來解釋是不必要的票顾。即使我們假設,有一部分使用500px的用戶并不了解這些圖標帆调。那么奠骄,基于使用情景的漸進式引導可以更好的為用戶服務(例如,當用戶正在瀏覽照片時番刊,他們可能用得到“喜歡”)含鳞。

?其中一頁展示了“流”的概念,即時間軸芹务,用于展示用戶關注的人的動向蝉绷。因為用戶只有在關注了一些好友以后鸭廷,時間軸才能讓用戶獲益,那么在用戶至少關注一人時以漸進式的引導來介紹會更好潜必。

500px其實可以盡量避免在單頁中介紹過多功能靴姿,可以留到用戶遇到時再介紹。

方法3:漸進式

通常磁滚,用戶都是通過實踐來學習的佛吓。這或許也解釋了漸進式引導盛行的原因,漸進式的引導就是一場真實的演練垂攘,在用戶使用的過程中給他們展示需要的信息维雇。例如,當用戶在儀表盤的界面中只會看到儀表盤有關的信息晒他;而當他們查看搜索結果時吱型,也只會看到搜索結果相關的功能。

Feedly隨著用戶的使用展示相應的提示陨仅。

使用漸進式引導你需要了解以下幾點:

簡化復雜流程

如果你的應用有一個相當復雜的工作流程或是用于處理復雜任務(如財務方面的功能)津滞,那么漸進式引導是一個不錯的選擇。你只需要在流程中合適的時機提供用戶相應的信息即可灼伤,這樣用戶也有時間來慢慢消化触徐。

用于隱藏功能

?在開發(fā)移動應用的過程中,我們一直都很關注于如何更有效地利用小屏幕狐赡,這有時需要隱藏一些菜單和功能撞鹉,只有通過例如一個雙擊或長按才能看到。在這種情況下颖侄,可以使用引導來讓用戶知道這些隱藏功能所在鸟雏。

?以Pocket為例,如下圖所示览祖,閱讀列表中的每一項都可以進行一些功能的操作孝鹊,但是用戶需要用左滑的手勢才能看到。由于用戶需要手動添加內容到閱讀列表展蒂,一個很好的處理方法就是等到用戶至少添加了一個項目時又活,馬上指出,通過左滑手勢可以調出這些隱藏的功能玄货。

Pocket可以通過漸進式引導用戶使用隱藏的功能

手勢類應用的理想選擇

如果你的應用完全是手勢驅動的,那么這種實戰(zhàn)式的引導式是最好的悼泌。讓用戶隨著使用的過程進行操作的引導松捉,通過這種方式給用戶介紹功能,會更容易讓用戶記住。

Solar展示了每個手勢的功用调塌,讓用戶邊做邊學启搂。

?確保引導一直都在

?對于那些手勢驅動的應用投储,提供了一個手勢和它們對應的操作的列表是十分必要的挎扰,或者可以放在設置中乐尊。

?記住霉旗,你提供的手勢越多澄步,用戶必須記住得就越多械媒。并且用戶在設備上的安裝的手勢驅動類應用越多目锭,他們就可能遇到更多的困惑,因為他們可能需要去記住不同應用中雙擊手勢的區(qū)別纷捞。確保這些引導信息可以隨時被調出痢虹,可以做為一定程度上的彌補。

Beats Music提供永久存在并且能夠快速訪問到的手勢列表主儡。

什么不能做

由于漸進式引導是用戶探索應用的輔助奖唯,最大的風險在于持續(xù)不斷的提示可能會毀掉一個原本美好的體驗。因此糜值,小心使用這種方法丰捷,確保只顯示給用戶最有用的信息。

此外寂汇,避免在每一個界面中都突出一些功能病往。給用戶一些喘息的空間,讓他們從探索中獲得愉悅感健无。這不應該是應用里糟糕體驗的替代品荣恐,而是提升用戶體驗的方法。

替代方案

以上介紹的方法都是時下最流行的累贤。但是叠穆,你也可以有其他不同的選擇!

替代方案1:混合使用

混合使用有時也是可行的臼膏,如同Flink展示的:

Flink結合使用了引導頁設計的方法硼被。

替代方案2:視頻

?有一些應用使用了視頻進行引導,這種方法是值得研究思考的渗磅。視頻可以有不同的側重嚷硫,有些視頻更為實用,類似于新手教程始鱼,而有些則基本就是廣告仔掸。如同網站上的視頻,自動播放會對用戶造成干擾医清。而且用戶使用移動設備很可能處在公共空間起暮,聲音播放就顯得不那么合適了。

Fifty-Three用視聽效果來展示應用会烙。

替代方案3:試用數據

提供了一些試用數據供用戶嘗試也是值得一試的方法负懦。尤其對于那些處理敏感數據筒捺,例如財務或是人力資源數據的應用,顯得特別有用纸厉。如果應用預先設置了試用數據時系吭,用戶會卸下擔憂去嘗試、犯錯以及學習如何使用這個應用颗品,為他們錄入真實數據做更好的準備肯尺。

Xero為用戶提供了試用數據,幫助他們了解應用抛猫。

結論

希望本文中的指南和案例對你的引導頁設計提供幫助蟆盹,然而,永恒不變的話題——用戶才是一切的關鍵闺金。因此逾滥,當你評估要使用哪種方法時,請重新審視一下你的人物角色败匹、用戶場景以及任何用戶數據寨昙,無論是通過分析得到的還是市場研究得到的。

如果你還是不確定該用哪種方法掀亩,那么借助用戶測試舔哪,測試一個或多個方法,然后分析一下用戶的反饋槽棍,看看什么可行捉蚤,什么不可行。沒有任何解決方案是通用的炼七,所以缆巧,請一如既往地善用數據來做出最明智的決定吧。

-----------------我是分割線----------------

本文為原創(chuàng)譯文豌拙,如需轉載請聯系作者陕悬,注明出處微信公眾號“開卷有譯”或簡書原文地址。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末按傅,一起剝皮案震驚了整個濱河市捉超,隨后出現的幾起案子,更是在濱河造成了極大的恐慌唯绍,老刑警劉巖拼岳,帶你破解...
    沈念sama閱讀 221,635評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現場離奇詭異况芒,居然都是意外死亡惜纸,警方通過查閱死者的電腦和手機,發(fā)現死者居然都...
    沈念sama閱讀 94,543評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來堪簿,“玉大人,你說我怎么就攤上這事皮壁⊥指” “怎么了?”我有些...
    開封第一講書人閱讀 168,083評論 0 360
  • 文/不壞的土叔 我叫張陵蛾魄,是天一觀的道長虑瀑。 經常有香客問我,道長滴须,這世上最難降的妖魔是什么舌狗? 我笑而不...
    開封第一講書人閱讀 59,640評論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮扔水,結果婚禮上痛侍,老公的妹妹穿的比我還像新娘。我一直安慰自己魔市,他們只是感情好主届,可當我...
    茶點故事閱讀 68,640評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著待德,像睡著了一般君丁。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上将宪,一...
    開封第一講書人閱讀 52,262評論 1 308
  • 那天绘闷,我揣著相機與錄音,去河邊找鬼较坛。 笑死印蔗,一個胖子當著我的面吹牛,可吹牛的內容都是我干的燎潮。 我是一名探鬼主播喻鳄,決...
    沈念sama閱讀 40,833評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼确封!你這毒婦竟也來了除呵?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,736評論 0 276
  • 序言:老撾萬榮一對情侶失蹤爪喘,失蹤者是張志新(化名)和其女友劉穎颜曾,沒想到半個月后,有當地人在樹林里發(fā)現了一具尸體秉剑,經...
    沈念sama閱讀 46,280評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡泛豪,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,369評論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片诡曙。...
    茶點故事閱讀 40,503評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡臀叙,死狀恐怖,靈堂內的尸體忽然破棺而出价卤,到底是詐尸還是另有隱情劝萤,我是刑警寧澤,帶...
    沈念sama閱讀 36,185評論 5 350
  • 正文 年R本政府宣布慎璧,位于F島的核電站床嫌,受9級特大地震影響,放射性物質發(fā)生泄漏胸私。R本人自食惡果不足惜厌处,卻給世界環(huán)境...
    茶點故事閱讀 41,870評論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望岁疼。 院中可真熱鬧阔涉,春花似錦、人聲如沸捷绒。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,340評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽疙驾。三九已至凶伙,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間它碎,已是汗流浹背函荣。 一陣腳步聲響...
    開封第一講書人閱讀 33,460評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留扳肛,地道東北人傻挂。 一個月前我還...
    沈念sama閱讀 48,909評論 3 376
  • 正文 我出身青樓,卻偏偏與公主長得像挖息,于是被迫代替她去往敵國和親金拒。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,512評論 2 359

推薦閱讀更多精彩內容