勳章是榮譽的象徵,能帶給獲得者精神上的滿足,勳章系統本身更在乎的也是情感層面的激勵。所以本次我們啓動了榮譽體系的設計項目,榮譽體系本身意在通過虛擬勳章更好的激勵員工的積極性和職業成就感。

看完視頻,恭喜你基本等於看完了這篇文章呦

前章

今年8月,我們啓動了榮譽體系的設計項目,榮譽體系本身意在通過虛擬勳章更好的激勵員工的積極性和職業成就感。

勳章是什麼?

我們首先看一下勳章的定義:勳章一般是授給有功者的榮譽證章或者標誌。最早起源於古代歐洲用於區別戰場上的騎士,一個名爲勳章的標誌制度得以發展。簡而言之,勳章是榮譽的象徵,能帶給獲得者精神上的滿足,勳章系統本身更在乎的也是情感層面的激勵。

現實生活中金光閃閃的獎牌

現實生活中,小到幼兒園得到的小紅花,運動員獲得的獎牌,軍人胸前的各種榮譽,奧斯卡和金雞獎的獎盃這些都算榮譽系統在起到作用。對應的,互聯網產品中“勳章”也通常作爲激勵體系使用。我們似曾相識的在各種APP、遊戲和平臺中見過各種“小紅花”,來提升我們對於該產品的粘性。

如果我們用很經典的馬斯洛金字塔來解釋這個事情,榮譽系統解決的往往都是人們比較高級的需求:“榮譽感、被尊重、被認可”。所以在榮譽系統的設計中,我們優先考慮的就是希望通過設計的呈現和視覺的傳達,讓我們的用戶直接的感受到那份榮譽、尊重、認可。

這是一次“表達”>“形態”的設計主題,最後我們確定了“儀式感”作爲這次榮譽系統設計的綜合表述。

二、儀式感的設計

1. 儀式主體設計

勳章是合作方唯一明確提給我們的需求內容,他們把涉及獎項、司齡、員工關懷、團隊建設、公司文化、學習成長、人才招聘等等各個維度的內容進行了彙總,希望我們把他們統統都繪製成繽紛的勳章。

而我們做的第一件事是拆解,我們嘗試了各個維度對這些勳章進行拆解,提取他們的關鍵屬性,尋找他們的共性和要表達的不同核心思路,最終將其劃分爲兩個大類,標籤類和獎項類。

獎項類的勳章:

核心:是最需要突出“儀式感”“榮譽感”的一類勳章,是十分正式的認可

性格:莊重

表現:運用現實生活中金光閃閃的獎盃或品質感較高的獎牌突出表現主題,在材質和顏色上更加正式,多多的採用了金銀黑紅等思路

標籤類的勳章:

核心:呈現豐富的企業文化,突出積累和成長

性格:張揚

表現:使用多彩的色彩傾向,再加簡單圖形和立體質感的拓展延伸

勳章設計的思路

另外,在整體的視覺風格上,我們也更多的映射了現實世界的直觀感受,以希望勳章本身能夠給予獲得者直觀的刺激和獲得感,所以設計風格更加立體,並稍微的調高了勳章的視角,採用了一種微仰視的視角。

部分評優類勳章

部分標籤類勳章

可愛的司齡幫幫勳章

2. 儀式環境設計

儀式感,是人們表達內心情感最直接的方式,它使得某一個時刻與其他時刻的不同。同樣一個年輕人,放在光彩奪目的舞臺和放在人流不息的街頭,給人傳達的含義是完全不一樣的。一個好的視覺場景,用戶會因爲黑暗感受到恐怖,會因爲花團錦簇感知到一股清香,會因爲平靜的海洋而觸景生情,而我們要做的就是這種將視覺場景與主體相結合,帶給用戶更全面的情緒表達。

搖滾樂隊演出的舞臺光

對於環境的設計,我們調研了各種頒獎典禮,宗教儀式,經典電影動漫場景等等,製作了相應情緒板擬定主視覺風格。綜合來說可把環境的要素分爲:背景-核心表達-環境因子。

環境表達的要素

對應此次設計,我們提取出來的內容分別是深色的紋理背景,模擬現實的頂部光,向上升騰的不規則粒子。深色的背景不僅可以突出光影的效果,更加突出勳章的分量,稍微增加的紋理,也可以更加拉伸勳章的縱深,給人懸浮神祕的氛圍渲染。

頂部光是舞臺/教堂等常用的光影效果,是從現實世界映射的極具儀式感的表現形式。搭配的向上粒子,不僅可以讓整個環境更豐富,也更多的傳達一種積極向上的企業文化。

多種光效加入營造“儀式感”

3. 儀式行爲設計

在做了這些之後,我們覺得對於“儀式感”這個視覺定位還有些欠缺,對應人們在現實世界的感受,儀式感更多的是一種行爲的結果,而不是一個靜態的主體靜幀,我們聯想到國粹裏面經典的亮相。我們希望這次的勳章設計,不僅是一種主體呈現,而且還是一種行爲呈現。

戲曲演員的亮相

所以無論是在主體本身的亮相和定身,還是環境光的亮相及循環呈現,我都有針對性的進行了相關的動效設計。讓整個儀式的呈現更加具有時間慣性。希望,當用戶點開勳章的一瞬間,會有一份驚喜在呈現。

勳章和環境加入動效後的亮相

總體來說,我們認爲,儀式感的設計不應該僅僅侷限於勳章主體的設計,要想構建整體的感受,需要從主體/環境/行爲等更多維度進行設計思考和探索。

主體-環境-行爲設計思考模型

“儀式感”的落地

美好的設計總歸要遇到落地的問題,規模生產和精細化實現一直是我們都要面對的標準難題。尤其是這次的設計主題不僅要設計大量的勳章,還有其對應的精細動效的大規模生產。

1. 設計流水線

(1)勳章流水線

在設計中期因爲勳章量比較大,設計團隊怎麼提高設計質量和工作效率,統一設計標準就顯得比較重要,基於這些問題我們制定了相應的勳章設計規範。從「圖形、顏色、質感、結構」四個基礎形態來執行整體的設計,制定初步的設計規則,幫助後續更加深入和準確地把控整體設計。

從4個維度梳理勳章規範

(2)動效流水線

如此多的動效怎麼才能快速產出且保證運動規律和節奏一致。

我們引入了動畫庫工具,在對基礎動畫的進行了拆解和提取後,製作了一套基礎的動效範式。這個動效庫保證了動效設計的統一節奏和基本規則,設計師可以在此基礎上,根據勳章的具體內容對主體進行微創作即可。

在此基礎上,本來可能花費大量精力的動效設計環節,反而成爲了比較輕鬆和高效的一個過程。保證了我們的勳章設計,節奏統一又個性獨立。

統一的動效庫保證勳章的節奏一致,產出高效

2. 動效的輕量化落地方案

動畫框架的選擇,我們分別對比了PNG序列幀、SVGA、Lottie等實現方式,最終選擇使用AE+Lottie的方案輸出動畫方案。Lottie導出Json文件交付給開發同學,開發同學簡單調整、稍做關聯就可以完美實現動畫效果!

在本次榮譽體系項目中,我們使用Lottie實現了全部動效設計,在項目極爲緊急的情況下,既保證了視覺呈現,又避免了佔用過多開發資源,總體來說成果喜人。

結語

以上,是我們這次項目中總結出的對於“儀式感”設計思考以及覆盤。希望對大家有所幫助。

在整個項目開發過程中設計團隊和開發團隊配合緊密。在此,也要特別感謝BIC的開發團隊和HR童鞋對我們不斷嘗試的支持,雖然過程佈滿荊棘,但也充滿挑戰,不僅鍛鍊了團隊,也提升了多維專業能力。

作者:環鐵藝術家

本文來源於人人都是產品經理合作媒體@58用戶體驗設計中心(微信公衆號@58UXD),作者@環鐵藝術家

題圖來自 Unsplash,基於CC0協議。

相關文章