1. 到底什么是圖？

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

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

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

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

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

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

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

2.1 視覺通道有限

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

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

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

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

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

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

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

       更好的閱讀體驗(yàn)，推薦訪問語雀版 

3. 設(shè)計(jì)指引

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

  

3.1 全局樣式

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

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

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

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

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

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

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

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

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

3.2 交互規(guī)范

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

3.3 組件 & 分析模式

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

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

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

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

• 特殊場(chǎng)景：

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

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

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

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

總結(jié)

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

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

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

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

文章來源：站酷   作者：Ant_Design

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

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

前言

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

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

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

1. 主要構(gòu)成

服務(wù)藍(lán)圖直觀上同時(shí)從 4 個(gè)主要方面展示：

用戶行為

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

前臺(tái)

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

后臺(tái)

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

支持

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

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

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

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

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

怎么找到崩潰點(diǎn)和斷點(diǎn)？

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

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

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

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

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

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

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

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

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

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

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

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

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

舉個(gè)栗子：宜家購物

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

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

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

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

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

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

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

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

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

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

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

總結(jié)

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

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

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

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

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

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

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

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

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

大圖模式

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

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

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

原型設(shè)計(jì)技巧：

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

大圖模式

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

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

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

大圖模式

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

原型設(shè)計(jì)技巧：

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

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

大圖模式

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

3.利用色彩，劃分頁面層級(jí)

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

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

大圖模式

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

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

大圖模式

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

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

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

大圖模式

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

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

大圖模式

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

原型設(shè)計(jì)技巧：

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

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

大圖模式

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

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

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

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

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

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

大圖模式

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

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

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

*利用點(diǎn)線

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

大圖模式

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

*利用對(duì)齊方式的不同

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

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

原型設(shè)計(jì)技巧：

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

大圖模式

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

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

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

大圖模式

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

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

大圖模式

如圖，利用色彩的強(qiáng)烈對(duì)比，突出頁面層級(jí)。

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

大圖模式

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

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

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

大圖模式

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

原型設(shè)計(jì)技巧：

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

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

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

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

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

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

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

大圖模式

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

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

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

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

原型設(shè)計(jì)技巧：

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

結(jié)語：

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

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

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

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

                                                            

 

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

 

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

每當(dāng)我看到一個(gè)漂亮，優(yōu)雅并且簡(jiǎn)潔美觀的界面，就會(huì)忍不住保存下來?，F(xiàn)在，我已經(jīng)收集了100多個(gè)美不勝收的UI 界面。在一次次觀摩，欣賞和學(xué)習(xí)后，我發(fā)現(xiàn)這些界面有很多共同點(diǎn)?？删烤故鞘裁醋屛覍?duì)它們一見鐘情呢？現(xiàn)在我找到了答案，是色彩。

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

1. 色彩的魔力

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

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

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

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

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

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

3）影響購買決策

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

2. 色彩的基本概念

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

大圖模式

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

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

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

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

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

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

大圖模式

2）留心藍(lán)色

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

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

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

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

大圖模式

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

看看以下的界面：

大圖模式

（來源）

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

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

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

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

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

記住二個(gè)原則：

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

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

第二個(gè)：最多3個(gè)原色

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

大圖模式

5）顏色組合和互補(bǔ)

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

第一， 色調(diào)

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

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

第二， 對(duì)比

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

大圖模式

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

6）黑白色搭配不過時(shí)

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

大圖模式

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

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

大圖模式

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

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

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

大圖模式

4. 工具和模板

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

1）Coolors.co

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

2）Mockplus

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

大圖模式

3）Paletton

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

4）Check my Color

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

5）Chinaz

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

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

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

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

                                                            

 

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

 

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

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

本文從零開始，逐步講解如何用react全家桶搭建一個(gè)完整的react項(xiàng)目。文中針對(duì)react、webpack、babel、react-route、redux、redux-saga的核心配置會(huì)加以講解，通過這個(gè)項(xiàng)目，可以系統(tǒng)的了解react技術(shù)棧的主要知識(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到底做了什么事情？其實(shí)簡(jiǎn)單來說，就是從入口文件開始，不斷尋找依賴，同時(shí)為了解析各種不同的文件加載相應(yīng)的loader，最后生成我們希望的類型的目標(biāo)文件。

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

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

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


    

        1
    

    

        2
    

    

        3
    

引入webpack

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


    

        1
    

    

        2
    

對(duì)webpack進(jìn)行簡(jiǎn)單配置，更新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
    

如果有報(bào)錯(cuò)請(qǐng)按提示安裝webpack-cli

npm i webpack-cli 


    

        1
    

執(zhí)行webpack

npm run dev 


    

        1
    

如果在項(xiàng)目文件夾下生成了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
    

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

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

Babel解析js文件

Babel是一個(gè)工具鏈，主要用于在舊的瀏覽器或環(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加載器, 簡(jiǎn)單來講就是webpack和babel中間層，允許webpack在遇到j(luò)s文件時(shí)用bable來解析
2. @babel/core：即babel-core，將ES6代碼轉(zhuǎn)換為ES5。7.0之后，包名升級(jí)為@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，針對(duì)所有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

這個(gè)插件最主要的作用是將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文件，我們?cè)跒g覽器中打開文件即可看到App組件內(nèi)容。

配置 webpack-dev-server

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

安裝 webpack-dev-server 作為 dev 依賴項(xiàng)

npm i webpack-dev-server -D 


    

        1
    

更新package.json的啟動(dòng)腳本

“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允許在運(yùn)行時(shí)更新各種模塊，而無需進(jìn)行完全刷新
  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ù)管理的包，避免因項(xiàng)目過大前端數(shù)據(jù)無法管理的問題，同時(shí)通過單項(xiàng)數(shù)據(jù)流管理前端的數(shù)據(jù)狀態(tài)。

創(chuàng)建多個(gè)目錄

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

下面我們來通過redux實(shí)現(xiàn)一個(gè)計(jì)數(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()}>點(diǎn)擊+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
    

點(diǎn)擊旁邊的數(shù)字會(huì)不斷地+1

引入redux-saga

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

下面就接著我們計(jì)數(shù)器的例子，來實(shí)現(xiàn)一個(gè)異步的+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理解為一個(gè)saga，在這個(gè)saga中監(jiān)聽了名為INCREMENT_ASYNC的action，當(dāng)INCREMENT_ASYNC被dispatch時(shí)，會(huì)調(diào)用incrementAsync方法，在該方法中做了異步操作，然后將結(jié)果傳給名為INCREMENT的action進(jìn)而更新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()}>點(diǎn)擊+1</button></div>
                <div>current number： {this.props.number} <button onClick={()=>this.onClick2()}>點(diǎn)擊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é)果我們會(huì)發(fā)現(xiàn)如下報(bào)錯(cuò)：

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

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


    

        1
    

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

babel-polyfill

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

babel-runtime

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

babel presets 和 plugins的區(qū)別

Babel插件一般盡可能拆成小的力度，開發(fā)者可以按需引進(jìn)。比如對(duì)ES6轉(zhuǎn)ES5的功能，Babel官方拆成了20+個(gè)插件。
這樣的好處顯而易見，既提高了性能，也提高了擴(kuò)展性。比如開發(fā)者想要體驗(yàn)ES6的箭頭函數(shù)特性，那他只需要引入transform-es2015-arrow-functions插件就可以，而不是加載ES6全家桶。
但很多時(shí)候，逐個(gè)插件引入的效率比較低下。比如在項(xiàng)目開發(fā)中，開發(fā)者想要將所有ES6的代碼轉(zhuǎn)成ES5，插件逐個(gè)引入的方式令人抓狂，不單費(fèi)力，而且容易出錯(cuò)。
這個(gè)時(shí)候，可以采用Babel Preset。
可以簡(jiǎn)單的把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
    

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

引入react-router

在web應(yīng)用開發(fā)中，路由系統(tǒng)是不可或缺的一部分。在瀏覽器當(dāng)前的URL發(fā)生變化時(shí)，路由系統(tǒng)會(huì)做出一些響應(yīng)，用來保證用戶界面與URL的同步。隨著單頁應(yīng)用時(shí)代的到來，為之服務(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 測(cè)試</div>
                <nav>
                    <ul>
                    <li>
                        <Link to="/about/">頁面一</Link>
                    </li>
                    <li>
                        <Link to="/users/">頁面二</Link>
                    </li>
                    </ul>
                </nav>

                <br/>
                <div>redux & redux-saga測(cè)試</div>
                <div>current number： {this.props.number} <button onClick={()=>this.onClick()}>點(diǎn)擊+1</button></div>
                <div>current number： {this.props.number} <button onClick={()=>this.onClick2()}>點(diǎn)擊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
    

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

總結(jié)

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

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

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

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

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

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

原文鏈接：

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

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

首先：

框架選擇

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

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

1.Bootstrap

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

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

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

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

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

2.layui

開源模塊化前端 UI 框架

開源模塊化前端 UI 框架

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

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

   3.Semantic-UI

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

4.Pure

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

5.Skeleton

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

快速搭建

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

手寫源生 CSS

在我們最初學(xué)習(xí)寫頁面的時(shí)候，大家都學(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)前頁面使用。

我們?cè)诓粩嗝髦?，逐漸形成了以編寫內(nèi)嵌樣式和外部樣式為主要的編寫習(xí)慣。

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

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

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

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

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

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

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

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

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

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

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

后處理器 PostCSS

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

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

常用的 postcss 使用場(chǎng)景有：

• 配合 stylelint 校驗(yàn) css 語法
• 自動(dòng)增加瀏覽器前綴 autoprefixer
• 編譯 css next 的語法

更多 postcss 使用場(chǎng)景

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

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

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

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

CSS 模塊化定義

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

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

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

BEM 命名規(guī)范

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

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

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

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

CSS Modules

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

并且 CSS Modules 在打包的時(shí)候會(huì)自動(dòng)將類名轉(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 不能直接使用，而是需要進(jìn)行打包，一般通過配置 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 類名就是由一長(zhǎng)串 hash 值生成。

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

CSS In JS

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

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

使用方式如下：

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

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

• emotion
• radium
• glamorous

總結(jié)

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

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

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

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

原文鏈接：

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

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

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

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

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

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

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

圖表視覺層級(jí)

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

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

| 底層元素設(shè)計(jì)

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

| 中層元素設(shè)計(jì)

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

| 頂層元素設(shè)計(jì)

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

| 最終效果

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

圖表排版設(shè)計(jì)

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

| 圖表尺寸

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

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

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

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

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

| 坐標(biāo)軸

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

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

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

第二個(gè)常見問題是刻度的說明文字過長(zhǎng)。

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

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

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

| 圖例

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

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

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

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

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

| 辨識(shí)度

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

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

| 統(tǒng)一性

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

| 顏色量化與工具

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

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

結(jié)語

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

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

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

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

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