1. 到底什么是圖？

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

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

本質上來說，通過前面的小游戲收集到的數據是一張表格數據，當把這些靜態的數據以某個維度的信息關聯起來，就能構建成一張圖，基于這張圖我們能進行各種各樣的解讀和分析。這其實就構成了在我們圖這個領域中的 DIKW 模型。把靜態的數據，逐步轉化成信息，再到分析出有意義的「知識」，在實際的業務場景中，借助算法或者更復雜的分析手段，甚至能從圖中分析出價值更高的「智慧」。

隨著一張圖中的節點數量越多，節點之間能互相產生的關系會指數型的增長，對于這個關系網來說，它能產生的經濟效益也是指數型的增長，在經濟學領域把這一效應稱之為「梅特卡夫效應」。其實在日常生活中，最常見的圖，就是一張由人際關系構成的社交關系網絡，我們每天都在用的各種社交平臺都符合這一效應。

在實際的 B 端業務場景中，圖在圖數據庫、網絡安全、企業風控、知識圖譜等場景下有非常廣泛的應用。

2. 設計挑戰

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

2.1 視覺通道有限

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

2.2 數據量超預期

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

2.3 連續分析效果不可控

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

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

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

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

3. 設計指引

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

  

3.1 全局樣式

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

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

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

• 數據特性：數據中固有的一些特性，比如類型、規模、權限等，這些特性不會隨著呈現的平臺的不同而變化，而是屬于數據本身的一些特性；

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

• 鼠標狀態：鼠標 Hover 、Focus、Disable 等常見鼠標交互事件

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

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

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

3.2 交互規范

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

3.3 組件 & 分析模式

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

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

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

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

• 特殊場景：

• 內置了 AI 算法能力的分析場景：這類分析場景通常需要借助內置的算法或規則推理能力來實現，從海量數據中快捷的挖掘出符合特定規則的目標節點和關系，常見的有：擔保圈、實控人、最短路徑等；

• 結合時間或地理信息的分析場景：在源數據中含有時間和地理維度的內容時，會出現結合時間或地理信息的分析場景。

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

從 ETCGG 的角度出發，介紹了「AntV 圖可視分析解決方案」設計相關的內容，解決方案還有非常重要一部分的內容就是「技術方案」，稍后會由我的搭檔 @山果 給大家帶來更詳細的介紹內容。

總結

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

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

圖可視分析領域是一個小眾而又專業度很高的領域，希望以上的分享的實踐和思考能給在這個領域相關的同學一些啟發。目前設計在這一領域剛剛開始邁出一小步，還有巨大的未知和機會等著我們去探索，歡迎通過各種渠道隨時交流。

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

文章來源：站酷   作者：Ant_Design

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

前言

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

什么是服務藍圖？

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

1. 主要構成

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

用戶行為

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

前臺

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

后臺

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

支持

支持過程包含內部人員和外部人員履行的服務步驟和互動行為。

如何用服務藍圖優化產品/業務？

優化產品/業務主要從 4 個關鍵點出發：

1. 找出服務流程的崩潰點或斷點

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

怎么找到崩潰點和斷點？

主要從「田野調查」和「深度訪談」獲得。可根據實際的項目展開定性研究。

2. 新服務、新體驗該怎么執行

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

還是以無人零售商店舉例：前期準備節點

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

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

該怎么執行：根據藍圖規劃設計“高峰值”的體驗點，對購物流程說明的物料進行資源傾斜。

3. 衡量服務過程的每一步是否達標

衡量的標準：數據角度出發/用戶購物速度/體驗流程的銜接度等等

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

4. 定義服務的“高峰值”

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

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

舉個栗子：宜家購物

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

服務藍圖的增值體現

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

1. 時間：服務質量再高也會隨著時間的消耗而消耗。

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

2. 衡量標準：服務的成功或價值需要一些體驗因素來衡量。

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

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

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

注釋說明：在內部討論時，將說明的重點用 icon 的形式標記出來

#完整的服務藍圖

總結

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

服務藍圖的結構要素，實際上定義了服務傳遞系統的整體規劃，包括服務的設置、服務能力的規劃。服務藍圖不是一個人的事情，在服務環節中的每個人都必須把“用戶滿意”作為自己的服務標準。服務藍圖提供了一個全局觀點。服務藍圖也可以平衡業務需求和用戶需求。

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

文章來源：優設   作者：七月Xavier

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

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

1.利用界面元素尺寸大小建立層級結構

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

大圖模式

如圖，利用文字的尺寸大小，體現網頁信息的層級。

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

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

原型設計技巧：

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

大圖模式

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

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

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

大圖模式

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

原型設計技巧：

而在這一方面，小編發現Mockplus提供了專門透明度屬性，可以根據層級設計需求，修改屬性數值進行設置。

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

大圖模式

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

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

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

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

大圖模式

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

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

大圖模式

如圖，利用紅色突出網頁促銷信息。

其次，色彩飽和度的梯度變化，也可體現直觀而豐富的層次結構。

同一色彩，飽和度的梯度變化，也可幫助展現網站元素的層次結構。如圖：

大圖模式

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

存在同一邏輯關系的各個頁面元素就近放置在同一色彩模塊，可以讓頁面組織結構更加清晰，易于用戶快速查看相關內容。

大圖模式

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

原型設計技巧：

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

當然，結合“形狀”組件，為頁面添加豐富的功能色塊，以及添加“鼠標懸停時”或“點擊時”的簡單色彩交互狀態，也不是難事。

大圖模式

如圖，添加色塊劃分界面功能結構。

4.利用頁面布局，展現網頁層級結構

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

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

*利用網格劃分不同頁面模塊

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

大圖模式

*利用位置不同體現邏輯關系

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

當然，每個邏輯關系內，結合大小標題和列表進行展示，層級關系會更加深入清晰。

*利用點線

網頁設計中，設計師不僅可以直接使用點線標出需要強調的內容，還可以利用點線劃分頁面板塊和布局。

大圖模式

如圖，通過位置的不同體現內容之間的邏輯關系。同時，利用線條劃分頁面結構和布局。

*利用對齊方式的不同

文字，圖片以及相關元素的對齊方式，也是體驗不同層級結構的重要工具。

總之，頁面布局也可幫助設計師們創建更具美感和層次感的網頁設計。

原型設計技巧：

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

大圖模式

如圖，利用Mockplus的快速格子和自動填充功能制作網頁網格，劃分界面功能結構。

5.利用留白和間距，突出界面視覺內容

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

大圖模式

6.利用對比，凸顯網頁層級結構關系

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

大圖模式

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

此外，頁面元素的相互疊加，清晰度，以及細節展示程度的對比，也能有效地凸顯網頁內容的重要性層級。

大圖模式

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

7.采用不同的界面風格，打造獨特的網頁視覺層級

當然，并不是說設計師就必須通過以上的設計工具展示網頁重要性層級結構。實際上，結合設計師特有創意，獨特紋理（texture），圖形或圖像元素等，打造出具有設計師獨特風格的視覺層級，也會是不錯的嘗試。如下圖：

大圖模式

總之，不管是否使用以上的設計工具，結合設計師創意，打造獨具一格的視覺層級風格，都是不錯的設計理念。

原型設計技巧：

而在這一點上，Mockplus提供了很多優質功能，幫助設計師隨心設計，并簡單快捷的原型化，測試和迭代這些天馬行空的創意。

比如，其團隊協作和團隊管理功能，方便設計師更加高效地完成設計。其8種演示和分享方式，例如導出圖片，HTML以及演示包等等，為設計師根據切實需要，選擇適當的方式測試和分享相關設計提供了便利。

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

8.分析用戶需求和網頁瀏覽模式，優化頁面內容和位置

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

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

根據美國著名網站設計工程師Nielsen Norman Group研究表示，用戶總是在網頁瀏覽中慣用“F”或“Z”型閱讀模式，即用戶常常是從左到右，開頭結尾詳細閱讀，而中間部分則根據網頁或文章大小標題結構，選擇性閱讀的模式。如下圖：

大圖模式

那么，網頁設計中，設計師就需要注意頁面首尾內容的趣味性和實用性，以及中間主體部分注意大小標題簡潔明了，建立清晰的框架層次結構。

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

9.其他設計工具

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

原型設計技巧：

如若設計師希望通過網頁文本的尺寸，字體，顏色，排版以及對齊方式等實現框架結構的構建時，Mockplus的“單行文字”和“多行文字”組件就可以輕松幫助實現。而且，適當的結合一定的交互設計，也可使整款設計更具吸引力。

結語：

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

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

總之，希望以上介紹的相關層次結構設計技巧和原型設計技巧能對你有所啟發。

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

                                                            

 

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

 

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

每當我看到一個漂亮，優雅并且簡潔美觀的界面，就會忍不住保存下來?，F在，我已經收集了100多個美不勝收的UI 界面。在一次次觀摩，欣賞和學習后，我發現這些界面有很多共同點?？删烤故鞘裁醋屛覍λ鼈円灰婄娗槟?？現在我找到了答案，是色彩。

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

1. 色彩的魔力

色彩是會說話的，甚至可以像語言一樣強大?；叵胍韵拢慨斈愠跻娨粋€網站或產品，給你留下第一印象的是什么呢？是視覺外觀，而視覺外觀很大程度上是取決于色彩運用。

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

1）反映品牌的內涵和品質

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

2）實現更佳的用戶體驗

色彩的有效運用能提升整體美感，提供更優的閱讀體驗，創造清晰和諧的風格。

3）影響購買決策

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

2. 色彩的基本概念

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

大圖模式

3. UI 設計配色技巧

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

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

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

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

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

大圖模式

2）留心藍色

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

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

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

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

大圖模式

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

看看以下的界面：

大圖模式

（來源）

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

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

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

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

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

記住二個原則：

第一個：6：3：1規則

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

第二個：最多3個原色

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

大圖模式

5）顏色組合和互補

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

第一， 色調

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

實現平衡色調，最簡單的方案是單色（單色）方案。

第二， 對比

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

大圖模式

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

6）黑白色搭配不過時

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

大圖模式

7）從自然和藝術中獲得靈感

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

大圖模式

8）顏色心理學 – 避免性別誤區

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

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

大圖模式

4. 工具和模板

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

1）Coolors.co

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

2）Mockplus

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

大圖模式

3）Paletton

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

4）Check my Color

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

5）Chinaz

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

注意：可用性是關鍵

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

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

                                                            

 

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

 

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

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

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

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

首先關于主要的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到底做了什么事情？其實簡單來說，就是從入口文件開始，不斷尋找依賴，同時為了解析各種不同的文件加載相應的loader，最后生成我們希望的類型的目標文件。

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

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

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執行命令

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


    

        1
    

    

        2
    

    

        3
    

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

npm i webpack-cli 


    

        1
    

執行webpack

npm run dev 


    

        1
    

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

接入react

安裝react相關包

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
    

創建目錄 src/views/App，在App目錄下，新建index.js文件作為App組件，index.js文件內容如下：

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
    

在根目錄下創建模板文件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
    

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

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

Babel解析js文件

Babel是一個工具鏈，主要用于在舊的瀏覽器或環境中將ECMAScript2015+的代碼轉換為向后兼容版本的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轉換JavaScript依賴關系的Webpack加載器, 簡單來講就是webpack和babel中間層，允許webpack在遇到js文件時用bable來解析
2. @babel/core：即babel-core，將ES6代碼轉換為ES5。7.0之后，包名升級為@babel/core。@babel相當于一種官方標記，和以前大家隨便起名形成區別。
3. @babel/preset-env：即babel-preset-env，根據您要支持的瀏覽器，決定使用哪些transformations / plugins 和 polyfills，例如為舊瀏覽器提供現代瀏覽器的新特性。
4. @babel/preset-react：即 babel-preset-react，針對所有React插件的Babel預設，例如將JSX轉換為函數.

更新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
    

根目錄下創建并配置.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文件的完整結構

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
    

執行 npm run start，生成 dist文件夾

當前目錄結構如下

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

配置 webpack-dev-server

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

安裝 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是用于前端數據管理的包，避免因項目過大前端數據無法管理的問題，同時通過單項數據流管理前端的數據狀態。

創建多個目錄

1. 新建src/actions目錄，用于創建action函數
2. 新建src/reducers目錄，用于創建reducers
3. 新建src/store目錄，用于創建store

下面我們來通過redux實現一個計數器的功能

安裝依賴

npm i redux react-redux -D 


    

        1
    

在actions文件夾下創建index.js文件

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


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

在reducers文件夾下創建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
    

點擊旁邊的數字會不斷地+1

引入redux-saga

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

下面就接著我們計數器的例子，來實現一個異步的+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中監聽了名為INCREMENT_ASYNC的action，當INCREMENT_ASYNC被dispatch時，會調用incrementAsync方法，在該方法中做了異步操作，然后將結果傳給名為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組件

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

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
    

觀察結果我們會發現如下報錯：

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

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


    

        1
    

這里關于babel-polyfill、和transfor-runtime做進一步解釋

babel-polyfill

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

babel-runtime

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

babel presets 和 plugins的區別

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

更新.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秒后執行+1操作。

引入react-router

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

引入react-router-dom

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


    

        1
    

更新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';
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
    

點擊列表可以跳轉相關路由

總結

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

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

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

后面會新建一個分支，把這些完整的功能都加上，同時也會對當前的目錄結構進行優化。

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

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

原文鏈接：

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

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

首先：

框架選擇

    網站css框架選擇（簡潔，節約成本，快速開發）

    對于一些簡單靜態網站，展示類網站項目，達到快速開發建站，而又節約成本人力的情況下 選擇一些用于css庫的框架最為合適，

1.Bootstrap

        Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用于開發響應式布局、移動設備優先的 WEB 項目。

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

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

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

Bootstrap 是最受歡迎的 CSS 框架，被認為是擁有最好的響應性的CSS框架。專為前端開發而設計，有助于構建web設計理念、移動優先項目、網格系統、排版和按鈕等。

2.layui

開源模塊化前端 UI 框架

開源模塊化前端 UI 框架

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

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

   3.Semantic-UI

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

4.Pure

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

5.Skeleton

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

快速搭建

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

手寫源生 CSS

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

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

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

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

使用行內樣式的缺點

• 樣式不能復用。
• 樣式權重太高，樣式不好覆蓋。
• 表現層與結構層沒有分離。
• 不能進行緩存，影響加載效率。

然后我們繼續剖析一下，為什么不建議使用導入樣式？

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

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

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

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

使用預處理器 Sass/Less

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

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

后處理器 PostCSS

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

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

常用的 postcss 使用場景有：

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

更多 postcss 使用場景

CSS 模塊化迅速發展

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

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

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

CSS 模塊化定義

• 你是否為 class 命名而感到苦惱？
• 你是否有怕跟別人使用同樣 class 名而感到擔憂？
• 你是否因層級結構不清晰而感到煩躁？
• 你是否因代碼難以復用而感到不爽？
• 你是否因為 common.css 的龐大而感到恐懼？

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

CSS 模塊化的實現方式

BEM 命名規范

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

BEM 的命名規范如下：

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

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

CSS Modules

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

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

使用方式如下：

1、定義 css 文件。

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

2、在 js 模塊中導入 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 代碼全部放在組件內部，以實現 css 的模塊化。

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

使用方式如下：

import React from "react"; import styled from "styled-components"; // 創建一個帶樣式的 h1 標簽 const Title = styled.h1`  font-size: 1.5em;  text-align: center;  color: palevioletred; `; // 創建一個帶樣式的 section 標簽 const Wrapper = styled.section`  padding: 4em;  background: papayawhip; `; // 通過屬性動態定義樣式 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; `; // 樣式復用 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 時就創建好了樣式，在使用的時候就可以渲染出帶樣式的組件了。

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

• emotion
• radium
• glamorous

總結

最后放一張總結好的圖。

下一篇我們講一下主流js框架 與js開發

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

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

原文鏈接：

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

Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用于開發響應式布局、移動設備優先的 WEB 項目。

Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用于開發響應式布局、移動設備優先的 WEB 項目。

Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用于開發響應式布局、移動設備優先的 WEB 項目。

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

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

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

圖表視覺層級

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

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

| 底層元素設計

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

| 中層元素設計

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

| 頂層元素設計

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

| 最終效果

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

圖表排版設計

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

| 圖表尺寸

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

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

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

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

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

| 坐標軸

坐標軸在圖表中出現的頻率較高，那么坐標軸常見的設計問題有哪些呢？

第一是橫縱坐標軸的刻度出現過密情況。

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

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

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

如果是Y軸（縱軸）文字過長，需聯合研發一起調整數據的單位，比如把“元”調整為“百萬元”。

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

| 圖例

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

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

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

數據色板設計

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

| 辨識度

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

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

| 統一性

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

| 顏色量化與工具

量化顏色，將色彩轉化為數值，利用數值來驗證設計師的「感覺」，能夠保證方案合理性，保證設計質量。但通過嘗試，我們常用的色彩模式均不能科學合理的量化顏色。通過查閱大量資料，我們最終決定以小眾的HCL色彩模式來衡量色彩。其中H表示色相、C表示飽和度、L表示明度。HCL區別于傳統的RGB或HSB模式，它能夠將人眼對顏色的感知精確的量化為數值，例如黃色相比藍色明度更高，都能如實的反饋到數值上。也由于此特性，HCL模式在誕生距今不到20年間，已被一些先鋒設計師用于數據可視化的呈現中。

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

結語

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

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

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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