Axure實戰規範分享:後臺web網站

編輯導讀:後臺web網站是網際網路人工作中經常會用到的,本文作者分享如何用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 為基準。

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

頂部