1. 到底什么是圖？

「圖」對于很多人來說是一個熟悉又陌生的東西，那么到底什么是圖？以上圖的小游戲為例，為了演示方便，我們抽取其中10個人關(guān)于鍵盤和音樂類型的喜好的信息，如果以鍵盤和音樂喜好為關(guān)系，把這10個人聯(lián)系起來的話，會得到下方這樣能一張關(guān)系圖。

基于這張圖能大致了解這10個人中對于音樂和鍵盤喜好是什么情況，比如：沒有人喜歡流行樂和紅軸鍵盤，甚至可以進行一些簡單的推理：喜歡古典樂的人大概率會喜歡黑軸和青軸。

本質(zhì)上來說，通過前面的小游戲收集到的數(shù)據(jù)是一張表格數(shù)據(jù)，當(dāng)把這些靜態(tài)的數(shù)據(jù)以某個維度的信息關(guān)聯(lián)起來，就能構(gòu)建成一張圖，基于這張圖我們能進行各種各樣的解讀和分析。這其實就構(gòu)成了在我們圖這個領(lǐng)域中的 DIKW 模型。把靜態(tài)的數(shù)據(jù)，逐步轉(zhuǎn)化成信息，再到分析出有意義的「知識」，在實際的業(yè)務(wù)場景中，借助算法或者更復(fù)雜的分析手段，甚至能從圖中分析出價值更高的「智慧」。

隨著一張圖中的節(jié)點數(shù)量越多，節(jié)點之間能互相產(chǎn)生的關(guān)系會指數(shù)型的增長，對于這個關(guān)系網(wǎng)來說，它能產(chǎn)生的經(jīng)濟效益也是指數(shù)型的增長，在經(jīng)濟學(xué)領(lǐng)域把這一效應(yīng)稱之為「梅特卡夫效應(yīng)」。其實在日常生活中，最常見的圖，就是一張由人際關(guān)系構(gòu)成的社交關(guān)系網(wǎng)絡(luò)，我們每天都在用的各種社交平臺都符合這一效應(yīng)。

在實際的 B 端業(yè)務(wù)場景中，圖在圖數(shù)據(jù)庫、網(wǎng)絡(luò)安全、企業(yè)風(fēng)控、知識圖譜等場景下有非常廣泛的應(yīng)用。

2. 設(shè)計挑戰(zhàn)

分享一個在知識圖譜這個業(yè)務(wù)場景下的真實故事，某天 PD 發(fā)過來如上圖的釘釘消息，希望幫他設(shè)計一個圖的需求，然后隔一段時間發(fā)來不同的希望在圖上面表達的語義訴求。隨著要表達的信息越來越多，后面再去設(shè)計圖的樣式時，就陷入了不知道該怎么辦的境地…

2.1 視覺通道有限

在可視化設(shè)計中，常見的視覺通道就那么幾種：形狀、方向、紋理、尺寸、值、顏色，隨著產(chǎn)品功能的拓展，需要在圖上表達的信息維度越來越多，且根本沒有停下來的趨勢。這時我們會面臨圖這類產(chǎn)品設(shè)計時的第一個挑戰(zhàn)：視覺通道有限，無法滿足日益增長的語義表達的需求。

2.2 數(shù)據(jù)量超預(yù)期

下圖左側(cè)是一張交付給前端同學(xué)的設(shè)計稿，基本上滿足 PD 提到的各類語義表達的訴求。然而實際驗收的時候，帶進實際數(shù)據(jù)的時候效果是右圖這樣的。這是面臨的第二個挑戰(zhàn)，在設(shè)計一張圖的時候，設(shè)計師往往是按照非常理想的情況去設(shè)計的，但當(dāng)實際的數(shù)據(jù)灌入進去，再加上還原度的問題，布局的問題，會導(dǎo)致實際一張圖渲染出來的效果是非?！阁@人」的，可讀性幾乎為0。

2.3 連續(xù)分析效果不可控

下圖的 GIF 是最基礎(chǔ)的一種圖分析的操作：從一個節(jié)點出發(fā)，逐步的選擇感興趣的節(jié)點展開，以隨著關(guān)系的逐步擴散發(fā)掘出更多有價值的信息。GIF 中所看到的從起始的藍色節(jié)點擴散到青色節(jié)點，再到紅色、綠色節(jié)點，這樣逐步擴展，分層展示，是一個設(shè)計師的理想情況。但實際的情況往往是下圖這樣的，每次擴展開的節(jié)點都會在原來的基礎(chǔ)上覆蓋，連續(xù)擴散幾次之后，節(jié)點和邊密密麻麻的重疊在一起。連續(xù)分析的情況下，效果再一次超出我們的預(yù)期。

回顧一下為何會出現(xiàn)上面的幾個問題：在面對圖這樣一個陌生的設(shè)計對象時，在對其有更深入的了解之前，我們往往只能看到表面的靜態(tài)的視覺的設(shè)計，單點的交互設(shè)計，看不到也沒法控制的是藏在圖這座冰山之下的數(shù)據(jù)量、布局效果、加載速度和用戶連續(xù)分析的路徑。

為了解決上面提到的幾個挑戰(zhàn)，以及便于更多設(shè)計師更快速的上手圖產(chǎn)品的設(shè)計，避免一些我們此前踩過的坑，同時為了規(guī)范圖產(chǎn)品的設(shè)計，我們基于在不同業(yè)務(wù)線的圖產(chǎn)品的實踐和思考，產(chǎn)出了「AntV 圖可視分析設(shè)計指引」。

       更好的閱讀體驗，推薦訪問語雀版 

3. 設(shè)計指引

設(shè)計指引從全局樣式（Global Style）、交互規(guī)范（Guide）、組件（Conponents）、功能模板（Templates）、綜合案例（Examples）幾個視角出發(fā)組織相關(guān)的內(nèi)容。由于大部分設(shè)計師對「圖」是不太了解的，所以增加了一篇「總則」來介紹「圖」是什么，在做相關(guān)產(chǎn)品的設(shè)計時，面臨的設(shè)計對象是什么，以及幾條最通用的設(shè)計指引內(nèi)容。同時也提供了 Sketch 組件庫模板資產(chǎn)，內(nèi)置了優(yōu)雅好看的圖的樣式和常用圖的模板。

  

3.1 全局樣式

回顧前面提到的知識圖譜里的這個圖設(shè)計的需求，我們踩過那么多坑之后，再回頭去看，該如何設(shè)計這一一張圖呢？其實把上面這張 DEMO 圖拆解來看，再復(fù)雜的圖，本質(zhì)上無外乎就是「兩點一線」，以及在節(jié)點和邊上的文字標(biāo)簽。

再抽象一層看，會發(fā)現(xiàn)組成圖的最基礎(chǔ)的元素有：點、邊、箭頭、標(biāo)簽、布局這么5種元素。以其中的點為例，再去拆解看一下，設(shè)計這個圖里面最基礎(chǔ)的元素的時候，適用于表達點的視覺樣式的有大小、顏色、描邊、形狀、圖標(biāo)、角標(biāo) 這么幾個視覺參數(shù)。其中，「描邊」還能細(xì)分為單層描邊或多層描邊，「圖標(biāo)」還能區(qū)分為線型還是面型，各自再對應(yīng)不同的視覺參數(shù)。

有了最適合點的視覺通道和對應(yīng)的參數(shù)之后，回顧一下我們此前需求中我們需要在節(jié)點上表達的各類語義，可以歸納3大類：

• 數(shù)據(jù)特性：數(shù)據(jù)中固有的一些特性，比如類型、規(guī)模、權(quán)限等，這些特性不會隨著呈現(xiàn)的平臺的不同而變化，而是屬于數(shù)據(jù)本身的一些特性；

• 功能屬性：在具體的產(chǎn)品中，隨著產(chǎn)品功能的不斷豐富，賦予給節(jié)點的屬性，比如一個產(chǎn)品有了預(yù)測或推理的能力，就需要在圖中表達出節(jié)點是否是「預(yù)測的」或者是「疑似」的；

• 鼠標(biāo)狀態(tài)：鼠標(biāo) Hover 、Focus、Disable 等常見鼠標(biāo)交互事件

這3類語義，共同決定了一個節(jié)點應(yīng)該表達什么維度的信息，樣式應(yīng)該是什么樣子的。這時再去設(shè)計一個節(jié)點的樣式時，其實就是一個把語義類型和適用的視覺通道和參數(shù)連線的過程。無論需要表達的語義如何新增，節(jié)點樣式的表達都有一定的內(nèi)在邏輯可循。

圖的基礎(chǔ)元素中，除了點之外，其他的基礎(chǔ)元素也按照類似的思路梳理出需要表達的語義和使用的視覺通道，這樣我們就完整的，成體系地歸納出了所有影響一張圖「長什么樣」的基礎(chǔ)元素、視覺通道和參數(shù)。有了這樣一張「參數(shù)表」，再去設(shè)計一張圖時，就明確的知道有哪些要素可以考慮。

當(dāng)然，能做的不止于此。結(jié)合我們前端同學(xué)的能力，我們把上述「參數(shù)表」工程化了，做成了一個在線工具 — GraphMaker 。在這個工具里可以根據(jù)實際的數(shù)據(jù)量，調(diào)整節(jié)點、邊、布局的所有視覺通道參數(shù)，以調(diào)整到一個合適的視覺效果。最終導(dǎo)出成代碼，用到實際的項目中。及時完全不懂圖，也能在這個工具上，調(diào)試出理想的視覺效果，再將對應(yīng)的代碼導(dǎo)出給到開發(fā)同學(xué)使用。

3.2 交互規(guī)范

在圖產(chǎn)品中，常見的操作對象有：畫布、節(jié)點、邊、Combo 和其他這五種類型。為了捋清楚圖產(chǎn)品中常見的交互事件，以交互事件三要素的形式，將所有的交互事件全部梳理和枚舉出來，并以操作對象為分類維度，歸納整理出一份完整的「交互時事件庫」，提供給設(shè)計師使用。

3.3 組件 & 分析模式

前面介紹了「交互事件」，很多時候，一個復(fù)雜的交互事件需要有一個獨立的組件來承載。比如：關(guān)聯(lián)節(jié)點的搜索查詢、代碼輸入框、算法模板選擇器等都有一個共性：都是屬于「輸入某中查詢條件」的組件，這類組件則統(tǒng)一歸納為「條件輸入組件」，主要由「條件輸入」和「確認(rèn)執(zhí)行」兩部分內(nèi)容組成。相同的邏輯，我們將各類業(yè)務(wù)場景下常見的組件歸納為基礎(chǔ)組件、條件輸入、信息輸出、高級功能四種類型。定義好每種類型組件的基本特性，確保產(chǎn)品在不斷迭代新增新功能的過程中，新增的功能組件都能保持基本一致的體驗。

以最常見的一個「算法模板」查詢的場景為例，在左側(cè)的條件輸入面板選擇一個合適的算法模板，畫布上會渲染出對應(yīng)的結(jié)果內(nèi)容，然后用戶會選擇其中感興趣的節(jié)點查看詳情。這三個組件共同組成了一個完成的圖分析操作，這類有固定條件輸入的分析模式被定義為「有明確目的分析」。圖分析產(chǎn)品中，常見的分析模式有3類：

• 有明確目的：這類分析模式是有明確的分析或查詢條件，這個條件的呈現(xiàn)形式可能是一個規(guī)則表達式，一段 Gremlin 或 GQL 的查詢語句，或明確的起點和終點，甚至是直接查看某個節(jié)點或某條邊的具體信息。常見的模式有：規(guī)則查詢、Gremlin 查詢、關(guān)聯(lián)分析、篩選/搜索畫布、查看詳情等；

• 無明確目的：無明確目的地探索是指基于已有數(shù)據(jù)內(nèi)容，進行關(guān)系的 N 度擴展、下鉆分析、子圖探索、撤銷回退等操作，來挖掘數(shù)據(jù)中的特性，發(fā)現(xiàn)價值或機會點的分析過程；

• 特殊場景：

• 內(nèi)置了 AI 算法能力的分析場景：這類分析場景通常需要借助內(nèi)置的算法或規(guī)則推理能力來實現(xiàn)，從海量數(shù)據(jù)中快捷的挖掘出符合特定規(guī)則的目標(biāo)節(jié)點和關(guān)系，常見的有：擔(dān)保圈、實控人、最短路徑等；

• 結(jié)合時間或地理信息的分析場景：在源數(shù)據(jù)中含有時間和地理維度的內(nèi)容時，會出現(xiàn)結(jié)合時間或地理信息的分析場景。

回顧一下前面介紹的內(nèi)容，從「全局樣式」到「分析模板」其實都是在做同一件事情：在面對一個「圖」這樣一個陌生的設(shè)計對象時，梳理其內(nèi)在的邏輯，并在這個陌生的領(lǐng)域，定義清楚其運行和存在的邏輯。從最原子級的樣式和交互、組件再到一個完整的分析模式，從不同維度去定義圖產(chǎn)品的「規(guī)則」，以確保不論多復(fù)雜的場景，圖分析產(chǎn)品的體驗是可控且有序的。類似于積木一樣，有了統(tǒng)一的接口規(guī)范，無論積木的形狀如何變化，都能完美的拼裝出玩家想要的形狀。

從 ETCGG 的角度出發(fā)，介紹了「AntV 圖可視分析解決方案」設(shè)計相關(guān)的內(nèi)容，解決方案還有非常重要一部分的內(nèi)容就是「技術(shù)方案」，稍后會由我的搭檔 @山果 給大家?guī)砀敿?xì)的介紹內(nèi)容。

總結(jié)

在整個分享中，我們介紹了圖分析產(chǎn)品的4個不同的業(yè)務(wù)應(yīng)用領(lǐng)域、3種圖分析模式，定義出了4種圖分析產(chǎn)品的組件類型，同時以交互事件3要素的形式梳理出所有的圖交互事件，以及找到了所有影響「圖」樣式的基礎(chǔ)元素和參數(shù)。理想情況下，有了這些信息之后，我們再去設(shè)計一個圖分析產(chǎn)品時，可能就是一個從左到右的連線過程。為此我們也正在努力將這一理念轉(zhuǎn)化為現(xiàn)實，開源工具 Graphin 2.0 正在設(shè)計&開發(fā)中，也盡情期待。

「系統(tǒng)看上去混亂無序，但在其背后卻隱藏著一種非常微妙的秩序」 - 諾貝爾獎得主、物理學(xué)家 Murray Gell-Mann 曾經(jīng)說過這樣一句話來描述自然界中那些看上去混亂無序，實則內(nèi)含秩序的系統(tǒng)現(xiàn)象。這句話用來描述「圖」這類產(chǎn)品也非常貼切，當(dāng)前圖分析產(chǎn)品處于發(fā)展期，相關(guān)的設(shè)計領(lǐng)域更是一片不毛之地。AntV 圖方向的同學(xué)們此前的一些探索，以及沉淀下來的「設(shè)計指引」和「解決方案」就是在圖這類產(chǎn)品的混亂和無序的復(fù)雜中，找到其內(nèi)在的秩序。

圖可視分析領(lǐng)域是一個小眾而又專業(yè)度很高的領(lǐng)域，希望以上的分享的實踐和思考能給在這個領(lǐng)域相關(guān)的同學(xué)一些啟發(fā)。目前設(shè)計在這一領(lǐng)域剛剛開始邁出一小步，還有巨大的未知和機會等著我們?nèi)ヌ剿?，歡迎通過各種渠道隨時交流。

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

文章來源：站酷   作者：Ant_Design

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

前言

用戶體驗地圖與服務(wù)藍圖常常會一起出現(xiàn)。因為，用戶體驗地圖更聚焦于用戶在前臺端到端的體驗，而服務(wù)藍圖更聚焦于由表面到核心后臺業(yè)務(wù)及如何交付和幕后的操作，并且能與用戶體驗強關(guān)聯(lián)起來。

什么是服務(wù)藍圖？

服務(wù)藍圖是以公司角度展示的可視化界面工具。在每個階段為用戶提供的服務(wù)，且在服務(wù)過程中會涉及到的不同人員和不同的條件。并且在公司內(nèi)，所有的人員都可以客觀的理解并使用（所需各方的服務(wù)和支持）。

1. 主要構(gòu)成

服務(wù)藍圖直觀上同時從 4 個主要方面展示：

用戶行為

用戶在所有階段中的體驗節(jié)點。這里需要注意的是：一定要清晰的羅列出，用戶在什么觸點下做的什么行為。這樣才能更好的進行技術(shù)（方案）評估及更好的服務(wù)用戶。

前臺

前臺是圍繞著與用戶產(chǎn)生交互行為關(guān)系所展開的具體內(nèi)容，內(nèi)容可包含員工、數(shù)字設(shè)備、技術(shù)方案，也就是用戶能看見的服務(wù)和能接觸到的服務(wù)。

后臺

后臺是給前臺提供技術(shù)方案支持的存在。

支持

支持過程包含內(nèi)部人員和外部人員履行的服務(wù)步驟和互動行為。

如何用服務(wù)藍圖優(yōu)化產(chǎn)品/業(yè)務(wù)？

優(yōu)化產(chǎn)品/業(yè)務(wù)主要從 4 個關(guān)鍵點出發(fā)：

1. 找出服務(wù)流程的崩潰點或斷點

對于線下智能服務(wù)，我們應(yīng)該遵守一個基本原則：在一個完整的流程中，不應(yīng)該出現(xiàn)「用戶不知道要做什么和需要未知等待的事情」。

怎么找到崩潰點和斷點？

主要從「田野調(diào)查」和「深度訪談」獲得?？筛鶕?jù)實際的項目展開定性研究。

2. 新服務(wù)、新體驗該怎么執(zhí)行

在更新體驗流程的時候，一定要基于全新的角度出發(fā)。把自己想象成：我是一名刁鉆的用戶，你需要喂我吃飯的境界，最好還要幫我把飯粒粒分離。

還是以無人零售商店舉例：前期準(zhǔn)備節(jié)點

如（新服務(wù)）：在購物流程說明的物料中，把關(guān)鍵字圈出并劃重點，在前期推廣的時候安排店員進行隨時講解。

如（新體驗）：把之前的定制便宜的物料，換成高逼格的、貼紙換成超大號的。

該怎么執(zhí)行：根據(jù)藍圖規(guī)劃設(shè)計“高峰值”的體驗點，對購物流程說明的物料進行資源傾斜。

3. 衡量服務(wù)過程的每一步是否達標(biāo)

衡量的標(biāo)準(zhǔn)：數(shù)據(jù)角度出發(fā)/用戶購物速度/體驗流程的銜接度等等

如（漏斗數(shù)據(jù)）：開業(yè)前期宣傳來了 100 人，100 人閱讀了購物流程，留下了多少人，在留下人中，多少人是在 10 秒內(nèi)完成閱讀進店體驗（X 人….X 秒/分鐘…）

4. 定義服務(wù)的“高峰值”

在不同的階段設(shè)計用戶的心理峰值曲線。

峰值和終值，是由 2002 諾貝爾獎得主、心理學(xué)家丹尼爾·卡尼曼提出的。他發(fā)現(xiàn)大家對體驗的記憶由兩個核心因素決定: 第一個是體驗最高峰的時候，無論是正向的最高峰還是負(fù)向的最高峰，一定是能記得住的。第二個是結(jié)束時的感覺。這就是峰終定律（Peak-End Rule）

舉個栗子：宜家購物

宜家會在每個階段給與用戶不同的情感體驗（我特別喜歡那個冰淇淋，如果你也是的話文章末尾點個贊唄）。

服務(wù)藍圖的增值體現(xiàn)

那么如何在藍圖上體現(xiàn)增值的點？主要從以下 4 個方面：

1. 時間：服務(wù)質(zhì)量再高也會隨著時間的消耗而消耗。

服務(wù)藍圖中的一步可能需要 5 秒，也可能需要 5 分鐘，所以在頂部增加的時間能幫助大家更好的理解這個服務(wù)。

2. 衡量標(biāo)準(zhǔn)：服務(wù)的成功或價值需要一些體驗因素來衡量。

這些因素是用戶在心里判斷服務(wù)是成功還是失敗的關(guān)鍵時刻。比如，等待時間。

3. 情緒表達：對某些服務(wù)來說，理解用戶的情緒狀態(tài)是非常必要的。

比如，用戶注冊時，突然手機斷網(wǎng)了也需要納入考量因素。

注釋說明：在內(nèi)部討論時，將說明的重點用 icon 的形式標(biāo)記出來

#完整的服務(wù)藍圖

總結(jié)

企業(yè)的資源是有限的，你不可能在所有點都達到用戶的預(yù)期或者給用戶全程的超高體驗 。所以，需要做的是，在服務(wù)藍圖上配置資源來制造用戶體驗，使用戶擁有一個美好的峰值和令人回味的終值，并且全程不突破用戶的底線。

服務(wù)藍圖的結(jié)構(gòu)要素，實際上定義了服務(wù)傳遞系統(tǒng)的整體規(guī)劃，包括服務(wù)的設(shè)置、服務(wù)能力的規(guī)劃。服務(wù)藍圖不是一個人的事情，在服務(wù)環(huán)節(jié)中的每個人都必須把“用戶滿意”作為自己的服務(wù)標(biāo)準(zhǔn)。服務(wù)藍圖提供了一個全局觀點。服務(wù)藍圖也可以平衡業(yè)務(wù)需求和用戶需求。

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

文章來源：優(yōu)設(shè)   作者：七月Xavier

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

但是，究竟如何才能結(jié)合網(wǎng)頁/產(chǎn)品特色和用戶的真實需求， 將頁面視覺內(nèi)容層級化， 從而提供更加優(yōu)質(zhì)的用戶體驗，實現(xiàn)與用戶的互動， 最終促成產(chǎn)品購買呢？下面小編就結(jié)合最新且具有極佳視覺層次感的網(wǎng)頁設(shè)計實例分析和介紹視覺內(nèi)容組織技巧，以及在原型化這些網(wǎng)頁設(shè)計的過程中（結(jié)合小編最愛的一款又快又簡單的原型工具Mockplus）需要注意的原型設(shè)計技巧：

1.利用界面元素尺寸大小建立層級結(jié)構(gòu)

界面元素（例如文字，圖片或形狀等）尺寸越大，越突出，越容易吸引用戶的注意。所以，在具體的網(wǎng)頁界面設(shè)計中，設(shè)計師可以通過有梯度的尺寸變化，創(chuàng)建頁面信息的層級關(guān)系。當(dāng)然內(nèi)容重要性上，也應(yīng)該是與尺寸大小成正比的（即越大越重要）。

大圖模式

如圖，利用文字的尺寸大小，體現(xiàn)網(wǎng)頁信息的層級。

注意：尺寸大小也要控制在用戶能夠接受的范圍內(nèi)

太大，能夠展示的內(nèi)容有限。太小，易讀性差，也會比較繁雜。

原型設(shè)計技巧：

在利用Mockplus (一款具有豐富組件庫和圖標(biāo)庫的原型工具)創(chuàng)建網(wǎng)頁原型時，絕大部分的組件都是可以簡單通過寬高屬性或拖拉邊框兩種方式調(diào)整其尺寸，輕松創(chuàng)建直觀的層次結(jié)構(gòu)。

大圖模式

如圖，Mockplus允許用戶簡單通過寬高屬性或拖拉邊框的方式調(diào)整組件尺寸大小。

2.利用界面元素明暗，陰影以及透明度的不同，體現(xiàn)簡單層級

如白底黑字般，同類元素，同一色彩，不同的明暗，陰影以及透明度，也可體現(xiàn)簡單的層級關(guān)系。當(dāng)然，在沒有過多顏色的參與下，不同文字，圖片等多種的頁面元素結(jié)合透明度，陰影以及明暗，也可使整款設(shè)計極具簡約風(fēng)和層次感。（點擊鏈接更多的簡約風(fēng)網(wǎng)頁設(shè)計技巧）

大圖模式

如圖，文字明暗，結(jié)合尺寸變化，讓頁面層級更加清晰簡約：

原型設(shè)計技巧：

而在這一方面，小編發(fā)現(xiàn)Mockplus提供了專門透明度屬性，可以根據(jù)層級設(shè)計需求，修改屬性數(shù)值進行設(shè)置。

如若，需要添加元素陰影，也可輕松通過組件的重疊實現(xiàn)。

大圖模式

如圖，“圖片”與“形狀”組件的組合，實現(xiàn)陰影的添加。

3.利用色彩，劃分頁面層級

色彩，作為設(shè)計師最常使用的視覺層次工具，也為他們創(chuàng)建極富層級感的網(wǎng)頁設(shè)計發(fā)揮著舉足輕重的作用。而具體的設(shè)計技巧，大家可以參考以下幾點：

首先，色彩明亮的頁面元素更容易從相對柔和的元素中脫穎而出。如圖：

大圖模式

如圖，明亮的紅色和黃色更易從相對較柔和的粉色背景中脫穎而出。

而且，某些色彩，尤其是某些主題配色方案的選擇，對于確定網(wǎng)頁的整體基調(diào)，吸引用戶注意，作用也非常明顯。例如，藍色，一般代表平靜祥和，適合一些日常事物管理類軟件選擇。而紅色，則代表熱情喜氣，適合一些節(jié)日相關(guān)購物促銷類軟件選擇。

大圖模式

如圖，利用紅色突出網(wǎng)頁促銷信息。

其次，色彩飽和度的梯度變化，也可體現(xiàn)直觀而豐富的層次結(jié)構(gòu)。

同一色彩，飽和度的梯度變化，也可幫助展現(xiàn)網(wǎng)站元素的層次結(jié)構(gòu)。如圖：

大圖模式

最后，色彩模塊，對于體現(xiàn)界面元素的邏輯關(guān)系，作用也是顯而易見

存在同一邏輯關(guān)系的各個頁面元素就近放置在同一色彩模塊，可以讓頁面組織結(jié)構(gòu)更加清晰，易于用戶快速查看相關(guān)內(nèi)容。

大圖模式

如圖，利用色彩模塊，更直觀地劃分功能區(qū)。

原型設(shè)計技巧：

而這一方面，Mockplus提供了非常強大的色彩選擇器，設(shè)計師們可以簡單點擊實現(xiàn)色彩的選擇和添加。其色彩收藏功能，也為以后復(fù)用和保持整款設(shè)計配色的一致性提供了可能。

當(dāng)然，結(jié)合“形狀”組件，為頁面添加豐富的功能色塊，以及添加“鼠標(biāo)懸停時”或“點擊時”的簡單色彩交互狀態(tài)，也不是難事。

大圖模式

如圖，添加色塊劃分界面功能結(jié)構(gòu)。

4.利用頁面布局，展現(xiàn)網(wǎng)頁層級結(jié)構(gòu)

頁面布局也是設(shè)計師們常用的視覺工具之一。一方面，同一網(wǎng)站，內(nèi)部各個頁面可以根據(jù)軟件或產(chǎn)品展示內(nèi)容需求，采用多樣的布局模式，增加頁面的多變性和可讀性。另一方面，也可直接在不同頁面采用重復(fù)的頁面布局，方便幫助用戶形成一定的閱讀習(xí)慣，快速有效的查詢需要的信息。

而具體單個頁面的布局模式，大家可以嘗試以下的方式實現(xiàn)：

*利用網(wǎng)格劃分不同頁面模塊

網(wǎng)格是公認(rèn)的劃分頁面功能模塊的工具之一。而它在組織界面視覺內(nèi)容方面，作用也不可小視。加之，結(jié)合各個網(wǎng)格的色彩變化，也能使整個頁面更加炫酷直觀。如下圖：

大圖模式

*利用位置不同體現(xiàn)邏輯關(guān)系

同一邏輯關(guān)系（比如同類，從屬，因果等）或相近/相關(guān)的元素放在同一或并列的網(wǎng)頁位置或模塊內(nèi)，更易于用戶瀏覽所需頁面信息。

當(dāng)然，每個邏輯關(guān)系內(nèi)，結(jié)合大小標(biāo)題和列表進行展示，層級關(guān)系會更加深入清晰。

*利用點線

網(wǎng)頁設(shè)計中，設(shè)計師不僅可以直接使用點線標(biāo)出需要強調(diào)的內(nèi)容，還可以利用點線劃分頁面板塊和布局。

大圖模式

如圖，通過位置的不同體現(xiàn)內(nèi)容之間的邏輯關(guān)系。同時，利用線條劃分頁面結(jié)構(gòu)和布局。

*利用對齊方式的不同

文字，圖片以及相關(guān)元素的對齊方式，也是體驗不同層級結(jié)構(gòu)的重要工具。

總之，頁面布局也可幫助設(shè)計師們創(chuàng)建更具美感和層次感的網(wǎng)頁設(shè)計。

原型設(shè)計技巧：

在使用Mockplus時，設(shè)計師可簡單使用“快速格子+自動填充”的功能組合，實現(xiàn)界面網(wǎng)格的輕松添加。而且，在具體的設(shè)計過程中，對齊方式，標(biāo)尺以及參考線等工具的使用，也可使網(wǎng)頁布局設(shè)計更加簡便快捷。

大圖模式

如圖，利用Mockplus的快速格子和自動填充功能制作網(wǎng)頁網(wǎng)格，劃分界面功能結(jié)構(gòu)。

5.利用留白和間距，突出界面視覺內(nèi)容

留白的巧妙運用，能夠非常有效地突出頁面信息。而頁面內(nèi)部元素之間，保持適當(dāng)?shù)拈g距，讓彼此之間的相互聯(lián)系而不“擁擠雜亂”，也是吸引用戶注意的不錯策略。如圖：

大圖模式

6.利用對比，凸顯網(wǎng)頁層級結(jié)構(gòu)關(guān)系

以上所提及的各種視覺組織工具，例如尺寸，色彩，明暗，間距等等，同類或不同類之間的鮮明對比，也可以讓頁面視覺上更加美觀而豐富，同時體現(xiàn)元素之間的結(jié)構(gòu)層次關(guān)系。

大圖模式

如圖，利用色彩的強烈對比，突出頁面層級。

此外，頁面元素的相互疊加，清晰度，以及細(xì)節(jié)展示程度的對比，也能有效地凸顯網(wǎng)頁內(nèi)容的重要性層級。

大圖模式

如圖，靠前的圖片和文字應(yīng)該更加重要，清晰，細(xì)節(jié)也應(yīng)更豐富，從而方便用戶識別讀取，避免層次混亂。

7.采用不同的界面風(fēng)格，打造獨特的網(wǎng)頁視覺層級

當(dāng)然，并不是說設(shè)計師就必須通過以上的設(shè)計工具展示網(wǎng)頁重要性層級結(jié)構(gòu)。實際上，結(jié)合設(shè)計師特有創(chuàng)意，獨特紋理（texture），圖形或圖像元素等，打造出具有設(shè)計師獨特風(fēng)格的視覺層級，也會是不錯的嘗試。如下圖：

大圖模式

總之，不管是否使用以上的設(shè)計工具，結(jié)合設(shè)計師創(chuàng)意，打造獨具一格的視覺層級風(fēng)格，都是不錯的設(shè)計理念。

原型設(shè)計技巧：

而在這一點上，Mockplus提供了很多優(yōu)質(zhì)功能，幫助設(shè)計師隨心設(shè)計，并簡單快捷的原型化，測試和迭代這些天馬行空的創(chuàng)意。

比如，其團隊協(xié)作和團隊管理功能，方便設(shè)計師更加高效地完成設(shè)計。其8種演示和分享方式，例如導(dǎo)出圖片，HTML以及演示包等等，為設(shè)計師根據(jù)切實需要，選擇適當(dāng)?shù)姆绞綔y試和分享相關(guān)設(shè)計提供了便利。

此外，其組件樣式庫，也為保存和分享需要的組件樣式并隨時復(fù)用提供了可能。

8.分析用戶需求和網(wǎng)頁瀏覽模式，優(yōu)化頁面內(nèi)容和位置

在進行網(wǎng)頁界面層級結(jié)構(gòu)化的過程中，并不是毫無章法，盲目的隨意添加或突出某個部分，而是需要分析用戶行為，根據(jù)用戶需求等級進行相應(yīng)結(jié)構(gòu)層次的劃分。否則，再怎么賦有層次感，用戶也會因為找不到需要的東西，莞爾離開。

此外，除了根據(jù)用需求決定哪些內(nèi)容需要放在最緊要，最突出的位置，以吸引用戶。同時還需要根據(jù)用戶瀏覽網(wǎng)頁時的閱讀模式，分析重要內(nèi)容的頁面位置。

根據(jù)美國著名網(wǎng)站設(shè)計工程師Nielsen Norman Group研究表示，用戶總是在網(wǎng)頁瀏覽中慣用“F”或“Z”型閱讀模式，即用戶常常是從左到右，開頭結(jié)尾詳細(xì)閱讀，而中間部分則根據(jù)網(wǎng)頁或文章大小標(biāo)題結(jié)構(gòu)，選擇性閱讀的模式。如下圖：

大圖模式

那么，網(wǎng)頁設(shè)計中，設(shè)計師就需要注意頁面首尾內(nèi)容的趣味性和實用性，以及中間主體部分注意大小標(biāo)題簡潔明了，建立清晰的框架層次結(jié)構(gòu)。

總之，無論是用戶行為畫像，還是用戶瀏覽模式分析，最終都是希望能夠根據(jù)用戶需求，更加合理的安排和分布頁面內(nèi)容，直觀清晰，易識別。

9.其他設(shè)計工具

而其它視覺設(shè)計工具，例如界面文本方面，文本字體，排版，對齊方式等等，也可突出頁面的層級關(guān)系。

原型設(shè)計技巧：

如若設(shè)計師希望通過網(wǎng)頁文本的尺寸，字體，顏色，排版以及對齊方式等實現(xiàn)框架結(jié)構(gòu)的構(gòu)建時，Mockplus的“單行文字”和“多行文字”組件就可以輕松幫助實現(xiàn)。而且，適當(dāng)?shù)慕Y(jié)合一定的交互設(shè)計，也可使整款設(shè)計更具吸引力。

結(jié)語：

當(dāng)然，層次結(jié)構(gòu)化不僅能讓網(wǎng)頁更加直觀清晰，賞心悅目。而且，具有一定局限性的Android 或iOS app，例如頁面尺寸的限制，設(shè)備屏幕的限制，響應(yīng)與否的限制等等，更需要清晰的層次結(jié)構(gòu)，讓頁面擺脫混亂繁雜，吸引更多用戶點擊使用。而這方面，也同樣適用以上所有設(shè)計技巧。

總之， 無論如何， 及時地將各種設(shè)計想法，通過一款實用且強大的原型工具（比如以上介紹到的Mockplus）, 轉(zhuǎn)化成直觀可視的原型，更進一步的測試和迭代，才是創(chuàng)建真正美觀實用，深受用戶喜愛的web/app的必經(jīng)之道。

總之，希望以上介紹的相關(guān)層次結(jié)構(gòu)設(shè)計技巧和原型設(shè)計技巧能對你有所啟發(fā)。

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

                                                            

 

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

 

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

每當(dāng)我看到一個漂亮，優(yōu)雅并且簡潔美觀的界面，就會忍不住保存下來?，F(xiàn)在，我已經(jīng)收集了100多個美不勝收的UI 界面。在一次次觀摩，欣賞和學(xué)習(xí)后，我發(fā)現(xiàn)這些界面有很多共同點。可究竟是什么讓我對它們一見鐘情呢？現(xiàn)在我找到了答案，是色彩。

本文中，結(jié)合自身經(jīng)歷，我總結(jié)了一些UI 設(shè)計配色技巧。雖然它們不能像魔術(shù)一樣讓你搖身一變成為最優(yōu)秀的UI設(shè)計師，但是我保證，這些為你量身打造的UI 設(shè)計配色技巧，定會讓你受益匪淺。

1. 色彩的魔力

色彩是會說話的，甚至可以像語言一樣強大?；叵胍韵拢慨?dāng)你初見一個網(wǎng)站或產(chǎn)品，給你留下第一印象的是什么呢？是視覺外觀，而視覺外觀很大程度上是取決于色彩運用。

那么，在UI設(shè)計中，色彩究竟可以做些什么？

1）反映品牌的內(nèi)涵和品質(zhì)

顏色可以為品牌設(shè)定基調(diào)。 CCICOLOR的一項研究表明，用戶在評估一款在線商品時，只需花費短短90秒，而判斷的依據(jù)高達62％至90％將取決于配色方案。

2）實現(xiàn)更佳的用戶體驗

色彩的有效運用能提升整體美感，提供更優(yōu)的閱讀體驗，創(chuàng)造清晰和諧的風(fēng)格。

3）影響購買決策

根據(jù)Kissmetrics的說法，產(chǎn)品的視覺外觀是影響消費者購買決策的首要因素。此外，QuickSprout的研究也表明，90％的產(chǎn)品評估都與顏色有關(guān)。Neil Patel曾寫到，“顏色在你購買特定產(chǎn)品的原因中占據(jù)85％的分量”。正因如此，顏色已成為當(dāng)今重要的營銷手段之一。

2. 色彩的基本概念

色彩被長久的文化生活賦予了很多約定俗成的含義和寓意。每種色彩都形成了自己獨特的語言和象征。解讀色彩的語言，請看下表：

大圖模式

3. UI 設(shè)計配色技巧

1） 色彩使用也講究“天時地利人和”

存在即合理，沒有哪一個色彩本身就是丑陋和不具備美感的，只能說，如果我們錯誤的使用了色彩，那么它的美一旦被破壞，就只剩下丑陋和別扭了。

想象一下，如果麥當(dāng)勞大叔使用比較沉悶的灰色和黑色而不是明快的黃色和紅色，你還對他們的炸雞充滿饑腸轆轆的感覺嗎？女人喜歡穿著黑色禮服搭配鮮艷口紅參加派對，為什么？因為這樣會讓她們看起來性感迷人。

不同的顏色傳達不同的含義和感覺。如何明智地進行選取和搭配呢？這里請注意5點：選取合適的顏色，運用于合適的設(shè)計場景，注意時間變化，關(guān)注目標(biāo)用戶，明確想要達到的目的。

這里請認(rèn)真查看上圖，明確顏色的意義。但如果你非要冒險追求獨一無二的設(shè)計，那么祝您好運。

大圖模式

2）留心藍色

為什么專門談藍色？藍色不是海洋天空的專屬色，藍色也是UI 設(shè)計的青睞色。

看看你常用的一些比較有名的APP或者網(wǎng)站，比如Facebook，Safari以及辦公軟件等等。有什么發(fā)現(xiàn)呢？是的，它們的界面都是藍色，各種層次的藍色。

有研究表明，藍色是唯一一種讓女性和男性都鐘愛的顏色。藍色幾乎無處不在，大自然中，各網(wǎng)站的UI界面，服飾衣物等，藍色隨處可見。包括我此刻寫入文章的Microsoft Word，界面也是藍色的。

藍色無疑是一種安全的顏色，它能最大程度上獲得用戶的信任并被廣泛接受，藍色可以說是UI配色中的典型例子。如果你的UI界面沒有更好的選擇，請用藍色。

大圖模式

3）背景色和元素之間的色彩變化技巧

看看以下的界面：

大圖模式

（來源）

這里暫且不談這又是關(guān)于藍色的UI界面，讓我們專注于它的色彩變化。主題顏色是藍色，其他元素是較暗的藍色和更明亮的藍色。整體看上去，各層次的顏色平衡和諧且又脈絡(luò)清晰。

怎么做到自然而又極具美感的色彩變化？

只是一個簡單的黃金法則：通過降低亮度和增加飽和度可以使色彩變得更深；通過增加亮度和降低飽和度來使色彩變得更淺。

4）色彩組合的黃金比例——（6：3：1）規(guī)則

在設(shè)計時，色彩組合必不可免。組合顏色很容易，但組合后如何避免色彩混亂和累贅？如何既能夠不顯得單調(diào)又展示設(shè)計感？

記住二個原則：

第一個：6：3：1規(guī)則

60％+ 30％+ 10％的比例是為了平衡顏色。這個公式能創(chuàng)造出一種平衡的感覺，并能提供更佳的用戶體驗，可以讓用戶的實現(xiàn)從一個點舒緩的移動到另一個點。

第二個：最多3個原色

這個規(guī)則與黃金（6：3：1）規(guī)則相匹配。這是避免混亂并保持平衡的最佳辦法。

大圖模式

5）顏色組合和互補

提供和諧的配色方案時，需要注意些什么？在這個過程中需要考慮以下方面：

第一， 色調(diào)

您可以在色環(huán)上生成單個“色度”的許多變體。通過添加白色，黑色和灰色來生成不同的色調(diào)。

實現(xiàn)平衡色調(diào)，最簡單的方案是單色（單色）方案。

第二， 對比

顏色的不同對比可以喚起不同的情感反應(yīng)。色輪上相對的兩種顏色可以提供最高的對比度，比如黑色和白色。強烈的對比度可以讓人集中精力，并且產(chǎn)生緊張的心情; 柔和的對比度則適用于輕松、休閑的UI設(shè)計。

大圖模式

注意：對比的使用不要過火，這樣容易使用戶產(chǎn)生困擾。

6）黑白色搭配不過時

黑色是所有中性色中最強的，而白色是最常用的背景顏色。黑色是一個很好的選擇，有種高端和永恒的感覺，而白色可以帶給用戶自由，寬敞和透氣的感覺。如上所述，黑色和白色也是最大的對比色，如果合理的使用黑色配合白色，會營造出一種優(yōu)雅的氛圍。黑白色的搭配主要用于網(wǎng)站UI界面。

大圖模式

7）從自然和藝術(shù)中獲得靈感

自然與藝術(shù)是靈感的主要源泉。抬頭看看天空，你會發(fā)現(xiàn)藍色發(fā)揮到淋淋盡致的經(jīng)典模樣。從大自然中獲得的配色靈感可以使您的設(shè)計更加切合用戶的審美，非常自然，不帶刻意的痕跡。而藝術(shù)是對自然的直接反映，是非常寶貴的資源，值得好好利用。

大圖模式

8）顏色心理學(xué) – 避免性別誤區(qū)

或許天生如此，女人不喜歡灰色，橙色和棕色。她們鐘愛藍色，紫色和綠色。而男人不喜歡紫色，橙色和棕色。男人喜歡藍色，綠色和黑色。只要記住，當(dāng)你的產(chǎn)品目標(biāo)用戶群是男性時，選擇能傳達男性氣概的色彩。如果你把運動類App的界面使用了女性色彩，結(jié)果可想而知。

還有一個誤區(qū)，人們以為粉色是女性的喜愛，但結(jié)果也許會讓你大跌眼鏡。

大圖模式

4. 工具和模板

這里我總結(jié)了一些有助于UI配色的工具和模板，希望對您有所幫助：

1）Coolors.co

Coolors.co是挑選顏色的好工具。只需鎖定所選顏色并按空格即可生成調(diào)色板，還提供了鎖定部分色卡再次生成顏色的功能。包括HEX、HSB、RGB、CMYK等四種色彩模式。

2）Mockplus

Mockplus是一款非常方便的UI / UX設(shè)計工具，其啟動頁面加入了配色精美的示例項目和模板，可直接導(dǎo)入桌面客戶端。其編輯器中，可對組件進行多樣的色彩設(shè)置和編輯，內(nèi)部也包含完整的顏色選擇器，支持導(dǎo)入圖片和GIF，如果您是要在原型設(shè)計過程中產(chǎn)出精美的UI 界面，Mockplus能滿足您的需求。

大圖模式

3）Paletton

Paletton有點類似于Kuler，但又不僅限于5個色調(diào)。當(dāng)您已經(jīng)擁有原色并想要使用其他色調(diào)時，Paletton將會是您很好的選擇，它可以創(chuàng)建協(xié)同色彩組合工作，是強大的UI調(diào)色板。

4）Check my Color

Check my Color是一款可以用于檢查所有DOM元素的前景和背景顏色組合的工具，也是一款能夠檢查不同網(wǎng)頁自己的顏色亮度和對比度差異的工具。

5）Chinaz

該網(wǎng)站提供了豐富的配色資源，包括在線調(diào)色板，網(wǎng)頁常用色彩，web安全色以及網(wǎng)頁顏色選擇器，會使您UI 配色的一個很好的幫助。建議對色彩運用比較初級的設(shè)計師可以做一個參考。

注意：可用性是關(guān)鍵

創(chuàng)建華麗的UI界面永遠不是最終的目標(biāo)。提供卓越的用戶體驗，為用戶的生活增添快樂和幸福才是我們設(shè)計的目的。因此，在UI 設(shè)計配色上，每位UI設(shè)計師應(yīng)該記住，界面應(yīng)該是符合高度實用和并且清晰明了的。

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

                                                            

 

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

 

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

react全家桶從0到1(最新)

本文從零開始，逐步講解如何用react全家桶搭建一個完整的react項目。文中針對react、webpack、babel、react-route、redux、redux-saga的核心配置會加以講解，通過這個項目，可以系統(tǒng)的了解react技術(shù)棧的主要知識，避免搭建一次后面就忘記的情況。

代碼庫：https://github.com/teapot-py/react-demo

首先關(guān)于主要的npm包版本列一下：

1. react@16.7.0
2. webpack@4.28.4
3. babel@7+
4. react-router@4.3.1
5. redux@4+

從webpack開始

思考一下webpack到底做了什么事情？其實簡單來說，就是從入口文件開始，不斷尋找依賴，同時為了解析各種不同的文件加載相應(yīng)的loader，最后生成我們希望的類型的目標(biāo)文件。

這個過程就像是在一個迷宮里尋寶，我們從入口進入，同時我們也會不斷的接收到下一處寶藏的提示信息，我們對信息進行解碼，而解碼的時候可能需要一些工具，比如說鑰匙，而loader就像是這樣的鑰匙，然后得到我們可以識別的內(nèi)容。

回到我們的項目，首先進行項目的初始化，分別執(zhí)行如下命令

mkdir react-demo // 新建項目文件夾
cd react-demo // cd到項目目錄下
npm init // npm初始化 


    

        1
    

    

        2
    

    

        3
    

引入webpack

npm i webpack --save
touch webpack.config.js 


    

        1
    

    

        2
    

對webpack進行簡單配置，更新webpack.config.js

const path = require('path');

module.exports = {
  entry: './app.js', // 入口文件
  output: {
    path: path.resolve(__dirname, 'dist'), // 定義輸出目錄
    filename: 'my-first-webpack.bundle.js'  // 定義輸出文件名稱
  }
}; 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

更新package.json文件，在scripts中添加webpack執(zhí)行命令

"scripts": {
  "dev": "./node_modules/.bin/webpack --config webpack.config.js"
} 


    

        1
    

    

        2
    

    

        3
    

如果有報錯請按提示安裝webpack-cli

npm i webpack-cli 


    

        1
    

執(zhí)行webpack

npm run dev 


    

        1
    

如果在項目文件夾下生成了dist文件，說明我們的配置是沒有問題的。

接入react

安裝react相關(guān)包

npm install react react-dom --save 


    

        1
    

更新app.js入口文件

import React from 'react
import ReactDom from 'react-dom';
import App from './src/views/App';

ReactDom.render(<App />, document.getElementById('root')); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

創(chuàng)建目錄 src/views/App，在App目錄下，新建index.js文件作為App組件，index.js文件內(nèi)容如下：

import React from 'react';

class App extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (<div>App Container</div>);
    }
}
export default App; 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

在根目錄下創(chuàng)建模板文件index.html

<!DOCTYPE html>
<html>
<head>
    <title>index</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
</head>
<body>
    <div id="root"></div>
</body>
</html> 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

到了這一步其實關(guān)于react的引入就OK了，不過目前還有很多問題沒有解決

1. 如何解析JS文件的代碼？
2. 如何將js文件加入模板文件中？

Babel解析js文件

Babel是一個工具鏈，主要用于在舊的瀏覽器或環(huán)境中將ECMAScript2015+的代碼轉(zhuǎn)換為向后兼容版本的JavaScript代碼。

安裝babel-loader，@babel/core，@babel/preset-env，@babel/preset-react

npm i babel-loader@8 @babel/core @babel/preset-env @babel/preset-react -D 


    

        1
    

1. babel-loader：使用Babel轉(zhuǎn)換JavaScript依賴關(guān)系的Webpack加載器, 簡單來講就是webpack和babel中間層，允許webpack在遇到j(luò)s文件時用bable來解析
2. @babel/core：即babel-core，將ES6代碼轉(zhuǎn)換為ES5。7.0之后，包名升級為@babel/core。@babel相當(dāng)于一種官方標(biāo)記，和以前大家隨便起名形成區(qū)別。
3. @babel/preset-env：即babel-preset-env，根據(jù)您要支持的瀏覽器，決定使用哪些transformations / plugins 和 polyfills，例如為舊瀏覽器提供現(xiàn)代瀏覽器的新特性。
4. @babel/preset-react：即 babel-preset-react，針對所有React插件的Babel預(yù)設(shè)，例如將JSX轉(zhuǎn)換為函數(shù).

更新webpack.config.js

 module: {
    rules: [
      {
        test: /\.js$/, // 匹配.js文件
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

根目錄下創(chuàng)建并配置.babelrc文件

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
} 


    

        1
    

    

        2
    

    

        3
    

配置HtmlWebPackPlugin

這個插件最主要的作用是將js代碼通過

npm i html-webpack-plugin -D 


    

        1
    

webpack新增HtmlWebPackPlugin配置

至此，我們看一下webpack.config.js文件的完整結(jié)構(gòu)

const path = require('path');

const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './index.html',
      filename: path.resolve(__dirname, 'dist/index.html')
    })
  ]
}; 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

執(zhí)行 npm run start，生成 dist文件夾

當(dāng)前目錄結(jié)構(gòu)如下

可以看到在dist文件加下生成了index.html文件，我們在瀏覽器中打開文件即可看到App組件內(nèi)容。

配置 webpack-dev-server

webpack-dev-server可以極大的提高我們的開發(fā)效率，通過監(jiān)聽文件變化，自動更新頁面

安裝 webpack-dev-server 作為 dev 依賴項

npm i webpack-dev-server -D 


    

        1
    

更新package.json的啟動腳本

“dev": "webpack-dev-server --config webpack.config.js --open" 


    

        1
    

webpack.config.js新增devServer配置

devServer: {
  hot: true, // 熱替換
  contentBase: path.join(__dirname, 'dist'), // server文件的根目錄
  compress: true, // 開啟gzip
  port: 8080, // 端口
},
plugins: [
  new webpack.HotModuleReplacementPlugin(), // HMR允許在運行時更新各種模塊，而無需進行完全刷新
  new HtmlWebPackPlugin({
    template: './index.html',
    filename: path.resolve(__dirname, 'dist/index.html')
  })
] 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

引入redux

redux是用于前端數(shù)據(jù)管理的包，避免因項目過大前端數(shù)據(jù)無法管理的問題，同時通過單項數(shù)據(jù)流管理前端的數(shù)據(jù)狀態(tài)。

創(chuàng)建多個目錄

1. 新建src/actions目錄，用于創(chuàng)建action函數(shù)
2. 新建src/reducers目錄，用于創(chuàng)建reducers
3. 新建src/store目錄，用于創(chuàng)建store

下面我們來通過redux實現(xiàn)一個計數(shù)器的功能

安裝依賴

npm i redux react-redux -D 


    

        1
    

在actions文件夾下創(chuàng)建index.js文件

export const increment = () => {
  return {
    type: 'INCREMENT',
  };
}; 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

在reducers文件夾下創(chuàng)建index.js文件

const initialState = {
  number: 0
};

const incrementReducer = (state = initialState, action) => {
  switch(action.type) {
    case 'INCREMENT': {
      state.number += 1
      return { ...state }
      break
    };
    default: return state;
  }
};
export default incrementReducer; 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

更新store.js

import { createStore } from 'redux';
import incrementReducer from './reducers/index';

const store = createStore(incrementReducer);

export default store; 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

更新入口文件app.js

import App from './src/views/App';
import ReactDom from 'react-dom';
import React from 'react';
import store from './src/store';
import { Provider } from 'react-redux';

ReactDom.render(
    <Provider store={store}>
        <App />
    </Provider>
, document.getElementById('root')); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

更新App組件

import React from 'react';
import { connect } from 'react-redux';
import { increment } from '../../actions/index';

class App extends React.Component {

    constructor(props) {
        super(props);
    }

    onClick() {
        this.props.dispatch(increment())
    }

    render() {
        return (
            <div>
                <div>current number： {this.props.number} <button onClick={()=>this.onClick()}>點擊+1</button></div>

            </div>
        );
    }
}
export default connect(
    state => ({
        number: state.number
    })
)(App); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

點擊旁邊的數(shù)字會不斷地+1

引入redux-saga

redux-saga通過監(jiān)聽action來執(zhí)行有副作用的task，以保持action的簡潔性。引入了sagas的機制和generator的特性，讓redux-saga非常方便地處理復(fù)雜異步問題。
redux-saga的原理其實說起來也很簡單，通過劫持異步action，在redux-saga中進行異步操作，異步結(jié)束后將結(jié)果傳給另外的action。

下面就接著我們計數(shù)器的例子，來實現(xiàn)一個異步的+1操作。

安裝依賴包

npm i redux-saga -D 


    

        1
    

新建src/sagas/index.js文件

import { delay } from 'redux-saga'
import { put, takeEvery } from 'redux-saga/effects'

export function* incrementAsync() {
  yield delay(2000)
  yield put({ type: 'INCREMENT' })
}

export function* watchIncrementAsync() {
  yield takeEvery('INCREMENT_ASYNC', incrementAsync)
} 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

解釋下所做的事情，將watchIncrementAsync理解為一個saga，在這個saga中監(jiān)聽了名為INCREMENT_ASYNC的action，當(dāng)INCREMENT_ASYNC被dispatch時，會調(diào)用incrementAsync方法，在該方法中做了異步操作，然后將結(jié)果傳給名為INCREMENT的action進而更新store。

更新store.js

在store中加入redux-saga中間件

import { createStore, applyMiddleware } from 'redux';
import incrementReducer from './reducers/index';
import createSagaMiddleware from 'redux-saga'
import { watchIncrementAsync } from './sagas/index'

const sagaMiddleware = createSagaMiddleware()
const store = createStore(incrementReducer, applyMiddleware(sagaMiddleware));
sagaMiddleware.run(watchIncrementAsync)
export default store; 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

更新App組件

在頁面中新增異步提交按鈕，觀察異步結(jié)果

import React from 'react';
import { connect } from 'react-redux';
import { increment } from '../../actions/index';

class App extends React.Component {

    constructor(props) {
        super(props);
    }

    onClick() {
        this.props.dispatch(increment())
    }

    onClick2() {
        this.props.dispatch({ type: 'INCREMENT_ASYNC' })
    }

    render() {
        return (
            <div>
                <div>current number： {this.props.number} <button onClick={()=>this.onClick()}>點擊+1</button></div>
                <div>current number： {this.props.number} <button onClick={()=>this.onClick2()}>點擊2秒后+1</button></div>
            </div>
        );
    }
}
export default connect(
    state => ({
        number: state.number
    })
)(App); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

    

        30
    

    

        31
    

    

        32
    

觀察結(jié)果我們會發(fā)現(xiàn)如下報錯：

這是因為在redux-saga中用到了Generator函數(shù)，以我們目前的babel配置來說并不支持解析generator，需要安裝@babel/plugin-transform-runtime

npm install --save-dev @babel/plugin-transform-runtime 


    

        1
    

這里關(guān)于babel-polyfill、和transfor-runtime做進一步解釋

babel-polyfill

Babel默認(rèn)只轉(zhuǎn)換新的JavaScript語法，而不轉(zhuǎn)換新的API。例如，Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局對象，以及一些定義在全局對象上的方法（比如Object.assign）都不會轉(zhuǎn)譯。如果想使用這些新的對象和方法，必須使用 babel-polyfill，為當(dāng)前環(huán)境提供一個墊片。

babel-runtime

Babel轉(zhuǎn)譯后的代碼要實現(xiàn)源代碼同樣的功能需要借助一些幫助函數(shù)，而這些幫助函數(shù)可能會重復(fù)出現(xiàn)在一些模塊里，導(dǎo)致編譯后的代碼體積變大。
Babel 為了解決這個問題，提供了單獨的包babel-runtime供編譯模塊復(fù)用工具函數(shù)。
在沒有使用babel-runtime之前，庫和工具包一般不會直接引入 polyfill。否則像Promise這樣的全局對象會污染全局命名空間，這就要求庫的使用者自己提供 polyfill。這些 polyfill一般在庫和工具的使用說明中會提到，比如很多庫都會有要求提供 es5的polyfill。
在使用babel-runtime后，庫和工具只要在 package.json中增加依賴babel-runtime，交給babel-runtime去引入 polyfill 就行了；
詳細(xì)解釋可以參考

babel presets 和 plugins的區(qū)別

Babel插件一般盡可能拆成小的力度，開發(fā)者可以按需引進。比如對ES6轉(zhuǎn)ES5的功能，Babel官方拆成了20+個插件。
這樣的好處顯而易見，既提高了性能，也提高了擴展性。比如開發(fā)者想要體驗ES6的箭頭函數(shù)特性，那他只需要引入transform-es2015-arrow-functions插件就可以，而不是加載ES6全家桶。
但很多時候，逐個插件引入的效率比較低下。比如在項目開發(fā)中，開發(fā)者想要將所有ES6的代碼轉(zhuǎn)成ES5，插件逐個引入的方式令人抓狂，不單費力，而且容易出錯。
這個時候，可以采用Babel Preset。
可以簡單的把Babel Preset視為Babel Plugin的集合。比如babel-preset-es2015就包含了所有跟ES6轉(zhuǎn)換有關(guān)的插件。

更新.babelrc文件配置，支持genrator

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": false,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }
    ]
  ]
} 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

點擊按鈕會在2秒后執(zhí)行+1操作。

引入react-router

在web應(yīng)用開發(fā)中，路由系統(tǒng)是不可或缺的一部分。在瀏覽器當(dāng)前的URL發(fā)生變化時，路由系統(tǒng)會做出一些響應(yīng)，用來保證用戶界面與URL的同步。隨著單頁應(yīng)用時代的到來，為之服務(wù)的前端路由系統(tǒng)也相繼出現(xiàn)了。而react-route則是與react相匹配的前端路由。

引入react-router-dom

npm install --save react-router-dom -D 


    

        1
    

更新app.js入口文件增加路由匹配規(guī)則

import App from './src/views/App';
import ReactDom from 'react-dom';
import React from 'react';
import store from './src/store';
import { Provider } from 'react-redux';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

const About = () => <h2>頁面一</h2>;
const Users = () => <h2>頁面二</h2>;

ReactDom.render(
    <Provider store={store}>
        <Router>
            <Switch>
                <Route path="/" exact component={App} />
                <Route path="/about/" component={About} />
                <Route path="/users/" component={Users} />
            </Switch>
        </Router>
    </Provider>
, document.getElementById('root')); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

更新App組件，展示路由效果

import React from 'react';
import { connect } from 'react-redux';
import { increment } from '../../actions/index';
import { Link } from "react-router-dom";

class App extends React.Component {

    constructor(props) {
        super(props);
    }

    onClick() {
        this.props.dispatch(increment())
    }

    onClick2() {
        this.props.dispatch({ type: 'INCREMENT_ASYNC' })
    }

    render() {
        return (
            <div>
                <div>react-router 測試</div>
                <nav>
                    <ul>
                    <li>
                        <Link to="/about/">頁面一</Link>
                    </li>
                    <li>
                        <Link to="/users/">頁面二</Link>
                    </li>
                    </ul>
                </nav>

                <br/>
                <div>redux & redux-saga測試</div>
                <div>current number： {this.props.number} <button onClick={()=>this.onClick()}>點擊+1</button></div>
                <div>current number： {this.props.number} <button onClick={()=>this.onClick2()}>點擊2秒后+1</button></div>
            </div>
        );
    }
}
export default connect(
    state => ({
        number: state.number
    })
)(App); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

    

        30
    

    

        31
    

    

        32
    

    

        33
    

    

        34
    

    

        35
    

    

        36
    

    

        37
    

    

        38
    

    

        39
    

    

        40
    

    

        41
    

    

        42
    

    

        43
    

    

        44
    

    

        45
    

    

        46
    

    

        47
    

    

        48
    

點擊列表可以跳轉(zhuǎn)相關(guān)路由

總結(jié)

至此，我們已經(jīng)一步步的，完成了一個簡單但是功能齊全的react項目的搭建，下面回顧一下我們做的工作

1. 引入webpack
2. 引入react
3. 引入babel解析react
4. 接入webpack-dev-server提高前端開發(fā)效率
5. 引入redux實現(xiàn)一個increment功能
6. 引入redux-saga實現(xiàn)異步處理
7. 引入react-router實現(xiàn)前端路由

麻雀雖小，五臟俱全，希望通過最簡單的代碼快速的理解react工具鏈。其實這個小項目中還是很多不完善的地方，比如說樣式的解析、Eslint檢查、生產(chǎn)環(huán)境配置，雖然這幾項是一個完整項目不可缺少的部分，但是就demo項目來說，對我們理解react工具鏈可能會有些干擾，所以就不在項目中加了。

后面會新建一個分支，把這些完整的功能都加上，同時也會對當(dāng)前的目錄結(jié)構(gòu)進行優(yōu)化。

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

部分借鑒自：csdn  作者：鄭清

原文鏈接：

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

在與客戶的溝通中，聆聽了許多建議，學(xué)習(xí)到了很多知識，也收到過贊美與批評，在經(jīng)過千錘百煉過后  總結(jié)了一點點經(jīng)驗

首先：

框架選擇

    網(wǎng)站css框架選擇（簡潔，節(jié)約成本，快速開發(fā)）

    對于一些簡單靜態(tài)網(wǎng)站，展示類網(wǎng)站項目，達到快速開發(fā)建站，而又節(jié)約成本人力的情況下 選擇一些用于css庫的框架最為合適，

1.Bootstrap

        Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用于開發(fā)響應(yīng)式布局、移動設(shè)備優(yōu)先的 WEB 項目。

        預(yù)處理工具  雖然可以直接使用 Bootstrap 提供的 CSS 樣式表，但是不要忘記，Bootstrap 的源碼是采用最流行的 CSS 預(yù)處理工具

        一個框架、多種設(shè)備。 你的網(wǎng)站和應(yīng)用能在 Bootstrap 的幫助下通過同一份源碼快速、有效地適配手機、平板和 PC 設(shè)備，這一切都是 CSS 媒體 查詢（Media Query）的功勞。

功能完備  Bootstrap 提供了全面、美觀的文檔，你能在這里找到關(guān)于普通 HTML 元素、HTML 和 CSS 組件以及 jQuery 插件方面的所有詳細(xì)文檔。

Bootstrap 是最受歡迎的 CSS 框架，被認(rèn)為是擁有最好的響應(yīng)性的CSS框架。專為前端開發(fā)而設(shè)計，有助于構(gòu)建web設(shè)計理念、移動優(yōu)先項目、網(wǎng)格系統(tǒng)、排版和按鈕等。

2.layui

開源模塊化前端 UI 框架

開源模塊化前端 UI 框架

      由職業(yè)前端傾情打造，面向全層次的前后端開發(fā)者，易上手開箱即用的 Web UI 組件庫

Layui 是一款采用自身模塊規(guī)范編寫的情懷型前端UI框架，遵循原生HTML/CSS/JS的書寫與組織形式，門檻極低，拿來即用。其外在極簡，卻又不失飽滿的內(nèi)在，體積輕盈，組件豐盈，從核心代碼到API的每一處細(xì)節(jié)都經(jīng)過精心雕琢，非常適合界面的快速開發(fā)。

   3.Semantic-UI

Semantic 是一個開發(fā)框架，可以使用人性化的 HTML 幫助創(chuàng)建漂亮的響應(yīng)式布局。Semantic UI 旨在使網(wǎng)站構(gòu)建過程更加語義化。核心特征是利用自然語言原理使代碼更易于閱讀，更容易理解。

4.Pure

Pure 非常輕量級，經(jīng)過壓縮后不過 3.8KB。這是一個特別為移動端考慮的框架，為了壓縮大小，每一行代碼都經(jīng)過仔細(xì)考量。當(dāng)然如果你不使用框架給出的全部模塊，體量還可以更小。

5.Skeleton

Skeleton 如其名字，非常小巧，設(shè)計簡約，麻雀雖小五臟俱全。網(wǎng)格系統(tǒng)，文本，表單，按鈕，列表，表格，媒體查詢等功能面面俱到。非常適合快速創(chuàng)建簡約網(wǎng)站的需求。

快速搭建

為客戶節(jié)省時間成本， 并滿足客戶快速建站的需求，開發(fā)過程中 使用到css模塊化,html也應(yīng)簡潔實用。

手寫源生 CSS

在我們最初學(xué)習(xí)寫頁面的時候，大家都學(xué)過怎么去寫 css，也就以下幾種情況：

• 行內(nèi)樣式，即直接在 html 中的 style 屬性里編寫 css 代碼。
• 內(nèi)嵌樣式，即在 html h 中的 style 標(biāo)簽內(nèi)編寫 class，提供給當(dāng)前頁面使用。
• 導(dǎo)入樣式，即在內(nèi)聯(lián)樣式中 通過 @import 方法，導(dǎo)入其他樣式，提供給當(dāng)前頁面使用。
• 外部樣式，即使用 html 中的 link 標(biāo)簽，加載樣式，提供給當(dāng)前頁面使用。

我們在不斷摸索中，逐漸形成了以編寫內(nèi)嵌樣式和外部樣式為主要的編寫習(xí)慣。

讀到這里大家肯定有所疑問，為什么不建議使用行內(nèi)樣式？

使用行內(nèi)樣式的缺點

• 樣式不能復(fù)用。
• 樣式權(quán)重太高，樣式不好覆蓋。
• 表現(xiàn)層與結(jié)構(gòu)層沒有分離。
• 不能進行緩存，影響加載效率。

然后我們繼續(xù)剖析一下，為什么不建議使用導(dǎo)入樣式？

經(jīng)測試，在 css 中使用 @import 會有以下兩種情況：

1、在 IE6-8 下，@import 聲明指向的樣式表并不會與頁面其他資源并發(fā)加載，而是等頁面所有資源加載完成后才開始下載。

2、如果在 link 標(biāo)簽中去 @import 其他 css，頁面會等到所有資源加載完成后，才開始解析 link 標(biāo)簽中 @import 的 css。

使用導(dǎo)入樣式的缺點 - 導(dǎo)入樣式，只能放在 style 標(biāo)簽的第一行，放其他行則會無效。 - @import 聲明的樣式表不能充分利用瀏覽器并發(fā)請求資源的行為，其加載行為往往會延后觸發(fā)或被其他資源加載掛起。 - 由于 @import 樣式表的延后加載，可能會導(dǎo)致頁面樣式閃爍。

使用預(yù)處理器 Sass/Less

隨著時間的不斷發(fā)展，我們逐漸發(fā)現(xiàn)，編寫源生的 css 其實并不友好，例如：源生的 css 不支持變量，不支持嵌套，不支持父選擇器等等，這些種種問題，催生出了像 sass/less 這樣的預(yù)處理器。

預(yù)處理器主要是強化了 css 的語法，彌補了上文說了這些問題，但本質(zhì)上，打包出來的結(jié)果和源生的 css 都是一樣的，只是對開發(fā)者友好，寫起來更順滑。

后處理器 PostCSS

隨著前端工程化的不斷發(fā)展，越來越多的工具被前端大佬們開發(fā)出來，愿景是把所有的重復(fù)性的工作都交給機器去做，在 css 領(lǐng)域就產(chǎn)生了 postcss。

postcss 可以稱作為 css 界的 babel，它的實現(xiàn)原理是通過 ast 去分析我們的 css 代碼，然后將分析的結(jié)果進行處理，從而衍生出了許多種處理 css 的使用場景。

常用的 postcss 使用場景有：

• 配合 stylelint 校驗 css 語法
• 自動增加瀏覽器前綴 autoprefixer
• 編譯 css next 的語法

更多 postcss 使用場景

CSS 模塊化迅速發(fā)展

隨著 react、vue 等基于模塊化的框架的普及使用，我們編寫源生 css 的機會也越來越少。我們常常將頁面拆分成許多個小組件，然后像搭積木一樣將多個小組件組成最終呈現(xiàn)的頁面。

但是我們知道，css 是根據(jù)類名去匹配元素的，如果有兩個組件使用了一個相同的類名，后者就會把前者的樣式給覆蓋掉，看來解決樣式命名的沖突是個大問題。

為了解決這個問題，產(chǎn)生出了 CSS 模塊化的概念。

CSS 模塊化定義

• 你是否為 class 命名而感到苦惱？
• 你是否有怕跟別人使用同樣 class 名而感到擔(dān)憂？
• 你是否因?qū)蛹壗Y(jié)構(gòu)不清晰而感到煩躁？
• 你是否因代碼難以復(fù)用而感到不爽？
• 你是否因為 common.css 的龐大而感到恐懼？

你如果遇到如上問題，那么就很有必要使用 css 模塊化。

CSS 模塊化的實現(xiàn)方式

BEM 命名規(guī)范

BEM 的意思就是塊（block）、元素（element）、修飾符（modifier）。是由 Yandex 團隊提出的一種前端命名方法論。這種巧妙的命名方法讓你的 css 類對其他開發(fā)者來說更加透明而且更有意義。

BEM 的命名規(guī)范如下：

/* 塊即是通常所說的 Web 應(yīng)用開發(fā)中的組件或模塊。每個塊在邏輯上和功能上都是相互獨立的。 */ .block { } /* 元素是塊中的組成部分。元素不能離開塊來使用。BEM 不推薦在元素中嵌套其他元素。 */ .block__element { } /* 修飾符用來定義塊或元素的外觀和行為。同樣的塊在應(yīng)用不同的修飾符之后，會有不同的外觀 */ .block--modifier { }

通過 bem 的命名方式，可以讓我們的 css 代碼層次結(jié)構(gòu)清晰，通過嚴(yán)格的命名也可以解決命名沖突的問題，但也不能完全避免，畢竟只是一個命名約束，不按規(guī)范寫照樣能運行。

CSS Modules

CSS Modules 指的是我們像 import js 一樣去引入我們的 css 代碼，代碼中的每一個類名都是引入對象的一個屬性，通過這種方式，即可在使用時明確指定所引用的 css 樣式。

并且 CSS Modules 在打包的時候會自動將類名轉(zhuǎn)換成 hash 值，完全杜絕 css 類名沖突的問題。

使用方式如下：

1、定義 css 文件。

.className { color: green; } /* 編寫全局樣式 */ :global(.className) { color: red; } /* 樣式復(fù)用 */ .otherClassName { composes: className; color: yellow; } .otherClassName { composes: className from "./style.css"; }

2、在 js 模塊中導(dǎo)入 css 文件。

import styles from "./style.css"; element.innerHTML = '<div class="' + styles.className + '">'; 

3、配置 css-loader 打包。

CSS Modules 不能直接使用，而是需要進行打包，一般通過配置 css-loader 中的 modules 屬性即可完成 css modules 的配置。

// webpack.config.js module.exports = { module: { rules: [ { test: /\.css$/, use:{ loader: 'css-loader', options: { modules: { // 自定義 hash 名稱  localIdentName: '[path][name]__[local]--[hash:base64:5]', } } } ] } }; 

4、最終打包出來的 css 類名就是由一長串 hash 值生成。

._2DHwuiHWMnKTOYG45T0x34 { color: red; } ._10B-buq6_BEOTOl9urIjf8 { background-color: blue; }

CSS In JS

CSS in JS，意思就是使用 js 語言寫 css，完全不需要些單獨的 css 文件，所有的 css 代碼全部放在組件內(nèi)部，以實現(xiàn) css 的模塊化。

CSS in JS 其實是一種編寫思想，目前已經(jīng)有超過 40 多種方案的實現(xiàn)，最出名的是 styled-components。

使用方式如下：

import React from "react"; import styled from "styled-components"; // 創(chuàng)建一個帶樣式的 h1 標(biāo)簽 const Title = styled.h1`  font-size: 1.5em;  text-align: center;  color: palevioletred; `; // 創(chuàng)建一個帶樣式的 section 標(biāo)簽 const Wrapper = styled.section`  padding: 4em;  background: papayawhip; `; // 通過屬性動態(tài)定義樣式 const Button = styled.button`  background: ${props => (props.primary ? "palevioletred" : "white")};  color: ${props => (props.primary ? "white" : "palevioletred")};   font-size: 1em;  margin: 1em;  padding: 0.25em 1em;  border: 2px solid palevioletred;  border-radius: 3px; `; // 樣式復(fù)用 const TomatoButton = styled(Button)`  color: tomato;  border-color: tomato; `; <Wrapper> <Title>Hello World, this is my first styled component!</Title> <Button primary>Primary</Button> </Wrapper>; 

可以看到，我們直接在 js 中編寫 css，案例中在定義源生 html 時就創(chuàng)建好了樣式，在使用的時候就可以渲染出帶樣式的組件了。

除此之外，還有其他比較出名的庫：

• emotion
• radium
• glamorous

總結(jié)

最后放一張總結(jié)好的圖。

下一篇我們講一下主流js框架 與js開發(fā)

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

部分借鑒自：知乎 作者：孟思行

原文鏈接：

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

Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用于開發(fā)響應(yīng)式布局、移動設(shè)備優(yōu)先的 WEB 項目。

Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用于開發(fā)響應(yīng)式布局、移動設(shè)備優(yōu)先的 WEB 項目。

Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用于開發(fā)響應(yīng)式布局、移動設(shè)備優(yōu)先的 WEB 項目。

這篇文章很好，提供了一種“以用戶為中心”把自己和項目組成員隨時假定為一個用戶的身份，去思考，提出一系列問題，把這些問題編號，去一一解決，注重用戶體驗，以此為基本框架，嚴(yán)格遵守，一旦設(shè)立不增加臨時的多余的功能，不把沒有用戶故事的界面元素放在界面上，保證了精簡的內(nèi)容圍繞確立的框架中，井井有條。這篇文章值得看十遍。

隨著大數(shù)據(jù)的興起，數(shù)據(jù)價值的不斷挖掘，圖表作為數(shù)據(jù)呈現(xiàn)與分析的有效手段，正扮演著越來越重要的角色。我們在進行B端平臺設(shè)計時也在思考：如何讓圖表清晰的傳達信息，同時帶來美觀的視覺感受。

為了達到清晰傳達和視覺美觀的目標(biāo)，我們結(jié)合實際項目，進行大量探索及思考，梳理總結(jié)了一套適用于B端后臺類產(chǎn)品的圖表設(shè)計思路及方法，涵蓋了曲線圖、柱狀圖、餅圖、雷達圖、漏斗圖等各類常用圖表類型。

圖表視覺層級

圖表能夠承載大量數(shù)據(jù)信息，同時視覺元素較多，如果只是憑借設(shè)計師的審美喜好進行視覺設(shè)計，沒有整體信息讀取考量，可能會導(dǎo)致重要信息未能凸顯，降低用戶讀取效率。

為清晰傳達信息，進一步提升讀取效率，我們采用元素重要程度與視覺強度相綁定的方法。依據(jù)元素重要程度，將圖表元素分為三類，分別為“底層元素”、“中層元素”和“頂層元素”，并依據(jù)不同視覺強度分別設(shè)計三類元素。底層元素最弱，頂層元素最強。通過這種方法，梳理圖表元素的前后關(guān)系，能夠清晰把握元素視覺層次，保證信息傳遞效率。

| 底層元素設(shè)計

在各類圖表中，我們把輔助說明數(shù)據(jù)的軸線、刻度等定義為底層元素。為了減少視覺干擾，最大程度突出主圖形，底層元素全部使用淺灰色進行設(shè)計。我們發(fā)現(xiàn)，當(dāng)元素與背景顏色的明度對比在1.2:1時，人眼較難看到元素；當(dāng)對比度在2.0:1時，視覺強度過強，易吸引用戶注意力。通過元素視覺強度的調(diào)研及視覺嘗試，最終確定元素與背景對比度在1.6:1左右，視覺強度偏弱但人眼能夠看清的程度。以保證元素視覺不突兀，只在需要查看時可以被發(fā)現(xiàn)。

| 中層元素設(shè)計

中層元素的內(nèi)容包括數(shù)據(jù)圖形、數(shù)據(jù)線段等承載主要數(shù)據(jù)信息的元素，是圖表中表達數(shù)據(jù)的關(guān)鍵元素。與底層元素相比，中層元素采用更低明度與更高飽和度的數(shù)據(jù)色來表現(xiàn)，使元素從頁面中凸顯出來，保證可讀性。同時在樣式上適當(dāng)加入漸變、描邊等樣式，豐富視覺層次，帶來美觀的視覺感受。

| 頂層元素設(shè)計

我們把頂層元素定義為圖表高亮信息，內(nèi)容包括懸停樣式、懸停后的詳細(xì)數(shù)據(jù)說明等。在設(shè)計上為保證視覺樣式突出，使用深灰色、強調(diào)色等強對比度樣式，并輔以動畫、投影等手法保證明顯的視覺強調(diào)效果，保證頂層信息最有效的傳達給用戶。

| 最終效果

通過層級梳理，并綁定元素重要程度和視覺強度的方法，設(shè)計后圖表主次信息均按重要程度進行對應(yīng)視覺強度的展示，讓用戶能夠在第一時間接收到最重要的信息，提升信息讀取效率。

圖表排版設(shè)計

圖表排版是指各元素在圖表中的尺寸及布局等，對于B端后臺類產(chǎn)品來說，不同排版對用戶使用體驗造成較大影響。如何建立一套合理的規(guī)范保證用戶的使用體驗？我們經(jīng)過大量討論推敲，梳理出一套針對B端后臺類產(chǎn)品的排版規(guī)則，力求保證用戶圖表的使用體驗。

| 圖表尺寸

圖表尺寸指圖表整體長寬高。在項目中我們發(fā)現(xiàn)不同尺寸的圖表對數(shù)據(jù)展現(xiàn)效果影響巨大，例如巨量數(shù)據(jù)的圖表擠在名片大小的區(qū)域例顯示，這使得信息讀取的效率大打折扣。為此我們收集并提取出“全貌概覽”、“多角度環(huán)視”、“詳情分析”三類典型場景，并制定了“迷你圖”、“中號圖表”、“大號圖表”三類尺寸，針對不同尺寸優(yōu)化圖表的信息展示密度，以達到高效讀取信息的目的。

“迷你圖”尺寸最小，舍棄了Y軸等不必要信息，利用小面積展示最關(guān)鍵的圖表信息，并控制數(shù)據(jù)密度，保證信息高效讀取。

“中號圖表”尺寸受限，限制坐標(biāo)軸刻度數(shù)量和數(shù)據(jù)的密度，例如曲線圖數(shù)據(jù)點不高于每4像素1個數(shù)據(jù)點，Y軸坐標(biāo)刻度不超過5個，以確保信息密度不過載，這類圖表尺寸通常用在針對某大類內(nèi)容進行多方面檢視時。

“大號圖表”尺寸最大，不限制數(shù)據(jù)信息密度，給予最全最詳細(xì)的展示，這類尺寸通常用在數(shù)據(jù)詳情頁等詳細(xì)分析場景中。

最后考慮到多圖表混合排列時，餅圖、地圖等大面積填色圖表，相較折線圖等描邊型圖表，視覺感受更加膨脹。我們縮小了填色類圖表的實際高度，保證多種圖表混合排列時，視覺感受的均衡。

| 坐標(biāo)軸

坐標(biāo)軸在圖表中出現(xiàn)的頻率較高，那么坐標(biāo)軸常見的設(shè)計問題有哪些呢？

第一是橫縱坐標(biāo)軸的刻度出現(xiàn)過密情況。

如果坐標(biāo)軸所承載的是連續(xù)數(shù)據(jù)（連續(xù)數(shù)據(jù)指可量化的，連續(xù)不斷的，在區(qū)間內(nèi)可任意取值的數(shù)據(jù)，如時間、金額、人數(shù)等），設(shè)計師可自行增減刻度數(shù)量以保證視覺舒適度。如果承載是離散數(shù)據(jù)（離散數(shù)據(jù)指不可量化的，無關(guān)聯(lián)的，不可在區(qū)間內(nèi)任意取值的數(shù)據(jù)，如分類、軟件版本、省份等），可采取增加坐標(biāo)軸縮放功能以解決.

第二個常見問題是刻度的說明文字過長。

如果是X軸（橫軸）文字過長，除了在可控范圍內(nèi)減少刻度，還可采取文字傾斜45°~90°的辦法(如文字全部為中文，可用豎排代替傾斜90°)，緩解信息過密看不清的情況。

如果是Y軸（縱軸）文字過長，需聯(lián)合研發(fā)一起調(diào)整數(shù)據(jù)的單位，比如把“元”調(diào)整為“百萬元”。

如果不能調(diào)整，那就要根據(jù)所使用的圖表庫有針對性調(diào)整。例如常用的Echarts圖表、D3圖表等開源圖表庫，需要提前預(yù)估刻度文字長度并預(yù)留出來，否則刻度文字可能會被頁面裁掉而不能完全顯示。如你是用的是AntV等可自適應(yīng)的圖表庫，則不必提前處理，圖表庫會自動按刻度長度進行整體調(diào)整。

| 圖例

圖例作為圖表中不可或缺的部分，在各類圖表庫中位置不盡相同，由于不同圖表樣式差異很大，圖例的位置需整體考慮并適當(dāng)布局?jǐn)[放，但在同一產(chǎn)品或頁面內(nèi)，過于隨意的擺放圖例，會導(dǎo)致頁面統(tǒng)一性較差，同時增加用戶的瀏覽成本。我們團隊所負(fù)責(zé)的B端商業(yè)產(chǎn)品矩陣，作為面向用戶的產(chǎn)品集合，產(chǎn)品間聯(lián)系非常緊密。過于靈活隨意的圖例擺放不利于用戶對于圖表的瀏覽。為解決此問題，我們基于業(yè)務(wù)特點，針對B端商業(yè)產(chǎn)品矩陣制定了圖例布局指導(dǎo)原則。

我們以提升屏幕信息密度為目標(biāo)，分析不同場景的頁面排布，制定了頂部和右側(cè)兩種較為寬松的指導(dǎo)原則，供設(shè)計師在沒有明確的更優(yōu)方案時選用。

當(dāng)圖表是左右兩端對齊的類型，例如折線圖、柱狀圖時，建議將圖例放置在圖表頂部。這樣能結(jié)合標(biāo)題等其他元素進行統(tǒng)一排布，減少占用空間。當(dāng)圖表本身左右都有空余空間時，例如餅圖，建議將圖例放置于圖表的右側(cè)。也能夠節(jié)省頁面的空間。

數(shù)據(jù)色板設(shè)計

色板作為常見的數(shù)據(jù)表達手段，能夠利用不同顏色明確體現(xiàn)分類信息、數(shù)值高度、狀態(tài)信息等。但目前市面上鮮有專業(yè)用途圖表的配色工具。我們經(jīng)過大量探索嘗試，梳理總結(jié)出圖表色彩的兩個關(guān)鍵維度：辨識度與統(tǒng)一性。既需要顏色間突出強烈可清晰辨別，又需要顏色整體能形成統(tǒng)一風(fēng)格，以達到清晰傳遞和美觀的目標(biāo)。如何平衡辨識度與統(tǒng)一性，是我們遇到的難題。

| 辨識度

辨識度在圖表中有兩方面：顏色與頁面底色的辨識度，各顏色之間的辨識度。對于第一種，我們采用控制顏色的明亮程度來確保色彩辨識度，尤其對于黃色、青色等本身較亮的顏色，降低顏色的明度，確保在淺色背景下顏色可辨識。

對于第二種也就是各顏色之間的辨識度，通過實驗發(fā)現(xiàn)單純的顏色色相變化，例如紅色與橙色的區(qū)分，人眼不容易分辨。所以采用了色相變化+明度變化的方法，既深紅色與亮橙色，深藍色與亮紫色等，這樣用戶能在第一眼就明確分辨，保證顏色間的辨識度。最終把顏色映射到色彩空間的三維坐標(biāo)中，運用歐幾里得距離公式測算顏色間的距離長短，來衡量各顏色間色差數(shù)值。顏色間距離越遠代表色差越大，利用數(shù)據(jù)輔助衡量辨識效果。

| 統(tǒng)一性

色彩統(tǒng)一性的作用在于確保圖表整體風(fēng)格一致，色彩搭配舒適，從而帶來美觀、統(tǒng)一的視覺感受。為達目的，我們首先提煉商業(yè)產(chǎn)品設(shè)計風(fēng)格為明亮、強對比，其次把設(shè)計風(fēng)格轉(zhuǎn)化為色彩數(shù)值。經(jīng)過實驗，把顏色明度限制在50%-70%，把飽和度限制在75%-85%，并在區(qū)間內(nèi)不斷波動。這樣既保證了色彩視覺感受的統(tǒng)一，各顏色間又能夠有清晰的辨識度。

| 顏色量化與工具

量化顏色，將色彩轉(zhuǎn)化為數(shù)值，利用數(shù)值來驗證設(shè)計師的「感覺」，能夠保證方案合理性，保證設(shè)計質(zhì)量。但通過嘗試，我們常用的色彩模式均不能科學(xué)合理的量化顏色。通過查閱大量資料，我們最終決定以小眾的HCL色彩模式來衡量色彩。其中H表示色相、C表示飽和度、L表示明度。HCL區(qū)別于傳統(tǒng)的RGB或HSB模式，它能夠?qū)⑷搜蹖︻伾母兄_的量化為數(shù)值，例如黃色相比藍色明度更高，都能如實的反饋到數(shù)值上。也由于此特性，HCL模式在誕生距今不到20年間，已被一些先鋒設(shè)計師用于數(shù)據(jù)可視化的呈現(xiàn)中。

但是HCL作為小眾色彩模式，目前設(shè)計軟件鮮有支持，造成了HCL色彩不直觀、不方便調(diào)色等的問題。為解決此問題，我們已初步完成智能配色程序，只需輸入品牌色，就能自動生成圖表色版，并在風(fēng)格上與品牌色匹配，達到整體色彩的統(tǒng)一。我們也將一套調(diào)配好的色板及HCL實用小工具附在文末，幫助大家直觀的查看和使用HCL模式顏色。 

結(jié)語

數(shù)據(jù)價值就像不為人知的寶藏，隱藏在一條條枯燥晦澀的數(shù)據(jù)背后。而圖表則是開啟寶藏的鑰匙，是發(fā)掘數(shù)據(jù)價值的強有力武器。通過對圖表的不斷探索優(yōu)化，我們希望能夠最大化數(shù)據(jù)的價值。通過圖表，讓數(shù)據(jù)最直觀的展現(xiàn)；通過圖表，讓其背后的規(guī)律浮出水面被人探知；通過圖表，讓B端不再有難懂的數(shù)據(jù)。

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

文章來源：站酷  作者：百度MEUX

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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