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