做B端后臺產品很復雜?這里有一份完整的UI設計規范

AI時代,如何更快入行搶占紅利得高薪?前阿里巴巴產品專家帶你15天入門AI產品經理。了解一下>

本文是作者在不同的項目中不斷反思和總結。作者把自己的一些想法和經驗分享出來,總結自己工作中遇到的問題和解決的方法,記錄自己思考和理解的過程,希望對即將或正在從事B端后臺產品設計的你有一點點啟發或幫助。

寫在前面

作為一個新時代全能打雜,日常工作包括移動端、PC端的UI設計以及各類平面視覺設計,其中自然少不了令人“禿”然的B端后臺產品設計。

畢業兩年來一直都做著B端產品的UI設計工作,參與過的后臺產品設計面對的主要客戶有公司內部、各大企業以及政府機構。工作和學習的過程中走過不少彎路,也在不同的項目中不斷反思和總結。把自己的一些想法和經驗分享出來,總結自己工作中遇到的問題和解決的方法,記錄自己思考和理解的過程,也希望對即將或正在從事B端后臺產品設計的你有一點點啟發或幫助。

希望在日后的工作和學習中,通過實踐來不斷完善自己對B端后臺產品的理解。

目錄:

一、明修棧道C和暗度陳倉B

二、后臺產品設計思路

三、后臺產品設計規范

四、經驗觀點及設計資源

一、明修棧道C和暗度陳倉B

1.1 初識B端產品和C端產品

按照C端產品和B端產品的專業術語來解釋的話,C端Consumer,表示為消費者、個人用戶或終端用戶設計,直接面向普通用戶提供服務來幫助他們實現個人需求。B端Business,它面對商業和企業,是為幫助企業集團等實現商業目的而設計的軟件、工具或者平臺。

在我們日常生活中,在手機上使用的大多是C端產品,單一的C端產品通常是為了實現單一的需求,比如看網紅的抖音、聽音樂的酷狗、買車票的12306、社交的微信等,這些產品有自己的核心功能,其他的功能則是附加的,倘若沒有這些附加功能,雖然用戶體驗感會降低,但并不會影響產品的核心功能。

而面向B端的產品,我個人稱之為“暗度陳倉”。當個人用戶為實現個人需求產生了一系列動作,往往伴隨著該需求的另一端也會反饋一系列動作,即C端產品的后臺產品線(BtoC),比如淘寶賣家平臺、餓了么商家版等。除此之外,還有面向商家、企業、業務部門提供的企業級服務產品,以及面對企業或者個人提供的平臺級工具產品等。

雖說我們日常使用的更多是C端產品,但是B端產品對我們的影響也是時時刻刻都存在著的。C端產品在明,逐漸改變著現代人的生活方式,B端產品在暗,間接服務于用戶,讓一切流程化秩序化,并且具有多個主要功能點。

  • “ToB還是ToC?這是個問題……”
  • “不管ToB還是ToC,最后都還是ToP(people)。”

【經驗】B端后臺產品UI設計小結

1.2 B端和C端產品的區別

在我看來,C端產品以消費互聯網為主,B端產品以產業互聯網為主,C端更感性,而B端更理性。

從使用者的角度來說:

  • C端產品關鍵詞包括免費使用、迅速上手、體驗為王、你能讓我做什么;
  • B端產品的關鍵詞則是付費購買、上手緩慢、效率第一、你能為我做什么。

從開發的角度來說:

  • C端周期短,B端周期長;
  • C端用戶多,B端用戶少;
  • C端邏輯簡單,B端邏輯復雜;
  • C端競品較多,B端競品較少;
  • C端主戰場是移動端,B端則是PC端;
  • C端是用戶體驗驅動,B端是解決問題驅動;
  • C端產品的使用決策權在用戶手中,而B端產品的使用決策權則在客戶手中(B端客戶不一定是用戶);
  • C端產品除了產品的體驗以外,也要讓產品更美觀,讓活動更有趣,讓用戶更舒服,產品經理有很強的同理心,B端產品的實用性大于美觀性,能切實解決問題、配置資源的B端產品才是一個好的B端產品,產品經理要具有更強的邏輯思維能力。

【經驗】B端后臺產品UI設計小結

1.3 后臺產品常見分類

后臺產品按其作用可大致分為兩類:一是支撐前臺產品,二是管理各種資源。

我認為后臺產品應當是囊括在B端產品的范圍之內的,常見的類型包括:

  • C端產品的后臺產品線——如淘寶商家版,餓了么商家版,對訂單和用戶進行管理,支持C端產品的業務進展;
  • 平臺級工具產品——如微信公眾平臺,對文章和讀者的數據統計和管理;各大互聯網公司的開放平臺,如微博開放平臺等;
  • 企業級服務產品——虛擬主機系統(VMware),云主機管理系統(深信服、xensystem、騰訊云)以及各種云SaaS;
  • 企業的業務處理平臺——對內有考勤、報銷等OA辦公系統,對外有CRM客戶管理系統,ERP資源及供應鏈管理系統。

【經驗】B端后臺產品UI設計小結

二、后臺產品設計思路

2.1 初識后臺產品設計

說起后臺產品,很容易想到復雜、龐大、邏輯縝密,而作為設計師,苦于競品短缺、架構復雜,設計的前期工作比設計本身要復雜得多。

后臺產品不同于普通用戶所使用的APP,它在用戶初次使用和短暫時間內的認知成本是較高的。當用戶用慣了一個音樂類的app,再給他幾個其他的音樂APP,用戶是可以迅速上手并且輕易解決自己的需求的。而后臺產品則不然。

  • 對于后臺產品來說,首先,所見之少,它并不是隨隨便便就可以下載使用的,即便你在使用的過程中,也因角色不同而受到權限限制,一般來講很難像超級管理員一樣接觸到整體功能;
  • 其次,門檻之高,后臺產品的使用者一般都是在該行業沉淀了很久,所以要對后臺產品進行設計就需要同樣了解該行業、甚至更能洞察該行業,業務本身的復雜性質決定了后臺產品架構也會比較龐大;
  • 然后,無論是工廠商家的進銷存管理,還是政府醫院的工作流和業務流,乃至企業內部的產品,除了不同行業都有門檻外,對信息和產品也有“保密協議”的使命感。所謂“隔行如隔山”,在后臺產品更是如此;
  • 最后,后臺產品設計往往沒有固定的功能架構和商業模式,對于產品經理的邏輯思維能力要求更高,設計師不僅僅是做界面、優化流程,也要主動和產品經理溝通交流,并對產品進行思考和探索。

這大概就是后臺產品相關資源較少、設計難度較大的一些原因。

2.2 后臺UI設計工作流程

后臺UI設計的工作,大體分為三個部分:需求分析——設計執行——數據分析。

在需求分析階段,要對產品本身和行業本身有一些基本的認知。要了解產品的基本情況,比如:產品目標、用戶人群、產品定位、需求分析、功能模塊、主要競品和產品特色。

做這個產品是為了解決什么問題?想實現什么目標?使用這個系統的用戶有哪些?不同角色的用戶有哪些具體的權限?是否需要對每一個用戶的行為都生成操作日志?產品有哪些主要的功能模塊?產品的業務流程是怎樣的?有哪些同類型的產品?和他們相比我們的產品有什么特色和特點?

成功的做出大而全的后臺產品,是整個設計團隊和開發團隊能力的體現,而對很多小團隊來說,只能做一些大團隊不愿去做的產品,或另辟蹊徑在某些方面做專做精。

在設計執行階段,參照PM給出的功能清單做原型和流程的梳理,需要關注的有當前版本規劃、功能模塊、功能類型、功能描述、任務優先級、完成時間等,交互原型則伴隨著功能描述、規則判定條件、觸發條件等內容。

原型設計完成,開始做UI視覺方面的設計,而這時后端同步構思需求的實現方案。UI設計師向前端了解實現框架,方便交接和溝通。當界面實現,UI設計師應該是最早進行測試的,力求視覺設計和代碼實現無誤差。在完成設計執行后,從信息層級、文字、圖標、圖片等方面進行設計走查,進行多次設計驗證與測試。

數據分析是產品優化迭代的重要依據。進行多番測試和評審后交付客戶(或內部)使用,根據產生的具體問題進行不斷迭代,且觀察產品能否通過準確的數據反映問題、體現能力,應虛心接納使用者的使用建議并嚴謹思考其合理性,用戶的使用和反饋是優化產品的重要途徑。只有達到了管理和運營的指標,后臺產品才是真正產生了價值。

【經驗】B端后臺產品UI設計小結

2.3 制定設計規范的作用

為后臺產品制定設計規范有哪些作用和好處呢?簡單來說就是對產品好、對自己好、對團隊好、對客戶好。

  • 對產品——在項目完成第一版較為穩定的版本時,著手制定設計標準,統一公司視覺設計規范及某些特定交互設計規范。同一個項目會有多個設計師的參與,規范化的設計語言,避免因設計控件混亂而影響設計輸出;
  • 對自己——組件化同類元素,提高工作效率,建立公司產品的組件庫,以便不同項目的復用及設計延展;在同一個項目中也能更好的把控該項目的視覺規范,提高效率;
  • 對團隊——設計規范的制定,規范了設計團隊的輸出,同時方便了與開發團隊的交接和協作。通過設計規范的制定,前端實現也能擁有一套可供復用和擴展的組件庫,助力上下游交接及團隊協作;
  • 對客戶——制定設計規范的同時需要考慮設計延展性,為不同客戶的定制化需求提供更高效的輸出。同時在進行產品迭代時,設計規范的組件化調整也大大提高了工作效率。

【經驗】B端后臺產品UI設計小結

三、后臺產品設計規范

*以下內容僅供參考和交流,圖片內容不代表真實尺寸,請結合特定產品靈活使用。

3.1 頁面布局

(1)統一尺寸

據統計,目前PC端用戶屏幕分辨率占比排名前三的是1920*1080、1366*768、1440*900,以1440來設計的話,向上適配或者向下適配誤差會比較小。

(2)適配方案

面向多個客戶,后臺產品設計功能型頁面的尺寸統一為1440*900,按照柵格系統原則向上或向下適配;展示型頁面以1440*900為主,同時設計出極端情況(寬度為1280以及寬度為1920)的效果圖,力求實現前端實現效果和高保真設計圖誤差最小。

面向公司內部的后臺系統,由于各個職工電腦屏幕是統一采購、統一尺寸,所以開發適配的分辨率可以統一尺寸進行設計,這個尺寸根據公司內部采購屏幕的尺寸和分辨率選擇即可(提前和前端溝通好)。

(3)頁面框架

頁面框架主要分為左右欄布局和上下欄布局,還有其他的布局。

  • 左右欄布局包括頂部欄、左側菜單欄、主體內容三大區域,其中頂部菜單欄、左側菜單欄為固定結構,右側主體內容根據分辨率進行動態縮放;
  • 上下欄布局包括頂部菜單欄和主體內容兩大區域,其中頂部菜單欄為固定結構,主體內容進行動態縮放且需定義主體內容左右兩邊空白區域最小值;
  • 左右欄布局時,左側菜單可收縮展開,收縮狀態下固定寬度。

(4)柵格布局

柵格系統的使用是為了解決自適應和響應式問題,從而更好地進行產品設計和產品開發。響應式柵格采用24列柵格體系實現,以滿足2,3,4,5,6分比布局等多種情況。固定寬度Column,將間隔Gutter進行動態縮放。需要柵格化處理的內容的總寬度=23列(1列=1寬度Column+1間隔Gutter)+1寬度Column=24寬度Column+23間隔Gutter。

谷歌規定模塊和結構之間要以8px為基準,布局間相對間距可采用8px以及8的倍數,但一些小組件(按鈕、間隔、輸入框 )可以以4為基準。柵格布局是為了輔助設計,靈活運用,不要被它所局限。

(5)尺寸設定

一般在整體區域左上角放置產品LOGO及產品名稱,大部分系統頂部欄高度48+8n,側邊欄寬度200+8n。我常用的是頂部欄高度56px,側邊欄寬度200px,側邊欄收縮狀態寬度56px,右側的側浮窗寬度400px。

(6)相對間隔

定義主體內容的上下左右邊距,定義主體區域內各模塊的邊距及安全寬度,超出內容區域的部分采用區域內滾動或整屏滾動,視情況固定導航欄。

【經驗】B端后臺產品UI設計小結

3.2 標準色

顏色分為品牌色、輔助色、中性色。根據不同產品的不同需求,可能也會將統計圖、標簽等進行統一標準色設定。

品牌色即產品主色,產品主色的設定直接影響產品氣質和直觀感受,也是產品直接對外的形象。品牌色要根據產品特性、用戶使用場景、產品定位等進行選取,盡量做好色彩的延伸性,可支持換膚。品牌色的應用場景包括操作狀態、按鈕色、可操作圖標等。

  • 輔助色用于提示其他場景,比如:成功、失敗、警告、無效等。
  • 中性色常用于文本、背景、邊框、分割線等,需要考慮深色背景和淺色背景的差異,可以選擇同一色相控制透明度變化,用來表現不同的層級結構。
  • 其他色如統計圖、數據可視化、多個標簽的不同配色方案根據項目情況單獨設定。

【經驗】B端后臺產品UI設計小結

3.3 標準字

后臺系統常用的字體:windows系統,中文Microsoft YaHei,英文Arial;Mac字體,中文PingFang SC,英文Helvetica;除此之外可以選擇的字體還有segoe UI、思源黑體、Hiragino Sans GB等。

后臺系統中常用字體大小為12px、13px、14px、16px、18px、20px、24px、30px。

行高設定,根據文字大小及使用場景設置行高,一般行高=文字大小+6px/8px。

【經驗】B端后臺產品UI設計小結

3.4 圖標

圖標是UI設計中重要組成部分,一般分為功能圖標和應用圖標,以圖形的方式傳達概念,可以降低理解成本,使得界面更加協調美觀。在后臺產品中,圖標的功能則更偏向輔助性,輔助用戶對功能的認識。

除了某些常用的圖標,有一些專業性的操作和詞匯則需要設計師進行繪制,現在比較高效方便的方法是在iconfont提供的圖標模板上用AI繪制,畫板1024*1024,提供圓形、正方形、矩形形狀(文末提供下載)。圖標尺寸按照8的倍數進行延展,繪制完成后生成svg格式文件,提交到阿里巴巴矢量圖標庫的項目組里,方便前端調用,調整大小和顏色更為方便,且能夠優化系統內存和性能。

分享一個我個人常用的AI使用小習慣,因為ctrl+q、ctrl+w作為退出和關閉我用的不多,而且有時候手抖會在保存時候不小心點成了關閉,所以我無情地把ctrl+q、ctrl+w變成了拓展和拓展外觀的快捷鍵……感受還不錯。

【經驗】B端后臺產品UI設計小結

3.5 按鈕

按鈕是后臺產品進行交互設計是重要元素,提供給用戶進行點擊操作,是視覺上最引人注目的控件,具有一定的視覺受范性。常用按鈕可分為填充按鈕、線性按鈕、文字按鈕。

按鈕的交互狀態包括默認、懸停、點擊和不可用。按鈕根據需求分為不同尺寸,大中小三個級別用在不同的場景,一般按照8的倍數設定,如高度分別設定為24、32、40px。

規范整理時要規定不同類型按鈕的寬高、圓角及文字大小,同時還要將按鈕的不同狀態展現出來。

填充按鈕之間間距最小為10px。

【經驗】B端后臺產品UI設計小結

3.6 導航

導航的類型有很多種,常用的比如:頂欄菜單、側欄菜單、折疊菜單、下拉菜單、面包屑、分頁、步驟條、時間軸、tab標簽頁、膠囊菜單、徽標數等。各類導航中的字體大小可進行統一設定。

  • 頂欄菜單多為一級菜單,點擊切換,或作為下拉菜單的父級,將子級菜單合理分類。
  • 側欄菜單為垂直導航菜單,可以內嵌子菜單。
  • 下拉菜單的觸發方式一般有鼠標懸停和鼠標點擊兩種。步驟條引導用戶按照流程來完成任務,一般步驟不得少于兩步。分頁的高度設定為24px、30px、32px,根據應用場景適當增減內容,比如設定每頁展示數據的條數、跳轉至指定頁等。
  • 面包屑用于說明層級結構,使用戶明確當前所在位置,并且可以回到任一上級頁面。
  • 徽標數用來通知用戶當前有未讀消息,一般出現在圖標的右上角或者跟在文字后面。

【經驗】B端后臺產品UI設計小結

3.7 表單

表單多由一條或多條列表項組成,單一列表項的類型有字段輸入框、條件選擇器。

字段輸入框的標題和輸入框分布方式包括左右、上下、無標題。左右分布是常見的對齊方式,比較適合PC端的使用;上下分布增加了表單的整體高度,視情況選擇使用;無標題經常應用在登錄注冊,雖然減少了面積,但是增加了理解難度。

輸入框的交互狀態包括默認、輸入結果、提示錯誤、禁用、獲取焦點。輸入框的尺寸可按照8的倍數進行設定,比如:24px、32px,也可根據系統實際情況進行設定。我常用的輸入框高度為30px,寬度視情況而定,無圓角。上下布局的多個輸入框上下間距為20px,有錯誤提示時候豎向增加10px或橫向顯示在輸入框右側(預留出位置)。

表單中標題文字左對齊,輸入框左對齊,標題文字距離輸入框20px(多個長度不同的輸入框算最長的);標題文字右對齊,輸入框左對齊,也是常用的方式。輸入框內正文字體14px,文字和左右兩邊邊框的邊距10px。

選擇器包括單選、多選、時間選擇、開關切換、下拉選擇、滑塊選擇、旋鈕等。單選框多為圓形,復選框多為方形。

搜索框和選擇框的高度為30px或按照8的倍數自行設定,通常和輸入框保持一致。搜索框距離右側按鈕4px,內部文字14px。單選多選框尺寸16*16px,多個選項橫向排列間距16px,縱向排列間距8px。開關按鈕外框40*20px,內部圓形16*16px。

【經驗】B端后臺產品UI設計小結

3.8 表格

表格在后臺產品UI設計中站的比重非常大,用來展示數據、統一管理、作為詳情入口,是最清晰、高效的形式之一。在設計規范中需設定表頭高度、表格行高、表格列寬范圍,同時也包括表格中的按鈕樣式、標簽樣式。

表格主要分為五大區域:選擇搜索區、操作區、表頭、正文、底欄。

  1. 選擇搜索區放置篩選框和搜索框,為用戶提供按需搜索,可以大大提高用戶效率;
  2. 操作區指各種對表格內容進行增刪改查、批量處理、配置列的動作;
  3. 表頭展示列標題,一般具有排序功能;
  4. 正文主要展示各種各樣的數據,要注意行高、對齊、分割、信息層級等,要考慮是否提供行內操作;
  5. 底欄顯示分頁、總數統計等。

表格信息一般主要功能為增刪改查,查看和編輯是最基本的功能,表格信息支持篩選、搜索、排序、分頁。對可批量操作的表格數據在第一列增加多選框。

(1)行高

表格行高可設置為表格內字體高度的2~3倍,主表格會間隔顯示不同顏色,用于區分不同行數據、加強視覺流引導,展開單行的內置表格可采用純色,選中行應有視覺上的反饋。表頭要和表格內容有視覺上的區分。表格行高可采用36、40、48、60等。

(2)行數

表格行數太多加載速度會降低,延長用戶等待時間;行數太少會導致用戶不斷翻頁,降低使用效率。比較合適的默認表格行數是20或50,用戶可以根據自己需求選擇默認的行數。設定行數之后,如果每頁行數多余每屏行數,可在表格內引入滾動條,這時可以固定表頭滾動內容。

(3)列寬

列寬根據內容字段長短需要有不同且合理的默認值,使得表格字段有良好的展示效果。列內容的長度固定時,列寬應大于固定寬度(比如時間、MD5、SHA1);列內容不固定時,能預判最大寬度的按照最大寬度設定列寬(比如IP地址、MAC地址、姓名),不能預判最大寬度的設定列寬按照常用寬度,多于內容省略以“…”展示,鼠標懸停出現完整內容(比如詳情、描述)。

(4)列數

表格列不應過多,列數比較多的情況下應該合理進行合并、隱藏、刪除或進行優先級處理。常用的方法有引入配置列,用戶可自定義展示必需列以外的其他列;只展示重要信息,下拉展開列查看完整信息;在表格中引入橫向滾動條,根據實際情況選擇是否要始終固定基本信息列(如第一列是文件名)和操作列(最后一列的操作)。

(5)對齊方式

表格內的文本應按照文本類型不同進行統一規范,如金額類數值保留相同位數小數,SHA1雖然是一串數字但是其實那并不是數據而是一串編碼,所以可以像文文本一樣左對齊。根據文本內容不同,對齊方式也應靈活調整,可采用文本左對齊、數據右對齊、金額小數點對齊的方式。數據前面有標簽的,將標簽前置對齊。類似IP地址、MD5、SHA1、域名這樣的信息,也可以根據產品需要在文本前面增加“復制”圖標,方便用戶調用。

(6)詳情入口

表格內部數據的詳情入口,將能點擊下鉆查看詳情的內容以不同顏色表示,同時在表格行最后一列操作按鈕部分放置一個查看按鈕。

【經驗】B端后臺產品UI設計小結

3.9 反饋

包括彈框、側滑框、骨架屏、全局提示、警告提示、消息提醒、加載狀態等。分為模態框和非模態框,區別是是否會打斷用戶工作流。

彈框又稱對話框,是疊加在應用主窗口上的彈出式窗口,以對話的方式使用戶參與進來。

  • 彈框——彈框出現時,主題內容增加一層遮罩#000,透明度50%,避免使用雙層彈框,可同時采用有關閉圖標的彈框和無關閉圖標的彈框,引導用戶對內容進行正確操作。如果設定系統內所有彈框均可以點擊彈框外區域關閉, 則需要為用戶新增或編輯內容的彈框彈出二級確認的彈框,或者再次進行交互梳理。
  • 側滑框——又稱抽屜,出現在右側,固定寬度400px,高度覆蓋在主題內容之上,點擊側滑框以外的區域則收起側滑框。
  • 骨架屏——為某些特定數據提供數據加載等待時的占位圖形組合。
  • 全局提示——建議停留時間3s,可根據文字字數調整停留時間,文字內容限制在30以內。
  • 警告提示——用不同顏色和樣式展示需要關注的信息。
  • 通知提醒——消息通知和告警信息用通知提醒框,單個消息從頁面右側以抽屜的方式劃出,用戶可手動關閉,或停留3s后自動關閉。

【經驗】B端后臺產品UI設計小結

3.10 缺省狀態

繪制不同類型的情感畫插畫表示缺省狀態,如:404、500、暫時沒有數據、沒有新消息等。

頁面需要一個默認的底色,錯誤文字使用14px,與情感化插畫間距20px,與按鈕間距30px。

【經驗】B端后臺產品UI設計小結

3.11 數據可視化

數據可視化部分可能是后臺產品中對視覺設計要求較高的部分,使用情境為各類統計圖、大屏展示頁面等。

功能型頁面的數據可視化可以引入圖形化設計組件,Echarts、G2、d3等;展示型頁面的數據可視化則可以做的更有趣,比如立體的統計圖、粒子地球效果、靈活有趣的網絡拓撲圖等。

考慮到數據可視化可能會需要深色淺色不同的背景,在數據可視化統計圖的色彩搭配上要注意顏色的拓展性。

【經驗】B端后臺產品UI設計小結

四、經驗觀點及設計資源

4.1 設計前端一家親

Ant Design的設計組件,實現框架React、Angular——https://ant.design/docs/spec/layout-cn

Element的設計組件,實現框架Vue 2.0、 Angular——http://element-cn.eleme.io/#/zh-CN/component/checkbox

iView的設計組件,實現框架Vue——https://www.iviewui.com/docs/guide/theme

飛冰的設計組件,實現框架React——https://alibaba.github.io/ice/

Layui的設計組件——https://www.layui.com/demo/grid.html

G2可視化圖形組件——https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html

Echarts可視化圖形組件——https://echarts.baidu.com/

d3.js可視化圖形組件——https://github.com/d3/d3/wiki/Gallery

在線柵格化計算工具——http://grid.guide/#/1000/24/34/8/0

4.2 不丑也要多讀書

《B端產品經理必修課》

《交互設計精髓》

《U一點料·Ⅱ》

《簡約至上:交互式設計四策略》

4.3 文章和作品推薦

Christie Tang《如何更好地使用柵格系統》——原版https://uxdesign.cc/responsive-grids-and-how-to-actually-use-them-970de4c16e01?中文版https://www.ui.cn/detail/465158.html

UXBoy《柵格系統及其在后臺設計中的應用》——https://www.uisdc.com/grid-system-and-application-in-background-design

蝸牛醒《新人來收!10分鐘幫你掌握柵格系統基礎知識!》——https://www.uisdc.com/grid-system-basics

MrLei《原子化設計-后臺產品組件庫建設》——https://www.zcool.com.cn/article/ZOTYyNTQw.html

八戒Maria《如何寫后臺系統UI設計規范?》——https://www.zcool.com.cn/article/ZODIwNTg4.html

千夜Ryan_Vision《B端產品設計》——https://www.uisdc.com/product-design-to-business

Z清暉《面向企業中后臺產品的設計系統大合集》——https://www.ui.cn/detail/409269.html

BruceXLS《B端網頁設計規范全方位匯總》——https://www.ui.cn/detail/427365.html

可樂Cola《如何利用走查表驅動設計改版》——https://www.ui.cn/detail/451478.html

Michal Parulski的后臺可視化設計作品——https://dribbble.com/Shuma87

zoeyshen的后臺可視化設計作品——https://dribbble.com/zoeyshen

三魚先生的數據可視化設計作品——https://feizai.zcool.com.cn/

寫在后面

不管是做C端產品還是B端產品,都是為了實現用戶的需求、幫用戶解決問題。

剛接觸后臺產品的UI設計師工作時候,最希望能把產品做的炫酷、美觀,工作中慢慢地發現項目的背后思考更為重要,產出的設計成果也應該有理有據、支撐整個設計體系。

網上供大家使用和學習的資源非常多,對一些公司來說、專門去制定一套自己的后臺設計規范不免顯得費時費力,合理引入antdesign和element等開源的設計組件,會使得設計師以及設計師的好朋友前端小哥哥事半功倍,有助于設計師把更多的精力投入到沉淀行業知識、研究產品架構、梳理交互方式和創新視覺表現上。

在后臺產品的設計過程中,更應該把寶貴的時間用在更值得關注的事物上,讓設計師能夠輔助業務挖掘,從趨于相同的表象中找到產品獨有的閃光點,從而切實解決問題和實現價值。

希望對你有幫助~

 

本文由 @阿北 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

給作者打賞,鼓勵TA抓緊創作!
評論
歡迎留言討論~!
  1. 基本和作者是同崗位的。很多經驗都值得參考。關于規范這塊,一個小細節是B端產品頁面信息量大,而餓了嗎組件的尺寸等不太符合。所以也會自己定義尺寸。另外,B端需要多抽離出業務信息模塊規范,因為很多地方都會使用同類型信息,或類似信息。

    回復
  2. pm在設計后端的時候還是重邏輯,重功能。ui還是交給ui去做吧。

    回復
  3. 業務功能復雜的后臺系統,我不建議設計師自己定義一套后臺ui規范,用餓了么這種設計組件就很好,那是眾多大神智慧的結晶啊。我所經歷的現實情況就是有經驗的前端開發,寫出來的頁面比資質平平的ui設計師設計的還要好。我覺得做后臺的設計,精力應該放在交互上,提高后臺的易用性。

    回復
    1. 2B產品往往業務需求都不能很好地滿足,用現成控件規范已經足夠,精力應該主要放在業務上。

      回復
  4. 非常棒!學習了

    回復
  5. 講的非常到位,贊??

    回復
  6. 非常有必要,細致詳實。
    說啰嗦的同學,是不是沒做過需要多名產品協同的B端產品??

    回復
  7. 很有感觸,很不錯!

    回復
  8. 馬克,先收藏為敬

    回復
  9. 我做PM以來就是以B端為主,你真的好啰嗦,而且關于產品講的好片面,你是UI設計師,還是聚焦講設計上的吧,本來看題目三天了想進來細讀讀,三天都是在忍受不了,是在太啰嗦,由其關于產品部分的講解有些是對的,有些是誤人子弟!

    回復
    1. 忍受不了可以不看,或者掃一下就走。但是看完人家的東西在這吐槽就不好了,而且吐個槽還這么啰嗦。你這么厲害干脆自己寫一篇好了。

      回復
    2. 說的很好 很有道理

      回復
    3. :| 我也這么認為!!!

      回復
    4. 握個爪 :shock:

      回復
    5. 那你豈不是也在這里吐槽,己所不欲勿施于人,因為我是做這塊的,有些的確是錯的,而且我平沒有一味抨擊,對于你UI上的設計,我也是認可的,你這里噼里啪說別人,忍不了你掃一眼評論就走啊,這么吐槽我有算什么

      回復
    6. 另外抱歉我在寫書

      回復
    7. 祝你的書大賣!

      回復
    8. 難道讓作者講業務么?講組織架構、角色權限、工作流、業務功能設計么? UI設計這塊是唯一可以用短篇幅大概講明白的吧。別打擊作者積極性

      回復
  10. 感謝分享

    回復
  11. 現在很多前端UI庫可以直接使用,不過設計一套公司規范也十分重要。

    回復
  12. 好啰嗦

    回復
  13. 感謝分享,順便問下用8倍數的柵格,為什么文中提到的一些間隔卻選擇10或者20

    回復
  14. 感謝分享!

    回復
  15. 中間干貨還可以,前面的廢話太多

    回復
    1. 還是鼓勵為主

      回復
  16. 非常好,感謝分享

    回復
马总会三肖中特