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