1即时比分:初做后臺界面,UI設計師該如何下手?
欄目分類:平面設計   發布日期:2019-09-02   作者:珍珍    來源:188足球即时比分网 www.406105.live

平時由于項目時間緊張,往往沒有多的時間去設計后臺界面,剛好開年這段時間沒有什么事情,老大讓我們基于Element的規范制作一套通用的模板,來滿足日常的需要,讓工程師自己就可以根據模板規范搭建出還不錯的界面效果,但是平時很少設計后臺界面同時對于Elem

188足球即时比分网 www.406105.live 平時由于項目時間緊張,往往沒有多的時間去設計后臺界面,剛好開年這段時間沒有什么事情,老大讓我們基于Element的規范制作一套通用的模板,來滿足日常的需要,讓工程師自己就可以根據模板規范搭建出還不錯的界面效果,但是平時很少設計后臺界面同時對于Element也不太熟悉,具體該如何下手呢?下面我主要從三個方面來進行。

目錄

1、了解 Element 設計規范

2、確定設計尺寸和標準

3、制作后臺模板界面

了解 Element 設計規范

Element 是餓了么出品的一套為開發者、設計師和產品經理準備的基于Vue 2.0 的桌面端組件庫,其優勢是設計可以根據組件庫快速搭建界面,工程師可以使用前端框架封裝的代碼進行快速開發,從而提高界面的統一性和開發效率。

由于我們的后臺界面是基于 Element 的框架進行開發,因此在設計時就要求我們掌握 Element 的設計規范,然后基于這套框架的規范進行設計。

進入 Element 官網點擊組件,在側邊欄中有對應的設計規范,包括:布局、色彩、字體、圖標、按鈕、表單、數據、提示、導航、其他。另外,還可以在資源里面下載Sketch的規范文檔。

確定設計尺寸和標準

大家知道在做網頁設計時一般采用1920 x 1080的設計尺寸,但是由于后臺界面大多都是全屏設計的方式,采用大尺寸會導致小屏電腦數據展示不完的情況,因此在設計時首先需要確定設計標準尺寸,以及確定采用何種布局框架。

1、設計標準尺寸

根據百度網頁流量平臺統計,我整理了網頁主流分辨率為1920 x 1080、1366 x 768、1440 x 900、1600 x 900、1024 x768,他們的屏幕分辨率使用情況如下。

為了能夠很好的向上和想下適配,同時我綜合了Ant Design的設計尺寸,因此這里我選用了居中位置的1440 x 900的分辨率來進行設計。

不過由于瀏覽器的任務欄會占去部分高度,如果高度采用900px來設計,會導致一些主要信息不能在首屏中展現,哪采用什么尺寸比較適合呢?

根據腳本之家中分析的一組Web尺寸規范統計數據,從上圖可以看到當高度大于720時,就有82.64%的人看不到下面的內容了,因此在設計時高度可以取720這個中間值,這樣前端在適配時錯誤率更低。

因此,在做后臺設計時,設計尺寸的比例最好采用1440 x 720的尺寸。

確定布局框架

Element 中主要有兩種導航樣式頂部導航和側邊欄導航。


側邊欄導航就是將導航固定在左側,多用于工具性或管理型數據量比較大的后臺界面中。其優勢是提高了導航可見性,方便頁面之間切換,同時頂部可放置常用工具,如搜索條、幫助按鈕、通知按鈕等。

頂部導航就是采用上下布局,導航中可展示導航信息,其導航個數往往不超過7個,多用在數據量減少的普通網頁后臺,其優勢是從上至下的正常瀏覽順序,方便瀏覽信息。

由于我們的項目多為工具管理類,因此采用側邊欄導航的布局方式進行設計即可。

Element 中側邊欄布局框架尺寸

導航高度為60px

橫向布局采用24欄的刪格布局,側邊欄占4個刪格為240px

間距為24px(間距一般是8的倍數,因此在8、16、24、32中選擇,??榧渚嗖捎?4px最為舒適)


其中側邊欄導航的內容區域寬度為自適應:W=屏幕寬度-側邊欄-間距x 2,在1440的分辨率下為W=1440-240-24×2=1152。

制作后臺模板界面

布局框架確認之后我們就可以結合設計規范和 Element 組件庫制作常用的模板樣式了,一般有哪些界面需要制作成模板呢?

這個就根據實際項目來確定,一般來說列表頁的復用性最高,因此在制作模板頁的時候,我主要針對列表頁進行設計。

列表頁主要由三部分組成,基礎框架+篩選+表格,在設計時我們可以先做一個基礎樣式。


當基礎列表做好后,我們就可以做其他狀態,比如高級篩選樣式,以及多層級列表等特殊樣式。



在界面效果上,這里我基于Element的基礎上和Ant Design進行了融合,其主要原因是Ant Design有很多后臺模板可應用,其二是覺得它的樣式和布局相對比較緊湊一點。

當模板界面搭建好之后,我們不可能將所有的樣式都給它做出來,因此這時候可以將所有的狀態都做成組件,這樣前端在使用的時候可以自由組合。

最后,模板樣式制作好之后,就可以提交給前端進行封裝了,以后開發就可以通過這些模板進行套用,當然在實際工作中還會遇到更復雜的頁面,那時候在重新設計即可。

總結

本文主要對我制作后臺模板界面做了簡單的梳理,主要從以下三個方面出發。

1、了解Element設計規范,這是設計的基礎。

2、確定設計尺寸和標準,通過分析采用1440 x 720尺寸較為適合。

3、制作后臺模板界面,根據公司需要選擇復用性較高的界面進行制作,對于多狀態可設計出特殊樣式和常規樣式,其他狀態可制作成組件。

相關熱詞:

這些是最新的
熱門關鍵詞
鬼故事 SEO jQuery 短篇 謎面 謎底 什么 番號 視頻 免費 宅男 教程 網站 關于 網絡 保險 封面 作品 今天 預覽 我們 朋友 焦點圖 制作 已經 是個 步兵 2016年 系列
熱門排行
Copyright © 2016-2020 我愛分享網 版權所有   豫ICP備16008703號-1   關于我們 | 廣告合作 | 版權聲明 | 意見反饋 | 聯系方式 | 原創投稿 | 網站地圖 |
特效 教程 資源 資訊 188足球即时比分网
{ganrao}