該項目為真實案例，只展示部分界面，參與了后臺系統(tǒng)從無到有的設計，從前期的產品分析、設計規(guī)范與設計稿的制作，到最后交付開發(fā)落地執(zhí)行，針對項目中遇到的問題、交互細節(jié)同時如何快速的制圖，作出以下項目總結，一些思考和經驗的分享。

在設計的過程中，利用symbol創(chuàng)建控件，可以有效的提高設計效率；

頁面布局

目前使用系統(tǒng)的用戶的主流分辨率主要為 1920、1440 和 1366，在設計的過程中，根據需要設置內容寬度，在主流屏幕中，可以全部顯示數據，其他部分留白或者內容區(qū)根據設計的布局動態(tài)縮放。

框架

結構及模塊

布局采用24柵格系統(tǒng)

布局采用24柵格體系。本文以 1440x900 大小的畫布，對寬度為 1200 的內容區(qū)域進行柵格的劃分設置，頁面中柵格的 Gutter 設定了定值，即瀏覽器在一定范圍擴大或縮小，柵格的 Column 寬度會隨之擴大或縮小，但 Gutter 的寬度值固定不變。

總寬度=23列 + 1 column， 1 列 = 1 column + 1 gutter，1 gutter=24px；

標準字

后臺系統(tǒng)通常采用系統(tǒng)默認字體，Windows系統(tǒng)采用中文Microsoft YaHei，英文Arial；Mac系統(tǒng)中采用中文PingFang SC，英文Helvetica；

在此后臺設計中采用中文字體：思源黑體 / Noto Sans Han，英文數字字體：Roboto；

后臺系統(tǒng)中常用字體大小為12px、13px、14px、16px、18px、20px、24px、30px。

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

例文字14px，行高為14px+8px=22px；

顏色

我們一般通過顏色來有目的地展示產品的功能、層次和風格。

中性色

中性色使用場景應用于：文本、邊框和分割線線、背景

功能色

功能色使用場景應用于：成功、失敗、警告、錯誤、鏈接等

圖標

圖標用以輔助用戶理解界面信息，給予用戶正確、友好的指引。規(guī)范化的圖標，會使得界面具有更好的體驗；

圖標網格

導航欄

選擇導航用于頁面切換

按鈕

按鈕有三種視覺層次：主按鈕、次按鈕、普通按鈕。

不同的類型可以用來區(qū)別按鈕的重要程度，高度統(tǒng)一為32px；

后臺中常見的按鈕類型分為線性按鈕(實現(xiàn)/虛線)、面狀按鈕、文字按鈕、圖標按鈕、幽靈按鈕；

統(tǒng)一設置按鈕組件大小,以及按鈕的各種狀態(tài)：默認狀態(tài)、鼠標懸停、按住/激活、禁用;

為了統(tǒng)一樣式，對于懸停樣式，采用文字改變透明度；按壓采用按鈕背景色變深；不可用按鈕，采用灰色背景。

表單

表單由輸入框、選擇器、單選框、多選框等元素組成，用以收集、校驗、提交數據。

單選框

引導用戶在可選擇的范圍內完成單選操作，默認有一項選中

復選框

引導用戶在可選擇的范圍內完成多選操作，初始狀態(tài)默認勾選一項

輸入框/選擇框交互形態(tài)

一般樣式分為：默認樣式、獲取焦點、輸入結果、校驗錯誤、禁用狀態(tài)

輸入框、選擇框樣式和尺寸

樣式采用標題在左，輸入框在右的對齊方式，在后臺系統(tǒng)設計中也是比較常用的一種方式，比較符合pc端常規(guī)顯示屏橫向空間比較充足的場景

寬度根據具體需求調整，高度為8的倍數，本次系統(tǒng)設計中采用40px

表格

后臺系統(tǒng)設計中，大多數頁面是表格設計，表格設計很容易被人忽視很多交互細節(jié)，下面總結幾點設計過程中遇到的細節(jié)，本次系統(tǒng)設計中采用48px；

對齊方式：文本采用左對齊，數值采用右對齊；

滾動條：表格內容過多時，需展示橫向滾動條，序號固定，拖動展示更多內容；

操作按鈕：當操作按鈕過多時，應進行劃分權重，對次級操作進行隱藏；

標題：標題文字過長時，應根據具體情況進行換行或者超過一定字符“…”；

其他組件

結語：

梳理和設計的過程中以及專業(yè)術語的來源參考了以下網站：

Ant Design：https://ant.design/docs/spec/introduce-cn   

Element：http://element-cn.eleme.io/#/zh-CN/component/checkbox

http://www.zuodeer.cn/article/ZOTE4Mzcy.html（站酷設計師）

頁面展示

頁面布局

部分頁面