如何設計移動應用引導頁

發表於2015-09-29

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

引導頁往往是與使用者進行互動的第一組介面,於此同時,這些介面還將影響使用者對應用的期望。因此,對於參與到產品研發的團隊成員——產品經理、設計師以及開發人員來說,花些時間好好評估一下這些引導頁是否必要就顯得至關重要了,一旦需要,那就做到最好 。

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

是否需要引導頁?

近年來,關於移動應用引導頁實用性的討論層出不窮。於此同時,也流行著另一種反對的聲音:如果一個應用需要引導頁,那麼它本身就是一個缺陷,因為這說明了該應用缺乏簡單和使用者友好的基本要素。雖然聽起來很有邏輯,但這個結論畢竟過於籠統。

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

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

使用案例1: 非常規互動

如果應用所支援的互動行為並不是大部分使用者能夠輕易通過常規方式找到的——尤其是主打手勢互動的應用——那麼引導頁是必不可少的。手勢驅動的應用程式目前仍處於試驗和探索階段,因此,開發人員需要指引使用者如何用這些手勢進行互動,清晰呈現每一個手勢以及它們相對應的功能。

例如,鬧鐘應用Timely,就給使用者詳細地指出了點選螢幕中的具體區域會使鬧鐘的時間增加或減少5分鐘。

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

使用案例2: 空頁面

那些預設為空頁面,並且需要使用者通過一個或多個步驟才能填充內容的應用,也是非常適合使用引導頁的。即便引導頁只有一個步驟,也能讓使用者打消疑慮,知道自己的操作是正確的。

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

使用例項3:系列產品

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

大部分情況下,網路版和桌面端會支援所有功能(如建立、檢視、編輯和刪除內容),而移動應用就相對侷限(比如只支援瀏覽)。在這種情況下,簡要介紹移動應用的功能也將幫助現有使用者瞭解移動端在整個產品系列中扮演的角色。

使用案例4: 個人資訊

如果您的應用程式依賴於使用者的個人資訊(如年齡、體重、性別、婚姻狀況),那麼可以通過引導頁來收集它們。通過一步步的引導,

使用者可以清楚地知道為什麼應用需要這些資訊。記得確保允許使用者可以隨時更改這些資訊 (通常是通過應用中的設定)

Fitbit 告訴使用者為什麼需要進行個人資訊的採集並且引導使用者提供它們

即使你的應用不適用以上任何案例,使用者仍可以通過引導頁受益。謹記任何與產品進行互動的使用者至少都需要知道他們能通過這個產品得到些什麼。而這些也是你可以在引導頁中呈現的資訊,我將在之後的功能導向引導頁(譯者注:原作者應該是寫錯了,結合上下文,這裡應該說的是“利益導向引導頁”)中詳述。

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

該用何種方法?

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

- 利益導向

- 功能導向

- 漸進式

我們來逐一看看並且探討一下它們的設計規範

方法1: 利益導向

這樣的好處不言自明。通過這種方法,你能讓使用者知道應用能帶來的好處,讓使用者瞭解如下的問題:

我們的應用能做些什麼?

使用者如何在生活中使用它?

這樣使用能給使用者帶來什麼價值?

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

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

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

這個數字並不是一個硬性規定,出於給使用者快速預覽的目的,三是個安全的數字(不包括標題頁)。這樣,使用者即能瞭解該應用也不會因為過多的資訊而感到厭煩或是被拖慢使用的節奏。

一頁只說一件事

回想一下你聽過的演說中什麼樣的資訊能讓你印象最深刻。一個幻燈頁面中僅有一個清晰且有重點的資訊也許是最易形成衝擊而且最難忘的。這同樣適用於引導頁。

“一頁只說一件事”的規則有助於使用者關注內容並且分開消化吸收。一次性將所有的內容都展現出來不僅在視覺上有許多干擾,更會分散了使用者的注意力。

 優先順序,優先順序,還是優先順序

控制住自己想要展示應用中酷炫部分的衝動。回到使用者資料,提醒自己使用者面臨的問題以及他們的需求。然後,想辦法通過引導頁來告訴使用者我們的應用是如何切實地迴應他們的需求。

使用一致的詞彙

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

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

引導頁先於註冊/登入

引導頁提供的是應用的概況,應當在使用者註冊或登入前展示。一旦使用者決定進行登入,使用者並不希望被你提供的“益處”所打斷。

保持簡潔

或許你還在糾結引導頁是否有必要。難道它不就只是在重複應用商店(App Store)中的描述嗎?完全不是。 App Store中的描述有包含各種資訊,甚至有應用的大小,而引導頁需要簡潔,正因如此,請專注於重中之重。此外,很多人會跳過應用商店的說明然後去嘗試探索應用。所以,一個簡單的說明能夠幫助使用者很快了解我們的應用。

別學!這是反面教材

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

使用者一共有7頁的內容需要閱讀消化。

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

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

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

方法2: 功能導向

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

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

何時使用(例如,檢視搜尋結果)

如何使用(例如,點選或左劃)

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

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

顯而易見的無需說明

從網際網路興起之初,無論時桌面程式還是網頁亦或是移動應用中,“X”始終代表關閉,退出或取消。所以,除非該圖示在你的應用中有不同用途,在引導頁中給予說明沒有任何意義。

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

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

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

幫助使用者入門

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

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

引導頁先於註冊/登入

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

別學!這是反面教材

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

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

一些頁面展示瞭如喜歡,收藏和分享按鈕。所有這三個功能都是由那些常用的圖示來表示,所以通過引導頁來解釋是不必要的。即使我們假設,有一部分使用500px的使用者並不瞭解這些圖示。那麼,基於使用情景的漸進式引導可以更好的為使用者服務(例如,當使用者正在瀏覽照片時,他們可能用得到“喜歡”)。

其中一頁展示了“流”的概念,即時間軸,用於展示使用者關注的人的動向。因為使用者只有在關注了一些好友以後,時間軸才能讓使用者獲益,那麼在使用者至少關注一人時以漸進式的引導來介紹會更好。

500px其實可以儘量避免在單頁中介紹過多功能,可以留到使用者遇到時再介紹。

方法3:漸進式

通常,使用者都是通過實踐來學習的。這或許也解釋了漸進式引導盛行的原因,漸進式的引導就是一場真實的演練,在使用者使用的過程中給他們展示需要的資訊。例如,當使用者在儀表盤的介面中只會看到儀表盤有關的資訊;而當他們檢視搜尋結果時,也只會看到搜尋結果相關的功能。

Feedly隨著使用者的使用展示相應的提示。

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

簡化複雜流程

如果你的應用有一個相當複雜的工作流程或是用於處理複雜任務(如財務方面的功能),那麼漸進式引導是一個不錯的選擇。你只需要在流程中合適的時機提供使用者相應的資訊即可,這樣使用者也有時間來慢慢消化。

用於隱藏功能

在開發移動應用的過程中,我們一直都很關注於如何更有效地利用小螢幕,這有時需要隱藏一些選單和功能,只有通過例如一個雙擊或長按才能看到。在這種情況下,可以使用引導來讓使用者知道這些隱藏功能所在。

以Pocket為例,如下圖所示,閱讀列表中的每一項都可以進行一些功能的操作,但是使用者需要用左滑的手勢才能看到。由於使用者需要手動新增內容到閱讀列表,一個很好的處理方法就是等到使用者至少新增了一個專案時,馬上指出,通過左滑手勢可以調出這些隱藏的功能。

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

手勢類應用的理想選擇

如果你的應用完全是手勢驅動的,那麼這種實戰式的引導式是最好的。讓使用者隨著使用的過程進行操作的引導,通過這種方式給使用者介紹功能,會更容易讓使用者記住。

Solar展示了每個手勢的功用,讓使用者邊做邊學。

 確保引導一直都在

對於那些手勢驅動的應用,提供了一個手勢和它們對應的操作的列表是十分必要的,或者可以放在設定中。

記住,你提供的手勢越多,使用者必須記住得就越多。並且使用者在裝置上的安裝的手勢驅動類應用越多,他們就可能遇到更多的困惑,因為他們可能需要去記住不同應用中雙擊手勢的區別。確保這些引導資訊可以隨時被調出,可以做為一定程度上的彌補。

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

什麼不能做

由於漸進式引導是使用者探索應用的輔助,最大的風險在於持續不斷的提示可能會毀掉一個原本美好的體驗。因此,小心使用這種方法,確保只顯示給使用者最有用的資訊。

此外,避免在每一個介面中都突出一些功能。給使用者一些喘息的空間,讓他們從探索中獲得愉悅感。這不應該是應用裡糟糕體驗的替代品,而是提升使用者體驗的方法。

替代方案

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

替代方案1:混合使用

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

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

替代方案2:視訊

有一些應用使用了視訊進行引導,這種方法是值得研究思考的。視訊可以有不同的側重,有些視訊更為實用,類似於新手教程,而有些則基本就是廣告。如同網站上的視訊,自動播放會對使用者造成干擾。而且使用者使用移動裝置很可能處在公共空間,聲音播放就顯得不那麼合適了。

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

替代方案3:試用資料

提供了一些試用資料供使用者嘗試也是值得一試的方法。尤其對於那些處理敏感資料,例如財務或是人力資源資料的應用,顯得特別有用。如果應用預先設定了試用資料時,使用者會卸下擔憂去嘗試、犯錯以及學習如何使用這個應用,為他們錄入真實資料做更好的準備。

Xero為使用者提供了試用資料,幫助他們瞭解應用。

相關文章