編輯導(dǎo)讀：后臺(tái)web網(wǎng)站是互聯(lián)網(wǎng)人工作中經(jīng)常會(huì)用到的，本文作者分享如何用Axure做后臺(tái)web網(wǎng)站，一起來看一下吧。

以下規(guī)范數(shù)值僅為參考，具體請(qǐng)根據(jù)自身產(chǎn)品靈活運(yùn)用。

一、框架尺寸設(shè)計(jì)

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

這需要我們根據(jù)具體情況分析：

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

當(dāng)然，對(duì)應(yīng)的適配規(guī)則需要靈活處理，如表格在高分辨率增加顯示的字段數(shù)或者卡片增加每行顯示的列數(shù)。

二、頁面信息組件尺寸

1. 柵格布局

柵格系統(tǒng)的使用是為了解決自適應(yīng)和響應(yīng)式問題，從而更好地進(jìn)行產(chǎn)品設(shè)計(jì)和產(chǎn)品開發(fā)。響應(yīng)式柵格采用?24 列柵格系統(tǒng)實(shí)現(xiàn)，以滿足 2，3，4，5，6 分比布局等多種情況。固定寬度 Column，將間隔 Gutter 進(jìn)行動(dòng)態(tài)縮放。

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

谷歌規(guī)定模塊和結(jié)構(gòu)之間要以 8px 為基準(zhǔn)，布局間相對(duì)間距可采用 8px 以及 8 的倍數(shù)，但一些小組件（按鈕、間隔、輸入框）可以以 4 為基準(zhǔn)。

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

2. 信息組件尺寸

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

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

三、組件間距

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

如：圖標(biāo)與對(duì)應(yīng)文案間距為4px、表單上下兩個(gè)輸入框間距為20px。

四、按鈕

常用按鈕可分為填充按鈕、線性按鈕、文字按鈕。交互狀態(tài)包括默認(rèn)、懸停、點(diǎn)擊和不可用。

按鈕根據(jù)需求分為不同尺寸，大中小三個(gè)級(jí)別用在不同的場(chǎng)景，一般按照 8 的倍數(shù)設(shè)定。如高度分別設(shè)定為?24、32、40px。

規(guī)范整理時(shí)要規(guī)定不同類型按鈕的寬高、圓角及文字大小，同時(shí)還要將按鈕的不同狀態(tài)展現(xiàn)出來。

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

五、字體

后臺(tái)系統(tǒng)常用的字體：windows 系統(tǒng)，中文 Microsoft YaHei，英文 Arial；Mac 字體，中文 PingFang SC，英文 Helvetica；

后臺(tái)系統(tǒng)中常用字體大小為 12px、13px、14px、16px、18px、20px、24px、30px。注意：Axure中最小字體建議為12px，由于谷歌瀏覽器預(yù)覽設(shè)置問題，小號(hào)字體會(huì)被強(qiáng)制變大。

行高設(shè)定，根據(jù)文字大小及使用場(chǎng)景設(shè)置行高，一般行高=文字大小+6px/8px。

六、表格

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

1. 行高

表格會(huì)間隔顯示不同顏色，用于區(qū)分不同行數(shù)據(jù)、加強(qiáng)視覺流引導(dǎo)，展開單行的內(nèi)置表格可采用純色，選中行應(yīng)有視覺上的反饋。表頭要和表格內(nèi)容有視覺上的區(qū)分。表格行高可采用?36、40、48、60?等。

2. 行數(shù)

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

3. 列寬

列內(nèi)容的長(zhǎng)度固定時(shí)，列寬應(yīng)大于固定寬度，如時(shí)間；列內(nèi)容不固定時(shí)，能預(yù)判最大寬度的按照最大寬度設(shè)定列寬（比如IP地址、MAC地址、姓名），不能預(yù)判最大寬度的設(shè)定列寬按照常用寬度，多于內(nèi)容省略以「…」展示，鼠標(biāo)懸停出現(xiàn)完整內(nèi)容（比如詳情、描述）。

4. 列數(shù)

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

5. 對(duì)齊方式

文本左對(duì)齊、數(shù)據(jù)右對(duì)齊、金額保留相同小數(shù)對(duì)齊的方式。數(shù)據(jù)前面有標(biāo)簽的，將標(biāo)簽前置對(duì)齊。類似 IP 地址、域名這樣的信息，也可以根據(jù)產(chǎn)品需要在文本前面增加「復(fù)制」圖標(biāo)，方便用戶調(diào)用。

6. 詳情入口

表格內(nèi)部數(shù)據(jù)的詳情入口，將能點(diǎn)擊下鉆查看詳情的內(nèi)容以藍(lán)色表示，同時(shí)在表格行最后一列操作按鈕部分放置一個(gè)查看按鈕。

本文由@艾斯的Axure峽谷 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議