提起用戶激勵體系你會想到什麼？積分體系？簽到體系？或者是簡單粗暴的現金優惠？
以上都不是，今天我想和大家分享的是任務成就體系中的勳章設計。
一、什麼是勳章
我們先來看看勳章的定義： 勳章，是指授給有功者的榮譽證章或者標誌。 古代歐洲為了區別在戰場上的騎士，一個名為勳章的標誌制度得以發展。每一個貴族都會設計出一個獨特的標誌，製作在他的盾牌、外衣、旗幟和印章上。（摘自百度百科）
上面這段話有三個詞語是重點，有功者、榮譽、獨特標誌。有功者反應了勳章不是每個人都能獲得的，而榮譽則反應了勳章是榮譽的象徵，能帶給獲得者精神上的滿足。獨特標誌則區分了獲得者與其他人。
小到小時候得到的小紅花，大到奧運會國家贏得獎牌，這些都算是勳章（不同產品的叫法可能不同，有勳章、徽章、獎章等）。
二、勳章的作用
上面我們說了勳章能帶給獲得者精神上的滿足，那麼延伸到互聯網中，勳章設計的完善則能一定程度上起到滿足用戶的成就感，激勵用戶不斷使用產品的作用，常用在內容類產品中，如視頻類、知識付費類、閱讀類產品中。
但是把勳章設計運用的最好的當屬遊戲類產品了，比如王者榮耀的勳章成就體系，藉助獲得難易程度不同的勳章，能使用戶自主的不斷使用產品，獲得高等級勳章後還會被膜拜為大神，充分滿足了用戶的虛榮心。
三、勳章頁的構成
勳章頁大致由六部分構成。包括勳章頁入口、勳章牆、勳章詳情說明、進度展示、勳章圖標。
1.勳章頁入口
勳章入口一般有兩個位置，一是放置在個人中心頁中，還有一種則是放置在個人主頁中。個人中心頁只需點擊底部tab切換即可看見入口，而個人主頁還需用戶再點擊一次才可看見。
放置在個人中心
放置在個人中心的勳章入口大致也有兩種樣式，一種是以圖標的形式跟隨在暱稱旁邊，另一種則是放入個人中心列表功能入口中。如下圖：
二者的選擇主要是看個人中心的主要導航方式，一般宮格導航為主的個人中心頁會採用勳章入口跟隨暱稱旁邊，列表導航為主的則會將入口放入列表中。
當然，具體選擇還是看勳章功能的重要程度，比如波洞的個人中心以列表導航為主，但勳章入口卻是放置在頂部宮格中，我的理解是波洞的勳章功能層級較高，因此放在了更顯眼的位置。
放置在個人主頁
勳章入口多以圖標形式跟隨暱稱放置在個人主頁中，此類產品往往擁有較強的社交屬性，用戶擁有自己的動態主頁，因此既能查看自己的，也能查看他人的勳章。
上圖知乎的勳章入口還將用戶擁有的勳章展示了出來，比起單個圖標入口更能吸引用戶點擊進入
2.勳章牆
點擊勳章入口進入的頁面就是勳章牆了，勳章牆主要包括用戶已獲得的勳章信息以及產品包含的所有類別的勳章展示。
勳章牆展示幾乎都是採用的宮格式佈局，一般一行分佈2~5個勳章，多以3個為主。
勳章牆中的已獲得勳章信息包括用戶總獲得的以及不同類別勳章的單類獲得數，顯示總獲得數的勳章牆會在頂部加入用戶的獲得信息，幫助用戶一眼識別。
在勳章牆的設計中，注意要做好獲取與未獲取勳章的區別樣式，重點是保證用戶能一眼識別出獲得與未獲得的勳章，多是將未獲得的勳章置灰處理。反面例子如下：
上圖KEPP中，已獲得勳章是將其正常顏色展示，而未獲得勳章採用的淺紫灰色，我一眼看過去時真的沒有反應過來哪些是未獲得的。
3.勳章詳情說明
勳章詳情說明是在勳章牆展示中，點擊勳章後以彈窗的形式展示出來的，包括全屏彈窗與非全屏彈窗兩種展現形式。
全屏彈窗詳情說明
勳章詳情說明採用全屏彈窗能承載更多的信息，除了可以包括獲取說明外，還可以承載獎勵說明、獲取進度以及獲得後的分享炫耀按鈕等。
上圖中得到與咕咚的該勳章都屬於升級類勳章，勳章本身有級別的劃分，左右切換可查看不同級別的勳章，像這樣有等級劃分的勳章採用全屏彈窗會更加直觀
非全屏彈窗詳情說明
承載的信息較少，一般只包括簡短的說明信息，更加簡潔輕量。如下圖：
知乎與開眼都採用的非全屏圖片彈窗，視覺效果更加輕量。知乎雖然也有等級劃分類的勳章，但由於採用的非全屏彈窗，等級切換採用的是點擊切換，說明文字也更加簡潔。而開眼則直接在文字中說明下一等級勳章，並不能直接切換查看。
4.進度展示
需要累積獲得的以及等級劃分的勳章還需要加入獲取進度。我彙總了3種勳章進度展示的樣式，包括進度條、數字進度、文字說明。
進度條
以一個橫向進度條展示在勳章詳情說明中，能夠直觀看出當前進度佔比，對升級進度有一個大致的判斷，佔屏比較大，適合放入全屏彈窗詳情說明中。
上圖中咕咚進度條只展示了進度百分比，而波洞的進度條同時配上文字說明，升級進度更加精確。
數字進度
左邊為當前達到數字，中間斜槓隔開，右邊為該勳章獲取總達到數字。升級進度精確，佔屏比小，即可放入全屏彈窗詳情說明也可放入非全屏彈窗詳情說明。
文字說明
文字說明進度直接告訴用戶還差多少具體的進度，沒有總進度展示，進度也很精確，佔比小，注意需要對文字進行字數限制。
5.勳章圖標
勳章圖標作為勳章設計中最重要的一環，需要UI設計師花費很多的心思。勳章圖標目前多為圖形圖標，我只看到開眼是採用的圖片類勳章。
在設計圖形勳章時以現實生活中的勳章為靈感，多采用統一的勳章背景模板，保證整體勳章牆的視覺統一，便於多次複用。常用的形狀有六邊形、圓形、盾牌形狀等。
切忌在設計圖形勳章時採用複雜的背景模板，以免降低了勳章內部主體的層級。
四、劃重點
本文主要為大家淺析了勳章設計的定義、作用以及勳章頁的構成。
- 勳章的定義：勳章是指授給有功者的榮譽證章或者標誌；
- 勳章的作用：勳章能帶給獲得者精神上的滿足，一定程度上激勵用戶不斷使用產品；
- 勳章頁的構成：包括勳章頁入口、勳章牆、勳章詳情說明、進度展示以及勳章圖標。
閱讀更多 北京設計小白 的文章
