設(shè)計(jì)實(shí)戰(zhàn)！網(wǎng)易嚴(yán)選APP的品牌設(shè)計(jì)過(guò)程全揭秘

網(wǎng)易UEDC – 董俊豪 ：品牌設(shè)計(jì)，是品牌之間形成差異化的根本緣故原由。它可以讓用戶明確、清晰地記住并識(shí)別品牌的個(gè)性，是驅(qū)動(dòng)用戶認(rèn)同、喜好乃至愛(ài)上一個(gè)品牌的重要力量。拿保時(shí)捷汽車前車燈的設(shè)計(jì)為例，這種特別的表面設(shè)計(jì)被嚴(yán)酷地應(yīng)用到所有保時(shí)捷的汽車產(chǎn)品當(dāng)中，就算遮住品牌也能一眼分辨出該品牌，這就是品牌的力量。

回歸到我們視覺(jué)設(shè)計(jì)，我們?cè)诮有枨蟮臅r(shí)候，經(jīng)常會(huì)聽(tīng)到運(yùn)營(yíng)及產(chǎn)品對(duì)網(wǎng)頁(yè)設(shè)計(jì)的要求是品牌感，那么怎么樣設(shè)計(jì)才有品牌感？下面就談?wù)劸W(wǎng)易嚴(yán)選App，在品牌設(shè)計(jì)方面的嘗試，在這之前我們先來(lái)了解下網(wǎng)易嚴(yán)選。

品牌分析

網(wǎng)易嚴(yán)選，是網(wǎng)易自營(yíng)類家居生活品牌App，秉承嚴(yán)謹(jǐn)?shù)膽B(tài)度甄選天下優(yōu)品。嚴(yán)透露表現(xiàn)嚴(yán)謹(jǐn)?shù)膽B(tài)度，選是甄選，甄選天下好物。

設(shè)計(jì)原則

網(wǎng)易嚴(yán)選的品牌理念是「好的生活，沒(méi)那么貴」?？梢韵胂笠粤司志?，躺在懶人沙發(fā)上清閑的看著書，坐在窗邊滿意的喝著茶，抑或是靠在陽(yáng)臺(tái)上享受午后的陽(yáng)光。他們不緊不慢，尋求品質(zhì)，享受寧?kù)o，所以品牌關(guān)鍵字是品質(zhì)、生活、寧?kù)o。從品牌關(guān)鍵字提取到的設(shè)計(jì)語(yǔ)言是細(xì)節(jié)化、場(chǎng)景化、簡(jiǎn)約化。

細(xì)節(jié)感是指細(xì)膩，比如商品的光影，產(chǎn)品中的對(duì)齊法則等。場(chǎng)景化講究的是天然協(xié)調(diào)同一；簡(jiǎn)約化是去除統(tǒng)統(tǒng)多余的元素，只留下素材或者產(chǎn)品自己。

品牌設(shè)計(jì)

了解了品牌性格，品牌關(guān)鍵字及品牌設(shè)計(jì)語(yǔ)言，我們將這些應(yīng)用到詳細(xì)的設(shè)計(jì)中，包括品牌logo、版式、圖標(biāo)、動(dòng)效、圖片等。

1.Logo設(shè)計(jì)

品牌Logo以形象、直觀的情勢(shì)向消耗者傳達(dá)品牌信息，以創(chuàng)造品牌認(rèn)知、品牌聯(lián)想和消耗者的品牌依靠，從而給品牌帶來(lái)更多價(jià)值。

嚴(yán)選Logo設(shè)計(jì)結(jié)合了小楷的輕重協(xié)衡，淳厚平淡及刻本的一絲不茍，精雕細(xì)琢，體現(xiàn)出對(duì)產(chǎn)品的選擇保持嚴(yán)謹(jǐn)?shù)膽B(tài)度，對(duì)產(chǎn)品服務(wù)保持無(wú)窮的尋求。因?yàn)榫W(wǎng)易logo品牌色是紅色，且從色彩生理學(xué)角度出發(fā)，紅色更容易刺激購(gòu)物。所以顏色繼續(xù)了網(wǎng)易品牌的基因。

從品牌色延長(zhǎng)出來(lái)一些其它顏色，以便適用在不同的場(chǎng)景中，如活動(dòng)色，成功色，會(huì)員色以及不同程度的灰色。

輔助圖形是品牌不可或缺的一部分。它能更好地配合品牌logo，傳遞品牌價(jià)值，從設(shè)計(jì)上也起到調(diào)和的作用。當(dāng)然也可以單獨(dú)作為背景底紋、輔助元素等場(chǎng)景運(yùn)用，既雄厚團(tuán)體內(nèi)容，又起到強(qiáng)化品牌的作用。如圖所示就是將品牌Logo進(jìn)行拆分重組而成的輔助圖案及應(yīng)用場(chǎng)景。

在App小我中間中運(yùn)用的輔助圖形。

2.版式設(shè)計(jì)

嚴(yán)選App首頁(yè)版面采用兩欄布局進(jìn)行設(shè)計(jì)，在內(nèi)容的顯現(xiàn)上做到適度脅制，從而簡(jiǎn)化了內(nèi)容，再配以淺色背景或者大面積的白色，把核心展示都留給了商品自己，團(tuán)體給人簡(jiǎn)約，寧?kù)o的感受，不強(qiáng)制，不給人克制感，相比其他電商App的四欄乃至更多的內(nèi)容呈現(xiàn)，從視覺(jué)上做到了較強(qiáng)的辨識(shí)度。

3.圖標(biāo)設(shè)計(jì)

在界面中，icon圖標(biāo)是不可輕視一個(gè)品牌設(shè)計(jì)環(huán)節(jié)，也是作育品牌感較直接的體例。

底欄icon

嚴(yán)選底欄icon的圖標(biāo)設(shè)計(jì)均以家居物品為原型衍化而來(lái)，給人以場(chǎng)景感，真實(shí)且生活化的感受，傳達(dá)了品牌價(jià)值。

為空設(shè)計(jì)

嚴(yán)選為空設(shè)計(jì)以生活中日常的元素為原型，并采用手繪線條斷開(kāi)的樣式，加上塊狀的陰影及修飾等元素，營(yíng)造場(chǎng)景化及畫面感，為品牌設(shè)計(jì)帶來(lái)了一絲情感。

4.動(dòng)效設(shè)計(jì)

在App中做動(dòng)效設(shè)計(jì)的上風(fēng)在于生動(dòng)性地傳達(dá)品牌個(gè)性。

登錄頁(yè)動(dòng)效設(shè)計(jì)

在登錄頁(yè)及明星商品頁(yè)大面積留白空間的商品圖上都加入了天然的投影，給人營(yíng)造簡(jiǎn)約中帶著場(chǎng)景感，細(xì)節(jié)感，無(wú)形之中吐露著品質(zhì)，生活，寧?kù)o。

Loading設(shè)計(jì)

Loading的設(shè)計(jì)創(chuàng)意來(lái)源于打開(kāi)包裹時(shí)，商品呈如今面前的驚喜感以及生活的儀式感。所以設(shè)計(jì)的思路是隨動(dòng)手向下拉，箱子徐徐打開(kāi)，松開(kāi)手的時(shí)候彈出「好的生活，沒(méi)那么貴」。這里寓意嚴(yán)選有你想要的商品，且品質(zhì)及服務(wù)給用戶帶來(lái)驚喜，從而達(dá)到了品牌價(jià)值的傳達(dá)。

5.圖片設(shè)計(jì)

生理學(xué)研究證實(shí)，圖片比筆墨更直觀地、更優(yōu)先地傳達(dá)，所以在App中圖片的品質(zhì)直接傳遞著品牌的感受。

單品設(shè)計(jì)

在產(chǎn)品設(shè)計(jì)中，既要表現(xiàn)品牌的氣質(zhì)，表現(xiàn)品牌的品質(zhì)，又要保證網(wǎng)頁(yè)不平，所以在登錄頁(yè)及明星商品頁(yè)大面積留白空間的商品圖上都加入了天然的光影結(jié)果，給人營(yíng)造簡(jiǎn)約中帶著的場(chǎng)景感及細(xì)節(jié)感，無(wú)形之中吐露著品質(zhì)，生活，寧?kù)o。

這是運(yùn)用在登錄頁(yè)及單品詳情頁(yè)的詳細(xì)設(shè)計(jì)網(wǎng)頁(yè)。

SKU規(guī)范

電商里面最難部分就是商品圖的控制，必要對(duì)每個(gè)商品圖拍攝，角度，色彩都控制的很好，除此之外對(duì)商品在網(wǎng)頁(yè)的呈現(xiàn)也做了規(guī)范處理：

• 所有產(chǎn)品放置在米字格園內(nèi)，分為大圓、小圓、迷你圓，分別對(duì)應(yīng)偏大、常規(guī)、偏小尺寸。
• 產(chǎn)品角度以15度為基礎(chǔ)變量單位。如15、30、45等。

下面是一些詳細(xì)運(yùn)用實(shí)例：

結(jié)束語(yǔ)

App視覺(jué)設(shè)計(jì)中還有許多可以進(jìn)行品牌設(shè)計(jì)的地方，這里就說(shuō)到這里。以上大部分案例均來(lái)自網(wǎng)易嚴(yán)選App設(shè)計(jì)項(xiàng)目經(jīng)驗(yàn)，望共勉。

最后盼望這次總結(jié)能對(duì)大家有所幫助，做出本身有品牌感的好作品，如有不當(dāng)之處，迎接大家來(lái)一路交流。

迎接關(guān)注作者「網(wǎng)易UEDC」的微信公眾號(hào)：