提起用戶激勵體系你會想到什么？積分體系？簽到體系？或者是簡單粗暴的現金優惠？

 以上都不是，今天我想和大家分享的是任務成就體系中的勛章設計。

一、什么是勛章

我們先來看看勛章的定義：    勛章，是指授給有功者的榮譽證章或者標志。    古代歐洲為了區別在戰場上的騎士，一個名為勛章的標志制度得以發展。每一個貴族都會設計出一個獨特的標志，制作在他的盾牌、外衣、旗幟和印章上。（摘自百度百科）

 

上面這段話有三個詞語是重點，有功者、榮譽、獨特標志。有功者反應了勛章不是每個人都能獲得的，而榮譽則反應了勛章是榮譽的象征，能帶給獲得者精神上的滿足。獨特標志則區分了獲得者與其他人。

 

小到小時候得到的小紅花，大到奧運會國家贏得獎牌，這些都算是勛章（不同產品的叫法可能不同，有勛章、徽章、獎章等）。

二、勛章的作用

上面我們說了勛章能帶給獲得者精神上的滿足，那么延伸到互聯網中，勛章設計的完善則能一定程度上起到滿足用戶的成就感，激勵用戶不斷使用產品的作用，常用在內容類產品中，如視頻類、知識付費類、閱讀類產品中。

 

但是把勛章設計運用的最好的當屬游戲類產品了，比如王者榮耀的勛章成就體系，借助獲得難易程度不同的勛章，能使用戶自主的不斷使用產品，獲得高等級勛章后還會被膜拜為大神，充分滿足了用戶的虛榮心。

三、勛章頁的構成

勛章頁大致由六部分構成。包括勛章頁入口、勛章墻、勛章詳情說明、進度展示、勛章圖標。

1.勛章頁入口

勛章入口一般有兩個位置，一是放置在個人中心頁中，還有一種則是放置在個人主頁中。個人中心頁只需點擊底部tab切換即可看見入口，而個人主頁還需用戶再點擊一次才可看見。

 

放置在個人中心

放置在個人中心的勛章入口大致也有兩種樣式，一種是以圖標的形式跟隨在昵稱旁邊，另一種則是放入個人中心列表功能入口中。如下圖：

二者的選擇主要是看個人中心的主要導航方式，一般宮格導航為主的個人中心頁會采用勛章入口跟隨昵稱旁邊，列表導航為主的則會將入口放入列表中。

 

當然，具體選擇還是看勛章功能的重要程度，比如波洞的個人中心以列表導航為主，但勛章入口卻是放置在頂部宮格中，我的理解是波洞的勛章功能層級較高，因此放在了更顯眼的位置。

放置在個人主頁

勛章入口多以圖標形式跟隨昵稱放置在個人主頁中，此類產品往往擁有較強的社交屬性，用戶擁有自己的動態主頁，因此既能查看自己的，也能查看他人的勛章。

上圖知乎的勛章入口還將用戶擁有的勛章展示了出來，比起單個圖標入口更能吸引用戶點擊進入

2.勛章墻

點擊勛章入口進入的頁面就是勛章墻了，勛章墻主要包括用戶已獲得的勛章信息以及產品包含的所有類別的勛章展示。

 

勛章墻展示幾乎都是采用的宮格式布局，一般一行分布2~5個勛章，多以3個為主。

勛章墻中的已獲得勛章信息包括用戶總獲得的以及不同類別勛章的單類獲得數，顯示總獲得數的勛章墻會在頂部加入用戶的獲得信息，幫助用戶一眼識別。

在勛章墻的設計中，注意要做好獲取與未獲取勛章的區別樣式，重點是保證用戶能一眼識別出獲得與未獲得的勛章，多是將未獲得的勛章置灰處理。反面例子如下：

上圖KEPP中，已獲得勛章是將其正常顏色展示，而未獲得勛章采用的淺紫灰色，我一眼看過去時真的沒有反應過來哪些是未獲得的。

3.勛章詳情說明

勛章詳情說明是在勛章墻展示中，點擊勛章后以彈窗的形式展示出來的，包括全屏彈窗與非全屏彈窗兩種展現形式。

 

全屏彈窗詳情說明

勛章詳情說明采用全屏彈窗能承載更多的信息，除了可以包括獲取說明外，還可以承載獎勵說明、獲取進度以及獲得后的分享炫耀按鈕等。

上圖中得到與咕咚的該勛章都屬于升級類勛章，勛章本身有級別的劃分，左右切換可查看不同級別的勛章，像這樣有等級劃分的勛章采用全屏彈窗會更加直觀

 

非全屏彈窗詳情說明

承載的信息較少，一般只包括簡短的說明信息，更加簡潔輕量。如下圖：

知乎與開眼都采用的非全屏圖片彈窗，視覺效果更加輕量。知乎雖然也有等級劃分類的勛章，但由于采用的非全屏彈窗，等級切換采用的是點擊切換，說明文字也更加簡潔。而開眼則直接在文字中說明下一等級勛章，并不能直接切換查看。

4.進度展示

需要累積獲得的以及等級劃分的勛章還需要加入獲取進度。我匯總了3種勛章進度展示的樣式，包括進度條、數字進度、文字說明。

 

進度條

以一個橫向進度條展示在勛章詳情說明中，能夠直觀看出當前進度占比，對升級進度有一個大致的判斷，占屏比較大，適合放入全屏彈窗詳情說明中。

上圖中咕咚進度條只展示了進度百分比，而波洞的進度條同時配上文字說明，升級進度更加精確。

 

數字進度

左邊為當前達到數字，中間斜杠隔開，右邊為該勛章獲取總達到數字。升級進度精確，占屏比小，即可放入全屏彈窗詳情說明也可放入非全屏彈窗詳情說明。

文字說明

文字說明進度直接告訴用戶還差多少具體的進度，沒有總進度展示，進度也很精確，占比小，注意需要對文字進行字數限制。

5.勛章圖標

勛章圖標作為勛章設計中最重要的一環，需要UI設計師花費很多的心思。勛章圖標目前多為圖形圖標，我只看到開眼是采用的圖片類勛章。

在設計圖形勛章時以現實生活中的勛章為靈感，多采用統一的勛章背景模板，保證整體勛章墻的視覺統一，便于多次復用。常用的形狀有六邊形、圓形、盾牌形狀等。

切忌在設計圖形勛章時采用復雜的背景模板，以免降低了勛章內部主體的層級。

四、劃重點

本文主要為大家淺析了勛章設計的定義、作用以及勛章頁的構成。

 

• 勛章的定義：勛章是指授給有功者的榮譽證章或者標志；

• 勛章的作用：勛章能帶給獲得者精神上的滿足，一定程度上激勵用戶不斷使用產品；

• 勛章頁的構成：包括勛章頁入口、勛章墻、勛章詳情說明、進度展示以及勛章圖標。

  藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945
  
  作者：人類君   來源：站酷

  分享此文一切功德，皆悉回向給文章原作者及眾讀者.
  免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
  

  藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司