輕奢格調|構建百度直播平臺設計語言系統(tǒng)
編輯導讀:一個用戶在進入產品之后,最直觀的感受就是產品的設計,從中能看出一個產品的格調和定位。本文作者以百度直播平臺為例,分析其設計語言系統(tǒng),希望對你有幫助。
一、什么是設計語言?
設計語言是把設計作為一種“溝通的方式”,在特定的場景中進行內容與信息的傳達。設計是介于科學與美學之間的一種藝術,是需要理性的去解決感性的問題。它和藝術之間的差別就在于“解決問題”。
二、設計語言有哪些?
設計語言最底層是項目設計語言,具有典型特征和主題,比如醫(yī)療項目凸顯專業(yè)冷靜,節(jié)日項目凸顯熱鬧氛圍。往上一層是產品設計語言,強調個性品牌,比如小視頻的設計深色更沉浸,電商從結構到色彩都凸顯熱鬧。很多產品隨著發(fā)展,形成一些系列平臺服務,平臺設計語言確保服務“統(tǒng)一規(guī)范”。最頂層是生態(tài)設計語言,跨設備跨平臺和硬件呈現(xiàn)的設計語言。
百度直播業(yè)務,從單一業(yè)務形成系列平臺服務,囊括的不只是B端和C端用戶產品,還有8大垂類蓬勃發(fā)展,以及跨業(yè)務多宿主的呈現(xiàn)。龐大的平臺業(yè)務,特別需要建設平臺設計語言。
三、如何構建設計語言?
所有的設計語言,都是服務于業(yè)務頂層戰(zhàn)略發(fā)展。制定設計策略前,需對業(yè)務所在的行業(yè)背景、品牌戰(zhàn)略、用戶群體、流行趨勢有充足的認知。當返工無數(shù)次還是沒方向時,說明以下前四點需要再深入明確。
建立設計原則時(設計語言的標準),不妨嘗試把品牌戰(zhàn)略人格化,由所有人解決所有人問題的愿景,得出產品是一個解決問題的行業(yè)專家的身份,Ta傳達的氣質是簡潔大方的儀表,親和有力的儀態(tài),和專業(yè)權威的素養(yǎng)。
設計語言以現(xiàn)代輕奢風格為基調,它大簡至美、配色和諧、材質考究,以獨具特色的現(xiàn)代格調,構筑起一個充滿質感又十分舒適的直播間,給用戶一致、友好、有品的體驗。
設計動手前,按照風格基調具象化拆解分析必不可少,每一個元素的表達手法都要定位清晰。
1. 至簡 光影藝術圖標體系
在圖標的設計中,我們基于專業(yè)親和的品牌理念延展出2個不同的方向。方案一以直線折紙與光影為視覺元素,呈現(xiàn)一個用心專業(yè)的態(tài)度。方案二以曲線雕刻藝術展現(xiàn)專業(yè)親和的魅力。
圖標體系化,多場景驗證一致性,發(fā)現(xiàn)方案一不夠極致,造型復雜;方案二具備良好的一致性,但破壞了物體固有的結構,影響識別度。
在一致性的前提下,嘗試簡化、提高識別度。巧妙的將光影和結構交匯,極簡到2個圖層呈現(xiàn)主體;語義清晰識別度高;角度漸變光影帶來舒適親和感,15°x角度的精準把控傳達專業(yè)的品牌特性。因此總結出圖標繪制要遵循的法則為識別性、品牌性、愉悅性、一致性。
2. 和諧 家族感的色彩體系
1)標準色
初期直播品牌色繼承百度App品牌色,隨著業(yè)務逐漸中臺化,需要專屬直播色。運用色彩心理學傳遞給人不同的情緒及心理感受,尋找直播的專屬色相,而活力、溫暖的紅色色調,更能體現(xiàn)親和有力的產品氣質。
紅色也有冷暖之分,此時提高色相、飽和度的顆粒度,H色相以350°為起點,以2°遞增或遞減,S飽和度以5°為階梯,生成更多色階(保持相同B明度100),在多界面和真機驗證,得出直播專屬紅(H350 S80 B100),冷暖適中符合平臺屬性。
2)協(xié)調的輔助色
同時,運用色環(huán)建立輔助色彩體系。H色相以350°為起點,以15°遞增或遞減標準,創(chuàng)建24色相色板(保持相同B明度100、S飽和度80);選取柔和與協(xié)調的類似色和鄰近色作為家族色彩主體,調和互補色與對比色,平衡整體色調。因為不同色相的感官明度并不相同,校正每一個輔助色的HSB,達到色彩感官上一致。
3)調色版
一般會有2種方法,一種是使用明度差獲得統(tǒng)一性佳的調色板,優(yōu)點是落地成本低,代碼可直接實現(xiàn);另一種則是微調飽和度和色相,獲得鮮明的色板,可使用在插圖繪制上。
3. 考究 新穎獨特材質
亞克力,這種具有透明質感、光學品質的材質,在設計領域最早應用在家居設計上,被互聯(lián)網(wǎng)設計師熟知是在微軟的概念視頻里,隨之逐漸應用到icon繪制上,亞克力1.0版本背景和主體層次沒拉開,2.0版本更趨向加大不透明度和模糊值,達到清晰舒適又兼具藝術美感。
這種量身打造的稀缺材質運用在運營玩法上,如紅包雨玩法,即能凸顯平臺專業(yè)用心的態(tài)度,又能強化用戶消費行為轉化,助力變現(xiàn)增長。
用戶激勵體系,采用3D玉石潤澤質感+動態(tài)折射光影,體現(xiàn)有內涵不張揚的泛知識調性,凸顯用戶獨特身份感
四、寫在最后
在每一個小元素的創(chuàng)作中,我們都時刻謹記,無論是項目的主題語言、還是產品的設計語言、甚至是生態(tài)的,終點都是傳達企業(yè)文化以及價值觀。從戰(zhàn)略層重構業(yè)務的認知體系,再將品牌戰(zhàn)略人格化,才能夠在茫然期產生真正的篤定感,逐步拆解設計目標和構建符合業(yè)務氣質的設計語言,達到最愉悅的體驗。
作者:百度MEUX,百度移動生態(tài)用戶體驗設計中心,負責百度移動生態(tài)體系的用戶/商業(yè)產品的全鏈路體驗設計。服務的產品包括百度APP、百度搜索、百度百科、百度網(wǎng)盤、百度貼吧、百度商業(yè)產品等。
本文由 @百度MEUX 原創(chuàng)發(fā)布于人人都是產品經理,未經許可,禁止轉載
題圖來自Unsplash,基于CC0協(xié)議
能給個設計體系的鏈接嗎
“在每一個小元素的創(chuàng)作中,我們都時刻謹記,無論是項目的主題語言、還是產品的設計語言、甚至是生態(tài)的,終點都是傳達企業(yè)文化以及價值觀?!边@段話說的也太好啦!
本來不太了解設計語言,但這些結構圖好清晰啊,看懂啦!