• <tbody id="9brb1"><pre id="9brb1"></pre></tbody>

    <em id="9brb1"></em>

  • <th id="9brb1"></th>

  • <tbody id="9brb1"><pre id="9brb1"></pre></tbody>
  • <button id="9brb1"><acronym id="9brb1"><input id="9brb1"></input></acronym></button>
      <tbody id="9brb1"><pre id="9brb1"></pre></tbody>
        更多課程 選擇中心


        UI培訓

        400-111-8989

        初做后臺界面,UI設計師該如何下手?

        • 發布:UI培訓
        • 來源:UI教程
        • 時間:2019-03-07 16:47

        平時由于項目時間緊張,往往沒有多的時間去設計后臺界面,剛好開年這段時間沒有什么事情,老大讓我們基于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中選擇,模塊間距采用24px最為舒適)


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

        制作后臺模板界面

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

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

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


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



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

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

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

        總結

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

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

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

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

        預約申請免費試聽課

        填寫下面表單即可預約申請免費試聽!怕錢不夠?可就業掙錢后再付學費! 怕學不會?助教全程陪讀,隨時解惑!擔心就業?一地學習,可全國推薦就業!

        上一篇:專業的網頁風格指南應該如何制作?
        下一篇:視覺設計師該如何系統的優化APP

        達內UI設計7月免費訓練營報名啦

        UI培訓教程之系統圖標如何設計

        月薪過萬的UI設計師都是怎么設計界面的

        達內設計學院九周年慶典回首來時路,共赴新征程

        • 掃碼領取資料

          回復關鍵字:視頻資料

          免費領取 達內課程視頻學習資料

        • 視頻學習QQ群

          添加QQ群:1143617948

          免費領取達內課程視頻學習資料

        Copyright ? 2021 Tedu.cn All Rights Reserved 京ICP備08000853號-56 京公網安備 11010802029508號 達內時代科技集團有限公司 版權所有

        選擇城市和中心
        貴州省

        廣西省

        海南省

        2019最新在线国产自拍,2019最新国产在线观看_久久爱久久高清视频 百度 好搜 搜狗
        <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>