設(shè)計(jì)趨勢(shì)！2015移動(dòng)設(shè)計(jì)趨勢(shì)，怎么設(shè)計(jì)移動(dòng)應(yīng)用的新手引導(dǎo)更好？(4)

　　鑒于這些往往是用戶進(jìn)行交互的第一組屏幕,他們還設(shè)置了用戶的應(yīng)用程序的預(yù)期。因此 ,在其中起著至關(guān)重要的是那些參與開發(fā)APP的人——產(chǎn)品經(jīng)理、設(shè)計(jì)師、開發(fā)人員——會(huì)花時(shí)間評(píng)估APP的引導(dǎo)頁面是否必要,如果是必要的，那么就要很好的實(shí)現(xiàn)它。
　　在這篇文章中,我們將提供一些好的建議以及資源，常見的設(shè)計(jì)方法來幫助你提升新手引導(dǎo)頁面的用戶體驗(yàn)。
　　?是否要提供引導(dǎo)頁面
　　?近年來,我們看到很多討論引導(dǎo)頁面在移動(dòng)應(yīng)用的有效性。對(duì)引導(dǎo)頁面一個(gè)流行的討論是,應(yīng)用程序是否需要？是否存在根本性的缺陷？是否具備簡(jiǎn)單和用戶友好性的基本元素？
　　數(shù)字設(shè)計(jì)有很多規(guī)則和實(shí)例，這些東西都是很好的。這些規(guī)則保證了設(shè)計(jì)人員和開發(fā)人員在開發(fā)產(chǎn)品時(shí)無需自己摸索方向。更重要的是,他們保證了用戶在使用一款新的APP時(shí)避免了不必要的壓力;相反,他們可以放心知道編輯功能將由一個(gè)鉛筆圖標(biāo)表示,“大拇指”圖標(biāo)則表示“點(diǎn)贊“。所以，規(guī)則對(duì)設(shè)計(jì)師有很多的指導(dǎo)作用。
　　但事實(shí)是,每款A(yù)PP都是獨(dú)特的,如何去使用，以及和人使用，這些差異在一定情況下使指導(dǎo)造就了可靠，務(wù)實(shí)，用戶友好的特性，讓我們一起來觀察一下案例。

案例1：交互模糊

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

 

Timely通過預(yù)先告訴用戶手勢(shì)來達(dá)到預(yù)期結(jié)果

 

案例2：空白陳述

　　如果一款A(yù)PP沒有多余的文字陳述，則會(huì)讓用戶通過一個(gè)或多個(gè)步驟用文字去填充它，指導(dǎo)頁面也適用這種方式。盡管引導(dǎo)過程僅僅是一個(gè)步驟，卻能讓用戶對(duì)他們所做的事感到放心，不用擔(dān)心點(diǎn)錯(cuò)東西。

Feedly向用戶展示了如何去檢索第一部分內(nèi)容

 

案例3：系列產(chǎn)品

　　如果你的APP是系列產(chǎn)品，也就是說有桌面端和網(wǎng)頁端，那么引導(dǎo)頁將能對(duì)提升用戶的體驗(yàn)起到非常重要的作用，尤其是你的手機(jī)端APP沒有其他版本的全部功能。這點(diǎn)在復(fù)雜的商業(yè)APP中尤為重要，許多這樣的APP扮演者眾多用戶角色，包括每一個(gè)特定的訪問權(quán)限和安全機(jī)制。
通常網(wǎng)頁端和桌面端都支持全部的功能，例如如創(chuàng)建，查看，編輯和刪除內(nèi)容，然而移動(dòng)端將限制這些功能，只能進(jìn)行查看。在許多案例中，一個(gè)簡(jiǎn)單的陳述將可以幫助用戶更好地使用他們的APP。

 

案例4：個(gè)人信息

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

Fitbit告訴用戶個(gè)人信息的重要性

 

　　盡管你的APP沒有符合以上案例，你的用戶通過引導(dǎo)頁的指導(dǎo)仍然可以適應(yīng)。記住一點(diǎn)，用戶與產(chǎn)品的互動(dòng)至少要讓他們明白產(chǎn)品的好處。你可以將這些信息在引導(dǎo)頁上展示，后面我們將會(huì)討論功能引導(dǎo)頁的作用。
　　當(dāng)然，我們的職責(zé)就是設(shè)計(jì)出直觀，易于使用的產(chǎn)品。然而我們不應(yīng)該忽略引導(dǎo)頁對(duì)用戶所提供的價(jià)值，這將使體驗(yàn)變得更有趣。

　　使用那種引導(dǎo)方式？
　　這是最常見的三種方式：
　　1. 優(yōu)勢(shì)指向引導(dǎo)
　　2. 功能指向引導(dǎo)
　　3. 逐步引導(dǎo)
我們一起來看看每一種方式使用時(shí)的一些法則

方式1：優(yōu)勢(shì)指向引導(dǎo)

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

Evernote Food清晰地向用戶展現(xiàn)使用這款A(yù)PP的好處

 

　　當(dāng)使用這種方式時(shí)需考慮以下幾種準(zhǔn)則：
　　1.顯示三條信息為最合適
這個(gè)數(shù)字并不是基于科學(xué)理論，而是因?yàn)橹攸c(diǎn)是要讓用戶快速了解這款A(yù)PP，“三條”最為合適（不包括屏幕標(biāo)題）。這種方式可以讓用戶對(duì)這款A(yù)PP快速上手而不會(huì)因?yàn)樾畔⒌姆彪s而感到疲累。

　　2.應(yīng)用“一個(gè)滑動(dòng)手勢(shì)，一個(gè)概念”的規(guī)則。
　　回想一下你所保留的大部分所要陳述的信息，一個(gè)清晰的滑動(dòng)手勢(shì)，集中信息可能更讓人記得牢。同樣是應(yīng)用引導(dǎo)頁面。“一個(gè)滑動(dòng)手勢(shì)，一個(gè)概念”規(guī)則將有助于用戶集中和消化信息的每個(gè)細(xì)節(jié)。向用戶傳達(dá)太多的消息將會(huì)增添他們對(duì)你所要傳達(dá)的重要信息的視覺疲憊。

劃分優(yōu)先級(jí)

　　不要過分去炫耀你的APP有多酷，應(yīng)該關(guān)注用戶的數(shù)據(jù)和提醒自己用戶的真正需求和所有可能要面臨的問題。然后，尋找可以解決的方法通過引導(dǎo)回答他們。

語言一致性

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

NYT Now使用簡(jiǎn)潔，明了的陳述展現(xiàn)它的好處和價(jià)值

登陸,注冊(cè)前先引導(dǎo)

　　因?yàn)橐龑?dǎo)頁面意味著對(duì)整款A(yù)PP的全局觀覽，所以把它放在注冊(cè)和訂閱服務(wù)頁面的前面。一旦他們決定訂閱，那用戶已經(jīng)做好體驗(yàn)這款A(yù)PP的準(zhǔn)備，提醒他們這款A(yù)PP的好處就變得無關(guān)緊要了。

 

保持簡(jiǎn)潔

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

 

注意事項(xiàng)：

　　Readability 是一款很實(shí)用的APP，遺憾的是有很多明顯的問題，這點(diǎn)在Android平臺(tái)上尤為突出：
　　1.不一致性。
　　2.用戶必須去消化多達(dá)七個(gè)幻燈片所展示的信息。
　　對(duì)于一些信息較長(zhǎng)的幻燈片，例如，關(guān)于介紹分享功能的幻燈片可以用一個(gè)簡(jiǎn)單的分享圖標(biāo)取代文字介紹。
　　4. 一個(gè)鼓勵(lì)用戶去安裝Firefox插件的幻燈片是多余的，因?yàn)檫@只是移動(dòng)端。另外，以前的幻燈片也已經(jīng)告訴用戶，“Readability支持web端和移動(dòng)端。”引導(dǎo)頁面在移動(dòng)端上不應(yīng)該是一個(gè)包羅萬象全套的營(yíng)銷產(chǎn)品，而是應(yīng)該與移動(dòng)平臺(tái)相關(guān)聯(lián)。

避免過多的幻燈片介紹，保持與內(nèi)容與平臺(tái)相關(guān)

 

方式2：功能性引導(dǎo)

　　另一個(gè)選擇就是放棄優(yōu)勢(shì)指導(dǎo)，集中選擇APP重要的功能進(jìn)行引導(dǎo)。這類似于coach marks，如果你采用這種方式，請(qǐng)看一下幾點(diǎn)：
　　1. 什么是重要功能？（例如，如何去啟動(dòng)或最常見的行為）
　　2. 什么時(shí)候去使用這些功能（例如，當(dāng)你查看搜索結(jié)果時(shí)）
　　3. 如何去使用這些功能（例如，雙擊或向左拖動(dòng)）

 

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

 

　　不要解釋被廣為人知的概念
　　自從互聯(lián)網(wǎng)普及開始，從桌面應(yīng)用到網(wǎng)頁應(yīng)用再到移動(dòng)APP，“×”這個(gè)符號(hào)一貫代表著關(guān)閉，退出或取消的意思。所以，除非這個(gè)符號(hào)在你的APP上有特殊的含義，否則不要向用戶說明它的其他意義。

 

Adobe Kuler沒有展示其他的含義

 

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

　　幫助用戶開啟APP之旅
　　如果的的APP默認(rèn)是空的，針對(duì)于這一點(diǎn)在你的引導(dǎo)頁面上。不要讓用戶一打開APP就面對(duì)一個(gè)空白的頁面。包括通過一條便簽引導(dǎo)用戶入手，用戶不想這樣，即便是一秒鐘，他們都會(huì)認(rèn)為這是一個(gè)Bug。

 

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

 

　　引導(dǎo)頁面放于登陸或注冊(cè)頁面之前
　　與最后一種方式一樣，在用戶進(jìn)行注冊(cè)或登陸之前進(jìn)行引導(dǎo)。

　　不應(yīng)該做的事：
　　照片展示類APP，500px擁有一些驚人的內(nèi)容和豐富的功能。然而，iphone 平臺(tái)上的APP在引導(dǎo)上則犯了一些錯(cuò)誤：
　　1. 導(dǎo)航欄及其功能展示。告訴用戶他們可以通過導(dǎo)航欄以下的區(qū)域進(jìn)行導(dǎo)航。
　　2. 一些幻燈片展示的按鈕，如“鏈接”，“喜愛”，“分享”。這三個(gè)功能通過按鈕圖標(biāo)來展示，這些圖標(biāo)通常都能讓人聯(lián)想到它的功能。所以在引導(dǎo)頁面解釋它們的用處完全是多余的。讓我們來猜想一下，對(duì)于500px一部分目標(biāo)觀眾對(duì)這些圖標(biāo)不熟悉。在這個(gè)案例中，逐步地通過在context中展現(xiàn)APP的功能引導(dǎo)用戶以提供更好的服務(wù)（例如當(dāng)用戶在查看圖片是，他們下一步可能會(huì)點(diǎn)“贊”）。
　　3. 一張幻燈片展示的“流程”，一個(gè)記錄用戶活動(dòng)變動(dòng)的時(shí)間軸。一旦你跟隨別人就能從這些“流程”中獲益。
通過告訴用戶這種特性來引導(dǎo)他們，至少有些人能從中得到幫助。

 

500px避免在單張幻燈片上展示過多的功能，保證信息的簡(jiǎn)潔，重要

 

方式3：逐步引導(dǎo)

　　總的來說，人們學(xué)習(xí)的最好方式就是實(shí)踐。這點(diǎn)在逐步引導(dǎo)中可以得到驗(yàn)證，一張真實(shí)的引導(dǎo)頁面當(dāng)用戶使用APP時(shí)起到將信息展示給用戶的作用。例如，當(dāng)用戶在儀表盤界面時(shí)，他們看到的僅僅是與儀表盤相關(guān)的信息；當(dāng)用戶查看搜索結(jié)果時(shí)，僅僅是相關(guān)的搜索結(jié)果顯示在他們眼前。

 

Feedly 當(dāng)用戶首次打開APP時(shí)會(huì)有一些提示

 

　　當(dāng)你在逐步引導(dǎo)用戶時(shí)記住以下幾點(diǎn)：
　　在復(fù)雜的工作流程中使用
　　如果你的APP工作流程相當(dāng)復(fù)雜或者是處理復(fù)雜的事物（如財(cái)政），逐步引導(dǎo)是一個(gè)很好的選擇。只有當(dāng)信息恰當(dāng)并且合乎邏輯時(shí)，用戶才能更好地消化它們。

 

在某些功能被隱藏的情況下使用
　　在開發(fā)移動(dòng)APP時(shí)，我們總是關(guān)注在小屏幕上高效率的功能，這時(shí)就不得不將菜單和一些功能隱藏。我們只有通過語音，雙擊或長(zhǎng)按調(diào)出這些功能。在這種情況下，我們就要引導(dǎo)用戶使用這些隱藏功能。
　　例如，以Pocket為例，如下所示。可供使用的功能都在閱讀列表里，用戶只有通過向左拖動(dòng)才能看到這些功能選項(xiàng)。因?yàn)橛脩襞cAPP的內(nèi)容相關(guān)聯(lián)，用戶必須至少在閱讀列表里添加一項(xiàng)功能才能進(jìn)行點(diǎn)擊，這時(shí)APP會(huì)提示用戶向左拖動(dòng)來顯示這些隱藏的功能。

 

Pocket可以通過提示隱藏功能逐步引導(dǎo)用戶

 

　　最理想的是用手勢(shì)操作APP
　　如果你的APP嚴(yán)格依賴于手勢(shì)操作，那么這種實(shí)踐的方式是最好的。讓用戶隨著功能的介紹而采取相應(yīng)的手勢(shì)動(dòng)作。

Solar 采取每一個(gè)手勢(shì)提示，讓用戶通過實(shí)踐掌握相應(yīng)功能

 

引導(dǎo)連續(xù)性
　　對(duì)于手勢(shì)操作APP，為一系列手勢(shì)在設(shè)置界面中提供一種捷徑和相應(yīng)的動(dòng)作，文字提示。
　　記住，你的APP的手勢(shì)越多，用戶要記住的手勢(shì)也就越多。用戶手機(jī)上裝的手勢(shì)操作APP也多，他們也將也困惑。用戶不得不去記住每款A(yù)PP之間雙擊的意義。這時(shí)就得做一些標(biāo)注讓信息更易理解，讓用戶感到更加地舒適。

 

Beats Music為一系列的手勢(shì)提供永久的快速訪問的方式

 

注意事項(xiàng):

　　因?yàn)橹鸩揭龑?dǎo)是對(duì)用戶使用APP的輔助，最大的風(fēng)險(xiǎn)就是用戶在使用APP時(shí)不斷地提示用戶，這將破壞用戶更美好地體驗(yàn)APP。所以，要以溫和，人性的態(tài)度應(yīng)用這種方式向用戶展示有用的信息。
　　除此之外，在每張引導(dǎo)頁面中亮度不宜過高，給用戶更多呼吸的空間，目的是讓他們能更美好地體驗(yàn)?zāi)愕腁PP。引導(dǎo)不是掩飾糟糕的設(shè)計(jì)，而是輔助用戶更好地體驗(yàn)。

 

替代方案

　　以上提到的方式都是最常用，最流行的。但是你也可以新創(chuàng)自己的方法，更好地引導(dǎo)用戶!

選擇1：混合

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

Flink結(jié)合的引導(dǎo)方式

選擇2：視頻

　　視頻引導(dǎo)也常用于一些APP，這種方法也值得考慮。這是一種不同的方向，應(yīng)用一些視頻更加實(shí)用，看起來像一個(gè)教程，然而也有一些純粹是廣告。與網(wǎng)頁上的視頻相比，這些視頻將自動(dòng)地播放，無意識(shí)地侵入用戶的視覺。當(dāng)用戶在公共場(chǎng)所時(shí)，來自手機(jī)設(shè)備的爆炸性聲音顯然是不和諧的，不恰當(dāng)?shù)摹?/p>

 

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

選擇3：示例數(shù)據(jù)

　　為用戶提供一些示例數(shù)據(jù)也是值得做的。特別是APP要處理的敏感數(shù)據(jù)，例如財(cái)政和人類資源數(shù)據(jù)。如果APP加載這些示例數(shù)據(jù)，用戶將能更舒服地進(jìn)行實(shí)際操作，學(xué)習(xí)如何使用APP，并且能為更好地輸入真實(shí)數(shù)據(jù)做準(zhǔn)備。

提供一些示例數(shù)據(jù)給用戶，供參考學(xué)習(xí)APP的應(yīng)用

 

結(jié)論:

　　文章中的指導(dǎo)方針和實(shí)例將對(duì)你的引導(dǎo)項(xiàng)目有所幫助，然而，一如既往，用戶是一切的核心。所以，無論你運(yùn)用那種方式，請(qǐng)記住，重新審視你自己的角色，用戶使用場(chǎng)景和你所持有的用戶數(shù)據(jù)，是否經(jīng)過市場(chǎng)調(diào)研和分析。
　　如果你仍不清楚用那種方式，可以在用戶中用一兩中方式進(jìn)行測(cè)試并且分析反饋，看那種可行那種不可行。沒有哪一種方法放之四海而皆準(zhǔn)。所以，一如既往，用數(shù)據(jù)來做最理智的決定。