• 做B端後台産品很複雜?這裡有一份完整的UI設計規範

    /2019-06-26 15:33:07/

  • \

    本文是作者在不同的項目中不斷反思和總結。作者把自己的一些想法和經驗分享出來,總結自己工作中遇到的問題和解決的方法,記錄自己思考和理解的過程,希望對即将或正在從事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等開源的設計組件,會使得設計師以及設計師的好朋友前端小哥哥事半功倍,有助于設計師把更多的精力投入到沉澱行業知識、研究産品架構、梳理交互方式和創新視覺表現上。

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

    希望對你有幫助~


<
上一篇: 全面解密阿裡新零售供應鍊 | 專訪阿裡研究員大少 下一篇: 最後一頁

聯系我們

一個新的需求,從這裡開始。歡迎填寫表格或發送合作郵件至: 25909395@qq.com 25909395@qq.com 加微信: 13765801787

13765801787
在線留言