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

網(wǎng)頁(yè)布局（layout）是 CSS 的一個(gè)重點(diǎn)應(yīng)用。畢竟簡(jiǎn)單的樣式不能總依賴(lài)前端人員。
布局的傳統(tǒng)解決方案，基于盒狀模型，依賴(lài) display 屬性 + position屬性 + float屬性。它對(duì)于那些特殊布局非常不方便，比如，垂直居中就不容易實(shí)現(xiàn)。

2009年，W3C 提出了一種新的方案----Flex 布局，可以簡(jiǎn)便、完整、響應(yīng)式地實(shí)現(xiàn)各種頁(yè)面布局。目前，它已經(jīng)得到了所有瀏覽器的支持，這意味著，現(xiàn)在就能很安全地使用這項(xiàng)功能。

Flex 是 Flexible Box 的縮寫(xiě)，意為"彈性布局"，用來(lái)為盒狀模型提供最大的靈活性。

采用 Flex 布局的元素，稱(chēng)為 Flex 容器（flex container），簡(jiǎn)稱(chēng)"容器"。它的所有子元素自動(dòng)成為容器成員，稱(chēng)為 Flex 項(xiàng)目（flex item），簡(jiǎn)稱(chēng)"項(xiàng)目"。


容器默認(rèn)存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開(kāi)始位置（與邊框的交叉點(diǎn)）叫做main start，結(jié)束位置叫做main end；交叉軸的開(kāi)始位置叫做cross start，結(jié)束位置叫做cross end。

項(xiàng)目默認(rèn)沿主軸排列。單個(gè)項(xiàng)目占據(jù)的主軸空間叫做main size，占據(jù)的交叉軸空間叫做cross size。

先說(shuō)第一個(gè)屬性flex-direction 屬性決定主軸的方向（即項(xiàng)目的排列方向）。
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
row（默認(rèn)值）：主軸為水平方向，起點(diǎn)在左端。
row-reverse：主軸為水平方向，起點(diǎn)在右端。
column：主軸為垂直方向，起點(diǎn)在上沿。
column-reverse：主軸為垂直方向，起點(diǎn)在下沿。
廢話少說(shuō)，立刻上代碼，驗(yàn)證下。

row：

眾所周知，h1和p都是塊級(jí)元素，都會(huì)縱向排列，一旦采用 Flex 布局，就以x和y軸為基礎(chǔ)排序，
column：

不但模糊了塊級(jí)元素和行內(nèi)元素的區(qū)別，而且左右的排序也很靈活。
row-reverse：

flex-wrap屬性
默認(rèn)情況下，項(xiàng)目都排在一條線（又稱(chēng)"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下，就會(huì)換行。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
（1）nowrap（默認(rèn)）：不換行。
（2）wrap：換行，第一行在上方。
（3）wrap-reverse：換行，第一行在下方。
wrap：

雖然他換行了，但是每行的元素是不是靠的太近了
在這時(shí)候就能用到
justify-content屬性
justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
它可能取5個(gè)值，具體對(duì)齊方式與軸的方向有關(guān)。下面假設(shè)主軸為從左到右。

flex-start：（默認(rèn)值）：左對(duì)齊
flex-end：右對(duì)齊
center： 居中
space-between：兩端對(duì)齊，項(xiàng)目之間的間隔都相等。
space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。所以，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。

space-between：

但是還是有點(diǎn)不對(duì)勁，原來(lái)沒(méi)有垂直居中。
align-items屬性就出來(lái)了
align-items屬性定義項(xiàng)目在交叉軸上如何對(duì)齊。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
它可能取5個(gè)值。具體的對(duì)齊方式與交叉軸的方向有關(guān)，下面假設(shè)交叉軸從上到下。
flex-start：交叉軸的起點(diǎn)對(duì)齊。
flex-end：交叉軸的終點(diǎn)對(duì)齊。
center：交叉軸的中點(diǎn)對(duì)齊。
baseline: 項(xiàng)目的第一行文字的基線對(duì)齊。
stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿(mǎn)整個(gè)容器的高度。

還有很多屬性可以靈活的調(diào)整頁(yè)面的排版，我只舉例最簡(jiǎn)單的幾種排版。
沒(méi)有float，沒(méi)有position，也沒(méi)有行和塊。只要知道x軸和y軸就能輕松布局。
如果想了解flex布局，可以看一下這位大佬的博客：
語(yǔ)法篇：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
實(shí)戰(zhàn)篇：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

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

值得欣喜的是今年的設(shè)計(jì)作品依然體現(xiàn)著設(shè)計(jì)師的好奇心與勤勉，這激勵(lì)我們向著新高度進(jìn)發(fā)。你會(huì)在今年的趨勢(shì)中看到往年主題的延續(xù)，但是融合和改變形成了跟為獨(dú)特的設(shè)計(jì)趨勢(shì)。設(shè)計(jì)師們開(kāi)始采用非傳統(tǒng)的色彩和線條，賦予新的內(nèi)涵。

Logo中的圖案通常以黑白配色呈現(xiàn)，營(yíng)造一種復(fù)古感。設(shè)計(jì)師們以大量的網(wǎng)點(diǎn)元素作為構(gòu)建差異的方式。粗礪的噪點(diǎn)、條紋以及網(wǎng)線銅版和木紋磚紋的調(diào)合，使logo呈現(xiàn)一種復(fù)古的視覺(jué)特征，這似乎與時(shí)下的高飽和漸變色彩的使用趨勢(shì)背道而馳。

現(xiàn)代流行文化不僅改變了我們看待符號(hào)的方式，也影響了視覺(jué)設(shè)計(jì)時(shí)的優(yōu)先級(jí)。隨著紋理、圖案、排版、攝影和插畫(huà)元素在視覺(jué)品中的優(yōu)先級(jí)發(fā)生變化，視覺(jué)元素愈發(fā)地被收到重視?，F(xiàn)代品牌很多時(shí)候會(huì)被視作為是被視覺(jué)美學(xué)所推動(dòng)前進(jìn)，因此也會(huì)要求 LOGO 具備更強(qiáng)的視覺(jué)吸引力。

陰陽(yáng)相生。當(dāng)一種新的風(fēng)格、思路，新的濾鏡、插件和設(shè)計(jì)工具出現(xiàn)的時(shí)候，設(shè)計(jì)都會(huì)向著不同的方向演化。但是，每一個(gè)精心制作的LOGO，包括動(dòng)態(tài)LOGO 你都很難把功勞歸結(jié)于某一個(gè)工具或者方法，它始終是多種方法、工具和流程共同作用的結(jié)果，很難把不同的因素徹底地區(qū)分開(kāi)。嘗試新的事物從來(lái)都不是壞事，但是我仍然寄希望于獨(dú)特的技術(shù)和方法，希望在設(shè)計(jì)里留下自己的痕跡。

我需要再一次重申的是，潮流并非是趨勢(shì)所造就的。與時(shí)尚領(lǐng)域不同的是，設(shè)計(jì)趨勢(shì)不會(huì)隨著文化變遷而突然爆火，相反，它在設(shè)計(jì)維度上，一直是向著兩個(gè)方向延伸，觸摸過(guò)去也面向未來(lái)。更準(zhǔn)確的來(lái)說(shuō)，是我們一直從過(guò)去的天才構(gòu)想中汲取經(jīng)驗(yàn)，同時(shí)還在不斷開(kāi)辟走向未來(lái)的路。

毫無(wú)疑問(wèn)，今年流行的主題中出現(xiàn)了很多時(shí)下流行的元素和主題，包括無(wú)人機(jī)、蘑菇、刺猬、鵜鶘、蛇、華夫餅、針、燈泡、三眼虎和蒸汽波。雖然這些流行元素只是暫時(shí)的，但許多作品仍然制作精美。盡管這種流行元素的風(fēng)潮最終會(huì)落幕，我還是要向它們致敬。

我仍然要感謝 LogoLounge 社區(qū)的2萬(wàn)多名來(lái)自世界各地的設(shè)計(jì)師，他們?yōu)檫@份報(bào)告提供了大量素材。在本報(bào)告發(fā)布時(shí)，我們的網(wǎng)站擁有超過(guò)30萬(wàn)個(gè)的logo設(shè)計(jì)師，我們可以與會(huì)員一起繼續(xù)觀察他們的職業(yè)發(fā)展趨勢(shì)。能夠與他們并肩工作，支持我們熱愛(ài)的這項(xiàng)事業(yè)，是一種榮幸。

1、摩爾斯陰影

老實(shí)說(shuō)，要求一個(gè)老練的LOGO 設(shè)計(jì)師在 LOGO 當(dāng)中加入流行的陰影效果，這仿佛是對(duì)設(shè)計(jì)師靈活的創(chuàng)造力進(jìn)行質(zhì)疑。今年我們的團(tuán)隊(duì)精心設(shè)計(jì)了一種新的方式來(lái)為他們的作品加入陰影——因?yàn)殛幱靶Ч緛?lái)就不止一種，而還需要兼顧到 LOGO 本身的可用性。我們避開(kāi)短暫流行的漸變色，用一連串同心的點(diǎn)和線來(lái)呈現(xiàn)光影動(dòng)態(tài)，以這種新的方式，比傳統(tǒng)陰影更具視覺(jué)張力，更重要的是，它可以更自然地輸出純矢量的單色 LOGO 。

在過(guò)去的幾年里，我們看到圓點(diǎn)和線混合在一起，展示了不同元素的融合。通常，這的設(shè)計(jì)方案會(huì)以同心圓為中心，其他元素彼此平行，但不會(huì)完全合并到一起。通過(guò)將這些元素彼此融合到一起，讓它們和主體元素融合、交匯，在負(fù)空間的幫助下，設(shè)計(jì)師以這種方式讓消費(fèi)者在頭腦中自覺(jué)將圖像填充完整。比如咖啡杯中的幾個(gè)點(diǎn)，以及用點(diǎn)狀表示的兔子尾巴。

2、堆疊

有人會(huì)因?yàn)楸P(pán)子里的食物混在一起而崩潰，也有人對(duì)此毫不介意。所以，有的設(shè)計(jì)師將元素之間的各種元素之間的界限給先打破了，通過(guò)重疊來(lái)創(chuàng)造層次感，互相堆疊的元素會(huì)呈現(xiàn)出一種模糊的效果。而其中大多數(shù) Logo 都呈現(xiàn)出了一種引人入勝的信息，巧妙地吸引了人們的關(guān)注。當(dāng)然，也許大多數(shù)人會(huì)選擇創(chuàng)建一個(gè)對(duì)比明顯、信息清晰的LOGO。

這種堆疊式的LOGO設(shè)計(jì)，使用兩個(gè)圖層足矣，三個(gè)圖層也勉強(qiáng)可以駕馭，但四個(gè)圖層就太過(guò)了。如果背景無(wú)法辨認(rèn)，發(fā)揮作用的就只有最頂層的視覺(jué)元素。上圖所示的這些logo融合了類(lèi)似于徽章和插畫(huà)的排版，正如這些例子所示，這些源自復(fù)古的設(shè)計(jì)能夠煥發(fā)出全新的力量。

3、微陰影

陰影作為logo設(shè)計(jì)中的一個(gè)元素，在很多方面都是至關(guān)重要的。我用了一個(gè)完整章節(jié)來(lái)討論陰影的重要性。陰影暗示著光的方向，更確切地說(shuō)，它可以顯示維度和空間關(guān)系。一條垂直線和一條水平線，再加上一點(diǎn)陰影，就可以確定誰(shuí)在平面上方了。畫(huà)一匹色調(diào)均勻的馬，那么馬的兩條后腿就應(yīng)該處理得暗一點(diǎn)。

有時(shí)候，我們作為設(shè)計(jì)師會(huì)受限于自己的技法，這是很正常的。在這些標(biāo)志當(dāng)中，包含著一個(gè)非常微妙的小陰影，雖然在 Trustpilot star 這個(gè)案例中，看起來(lái)確實(shí)做了比較清晰的分離處理，但我仍然想知道，如果按比例縮小，這種對(duì)比是否足夠明顯發(fā)揮作用。我的建議是，如果需要效果，就要盡量使得效果可以明顯地呈現(xiàn)，而不是要佩戴老花鏡才能看得清楚。但是毋庸置疑，有很多設(shè)計(jì)師是經(jīng)過(guò)審慎考慮之后，才選擇了這樣的方案。

4、斜紋線條

熱情飽滿(mǎn)的新生代設(shè)計(jì)師正在重塑潮流。在數(shù)字時(shí)代之前，想要在插畫(huà)中加入條紋、圓點(diǎn)、中間色調(diào)、木紋或其他異國(guó)情調(diào)的半調(diào)效果，首先需要去當(dāng)?shù)氐乃囆g(shù)用品商店逛逛。如今如果你想要實(shí)現(xiàn)半調(diào)效果，你只需花費(fèi)很少的錢(qián)就可以將其應(yīng)用到你的設(shè)計(jì)當(dāng)中。復(fù)古風(fēng)的設(shè)計(jì)書(shū)籍中充斥著各種各樣的標(biāo)志，展示著一些非常漂亮的半調(diào)式的漸變效果，這會(huì)讓設(shè)計(jì)師們對(duì)這種相對(duì)古老卻陌生的技術(shù)感到好奇。

這一趨勢(shì)是非常典型的70年代復(fù)古，不僅在風(fēng)格上，而且在色調(diào)上也有體現(xiàn)。這些帶來(lái)半調(diào)效果的斜條紋線所創(chuàng)造的效果接近于40%的黑色。這樣的 LOGO 設(shè)計(jì)能夠讓用戶(hù)一秒回到以往那個(gè)美好的時(shí)代，不那么機(jī)器制造的感覺(jué)。但是它仍然存在缺陷，就是當(dāng)它縮小的時(shí)候，斜條紋會(huì)模糊，最終會(huì)呈現(xiàn)出一片灰色的效果。

5、波點(diǎn)

在半調(diào)和高亮式的設(shè)計(jì)技法之間，波點(diǎn)元素還有一席之地。這些超大的圓點(diǎn)其實(shí)也算得上是半調(diào)的一種形態(tài)，它們實(shí)際上算是圖標(biāo)中的一個(gè)組成元素，而不僅僅是背景。從這些LOGO的設(shè)計(jì)案例當(dāng)中，我們可以看到，這些圓點(diǎn)近似于編織的籃子或桃子的紅暈，圖案并不僅僅是用來(lái)表達(dá)色調(diào)的，它還暗含光影和紋理。

使用更大膽圖案元素，已經(jīng)是一個(gè)公認(rèn)有效設(shè)計(jì)策略，打破緊張的平面色調(diào)和布局，并創(chuàng)造視覺(jué)吸引力，讓元素更醒目。作為一種從在漸變和失真之間尋求平衡感的設(shè)計(jì)，波點(diǎn)使得設(shè)計(jì)師可以以有限的顏色，簡(jiǎn)單而有趣的矢量圓點(diǎn)來(lái)吸引消費(fèi)者。

6、高亮

人們很容易認(rèn)為，在吸引人們注意的領(lǐng)域里沒(méi)有什么新技巧。猿類(lèi)拍打胸部，孔雀展開(kāi)羽毛，人類(lèi)則在社交媒體上發(fā)帖。還有一小部分身份設(shè)計(jì)師會(huì)選擇高亮效果來(lái)修飾他們的設(shè)計(jì)——至少這是今年最引人注目的趨勢(shì)之一。

我們通常認(rèn)為黑白配色的 logo 是在添加高光之前展示給客戶(hù)的。當(dāng)下流行的高亮色調(diào)有淡紫色，日光粉，和冰藍(lán)色。拋開(kāi)所有的視覺(jué)趣味性不談，設(shè)計(jì)師們認(rèn)識(shí)到，正是色彩的火花讓這些logo擺脫了潛在的平庸性。

7、扇形元素

過(guò)去兩年之間，設(shè)計(jì)主題已然延續(xù)到簡(jiǎn)化設(shè)計(jì)，以及 Logo的純粹化。這種對(duì)前人作品結(jié)構(gòu)的致敬，同樣體現(xiàn)著設(shè)計(jì)師的創(chuàng)造性，因?yàn)樗麄兿氤龅慕鉀Q方案是基于重新排列幾何元素而來(lái)的。每當(dāng)你聽(tīng)到有人表示相信一切都是以前做過(guò)的，只要提醒他們，作家和音樂(lè)家一直在重新排列了一些筆記或字母，而且新的音樂(lè)和書(shū)籍，比logo 要多的多，但是靈感之泉卻從未干涸。這大概也是以四分之一圓微代表的幾何元素，開(kāi)始大規(guī)模地出現(xiàn)。

今年，四等分的圓圈元素——或者說(shuō)扇形，隨處可見(jiàn)。大多數(shù)情況下，設(shè)計(jì)師會(huì)完全基于這個(gè)扇形來(lái)作為唯一的模塊，但偶爾也會(huì)讓它們與圓、半圓、正方形、三角形和其他幾何形狀混合在一起。即使在表達(dá)復(fù)雜的信息時(shí)，形式的純粹性可以恰當(dāng)?shù)嘏c之進(jìn)行平衡。如果logo看起來(lái)很冗雜，那么放入元素的數(shù)量應(yīng)當(dāng)有所限制。

藍(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)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

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

明修棧道C和暗渡陳倉(cāng)B

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

C端 Consumer，表示為消費(fèi)者、個(gè)人用戶(hù)或終端用戶(hù)設(shè)計(jì)，直接面向普通用戶(hù)提供服務(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)有這些附加功能，雖然用戶(hù)體驗(yàn)感會(huì)降低，但并不會(huì)影響產(chǎn)品的核心功能。

而面向 B 端的產(chǎn)品，我個(gè)人稱(chēng)之為「暗渡陳倉(cāng)」，當(dāng)個(gè)人用戶(hù)為實(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)粘Ｊ褂玫母嗍?C 端產(chǎn)品，但是 B 端產(chǎn)品對(duì)我們的影響也是時(shí)時(shí)刻刻存在著。C 端產(chǎn)品在明，逐漸改變著現(xiàn)代人的生活方式，B 端產(chǎn)品在暗，間接服務(wù)于用戶(hù)，讓一切流程化秩序化，并且具有多個(gè)主要功能點(diǎn)。

2. B端和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端用戶(hù)多，B端用戶(hù)少；
• C端邏輯簡(jiǎn)單，B端邏輯復(fù)雜；
• C端競(jìng)品較多，B端競(jìng)品較少；
• C端主戰(zhàn)場(chǎng)是移動(dòng)端，B端則是 PC 端；
• C端是用戶(hù)體驗(yàn)驅(qū)動(dòng)，B端是解決問(wèn)題驅(qū)動(dòng)；
• C端產(chǎn)品的使用決策權(quán)在用戶(hù)手中，而B(niǎo)端產(chǎn)品的使用決策權(quán)則在客戶(hù)手中（B端客戶(hù)不一定是用戶(hù)）；
• C端產(chǎn)品除了產(chǎn)品的體驗(yàn)以外，也要讓產(chǎn)品更美觀，讓活動(dòng)更有趣，讓用戶(hù)更舒服，產(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)的邏輯思維能力。

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ì)訂單和用戶(hù)進(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 客戶(hù)管理系統(tǒng)，ERP 資源及供應(yīng)鏈管理系統(tǒng)。

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

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ù)雜得多等問(wèn)題。

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

對(duì)于后臺(tái)產(chǎn)品來(lái)說(shuō)，它并不是隨隨便便就可以下載使用的，即便你在使用的過(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)行思考和探索。

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)、用戶(hù)人群、產(chǎn)品定位、需求分析、功能模塊、主要競(jìng)品和產(chǎn)品特色。做這個(gè)產(chǎn)品是為了解決什么問(wèn)題？想實(shí)現(xiàn)什么目標(biāo)？使用這個(gè)系統(tǒng)的用戶(hù)有哪些？不同角色的用戶(hù)有哪些具體的權(quán)限？是否需要對(duì)每一個(gè)用戶(hù)的行為都生成操作日志？產(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)審后交付客戶(hù)（或內(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)思考其合理性，用戶(hù)的使用和反饋是優(yōu)化產(chǎn)品的重要途徑。只有達(dá)到了管理和運(yùn)營(yíng)的指標(biāo)，后臺(tái)產(chǎn)品才是真正產(chǎn)生了價(jià)值。

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ì)客戶(hù)好。

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

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

以下數(shù)值為參考，請(qǐng)結(jié)合特定產(chǎn)品靈活運(yùn)用。

1. 頁(yè)面布局

統(tǒng)一尺寸

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

適配方案：面向多個(gè)客戶(hù)，后臺(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 列柵格系統(tǒng)實(shí)現(xiàn)，以滿(mǎ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)品名稱(chēng)，大部分系統(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)航欄。

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)品特性、用戶(hù)使用場(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. 標(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。

4. 圖標(biāo)

圖標(biāo)是 UI 設(shè)計(jì)中重要組成部分，一般分為功能圖標(biāo)和應(yīng)用圖標(biāo)，以圖形的方式傳達(dá)概念，可以降低理解成本，使得界面更加協(xié)調(diào)美觀。在后臺(tái)產(chǎn)品中，圖標(biāo)的功能則更偏向輔助性，輔助用戶(hù)對(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)存和性能。

5. 按鈕

按鈕是后臺(tái)產(chǎn)品進(jìn)行交互設(shè)計(jì)是重要元素，提供給用戶(hù)進(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。

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)航菜單，可以?xún)?nèi)嵌子菜單。

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

步驟條引導(dǎo)用戶(hù)按照流程來(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)，使用戶(hù)明確當(dāng)前所在位置，并且可以回到任一上級(jí)頁(yè)面。

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

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。

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ū)放置篩選框和搜索框，為用戶(hù)提供按需搜索，可以大大提高用戶(hù)效率；操作區(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)用戶(hù)等待時(shí)間；行數(shù)太少會(huì)導(dǎo)致用戶(hù)不斷翻頁(yè)，降低使用效率。比較合適的默認(rèn)表格行數(shù)是 20 或 50，用戶(hù)可以根據(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í)處理。常用的方法有引入配置列，用戶(hù)可自定義展示必需列以外的其他列；只展示重要信息，下拉展開(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)，方便用戶(hù)調(diào)用。

詳情入口

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

9. 反饋

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

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

彈框

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

側(cè)滑框

側(cè)滑框又稱(chēng)抽屜，出現(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 以?xún)?nèi)。

警告提示

用不同顏色和樣式展示需要關(guān)注的信息。

通知提醒

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

10. 缺省狀態(tài)

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

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

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ì)資源

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

• Ant Design 的設(shè)計(jì)組件，實(shí)現(xiàn)框架 React、Angular
• Element 的設(shè)計(jì)組件，實(shí)現(xiàn)框架 Vue 2.0、 Angular
• iView 的設(shè)計(jì)組件，實(shí)現(xiàn)框架 Vue
• 飛冰的設(shè)計(jì)組件，實(shí)現(xiàn)框架 React
• Layui 的設(shè)計(jì)組件
• G2 可視化圖形組件
• Echarts 可視化圖形組件
• d3.js 可視化圖形組件
• GridGuide 在線柵格化計(jì)算工具

2. 書(shū)籍推薦

• 《B端產(chǎn)品經(jīng)理必修課》
• 《交互設(shè)計(jì)精髓》
• 《U一點(diǎn)料·Ⅱ》
• 《簡(jiǎn)約至上：交互式設(shè)計(jì)四策略》

3. 文章和作品推薦

• 《如何更好地使用柵格系統(tǒng)》 Christie Tang
• 《柵格系統(tǒng)及其在后臺(tái)設(shè)計(jì)中的應(yīng)用》 UXBoy
• 《新人來(lái)收！10分鐘幫你掌握柵格系統(tǒng)基礎(chǔ)知識(shí)！》 蝸牛醒
• 《原子化設(shè)計(jì)-后臺(tái)產(chǎn)品組件庫(kù)建設(shè)》 MrLei
• 《如何寫(xiě)后臺(tái)系統(tǒng)UI設(shè)計(jì)規(guī)范 》 八戒Maria
• 《B端產(chǎn)品設(shè)計(jì)》 千夜Ryan_Vision
• 《面向企業(yè)中后臺(tái)產(chǎn)品的設(shè)計(jì)系統(tǒng)大合集》 Z清暉
• 《B端網(wǎng)頁(yè)設(shè)計(jì)規(guī)范全方位匯總》 BruceXLS
• 《如何利用走查表驅(qū)動(dòng)設(shè)計(jì)改版》 可樂(lè)Cola
• Michal Parulski 的后臺(tái)可視化設(shè)計(jì)作品
• zoeyshen 的后臺(tái)可視化設(shè)計(jì)作品
• 三魚(yú)先生的數(shù)據(jù)可視化設(shè)計(jì)作品

總結(jié)

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

剛接觸后臺(tái)產(chǎn)品的時(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ì)師把更多的精力投入到沉淀行業(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à)值。

藍(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)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

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

虎牙直播是以游戲直播為主的彈幕式互動(dòng)直播平臺(tái)，累計(jì)注冊(cè)用戶(hù)2億，提供熱門(mén)游戲直播、電競(jìng)賽事直播與游戲賽事直播，手游直播等。

最近虎牙在上市一周年之際，發(fā)布了全新的公司級(jí)LOGO，也就是為虎牙母公司設(shè)計(jì)的全新企業(yè)品牌形象系統(tǒng)。

新logo的造型結(jié)合大寫(xiě)英文字母“H”和小寫(xiě)英文“hy”，將其演化為平行空間的兩個(gè)45度對(duì)稱(chēng)且平行的立面圖像。

文字logo上由“虎牙”和拼音“huya”兩部分組成，中文“虎”字也進(jìn)行了筆畫(huà)的調(diào)整，將虎”與“h”筆畫(huà)末端進(jìn)行了切斜收尾的處理，從而來(lái)呼應(yīng)新logo的平行表現(xiàn)形式。

不同形式組合的新logo效果

在新logo的顏色方面，選用了比較青春具有活力，且明亮的“陽(yáng)光黃”與“星云紫”。

圖形部分的延展也極具靈活性，靈活的視覺(jué)變化使品牌更具多樣性，也同時(shí)表現(xiàn)虎牙在數(shù)字時(shí)代的不同場(chǎng)景中，所呈現(xiàn)的多元化和創(chuàng)新。

圖形延展效果

再來(lái)看看，虎牙新logo應(yīng)用在各種衍生產(chǎ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)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

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

正確認(rèn)識(shí)卡片式設(shè)計(jì)，什么是卡片、總結(jié)卡片優(yōu)勢(shì)、卡片正確設(shè)計(jì)知識(shí)通過(guò)設(shè)兩個(gè)案例進(jìn)行講解，卡片在運(yùn)用時(shí)的技法，望能幫助大家。

今天順叔和大家一起聊一聊卡片式設(shè)計(jì)，無(wú)論是WEB還是APP卡片式設(shè)計(jì)運(yùn)用的比較多，很多UI設(shè)計(jì)師比較偏愛(ài)這樣的表現(xiàn)，卡片式設(shè)計(jì)會(huì)給人一種視覺(jué)上的享受，也能對(duì)于界面具有層次感。但往往在卡片設(shè)計(jì)中有一些技法還是需要了解，不能因?yàn)榭ㄆ皆O(shè)計(jì)而卡片式設(shè)計(jì)，要能更好的應(yīng)用到界面場(chǎng)景中。希望在這次分享中一些知識(shí)點(diǎn)能幫助到大家，之后的幾篇系列文章中，順叔會(huì)從界面中比較趨勢(shì)的設(shè)計(jì)技法進(jìn)行分析，希望能幫助到一些設(shè)計(jì)的小伙伴。

引言

卡片式設(shè)計(jì)這幾年比較流行，同樣這樣的設(shè)計(jì)表達(dá)也是個(gè)趨勢(shì)，應(yīng)用在APP PC界面中至今還流行著，從事UI設(shè)計(jì)的都會(huì)知道卡片式設(shè)計(jì)，具有把內(nèi)容整合模塊化，從視覺(jué)，個(gè)性化體驗(yàn)上進(jìn)行呈現(xiàn)，是設(shè)計(jì)師在設(shè)計(jì)時(shí)常用的一種表現(xiàn)，同樣也具有獨(dú)特的創(chuàng)新概念。

在一些項(xiàng)目中，一些客戶(hù)會(huì)說(shuō)這個(gè)設(shè)計(jì)的APP界面有點(diǎn)太白，沒(méi)有層次感怎么辦，那這時(shí)你應(yīng)該和客戶(hù)說(shuō)在APP設(shè)計(jì)中運(yùn)用了現(xiàn)在比較流行的一個(gè)表現(xiàn)手法，卡片式設(shè)計(jì)，可以解決在畫(huà)面中有個(gè)性化、變化、層次感的設(shè)計(jì)。那客戶(hù)又問(wèn)什么是卡片式設(shè)計(jì)呢？

一、什么是卡片

無(wú)處不在的卡片設(shè)計(jì)具有個(gè)性的美感和很好的易用性，是以文字標(biāo)題，小標(biāo)題，圖形或圖片組成的模塊化，以塊狀形式規(guī)整的整合內(nèi)容，讓內(nèi)容更規(guī)整化，視覺(jué)上更個(gè)性化，也是操作上快捷的內(nèi)容信息入口。更直觀的表達(dá)內(nèi)容信息和快捷跳轉(zhuǎn)操作。成為當(dāng)今在設(shè)計(jì)中一個(gè)比較流行趨勢(shì)，而卡片在設(shè)計(jì)中也占用一定的優(yōu)勢(shì)，讓整體更加的有層次感，在運(yùn)用起來(lái)也比較方便，從視覺(jué)、體驗(yàn)、交互都具有不錯(cuò)的優(yōu)點(diǎn)

設(shè)計(jì)效果圖展示

二、卡片設(shè)計(jì)優(yōu)勢(shì)

1.趨勢(shì)

無(wú)論是大平臺(tái)還是小平臺(tái)的產(chǎn)品都會(huì)運(yùn)用這樣的卡片式，跟風(fēng)式設(shè)計(jì)趨勢(shì)，也讓卡片式設(shè)計(jì)成為了一個(gè)現(xiàn)在常用的優(yōu)勢(shì)，不過(guò)卡片式設(shè)計(jì)的確有很好的效果

2. 層次感

具有一定的層次感，能在頁(yè)面版式中起到設(shè)計(jì)上的不同，個(gè)性化變化，頁(yè)面層次感區(qū)分強(qiáng)烈，能更好的體現(xiàn)提煉出內(nèi)容

3. 規(guī)整化

卡片式設(shè)計(jì)以圖片、圖標(biāo) 、LOGO、標(biāo)題、整合到一起以塊狀的形式在界面中展示，更規(guī)整的排版呈現(xiàn)。雖然內(nèi)容多會(huì)導(dǎo)致頁(yè)面亂，一個(gè)模塊包含內(nèi)容之后就會(huì)規(guī)整不少，也給頁(yè)面設(shè)計(jì)上帶來(lái)了更好的視覺(jué)

4. 視覺(jué)體驗(yàn)

卡片式給整個(gè)頁(yè)面會(huì)增加視覺(jué)上的體驗(yàn)，特別那種大圖片卡片式更具有視覺(jué)上的沖擊力，背景襯托出前景卡片式設(shè)計(jì)。同樣對(duì)卡片式也感覺(jué)到舒適感?？ㄆ皆O(shè)計(jì)還是需要根據(jù)整個(gè)布局、產(chǎn)品需求 、功能進(jìn)行設(shè)計(jì)。以達(dá)到最好的用戶(hù)體驗(yàn)、視覺(jué)體驗(yàn)。

不要為了卡片設(shè)計(jì)而卡片設(shè)計(jì)。

5. 易用性

卡片式設(shè)計(jì)在易用性和靈活性上比較高，在響應(yīng)式設(shè)計(jì)中同樣應(yīng)用的也比較多一些。能更好的有序排列。

6.簡(jiǎn)約設(shè)計(jì)

簡(jiǎn)約設(shè)計(jì)會(huì)更顯得品質(zhì)，不需要過(guò)多的進(jìn)行裝飾，哪怕就是一個(gè)白色的色塊，上面點(diǎn)綴有色彩的圖標(biāo)和標(biāo)題副標(biāo)的變化，也會(huì)覺(jué)得顯得高大上，就算是一個(gè)帶有顏色的色塊卡片，也無(wú)須過(guò)多的設(shè)計(jì)內(nèi)容上的標(biāo)題 、圖標(biāo)、按鈕就足以支撐起卡片

7. 交互效果

在卡片式的設(shè)計(jì)中會(huì)有一些動(dòng)效交互，比如整體卡片放大、縮小 、左滑、右滑，可以整模塊化滑動(dòng)縮放。整體效果增加了不錯(cuò)的視覺(jué)交互體驗(yàn)。

三、卡片正確設(shè)計(jì)知識(shí)

一般在界面設(shè)計(jì)中卡片的存在的意義和表現(xiàn)手法都是什么樣的呢，下面為大家舉例了幾種常用的正確的設(shè)計(jì)表達(dá)姿勢(shì)。希望小伙伴在設(shè)計(jì)的同時(shí)有所靈感和參考，把一些表現(xiàn)手法加入到自己的設(shè)計(jì)中，適合才最重要?？ㄆ皆O(shè)計(jì)還是要根據(jù)整個(gè)風(fēng)格和整個(gè)布局而進(jìn)行展示，在做進(jìn)一步的對(duì)比和布局中以最好的效果為最終展示方式，總結(jié)分析幾個(gè)常見(jiàn)代表例子，如有不全請(qǐng)討論補(bǔ)充，下面就是一些例子

1.卡片式形式一

以色塊為主體并用現(xiàn)在比較流行的漸變色組成，其中四邊為圓角，同樣色塊下邊陰影襯托出主題，這個(gè)是在卡片中設(shè)計(jì)比較常見(jiàn)的運(yùn)用手法，卡片的長(zhǎng)高在設(shè)計(jì)中也是根據(jù)結(jié)構(gòu)，內(nèi)容功能而進(jìn)行設(shè)定。正方形，長(zhǎng)方形都是一個(gè)表現(xiàn)得手法，在色塊上面標(biāo)題文字，圖標(biāo)，圖形是整個(gè)卡片的布局的形式，無(wú)非就是左右布局和上下布局

應(yīng)用場(chǎng)景：卡包、天氣、類(lèi)別、入口、優(yōu)惠劵，卡劵

此圖片來(lái)自于網(wǎng)絡(luò)

2. 卡片式形式二

這種形式共同點(diǎn)都是在頭部C位出現(xiàn)的卡片式設(shè)計(jì)，其中承載著標(biāo)題，副標(biāo)題，以及圖文版式，不難發(fā)現(xiàn)，如果圖片有顏色，那么下面是白色底，這樣在白底上面色塊的出現(xiàn)還是比較簡(jiǎn)約凸顯卡片，如果背景有顏色，卡片也有顏色那么卡片的凸顯程度就不會(huì)那么強(qiáng)，圖二很多在會(huì)員卡設(shè)計(jì)中常用的比較多，也比較簡(jiǎn)約，另外兩個(gè)共同特點(diǎn)背景有顏色，一般底部背景顏色就是整個(gè)界面的主色調(diào)，背景有色塊，上面就用白色卡片，卡片上方標(biāo)題、文字、圖片呈現(xiàn)。只不過(guò)排版的方式有所不同而已，在很多APP設(shè)計(jì)中，這樣的表達(dá)也很多，通過(guò)主色調(diào)可以很融合的把上面的狀態(tài)欄，導(dǎo)航欄融為一體視覺(jué)上統(tǒng)一性，底部背景顏色延續(xù)下來(lái)，上面凸顯白色卡片，這樣更具有視覺(jué)感和層次感。白色的卡片不需要過(guò)多的修飾，更能體現(xiàn)的上面的文字和圖片。

應(yīng)用場(chǎng)景：會(huì)員卡，滑動(dòng)卡片，圖文標(biāo)題，入口

此圖片來(lái)自于網(wǎng)絡(luò)

3. 卡片式形式三

這種形式上圖下文字，或者是上標(biāo)題，下圖片的形式，這種形式特別在圖片素材的選擇上尤為重要，有視覺(jué)效果好的圖片通過(guò)剪切，處理，合成，攝影，插畫(huà)等等方式，出現(xiàn)的圖片質(zhì)量上好的話可以帶動(dòng)整個(gè)設(shè)計(jì)的逼格，通過(guò)有效的圖片傳達(dá)，文字傳達(dá)，讓用戶(hù)更清晰的了解。這樣的形似一般在入口或者列表的形式出現(xiàn)的比較多，同樣也能體現(xiàn)出整體化和視覺(jué)化

應(yīng)用場(chǎng)景：滑動(dòng)卡片，圖文標(biāo)題，入口，列表

此圖片來(lái)自于網(wǎng)絡(luò)

4. 卡片式形式四

大圖卡片式，一般以攝影圖片，插畫(huà)形式，文字壓與圖片之上，這樣的效果更具有沖擊力，也能顯得出比較潮流。體驗(yàn)也很不錯(cuò)，放大視覺(jué)，展示內(nèi)容，圖片相結(jié)合，讓瀏覽者更愿意多看一會(huì)。表達(dá)的圖片與文字內(nèi)容相符，做到圖文交融的程度。一般這樣對(duì)于圖片的選擇上還是比較要求嚴(yán)格的。沒(méi)有質(zhì)量的圖效果會(huì)降低。

應(yīng)用場(chǎng)景：列表，說(shuō)明，入口，天氣

5.卡片式形式五

列表卡片設(shè)計(jì)，這種形式一般白色的卡片，上面標(biāo)題，頭像，按鈕，扁平插畫(huà)形式體現(xiàn)，更多應(yīng)用在一級(jí)頁(yè)面的下方內(nèi)容，以及二級(jí)頁(yè)面的列表頁(yè)或者集合頁(yè)，整體弱化背景以白色為主，給予圓角及陰影承托出層次感同時(shí)，體現(xiàn)上面內(nèi)容部分。每個(gè)模塊的單元體具有統(tǒng)一的視覺(jué)。

應(yīng)用場(chǎng)景：列表，集合頁(yè)，入口

6. 卡片式形式六

大卡片式設(shè)計(jì)，表現(xiàn)為一塊特大的卡片式，上面會(huì)有標(biāo)題，按鈕等信息，同樣表現(xiàn)出突出層次感，個(gè)性化設(shè)計(jì)的特質(zhì)。體現(xiàn)出內(nèi)容，一般背景有顏色上面卡片為白色，如下面背景為白色，那么卡片的形式也可色塊，在對(duì)比上有個(gè)反差，才能突出卡片的作用性。

應(yīng)用場(chǎng)景：提示，說(shuō)明，優(yōu)惠劵，劵，入口

以上總結(jié)的幾種卡片的形式，在設(shè)計(jì)中可以根據(jù)情況而設(shè)計(jì)，卡片多樣化，布局多樣化，適合自己產(chǎn)品的才最重要，雖然在界面設(shè)計(jì)中常用的設(shè)計(jì)，但不要盲目的為了卡片而卡片套用設(shè)計(jì)，這樣起不到作用反而效果達(dá)不到理想程度。希望幾個(gè)卡片形式總結(jié)能給大家?guī)?lái)一些靈感和啟發(fā)。

同樣在這些卡片中會(huì)有一些基本的共同的特點(diǎn)

共同的特點(diǎn)是

1. 四個(gè)角都是圓角

2. 根據(jù)潮流漸變色或白卡片

3. 色塊下的陰影，色塊下的陰影更能體現(xiàn)出層次

4. 卡片上面組成部分，標(biāo)題，副標(biāo)題，圖形，按鈕，圖片，頭像

5. 字體大小，字體顏色的變化

6. 一般卡片應(yīng)用在會(huì)員，列表，說(shuō)明，優(yōu)惠劵，分類(lèi)，類(lèi)別，集合頁(yè)，歡迎頁(yè)等場(chǎng)景常見(jiàn)

三、卡片正確設(shè)計(jì)知識(shí)

為了講解一下，順叔隨便構(gòu)思一個(gè)產(chǎn)品原型，而快速進(jìn)行了簡(jiǎn)單的設(shè)計(jì)，一個(gè)第一版，一個(gè)優(yōu)化版，主要為了講解一下這個(gè)卡片設(shè)計(jì)一些問(wèn)題，

以下此圖為構(gòu)思的原型圖

經(jīng)過(guò)分析原型圖之后開(kāi)始進(jìn)行設(shè)計(jì)，首先設(shè)計(jì)一個(gè)版本的，如果這樣卡片布局設(shè)計(jì)，這樣色彩搭配的情況下，會(huì)怎么樣呢，整體設(shè)計(jì)用了藍(lán)紫色為主色調(diào)，首先鋪藍(lán)紫色的色塊作為背景，然后上面放白色卡片，以至于卡片上詳細(xì)的內(nèi)容，比如數(shù)字，圖形能更好的豐富支撐卡片。同樣數(shù)據(jù)流也是比較重要的C位。也是比較重要的位置。接著根據(jù)原型圖下面有兩個(gè)卡片，通過(guò)扁平化設(shè)計(jì)，以色塊為主設(shè)計(jì)一個(gè)藍(lán)色，一個(gè)橙色的卡片，上面并有圖標(biāo)，頭像，以及標(biāo)題，兩個(gè)顏色的對(duì)比，更讓視覺(jué)有沖擊力，整體看這個(gè)設(shè)計(jì)并沒(méi)有什么，但有個(gè)問(wèn)題在于單個(gè)模塊拿出來(lái)效果的確都不錯(cuò)，但組成之后上面的卡片C位讓下面的兩個(gè)帶顏色的卡片搶了視覺(jué)，當(dāng)打開(kāi)這個(gè)界面的時(shí)候視覺(jué)落點(diǎn)在彩色卡片上，那么這個(gè)整體設(shè)計(jì)上就出現(xiàn)了問(wèn)題，上面的數(shù)據(jù)，白色卡片其實(shí)是比較重要的，而且整個(gè)畫(huà)面都是卡片毫無(wú)設(shè)計(jì)上的變化，那么只能在這個(gè)基礎(chǔ)上在進(jìn)行優(yōu)化，其實(shí)大家在做設(shè)計(jì)的同時(shí)也這樣，在考慮功能模塊前提下，用戶(hù)體驗(yàn)，也要考慮視覺(jué)體驗(yàn)，那么視覺(jué)從哪方面來(lái)，色彩、層次、版式等等方面。那么能不能在進(jìn)行一下優(yōu)化呢，其實(shí)還是有空間在進(jìn)行優(yōu)化。（以下圖為第一版）

設(shè)計(jì)第一版

根據(jù)上面的設(shè)計(jì)在進(jìn)行優(yōu)化，同樣保留白色卡片部分元素，在卡片與卡片之間放一些顏色的圖標(biāo)，這樣更好的給功能上快捷入口，也能給卡片設(shè)計(jì)增添了變化。使得整個(gè)畫(huà)面更靈活

雖然白色卡片，但有一些色彩的點(diǎn)綴，也讓白色卡片活躍起來(lái)，把顏色的卡片改成白色卡片，從上到下的版式舒服多了，也沒(méi)有那么跳。整個(gè)風(fēng)格更簡(jiǎn)約，同時(shí)功能也更全面。

調(diào)整后

從原型圖，在到設(shè)計(jì)第一版，在到優(yōu)化調(diào)整之后，證明一點(diǎn)，卡片不要因?yàn)榭ㄆ自O(shè)計(jì)，反而會(huì)失去效果，考慮功能模塊，用戶(hù)體驗(yàn)，視覺(jué)體驗(yàn)也一定讓整體舒服。一直都說(shuō)，繪畫(huà)中需要有主有次，設(shè)計(jì)中也一定要有主，有次的進(jìn)行設(shè)計(jì)。這樣層級(jí)關(guān)系才能更清晰。

但這些條件一定是從，體驗(yàn)、色彩、布局、版式等方面進(jìn)行對(duì)比和研究的。設(shè)計(jì)不要先著急做設(shè)計(jì)，前期的進(jìn)行思考，邏輯清楚了，在進(jìn)行設(shè)計(jì)的時(shí)候會(huì)更加的順暢?？ㄆ皆O(shè)計(jì)，大家都在應(yīng)用，希望這個(gè)文章能給大家?guī)?lái)一點(diǎn)點(diǎn)知識(shí)點(diǎn)，那就不枉費(fèi)我在熬夜寫(xiě)這篇文章。

不為別的，只是一個(gè)喜歡分享的肉團(tuán)子。這篇文章就寫(xiě)到這里，如果喜歡請(qǐng)給個(gè)贊吧。如內(nèi)容有沒(méi)說(shuō)到的地方，各位可以進(jìn)行補(bǔ)充，以上兩個(gè)圖你稀罕哪個(gè)呢？

 藍(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)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

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

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

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

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

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

2.創(chuàng)意腦爆

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

 

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

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

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

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

2.創(chuàng)意腦爆

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

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

第一個(gè)，“人氣”圖標(biāo)的腦暴路徑：

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

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

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

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

 

因?yàn)榭吹接行┩瑢W(xué)把“愛(ài)”與“搖滾”的手勢(shì)弄混，所以說(shuō)下它們的區(qū)別：

 

希望大家在使用的時(shí)候不要搞錯(cuò)哦！

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

 

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

 

 

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

 

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

 

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

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

 

 

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

 

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

 

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

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

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

 

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

比如一個(gè)木質(zhì)門(mén)牌的細(xì)節(jié)：

 

 

3.3 俏皮的那一筆

比如書(shū)架上歪著的一本書(shū)：

再比如一根線條的破局：

 

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

最后再看下圖標(biāo)整體的效果吧：

 

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

 

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

 

 

接下來(lái)分享的也是這幾個(gè)圖標(biāo)，不過(guò)是延伸版，切入的角度會(huì)略有不同。

 

這次改版背景很簡(jiǎn)單：首頁(yè)整體架構(gòu)調(diào)整的同時(shí)，主圖標(biāo)的設(shè)計(jì)語(yǔ)言改成了面性，而由于時(shí)間緊，小說(shuō)圖標(biāo)還沒(méi)來(lái)得及改，所以這次的設(shè)計(jì)目標(biāo)就一個(gè)，把第一版圖標(biāo)改成面性的。

 

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

 

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

 

為什么還是不好看？

我也不知道?。?span lang="EN-US">

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

為什么人家的看起來(lái)就那么好看，那么精致？

 

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

 

在這樣的分析之下，我對(duì)圖標(biāo)進(jìn)行了重新構(gòu)思，直接在腦暴階段就重新思考（因?yàn)樵袌D標(biāo)是一個(gè)元素，很難再拆分成兩個(gè)元素來(lái)進(jìn)行組合）。

為了能做到獨(dú)特，我最終選用的圖標(biāo)含義如下（盡量避開(kāi)用爛的詞匯）：

 

書(shū)架：兩本書(shū)互相依靠

 

熱門(mén)：手捧愛(ài)心

 

免費(fèi)：冰淇淋甜筒（創(chuàng)意來(lái)自甜筒經(jīng)常會(huì)有第二份半價(jià)，或者買(mǎi)一  送一的活動(dòng)）

 

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

 

 

 

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

 

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

 

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

 

使圖標(biāo)變更加可愛(ài)，有情感，充滿(mǎn)一些故事感。

除此之外，對(duì)圖標(biāo)還增加了一點(diǎn)點(diǎn)的小細(xì)節(jié)作為小彩蛋：

 

一般我們?cè)谧鲆唤M東西的時(shí)候，都希望能夠有一個(gè)主旨貫穿始終，這樣解釋起來(lái)更加有說(shuō)法，有說(shuō)服力。

 

比如上面這組小說(shuō)圖標(biāo)，設(shè)計(jì)關(guān)鍵詞是溫暖，情感，可愛(ài)，在這樣的理念下，我將溫暖轉(zhuǎn)化為陽(yáng)光作為視覺(jué)語(yǔ)言。

 

可是陽(yáng)光怎么落地呢，我當(dāng)時(shí)能想到的就是高光和投影，本次使用的就是充滿(mǎn)光感的長(zhǎng)投影：

 

當(dāng)然，為了使圖標(biāo)輕量化，投影不宜過(guò)重，起到點(diǎn)睛的作用即可：

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

 

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

 

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

 

 

 

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

 

這里再補(bǔ)充兩個(gè)增加可愛(ài)度的實(shí)用小技巧：

 

1 五官緊湊

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

 

2 腮紅

 

一般來(lái)說(shuō)，在我的印象中只有可愛(ài)的東西才會(huì)有腮紅，五大三粗的大老爺們加個(gè)腮紅，咦～，不敢想！

 

所以畫(huà)可愛(ài)的形象或表情時(shí)，可以考慮加個(gè)腮紅：

不過(guò)我這次由于元素太多，所以沒(méi)加，大家可以根絕實(shí)際情況自行實(shí)踐。

 

最后：

看萬(wàn)卷書(shū)，行萬(wàn)里路！不走，書(shū)白看。

看萬(wàn)篇文，練萬(wàn)個(gè)習(xí)！不練，文白看。

 

 

藍(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)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

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

寫(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ì)的主要客戶(hù)有公司內(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è)人用戶(hù)或終端用戶(hù)設(shè)計(jì)，直接面向普通用戶(hù)提供服務(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)粘Ｉ钪?，在手機(jī)上使用的大多是C端產(chǎn)品，單一的C端產(chǎn)品通常是為了實(shí)現(xiàn)單一的需求，比如看網(wǎng)紅的抖音、聽(tīng)音樂(lè)的酷狗、買(mǎi)車(chē)票的12306、社交的微信等，這些產(chǎn)品有自己的核心功能，其他的功能則是附加的，倘若沒(méi)有這些附加功能，雖然用戶(hù)體驗(yàn)感會(huì)降低，但并不會(huì)影響產(chǎn)品的核心功能。

而面向B端的產(chǎn)品，我個(gè)人稱(chēng)之為“暗度陳倉(cāng)”，當(dāng)個(gè)人用戶(hù)為實(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ù)于用戶(hù)，讓一切流程化秩序化，并且具有多個(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端用戶(hù)多，B端用戶(hù)少；

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

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

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

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

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

C端產(chǎn)品除了產(chǎn)品的體驗(yàn)以外，也要讓產(chǎn)品更美觀，讓活動(dòng)更有趣，讓用戶(hù)更舒服，產(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ì)訂單和用戶(hù)進(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客戶(hù)管理系統(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)品不同于普通用戶(hù)所使用的APP，它在用戶(hù)初次使用和短暫時(shí)間內(nèi)的認(rèn)知成本是較高的。當(dāng)用戶(hù)用慣了一個(gè)音樂(lè)類(lèi)的app，再給他幾個(gè)其他的音樂(lè)APP，用戶(hù)是可以迅速上手并且輕易解決自己的需求的。而后臺(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)、用戶(hù)人群、產(chǎn)品定位、需求分析、功能模塊、主要競(jìng)品和產(chǎn)品特色。 做這個(gè)產(chǎn)品是為了解決什么問(wèn)題？想實(shí)現(xiàn)什么目標(biāo)？使用這個(gè)系統(tǒng)的用戶(hù)有哪些？不同角色的用戶(hù)有哪些具體的權(quán)限？是否需要對(duì)每一個(gè)用戶(hù)的行為都生成操作日志？產(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)審后交付客戶(hù)（或內(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)思考其合理性，用戶(hù)的使用和反饋是優(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ì)客戶(hù)好。

• 對(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ì)客戶(hù)——制定設(shè)計(jì)規(guī)范的同時(shí)需要考慮設(shè)計(jì)延展性，為不同客戶(hù)的定制化需求提供更的輸出。同時(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è)面布局

1. 統(tǒng)一尺寸——據(jù)統(tǒng)計(jì)，目前PC端用戶(hù)屏幕分辨率占比排名前三的是1920*1080、1366*768、1440*900，以1440來(lái)設(shè)計(jì)的話，向上適配或者向下適配誤差會(huì)比較小。 適配方案——面向多個(gè)客戶(hù)，后臺(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)屏幕的尺寸和分辨率選擇即可（提前和前端溝通好）。

2. 頁(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)下固定寬度。

3. 柵格布局——柵格系統(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)，以滿(mǎ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)用，不要被它所局限。

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

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

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

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

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

3. 輔助色用于提示其他場(chǎng)景，比如成功、失敗、警告、無(wú)效等。

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

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

   

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

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

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

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

3.4圖標(biāo)

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

2. 除了某些常用的圖標(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)存和性能。

3. 分享一個(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按鈕

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

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

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

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

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

3.6導(dǎo)航

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

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

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

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

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

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

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

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

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

   
   

3.7表單

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

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

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

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

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

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

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

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

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

3.8表格

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

2. 表格主要分為五大區(qū)域：選擇搜索區(qū)、操作區(qū)、表頭、正文、底欄。選擇搜索區(qū)放置篩選框和搜索框，為用戶(hù)提供按需搜索，可以大大提高用戶(hù)效率；操作區(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ù)在第一列增加多選框。

3. 行高——表格行高可設(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等。

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

5. 列寬——列寬根據(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)容（比如詳情、描述）。

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

7. 對(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)，方便用戶(hù)調(diào)用。

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

3.9反饋

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

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

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

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

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

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

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

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

3.10缺省狀態(tài)

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

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

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

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

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

3. 考慮到數(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ì)四策略》

寫(xiě)在最后

不管是做C端產(chǎn)品還是B端產(chǎn)品，都是為了實(shí)現(xiàn)用戶(hù)的需求、幫用戶(hù)解決問(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à)值。

藍(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)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

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

NodeJs基礎(chǔ)
nodejs的本質(zhì)：不是一門(mén)新的編程語(yǔ)言，nodejs是javascript運(yùn)行在服務(wù)端的運(yùn)行環(huán)境，編程語(yǔ)言還是javascript

global模塊-全局變量
Node.js 中的全局對(duì)象是 global, 類(lèi)似于瀏覽器中的window

常用的global屬性

console: 用于打印日志
setTimeout/clearTimeout: 設(shè)置清除延時(shí)器
setInterval/clearInterval: 設(shè)置清除定時(shí)器

__dirname: 當(dāng)前文件的路徑，不包括文件名
__filename： 獲取當(dāng)前文件的路徑，包括文件名

//與模塊化相關(guān)的，模塊化的時(shí)候會(huì)用到
require
exports
module

除了global模塊中的內(nèi)容可以直接使用，其他模塊都是需要加載的。
其他模塊不是全局的，不能直接使用。因此需要導(dǎo)入才能使用。
fs模塊
fileSystem-- 文件系統(tǒng)，提供了一系列操作文件的API接口，可以方便我讀寫(xiě)文件

讀取文件
語(yǔ)法：fs.readFile(path[, options], callback)

方式一：不傳編碼參數(shù)

//參數(shù)1： 文件的名字
//參數(shù)2： 讀取文件的回調(diào)函數(shù)
  //參數(shù)1：錯(cuò)誤對(duì)象，如果讀取失敗，err會(huì)包含錯(cuò)誤信息，如果讀取成功，err是null
  //參數(shù)2：讀取成功后的數(shù)據(jù)（是一個(gè)Buffer對(duì)象）
fs.readFile("data.txt", function(err, data){
  console.log(err);
  console.log(data);
  // 可以通過(guò)data.toString() 把二進(jìn)制數(shù)據(jù)轉(zhuǎn)成文本，當(dāng)然前提是讀取的文件本來(lái)就是文本，如果是圖片獲取的二進(jìn)制就無(wú)法轉(zhuǎn)換成文本
});

方式二：傳編碼參數(shù)

//參數(shù)1： 文件的路徑
//參數(shù)2： 編碼，如果設(shè)置了，返回一個(gè)字符串，如果沒(méi)有設(shè)置，會(huì)返回一個(gè)buffer對(duì)象
//參數(shù)3： 回調(diào)函數(shù)
fs.readFile("data.txt", "utf8",function(err, data){
  console.log(err);
  console.log(data);
});

關(guān)于Buffer對(duì)象

1. Buffer對(duì)象是Nodejs用于處理二進(jìn)制數(shù)據(jù)的。
2. 其實(shí)任意的數(shù)據(jù)在計(jì)算機(jī)底層都是二進(jìn)制數(shù)據(jù)，因?yàn)橛?jì)算機(jī)只認(rèn)識(shí)二進(jìn)制。
3. 所以讀取任意的文件，返回的結(jié)果都是二進(jìn)制數(shù)據(jù)，即Buffer對(duì)象
4. Buffer對(duì)象可以調(diào)用toString()方法轉(zhuǎn)換成字符串。

寫(xiě)文件
語(yǔ)法：fs.writeFile(file, data[, options], callback)

//參數(shù)1：寫(xiě)入的文件名(如果文件不存在，會(huì)自動(dòng)創(chuàng)建)
//參數(shù)2：寫(xiě)入的文件內(nèi)容（注意：寫(xiě)入的內(nèi)容會(huì)覆蓋以前的內(nèi)容）
//參數(shù)3：寫(xiě)文件后的回調(diào)函數(shù)
fs.writeFile("2.txt", "hello world, 我是一個(gè)中國(guó)人", function(err){
  if(err) {
    return console.log("寫(xiě)入文件失敗", err);
  }
  console.log("寫(xiě)入文件成功");
});
1
2
3
4
5
6
7
8
9
注意：

寫(xiě)文件的時(shí)候，會(huì)把原來(lái)的內(nèi)容給覆蓋掉
追加文件
語(yǔ)法：fs.appendFile(path, data[, options], callback)

//參數(shù)1：追加的文件名(如果文件不存在，會(huì)自動(dòng)創(chuàng)建)
//參數(shù)2：追加的文件內(nèi)容（注意：寫(xiě)入的內(nèi)容會(huì)覆蓋以前的內(nèi)容）
//參數(shù)3：追加文件后的回調(diào)函數(shù)
fs.appendFile("2.txt", "我是追加的內(nèi)容", function(err){
  if(err) {
    return console.log("追加文件內(nèi)容失敗");
  }
  console.log("追加文件內(nèi)容成功");
})


思考：如果沒(méi)有appendFile，通過(guò)readFile與writeFile應(yīng)該怎么實(shí)現(xiàn)？

文件同步與異步的說(shuō)明
fs中所有的文件操作，都提供了異步和同步兩種方式

異步方式：不會(huì)阻塞代碼的執(zhí)行
同步方式：會(huì)阻塞代碼的執(zhí)行
//同步方式
console.log(111);
var result = fs.readFileSync("2.txt", "utf-8");
console.log(result);
console.log(222);

總結(jié)：同步操作使用雖然簡(jiǎn)單，但是會(huì)影響性能，因此盡量使用異步方法，尤其是在工作過(guò)程中。

stream
stream是Node.js提供的又一個(gè)僅在服務(wù)區(qū)端可用的模塊，目的是支持“流”這種數(shù)據(jù)結(jié)構(gòu)。

什么是流？流是一種抽象的數(shù)據(jù)結(jié)構(gòu)。想象水流，當(dāng)在水管中流動(dòng)時(shí)，就可以從某個(gè)地方（例如自來(lái)水廠）源源不斷地到達(dá)另一個(gè)地方（比如你家的洗手池）。我們也可以把數(shù)據(jù)看成是數(shù)據(jù)流，比如你敲鍵盤(pán)的時(shí)候，就可以把每個(gè)字符依次連起來(lái)，看成字符流。這個(gè)流是從鍵盤(pán)輸入到應(yīng)用程序，實(shí)際上它還對(duì)應(yīng)著一個(gè)名字：標(biāo)準(zhǔn)輸入流（stdin）。

如果應(yīng)用程序把字符一個(gè)一個(gè)輸出到顯示器上，這也可以看成是一個(gè)流，這個(gè)流也有名字：標(biāo)準(zhǔn)輸出流（stdout）。流的特點(diǎn)是數(shù)據(jù)是有序的，而且必須依次讀取，或者依次寫(xiě)入，不能像Array那樣隨機(jī)定位。

有些流用來(lái)讀取數(shù)據(jù)，比如從文件讀取數(shù)據(jù)時(shí)，可以打開(kāi)一個(gè)文件流，然后從文件流中不斷地讀取數(shù)據(jù)。有些流用來(lái)寫(xiě)入數(shù)據(jù)，比如向文件寫(xiě)入數(shù)據(jù)時(shí)，只需要把數(shù)據(jù)不斷地往文件流中寫(xiě)進(jìn)去就可以了。

在Node.js中，流也是一個(gè)對(duì)象，我們只需要響應(yīng)流的事件就可以了：data事件表示流的數(shù)據(jù)已經(jīng)可以讀取了，end事件表示這個(gè)流已經(jīng)到末尾了，沒(méi)有數(shù)據(jù)可以讀取了，error事件表示出錯(cuò)了。

下面是一個(gè)從文件流讀取文本內(nèi)容的示例：

'use strict';

var fs = require('fs');

// 打開(kāi)一個(gè)流:
var rs = fs.createReadStream('sample.txt', 'utf-8');

rs.on('data', function (chunk) {
    console.log('DATA:')
    console.log(chunk);
});

rs.on('end', function () {
    console.log('END');
});

rs.on('error', function (err) {
    console.log('ERROR: ' + err);
});

要注意，data事件可能會(huì)有多次，每次傳遞的chunk是流的一部分?jǐn)?shù)據(jù)。

要以流的形式寫(xiě)入文件，只需要不斷調(diào)用write()方法，最后以end()結(jié)束：

'use strict';

var fs = require('fs');

var ws1 = fs.createWriteStream('output1.txt', 'utf-8');
ws1.write('使用Stream寫(xiě)入文本數(shù)據(jù)...\n');
ws1.write('END.');
ws1.end();

var ws2 = fs.createWriteStream('output2.txt');
ws2.write(new Buffer('使用Stream寫(xiě)入二進(jìn)制數(shù)據(jù)...\n', 'utf-8'));
ws2.write(new Buffer('END.', 'utf-8'));
ws2.end();


所有可以讀取數(shù)據(jù)的流都繼承自stream.Readable，所有可以寫(xiě)入的流都繼承自stream.Writable。

pipe
就像可以把兩個(gè)水管串成一個(gè)更長(zhǎng)的水管一樣，兩個(gè)流也可以串起來(lái)。一個(gè)Readable流和一個(gè)Writable流串起來(lái)后，所有的數(shù)據(jù)自動(dòng)從Readable流進(jìn)入Writable流，這種操作叫pipe。

在Node.js中，Readable流有一個(gè)pipe()方法，就是用來(lái)干這件事的。

讓我們用pipe()把一個(gè)文件流和另一個(gè)文件流串起來(lái)，這樣源文件的所有數(shù)據(jù)就自動(dòng)寫(xiě)入到目標(biāo)文件里了，所以，這實(shí)際上是一個(gè)復(fù)制文件的程序：

'use strict';

var fs = require('fs');

var rs = fs.createReadStream('sample.txt');
var ws = fs.createWriteStream('copied.txt');

rs.pipe(ws);

默認(rèn)情況下，當(dāng)Readable流的數(shù)據(jù)讀取完畢，end事件觸發(fā)后，將自動(dòng)關(guān)閉Writable流。如果我們不希望自動(dòng)關(guān)閉Writable流，需要傳入?yún)?shù)：

readable.pipe(writable, { end: false });
1
path模塊
路徑操作的問(wèn)題
具體的說(shuō)明可以參考 NodeJs學(xué)習(xí).md

在讀寫(xiě)文件的時(shí)候，文件路徑可以寫(xiě)相對(duì)路徑或者絕對(duì)路徑

//data.txt是相對(duì)路徑，讀取當(dāng)前目錄下的data.txt, 相對(duì)路徑相對(duì)的是指向node命令的路徑
//如果node命令不是在當(dāng)前目錄下執(zhí)行就會(huì)報(bào)錯(cuò)， 在當(dāng)前執(zhí)行node命令的目錄下查找data.txt，找不到
fs.readFile("data.txt", "utf8", function(err, data) {
  if(err) {
    console.log("讀取文件失敗", err);
  }

  console.log(data);
});

相對(duì)路徑：相對(duì)于執(zhí)行node命令的路徑

絕對(duì)路徑：__dirname: 當(dāng)前文件的目錄，__filename: 當(dāng)前文件的目錄，包含文件名

path模塊的常用方法
關(guān)于路徑，在linux系統(tǒng)中，路徑分隔符使用的是/，但是在windows系統(tǒng)中，路徑使用的\

在我們拼寫(xiě)路徑的時(shí)候會(huì)帶來(lái)很多的麻煩，經(jīng)常會(huì)出現(xiàn)windows下寫(xiě)的代碼，在linux操作系統(tǒng)下執(zhí)行不了，path模塊就是為了解決這個(gè)問(wèn)題而存在的。

常用方法：

path.join();//拼接路徑

//windows系統(tǒng)下
> path.join("abc","def","gg", "index.html")
"abc\def\gg\a.html"

//linux系統(tǒng)下
> path.join("abc","def","gg", "index.html")
'abc/def/gg/index.html'

http模塊
創(chuàng)建服務(wù)器步驟

// 移入http模塊
const http = require('http')
// 調(diào)用創(chuàng)建http 服務(wù)器的方法
const server = http.createServe()
// 給服務(wù)器注冊(cè)request事件監(jiān)聽(tīng)，每次瀏覽器像服務(wù)器發(fā)送請(qǐng)求的時(shí)候都會(huì)被監(jiān)聽(tīng)到
server.on('request', function(request, response){
    // request 瀏覽器請(qǐng)求的數(shù)據(jù)，包括請(qǐng)求方式method 請(qǐng)求的地址 url等
    // response 瀏覽器的響應(yīng)，可以設(shè)置響應(yīng)頭、響應(yīng)體、響應(yīng)狀態(tài)碼
    const method = request.method
    const url = request.url
    
    // 設(shè)置響應(yīng)的狀態(tài)碼
    response.StatusCode = 404
    // 設(shè)置響應(yīng)的頭
    response.setHeader('Content-Type', 'text/html');
    // 設(shè)置響應(yīng)體內(nèi)容,write可以調(diào)用多次
    response.write('hello world!')
    // 響應(yīng)結(jié)束
    response.end()
    
    // 如果在end(content)，這樣的寫(xiě)法相當(dāng)于是讓write和end的合寫(xiě)
    response.end('hello world!')
})
// 給服務(wù)器設(shè)置監(jiān)聽(tīng),相當(dāng)于啟動(dòng)服務(wù)器
server.listen(8888,function(){
    console.log('服務(wù)器啟動(dòng)成功')
})

// 簡(jiǎn)寫(xiě)方式

http.createServer((req,res) => {
    ....
}).listen(8888,() => {
    ....
})

詳細(xì)說(shuō)明

給服務(wù)器注冊(cè)request事件，只要服務(wù)器接收到了客戶(hù)端的請(qǐng)求，就會(huì)觸發(fā)request事件
request事件有兩個(gè)參數(shù)，request表示請(qǐng)求對(duì)象，可以獲取所有與請(qǐng)求相關(guān)的信息，response是響應(yīng)對(duì)象，可以獲取所有與響應(yīng)相關(guān)的信息。
服務(wù)器監(jiān)聽(tīng)的端口范圍為：1-65535之間，推薦使用3000以上的端口，因?yàn)?000以下的端口一般留給系統(tǒng)使用
response對(duì)象詳解
常見(jiàn)的屬性和方法：

res.write(data): 給瀏覽器發(fā)送請(qǐng)求體，可以調(diào)用多次，從而提供連續(xù)的請(qǐng)求體
res.end();   通知服務(wù)器，所有響應(yīng)頭和響應(yīng)主體都已被發(fā)送，即服務(wù)器將其視為已完成。
res.end(data); 結(jié)束請(qǐng)求，并且響應(yīng)一段內(nèi)容，相當(dāng)于res.write(data) + res.end()
res.statusCode: 響應(yīng)的的狀態(tài)碼 200 404 500
res.statusMessage: 響應(yīng)的狀態(tài)信息， OK Not Found ,會(huì)根據(jù)statusCode自動(dòng)設(shè)置。
res.setHeader(name, value); 設(shè)置響應(yīng)頭信息， 比如content-type
res.writeHead(statusCode, statusMessage, options); 設(shè)置響應(yīng)頭，同時(shí)可以設(shè)置狀態(tài)碼和狀態(tài)信息。
1
2
3
4
5
6
7
注意：必須先設(shè)置響應(yīng)頭，才能設(shè)置響應(yīng)。

實(shí)現(xiàn)靜態(tài)WEB服務(wù)器
服務(wù)器響應(yīng)首頁(yè)
注意：瀏覽器中輸入的URL地址，僅僅是一個(gè)標(biāo)識(shí)，不與服務(wù)器中的目錄一致。也就是說(shuō)：返回什么內(nèi)容是由服務(wù)端的邏輯決定
server.on('request', function(req, res) {
  var url = req.url
  if(url === '/') {
    fs.readFile('./index.html', function(err, data) {
      if(err) {
        return res.end('您訪問(wèn)的資源不存在~')
      }

      res.end(data)
    })
  }
})

根據(jù)根據(jù)不同url，響應(yīng)不同文件
content-type設(shè)置-MIME類(lèi)型
MIME(Multipurpose Internet Mail Extensions)多用途Internet郵件擴(kuò)展類(lèi)型 是一種表示文檔性質(zhì)和格式的標(biāo)準(zhǔn)化方式
瀏覽器通常使用MIME類(lèi)型（而不是文件擴(kuò)展名）來(lái)確定如何處理文檔；因此服務(wù)器將正確的MIME類(lèi)型附加到響應(yīng)對(duì)象的頭部是非常重要的
MIME類(lèi)型的通用處理-mime模塊
作用：獲取文件的MIME類(lèi)型
安裝：npm i mime
var mime = require('mime')

// 獲取路徑對(duì)應(yīng)的MIME類(lèi)型
mime.getType('txt')                    // ? 'text/plain'
// 根據(jù)MIME獲取到文件后綴名
mime.getExtension('text/plain')        // ? 'txt'
1
2
3
4
5
6
有了這個(gè)模塊我們就可以把設(shè)置響應(yīng)頭的代碼改寫(xiě)成下面

// mime 不僅可以只寫(xiě)一個(gè)后綴名，還可以通過(guò)url來(lái)解析出后綴名來(lái)，因此這里可以直接寫(xiě)url
response.setHeader('content-type',mime.getType(request.url))
1
2
npm - Node包管理工具
初始化包
npm init;    //這個(gè)命令用于初始化一個(gè)包，創(chuàng)建一個(gè)package.json文件，我們的項(xiàng)目都應(yīng)該先執(zhí)行npm init
npm init -y;  //快速的初始化一個(gè)包， 不能是一個(gè)中文名
1
2
安裝包
npm install 包名;  //安裝指定的包名的版本到項(xiàng)目中
npm install 包名@版本號(hào);  //安裝指定包的指定版本

npm i 包名； //簡(jiǎn)寫(xiě)

卸載包
npm uninstall 包名;  //卸載已經(jīng)安裝的包
1
清除緩存
npm cache clean -f // 如果npm安裝失敗了，可以用這個(gè)命令來(lái)清除緩存
1
package.json文件
package.json文件，包（項(xiàng)目）描述文件，用來(lái)管理組織一個(gè)包（項(xiàng)目），它是一個(gè)純JSON格式的。

作用：描述當(dāng)前項(xiàng)目（包）的信息，描述當(dāng)前包（項(xiàng)目）的依賴(lài)項(xiàng)
如何生成：npm init或者npm init -y
作用
作為一個(gè)標(biāo)準(zhǔn)的包，必須要有package.json文件進(jìn)行描述
一個(gè)項(xiàng)目的node_modules目錄通常都會(huì)很大，不用拷貝node_modules目錄，可以通過(guò)package.json文件配合npm install直接安裝項(xiàng)目所有的依賴(lài)項(xiàng)
描述內(nèi)容
{
  "name": "03-npm",  //描述了包的名字，不能有中文
  "version": "1.0.0",  //描述了包的的版本信息， x.y.z  如果只是修復(fù)bug，需要更新Z位。如果是新增了功能，但是向下兼容，需要更新Y位。如果有大變動(dòng)，向下不兼容，需要更新X位。
  "description": "", //包的描述信息
  "main": "index.js", //入口文件（模塊化加載規(guī)則的時(shí)候詳細(xì)的講）
  "scripts": {  //配置一些腳本，在vue的時(shí)候會(huì)用到，現(xiàn)在體會(huì)不到
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],  //關(guān)鍵字（方便搜索）
  "author": "",  //作者的信息
  "license": "ISC",  //許可證，開(kāi)源協(xié)議
  "dependencies": {   //重要，項(xiàng)目的依賴(lài)， 方便代碼的共享  通過(guò) npm install可以直接安裝所有的依賴(lài)項(xiàng)
    "bootstrap": "^3.3.7",
    "jquery": "^3.3.1"
  }
}

注意：一個(gè)合法的package.json，必須要有name和version兩個(gè)屬性

本地安裝和全局安裝
有兩種方式用來(lái)安裝 npm 包：本地安裝和全局安裝。選用哪種方式來(lái)安裝，取決于你如何使用這個(gè)包。

全局安裝：如果你想將其作為一個(gè)命令行工具，那么你應(yīng)該將其安裝到全局。這種安裝方式后可以讓你在任何目錄下使用這個(gè)命令。比如less命令，webpack命令，hcc-md命令 。
本地安裝：如果你自己的模塊依賴(lài)于某個(gè)包，并通過(guò) Node.js 的 require 加載，那么你應(yīng)該選擇本地安裝，這種方式也是 npm install 命令的默認(rèn)行為。
// 全局安裝,會(huì)把npm包安裝到C:\Users\HUCC\AppData\Roaming\npm目錄下，作為命令行工具使用
npm install -g 包名;

//本地安裝，會(huì)把npm包安裝到當(dāng)前項(xiàng)目的node_modules文件中，作為項(xiàng)目的依賴(lài)
npm install 包名;  

常見(jiàn)的命令行工具
nrm
nrm：npm registry manager（npm倉(cāng)庫(kù)地址管理工具）
安裝：npm i -g nrm
# 帶*表示當(dāng)前正在使用的地址

# 查看倉(cāng)庫(kù)地址列表
nrm ls

# 切換倉(cāng)庫(kù)地址
nrm use taobao

nodemon 自動(dòng)重啟
作用：監(jiān)視到j(luò)s文件修改后，自動(dòng)重啟node程序
安裝：npm i -g nodemon
使用：nodemon app.js 運(yùn)行node程序
模塊化(module)
基本概念
在nodejs中，應(yīng)用由模塊組成，nodejs中采用commonJS模塊規(guī)范。

一個(gè)js文件就是一個(gè)模塊
每個(gè)模塊都是一個(gè)獨(dú)立的作用域，在這個(gè)而文件中定義的變量、函數(shù)、對(duì)象都是私有的，對(duì)其他文件不可見(jiàn)。
node中模塊分類(lèi)
1 核心模塊
由 node 本身提供，不需要單獨(dú)安裝（npm），可直接引入使用
2 第三方模塊
由社區(qū)或個(gè)人提供，需要通過(guò)npm安裝后使用
3 自定義模塊
由我們自己創(chuàng)建，比如：tool.js 、 user.js
核心模塊
fs：文件操作模塊
http：網(wǎng)絡(luò)操作模塊
path：路徑操作模塊
url: 解析地址的模塊
querystring: 解析參數(shù)字符串的模塊
基本使用：1 先引入 2 再使用
// 引入模塊
var fs = require('fs');
1
2
第三方模塊
第三方模塊是由 社區(qū)或個(gè)人 提供的
比如：mime模塊/art-template/jquery…
基本使用：1 先通過(guò)npm下載 2 再引入 3 最后使用
用戶(hù)自定義模塊
由開(kāi)發(fā)人員創(chuàng)建的模塊（JS文件）
基本使用：1 創(chuàng)建模塊 2 引入模塊
注意：自定義模塊的路徑必須以./獲取../開(kāi)頭
// 加載模塊
require('./a')     // 推薦使用，省略.js后綴！

require('./a.js')
1
2
3
4
模塊導(dǎo)入
/* 
  nodejs中模塊分為3大類(lèi)
    1. nodejs本身提供的核心模塊   fs http path url querystring
      核心模塊不需要安裝，直接導(dǎo)入即可。
      核心模塊的加載語(yǔ)法： const fs = require('fs')
    
    2. 第三方模塊  mime art-template
      第三方模塊： 必須先安裝（npm install XXX）  才能導(dǎo)入
      第三方模塊的加載語(yǔ)法： npm install XXX   const mime = require('mime')
    
    3. 自定義的模塊 一個(gè)js文件 
      不需要安裝  只需要自己創(chuàng)建一個(gè)js文件
      自定義模塊的加載語(yǔ)法：  require('模塊的路徑')  模塊不能是名字，必須是路徑  ./ ../ .js后綴是可以省略

  require加載規(guī)則（以mime模塊為例）
  1. 判斷是否是路徑， 如果是  就是自定義模塊
  2. 如果是名字 判斷是否是核心模塊
  3. 如果是第三方模塊  在當(dāng)前目錄找node_modules
  4. 在node_modules中查找mime文件夾
  5. 查找是否有package.json， 查看是否main屬性
  6. 判斷是否有main, 如果沒(méi)有，默認(rèn)查找index.js  index.json index.node
  7. 如果沒(méi)有
  8. 如果找不到，就去上一層目錄，一直找到根目錄
  9， 如果還沒(méi)有，就說(shuō)明模塊不存在
*/

模塊導(dǎo)出
/* 
  1. 模塊中定義的變量和函數(shù)都是私有的
  2. 任意的一個(gè)模塊中， 都有自帶一個(gè)屬性 module (全局屬性) module代表的就是當(dāng)前的這個(gè)模塊。
  3. module中有一個(gè)屬性  exports ,這個(gè)exports屬性是一個(gè)對(duì)象，代表的就是當(dāng)前模塊的導(dǎo)出 module.exports當(dāng)前模塊唯一能夠被外界訪問(wèn)到的

*/
//通過(guò)module.exports對(duì)外導(dǎo)出一些值
module.exports = 值  只能導(dǎo)出一個(gè)值
module.exports = {}  可以把所有要導(dǎo)出的內(nèi)容都放到一個(gè)新的對(duì)象中
module.export.xxx = 值
/* 
  在任意的模塊中 module.exports表示該模塊的導(dǎo)出
  為了我們方便導(dǎo)出， 每個(gè)模塊中還提供了 exports  
  exports 初始狀態(tài)下，和module.exports指向了同一個(gè)對(duì)象。

  注意點(diǎn)： 如果通過(guò)exports的方式來(lái)導(dǎo)出內(nèi)容，只能給對(duì)象增加屬性 不能替換這個(gè)對(duì)象
*/
// 我們真正到處的對(duì)象是module.exports指向的對(duì)象
exports = {} // 這樣只是改了exports的指向，而module.exports的指向沒(méi)有改變，所以這樣是不對(duì)的
// 以下這種是允許的
exports.xxx = '值'

express與mysql
首先需要安裝mysql模塊

npm i mysql
1
基本使用
// 導(dǎo)入第三方包
const mysql = require('mysql')
// 創(chuàng)建連接
var connection = mysql.createConnection({
  // 本地
  host: 'localhost',
  user: 'root',
  password: 'root',
  // 數(shù)據(jù)庫(kù)名稱(chēng)
  database: 'mydb',
  port: 3306
})

// 連接數(shù)據(jù)庫(kù)
connection.connect()

// 執(zhí)行sql語(yǔ)句
connection.query('select * from user where id = 8', (err, result) => {
  if (err) return console.log('查詢(xún)失敗', err)
  // result返回的是數(shù)組， 數(shù)組中是一個(gè)對(duì)象
  console.log(result)
})

// 關(guān)閉連接
connection.end()


查詢(xún)語(yǔ)句
var name = 'zs'
// 使用?表示占位，可以防止sql注入
connect.query(`select * from user where name=?`, name, (err, result) => {
  if (err) return console.log('錯(cuò)誤了', err)
  console.log(result)
})
1
2
3
4
5
6
插入語(yǔ)句
connect.query(
  'insert into user (name, age, gender, content) values (?, ?, ?, ?)',
  ['zs', 18, '男', '哈哈哈哈'],
  err => {
    if (err) return console.log('錯(cuò)誤', err)
    console.log('添加成功了')
  }
)

// 方式2
connect.query(
  'insert into user set ?',
  {
    name: 'zs',
    age: 30,
    gender: '男',
    content: '哈哈哈'
  },
  (err, result) => {
    if (err) return console.log('錯(cuò)誤', err)
    console.log('添加成功了', result)
  }
)


修改語(yǔ)句
connect.query(
  'update user set ? where id = ?',
  [
    {
      name: 'zs',
      age: 30,
      gender: '男',
      content: '哈哈哈'
    },
    10
  ],
  (err, result) => {
    if (err) return console.log('錯(cuò)誤', err)
    console.log('添加成功了', result)
  }
)

刪除語(yǔ)句
connect.query('delete from user where id = ?', 10, (err, result) => {
  if (err) return console.log('失敗', err)
  console.log(result)
})
1
2
3
4
登錄狀態(tài)保持
http是無(wú)狀態(tài)的，但是隨著技術(shù)的發(fā)展，我們需要記住某些東西，但是因?yàn)閔ttp是無(wú)狀態(tài)的，無(wú)法讓服務(wù)器記住東西，因此就引入了cookie和session這兩個(gè)東西，cookie用于瀏覽器端，session用于服務(wù)器端。

以用戶(hù)登錄為例：

當(dāng)用戶(hù)登錄時(shí)，瀏覽器會(huì)給服務(wù)器發(fā)送請(qǐng)求，這時(shí)候服務(wù)器就會(huì)開(kāi)辟一個(gè)空間用于存放session數(shù)據(jù)，并且會(huì)把生成的sessionId返回給瀏覽器，存放在瀏覽器的cookie中，之后瀏覽器在請(qǐng)求服務(wù)器的時(shí)候，就會(huì)去比對(duì)是否存在這個(gè)session。這樣你的登錄狀態(tài)就已經(jīng)保持下來(lái)了

cookie的特點(diǎn)

cookie大小只有4k
cookie每次請(qǐng)求的時(shí)候，都會(huì)自動(dòng)攜帶
cookie可以設(shè)置過(guò)期時(shí)間
為了方便使用，我們可以使用express-session這個(gè)包，可以很方便使用session

express-session步驟：
1. 下載  npm i express-session
2. 導(dǎo)入  const session = require("express-session")
3. 使用session中間件
app.use(session({
    secret: 'itcast',
    // 設(shè)置瀏覽器端cookie的名字， 默認(rèn)connect.sid
    name: 'itcast',
    resave: false,
    // 在瀏覽器和服務(wù)器連接的第一時(shí)間，分配session  給瀏覽器指定一個(gè)cookie
    saveUninitialized: true
}))
可以通過(guò)req.session訪問(wèn)到session
4. 登錄成功，把登錄成功的用戶(hù)信息存儲(chǔ)到 req.session.xxx中
5. 提供一個(gè)中間件，這個(gè)中間件在路由的前面，判斷 req.session.xxx是否有值，有值，放走，沒(méi)值，去登錄，細(xì)節(jié)： 如果是/login 直接放走
6. 退出功能：  把req.session.xxx 清空即可


瀏覽器登錄和退出
1. 登錄做什么  把用戶(hù)名和密碼給服務(wù)器
2. 退出做什么， 1. 告訴服務(wù)器，要退出   2.（清緩存也行）

yarn和npm的說(shuō)明
官網(wǎng)：https://yarn.bootcss.com/

Yarn是由Facebook、Google、Exponent 和 Tilde 聯(lián)合推出了一個(gè)新的 JS 包管理工具 ，Yarn 是為了彌補(bǔ) npm 的一些缺陷而出現(xiàn)的。

Yarn 緩存了每個(gè)下載過(guò)的包，所以再次使用時(shí)無(wú)需重復(fù)下載。
同時(shí)利用并行下載以最大化資源利用率，因此安裝速度更快。
yarn的用法和npm的用法差不多
yarn命令
初始化一個(gè)新項(xiàng)目
yarn init
1
添加依賴(lài)包
yarn add 包名
1
升級(jí)依賴(lài)包
yarn upgrade 包名
1
移除依賴(lài)包
yarn remove 包名
1
安裝項(xiàng)目的全部依賴(lài)
yarn
1
全局安裝
yarn global add 包名
1
使用gulp自動(dòng)化構(gòu)建
官網(wǎng)：https://gulpjs.com/

中文文檔：https://www.gulpjs.com.cn/

用自動(dòng)化構(gòu)建工具增強(qiáng)你的工作流程！

在開(kāi)發(fā)過(guò)程中，有很多重復(fù)性的工作需要執(zhí)行。

less轉(zhuǎn)成css
對(duì)css代碼壓縮混淆
對(duì)js代碼壓縮混淆
寫(xiě)完代碼后需要刷新瀏覽器
無(wú)法共用模版
gulp是前端開(kāi)發(fā)過(guò)程中對(duì)代碼進(jìn)行構(gòu)建的工具，是自動(dòng)化項(xiàng)目的構(gòu)建利器；她不僅能對(duì)網(wǎng)站資源進(jìn)行優(yōu)化，而且在開(kāi)發(fā)過(guò)程中很多重復(fù)的任務(wù)能夠使用正確的工具自動(dòng)完成；使用她，我們不僅可以很愉快的編寫(xiě)代碼，而且大大提高我們的工作效率。

gulp -----> grunt ------>webpack

環(huán)境安裝
初始化項(xiàng)目
npm init -y
1
全局安裝gulp
npm install gulp -g 
yarn global add gulp
1
2
作為項(xiàng)目的依賴(lài)進(jìn)行安裝
yarn add gulp --save-dev      或者    
yarn add gulp --save-dev
--save-dev 等同于 -D
如果這個(gè)依賴(lài)包只是在開(kāi)發(fā)階段需要用到，需要加-D
1
2
3
4
新建gulpfile.js文件
// 參數(shù)1： 任務(wù)名
// 參數(shù)2： 任務(wù)需要執(zhí)行的內(nèi)容
gulp.task('aa', function() {
  console.log('哈哈')
})
1
2
3
4
5
執(zhí)行任務(wù)
gulp 任務(wù)名;

gulp; 如果不接任務(wù)名，那么會(huì)執(zhí)行默認(rèn)的 default任務(wù)
1
2
3
glup任務(wù)-文件拷貝-lib
文件拷貝使用到了gulp提供的幾個(gè)核心方法
gulp.task: 定義任務(wù)

gulp.src() 讀取文件

gulp.pipe() 把文件交給管道處理

gulp.dest() 輸出文件到某個(gè)目錄

gulp.task定義任務(wù)
gulp.src('./src/lib/**/*.*')把文件讀取成一個(gè)文件流
gulp.pipe() 把文件流交給下一個(gè)流
gulp.dest('./dist/lib')輸出文件
// 簡(jiǎn)單拷貝, 處理 lib文件夾， lib文件不需要做任何的處理，只需要拷貝到dist目錄
// 任務(wù)需要加一個(gè)return， 表示任務(wù)完成
gulp.task('lib', function() {
  // 讀取文件
  // gulp.src() 讀取文件
  // gulp.pipe() 管道
  // gulp.dest() 放到哪兒
  return gulp.src('./src/lib/**/*.*').pipe(gulp.dest('./dist/lib'))
})
1
2
3
4
5
6
7
8
9
gulp任務(wù)-js代碼壓縮與混淆
gulp-uglify-es: 給js代碼進(jìn)行壓縮，處理ES6的代碼

gulp-rename: 重命名

安裝依賴(lài)
yarn add gulp-uglify-es --save-dev 
1
配置任務(wù)
const uglify = require('gulp-uglify-es').default

gulp.task('js', function() {
  return gulp
    .src('./js/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js'))
})
1
2
3
4
5
6
7
8
安裝重命名依賴(lài)
yarn add gulp-rename -D
1
重命名配置
task('js', function() {
  return src('./js/*.js')
    .pipe(dest('./dist/js'))
    .pipe(uglify())
    .pipe(
      rename({
        // 配置重命名的后綴名
        suffix: '.min'
      })
    )
    .pipe(dest('./dist/js'))
})
1
2
3
4
5
6
7
8
9
10
11
12
gulp任務(wù)-less處理
gulp-less: 把less變成css

gulp-rename: 重命名

gulp-minify-css: 壓縮css代碼

安裝依賴(lài)包
yarn add gulp-less -D
1
less任務(wù)
// less任務(wù)
task('less', function() {
  return src('./less/*.less')
    .pipe(less())
    .pipe(
      rename({
        extname: '.css'
      })
    )
    .pipe(dest('./dist/css'))
})
1
2
3
4
5
6
7
8
9
10
11
安裝css壓縮處理包
yarn add gulp-minify-css -D
1
壓縮css
// less任務(wù)
task('less', function() {
  return src('./less/*.less')
    .pipe(less())
    .pipe(
      rename({
        extname: '.css'
      })
    )
    .pipe(dest('./dist/css'))
    .pipe(minifycss())
    .pipe(
      rename({
        suffix: '.min'
      })
    )
    .pipe(dest('./dist/css'))
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
gulp任務(wù)-圖片壓縮
gulp-imagemin: 可以對(duì)圖片進(jìn)行壓縮

gulp-cache: 圖片壓縮比較耗時(shí)的一個(gè)任務(wù)， 如果每次都對(duì)所有的圖片進(jìn)行重新壓縮，比較浪費(fèi)時(shí)間， 會(huì)緩存下來(lái)所有已經(jīng)壓縮過(guò)的圖片

安裝依賴(lài)
yarn add gulp-imagemin -D
1
壓縮圖片的任務(wù)
task('image', function() {
  return src('./img/*')
    .pipe(imagemin())
    .pipe(dest('./dist/img'))
})
1
2
3
4
5
安裝gulp-cachae
yarn add  gulp-cache -D
1
壓縮圖片是比較耗時(shí)的，我們可以使用gulp-cache來(lái)緩存已經(jīng)壓縮過(guò)的圖片
task('image', function() {
  return src('./img/*')
    .pipe(cache(imagemin()))
    .pipe(dest('./dist/img'))
})
1
2
3
4
5
參考資料：https://www.cnblogs.com/yuzhongwusan/p/5417090.html

gulp任務(wù)-處理html
gulp-minify-html: 壓縮html文件

gulp-html-extend: 語(yǔ)句當(dāng)前html去導(dǎo)入另一個(gè)html

壓縮html
yarn add gulp-minify-html -D
1
使用
// 處理html
task('html', function() {
  return src('./src/*.html')
    .pipe(minifyHtml())
    .pipe(dest('./dist'))
})
1
2
3
4
5
6
導(dǎo)入html
yarn add gulp-html-extend -D
1
// 處理html
task('html', function() {
  return src('./src/*.html')
    .pipe(extender())
    .pipe(minifyHtml())
    .pipe(dest('./dist'))
})
1
2
3
4
5
6
7
在頁(yè)面中，如何導(dǎo)入html

<!-- @@include ./template/header.html -->
1
gulp任務(wù)-清空任務(wù)
安裝
yarn add del -D
1
配置任務(wù)
task('clean', function() {
  return del('./dist')
})
1
2
3
gulp-任務(wù)整合series
task('build', gulp.series('clean', 'html', 'less', 'js', 'image', 'lib'))
1
gulp任務(wù)-監(jiān)聽(tīng)文件的變化
// 實(shí)現(xiàn)一個(gè)，修改代碼，會(huì)自動(dòng)執(zhí)行任務(wù)
// 監(jiān)聽(tīng)的任務(wù)，，，，，，做一件事件，當(dāng)我們修改了對(duì)應(yīng)的文件，需要執(zhí)行對(duì)應(yīng)的任務(wù)
// gulp.watch() 監(jiān)視文件
task('watch', function() {
  // 參數(shù)1：監(jiān)視的文件
  // 參數(shù)2： 對(duì)應(yīng)的任務(wù), 多個(gè)任務(wù)
  watch('./src/**/*.html', series('html'))
  watch('./src/less/*.less', series('less'))
  watch('./src/js/*.js', series('js'))
  watch('./src/lib/**/*.*', series('lib'))
  watch('./src/img/*.*', series('img'))
})

gulp任務(wù)-自動(dòng)刷新
安裝
yarn add gulp-connect -D
藍(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)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

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

單圖排版

1. 平鋪

即把圖片鋪滿(mǎn)整個(gè)版面，這種處理方式多用于封面設(shè)計(jì)。

或者在內(nèi)頁(yè)中把某一半版平鋪一張大圖，另一半則排列文字或者小圖。

平鋪的圖片比較有張力，有視覺(jué)重心的圖片適合這么處理。下圖平鋪的效果就一般般。

還有一種情況是把圖片當(dāng)做背景，也可以采用平鋪，如下圖：

2. 四周留白

即圖片要比版面小，并讓其四周都留出空白。這里也分兩種情況，一是圖片位于版面正中央，圖片周?chē)牧舭资菍?duì)稱(chēng)的，這種效果類(lèi)似于相框，常用于封面設(shè)計(jì)。

還有一種情況是圖片周?chē)牧舭撞⒉粚?duì)稱(chēng)，如下圖，留白較多的區(qū)域會(huì)用來(lái)排文字，常用于海報(bào)設(shè)計(jì)和畫(huà)冊(cè)內(nèi)頁(yè)設(shè)計(jì)。

3. 一條邊出血

即把圖片的一條邊對(duì)齊邊界，這么處理有點(diǎn)沖破束縛的意思，可以增加圖片的想象力和版面的設(shè)計(jì)感。

4. 三條邊出血

這么做會(huì)把版面分成兩部分，一部分為色塊，一部分為圖片，在排版時(shí)我們還可以通過(guò)文字、色塊或顏色把這兩個(gè)部分聯(lián)系起來(lái)。

5. 拆分

即把一張圖片拆分成幾份，然后隔開(kāi)一些排列，這么做比單獨(dú)放一張圖片會(huì)更有設(shè)計(jì)感和趣味性，風(fēng)景類(lèi)圖片適合這么處理。

6. 跨版

即在畫(huà)冊(cè)設(shè)計(jì)中，讓圖片同時(shí)占據(jù)兩個(gè)版面。當(dāng)在一個(gè)跨版中只有一張圖片時(shí)，如果只把圖片排在某一半版中，那么另一半版就容易單調(diào)，所以在這種情況下通常會(huì)使用跨版，而且圖片放大后會(huì)更有張力，還能把左右兩個(gè)版面關(guān)聯(lián)起來(lái)。

雙圖排版

在畫(huà)冊(cè)的設(shè)計(jì)中，有時(shí)候我們應(yīng)該把一 P 當(dāng)成一個(gè)版面，而有時(shí)候則需要把一個(gè)跨版當(dāng)成一個(gè)版面，這取決于具體的內(nèi)容以及排版形式，所以圖片的排版也要分成這兩種情況來(lái)考慮。

1. 統(tǒng)一大小對(duì)齊排版

在一些作品集或產(chǎn)品畫(huà)冊(cè)中常用到此排法，視覺(jué)流程簡(jiǎn)單、清晰。

2. 統(tǒng)一大小錯(cuò)位排版

比對(duì)齊排版更有動(dòng)感，且由于圖片不多，所以也不會(huì)顯得混亂。

3. 一大一小排版

這種排版對(duì)比鮮明、更有張弛，可以在一個(gè)跨版中使用，也可以是在某一 P 中使用。

還可以把其中的一張圖片去底，這么組合起來(lái)更靈活，對(duì)比更強(qiáng)烈。

如果把整個(gè)跨版當(dāng)成一個(gè)版面，那么可以把大的那張圖進(jìn)行跨版，小的那張圖則不跨版。

或者把大圖鋪滿(mǎn)一個(gè) P，而小的圖片和文字則排在另一個(gè) P。

這兩種排法都很大氣且不失細(xì)膩。

多圖排版

有時(shí)候一個(gè)版面內(nèi)的圖片會(huì)有很多，這種版面排起來(lái)會(huì)更有難度，常用的排版方式有以下 8 種。

1. 大小統(tǒng)一對(duì)齊排版

這種排法比較整潔，但缺少變化，適合用于目錄頁(yè)或者產(chǎn)品和人物介紹。

2. 大小不統(tǒng)一對(duì)齊排版

這種排法會(huì)比前一種更靈活一點(diǎn)。適合利用網(wǎng)格工具來(lái)輔助排版。

這種排版雖然沒(méi)有統(tǒng)一圖片的大小，但由于保持了嚴(yán)格的對(duì)齊關(guān)系，所以依然顯得很整潔。

3. 圖片與色塊組合排版

圖片與色塊組合在一起排版既不會(huì)像只有圖片那么單調(diào)，還可以利用色塊排文字。不過(guò)注意色塊的顏色不要太多，且顏色最好來(lái)自圖片。

4. 錯(cuò)位排版

即把相連兩張圖片刻意錯(cuò)開(kāi)，或者把圖片與文字的位置互換，這么做可以有效打破圖片完全對(duì)齊的單調(diào)，且由于有一定的規(guī)律，所以也不會(huì)對(duì)視覺(jué)流程造成太大影響。

5. 把圖片拼成特定的形狀

這種排法適合圖片比較多的情況，這么做可以避免圖片太多而顯得混亂，而且因?yàn)槠闯傻男螤钜c設(shè)計(jì)需求相關(guān)，所以會(huì)顯得更有創(chuàng)意。

6. 按照某一路徑排版

這種排法跟前一種一樣，適合數(shù)量較多的同類(lèi)圖片使用，可以避免圖片排得太過(guò)分散，如果不統(tǒng)一圖片的大小和方向，效果會(huì)比較活潑但不規(guī)范，適用于照片墻和兒童畫(huà)冊(cè)的排版。

如果統(tǒng)一圖片的大小和方向，或者使它們呈漸變式的變化，這些圖片還可以形成一定的節(jié)奏感，不僅不會(huì)亂，還很美觀。

7. 一大多小排版

如果在版面中分開(kāi)排列大小差不多的多張圖片，那么該版面就會(huì)缺乏重點(diǎn)且沒(méi)有張力，而如果把其中一張圖片放大，與其他圖片形成鮮明的大小對(duì)比，就可以有效解決這一問(wèn)題。

8. 自由排版

即大小不需要統(tǒng)一、圖片與圖片之間也不一定要嚴(yán)格對(duì)齊，效果比較靈活，設(shè)計(jì)感較強(qiáng)，常用于雜志排版中。

這種排法有兩點(diǎn)需要注意，一是圖片不要排的太分散；二是最好要有大小對(duì)比。

去底圖也很適合這么做，當(dāng)然，在排版的時(shí)候也要有大小的區(qū)分，同時(shí)要注意圖片與圖片、圖片與文字之間的輪廓要形成互補(bǔ)。

結(jié)語(yǔ)

版面中的圖片數(shù)量有從一張到數(shù)十張不等，圖片的排版方式也非常多，所以我沒(méi)法一一列出，以上總結(jié)的 17 個(gè)技巧僅僅代表一些比較主流的方向，具體的變化還需要大家根據(jù)具體的內(nèi)容和設(shè)計(jì)需求去做嘗試和突破，希望這篇文章能給你一點(diǎ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)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

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

場(chǎng)景：

vue路由加載頁(yè)面時(shí)，數(shù)據(jù)返回慢的時(shí)候頁(yè)面會(huì)有閃動(dòng)的效果，數(shù)據(jù)加載前和加載后的區(qū)別。（特別是el-table表格數(shù)據(jù)）

思路：

路由前加載數(shù)據(jù)，等數(shù)據(jù)加載完再路由渲染頁(yè)面

解決方案：

使用vue-router的 路由守衛(wèi) beforeRouteEnter，組件內(nèi)直接定義以下路由導(dǎo)航守衛(wèi)，和鉤子函數(shù)的寫(xiě)法一樣，下面列出三種路由守衛(wèi)：

 beforeRouteEnter(to,from,next)0{
        // 在渲染該組件的對(duì)應(yīng)路由被 confirm 前調(diào)用// 不！能！獲取組件實(shí)例 `this`
        // 因?yàn)楫?dāng)守衛(wèi)執(zhí)行前，組件實(shí)例還沒(méi)被創(chuàng)建
    } 復(fù)制代碼

 beforeRouteUpdate(to,from,next){
        // 在當(dāng)前路由改變，但是該組件被復(fù)用時(shí)調(diào)用
        // 舉例來(lái)說(shuō)，對(duì)于一個(gè)帶有動(dòng)態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時(shí)候，
        // 由于會(huì)渲染同樣的 Foo 組件，因此組件實(shí)例會(huì)被復(fù)用。而這個(gè)鉤子就會(huì)在這個(gè)情況下被調(diào)用。
        // 可以訪問(wèn)組件實(shí)例 `this`
    } 復(fù)制代碼

 beforeRouteLeave(to,from,next){
        // 導(dǎo)航離開(kāi)該組件的對(duì)應(yīng)路由時(shí)調(diào)用// 可以訪問(wèn)組件實(shí)例 `this`
    } 復(fù)制代碼

藍(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)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。