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

后台设计小总结

作者: 黑马轩辕 | 来源:发表于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

    上传


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

    步骤条


    选择框


    相关文章

      网友评论

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

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