編輯導讀：后臺web網站是互聯網人工作中經常會用到的，本文作者分享如何用Axure做后臺web網站，一起來看一下吧。

以下規范數值僅為參考，具體請根據自身產品靈活運用。

一、框架尺寸設計

目前 PC 端用戶屏幕分辨率主要為：1920*1080、1600*900、1440*900、1366*768、1280*720等。那么我們的原型設計稿應該參考哪個尺寸設計呢？

這需要我們根據具體情況分析：

• 如果我們設計的原型主要是發給客戶和領導看，那么按用戶和領導的電腦分辨率設計即可。
• 如果我們設計的原型主要是自己查看，或者用自己的電腦演示給客戶和領導看，那么按自己的電腦分辨率設計。
• 上面提到都是按照固定的尺寸設計原型，還有一種方法是使用Windows.width和Windows.height函數自適應不同屏幕尺寸，高度自適應，寬度按最小的適配尺寸1366設計界面，讓界面元件尺寸自適應不同屏幕鋪滿或者拉伸寬度尺寸。

當然，對應的適配規則需要靈活處理，如表格在高分辨率增加顯示的字段數或者卡片增加每行顯示的列數。

二、頁面信息組件尺寸

1. 柵格布局

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

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

谷歌規定模塊和結構之間要以 8px 為基準，布局間相對間距可采用 8px 以及 8 的倍數，但一些小組件（按鈕、間隔、輸入框）可以以 4 為基準。

詳細可參考螞蟻金服：https://ant.design/components/grid-cn/

2. 信息組件尺寸

頂部欄高度建議為 48+8n，側邊欄寬度 200+8n。個人常用尺寸如下：

• 頂部欄高度?64px
• 側邊欄寬度?200px，收縮狀態寬度 56px
• 右側內容尺寸為1126px（即1366px設計稿 – 200px側導航 – 40px：內容左右兩邊20的間距）
• 搜索輸入框尺寸：160px*32px，表單輸入框：320px*32px。
• 按鈕：80px*32px或者64px*32px
• 圖標：小圖標16px*16px

三、組件間距

頁面元件間的邊距以4的倍數：4、8、12、16、20、24、28、32等。

如：圖標與對應文案間距為4px、表單上下兩個輸入框間距為20px。

四、按鈕

常用按鈕可分為填充按鈕、線性按鈕、文字按鈕。交互狀態包括默認、懸停、點擊和不可用。

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

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

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

五、字體

后臺系統常用的字體：windows 系統，中文 Microsoft YaHei，英文 Arial；Mac 字體，中文 PingFang SC，英文 Helvetica；

后臺系統中常用字體大小為 12px、13px、14px、16px、18px、20px、24px、30px。注意：Axure中最小字體建議為12px，由于谷歌瀏覽器預覽設置問題，小號字體會被強制變大。

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

六、表格

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

1. 行高

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

2. 行數

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

3. 列寬

列內容的長度固定時，列寬應大于固定寬度，如時間；列內容不固定時，能預判最大寬度的按照最大寬度設定列寬（比如IP地址、MAC地址、姓名），不能預判最大寬度的設定列寬按照常用寬度，多于內容省略以「…」展示，鼠標懸停出現完整內容（比如詳情、描述）。

4. 列數

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

5. 對齊方式

文本左對齊、數據右對齊、金額保留相同小數對齊的方式。數據前面有標簽的，將標簽前置對齊。類似 IP 地址、域名這樣的信息，也可以根據產品需要在文本前面增加「復制」圖標，方便用戶調用。

6. 詳情入口

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

本文由@艾斯的Axure峽谷 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議