B端中后臺(tái)UI設(shè)計(jì)規(guī)范定義 & 實(shí)踐經(jīng)驗(yàn)總結(jié)
在B端產(chǎn)品設(shè)計(jì)中,中后臺(tái)UI設(shè)計(jì)規(guī)范的建立對(duì)于提升設(shè)計(jì)效率、保證用戶體驗(yàn)一致性以及優(yōu)化開發(fā)流程至關(guān)重要。本文從設(shè)計(jì)規(guī)范的意義、原子設(shè)計(jì)理論、后臺(tái)設(shè)計(jì)系統(tǒng)搭建以及Design Token應(yīng)用實(shí)踐四個(gè)方面,詳細(xì)總結(jié)了B端中后臺(tái)設(shè)計(jì)的要點(diǎn)和方法,供大家參考學(xué)習(xí)。
今天從以下4個(gè)方面,結(jié)合7年B端設(shè)計(jì)工作經(jīng)驗(yàn),為大家分享原子設(shè)計(jì)理論和中后臺(tái)設(shè)計(jì)系統(tǒng)搭建的應(yīng)用實(shí)踐。
01 搭建設(shè)計(jì)規(guī)范的意義
分別站在整個(gè)產(chǎn)品設(shè)計(jì)研發(fā)流程中各個(gè)角色的不同角度,在工作中可能會(huì)有以下“抱怨時(shí)刻”:
由此,體現(xiàn)出搭建設(shè)計(jì)規(guī)范的作用和意義:
①?產(chǎn)品側(cè)
?個(gè)產(chǎn)品不同分?多個(gè)團(tuán)隊(duì)完成的時(shí)候,可以保證產(chǎn)品團(tuán)隊(duì)使?同?份設(shè)計(jì)規(guī)范快速完成產(chǎn)品原型設(shè)計(jì)。保證可復(fù)?模塊的交互體驗(yàn)的?致性。
② 設(shè)計(jì)側(cè)
通過設(shè)計(jì)規(guī)范去解決?部分需求,極?提?效率解放雙?,讓設(shè)計(jì)師能去做?些更發(fā)揮創(chuàng)意和想象?的設(shè)計(jì)。
③ 開發(fā)側(cè)
形成開發(fā)資產(chǎn),可以提升研發(fā)效率,降低維護(hù)成本。開發(fā)?程師?需再重復(fù)開發(fā)同?個(gè)組件,只需要去組件庫(kù)?調(diào)?即可,配合業(yè)務(wù)邏輯,?效完成界?開發(fā),做到開箱即?。
④ 測(cè)試側(cè)
標(biāo)準(zhǔn)化的設(shè)計(jì)規(guī)范,是測(cè)試?員最喜歡看到的。例如,設(shè)計(jì)規(guī)范規(guī)定彈窗 footer 區(qū)按鈕組居右,那么測(cè)試?員只要測(cè)到不居右,就可以給產(chǎn)品提優(yōu)化建議了。
02 原子設(shè)計(jì)理論
設(shè)計(jì)規(guī)范中具像化的環(huán)節(jié)是設(shè)計(jì)組件化,最早可以追溯到?業(yè)?命時(shí)期,福特創(chuàng)造的流?線?產(chǎn)?式。福特將汽?分解成零部件,再把零部件模塊化組裝,這?創(chuàng)舉極?的提?了?產(chǎn)效率。
根據(jù)資料顯示,T型?是世界第?款?量使?通?零部件,并進(jìn)??規(guī)模流?線裝配的汽?。這種?式極?地提?了T型??產(chǎn)效率,降低了?產(chǎn)成本。
1914年,福特已經(jīng)可以做到93分鐘?產(chǎn)?輛汽?,?同期其他所有汽??商的?產(chǎn)能?總和也不及于此。
到了1920年代,T型?的價(jià)格甚?降到300美元?輛(問世之初T型?的售價(jià)僅需850美元,?同期的競(jìng)爭(zhēng)對(duì)?則通常為2000-3000美元?輛)。
原子設(shè)計(jì)理論最初來源于化學(xué)領(lǐng)域,這一點(diǎn)從名字可以聽出來。在化學(xué)中,所有的物體都是由原?構(gòu)成,原?組合構(gòu)成分?,分?組合構(gòu)成有機(jī)物,最終形成了宇宙萬物。
2013年前端?程師 Brad Forst將此理論運(yùn)?在界?設(shè)計(jì)中,形成?套設(shè)計(jì)系統(tǒng),包含 5 個(gè)層?:原?、分?、組織、模板、??。當(dāng)公司的業(yè)務(wù)產(chǎn)品逐漸擴(kuò)?時(shí),我們就需要制定?套完整的設(shè)計(jì)系統(tǒng),提升設(shè)計(jì)和開發(fā)的協(xié)作效率,統(tǒng)?所有設(shè)計(jì)師的輸出物。
總之,將設(shè)計(jì)拆分成?些基本元素,例如?個(gè)按鈕、?個(gè)彈窗,再根據(jù)業(yè)務(wù)需求、產(chǎn)品邏輯重新組裝,形成最終的產(chǎn)品,這就是原?設(shè)計(jì)理論(組件化設(shè)計(jì)),區(qū)別于整體設(shè)計(jì)制造的?種新的?作流程。
03 后臺(tái)設(shè)計(jì)系統(tǒng)搭建
① 設(shè)計(jì)系統(tǒng)搭建—原子
原?是物質(zhì)的基礎(chǔ)組成部分,是構(gòu)成設(shè)計(jì)系統(tǒng)的最基礎(chǔ)元素。
在界?中以「元素」的形式存在,例如:顏?、?字、圖標(biāo)、分割線、間距、圓?、陰影等。
色彩體系
中后臺(tái)產(chǎn)品的?彩體系主要分為3類:品牌?、功能?、中性?。
- 品牌色:大型公司往往都會(huì)有專屬色號(hào)的品牌色,比如阿里橙色、美團(tuán)黃色和騰訊藍(lán)色,以體現(xiàn)產(chǎn)品特性、傳播理念。在界面中主要體現(xiàn)在關(guān)鍵行動(dòng)點(diǎn)、選中狀態(tài)、重要信息和插畫元素等。
- 功能色:旨在表示某種狀態(tài)提示,這類顏色往往是深入人心的,比如綠色代表成功,紅色代表失敗等等。
- 中性色:還有一種是不需要傳遞顏色代表的特殊含義的,稱為中性色,即黑白灰。
B端網(wǎng)站體現(xiàn)理性和效率特性,往往會(huì)使中性色占據(jù)九成以上,應(yīng)用在背景、邊框、文本和分割線。下圖為顏色定義示例(考慮暗色模式)。
文字體系
B端產(chǎn)品的?字系統(tǒng)設(shè)計(jì)?標(biāo):增強(qiáng)閱讀體驗(yàn)、提升信息獲取效率,字體是體系化界?設(shè)計(jì)中最基本的構(gòu)成之?。
字體的??、字重、?彩區(qū)分體現(xiàn)界?信息的層級(jí)關(guān)系。
- 整體思路:在同?個(gè)系統(tǒng)的 UI 設(shè)計(jì)中先建?體系化的設(shè)計(jì)思路,對(duì)主、次、輔助、標(biāo)題、展示等類別的字體做統(tǒng)?的規(guī)劃,再落地到具體場(chǎng)景中進(jìn)?微調(diào),最終確定建?體系化的設(shè)計(jì)思路,有助于強(qiáng)化字體落地的?致性。
- 少即是多:在視覺展現(xiàn)上能夠?盡量少的樣式去實(shí)現(xiàn)設(shè)計(jì)?的。避免毫?意義的使??量字階、顏?、字重強(qiáng)調(diào)視覺重點(diǎn)或?qū)?關(guān)系,提?字體應(yīng)?的性價(jià)?,減少不必要的樣式浪費(fèi)。
- 拉開對(duì)?:在需要拉開差距的時(shí)候可以嘗試在字階表中跳躍地選擇字體??,會(huì)令字階之間產(chǎn)??種微妙的韻律感。
下圖為字階應(yīng)用規(guī)范示意:
陰影、圓角、線條
陰影:在B端界?中,有些特殊的元素會(huì)使?到陰影,從陰影中我們可以看出物體距離平?的?度,距離平?越?的物體陰影越?;
圓角:從直?到圓?給?帶來從嚴(yán)謹(jǐn)冰冷到柔和親切的?理感受,在B端界? 中,常?2-8px圓?;
線條:分割模塊及輔助定位。
② 后臺(tái)設(shè)計(jì)系統(tǒng)搭建—分子
在界?中,分?是按照規(guī)律組合起來的元素,如:按鈕、搜索框、選擇器等。
以按鈕為例,?字、?塊、圖標(biāo)和間距這些抽象的原?產(chǎn)?關(guān)聯(lián)組合成分?:圖標(biāo)、?字傳達(dá)含義;顏?、圓?傳遞特性;間距、尺?定義規(guī)范。
③ 后臺(tái)設(shè)計(jì)系統(tǒng)搭建—組織
分?+原?組合成更復(fù)雜和可拓展的組織(區(qū)塊組件),如搜索區(qū)、卡?列表區(qū)、表單區(qū)、數(shù)據(jù)統(tǒng)計(jì)區(qū)等。
④ 后臺(tái)設(shè)計(jì)系統(tǒng)搭建—模板
由原?+分?+組織構(gòu)成的更復(fù)雜更具拓展性的模塊,構(gòu)成了典型??模板,如列表?、詳情?、異常?、Dashboard等。模板在設(shè)計(jì)系統(tǒng)中承載的作?就是保證設(shè)計(jì)?案在原型各階段的?致性,專注??底層架構(gòu),并?具體??。
⑤ 后臺(tái)設(shè)計(jì)系統(tǒng)搭建—頁面
帶業(yè)務(wù)邏輯的場(chǎng)景案例,如標(biāo)注場(chǎng)景、權(quán)限管理、詳情設(shè)置等,將??模板填充真實(shí)的?字、圖?后形成??,即帶交互邏輯的?保真原型圖,真實(shí)內(nèi)容使設(shè)計(jì)系統(tǒng)有了“?命” 。
04 Design Token應(yīng)用實(shí)踐
雖然通過設(shè)計(jì)規(guī)范可以對(duì)產(chǎn)研流程提效,但在開發(fā)還原中還是會(huì)經(jīng)常遇到?些棘?的問題。
開發(fā)還原準(zhǔn)確度難以保證,走查幾輪還有有細(xì)節(jié)問題沒有修復(fù);
領(lǐng)導(dǎo)要求開發(fā)暗色模式,或者客戶要求換一套主題色,找到替換的工作量巨大;
設(shè)計(jì)一處變更,涉及多個(gè)頁面模塊,維護(hù)工作量大。
為了解決和優(yōu)化上述的問題,Design Token 應(yīng)運(yùn)??。它可以解決產(chǎn)品設(shè)計(jì)和開發(fā)過程中的細(xì)節(jié)、變更和?格?致性的問題,有效提?產(chǎn)研團(tuán)隊(duì)設(shè)計(jì)質(zhì)量和協(xié)作效率。
① Design Token介紹
“Token”原本的意思是“令牌,指令”,與 Design 連在?起指“設(shè)計(jì)變量”。在?程邏輯中?于?戶身份與服務(wù)器端進(jìn)?驗(yàn)證,?在設(shè)計(jì)體系中,Design Token 則可以簡(jiǎn)單理解為封裝的視覺樣式參數(shù)。它通過規(guī)定樣式參數(shù),并通過?套符合設(shè)計(jì)師、?程師理解的統(tǒng)?的命名規(guī)則,為這些樣式參數(shù)的定義名稱。
Design Token優(yōu)勢(shì)
設(shè)計(jì)語義更易理解:幫助設(shè)計(jì)師和開發(fā)建?統(tǒng)?語?,設(shè)計(jì)?案更加?致。從下到上的Design Token命名思路。
主題?膚?鍵替換:主題?膚的替換可以?在兩個(gè)維度,?是淺?模式和暗?模式的替換,?是不同品牌?之間的替換。我們可以將不同主題的同?個(gè)場(chǎng)景下的顏?使?同?個(gè) Token 命名,達(dá)到?鍵換膚的效果適配不同客戶?案。
設(shè)計(jì)變更?效維護(hù):替代傳統(tǒng)?作流?鍵替換效果。例如修改二級(jí)文本的顏色,傳統(tǒng)工作流需要先修改設(shè)計(jì)規(guī)范,修改設(shè)計(jì)稿,然后輸出給開發(fā),開發(fā)逐一更新代碼,完成后提交給設(shè)計(jì)師進(jìn)行走查驗(yàn)收。而當(dāng)使用Token之后,只需要更新Token參數(shù),就可以直接導(dǎo)出JSON給開發(fā),一鍵自動(dòng)更新。提高效率不止一點(diǎn)點(diǎn)。
設(shè)計(jì)效果精準(zhǔn)還原:代碼編輯器?動(dòng)化提示顏?選擇,如不正確則產(chǎn)?報(bào)錯(cuò)。
總結(jié)一下使用Token開發(fā)的優(yōu)勢(shì):
- 設(shè)計(jì)語言 更易理解
- 主題皮膚 一鍵替換
- 設(shè)計(jì)變更 高效維護(hù)
- 設(shè)計(jì)成果 精準(zhǔn)還原
② Design Token應(yīng)用流程
第一步:提煉token元素;
第二步:定義命名規(guī)則;
第三步:整理Design Token資產(chǎn)表;
第四步:開發(fā)與應(yīng)用。
接下來具體說說如何為Design Token命名,命名方式目前并沒有絕對(duì)統(tǒng)一的要求,不過有一定的邏輯規(guī)則,可以由設(shè)計(jì)師找前端開發(fā)一起商量出一個(gè)都能通俗易懂便于理解的命名規(guī)則,
舉個(gè)例子:
1.Token名稱由大到小排序,中間用“-”分隔;
2.Token前綴可自定義添加公司簡(jiǎn)稱,如“–el-xx” 、“–ant-xx”、“–td-xx”。
為了更好的統(tǒng)一規(guī)范,應(yīng)用Token,建議成熟的互聯(lián)網(wǎng)公司設(shè)計(jì)團(tuán)隊(duì)搭建自己的低代碼平臺(tái)。一鍵更換主題,盡在指尖。
最后
以上就是從四個(gè)方面歸納的B端設(shè)計(jì)規(guī)范定義和總結(jié),希望對(duì)你有所幫助!
本文由人人都是產(chǎn)品經(jīng)理作者【Clippp】,微信公眾號(hào):【Clip設(shè)計(jì)夾】,原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自Unsplash,基于 CC0 協(xié)議。
- 目前還沒評(píng)論,等你發(fā)揮!