如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
網頁布局（layout）是 CSS 的一個重點應用。畢竟簡單的樣式不能總依賴前端人員。
布局的傳統解決方案，基于盒狀模型，依賴 display 屬性 + position屬性 + float屬性。它對于那些特殊布局非常不方便，比如，垂直居中就不容易實現。
2009年，W3C 提出了一種新的方案----Flex 布局，可以簡便、完整、響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支持，這意味著，現在就能很安全地使用這項功能。
Flex 是 Flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。
采用 Flex 布局的元素，稱為 Flex 容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為 Flex 項目（flex item），簡稱"項目"。
容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。
項目默認沿主軸排列。單個項目占據的主軸空間叫做main size，占據的交叉軸空間叫做cross size。
先說第一個屬性flex-direction 屬性決定主軸的方向（即項目的排列方向）。
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
row（默認值）：主軸為水平方向，起點在左端。
row-reverse：主軸為水平方向，起點在右端。
column：主軸為垂直方向，起點在上沿。
column-reverse：主軸為垂直方向，起點在下沿。
廢話少說，立刻上代碼，驗證下。
row：
眾所周知，h1和p都是塊級元素，都會縱向排列，一旦采用 Flex 布局，就以x和y軸為基礎排序，
column：
不但模糊了塊級元素和行內元素的區別，而且左右的排序也很靈活。
row-reverse：
flex-wrap屬性
默認情況下，項目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下，就會換行。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
（1）nowrap（默認）：不換行。
（2）wrap：換行，第一行在上方。
（3）wrap-reverse：換行，第一行在下方。
wrap：
雖然他換行了，但是每行的元素是不是靠的太近了
在這時候就能用到
justify-content屬性
justify-content屬性定義了項目在主軸上的對齊方式。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
它可能取5個值，具體對齊方式與軸的方向有關。下面假設主軸為從左到右。
flex-start：（默認值）：左對齊
flex-end：右對齊
center： 居中
space-between：兩端對齊，項目之間的間隔都相等。
space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。
space-between：
但是還是有點不對勁，原來沒有垂直居中。
align-items屬性就出來了
align-items屬性定義項目在交叉軸上如何對齊。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
它可能取5個值。具體的對齊方式與交叉軸的方向有關，下面假設交叉軸從上到下。
flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
baseline: 項目的第一行文字的基線對齊。
stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。
還有很多屬性可以靈活的調整頁面的排版，我只舉例最簡單的幾種排版。
沒有float，沒有position，也沒有行和塊。只要知道x軸和y軸就能輕松布局。
如果想了解flex布局，可以看一下這位大佬的博客：
語法篇：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
實戰篇：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
在過去的一年里 LOGO 設計行業蓬勃地發展著。對我而言，查看各大設計機構的LOGO趨勢分析和報告，就像開禮物一樣，因為我知道等待我的是一段獨特體驗。這其中有平凡到令人失望的設計作品，也有令我歡欣甚至驚喜的好作品。而這便是LOGO設計行業仍然充滿活力的證據，是值得感激的恩賜。值得欣喜的是今年的設計作品依然體現著設計師的好奇心與勤勉，這激勵我們向著新高度進發。你會在今年的趨勢中看到往年主題的延續，但是融合和改變形成了跟為獨特的設計趨勢。設計師們開始采用非傳統的色彩和線條，賦予新的內涵。
Logo中的圖案通常以黑白配色呈現，營造一種復古感。設計師們以大量的網點元素作為構建差異的方式。粗礪的噪點、條紋以及網線銅版和木紋磚紋的調合，使logo呈現一種復古的視覺特征，這似乎與時下的高飽和漸變色彩的使用趨勢背道而馳。
現代流行文化不僅改變了我們看待符號的方式，也影響了視覺設計時的優先級。隨著紋理、圖案、排版、攝影和插畫元素在視覺品中的優先級發生變化，視覺元素愈發地被收到重視。現代品牌很多時候會被視作為是被視覺美學所推動前進，因此也會要求 LOGO 具備更強的視覺吸引力。
陰陽相生。當一種新的風格、思路，新的濾鏡、插件和設計工具出現的時候，設計都會向著不同的方向演化。但是，每一個精心制作的LOGO，包括動態LOGO 你都很難把功勞歸結于某一個工具或者方法，它始終是多種方法、工具和流程共同作用的結果，很難把不同的因素徹底地區分開。嘗試新的事物從來都不是壞事，但是我仍然寄希望于獨特的技術和方法，希望在設計里留下自己的痕跡。
我需要再一次重申的是，潮流并非是趨勢所造就的。與時尚領域不同的是，設計趨勢不會隨著文化變遷而突然爆火，相反，它在設計維度上，一直是向著兩個方向延伸，觸摸過去也面向未來。更準確的來說，是我們一直從過去的天才構想中汲取經驗，同時還在不斷開辟走向未來的路。
毫無疑問，今年流行的主題中出現了很多時下流行的元素和主題，包括無人機、蘑菇、刺猬、鵜鶘、蛇、華夫餅、針、燈泡、三眼虎和蒸汽波。雖然這些流行元素只是暫時的，但許多作品仍然制作精美。盡管這種流行元素的風潮最終會落幕，我還是要向它們致敬。
我仍然要感謝 LogoLounge 社區的2萬多名來自世界各地的設計師，他們為這份報告提供了大量素材。在本報告發布時，我們的網站擁有超過30萬個的logo設計師，我們可以與會員一起繼續觀察他們的職業發展趨勢。能夠與他們并肩工作，支持我們熱愛的這項事業，是一種榮幸。
老實說，要求一個老練的LOGO 設計師在 LOGO 當中加入流行的陰影效果，這仿佛是對設計師靈活的創造力進行質疑。今年我們的團隊精心設計了一種新的方式來為他們的作品加入陰影——因為陰影效果本來就不止一種，而還需要兼顧到 LOGO 本身的可用性。我們避開短暫流行的漸變色，用一連串同心的點和線來呈現光影動態，以這種新的方式，比傳統陰影更具視覺張力，更重要的是，它可以更自然地輸出純矢量的單色 LOGO 。
在過去的幾年里，我們看到圓點和線混合在一起，展示了不同元素的融合。通常，這的設計方案會以同心圓為中心，其他元素彼此平行，但不會完全合并到一起。通過將這些元素彼此融合到一起，讓它們和主體元素融合、交匯，在負空間的幫助下，設計師以這種方式讓消費者在頭腦中自覺將圖像填充完整。比如咖啡杯中的幾個點，以及用點狀表示的兔子尾巴。
有人會因為盤子里的食物混在一起而崩潰，也有人對此毫不介意。所以，有的設計師將元素之間的各種元素之間的界限給先打破了，通過重疊來創造層次感，互相堆疊的元素會呈現出一種模糊的效果。而其中大多數 Logo 都呈現出了一種引人入勝的信息，巧妙地吸引了人們的關注。當然，也許大多數人會選擇創建一個對比明顯、信息清晰的LOGO。
這種堆疊式的LOGO設計，使用兩個圖層足矣，三個圖層也勉強可以駕馭，但四個圖層就太過了。如果背景無法辨認，發揮作用的就只有最頂層的視覺元素。上圖所示的這些logo融合了類似于徽章和插畫的排版，正如這些例子所示，這些源自復古的設計能夠煥發出全新的力量。
陰影作為logo設計中的一個元素，在很多方面都是至關重要的。我用了一個完整章節來討論陰影的重要性。陰影暗示著光的方向，更確切地說，它可以顯示維度和空間關系。一條垂直線和一條水平線，再加上一點陰影，就可以確定誰在平面上方了。畫一匹色調均勻的馬，那么馬的兩條后腿就應該處理得暗一點。
有時候，我們作為設計師會受限于自己的技法，這是很正常的。在這些標志當中，包含著一個非常微妙的小陰影，雖然在 Trustpilot star 這個案例中，看起來確實做了比較清晰的分離處理，但我仍然想知道，如果按比例縮小，這種對比是否足夠明顯發揮作用。我的建議是，如果需要效果，就要盡量使得效果可以明顯地呈現，而不是要佩戴老花鏡才能看得清楚。但是毋庸置疑，有很多設計師是經過審慎考慮之后，才選擇了這樣的方案。
熱情飽滿的新生代設計師正在重塑潮流。在數字時代之前，想要在插畫中加入條紋、圓點、中間色調、木紋或其他異國情調的半調效果，首先需要去當地的藝術用品商店逛逛。如今如果你想要實現半調效果，你只需花費很少的錢就可以將其應用到你的設計當中。復古風的設計書籍中充斥著各種各樣的標志，展示著一些非常漂亮的半調式的漸變效果，這會讓設計師們對這種相對古老卻陌生的技術感到好奇。
這一趨勢是非常典型的70年代復古，不僅在風格上，而且在色調上也有體現。這些帶來半調效果的斜條紋線所創造的效果接近于40%的黑色。這樣的 LOGO 設計能夠讓用戶一秒回到以往那個美好的時代，不那么機器制造的感覺。但是它仍然存在缺陷，就是當它縮小的時候，斜條紋會模糊，最終會呈現出一片灰色的效果。
在半調和高亮式的設計技法之間，波點元素還有一席之地。這些超大的圓點其實也算得上是半調的一種形態，它們實際上算是圖標中的一個組成元素，而不僅僅是背景。從這些LOGO的設計案例當中，我們可以看到，這些圓點近似于編織的籃子或桃子的紅暈，圖案并不僅僅是用來表達色調的，它還暗含光影和紋理。
使用更大膽圖案元素，已經是一個公認有效設計策略，打破緊張的平面色調和布局，并創造視覺吸引力，讓元素更醒目。作為一種從在漸變和失真之間尋求平衡感的設計，波點使得設計師可以以有限的顏色，簡單而有趣的矢量圓點來吸引消費者。
人們很容易認為，在吸引人們注意的領域里沒有什么新技巧。猿類拍打胸部，孔雀展開羽毛，人類則在社交媒體上發帖。還有一小部分身份設計師會選擇高亮效果來修飾他們的設計——至少這是今年最引人注目的趨勢之一。
我們通常認為黑白配色的 logo 是在添加高光之前展示給客戶的。當下流行的高亮色調有淡紫色，日光粉，和冰藍色。拋開所有的視覺趣味性不談，設計師們認識到，正是色彩的火花讓這些logo擺脫了潛在的平庸性。
過去兩年之間，設計主題已然延續到簡化設計，以及 Logo的純粹化。這種對前人作品結構的致敬，同樣體現著設計師的創造性，因為他們想出的解決方案是基于重新排列幾何元素而來的。每當你聽到有人表示相信一切都是以前做過的，只要提醒他們，作家和音樂家一直在重新排列了一些筆記或字母，而且新的音樂和書籍，比logo 要多的多，但是靈感之泉卻從未干涸。這大概也是以四分之一圓微代表的幾何元素，開始大規模地出現。
今年，四等分的圓圈元素——或者說扇形，隨處可見。大多數情況下，設計師會完全基于這個扇形來作為唯一的模塊，但偶爾也會讓它們與圓、半圓、正方形、三角形和其他幾何形狀混合在一起。即使在表達復雜的信息時，形式的純粹性可以恰當地與之進行平衡。如果logo看起來很冗雜，那么放入元素的數量應當有所限制。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
明修棧道C和暗渡陳倉B1. 初識B端產品和C端產品
C端 Consumer，表示為消費者、個人用戶或終端用戶設計，直接面向普通用戶提供服務來幫助他們實現個人需求。B端 Business，它面對商業和企業，是為幫助企業集團等實現商業目的而設計的軟件、工具或者平臺。
在我們日常生活中，在手機上使用的大多是 C 端產品，單一的 C 端產品通常是為了實現單一的需求。比如看網紅的抖音、聽音樂的酷狗、買車票的12306、社交的微信等，這些產品有自己的核心功能，其他的功能則是附加的，倘若沒有這些附加功能，雖然用戶體驗感會降低，但并不會影響產品的核心功能。
而面向 B 端的產品，我個人稱之為「暗渡陳倉」，當個人用戶為實現個人需求產生了一系列動作，往往伴隨著該需求的另一端也會反饋一系列動作，即 C 端產品的后臺產品線（BtoC），比如淘寶賣家平臺、餓了么商家版等。除此之外，還有面向商家、企業、業務部門提供的企業級服務產品，以及面對企業或者個人提供的平臺級工具產品等。
雖說我們日常使用的更多是 C 端產品，但是 B 端產品對我們的影響也是時時刻刻存在著。C 端產品在明，逐漸改變著現代人的生活方式，B 端產品在暗，間接服務于用戶，讓一切流程化秩序化，并且具有多個主要功能點。
2. B端和C端產品的區別
在我看來，C 端產品以消費互聯網為主，B 端產品以產業互聯網為主，C 端更感性，而B 端更理性。
從使用者的角度來說：
從開發的角度來說：
3. 后臺產品常見分類
后臺產品按其作用可大致分為兩類，一是支撐前臺產品，二是管理各種資源。我認為后臺產品應當是囊括在 B 端產品的范圍之內的，常見的類型包括：
1. 初識后臺產品設計
說起后臺產品，很容易想到復雜、龐大、邏輯縝密，而作為設計師，則苦于競品短缺、架構復雜，設計的前期工作比設計本身要復雜得多等問題。
后臺產品不同于普通用戶所使用的 APP，它在用戶初次使用和短暫時間內的認知成本是較高的。當用戶用慣了一個音樂類的 app，再給他幾個其他的音樂 APP，用戶是可以迅速上手并且輕易解決自己的需求的。而后臺產品則不然。
對于后臺產品來說，它并不是隨隨便便就可以下載使用的，即便你在使用的過程中，也因角色不同而受到權限限制，一般來講很難像超級管理員一樣接觸到整體功能；其次，門檻之高，后臺產品的使用者一般都是在該行業沉淀了很久，所以要對后臺產品進行設計就需要同樣了解該行業，甚至更能洞察該行業，業務本身的復雜性質決定了后臺產品架構也會比較龐大；然后，無論是工廠商家的進銷存管理，還是政府醫院的工作流和業務流，乃至企業內部的產品，除了不同行業都有門檻外，對信息和產品也有「保密協議」的使命感，所謂「隔行如隔山」，在后臺產品更是如此；最后，后臺產品設計往往沒有固定的功能架構和商業模式，對于產品經理的邏輯思維能力要求更高，設計師不僅僅是做界面、優化流程，也要主動和產品經理溝通交流，并對產品進行思考和探索。
2. 后臺UI設計工作流程
后臺 UI 設計的工作，大體分為三個部分：需求分析、設計執行、數據分析。
在需求分析階段，要對產品本身和行業本身有一些基本的認知。要了解產品的基本情況，比如產品目標、用戶人群、產品定位、需求分析、功能模塊、主要競品和產品特色。做這個產品是為了解決什么問題？想實現什么目標？使用這個系統的用戶有哪些？不同角色的用戶有哪些具體的權限？是否需要對每一個用戶的行為都生成操作日志？產品有哪些主要的功能模塊？產品的業務流程是怎樣的？有哪些同類型的產品？和他們相比我們的產品有什么特色和特點？成功地做出大而全的后臺產品，是整個設計團隊和開發團隊能力的體現，而對很多小團隊來說，只能做一些大團隊不愿去做的產品，或另辟蹊徑在某些方面做專做精。
在設計執行階段，參照 PM 給出的功能清單做原型和流程的梳理，需要關注的有當前版本規劃、功能模塊、功能類型、功能描述、任務優先級、完成時間等，交互原型則伴隨著功能描述、規則判定條件、觸發條件等內容。原型設計完成，開始做 UI 視覺方面的設計，而這時后端同步構思需求的實現方案。UI 設計師向前端了解實現框架，方便交接和溝通。當界面實現，UI 設計師應該是最早進行測試的，力求視覺設計和代碼實現無誤差。在完成設計執行后，從信息層級、文字、圖標、圖片等方面進行設計走查，進行多次設計驗證與測試。
數據分析是產品優化迭代的重要依據。進行多番測試和評審后交付客戶（或內部）使用，根據產生的具體問題進行不斷迭代，且觀察產品能否通過準確的數據反映問題、體現能力，應虛心接納使用者的使用建議并嚴謹思考其合理性，用戶的使用和反饋是優化產品的重要途徑。只有達到了管理和運營的指標，后臺產品才是真正產生了價值。
3. 制定設計規范的作用
為后臺產品制定設計規范有哪些作用和好處呢？簡單來說就是對產品好、對自己好、對團隊好、對客戶好。
以下數值為參考，請結合特定產品靈活運用。
統一尺寸
據統計，目前 PC 端用戶屏幕分辨率占比排名前三的是 1920*1080、1366*768、1440*900，以 1440 來設計的話，向上適配或者向下適配誤差會比較小。
適配方案：面向多個客戶，后臺產品設計功能型頁面的尺寸統一為 1440*900，按照柵格系統原則向上或向下適配。展示型頁面以 1440*900 為主，同時設計出極端情況（寬度為 1280 以及寬度為 1920）的效果圖，力求實現前端實現效果和高保真設計圖誤差最小。面向公司內部的后臺系統，由于各個職工電腦屏幕是統一采購、統一尺寸，所以開發適配的分辨率可以統一尺寸進行設計，這個尺寸根據公司內部采購屏幕的尺寸和分辨率選擇即可（提前和前端溝通好）。
頁面框架
頁面框架主要分為左右欄布局和上下欄布局，還有其他的布局。左右欄布局包括頂部欄、左側菜單欄、主體內容三大區域，其中頂部菜單欄、左側菜單欄為固定結構，右側主體內容根據分辨率進行動態縮放；上下欄布局包括頂部菜單欄和主體內容兩大區域，其中頂部菜單欄為固定結構，主體內容進行動態縮放且需定義主體內容左右兩邊空白區域最小值；左右欄布局時，左側菜單可收縮展開，收縮狀態下固定寬度。
柵格布局
柵格系統的使用是為了解決自適應和響應式問題，從而更好地進行產品設計和產品開發。響應式柵格采用 24 列柵格系統實現，以滿足 2，3，4，5，6 分比布局等多種情況。固定寬度 Column，將間隔 Gutter 進行動態縮放。
需要柵格化處理的內容的總寬度=23列（1列=1寬度Column+1間隔Gutter）+1寬度Column=24寬度Column+23間隔Gutter。
谷歌規定模塊和結構之間要以 8px 為基準，布局間相對間距可采用 8px 以及 8 的倍數，但一些小組件（按鈕、間隔、輸入框）可以以 4 為基準。柵格布局是為了輔助設計，靈活運用，不要被它所局限。
尺寸設定
一般在整體區域左上角放置產品 LOGO 及產品名稱，大部分系統頂部欄高度 48+8n，側邊欄寬度 200+8n。我常用的是頂部欄高度 56px，側邊欄寬度 200px，側邊欄收縮狀態寬度 56px，右側的側浮窗寬度 400px。
相對間隔
定義主體內容的上下左右邊距，定義主體區域內各模塊的邊距及安全寬度，超出內容區域的部分采用區域內滾動或整屏滾動，視情況固定導航欄。
顏色分為品牌色、輔助色、中性色。根據不同產品的不同需求，可能也會將統計圖、標簽等進行統一標準色設定。
品牌色即產品主色，產品主色的設定直接影響產品氣質和直觀感受，也是產品直接對外的形象。品牌色要根據產品特性、用戶使用場景、產品定位等進行選取，盡量做好色彩的延伸性，可支持換膚。品牌色的應用場景包括操作狀態、按鈕色、可操作圖標等。
輔助色用于提示其他場景，比如成功、失敗、警告、無效等。
中性色常用于文本、背景、邊框、分割線等，需要考慮深色背景和淺色背景的差異，可以選擇同一色相控制透明度變化，用來表現不同的層級結構。
其他色如統計圖、數據可視化、多個標簽的不同配色方案根據項目情況單獨設定。
后臺系統常用的字體：windows 系統，中文 Microsoft YaHei，英文 Arial；Mac 字體，中文 PingFang SC，英文 Helvetica；除此之外可以選擇的字體還有 segoe UI、思源黑體、Hiragino Sans GB等。
后臺系統中常用字體大小為 12px、13px、14px、16px、18px、20px、24px、30px。
行高設定，根據文字大小及使用場景設置行高，一般行高=文字大小+6px/8px。
圖標是 UI 設計中重要組成部分，一般分為功能圖標和應用圖標，以圖形的方式傳達概念，可以降低理解成本，使得界面更加協調美觀。在后臺產品中，圖標的功能則更偏向輔助性，輔助用戶對功能的認識。
除了某些常用的圖標，有一些專業性的操作和詞匯則需要設計師進行繪制，現在比較方便的方法是在 iconfont 提供的圖標模板上用 AI 繪制，畫板 1024*1024，提供圓形、正方形、矩形形狀。圖標尺寸按照 8 的倍數進行延展，繪制完成后生成 svg 格式文件，提交到阿里巴巴矢量圖標庫的項目組里，方便前端調用，調整大小和顏色更為方便，且能夠優化系統內存和性能。
5. 按鈕
按鈕是后臺產品進行交互設計是重要元素，提供給用戶進行點擊操作，是視覺上最引人注目的控件，具有一定的視覺受范性。常用按鈕可分為填充按鈕、線性按鈕、文字按鈕。
按鈕的交互狀態包括默認、懸停、點擊和不可用。
按鈕根據需求分為不同尺寸，大中小三個級別用在不同的場景，一般按照 8 的倍數設定。如高度分別設定為 24、32、40px。
規范整理時要規定不同類型按鈕的寬高、圓角及文字大小，同時還要將按鈕的不同狀態展現出來。
填充按鈕之間間距最小為 10px。
導航的類型有很多種，常用的比如頂欄菜單、側欄菜單、折疊菜單、下拉菜單、面包屑、分頁、步驟條、時間軸、tab標簽頁、膠囊菜單、徽標數等。
各類導航中的字體大小可進行統一設定。
頂欄菜單多為一級菜單，點擊切換，或作為下拉菜單的父級，將子級菜單合理分類。
側欄菜單為垂直導航菜單，可以內嵌子菜單。
下拉菜單的觸發方式一般有鼠標懸停和鼠標點擊兩種。
步驟條引導用戶按照流程來完成任務，一般步驟不得少于兩步。
分頁的高度設定為 24px、30px、32px，根據應用場景適當增減內容，比如設定每頁展示數據的條數、跳轉至指定頁等。
面包屑用于說明層級結構，使用戶明確當前所在位置，并且可以回到任一上級頁面。
徽標數用來通知用戶當前有未讀消息，一般出現在圖標的右上角或者跟在文字后面。
表單多由一條或多條列表項組成，單一列表項的類型有字段輸入框、條件選擇器。
字段輸入框的標題和輸入框分布方式包括左右、上下、無標題。左右分布是常見的對齊方式，比較適合 PC 端的使用；上下分布增加了表單的整體高度，視情況選擇使用；無標題經常應用在登錄注冊，雖然減少了面積，但是增加了理解難度。
輸入框的交互狀態包括默認、輸入結果、提示錯誤、禁用、獲取焦點。
輸入框的尺寸可按照8的倍數進行設定，比如 24px、32px，也可根據系統實際情況進行設定，我常用的輸入框高度為 30px，寬度視情況而定，無圓角。上下布局的多個輸入框上下間距為 20px，有錯誤提示時候豎向增加 10px 或橫向顯示在輸入框右側（預留出位置）。
表單中標題文字左對齊，輸入框左對齊，標題文字距離輸入框20px（多個長度不同的輸入框算最長的）；標題文字右對齊，輸入框左對齊，也是常用的方式。輸入框內正文字體 14px，文字和左右兩邊邊框的邊距 10px。
選擇器包括單選、多選、時間選擇、開關切換、下拉選擇、滑塊選擇、旋鈕等。單選框多為圓形，復選框多為方形。
搜索框和選擇框的高度為 30px 或按照 8 的倍數自行設定，通常和輸入框保持一致。搜索框距離右側按鈕 4px，內部文字 14px。
單選多選框尺寸 16*16px，多個選項橫向排列間距 16px，縱向排列間距 8px。
開關按鈕外框 40*20px，內部圓形 16*16px。
表格在后臺產品 UI 設計中占比非常大，用來展示數據、統一管理、作為詳情入口，是最清晰、的形式之一。在設計規范中需設定表頭高度、表格行高、表格列寬范圍，同時也包括表格中的按鈕樣式、標簽樣式。
表格主要分為五大區域：選擇搜索區、操作區、表頭、正文、底欄。選擇搜索區放置篩選框和搜索框，為用戶提供按需搜索，可以大大提高用戶效率；操作區指各種對表格內容進行增刪改查、批量處理、配置列的動作；表頭展示列標題，一般具有排序功能；正文主要展示各種各樣的數據，要注意行高、對齊、分割、信息層級等，要考慮是否提供行內操作；底欄顯示分頁、總數統計等。
表格信息一般主要功能為增刪改查，查看和編輯是最基本的功能，表格信息支持篩選、搜索、排序、分頁。對可批量操作的表格數據在第一列增加多選框。
行高
表格行高可設置為表格內字體高度的 2~3 倍，主表格會間隔顯示不同顏色，用于區分不同行數據、加強視覺流引導，展開單行的內置表格可采用純色，選中行應有視覺上的反饋。表頭要和表格內容有視覺上的區分。表格行高可采用 36、40、48、60 等。
行數
表格行數太多加載速度會降低，延長用戶等待時間；行數太少會導致用戶不斷翻頁，降低使用效率。比較合適的默認表格行數是 20 或 50，用戶可以根據自己需求選擇默認的行數。設定行數之后，如果每頁行數多于每屏行數，可在表格內引入滾動條，這時可以固定表頭滾動內容。
列寬
列寬根據內容字段長短需要有不同且合理的默認值，使得表格字段有良好的展示效果。列內容的長度固定時，列寬應大于固定寬度（比如時間、MD5、SHA1）；列內容不固定時，能預判最大寬度的按照最大寬度設定列寬（比如IP地址、MAC地址、姓名），不能預判最大寬度的設定列寬按照常用寬度，多于內容省略以「…」展示，鼠標懸停出現完整內容（比如詳情、描述）。
列數
表格列不應過多，列數比較多的情況下應該合理進行合并、隱藏、刪除或進行優先級處理。常用的方法有引入配置列，用戶可自定義展示必需列以外的其他列；只展示重要信息，下拉展開列查看完整信息；在表格中引入橫向滾動條，根據實際情況選擇是否要始終固定基本信息列（如第一列是文件名）和操作列（最后一列的操作）。
對齊方式
表格內的文本應按照文本類型不同進行統一規范，如金額類數值保留相同位數小數，SHA1 雖然是一串數字但是其實那并不是數據而是一串編碼，所以可以像文本一樣左對齊。根據文本內容不同，對齊方式也應靈活調整，可采用文本左對齊、數據右對齊、金額小數點對齊的方式。數據前面有標簽的，將標簽前置對齊。類似 IP 地址、MD5、SHA1、域名這樣的信息，也可以根據產品需要在文本前面增加「復制」圖標，方便用戶調用。
詳情入口
表格內部數據的詳情入口，將能點擊下鉆查看詳情的內容以不同顏色表示，同時在表格行最后一列操作按鈕部分放置一個查看按鈕。
包括彈框、側滑框、骨架屏、全局提示、警告提示、消息提醒、加載狀態等。分為模態框和非模態框，區別是是否會打斷用戶工作流。
彈框又稱對話框，是疊加在應用主窗口上的彈出式窗口，以對話的方式使用戶參與進來。
彈框
彈框出現時，主題內容增加一層遮罩 #000，透明度 50%，避免使用雙層彈框，可同時采用有關閉圖標的彈框和無關閉圖標的彈框，引導用戶對內容進行正確操作。如果設定系統內所有彈框均可以點擊彈框外區域關閉， 則需要為用戶新增或編輯內容的彈框彈出二級確認的彈框，或者再次進行交互梳理。
側滑框
側滑框又稱抽屜，出現在右側，固定寬度 400px，高度覆蓋在主題內容之上，點擊側滑框以外的區域則收起側滑框。
骨架屏
為某些特定數據提供數據加載等待時的占位圖形組合。
全局提示
建議停留時間 3s，可根據文字字數調整停留時間，文字內容限制在 30 以內。
警告提示
用不同顏色和樣式展示需要關注的信息。
通知提醒
消息通知和警告信息用通知提醒框，單個消息從頁面右側以抽屜的方式劃出，用戶可手動關閉，或停留 3s 后自動關閉。
繪制不同類型的情感化插畫表示缺省狀態，如404、500、暫時沒有數據、沒有新消息等。
頁面需要一個默認的底色，錯誤文字使用 14px，與情感化插畫間距 20px，與按鈕間距 30px。
數據可視化部分可能是后臺產品中對視覺設計要求較高的部分，使用情境為各類統計圖、大屏展示頁面等。
功能型頁面的數據可視化可以引入圖形化設計組件，Echarts、G2、d3等；展示型頁面的數據可視化則可以做得更有趣，比如立體的統計圖、粒子地球效果、靈活有趣的網絡拓撲圖等。
考慮到數據可視化可能會需要深色淺色不同的背景，在數據可視化統計圖的色彩搭配上要注意顏色的拓展性。
1. 設計前端一家親
2. 書籍推薦
3. 文章和作品推薦
不管是做 C 端產品還是 B 端產品，都是為了實現用戶的需求、幫用戶解決問題。
剛接觸后臺產品的時候，最希望能把產品做的炫酷、美觀，工作中慢慢地發現項目的背后思考更為重要，產出的設計成果也應該有理有據、支撐整個設計體系。網上供大家使用和學習的資源非常多，對一些公司來說、專門去制定一套自己的后臺設計規范不免顯得費時費力，合理引入 antdesign 和 element 等開源的設計組件，會使得設計師以及前端事半功倍，有助于設計師把更多的精力投入到沉淀行業知識、研究產品架構、梳理交互方式和創新視覺表現上。
在后臺產品的設計過程中，更應該把寶貴的時間用在更值得關注的事物上，讓設計師能夠輔助業務挖掘，從趨于相同的表象中找到產品獨有的閃光點，從而切實解決問題和實現價值。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
虎牙直播是以游戲直播為主的彈幕式互動直播平臺，累計注冊用戶2億，提供熱門游戲直播、電競賽事直播與游戲賽事直播，手游直播等。
最近虎牙在上市一周年之際，發布了全新的公司級LOGO，也就是為虎牙母公司設計的全新企業品牌形象系統。
新logo的造型結合大寫英文字母“H”和小寫英文“hy”，將其演化為平行空間的兩個45度對稱且平行的立面圖像。
文字logo上由“虎牙”和拼音“huya”兩部分組成，中文“虎”字也進行了筆畫的調整，將虎”與“h”筆畫末端進行了切斜收尾的處理，從而來呼應新logo的平行表現形式。
不同形式組合的新logo效果
在新logo的顏色方面，選用了比較青春具有活力，且明亮的“陽光黃”與“星云紫”。
圖形部分的延展也極具靈活性，靈活的視覺變化使品牌更具多樣性，也同時表現虎牙在數字時代的不同場景中，所呈現的多元化和創新。
圖形延展效果
再來看看，虎牙新logo應用在各種衍生產品的效果。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
正確認識卡片式設計，什么是卡片、總結卡片優勢、卡片正確設計知識通過設兩個案例進行講解，卡片在運用時的技法，望能幫助大家。
今天順叔和大家一起聊一聊卡片式設計，無論是WEB還是APP卡片式設計運用的比較多，很多UI設計師比較偏愛這樣的表現，卡片式設計會給人一種視覺上的享受，也能對于界面具有層次感。但往往在卡片設計中有一些技法還是需要了解，不能因為卡片式設計而卡片式設計，要能更好的應用到界面場景中。希望在這次分享中一些知識點能幫助到大家，之后的幾篇系列文章中，順叔會從界面中比較趨勢的設計技法進行分析，希望能幫助到一些設計的小伙伴。
引言
卡片式設計這幾年比較流行，同樣這樣的設計表達也是個趨勢，應用在APP PC界面中至今還流行著，從事UI設計的都會知道卡片式設計，具有把內容整合模塊化，從視覺，個性化體驗上進行呈現，是設計師在設計時常用的一種表現，同樣也具有獨特的創新概念。
在一些項目中，一些客戶會說這個設計的APP界面有點太白，沒有層次感怎么辦，那這時你應該和客戶說在APP設計中運用了現在比較流行的一個表現手法，卡片式設計，可以解決在畫面中有個性化、變化、層次感的設計。那客戶又問什么是卡片式設計呢？
一、什么是卡片
無處不在的卡片設計具有個性的美感和很好的易用性，是以文字標題，小標題，圖形或圖片組成的模塊化，以塊狀形式規整的整合內容，讓內容更規整化，視覺上更個性化，也是操作上快捷的內容信息入口。更直觀的表達內容信息和快捷跳轉操作。成為當今在設計中一個比較流行趨勢，而卡片在設計中也占用一定的優勢，讓整體更加的有層次感，在運用起來也比較方便，從視覺、體驗、交互都具有不錯的優點
設計效果圖展示
二、卡片設計優勢
1.趨勢
無論是大平臺還是小平臺的產品都會運用這樣的卡片式，跟風式設計趨勢，也讓卡片式設計成為了一個現在常用的優勢，不過卡片式設計的確有很好的效果
2. 層次感
具有一定的層次感，能在頁面版式中起到設計上的不同，個性化變化，頁面層次感區分強烈，能更好的體現提煉出內容
3. 規整化
卡片式設計以圖片、圖標 、LOGO、標題、整合到一起以塊狀的形式在界面中展示，更規整的排版呈現。雖然內容多會導致頁面亂，一個模塊包含內容之后就會規整不少，也給頁面設計上帶來了更好的視覺
4. 視覺體驗
卡片式給整個頁面會增加視覺上的體驗，特別那種大圖片卡片式更具有視覺上的沖擊力，背景襯托出前景卡片式設計。同樣對卡片式也感覺到舒適感。卡片式設計還是需要根據整個布局、產品需求 、功能進行設計。以達到最好的用戶體驗、視覺體驗。
不要為了卡片設計而卡片設計。
5. 易用性
卡片式設計在易用性和靈活性上比較高，在響應式設計中同樣應用的也比較多一些。能更好的有序排列。
6.簡約設計
簡約設計會更顯得品質，不需要過多的進行裝飾，哪怕就是一個白色的色塊，上面點綴有色彩的圖標和標題副標的變化，也會覺得顯得高大上，就算是一個帶有顏色的色塊卡片，也無須過多的設計內容上的標題 、圖標、按鈕就足以支撐起卡片
7. 交互效果
在卡片式的設計中會有一些動效交互，比如整體卡片放大、縮小 、左滑、右滑，可以整模塊化滑動縮放。整體效果增加了不錯的視覺交互體驗。
三、卡片正確設計知識
一般在界面設計中卡片的存在的意義和表現手法都是什么樣的呢，下面為大家舉例了幾種常用的正確的設計表達姿勢。希望小伙伴在設計的同時有所靈感和參考，把一些表現手法加入到自己的設計中，適合才最重要。卡片式設計還是要根據整個風格和整個布局而進行展示，在做進一步的對比和布局中以最好的效果為最終展示方式，總結分析幾個常見代表例子，如有不全請討論補充，下面就是一些例子
1.卡片式形式一
以色塊為主體并用現在比較流行的漸變色組成，其中四邊為圓角，同樣色塊下邊陰影襯托出主題，這個是在卡片中設計比較常見的運用手法，卡片的長高在設計中也是根據結構，內容功能而進行設定。正方形，長方形都是一個表現得手法，在色塊上面標題文字，圖標，圖形是整個卡片的布局的形式，無非就是左右布局和上下布局
應用場景：卡包、天氣、類別、入口、優惠劵，卡劵
此圖片來自于網絡
2. 卡片式形式二
這種形式共同點都是在頭部C位出現的卡片式設計，其中承載著標題，副標題，以及圖文版式，不難發現，如果圖片有顏色，那么下面是白色底，這樣在白底上面色塊的出現還是比較簡約凸顯卡片，如果背景有顏色，卡片也有顏色那么卡片的凸顯程度就不會那么強，圖二很多在會員卡設計中常用的比較多，也比較簡約，另外兩個共同特點背景有顏色，一般底部背景顏色就是整個界面的主色調，背景有色塊，上面就用白色卡片，卡片上方標題、文字、圖片呈現。只不過排版的方式有所不同而已，在很多APP設計中，這樣的表達也很多，通過主色調可以很融合的把上面的狀態欄，導航欄融為一體視覺上統一性，底部背景顏色延續下來，上面凸顯白色卡片，這樣更具有視覺感和層次感。白色的卡片不需要過多的修飾，更能體現的上面的文字和圖片。
應用場景：會員卡，滑動卡片，圖文標題，入口
此圖片來自于網絡
3. 卡片式形式三
這種形式上圖下文字，或者是上標題，下圖片的形式，這種形式特別在圖片素材的選擇上尤為重要，有視覺效果好的圖片通過剪切，處理，合成，攝影，插畫等等方式，出現的圖片質量上好的話可以帶動整個設計的逼格，通過有效的圖片傳達，文字傳達，讓用戶更清晰的了解。這樣的形似一般在入口或者列表的形式出現的比較多，同樣也能體現出整體化和視覺化
應用場景：滑動卡片，圖文標題，入口，列表
此圖片來自于網絡
4. 卡片式形式四
大圖卡片式，一般以攝影圖片，插畫形式，文字壓與圖片之上，這樣的效果更具有沖擊力，也能顯得出比較潮流。體驗也很不錯，放大視覺，展示內容，圖片相結合，讓瀏覽者更愿意多看一會。表達的圖片與文字內容相符，做到圖文交融的程度。一般這樣對于圖片的選擇上還是比較要求嚴格的。沒有質量的圖效果會降低。
應用場景：列表，說明，入口，天氣
5.卡片式形式五
列表卡片設計，這種形式一般白色的卡片，上面標題，頭像，按鈕，扁平插畫形式體現，更多應用在一級頁面的下方內容，以及二級頁面的列表頁或者集合頁，整體弱化背景以白色為主，給予圓角及陰影承托出層次感同時，體現上面內容部分。每個模塊的單元體具有統一的視覺。
應用場景：列表，集合頁，入口
6. 卡片式形式六
大卡片式設計，表現為一塊特大的卡片式，上面會有標題，按鈕等信息，同樣表現出突出層次感，個性化設計的特質。體現出內容，一般背景有顏色上面卡片為白色，如下面背景為白色，那么卡片的形式也可色塊，在對比上有個反差，才能突出卡片的作用性。
應用場景：提示，說明，優惠劵，劵，入口
以上總結的幾種卡片的形式，在設計中可以根據情況而設計，卡片多樣化，布局多樣化，適合自己產品的才最重要，雖然在界面設計中常用的設計，但不要盲目的為了卡片而卡片套用設計，這樣起不到作用反而效果達不到理想程度。希望幾個卡片形式總結能給大家帶來一些靈感和啟發。
同樣在這些卡片中會有一些基本的共同的特點
共同的特點是
1. 四個角都是圓角
2. 根據潮流漸變色或白卡片
3. 色塊下的陰影，色塊下的陰影更能體現出層次
4. 卡片上面組成部分，標題，副標題，圖形，按鈕，圖片，頭像
5. 字體大小，字體顏色的變化
6. 一般卡片應用在會員，列表，說明，優惠劵，分類，類別，集合頁，歡迎頁等場景常見
三、卡片正確設計知識
為了講解一下，順叔隨便構思一個產品原型，而快速進行了簡單的設計，一個第一版，一個優化版，主要為了講解一下這個卡片設計一些問題，
以下此圖為構思的原型圖
經過分析原型圖之后開始進行設計，首先設計一個版本的，如果這樣卡片布局設計，這樣色彩搭配的情況下，會怎么樣呢，整體設計用了藍紫色為主色調，首先鋪藍紫色的色塊作為背景，然后上面放白色卡片，以至于卡片上詳細的內容，比如數字，圖形能更好的豐富支撐卡片。同樣數據流也是比較重要的C位。也是比較重要的位置。接著根據原型圖下面有兩個卡片，通過扁平化設計，以色塊為主設計一個藍色，一個橙色的卡片，上面并有圖標，頭像，以及標題，兩個顏色的對比，更讓視覺有沖擊力，整體看這個設計并沒有什么，但有個問題在于單個模塊拿出來效果的確都不錯，但組成之后上面的卡片C位讓下面的兩個帶顏色的卡片搶了視覺，當打開這個界面的時候視覺落點在彩色卡片上，那么這個整體設計上就出現了問題，上面的數據，白色卡片其實是比較重要的，而且整個畫面都是卡片毫無設計上的變化，那么只能在這個基礎上在進行優化，其實大家在做設計的同時也這樣，在考慮功能模塊前提下，用戶體驗，也要考慮視覺體驗，那么視覺從哪方面來，色彩、層次、版式等等方面。那么能不能在進行一下優化呢，其實還是有空間在進行優化。（以下圖為第一版）
設計第一版
根據上面的設計在進行優化，同樣保留白色卡片部分元素，在卡片與卡片之間放一些顏色的圖標，這樣更好的給功能上快捷入口，也能給卡片設計增添了變化。使得整個畫面更靈活
雖然白色卡片，但有一些色彩的點綴，也讓白色卡片活躍起來，把顏色的卡片改成白色卡片，從上到下的版式舒服多了，也沒有那么跳。整個風格更簡約，同時功能也更全面。
調整后
從原型圖，在到設計第一版，在到優化調整之后，證明一點，卡片不要因為卡片而套設計，反而會失去效果，考慮功能模塊，用戶體驗，視覺體驗也一定讓整體舒服。一直都說，繪畫中需要有主有次，設計中也一定要有主，有次的進行設計。這樣層級關系才能更清晰。
但這些條件一定是從，體驗、色彩、布局、版式等方面進行對比和研究的。設計不要先著急做設計，前期的進行思考，邏輯清楚了，在進行設計的時候會更加的順暢?？ㄆ皆O計，大家都在應用，希望這個文章能給大家帶來一點點知識點，那就不枉費我在熬夜寫這篇文章。
不為別的，只是一個喜歡分享的肉團子。這篇文章就寫到這里，如果喜歡請給個贊吧。如內容有沒說到的地方，各位可以進行補充，以上兩個圖你稀罕哪個呢？
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
圖標——界面設計最重要的元素之一。
菜心經常寫關于圖標的教程和感悟，可見圖標設計在我日常工作中占了很大比重，所以我始終堅信能夠把圖標做好，也是難得的特長之一！
這里拿幾個月前做的第一版小說模塊圖標為例（目前已經改版為2.0，等正式上線后會再次與大家分享），簡單介紹下我的圖標設計思路，大綱如下：
1.風格設定
2.創意腦爆
3.設計執行
1.風格設定
在開始構思之前，我們首先需要確定圖標的設計風格，風格可以根據整體產品的設計語言推導，需要符合目標人群的喜好以及產品的屬性定位。
雖然我們是小說模塊，但還是附屬于動漫產品體系之下，前期的種子用戶還是產品原有的動漫人群，所以我將風格鎖定在原有動漫的視覺風格之上，大家可以看下當時動漫標簽欄圖標的樣式：
由此小說模塊圖標與上圖保持一致，設定為“描邊與色塊結合”風格。
2.創意腦爆
鎖定風格之后，就要構思創意了，也就是如何在這樣的風格之下去表達你的內容。
這一步很關鍵，如何讓圖標不普通，大部分因素都就體現在內容表達上（因為風格其實也就那么幾種），我的方法是盡量去發散核心關鍵詞，讓圖標的含義標新立異，舉兩個這次圖標腦暴的例子：
第一個，“人氣”圖標的腦暴路徑：
這里選詞有個小技巧，我會遵循兩個原則，“具象”與“二層”。
首先來說具象：其實很好理解，如果詞匯太抽象，你是很難表達的，比如“流行”這個詞，你是很難表達的，而“火”就很具象，很容易表現。
再來說“二層”：指的就是盡量不要選擇核心關鍵詞延展出來的第一層詞匯，因為這些詞是大家都能想到的，并且用爛的，比如人氣直接延展出來的“火”、“獎杯”等等。（但是如果你的圖標沒有文字提示，需要表意特別明確，建議還是使用第一層延伸詞，可以在風格上做些差異化表現）。
所以在上面兩個原則下，我最后設定人氣圖標使用“愛的手勢”，如下圖：
因為看到有些同學把“愛”與“搖滾”的手勢弄混，所以說下它們的區別：
希望大家在使用的時候不要搞錯哦！
第二個，“完結”圖標的腦暴路徑：
也是通過“具象”與“二層”原則，最后使用了商店掛的打烊門牌這一創意來延展：
每個關鍵詞的腦暴都會產生很多詞匯，各不相同，我們需要學會篩選，盡量避開過于抽象或者過于普通的詞匯，避開抽象等于具象，可以方便執行；避開普通等于特別，如果所有的設計都是大家用爛的創意，那作品一定會很平庸，以上就是我在腦暴時使用的方法。
我們需要讓自己產出的每一套設計至少有一個“特別”出現，不然如何體現自己的價值呢？
3.設計執行
這一步就是根據前面得到的靈感圖來進行設計，我們來看下執行對比圖：
對于執行需要注意的基礎細節，之前有寫過《圖標設計五維自檢法》，有興趣的同學可以看一下，除此之外這里再補充一點——如何讓圖標做到有細節！
本次設計總結了三個方法供大家參考：
3.1 設計技法的細節
比如給描邊增加短線風格：
再比如線條增加面形色塊的組合：
3.2 根據事物本身特征增加細節
比如一個木質門牌的細節：
3.3 俏皮的那一筆
比如書架上歪著的一本書：
再比如一根線條的破局：
當然增加細節的方法有太多種，總的目的就是防止圖標過于簡單、簡陋，希望你也可以有自己的一套秘方來進行設計，大家互相學習。
最后再看下圖標整體的效果吧：
附上過程中的一些稿子，哈哈，別嚇到你：
對于執行這一塊，別人再怎么說，你不做大量的練習與思考也是無濟于事，這個道理毋庸贅言了。效果圖如下：
接下來分享的也是這幾個圖標，不過是延伸版，切入的角度會略有不同。
這次改版背景很簡單：首頁整體架構調整的同時，主圖標的設計語言改成了面性，而由于時間緊，小說圖標還沒來得及改，所以這次的設計目標就一個，把第一版圖標改成面性的。
本來我以為，直接由線性改成填充的形式就可以了，分分鐘搞定，但沒想到改過來的效果是這樣的：
于是經過調整又得到這樣的：
為什么還是不好看？
我也不知道?。?span lang="EN-US">
這種情況就去多找參考，分析分析別人的優秀作品，比如下圖谷歌的圖標：
為什么人家的看起來就那么好看，那么精致？
我個人覺得最大原因就是它的透氣感比較好，導致透氣感好的原因在于，它采用了多元素組合的方式，并且使用大量留白與彩色形成對比。
在這樣的分析之下，我對圖標進行了重新構思，直接在腦暴階段就重新思考（因為原有圖標是一個元素，很難再拆分成兩個元素來進行組合）。
為了能做到獨特，我最終選用的圖標含義如下（盡量避開用爛的詞匯）：
書架：兩本書互相依靠
熱門：手捧愛心
免費：冰淇淋甜筒（創意來自甜筒經常會有第二份半價，或者買一 送一的活動）
完結：黑子手捧完結的牌子
最后的執行效果如下：
新版圖標也是利用元素的組合，并且圖標內有大量留白使圖標更加透氣。
除了透氣以外，我還在圖標之中融入了一些“有生命感的內容”，比如手，品牌形象，擬人化的書等等：
使圖標變更加可愛，有情感，充滿一些故事感。
除此之外，對圖標還增加了一點點的小細節作為小彩蛋：
一般我們在做一組東西的時候，都希望能夠有一個主旨貫穿始終，這樣解釋起來更加有說法，有說服力。
比如上面這組小說圖標，設計關鍵詞是溫暖，情感，可愛，在這樣的理念下，我將溫暖轉化為陽光作為視覺語言。
可是陽光怎么落地呢，我當時能想到的就是高光和投影，本次使用的就是充滿光感的長投影：
當然，為了使圖標輕量化，投影不宜過重，起到點睛的作用即可：
除此之外，像前面所說，為了體現可愛的主旨，融入了手，品牌形象等有生命的元素（并且整體圖形都是比較圓潤，避免尖角的出現），這也是貫穿主旨的一條路徑。
方法很多，各不相同，其本質目的還是希望大家做設計的時候要有適當的理念貫穿！
整個設計過程就差不多這些了，其實花在調整細節的時間還是比較多的，隨便一個圖標有了大方向和思路之后，還是需要不斷的修改修改再修改。
顏色的搭配、五官的間距、元素之間的大小關系等等，都需要不斷的調整，而真正考驗我們的也就在這些細節當中。
這里再補充兩個增加可愛度的實用小技巧：
1 五官緊湊
一般情況下，縮小五官的間距，可以一定程度上實表情更加可愛，尤其是嘴鼻和眼睛的間距：
2 腮紅
一般來說，在我的印象中只有可愛的東西才會有腮紅，五大三粗的大老爺們加個腮紅，咦～，不敢想！
所以畫可愛的形象或表情時，可以考慮加個腮紅：
不過我這次由于元素太多，所以沒加，大家可以根絕實際情況自行實踐。
最后：
看萬卷書，行萬里路！不走，書白看。
看萬篇文，練萬個習！不練，文白看。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里B端后臺產品UI設計的工作小結，總結一些常見問題、解決方法以及自己的經驗。
寫在前面
作為一個新時代全能打雜，日常工作包括移動端、PC端的UI設計以及各類平面視覺設計，其中自然少不了令人“禿”然的B端后臺產品設計。
畢業兩年來一直都做著B端產品的UI設計工作，參與過的后臺產品設計面對的主要客戶有公司內部、各大企業以及政府機構。工作和學習的過程中走過不少彎路，也在不同的項目中不斷反思和總結。把自己的一些想法和經驗分享出來，總結自己工作中遇到的問題和解決的方法，記錄自己思考和理解的過程，也希望對即將或正在從事B端后臺產品設計的你有一點點啟發或幫助。
希望在日后的工作和學習中，通過實踐來不斷完善自己對B端后臺產品的理解。
目錄
一、明修棧道C和暗度陳倉B
二、后臺產品設計思路
三、后臺產品設計規范
四、經驗觀點及設計資源
正文
一、明修棧道C和暗度陳倉B
1.1初識B端產品和C端產品
按照C端產品和B端產品的專業術語來解釋的話，C端Consumer，表示為消費者、個人用戶或終端用戶設計，直接面向普通用戶提供服務來幫助他們實現個人需求。B端Business，它面對商業和企業，是為幫助企業集團等實現商業目的而設計的軟件、工具或者平臺。
在我們日常生活中，在手機上使用的大多是C端產品，單一的C端產品通常是為了實現單一的需求，比如看網紅的抖音、聽音樂的酷狗、買車票的12306、社交的微信等，這些產品有自己的核心功能，其他的功能則是附加的，倘若沒有這些附加功能，雖然用戶體驗感會降低，但并不會影響產品的核心功能。
而面向B端的產品，我個人稱之為“暗度陳倉”，當個人用戶為實現個人需求產生了一系列動作，往往伴隨著該需求的另一端也會反饋一系列動作，即C端產品的后臺產品線（BtoC），比如淘寶賣家平臺、餓了么商家版等。除此之外，還有面向商家、企業、業務部門提供的企業級服務產品，以及面對企業或者個人提供的平臺級工具產品等。
雖說我們日常使用的更多是C端產品，但是B端產品對我們的影響也是時時刻刻都存在著的。C端產品在明，逐漸改變著現代人的生活方式，B端產品在暗，間接服務于用戶，讓一切流程化秩序化，并且具有多個主要功能點。
——“ToB還是ToC？這是個問題......”
——“不管ToB還是ToC，最后都還是ToP（people）。”
1.2B端和C端產品的區別
在我看來，C端產品以消費互聯網為主，B端產品以產業互聯網為主，C端更感性，而B端更理性。
從使用者的角度來說——
C端產品關鍵詞包括免費使用、迅速上手、體驗為王、你能讓我做什么；
B端產品的關鍵詞則是付費購買、上手緩慢、效率第一、你能為我做什么。
從開發的角度來說——
C端周期短，B端周期長；
C端用戶多，B端用戶少；
C端邏輯簡單，B端邏輯復雜；
C端競品較多，B端競品較少；
C端主戰場是移動端，B端則是PC端；
C端是用戶體驗驅動，B端是解決問題驅動；
C端產品的使用決策權在用戶手中，而B端產品的使用決策權則在客戶手中（B端客戶不一定是用戶）；
C端產品除了產品的體驗以外，也要讓產品更美觀，讓活動更有趣，讓用戶更舒服，產品經理有很強的同理心，B端產品的實用性大于美觀性，能切實解決問題、配置資源的B端產品才是一個好的B端產品，產品經理要具有更強的邏輯思維能力。
1.3后臺產品常見分類
后臺產品按其作用可大致分為兩類，一是支撐前臺產品，二是管理各種資源。我認為后臺產品應當是囊括在B端產品的范圍之內的，常見的類型包括：
C端產品的后臺產品線——如淘寶商家版，餓了么商家版，對訂單和用戶進行管理，支持C端產品的業務進展；
平臺級工具產品——如微信公眾平臺，對文章和讀者的數據統計和管理；各大互聯網公司的開放平臺，如微博開放平臺等；
企業級服務產品——虛擬主機系統（VMware），云主機管理系統（深信服、xensystem、騰訊云）以及各種云SaaS；
企業的業務處理平臺——對內有考勤、報銷等OA辦公系統，對外有CRM客戶管理系統，ERP資源及供應鏈管理系統。
二、后臺產品設計思路
2.1初識后臺產品設計
說起后臺產品，很容易想到復雜、龐大、邏輯縝密，而作為設計師，苦于競品短缺、架構復雜，設計的前期工作比設計本身要復雜得多。
后臺產品不同于普通用戶所使用的APP，它在用戶初次使用和短暫時間內的認知成本是較高的。當用戶用慣了一個音樂類的app，再給他幾個其他的音樂APP，用戶是可以迅速上手并且輕易解決自己的需求的。而后臺產品則不然。
對于后臺產品來說，首先，所見之少，它并不是隨隨便便就可以下載使用的，即便你在使用的過程中，也因角色不同而受到權限限制，一般來講很難像超級管理員一樣接觸到整體功能；其次，門檻之高，后臺產品的使用者一般都是在該行業沉淀了很久，所以要對后臺產品進行設計就需要同樣了解該行業、甚至更能洞察該行業，業務本身的復雜性質決定了后臺產品架構也會比較龐大；然后，無論是工廠商家的進銷存管理，還是政府醫院的工作流和業務流，乃至企業內部的產品，除了不同行業都有門檻外，對信息和產品也有“保密協議”的使命感，所謂“隔行如隔山”，在后臺產品更是如此；最后，后臺產品設計往往沒有固定的功能架構和商業模式，對于產品經理的邏輯思維能力要求更高，設計師不僅僅是做界面、優化流程，也要主動和產品經理溝通交流，并對產品進行思考和探索。
這大概就是后臺產品相關資源較少、設計難度較大的一些原因。
2.2后臺UI設計工作流程
后臺UI設計的工作，大體分為三個部分：需求分析——設計執行——數據分析。
在需求分析階段，要對產品本身和行業本身有一些基本的認知。要了解產品的基本情況，比如產品目標、用戶人群、產品定位、需求分析、功能模塊、主要競品和產品特色。 做這個產品是為了解決什么問題？想實現什么目標？使用這個系統的用戶有哪些？不同角色的用戶有哪些具體的權限？是否需要對每一個用戶的行為都生成操作日志？產品有哪些主要的功能模塊？產品的業務流程是怎樣的？有哪些同類型的產品？和他們相比我們的產品有什么特色和特點？成功地做出大而全的后臺產品，是整個設計團隊和開發團隊能力的體現，而對很多小團隊來說，只能做一些大團隊不愿去做的產品，或另辟蹊徑在某些方面做專做精。
在設計執行階段，參照PM給出的功能清單做原型和流程的梳理，需要關注的有當前版本規劃、功能模塊、功能類型、功能描述、任務優先級、完成時間等，交互原型則伴隨著功能描述、規則判定條件、觸發條件等內容。原型設計完成，開始做UI視覺方面的設計，而這時后端同步構思需求的實現方案。UI設計師向前端了解實現框架，方便交接和溝通。當界面實現，UI設計師應該是最早進行測試的，力求視覺設計和代碼實現無誤差。在完成設計執行后，從信息層級、文字、圖標、圖片等方面進行設計走查，進行多次設計驗證與測試。
數據分析是產品優化迭代的重要依據。進行多番測試和評審后交付客戶（或內部）使用，根據產生的具體問題進行不斷迭代，且觀察產品能否通過準確的數據反映問題、體現能力，應虛心接納使用者的使用建議并嚴謹思考其合理性，用戶的使用和反饋是優化產品的重要途徑。只有達到了管理和運營的指標，后臺產品才是真正產生了價值。
2.3制定設計規范的作用
為后臺產品制定設計規范有哪些作用和好處呢？簡單來說就是對產品好、對自己好、對團隊好、對客戶好。
對產品——在項目完成第一版較為穩定的版本時，著手制定設計標準，統一公司視覺設計規范及某些特定交互設計規范。同一個項目會有多個設計師的參與，規范化的設計語言，避免因設計控件混亂而影響設計輸出；
對自己——組件化同類元素，提高工作效率，建立公司產品的組件庫，以便不同項目的復用及設計延展；在同一個項目中也能更好的把控該項目的視覺規范，提率；
對團隊——設計規范的制定，規范了設計團隊的輸出，同時方便了與開發團隊的交接和協作。通過設計規范的制定，前端實現也能擁有一套可供復用和擴展的組件庫，助力上下游交接及團隊協作；
對客戶——制定設計規范的同時需要考慮設計延展性，為不同客戶的定制化需求提供更的輸出。同時在進行產品迭代時，設計規范的組件化調整也大大提高了工作效率。
三、后臺產品設計規范
*以下內容僅供參考和交流，圖片內容不代表真實尺寸，請結合特定產品靈活使用。
3.1頁面布局
統一尺寸——據統計，目前PC端用戶屏幕分辨率占比排名前三的是1920*1080、1366*768、1440*900，以1440來設計的話，向上適配或者向下適配誤差會比較小。 適配方案——面向多個客戶，后臺產品設計功能型頁面的尺寸統一為1440*900，按照柵格系統原則向上或向下適配；展示型頁面以1440*900為主，同時設計出極端情況（寬度為1280以及寬度為1920）的效果圖，力求實現前端實現效果和高保真設計圖誤差最小。面向公司內部的后臺系統，由于各個職工電腦屏幕是統一采購、統一尺寸，所以開發適配的分辨率可以統一尺寸進行設計，這個尺寸根據公司內部采購屏幕的尺寸和分辨率選擇即可（提前和前端溝通好）。
頁面框架——頁面框架主要分為左右欄布局和上下欄布局，還有其他的布局。左右欄布局包括頂部欄、左側菜單欄、主體內容三大區域，其中頂部菜單欄、左側菜單欄為固定結構，右側主體內容根據分辨率進行動態縮放；上下欄布局包括頂部菜單欄和主體內容兩大區域，其中頂部菜單欄為固定結構，主體內容進行動態縮放且需定義主體內容左右兩邊空白區域最小值；左右欄布局時，左側菜單可收縮展開，收縮狀態下固定寬度。
柵格布局——柵格系統的使用是為了解決自適應和響應式問題，從而更好地進行產品設計和產品開發。響應式柵格采用24列柵格體系實現，以滿足2，3，4，5，6分比布局等多種情況。固定寬度Column，將間隔Gutter進行動態縮放。需要柵格化處理的內容的總寬度=23列（1列=1寬度Column+1間隔Gutter）+1寬度Column=24寬度Column+23間隔Gutter。谷歌規定模塊和結構之間要以8px為基準，布局間相對間距可采用8px以及8的倍數，但一些小組件(按鈕、間隔、輸入框 )可以以4為基準。柵格布局是為了輔助設計，靈活運用，不要被它所局限。
尺寸設定——一般在整體區域左上角放置產品LOGO及產品名稱，大部分系統頂部欄高度48+8n，側邊欄寬度200+8n。我常用的是頂部欄高度56px，側邊欄寬度200px，側邊欄收縮狀態寬度56px，右側的側浮窗寬度400px。
相對間隔——定義主體內容的上下左右邊距，定義主體區域內各模塊的邊距及安全寬度，超出內容區域的部分采用區域內滾動或整屏滾動，視情況固定導航欄。
3.2標準色
顏色分為品牌色、輔助色、中性色。根據不同產品的不同需求，可能也會將統計圖、標簽等進行統一標準色設定。
品牌色即產品主色，產品主色的設定直接影響產品氣質和直觀感受，也是產品直接對外的形象。品牌色要根據產品特性、用戶使用場景、產品定位等進行選取，盡量做好色彩的延伸性，可支持換膚。品牌色的應用場景包括操作狀態、按鈕色、可操作圖標等。
輔助色用于提示其他場景，比如成功、失敗、警告、無效等。
中性色常用于文本、背景、邊框、分割線等，需要考慮深色背景和淺色背景的差異，可以選擇同一色相控制透明度變化，用來表現不同的層級結構。
其他色如統計圖、數據可視化、多個標簽的不同配色方案根據項目情況單獨設定。
3.3標準字
后臺系統常用的字體：windows系統，中文Microsoft YaHei，英文Arial；Mac字體，中文PingFang SC，英文Helvetica；除此之外可以選擇的字體還有segoe UI、思源黑體、Hiragino Sans GB等。
后臺系統中常用字體大小為12px、13px、14px、16px、18px、20px、24px、30px。
行高設定，根據文字大小及使用場景設置行高，一般行高=文字大小+6px/8px。
3.4圖標
圖標是UI設計中重要組成部分，一般分為功能圖標和應用圖標，以圖形的方式傳達概念，可以降低理解成本，使得界面更加協調美觀。在后臺產品中，圖標的功能則更偏向輔助性，輔助用戶對功能的認識。
除了某些常用的圖標，有一些專業性的操作和詞匯則需要設計師進行繪制，現在比較方便的方法是在iconfont提供的圖標模板上用AI繪制，畫板1024*1024，提供圓形、正方形、矩形形狀(文末提供下載)。圖標尺寸按照8的倍數進行延展，繪制完成后生成svg格式文件，提交到阿里巴巴矢量圖標庫的項目組里，方便前端調用，調整大小和顏色更為方便，且能夠優化系統內存和性能。
分享一個我個人常用的AI使用小習慣，因為ctrl+q、ctrl+w作為退出和關閉我用的不多，而且有時候手抖會在保存時候不小心點成了關閉，所以我無情地把ctrl+q、ctrl+w變成了拓展和拓展外觀的快捷鍵......感受還不錯。
3.5按鈕
按鈕是后臺產品進行交互設計是重要元素，提供給用戶進行點擊操作，是視覺上最引人注目的控件，具有一定的視覺受范性。常用按鈕可分為填充按鈕、線性按鈕、文字按鈕。
按鈕的交互狀態包括默認、懸停、點擊和不可用。
按鈕根據需求分為不同尺寸，大中小三個級別用在不同的場景，一般按照8的倍數設定。如高度分別設定為24、32、40px。
規范整理時要規定不同類型按鈕的寬高、圓角及文字大小，同時還要將按鈕的不同狀態展現出來。
填充按鈕之間間距最小為10px。
3.6導航
導航的類型有很多種，常用的比如頂欄菜單、側欄菜單、折疊菜單、下拉菜單、面包屑、分頁、步驟條、時間軸、tab標簽頁、膠囊菜單、徽標數等。
各類導航中的字體大小可進行統一設定。
頂欄菜單多為一級菜單，點擊切換，或作為下拉菜單的父級，將子級菜單合理分類。
側欄菜單為垂直導航菜單，可以內嵌子菜單。
下拉菜單的觸發方式一般有鼠標懸停和鼠標點擊兩種。
步驟條引導用戶按照流程來完成任務，一般步驟不得少于兩步。
分頁的高度設定為24px、30px、32px，根據應用場景適當增減內容，比如設定每頁展示數據的條數、跳轉至指定頁等。
面包屑用于說明層級結構，使用戶明確當前所在位置，并且可以回到任一上級頁面。
徽標數用來通知用戶當前有未讀消息，一般出現在圖標的右上角或者跟在文字后面。
3.7表單
表單多由一條或多條列表項組成，單一列表項的類型有字段輸入框、條件選擇器。
字段輸入框的標題和輸入框分布方式包括左右、上下、無標題。左右分布是常見的對齊方式，比較適合PC端的使用；上下分布增加了表單的整體高度，視情況選擇使用；無標題經常應用在登錄注冊，雖然減少了面積，但是增加了理解難度。
輸入框的交互狀態包括默認、輸入結果、提示錯誤、禁用、獲取焦點。
輸入框的尺寸可按照8的倍數進行設定，比如24px、32px，也可根據系統實際情況進行設定，我常用的輸入框高度為30px，寬度視情況而定，無圓角。上下布局的多個輸入框上下間距為20px，有錯誤提示時候豎向增加10px或橫向顯示在輸入框右側（預留出位置）。
表單中標題文字左對齊，輸入框左對齊，標題文字距離輸入框20px（多個長度不同的輸入框算最長的）；標題文字右對齊，輸入框左對齊，也是常用的方式。輸入框內正文字體14px，文字和左右兩邊邊框的邊距10px。
選擇器包括單選、多選、時間選擇、開關切換、下拉選擇、滑塊選擇、旋鈕等。單選框多為圓形，復選框多為方形。
搜索框和選擇框的高度為30px或按照8的倍數自行設定，通常和輸入框保持一致。搜索框距離右側按鈕4px，內部文字14px。
單選多選框尺寸16*16px，多個選項橫向排列間距16px，縱向排列間距8px。
開關按鈕外框40*20px，內部圓形16*16px。
3.8表格
表格在后臺產品UI設計中站的比重非常大，用來展示數據、統一管理、作為詳情入口，是最清晰、的形式之一。在設計規范中需設定表頭高度、表格行高、表格列寬范圍，同時也包括表格中的按鈕樣式、標簽樣式。
表格主要分為五大區域：選擇搜索區、操作區、表頭、正文、底欄。選擇搜索區放置篩選框和搜索框，為用戶提供按需搜索，可以大大提高用戶效率；操作區指各種對表格內容進行增刪改查、批量處理、配置列的動作；表頭展示列標題，一般具有排序功能；正文主要展示各種各樣的數據，要注意行高、對齊、分割、信息層級等，要考慮是否提供行內操作；底欄顯示分頁、總數統計等。
表格信息一般主要功能為增刪改查，查看和編輯是最基本的功能，表格信息支持篩選、搜索、排序、分頁。對可批量操作的表格數據在第一列增加多選框。
行高——表格行高可設置為表格內字體高度的2~3倍，主表格會間隔顯示不同顏色，用于區分不同行數據、加強視覺流引導，展開單行的內置表格可采用純色，選中行應有視覺上的反饋。表頭要和表格內容有視覺上的區分。表格行高可采用36、40、48、60等。
行數——表格行數太多加載速度會降低，延長用戶等待時間；行數太少會導致用戶不斷翻頁，降低使用效率。比較合適的默認表格行數是20或50，用戶可以根據自己需求選擇默認的行數。設定行數之后，如果每頁行數多余每屏行數，可在表格內引入滾動條，這時可以固定表頭滾動內容。
列寬——列寬根據內容字段長短需要有不同且合理的默認值，使得表格字段有良好的展示效果。列內容的長度固定時，列寬應大于固定寬度（比如時間、MD5、SHA1）；列內容不固定時，能預判最大寬度的按照最大寬度設定列寬（比如IP地址、MAC地址、姓名），不能預判最大寬度的設定列寬按照常用寬度，多于內容省略以“...”展示，鼠標懸停出現完整內容（比如詳情、描述）。
列數——表格列不應過多，列數比較多的情況下應該合理進行合并、隱藏、刪除或進行優先級處理。常用的方法有引入配置列，用戶可自定義展示必需列以外的其他列；只展示重要信息，下拉展開列查看完整信息；在表格中引入橫向滾動條，根據實際情況選擇是否要始終固定基本信息列（如第一列是文件名）和操作列（最后一列的操作）。
對齊方式——表格內的文本應按照文本類型不同進行統一規范，如金額類數值保留相同位數小數，SHA1雖然是一串數字但是其實那并不是數據而是一串編碼，所以可以像文文本一樣左對齊。根據文本內容不同，對齊方式也應靈活調整，可采用文本左對齊、數據右對齊、金額小數點對齊的方式。數據前面有標簽的，將標簽前置對齊。類似IP地址、MD5、SHA1、域名這樣的信息，也可以根據產品需要在文本前面增加“復制”圖標，方便用戶調用。
詳情入口——表格內部數據的詳情入口，將能點擊下鉆查看詳情的內容以不同顏色表示，同時在表格行最后一列操作按鈕部分放置一個查看按鈕。
3.9反饋
包括彈框、側滑框、骨架屏、全局提示、警告提示、消息提醒、加載狀態等。分為模態框和非模態框，區別是是否會打斷用戶工作流。
彈框又稱對話框，是疊加在應用主窗口上的彈出式窗口，以對話的方式使用戶參與進來。
彈框——彈框出現時，主題內容增加一層遮罩#000，透明度50%，避免使用雙層彈框，可同時采用有關閉圖標的彈框和無關閉圖標的彈框，引導用戶對內容進行正確操作。如果設定系統內所有彈框均可以點擊彈框外區域關閉， 則需要為用戶新增或編輯內容的彈框彈出二級確認的彈框，或者再次進行交互梳理。
側滑框——又稱抽屜，出現在右側，固定寬度400px，高度覆蓋在主題內容之上，點擊側滑框以外的區域則收起側滑框。
骨架屏——為某些特定數據提供數據加載等待時的占位圖形組合。
全局提示——建議停留時間3s，可根據文字字數調整停留時間，文字內容限制在30以內。
警告提示——用不同顏色和樣式展示需要關注的信息。
通知提醒——消息通知和告警信息用通知提醒框，單個消息從頁面右側以抽屜的方式劃出，用戶可手動關閉，或停留3s后自動關閉。
3.10缺省狀態
繪制不同類型的情感畫插畫表示缺省狀態，如404、500、暫時沒有數據、沒有新消息等。
頁面需要一個默認的底色，錯誤文字使用14px，與情感化插畫間距20px，與按鈕間距30px；
3.11數據可視化
數據可視化部分可能是后臺產品中對視覺設計要求較高的部分，使用情境為各類統計圖、大屏展示頁面等。
功能型頁面的數據可視化可以引入圖形化設計組件，Echarts、G2、d3等；展示型頁面的數據可視化則可以做的更有趣，比如立體的統計圖、粒子地球效果、靈活有趣的網絡拓撲圖等。
考慮到數據可視化可能會需要深色淺色不同的背景，在數據可視化統計圖的色彩搭配上要注意顏色的拓展性。
四、經驗觀點及設計資源
4.1設計前端一家親
Ant Design的設計組件，實現框架React、Angular——https://ant.design/docs/spec/layout-cn
Element的設計組件，實現框架Vue 2.0、 Angular——http://element-cn.eleme.io/#/zh-CN/component/checkbox
iView的設計組件，實現框架Vue——https://www.iviewui.com/docs/guide/theme
飛冰的設計組件，實現框架React——https://alibaba.github.io/ice/
Layui的設計組件——https://www.layui.com/demo/grid.html
G2可視化圖形組件——https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html
Echarts可視化圖形組件——https://echarts.baidu.com/
d3.js可視化圖形組件——https://github.com/d3/d3/wiki/Gallery
在線柵格化計算工具——http://grid.guide/#/1000/24/34/8/0
4.2不丑也要多讀書
《B端產品經理必修課》
《交互設計精髓》
《U一點料·Ⅱ》
《簡約至上:交互式設計四策略》
寫在最后
不管是做C端產品還是B端產品，都是為了實現用戶的需求、幫用戶解決問題。
剛接觸后臺產品的UI設計師工作時候，最希望能把產品做的炫酷、美觀，工作中慢慢地發現項目的背后思考更為重要，產出的設計成果也應該有理有據、支撐整個設計體系。網上供大家使用和學習的資源非常多，對一些公司來說、專門去制定一套自己的后臺設計規范不免顯得費時費力，合理引入antdesign和element等開源的設計組件，會使得設計師以及設計師的好朋友前端小哥哥事半功倍，有助于設計師把更多的精力投入到沉淀行業知識、研究產品架構、梳理交互方式和創新視覺表現上。
在后臺產品的設計過程中，更應該把寶貴的時間用在更值得關注的事物上，讓設計師能夠輔助業務挖掘，從趨于相同的表象中找到產品獨有的閃光點，從而切實解決問題和實現價值。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
NodeJs基礎
nodejs的本質：不是一門新的編程語言，nodejs是javascript運行在服務端的運行環境，編程語言還是javascript
global模塊-全局變量
Node.js 中的全局對象是 global, 類似于瀏覽器中的window
常用的global屬性
console: 用于打印日志
setTimeout/clearTimeout: 設置清除延時器
setInterval/clearInterval: 設置清除定時器
__dirname: 當前文件的路徑，不包括文件名
__filename： 獲取當前文件的路徑，包括文件名
//與模塊化相關的，模塊化的時候會用到
require
exports
module
除了global模塊中的內容可以直接使用，其他模塊都是需要加載的。
其他模塊不是全局的，不能直接使用。因此需要導入才能使用。
fs模塊
fileSystem-- 文件系統，提供了一系列操作文件的API接口，可以方便我讀寫文件
讀取文件
語法：fs.readFile(path[, options], callback)
方式一：不傳編碼參數
//參數1： 文件的名字
//參數2： 讀取文件的回調函數
//參數1：錯誤對象，如果讀取失敗，err會包含錯誤信息，如果讀取成功，err是null
//參數2：讀取成功后的數據（是一個Buffer對象）
fs.readFile("data.txt", function(err, data){
console.log(err);
console.log(data);
// 可以通過data.toString() 把二進制數據轉成文本，當然前提是讀取的文件本來就是文本，如果是圖片獲取的二進制就無法轉換成文本
});
方式二：傳編碼參數
//參數1： 文件的路徑
//參數2： 編碼，如果設置了，返回一個字符串，如果沒有設置，會返回一個buffer對象
//參數3： 回調函數
fs.readFile("data.txt", "utf8",function(err, data){
console.log(err);
console.log(data);
});
關于Buffer對象
1. Buffer對象是Nodejs用于處理二進制數據的。
2. 其實任意的數據在計算機底層都是二進制數據，因為計算機只認識二進制。
3. 所以讀取任意的文件，返回的結果都是二進制數據，即Buffer對象
4. Buffer對象可以調用toString()方法轉換成字符串。
寫文件
語法：fs.writeFile(file, data[, options], callback)
//參數1：寫入的文件名(如果文件不存在，會自動創建)
//參數2：寫入的文件內容（注意：寫入的內容會覆蓋以前的內容）
//參數3：寫文件后的回調函數
fs.writeFile("2.txt", "hello world, 我是一個中國人", function(err){
if(err) {
return console.log("寫入文件失敗", err);
}
console.log("寫入文件成功");
});
1
2
3
4
5
6
7
8
9
注意：
寫文件的時候，會把原來的內容給覆蓋掉
追加文件
語法：fs.appendFile(path, data[, options], callback)
//參數1：追加的文件名(如果文件不存在，會自動創建)
//參數2：追加的文件內容（注意：寫入的內容會覆蓋以前的內容）
//參數3：追加文件后的回調函數
fs.appendFile("2.txt", "我是追加的內容", function(err){
if(err) {
return console.log("追加文件內容失敗");
}
console.log("追加文件內容成功");
})
思考：如果沒有appendFile，通過readFile與writeFile應該怎么實現？
文件同步與異步的說明
fs中所有的文件操作，都提供了異步和同步兩種方式
異步方式：不會阻塞代碼的執行
同步方式：會阻塞代碼的執行
//同步方式
console.log(111);
var result = fs.readFileSync("2.txt", "utf-8");
console.log(result);
console.log(222);
總結：同步操作使用雖然簡單，但是會影響性能，因此盡量使用異步方法，尤其是在工作過程中。
stream
stream是Node.js提供的又一個僅在服務區端可用的模塊，目的是支持“流”這種數據結構。
什么是流？流是一種抽象的數據結構。想象水流，當在水管中流動時，就可以從某個地方（例如自來水廠）源源不斷地到達另一個地方（比如你家的洗手池）。我們也可以把數據看成是數據流，比如你敲鍵盤的時候，就可以把每個字符依次連起來，看成字符流。這個流是從鍵盤輸入到應用程序，實際上它還對應著一個名字：標準輸入流（stdin）。
如果應用程序把字符一個一個輸出到顯示器上，這也可以看成是一個流，這個流也有名字：標準輸出流（stdout）。流的特點是數據是有序的，而且必須依次讀取，或者依次寫入，不能像Array那樣隨機定位。
有些流用來讀取數據，比如從文件讀取數據時，可以打開一個文件流，然后從文件流中不斷地讀取數據。有些流用來寫入數據，比如向文件寫入數據時，只需要把數據不斷地往文件流中寫進去就可以了。
在Node.js中，流也是一個對象，我們只需要響應流的事件就可以了：data事件表示流的數據已經可以讀取了，end事件表示這個流已經到末尾了，沒有數據可以讀取了，error事件表示出錯了。
下面是一個從文件流讀取文本內容的示例：
'use strict';
var fs = require('fs');
// 打開一個流:
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是流的一部分數據。
要以流的形式寫入文件，只需要不斷調用write()方法，最后以end()結束：
'use strict';
var fs = require('fs');
var ws1 = fs.createWriteStream('output1.txt', 'utf-8');
ws1.write('使用Stream寫入文本數據...\n');
ws1.write('END.');
ws1.end();
var ws2 = fs.createWriteStream('output2.txt');
ws2.write(new Buffer('使用Stream寫入二進制數據...\n', 'utf-8'));
ws2.write(new Buffer('END.', 'utf-8'));
ws2.end();
所有可以讀取數據的流都繼承自stream.Readable，所有可以寫入的流都繼承自stream.Writable。
pipe
就像可以把兩個水管串成一個更長的水管一樣，兩個流也可以串起來。一個Readable流和一個Writable流串起來后，所有的數據自動從Readable流進入Writable流，這種操作叫pipe。
在Node.js中，Readable流有一個pipe()方法，就是用來干這件事的。
讓我們用pipe()把一個文件流和另一個文件流串起來，這樣源文件的所有數據就自動寫入到目標文件里了，所以，這實際上是一個復制文件的程序：
'use strict';
var fs = require('fs');
var rs = fs.createReadStream('sample.txt');
var ws = fs.createWriteStream('copied.txt');
rs.pipe(ws);
默認情況下，當Readable流的數據讀取完畢，end事件觸發后，將自動關閉Writable流。如果我們不希望自動關閉Writable流，需要傳入參數：
readable.pipe(writable, { end: false });
1
path模塊
路徑操作的問題
具體的說明可以參考 NodeJs學習.md
在讀寫文件的時候，文件路徑可以寫相對路徑或者絕對路徑
//data.txt是相對路徑，讀取當前目錄下的data.txt, 相對路徑相對的是指向node命令的路徑
//如果node命令不是在當前目錄下執行就會報錯， 在當前執行node命令的目錄下查找data.txt，找不到
fs.readFile("data.txt", "utf8", function(err, data) {
if(err) {
console.log("讀取文件失敗", err);
}
console.log(data);
});
相對路徑：相對于執行node命令的路徑
絕對路徑：__dirname: 當前文件的目錄，__filename: 當前文件的目錄，包含文件名
path模塊的常用方法
關于路徑，在linux系統中，路徑分隔符使用的是/，但是在windows系統中，路徑使用的\
在我們拼寫路徑的時候會帶來很多的麻煩，經常會出現windows下寫的代碼，在linux操作系統下執行不了，path模塊就是為了解決這個問題而存在的。
常用方法：
path.join();//拼接路徑
//windows系統下
> path.join("abc","def","gg", "index.html")
"abc\def\gg\a.html"
//linux系統下
> path.join("abc","def","gg", "index.html")
'abc/def/gg/index.html'
http模塊
創建服務器步驟
// 移入http模塊
const http = require('http')
// 調用創建http 服務器的方法
const server = http.createServe()
// 給服務器注冊request事件監聽，每次瀏覽器像服務器發送請求的時候都會被監聽到
server.on('request', function(request, response){
// request 瀏覽器請求的數據，包括請求方式method 請求的地址 url等
// response 瀏覽器的響應，可以設置響應頭、響應體、響應狀態碼
const method = request.method
const url = request.url
// 設置響應的狀態碼
response.StatusCode = 404
// 設置響應的頭
response.setHeader('Content-Type', 'text/html');
// 設置響應體內容,write可以調用多次
response.write('hello world!')
// 響應結束
response.end()
// 如果在end(content)，這樣的寫法相當于是讓write和end的合寫
response.end('hello world!')
})
// 給服務器設置監聽,相當于啟動服務器
server.listen(8888,function(){
console.log('服務器啟動成功')
})
// 簡寫方式
http.createServer((req,res) => {
....
}).listen(8888,() => {
....
})
詳細說明
給服務器注冊request事件，只要服務器接收到了客戶端的請求，就會觸發request事件
request事件有兩個參數，request表示請求對象，可以獲取所有與請求相關的信息，response是響應對象，可以獲取所有與響應相關的信息。
服務器監聽的端口范圍為：1-65535之間，推薦使用3000以上的端口，因為3000以下的端口一般留給系統使用
response對象詳解
常見的屬性和方法：
res.write(data): 給瀏覽器發送請求體，可以調用多次，從而提供連續的請求體
res.end(); 通知服務器，所有響應頭和響應主體都已被發送，即服務器將其視為已完成。
res.end(data); 結束請求，并且響應一段內容，相當于res.write(data) + res.end()
res.statusCode: 響應的的狀態碼 200 404 500
res.statusMessage: 響應的狀態信息， OK Not Found ,會根據statusCode自動設置。
res.setHeader(name, value); 設置響應頭信息， 比如content-type
res.writeHead(statusCode, statusMessage, options); 設置響應頭，同時可以設置狀態碼和狀態信息。
1
2
3
4
5
6
7
注意：必須先設置響應頭，才能設置響應。
實現靜態WEB服務器
服務器響應首頁
注意：瀏覽器中輸入的URL地址，僅僅是一個標識，不與服務器中的目錄一致。也就是說：返回什么內容是由服務端的邏輯決定
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)
})
}
})
根據根據不同url，響應不同文件
content-type設置-MIME類型
MIME(Multipurpose Internet Mail Extensions)多用途Internet郵件擴展類型 是一種表示文檔性質和格式的標準化方式
瀏覽器通常使用MIME類型（而不是文件擴展名）來確定如何處理文檔；因此服務器將正確的MIME類型附加到響應對象的頭部是非常重要的
MIME類型的通用處理-mime模塊
作用：獲取文件的MIME類型
安裝：npm i mime
var mime = require('mime')
// 獲取路徑對應的MIME類型
mime.getType('txt') // ? 'text/plain'
// 根據MIME獲取到文件后綴名
mime.getExtension('text/plain') // ? 'txt'
1
2
3
4
5
6
有了這個模塊我們就可以把設置響應頭的代碼改寫成下面
// mime 不僅可以只寫一個后綴名，還可以通過url來解析出后綴名來，因此這里可以直接寫url
response.setHeader('content-type',mime.getType(request.url))
1
2
npm - Node包管理工具
初始化包
npm init; //這個命令用于初始化一個包，創建一個package.json文件，我們的項目都應該先執行npm init
npm init -y; //快速的初始化一個包， 不能是一個中文名
1
2
安裝包
npm install 包名; //安裝指定的包名的版本到項目中
npm install 包名@版本號; //安裝指定包的指定版本
npm i 包名； //簡寫
卸載包
npm uninstall 包名; //卸載已經安裝的包
1
清除緩存
npm cache clean -f // 如果npm安裝失敗了，可以用這個命令來清除緩存
1
package.json文件
package.json文件，包（項目）描述文件，用來管理組織一個包（項目），它是一個純JSON格式的。
作用：描述當前項目（包）的信息，描述當前包（項目）的依賴項
如何生成：npm init或者npm init -y
作用
作為一個標準的包，必須要有package.json文件進行描述
一個項目的node_modules目錄通常都會很大，不用拷貝node_modules目錄，可以通過package.json文件配合npm install直接安裝項目所有的依賴項
描述內容
{
"name": "03-npm", //描述了包的名字，不能有中文
"version": "1.0.0", //描述了包的的版本信息， x.y.z 如果只是修復bug，需要更新Z位。如果是新增了功能，但是向下兼容，需要更新Y位。如果有大變動，向下不兼容，需要更新X位。
"description": "", //包的描述信息
"main": "index.js", //入口文件（模塊化加載規則的時候詳細的講）
"scripts": { //配置一些腳本，在vue的時候會用到，現在體會不到
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [], //關鍵字（方便搜索）
"author": "", //作者的信息
"license": "ISC", //許可證，開源協議
"dependencies": { //重要，項目的依賴， 方便代碼的共享 通過 npm install可以直接安裝所有的依賴項
"bootstrap": "^3.3.7",
"jquery": "^3.3.1"
}
}
注意：一個合法的package.json，必須要有name和version兩個屬性
本地安裝和全局安裝
有兩種方式用來安裝 npm 包：本地安裝和全局安裝。選用哪種方式來安裝，取決于你如何使用這個包。
全局安裝：如果你想將其作為一個命令行工具，那么你應該將其安裝到全局。這種安裝方式后可以讓你在任何目錄下使用這個命令。比如less命令，webpack命令，hcc-md命令 。
本地安裝：如果你自己的模塊依賴于某個包，并通過 Node.js 的 require 加載，那么你應該選擇本地安裝，這種方式也是 npm install 命令的默認行為。
// 全局安裝,會把npm包安裝到C:\Users\HUCC\AppData\Roaming\npm目錄下，作為命令行工具使用
npm install -g 包名;
//本地安裝，會把npm包安裝到當前項目的node_modules文件中，作為項目的依賴
npm install 包名;
常見的命令行工具
nrm
nrm：npm registry manager（npm倉庫地址管理工具）
安裝：npm i -g nrm
# 帶*表示當前正在使用的地址
# 查看倉庫地址列表
nrm ls
# 切換倉庫地址
nrm use taobao
nodemon 自動重啟
作用：監視到js文件修改后，自動重啟node程序
安裝：npm i -g nodemon
使用：nodemon app.js 運行node程序
模塊化(module)
基本概念
在nodejs中，應用由模塊組成，nodejs中采用commonJS模塊規范。
一個js文件就是一個模塊
每個模塊都是一個獨立的作用域，在這個而文件中定義的變量、函數、對象都是私有的，對其他文件不可見。
node中模塊分類
1 核心模塊
由 node 本身提供，不需要單獨安裝（npm），可直接引入使用
2 第三方模塊
由社區或個人提供，需要通過npm安裝后使用
3 自定義模塊
由我們自己創建，比如：tool.js 、 user.js
核心模塊
fs：文件操作模塊
http：網絡操作模塊
path：路徑操作模塊
url: 解析地址的模塊
querystring: 解析參數字符串的模塊
基本使用：1 先引入 2 再使用
// 引入模塊
var fs = require('fs');
1
2
第三方模塊
第三方模塊是由 社區或個人 提供的
比如：mime模塊/art-template/jquery…
基本使用：1 先通過npm下載 2 再引入 3 最后使用
用戶自定義模塊
由開發人員創建的模塊（JS文件）
基本使用：1 創建模塊 2 引入模塊
注意：自定義模塊的路徑必須以./獲取../開頭
// 加載模塊
require('./a') // 推薦使用，省略.js后綴！
require('./a.js')
1
2
3
4
模塊導入
/*
nodejs中模塊分為3大類
1. nodejs本身提供的核心模塊 fs http path url querystring
核心模塊不需要安裝，直接導入即可。
核心模塊的加載語法： const fs = require('fs')
2. 第三方模塊 mime art-template
第三方模塊： 必須先安裝（npm install XXX） 才能導入
第三方模塊的加載語法： npm install XXX const mime = require('mime')
3. 自定義的模塊 一個js文件
不需要安裝 只需要自己創建一個js文件
自定義模塊的加載語法： require('模塊的路徑') 模塊不能是名字，必須是路徑 ./ ../ .js后綴是可以省略
require加載規則（以mime模塊為例）
1. 判斷是否是路徑， 如果是 就是自定義模塊
2. 如果是名字 判斷是否是核心模塊
3. 如果是第三方模塊 在當前目錄找node_modules
4. 在node_modules中查找mime文件夾
5. 查找是否有package.json， 查看是否main屬性
6. 判斷是否有main, 如果沒有，默認查找index.js index.json index.node
7. 如果沒有
8. 如果找不到，就去上一層目錄，一直找到根目錄
9， 如果還沒有，就說明模塊不存在
*/
模塊導出
/*
1. 模塊中定義的變量和函數都是私有的
2. 任意的一個模塊中， 都有自帶一個屬性 module (全局屬性) module代表的就是當前的這個模塊。
3. module中有一個屬性 exports ,這個exports屬性是一個對象，代表的就是當前模塊的導出 module.exports當前模塊唯一能夠被外界訪問到的
*/
//通過module.exports對外導出一些值
module.exports = 值 只能導出一個值
module.exports = {} 可以把所有要導出的內容都放到一個新的對象中
module.export.xxx = 值
/*
在任意的模塊中 module.exports表示該模塊的導出
為了我們方便導出， 每個模塊中還提供了 exports
exports 初始狀態下，和module.exports指向了同一個對象。
注意點： 如果通過exports的方式來導出內容，只能給對象增加屬性 不能替換這個對象
*/
// 我們真正到處的對象是module.exports指向的對象
exports = {} // 這樣只是改了exports的指向，而module.exports的指向沒有改變，所以這樣是不對的
// 以下這種是允許的
exports.xxx = '值'
express與mysql
首先需要安裝mysql模塊
npm i mysql
1
基本使用
// 導入第三方包
const mysql = require('mysql')
// 創建連接
var connection = mysql.createConnection({
// 本地
host: 'localhost',
user: 'root',
password: 'root',
// 數據庫名稱
database: 'mydb',
port: 3306
})
// 連接數據庫
connection.connect()
// 執行sql語句
connection.query('select * from user where id = 8', (err, result) => {
if (err) return console.log('查詢失敗', err)
// result返回的是數組， 數組中是一個對象
console.log(result)
})
// 關閉連接
connection.end()
查詢語句
var name = 'zs'
// 使用?表示占位，可以防止sql注入
connect.query(`select * from user where name=?`, name, (err, result) => {
if (err) return console.log('錯誤了', 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('錯誤', err)
console.log('添加成功了')
}
)
// 方式2
connect.query(
'insert into user set ?',
{
name: 'zs',
age: 30,
gender: '男',
content: '哈哈哈'
},
(err, result) => {
if (err) return console.log('錯誤', 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('錯誤', 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
登錄狀態保持
http是無狀態的，但是隨著技術的發展，我們需要記住某些東西，但是因為http是無狀態的，無法讓服務器記住東西，因此就引入了cookie和session這兩個東西，cookie用于瀏覽器端，session用于服務器端。
以用戶登錄為例：
當用戶登錄時，瀏覽器會給服務器發送請求，這時候服務器就會開辟一個空間用于存放session數據，并且會把生成的sessionId返回給瀏覽器，存放在瀏覽器的cookie中，之后瀏覽器在請求服務器的時候，就會去比對是否存在這個session。這樣你的登錄狀態就已經保持下來了
cookie的特點
cookie大小只有4k
cookie每次請求的時候，都會自動攜帶
cookie可以設置過期時間
為了方便使用，我們可以使用express-session這個包，可以很方便使用session
express-session步驟：
1. 下載 npm i express-session
2. 導入 const session = require("express-session")
3. 使用session中間件
app.use(session({
secret: 'itcast',
// 設置瀏覽器端cookie的名字， 默認connect.sid
name: 'itcast',
resave: false,
// 在瀏覽器和服務器連接的第一時間，分配session 給瀏覽器指定一個cookie
saveUninitialized: true
}))
可以通過req.session訪問到session
4. 登錄成功，把登錄成功的用戶信息存儲到 req.session.xxx中
5. 提供一個中間件，這個中間件在路由的前面，判斷 req.session.xxx是否有值，有值，放走，沒值，去登錄，細節： 如果是/login 直接放走
6. 退出功能： 把req.session.xxx 清空即可
瀏覽器登錄和退出
1. 登錄做什么 把用戶名和密碼給服務器
2. 退出做什么， 1. 告訴服務器，要退出 2.（清緩存也行）
yarn和npm的說明
官網：https://yarn.bootcss.com/
Yarn是由Facebook、Google、Exponent 和 Tilde 聯合推出了一個新的 JS 包管理工具 ，Yarn 是為了彌補 npm 的一些缺陷而出現的。
Yarn 緩存了每個下載過的包，所以再次使用時無需重復下載。
同時利用并行下載以最大化資源利用率，因此安裝速度更快。
yarn的用法和npm的用法差不多
yarn命令
初始化一個新項目
yarn init
1
添加依賴包
yarn add 包名
1
升級依賴包
yarn upgrade 包名
1
移除依賴包
yarn remove 包名
1
安裝項目的全部依賴
yarn
1
全局安裝
yarn global add 包名
1
使用gulp自動化構建
官網：https://gulpjs.com/
中文文檔：https://www.gulpjs.com.cn/
用自動化構建工具增強你的工作流程！
在開發過程中，有很多重復性的工作需要執行。
less轉成css
對css代碼壓縮混淆
對js代碼壓縮混淆
寫完代碼后需要刷新瀏覽器
無法共用模版
gulp是前端開發過程中對代碼進行構建的工具，是自動化項目的構建利器；她不僅能對網站資源進行優化，而且在開發過程中很多重復的任務能夠使用正確的工具自動完成；使用她，我們不僅可以很愉快的編寫代碼，而且大大提高我們的工作效率。
gulp -----> grunt ------>webpack
環境安裝
初始化項目
npm init -y
1
全局安裝gulp
npm install gulp -g
yarn global add gulp
1
2
作為項目的依賴進行安裝
yarn add gulp --save-dev 或者
yarn add gulp --save-dev
--save-dev 等同于 -D
如果這個依賴包只是在開發階段需要用到，需要加-D
1
2
3
4
新建gulpfile.js文件
// 參數1： 任務名
// 參數2： 任務需要執行的內容
gulp.task('aa', function() {
console.log('哈哈')
})
1
2
3
4
5
執行任務
gulp 任務名;
gulp; 如果不接任務名，那么會執行默認的 default任務
1
2
3
glup任務-文件拷貝-lib
文件拷貝使用到了gulp提供的幾個核心方法
gulp.task: 定義任務
gulp.src() 讀取文件
gulp.pipe() 把文件交給管道處理
gulp.dest() 輸出文件到某個目錄
gulp.task定義任務
gulp.src('./src/lib/**/*.*')把文件讀取成一個文件流
gulp.pipe() 把文件流交給下一個流
gulp.dest('./dist/lib')輸出文件
// 簡單拷貝, 處理 lib文件夾， lib文件不需要做任何的處理，只需要拷貝到dist目錄
// 任務需要加一個return， 表示任務完成
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任務-js代碼壓縮與混淆
gulp-uglify-es: 給js代碼進行壓縮，處理ES6的代碼
gulp-rename: 重命名
安裝依賴
yarn add gulp-uglify-es --save-dev
1
配置任務
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任務-less處理
gulp-less: 把less變成css
gulp-rename: 重命名
gulp-minify-css: 壓縮css代碼
安裝依賴包
yarn add gulp-less -D
1
less任務
// less任務
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任務
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任務-圖片壓縮
gulp-imagemin: 可以對圖片進行壓縮
gulp-cache: 圖片壓縮比較耗時的一個任務， 如果每次都對所有的圖片進行重新壓縮，比較浪費時間， 會緩存下來所有已經壓縮過的圖片
安裝依賴
yarn add gulp-imagemin -D
1
壓縮圖片的任務
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
壓縮圖片是比較耗時的，我們可以使用gulp-cache來緩存已經壓縮過的圖片
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任務-處理html
gulp-minify-html: 壓縮html文件
gulp-html-extend: 語句當前html去導入另一個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
導入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
在頁面中，如何導入html
<!-- @@include ./template/header.html -->
1
gulp任務-清空任務
安裝
yarn add del -D
1
配置任務
task('clean', function() {
return del('./dist')
})
1
2
3
gulp-任務整合series
task('build', gulp.series('clean', 'html', 'less', 'js', 'image', 'lib'))
1
gulp任務-監聽文件的變化
// 實現一個，修改代碼，會自動執行任務
// 監聽的任務，，，，，，做一件事件，當我們修改了對應的文件，需要執行對應的任務
// gulp.watch() 監視文件
task('watch', function() {
// 參數1：監視的文件
// 參數2： 對應的任務, 多個任務
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任務-自動刷新
安裝
yarn add gulp-connect -D
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
排版的難處在于，我們不是根據已經設計好的版面來填充內容（套模板），而是要根據具體的內容來布局版面。比如版面中的圖片有時候是一兩張，有時候是十張八張，由于構成元素的不同，導致采用同樣的構圖、版式、形式往往是行不通的，所以蔥爺今天的這篇文章就是要來分享，在不同情況下有哪些圖片排版技巧。1. 平鋪
即把圖片鋪滿整個版面，這種處理方式多用于封面設計。
或者在內頁中把某一半版平鋪一張大圖，另一半則排列文字或者小圖。
平鋪的圖片比較有張力，有視覺重心的圖片適合這么處理。下圖平鋪的效果就一般般。
還有一種情況是把圖片當做背景，也可以采用平鋪，如下圖：
2. 四周留白
即圖片要比版面小，并讓其四周都留出空白。這里也分兩種情況，一是圖片位于版面正中央，圖片周圍的留白是對稱的，這種效果類似于相框，常用于封面設計。
還有一種情況是圖片周圍的留白并不對稱，如下圖，留白較多的區域會用來排文字，常用于海報設計和畫冊內頁設計。
3. 一條邊出血
即把圖片的一條邊對齊邊界，這么處理有點沖破束縛的意思，可以增加圖片的想象力和版面的設計感。
4. 三條邊出血
這么做會把版面分成兩部分，一部分為色塊，一部分為圖片，在排版時我們還可以通過文字、色塊或顏色把這兩個部分聯系起來。
5. 拆分
即把一張圖片拆分成幾份，然后隔開一些排列，這么做比單獨放一張圖片會更有設計感和趣味性，風景類圖片適合這么處理。
6. 跨版
即在畫冊設計中，讓圖片同時占據兩個版面。當在一個跨版中只有一張圖片時，如果只把圖片排在某一半版中，那么另一半版就容易單調，所以在這種情況下通常會使用跨版，而且圖片放大后會更有張力，還能把左右兩個版面關聯起來。
在畫冊的設計中，有時候我們應該把一 P 當成一個版面，而有時候則需要把一個跨版當成一個版面，這取決于具體的內容以及排版形式，所以圖片的排版也要分成這兩種情況來考慮。
1. 統一大小對齊排版
在一些作品集或產品畫冊中常用到此排法，視覺流程簡單、清晰。
2. 統一大小錯位排版
比對齊排版更有動感，且由于圖片不多，所以也不會顯得混亂。
3. 一大一小排版
這種排版對比鮮明、更有張弛，可以在一個跨版中使用，也可以是在某一 P 中使用。
還可以把其中的一張圖片去底，這么組合起來更靈活，對比更強烈。
如果把整個跨版當成一個版面，那么可以把大的那張圖進行跨版，小的那張圖則不跨版。
或者把大圖鋪滿一個 P，而小的圖片和文字則排在另一個 P。
這兩種排法都很大氣且不失細膩。
有時候一個版面內的圖片會有很多，這種版面排起來會更有難度，常用的排版方式有以下 8 種。
1. 大小統一對齊排版
這種排法比較整潔，但缺少變化，適合用于目錄頁或者產品和人物介紹。
2. 大小不統一對齊排版
這種排法會比前一種更靈活一點。適合利用網格工具來輔助排版。
這種排版雖然沒有統一圖片的大小，但由于保持了嚴格的對齊關系，所以依然顯得很整潔。
3. 圖片與色塊組合排版
圖片與色塊組合在一起排版既不會像只有圖片那么單調，還可以利用色塊排文字。不過注意色塊的顏色不要太多，且顏色最好來自圖片。
4. 錯位排版
即把相連兩張圖片刻意錯開，或者把圖片與文字的位置互換，這么做可以有效打破圖片完全對齊的單調，且由于有一定的規律，所以也不會對視覺流程造成太大影響。
5. 把圖片拼成特定的形狀
這種排法適合圖片比較多的情況，這么做可以避免圖片太多而顯得混亂，而且因為拼成的形狀要與設計需求相關，所以會顯得更有創意。
6. 按照某一路徑排版
這種排法跟前一種一樣，適合數量較多的同類圖片使用，可以避免圖片排得太過分散，如果不統一圖片的大小和方向，效果會比較活潑但不規范，適用于照片墻和兒童畫冊的排版。
如果統一圖片的大小和方向，或者使它們呈漸變式的變化，這些圖片還可以形成一定的節奏感，不僅不會亂，還很美觀。
7. 一大多小排版
如果在版面中分開排列大小差不多的多張圖片，那么該版面就會缺乏重點且沒有張力，而如果把其中一張圖片放大，與其他圖片形成鮮明的大小對比，就可以有效解決這一問題。
8. 自由排版
即大小不需要統一、圖片與圖片之間也不一定要嚴格對齊，效果比較靈活，設計感較強，常用于雜志排版中。
這種排法有兩點需要注意，一是圖片不要排的太分散；二是最好要有大小對比。
去底圖也很適合這么做，當然，在排版的時候也要有大小的區分，同時要注意圖片與圖片、圖片與文字之間的輪廓要形成互補。
版面中的圖片數量有從一張到數十張不等，圖片的排版方式也非常多，所以我沒法一一列出，以上總結的 17 個技巧僅僅代表一些比較主流的方向，具體的變化還需要大家根據具體的內容和設計需求去做嘗試和突破，希望這篇文章能給你一點幫助。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
vue路由加載頁面時，數據返回慢的時候頁面會有閃動的效果，數據加載前和加載后的區別。（特別是el-table表格數據）
路由前加載數據，等數據加載完再路由渲染頁面
使用vue-router的 路由守衛 beforeRouteEnter，組件內直接定義以下路由導航守衛，和鉤子函數的寫法一樣，下面列出三種路由守衛：
beforeRouteEnter(to,from,next)0{
// 在渲染該組件的對應路由被 confirm 前調用// 不！能！獲取組件實例 `this`
// 因為當守衛執行前，組件實例還沒被創建
} 復制代碼 beforeRouteUpdate(to,from,next){
// 在當前路由改變，但是該組件被復用時調用
// 舉例來說，對于一個帶有動態參數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，
// 由于會渲染同樣的 Foo 組件，因此組件實例會被復用。而這個鉤子就會在這個情況下被調用。
// 可以訪問組件實例 `this`
} 復制代碼 beforeRouteLeave(to,from,next){
// 導航離開該組件的對應路由時調用// 可以訪問組件實例 `this`
} 復制代碼藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
藍藍設計的小編 http://www.syprn.cn