UI设计器如何从后台界面开始

发布时间:2020-07-15 10:53:00

与首页相比,后页要简单得多,但这并不意味着后页很容易制作,不费吹灰之力。许多UI设计者在次创建后台界面时也面临许多困难。让我们共享基于元素的规范。当他们次创建后台界面时,他们如何开始

与首页相比,后页要简单得多,但这并不意味着后页很容易制作,不费吹灰之力。许多UI设计者在次创建后台界面时也面临许多困难。让我们共享基于元素的规范。当他们次创建后台界面时,他们如何开始?

因为我们的后端接口是基于元素框架开发的,所以我们在设计时需要掌握元素的设计规范,然后根据该框架的规范进行设计。

输入元素官方网站并单击该组件。侧边栏有相应的设计规范,包括布局、颜色、字体、图标、按钮、窗体、数据、提示、导航等。此外,您还可以在资源中下载sketch的规范文档。

众所周知,网页设计一般采用1920x1080的设计尺寸,但由于后台界面多为全屏设计,大尺寸的使用会导致小屏幕电脑的数据显示无休止,因此在设计中需要确定设计标准尺寸和采用什么样的布局框架。

根据百度网络流量平台的统计,我把网页的主要分辨率分为1920x1080、1366x768、1440x900、1600x900、1024x768,它们的屏幕分辨率如下。

为了能很好的上下配合,同时,我整合了蚂蚁设计的设计维度,所以在中间选择了1440x900的分辨率进行设计。

不过,由于浏览器的任务栏会占据部分高度,如果高度是用900px设计的,一些主要信息不会显示在个屏幕上,哪个尺寸合适?

因此,在背景设计中,设计尺寸的比例采用1440x720的尺寸。

元素中有两种主要的导航样式:顶部导航和侧边栏导航。

边栏导航是将导航固定在左侧,主要用于后台界面,有大量的仪器或管理数据。它的优点是提高了导航可见性,方便了页面之间的切换,常用的工具如搜索栏、帮助按钮、通知按钮都可以放在顶部。

顶部导航是使用上下布局,其中可以显示导航信息。导航的次数往往不到7次,主要用于数据量减少的普通网页的后台。其优点是自上而下的正常浏览顺序,便于浏览信息。

因为我们的大多数项目都是工具管理,所以我们可以使用侧边栏导航的布局进行设计。

水平布局采用24列删除网格布局,边栏占用4个删除网格240px

间距为24px(间距一般为8的倍数,因此模块间距在8、16、24和32之间为舒适)

边栏导航的内容区域宽度是自适应的:w=屏幕宽度边栏间距X2,w=1440-240-24×2=1152,分辨率1440。

布局框架确定后,可以将设计规范和元素组件库结合起来,形成通用的模板样式。哪些接口通常需要制作成模板?

这是根据实际项目确定的。一般来说,列表页具有的可重用性。因此,在制作模板页面时,我主要设计列表页面。

列表页面主要由三部分组成:基本框架+过滤+表格。在设计时,我们可以先做一个基本的风格。

当基本列表完成后,我们可以创建其他状态,如高级筛选样式、多级列表和其他特殊样式。

在界面效果方面,我集成了基于元素的蚂蚁设计。主要原因是ant设计有很多后台模板可供应用。第二个原因是它的风格和布局比较紧凑。

模板接口建立后,我们不能为它制作所有的样式,所以在这个时候,我们可以将所有的状态制作成组件,这样前端在使用时可以自由组合。

后,模板样式生成后,可以提交给前端进行封装,以后可以通过这些模板进行开发。当然,在实际工作中,会有更复杂的页面,可以在那时重新设计。

以上是分享模板界面的简单模板,了解用户界面设计中的行业动态和学习资料,可以关注哈尔滨平面设计培训学校官网。