寫在前面的話
這是我在設(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)品（融合目標是用戶在遇到相應(yīng)問題或者需要相應(yīng)產(chǎn)品的時候能迅速想起你的品牌，并進行購買，最終實現(xiàn)價值轉(zhuǎn)化）。
下面為具體解釋
塑造品牌差異：
界面設(shè)計要區(qū)分于競品的差異化設(shè)計（現(xiàn)在市面上的產(chǎn)品界面同質(zhì)化太嚴重，很多產(chǎn)品與竟品沒有任何差異化，沒有自己的特色）。
增強品牌感知：
用戶使用平臺之后印象深刻，形成記憶點。即便是不看品牌標識，從界面中也能快速進行品牌識別。
強化品牌定位：
用戶使用中能輕松清楚的知道平臺是做什么的，與競品產(chǎn)品定位上的差異點、功能上的差一點。
引起用戶共鳴：
在用戶心中召喚出相應(yīng)的情感，引起用戶共鳴。比如：keep的“自律給我自由”及其在頁面中傳達出的這種情緒。
提升價值轉(zhuǎn)化 — 也是品牌融入的最終目的：
因為前面幾個步驟的鋪墊，在用戶想解決一些問題的時候，或需要相應(yīng)產(chǎn)品的時候，能迅速想起你的產(chǎn)品，并進而購買，完成價值上轉(zhuǎn)化。
下面為具體解釋
產(chǎn)品整體梳理：
梳理現(xiàn)有產(chǎn)品的所有可以進行品牌基因融入的場景。
應(yīng)用場景收集：
產(chǎn)品界面整體梳理完成后，進行應(yīng)用場景的提?。ㄈ纾喊媸?、banner、圖標等）。
品牌元素提?。?/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傳達的自律、堅持不懈，界面中凸顯了硬朗、炫酷等感覺。
三：應(yīng)用深度
通過前面的應(yīng)用廣度和品牌元素的融合，這部分將通過舉例介紹，品牌元素如何融入到具體的場景中。
1、情緒/性格的融入——品牌想要傳達給用戶什么理念、情緒、性格等
這是一個室內(nèi)裝修相關(guān)的網(wǎng)站。傳達出：自然、高端、品質(zhì)感
這是一部人工智能相關(guān)的電影。傳達出：科技、懸疑、神秘感
這是一個表演相關(guān)的網(wǎng)站。傳達出：復(fù)古、熱鬧、戲劇性
這是一個汽車相關(guān)的網(wǎng)站。傳達出：科技、品質(zhì)、高端感
2、色彩融入——品牌色彩、及色彩對應(yīng)的情緒
加入了灰色的紅色，熱烈中有穩(wě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、圖標融入——logo元素、色彩等的融入
網(wǎng)易考拉，logo弧線在整體圖標設(shè)計中的應(yīng)用
logo圖形元素在界面圖標中的重復(fù)應(yīng)用。
11街logo棱角在圖標中的應(yīng)用，具有強烈統(tǒng)一感、品質(zhì)感。
優(yōu)酷APP圖標中，應(yīng)用了logo的色彩及圓潤、趣味感。
7、動效設(shè)計融入——頁面下拉、轉(zhuǎn)場、刷新等（具體動效請點擊網(wǎng)址詳細查看）
該網(wǎng)站是個很有趣味性的網(wǎng)站，從進入網(wǎng)站到下拉查看更多內(nèi)容，整個過程中都伴隨各種有趣的動效設(shè)計，印象深刻。
網(wǎng)易考拉的加載動畫，應(yīng)用了logo圖形，趣味融合，詳細請點擊網(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ì)。
配圖清晰的傳達出了品牌定位，讓用戶一眼就知道了該網(wǎng)站是食品相關(guān)的網(wǎng)站。同時也是很有品質(zhì)，安全的食品。
配圖凸顯出了家具網(wǎng)站的：高端、品質(zhì)、簡約等氣質(zhì)。
實際應(yīng)用過程中：
依據(jù)自己產(chǎn)品定位、綜合產(chǎn)品的用戶體驗，靈活運營。切忌強行融合。
找有品質(zhì)的圖和網(wǎng)站真的很難，碼字排版到半夜2點也是不易。
還請不吝賞贊，大佬的鼓勵就是我前進的最大動力！
