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