原地址:海鹽社會(huì)(微信官方賬號(hào))

平時(shí)由于項(xiàng)目時(shí)間緊張，設(shè)計(jì)后臺(tái)界面的時(shí)間往往不多。今年年初什么都沒(méi)有。老板讓我們?cè)贓lement規(guī)范的基礎(chǔ)上做一套通用的模板來(lái)滿足日常需要，讓工程師按照模板規(guī)范搭建好界面效果。但是平時(shí)很少設(shè)計(jì)后臺(tái)界面，對(duì)Element也不熟悉。怎么開(kāi)始？下面我主要從三個(gè)方面來(lái)說(shuō)。

目錄

1、了解元件設(shè)計(jì)規(guī)范

2.確定設(shè)計(jì)尺寸和標(biāo)準(zhǔn)

3.制作后臺(tái)模板界面

理解元件設(shè)計(jì)規(guī)范

Element是一個(gè)基于Vue 2.0的面向開(kāi)發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理的桌面組件庫(kù)，由餓了么出品。其優(yōu)點(diǎn)是可以根據(jù)構(gòu)件庫(kù)快速搭建接口，工程師可以使用前端框架封裝的代碼進(jìn)行快速開(kāi)發(fā)，提高接口的統(tǒng)一性和開(kāi)發(fā)效率。

由于我們的后臺(tái)界面是基于Element的框架開(kāi)發(fā)的，所以要求我們?cè)谠O(shè)計(jì)的時(shí)候掌握Element的設(shè)計(jì)規(guī)范，然后根據(jù)這個(gè)框架的規(guī)范進(jìn)行設(shè)計(jì)。

進(jìn)入Element官網(wǎng)，點(diǎn)擊組件。邊欄中有相應(yīng)的設(shè)計(jì)規(guī)范，包括布局、顏色、字體、圖標(biāo)、按鈕、表單、數(shù)據(jù)、提示、導(dǎo)航等。此外，您可以在資源中下載草圖的規(guī)范文檔。

確定設(shè)計(jì)尺寸和標(biāo)準(zhǔn)

眾所周知，網(wǎng)頁(yè)設(shè)計(jì)一般采用1920 x 1080的設(shè)計(jì)尺寸。但是由于大部分后臺(tái)界面都是全屏設(shè)計(jì)的，使用大尺寸會(huì)導(dǎo)致小屏幕電腦數(shù)據(jù)無(wú)休止的顯示。因此，需要確定設(shè)計(jì)標(biāo)準(zhǔn)尺寸和布局框架。

1.設(shè)計(jì)標(biāo)準(zhǔn)尺寸

根據(jù)百度網(wǎng)頁(yè)流量平臺(tái)的統(tǒng)計(jì)，我整理出網(wǎng)頁(yè)的主流分辨率是1920 x 1080，1366 x 768，1440 x 900，1600 x 900，1024 x768。它們的屏幕分辨率使用如下。

為了更好的上下適應(yīng)，同時(shí)也整合了Ant Design的設(shè)計(jì)尺寸，所以這里選擇了中間位置1440 x 900的分辨率來(lái)設(shè)計(jì)。

但是由于瀏覽器的任務(wù)欄會(huì)占據(jù)一部分高度，如果高度是用900px設(shè)計(jì)的，一些主要信息不會(huì)在第一屏顯示。哪個(gè)尺寸比較合適？

根據(jù)Script Home中分析的一組Web尺寸規(guī)格統(tǒng)計(jì)，從上圖可以看出，當(dāng)高度大于720時(shí)，82.64%的人看不到下面的內(nèi)容，所以在設(shè)計(jì)中可以將高度作為720的中間值，這樣前端適配的錯(cuò)誤率更低。

所以在做后臺(tái)設(shè)計(jì)時(shí)，最好采用1440 x 720的設(shè)計(jì)尺寸。

確定布局框架

Element中有兩種主要的導(dǎo)航樣式:頂部導(dǎo)航和側(cè)邊欄導(dǎo)航。

側(cè)邊欄導(dǎo)航是在左側(cè)固定導(dǎo)航，多用于儀器或行政數(shù)據(jù)量較大的后臺(tái)界面。它的優(yōu)點(diǎn)是提高了導(dǎo)航的可視性，方便了頁(yè)面之間的切換，常用工具如搜索欄、幫助按鈕和通知按鈕可以放在頂部。

頂部導(dǎo)航是自上而下的布局。導(dǎo)航信息可以在導(dǎo)航中顯示。導(dǎo)航次數(shù)往往少于7次，多用于數(shù)據(jù)量減少的普通網(wǎng)頁(yè)后臺(tái)。其優(yōu)點(diǎn)是自上而下的正常瀏覽順序，方便瀏覽信息。

由于我們的大多數(shù)項(xiàng)目都是工具管理，我們可以在側(cè)邊欄導(dǎo)航的布局中設(shè)計(jì)它們。

元素中邊欄布局框架的尺寸

導(dǎo)航高度為60px橫向布局采用24欄的刪格布局，側(cè)邊欄占4個(gè)刪格為240px間距為24px(間距一般是8的倍數(shù)，因此在8、16、24、32中選擇，模塊間距采用24px最為舒適)

側(cè)邊欄導(dǎo)航的內(nèi)容區(qū)寬度是自適應(yīng)的:W=屏幕寬度-側(cè)邊欄-間距x ^ 2，1440分辨率下W=1440-240-24x2=1152。

制作背景模板界面

布局框架確定后，我們可以結(jié)合設(shè)計(jì)規(guī)范和Element組件庫(kù)，制作通用的模板樣式。一般需要做成模板的接口有哪些？

這是根據(jù)實(shí)際項(xiàng)目確定的。一般來(lái)說(shuō)，列表頁(yè)面的可重用性最高，所以在制作模板頁(yè)面的時(shí)候，我主要是設(shè)計(jì)列表頁(yè)面。

列表頁(yè)面主要由三部分組成:基本框架+過(guò)濾器+表格。設(shè)計(jì)的時(shí)候可以先做一個(gè)基本風(fēng)格。

基本列表完成后，我們可以制作其他狀態(tài)，如高級(jí)過(guò)濾樣式和多級(jí)列表等特殊樣式。

在界面效果上，我這里融合了基于元素的螞蟻設(shè)計(jì)。主要是Ant Design有很多背景模板可以應(yīng)用，另外就是它的風(fēng)格和布局比較緊湊。

模板接口建立后，我們無(wú)法為其制作所有的樣式，所以此時(shí)可以將所有的狀態(tài)制作成組件，讓前端在使用時(shí)可以自由組合。

最后模板樣式做好之后，可以提交給前端進(jìn)行封裝，在以后的開(kāi)發(fā)中可以通過(guò)這些模板進(jìn)行應(yīng)用。當(dāng)然，實(shí)際工作中會(huì)遇到更復(fù)雜的頁(yè)面，可以在當(dāng)時(shí)重新設(shè)計(jì)。

總結(jié)

本文主要對(duì)我做的后臺(tái)模板界面進(jìn)行梳理，主要從以下三個(gè)方面展開(kāi)。

1、了解Element設(shè)計(jì)規(guī)范，這是設(shè)計(jì)的基礎(chǔ)。

2.確定設(shè)計(jì)尺寸和標(biāo)準(zhǔn)。通過(guò)分析，更適合采用1440 x 720的尺寸。

3.創(chuàng)建一個(gè)后臺(tái)模板界面，根據(jù)公司需要選擇一個(gè)復(fù)用性高的界面?？梢詾槎喾N狀態(tài)設(shè)計(jì)特殊樣式和常規(guī)樣式，也可以為其他狀態(tài)制作組件。

參考鏈接:

http://t.cn/E7cjOH2

網(wǎng)格系統(tǒng)及其在后臺(tái)設(shè)計(jì)中的應(yīng)用——后臺(tái)設(shè)計(jì)經(jīng)驗(yàn)總結(jié)01

http://t.cn/RqQbbICWeb

尺寸規(guī)格

http://t.cn/EVR1KGB

http://t.cn/EVR1CjOAnt設(shè)計(jì)