産品架構詳細流程?以下數值為參考，請結合特定産品靈活運用，我來為大家講解一下關于産品架構詳細流程?跟着小編一起來看一看吧!

産品架構詳細流程

以下數值為參考，請結合特定産品靈活運用

統一尺寸

據統計，目前 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等；展示型頁面的數據可視化則可以做得更有趣，比如立體的統計圖、粒子地球效果、靈活有趣的網絡拓撲圖等。

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

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部