Hi，我們是鐘茂林和李星潮，來自萬應低代碼 UI 設計團隊。

在過去，B 端應用通常只在企業內部員工中使用，與 C 端產品數以千萬計的用戶相比顯得少之又少。因此，B 端產品往往被認為只注重功能而不注重顏值。

但近些年，這樣的情況悄然改變，在大量「內卷」的C端產品影響下，用戶們對于軟件已經有了基本的審美標準和期待。一款風格混亂或沒有明顯風格的軟件會極大地影響B端用戶的初體驗，進而為產品打上「難用」的標簽。

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

01 前言

目標：拿來即用

以往，萬應低代碼的每個低代碼開發團隊都得「標配」1 名以上的 UI 設計師，畢竟，做企業級應用的頁面，確實需要設計經驗，但這對普通用戶而言門檻太高，我們希望事情有所改變。

所以這套設計系統，一定要能高效的實現各類場景下的設計需求，同時能讓不同的設計師甚至于是產品經理、前端開發人員能夠快速了解上手。

設計思想：秩序&自由

秩序：是有條理地、有組織地安排各構成部分以求達到正常的運轉或良好的外觀的狀態。

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

秩序并不是對大家的限制，我們只是在設計的領域準備了合理的規則，以便于不同角色都可以使用我們的設計語言，發揮各自的想象創造更多的可能，而合理的秩序規則能讓不同角色的想法更好的被實現。

同時，我們希望在萬應設計系統的秩序下大家能發揮更多的想法，自由的、隨意的組合，來高效的生成符合市場規則的相關UI設計方案。

02 通用設計規范

顏色規范

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

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

• 主題色

主題色-默認

主題色-深色

• 文字色

文字色-默認

文字色-深色

• 中性色

中性色-默認

中性色-深色

• 提醒色

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

成功色-淺色

成功色-深色

警告色-淺色

警告色-深色

危險色-淺色

危險色-深色

字體規范

「字體可以成就設計也可以毀掉設計」，糟糕的字體搭配會導致整個畫面失調。當然，在ToB的場景中，字體應用沒有想象中復雜。這里我們出具一些簡單規范。

圓角規范

圓角可以說在設計中出現次數最多的設計元素之一，做界面設計時候，一定要注意圓角的統一性。

陰影規范

陰影來源于現實生活中的真實光影，合適的陰影可以幫助用戶正確區分頁面層級，降低對內容理解的難度。但盲目設置陰影樣式會讓頁面顯得「臟、亂」，破壞界面美感。自然、干凈、統一是陰影運用的終極目標。

好了，到這里，我們已經把通用規范部分講完了，接下來就是組件的設計規范，由于這其中涉及的細節較多，而且已經全部內置在萬應低代碼設計器中，所以這里就不浪費篇幅逐一展開，僅展示相關目錄。具體資源可以文末求下載，也可以在萬應低代碼設計平臺里面去實操體驗。

掃碼進入萬應低代碼開發者社群

03 組件設計規范

在設計后臺產品時，大多數組件都是高頻復用的。規范化設計、規范化開發就是繞不過去的話題了。在《給你的應用設置「主題皮膚」，萬應低代碼新功能上線》一文中，我們曾提及：無論多復雜的應用，也不論它們采用了哪種界面樣式，實際上所有的界面都由組件：工具欄、滾動條、按鈕、字段框等構成，只是組件的位置不同、大小各異而已。

因此，在通用設計規范的基礎上，我們還給出了組件本身需要注意的規范要素，分為基礎、布局、導航、數據輸入、數據展示、反饋、圖標7 個篇章。

我們相信，這樣分類本身就能給零基礎的讀者梳理出一個大致的B端頁面設計分類框架。

基礎篇

關鍵詞：按鈕、鏈接、圖片、視頻

布局篇

關鍵詞：柵格、間距、分割線

導航篇

關鍵詞：導航菜單、分段器、標簽頁、分頁、步驟條、面包屑

數據輸入篇

關鍵詞：單行輸入框、多行輸入框、數值輸入框、計數器、密碼輸入框、單選框、復選框、開關、下拉選擇器、級聯選擇、樹選擇、時間選擇、日期時間選擇、上傳、數據穿梭框

數據展示篇

關鍵詞：評論、富文本、表格、樹表格、頭像、徽標、標簽、輪播圖、彈窗、氣泡確認框、折疊面板、樹列表、列表、日歷

?
反饋篇

關鍵詞：警告提示、全局提示、通知提醒框、進度條、骨架屏

圖表篇

關鍵詞：折線圖、柱狀圖、條形圖、散點圖、梯形圖、餅圖、儀表盤、雷達圖、數字翻牌器

在設計工作中，尤其是跨時數周、數月的大型項目中，我們常會發現，即使是自己設計的系統，在設計前期和后期風格也會有些許差異。這是因為隨著時間推移，隨著個人能力的提升，設計者很可能會忘記當時定的規范，不斷改進自己原有的設計。而使用統一的設計系統可大幅提升設計的一致性。

萬應低代碼為大家提供一套「拿來即用」的設計規范，用戶不需要精通CSS，只要按照指引來，就能守住設計的基本及格線。