APP設計模式之--引導設計

編輯導語:產品的易用性是留存轉化使用者的關鍵點之一,如果使用者操作門檻高,則容易給使用者帶來不理想的體驗,也容易導致使用者流失。那麼,網際網路產品應當如何進行引導設計,讓使用者獲得更優體驗?本篇文章裡,作者對引導設計進行了一個系統總結,一起來看一下。

APP設計模式之--引導設計

網際網路產品,尤其是移動網際網路產品,都必須有門檻低、上手快的特性,這是因為,移動網際網路產品的客群是2C(customer)而非2B(business),以使用者自發性使用行為為主,產品可替代性強,使用者粘度不高。如果使用者下載安裝APP後,無法通過幾分鐘的嘗試搞明白產品提供的主要功能和操作方法,那麼這個應用離棄用也就不遠了。

一個能讓使用者快速上手的APP,除了設計符合產品邏輯、符合使用者操作習慣、足夠簡潔之外,層次分明不失趣味性的引導設計,也是非常重要的。所以在這篇文章中,我將重點介紹使用引導的設計模式。

一、全域性預覽

全域性預覽往往在引導頁階段來完成,應用第一次安裝啟動後,或者在使用者完成有效賬戶註冊前的每一次啟動,都會進入引導頁,透過左右滑動來瀏覽奇數量的引導頁。

全域性預覽透過應用程式逐屏逐功能的最終邀請(左右滑動),完成對應用程式的最終探索。

Doozyrama

是此模式很好的例子,包含了現階段流行的引導頁的典型設計元素:簡潔的文字介紹、生動的扁平化插圖、左右滑動切換和一個明確的退出標誌:

APP設計模式之--引導設計

再比如

Google Analytics

APP設計模式之--引導設計

最佳實踐

全域性預覽應用於強化或突出顯示關鍵或核心功能;

全域性預覽模式一般從使用者目標角度出發,要儘量保持簡短,並輔以有力的視覺引導。

二、互動教程

互動教程,指透過引導使用者進行互動動作,來掌握應用操作方式的一種引導設計。當用戶第一次開啟應用,或瀏覽某個頁面時,互動教程會自動顯示,並透過圖文說明、箭頭指引和互動觸發,幫助使用者更快上手APP。有趣的互動教程設計可以有效地提高使用者體驗。

同時,為了讓互動教程的引導更加通俗易懂,互動教程往往採用半透明蒙版+操作說明的設計模式。在應用主螢幕上,用一個帶有提示的半透明層矇住下層主螢幕內容。如

千牛工作臺

analytics

(一款資料分析展示應用):

APP設計模式之--引導設計

一款應用,如果只有難用的功能和醜陋的介面,那麼會馬上被使用者刪除,由新的同類應用取而代之。

相反,如果在使用者第一次進入APP主介面時,應用就展示出色的互動教程設計,這樣可同時起到功能導航和提升使用者體驗的雙重效果,如

VUE

WPS Office

APP設計模式之--引導設計

VUE是影片製作利器,WPS Office是白領的移動化辦公工具,前者注重設計感和逼格,後者注重商務和辦公氛圍濃厚,因此整體設計偏簡潔。

寶寶樹

醫護到家

更加註重趣味性:

APP設計模式之--引導設計

寶寶樹的使用者以年輕媽媽為主,重點發力社群;醫護到家是移動看病問診工具,涵蓋人群更是多樣化,但無論怎樣,二者傳達的理念都是:人性化、親民、拉近應用與使用者之間的距離、使用者與使用者之間的距離,以及使用者與醫療服務提供者之間的距離。

趣味性的設計,會為應用帶來更多的印象分,從而提高使用者的探索慾望和使用者粘性。

三、彈出框

彈出框,英文Popup Box,全稱“彈出式視窗”,與“固定式視窗”相對應,指的是透過應用自身觸發或者使用者互動動作觸發的,懸浮於原有頁面上方的視窗式設計,觸發後,使用者可對其進行關閉,因此這是一種非全域性的、只存在於特定狀態下的設計,也因為這種特點,彈出框在最初經常被用於廣告提示。

隨著設計模式越來越規範,人們發現,彈出框的人機互動模式非常適合用於應用本身的提示和引導,逐漸普遍在網際網路和移動網際網路產品中普及。典型的設計是:彈出框口+半透明蒙版背景(增強視覺對比)。

對於現在的移動APP來說,對話方塊是一種最常見的引導設計。同時,也正因為無處不在,它也是最容易被忽略和摒棄的,我們可以用彈出框引導來實現:

訊息/內容提示

。如

Pregnancy+

寶寶樹孕育

APP設計模式之--引導設計

問題/錯誤提示

。如

icon

Wolters Kluwer

APP設計模式之--引導設計

內容詳情

。如

阿里旅行

(已更名為飛豬)和

淘寶

APP設計模式之--引導設計

操作判斷

。如

頻果單詞

(右圖):

APP設計模式之--引導設計

最佳實踐

保持彈出框文案簡短;

確保彈出框內容可以在應用其他功能模組中訪問到。

四、對話方塊

對話方塊,英文Dialog Box,提起它時腦海裡就浮現“聊天對話方塊”或“訊息對話方塊”的樣式,這是一種次要視窗,不能最大最小化、不能改變形狀,只能用於簡單的人機交流,如訊息提示等。

對話方塊用於引導時,可以顯示在螢幕任意位置,並且比彈出框更貼合操作情景。如

千牛工作臺

知乎

APP設計模式之--引導設計

點選頁面內任意區域,即可關閉對話方塊。再比如

Wave Analytics

Way of Life

,後者更是在一個頁面內,可同時存在多個提示:

APP設計模式之--引導設計

最佳實踐

提示儘可能靠近指向物件;

內容要簡短;

開始觸發互動動作後(如觸碰螢幕),提示要自動消失;

對話方塊整體顏色要和頁面有所區分,對比鮮明。

五、空狀態頁面

空狀態頁面,指的是內容為空的頁面,常見於需要使用者自己進行初始化配置、建立內容等的應用中,典型場景是使用者剛安裝應用並開始使用。當用戶完成配置、建立內容後對“空狀態”的頁面進行覆蓋。

而空狀態頁面引導,就是在空狀態頁面中加入引導式設計,增強使用者體驗。而空狀態引導也被稱為初次使用引導。

空狀態頁面引導一般由一種或幾種元素構成:包括文字提示、表意插圖、觸發按鈕等。這些元素往往將固化在螢幕設計中,並一直存在,直到使用者執行互動操作,或被其他內容覆蓋。許多筆記類應用,都是用初次使用引導去吸引使用者新增內容。

我把空狀態頁面引導設計分為兩種:被動型引導和主動型引導。

先介紹被動型引導。這種設計以空狀態介面為典型應用,如

Change

Finger

APP設計模式之--引導設計

為什麼說它們是被動型引導,因為這個頁面的提示資訊對使用者來講,與其說是引導,還不如說是提醒,使用者無法通過當前頁面進行任何有效的相關的互動。Change只用文字告訴了使用者當前頁面狀態(可能更大的作用是,頁面上有這幾個漢字,就不會讓使用者覺得當前頁面出了什麼bug,僅此而已)。

下面的例子,雖然增強了解釋,但是仍然屬於被動型引導,比如

維基百科

Foursquare

APP設計模式之--引導設計

二者除了文字提示當前頁面是“空狀態”外,還進行了補充說明。不過維基百科的這句“儲存頁面以便日後查 看,即便在離線時”,充滿著生硬的直譯的倒裝…

主動型引導的特點在於:在提示使用者當前頁面狀態後,給出使用者改變當前頁面狀態的入口,比如新增內容或新增內容,比如採用圓角矩形按鈕入口的

蝦米音樂

Vimeo

APP設計模式之--引導設計

以及文字入口的

美團

Price Tag

APP設計模式之--引導設計

需要注意的是,這些觸發新頁面的文字入口,文字顏色要和主題色保持一致(主流方案),這也是遵循使用者習慣的最優選擇。

有的主動型引導做成了懸浮圓形按鈕樣式的全域性引導,即哪怕使用者進行了內容覆蓋,引導按鈕依然存在。如

小時光

2Do

APP設計模式之--引導設計

或者直接將“+”做到導航欄中,比如

種子習慣

New

APP設計模式之--引導設計

再舉兩個反例,即沒有任何提示的空狀態頁面,如

Replica

(左下圖),進入該選單頁後,作為一個使用者,我會懷疑:這個頁面是不是卡住了?是不是網路不好沒加載出來?再等等看?以及

開心奪寶

,仍然是空空如也,沒有任何提示:

APP設計模式之--引導設計

六、永續性設計

永續性設計,指長期顯示在頁面上的引導設計。無論頁面其他元素如何變動,永續性設計元素始終存在,始終提示使用者某項功能的入口,無論使用者是第一次還是第N次進入介面,永續性設計元素依然在螢幕上顯示。

高頻操作時,永續性引導在視覺上會被設計的非常醒目,如圓形懸浮按鈕;低頻操作時,永續性引導會弱化自身視覺效果,使之融入整個頁面,但又時刻可見。

引導的典型設計是使用者透過點選“+”按鈕來新增在螢幕上持久展示的內容,如

Analytics

Roambi

有道雲筆記、麵包筆記、微信閱讀

Quizlet

APP設計模式之--引導設計

APP設計模式之--引導設計

APP設計模式之--引導設計

最後的微信閱讀,就將新增書籍的功能做成了永續性引導,且為保持頁面整體風格,被設計成接近書籍縮圖的大小和樣式。

七、易發現/重新整理

易發現設計,指的是滑動螢幕進行內容重新整理時,在“拉出”區域出現的操作提示設計。當按照提示讓手鬆開螢幕時,頁面恢復原位置,“拉出”區域消失,同時伴隨消失的還有操作提示。

這種設計是不會擾亂螢幕、鼓勵特定互動的有效方法,往往用於執行一些常見的動作,如滑動、短按等。易發現設計發展到現在,大體經歷了兩個階段:

第一階段:icon動效+文字提示+重新整理時間。隨著大屏手機的迅速普通,移動互動設計處於“百花爭鳴”的階段,沒有所謂的“主流”設計方式,所以早期的易發現設計主要的功能是對互動動作進引導性解釋,當然,移動網際網路的時代也剛開啟沒幾年,現在大量應用扔沿用這種設計。而這時對於使用者來說,因為“習慣性存在”而產生的熟悉感,可能要比引導性解釋的意義更大。下面是

育學園

蝦米音樂

APP設計模式之--引導設計

育學園加上更新時間有其特殊性,因為這個應用本身就是記錄寶寶成長的工具,記錄資料包括餵奶、拉粑、吃藥、睡眠等,每一項活動都需要記錄時間,因此當寶媽在逛論壇和知識版塊時,APP透過一些互動動作來展示時間,提醒寶媽,是非常必要的。

當然,狀態列本身也有時間顯示,但是由於該時間是“一直存在”的,一直存在的事物,就像整本書全被劃了重點,很容易被使用者無意識忽略。

當然,育學園的時間提示也有問題,日期“08-09”明顯多餘了。

而蝦米音樂採取這種方案的話,可能起到相反的效果。很多音樂愛好者習慣在睡前聽,如果在進行內容重新整理的時候,被提示時間“最後更新:23:59””,對於使用者來說,可能就是入睡提示,從而降低應用的使用時長,雖然這對使用者來說是好事,但並不是APP官方想要看到的結果。

第二階段:ico動效或其他。到了這個階段,大部分使用者已經習慣了滑動螢幕再釋放重新整理內容的操作方式,文字提示的必要性降低,所以很多應用直接用簡單的動效來完成,如

即刻

APP設計模式之--引導設計

左圖下拉,右圖釋放重新整理。再比如

Doozyrama

APP設計模式之--引導設計

左圖為靜態頁面,右圖為下拉頁面再釋放後的重新整理動效,超人形象的小人兒在空白頁面上方來回飛一次。

對比即刻和Doozyrama,不難發現,當頁面資訊較多時,應相對減少易發現設計的複雜度;而當頁面資訊較少甚至是空白時,增加易發現設計的複雜度(相對來說),這樣使頁面資訊呈現上取得平衡,不至於太滿(有呼吸空間)或者太空(有抓眼球內容)。

本文由 @check hou 原創釋出於人人都是產品經理。未經許可,禁止轉載。

題圖來自Unsplash,基於 CC0 協議

頂部