axure如何發布?編輯導讀：後台web網站是互聯網人工作中經常會用到的，本文作者分享如何用Axure做後台web網站，一起來看一下吧，下面我們就來說一說關于axure如何發布?我們一起去了解并探讨一下這個問題吧!

axure如何發布

編輯導讀：後台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 為基準。

詳細可參考螞蟻金服：http://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協議