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