關于引導頁的整理與分析

7 評論 37943 瀏覽 251 收藏 12 分鐘

隨著ui設計的不斷發展,引導頁的形式也在隨著變化,根據不同產品的特性,其作用與意義也不盡相同。本文將分別從“靜態引導頁”與“動態引導頁”兩種形式與大家分享我對于“引導頁”的一些認識。

狹義上,我們一般認為在初次打開應用時跳出的幾張介紹應用功能的頁面叫做引導頁;從廣義上來說,在用戶使用某個功能前就達到幫助用戶理解和使用,降低用戶學習成本功能的頁面或存在引導屬性彈窗的頁面都可以稱為引導頁。

一、靜態引導頁

幻燈片05

好奇心日報是一款商業資訊類的app,在引導頁上選擇了以大圖作為背景的形式,四張圖片為用戶營造了一種偏商務、商業風格的場景。

從配色上設計者選擇了白色與app識別色-黃色,當用戶在瀏覽完引導頁之后進入主界面時不會有視覺上太大的落差,識別色也給用戶留下了相對深的印象,容易讓用戶記住產品。設計者將文字內容分為兩級,我們可以清晰的看到粗體被放大的標題型文字與細小的描述型文字。標題型文字將應用的內容重點提煉展示,描述型文字為其作補充,為用戶展示“好奇心日報”這款應用的內容。

頁面的切換方式為橫向切換,這也是我們常規的切換方式,那么下面我們來看一款不一樣的切換方式。

幻燈片06

這是一款為用戶提供旅行攻略的應用,首先設計者選擇了一種扁平化的風格,用圓點連接每一張頁面,以屏間交互的方式引導用戶展示應用的內容。

同樣作為內容展示的作用,下面為大家介紹360Camera的設計風格。

幻燈片07

360Camera點設計者采用漸變背景搭配輕擬物的風格為用戶展示了應用包含的“攝像”、“掃一掃”、“圖片編輯”等功能內容。

文案上,用紅色放大的字體將這三個內容強化,讓用戶能夠一目了然。

淘寶

幻燈片08

計步器

幻燈片09

這兩款應用采用了明暗突出的形式,相比之下,淘寶采用了比較風格化的形式,但他們同樣起到了操作指引的作用。

幻燈片10

qq采用了萌系的卡通風格,以用戶熟知的吉祥物作為主角對本次更新的功能進行描述。

同樣以功能更新說明作為目的還有36氪。

幻燈片11

36氪采用了一種比較特殊的彈窗風格,當用戶觸發模塊時才會彈出該模塊本次的更新,這是一種用戶體驗的提升,對用戶來說只有“我”關注的才是“有用的”,產品設計者以這一方式幫助用戶屏蔽“無用的”信息。

幻燈片12

這里我們看到這是微信引起行業內熱烈討論的幾個版本之一,黑色底配上文字加手繪,整個頁面看起來很簡單,但細細品讀卻又引發思考。將即時聊天做到相對完美的程度之后,微信針對“朋友圈”又做了一次精彩的內容運營。

說到微信就不得不說支付寶,支付寶9.9更新也在業內激起浪潮,紛紛揣測支付寶是不是要做社交,這里不做展開,但是不得不說這一版的引導頁讓我眼前一亮。

幻燈片14

支付寶作為一款與“錢”掛鉤的應用,用戶關注的重點也一定是“安全”,首先設計者采用了工業設計圖的風格對圖案進行設計,眾所周知工業設計圖必須保證精準性,這樣的圖案給用戶一種“嚴謹”的心理暗示,讓用戶對支付寶產生信任感。

文案上,支付寶將自己與蒸汽機、電燈、自行車、飛機作類比,用“異想天開”、“天方夜譚”、“荒誕無稽”和“癡人說夢”來描述當時環境下這些發明在世人眼中的形象。將支付寶形象拔高,向用戶展現情懷,達到品牌營銷的目的。

如果要給支付寶9.9版的引導頁找缺陷,那么我認為是用戶場景考慮不夠,頁面缺少“跳過”按鈕,工具類應用就是為用戶解決問題,當用戶處于一種急需支付的狀態打開應用時,用戶需要劃過五張對當前狀況毫無幫助的頁面,反而對用戶是一種負擔。

二、動態引導頁

隨著技術發展,各種各樣的展現形式被加入移動端設計中,下面我們來看一看精彩的動態引導頁設計。

幻燈片17

格志引導頁效果預覽

格志選擇用線框動效搭配文字來對功能進行展現,同時也為用戶的操作提供引導和幫助。除了初次進入應用時可以觀看到動畫,當用戶不清楚操作時仍可以通過“設置”模塊再次觀看動畫。

幻燈片18

這是“什么值得買”早期的一版引導頁,采用了定格動畫的形式,作為用戶,我在觀看的時候出了感覺形式新穎之外并沒有為我提供任何幫助或者讓我加深對這款應用的認識,當然這只是我的個人感受,如有不同意見歡迎討論。

幻燈片19

從截圖可以看出,貓弄的設計是比較風格化的,打哈欠的貓咪嘴巴不斷張大從里面游出鯨魚,鯨魚帶起的浪花中又冒出奇怪的八抓魚……你永遠不知道下一個會出現的是什么,最后頁面進入一張“定制你感興趣的主題”頁面。

有的人不禁問這算什么引導?其實,貓弄是一款號稱“致力于抗擊無聊的高質量文化社區”,打開應用后不斷變化的動畫就足夠吸睛,符合產品本來的調性,而貓弄本身涵蓋的主題是非常廣泛的。前面說到,對用戶來說,他們關心的才是有用的信息,那么這一行為正是幫助用戶從海量的內容中去準確定位到對自己“有用的”信息。

幻燈片20

好贊選擇了用視頻的形式作為引導頁,這也是對新增的“短視頻”功能做一個展示,短視頻為用戶構建了四種不同的使用場景,搭配好贊標志性的“標簽”特點,讓用戶覺得新穎有趣又牢牢的記住應用的特色。

上文介紹了靜態引導頁和動態引導頁的不同形式,下面給大家總結一下產品設計者所想要達到的目的或者說傳遞給用戶的信息:

UED交流會-引導頁 20160831

在產品設計中,我們如何去判斷自己產品需要達到怎么樣的效果,這里也是上文介紹中的一條“暗線”:

當一個產品剛剛問世的時候,我們往往想要通過引導頁讓用戶了解產品本身的內容和功能,在使用前為用戶提供幫助,那么我們會選擇以“內容介紹”與“操作引導”作為引導頁的內容;

隨著時間推移,產品經過優化之后,針對重大更新我們需要告知用戶并提供幫助,以免用戶產生陌生感,提高用戶學習成本,那么我們會選擇以“更新說明”作為引導頁的內容;

像微信這樣當他將即時聊天做到極致的狀態之后就會圍繞產品的另一功能進行推廣以“內容運營”作為引導頁的內容;

產品經過千錘百煉,達到一種相對完備的產品,像支付寶這樣用引導頁幫助品牌為用戶構建一個安全、專業的使用場景,和用戶聊一聊情懷。

當然,上面一條規律只是相對常規的考慮方式,根據不同產品還需要各位產品經理仔細思考,例如貓弄、豆瓣這樣的產品更適合以“用戶信息定位”作為引導頁的內容;

又如購物類app,用戶在接觸許多同類型應用后已經對“購物”的流程相對熟悉,再過多對功能進行渲染反而成為使用上的負擔,很多購物類產品會選擇以“品牌推廣”作為引導頁內容,推廣品牌“優質”、“新鮮”、“低價”的特點,以讓用戶對品牌產生依賴感。

以上是個人對引導頁的一些分析與分享,歡迎討論,若有不對之處也歡迎批評指正。

 

作者:密斯徐,一個在產品路上爬行的產品狗,筆芯~

本文由 @密斯徐 原創發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前引導頁在朝動態和文藝情懷路線發展

    回復
  2. 學習了,記了筆記。感謝您

    來自天津 回復
  3. 善于整理的作者,贊 :mrgreen:

    來自廣東 回復
  4. 高質量的文章,受教了!感謝樓主!~ :mrgreen:

    來自上海 回復
    1. 謝謝??

      回復
  5. 引導頁總結的很棒,學習了,動態的能看到效果就更好了,未來的設計可能會有更多動感變化,給人予視覺沖擊,降低學習成本。

    來自北京 回復
    1. 動態的第一個“格志”是有錄屏鏈接的喲,后面的因為時間關系沒有處理,不過都有app名稱,感興趣的話可以下載來看看??

      回復