2022-5-17 純純
B端產品是很容易交互設計不一致的，隨著多平臺陸續融合為一個平臺，暴露的問題就越發明顯，因此改變現狀便迫在眉睫，此時保證交互設計的一致性就是我們重點要考慮的問題。
目前有很多較火的組件平臺，例如：Ant Design 、Element等。由于公司內部一些原因，前端開發會直接使用組件庫，沒有規范的約束，隨意使用組件也是導致平臺體驗不佳的一點。
由于產品上線后，售后組、業務組經常會反映一些關于體驗相關問題，有時只是單一模塊進行迭代、改版、完善而遺漏了與它相關聯的其他模塊，便會影響全局感觀。
此時會有人產生疑問，明明平臺現存很多樣式問題，功能交互不統一，為什么首要不是先快速建立設計規范文檔？
因為在沒有設計一定量的設計稿之前，所有規范都是華麗的泡泡！前期在設計階段會遇到很多具體場景化的問題，根據不同的場景會不停的修改，還有多方評審來達到最優方案。此時的設計稿處在極不穩定的時期，自然而然也沒什么規范文檔可言，因此現階段要做的工作是找到重點模塊進行設計稿基礎搭建。
當然設計師在做設計時一定要有全鏈路的思考和拆解問題的能力，不能局限于單個需求，鉆入牛角尖。畢竟B端產品體量大，功能模塊多，系統耦合度高，交互設計文檔又是一個全局概念，這最基礎也是最重要的第一步是非常考驗設計師的。
重點模塊功能搭建好設計稿以后，可以先讓產品穩定發展一段時間。當團隊對產品初期有了一定熟悉程度，此時就很適合創建自己的交互設計規范了。
把控視覺統一，減少重復出圖，提高效率。在公司有多個設計師協同工作時，可保證體驗、設計、交互等等的統一性。
提高設計稿的還原度，根據規范中組件使用情況建立公共組件庫，提高復用率，減少返工，極大的提高開發效率。
在畫原型圖遵循交互設計規范以及排版格式會減少開發在看原型圖和設計稿之間產生歧義，當然產品原型圖不需要精致，只需按照規定規范中的交互制定即可。
通用組件通過測試后，以后將不在花時間在測試組件交互上，避免了重復工作。
B端最重要的設計原則就是效率優先，保證效率的前提是組件一致，交互及時反饋，以及合理的使用場景。
因此設計交互規范不僅僅只是顏色、文字以及一個個組件的展示，這樣的文檔對產品、測試毫無意義。規范是由基礎容器盒子+組件庫+交互狀態+正確使用場景組成，在規范中每一項都應標注清楚。
思路：將原子【文字、顏色、控制器等】組合成分子【狀態提示、數據展示、數據錄入等】最終組合成元素【不同的容器頁面、彈窗、抽屜、卡片等】一個一個的元素互相搭配，組成完整的基礎平臺。
在設計過程中，設計師需要建立適配的概念，根據具體情況進行適配，以及考慮哪些區塊需要動態布局。中臺系統的用戶的主流分辨率為 1920*1080、1440*900 和 1366*768，一般常用畫板1440進行區塊動態適配。
柵格寬度：建議柵格系統的網格大小選定8作為柵格系統的原子單位，目前主流設計屏幕分辨率在水平以及垂直方向都可以被8整除，使用8作為最小原子足夠適配。
水槽寬度：根據業務可自定義水槽的值。比如8、16、24、32、40等，經過實踐經驗，正常情況下，水槽寬度為24時，視覺效果最佳。
非常規設計時：不需要死板的堅持傳統柵格系統，根據設計場景可自行修訂。
頂部導航欄高度計算范圍公式：48+8n。
側邊欄寬度計算范圍公式：200+8n。
界面最大可達顯示器最大值，側邊導航為定寬，右側內容隨柵格變化而變化。
為保持視覺、交互一致性，統一容器范圍。容器是用來收納原子、分子的，理論上信息不應該超出容器。
以有遮罩基本彈窗為例子進行分析，包括視覺+交互。開發可根據彈窗盒子創建基礎容器組件，像素級也可幫助測試進行校準。產品及設計可根據使用場景規范自身，在制作原型以及設計稿時正確使用組件。
按鈕用于開始一個即時操作。通常分為基礎按鈕（分為主按鈕、次按鈕）、圖標按鈕、文字按鈕、圖標+文字按鈕，在不同場景下使用不同的按鈕達到最佳交互效果。
基礎按鈕應用廣泛，較多人分析這種場景。所以下面主要分享一下圖標+文字按鈕的基礎規范以及使用場景。
錄入類由輸入框、選擇器、單選框、多選框等多種控件組成，基礎交互包括（默認、懸浮、點擊、失效四種狀態）
不同的控件相互組合成信息頁、表單頁、問卷頁等。
基礎輸入框包括（標題+輸入框）根據不同場景有多種情況，下面僅列出交互場景，具體視覺標注不再展示。
平臺中反饋機制是非常重要的設計，能及時提醒用戶當前操作是否成功，或是失敗在哪里，因此不同的場景需要特定的反饋提示。
反饋提示包括（警告提示、全局提示、通知提示、氣泡確認框提示、以及tips提示）
下面僅列出交互場景，具體視覺標注不再展示。
文字、顏色、間距、圓角相當于元素中的原子，完整的界面正是由這些原子一點一點組合而成，承載著最基礎但也是最重要的一部分，因此規范也要更詳細。
產出文檔是否能真正落地需要來自多方評審包括產品、技術、測試等，盡量從多角度、全方位來進行審核。
投入開發前，多方評審，各抒己見達到最優方案。
投入開發后，若要優化修改定稿部分，需再次拉通會議討論，結合當前實際情況將歷史問題一次性解決到位，避免遺漏再次造成不統一。
由于篇幅原因，規范只是展開個別案例進行分析。
最終需要落地實現才是最重要的一步，所以我們還有很長的路要走。也要不斷進行思考與總結，如何讓一致性設計規范更符合設計原則和業務場景～
原文地址：站酷
作者：食文貘
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司