如何讓App的新手引導變得更好？

簡體傳統

作者：BESD設計實驗室，博客致力于打造一個學術研究型的用戶體驗博客。翻譯并投稿早讀課。

鑒于這些往往是用戶進行交互的第一組屏幕,他們還設置了用戶的應用程序的預期。因此 ,在其中起著至關重要的是那些參與開發APP的人——產品經理、設計師、開發人員——會花時間評估APP的引導頁面是否必要,如果是必要的，那么就要很好的實現它。

在這篇文章中,我們將提供一些好的建議以及資源，常見的設計方法來幫助你提升新手引導頁面的用戶體驗。,

•是否要提供引導頁面
•近年來,我們看到很多討論引導頁面在移動應用的有效性。對引導頁面一個流行的討論是,應用程序是否需要？是否存在根本性的缺陷？是否具備簡單和用戶友好性的基本元素？

數字設計有很多規則和實例，這些東西都是很好的。這些規則保證了設計人員和開發人員在開發產品時無需自己摸索方向。更重要的是,他們保證了用戶在使用一款新的APP時避免了不必要的壓力;相反,他們可以放心知道編輯功能將由一個鉛筆圖標表示,“大拇指”圖標則表示“點贊“。所以，規則對設計師有很多的指導作用。

但事實是,每款APP都是獨特的,如何去使用，以及和人使用，這些差異在一定情況下使指導造就了可靠，務實，用戶友好的特性，讓我們一起來觀察一下案例。

案例1：交互模糊

如果你開發的APP交互方式與大部分用戶之前接觸的交互方式有所不同—尤其是手勢操作，那指導頁面就起著重要的作用。手勢操作類型的APP，目前仍處于實驗和探索階段，比如，開發者需要指導用戶如何與App進行交互，清楚地展示每個手勢及其相應的功能。例如，時鐘軟件Timely，在屏幕指定的位置可以通過上下滑動來增減時間。

Timely通過預先告訴用戶手勢來達到預期結果

案例2：空白陳述

如果一款APP沒有多余的文字陳述，則會讓用戶通過一個或多個步驟用文字去填充它，指導頁面也適用這種方式。盡管引導過程僅僅是一個步驟，卻能讓用戶對他們所做的事感到放心，不用担心點錯東西。

Feedly向用戶展示了如何去檢索第一部分內容

案例3：系列產品

如果你的APP是系列產品，也就是說有桌面端和網頁端，那么引導頁將能對提升用戶的體驗起到非常重要的作用，尤其是你的手機端APP沒有其他版本的全部功能。這點在復雜的商業APP中尤為重要，許多這樣的APP扮演者眾多用戶角色，包括每一個特定的訪問權限和安全機制。

通常網頁端和桌面端都支持全部的功能，例如如創建，查看，編輯和刪除內容，然而移動端將限制這些功能，只能進行查看。在許多案例中，一個簡單的陳述將可以幫助用戶更好地使用他們的APP。

案例4：個人信息

如果你的APP依賴于個人信息，如年齡，性別，體重，婚姻狀況等，那么收集和儲存這些信息在引導頁上。一步一步地引導用戶目的是讓他們可以清晰地了解你所要展示的內容，并且確保用戶可以隨時改變他們的個人信息（通常是在設置頁面）

Fitbit告訴用戶個人信息的重要性

盡管你的APP沒有符合以上案例，你的用戶通過引導頁的指導仍然可以適應。記住一點，用戶與產品的互動至少要讓他們明白產品的好處。你可以將這些信息在引導頁上展示，后面我們將會討論功能引導頁的作用。

當然，我們的職責就是設計出直觀，易于使用的產品。然而我們不應該忽略引導頁對用戶所提供的價值，這將使體驗變得更有趣。

使用那種引導方式？
這是最常見的三種方式：
1. 優勢指向引導
2. 功能指向引導
3. 逐步引導

我們一起來看看每一種方式使用時的一些法則

方式1：優勢指向引導

這不言自明，將APP的最好的地方展現給用戶，依據以下一種或多種方式與用戶進行交流：
1. 這款APP的用途是什么？
2. 用戶如何將它們整合到生活中？
3. 用戶為什么要將它們整合到生活中？

Evernote Food清晰地向用戶展現使用這款APP的好處

當使用這種方式時需考慮以下幾種準則：

1.顯示三條信息為最合適
這個數字并不是基于科學理論，而是因為重點是要讓用戶快速了解這款APP，“三條”最為合適（不包括屏幕標題）。這種方式可以讓用戶對這款APP快速上手而不會因為信息的繁雜而感到疲累。

2.應用“一個滑動手勢，一個概念”的規則。

回想一下你所保留的大部分所要陳述的信息，一個清晰的滑動手勢，集中信息可能更讓人記得牢。同樣是應用引導頁面。“一個滑動手勢，一個概念”規則將有助于用戶集中和消化信息的每個細節。向用戶傳達太多的消息將會增添他們對你所要傳達的重要信息的視覺疲憊。

劃分優先級

不要過分去炫耀你的APP有多酷，應該關注用戶的數據和提醒自己用戶的真正需求和所有可能要面臨的問題。然后，尋找可以解決的方法通過引導回答他們。

語言一致性

Evernote Food,前面有提過，使用動詞來達到快速吸引和交流的效果。這種方法是有效的，高效和簡潔。如果你能濃縮成幾個高效能的動詞或者形容詞，那么一兩個句子就足夠了。必須堅持用這種方法。一句有效、一致的表達，無論實在視覺上還是專業術語上都能吸引用戶和提高用戶的體驗。

NYT Now使用簡潔，明了的陳述展現它的好處和價值

登陸,注冊前先引導

因為引導頁面意味著對整款APP的全局觀覽，所以把它放在注冊和訂閱服務頁面的前面。一旦他們決定訂閱，那用戶已經做好體驗這款APP的準備，提醒他們這款APP的好處就變得無關緊要了。

保持簡潔

也許你會疑惑，引導頁面是否真的必要。究竟是否應該在應用商店里提及這些？無需這樣做，應用商店的描述只是APP的類型，大小。而引導頁面必須簡短，因此，焦點必須是重要的內容。除此之外，很多人跳過應用商店的描述，直接去下載體驗。所以，在用戶首次打開APP時，一個簡單的說明能幫助用戶整體上了解APP的功能。

注意事項：

Readability 是一款很實用的APP，遺憾的是有很多明顯的問題，這點在Android平臺上尤為突出：

1.不一致性。
2.用戶必須去消化多達七個幻燈片所展示的信息。
3.對于一些信息較長的幻燈片，例如，關于介紹分享功能的幻燈片可以用一個簡單的分享圖標取代文字介紹。
4. 一個鼓勵用戶去安裝Firefox插件的幻燈片是多余的，因為這只是移動端。另外，以前的幻燈片也已經告訴用戶，“Readability支持web端和移動端。”引導頁面在移動端上不應該是一個包羅萬象全套的營銷產品，而是應該與移動平臺相關聯。

避免過多的幻燈片介紹，保持與內容與平臺相關

方式2：功能性引導

另一個選擇就是放棄優勢指導，集中選擇APP重要的功能進行引導。這類似于coach marks，如果你采用這種方式，請看一下幾點：

1. 什么是重要功能？（例如，如何去啟動或最常見的行為）
2. 什么時候去使用這些功能（例如，當你查看搜索結果時）
3. 如何去使用這些功能（例如，雙擊或向左拖動）

Carousel 著重介紹了這些主要功能

不要解釋被廣為人知的概念

自從互聯網普及開始，從桌面應用到網頁應用再到移動APP，“×”這個符號一貫代表著關閉，退出或取消的意思。所以，除非這個符號在你的APP上有特殊的含義，否則不要向用戶說明它的其他意義。

Adobe Kuler沒有展示其他的含義

三張幻燈片，每張各展示一個主要功能

如果你在每張幻燈片放映的時候展示一個主要功能，那么最大三張幻燈片，每一張展示一個主要功能。

幫助用戶開啟APP之旅

如果的的APP默認是空的，針對于這一點在你的引導頁面上。不要讓用戶一打開APP就面對一個空白的頁面。包括通過一條便簽引導用戶入手，用戶不想這樣，即便是一秒鐘，他們都會認為這是一個Bug。

Spendee通過告訴用戶如何入手使用戶感到安心

引導頁面放于登陸或注冊頁面之前

與最后一種方式一樣，在用戶進行注冊或登陸之前進行引導。

不應該做的事：

照片展示類APP，500px擁有一些驚人的內容和豐富的功能。然而，iphone 平臺上的APP在引導上則犯了一些錯誤：

1. 導航欄及其功能展示。告訴用戶他們可以通過導航欄以下的區域進行導航。
2. 一些幻燈片展示的按鈕，如“鏈接”，“喜愛”，“分享”。這三個功能通過按鈕圖標來展示，這些圖標通常都能讓人聯想到它的功能。所以在引導頁面解釋它們的用處完全是多余的。讓我們來猜想一下，對于500px一部分目標觀眾對這些圖標不熟悉。在這個案例中，逐步地通過在context中展現APP的功能引導用戶以提供更好的服務（例如當用戶在查看圖片是，他們下一步可能會點“贊”）。
3. 一張幻燈片展示的“流程”，一個記錄用戶活動變動的時間軸。一旦你跟隨別人就能從這些“流程”中獲益。
通過告訴用戶這種特性來引導他們，至少有些人能從中得到幫助。