Hi，我們是鐘茂林和李星潮，來(lái)自萬(wàn)應(yīng)低代碼 UI 設(shè)計(jì)團(tuán)隊(duì)。

在過(guò)去，B 端應(yīng)用通常只在企業(yè)內(nèi)部員工中使用，與 C 端產(chǎn)品數(shù)以千萬(wàn)計(jì)的用戶相比顯得少之又少。因此，B 端產(chǎn)品往往被認(rèn)為只注重功能而不注重顏值。

但近些年，這樣的情況悄然改變，在大量「內(nèi)卷」的C端產(chǎn)品影響下，用戶們對(duì)于軟件已經(jīng)有了基本的審美標(biāo)準(zhǔn)和期待。一款風(fēng)格混亂或沒(méi)有明顯風(fēng)格的軟件會(huì)極大地影響B(tài)端用戶的初體驗(yàn)，進(jìn)而為產(chǎn)品打上「難用」的標(biāo)簽。

正因如此，在前端頁(yè)面設(shè)計(jì)上，萬(wàn)應(yīng)低代碼給了用戶很高的自主設(shè)計(jì)權(quán)限（當(dāng)然，后端設(shè)計(jì)的自主權(quán)限更高），但隨之而來(lái)的就是用戶上手難度的直線上升，所以，為了讓開(kāi)發(fā)者能夠在產(chǎn)品美化上進(jìn)一步提升效率，少走彎路，我們以多年的技術(shù)積累和正在使用的設(shè)計(jì)語(yǔ)言為基礎(chǔ)，整理了一份「萬(wàn)應(yīng)低代碼應(yīng)用前端頁(yè)面設(shè)計(jì)規(guī)范」——Onein Design，在此分享給小伙伴。

01 前言

目標(biāo)：拿來(lái)即用

以往，萬(wàn)應(yīng)低代碼的每個(gè)低代碼開(kāi)發(fā)團(tuán)隊(duì)都得「標(biāo)配」1 名以上的 UI 設(shè)計(jì)師，畢竟，做企業(yè)級(jí)應(yīng)用的頁(yè)面，確實(shí)需要設(shè)計(jì)經(jīng)驗(yàn)，但這對(duì)普通用戶而言門檻太高，我們希望事情有所改變。

所以這套設(shè)計(jì)系統(tǒng)，一定要能高效的實(shí)現(xiàn)各類場(chǎng)景下的設(shè)計(jì)需求，同時(shí)能讓不同的設(shè)計(jì)師甚至于是產(chǎn)品經(jīng)理、前端開(kāi)發(fā)人員能夠快速了解上手。

設(shè)計(jì)思想：秩序&自由

秩序：是有條理地、有組織地安排各構(gòu)成部分以求達(dá)到正常的運(yùn)轉(zhuǎn)或良好的外觀的狀態(tài)。

自由：自由的最基本含義是不受限制和阻礙 (束縛、控制、強(qiáng)迫或強(qiáng)制)，或者說(shuō)限制或阻礙的不存在。

秩序并不是對(duì)大家的限制，我們只是在設(shè)計(jì)的領(lǐng)域準(zhǔn)備了合理的規(guī)則，以便于不同角色都可以使用我們的設(shè)計(jì)語(yǔ)言，發(fā)揮各自的想象創(chuàng)造更多的可能，而合理的秩序規(guī)則能讓不同角色的想法更好的被實(shí)現(xiàn)。

同時(shí)，我們希望在萬(wàn)應(yīng)設(shè)計(jì)系統(tǒng)的秩序下大家能發(fā)揮更多的想法，自由的、隨意的組合，來(lái)高效的生成符合市場(chǎng)規(guī)則的相關(guān)UI設(shè)計(jì)方案。

02 通用設(shè)計(jì)規(guī)范

顏色規(guī)范

如今市面上有很多配色工具，大多都提供一鍵生成配色方案的功能，但是當(dāng)面對(duì)高度自由且需求多變的設(shè)計(jì)狀況時(shí)，盲目使用配色方案往往會(huì)導(dǎo)致產(chǎn)品頁(yè)面雜亂、無(wú)章法。Onein Design 提供了一套產(chǎn)品級(jí)的色彩體系，方便用戶能夠快速搭配出符合產(chǎn)品調(diào)性的色彩。此外，深淺顏色切換也是 Onein Design 的主打功能之一。用戶可根據(jù)自己的喜好或當(dāng)前需要，在萬(wàn)應(yīng)低代碼設(shè)計(jì)器的全局樣式中設(shè)置相應(yīng)的頁(yè)面主題顏色。

目前，萬(wàn)應(yīng)低代碼提供了深色和淺色兩種不同的顏色方案。深色主題具有比較低的明亮度和高度飽和度，能夠在晚間或光線較弱的環(huán)境下清晰呈現(xiàn)內(nèi)容；淺色主題則更加清新明亮，同時(shí)也能為用戶帶來(lái)更為輕松愉悅的使用體驗(yàn)。

• 主題色

主題色-默認(rèn)

主題色-深色

• 文字色

文字色-默認(rèn)

文字色-深色

• 中性色

中性色-默認(rèn)

中性色-深色

• 提醒色

功能色是指用于特定場(chǎng)景、表達(dá)特殊語(yǔ)義的顏色，例如成功、失敗、告警、等狀態(tài)。我們定義了 3 種功能色，在遵循色彩通用含義選取色相的基礎(chǔ)上，結(jié)合其存在的交互狀態(tài)，形成了系列的顏色。

成功色-淺色

成功色-深色

警告色-淺色

警告色-深色

危險(xiǎn)色-淺色

危險(xiǎn)色-深色

字體規(guī)范

「字體可以成就設(shè)計(jì)也可以毀掉設(shè)計(jì)」，糟糕的字體搭配會(huì)導(dǎo)致整個(gè)畫面失調(diào)。當(dāng)然，在ToB的場(chǎng)景中，字體應(yīng)用沒(méi)有想象中復(fù)雜。這里我們出具一些簡(jiǎn)單規(guī)范。

圓角規(guī)范

圓角可以說(shuō)在設(shè)計(jì)中出現(xiàn)次數(shù)最多的設(shè)計(jì)元素之一，做界面設(shè)計(jì)時(shí)候，一定要注意圓角的統(tǒng)一性。

陰影規(guī)范

陰影來(lái)源于現(xiàn)實(shí)生活中的真實(shí)光影，合適的陰影可以幫助用戶正確區(qū)分頁(yè)面層級(jí)，降低對(duì)內(nèi)容理解的難度。但盲目設(shè)置陰影樣式會(huì)讓頁(yè)面顯得「臟、亂」，破壞界面美感。自然、干凈、統(tǒng)一是陰影運(yùn)用的終極目標(biāo)。

好了，到這里，我們已經(jīng)把通用規(guī)范部分講完了，接下來(lái)就是組件的設(shè)計(jì)規(guī)范，由于這其中涉及的細(xì)節(jié)較多，而且已經(jīng)全部?jī)?nèi)置在萬(wàn)應(yīng)低代碼設(shè)計(jì)器中，所以這里就不浪費(fèi)篇幅逐一展開(kāi)，僅展示相關(guān)目錄。具體資源可以文末求下載，也可以在萬(wàn)應(yīng)低代碼設(shè)計(jì)平臺(tái)里面去實(shí)操體驗(yàn)。

掃碼進(jìn)入萬(wàn)應(yīng)低代碼開(kāi)發(fā)者社群

03 組件設(shè)計(jì)規(guī)范

在設(shè)計(jì)后臺(tái)產(chǎn)品時(shí)，大多數(shù)組件都是高頻復(fù)用的。規(guī)范化設(shè)計(jì)、規(guī)范化開(kāi)發(fā)就是繞不過(guò)去的話題了。在《給你的應(yīng)用設(shè)置「主題皮膚」，萬(wàn)應(yīng)低代碼新功能上線》一文中，我們?cè)峒埃簾o(wú)論多復(fù)雜的應(yīng)用，也不論它們采用了哪種界面樣式，實(shí)際上所有的界面都由組件：工具欄、滾動(dòng)條、按鈕、字段框等構(gòu)成，只是組件的位置不同、大小各異而已。

因此，在通用設(shè)計(jì)規(guī)范的基礎(chǔ)上，我們還給出了組件本身需要注意的規(guī)范要素，分為基礎(chǔ)、布局、導(dǎo)航、數(shù)據(jù)輸入、數(shù)據(jù)展示、反饋、圖標(biāo)7 個(gè)篇章。

我們相信，這樣分類本身就能給零基礎(chǔ)的讀者梳理出一個(gè)大致的B端頁(yè)面設(shè)計(jì)分類框架。

基礎(chǔ)篇

關(guān)鍵詞：按鈕、鏈接、圖片、視頻

布局篇

關(guān)鍵詞：柵格、間距、分割線

導(dǎo)航篇

關(guān)鍵詞：導(dǎo)航菜單、分段器、標(biāo)簽頁(yè)、分頁(yè)、步驟條、面包屑

數(shù)據(jù)輸入篇

關(guān)鍵詞：?jiǎn)涡休斎肟?、多行輸入框、?shù)值輸入框、計(jì)數(shù)器、密碼輸入框、單選框、復(fù)選框、開(kāi)關(guān)、下拉選擇器、級(jí)聯(lián)選擇、樹(shù)選擇、時(shí)間選擇、日期時(shí)間選擇、上傳、數(shù)據(jù)穿梭框

數(shù)據(jù)展示篇

關(guān)鍵詞：評(píng)論、富文本、表格、樹(shù)表格、頭像、徽標(biāo)、標(biāo)簽、輪播圖、彈窗、氣泡確認(rèn)框、折疊面板、樹(shù)列表、列表、日歷

?
反饋篇

關(guān)鍵詞：警告提示、全局提示、通知提醒框、進(jìn)度條、骨架屏

圖表篇

關(guān)鍵詞：折線圖、柱狀圖、條形圖、散點(diǎn)圖、梯形圖、餅圖、儀表盤、雷達(dá)圖、數(shù)字翻牌器

在設(shè)計(jì)工作中，尤其是跨時(shí)數(shù)周、數(shù)月的大型項(xiàng)目中，我們常會(huì)發(fā)現(xiàn)，即使是自己設(shè)計(jì)的系統(tǒng)，在設(shè)計(jì)前期和后期風(fēng)格也會(huì)有些許差異。這是因?yàn)殡S著時(shí)間推移，隨著個(gè)人能力的提升，設(shè)計(jì)者很可能會(huì)忘記當(dāng)時(shí)定的規(guī)范，不斷改進(jìn)自己原有的設(shè)計(jì)。而使用統(tǒng)一的設(shè)計(jì)系統(tǒng)可大幅提升設(shè)計(jì)的一致性。

萬(wàn)應(yīng)低代碼為大家提供一套「拿來(lái)即用」的設(shè)計(jì)規(guī)范，用戶不需要精通CSS，只要按照指引來(lái)，就能守住設(shè)計(jì)的基本及格線。