寫(xiě)在前面

作為一個(gè)新時(shí)代全能打雜岭辣，日常工作包括移動(dòng)端蕉世、PC端的UI設(shè)計(jì)以及各類(lèi)平面視覺(jué)設(shè)計(jì)，其中自然少不了令人“禿”然的B端后臺(tái)產(chǎn)品設(shè)計(jì)。

畢業(yè)兩年來(lái)一直都做著B(niǎo)端產(chǎn)品的UI設(shè)計(jì)工作碍扔，參與過(guò)的后臺(tái)產(chǎn)品設(shè)計(jì)面對(duì)的主要客戶有公司內(nèi)部、各大企業(yè)以及政府機(jī)構(gòu)秕重。工作和學(xué)習(xí)的過(guò)程中走過(guò)不少?gòu)澛凡煌苍诓煌捻?xiàng)目中不斷反思和總結(jié)。把自己的一些想法和經(jīng)驗(yàn)分享出來(lái)悲幅，總結(jié)自己工作中遇到的問(wèn)題和解決的方法套鹅，記錄自己思考和理解的過(guò)程，也希望對(duì)即將或正在從事B端后臺(tái)產(chǎn)品設(shè)計(jì)的你有一點(diǎn)點(diǎn)啟發(fā)或幫助汰具。

希望在日后的工作和學(xué)習(xí)中卓鹿，通過(guò)實(shí)踐來(lái)不斷完善自己對(duì)B端后臺(tái)產(chǎn)品的理解。

目錄

一留荔、明修棧道C和暗度陳倉(cāng)B

二吟孙、后臺(tái)產(chǎn)品設(shè)計(jì)思路

三、后臺(tái)產(chǎn)品設(shè)計(jì)規(guī)范

四聚蝶、經(jīng)驗(yàn)觀點(diǎn)及設(shè)計(jì)資源

正文

一杰妓、明修棧道C和暗度陳倉(cāng)B

1.1初識(shí)B端產(chǎn)品和C端產(chǎn)品

按照C端產(chǎn)品和B端產(chǎn)品的專(zhuān)業(yè)術(shù)語(yǔ)來(lái)解釋的話，C端Consumer碘勉，表示為消費(fèi)者巷挥、個(gè)人用戶或終端用戶設(shè)計(jì)，直接面向普通用戶提供服務(wù)來(lái)幫助他們實(shí)現(xiàn)個(gè)人需求验靡。B端Business倍宾，它面對(duì)商業(yè)和企業(yè)，是為幫助企業(yè)集團(tuán)等實(shí)現(xiàn)商業(yè)目的而設(shè)計(jì)的軟件胜嗓、工具或者平臺(tái)高职。

在我們?nèi)粘Ｉ钪校谑謾C(jī)上使用的大多是C端產(chǎn)品辞州，單一的C端產(chǎn)品通常是為了實(shí)現(xiàn)單一的需求怔锌，比如看網(wǎng)紅的抖音、聽(tīng)音樂(lè)的酷狗变过、買(mǎi)車(chē)票的12306埃元、社交的微信等，這些產(chǎn)品有自己的核心功能牵啦，其他的功能則是附加的亚情，倘若沒(méi)有這些附加功能，雖然用戶體驗(yàn)感會(huì)降低哈雏，但并不會(huì)影響產(chǎn)品的核心功能楞件。

而面向B端的產(chǎn)品衫生，我個(gè)人稱之為“暗度陳倉(cāng)”，當(dāng)個(gè)人用戶為實(shí)現(xiàn)個(gè)人需求產(chǎn)生了一系列動(dòng)作土浸，往往伴隨著該需求的另一端也會(huì)反饋一系列動(dòng)作砰苍，即C端產(chǎn)品的后臺(tái)產(chǎn)品線（BtoC）组民，比如淘寶賣(mài)家平臺(tái)工扎、餓了么商家版等钓觉。除此之外，還有面向商家还最、企業(yè)墓阀、業(yè)務(wù)部門(mén)提供的企業(yè)級(jí)服務(wù)產(chǎn)品，以及面對(duì)企業(yè)或者個(gè)人提供的平臺(tái)級(jí)工具產(chǎn)品等拓轻。

雖說(shuō)我們?nèi)粘Ｊ褂玫母嗍荂端產(chǎn)品斯撮，但是B端產(chǎn)品對(duì)我們的影響也是時(shí)時(shí)刻刻都存在著的。C端產(chǎn)品在明扶叉，逐漸改變著現(xiàn)代人的生活方式勿锅，B端產(chǎn)品在暗，間接服務(wù)于用戶枣氧，讓一切流程化秩序化溢十，并且具有多個(gè)主要功能點(diǎn)。

——“ToB還是ToC达吞？這是個(gè)問(wèn)題......”

——“不管ToB還是ToC张弛，最后都還是ToP（people）±医伲”

1.2B端和C端產(chǎn)品的區(qū)別

在我看來(lái)乌庶，C端產(chǎn)品以消費(fèi)互聯(lián)網(wǎng)為主，B端產(chǎn)品以產(chǎn)業(yè)互聯(lián)網(wǎng)為主契耿，C端更感性，而B(niǎo)端更理性螃征。

從使用者的角度來(lái)說(shuō)——

C端產(chǎn)品關(guān)鍵詞包括免費(fèi)使用搪桂、迅速上手、體驗(yàn)為王盯滚、你能讓我做什么踢械；

B端產(chǎn)品的關(guān)鍵詞則是付費(fèi)購(gòu)買(mǎi)、上手緩慢魄藕、效率第一内列、你能為我做什么。

從開(kāi)發(fā)的角度來(lái)說(shuō)——

C端周期短背率，B端周期長(zhǎng)话瞧；

C端用戶多嫩与，B端用戶少；

C端邏輯簡(jiǎn)單交排，B端邏輯復(fù)雜划滋；

C端競(jìng)品較多，B端競(jìng)品較少埃篓；

C端主戰(zhàn)場(chǎng)是移動(dòng)端处坪，B端則是PC端；

C端是用戶體驗(yàn)驅(qū)動(dòng)架专，B端是解決問(wèn)題驅(qū)動(dòng)同窘；

C端產(chǎn)品的使用決策權(quán)在用戶手中，而B(niǎo)端產(chǎn)品的使用決策權(quán)則在客戶手中（B端客戶不一定是用戶）部脚；

C端產(chǎn)品除了產(chǎn)品的體驗(yàn)以外想邦，也要讓產(chǎn)品更美觀，讓活動(dòng)更有趣睛低，讓用戶更舒服案狠，產(chǎn)品經(jīng)理有很強(qiáng)的同理心，B端產(chǎn)品的實(shí)用性大于美觀性钱雷，能切實(shí)解決問(wèn)題骂铁、配置資源的B端產(chǎn)品才是一個(gè)好的B端產(chǎn)品，產(chǎn)品經(jīng)理要具有更強(qiáng)的邏輯思維能力罩抗。

1.3后臺(tái)產(chǎn)品常見(jiàn)分類(lèi)

后臺(tái)產(chǎn)品按其作用可大致分為兩類(lèi)拉庵，一是支撐前臺(tái)產(chǎn)品，二是管理各種資源套蒂。我認(rèn)為后臺(tái)產(chǎn)品應(yīng)當(dāng)是囊括在B端產(chǎn)品的范圍之內(nèi)的钞支，常見(jiàn)的類(lèi)型包括：

C端產(chǎn)品的后臺(tái)產(chǎn)品線——如淘寶商家版，餓了么商家版操刀，對(duì)訂單和用戶進(jìn)行管理烁挟，支持C端產(chǎn)品的業(yè)務(wù)進(jìn)展；

平臺(tái)級(jí)工具產(chǎn)品——如微信公眾平臺(tái)骨坑，對(duì)文章和讀者的數(shù)據(jù)統(tǒng)計(jì)和管理撼嗓；各大互聯(lián)網(wǎng)公司的開(kāi)放平臺(tái)，如微博開(kāi)放平臺(tái)等欢唾；

企業(yè)級(jí)服務(wù)產(chǎn)品——虛擬主機(jī)系統(tǒng)（VMware）且警，云主機(jī)管理系統(tǒng)（深信服、xensystem礁遣、騰訊云）以及各種云SaaS斑芜；

企業(yè)的業(yè)務(wù)處理平臺(tái)——對(duì)內(nèi)有考勤、報(bào)銷(xiāo)等OA辦公系統(tǒng)祟霍，對(duì)外有CRM客戶管理系統(tǒng)杏头，ERP資源及供應(yīng)鏈管理系統(tǒng)盈包。

二、后臺(tái)產(chǎn)品設(shè)計(jì)思路

2.1初識(shí)后臺(tái)產(chǎn)品設(shè)計(jì)

說(shuō)起后臺(tái)產(chǎn)品大州，很容易想到復(fù)雜续语、龐大、邏輯縝密厦画，而作為設(shè)計(jì)師疮茄，苦于競(jìng)品短缺、架構(gòu)復(fù)雜根暑，設(shè)計(jì)的前期工作比設(shè)計(jì)本身要復(fù)雜得多力试。

后臺(tái)產(chǎn)品不同于普通用戶所使用的APP，它在用戶初次使用和短暫時(shí)間內(nèi)的認(rèn)知成本是較高的排嫌。當(dāng)用戶用慣了一個(gè)音樂(lè)類(lèi)的app畸裳，再給他幾個(gè)其他的音樂(lè)APP，用戶是可以迅速上手并且輕易解決自己的需求的淳地。而后臺(tái)產(chǎn)品則不然怖糊。

對(duì)于后臺(tái)產(chǎn)品來(lái)說(shuō)，首先颇象，所見(jiàn)之少伍伤，它并不是隨隨便便就可以下載使用的，即便你在使用的過(guò)程中遣钳，也因角色不同而受到權(quán)限限制扰魂，一般來(lái)講很難像超級(jí)管理員一樣接觸到整體功能；其次蕴茴，門(mén)檻之高劝评，后臺(tái)產(chǎn)品的使用者一般都是在該行業(yè)沉淀了很久，所以要對(duì)后臺(tái)產(chǎn)品進(jìn)行設(shè)計(jì)就需要同樣了解該行業(yè)倦淀、甚至更能洞察該行業(yè)蒋畜，業(yè)務(wù)本身的復(fù)雜性質(zhì)決定了后臺(tái)產(chǎn)品架構(gòu)也會(huì)比較龐大；然后撞叽，無(wú)論是工廠商家的進(jìn)銷(xiāo)存管理百侧，還是政府醫(yī)院的工作流和業(yè)務(wù)流，乃至企業(yè)內(nèi)部的產(chǎn)品能扒，除了不同行業(yè)都有門(mén)檻外，對(duì)信息和產(chǎn)品也有“保密協(xié)議”的使命感辫狼，所謂“隔行如隔山”初斑，在后臺(tái)產(chǎn)品更是如此；最后膨处，后臺(tái)產(chǎn)品設(shè)計(jì)往往沒(méi)有固定的功能架構(gòu)和商業(yè)模式见秤，對(duì)于產(chǎn)品經(jīng)理的邏輯思維能力要求更高砂竖，設(shè)計(jì)師不僅僅是做界面、優(yōu)化流程鹃答，也要主動(dòng)和產(chǎn)品經(jīng)理溝通交流乎澄，并對(duì)產(chǎn)品進(jìn)行思考和探索。

這大概就是后臺(tái)產(chǎn)品相關(guān)資源較少测摔、設(shè)計(jì)難度較大的一些原因置济。

2.2后臺(tái)UI設(shè)計(jì)工作流程

后臺(tái)UI設(shè)計(jì)的工作，大體分為三個(gè)部分：需求分析——設(shè)計(jì)執(zhí)行——數(shù)據(jù)分析锋八。

在需求分析階段浙于，要對(duì)產(chǎn)品本身和行業(yè)本身有一些基本的認(rèn)知。要了解產(chǎn)品的基本情況挟纱，比如產(chǎn)品目標(biāo)羞酗、用戶人群、產(chǎn)品定位紊服、需求分析檀轨、功能模塊、主要競(jìng)品和產(chǎn)品特色欺嗤。 做這個(gè)產(chǎn)品是為了解決什么問(wèn)題参萄？想實(shí)現(xiàn)什么目標(biāo)？使用這個(gè)系統(tǒng)的用戶有哪些剂府？不同角色的用戶有哪些具體的權(quán)限拧揽？是否需要對(duì)每一個(gè)用戶的行為都生成操作日志？產(chǎn)品有哪些主要的功能模塊腺占？產(chǎn)品的業(yè)務(wù)流程是怎樣的淤袜？有哪些同類(lèi)型的產(chǎn)品？和他們相比我們的產(chǎn)品有什么特色和特點(diǎn)衰伯？成功地做出大而全的后臺(tái)產(chǎn)品铡羡，是整個(gè)設(shè)計(jì)團(tuán)隊(duì)和開(kāi)發(fā)團(tuán)隊(duì)能力的體現(xiàn)，而對(duì)很多小團(tuán)隊(duì)來(lái)說(shuō)意鲸，只能做一些大團(tuán)隊(duì)不愿去做的產(chǎn)品烦周，或另辟蹊徑在某些方面做專(zhuān)做精。

在設(shè)計(jì)執(zhí)行階段怎顾，參照PM給出的功能清單做原型和流程的梳理读慎，需要關(guān)注的有當(dāng)前版本規(guī)劃、功能模塊槐雾、功能類(lèi)型夭委、功能描述、任務(wù)優(yōu)先級(jí)募强、完成時(shí)間等株灸，交互原型則伴隨著功能描述崇摄、規(guī)則判定條件、觸發(fā)條件等內(nèi)容慌烧。原型設(shè)計(jì)完成逐抑，開(kāi)始做UI視覺(jué)方面的設(shè)計(jì)，而這時(shí)后端同步構(gòu)思需求的實(shí)現(xiàn)方案屹蚊。UI設(shè)計(jì)師向前端了解實(shí)現(xiàn)框架厕氨，方便交接和溝通。當(dāng)界面實(shí)現(xiàn)淑翼，UI設(shè)計(jì)師應(yīng)該是最早進(jìn)行測(cè)試的腐巢，力求視覺(jué)設(shè)計(jì)和代碼實(shí)現(xiàn)無(wú)誤差。在完成設(shè)計(jì)執(zhí)行后玄括，從信息層級(jí)冯丙、文字、圖標(biāo)遭京、圖片等方面進(jìn)行設(shè)計(jì)走查胃惜，進(jìn)行多次設(shè)計(jì)驗(yàn)證與測(cè)試。

數(shù)據(jù)分析是產(chǎn)品優(yōu)化迭代的重要依據(jù)哪雕。進(jìn)行多番測(cè)試和評(píng)審后交付客戶（或內(nèi)部）使用船殉，根據(jù)產(chǎn)生的具體問(wèn)題進(jìn)行不斷迭代，且觀察產(chǎn)品能否通過(guò)準(zhǔn)確的數(shù)據(jù)反映問(wèn)題斯嚎、體現(xiàn)能力利虫，應(yīng)虛心接納使用者的使用建議并嚴(yán)謹(jǐn)思考其合理性，用戶的使用和反饋是優(yōu)化產(chǎn)品的重要途徑堡僻。只有達(dá)到了管理和運(yùn)營(yíng)的指標(biāo)糠惫，后臺(tái)產(chǎn)品才是真正產(chǎn)生了價(jià)值。

2.3制定設(shè)計(jì)規(guī)范的作用

為后臺(tái)產(chǎn)品制定設(shè)計(jì)規(guī)范有哪些作用和好處呢钉疫？簡(jiǎn)單來(lái)說(shuō)就是對(duì)產(chǎn)品好硼讽、對(duì)自己好、對(duì)團(tuán)隊(duì)好牲阁、對(duì)客戶好固阁。

對(duì)產(chǎn)品——在項(xiàng)目完成第一版較為穩(wěn)定的版本時(shí)，著手制定設(shè)計(jì)標(biāo)準(zhǔn)城菊，統(tǒng)一公司視覺(jué)設(shè)計(jì)規(guī)范及某些特定交互設(shè)計(jì)規(guī)范备燃。同一個(gè)項(xiàng)目會(huì)有多個(gè)設(shè)計(jì)師的參與，規(guī)范化的設(shè)計(jì)語(yǔ)言凌唬，避免因設(shè)計(jì)控件混亂而影響設(shè)計(jì)輸出赚爵；

對(duì)自己——組件化同類(lèi)元素，提高工作效率，建立公司產(chǎn)品的組件庫(kù)冀膝，以便不同項(xiàng)目的復(fù)用及設(shè)計(jì)延展；在同一個(gè)項(xiàng)目中也能更好的把控該項(xiàng)目的視覺(jué)規(guī)范霎挟，提高效率窝剖；

對(duì)團(tuán)隊(duì)——設(shè)計(jì)規(guī)范的制定，規(guī)范了設(shè)計(jì)團(tuán)隊(duì)的輸出酥夭，同時(shí)方便了與開(kāi)發(fā)團(tuán)隊(duì)的交接和協(xié)作赐纱。通過(guò)設(shè)計(jì)規(guī)范的制定，前端實(shí)現(xiàn)也能擁有一套可供復(fù)用和擴(kuò)展的組件庫(kù)熬北，助力上下游交接及團(tuán)隊(duì)協(xié)作疙描；

對(duì)客戶——制定設(shè)計(jì)規(guī)范的同時(shí)需要考慮設(shè)計(jì)延展性，為不同客戶的定制化需求提供更高效的輸出讶隐。同時(shí)在進(jìn)行產(chǎn)品迭代時(shí)起胰，設(shè)計(jì)規(guī)范的組件化調(diào)整也大大提高了工作效率。

三巫延、后臺(tái)產(chǎn)品設(shè)計(jì)規(guī)范

*以下內(nèi)容僅供參考和交流效五，圖片內(nèi)容不代表真實(shí)尺寸，請(qǐng)結(jié)合特定產(chǎn)品靈活使用炉峰。

3.1頁(yè)面布局

統(tǒng)一尺寸——據(jù)統(tǒng)計(jì)畏妖，目前PC端用戶屏幕分辨率占比排名前三的是1920*1080、1366*768疼阔、1440*900戒劫，以1440來(lái)設(shè)計(jì)的話，向上適配或者向下適配誤差會(huì)比較小婆廊。

適配方案——面向多個(gè)客戶迅细，后臺(tái)產(chǎn)品設(shè)計(jì)功能型頁(yè)面的尺寸統(tǒng)一為1440*900，按照柵格系統(tǒng)原則向上或向下適配否彩；展示型頁(yè)面以1440*900為主疯攒，同時(shí)設(shè)計(jì)出極端情況（寬度為1280以及寬度為1920）的效果圖，力求實(shí)現(xiàn)前端實(shí)現(xiàn)效果和高保真設(shè)計(jì)圖誤差最小列荔。面向公司內(nèi)部的后臺(tái)系統(tǒng)敬尺，由于各個(gè)職工電腦屏幕是統(tǒng)一采購(gòu)、統(tǒng)一尺寸贴浙，所以開(kāi)發(fā)適配的分辨率可以統(tǒng)一尺寸進(jìn)行設(shè)計(jì)砂吞，這個(gè)尺寸根據(jù)公司內(nèi)部采購(gòu)屏幕的尺寸和分辨率選擇即可（提前和前端溝通好）。

頁(yè)面框架——頁(yè)面框架主要分為左右欄布局和上下欄布局崎溃，還有其他的布局蜻直。左右欄布局包括頂部欄、左側(cè)菜單欄、主體內(nèi)容三大區(qū)域概而，其中頂部菜單欄呼巷、左側(cè)菜單欄為固定結(jié)構(gòu)，右側(cè)主體內(nèi)容根據(jù)分辨率進(jìn)行動(dòng)態(tài)縮放赎瑰；上下欄布局包括頂部菜單欄和主體內(nèi)容兩大區(qū)域王悍，其中頂部菜單欄為固定結(jié)構(gòu)，主體內(nèi)容進(jìn)行動(dòng)態(tài)縮放且需定義主體內(nèi)容左右兩邊空白區(qū)域最小值餐曼；左右欄布局時(shí)压储，左側(cè)菜單可收縮展開(kāi)，收縮狀態(tài)下固定寬度源譬。

柵格布局——柵格系統(tǒng)的使用是為了解決自適應(yīng)和響應(yīng)式問(wèn)題集惋，從而更好地進(jìn)行產(chǎn)品設(shè)計(jì)和產(chǎn)品開(kāi)發(fā)。響應(yīng)式柵格采用24列柵格體系實(shí)現(xiàn)踩娘，以滿足2刮刑，3，4霸饲，5为朋，6分比布局等多種情況。固定寬度Column厚脉，將間隔Gutter進(jìn)行動(dòng)態(tài)縮放习寸。需要柵格化處理的內(nèi)容的總寬度=23列（1列=1寬度Column+1間隔Gutter）+1寬度Column=24寬度Column+23間隔Gutter。谷歌規(guī)定模塊和結(jié)構(gòu)之間要以8px為基準(zhǔn)傻工，布局間相對(duì)間距可采用8px以及8的倍數(shù)霞溪，但一些小組件(按鈕、間隔中捆、輸入框 )可以以4為基準(zhǔn)鸯匹。柵格布局是為了輔助設(shè)計(jì)，靈活運(yùn)用泄伪，不要被它所局限殴蓬。

尺寸設(shè)定——一般在整體區(qū)域左上角放置產(chǎn)品LOGO及產(chǎn)品名稱，大部分系統(tǒng)頂部欄高度48+8n蟋滴，側(cè)邊欄寬度200+8n染厅。我常用的是頂部欄高度56px，側(cè)邊欄寬度200px津函，側(cè)邊欄收縮狀態(tài)寬度56px肖粮，右側(cè)的側(cè)浮窗寬度400px。

相對(duì)間隔——定義主體內(nèi)容的上下左右邊距尔苦，定義主體區(qū)域內(nèi)各模塊的邊距及安全寬度涩馆，超出內(nèi)容區(qū)域的部分采用區(qū)域內(nèi)滾動(dòng)或整屏滾動(dòng)行施，視情況固定導(dǎo)航欄。

3.2標(biāo)準(zhǔn)色

顏色分為品牌色魂那、輔助色蛾号、中性色。根據(jù)不同產(chǎn)品的不同需求涯雅，可能也會(huì)將統(tǒng)計(jì)圖须教、標(biāo)簽等進(jìn)行統(tǒng)一標(biāo)準(zhǔn)色設(shè)定。

品牌色即產(chǎn)品主色斩芭，產(chǎn)品主色的設(shè)定直接影響產(chǎn)品氣質(zhì)和直觀感受，也是產(chǎn)品直接對(duì)外的形象乐疆。品牌色要根據(jù)產(chǎn)品特性划乖、用戶使用場(chǎng)景、產(chǎn)品定位等進(jìn)行選取挤土，盡量做好色彩的延伸性琴庵，可支持換膚。品牌色的應(yīng)用場(chǎng)景包括操作狀態(tài)仰美、按鈕色迷殿、可操作圖標(biāo)等。

輔助色用于提示其他場(chǎng)景咖杂，比如成功庆寺、失敗、警告诉字、無(wú)效等懦尝。

中性色常用于文本、背景壤圃、邊框陵霉、分割線等，需要考慮深色背景和淺色背景的差異伍绳，可以選擇同一色相控制透明度變化踊挠，用來(lái)表現(xiàn)不同的層級(jí)結(jié)構(gòu)。

其他色如統(tǒng)計(jì)圖冲杀、數(shù)據(jù)可視化效床、多個(gè)標(biāo)簽的不同配色方案根據(jù)項(xiàng)目情況單獨(dú)設(shè)定。

3.3標(biāo)準(zhǔn)字

后臺(tái)系統(tǒng)常用的字體：windows系統(tǒng)漠趁，中文Microsoft YaHei扁凛，英文Arial；Mac字體闯传，中文PingFang SC谨朝，英文Helvetica卤妒；除此之外可以選擇的字體還有segoe UI、思源黑體字币、Hiragino Sans GB等则披。

后臺(tái)系統(tǒng)中常用字體大小為12px、13px洗出、14px士复、16px、18px翩活、20px阱洪、24px、30px菠镇。

行高設(shè)定冗荸，根據(jù)文字大小及使用場(chǎng)景設(shè)置行高，一般行高=文字大小+6px/8px利耍。

3.4圖標(biāo)

圖標(biāo)是UI設(shè)計(jì)中重要組成部分蚌本，一般分為功能圖標(biāo)和應(yīng)用圖標(biāo)，以圖形的方式傳達(dá)概念隘梨，可以降低理解成本程癌，使得界面更加協(xié)調(diào)美觀。在后臺(tái)產(chǎn)品中轴猎，圖標(biāo)的功能則更偏向輔助性嵌莉，輔助用戶對(duì)功能的認(rèn)識(shí)。

除了某些常用的圖標(biāo)税稼，有一些專(zhuān)業(yè)性的操作和詞匯則需要設(shè)計(jì)師進(jìn)行繪制烦秩，現(xiàn)在比較高效方便的方法是在iconfont提供的圖標(biāo)模板上用AI繪制，畫(huà)板1024*1024郎仆，提供圓形只祠、正方形、矩形形狀(文末提供下載)扰肌。圖標(biāo)尺寸按照8的倍數(shù)進(jìn)行延展抛寝，繪制完成后生成svg格式文件，提交到阿里巴巴矢量圖標(biāo)庫(kù)的項(xiàng)目組里曙旭，方便前端調(diào)用盗舰，調(diào)整大小和顏色更為方便，且能夠優(yōu)化系統(tǒng)內(nèi)存和性能桂躏。

分享一個(gè)我個(gè)人常用的AI使用小習(xí)慣钻趋，因?yàn)閏trl+q、ctrl+w作為退出和關(guān)閉我用的不多剂习，而且有時(shí)候手抖會(huì)在保存時(shí)候不小心點(diǎn)成了關(guān)閉蛮位，所以我無(wú)情地把ctrl+q较沪、ctrl+w變成了拓展和拓展外觀的快捷鍵......感受還不錯(cuò)。

3.5按鈕

按鈕是后臺(tái)產(chǎn)品進(jìn)行交互設(shè)計(jì)是重要元素失仁，提供給用戶進(jìn)行點(diǎn)擊操作尸曼，是視覺(jué)上最引人注目的控件，具有一定的視覺(jué)受范性萄焦。常用按鈕可分為填充按鈕控轿、線性按鈕、文字按鈕拂封。

按鈕的交互狀態(tài)包括默認(rèn)茬射、懸停、點(diǎn)擊和不可用冒签。

按鈕根據(jù)需求分為不同尺寸躲株，大中小三個(gè)級(jí)別用在不同的場(chǎng)景，一般按照8的倍數(shù)設(shè)定镣衡。如高度分別設(shè)定為24、32档悠、40px廊鸥。

規(guī)范整理時(shí)要規(guī)定不同類(lèi)型按鈕的寬高、圓角及文字大小辖所，同時(shí)還要將按鈕的不同狀態(tài)展現(xiàn)出來(lái)惰说。

填充按鈕之間間距最小為10px。

3.6導(dǎo)航

導(dǎo)航的類(lèi)型有很多種缘回，常用的比如頂欄菜單吆视、側(cè)欄菜單、折疊菜單酥宴、下拉菜單啦吧、面包屑、分頁(yè)拙寡、步驟條授滓、時(shí)間軸、tab標(biāo)簽頁(yè)肆糕、膠囊菜單般堆、徽標(biāo)數(shù)等。

各類(lèi)導(dǎo)航中的字體大小可進(jìn)行統(tǒng)一設(shè)定诚啃。

頂欄菜單多為一級(jí)菜單淮摔，點(diǎn)擊切換，或作為下拉菜單的父級(jí)始赎，將子級(jí)菜單合理分類(lèi)和橙。

側(cè)欄菜單為垂直導(dǎo)航菜單仔燕，可以內(nèi)嵌子菜單。

下拉菜單的觸發(fā)方式一般有鼠標(biāo)懸停和鼠標(biāo)點(diǎn)擊兩種胃碾。

步驟條引導(dǎo)用戶按照流程來(lái)完成任務(wù)涨享，一般步驟不得少于兩步。

分頁(yè)的高度設(shè)定為24px仆百、30px厕隧、32px，根據(jù)應(yīng)用場(chǎng)景適當(dāng)增減內(nèi)容俄周，比如設(shè)定每頁(yè)展示數(shù)據(jù)的條數(shù)吁讨、跳轉(zhuǎn)至指定頁(yè)等。

面包屑用于說(shuō)明層級(jí)結(jié)構(gòu)峦朗，使用戶明確當(dāng)前所在位置建丧，并且可以回到任一上級(jí)頁(yè)面。

徽標(biāo)數(shù)用來(lái)通知用戶當(dāng)前有未讀消息波势，一般出現(xiàn)在圖標(biāo)的右上角或者跟在文字后面翎朱。

3.7表單

表單多由一條或多條列表項(xiàng)組成，單一列表項(xiàng)的類(lèi)型有字段輸入框尺铣、條件選擇器拴曲。

字段輸入框的標(biāo)題和輸入框分布方式包括左右、上下凛忿、無(wú)標(biāo)題澈灼。左右分布是常見(jiàn)的對(duì)齊方式，比較適合PC端的使用店溢；上下分布增加了表單的整體高度叁熔，視情況選擇使用；無(wú)標(biāo)題經(jīng)常應(yīng)用在登錄注冊(cè)床牧，雖然減少了面積荣回，但是增加了理解難度。

輸入框的交互狀態(tài)包括默認(rèn)戈咳、輸入結(jié)果驹马、提示錯(cuò)誤、禁用除秀、獲取焦點(diǎn)糯累。

輸入框的尺寸可按照8的倍數(shù)進(jìn)行設(shè)定，比如24px册踩、32px泳姐，也可根據(jù)系統(tǒng)實(shí)際情況進(jìn)行設(shè)定，我常用的輸入框高度為30px暂吉，寬度視情況而定胖秒，無(wú)圓角缎患。上下布局的多個(gè)輸入框上下間距為20px，有錯(cuò)誤提示時(shí)候豎向增加10px或橫向顯示在輸入框右側(cè)（預(yù)留出位置）阎肝。

表單中標(biāo)題文字左對(duì)齊挤渔，輸入框左對(duì)齊，標(biāo)題文字距離輸入框20px（多個(gè)長(zhǎng)度不同的輸入框算最長(zhǎng)的）风题；標(biāo)題文字右對(duì)齊判导，輸入框左對(duì)齊，也是常用的方式沛硅。輸入框內(nèi)正文字體14px眼刃，文字和左右兩邊邊框的邊距10px。

選擇器包括單選摇肌、多選擂红、時(shí)間選擇、開(kāi)關(guān)切換围小、下拉選擇昵骤、滑塊選擇、旋鈕等肯适。單選框多為圓形涉茧，復(fù)選框多為方形。

搜索框和選擇框的高度為30px或按照8的倍數(shù)自行設(shè)定疹娶，通常和輸入框保持一致。搜索框距離右側(cè)按鈕4px伦连，內(nèi)部文字14px雨饺。

單選多選框尺寸16*16px，多個(gè)選項(xiàng)橫向排列間距16px惑淳，縱向排列間距8px额港。

開(kāi)關(guān)按鈕外框40*20px，內(nèi)部圓形16*16px歧焦。

3.8表格

表格在后臺(tái)產(chǎn)品UI設(shè)計(jì)中站的比重非常大移斩，用來(lái)展示數(shù)據(jù)、統(tǒng)一管理绢馍、作為詳情入口向瓷，是最清晰、高效的形式之一舰涌。在設(shè)計(jì)規(guī)范中需設(shè)定表頭高度猖任、表格行高、表格列寬范圍瓷耙，同時(shí)也包括表格中的按鈕樣式朱躺、標(biāo)簽樣式刁赖。

表格主要分為五大區(qū)域：選擇搜索區(qū)、操作區(qū)长搀、表頭宇弛、正文、底欄源请。選擇搜索區(qū)放置篩選框和搜索框枪芒，為用戶提供按需搜索，可以大大提高用戶效率巢钓；操作區(qū)指各種對(duì)表格內(nèi)容進(jìn)行增刪改查病苗、批量處理、配置列的動(dòng)作症汹；表頭展示列標(biāo)題硫朦，一般具有排序功能；正文主要展示各種各樣的數(shù)據(jù)背镇，要注意行高咬展、對(duì)齊、分割瞒斩、信息層級(jí)等破婆，要考慮是否提供行內(nèi)操作；底欄顯示分頁(yè)胸囱、總數(shù)統(tǒng)計(jì)等祷舀。

表格信息一般主要功能為增刪改查，查看和編輯是最基本的功能烹笔，表格信息支持篩選裳扯、搜索、排序谤职、分頁(yè)饰豺。對(duì)可批量操作的表格數(shù)據(jù)在第一列增加多選框。

行高——表格行高可設(shè)置為表格內(nèi)字體高度的2~3倍允蜈，主表格會(huì)間隔顯示不同顏色冤吨，用于區(qū)分不同行數(shù)據(jù)、加強(qiáng)視覺(jué)流引導(dǎo)饶套，展開(kāi)單行的內(nèi)置表格可采用純色漩蟆，選中行應(yīng)有視覺(jué)上的反饋。表頭要和表格內(nèi)容有視覺(jué)上的區(qū)分妓蛮。表格行高可采用36爆安、40、48、60等扔仓。

行數(shù)——表格行數(shù)太多加載速度會(huì)降低褐奥，延長(zhǎng)用戶等待時(shí)間；行數(shù)太少會(huì)導(dǎo)致用戶不斷翻頁(yè)翘簇，降低使用效率设捐。比較合適的默認(rèn)表格行數(shù)是20或50偶洋，用戶可以根據(jù)自己需求選擇默認(rèn)的行數(shù)剂邮。設(shè)定行數(shù)之后颅痊，如果每頁(yè)行數(shù)多余每屏行數(shù)，可在表格內(nèi)引入滾動(dòng)條彻犁，這時(shí)可以固定表頭滾動(dòng)內(nèi)容叫胁。

列寬——列寬根據(jù)內(nèi)容字段長(zhǎng)短需要有不同且合理的默認(rèn)值，使得表格字段有良好的展示效果汞幢。列內(nèi)容的長(zhǎng)度固定時(shí)驼鹅，列寬應(yīng)大于固定寬度（比如時(shí)間、MD5森篷、SHA1）输钩；列內(nèi)容不固定時(shí)，能預(yù)判最大寬度的按照最大寬度設(shè)定列寬（比如IP地址仲智、MAC地址买乃、姓名），不能預(yù)判最大寬度的設(shè)定列寬按照常用寬度钓辆，多于內(nèi)容省略以“...”展示剪验，鼠標(biāo)懸停出現(xiàn)完整內(nèi)容（比如詳情、描述）前联。

列數(shù)——表格列不應(yīng)過(guò)多功戚，列數(shù)比較多的情況下應(yīng)該合理進(jìn)行合并、隱藏蛀恩、刪除或進(jìn)行優(yōu)先級(jí)處理。常用的方法有引入配置列茂浮，用戶可自定義展示必需列以外的其他列双谆；只展示重要信息，下拉展開(kāi)列查看完整信息席揽；在表格中引入橫向滾動(dòng)條顽馋，根據(jù)實(shí)際情況選擇是否要始終固定基本信息列（如第一列是文件名）和操作列（最后一列的操作）。

對(duì)齊方式——表格內(nèi)的文本應(yīng)按照文本類(lèi)型不同進(jìn)行統(tǒng)一規(guī)范幌羞，如金額類(lèi)數(shù)值保留相同位數(shù)小數(shù)寸谜，SHA1雖然是一串?dāng)?shù)字但是其實(shí)那并不是數(shù)據(jù)而是一串編碼，所以可以像文文本一樣左對(duì)齊属桦。根據(jù)文本內(nèi)容不同熊痴，對(duì)齊方式也應(yīng)靈活調(diào)整他爸，可采用文本左對(duì)齊、數(shù)據(jù)右對(duì)齊果善、金額小數(shù)點(diǎn)對(duì)齊的方式诊笤。數(shù)據(jù)前面有標(biāo)簽的，將標(biāo)簽前置對(duì)齊巾陕。類(lèi)似IP地址讨跟、MD5、SHA1鄙煤、域名這樣的信息晾匠，也可以根據(jù)產(chǎn)品需要在文本前面增加“復(fù)制”圖標(biāo)，方便用戶調(diào)用梯刚。

詳情入口——表格內(nèi)部數(shù)據(jù)的詳情入口凉馆，將能點(diǎn)擊下鉆查看詳情的內(nèi)容以不同顏色表示，同時(shí)在表格行最后一列操作按鈕部分放置一個(gè)查看按鈕乾巧。

3.9反饋

包括彈框句喜、側(cè)滑框、骨架屏沟于、全局提示咳胃、警告提示、消息提醒旷太、加載狀態(tài)等展懈。分為模態(tài)框和非模態(tài)框，區(qū)別是是否會(huì)打斷用戶工作流供璧。

彈框又稱對(duì)話框存崖，是疊加在應(yīng)用主窗口上的彈出式窗口，以對(duì)話的方式使用戶參與進(jìn)來(lái)睡毒。

彈框——彈框出現(xiàn)時(shí)来惧，主題內(nèi)容增加一層遮罩#000，透明度50%演顾，避免使用雙層彈框供搀，可同時(shí)采用有關(guān)閉圖標(biāo)的彈框和無(wú)關(guān)閉圖標(biāo)的彈框，引導(dǎo)用戶對(duì)內(nèi)容進(jìn)行正確操作钠至。如果設(shè)定系統(tǒng)內(nèi)所有彈框均可以點(diǎn)擊彈框外區(qū)域關(guān)閉葛虐， 則需要為用戶新增或編輯內(nèi)容的彈框彈出二級(jí)確認(rèn)的彈框，或者再次進(jìn)行交互梳理棉钧。

側(cè)滑框——又稱抽屜屿脐，出現(xiàn)在右側(cè)，固定寬度400px，高度覆蓋在主題內(nèi)容之上的诵，點(diǎn)擊側(cè)滑框以外的區(qū)域則收起側(cè)滑框万栅。

骨架屏——為某些特定數(shù)據(jù)提供數(shù)據(jù)加載等待時(shí)的占位圖形組合。

全局提示——建議停留時(shí)間3s奢驯，可根據(jù)文字字?jǐn)?shù)調(diào)整停留時(shí)間申钩，文字內(nèi)容限制在30以內(nèi)。

警告提示——用不同顏色和樣式展示需要關(guān)注的信息瘪阁。

通知提醒——消息通知和告警信息用通知提醒框撒遣，單個(gè)消息從頁(yè)面右側(cè)以抽屜的方式劃出，用戶可手動(dòng)關(guān)閉管跺，或停留3s后自動(dòng)關(guān)閉义黎。

3.10缺省狀態(tài)

繪制不同類(lèi)型的情感畫(huà)插畫(huà)表示缺省狀態(tài)，如404豁跑、500廉涕、暫時(shí)沒(méi)有數(shù)據(jù)、沒(méi)有新消息等艇拍。

頁(yè)面需要一個(gè)默認(rèn)的底色狐蜕，錯(cuò)誤文字使用14px，與情感化插畫(huà)間距20px卸夕，與按鈕間距30px层释；

3.11數(shù)據(jù)可視化

數(shù)據(jù)可視化部分可能是后臺(tái)產(chǎn)品中對(duì)視覺(jué)設(shè)計(jì)要求較高的部分，使用情境為各類(lèi)統(tǒng)計(jì)圖快集、大屏展示頁(yè)面等贡羔。

功能型頁(yè)面的數(shù)據(jù)可視化可以引入圖形化設(shè)計(jì)組件，Echarts个初、G2乖寒、d3等；展示型頁(yè)面的數(shù)據(jù)可視化則可以做的更有趣院溺，比如立體的統(tǒng)計(jì)圖楣嘁、粒子地球效果、靈活有趣的網(wǎng)絡(luò)拓?fù)鋱D等珍逸。

考慮到數(shù)據(jù)可視化可能會(huì)需要深色淺色不同的背景逐虚，在數(shù)據(jù)可視化統(tǒng)計(jì)圖的色彩搭配上要注意顏色的拓展性。

四弄息、經(jīng)驗(yàn)觀點(diǎn)及設(shè)計(jì)資源

4.1設(shè)計(jì)前端一家親

Ant Design的設(shè)計(jì)組件痊班，實(shí)現(xiàn)框架React勤婚、Angular——https://ant.design/docs/spec/layout-cn

Element的設(shè)計(jì)組件摹量，實(shí)現(xiàn)框架Vue 2.0、 Angular——http://element-cn.eleme.io/#/zh-CN/component/checkbox

iView的設(shè)計(jì)組件，實(shí)現(xiàn)框架Vue——https://www.iviewui.com/docs/guide/theme

飛冰的設(shè)計(jì)組件缨称，實(shí)現(xiàn)框架React——https://alibaba.github.io/ice/

Layui的設(shè)計(jì)組件——https://www.layui.com/demo/grid.html

G2可視化圖形組件——https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html

Echarts可視化圖形組件——https://echarts.baidu.com/

d3.js可視化圖形組件——https://github.com/d3/d3/wiki/Gallery

在線柵格化計(jì)算工具——http://grid.guide/#/1000/24/34/8/0

4.2不丑也要多讀書(shū)

《B端產(chǎn)品經(jīng)理必修課》

《交互設(shè)計(jì)精髓》

《U一點(diǎn)料·Ⅱ》

《簡(jiǎn)約至上:交互式設(shè)計(jì)四策略》

4.3文章和作品推薦

Christie Tang《如何更好地使用柵格系統(tǒng)》——原版https://uxdesign.cc/responsive-grids-and-how-to-actually-use-them-970de4c16e01?中文版https://www.ui.cn/detail/465158.html

UXBoy《柵格系統(tǒng)及其在后臺(tái)設(shè)計(jì)中的應(yīng)用》——https://www.uisdc.com/grid-system-and-application-in-background-design

蝸牛醒《新人來(lái)收凝果！10分鐘幫你掌握柵格系統(tǒng)基礎(chǔ)知識(shí)！》——https://www.uisdc.com/grid-system-basics

MrLei《原子化設(shè)計(jì)-后臺(tái)產(chǎn)品組件庫(kù)建設(shè)》——https://www.zcool.com.cn/article/ZOTYyNTQw.html

八戒Maria《如何寫(xiě)后臺(tái)系統(tǒng)UI設(shè)計(jì)規(guī)范?》——https://www.zcool.com.cn/article/ZODIwNTg4.html

千夜Ryan_Vision《B端產(chǎn)品設(shè)計(jì)》——https://www.uisdc.com/product-design-to-business

Z清暉《面向企業(yè)中后臺(tái)產(chǎn)品的設(shè)計(jì)系統(tǒng)大合集》——https://www.ui.cn/detail/409269.html

BruceXLS《B端網(wǎng)頁(yè)設(shè)計(jì)規(guī)范全方位匯總》——https://www.ui.cn/detail/427365.html

可樂(lè)Cola《如何利用走查表驅(qū)動(dòng)設(shè)計(jì)改版》——https://www.ui.cn/detail/451478.html

Michal Parulski的后臺(tái)可視化設(shè)計(jì)作品——https://dribbble.com/Shuma87

zoeyshen的后臺(tái)可視化設(shè)計(jì)作品——https://dribbble.com/zoeyshen

三魚(yú)先生的數(shù)據(jù)可視化設(shè)計(jì)作品——https://feizai.zcool.com.cn/

寫(xiě)在后面

不管是做C端產(chǎn)品還是B端產(chǎn)品睦尽，都是為了實(shí)現(xiàn)用戶的需求器净、幫用戶解決問(wèn)題。

剛接觸后臺(tái)產(chǎn)品的UI設(shè)計(jì)師工作時(shí)候当凡，最希望能把產(chǎn)品做的炫酷山害、美觀，工作中慢慢地發(fā)現(xiàn)項(xiàng)目的背后思考更為重要沿量，產(chǎn)出的設(shè)計(jì)成果也應(yīng)該有理有據(jù)浪慌、支撐整個(gè)設(shè)計(jì)體系。網(wǎng)上供大家使用和學(xué)習(xí)的資源非常多朴则，對(duì)一些公司來(lái)說(shuō)权纤、專(zhuān)門(mén)去制定一套自己的后臺(tái)設(shè)計(jì)規(guī)范不免顯得費(fèi)時(shí)費(fèi)力，合理引入antdesign和element等開(kāi)源的設(shè)計(jì)組件乌妒，會(huì)使得設(shè)計(jì)師以及設(shè)計(jì)師的好朋友前端小哥哥事半功倍汹想，有助于設(shè)計(jì)師把更多的精力投入到沉淀行業(yè)知識(shí)、研究產(chǎn)品架構(gòu)撤蚊、梳理交互方式和創(chuàng)新視覺(jué)表現(xiàn)上古掏。

在后臺(tái)產(chǎn)品的設(shè)計(jì)過(guò)程中，更應(yīng)該把寶貴的時(shí)間用在更值得關(guān)注的事物上拴魄，讓設(shè)計(jì)師能夠輔助業(yè)務(wù)挖掘冗茸，從趨于相同的表象中找到產(chǎn)品獨(dú)有的閃光點(diǎn)，從而切實(shí)解決問(wèn)題和實(shí)現(xiàn)價(jià)值匹中。

希望對(duì)你有幫助夏漱。