怎麼設計行動裝置 App的新手引導更好？-20150108早讀課

標籤：

如今，當使用者首次開啟App時彈出引導頁面已經是很常見的事。引導頁面是用於協助使用者更好地使用App。

鑒於這些往往是使用者進行互動的第一組螢幕,他們還設定了使用者的應用程式的預期。因此 ,在其中起著至關重要的是那些參與開發APP的人——產品經理、設計師、開發人員——會花時間評估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. 一張投影片展示的“流程”，一個記錄使用者活動變動的時間軸。一旦你跟隨別人就能從這些“流程”中獲益。

通過告訴使用者這種特性來引導他們，至少有些人能從中得到協助。

500px避免在單張投影片上展示過多的功能，保證資訊的簡潔，重要

方式3：逐步引導

總的來說，人們學習的最好方式就是實踐。這點在逐步引導中可以得到驗證，一張真實的引導頁面當使用者使用APP時起到將資訊展示給使用者的作用。例如，當使用者在儀錶盤介面時，他們看到的僅僅是與儀錶盤相關的資訊；當使用者查看搜尋結果時，僅僅是相關的搜尋結果顯示在他們眼前。

Feedly 當使用者首次開啟APP時會有一些提示

當你在逐步引導使用者時記住以下幾點：

在複雜的工作流程中使用，如果你的APP工作流程相當複雜或者是處理複雜的事物（如財政），逐步引導是一個很好的選擇。只有當資訊恰當並且合乎邏輯時，使用者才能更好地消化它們。

在某些功能被隱藏的情況下使用

在開發移動APP時，我們總是關注在小螢幕上高效率的功能，這時就不得不將菜單和一些功能隱藏。我們只有通過語音，雙擊或長按調出這些功能。在這種情況下，我們就要引導使用者使用這些隱藏功能。

例如，以Pocket為例，如下所示。可供使用的功能都在閱讀清單裡，使用者只有通過向左拖動才能看到這些功能選項。因為使用者與APP的內容相關聯，使用者必須至少在閱讀清單裡添加一項功能才能進行點擊，這時APP會提示使用者向左拖動來顯示這些隱藏的功能。

Pocket可以通過提示隱藏功能逐步引導使用者

最理想的是用手勢操作APP，如果你的APP嚴格依賴於手勢操作，那麼這種實踐的方式是最好的。讓使用者隨著功能的介紹而採取相應的手勢動作。

Solar 採取每一個手勢提示，讓使用者通過實踐掌握相應功能

引導連續性

對於手勢操作APP，為一系列手勢在設定介面中提供一種捷徑和相應的動作，文字提示。

記住，你的APP的手勢越多，使用者要記住的手勢也就越多。使用者手機上裝的手勢操作APP也多，他們也將也困惑。使用者不得不去記住每款APP之間雙擊的意義。這時就得做一些標註讓資訊更易理解，讓使用者感到更加地舒適。

Beats Music為一系列的手勢提供永久的快速存取的方式

注意事項:

因為逐步引導是對使用者使用APP的輔助，最大的風險就是使用者在使用APP時不斷地提示使用者，這將破壞使用者更美好地體驗APP。所以，要以溫和，人性的態度應用這種方式向使用者展示有用的資訊。
除此之外，在每張引導頁面中亮度不宜過高，給使用者更多呼吸的空間，目的是讓他們能更美好地體驗你的APP。引導不是掩飾糟糕的設計，而是輔助使用者更好地體驗。

替代方案

以上提到的方式都是最常用，最流行的。但是你也可以新創自己的方法，更好地引導使用者!

選擇1：混合

混合方法—-混合一種，兩種或三種方法。這種方法有時也可行，例如Flink所展示的：

Flink結合的引導方式

選擇2：視頻

視頻引導也常用於一些APP，這種方法也值得考慮。這是一種不同的方向，應用一些視頻更加實用，看起來像一個教程，然而也有一些純粹是廣告。與網頁上的視頻相比，這些視頻將自動地播放，無意識地侵入使用者的視覺。當使用者在公用場所時，來自手機裝置的爆炸性聲音顯然是不和諧的，不恰當的。

Fifty-Three使用聲音和視頻的力量來展示他們的APP–Paper

選擇3：樣本資料

為使用者提供一些樣本資料也是值得做的。特別是APP要處理的敏感性資料，例如財政和人類資源資料。如果APP載入這些樣本資料，使用者將能更舒服地進行實際操作，學習如何使用APP，並且能為更好地輸入真實資料做準備。

提供一些樣本資料給使用者，供參考學習APP的應用

結論:

文章中的指導方針和執行個體將對你的引導項目有所協助，然而，一如既往，使用者是一切的核心。所以，無論你運用那種方式，請記住，重新審視你自己的角色，使用者使用情境和你所持有的使用者資料，是否經過市場調研和分析。

如果你仍不清楚用那種方式，可以在使用者中用一兩中方式進行測試並且分析反饋，看那種可行那種不可行。沒有哪一種方法放之四海而皆準。所以，一如既往，用資料來做最理智的決定。

 

怎麼設計行動裝置 App的新手引導更好？-20150108早讀課