美文网首页
后台设计小总结

后台设计小总结

作者: 黑马轩辕 | 来源:发表于2019-04-14 19:30 被阅读0次

后台其实趋于相同,除了你定义的品牌色以及业务逻辑的不同,设计控件以及设计方法差不多。

布局


统一的布局,会让页面统一,并具有秩序之美。设计是感性的,也是理性的,统一的布局以及统一的模度,让界面有秩序感和韵律感。

统一画板尺寸


后台设计的统一画板尺寸的宽度为1440,一方面为了不同设计师设计的统一性,另一方面在设计师用笔记本演示的时候是全屏的体验效果。

适配


设计画布尺寸和实际屏幕的宽度是有出入的,主流屏幕分辨率从1920、1440、1360以及小屏幕的1280的显示设备,我们设计的时候,可以根据设计需要设置版心的宽度,在主流屏幕中,可以全部显示数据,其他部分留白或者工作区根据设计的布局动态缩放。

(1)左右栏布局:导航栏长度以及位置固定,工作区动态扩展

(2)上下布局:导航栏上部固定,工作区宽度固定,左右空白间距动态扩展

主题色


品牌色是根据已有的颜色进行设计,因为后台一般是与客户端配合使用,可以使用与客户端相匹配的颜色,如果自主重新配色的话,建议使用冷色系

功能色


功能色主要有四种:成功、链接、警告错误四种,用来表达信息及流程的状态

文字


网页端文字大小,最小文字一般大小为12px,正文为14px。配合16px、20px、24px、30px使用,行间距在字体基础上加8px


图标


图标基于1024x1024的画板上绘制,留出出血位,根据里面的形状进行设计,保证视觉的统一。图标尺寸按照8的倍数进行延展。包括圆角以及线的宽度。图标管理可以使用iconfront建立自己的图标库,方便开发以及多次使用

按钮


按钮是用户进行点击操作,分类一般为,文字按钮、线性按钮、填充按钮、虚线按钮。

按钮大小可以根据8的模数变化,small、default、big,以填充性按钮为例。

交互态,主要为正常、按压,悬停、不可用。

为了统一样式,对于悬停样式,采用文字改变透明度;按压采用按钮背景色变身(填充色采用添加一层10%的黑色蒙板,线性按钮采用添加灰色背景额填充);不可用的按钮,采用灰色背景

导航栏


为页面和功能提供导航的菜单列表,常用于网站顶部和左侧,大多数的后台设计网站,多为左侧菜单栏的设计

输入框/选择框


(1)输入框的交互态

默认样式、获取焦点、输入结果、校检错误、禁用状态

(2)输入框的形式

直接使用默认提示语,这种比较适合选项较少,对用户的记忆要求不是那么高的时候;当选项较多的时候,适合标题+输入框的形式

(3)输入表单

在我们输入的数据类型比较多的时候,输入框和选择框有很多变形,来满足我们对不用数据类型的输入

(4)输入框尺寸

输入框的长度可以根据需要调整,但是为了界面的统一,我们以8的模数对高度进行定义。24px、32px、40px

表单


后台系统的页面由很多表单组成,大多数界面都是各类的表单,大表单、默认表单、小表单尺寸的模数也采用:40px、48px、60px

上传


上传包括附件及图片,在特定比例的图片或者封面之类的图片上传中,我们设计可裁剪的弹框

步骤条


选择框


相关文章

  • 后台设计小总结

    后台其实趋于相同,除了你定义的品牌色以及业务逻辑的不同,设计控件以及设计方法差不多。 布局 统一的布局,会让页面统...

  • 业务后台系统之流程设计

    上周在《业务后台系统之权限设计》中总结了自己在最近一个后台业务系统项目中的后台产品设计经验,本篇继续总结完后台设计...

  • 管理后台设计总结

    1.框架 为了节省时间,开发一般会选一个成熟的框架来进行设计。在这个框架下,很多导航、组件、控件都是现有的,你的设...

  • 干货 | web端后台设计规范和表单控件大汇总

    转载至涵小仙女 连续做了几个后台系统,总结了一下web端后台设计规范和表单控件,方便以后原型绘制过程中能直接复用,...

  • 业务后台系统设计之应用架构图

    上次在总结后台产品从0到1的全流程时,提到后续将分独立文章来总结一下后台产品设计过程中的三项基础设计要点:应用架构...

  • 后台产品设计小技巧

    导读 上篇文章的后台设计原则能帮我们更好的提炼后台需求,这篇文章,给大家分享一个后台设计的小技巧。 后台产品的判断...

  • 分析探讨:后台列表设计常见的3个问题

    笔者结合后台设计的工作经历,总结在后台列表设计工作中会遇到的一些常见问题及设计思考。本文主要介绍“列字段过多时如何...

  • 后台产品入门:列表页与添加页的设计法则

    设计后台产品有句口诀:“展示列表优,编辑弹窗佳,筛选下拉好,组合查询棒”说的就是后台产品设计的小技巧。 后台产品设...

  • 后台系统权限设计总结

    后台系统权限设计总结做B端后台,一个老生常谈的话题就是权限控制,如何做权限控制,初步整理一下。用户场景后台系统常常...

  • 后台系统权限设计总结

    做B端后台,一个老生常谈的话题就是权限控制,如何做权限控制,初步整理一下。 用户场景 后台系统常常都有各类用户他们...

网友评论

      本文标题:后台设计小总结

      本文链接:https://www.haomeiwen.com/subject/xoeswqtx.html