六月伊人,国产精品制服丝袜欧美,亚洲va在线∨a天堂va欧美va,精品亚洲一区二区三区在线观看国产老熟女色视频,国产熟女九色,国产又粗又大,久久人人网国产精品

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

圖標——界面設(shè)計最重要的元素之一。

菜心經(jīng)常寫關(guān)于圖標的教程和感悟，可見圖標設(shè)計在我日常工作中占了很大比重，所以我始終堅信能夠把圖標做好，也是難得的特長之一！

這里拿幾個月前做的第一版小說模塊圖標為例（目前已經(jīng)改版為2.0，等正式上線后會再次與大家分享），簡單介紹下我的圖標設(shè)計思路，大綱如下：

1.風(fēng)格設(shè)定

2.創(chuàng)意腦爆

3.設(shè)計執(zhí)行

 

1.風(fēng)格設(shè)定

在開始構(gòu)思之前，我們首先需要確定圖標的設(shè)計風(fēng)格，風(fēng)格可以根據(jù)整體產(chǎn)品的設(shè)計語言推導(dǎo)，需要符合目標人群的喜好以及產(chǎn)品的屬性定位。

雖然我們是小說模塊，但還是附屬于動漫產(chǎn)品體系之下，前期的種子用戶還是產(chǎn)品原有的動漫人群，所以我將風(fēng)格鎖定在原有動漫的視覺風(fēng)格之上，大家可以看下當時動漫標簽欄圖標的樣式：

由此小說模塊圖標與上圖保持一致，設(shè)定為“描邊與色塊結(jié)合”風(fēng)格。

2.創(chuàng)意腦爆

鎖定風(fēng)格之后，就要構(gòu)思創(chuàng)意了，也就是如何在這樣的風(fēng)格之下去表達你的內(nèi)容。

這一步很關(guān)鍵，如何讓圖標不普通，大部分因素都就體現(xiàn)在內(nèi)容表達上（因為風(fēng)格其實也就那么幾種），我的方法是盡量去發(fā)散核心關(guān)鍵詞，讓圖標的含義標新立異，舉兩個這次圖標腦暴的例子：

第一個，“人氣”圖標的腦暴路徑：

這里選詞有個小技巧，我會遵循兩個原則，“具象”與“二層”。

首先來說具象：其實很好理解，如果詞匯太抽象，你是很難表達的，比如“流行”這個詞，你是很難表達的，而“火”就很具象，很容易表現(xiàn)。

再來說“二層”：指的就是盡量不要選擇核心關(guān)鍵詞延展出來的第一層詞匯，因為這些詞是大家都能想到的，并且用爛的，比如人氣直接延展出來的“火”、“獎杯”等等。（但是如果你的圖標沒有文字提示，需要表意特別明確，建議還是使用第一層延伸詞，可以在風(fēng)格上做些差異化表現(xiàn)）。

所以在上面兩個原則下，我最后設(shè)定人氣圖標使用“愛的手勢”，如下圖：

 

因為看到有些同學(xué)把“愛”與“搖滾”的手勢弄混，所以說下它們的區(qū)別：

 

希望大家在使用的時候不要搞錯哦！

第二個，“完結(jié)”圖標的腦暴路徑：

 

也是通過“具象”與“二層”原則，最后使用了商店掛的打烊門牌這一創(chuàng)意來延展：

 

 

每個關(guān)鍵詞的腦暴都會產(chǎn)生很多詞匯，各不相同，我們需要學(xué)會篩選，盡量避開過于抽象或者過于普通的詞匯，避開抽象等于具象，可以方便執(zhí)行；避開普通等于特別，如果所有的設(shè)計都是大家用爛的創(chuàng)意，那作品一定會很平庸，以上就是我在腦暴時使用的方法。

 

我們需要讓自己產(chǎn)出的每一套設(shè)計至少有一個“特別”出現(xiàn)，不然如何體現(xiàn)自己的價值呢？

 

3.設(shè)計執(zhí)行

這一步就是根據(jù)前面得到的靈感圖來進行設(shè)計，我們來看下執(zhí)行對比圖：

 

 

對于執(zhí)行需要注意的基礎(chǔ)細節(jié)，之前有寫過《圖標設(shè)計五維自檢法》，有興趣的同學(xué)可以看一下，除此之外這里再補充一點——如何讓圖標做到有細節(jié)！

 

本次設(shè)計總結(jié)了三個方法供大家參考：

 

3.1 設(shè)計技法的細節(jié)

比如給描邊增加短線風(fēng)格：

再比如線條增加面形色塊的組合：

 

3.2 根據(jù)事物本身特征增加細節(jié)

比如一個木質(zhì)門牌的細節(jié)：

 

 

3.3 俏皮的那一筆

比如書架上歪著的一本書：

再比如一根線條的破局：

 

當然增加細節(jié)的方法有太多種，總的目的就是防止圖標過于簡單、簡陋，希望你也可以有自己的一套秘方來進行設(shè)計，大家互相學(xué)習(xí)。

最后再看下圖標整體的效果吧：

 

附上過程中的一些稿子，哈哈，別嚇到你：

 

對于執(zhí)行這一塊，別人再怎么說，你不做大量的練習(xí)與思考也是無濟于事，這個道理毋庸贅言了。效果圖如下：

 

 

接下來分享的也是這幾個圖標，不過是延伸版，切入的角度會略有不同。

 

這次改版背景很簡單：首頁整體架構(gòu)調(diào)整的同時，主圖標的設(shè)計語言改成了面性，而由于時間緊，小說圖標還沒來得及改，所以這次的設(shè)計目標就一個，把第一版圖標改成面性的。

 

本來我以為，直接由線性改成填充的形式就可以了，分分鐘搞定，但沒想到改過來的效果是這樣的：

 

于是經(jīng)過調(diào)整又得到這樣的：

 

為什么還是不好看？

我也不知道??！

這種情況就去多找參考，分析分析別人的優(yōu)秀作品，比如下圖谷歌的圖標：

為什么人家的看起來就那么好看，那么精致？

 

我個人覺得最大原因就是它的透氣感比較好，導(dǎo)致透氣感好的原因在于，它采用了多元素組合的方式，并且使用大量留白與彩色形成對比。

 

在這樣的分析之下，我對圖標進行了重新構(gòu)思，直接在腦暴階段就重新思考（因為原有圖標是一個元素，很難再拆分成兩個元素來進行組合）。

為了能做到獨特，我最終選用的圖標含義如下（盡量避開用爛的詞匯）：

 

書架：兩本書互相依靠

 

熱門：手捧愛心

 

免費：冰淇淋甜筒（創(chuàng)意來自甜筒經(jīng)常會有第二份半價，或者買一  送一的活動）

 

完結(jié)：黑子手捧完結(jié)的牌子

 

 

 

最后的執(zhí)行效果如下：

 

新版圖標也是利用元素的組合，并且圖標內(nèi)有大量留白使圖標更加透氣。

 

除了透氣以外，我還在圖標之中融入了一些“有生命感的內(nèi)容”，比如手，品牌形象，擬人化的書等等：

 

使圖標變更加可愛，有情感，充滿一些故事感。

除此之外，對圖標還增加了一點點的小細節(jié)作為小彩蛋：

 

一般我們在做一組東西的時候，都希望能夠有一個主旨貫穿始終，這樣解釋起來更加有說法，有說服力。

 

比如上面這組小說圖標，設(shè)計關(guān)鍵詞是溫暖，情感，可愛，在這樣的理念下，我將溫暖轉(zhuǎn)化為陽光作為視覺語言。

 

可是陽光怎么落地呢，我當時能想到的就是高光和投影，本次使用的就是充滿光感的長投影：

 

當然，為了使圖標輕量化，投影不宜過重，起到點睛的作用即可：

除此之外，像前面所說，為了體現(xiàn)可愛的主旨，融入了手，品牌形象等有生命的元素（并且整體圖形都是比較圓潤，避免尖角的出現(xiàn)），這也是貫穿主旨的一條路徑。

 

方法很多，各不相同，其本質(zhì)目的還是希望大家做設(shè)計的時候要有適當?shù)睦砟钬灤?/span>

 

整個設(shè)計過程就差不多這些了，其實花在調(diào)整細節(jié)的時間還是比較多的，隨便一個圖標有了大方向和思路之后，還是需要不斷的修改修改再修改。

 

 

 

顏色的搭配、五官的間距、元素之間的大小關(guān)系等等，都需要不斷的調(diào)整，而真正考驗我們的也就在這些細節(jié)當中。

 

這里再補充兩個增加可愛度的實用小技巧：

 

1 五官緊湊

一般情況下，縮小五官的間距，可以一定程度上實表情更加可愛，尤其是嘴鼻和眼睛的間距：

 

2 腮紅

 

一般來說，在我的印象中只有可愛的東西才會有腮紅，五大三粗的大老爺們加個腮紅，咦～，不敢想！

 

所以畫可愛的形象或表情時，可以考慮加個腮紅：

不過我這次由于元素太多，所以沒加，大家可以根絕實際情況自行實踐。

 

最后：

看萬卷書，行萬里路！不走，書白看。

看萬篇文，練萬個習(xí)！不練，文白看。

 

 

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

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里B端后臺產(chǎn)品UI設(shè)計的工作小結(jié)，總結(jié)一些常見問題、解決方法以及自己的經(jīng)驗。

寫在前面

作為一個新時代全能打雜，日常工作包括移動端、PC端的UI設(shè)計以及各類平面視覺設(shè)計，其中自然少不了令人“禿”然的B端后臺產(chǎn)品設(shè)計。

畢業(yè)兩年來一直都做著B端產(chǎn)品的UI設(shè)計工作，參與過的后臺產(chǎn)品設(shè)計面對的主要客戶有公司內(nèi)部、各大企業(yè)以及政府機構(gòu)。工作和學(xué)習(xí)的過程中走過不少彎路，也在不同的項目中不斷反思和總結(jié)。把自己的一些想法和經(jīng)驗分享出來，總結(jié)自己工作中遇到的問題和解決的方法，記錄自己思考和理解的過程，也希望對即將或正在從事B端后臺產(chǎn)品設(shè)計的你有一點點啟發(fā)或幫助。

希望在日后的工作和學(xué)習(xí)中，通過實踐來不斷完善自己對B端后臺產(chǎn)品的理解。

目錄

一、明修棧道C和暗度陳倉B

二、后臺產(chǎn)品設(shè)計思路

三、后臺產(chǎn)品設(shè)計規(guī)范

四、經(jīng)驗觀點及設(shè)計資源

正文

一、明修棧道C和暗度陳倉B

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

按照C端產(chǎn)品和B端產(chǎn)品的專業(yè)術(shù)語來解釋的話，C端Consumer，表示為消費者、個人用戶或終端用戶設(shè)計，直接面向普通用戶提供服務(wù)來幫助他們實現(xiàn)個人需求。B端Business，它面對商業(yè)和企業(yè)，是為幫助企業(yè)集團等實現(xiàn)商業(yè)目的而設(shè)計的軟件、工具或者平臺。

在我們?nèi)粘Ｉ钪校谑謾C上使用的大多是C端產(chǎn)品，單一的C端產(chǎn)品通常是為了實現(xiàn)單一的需求，比如看網(wǎng)紅的抖音、聽音樂的酷狗、買車票的12306、社交的微信等，這些產(chǎn)品有自己的核心功能，其他的功能則是附加的，倘若沒有這些附加功能，雖然用戶體驗感會降低，但并不會影響產(chǎn)品的核心功能。

而面向B端的產(chǎn)品，我個人稱之為“暗度陳倉”，當個人用戶為實現(xiàn)個人需求產(chǎn)生了一系列動作，往往伴隨著該需求的另一端也會反饋一系列動作，即C端產(chǎn)品的后臺產(chǎn)品線（BtoC），比如淘寶賣家平臺、餓了么商家版等。除此之外，還有面向商家、企業(yè)、業(yè)務(wù)部門提供的企業(yè)級服務(wù)產(chǎn)品，以及面對企業(yè)或者個人提供的平臺級工具產(chǎn)品等。

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

——“ToB還是ToC？這是個問題......”

——“不管ToB還是ToC，最后都還是ToP（people）?！?/span>

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

在我看來，C端產(chǎn)品以消費互聯(lián)網(wǎng)為主，B端產(chǎn)品以產(chǎn)業(yè)互聯(lián)網(wǎng)為主，C端更感性，而B端更理性。

從使用者的角度來說——

C端產(chǎn)品關(guān)鍵詞包括免費使用、迅速上手、體驗為王、你能讓我做什么；

B端產(chǎn)品的關(guān)鍵詞則是付費購買、上手緩慢、效率第一、你能為我做什么。

從開發(fā)的角度來說——

C端周期短，B端周期長；

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

C端邏輯簡單，B端邏輯復(fù)雜；

C端競品較多，B端競品較少；

C端主戰(zhàn)場是移動端，B端則是PC端；

C端是用戶體驗驅(qū)動，B端是解決問題驅(qū)動；

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

C端產(chǎn)品除了產(chǎn)品的體驗以外，也要讓產(chǎn)品更美觀，讓活動更有趣，讓用戶更舒服，產(chǎn)品經(jīng)理有很強的同理心，B端產(chǎn)品的實用性大于美觀性，能切實解決問題、配置資源的B端產(chǎn)品才是一個好的B端產(chǎn)品，產(chǎn)品經(jīng)理要具有更強的邏輯思維能力。

1.3后臺產(chǎn)品常見分類

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

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

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

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

• 企業(yè)的業(yè)務(wù)處理平臺——對內(nèi)有考勤、報銷等OA辦公系統(tǒng)，對外有CRM客戶管理系統(tǒng)，ERP資源及供應(yīng)鏈管理系統(tǒng)。

二、后臺產(chǎn)品設(shè)計思路

2.1初識后臺產(chǎn)品設(shè)計

說起后臺產(chǎn)品，很容易想到復(fù)雜、龐大、邏輯縝密，而作為設(shè)計師，苦于競品短缺、架構(gòu)復(fù)雜，設(shè)計的前期工作比設(shè)計本身要復(fù)雜得多。

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

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

這大概就是后臺產(chǎn)品相關(guān)資源較少、設(shè)計難度較大的一些原因。

2.2后臺UI設(shè)計工作流程

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

• 在需求分析階段，要對產(chǎn)品本身和行業(yè)本身有一些基本的認知。要了解產(chǎn)品的基本情況，比如產(chǎn)品目標、用戶人群、產(chǎn)品定位、需求分析、功能模塊、主要競品和產(chǎn)品特色。 做這個產(chǎn)品是為了解決什么問題？想實現(xiàn)什么目標？使用這個系統(tǒng)的用戶有哪些？不同角色的用戶有哪些具體的權(quán)限？是否需要對每一個用戶的行為都生成操作日志？產(chǎn)品有哪些主要的功能模塊？產(chǎn)品的業(yè)務(wù)流程是怎樣的？有哪些同類型的產(chǎn)品？和他們相比我們的產(chǎn)品有什么特色和特點？成功地做出大而全的后臺產(chǎn)品，是整個設(shè)計團隊和開發(fā)團隊能力的體現(xiàn)，而對很多小團隊來說，只能做一些大團隊不愿去做的產(chǎn)品，或另辟蹊徑在某些方面做專做精。

• 在設(shè)計執(zhí)行階段，參照PM給出的功能清單做原型和流程的梳理，需要關(guān)注的有當前版本規(guī)劃、功能模塊、功能類型、功能描述、任務(wù)優(yōu)先級、完成時間等，交互原型則伴隨著功能描述、規(guī)則判定條件、觸發(fā)條件等內(nèi)容。原型設(shè)計完成，開始做UI視覺方面的設(shè)計，而這時后端同步構(gòu)思需求的實現(xiàn)方案。UI設(shè)計師向前端了解實現(xiàn)框架，方便交接和溝通。當界面實現(xiàn)，UI設(shè)計師應(yīng)該是最早進行測試的，力求視覺設(shè)計和代碼實現(xiàn)無誤差。在完成設(shè)計執(zhí)行后，從信息層級、文字、圖標、圖片等方面進行設(shè)計走查，進行多次設(shè)計驗證與測試。

• 數(shù)據(jù)分析是產(chǎn)品優(yōu)化迭代的重要依據(jù)。進行多番測試和評審后交付客戶（或內(nèi)部）使用，根據(jù)產(chǎn)生的具體問題進行不斷迭代，且觀察產(chǎn)品能否通過準確的數(shù)據(jù)反映問題、體現(xiàn)能力，應(yīng)虛心接納使用者的使用建議并嚴謹思考其合理性，用戶的使用和反饋是優(yōu)化產(chǎn)品的重要途徑。只有達到了管理和運營的指標，后臺產(chǎn)品才是真正產(chǎn)生了價值。

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

為后臺產(chǎn)品制定設(shè)計規(guī)范有哪些作用和好處呢？簡單來說就是對產(chǎn)品好、對自己好、對團隊好、對客戶好。

• 對產(chǎn)品——在項目完成第一版較為穩(wěn)定的版本時，著手制定設(shè)計標準，統(tǒng)一公司視覺設(shè)計規(guī)范及某些特定交互設(shè)計規(guī)范。同一個項目會有多個設(shè)計師的參與，規(guī)范化的設(shè)計語言，避免因設(shè)計控件混亂而影響設(shè)計輸出；

• 對自己——組件化同類元素，提高工作效率，建立公司產(chǎn)品的組件庫，以便不同項目的復(fù)用及設(shè)計延展；在同一個項目中也能更好的把控該項目的視覺規(guī)范，提率；

• 對團隊——設(shè)計規(guī)范的制定，規(guī)范了設(shè)計團隊的輸出，同時方便了與開發(fā)團隊的交接和協(xié)作。通過設(shè)計規(guī)范的制定，前端實現(xiàn)也能擁有一套可供復(fù)用和擴展的組件庫，助力上下游交接及團隊協(xié)作；

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

三、后臺產(chǎn)品設(shè)計規(guī)范

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

3.1頁面布局

1. 統(tǒng)一尺寸——據(jù)統(tǒng)計，目前PC端用戶屏幕分辨率占比排名前三的是1920*1080、1366*768、1440*900，以1440來設(shè)計的話，向上適配或者向下適配誤差會比較小。 適配方案——面向多個客戶，后臺產(chǎn)品設(shè)計功能型頁面的尺寸統(tǒng)一為1440*900，按照柵格系統(tǒng)原則向上或向下適配；展示型頁面以1440*900為主，同時設(shè)計出極端情況（寬度為1280以及寬度為1920）的效果圖，力求實現(xiàn)前端實現(xiàn)效果和高保真設(shè)計圖誤差最小。面向公司內(nèi)部的后臺系統(tǒng)，由于各個職工電腦屏幕是統(tǒng)一采購、統(tǒng)一尺寸，所以開發(fā)適配的分辨率可以統(tǒng)一尺寸進行設(shè)計，這個尺寸根據(jù)公司內(nèi)部采購屏幕的尺寸和分辨率選擇即可（提前和前端溝通好）。

2. 頁面框架——頁面框架主要分為左右欄布局和上下欄布局，還有其他的布局。左右欄布局包括頂部欄、左側(cè)菜單欄、主體內(nèi)容三大區(qū)域，其中頂部菜單欄、左側(cè)菜單欄為固定結(jié)構(gòu)，右側(cè)主體內(nèi)容根據(jù)分辨率進行動態(tài)縮放；上下欄布局包括頂部菜單欄和主體內(nèi)容兩大區(qū)域，其中頂部菜單欄為固定結(jié)構(gòu)，主體內(nèi)容進行動態(tài)縮放且需定義主體內(nèi)容左右兩邊空白區(qū)域最小值；左右欄布局時，左側(cè)菜單可收縮展開，收縮狀態(tài)下固定寬度。

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

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

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

3.2標準色

1. 顏色分為品牌色、輔助色、中性色。根據(jù)不同產(chǎn)品的不同需求，可能也會將統(tǒng)計圖、標簽等進行統(tǒng)一標準色設(shè)定。

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

3. 輔助色用于提示其他場景，比如成功、失敗、警告、無效等。

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

5. 其他色如統(tǒng)計圖、數(shù)據(jù)可視化、多個標簽的不同配色方案根據(jù)項目情況單獨設(shè)定。

   

3.3標準字

1. 后臺系統(tǒng)常用的字體：windows系統(tǒng)，中文Microsoft YaHei，英文Arial；Mac字體，中文PingFang SC，英文Helvetica；除此之外可以選擇的字體還有segoe UI、思源黑體、Hiragino Sans GB等。

2. 后臺系統(tǒng)中常用字體大小為12px、13px、14px、16px、18px、20px、24px、30px。

3. 行高設(shè)定，根據(jù)文字大小及使用場景設(shè)置行高，一般行高=文字大小+6px/8px。

3.4圖標

1. 圖標是UI設(shè)計中重要組成部分，一般分為功能圖標和應(yīng)用圖標，以圖形的方式傳達概念，可以降低理解成本，使得界面更加協(xié)調(diào)美觀。在后臺產(chǎn)品中，圖標的功能則更偏向輔助性，輔助用戶對功能的認識。

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

3. 分享一個我個人常用的AI使用小習(xí)慣，因為ctrl+q、ctrl+w作為退出和關(guān)閉我用的不多，而且有時候手抖會在保存時候不小心點成了關(guān)閉，所以我無情地把ctrl+q、ctrl+w變成了拓展和拓展外觀的快捷鍵......感受還不錯。

3.5按鈕

1. 按鈕是后臺產(chǎn)品進行交互設(shè)計是重要元素，提供給用戶進行點擊操作，是視覺上最引人注目的控件，具有一定的視覺受范性。常用按鈕可分為填充按鈕、線性按鈕、文字按鈕。

2. 按鈕的交互狀態(tài)包括默認、懸停、點擊和不可用。

3. 按鈕根據(jù)需求分為不同尺寸，大中小三個級別用在不同的場景，一般按照8的倍數(shù)設(shè)定。如高度分別設(shè)定為24、32、40px。

4. 規(guī)范整理時要規(guī)定不同類型按鈕的寬高、圓角及文字大小，同時還要將按鈕的不同狀態(tài)展現(xiàn)出來。

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

3.6導(dǎo)航

1. 導(dǎo)航的類型有很多種，常用的比如頂欄菜單、側(cè)欄菜單、折疊菜單、下拉菜單、面包屑、分頁、步驟條、時間軸、tab標簽頁、膠囊菜單、徽標數(shù)等。

2. 各類導(dǎo)航中的字體大小可進行統(tǒng)一設(shè)定。

3. 頂欄菜單多為一級菜單，點擊切換，或作為下拉菜單的父級，將子級菜單合理分類。

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

5. 下拉菜單的觸發(fā)方式一般有鼠標懸停和鼠標點擊兩種。

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

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

8. 面包屑用于說明層級結(jié)構(gòu)，使用戶明確當前所在位置，并且可以回到任一上級頁面。

9. 徽標數(shù)用來通知用戶當前有未讀消息，一般出現(xiàn)在圖標的右上角或者跟在文字后面。

   
   

3.7表單

1. 表單多由一條或多條列表項組成，單一列表項的類型有字段輸入框、條件選擇器。

2. 字段輸入框的標題和輸入框分布方式包括左右、上下、無標題。左右分布是常見的對齊方式，比較適合PC端的使用；上下分布增加了表單的整體高度，視情況選擇使用；無標題經(jīng)常應(yīng)用在登錄注冊，雖然減少了面積，但是增加了理解難度。

3. 輸入框的交互狀態(tài)包括默認、輸入結(jié)果、提示錯誤、禁用、獲取焦點。

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

5. 表單中標題文字左對齊，輸入框左對齊，標題文字距離輸入框20px（多個長度不同的輸入框算最長的）；標題文字右對齊，輸入框左對齊，也是常用的方式。輸入框內(nèi)正文字體14px，文字和左右兩邊邊框的邊距10px。

6. 選擇器包括單選、多選、時間選擇、開關(guān)切換、下拉選擇、滑塊選擇、旋鈕等。單選框多為圓形，復(fù)選框多為方形。

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

8. 單選多選框尺寸16*16px，多個選項橫向排列間距16px，縱向排列間距8px。

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

3.8表格

1. 表格在后臺產(chǎn)品UI設(shè)計中站的比重非常大，用來展示數(shù)據(jù)、統(tǒng)一管理、作為詳情入口，是最清晰、的形式之一。在設(shè)計規(guī)范中需設(shè)定表頭高度、表格行高、表格列寬范圍，同時也包括表格中的按鈕樣式、標簽樣式。

2. 表格主要分為五大區(qū)域：選擇搜索區(qū)、操作區(qū)、表頭、正文、底欄。選擇搜索區(qū)放置篩選框和搜索框，為用戶提供按需搜索，可以大大提高用戶效率；操作區(qū)指各種對表格內(nèi)容進行增刪改查、批量處理、配置列的動作；表頭展示列標題，一般具有排序功能；正文主要展示各種各樣的數(shù)據(jù)，要注意行高、對齊、分割、信息層級等，要考慮是否提供行內(nèi)操作；底欄顯示分頁、總數(shù)統(tǒng)計等。 
   表格信息一般主要功能為增刪改查，查看和編輯是最基本的功能，表格信息支持篩選、搜索、排序、分頁。對可批量操作的表格數(shù)據(jù)在第一列增加多選框。

3. 行高——表格行高可設(shè)置為表格內(nèi)字體高度的2~3倍，主表格會間隔顯示不同顏色，用于區(qū)分不同行數(shù)據(jù)、加強視覺流引導(dǎo)，展開單行的內(nèi)置表格可采用純色，選中行應(yīng)有視覺上的反饋。表頭要和表格內(nèi)容有視覺上的區(qū)分。表格行高可采用36、40、48、60等。

4. 行數(shù)——表格行數(shù)太多加載速度會降低，延長用戶等待時間；行數(shù)太少會導(dǎo)致用戶不斷翻頁，降低使用效率。比較合適的默認表格行數(shù)是20或50，用戶可以根據(jù)自己需求選擇默認的行數(shù)。設(shè)定行數(shù)之后，如果每頁行數(shù)多余每屏行數(shù)，可在表格內(nèi)引入滾動條，這時可以固定表頭滾動內(nèi)容。

5. 列寬——列寬根據(jù)內(nèi)容字段長短需要有不同且合理的默認值，使得表格字段有良好的展示效果。列內(nèi)容的長度固定時，列寬應(yīng)大于固定寬度（比如時間、MD5、SHA1）；列內(nèi)容不固定時，能預(yù)判最大寬度的按照最大寬度設(shè)定列寬（比如IP地址、MAC地址、姓名），不能預(yù)判最大寬度的設(shè)定列寬按照常用寬度，多于內(nèi)容省略以“...”展示，鼠標懸停出現(xiàn)完整內(nèi)容（比如詳情、描述）。

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

7. 對齊方式——表格內(nèi)的文本應(yīng)按照文本類型不同進行統(tǒng)一規(guī)范，如金額類數(shù)值保留相同位數(shù)小數(shù)，SHA1雖然是一串數(shù)字但是其實那并不是數(shù)據(jù)而是一串編碼，所以可以像文文本一樣左對齊。根據(jù)文本內(nèi)容不同，對齊方式也應(yīng)靈活調(diào)整，可采用文本左對齊、數(shù)據(jù)右對齊、金額小數(shù)點對齊的方式。數(shù)據(jù)前面有標簽的，將標簽前置對齊。類似IP地址、MD5、SHA1、域名這樣的信息，也可以根據(jù)產(chǎn)品需要在文本前面增加“復(fù)制”圖標，方便用戶調(diào)用。

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

3.9反饋

1. 包括彈框、側(cè)滑框、骨架屏、全局提示、警告提示、消息提醒、加載狀態(tài)等。分為模態(tài)框和非模態(tài)框，區(qū)別是是否會打斷用戶工作流。

2. 彈框又稱對話框，是疊加在應(yīng)用主窗口上的彈出式窗口，以對話的方式使用戶參與進來。

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

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

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

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

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

8. 通知提醒——消息通知和告警信息用通知提醒框，單個消息從頁面右側(cè)以抽屜的方式劃出，用戶可手動關(guān)閉，或停留3s后自動關(guān)閉。

3.10缺省狀態(tài)

1. 繪制不同類型的情感畫插畫表示缺省狀態(tài)，如404、500、暫時沒有數(shù)據(jù)、沒有新消息等。

2. 頁面需要一個默認的底色，錯誤文字使用14px，與情感化插畫間距20px，與按鈕間距30px；

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

1. 數(shù)據(jù)可視化部分可能是后臺產(chǎn)品中對視覺設(shè)計要求較高的部分，使用情境為各類統(tǒng)計圖、大屏展示頁面等。

2. 功能型頁面的數(shù)據(jù)可視化可以引入圖形化設(shè)計組件，Echarts、G2、d3等；展示型頁面的數(shù)據(jù)可視化則可以做的更有趣，比如立體的統(tǒng)計圖、粒子地球效果、靈活有趣的網(wǎng)絡(luò)拓撲圖等。

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

四、經(jīng)驗觀點及設(shè)計資源

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

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

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

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

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

• Layui的設(shè)計組件——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

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

4.2不丑也要多讀書

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

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

• 《U一點料·Ⅱ》

• 《簡約至上:交互式設(shè)計四策略》

寫在最后

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

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

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

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

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里