等等

上海时时乐单选走势图:初做后台界面,该如何下手?

等等 后台界面 4461浏览

上海时时乐开奖时间 www.q4bq.com.cn 平时由于项目时间紧张,往往没有多的时间去设计后台界面,刚好开年这段时间没有什么事情,老大让我们基于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、制作后台模板界面,根据公司需要选择复用性较高的界面进行制作,对于多状态可设计出特殊样式和常规样式,其他状态可制作成组件。

 

参考链接:

栅格系统及其在后台设计中的应用—后台设计经验总结01

尺寸规范

//t.cn/EVR1KGB

Ant Design

 

原文地址:海盐社(公众号)
作者: 风筝KK

转载请注明:上海时时乐开奖时间 » 初做后台界面,该如何下手?

登录收藏
 
你可能喜欢的:
做到这两点方案一稿过做到这两点方案一稿过
如何构建ux中台-滴滴旗下小桔车服实战案例如何构建ux中台-滴滴旗下小桔车服实战案例
动效从设计到代码-网易云音乐2018年度听歌报告的背后动效从设计到代码-网易云音乐2018年度听歌报告的背后
社交传播新范式小群效应设计-实例分析“淘宝合伙人&京东好玩节”社交传播新范式小群效应设计-实例分析“淘宝合伙人&京东好玩节”
浅谈如何让你的设计被记住?浅谈如何让你的设计被记住?
一套完整设计案例,如何在3天内设计出一款APP?一套完整设计案例,如何在3天内设计出一款APP?
设计策略 | 停不下的游园会设计策略 | 停不下的游园会
亿级曝光品牌视频的幕后设定亿级曝光品牌视频的幕后设定
设计沉思录|互联网设计师图鉴之创新项目中的设计TIPS设计沉思录|互联网设计师图鉴之创新项目中的设计TIPS
带你探索双十一光明顶监控大屏带你探索双十一光明顶监控大屏
?
  • 国青“小朱婷”?18岁女排新星状态复苏 郎平没看错她 2019-03-11
  • 成长路上 法治相伴 2019-02-27
  • 为了民族复兴·英雄烈士谱 2019-02-27
  • 驾车撞倒城管队员反复碾压 义乌暴力摊贩被刑拘 2019-02-12
  • 2012环球时报总评榜颁奖典礼现场 2019-02-12
  • 高清:葡萄牙明晨对阵西班牙 C罗领衔球队认真备战 2019-02-06
  • 电视剧《脱身》曝最新海报 2019-02-05
  • 这些难免只有马克思主义真理才能自救,其余的都瞎扯淡,至于他们需要从哪里讨说法,也在马克思主义真理里面了 2019-01-27
  • 环球企业领袖青岛圆桌会(2012) 2019-01-21
  • 【沙湾风光】百花盛开 迎六月 2019-01-21
  • 池州:上千名幼儿及家长共同诵读古今经典(图) 2019-01-05
  • 你看到的这条“真相” 是境外势力编造的恶毒谣言 2019-01-05
  • 合肥市委幼红玺台分园大胆创新:幼儿混班区域活动首次在户外进行 2019-01-04
  • 为了人民重托——记政府工作报告起草 2019-01-04
  • 2018《粤语好声音》海选启动 林忆莲梁咏琪有望加盟 2018-12-19
  • 379| 711| 504| 992| 894| 593| 976| 130| 280| 593| 784| 514| 8| 300| 574|