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

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

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

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

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


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

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

先說第一個(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)在下沿。
廢話少說，立刻上代碼，驗(yàn)證下。

row：

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

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

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

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

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

space-between：

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

還有很多屬性可以靈活的調(diào)整頁面的排版，我只舉例最簡單的幾種排版。
沒有float，沒有position，也沒有行和塊。只要知道x軸和y軸就能輕松布局。
如果想了解flex布局，可以看一下這位大佬的博客：
語法篇：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ā)到您的郵箱中， 請點(diǎn)這里

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

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

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

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

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

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

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

1、摩爾斯陰影

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

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

2、堆疊

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

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

3、微陰影

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

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

4、斜紋線條

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

這一趨勢是非常典型的70年代復(fù)古，不僅在風(fēng)格上，而且在色調(diào)上也有體現(xiàn)。這些帶來半調(diào)效果的斜條紋線所創(chuàng)造的效果接近于40%的黑色。這樣的 LOGO 設(shè)計(jì)能夠讓用戶一秒回到以往那個(gè)美好的時(shí)代，不那么機(jī)器制造的感覺。但是它仍然存在缺陷，就是當(dāng)它縮小的時(shí)候，斜條紋會模糊，最終會呈現(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)近似于編織的籃子或桃子的紅暈，圖案并不僅僅是用來表達(dá)色調(diào)的，它還暗含光影和紋理。

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

6、高亮

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

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

7、扇形元素

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

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

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

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

明修棧道C和暗渡陳倉B

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

C端 Consumer，表示為消費(fèi)者、個(gè)人用戶或終端用戶設(shè)計(jì)，直接面向普通用戶提供服務(wù)來幫助他們實(shí)現(xiàn)個(gè)人需求。B端 Business，它面對商業(yè)和企業(yè)，是為幫助企業(yè)集團(tuán)等實(shí)現(xiàn)商業(yè)目的而設(shè)計(jì)的軟件、工具或者平臺。

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

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

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

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

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

從使用者的角度來說：

• C 端產(chǎn)品關(guān)鍵詞包括免費(fèi)使用、迅速上手、體驗(yàn)為王、你能讓我做什么；
• B 端產(chǎn)品的關(guān)鍵詞則是付費(fèi)購買、上手緩慢、效率第一、你能為我做什么。

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

• C端周期短，B端周期長；
• C端用戶多，B端用戶少；
• C端邏輯簡單，B端邏輯復(fù)雜；
• C端競品較多，B端競品較少；
• C端主戰(zhàn)場是移動(dòng)端，B端則是 PC 端；
• C端是用戶體驗(yàn)驅(qū)動(dòng)，B端是解決問題驅(qū)動(dòng)；
• C端產(chǎn)品的使用決策權(quán)在用戶手中，而B端產(chǎn)品的使用決策權(quán)則在客戶手中（B端客戶不一定是用戶）；
• C端產(chǎn)品除了產(chǎn)品的體驗(yàn)以外，也要讓產(chǎn)品更美觀，讓活動(dòng)更有趣，讓用戶更舒服，產(chǎn)品經(jīng)理有很強(qiáng)的同理心。B端產(chǎn)品的實(shí)用性大于美觀性，能切實(shí)解決問題、配置資源的 B 端產(chǎn)品才是一個(gè)好的 B 端產(chǎn)品，產(chǎn)品經(jīng)理要具有更強(qiáng)的邏輯思維能力。

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

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

• C 端產(chǎn)品的后臺產(chǎn)品線，如淘寶商家版，餓了么商家版，對訂單和用戶進(jìn)行管理，支持 C 端產(chǎn)品的業(yè)務(wù)進(jìn)展。
• 平臺級工具產(chǎn)品，如微信公眾平臺，對文章和讀者的數(shù)據(jù)統(tǒng)計(jì)和管理；各大互聯(lián)網(wǎng)公司的開放平臺，如微博開放平臺等。
• 企業(yè)級服務(wù)產(chǎn)品，虛擬主機(jī)系統(tǒng)（VMware），云主機(jī)管理系統(tǒng)（深信服、xensystem、騰訊云）以及各種云SaaS。
• 企業(yè)的業(yè)務(wù)處理平臺，對內(nèi)有考勤、報(bào)銷等 OA辦公系統(tǒng)，對外有 CRM 客戶管理系統(tǒng)，ERP 資源及供應(yīng)鏈管理系統(tǒng)。

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

1. 初識后臺產(chǎn)品設(shè)計(jì)

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

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

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

2. 后臺UI設(shè)計(jì)工作流程

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

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

在設(shè)計(jì)執(zhí)行階段，參照 PM 給出的功能清單做原型和流程的梳理，需要關(guān)注的有當(dāng)前版本規(guī)劃、功能模塊、功能類型、功能描述、任務(wù)優(yōu)先級、完成時(shí)間等，交互原型則伴隨著功能描述、規(guī)則判定條件、觸發(fā)條件等內(nèi)容。原型設(shè)計(jì)完成，開始做 UI 視覺方面的設(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)行測試的，力求視覺設(shè)計(jì)和代碼實(shí)現(xiàn)無誤差。在完成設(shè)計(jì)執(zhí)行后，從信息層級、文字、圖標(biāo)、圖片等方面進(jìn)行設(shè)計(jì)走查，進(jìn)行多次設(shè)計(jì)驗(yàn)證與測試。

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

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

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

• 對產(chǎn)品：在項(xiàng)目完成第一版較為穩(wěn)定的版本時(shí)，著手制定設(shè)計(jì)標(biāo)準(zhǔn)，統(tǒng)一公司視覺設(shè)計(jì)規(guī)范及某些特定交互設(shè)計(jì)規(guī)范。同一個(gè)項(xiàng)目會有多個(gè)設(shè)計(jì)師的參與，規(guī)范化的設(shè)計(jì)語言，避免因設(shè)計(jì)控件混亂而影響設(shè)計(jì)輸出。
• 對自己：組件化同類元素，提高工作效率，建立公司產(chǎn)品的組件庫，以便不同項(xiàng)目的復(fù)用及設(shè)計(jì)延展。在同一個(gè)項(xiàng)目中也能更好的把控該項(xiàng)目的視覺規(guī)范，提率。
• 對團(tuán)隊(duì)：設(shè)計(jì)規(guī)范的制定，規(guī)范了設(shè)計(jì)團(tuán)隊(duì)的輸出，同時(shí)方便了與開發(fā)團(tuán)隊(duì)的交接和協(xié)作。通過設(shè)計(jì)規(guī)范的制定，前端實(shí)現(xiàn)也能擁有一套可供復(fù)用和擴(kuò)展的組件庫，助力上下游交接及團(tuán)隊(duì)協(xié)作。
• 對客戶：制定設(shè)計(jì)規(guī)范的同時(shí)需要考慮設(shè)計(jì)延展性，為不同客戶的定制化需求提供更的輸出。同時(shí)在進(jìn)行產(chǎn)品迭代時(shí)，設(shè)計(jì)規(guī)范的組件化調(diào)整也大大提高了工作效率。

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

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

1. 頁面布局

統(tǒng)一尺寸

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

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

頁面框架

頁面框架主要分為左右欄布局和上下欄布局，還有其他的布局。左右欄布局包括頂部欄、左側(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è)菜單可收縮展開，收縮狀態(tài)下固定寬度。

柵格布局

柵格系統(tǒng)的使用是為了解決自適應(yīng)和響應(yīng)式問題，從而更好地進(jìn)行產(chǎn)品設(shè)計(jì)和產(chǎn)品開發(fā)。響應(yīng)式柵格采用 24 列柵格系統(tǒng)實(shí)現(xiàn)，以滿足 2，3，4，5，6 分比布局等多種情況。固定寬度 Column，將間隔 Gutter 進(jìn)行動(dòng)態(tài)縮放。

需要柵格化處理的內(nèi)容的總寬度=23列（1列=1寬度Column+1間隔Gutter）+1寬度Column=24寬度Column+23間隔Gutter。

谷歌規(guī)定模塊和結(jié)構(gòu)之間要以 8px 為基準(zhǔn)，布局間相對間距可采用 8px 以及 8 的倍數(shù)，但一些小組件（按鈕、間隔、輸入框）可以以 4 為基準(zhǔn)。柵格布局是為了輔助設(shè)計(jì)，靈活運(yùn)用，不要被它所局限。

尺寸設(shè)定

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

相對間隔

定義主體內(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)品的不同需求，可能也會將統(tǒng)計(jì)圖、標(biāo)簽等進(jìn)行統(tǒng)一標(biāo)準(zhǔn)色設(shè)定。

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

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

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

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

3. 標(biāo)準(zhǔn)字

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

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

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

4. 圖標(biāo)

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

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

5. 按鈕

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

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

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

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

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

6. 導(dǎo)航

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

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

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

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

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

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

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

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

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

7. 表單

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

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

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

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

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

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

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

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

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

8. 表格

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

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

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

行高

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

行數(shù)

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

列寬

列寬根據(jù)內(nèi)容字段長短需要有不同且合理的默認(rèn)值，使得表格字段有良好的展示效果。列內(nèi)容的長度固定時(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)過多，列數(shù)比較多的情況下應(yīng)該合理進(jìn)行合并、隱藏、刪除或進(jìn)行優(yōu)先級處理。常用的方法有引入配置列，用戶可自定義展示必需列以外的其他列；只展示重要信息，下拉展開列查看完整信息；在表格中引入橫向滾動(dòng)條，根據(jù)實(shí)際情況選擇是否要始終固定基本信息列（如第一列是文件名）和操作列（最后一列的操作）。

對齊方式

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

詳情入口

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

9. 反饋

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

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

彈框

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

側(cè)滑框

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

骨架屏

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

全局提示

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

警告提示

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

通知提醒

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

10. 缺省狀態(tài)

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

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

11. 數(shù)據(jù)可視化

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

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

考慮到數(shù)據(jù)可視化可能會需要深色淺色不同的背景，在數(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. 書籍推薦

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

3. 文章和作品推薦

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

總結(jié)

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

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

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

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

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

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

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

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

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

不同形式組合的新logo效果

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

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

圖形延展效果

再來看看，虎牙新logo應(yīng)用在各種衍生產(chǎn)品的效果。

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

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

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

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

引言

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

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

一、什么是卡片

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

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

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

1.趨勢

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

2. 層次感

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

3. 規(guī)整化

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

4. 視覺體驗(yàn)

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

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

5. 易用性

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

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

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

7. 交互效果

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

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

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

1.卡片式形式一

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

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

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

2. 卡片式形式二

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

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

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

3. 卡片式形式三

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

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

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

4. 卡片式形式四

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

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

5.卡片式形式五

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

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

6. 卡片式形式六

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

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

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

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

共同的特點(diǎn)是

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

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

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

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

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

6. 一般卡片應(yīng)用在會員，列表，說明，優(yōu)惠劵，分類，類別，集合頁，歡迎頁等場景常見

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

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

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

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

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

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

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

調(diào)整后

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

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

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

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

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

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

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

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

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

2.創(chuàng)意腦爆

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

 

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

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

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

由此小說模塊圖標(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è)小技巧，我會遵循兩個(gè)原則，“具象”與“二層”。

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

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

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

 

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

 

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

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

 

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

 

 

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

 

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

 

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

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

 

 

對于執(zhí)行需要注意的基礎(chǔ)細(xì)節(jié)，之前有寫過《圖標(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ì)門牌的細(xì)節(jié)：

 

 

3.3 俏皮的那一筆

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

再比如一根線條的破局：

 

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

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

 

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

 

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

 

 

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

 

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

 

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

 

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

 

為什么還是不好看？

我也不知道??！

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

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

 

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

 

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

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

 

書架：兩本書互相依靠

 

熱門：手捧愛心

 

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

 

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

 

 

 

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

 

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

 

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

 

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

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

 

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

 

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

 

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

 

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

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

 

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

 

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

 

 

 

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

 

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

 

1 五官緊湊

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

 

2 腮紅

 

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

 

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

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

 

最后：

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

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

 

 

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

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

寫在前面

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

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

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

目錄

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

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

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

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

正文

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

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

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

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

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

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

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

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

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

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

從使用者的角度來說——

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• 在設(shè)計(jì)執(zhí)行階段，參照PM給出的功能清單做原型和流程的梳理，需要關(guān)注的有當(dāng)前版本規(guī)劃、功能模塊、功能類型、功能描述、任務(wù)優(yōu)先級、完成時(shí)間等，交互原型則伴隨著功能描述、規(guī)則判定條件、觸發(fā)條件等內(nèi)容。原型設(shè)計(jì)完成，開始做UI視覺方面的設(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)行測試的，力求視覺設(shè)計(jì)和代碼實(shí)現(xiàn)無誤差。在完成設(shè)計(jì)執(zhí)行后，從信息層級、文字、圖標(biāo)、圖片等方面進(jìn)行設(shè)計(jì)走查，進(jìn)行多次設(shè)計(jì)驗(yàn)證與測試。

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

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

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

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

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

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

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

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

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

3.1頁面布局

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

2. 頁面框架——頁面框架主要分為左右欄布局和上下欄布局，還有其他的布局。左右欄布局包括頂部欄、左側(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è)菜單可收縮展開，收縮狀態(tài)下固定寬度。

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

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òng)或整屏滾動(dòng)，視情況固定導(dǎo)航欄。

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

1. 顏色分為品牌色、輔助色、中性色。根據(jù)不同產(chǎn)品的不同需求，可能也會將統(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)品直接對外的形象。品牌色要根據(jù)產(chǎn)品特性、用戶使用場景、產(chǎn)品定位等進(jìn)行選取，盡量做好色彩的延伸性，可支持換膚。品牌色的應(yīng)用場景包括操作狀態(tài)、按鈕色、可操作圖標(biāo)等。

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

4. 中性色常用于文本、背景、邊框、分割線等，需要考慮深色背景和淺色背景的差異，可以選擇同一色相控制透明度變化，用來表現(xiàn)不同的層級結(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ǒ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圖標(biāo)

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

2. 除了某些常用的圖標(biāo)，有一些專業(yè)性的操作和詞匯則需要設(shè)計(jì)師進(jìn)行繪制，現(xiàn)在比較方便的方法是在iconfont提供的圖標(biāo)模板上用AI繪制，畫板1024*1024，提供圓形、正方形、矩形形狀(文末提供下載)。圖標(biāo)尺寸按照8的倍數(shù)進(jìn)行延展，繪制完成后生成svg格式文件，提交到阿里巴巴矢量圖標(biāo)庫的項(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í)候手抖會在保存時(shí)候不小心點(diǎn)成了關(guān)閉，所以我無情地把ctrl+q、ctrl+w變成了拓展和拓展外觀的快捷鍵......感受還不錯(cuò)。

3.5按鈕

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

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

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

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

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

3.6導(dǎo)航

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

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

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

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

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

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

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

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

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

   
   

3.7表單

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

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

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，寬度視情況而定，無圓角。上下布局的多個(gè)輸入框上下間距為20px，有錯(cuò)誤提示時(shí)候豎向增加10px或橫向顯示在輸入框右側(cè)（預(yù)留出位置）。

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

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

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

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

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

3.8表格

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

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

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

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

5. 列寬——列寬根據(jù)內(nèi)容字段長短需要有不同且合理的默認(rèn)值，使得表格字段有良好的展示效果。列內(nèi)容的長度固定時(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)過多，列數(shù)比較多的情況下應(yīng)該合理進(jìn)行合并、隱藏、刪除或進(jìn)行優(yōu)先級處理。常用的方法有引入配置列，用戶可自定義展示必需列以外的其他列；只展示重要信息，下拉展開列查看完整信息；在表格中引入橫向滾動(dòng)條，根據(jù)實(shí)際情況選擇是否要始終固定基本信息列（如第一列是文件名）和操作列（最后一列的操作）。

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

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

3.9反饋

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

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

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

4. 側(cè)滑框——又稱抽屜，出現(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以內(nèi)。

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

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

3.10缺省狀態(tài)

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

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

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

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

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

3. 考慮到數(shù)據(jù)可視化可能會需要深色淺色不同的背景，在數(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不丑也要多讀書

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

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

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

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

寫在最后

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

剛接觸后臺產(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í)的資源非常多，對一些公司來說、專門去制定一套自己的后臺設(shè)計(jì)規(guī)范不免顯得費(fèi)時(shí)費(fèi)力，合理引入antdesign和element等開源的設(shè)計(jì)組件，會使得設(shè)計(jì)師以及設(shè)計(jì)師的好朋友前端小哥哥事半功倍，有助于設(shè)計(jì)師把更多的精力投入到沉淀行業(yè)知識、研究產(chǎn)品架構(gòu)、梳理交互方式和創(chuàng)新視覺表現(xiàn)上。

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

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

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

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

global模塊-全局變量
Node.js 中的全局對象是 global, 類似于瀏覽器中的window

常用的global屬性

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

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

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

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

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

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

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

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

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

關(guān)于Buffer對象

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

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

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

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

//參數(shù)1：追加的文件名(如果文件不存在，會自動(dòng)創(chuàng)建)
//參數(shù)2：追加的文件內(nèi)容（注意：寫入的內(nèi)容會覆蓋以前的內(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)容成功");
})


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

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

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

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

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

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

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

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

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

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

'use strict';

var fs = require('fs');

// 打開一個(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事件可能會有多次，每次傳遞的chunk是流的一部分?jǐn)?shù)據(jù)。

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

'use strict';

var fs = require('fs');

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

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


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

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

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

讓我們用pipe()把一個(gè)文件流和另一個(gè)文件流串起來，這樣源文件的所有數(shù)據(jù)就自動(dòng)寫入到目標(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模塊
路徑操作的問題
具體的說明可以參考 NodeJs學(xué)習(xí).md

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

//data.txt是相對路徑，讀取當(dāng)前目錄下的data.txt, 相對路徑相對的是指向node命令的路徑
//如果node命令不是在當(dāng)前目錄下執(zhí)行就會報(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);
});

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

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

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

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

常用方法：

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ù)器注冊request事件監(jiān)聽，每次瀏覽器像服務(wù)器發(fā)送請求的時(shí)候都會被監(jiān)聽到
server.on('request', function(request, response){
    // request 瀏覽器請求的數(shù)據(jù)，包括請求方式method 請求的地址 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)，這樣的寫法相當(dāng)于是讓write和end的合寫
    response.end('hello world!')
})
// 給服務(wù)器設(shè)置監(jiān)聽,相當(dāng)于啟動(dòng)服務(wù)器
server.listen(8888,function(){
    console.log('服務(wù)器啟動(dòng)成功')
})

// 簡寫方式

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

詳細(xì)說明

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

res.write(data): 給瀏覽器發(fā)送請求體，可以調(diào)用多次，從而提供連續(xù)的請求體
res.end();   通知服務(wù)器，所有響應(yīng)頭和響應(yīng)主體都已被發(fā)送，即服務(wù)器將其視為已完成。
res.end(data); 結(jié)束請求，并且響應(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 ,會根據(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)首頁
注意：瀏覽器中輸入的URL地址，僅僅是一個(gè)標(biāo)識，不與服務(wù)器中的目錄一致。也就是說：返回什么內(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('您訪問的資源不存在~')
      }

      res.end(data)
    })
  }
})

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

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

// mime 不僅可以只寫一個(gè)后綴名，還可以通過url來解析出后綴名來，因此這里可以直接寫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 包名@版本號;  //安裝指定包的指定版本

npm i 包名； //簡寫

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

作用：描述當(dāng)前項(xiàng)目（包）的信息，描述當(dāng)前包（項(xiàng)目）的依賴項(xiàng)
如何生成：npm init或者npm init -y
作用
作為一個(gè)標(biāo)準(zhǔn)的包，必須要有package.json文件進(jìn)行描述
一個(gè)項(xiàng)目的node_modules目錄通常都會很大，不用拷貝node_modules目錄，可以通過package.json文件配合npm install直接安裝項(xiàng)目所有的依賴項(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í)候會用到，現(xiàn)在體會不到
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],  //關(guān)鍵字（方便搜索）
  "author": "",  //作者的信息
  "license": "ISC",  //許可證，開源協(xié)議
  "dependencies": {   //重要，項(xiàng)目的依賴， 方便代碼的共享  通過 npm install可以直接安裝所有的依賴項(xiàng)
    "bootstrap": "^3.3.7",
    "jquery": "^3.3.1"
  }
}

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

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

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

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

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

# 查看倉庫地址列表
nrm ls

# 切換倉庫地址
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ù)、對象都是私有的，對其他文件不可見。
node中模塊分類
1 核心模塊
由 node 本身提供，不需要單獨(dú)安裝（npm），可直接引入使用
2 第三方模塊
由社區(qū)或個(gè)人提供，需要通過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 先通過npm下載 2 再引入 3 最后使用
用戶自定義模塊
由開發(fā)人員創(chuàng)建的模塊（JS文件）
基本使用：1 創(chuàng)建模塊 2 引入模塊
注意：自定義模塊的路徑必須以./獲取../開頭
// 加載模塊
require('./a')     // 推薦使用，省略.js后綴！

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

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

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

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

  注意點(diǎn)： 如果通過exports的方式來導(dǎo)出內(nèi)容，只能給對象增加屬性 不能替換這個(gè)對象
*/
// 我們真正到處的對象是module.exports指向的對象
exports = {} // 這樣只是改了exports的指向，而module.exports的指向沒有改變，所以這樣是不對的
// 以下這種是允許的
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ù)庫名稱
  database: 'mydb',
  port: 3306
})

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

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

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


查詢語句
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
插入語句
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)
  }
)


修改語句
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)
  }
)

刪除語句
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是無狀態(tài)的，但是隨著技術(shù)的發(fā)展，我們需要記住某些東西，但是因?yàn)閔ttp是無狀態(tài)的，無法讓服務(wù)器記住東西，因此就引入了cookie和session這兩個(gè)東西，cookie用于瀏覽器端，session用于服務(wù)器端。

以用戶登錄為例：

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

cookie的特點(diǎn)

cookie大小只有4k
cookie每次請求的時(shí)候，都會自動(dòng)攜帶
cookie可以設(shè)置過期時(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
}))
可以通過req.session訪問到session
4. 登錄成功，把登錄成功的用戶信息存儲到 req.session.xxx中
5. 提供一個(gè)中間件，這個(gè)中間件在路由的前面，判斷 req.session.xxx是否有值，有值，放走，沒值，去登錄，細(xì)節(jié)： 如果是/login 直接放走
6. 退出功能：  把req.session.xxx 清空即可


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

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

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

Yarn 緩存了每個(gè)下載過的包，所以再次使用時(shí)無需重復(fù)下載。
同時(shí)利用并行下載以最大化資源利用率，因此安裝速度更快。
yarn的用法和npm的用法差不多
yarn命令
初始化一個(gè)新項(xiàng)目
yarn init
1
添加依賴包
yarn add 包名
1
升級依賴包
yarn upgrade 包名
1
移除依賴包
yarn remove 包名
1
安裝項(xiàng)目的全部依賴
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)你的工作流程！

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

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

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

環(huán)境安裝
初始化項(xiàng)目
npm init -y
1
全局安裝gulp
npm install gulp -g 
yarn global add gulp
1
2
作為項(xiàng)目的依賴進(jìn)行安裝
yarn add gulp --save-dev      或者    
yarn add gulp --save-dev
--save-dev 等同于 -D
如果這個(gè)依賴包只是在開發(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ù)名，那么會執(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')輸出文件
// 簡單拷貝, 處理 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: 重命名

安裝依賴
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
安裝重命名依賴
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代碼

安裝依賴包
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: 可以對圖片進(jìn)行壓縮

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

安裝依賴
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來緩存已經(jīng)壓縮過的圖片
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: 語句當(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
在頁面中，如何導(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)聽文件的變化
// 實(shí)現(xiàn)一個(gè)，修改代碼，會自動(dòng)執(zhí)行任務(wù)
// 監(jiān)聽的任務(wù)，，，，，，做一件事件，當(dāng)我們修改了對應(yīng)的文件，需要執(zhí)行對應(yīng)的任務(wù)
// gulp.watch() 監(jiān)視文件
task('watch', function() {
  // 參數(shù)1：監(jiān)視的文件
  // 參數(shù)2： 對應(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 )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

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

單圖排版

1. 平鋪

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

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

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

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

2. 四周留白

即圖片要比版面小，并讓其四周都留出空白。這里也分兩種情況，一是圖片位于版面正中央，圖片周圍的留白是對稱的，這種效果類似于相框，常用于封面設(shè)計(jì)。

還有一種情況是圖片周圍的留白并不對稱，如下圖，留白較多的區(qū)域會用來排文字，常用于海報(bào)設(shè)計(jì)和畫冊內(nèi)頁設(shè)計(jì)。

3. 一條邊出血

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

4. 三條邊出血

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

5. 拆分

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

6. 跨版

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

雙圖排版

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

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

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

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

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

3. 一大一小排版

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

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

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

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

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

多圖排版

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

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

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

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

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

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

3. 圖片與色塊組合排版

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

4. 錯(cuò)位排版

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

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

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

6. 按照某一路徑排版

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

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

7. 一大多小排版

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

8. 自由排版

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

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

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

結(jié)語

版面中的圖片數(shù)量有從一張到數(shù)十張不等，圖片的排版方式也非常多，所以我沒法一一列出，以上總結(jié)的 17 個(gè)技巧僅僅代表一些比較主流的方向，具體的變化還需要大家根據(jù)具體的內(nèi)容和設(shè)計(jì)需求去做嘗試和突破，希望這篇文章能給你一點(diǎn)幫助。

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

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

場景：

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

思路：

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

解決方案：

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

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

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

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

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