在生活中，有一些規則是你絕對不能打破的，如果你打破了，將會付出慘痛的代價。在用戶界面設計中，也有一些必須遵守的規則。它們被稱為“啟發式”或提高用戶界面可用性的一般原則。這些是經過了長時間測試的可重復的模式，可以幫助用戶更好地瀏覽界面。一個良好的設計一定會考慮到以下原則，一個不那么好的設計總是會缺少其中的一個或多個原則，那么作為一個UI設計師，為什么要忽略這些原則讓你的用戶如此頭疼呢？

1.系統狀態的可見性

該系統應在合理的時間內通過適當的反饋使用戶了解正在發生的事情。

你要不斷地給你的用戶展示適當的信息、提示和背景，使他們在任何時候都知道他們在系統中的位置。這可以讓用戶感覺自己處于控制之中，知道下一步該做什么。這個項目被添加到購物車了嗎？編輯的內容被保存了嗎？這個過程需要多長時間？我的訂單的狀態是什么？現在正在發生什么？不斷地為用戶回答這樣的問題，不要讓他們猜測或蒙在鼓里。

2.將系統與現實世界相匹配

你設計的系統應該使用用戶熟悉的語言，使用用戶熟悉的單詞、短語和概念，而不是使用專業地術語。你要遵循現實世界的慣例，使信息以自然和邏輯的順序出現。

使用熟悉的詞語和語言，不要讓措辭過于復雜。屏幕上的單詞或圖標的含義應該對目標受眾清晰易懂。人們還帶有心理模型和經驗，可以讓他們解釋圖標。

技術的最大進步之一是圖形用戶界面的出現。在圖形用戶界面之前，計算機屏幕上只有晦澀難懂的文字命令，每當你想執行一個動作時都要記住并重復。然后，一切都改變了。屏幕上顯示的是文件夾和文件的小圖像以及一個手形光標。這些都是人們能夠立即理解的視覺符號。不需要解釋，因為它引用了現實世界的心理模型。

3.一致性和標準

用戶不應懷疑不同的詞語、情況或行動是否意味著同樣的事情。

有兩種類型的一致性：內部和外部。內部一致性是指你的網站或應用程序中的模式要一致。這很簡單，比如在所有的頁面上保持相同顏色的鏈接，或者在每個屏幕上對相同的概念使用相同的圖標，比如HOME。外部一致性是指大多數人使用的其他軟件和系統中的慣例，如購物車。大多數人都熟悉購物車的使用方式。你不需要重新發明什么東西。如果你這樣做，你可能會讓你的用戶更難學會你的購物車如何工作。保持一致，為用戶節省不必要的混亂。

4.用戶控制&自由

用戶經常會錯誤地選擇系統功能，并且需要一個明確的“緊急出口”提示才能離開不需要的狀態，并且無需通過擴展對話就能支持撤銷和重做。

始終為用戶提供一條出路。不要強迫用戶執行他們不需要的功能，或者把他們引向死胡同。例如，如果你正在設計一個結賬流程，如果用戶愿意，就讓他們繼續購物。如果他們試圖在一個應用程序上執行一個動作，當他們在最后一刻不確定是否要繼續時，就讓用戶取消。

5.錯誤預防

比起錯誤提示信息更好的是一個精心的設計，它可以從一開始就防止問題的發生。要么消除容易出錯的條件，要么檢查這些條件，并在用戶承諾行動之前向他們提供一個確認選項。

當系統操作到很關鍵的一步時，如刪除文件或向1000個收件人發送電子郵件，要確保用戶知道他們將做一些重大的事情。向他們展示確認對話或提供額外的信息，清楚地定義在行動之后將發生什么。這將防止他們在不確定自己的行動時進一步行動。這也將為他們省去大量的遺憾。

6.利用識別而減少回憶

通過使對象、行動和選項可見，盡量減少用戶的記憶負荷。用戶不應該記住從對話的一個部分到另一個部分的信息。在適當的時候，系統的使用說明應該是可見的或容易檢索的。

作為UI設計師，我們的目標之一是減少用戶的認知負荷。記憶以兩種方式工作：識別和回憶。識別是指你立即熟悉的東西。比如一個人的臉。你看著一個朋友的臉，你馬上就知道你以前見過他們。回憶的作用則不同。它是你必須從記憶中檢索出來的東西，比如一個人的名字?；貞浲ǔＰ枰嗟臅r間和工作，因為你的大腦必須處理更多的信息來破譯它所看到的東西。

另一方面，識別是即時的。我們希望在我們的用戶界面上具有更多的識別，而減少回憶。實踐這個原則的一個很好的例子是使用普遍可識別的按鈕和圖標來表示功能，例如用房子表示 "家"，用鉛筆表示 "編輯"。如果你必須為你的用戶界面設計新的圖標，而大多數人以前從未見過這些圖標，那么請使用文本描述符來澄清并減少認知的負擔。

7.使用的靈活性和效率

新手用戶看不到的加速器通常可以加速深度用戶的交互，這樣系統就可以同時滿足沒有經驗和有經驗的用戶的需求。允許用戶定制頻繁的操作。

當某些任務在你的應用或系統中反復出現時，你可能想讓用戶更有效地進行互動。例如，使用滑動手勢來保存或刪除移動應用程序上列表中的項目。刪除一個項目的正常方式是打開一個項目，然后按下刪除按鈕。專業的方式（也是更有效的方式）是通過簡單的滑動并立即從列表中刪除項目。

8.極簡主義的設計和審美

對話不應包含不相關或很少需要的信息。對話中每一個額外的信息單元都會與相關的信息單元競爭，并降低它們的相對可見度。

當為藝術而設計時，如果我們走巴洛克風格，可以用人工制品、紋理和圖像填滿屏幕。但是當為交互而設計時，我們的目標是降低信噪比。這樣做會使我們的界面對用戶來說更容易理解。你可以應用這個原則，把屏幕上顯示的內容減少到最低限度，不管是圖像還是文字，這樣用戶就可以專注于手頭的工作而不會分心。

9.幫助用戶識別、診斷和恢復錯誤

錯誤信息應該用簡單的語言表達，精確地指出問題，并建設性地提出解決方案。

錯誤會發生，那是不可避免的。用戶遇到錯誤后發生什么是UI設計師的責任。因此，我們應設計可以理解的錯誤頁面和提醒來幫助用戶，并提供解決問題的選項或方案。例如，讓我們來看看無處不在的404頁面。作為設計者，我們知道錯誤的404頁面意味著什么，但用戶一般都不知道。為了幫助用戶，我們必須把404翻譯成簡單的語言，加入一些文案，使其清楚地知道剛剛發生了什么，比如 "對不起，我們找不到你要找的頁面。這里有一些具有類似內容的頁面建議......"。

10.幫助&文件

盡管系統不需要說明就能使用的話會更好，但可能還是有必要提供幫助和說明。任何這樣的信息都應該易于搜索，集中在用戶的任務上，列出要執行的具體步驟，而且不要太多。

始終讓人們能便捷地獲得幫助，把幫助放在頂欄或主導航區的顯要位置。當用戶遇到問題而不能輕易找到解決方案時，他們必須被引導到一個可以解決問題的地方。這可以采取FAQ頁面的形式，用一個搜索框提供可能的建議和答案。在沒有答案的情況下，系統必須有一個選項，可以通過支持在線詢問或電子郵件或電話，直接與支持部門聯系以獲得額外的幫助。

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

文章來源：站酷   作者：磨刀modao

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

第一：你對于互聯網好產品的關注度。

第二：你是否有足夠好奇心去研究體驗產品

第三：你的審美，美感如何？

因此作為一個設計師，必須不斷去把玩使用各種APP才能讓眼界打開。如果說Pin是去構建設計靈感庫，那么每個人還需要有一個App圖書館，當你設計靈感枯竭時候；可以去嘗試體驗更多好的產品提升自己眼界，今天就分享幾個小方法幫你打開全球視野。

第一個神器

▲APP的全部頁面狀態，以及里面各種場景，按照用戶的體驗流程一一的截圖展示。

▲點擊后可以查看大圖模式，點擊旁邊的列表標簽，能夠搜索很多列表的效果圖。

▲點擊標簽后全網所有關于列表相關的設計截圖，都給你找出來了，然后 你就可以找到你想要的圖片，順藤摸瓜，找到更多的APP。

第二個工具：Senstower

第三個工具：producthunt

前言：如何讓你的設計更有價值，設計有價值代表你的方案有價值，你的方案有價值代表你的理論有價值、你的理論有價值代表你的專業能力體現，歸根到底，說明了什么人作出什么樣的作品的同時會帶來相應的價值。站在設計師的角度看，在公司里，屬于站在用戶體驗上的提出的設計建議或者設計方案，基于“以用戶為中心”理念和交互設計原則，通過自己的設計思維與專業能力，為公司創造更大的價值，不單只是一個美觀的輸出。

目錄：

一、設計行業的發展趨勢

a）設計與產品的關系

b）找到自身價值的重要性

二、了解設計師的價值分層

a）設計協同

b）推動業務增長

c）設計驅動產品

三、設計師需要具備的哪些思維？

a）雙鉆模型解決問題

b）“五度”設計成果評估模型

c）培養數據思維，利用數據提升設計的價值

一、設計行業的發展趨勢

a）設計與產品的關系

以前，設計師在團隊里的位置會比較尷尬，因為沒法驗證自己對業務的推動是否產生了什么明確的價值。而大數據的來臨，設計的價值變得顯性化，作為與用戶關系密切的設計師，善用好數據，可以發揮的作用其實很大。我們可以通過自己的設計思維與專業能力，為公司創造更大的價值，不單只是一個美觀的輸出。這就使得設計與產品業務關系越來越密切，是整個行業發展的必然趨勢。

舉一個設計以小成提高業務的實例。這是我之前做的分揀軟件迭代首頁的自定義配置組件。在改動前分揀首頁功能多，甚至有時候需要滑動尋找。尋找點擊率大概是不到16%，改動后提高到了40%，不消耗任何其他人力、物力成本，就可以用設計讓CTR翻倍。

設計目標：減少首頁模塊尋找的時間，加大成功點擊率，考慮延展性發展

現有問題：主次功能混淆、視覺點不夠集中、點擊按鈕不明顯

優化方案：1、主次布局調整，主上次下；2、面積放大提高模塊命中率；3、色彩區分主次按鈕；4、添加“?”自定義配置首頁主功能，加入人性化設計理念。

b）找到自身價值的重要性

自身價值顧名思義就是你的工作成果會帶來什么價值，按照公司更看重我們的設計能給產品的發展帶來多大的價值。雖然職位的性質已經很明確你的價值的體現，但是這里注重成果的價值，設計師的成果更多是設計方案，方案成果的價值的接受度也是需要從易到難的漸進的。

舉一個設計價值體現的實例。這是我之前做的新Station組件庫——GM Design。設置組件和設計規范不僅保持了產品的統一性，且減少用戶在使用過程中的行為認知負擔，快速同事達成合作，還可以減少不必要的操作和排查，提高易用性。

設計目標：保持產品的統一性，減少認知負擔，降低時間和人力成本，提高易用性

現有問題：同個功能存在組件多樣、組件學習成本高、反復修改，

優化方案：1、建立組件庫；2、功能類型劃分，采用同一個組件的變形處理；3、組件集中化； 

二、了解設計師的價值分層

設計師的價值可以分為以下三層：設計協同、設計推動業務增長、設計驅動產品。

a）設計協同

一個完美的執行者，能夠在拿到需求后高效又完美地實現落地。簡單地說就是手上功夫好。

做好這個階段需要有優秀的專業能力，良好的溝通能力，并參與到產品的探索與構思中來。

舉一個設計協調的實例。Q2階段的B-Shop商城交互迭代。前期輸出設計基礎和設計規范，有助于開發高效實現，實時跟進UI進度和設計協助。在產品的探索中發現數字鍵盤組件的問題點，由于自己寫的數字組件具有局限性，導致體驗上無法滿足部分需求，如：輸入框的定位在數字鍵盤之上。基于這個問題點，我們提出A/B方案，A方案是自己寫的數字組件，B方案是自己寫的數字組件延用原生的邏輯，從用戶測試得出，A方案是更符合用戶操作習慣。

設計目標：組件高效快捷輸入，側重交互體驗提升，視覺優化，提高易用性

現有問題：學習成本高、缺少設計基礎、信息分層不明顯、體驗差

優化方案：1、劃分主次信息，閱讀更直觀；2、建立設計規范；3、組件優化，符合用戶操作習慣；4、圖文結合，按鈕優化，加強頁面指導性

b）推動業務增長

這個階段的設計師，會比上一個階段更能體現設計師的設計價值，并對產品產生一定的影響力。能在以用戶為中心的基礎上，推動業務的增長，所以這個階段的設計也被稱為UGD（User Growth Design）。

需要設計師具備用戶洞見力，數據分析能力，從這兩個維度出發，去熟悉業務、分析業務，從而推動業務。

舉一個推動業務增長的實例。Q2階段的采購APP的交互迭代。表頭的功能布局與標簽欄的“?”添加功能的調整，其實在用戶調研階段的熱力圖數據和觀察法分析得出，工具類移動端側重點在功能區，需要一目了然知道我的當前任務數是很重要的信息，且是高頻操作，所以放置頂部；標簽欄的添加功能是為了快速添加采購單據和詢價為目的，用戶群體特殊性，需要一鍵新建添加的需求。

設計目標：側重交互體驗提升，提高工作效率，提高易用性

現有問題：學習成本高、缺少設計基礎、操作路徑長、體驗差

優化方案：1、操作路徑簡化，采用路徑集合彈框；2、建立設計規范；3、組件優化，符合用戶操作習慣；4、一鍵新建“?”的功能，達到快速新建

體驗連接：http://station.env-bugfix.dev.k8s.guanmai.cn/purchase_assistant/#/login（賬戶/密碼zhangsan0001/ liuge1)

c）設計驅動產品

這個階段的設計師，在團隊中的價值可以說是非常大了。從被動的需求接收方，轉化為從戰略層，能主動提出需求的一方。也是UXD發展的終極方向。

三、設計師需要具備的哪些思維？

a）雙鉆模型解決問題

什么是雙鉆模型?

雙鉆設計模型由英國設計協會提出，該設計模型的核心是：發現正確的問題、發現正確的解決方案。一般應用在產品開發過程中的需求定義和交互設計階段。

雙鉆設計模型把設計過程分成4個階段：發現問題（挖掘）、定義問題（創意）、構思方案（制作）和交付方案（落地）。

采購APP進行雙鉆模型思維構建的基礎，提供交互迭代的底層設計理論支持，在挖掘需求階段，屬于用戶調研階段；創意階段，關注點在于問題梳理、實現目的、設計層面；制作階段，尋找潛在的解決方案；落地階段，解決方案的分析和驗證，輸出最適合一個。

b）“五度”設計成果評估模型

用戶體驗周期（由阿里巴巴UED提出概念）

用戶體驗周期指的是用戶與產品的關系隨著時間變化而形成的不同周期階段。用戶體驗周期可以分為「當前」和「長遠」兩個階段，每個階段中有不同的細分。

• 「當前」階段，分為 3 個過程：

• 觸達：用戶來訪問網站，包括第一次訪問網站的新用戶和再一次訪問網站的老用戶；

• 行動：用戶在網站上進行相關操作；

• 感知：用戶在操作完成后對產品形成的主觀感受。

• 「長遠」階段：分為 2 種表現：

• 回訪：用戶自己再次使用該產品；

• 傳播：用戶推薦給其他人使用該產品。

如何在具體項目中體現呢？下圖，運用一個具體項目舉例：

c）培養數據思維，利用數據提升設計的價值

項目與需求上線后，去驗證自己的設計是否有效地達成了目標。這個時候你就需要去看數據反饋。沒有數據就就沒有比較，沒有比較就不能進步。

關于數據的用處有很多，舉個例子，當兩個人對各自的方案爭執不休，分別覺得對方不好，但站在各自的邏輯上似乎都能說得通，那怎么辦呢？分別做一個A/B測試，數據不會說謊，哪一個方案更有效，一目了然。

那么如何將數據結合到我們的設計中呢？首先在設計前,我們需要先定一個目標，而每一個目標就應有一項對應的數據指標。比如，提高了某一塊的CTR（點擊通過率），提高CVR（轉化率），提高商品曝光、1/7/15/30日留存率等等。方便之后去驗證自己的的action是否完成了自己的Goal。

拿到了數據之后，還需要分析數據。不管是有沒有達到目標，都要去分析原因，進行復盤總結。復盤的好處是可以讓我們在這一次項目中吸取有價值的經驗—失敗了就找失敗的原因，方便以后避開同樣的錯誤；成功了就分析成功的原因，并將成功的策略復制運用到今后的工作中，增加以后的成功率。如此，不管有沒有成功，都能給我們帶來最大化的價值。我們也會更加的接近用戶、接近產品、接近業務。從而幫助我們進一步洞察用戶、挖掘新的需求。

小結：

以上就是今天所要分享的全部內容。再帶大家回顧一下，一共分為三部分：第一個是了解設計師的發展趨勢，第二個是趨勢下的設計師價值分層（設計協同、設計推動增長、設計驅動），第三個就是在價值分層的逐步遞升中所需要培養的雙鉆模型、GSA的策略、數據增長思維等。

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

1、ERR引發的思考

創建好的 vue 項目直接執行 vue run dev 報錯？運行 vue run serve 就可以啟動...如下

npm run dev
npm ERR! missing script: dev

npm ERR! A complete log of this run can be found in:
npm ERR!     E:\nodejs\node_cache\_logs\2018-12-12T15_06_08_674Z-debug.log

2、dev build serve?

其實 npm run dev 或者是 npm run serve 等 npm run xxx 并不是一定要這么寫。
npm run XXX是執行配置在 package.json 中的腳本，比如：

"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" },

npm run xxx 中的 xxx 可以理解為鍵值對的 key，實際上 run 的是在 package.json 里面 scripts 配置的 value；

比如，npm run serve 實際運行的是 vue-cli-service serve；

而放在 3.0 以前運行的則是 node build/dev-server.js 文件；

這時候我們再來看上邊的問題是不是豁然了呢， scripts 中并沒有配置 dev ，所以控制臺報了 [ missing script: dev ] 的錯誤 ；

3、總結

npm run xxx，并不是你想運行就運行的，只有在 package.json scripts 配置了，你才能 run 的，所以不是所有的項目都能 npm run dev/build。

要了解這些命令做了什么，就要去scripts中看具體執行的是什么代碼。

這里就像是一些命令的快捷方式，免去每次都要輸入很長的的命令（比如 serve 那行）

一般項目都會有 build, dev, unit 等，所以起名，最起碼要從名字上基本能看出來是干什么的。

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

文章來源：博客園

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

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

一. 什么是Vuex?

Vuex

Vuex是一個專門為Vue.js應用程序開發的狀態管理模式, 它采用集中式存儲管理所有組件的公共狀態, 并以相應的規則保證狀態以一種可預測的方式發生變化.

Vuex核心

上圖中綠色虛線包裹起來的部分就是Vuex的核心, state中保存的就是公共狀態, 改變state的唯一方式就是通過mutations進行更改. 可能你現在看這張圖有點不明白, 等經過本文的解釋和案例演示, 再回來看這張圖, 相信你會有更好的理解.

二. 為什么要使用Vuex?

試想這樣的場景, 比如一個Vue的根實例下面有一個根組件名為App.vue, 它下面有兩個子組件A.vue和B.vue, App.vue想要與A.vue或者B.vue通訊可以通過props傳值的方式, 但是如果A.vue和B.vue之間的通訊就很麻煩了, 他們需要共有的父組件通過自定義事件進行實現, A組件想要和B組件通訊往往是這樣的:

組件通訊

• A組件說: "報告老大, 能否幫我托個信給小弟B" => dispatch一個事件給App
• App老大說: "包在我身上, 它需要監聽A組件的dispatch的時間, 同時需要broadcast一個事件給B組件"
• B小弟說: "信息已收到", 它需要on監聽App組件分發的事件

這只是一條通訊路徑, 如果父組件下有多個子組件, 子組件之間通訊的路徑就會變的很繁瑣, 父組件需要監聽大量的事件, 還需要負責分發給不同的子組件, 很顯然這并不是我們想要的組件化的開發體驗.

Vuex就是為了解決這一問題出現的

三.如何引入Vuex?

1. 下載vuex: npm install vuex --save
2. 在main.js添加:

import Vuex from 'vuex' Vue.use( Vuex ); const store = new Vuex.Store({ //待添加 }) new Vue({ el: '#app', store, render: h => h(App) }) 

四. Vuex的核心概念?

在介紹Vuex的核心概念之前, 我使用vue-cli初始化了一個demo, 準備以代碼的形式來說明Vuex的核心概念, 大家可以在github上的master分支進行下載.這個demo分別有兩個組件ProductListOne.vue和ProductListTwo.vue, 在App.vue的datat中保存著共有的商品列表, 代碼和初始化的效果如下圖所示:

初始化效果

//App.vue中的初始化代碼 <template> <div id="app"> <product-list-one v-bind:products="products"></product-list-one> <product-list-two v-bind:products="products"></product-list-two> </div> </template> <script> import ProductListOne from './components/ProductListOne.vue' import ProductListTwo from './components/ProductListTwo.vue' export default { name: 'app', components: { 'product-list-one': ProductListOne, 'product-list-two': ProductListTwo }, data () { return { products: [ {name: '鼠標', price: 20}, {name: '鍵盤', price: 40}, {name: '耳機', price: 60}, {name: '顯示屏', price: 80} ] } } } </script> <style> body{ font-family: Ubuntu; color: #555; } </style> 

//ProductListOne.vue <template> <div id="product-list-one"> <h2>Product List One</h2> <ul> <li v-for="product in products"> <span class="name">{{ product.name }}</span> <span class="price">${{ product.price }}</span> </li> </ul> </div> </template> <script> export default { props: ['products'], data () { return { } } } </script> <style scoped> #product-list-one{ background: #FFF8B1; box-shadow: 1px 2px 3px rgba(0,0,0,0.2); margin-bottom: 30px; padding: 10px 20px; } #product-list-one ul{ padding: 0; } #product-list-one li{ display: inline-block; margin-right: 10px; margin-top: 10px; padding: 20px; background: rgba(255,255,255,0.7); } .price{ font-weight: bold; color: #E8800C; } </style> 

//ProductListTwo.vue <template> <div id="product-list-two"> <h2>Product List Two</h2> <ul> <li v-for="product in products"> <span class="name">{{ product.name }}</span> <span class="price">${{ product.price }}</span> </li> </ul> </div> </template> <script> export default { props: ['products'], data () { return { } } } </script> <style scoped> #product-list-two{ background: #D1E4FF; box-shadow: 1px 2px 3px rgba(0,0,0,0.2); margin-bottom: 30px; padding: 10px 20px; } #product-list-two ul{ padding: 0; list-style-type: none; } #product-list-two li{ margin-right: 10px; margin-top: 10px; padding: 20px; background: rgba(255,255,255,0.7); } .price{ font-weight: bold; color: #860CE8; display: block; } </style> 

核心概念1: State

state就是Vuex中的公共的狀態, 我是將state看作是所有組件的data, 用于保存所有組件的公共數據.

• 此時我們就可以把App.vue中的兩個組件共同使用的data抽離出來, 放到state中,代碼如下:

//main.js import Vue from 'vue' import App from './App.vue' import Vuex from 'vuex' Vue.use( Vuex ) const store = new Vuex.Store({ state:{ products: [ {name: '鼠標', price: 20}, {name: '鍵盤', price: 40}, {name: '耳機', price: 60}, {name: '顯示屏', price: 80} ] } }) new Vue({ el: '#app', store, render: h => h(App) }) 

• 此時,ProductListOne.vue和ProductListTwo.vue也需要做相應的更改

//ProductListOne.vue export default { data () { return { products : this.$store.state.products //獲取store中state的數據 } } } 

//ProductListTwo.vue export default { data () { return { products: this.$store.state.products //獲取store中state的數據 } } } 

• 此時的頁面如下圖所示, 可以看到, 將公共數據抽離出來后, 頁面沒有發生變化.

  
  
  

  state效果

到此處的Github倉庫中代碼為: 分支code01

核心概念2: Getters

我將getters屬性理解為所有組件的computed屬性, 也就是計算屬性. vuex的官方文檔也是說到可以將getter理解為store的計算屬性, getters的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變才會被重新計算。

• 此時,我們可以在main.js中添加一個getters屬性, 其中的saleProducts對象將state中的價格減少一半(除以2)

//main.js const store = new Vuex.Store({ state:{ products: [ {name: '鼠標', price: 20}, {name: '鍵盤', price: 40}, {name: '耳機', price: 60}, {name: '顯示屏', price: 80} ] }, getters:{ //添加getters saleProducts: (state) => { let saleProducts = state.products.map( product => { return { name: product.name, price: product.price / 2 } }) return saleProducts; } } }) 

• 將productListOne.vue中的products的值更換為this.$store.getters.saleProducts

export default { data () { return { products : this.$store.getters.saleProducts } } } 

• 現在的頁面中,Product List One中的每項商品的價格都減少了一半

getters效果

到此處的Github倉庫中代碼為: 分支code02

核心概念3: Mutations

我將mutaions理解為store中的methods, mutations對象中保存著更改數據的回調函數,該函數名官方規定叫type, 第一個參數是state, 第二參數是payload, 也就是自定義的參數.

• 下面,我們在main.js中添加mutations屬性,其中minusPrice這個回調函數用于將商品的價格減少payload這么多, 代碼如下:

//main.js const store = new Vuex.Store({ state:{ products: [ {name: '鼠標', price: 20}, {name: '鍵盤', price: 40}, {name: '耳機', price: 60}, {name: '顯示屏', price: 80} ] }, getters:{ saleProducts: (state) => { let saleProducts = state.products.map( product => { return { name: product.name, price: product.price / 2 } }) return saleProducts; } }, mutations:{ //添加mutations minusPrice (state, payload ) { let newPrice = state.products.forEach( product => { product.price -= payload }) } } }) 

• 在ProductListTwo.vue中添加一個按鈕,為其添加一個點擊事件, 給點擊事件觸發minusPrice方法

//ProductListTwo.vue <template> <div id="product-list-two"> <h2>Product List Two</h2> <ul> <li v-for="product in products"> <span class="name">{{ product.name }}</span> <span class="price">${{ product.price }}</span> </li> <button @click="minusPrice">減少價格</button> //添加按鈕 </ul> </div> </template> 

• 在ProductListTwo.vue中注冊minusPrice方法, 在該方法中commitmutations中的minusPrice這個回調函數
  注意:調用mutaions中回調函數, 只能使用store.commit(type, payload)

//ProductListTwo.vue export default { data () { return { products: this.$store.state.products } }, methods: { minusPrice() { this.$store.commit('minusPrice', 2); //提交`minusPrice,payload為2 } } } 

• 添加按鈕, 可以發現, Product List Two中的價格減少了2, 當然你可以自定義payload,以此自定義減少對應的價格.
  
  

  mutations效果

(Product List One中的價格沒有發生變化，原因是getter 監聽的是map方法產生的新對象)

到此處的Github倉庫中代碼為: 分支code03

核心概念4: Actions

actions 類似于 mutations，不同在于：

• actions提交的是mutations而不是直接變更狀態

• actions中可以包含異步操作, mutations中絕對不允許出現異步

• actions中的回調函數的第一個參數是context, 是一個與store實例具有相同屬性和方法的對象

• 此時,我們在store中添加actions屬性, 其中minusPriceAsync采用setTimeout來模擬異步操作,延遲2s執行 該方法用于異步改變我們剛才在mutaions中定義的minusPrice

//main.js const store = new Vuex.Store({ state:{ products: [ {name: '鼠標', price: 20}, {name: '鍵盤', price: 40}, {name: '耳機', price: 60}, {name: '顯示屏', price: 80} ] }, getters:{ saleProducts: (state) => { let saleProducts = state.products.map( product => { return { name: product.name, price: product.price / 2 } }) return saleProducts; } }, mutations:{ minusPrice (state, payload ) { let newPrice = state.products.forEach( product => { product.price -= payload }) } }, actions:{ //添加actions minusPriceAsync( context, payload ) { setTimeout( () => { context.commit( 'minusPrice', payload ); //context提交 }, 2000) } } }) 

• 在ProductListTwo.vue中添加一個按鈕,為其添加一個點擊事件, 給點擊事件觸發minusPriceAsync方法

<template> <div id="product-list-two"> <h2>Product List Two</h2> <ul> <li v-for="product in products"> <span class="name">{{ product.name }}</span> <span class="price">${{ product.price }}</span> </li> <button @click="minusPrice">減少價格</button> <button @click="minusPriceAsync">異步減少價格</button> //添加按鈕 </ul> </div> </template> 

• 在ProductListTwo.vue中注冊minusPriceAsync方法, 在該方法中dispatchactions中的minusPriceAsync這個回調函數

export default { data () { return { products: this.$store.state.products } }, methods: { minusPrice() { this.$store.commit('minusPrice', 2); }, minusPriceAsync() { this.$store.dispatch('minusPriceAsync', 5); //分發actions中的minusPriceAsync這個異步函數 } } } 

• 添加按鈕, 可以發現, Product List Two中的價格延遲2s后減少了5

  
  
  

  actions效果

到此處的Github倉庫中代碼為: 分支code04

核心概念5: Modules

由于使用單一狀態樹，應用的所有狀態會集中到一個比較大的對象。當應用變得非常復雜時，store 對象就有可能變得相當臃腫。為了解決以上問題，Vuex 允許我們將 store 分割成模塊（module）。每個模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進行同樣方式的分割

const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: { ... }, mutations: { ... }, actions: { ... } } const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB } }) store.state.a // -> moduleA 的狀態 store.state.b // -> moduleB 的狀態 

---

作者：EduMedia_熠輝

鏈接：https://www.jianshu.com/p/a804606ad8e9

來源：簡書

著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

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

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

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

圖表的作用在于對數據的合理的詮釋而不是美觀。所以，在了解圖表怎么繪制前，更重要的是了解圖表是什么，包含哪些類型。下面就做下相應解釋方便大家理解～

1.1 圖表是什么

在今天，隨著大數據和數據分析理念深入人心，圖表在 B 端設計的地位越發重要。

那么什么叫圖表呢？

圖表指的是可以直觀展示統計信息屬性和數值的圖形表格，對于多數人來說第一次接觸圖表概念都源自中小學計算機課程中的 Office Excel 表格教學。

要理解圖表，你就繞不開 Excel 這個軟件或其功能形式。我們都知道 Excel 是一個表格工具，可以任意填寫表格化的信息內容進去。

但那只是呈現出來的表象，Excel 的真實身份應該是一個數據記錄工具，通過這種表格形式記錄，比如班級學生成績、客戶聯系方式、倉庫進銷記錄等等。每一條記錄下的信息都是一條獨立的 “數據”。

盯著表格看，我們確實可以看到一些具體的信息、數據、內容。但是，數據的作用只是讓我們自己去精確定位想要的內容而已？顯然是否定的。

我們統計數據的目的，還包括要從眾多的數據條目中獲得反映真實情況的 “規律”、“趨勢”，如果我們只盯著數據條目一條條的瀏覽，是很難找出這些信息的。

于是，人類就發明了圖表這種可視化工具，幫助我們對數據進行總結，用更直觀的視覺方式來認識數據和找出規律和趨勢，這也是為什么 Excel 是最強大的圖表生產軟件的原因之一。

總結：圖表是統計學的子學科，它幫助我們更好的找到數據背后的真相，并做出正確的決定。

1.2 圖表的內容構成

圖表既然由數據內容生成，這個生成和轉化的過程當然具備一些基本的規則和條件。要滿足圖表生成的數據必須要包含兩種基礎信息 —— ”維度“ 和 ”數值“。

它們是組成絕大多數圖表的基石，比如看下面的表格，一次體檢中有三個班級的5個同學，他們的身高、體重、體脂率、肌肉含量、視力各不相同。

我們可以從中挑選維度和數值，比如姓名做緯度（X軸），體脂率作為數值（Y軸），那么就可以生成基礎柱狀圖表。

從上面案例可以知道，橫向緯度表示的是你圖表中要包含多少不同的展示對象，縱向數值則表示你要顯示該維度的哪一類數據。

緯度通常指某個具體的人、日期、事件、分類，通常是 不可量化 的內容。而數值則是指包含 可量化 的數據類型，重點要記得數值是指 “數據類型”，而不是指具體的參數值。

再進一步，上方生成的圖表，雖然直接反映了我們選擇的緯度、數值的情況，但顯然對于不了解數據背景的人來說太簡陋了，不知道它們代表的意義。所以，一個完整的圖表還會包含一些 “解釋” 性元素，來讓觀看者更好的理解圖表內容。

所以，一個完整的圖表中除了中心圖形，還會包含標題、單位、緯度圖例、網格、選中提示等內容，用來提升其閱讀性。

以上只是最基礎的示例，不同圖表、內容，對說明信息的要求各有不同，我們會在下方做出一定的解釋。一個優秀的設計師要學會如何因地制宜，優化圖表的內容構成，并對展示的信息進行取舍。

1.3 圖表的類型認識

隨著統計學的發展，圖表也經歷了一系列的增長與創新，除了我們常見的幾種圖表外，還發展出了大量平?？床坏?，只存在于各自專業領域的特殊種類。但是，它們對我們的生活和工作也起到產生了重要的影響。

比如在新冠危機中，政府和專業機構對民眾開放的數據就大量使用了圖表進行解釋，讓我們可以很清晰的了解事情的走勢和真相。

之所以有這么多不同圖表，讓人眼花繚亂，在于數據所包含的信息和特性不同，導致了它們所總結的規律類型也不同。

業界將圖表展示類型分成了四個大類，包含比較、分布、構成、聯系，雖然比較簡陋，但這是新手認識圖表最簡單的方式。

我們簡單解釋下這四個分類代表的作用：

• 比較：用來對比不同對象數值高低，比如上一份學生身高案例

• 分布：展示不同對象數值的分布區間，比如新冠新增分布省份

• 構成：表示某子對象的構成關系，比如班級中的男女比例

• 聯系：表示不同對象之間的聯系情況，比如不同城市之間的人口流動

之后我們就會以這個框架，來解釋不同分類下的圖表，幫助大家建立對圖表的正確認識和設計方式。除了這種標準分類以外，我還額外做了一個歸類，就是基礎和高級圖表。

前面提到，一般圖表就只反映緯度、數值兩個方面的圖表類型，很容易理解。但復雜的圖表，就會超過這個范圍，它可能包含了多個維度、多種數值、甚至第三、第四。

比如下面這個散點圖，除了身高（緯度）、體重（數值）外，還表現了個體（圓點）、性別（色彩）。在圖表本身的解釋性元素中，還包含分布區域、最大最小值標識、體重/身高均值。

這已經超出一個沒有接觸過統計的新手認知范疇了，是需要具體學習才能學會如何閱讀和應用的圖表。

這還是比較簡單的高級圖表，往后還有類似桑基圖、K線圖（韭菜的自我修養）、和弦圖等類型，它們有各自使用的規范、參數，以及應用的場景。

高級圖表的復雜度和抽象性，決定了它的使用門檻較高，識別效率較低。而隨著數據各行各業數據重要性的提升，對圖表的需求已經不再局限在二維抽象圖形的應用上，而是提供了視覺效果更精美，制作過程更復雜，閱讀門檻更低的可視化數據展示內容。

雖然我們在本篇文章不會拓展到大屏可視化的領域，但是掌握好平面二維的統計圖表，提升對統計目的的認識，是深入學習可視化的必要條件。

接下來，我們就要來介紹一下如何繪制圖表了。雖然圖表之間有比較大的區別，但它們有很多細節是具有統一規范的。優先掌握這些一致的內容，再理解不同圖表的具體繪制差異，可以幫助設計師快速上手圖表設計工作。

2.1 基本內容繪制思路

上面我們提了，一個成熟的圖表會包含不少解釋性信息，怎么放置解釋信息和圖形元素是我們在設計時的第一個考慮要素。

常見的抽象圖表都有一個完整的矩形區域，我們要先確定該圖表的具體占比尺寸。然后，對這個區域進行布局的規劃，而這個布局的規劃就和解釋信息的展示有非常大的關系。

比如，你需要在圖表中增加標題和圖形解釋，那一開始把圖形做成了上、中、下三欄。有的情況下我們可能還會增加一個默認存在的文本型解釋模塊，那么還會再右側再切割出一個區域出來。

除了解釋信息外，我們在設計中有時候還不能忽視交互內容，比如要包含分類篩選、時間線控制、開關等控件時，它們準備放在哪里，也要在這個階段確定出來。

經過前面的切割，其實我們就能確定出中間的圖形區域了。在開始繪制前，我們還要對圖形具備的信息做進一步的確認，XY 軸坐標是否包含文字解釋，餅圖類是否包含延長指示線說明。

將這些區域先確定出來，減去它們的空間，就留下了最終要圖形展示的區域了。

合理的圖表繪制流程變是先布局，確定信息內容，最后才集中處理圖形元素。如果對于前端適配有一定了解的同學，也就知道在完成這些步驟以后，圖表的適配規則制定就暢通無阻了。

2.2  圖形分布和比例映射

有了圖形區域，接著就可以開始動手畫圖形了。不管是基礎還是復雜的圖形，你想要讓自己輸出的作品嚴謹、質量高，就需要應用專業的繪制方法。

圖表圖形的繪制類似尺寸作圖，需要應用各種參考線、輔助工具來完成。圖形本身并不是我們用來做創意的地方，而是要以準確的方式繪制出來。它包含兩個重點，分布和比例映射。

以一個柱狀圖表舉例，該圖表中維度包含了 7 個對象，即應該出現 7 個柱形。那么首先就要通過等分圖形區域，來確定柱形的分布，XY軸文字的對齊對象。

如果你不羅列對象具體數值的話，到這步也就結束了，但如果對象數值是必要顯示內容的話，那么就要盡量確保柱狀的顯示比例和數值是一致的。

假設在上方案例中，Y軸總高是 100px，那么數值中每 1 小時的高度就是 100/16 = 6.25px，我們就要用你寫下來的數值 * 6.25，保證柱狀圖高度比例和你的數值一致。

而類似餅圖這樣的圖形中，只要添加了具體數值內容，那么餅圖中不同的扇形角度，也要符合對應的比例。比如占比 10%、20%、30%、40% 的四個對象，它們的角度就分別為 36、72、108、144。

這就是分布和比例映射的基本邏輯，不管是什么圖表，只要它根據數值在區域中進行繪制，就一定會受到數值的影響。不管學習什么新的圖表，都只要確定這兩個步驟就可以輕松準確的完成繪制。

至于具體該怎么實現，用插件還是參考線，就是軟件基礎的問題了，不在這里展開。

2.3 圖表配色的基本原理

在圖表設計中的最后一個問題，就是關于配色的方案了。圖表配色的技巧主要關注兩點，選色邏輯和搭配方法。

選色邏輯，就是圖表用色的一些基本規范。我們知道圖表往往非常的復雜，或者頁面一屏中會包含大量的圖表。

在這個基礎上，圖表的用色就注定是不能太 “剛猛” 的，飽和度要偏低，明度要適中。在選色面板中，它大概處中部偏上的區域。即使產品主色用的飽和度非常高，圖表要和主色統一，也建議在主色基礎上做適當調節，在色系上接近即可。

并且，建議新手在繪制圖表的過程中千萬不要用漸變色。即使在各類飛機稿中，漸變色的展示效果也非常的不理想，沒有任何可讀性。

有了選色邏輯，多色搭配的思路也就變得而非常簡單了，只要重點關注色環的配色模式即可。

配色模式多種多樣，包括補色、三角對立、類似、四元、方形、臨近等等，不用想的那么復雜，只要牢記根據你的設計風格需要，你是要相鄰配色，還是等分配色。

相鄰配色，即以一個色系的臨近色系為標準的搭配。以 H（色相）、S（飽和度）、B（明度） 配色模式為準，飽和度和明度數值基本不變的情況下，小幅度變更色相。

等分配色，也是保持飽和度、明度的一致，根據需要的色彩數量（大于三個）在色環中按角度等分，獲得均勻的色彩過度。

配色的方法很簡單，難的是你們如何根據頁面的需要、視覺的體驗，合理的運用配色的方案，這沒有統一的標準。要記得圖表配色不是僅僅針對自身，會和頁面其它色彩產生聯系。

保證相對平緩、不太激進的圖表配色思路，是最安全的做法。

首先解釋第一類圖表 —— 比較。

比較圖表的作用，是用來對緯度的數值做對比的圖表類型，直觀對比不同對象的強弱、排序、趨勢。

3.1 柱狀類圖表

3.1.1 基本認識：

柱狀圖，是一個使用柱狀圖形反映緯度數值的二維坐標軸圖表，也是我們最常見的圖表類型。

在這個二維坐標軸中，我們可以用縱軸代表數值，也可以用橫軸代表數值，另一個軸代表緯度。即在顯示的過程中可以使用縱向或者橫向的（橫向的也被叫成條形圖，都是一回事）。

柱狀圖除了每個對象包含一類數值的做法以外，也允許包含多個數值類型，每個類型使用一種顏色表示，這種圖表叫分組柱狀。

并且，柱狀圖作為最基礎的圖形，衍生了非常多下級的柱狀類型。包括：堆疊柱狀、子彈圖、正負混合、瀑布圖、直方圖等。但要注意的是，并不是所有柱狀類圖表，都是作為對比來使用的。后續會有進一步提示。

3.1.2 設計建議：

柱狀圖通過柱體的長短，可以直接對比不同緯度數值的高低，但使用也有一定的差別。

緯度之間關聯性不是太強，或者按時間順序排列的就適合用橫向排列的方式，比如下方記錄我隨時可能猝死的打工人一周睡眠時間（見左圖）。而涉及排名或者時間的數據組，就適合使用縱向排列的，比如 Geekbench 展現不同 Mac 處理器強弱的排行榜（見右圖）（os：Pro 居然比 M1 還低？）。

兩種圖表的選擇還和 UI 環境的交互方式有關，在APP中，橫向排列的柱狀圖可以顯示的數量非常有限，想放更多緯度就要左右滾動，體驗不佳。而使用縱向排列則對空間的要求沒那么高。

3.2 折線類圖表

3.2.1 基本認識

折線圖也是基礎圖表，通過創建端點并使用直線連接的方式展示出高低不平曲折的線段。折線圖在圖表形式上和柱狀圖非常類似，但兩者在使用上是有一定區別的。

當我們要選擇使用柱狀圖的時候，往往關注數值的總量，或者維度代表的是不同的對象，比如不同 CPU 之間的跑分對比。但是折線圖的使用就沒有那么單一，它主要應用在單一對象的單個維度變化對比中。

比如，我們監控 CPU 的占用頻率，那么維度使用時間，數值用百分比，這里面產生的數據都是圍繞 CPU 的占用頻率展開，但如果維度改成了當前時間不同核心的占用數值、溫度，那么我們就肯定不會用折線圖來表示。

折線圖的使用是要通過線段的曲折來反映數值的波動，在應用過程中往往不作為一個靜態的圖表展示，而是應用于監控的場景，比如監控股市市值、網站在線人數、CPU溫度、同一地區降水量等等。

3.2.2 設計建議：

在折線圖中，最大的認知誤區就是對于曲線線段的應用了。在數之不盡的網上飛機稿中，使用曲線的折線圖表 90% 以上都是錯誤的。

這要回歸本質來探討，折線圖也是進行對比的圖形，如果沒有直觀的波動，那么這個圖形帶來的信息量就非常有限。曲線會因為圓角的緣故而降低波動帶來的沖擊力，甚至抹平這種對比。

只有在必定會連續出現極大波動的圖表中才適合使用曲線，例如圍繞在會有一個中間值數值，曲線進行正負兩端移動的類型，比如監控呼吸中含氧量（呼和吸一個周期的維度）。

所以，盡量避免曲線的應用，不僅畫起來麻煩，而且實際使用效果極差。

作為折線圖，在一些數值代表完成、占滿、填充的概念時，往往就會覺得單純的線段表示不夠直觀，于是就產生了將下方的區域填充色彩的 —— 面積圖。只展示一個數值類型不夠要加入多個數值和線段的就叫折線堆疊圖。

3.3 雷達類圖表

3.3.1 基本認識

雷達圖，相信大家看到最多的地方就是在游戲的角色面板或者武器面板中。雷達圖是一種偏向概括性的圖表，并不能用來體現大數值和高頻變化，是用來對比同一個對象不同維度數值的圖表。

雷達圖的應用，首先要確認出不低于5個的維度，并且這些維度可以使用相同的數值體系，比如0-10分，0-100%等。并且，這些維度最好是由同一個對象身上拆分出來的，而不是 5 個維度指代不同的對象。

簡單來講，就是我們可以用雷達圖來表現一個學生不同科目的水準，這樣雷達圖可以大致概括這個學生科目掌握情況和相對的強弱。

但是不應該用雷達圖來表示不同學生同一科目的水準，那就只是更基礎的對比，用柱狀圖就可以了。

當然，雷達圖中的占用內容，也可以添加多個對象，一個雷達圖中可以放多個同學不同科目掌握水平的疊加圖形，以此對比他們的差異。

3.3.2 設計建議

雷達圖的繪制，也是優先制定說明內容區域，然后再開始圖形的設計。

因為在雷達圖中，我們對維度的描述，基本只能設計到不同端點外部，那么文字本身的數量、占比，就會對圖形的顯示產生非常大的影響，并且在雷達圖中維度的描述文字是必須的，過度精簡還是用其它方式體現都很不直觀，所以優先預留足夠的文字空間。

然后，根據我們需要的維度數量繪制一個等邊的多邊形，并設置合理的數值。

之后，才是確定出這個多邊形內所包含的數值刻度數量。假設除圓心外總共要顯示5級，那么就要畫 5 個堆疊的等邊形，那么我們就從最大的那個等邊形入手，再復制4個出來，對它們分別乘以 80%、60%、40%、20% 即可。

最后，再將每個維度對應數值根據百分比將端點打在維度的直線上，用鋼筆工具將每個端點連接起來創建一個完整的不規則多邊形，就完成了雷達圖的設計。

如果想要在一個雷達圖添加多個對象，只要用不同顏色描邊繪制對應數量多邊形即可，如果要填充這些圖形，就一定要使用透明度填充來完成，否則可能遮擋后方的端點，導致圖形不全。

3.4 其它類型

3.4.1 階梯圖

階梯圖是一種用來對比前后數值漲跌的圖形，它是柱狀和折線圖的合體。它和折線圖的不同之處在于，更關注每個對象增減的份額大小。

不僅僅是關注波動，而是更具體的值。類似關注一只股票全年的股價漲跌情況，每個月漲跌的具體額度，就適合使用階梯圖表現。

3.4.2 漏斗圖

漏斗圖因為長得像漏斗而聞名。雖然這個圖形看起來像一個錐形或者三角形，但本質上漏斗只是條形圖（橫向柱狀圖）的變體。

漏斗圖是一種對階段進行分層表現的圖形，從上到下的順序中，數值一定會呈現衰減的趨勢（起碼不會變大），然后從上到下的柱體就越來越小。

例如，UX 數據分析經常用的漏斗模型，就會建立一個從用戶訪問主頁，到最后完成下單的轉化率，每一個步驟都會有一定的用戶流失。

在基礎漏斗圖之上還有進一步拓展，比如對這個轉化本身有一個預期，那么可以做對比漏斗圖，比較現實和預想中的差距。如果要對比 iOS 和 Android 端的漏斗數據，還有比較漏斗圖，對比兩側的長短數據。

第二個解釋的圖表類型 —— 分布。主要是用來研究數據分布情況的圖表，對不同數據的統計分布狀況進行描述。

4.1  直方類圖表

4.1.1 基本認識

直方圖是一個看起來和普通柱狀圖非常接近的圖表類型，是一個用來表示同一個緯度范圍中，不同區間頻率的圖形。

直方圖是一個二級圖表，是對一級數據的進一步轉化。比如看上圖案例，散點圖（下面會說）本身記錄了不同的數據的位置，而直方圖就是記錄在發生在這個緯度內的次數。

直方圖乍一看很像柱狀圖，但實際應用場景往往使用了非常密集的柱體，讓它看上去像折線圖。對于設計師來說和直方圖打交道是非常普遍的，那就是在 Lightroom 和 Photoshop 中的通道直方圖。

當視覺設計師、攝影師在學習處理位圖的時候，就必然要學會直方圖的讀取，它并不是用來讓我們學習如何對比前后數據差異的，而是讓我們可以快速掌握這張圖片中像素點在不同通道的分布量。

直方圖是統計學中的 “頻率分布” 的視覺表現形式，需要確保使用的場景符合直方圖的定義，以及確保用戶能理解圖表內容。

4.1.2 設計建議

對于直方圖來說，如果維度對象少，只要獲得相關的信息和數值，就可以像柱狀圖一樣來繪制。

如果是針對一些比較專業的場景，如上方的通道直方圖，那么就要放棄自己完成的目標，一定要借助相關插件，或者使用 Excel 等工具實現后再導入進來。

4.2 箱型類圖表

4.2.1 基本認識

箱型圖也叫盒須圖，和直方圖類似，它也是一個二級圖表，即它不是直觀反應原始數據，而是對原始數據的狀態進行轉譯。圖表中的每個箱型反應一組數據的分散情況資料，每個箱型包含下面這些信息元素。

箱型圖反應的是一種 “大概” 情況，它不是一種用來進行精確數值展示的圖形。箱體主要是上四分衛和下四分衛的區間組成，下/上四分衛指的是 “樣本中所有數值由小到大排列后的 25%/75% 的數字”。

這里的排列主要通過 “數值大小” 來決定，而不是分布數據。比如一個班上100個同學包含身高 150、160、170、180、190 五種身高，雖然每個身高包含的人數不同，但 160 就是它的下四分衛，180 是它的上四分衛。

那么160-180身高包含的人數就是箱體本身的區域，上四分衛到上邊緣是 180-190 的人數，下四分衛到下邊緣是 160-150 的人數。

箱型圖可以反應的信息是非常豐富的，它可以非常有效的反應不同數據組的虛實、占比、上下限，可以獲得非常多有趣的結論。

4.2.2 設計建議

在箱型圖的設計中，對于箱體和觸須的表達要依據數據本身的重要性來判斷。有些場景對最大最小值更在意，則箱體顏色就淺，線段更矚目。而要重點關注箱體的話，則可以對觸須進行弱化使用虛線。

同時，箱型圖的主要識別信息是 Y 軸的長度，一個美觀易度的箱型圖，箱體寬度盡量控制在一個比較纖細的水平，不要為了填充畫面的空白強行做寬。

4.3  K線圖

4.3.1 基本認識

相信稍微了解過股票還是基金的同學，對K線圖那可就一點也不見外了，下陽線、收盤光頭陽、小陽線，開口就是老韭……不對，老股民了。

K線圖是箱型圖的一個變種，也叫蠟燭圖，主要應用在股票、幣市、期貨等市場的交易數據上。一個K線圖包含了陽線、陰線兩個大類。陽線代表上漲，陰險代表下跌。

每個類型中，同時還表示當日成交中的最低價和最高價，柱體代表的是開盤價和收盤價。在我國股市，上漲用紅色，下跌用綠色，在幣市則相反。

K線圖實際上動手設計它的情況微乎其微（只用開發好的），我們只要了解它的原理即可。

4.3.2 設計建議

K線圖基本只應用在和理財有關的證券行業中，在會出現 K 線圖的圖表模塊中，必然會出現相應的交互操作。如左右滑動、放大縮小，它是一個具備響應模式的圖表類型，包含兩種狀態。

如果空間足夠，則使用箱體和虛線的常規設計。如果顯示的對象密集，那么就會以一條直線來顯示，忽略掉箱體的部分。

同時，不同的場景，對于陰陽線箱體的展示會有一定區別，除了色彩外，還會應用實心和描邊的區別。

因為涉及財產、交易，針對K線圖的設計，一定要做好前期的業務調研，以及對比不同的競品，降低設計出錯的概率。

4.4 散點類圖表

4.4.1 基本認識

散點圖是一個使用也非常頻繁的圖表，它通過在 XY 坐標軸中添加圓點來表示不同對象的分布情況。

常見的散點圖就是對普通二維坐標軸進行 “打點” 的圖表，每個點代表統計學中的一個 “樣本” 或數學概念中的一個 “定量”，下面我們就用樣本來稱呼每個散點。

每個樣本在散點圖中必然包含兩種以上的信息，一個是緯度值，一個是數值，這樣我們才能確定它在坐標軸中的位置。

當然，針對樣本并不是只可以包含兩種信息，比如表示班級成員身高體重的散點圖，我們可以再引入男女的對比，對散點圖進行色彩的區分。再者，還可以添加體脂率，用每個點的大小來表示。

散點圖是一個很直觀的樣本分布圖表，它是概率論中做回歸分析的主要工具。所以往往我們會看到散點圖內出現了一個線段，那條線段叫做 “回歸線”，他是通過散點分布情況，計算出來的一條均值線段。這個線段不僅可以大致標識數據的趨勢，同時可以用來做概率計算和預測。

回歸線包含指數、線性、多項式三種，對應繪制出來的回歸線是曲線、直線、還是波浪線。

4.4.2 設計建議

散點圖的圓點可以使用軟件的 Symbol 功能進行創建，確保后續可以統一修改配色和樣式，尤其是在包含多種色彩的散點圖中。

散點圖的繪制不一定要完美契合數據內容，但是在大致的分布和數量上要和實際情況貼合。如果僅僅是隨意的進行分布、均分，那么這個圖表就會顯得非常的不嚴謹和隨意，比如下圖圖表。

4.5 其它類型

4.5.1 地圖圖表

地圖圖表，是將抽象的 XY 二維坐標軸替換成地圖類圖形的圖表。本質上它們也包含 XY 軸，所以一樣可以將數據內容進行映射。

最常見的，就是地圖散點圖了。背景由實際的地圖完成，坐標則由經緯度體系來記錄。這是可視化設計中非常常見的中心圖表應用類型。

同時，背景的地圖并不是只包含地理信息地圖，還可以是球場、商場、網頁、建筑表面等內容。

4.5.2 熱力圖

熱力圖則是地圖和散點圖的合體，也是在二維坐標體系中顯示樣本，只是熱力圖更注重的是這些樣本之間的對比。例如區域的降水量、臺風風力表現、網頁的點擊區域等等。

熱力圖本質上也是將坐標軸切割成了若干小塊（樣本），每個小塊有一個對應的數值，然后通過算法繪制邊緣和不同的漸變。

它也是很少直接通過設計軟件繪制的圖表，需要借助插件導入數據來實現，我們只需要確認色彩樣式即可。

構成圖表相對其它圖表來說是最簡單的一種，包含扇形、環形、餅圖、堆疊、矩形樹等類型。

5.1 餅圖類圖表

5.1.1 基本認識

前面看到的圖表大多是遵循我們小學就看過的 XY 軸坐標系（笛卡爾坐標系）建立的，但是餅圖并不需要考慮坐標空間的問題。它是一個依靠角度來反映數據的圖表類型。

餅圖作為一種常見圖表，包含兩個大類，一般餅圖和環形圖。如果沒有一些特殊的交互或者復雜衍生類別的話，環形圖其實就是餅圖中間鏤空的版本……

餅圖繪制的主要依據是需要表現幾條維度，以及它們對應的百分比值。餅圖的顯示有比較大的局限性，那就是顯示的維度數不能過多?？刂圃?2-9 條比較合理，數量過多就會導致圖形失去實際的使用意義。

除此以外，南丁格爾圖、旭日圖，也是餅圖的延伸，通過添加額外的維度或者子分類，對餅圖中的每個對象進行額外的示意。

5.1.2 設計建議

餅圖作為基礎圖形，多數情況下也是由設計師自己完成的。但很多新手沒有找到要領，導致做出來圖形非常的別扭。我提供一個繪制的簡單的思路，那就是通過繪制不同的三角形來拼裝出一個餅圖。

這類圖形繪制的要點是確保三角形在圓心中的頂點時一致的，如果對比例的繪制有比較精確的要求，可以通過 Excel 之類的工具生成一個基礎圖形做背景，貼著它畫即可。

南丁格爾圖也可以沿用上面的畫法，那就是對每個維度的三角形采取不同直徑的圓做蒙版，就可以畫出不同半徑的占比區域了。

這么做的好處，是將圖形的每個維度獨立成一個單獨的矢量圖形，方便我們后續進行上色。

5.2 堆疊類圖表

5.2.1 基本認識

堆疊類圖表算是一個相對不那么嚴謹的類別，因為它多數由其它基礎圖表發展而來。主要包括柱狀堆疊圖、面積堆疊圖、百分比堆疊圖。

之所以把它歸類到分布而不是其它大類下的圖表子項，原因是只要出現堆疊，就意味著這個圖表的核心目的是展示構成內容而不是對比或者分布。

在柱狀類堆疊圖中，通過將每個柱體切割成不同的更小柱體來呈現子分類的占比。面積堆疊圖，則是單純的把折線圖進行填充然后疊加的圖形。

而百分比堆疊，雖然看起來和面積堆疊和接近。但它是以最上層數據為 100% 標準，往下的每一級對象都根據頂層百分比呈現的分布樣式。

5.2.2 設計建議

堆疊類圖形的設計，最難的不是圖形，而是色彩的應用上。之所以說堆疊只要應用就比原先圖形的作用更大，原因就是堆疊使用不同的色彩表現層級，對于我們的視覺吸引力遠遠大于圖形本身的輪廓。

而將豐富的色彩無縫拼接在一起，是最容易翻車的配色場景。在這種狀態下，建議大家只用臨近色來實現下級分類的搭配，千萬不要使用色相差異過大的色彩。

而對于面積和百分比堆疊圖，都建議在配色的過程中，直接使用帶有透明度的色彩。因為這些折線并不一定會完美上下覆蓋，當中間出現交匯的時候，不至于信息被遮擋。

5.3 矩陣樹圖

5.3.1 基本認識

矩形樹圖最初是一個設計用來表示磁盤空間占用情況的圖形，通過將一塊矩形切割成不同的區域來表示不同維度的占比，以及位置。

雖然也表示占比，但它比餅圖類圖表表示的信息更豐富。第一點是位置信息和并列關系，比如下面的 M1 芯片的示意圖，就是矩陣樹圖的一種直觀體現，在矩形中不同位置應用的不同芯片以及其占用的具體面積。

當然上方是最理想的情況，通常矩陣樹圖是為了對一些更抽象的概念實現矩陣化的排列。而這個排列中，還有個非常關鍵的要素是其中的 ”樹“ 字。

因為矩陣中的每個切割出來的矩形，都可以作為一個獨立矩形進行下一級的分割，實現一個類樹狀圖結構的信息收納。所以，完整的矩陣樹圖，是可以支持縮放或點擊進入下一層級的。

而使用矩陣樹圖不使用樹狀圖，原因也在于我們需要表現它的占比，而不是單純的結構。所以如果只是簡單表現層級結構，如企業組織架構、知識點拆分之類的，要用樹狀圖而不能使用矩陣樹圖。

5.3.2 設計建議

在這類圖表在項目中基本不會獨立開發出來，因為其復雜度基本都會使用開源代碼。

設計師的主要工作，就是根據對應開源圖表，指定配色的方案，切割的邊緣大小，以及文字的顯示規范即可。

聯系圖表，是用來展示維度之間聯系的圖表類型，包含?；㈥P系、和弦、韋恩圖、依賴關系圖等。

聯系類圖表中，多數是非常復雜的圖形，已經脫離直接手工繪制的范疇，所以我們只簡單介紹其中幾個有代表性的圖表且給出設計建議了。

6.1 ?；鶊D類圖表

?；鶊D是一個用來描述某維度值 ”流動“ 到其它維度走勢的流動圖表。

這是一個比較復雜的概念，比如下面的概念，不同國家人口的流動，人還是原來那些人（數值），但他們以不同的數量比例，移動到不同的國家（維度）。

?；鶊D的應用，關鍵在對數值遷移流向的關注上，它適合應用的場景在監控產品用戶的跳轉去向，貨物的外貿出口狀況，或類似新冠患者流動城區、地點的表示。

?；鶊D的數值總量通常是不變的，會包含起點和終點的維度，而維度的長短即代表其包含的數值總量（權重）。

它有非常多的變種，只有借助特定的圖表生成工具，才能繪制出曲率、比例精準的流線。

6.2 關系類圖表

關系圖是大家比較不會陌生的圖表類型，它在各類工具性軟件、網站中都有應用。比如天眼查股東關系圖、Wolai 頁面關系圖等。

關系圖中包含了大量的節點，節點之間還有對應的關系，同構線段進行鏈接。常見的關系圖有兩種類型，一種是力導圖，一種是弧長鏈接圖。

力導圖這名字也很難理解，源于力學中粒子存在某種互斥又具有引力的規律，粒子在兩種力的作用下從初期的隨機性會不斷位移趨于平衡有序（讀書多的好處？）。

力導圖通常有一個起點，然后去關聯后續的其它節點，如果節點之間還有關聯，它也可以對這些節點的關聯做出連接。它不僅表現一對多的關系，也表現多對多的關系，甚至在極其復雜的關系網中可以呈現成一定的強關聯 ”聚類“ 信息。

而弧長鏈接圖，則是通過弧線對節點進行關聯的圖表，它既可以是環形，也可以是水平橫線的展示。

6.3 和弦圖

和弦圖是環形關系圖和桑基圖結合的圖表，它表示結構之間的依賴關系和強度，鏈接的線段不再是粗細統一的而是具有粗細比例的標識，且維度之間的長度也有表示。

這類圖表常用于社會學、生物學等學科的研究統計結果繪制上。如果單純瀏覽，看上去非常復雜，所以正確的使用形式是可以進行指定維度的展示和隱藏的。

6.4 韋恩圖

韋恩圖，它是所有學 UI、UX 設計的老朋友了，一個用圖形層疊相交來表示它們關系的圖形。RGB、CMYK 的色彩介紹里韋恩圖的身影必不可少。

韋恩圖的使用相比起來沒有那么嚴格的數學運算，它只是一種關系表現的方法，可以對各種無法量化的對象進行關系的陳述。比如，UX 設計師應該具備的知識點……

下面是超人的電話亭團隊持續整理收集到的可視化組件庫工具網站，以供參考：

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

最近有設計小伙伴咨詢，怎么樣的交互說明才是最好的，是大家都喜歡的。他寫的交互說明文檔提交給需求評審會的成員審核時，大家都建議他再寫的合理些，這讓他傷透了腦筋。

我告訴他：

第一、崗位對象不同：沒有一份十全十美的交互說明可以打動所有人，讓所有人為之驚嘆。畢竟，由于閱讀交互說明文檔的對象不同，他們會對交互說明文檔有不同的要求，這是崗位屬性導致的結果。例如前端開發希望詳細到字段、初始默認值、數據調取接口等，而領導只要看保證業務方向沒有錯誤的大交互鏈路。

第二、同崗位不同認知：同一崗位不同成員的認知、從業經歷、個人喜好、性格脾氣等也會導致不可能有完美適配所有人的交互說明文檔。例如在一個行業已經深耕多年的前端工程師，即使你的交互說明文檔寫的沒有那么詳細，他也可以從你現有的文字中推敲出其他方面，同時還能幫你補充完善；而針對剛入行的前端工程師，你要是寫的不詳細，他就會抓狂，項目時間緊急的時候還會自己腦補交互細節。之后你走查時候也會抓狂，但是沒用呀，誰讓自己沒有寫明白交互細節，遺漏了呢。

第三、使用場合不同：不同場合需要的交互說明文檔也不同。例如與對方面對面溝通，交互說明文檔可以少寫點；但是通過線上工具與對方溝通，就需要寫的盡可能詳細；如果是會議型的評審，那就要方方面面都做足功課了。簡單來說就像準備一份 PPT：針對同一個主題的 PPT，在外部演講和在公司內部演講，同一份 PPT 會需要設計兩個版本，一個是內部版，一個是外部版，原因在于使用場合不同。

第四、產品階段不同：交互說明文檔闡述的是一個產品的交互，而不是闡述其他的。如果產品所處階段為成熟期，那往往產品的交互文檔已經沉淀了很多通用法則，可以被復用，那么現在的交互說明文檔少寫點，問題也不大；但產品處于探索期或成長期，通常來說可復用性的交互資產是不存在的，那交互說明文檔就需要準備的相對完善。

有些設計小伙伴就說了，既然不可能滿足所有人，那我就按照自己的想法隨意寫好了。這可不行哦，畢竟我們的主要工作有一部分是撰寫交互說明文檔，這就必須要有認真、嚴謹、專業的工作態度，把這部分工作做好。那我們來看看，編寫一份友好的交互說明文檔要注意哪些。

什么是交互說明文檔

交互說明文檔是用來告訴參與產品研發的團隊成員頁面交互相關細節的一個說明文檔，包括頁面間的邏輯跳轉、頁面內模塊的交互、頁面功能的狀態等。交互說明文檔寫的越詳細越有利于參與產品研發各方的正確執行。

有待改進的交互說明文檔

我匯總了一些日常工作中有待改進的交互說明文檔形式，看看都存在哪些問題。

1. 文字密密麻麻，無結構

幾乎所有剛初入職場的設計師，在編寫交互文檔時，會怕自己寫少了別人覺得自己不專業，怕寫的不全沒辦法表達頁面細節，導致交互文檔密密麻麻都是文字，這讓閱讀者幾乎無法閱讀，找不到視覺落腳點。

2. 描述簡單，不完整

有幾年工作經驗的設計師，由于很多通用交互法則已了然于心，他們在編寫交互說明文檔時就比較簡單，一些交互就沒有寫在文檔上，這導致在開發時，忽略了某些交互。

3. 數據太假，沒有邏輯

交互稿數據沒有邏輯，是很多設計師經常會出現的問題，一部分原因可能在于產品經理沒有理順產品邏輯和細節就提交設計師畫圖了，另一部分原因可能在于設計時間緊張，來不及對交互稿中所有的數據都做到邏輯合理。

曾經遇到過的情況有，關聯數值關聯不上，表格中字段對應的值對不上，表單填寫的數據和實際情況不符。

建議大家在時間允許或有條件反推產品經理協助完善數據的情況下，盡量數據展現的真實與符合邏輯，如此有助于開發及相關閱讀者高效理解。

4. 圖文太遠，找不到

有幾次我注意到設計師提交上來的交互說明會標注“見圖 X”這樣的文字。也就是一段說明讀完了，還得去頁面的某個角落尋找對應的圖，這種體驗非常不好。

在交互設計原則中有一項為“足不出戶”?！白悴怀鰬簟钡囊馑际侵改茉诋斍绊撁娼鉀Q的事情，不要去其他頁面；能在就近完成的事情，不要距離過遠。頻繁的切換和跳轉會導致用戶心流被打斷，容易引起用戶思緒中斷、思考不流暢，甚至可能對產品產生反感。

同理，我們交互說明文檔中的圖文也應盡量相鄰，通過一眼文字一眼圖，讓用戶看的順暢、舒適，理解的快速。

5. 零散，東一句西一句

東一句西一句是指交互說明文檔中本該成為一體去描述的文字，被分成了好幾個部分去闡述，這對看文檔的人來說簡直是災難，他需要自己重新梳理交互思路，將交互規則串聯起來。

我們自己在編寫交互說明文檔時，盡量規避上述常見的問題。

什么是好的交互說明文檔

對于什么是好的交互說明文檔，網上一搜一大把，這里我根據自己的經驗，和大家分享下什么是好的交互說明文檔。

首先我們來明確下，什么是好，有了好的標準以后，再來談談如何做到好。

1. 什么是好

通常情況下，交互文檔會給產品經理看，用來評審設計方案是否滿足需求；給視覺設計師看，用來指導視覺方案的呈現；給前后端開發人員看，用來指導開發邏輯；給測試工程師看，用來協助測試編寫測試用例?；诖?，好的交互說明文檔關系著設計方案是否可被最大程度的實現。并且如果交互文檔文字冗長、邏輯不清晰，不僅看的人吃力，還會需要增加額外的時間來和開發工程師溝通。好的交互文檔，我認為至少需要具備以下 7 點：

• 明確價值
• 考慮全面
• 通俗易懂
• 結構清晰
• 圖文并茂
• 僅此一份
• 修訂記錄

2. 如何做到好

為了讓大家一邊學習一遍實踐，我使用“表單校驗”的交互案例給大家進行講解。

明確價值

能協助項目成員通過文檔更順利地完成工作任務，能幫助用戶解決問題，能達成產品目標，則是好的交互說明文檔。文檔對各方有價值，是一份好的交互說明文檔的起點。那么，如何編寫才能達到上述結果呢？

一方面是將此次文檔的價值寫清楚，包括寫明此次交互設計的背景與需求來源、需求清單，標明交互設計的理論依據，可以給用戶帶來的價值等。另一方面要和成員宣導這些內容，讓成員感受自己要做的工作是有價值的。

“表單校驗”上場：

考慮全面

拋開文檔閱讀對象等相關影響因素，通常來說交互需要考慮到以下幾方面:

a. 整體交互流程

整體交互流程是指產品頁面與頁面之間的交互邏輯。

b. 頁面模塊交互說明

頁面模塊交互說明是指模塊自身的交互說明，或同頁面內獨立模塊之間的交互邏輯，或不同頁面模塊之間的交互邏輯。例如點擊導航樹節點會聯動右側表格內容刷新；點擊 banner 跳轉到對應的商品詳情頁，且定位到頁面 1/2 位置。

c. 頁面功能交互說明

頁面功能交互說明是指單個功能的各種情況闡述。例如搜索框內輸入文字，通過 enter 觸發對應頁面跳轉。

d. 盡量真實的數據展示

雖然是交互說明，我們也盡量做到模擬真實數據，否則很容易讓閱讀者產生錯誤判斷。并不是所有人都會一字一句的去閱讀文檔，因此，盡量真實的數據，有利于閱讀者更有效的了解。

e. 特殊情況額外補充說明

很多情況下，會因為某些原因出現極端交互情況，此時也需要補充完整。

f. 通用交互一處即可

建議交互團隊為產品建立通用型交互說明庫，遇到類似的情況，直接調取即可。

實際上我們在編寫交互說明的時候，不太會分得那么細，很多說明是混合在一起表達的。

“表單校驗”上場：

通俗易懂

通俗易懂是指要讓文字、語言、圖片等做到讓受眾易于理解和感知，從而在信息傳遞過程中盡量少的出現損耗，這一點同時也與人類的理解能力有關。

百度百科是這么解釋理解能力的：

“理解能力是指一個人對事物乃至對知識的理解的一種記憶能力。

理解，有三級水平：

• 低級水平的理解是指：知覺水平的理解，就是能辨認和識別對象，并且能對對象命名，知道它“是什么”；
• 中級水平的理解是：在知覺水平理解的基礎上，對事物的本質與內在聯系的揭露，主要表現為能夠理解概念、原理和法則的內涵，知道它是“怎么樣”；
• 高級水平的理解屬于間接理解，是指：在概念理解的基礎上，進一步達到系統化和具體化，重新建立或者調整認知結構，達到知識的融會貫通，并使知識得到廣泛的遷移，知道它是“為什么”?！?

當我們了解了人類的理解能力水平是參差不齊后，我們就要盡量在工作中將專業知識化繁為簡（也可以針對人群化繁為簡），增強溝通效果，最終達到完成團隊目標的結果。

交互文檔盡量做到講人話，不要講一堆專業術語。記得之前有個交互設計師在會議上闡述自己的交互方案時，提到用了“提供邀請”原則。由于與會成員是開發工程師和產品經理，他們問到什么是“提供邀請”原則，并且在這個問題上大家討論了很久。

由此可見，表達通俗易懂，是很必要的。

結構清晰

交互說明文檔除了要表達通俗易懂外，還需要結構清晰。

結構清晰的內容不僅使閱讀者一目了然、理解成本低，還可以讓閱讀者了解撰寫者的意圖。要做到文檔結構清晰，除了需要遵守一些規則外，也不能脫離當前文檔的實際情況。

“表單校驗”上場（把文字進行分段處理，并取出關鍵詞）：

圖文并茂

圖片和文字相得益彰可以加深閱讀者對文字的理解，同時避免閱讀者去想象文字對應的結果。由于人們對同一段文字的理解不完全相同，因此建議設計師盡量安排交互說明對應圖解。

“表單校驗”上場（左圖右文）：

僅此一份

僅此一份是說交付給團隊交互說明文檔的時候不要多份。之前我們的前端小伙伴拿到了兩份交互文檔，一份是純原型交互文檔，一份是視覺稿交互文檔，兩者描述的信息大同小異。此時，建議交互文檔的信息做合并，只提交一份完整的給前端小伙伴，讓前端小伙伴能專心致志理解一份。

修訂記錄

建議交互說明文檔留存修訂記錄，一方面可以了解交互文檔的變更歷史，另一方面有利于回溯和查找信息。修訂記錄一般包括修訂人、修訂時間和修訂內容。

總結

由于項目進度、業務復雜程度等不同，我們不可能每次都能寫出一份最好的交互說明文檔，但我們可以想辦法寫出一份相對可讀性高、可理解性高的友好的交互說明文檔。我們常說自己是做用戶體驗的，那交互說明文檔就是體現我們交互能力一個方面。

除了完成交互說明文檔，想要讓開發小伙伴真正理解交互說明，還需親自和開發溝通，千萬不要認為我寫的很詳細了，他怎么還是實現的有偏差。事實上，就如開篇所說：同一崗位不同人的認知理解、從業經歷、個人喜好、性格脾氣等也會導致理解不同。特別是對于一些我們非常創新的、特殊的交互點，需要重點和開發說明。

并且，交互說明文檔基于業務的發展，也會不斷的迭代，我們要抱著多聽、多想、多思考、多接受的態度去不斷優化我們的文檔，盡力寫出一份友好的交互說明文檔。

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

js中定時器有兩種，一個是循環執行setInterval，另一個是定時執行setTimeout

一、循環執行（setInterval）

顧名思義，循環執行就是設置一個時間間隔，每過一段時間都會執行一次這個方法,直到這個定時器被銷毀掉

用法是setInterval（“方法名或方法”，“延時”）， 第一個參數為方法名或者方法，注意為方法名的時候不要加括號,第二個參數為時間間隔

<template> <section> <h1>hello world~</h1> </section> </template> <script> export default {
    data() { return {
        timer: '',
        value: 0 };
    },
    methods: {
      get() { this.value ++;
        console.log(this.value);
      }
    },
    mounted() { this.timer = setInterval(this.get, 1000);
    },
    beforeDestroy() {
      clearInterval(this.timer);
    }
  }; </script>

上面的例子就是頁面初始化的時候創建了一個定時器setInterval，時間間隔為1秒，每一秒都會調用一次函數get，從而使value的值加一。

二、定時執行 （setTimeout）

定時執行setTimeout是設置一個時間，等待時間到達的時候只執行一次，但是執行完以后定時器還在，只是沒有運行

用法是setTimeout(“方法名或方法”, “延時”); 第一個參數為方法名或者方法，注意為方法名的時候不要加括號,第二個參數為時間間隔

<template> <section> <h1>hello world~</h1> </section> </template> <script> export default {
    data() { return {
        timer: '',
        value: 0 };
    },
    methods: {
      get() { this.value ++;
        console.log(this.value);
      }
    },
    mounted() { this.timer = setTimeout(this.get, 1000);
    },
    beforeDestroy() {
      clearTimeout(this.timer);
    }
  }; </script>

上面是頁面初始化時候創建一個定時器setTimeout，只在1秒后執行一次方法。

定時器需要在頁面銷毀的時候清除掉，不然會一直存在?。?！

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

文章來源：博客園

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

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