色彩規(guī)范 

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

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

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

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

品牌主色

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

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

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

輔助色

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

中性色

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

字體規(guī)范 

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

字體

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

字號(hào)

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

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

行高

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

字重

通常采用regular、medium、semibold三個(gè)字重。

顏色

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

圖標(biāo)規(guī)范 

在B端設(shè)計(jì)中，圖標(biāo)要簡(jiǎn)潔易懂，用來(lái)幫助用戶更快導(dǎo)航，提高用戶使用產(chǎn)品的效率。

在繪制完圖標(biāo)后，可以存儲(chǔ)成svg方式上傳至Iconfont，這樣方便和開(kāi)發(fā)進(jìn)行對(duì)接，也可以打造自己的圖標(biāo)庫(kù)，在后續(xù)的項(xiàng)目中，方便直接運(yùn)用或修改。

布局柵格 

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

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

組件規(guī)范 

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

按鈕

按鈕的五種樣式：主按鈕、默認(rèn)按鈕、虛線按鈕、文本按鈕、鏈接按鈕。

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

面包屑

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

導(dǎo)航菜單

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

分頁(yè)

采用分頁(yè)的形式分隔長(zhǎng)列表數(shù)據(jù)，每次只加載一個(gè)頁(yè)面。當(dāng)加載/渲染所有數(shù)據(jù)將花費(fèi)很多時(shí)間時(shí)可采用分頁(yè)。

下拉菜單

當(dāng)選項(xiàng)過(guò)多時(shí)，使用下拉菜單展示并選擇內(nèi)容。

時(shí)間日期選擇器

用于選擇或輸入日期，分為固定時(shí)間點(diǎn)&范圍、任意時(shí)間點(diǎn)&范圍、選擇日/月/年范圍。

選擇框

用于在一組備選項(xiàng)中進(jìn)行選擇，包括單選框和多選框。

標(biāo)簽頁(yè)

通過(guò)切換不同的選項(xiàng)標(biāo)簽，查看不同的頁(yè)面內(nèi)容。

輸入框

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

上傳

通過(guò)點(diǎn)擊或拖拽上傳文件。

表格

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

警告提示

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

彈窗

用于消息提示、成功提示、錯(cuò)誤提示、詢問(wèn)信息、填寫(xiě)表單。

最后 

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

例如那么多的B端組件，實(shí)際上每個(gè)組件都值得單獨(dú)用一篇文章來(lái)仔細(xì)研究如何使用。

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

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

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

慢慢來(lái)比較快，希望對(duì)你有所幫助！

原文地址：Clip設(shè)計(jì)夾（公眾號(hào)）

作者：Fix-

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

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

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

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

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

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

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

GSM模型的簡(jiǎn)介與定義

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

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

GSM模型的使用場(chǎng)景

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

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

GSM模型帶來(lái)的價(jià)值

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

GSM模型的具體實(shí)施步驟

通過(guò)對(duì)目標(biāo)的設(shè)定來(lái)倒推過(guò)程，并精準(zhǔn)設(shè)定指標(biāo)體系。

| step 1 識(shí)別并明確目標(biāo)（Goal）

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

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

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

| step 2 推導(dǎo)目標(biāo)對(duì)應(yīng)的表現(xiàn)（Signal）

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

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

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

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

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

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

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

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

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

2. 發(fā)現(xiàn) —— 用戶來(lái)到頁(yè)面中都要先瀏覽的過(guò)程

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

關(guān)于識(shí)別性的指標(biāo)，歸納出3點(diǎn)來(lái)進(jìn)行衡量：

• a.鼠標(biāo)懸停時(shí)間
• b.后臺(tái)報(bào)錯(cuò)率
• c.人均點(diǎn)擊次數(shù)（適用特殊控件，如篩選器等）

4. 行動(dòng) —— 用戶在站內(nèi)內(nèi)容的點(diǎn)擊

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

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

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

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

綜上所示，通過(guò)表單可視化、精準(zhǔn)引導(dǎo)、組件升級(jí)的方式，完成項(xiàng)目與設(shè)計(jì)目標(biāo)，最終改版成功。

結(jié)語(yǔ)

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

1.我們的思考方式

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

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

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

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

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

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

任何人都是這樣的，在我們?cè)谟龅絾?wèn)題時(shí)，一般都是從知識(shí)圖書(shū)館中去搜索解決策略。

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

說(shuō)到這里，那么要如何才能擁有豐富的知識(shí)圖書(shū)館，下面我們來(lái)看看，如何在日常工作學(xué)習(xí)中積累，不斷壯大我們的知識(shí)圖書(shū)館。

2.如何豐富知識(shí)圖書(shū)館

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

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

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

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

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

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

3.找個(gè)可靠的導(dǎo)師，行業(yè)專(zhuān)家，跟著練，提升也最快。

保持學(xué)習(xí)態(tài)度，不斷訓(xùn)練和豐富我們知識(shí)圖書(shū)館，這樣我們?cè)谟龅絾?wèn)題時(shí)候，就可以輕松從里面調(diào)取來(lái)應(yīng)用，你的思維也會(huì)更開(kāi)竅。

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

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

3.寫(xiě)在最后

今天我們說(shuō)了一個(gè)很重要的關(guān)鍵詞：“知識(shí)圖書(shū)館”，我們?cè)谏钪薪鉀Q任何問(wèn)題都是在不斷調(diào)用知識(shí)圖書(shū)館里面存儲(chǔ)的知識(shí)。

如果你現(xiàn)在還是遇到問(wèn)題，腦袋一片空白，不知道怎么解決，那并不是因?yàn)槟惚?，而是因?yàn)槟愕?知識(shí)圖書(shū)館的存量太少。沒(méi)關(guān)系，就現(xiàn)在，下個(gè)決心去豐富。

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

案例一

 

案例二

加上簡(jiǎn)單的文字編排，一張很有品牌形象的海報(bào)就做出來(lái)了。

案例三

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

頁(yè)邊距與版心

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

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

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

欄和欄間距：

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

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

在PS中繪制

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

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

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

在AI中繪制

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

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

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

在ID中繪制

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

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

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

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

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

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

原文地址：藝海拾貝Design（公眾號(hào)）

作者：鄧海貝

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

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

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

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

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

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

視覺(jué)設(shè)計(jì)師余肉圓圍繞【什么是情感的傳遞者】，【傳遞情感的4個(gè)要點(diǎn)】以及【如何利用情感傳遞使畫(huà)面更有故事性】展開(kāi)了分享。

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

還向我們展示了一個(gè)嘗試突破的完整案例-獵愛(ài)誤殺，探索他們是如何主導(dǎo)視覺(jué)走向。

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

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

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

原文地址：百度MEUX（公眾號(hào)）

作者：愛(ài)分享交流的

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》對(duì)話設(shè)計(jì)圓桌會(huì)-快看漫畫(huà)

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

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

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

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

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

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

二、好看視頻品牌化的目標(biāo)

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

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

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

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

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

四、好看視頻品牌升級(jí)

1、好看視頻品牌升級(jí)海報(bào)

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

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

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

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

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

2、好看視頻品牌升級(jí)概念片

在完成9張垂類(lèi)海報(bào)的同時(shí)，我們還規(guī)劃為本次品牌升級(jí)做了一支品牌概念片，多維度對(duì)好看視頻品牌擴(kuò)大影響力。

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

例如，利用旅游垂類(lèi)的攝像機(jī)旋轉(zhuǎn)，承接美妝場(chǎng)景。用睫毛刷的動(dòng)勢(shì)，銜接杠鈴動(dòng)勢(shì)的同時(shí)，在中間直接加入剪輯的氣口。

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

除了轉(zhuǎn)場(chǎng)，每個(gè)場(chǎng)景的細(xì)節(jié)動(dòng)畫(huà)都給予了充分的表達(dá)。通過(guò)多種動(dòng)態(tài)手法的組合，緊密銜接了每一個(gè)場(chǎng)景，保證強(qiáng)化品牌符號(hào)感知的同時(shí)，提高了視頻的動(dòng)態(tài)細(xì)節(jié)。

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

總結(jié)

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

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》好看視頻品牌升級(jí)運(yùn)營(yíng)設(shè)計(jì)

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

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

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

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

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

設(shè)計(jì)目標(biāo)推演

競(jìng)品分析

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

IP形象要與品牌承接，必須契合品牌定位。風(fēng)格表達(dá)要符合時(shí)代潮流趨勢(shì)與消費(fèi)者的審美視覺(jué)契合。

IP形象往往承載著企業(yè)對(duì)品牌價(jià)值觀的表達(dá)，同時(shí)衍生出IP形象本身的性格特點(diǎn)。

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

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

1. 文庫(kù)價(jià)值觀：讓每個(gè)人平等的提升自我;

2. 完善IP形象性格特點(diǎn)；

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

4. 選擇適合的風(fēng)格表達(dá)。

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

形象概念設(shè)定

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

概念闡釋?zhuān)菏紫壤脠A潤(rùn)的造型營(yíng)造親和力，用文庫(kù)拼音首字母”W”的造型結(jié)合鬃毛設(shè)計(jì)，在視覺(jué)錘的角度上來(lái)說(shuō)剪影的識(shí)別度非常有優(yōu)勢(shì)，同時(shí)也有山或筆架山的造型，寓意書(shū)山有路，勇攀高峰。

產(chǎn)品端滲透

01/會(huì)員LOGO

02/會(huì)員身份卡、掛件

運(yùn)營(yíng)活動(dòng)應(yīng)用

01/會(huì)員買(mǎi)贈(zèng)系列活動(dòng)開(kāi)屏

02/七夕告白指南系列漫畫(huà)

03/重點(diǎn)垂類(lèi)個(gè)性化形象

04/表情包

線下推廣應(yīng)用

01/IP周邊文具禮盒

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

總結(jié)

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

原文地址：百度MEUX（公眾號(hào)）

作者：文娛平臺(tái)用戶體驗(yàn)

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》百度文庫(kù)品牌IP形象設(shè)計(jì)