起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識B端模塊化思考：體驗原則篇
先設計、后規范，還是先規范、后設計？這真的是一個問題。
體驗原則是項目進入交互設計之前確定，還是邊設計邊制定，亦或是設計完成之后根據設計稿來定？
這讓我想到一個哲學問題——先有雞還是先有蛋？
通過最近接觸和完成不同B端項目的經歷來說，似乎都有嘗試。目前來說，可能接下來講的更有通性一些。
推薦是先將方向性和布局性的原則確定，不管是交互原則，還是視覺原則。這樣，不管是邊設計邊總結，還是設計完成之后，再整理完整的規范，都是可以極大提升團隊協作效率的。
目錄
- 交互設計原則
- 視覺設計原則
正如之前一篇技能樹所倡導的，體驗設計包含了交互設計和視覺設計（即UI設計）。所以，繼續往下看之前，恐怕需要先達成一個共識，不然，可能會有理解上的差異。當然，其實創意設計中，也是需要遵循下方總結的四項視覺設計原則的。
一、交互設計原則
1. 核心原則
圖一
上述四個原則，可以讓我們評判方案有一個參考方向，而并不是無用的說辭哦。這點我想很多設計師會不以為然，但是仔細去考慮深思一下，也許有不一樣的發現。
2. 交互設計原則-直接了當
正如 Alan Cooper 所言：『需要在哪里輸出，就要允許在哪里輸入』，這就是直接操作的原理。
不要為了編輯內容而打開另一個頁面，應該直接在上下文中實現編輯。
2.1 頁內編輯-單字段行內編輯
2.1.1 當『易讀性』遠比『易編輯性』重要時，可以使用『單擊編輯』。
單擊示例
- 狀態一：普通的瀏覽模式，不區分可編輯行和不可編輯行；
- 狀態二：鼠標懸停時，『指針』變為『手型』，編輯區域底色變黃，出現『Tooltips』提示單擊編輯；
- 狀態三：鼠標點擊后，出現『輸入框』、『確定』、『取消』表單元素，同時光標定位在『輸入框』中。
2.1.2 當『易讀性』為主，同時又要突出操作行的『易編輯性』時，可使用『文字鏈/圖標編輯』。
示例二
- 狀態一：在可編輯行附近出現文字鏈/圖標；
- 狀態二：鼠標點擊『編輯』后，出現『輸入框』、『確定』、『取消』表單元素，同時光標定位在『輸入框』中。
2.2 頁內編輯-多字段行內編輯
在『多字段行內編輯』的情況下，顯示的內容和編輯時所需的字段會存在比較大的差異，所以更需要『巧用過渡』原則中的『解釋剛剛發生了什么』來消除這種視覺影響。
多字段行內編輯
編輯模式在不破壞整體性的前提下，可擴大空間，以便放下『輸入框』等表單元素；其中，在 Table 中進行編輯模式切換時，需要保證每列的不跳動。
3. 交互設計原則-足不出戶
能在這個頁面解決的問題，就不要去其它頁面解決，因為任何頁面刷新和跳轉都會引起變化盲視（Change Blindness），導致用戶心流（Flow）被打斷。頻繁的頁面刷新和跳轉，就像在看戲時，演員說完一行臺詞就安排一次謝幕一樣。
簡單來說，就是“當前操作當前做”，不轉移連續交互動作。
變化盲視（ChangeBlindness）：指視覺場景中的某些變化并未被觀察者注意到的心理現象。產生這種現象的原因包括場景中的障礙物，眼球運動、地點的變化，或者是缺乏注意力等?！浴毒S基百科》
心流（Flow）：也有別名以化境(Zone)表示，亦有人翻譯為神馳狀態，定義是一種將個人精神力完全投注在某種活動上的感覺；心流產生時同時會有高度的興奮及充實感?！浴毒S基百科》這種“渾然忘我”的愉悅體驗，被美國積極心理學奠基人之一的米哈里·契克森米哈賴稱之為【心流】。
3.1 覆蓋層（即覆蓋頁面元素之上，新的承載頁）
二次確認：避免濫用Modal（模態層、覆蓋層）進行二次確認，應該勇敢讓用戶去嘗試，給用戶機會『撤消』即可。
3.1.1 推薦示例
推薦示例
用戶點擊『刪除』后，直接操作；出現Message告知用戶操作成功，并提供用戶『撤消』的按鈕；用戶進行下一個操作或者 1 分鐘內不進行任何操作，Message消失，用戶無法再『撤消』。
3.1.2 推薦示例
推薦示例
特例：在執行某些無法『撤消』的操作時，可以點擊『刪除』后，出現Popconfirm進行二次確認，在當前頁面完成任務。
3.1.3 不推薦示例
濫用 Modal 進行二次確認，就像『狼來了』一樣，既打斷用戶心流（無法將上下文帶到彈出框中），也無法避免失誤的發生。
話說，并非不推薦就是不可用的。這個最終是否適用項目，需要結合業務、結合用戶的使用習慣來。
因為在我做KCL項目的過程中，面對的主要客群是偏線下場景的工作人員，其認知水平與一般的企業人員稍有差異。所以，能盡量簡化操作，能盡量在當前頁完成的，就盡量在當前頁完成。避免流程過長影響使用效率。
在KCL項目中，我就多次運用了上述不推薦的樣式。
3.1.4 輸入覆蓋層（氣泡提示層）：在覆蓋層上，讓用戶直接進行少量字段的輸入。
示例
鼠標『點擊』圖標觸發；鼠標『點擊』懸浮層以外的其他區塊后，直接保存輸入結果并退出。
3.2 嵌入層
3.2.1 列表嵌入層：在列表中，顯示某條列表項的詳情信息，保持上下文不中斷。
示例
3.2.2 標簽頁：將多個平級的信息進行整理和分類，一次只顯示一組信息。
標簽示例
所謂標簽頁，即是設置滑動標簽，將內容置入標簽的內頁中，比較常見的多見于分類篩選。
在后臺項目中，特別是KCL項目，因為涉及的業務場景比較多，所以會有涉及。
3.3 流程
長期以來，Web 實現流程的方式就是把每個步驟放在一個單獨的頁面上。雖然這種做法是分解問題最簡單的方式，但并不是最佳解決方案。對于某些『流程處理』而言，讓用戶始終待在同一個頁面上則更有必要。
流程示例
所謂流程處理，例如：填寫個人信息、認證身份等，當需要填寫信息過多的時候，拆分步驟是一種解決手段。但是這種拆分是否合適，需要依據實際項目作出判斷，antdesign的建議是統一在一個頁面上，但是并非適用全部情況。
在KCL項目中，我依據項目的統一性，在多個頁面將相關流程性的信息聚焦在一個頁面之內。
3.3.1 彈出框
雖然彈出框的出現會打斷用戶的心流，但是有時候在彈出框中使用『步驟條』來管理復雜流程也是可行的。
流程-覆蓋層示例
正如第一條覆蓋層闡述所說，覆蓋層有的情況下，也是合適的。關于流程處理，就比較適合覆蓋層，因為用戶不需要了解上一層級的前提條件，只需要關注當前流程步驟即可。
4. 交互設計原則-簡化交互
根據費茨法則（交互設計七大定律之一）所描述的，如果用戶鼠標移動距離越少、對象相對目標越大，那么用戶越容易操作。通過運用上下文工具（即：放在內容中的操作工具），使內容和操作融合，從而簡化交互。
費茨法則：到達目標的時間是到達目標的距離與目標大小的函數，即：距離越長，所用時間越長；目標越大，所用時間越短。
4.1 實時可見（即：所見即所得）
如果某個操作非常重要，就應該把它放在界面中，并實時可見。
示例
- 狀態一：在文案中出現一個相對明顯的點擊區域；
- 狀態二：鼠標懸停時，鼠標『指針』變為『手型』，底色發生變化，邀請用戶點擊。
- 狀態三：鼠標點擊后，和未點擊前有明顯的區分。
4.2 懸停即現
如果某個操作不那么重要，或者使用『實時可見工具』過于啰嗦會影響用戶閱讀時，可以在懸停在該對象上時展示操作項。
示例
鼠標懸停時，出現操作項。
4.3 開關顯示
開關示例
用戶點擊『修改』后，Table 中『文本』變成『輸入框』，開啟編輯功能。其和文字類鏈接修改本質是相同的，區別在于編輯狀態停留本頁還是進入下一級頁面。
在KCL項目中我們采用的是后一種即文本鏈接下一級頁面，主要原因在于圖標的示意對于操作用戶而言有些困難。
4.4 融合顯現
如果操作不重要或者可以通過其他途徑完成時，可以將工具放置在用戶的操作流程中，減少界面元素，降低認知負擔，給用戶小驚喜。
4.4.1 推薦示例一
鼠標懸停時，出現 Tooltips 進行提示，用戶點擊內容直接復制。此種交互方式，有些類似移動端中的長按復制，其本質都是減少用戶在操作過程中的成本，減少用戶操作路徑。
4.4.2 推薦示例二
鼠標滑選/雙擊時，系統自動復制該部分內容。通過大膽猜測用戶的行為，并幫助完成，給用戶小驚喜。
4.4.3 不推薦示例
在可復制內容的附近出現『圖標』，點擊后復制。其實，這個不推薦示例是從用戶操作成本來說的。因為你點擊復制圖標之后，需要再次確認反饋是否復制成功，toast的提示是需要的。這種情況下，打斷了用戶的操作流程。
但是為什么在KCL項目中再次運用了？
問題還是出在用戶身上，我們通過后臺數據分析、用戶訪談等定性和定量研究方法，得出結論是對于一些新穎的交互操作，他們覺得比較難以記住。不如直接明明白白的顯示出更符合他們的操作預期。所以，最終還是選擇了這種不推薦的樣式（antdesign闡述的不推薦）。
4.5 可視區域 ≠ 可點擊區域
在使用 Table 時，文字鏈的點擊范圍受到文字長短影響，可以設置整個單元格為熱區，以便用戶觸發。
4.5.1 單元格熱區
當懸浮在 ID 所在的文字鏈單元格時，鼠標『指針』隨即變為『手型』，單擊即可跳轉。
4.5.2 列表整行熱區
當懸浮在 ID 所在的文字鏈整行時，鼠標『指針』隨即變為『手型』，單擊即可跳轉。
4.5.3 卡片熱區
當需要增強按鈕的響應性時，可以通過增加用戶點擊熱區的范圍，而不是增大按鈕形狀，從而增強響應性，又不缺失美感。
鼠標移入按鈕附近，即可激活 Hover 狀態。此種類型的熱區設置，多見于C端或者前端顯示交互，后端系統項目，較為少見。
之前有個大神分享過其為外國客戶設計的一款醫療管理后臺，其交互形式以卡片式風格為主，在后臺操作過程中，即常用了這種交互形式。
5. 交互設計原則-提供邀請（引導）
很多富交互模式（eg：『拖放』、『行內編輯』、『上下文工具』）都有一個共同問題，就是缺少易發現性。所以『提供邀請』是成功完成人機交互的關鍵所在。邀請就是引導用戶進入下一個交互層次的提醒和暗示，通常包括意符（eg：實時的提示信息）和可供性，以表明在下一個界面可以做什么。
當可供性中可感知的部分（Perceived Affordance）表現為意符時，人機交互的過程往往更加自然、順暢。
意符（Signifiers）：一種額外的提示，告訴用戶可以采取什么行為，以及應該怎么操作；必須是可感知（eg：視覺、聽覺、觸覺等）?！浴对O計心理學1》
可供性（Affordance）：也被翻譯成『示能』，由JamesJ.Gibson提出，定義為物品的特性與決定物品用途的主體能力之間的關系；其中部分可感知（此部分定義為PerceivedAffordance），部分不可感知。——摘自《設計心理學1》
5.1 靜態引導（靜態邀請-antdesign表述）
指通過可視化技術在頁面上提供引導交互的邀請。
引導操作邀請：一般以靜態說明形式出現在頁面上，不過它們在視覺上也可以表現出多種不同樣式。
常見類型：『文本提示』、『場景提示』、『提示條引導』
5.1.1 文本提示
文本引導用戶下一步交互操作，如上圖所示，文本傳達表意，圖標傳達操作指引。
5.1.2 場景提示
場景提示即空狀態提示引導，如上圖所展示。文案告知用戶狀態，同時以下一步操作引導用戶操作。
5.1.3 提示條指引
所謂未完成邀請即通知指引提示，類似移動端的toast，只是不會自動消失。
5.2 動態指引
指以響應用戶在特定位置執行特定操作的方式，提供特定的邀請。
5.2.1 懸停指引一：在鼠標懸停期間提供指引(即依據用戶操作給與下一步操作提示指引）。
鼠標『懸停』整個卡片時，可被點擊部分變為藍色的『文字鏈』。
5.2.2 懸停指引二：在鼠標懸停時顯示就近操作指引(即依據用戶動作提示下一步操作指引）。
鼠標『懸?！徽麄€卡片時，可被點擊部分顯示，按分類可看做上一個指引的延伸。提示指引，其實在我們看來就是提示指引或提示交互方式。
我們在KCL項目中，文字指引、空狀態提示指引以及未完成提示指引都有所體現，這種提示的方式可以給與用戶及時的反饋，避免用戶產生迷茫情緒。
懸停指引與我們項目并不相符，該提示無法第一時間就顯示，對于我們的客戶而言，有一定的學習成本。
6. 交互設計原則-巧用過渡（頁面轉場動效）
人腦灰質（Gray Matter）會對動態的事物（eg：移動、形變、色變等）保持敏感。
在界面中，適當加入一些過渡效果（即轉場動效-微動效，能讓界面保持生動，同時也能增強用戶和界面的溝通。
Adding:新加入的信息元素應被告知如何使用，從頁面轉變的信息元素需被重新識別。
Receding:與當前頁無關的信息元素應采用適當方式移除。Normal:指那些從轉場開始到結束都沒有發生變化的信息元素。
6.1 在視圖變化時保持上下文
6.1.1 滑入與滑出：可以有效構建虛擬空間。
視圖變化時保持上下文，簡單來說，就是轉場時，不至于中間出現空白狀態或僅出現一個孤零零的加載態，讓整個頁面比較空的情況。
這種轉場方式，很多C端前臺產品運營比較普遍，主要是為了減少用戶的等待焦慮。這個，在KCL項目時，我們也有考慮是否增加這方面的動效。
但是其從需求優先級而言，不高，最終讓步于其他的需求?，F在想來，其實如果增加了這種轉場動效，對于用戶而言也是一個小驚喜。
6.1.2 傳送帶（即序列變化）：可讓用戶產生視覺錯覺，擴大虛擬頁面空間。
6.1.3 折疊窗口（手風琴交互樣式）：在視圖切換時，有助于保持上下文，同時也能拓展虛擬空間。
6.2 顯示變化過程
6.2.1 對象增加：在列表/表格中，新增了一個對象。
新增一條對象時，該行『高亮』告知用戶這是新增項；幾秒后『高亮』消失，以免過度干擾用戶。這條包括下面幾條都是針對表格操作的，B端項目，做好表格的展示就起碼做好了視覺表現的1/3了。
上圖說的主從型列表即如下圖所示：
來源于網絡
6.2.2 對象刪除：在列表/表格中，刪除了一個對象。
所謂對象刪除交互和對象增加交互本質上是類似的，故不增加圖示說明了。對象刪除就是運用了滑出+漸隱的方式比較流暢，體驗更好。但是一定要結合團隊需求的優先級來看，不要為了體驗忽略能用和易用。
6.2.3 對象更改：在列表/表格中，更改了一個對象。
- 狀態一：用戶更改了『詳情』中的值；
- 狀態二：用戶點擊『保存』后，詳情所在的網格出現『黃底』，表明該對象發生了更改；
- 狀態三：底色持續幾秒后，恢復正常。仍然是主從型表格的編輯操作，介紹的還是關于轉場交互微動效，用以增加用戶體驗流暢的。
6.2.4 對象呼出（alert或者pop彈窗）：點擊頁面中元素，呼出一個新對象。
一些概念保持了antdesign的叫法，后面已經按我們的理解增加了說明。對象呼出這個，因為涉及交互提醒程度不同，有pop彈窗、alertdialog、還有toast提示等，都是需要依據下一步指引內容的重要程度來判斷用哪種交互樣式。
7. 交互設計原則-即時反饋
『提供邀請』的強大體現在交互之前給出反饋，解決易發現性問題（事前）；『巧用過渡』的有用體現在它能夠在交互期間為用戶提供視覺反饋（事中）；『即時反應』的重要性體現在交互之后立即給出反饋（事后）。
就像『牛頓第三定律』所描述作用力和反作用一樣，用戶進行了操作或者內部數據發生了變化，系統就應該立即有一個對應的反饋，同時輸入量級越大、重要性越高，那么反饋量級越大、重要性越高。
雖然反饋太多（準確的說，錯誤的反饋太多）是一個問題，但是反饋太少甚至沒有反饋的系統，則讓人感覺遲鈍和笨拙，用戶體驗更差。
牛頓第三定律：當兩個物體互相作用時，彼此施加于對方的力，其大小相等、方向相反?！浴毒S基百科》
7.1 即時反饋-查詢場景
自動完成：用戶輸入時，下拉列表會隨著輸入的關鍵詞顯示匹配項。 根據查詢結果分類的多少，可以分為『確定類目』、『不確定類目』兩種類型。
7.1.1 確定類目
用戶所查詢的關鍵詞，只會在『話題』、『產品』、『商鋪』這三種類目中出現。
7.1.2 不確定類目
用戶所查詢的關鍵詞，其所屬的類目數量不確定，可能 4 個，可能 5 個，可能更多。不管是確定類目還是不確定類目，其都是搜索后反饋結果。
這兩種顯示交互操作，并無優劣之分，區別在于搜索時對于IK分詞或者匹配算法的差異。當然，兩種類目也可以同時展示，主要看團隊后臺是否可以支持？畢竟當項目的體量比較大的時候，多一種展示方式，體量可不是簡單的一加一。
優先級：確定類目大于不確定類目，具體可以參看之前一篇關于搜索和篩選的文章。
7.2 即時反饋-輸入
7.2.1 實時預覽
在用戶提交輸入之前，讓他先行了解系統將如何處理他的輸入。
注：解決錯誤最好的辦法，就是不讓錯誤發生，而『實時預覽』就是有效避免錯誤的好設計。
根據用戶的輸入，提供關于密碼強度和有效性的實時反饋。
7.2.2 漸進式展現
在必要的時候提供必要的提示，而不是一股腦兒顯示所有提示，導致界面混亂，增加認知負擔。
進度指示：當一個操作需要一定時間完成時，就需要即時告知進度，保持與用戶的溝通。
常見的進度指示：『按鈕加載』、『表格加載』、『富列表加載』、『頁面加載』，可根據操作的量級和重要性，展示不同類型的進度指示。
a. 按鈕加載
b. 表格加載
c. 富列表加載
d. 頁面進度加載
二、視覺設計原則
1. 視覺設計原則- 親密性
如果信息之間關聯性越高，它們之間的距離就應該越接近，也越像一個視覺單元；反之，則它們的距離就應該越遠，也越像多個視覺單元。
親密性的根本目的是實現組織性，讓用戶對頁面結構和信息層次一目了然。
1.1 縱向間距關系
1.1.1 通過『小號間距』、『中號間距』、『大號間距』這三種規格來劃分信息層次。
在系統設計中，這三種規格分別為：8px（小號間距）、16px（中號間距）、24px（大號間距）。
之所以用8為倍數，一方面是antdesign的建議，另一方面也是因為我們C端前臺界面間距規范都是以8的倍數來的，保持項目規范的整體延續。
注：在系統設計中，間距y=8+8*n。其中，n>=0，y是縱向間距，8是『基礎間距』。
1.1.2 分割線
通過增加『分割線』來拉開層次。當前來說，除了增加分割線區分邊界和層級。還可以通過留白，當然留白這種不適合后臺項目。
還可以通過斑馬線分割邊界。我們通過調研分析，發現分割線區分對于用戶而言體驗不佳，主要體現在表格內容超過10條之后，很容易看錯行。
1.2 橫向間距關系
為了適用不同尺寸的屏幕，在橫向采用柵格布局來排布組件，從而保證布局的靈活性。
1.2.1 組合排布
在一個組件內部，元素的橫向間距也應該有所不同。
1.2.2 復選框間距
縱向關系和橫向關系間距，我們都是設置以8的倍數為遞進的。這樣既保持了規范一致，也可以提升團隊內的開發進程和效率。
2. 視覺設計原則-對齊
正如『格式塔學派』中的連續律（Law of Continuity）所描述的，在知覺過程中人們往往傾向于使知覺對象的直線繼續成為直線，使曲線繼續成為曲線。任何元素都不能在頁面上隨意安放。每個元素都應當與頁面上的另一個元素有某種視覺聯系。這樣能建立一種清晰、精巧而且清爽的外觀。
雖然可能會通過分開放置某些元素 來指示它們的關系（使用親密性原則），但對齊原則會告訴用戶，即使這些項并不靠近，但它們屬于同一組。在界面設計中，將元素進行對齊，既符合用戶的認知特性，也能引導視覺流向，讓用戶更流暢地接收信息。
2.1 文案類對齊
如果頁面的字段或段落較短、較散時，需要確定一個統一的視覺起點。
2.2 表單類對齊
冒號對齊（右對齊）能讓內容鎖定在一定范圍內，讓用戶眼球順著冒號的視覺流，就能找到所有填寫項，從而提高填寫效率。
2.3 數字類對齊
為了快速對比數值大小，建議所有數值取相同有效位數，并且右對齊。
內容對齊是設計中非常重要的原則，統一對于原則達成共識是后續在團隊協作中非常重要的。因為有些人很容易發生上述圖中不推薦示例的理解。
當然，表單類對齊中，我們一開始是堅持以冒號對齊為標準的，但是后續隨著各種業務場景字段的統一展示，發現按冒號對齊，整個界面顯得特別凌亂（我們不是antdesign中推薦的1440寬，而是1920寬）。
所以，后續我們嘗試是以文字左對齊來的做兩排顯示。如果按1440寬，也許留白不那么空，還是會堅持以冒號對齊的。后續真實使用如何，恐怕需要數據說話。
3. 視覺設計原則-對比
對比是增加視覺效果最有效方法之一，同時也能在不同元素之間建立一種有組織的層次結構，讓用戶快速識別關鍵信息。對比是為頁面增加視覺效果的最有效的途徑之一；同時對比還能在不同元素之間建立一種有組織的層次結構，讓用戶快速識別關鍵信息。
要記住一個重要規則:要想實現有效的對比，對比就必須強烈，千萬不要畏畏縮縮。
3.1 主次關系對比
為了讓用戶能在操作上（類似表單、彈出框等場景）快速做出判斷，來突出其中一項相對更重要或者更高頻的操作。
3.2 不區分主次關系
在一些需要用戶慎重決策的場景中，系統應該保持中立，不能替用戶或者誘導用戶做出判斷?！和ㄟ^』和『駁回』都使用次按鈕，系統保持中立。
3.3 總分關系對比
通過調整排版、字體、大小等方式來突出層次感，區分總分關系，使得頁面更具張力和節奏感。
3.4 狀態關系對比
通過改變顏色、增加輔助形狀等方法來實現狀態關系的對比，以便用戶更好的區分信息。
常見類型有『靜態對比』、『動態對比』。
4. 視覺設計原則-重復
相同的元素在整個界面中不斷重復，不僅可以有效降低用戶的學習成本，也可以幫助用戶識別出這些元素之間的關聯性。
重復元素
重復元素可以是一條粗線、一種線框，某種相同的顏色、設計要素、設計風格，某種格式、空間關系等。
總的來說，交互設計原則和視覺設計原則，一開始就制定細節的規范，這樣做是不推薦的。一限制了設計的發揮空間；二不利于設計的執行，有些類似偏離了項目實際，空想決策。
所以，正如開頭所言，比較推薦的是，一開始也是需要制定一定的規范，只是這個規范是一個大概的方向或參照依據。后續可以根據項目以及團隊具體人力來決定是邊設計邊總結，還是設計完成再梳理。
整篇文章涉及的原則，大部分來源于antdesign的資料以及element的規范，同時也摻雜了我們的實際項目經驗理解，權當記錄和梳理一下最近一次B端項目歷程中的思考。
參考鏈接：
AntDesign的設計組件，實現框架React、Angular——https://ant.design/docs/spec/layout-cn
Element的設計組件，實現框架Vue 2.0、 Angular——http://element-cn.eleme.io/#/zh-CN/component/checkbox
iView的設計組件，實現框架Vue——https://www.iviewui.com/docs/guide/theme
飛冰的設計組件，實現框架React——https://alibaba.github.io/ice/
Layui的設計組件——https://www.layui.com/demo/grid.html
G2可視化圖形組件——https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html
Echarts可視化圖形組件——https://echarts.baidu.com/
d3.js可視化圖形組件——https://github.com/d3/d3/wiki/Gallery
在線柵格化計算工具——http://grid.guide/#/1000/24/34/8/0
作者：PGDWORKS；公眾號：PGDWORKS
本文由 @PGDWORKS 原創發布于人人都是產品經理，未經許可，禁止轉載
題圖來自 Unsplash，基于 CC0 協議
寫了這么多，有錯別字也很正常的
這錯別字絕了