網(wǎng)易嚴(yán)選APP品牌設(shè)計
品牌設(shè)計,是品牌之間形成差異化的根本原因。本文主要談網(wǎng)易嚴(yán)選APP,在品牌設(shè)計方面地嘗試,通過看它的設(shè)計來向大家展示如何做出自己有品牌感的好作品。
品牌設(shè)計,是品牌之間形成差異化的根本原因。它可以讓用戶明確、清晰地記住并識別品牌的個性,是驅(qū)動用戶認(rèn)同、喜歡乃至愛上一個品牌的主要力量。
拿保時捷汽車前車燈的設(shè)計為例:這種特殊的外觀設(shè)計被嚴(yán)格地應(yīng)用到所有保時捷的汽車產(chǎn)品當(dāng)中,就算遮住品牌也能一眼分辨出該品牌,這就是品牌的力量。
回歸到我們視覺設(shè)計,我們在接需求的時候,經(jīng)常會聽到運(yùn)營及產(chǎn)品對頁面設(shè)計的要求是品牌感,那么怎么樣設(shè)計才有品牌感?
下面就談?wù)劸W(wǎng)易嚴(yán)選APP,在品牌設(shè)計方面地嘗試,在這之前我們先來了解下網(wǎng)易嚴(yán)選。
一、品牌分析
網(wǎng)易嚴(yán)選,是網(wǎng)易自營類家居生活品牌APP,秉承嚴(yán)謹(jǐn)?shù)膽B(tài)度甄選天下優(yōu)品。嚴(yán)表示嚴(yán)謹(jǐn)?shù)膽B(tài)度,選是甄選,甄選天下好物。
二、設(shè)計原則
網(wǎng)易嚴(yán)選的品牌理念是“好的生活,沒那么貴”??梢韵胂笠韵聢鼍埃禾稍趹腥松嘲l(fā)上悠閑的看著書,坐在窗邊愜意的喝著茶,抑或是靠在陽臺上享受午后的陽光。他們不緊不慢,追求品質(zhì),享受寧靜。
所以品牌關(guān)鍵字是:品質(zhì)、生活、寧靜。從品牌關(guān)鍵字提取到的設(shè)計語言是細(xì)節(jié)化、場景化、簡約化。
細(xì)節(jié)感是指精致,比如:商品的光影,產(chǎn)品中的對齊法則等。場景化講究的是自然和諧統(tǒng)一,簡約化是去除一切多余的元素,只留下素材或者產(chǎn)品本身。?
三、品牌設(shè)計
了解了品牌性格,品牌關(guān)鍵字及品牌設(shè)計語言,我們將這些應(yīng)用到具體的設(shè)計中,包括品牌logo、版式、圖標(biāo)、動效、圖片等。
1. logo設(shè)計
品牌logo以形象、直觀的形式向消費(fèi)者傳達(dá)品牌信息,以創(chuàng)造品牌認(rèn)知、品牌聯(lián)想和消費(fèi)者的品牌依賴,從而給品牌帶來更多價值。
嚴(yán)選logo設(shè)計結(jié)合了小楷的輕重協(xié)橫,質(zhì)樸平淡及刻本的一絲不茍,精雕細(xì)琢,表現(xiàn)出對產(chǎn)品的選擇保持嚴(yán)謹(jǐn)?shù)膽B(tài)度,對產(chǎn)品服務(wù)保持無限的追求。由于網(wǎng)易logo品牌色是紅色,且從色彩心理學(xué)角度出發(fā),紅色更容易刺激購物,所以顏色繼承了網(wǎng)易品牌的基因。
從品牌色延伸出來一些其它顏色,以便適用在不同的場景中,如:活動色、成功色、會員色以及不同程度的灰色。
輔助圖形是品牌不可或缺的一部分,它能更好地配合品牌logo,傳遞品牌價值,從設(shè)計上也起到調(diào)和的作用。當(dāng)然也可以單獨(dú)作為背景底紋、輔助元素等場景運(yùn)用,既豐富整體內(nèi)容,又起到強(qiáng)化品牌的作用。
如圖所示:就是將品牌logo進(jìn)行拆分重組而成的輔助圖案及應(yīng)用場景。
在app個人中心中運(yùn)用的輔助圖形。
2. 版式設(shè)計
嚴(yán)選app首頁版面采用兩欄布局進(jìn)行設(shè)計,在內(nèi)容的展現(xiàn)上做到適度克制,從而簡化了內(nèi)容,再配以淺色背景或者大面積的白色,把核心展示都留給了商品本身,整體給人簡約、寧靜的感受,不強(qiáng)制,不給人壓迫感。相比其他電商app的四欄乃至更多的內(nèi)容呈現(xiàn),從視覺上做到了較強(qiáng)的辨識度。
3. 圖標(biāo)設(shè)計
在界面中在,icon圖標(biāo)是界面中不可輕視一個品牌設(shè)計環(huán)節(jié),也是造就品牌感較直接的方式。
底欄icon
嚴(yán)選底欄icon的圖標(biāo)設(shè)計均以家居物品為原型而衍化而來,給人以場景感,真實感且生活化的感受,傳達(dá)了品牌價值。
為空設(shè)計
嚴(yán)選為空設(shè)計以生活中日常的元素為原型,并采用手繪線條斷開的樣式,加上塊狀的陰影及修飾等元素,營造場景化及畫面感,為品牌設(shè)計帶來了一絲情感。
5. 動效設(shè)計
在app中做動畫設(shè)計的優(yōu)勢在于生動性地傳達(dá)品牌個性。
登錄頁動效設(shè)計
在登錄頁及明星商品頁大面積留白空間的商品圖上都加入了自然的投影,給人營造簡約中帶著場景感,細(xì)節(jié)感,無形之中透露著品質(zhì),生活,寧靜。
loading設(shè)計
loading的設(shè)計創(chuàng)意來源于打開包裹時,商品呈現(xiàn)在面前的驚喜感以及生活的儀式感。所以設(shè)計的思路是隨著手向下拉,箱子緩緩打開,松開手的時候彈出“好的生活,沒那么貴”。
這里寓意嚴(yán)選有你想要的商品,且品質(zhì)及服務(wù)給用戶帶來驚喜,從而達(dá)到了品牌價值的傳達(dá)。
6. 圖片設(shè)計
心理學(xué)研究證明:圖片比文字更直觀地、更優(yōu)先地傳達(dá),所以在APP中圖片的品質(zhì)直接傳遞著品牌的感受。
單品設(shè)計
在產(chǎn)品設(shè)計中,既要體現(xiàn)品牌的氣質(zhì),體現(xiàn)品牌的品質(zhì),又要保證頁面不平,所以在登錄頁及明星商品頁大面積留白空間的商品圖上都加入了自然的光影效果,給人營造簡約中帶著的場景感及細(xì)節(jié)感,無形之中透露著品質(zhì),生活,寧靜。
這是運(yùn)用在登錄頁及單品詳情頁的具體設(shè)計頁面。
SKU規(guī)范
電商里面最難部分就是商品圖的控制,需要對每個商品圖拍攝、角度、色彩都控制的很好,除此之外對商品在頁面的呈現(xiàn)也做了規(guī)范處理。
- 所有產(chǎn)品放置在米字格園內(nèi),分為大圓、小圓、迷你圓,分別對應(yīng)偏大、常規(guī)、偏小尺寸。
- 產(chǎn)品角度以15度為基礎(chǔ)變量單位。如15、30、45等。
下面是一些具體運(yùn)用實例:
四、結(jié)束語
app視覺設(shè)計中還有很多可以進(jìn)行品牌設(shè)計的地方,這里就說到這里。以上大部分案例均來自網(wǎng)易嚴(yán)選app設(shè)計項目經(jīng)驗,望共勉。
最后希望這次總結(jié)能對大家有所幫助,做出自己有品牌感的好作品,如有不當(dāng)之處,歡迎大家來一起交流。
作者:董俊豪,網(wǎng)易嚴(yán)選資深視覺設(shè)計師,目前主要負(fù)責(zé)網(wǎng)易嚴(yán)選APP端視覺設(shè)計,做過web端設(shè)計、移動端設(shè)計、印刷設(shè)計,目前熱衷于品牌設(shè)計,朝著全鏈路設(shè)計師的方向發(fā)展。
本文來源于人人都是產(chǎn)品經(jīng)理合作媒體@網(wǎng)易UEDC,作者@ 董俊豪。
題圖作者提供
網(wǎng)易嚴(yán)選的忠實粉絲,剛開始就是被嚴(yán)選的高品質(zhì)高性價比吸引,結(jié)果一入嚴(yán)選深似海,從此不能自拔,每周都要看看有沒有值得買的東西。品牌設(shè)計感很有辨識度,更多專注于產(chǎn)品和服務(wù)本身,看似簡潔卻不簡單,繼續(xù)加油~
產(chǎn)品角度。。這個具體是什么意思呢,是指產(chǎn)品的正面偏離的角度嗎?
好酷
好酷,那個東西的擺放原來還有這些講究,學(xué)到了
我感覺觀點(diǎn)很酷,學(xué)到很多干貨。但是在版式設(shè)計那一塊我稍微有點(diǎn)個人觀點(diǎn)。網(wǎng)易嚴(yán)選的產(chǎn)品屬于SKU,數(shù)量小,自營無需廣告位,但是淘寶等等屬于非SKU,數(shù)量大,非自營需要眾多廣告位引流以及廣告收入。所以這是和網(wǎng)易嚴(yán)選設(shè)計邏輯的最大不同點(diǎn)。
看了之后,迫不及待的下載體驗,我對網(wǎng)易的產(chǎn)品真的喜歡的不得了,尤其是視覺效果,很喜歡,克制又高級
給Joy買鞋的時候下載的嚴(yán)選,那是一次很舒服的購物體驗,沒想到設(shè)計過程如此用心和規(guī)范
哈哈
哈哈
介紹品牌設(shè)計的同時順便把品牌推廣也做了。不說了,我要去下載看看了
學(xué)習(xí)了,喜歡。嚴(yán)選的設(shè)計我覺得是目前電商品牌里面最用心的,最考慮用戶群體的,也是最認(rèn)真的設(shè)計,學(xué)習(xí),學(xué)習(xí)。