您的位置:首頁>設計>正文

實戰!網易嚴選APP的品牌設計過程全揭秘

網易UEDC – 董俊豪 :品牌設計, 是品牌之間形成差異化的根本原因。 它可以讓用戶明確、清晰地記住並識別品牌的個性, 是驅動用戶認同、喜歡乃至愛上一個品牌的主要力量。 拿保時捷汽車前車燈的設計為例, 這種特殊的外觀設計被嚴格地應用到所有保時捷的汽車產品當中, 就算遮住品牌也能一眼分辨出該品牌, 這就是品牌的力量。

回歸到我們視覺設計, 我們在接需求的時候, 經常會聽到運營及產品對頁面設計的要求是品牌感, 那麼怎麼樣設計才有品牌感?下面就談談網易嚴選App, 在品牌設計方面的嘗試, 在這之前我們先來瞭解下網易嚴選。

品牌分析

網易嚴選, 是網易自營類家居生活品牌App, 秉承嚴謹的態度甄選天下優品。 嚴表示嚴謹的態度, 選是甄選, 甄選天下好物。

設計原則

網易嚴選的品牌理念是「好的生活, 沒那麼貴」。 可以想像以下場景,

躺在懶人沙發上悠閒的看著書, 坐在窗邊愜意的喝著茶, 抑或是靠在陽臺上享受午後的陽光。 他們不緊不慢, 追求品質, 享受寧靜, 所以品牌關鍵字是品質、生活、寧靜。 從品牌關鍵字提取到的設計語言是細節化、場景化、簡約化。

細節感是指精緻, 比如商品的光影,

產品中的對齊法則等。 場景化講究的是自然和諧統一;簡約化是去除一切多餘的元素, 只留下素材或者產品本身。

品牌設計

瞭解了品牌性格, 品牌關鍵字及品牌設計語言, 我們將這些應用到具體的設計中, 包括品牌logo、版式、圖示、動效、圖片等。

1.Logo設計

品牌Logo以形象、直觀的形式向消費者傳達品牌資訊, 以創造品牌認知、品牌聯想和消費者的品牌依賴, 從而給品牌帶來更多價值。

嚴選Logo設計結合了小楷的輕重協衡, 質樸平淡及刻本的一絲不苟, 精雕細琢, 表現出對產品的選擇保持嚴謹的態度, 對產品服務保持無限的追求。

由於網易logo品牌色是紅色, 且從色彩心理學角度出發, 紅色更容易刺激購物。 所以顏色繼承了網易品牌的基因。

從品牌色延伸出來一些其它顏色, 以便適用在不同的場景中, 如活動色, 成功色, 會員色以及不同程度的灰色。

輔助圖形是品牌不可或缺的一部分。 它能更好地配合品牌logo,傳遞品牌價值,從設計上也起到調和的作用。當然也可以單獨作為背景網底、輔助元素等場景運用,既豐富整體內容,又起到強化品牌的作用。如圖所示就是將品牌Logo進行拆分重組而成的輔助圖案及應用場景。

在App個人中心中運用的輔助圖形。

2.版式設計

嚴選App首頁版面採用兩欄佈局進行設計,在內容的展現上做到適度克制,從而簡化了內容,再配以淺色背景或者大面積的白色,把核心展示都留給了商品本身,整體給人簡約,寧靜的感受,不強制,不給人壓迫感,相比其他電商App的四欄乃至更多的內容呈現,從視覺上做到了較強的辨識度。

3.圖示設計

在介面中,icon圖示是不可輕視一個品牌設計環節,也是造就品牌感較直接的方式。

底欄icon

嚴選底欄icon的圖示設計均以家居物品為原型衍化而來,給人以場景感,真實且生活化的感受,傳達了品牌價值。

為空設計

嚴選為空設計以生活中日常的元素為原型,並採用手繪線條斷開的樣式,加上塊狀的陰影及修飾等元素,營造場景化及畫面感,為品牌設計帶來了一絲情感。

4.動效設計

在App中做動效設計的優勢在於生動性地傳達品牌個性。

登錄頁動效設計

在登錄頁及明星商品頁大面積留白空間的商品圖上都加入了自然的投影,給人營造簡約中帶著場景感,細節感,無形之中透露著品質,生活,寧靜。

Loading設計

Loading的設計創意來源於打開包裹時,商品呈現在面前的驚喜感以及生活的儀式感。所以設計的思路是隨著手向下拉,箱子緩緩打開,鬆開手的時候彈出「好的生活,沒那麼貴」。這裡寓意嚴選有你想要的商品,且品質及服務給使用者帶來驚喜,從而達到了品牌價值的傳達。

5.圖片設計

心理學研究證明,圖片比文字更直觀地、更優先地傳達,所以在App中圖片的品質直接傳遞著品牌的感受。

單品設計

在產品設計中,既要體現品牌的氣質,體現品牌的品質,又要保證頁面不平,所以在登錄頁及明星商品頁大面積留白空間的商品圖上都加入了自然的光影效果,給人營造簡約中帶著的場景感及細節感,無形之中透露著品質,生活,寧靜。

這是運用在登錄頁及單品詳情頁的具體設計頁面。

SKU規範

電商裡面最難部分就是商品圖的控制,需要對每個商品圖拍攝,角度,色彩都控制的很好,除此之外對商品在頁面的呈現也做了規範處理:

所有產品放置在米字格園內,分為大圓、小圓、迷你圓,分別對應偏大、常規、偏小尺寸。

產品角度以15度為基礎變數單位。如15、30、45等。

下面是一些具體運用實例:

結束語

App視覺設計中還有很多可以進行品牌設計的地方,這裡就說到這裡。以上大部分案例均來自網易嚴選App設計專案經驗,望共勉。

最後希望這次總結能對大家有所幫助,做出自己有品牌感的好作品,如有不當之處,歡迎大家來一起交流。

------

作者的微信公眾號:「網易UEDC」

商業轉載請聯繫作者獲得授權,非商業轉載請注明出處!

關注優設品牌號微信號:uisdcer & 內容號微信號:youshege;推送領域專業知識掌握優設新品動態和50萬設計師獲取新鮮知識

它能更好地配合品牌logo,傳遞品牌價值,從設計上也起到調和的作用。當然也可以單獨作為背景網底、輔助元素等場景運用,既豐富整體內容,又起到強化品牌的作用。如圖所示就是將品牌Logo進行拆分重組而成的輔助圖案及應用場景。

在App個人中心中運用的輔助圖形。

2.版式設計

嚴選App首頁版面採用兩欄佈局進行設計,在內容的展現上做到適度克制,從而簡化了內容,再配以淺色背景或者大面積的白色,把核心展示都留給了商品本身,整體給人簡約,寧靜的感受,不強制,不給人壓迫感,相比其他電商App的四欄乃至更多的內容呈現,從視覺上做到了較強的辨識度。

3.圖示設計

在介面中,icon圖示是不可輕視一個品牌設計環節,也是造就品牌感較直接的方式。

底欄icon

嚴選底欄icon的圖示設計均以家居物品為原型衍化而來,給人以場景感,真實且生活化的感受,傳達了品牌價值。

為空設計

嚴選為空設計以生活中日常的元素為原型,並採用手繪線條斷開的樣式,加上塊狀的陰影及修飾等元素,營造場景化及畫面感,為品牌設計帶來了一絲情感。

4.動效設計

在App中做動效設計的優勢在於生動性地傳達品牌個性。

登錄頁動效設計

在登錄頁及明星商品頁大面積留白空間的商品圖上都加入了自然的投影,給人營造簡約中帶著場景感,細節感,無形之中透露著品質,生活,寧靜。

Loading設計

Loading的設計創意來源於打開包裹時,商品呈現在面前的驚喜感以及生活的儀式感。所以設計的思路是隨著手向下拉,箱子緩緩打開,鬆開手的時候彈出「好的生活,沒那麼貴」。這裡寓意嚴選有你想要的商品,且品質及服務給使用者帶來驚喜,從而達到了品牌價值的傳達。

5.圖片設計

心理學研究證明,圖片比文字更直觀地、更優先地傳達,所以在App中圖片的品質直接傳遞著品牌的感受。

單品設計

在產品設計中,既要體現品牌的氣質,體現品牌的品質,又要保證頁面不平,所以在登錄頁及明星商品頁大面積留白空間的商品圖上都加入了自然的光影效果,給人營造簡約中帶著的場景感及細節感,無形之中透露著品質,生活,寧靜。

這是運用在登錄頁及單品詳情頁的具體設計頁面。

SKU規範

電商裡面最難部分就是商品圖的控制,需要對每個商品圖拍攝,角度,色彩都控制的很好,除此之外對商品在頁面的呈現也做了規範處理:

所有產品放置在米字格園內,分為大圓、小圓、迷你圓,分別對應偏大、常規、偏小尺寸。

產品角度以15度為基礎變數單位。如15、30、45等。

下面是一些具體運用實例:

結束語

App視覺設計中還有很多可以進行品牌設計的地方,這裡就說到這裡。以上大部分案例均來自網易嚴選App設計專案經驗,望共勉。

最後希望這次總結能對大家有所幫助,做出自己有品牌感的好作品,如有不當之處,歡迎大家來一起交流。

------

作者的微信公眾號:「網易UEDC」

商業轉載請聯繫作者獲得授權,非商業轉載請注明出處!

關注優設品牌號微信號:uisdcer & 內容號微信號:youshege;推送領域專業知識掌握優設新品動態和50萬設計師獲取新鮮知識

Next Article
喜欢就按个赞吧!!!
点击关闭提示