做B端后臺產品很復雜?送你一份完整的設計流程和規范! - 優設網 - UISDC

做B端后臺產品很復雜?送你一份完整的設計流程和規范!

2019/06/21 34658評論 21

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

明修棧道C和暗渡陳倉B

1. 初識B端產品和C端產品

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

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

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

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

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 端產品,產品經理要具有更強的邏輯思維能力。

3. 后臺產品常見分類

后臺產品按其作用可大致分為兩類,一是支撐前臺產品,二是管理各種資源。我認為后臺產品應當是囊括在 B 端產品的范圍之內的,常見的類型包括:

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

后臺產品設計思路

1. 初識后臺產品設計

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

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

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

2. 后臺UI設計工作流程

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

在需求分析階段,要對產品本身和行業本身有一些基本的認知。要了解產品的基本情況,比如產品目標、用戶人群、產品定位、需求分析、功能模塊、主要競品和產品特色。做這個產品是為了解決什么問題?想實現什么目標?使用這個系統的用戶有哪些?不同角色的用戶有哪些具體的權限?是否需要對每一個用戶的行為都生成操作日志?產品有哪些主要的功能模塊?產品的業務流程是怎樣的?有哪些同類型的產品?和他們相比我們的產品有什么特色和特點?成功地做出大而全的后臺產品,是整個設計團隊和開發團隊能力的體現,而對很多小團隊來說,只能做一些大團隊不愿去做的產品,或另辟蹊徑在某些方面做專做精。

在設計執行階段,參照 PM 給出的功能清單做原型和流程的梳理,需要關注的有當前版本規劃、功能模塊、功能類型、功能描述、任務優先級、完成時間等,交互原型則伴隨著功能描述、規則判定條件、觸發條件等內容。原型設計完成,開始做 UI 視覺方面的設計,而這時后端同步構思需求的實現方案。UI 設計師向前端了解實現框架,方便交接和溝通。當界面實現,UI 設計師應該是最早進行測試的,力求視覺設計和代碼實現無誤差。在完成設計執行后,從信息層級、文字、圖標、圖片等方面進行設計走查,進行多次設計驗證與測試。

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

3. 制定設計規范的作用

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

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

后臺產品設計規范

以下數值為參考,請結合特定產品靈活運用。

1. 頁面布局

統一尺寸

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

適配方案:面向多個客戶,后臺產品設計功能型頁面的尺寸統一為 1440*900,按照柵格系統原則向上或向下適配。展示型頁面以 1440*900 為主,同時設計出極端情況(寬度為 1280 以及寬度為 1920)的效果圖,力求實現前端實現效果和高保真設計圖誤差最小。面向公司內部的后臺系統,由于各個職工電腦屏幕是統一采購、統一尺寸,所以開發適配的分辨率可以統一尺寸進行設計,這個尺寸根據公司內部采購屏幕的尺寸和分辨率選擇即可(提前和前端溝通好)。

頁面框架

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

柵格布局

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

需要柵格化處理的內容的總寬度=23列(1列=1寬度Column+1間隔Gutter)+1寬度Column=24寬度Column+23間隔Gutter。

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

尺寸設定

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

相對間隔

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

2. 標準色

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

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

輔助色用于提示其他場景,比如成功、失敗、警告、無效等。

中性色常用于文本、背景、邊框、分割線等,需要考慮深色背景和淺色背景的差異,可以選擇同一色相控制透明度變化,用來表現不同的層級結構。

其他色如統計圖、數據可視化、多個標簽的不同配色方案根據項目情況單獨設定。

3. 標準字

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

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

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

4. 圖標

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

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

5. 按鈕

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

按鈕的交互狀態包括默認、懸停、點擊和不可用。

按鈕根據需求分為不同尺寸,大中小三個級別用在不同的場景,一般按照 8 的倍數設定。如高度分別設定為 24、32、40px。

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

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

6. 導航

導航的類型有很多種,常用的比如頂欄菜單、側欄菜單、折疊菜單、下拉菜單、面包屑、分頁、步驟條、時間軸、tab標簽頁、膠囊菜單、徽標數等。

各類導航中的字體大小可進行統一設定。

頂欄菜單多為一級菜單,點擊切換,或作為下拉菜單的父級,將子級菜單合理分類。

側欄菜單為垂直導航菜單,可以內嵌子菜單。

下拉菜單的觸發方式一般有鼠標懸停和鼠標點擊兩種。

步驟條引導用戶按照流程來完成任務,一般步驟不得少于兩步。

分頁的高度設定為 24px、30px、32px,根據應用場景適當增減內容,比如設定每頁展示數據的條數、跳轉至指定頁等。

面包屑用于說明層級結構,使用戶明確當前所在位置,并且可以回到任一上級頁面。

徽標數用來通知用戶當前有未讀消息,一般出現在圖標的右上角或者跟在文字后面。

7. 表單

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

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

輸入框的交互狀態包括默認、輸入結果、提示錯誤、禁用、獲取焦點。

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

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

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

搜索框和選擇框的高度為 30px 或按照 8 的倍數自行設定,通常和輸入框保持一致。搜索框距離右側按鈕 4px,內部文字 14px。

單選多選框尺寸 16*16px,多個選項橫向排列間距 16px,縱向排列間距 8px。

開關按鈕外框 40*20px,內部圓形 16*16px。

8. 表格

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

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

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

行高

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

行數

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

列寬

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

列數

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

對齊方式

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

詳情入口

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

9. 反饋

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

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

彈框

彈框出現時,主題內容增加一層遮罩 #000,透明度 50%,避免使用雙層彈框,可同時采用有關閉圖標的彈框和無關閉圖標的彈框,引導用戶對內容進行正確操作。如果設定系統內所有彈框均可以點擊彈框外區域關閉, 則需要為用戶新增或編輯內容的彈框彈出二級確認的彈框,或者再次進行交互梳理。

側滑框

側滑框又稱抽屜,出現在右側,固定寬度 400px,高度覆蓋在主題內容之上,點擊側滑框以外的區域則收起側滑框。

骨架屏

為某些特定數據提供數據加載等待時的占位圖形組合。

全局提示

建議停留時間 3s,可根據文字字數調整停留時間,文字內容限制在 30 以內。

警告提示

用不同顏色和樣式展示需要關注的信息。

通知提醒

消息通知和警告信息用通知提醒框,單個消息從頁面右側以抽屜的方式劃出,用戶可手動關閉,或停留 3s 后自動關閉。

10. 缺省狀態

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

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

11. 數據可視化

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

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

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

經驗觀點及設計資源

1. 設計前端一家親

  • Ant Design?的設計組件,實現框架 React、Angular
  • Element?的設計組件,實現框架 Vue 2.0、 Angular
  • iView?的設計組件,實現框架 Vue
  • 飛冰的設計組件,實現框架 React
  • Layui?的設計組件
  • G2?可視化圖形組件
  • Echarts?可視化圖形組件
  • d3.js?可視化圖形組件
  • GridGuide?在線柵格化計算工具

2. 書籍推薦

  • 《B端產品經理必修課》
  • 《交互設計精髓》
  • 《U一點料·Ⅱ》
  • 《簡約至上:交互式設計四策略》

3. 文章和作品推薦

總結

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

剛接觸后臺產品的時候,最希望能把產品做的炫酷、美觀,工作中慢慢地發現項目的背后思考更為重要,產出的設計成果也應該有理有據、支撐整個設計體系。網上供大家使用和學習的資源非常多,對一些公司來說、專門去制定一套自己的后臺設計規范不免顯得費時費力,合理引入 antdesign 和 element 等開源的設計組件,會使得設計師以及前端事半功倍,有助于設計師把更多的精力投入到沉淀行業知識、研究產品架構、梳理交互方式和創新視覺表現上。

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

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址:http://www.bwxlya.live/business-product-design

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

設計圈干貨 界面設計 排版布局 版式設計 職場 優設專訪 優設大課堂 設計達人 設計師干貨 web前端開發 配色 視覺設計 素材下載 AI教程 設計理論 設計流程 神器下載 字體下載 設計師專訪 psd下載 海報設計 設計規范 設計趨勢 用戶體驗設計 動效設計 logo設計 平面設計 圖標設計 ICON 產品設計 神器推薦 App設計 字體設計 職場規劃 酷站推薦 交互設計 ui設計 優秀網頁設計 設計師職場 ps技巧 酷站 用戶體驗 PS教程 網頁設計 經驗分享

您還沒有登錄

優設啟用更安全省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里

今日内蒙古快三开奖号