色彩規(guī)范 

色彩規(guī)范一般包含品牌色、輔助色和中性色，在B端產(chǎn)品中，顏色除了迎來傳達品牌調(diào)性，更多的用來傳達一些提示或警告，通過不同的顏色給予用戶信息反饋，不同的狀態(tài)運用不同的顏色展示，比如：

綠色通常代表成功、已發(fā)送、已簽到等狀態(tài)；

紅色通常代表失敗、未發(fā)布、未簽到等狀態(tài)。

另外，通過顏色可以對內(nèi)容進行分層級展示，提高用戶閱讀信息的效率。

品牌主色

一套產(chǎn)品只有一個品牌主色，是界面中出現(xiàn)最多的顏色。在需要用色強調(diào)而且沒有其他要求時，一般都會選擇主色。

網(wǎng)絡(luò)上很多人說B端產(chǎn)品大部分用藍色或者偏冷色系作為主色，可以帶給用戶一種嚴肅冷靜的感覺，但在工作日常中，很多企業(yè)會要求顏色必須是公司的品牌色。

例如當前任職的公司品牌色是飽和度較高的紫色，那么在定主色時，我們就不能跳脫這個色彩范圍，在這樣的情況下，我們可以考慮將品牌色飽和度降低或者用其他暗色系的顏色進行搭配，從而在觀感上盡量顯得不是那么刺眼，降低用戶眼睛疲勞度。

輔助色

用于提示其他場景，比如：成功、失敗、警告、無效等，輔助色主要是幫助用戶高效獲得信息。

中性色

常用于文本、背景、邊框、分割線等。

字體規(guī)范 

在B端的設(shè)計上，文字的字體，字重，字號，行號、顏色用來區(qū)分界面信息的層級關(guān)系。

字體

中文字體一般用蘋方體、思源黑體、微軟雅黑，英文字體一般為Helvetica Neue、思源黑體、微軟雅黑。

字號

系統(tǒng)中字體大小為：12px、14px、16px、18px、20px、24px、26px、28px、30px、36px…

在開發(fā)中，瀏覽器最小字體一般為12px，注意設(shè)計中不可以低于最小字體設(shè)計。

行高

行高上，可以采用行高=文字大小+8px，例如14px字體，則14px+8px=22px，則行高為22px。

字重

通常采用regular、medium、semibold三個字重。

顏色

目前最常用的字體顏色是#333333、#666666、#999999，區(qū)分標題、正文、輔助文字，具體可根據(jù)設(shè)計進行調(diào)節(jié)。

圖標規(guī)范 

在B端設(shè)計中，圖標要簡潔易懂，用來幫助用戶更快導航，提高用戶使用產(chǎn)品的效率。

在繪制完圖標后，可以存儲成svg方式上傳至Iconfont，這樣方便和開發(fā)進行對接，也可以打造自己的圖標庫，在后續(xù)的項目中，方便直接運用或修改。

布局柵格 

B端系統(tǒng)的主流分辨率主要為1920、1440和1366，個別系統(tǒng)存在1280的顯示設(shè)備，通過適配布局來完成在不同分辨率下展示內(nèi)容。

一般選用24柵格布局，不同柵格結(jié)構(gòu)中柵格區(qū)域也會有所不同，固定區(qū)域會存在于響應(yīng)式網(wǎng)格之外，不隨著頁面的變化而改變大小。

組件規(guī)范 

B端組件庫的建立，常用的組件包括按鈕組件、面包屑、導航菜單、分頁、下拉控件、上下左右滑條、日期選擇框、單選復(fù)選框、樹形選擇、標簽頁、輸入框、表單、上傳樣式、氣泡卡片、表格列表、警告提示、彈窗等。

按鈕

按鈕的五種樣式：主按鈕、默認按鈕、虛線按鈕、文本按鈕、鏈接按鈕。

按鈕的四種狀態(tài)：常規(guī)、懸停、選中、禁用。

面包屑

顯示當前頁面在系統(tǒng)層級結(jié)構(gòu)中的位置，并能向上返回，用于系統(tǒng)擁有超過兩層以上的層級結(jié)構(gòu)，同時可以告訴用戶當前頁面在哪里，并提供導航功能。

導航菜單

導航菜單為頁面和功能提供導航的菜單功能，用戶依賴導航在各個頁面中進行跳轉(zhuǎn)。

分頁

采用分頁的形式分隔長列表數(shù)據(jù)，每次只加載一個頁面。當加載/渲染所有數(shù)據(jù)將花費很多時間時可采用分頁。

下拉菜單

當選項過多時，使用下拉菜單展示并選擇內(nèi)容。

時間日期選擇器

用于選擇或輸入日期，分為固定時間點&范圍、任意時間點&范圍、選擇日/月/年范圍。

選擇框

用于在一組備選項中進行選擇，包括單選框和多選框。

標簽頁

通過切換不同的選項標簽，查看不同的頁面內(nèi)容。

輸入框

需要注意輸入框在輸入前、輸入中、輸入后三種不同的狀態(tài)。

上傳

通過點擊或拖拽上傳文件。

表格

用于展示多條結(jié)構(gòu)類似數(shù)據(jù)，可對數(shù)據(jù)進行排序、篩選、對比或其他自定義操作。

警告提示

用于頁面中展示重要的提示信息。警告提示一般分為四個狀態(tài)：成功、信息注釋、警告、錯誤(失敗)。

彈窗

用于消息提示、成功提示、錯誤提示、詢問信息、填寫表單。

最后 

希望通過這套B端設(shè)計規(guī)范，能讓你對B端系統(tǒng)有一個全面的了解。在之后的文章中，設(shè)計夾會持續(xù)分享這些設(shè)計規(guī)范的具體用法。

例如那么多的B端組件，實際上每個組件都值得單獨用一篇文章來仔細研究如何使用。

如果你想學習更多關(guān)于「B端設(shè)計」的知識，記得及時關(guān)注文章推送哦~

最后設(shè)計夾分享一套簡約風格樣機模型供大伙包裝作品時使用，這套樣機包含手機端、Pad端、手表端、PC端等多種尺寸，有PSD、Al、XD三種格式，樣機已打包好, 大家后臺回復(fù)關(guān)鍵詞即可領(lǐng)取。

領(lǐng)取方式：關(guān)注公眾號，后臺回復(fù)【樣機】獲取源文件

慢慢來比較快，希望對你有所幫助！

原文地址：Clip設(shè)計夾（公眾號）

作者：Fix-

轉(zhuǎn)載請注明：學UI網(wǎng)》從設(shè)計實戰(zhàn)中，總結(jié)了這份B端產(chǎn)品設(shè)計規(guī)范

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

我們?yōu)槭裁匆褂肎SM模型

常規(guī)工作中，需求往往由PM發(fā)起，UE團隊到底如何跟PM、FE等團隊成員協(xié)同，達成目標共識，是我們值得討論的。

因此建立一套科學的模型，通過對目標的設(shè)定來倒推過程，結(jié)合定性和定量研究，與項目組就目標可以達成共識，并且更加準確的反應(yīng)出產(chǎn)品目標中的用戶體驗質(zhì)量，這套模型就是GSM模型。

GSM模型的簡介與定義

“GSM”是Google提出的一種自上而下度量用戶行為的方法，通常用于衡量產(chǎn)品/項目目標的實現(xiàn)程度。通過對目標的設(shè)定來倒推過程，精準設(shè)定指標體系的一種量化研究方法。適用于產(chǎn)品設(shè)計中的各個角色。

• 目標：需要解決的問題，通過對產(chǎn)品（項目）目標拆解推導出用戶體驗?zāi)繕耍w驗?zāi)繕溯o助產(chǎn)品目標達成；
• 信號：設(shè)計目標實現(xiàn)后所產(chǎn)生出的現(xiàn)象，設(shè)計目標是信號的必要條件；
• 指標：是對用戶現(xiàn)象的量化，也就是信號所得出的可衡量的數(shù)據(jù)化現(xiàn)象。

GSM模型的使用場景

GSM模型可適用于產(chǎn)品設(shè)計中的各個角色，對交互設(shè)計師尤為重要，交互設(shè)計師作為連接產(chǎn)品、用戶、設(shè)計的中間一環(huán)，不斷在業(yè)務(wù)和體驗之間博弈，尋找平衡點。

通過GSM模型對產(chǎn)品目標進行分析，結(jié)合業(yè)務(wù)目標與用戶需求，找到改進機會點，在設(shè)計中幫我們斧正設(shè)計思路，對方案不斷優(yōu)化，上線后進行方案效果回收。

GSM模型帶來的價值

綜上所述，GSM模型基于項目目標，找出設(shè)計目標。并且可以辨別設(shè)計的優(yōu)良。

GSM模型的具體實施步驟

通過對目標的設(shè)定來倒推過程，并精準設(shè)定指標體系。

| step 1 識別并明確目標（Goal）

業(yè)務(wù)目標、用戶目標、設(shè)計目標是什么？

用戶要完成什么任務(wù)？我們希望他們按照什么路線走？希望他們執(zhí)行什么操作？

這里以手機百度APP智能小程序業(yè)務(wù)端——創(chuàng)建小程序表單項目改版為例，提高表單審核通過率是整個項目目標，通過拆分項目，設(shè)計目標為表單填寫更快速和表單填寫更準確。通過確定設(shè)計目標繼續(xù)推到用戶表現(xiàn)。

| step 2 推導目標對應(yīng)的表現(xiàn)（Signal）

什么用戶行為/態(tài)度指示了目標達成？什么樣的感受與目標失敗/成功相關(guān)？

從目標——信號可以是一對多的關(guān)系，根據(jù)用 戶行為在不同的行為階段會有不同的信號表現(xiàn)，以用戶不同階段觀測用戶的不同行為表現(xiàn)。

• 進入 —— 通過各種途徑進入頁面
• 發(fā)現(xiàn) —— 在該頁面中瀏覽、查找自己所需要的信息
• 辨別 —— 然后通過圖片、標題等內(nèi)容以及設(shè)計形式來識別有效信息
• 行動 —— 找到后用戶想了解詳情，點擊鏈接進入

這里還以手機百度APP智能小程序業(yè)務(wù)端——創(chuàng)建小程序表單項目改版為例，將設(shè)計目標轉(zhuǎn)化為用戶行為。

| step 3 找出關(guān)鍵的數(shù)據(jù)指標（Metric）

依照用戶的行為表現(xiàn)，觀測對應(yīng)的數(shù)據(jù)指標，通過這些可量化、可衡量的數(shù)據(jù)指標進行數(shù)據(jù)分析并指導下一步的優(yōu)化迭代。

1. 進入 —— 作為用戶進入的頁面，在這一步經(jīng)常發(fā)生的問題是退出，往往會產(chǎn)生兩個對應(yīng)的指標

• a. 作為用戶在網(wǎng)站或APP的著陸頁，用戶離開為跳出
• b. 非網(wǎng)站或APP的著陸頁，用戶離開為退出

往往，在這一行為中“跳出”指標可以衡量頁面內(nèi)容傳達與用戶目的匹配程度，是否符合用戶的心理模型，這也是絕大多數(shù)網(wǎng)站首頁最重要的數(shù)據(jù)指標之一。

2. 發(fā)現(xiàn) —— 用戶來到頁面中都要先瀏覽的過程

在這一步，設(shè)計師關(guān)注的問題是頁面中的用戶視覺流，關(guān)鍵信息能否被用戶快速鎖定。

關(guān)于識別性的指標，歸納出3點來進行衡量：

• a.鼠標懸停時間
• b.后臺報錯率
• c.人均點擊次數(shù)（適用特殊控件，如篩選器等）

4. 行動 —— 用戶在站內(nèi)內(nèi)容的點擊

在首頁的分流數(shù)據(jù)中，作為設(shè)計師主要關(guān)注兩個指標：

a.不同內(nèi)容的點擊占比

b.其后續(xù)路徑中的目標轉(zhuǎn)化質(zhì)量

再次回到我們的工作案例中，根據(jù)用戶行為表現(xiàn)拆分成數(shù)據(jù)指標。

綜上所示，通過表單可視化、精準引導、組件升級的方式，完成項目與設(shè)計目標，最終改版成功。

結(jié)語

GSM模型是一種綜合數(shù)據(jù)驗證模型，在使用過程中可以結(jié)合頭腦風暴、市場調(diào)研、可行性測試等方式共同使用。

1.我們的思考方式

如果想要快速有效的提升我們的思考能力，那么首先需要了解，我們平時在遇到問題時是如何思考的。

比如，領(lǐng)導叫你去負責一個產(chǎn)品的設(shè)計語言定義，這時候，出現(xiàn)最多的可能會有以下兩種情況（完全不知道的已經(jīng)排除）：

第一種情況：腦袋里面有一些不完整的零散知識，也不知道怎么組織運用。

第二種情況：腦袋里面有完整的零散知識，并且能組織成一套完整的方法論，還能很好的推動實現(xiàn)。

這兩種最根本的區(qū)別是第二種知識結(jié)構(gòu)已經(jīng)有了明確的解決方案，第一種非常零散的知識。

可能有人說，第二種都是很資深的設(shè)計師了，肯定能做出來，其實大部分人都可以，只要你的知識圖書館里面有相關(guān)可組織起來的知識。

任何人都是這樣的，在我們在遇到問題時，一般都是從知識圖書館中去搜索解決策略。

這時候，假如你搜索范圍有限，知識圖書館存量較少，那么此時就會很難繼續(xù)下去，沒有足夠的知識來支撐你完成下一步行動。相反，如果你的知識圖書館非常豐富，涉及到多個領(lǐng)域，那么你給出的解決方案就會更系統(tǒng)，更完整，更具創(chuàng)新性。

說到這里，那么要如何才能擁有豐富的知識圖書館，下面我們來看看，如何在日常工作學習中積累，不斷壯大我們的知識圖書館。

2.如何豐富知識圖書館

我們解決任何問題時候，其實都在調(diào)用我們的知識圖書館里面的知識。有人可能會說是想象力，其實想象力都是基于已有的龐大知識圖書館，然后從里面挑選出來各種排列組合出來的新解決方案。

越是知識圖書館豐富的人，他們給出的解決方案就會越多且豐富，創(chuàng)新度也會很高。

這就是為何，我們身邊有些設(shè)計師面對一個問題，能有多種解法，甚至有些設(shè)計師給出的解法會讓你很感嘆為何他能這么厲害。

那么如何在短時間豐富強化我們知識圖書館？最有效且最快的方式有以下幾種：

1.需要定期，定計劃的豐富你專業(yè)領(lǐng)域的知識，比如你是一名UI設(shè)計師，那么這個領(lǐng)域的知識你都需要了解，并且把最常用的知識多熟練，最好能掌握這個領(lǐng)域的幾個牛逼的方法論。

2.找一本書籍，這個書籍能覆蓋這個領(lǐng)域知識基本介紹80%以上知識，那么你就知道這個領(lǐng)域知識架構(gòu)，然后逐步去填充，形成你的知識網(wǎng)絡(luò)。

3.找個可靠的導師，行業(yè)專家，跟著練，提升也最快。

保持學習態(tài)度，不斷訓練和豐富我們知識圖書館，這樣我們在遇到問題時候，就可以輕松從里面調(diào)取來應(yīng)用，你的思維也會更開竅。

創(chuàng)新思考怎么來的？就是將你的龐大知識圖書館里面的知識，重新拿出來排列組合，就是創(chuàng)新。

如果想要自己在短時間有明顯的提高，那么開始定個目標去逐步實現(xiàn)。

3.寫在最后

今天我們說了一個很重要的關(guān)鍵詞：“知識圖書館”，我們在生活中解決任何問題都是在不斷調(diào)用知識圖書館里面存儲的知識。

如果你現(xiàn)在還是遇到問題，腦袋一片空白，不知道怎么解決，那并不是因為你笨，而是因為你的 知識圖書館的存量太少。沒關(guān)系，就現(xiàn)在，下個決心去豐富。

分享一句話給大家：你要相信看似不起波瀾的日復(fù)一日，會突然在某一天讓人看到堅持的意義。

案例一

 

案例二

加上簡單的文字編排，一張很有品牌形象的海報就做出來了。

案例三

構(gòu)成網(wǎng)格的關(guān)鍵要素：版心、頁邊距、欄和欄間距

頁邊距與版心

頁邊距是指版面上下左右留“白”的范圍。

版心是指頁邊距所包裹的區(qū)域。目的是為了使內(nèi)容看上去處于安全范圍內(nèi)，也符合人的視覺習慣

注：所有元素都應(yīng)該在版心內(nèi)編排，但并不是絕對不能超出版心，在已有規(guī)則下，我們可以將部分重要性低的元素放置到版心之外，從而為畫面帶來動感與張力

欄和欄間距：

“欄”就是放置文字或圖片模塊的范圍，“欄間距”就是欄與欄之間的距離。

在建立好“欄”的標準范圍之后，主觀將元素和內(nèi)容進行占比分配，根據(jù)實際需要跨欄應(yīng)用，讓排版更具靈活性。

在PS中繪制

在PS默認的單位為“像素”，而我們做的海報、畫冊等印刷品使用的單位為“毫米”。所以要先執(zhí)行【編輯】—【首選項】—【單位與標尺】，把“標尺”單位改為“毫米”。

再執(zhí)行【視圖】—【新建參考線版面】”，分別設(shè)置列、行數(shù)、裝訂線（欄間距）、邊距。如本次我們要設(shè)置的是5X8，欄間距為5毫米、邊距為10毫米的網(wǎng)格：

新建好的網(wǎng)格如下：（快捷鍵Ctrl+；可以顯示或隱藏網(wǎng)格）

在AI中繪制

在AI中沒有繪制參考線的命令，可以先使用“矩形工具”，繪制矩形邊框作為版心。

打開【對象】-【路徑】-【分割為網(wǎng)格】。點擊“預(yù)覽”，行的數(shù)量選擇8，欄的數(shù)量選擇5，間距選擇5，點擊確定后按“ctrl+5”,轉(zhuǎn)成參考線。

新建好的網(wǎng)格如下：（快捷鍵Ctrl+；可以顯示或隱藏網(wǎng)格）

在ID中繪制

ID為專業(yè)的圖文排版軟件，在進行書籍畫冊排版時，一般只設(shè)置豎向的分欄。在新建文件時，選擇“邊距和分欄”。

在對話框中分別設(shè)置邊距、欄間距和欄數(shù)即可：

然后執(zhí)行【版面】—【創(chuàng)建參考線】，

分別設(shè)置行數(shù)、欄數(shù)、欄間距：

設(shè)置好的網(wǎng)格如下：（按W鍵可以隱藏或顯示網(wǎng)格）

設(shè)計時設(shè)置網(wǎng)格是為了幫助你讓頁面中元素布局更加規(guī)范且統(tǒng)一，易于用戶理解，靈活運用網(wǎng)格不僅不會限制編排形式，還會使版面變得更加清晰、生動、統(tǒng)一、有條理。

原文地址：藝海拾貝Design（公眾號）

作者：鄧海貝

轉(zhuǎn)載請注明：學UI網(wǎng)》如何在PS、AI、ID中快速繪制“網(wǎng)格”

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

漫畫作品資源圖往往承載了這個故事的內(nèi)容、情感關(guān)系、又或者是人物性格等…，而設(shè)計者的任務(wù)就是去制造這個畫面賦予它意義使用戶能夠迅速的得到想要傳達的信息以及情感。

我們所有行為的背后其實都是情感的驅(qū)動，情感塑造了我們的思維感受，以及回應(yīng)整個世界的方式。所以當我們的設(shè)計激發(fā)了用戶的回憶以及想象力，也就觸發(fā)了情感鏈接。

視覺設(shè)計師余肉圓圍繞【什么是情感的傳遞者】，【傳遞情感的4個要點】以及【如何利用情感傳遞使畫面更有故事性】展開了分享。

她認為設(shè)計師不單單需要的是設(shè)計技能的提升，更重要的是要捕捉事物本身的情感。再去傳遞給大家，這才是設(shè)計師需要做的。

還向我們展示了一個嘗試突破的完整案例-獵愛誤殺，探索他們是如何主導視覺走向。

漫畫logo設(shè)計不單單是字體設(shè)計，往往還要結(jié)合故事劇情去設(shè)計，快看設(shè)計師宋宇瀟從設(shè)計背景、設(shè)計原則、品類概覽、女頻品類分析設(shè)計思路、男頻品類分析設(shè)計思路5個方面去分享他做漫畫字形設(shè)計的思路和經(jīng)驗。

最后MEUX的資深設(shè)計師慶爺介紹如何運用環(huán)境、信息和行為、三步掌握運營設(shè)計理論體系，結(jié)合自身參與的設(shè)計案例，希望能幫助設(shè)計師輕松掌握運營的底層邏輯，徹底解決視覺風格與活動的關(guān)系等問題。

快看的交流在2個小時激烈討論中結(jié)束，同學們都意猶未盡，表示開拓了自己的思路。

原文地址：百度MEUX（公眾號）

作者：愛分享交流的

轉(zhuǎn)載請注明：學UI網(wǎng)》對話設(shè)計圓桌會-快看漫畫

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

一、理解品牌對產(chǎn)品的重要性

品牌是運營中非常重要的部分，產(chǎn)品是品牌的生存基礎(chǔ)，而品牌是產(chǎn)品的認知升華，它代表了產(chǎn)品在用戶心中的形象，同時影響著用戶自身認知世界的構(gòu)建。

好看視頻是一個為用戶提供海量優(yōu)質(zhì)短視頻內(nèi)容的專業(yè)聚合平臺。我們希望通過好看品牌運營升級強化產(chǎn)品調(diào)性，提升產(chǎn)品氣質(zhì)。于是針對“如何找到適合好看視頻的品牌道路”進行了全面的思考和分析。

二、好看視頻品牌化的目標

通過對好看視頻視覺語言的探索與應(yīng)用，形成統(tǒng)一品牌感知，深化用戶與產(chǎn)品的情感鏈接。向用戶傳遞產(chǎn)品理念，為產(chǎn)品建立優(yōu)質(zhì)形象。

三、好看視頻品牌設(shè)計框架

在設(shè)計初期，我們對同類型產(chǎn)品與用戶類型進行了分析，現(xiàn)在很多品牌的活動視覺不只是單純的畫面展示，都開始有更加明確的設(shè)計背景和理念，但品牌不是千篇一律的，需要突出產(chǎn)品的特色，明確自身定位。

好看視頻在升級后主打“知識傳播”的內(nèi)容，我們從這個角度出發(fā)，將“輕松有收獲”作為貫穿產(chǎn)品的設(shè)計理念，思考如何通過設(shè)計來傳達品牌感知。

品牌不是單一樣式的體現(xiàn)，包含了多種表現(xiàn)形式。在這個過程中，需要重點考慮通過哪幾個維度來支撐整個品牌體系。我們梳理了以知識傳播為中心觀點，邏輯統(tǒng)一、情感滲透、個性風格、表現(xiàn)手法和知識內(nèi)容五維一心的傳播框架，運用以超級符號提取、輔助圖形重構(gòu)、字體、色彩、排版、動效等設(shè)計手段，將產(chǎn)品理念傳遞給用戶，建立好看視頻在用戶心中的優(yōu)質(zhì)視頻聚合平臺形象。

四、好看視頻品牌升級

1、好看視頻品牌升級海報

品牌海報是好看視頻品牌升級中最重要的環(huán)節(jié)之一，我們?yōu)楹每匆曨l九大垂類設(shè)計了九個相對應(yīng)的概念場景。每個場景的中心主體均與品牌logo形狀強關(guān)聯(lián)，強化超級符號在用戶群中的記憶度，擴大品牌影響力。

我們對九大垂類進行了發(fā)散性思考，確認了“以好看視頻logo符號為主體，通過材質(zhì)、元素的結(jié)合表現(xiàn)垂類感受”的設(shè)計方向，帶著這樣的思考收集了每個垂類對應(yīng)的一些情緒圖。

在測試階段，以美妝為例，可以看出元素的羅列或許更加直接，但缺乏了想象力，形式上偏向“電商”。經(jīng)過多次的嘗試，最終的設(shè)計邏輯我們決定以材質(zhì)為主要突破口，柔軟的皮毛、細膩的膏體等具有想象空間的質(zhì)感會更加觸動人的感官。

我們通過質(zhì)感與元素的組合，形成中心主體畫面。在字體設(shè)計上，為了適配多垂類海報的應(yīng)用及后續(xù)調(diào)整，在版權(quán)字庫中選擇了方正摩登體作為本次設(shè)計的通用字體。背景結(jié)合趣味貼紙強調(diào)輕松有收獲的品牌調(diào)性。

按照同樣的思路完成了9張海報設(shè)計，我們以品牌logo作為容器承載不同的真實質(zhì)感，結(jié)合拼貼+故障風的排版，體現(xiàn)品牌調(diào)性的同時，打破固有思維，注重細節(jié)和質(zhì)感帶來的沉浸式視覺體驗。

2、好看視頻品牌升級概念片

在完成9張垂類海報的同時，我們還規(guī)劃為本次品牌升級做了一支品牌概念片，多維度對好看視頻品牌擴大影響力。

如何在保持景別不變的前提下，讓整條片子富有趣味性，是本次設(shè)計的最大難點。我們通過拆解優(yōu)秀的動態(tài)作品，總結(jié)出了一個貫穿全片的動態(tài)邏輯。通過“元素動勢、攝像機動勢、太陽光動勢”的相互配合，形成強關(guān)聯(lián)且具備故事性的銜接轉(zhuǎn)場。

例如，利用旅游垂類的攝像機旋轉(zhuǎn)，承接美妝場景。用睫毛刷的動勢，銜接杠鈴動勢的同時，在中間直接加入剪輯的氣口。

將評測與人文垂類設(shè)定為正反桌面，通過翻轉(zhuǎn)進行鏡頭切換。設(shè)定筆筒與咖啡袋同樣倒下的動畫，加入太陽光方向的延續(xù)，同時，將攝像機調(diào)配為速率相接。

除了轉(zhuǎn)場，每個場景的細節(jié)動畫都給予了充分的表達。通過多種動態(tài)手法的組合，緊密銜接了每一個場景，保證強化品牌符號感知的同時，提高了視頻的動態(tài)細節(jié)。

本次品牌設(shè)計在發(fā)布會、萬象大會中都得到了很好的反饋，我們的設(shè)計影響力在內(nèi)外都有了非常大的提升，為后續(xù)設(shè)計樹立了標桿。

總結(jié)

在品牌運營越來越重要的今天，成體系的設(shè)計打法，不僅規(guī)范化了設(shè)計側(cè)的執(zhí)行流程，也統(tǒng)一了整體的品牌感知，使得向用戶傳遞產(chǎn)品理念變得更加直觀，向外建立優(yōu)質(zhì)形象擴大影響力也變得更加簡單。

轉(zhuǎn)載請注明：學UI網(wǎng)》好看視頻品牌升級運營設(shè)計

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

百度文庫作為行業(yè)內(nèi)的頭部品牌持續(xù)多年，把創(chuàng)新和開拓為己任，如今開始在品牌IP的領(lǐng)域上探索。市場上有很多著名的高辨識度IP，比如迪士尼的米老鼠、唐老鴨，即時通訊軟件LINE的LINEFRIENDS等等。這些IP幫助品牌提高了知名度，同時也為品牌帶來了巨額利潤，可以說IP形象是品牌的一種資產(chǎn)。

IP形象作為具象化的產(chǎn)物，能夠幫助文庫在用戶心中建立深刻的品牌形象，擴展文庫品牌線上線下多場景的影響力。當IP形象能夠做到足夠惹人喜愛時，它自身就會有超越品牌的個性魅力，從而反哺品牌，為文庫吸引更多用戶，驅(qū)動營銷玩法的升級。

設(shè)計目標推演

競品分析

剖析競品IP設(shè)計底層邏輯，找到切入點成為抓手，建立框架，理清思路后深入設(shè)計。

IP形象要與品牌承接，必須契合品牌定位。風格表達要符合時代潮流趨勢與消費者的審美視覺契合。

IP形象往往承載著企業(yè)對品牌價值觀的表達，同時衍生出IP形象本身的性格特點。

好的IP形象本身就帶有一定的故事性，這樣便于用戶了解品牌的價值觀。后期還可以進行二次創(chuàng)作，發(fā)展IP形象的周邊產(chǎn)品，比如手辦盲盒等，形成一定的文化氛圍。

結(jié)論：進一步剖析文庫品牌，細化需求。從四點著手支撐設(shè)計：

1. 文庫價值觀：讓每個人平等的提升自我;

2. 完善IP形象性格特點；

3. 設(shè)定完整的背景故事；

4. 選擇適合的風格表達。

四個方面相互呼應(yīng)，互為支撐。促使IP形象設(shè)定有的放矢。

形象概念設(shè)定

通過探索各種可能性，進行逐個衡量、推演討論，初步選方向，主推其一，按照設(shè)計思路進行不斷調(diào)整和優(yōu)化。

概念闡釋：首先利用圓潤的造型營造親和力，用文庫拼音首字母”W”的造型結(jié)合鬃毛設(shè)計，在視覺錘的角度上來說剪影的識別度非常有優(yōu)勢，同時也有山或筆架山的造型，寓意書山有路，勇攀高峰。

產(chǎn)品端滲透

01/會員LOGO

02/會員身份卡、掛件

運營活動應(yīng)用

01/會員買贈系列活動開屏

02/七夕告白指南系列漫畫

03/重點垂類個性化形象

04/表情包

線下推廣應(yīng)用

01/IP周邊文具禮盒

02/IP軟膠手辦、毛絨玩具

總結(jié)

各互聯(lián)網(wǎng)品牌都有各自的成熟IP。百度文庫同樣重視IP形象的設(shè)計和布局，其作為一個重要的品牌概念，是科技和文化的集合體。作為文庫的“代言人”，IP形象可以幫助品牌在產(chǎn)品、市場業(yè)務(wù)鏈中，發(fā)揮其自身獨特的商業(yè)價值、增強情感歸屬和拓展應(yīng)用場景。在用戶體驗和文化輸出方面給予用戶更多的溫度和關(guān)懷。

原文地址：百度MEUX（公眾號）

作者：文娛平臺用戶體驗

轉(zhuǎn)載請注明：學UI網(wǎng)》百度文庫品牌IP形象設(shè)計