寫在前面的話
這是我在設(shè)計網(wǎng)站發(fā)布的第一篇文章,都是工作中總結(jié)出來的經(jīng)驗——拋磚引玉。
如果有不對的地方,還希望多多指出,也好幫助我更好的成長。
花了很多時間去找案例(而且還是要找有品質(zhì)的案例),希望能對大家有所幫助,也希望大家多多點贊支持。
本文主要介紹:已有的品牌元素如何更好的融入界面設(shè)計中,產(chǎn)品界面差異化設(shè)計,凸顯自己品牌的性格、情緒、定位(此方法網(wǎng)頁與手機界面通用)。
不再做同質(zhì)化界面設(shè)計,讓界面設(shè)計活起來。
什么是品牌基因?品牌基因也就是品牌的DNA,它包括品牌核心價值和品牌的個性。不同的品牌基因,是各品牌之間形成差異化的根本原因——本句引自網(wǎng)絡(luò)。
什么是品牌融合?在差異化設(shè)計下的前提下,成功的延用品牌基因在產(chǎn)品不同場景中,能讓用戶一眼就能看出這是你的產(chǎn)品(融合目標(biāo)是用戶在遇到相應(yīng)問題或者需要相應(yīng)產(chǎn)品的時候能迅速想起你的品牌,并進行購買,最終實現(xiàn)價值轉(zhuǎn)化)。
下面為具體解釋
塑造品牌差異:
界面設(shè)計要區(qū)分于競品的差異化設(shè)計(現(xiàn)在市面上的產(chǎn)品界面同質(zhì)化太嚴(yán)重,很多產(chǎn)品與竟品沒有任何差異化,沒有自己的特色)。
增強品牌感知:
用戶使用平臺之后印象深刻,形成記憶點。即便是不看品牌標(biāo)識,從界面中也能快速進行品牌識別。
強化品牌定位:
用戶使用中能輕松清楚的知道平臺是做什么的,與競品產(chǎn)品定位上的差異點、功能上的差一點。
引起用戶共鳴:
在用戶心中召喚出相應(yīng)的情感,引起用戶共鳴。比如:keep的“自律給我自由”及其在頁面中傳達(dá)出的這種情緒。
提升價值轉(zhuǎn)化 — 也是品牌融入的最終目的:
因為前面幾個步驟的鋪墊,在用戶想解決一些問題的時候,或需要相應(yīng)產(chǎn)品的時候,能迅速想起你的產(chǎn)品,并進而購買,完成價值上轉(zhuǎn)化。
下面為具體解釋
產(chǎn)品整體梳理:
梳理現(xiàn)有產(chǎn)品的所有可以進行品牌基因融入的場景。
應(yīng)用場景收集:
產(chǎn)品界面整體梳理完成后,進行應(yīng)用場景的提?。ㄈ纾喊媸?、banner、圖標(biāo)等)。
品牌元素提?。?/strong>
從產(chǎn)品品牌設(shè)計中提取可融合的元素,包括(logo元素:色彩、弧度等品牌故事:定位、性格等)。
具體場景融合:
將以上提取的品牌元素具體應(yīng)用到的梳理出來的場景當(dāng)中,下文會做具體解釋。
以下分三個維度來具體舉例說明
——以下僅做應(yīng)用方式的舉例說明,不做具體設(shè)計。
一:應(yīng)用廣度
通過對產(chǎn)品現(xiàn)有頁面整體梳理,得到如下場景:
• 情緒/性格
• 色彩
• 版式
• banner
• 可點擊元素
• icon
• 情感化設(shè)計(異常頁面、缺省頁面等)
• 頁面懸浮
• 頁面配圖
• 動效設(shè)計
• 字體設(shè)計(本文暫不做字體融入的分析)
二:品牌元素
品牌元素融合,遵循大統(tǒng)一,局部戰(zhàn)略調(diào)整的原則,進行如下元素的提取。
• logo元素提取
# 色彩 —— 品牌色
# 弧線 —— logo中應(yīng)用的弧線:弧形、方形等
# 關(guān)鍵符號 —— logo中應(yīng)用的圖形:圓形、星型、菱形等
• 品牌定位提取
# 品牌定位 —— 例如:你的產(chǎn)品如果主打便宜(拼多多),界面中中就要凸顯出便宜、劃算等。
# 品牌故事 —— 例如:考拉主打自營,品質(zhì)保證+貨源保障,界面中就凸顯了高端、品質(zhì)感。
# 品牌情緒/性格 —— 例如:keep傳達(dá)的自律、堅持不懈,界面中凸顯了硬朗、炫酷等感覺。
三:應(yīng)用深度
通過前面的應(yīng)用廣度和品牌元素的融合,這部分將通過舉例介紹,品牌元素如何融入到具體的場景中。
1、情緒/性格的融入——品牌想要傳達(dá)給用戶什么理念、情緒、性格等
這是一個室內(nèi)裝修相關(guān)的網(wǎng)站。傳達(dá)出:自然、高端、品質(zhì)感
這是一部人工智能相關(guān)的電影。傳達(dá)出:科技、懸疑、神秘感
這是一個表演相關(guān)的網(wǎng)站。傳達(dá)出:復(fù)古、熱鬧、戲劇性
這是一個汽車相關(guān)的網(wǎng)站。傳達(dá)出:科技、品質(zhì)、高端感
2、色彩融入——品牌色彩、及色彩對應(yīng)的情緒
加入了灰色的紅色,熱烈中有穩(wěn)重,品牌顏色深入人心。
相信不用過多解釋,大家對宜家的品牌色也是記憶深刻的。
品牌色看完之后印象深刻,機械中帶有趣味性。
紫色與藍(lán)色融合,很特別色彩,視覺上很舒適,記憶深刻。
3、版式融入——將logo的弧線或者關(guān)鍵符號應(yīng)用到界面版式設(shè)計中
logo中的棱角直接應(yīng)用在版頭中,同時帶有指向性,指引用戶下拉查看更多。
將logo中的菱形元素,在頁面版式設(shè)計中應(yīng)用的淋漓盡致
logo中的弧線,在頁面版式中多次使用,網(wǎng)頁整體設(shè)計統(tǒng)一,記憶深刻。
logo的弧線元素,在整個網(wǎng)站設(shè)計中多次應(yīng)用,重復(fù)加深品牌印象。
4、banner融入——在banner中放入logo、或logo衍生圖形
進入網(wǎng)站第一眼看到的就是logo及品牌功能描述,給用戶留下深刻的第一印象。
在首頁中將品牌 logo放大顯示,印象深刻。
網(wǎng)易考拉logo衍生圖形在banner中的應(yīng)用。
明日之子logo衍生圖形在banner中的應(yīng)用。
5、可點擊元素融入——按鈕等頁面可點區(qū)域
11街logo棱角在頁面控件中的應(yīng)用。
logo中方形元素,在頁面可點擊區(qū)域中的應(yīng)用。
logo中圓形弧線,在頁面可點擊元素的應(yīng)用。
logo中圓形弧線,在頁面按鈕等可點擊元素上的應(yīng)用。
6、圖標(biāo)融入——logo元素、色彩等的融入
網(wǎng)易考拉,logo弧線在整體圖標(biāo)設(shè)計中的應(yīng)用
logo圖形元素在界面圖標(biāo)中的重復(fù)應(yīng)用。
11街logo棱角在圖標(biāo)中的應(yīng)用,具有強烈統(tǒng)一感、品質(zhì)感。
優(yōu)酷APP圖標(biāo)中,應(yīng)用了logo的色彩及圓潤、趣味感。
7、動效設(shè)計融入——頁面下拉、轉(zhuǎn)場、刷新等(具體動效請點擊網(wǎng)址詳細(xì)查看)
該網(wǎng)站是個很有趣味性的網(wǎng)站,從進入網(wǎng)站到下拉查看更多內(nèi)容,整個過程中都伴隨各種有趣的動效設(shè)計,印象深刻。
網(wǎng)易考拉的加載動畫,應(yīng)用了logo圖形,趣味融合,詳細(xì)請點擊網(wǎng)址查看。
8、情感化——異常狀態(tài)、缺省頁、插畫、配圖等(品牌圖形 or 品牌色彩 or 品牌性格的融合)
logo色彩及弧線在頁面插畫中的應(yīng)用,強烈的統(tǒng)一感和品質(zhì)感。
logo圖形及棱角在頁面插圖中的應(yīng)用。
品牌性格及情緒在404頁面中的應(yīng)用,科技及趣味感明顯。
缺省頁面插畫中品牌感的塑造,保持了統(tǒng)一感的同時,又具備了美觀度。
9、懸浮融入——頁面中的懸浮按鈕等元素與品牌圖形或品牌色彩的融合
阿里AI平臺中,右側(cè)懸浮與品牌色的融合。
logo元素在頁面懸浮按鈕中的重復(fù)應(yīng)用。
10、頁面配圖融入——此處融入的是符合品牌定位的:氣質(zhì)、情緒、性格(不要為了配圖而配圖)
整體黑白色配圖,與整個網(wǎng)站氣質(zhì)溫和。
配圖凸顯出了:女性、品質(zhì)、自然、舒適的氣質(zhì)。
配圖清晰的傳達(dá)出了品牌定位,讓用戶一眼就知道了該網(wǎng)站是食品相關(guān)的網(wǎng)站。同時也是很有品質(zhì),安全的食品。
配圖凸顯出了家具網(wǎng)站的:高端、品質(zhì)、簡約等氣質(zhì)。
實際應(yīng)用過程中:
依據(jù)自己產(chǎn)品定位、綜合產(chǎn)品的用戶體驗,靈活運營。切忌強行融合。
找有品質(zhì)的圖和網(wǎng)站真的很難,碼字排版到半夜2點也是不易。
還請不吝賞贊,大佬的鼓勵就是我前進的最大動力!