网站建设
建站资讯Website News

您的位置:主页 > 营销知识 > 建站资讯 > 如何做好网页后台的表单和表格设计?

如何做好网页后台的表单和表格设计?

上海网站建设公司建站资讯2017-09-04


网页后台的表单设计.jpg

一个完整的后台,由菜单/导航、数据/图形展示、表格、表单、控件/组件以及弹窗等构成,下面跟大家分享后台中的表格和表单的设计细节。


当接到一个全新的网页后台项目时,首先确定设计风格,然后考虑这个后台尺寸是做居中固定式,还是全屏响应式。全屏响应式的网页设计,除非有规定,否则你可以选择任意主流尺寸作为基本尺寸来设计网页。当然,不管选择什么尺寸,都得基于做好一个后台而开展工作。


如何定义一个后台是好的?领导说好,用户说好,你自己也觉得好,那应该就是好的。大部分情况下产品已经定制好了每个功能模块,UI上只需要对着原型加以美化,如果你是这样做的,那么做出的东西一定会让人觉得有问题但是又不知道问题在哪里,总是想让你改。


跟产品经理好好沟通,他们只是把功能模块设计出来而已,并没有设计这些模块如何呈现,如何操作,如何结合,如何分类等等。交互上在后台设计很重要,如果有专业的交互设计师,这些可以交给他们,毕竟,交互设计的收入比UI要高。然而在很多中小企业,产品原型直接给到设计是很常见的。当缺少专业的交互设计时,不要让产品觉得我们只是按照他们的原型做美化,那跟美工有什么区别,不是看不起美工,美工的全程是美术设计工程师,很高大上的职称,但是大家还是不太愿意这样被称呼吧,可能觉得头衔套太大压力会很大吧。事实上,UI本来就应该具备基本的交互技能。


风格选定是很客观的,需要经过产品经理/领导确认,如果他们很相信你的实力,你得说出足够充分的理由,为什么要选择这种风格,而并不只是看起来更高大上或只是个人喜欢。


本人对后台网页设计的风格理解,大致可以分为三类:纯白背景风,轻淡背景风,深色背景风。在后台开始设计之前,你最好先选定其中一种风格,因为后面的所有元件的设计,都得基于这个风格来设计。刚刚好,在早些时间就已经发布了一个后台的三种风格界面设计的作品,大家可以看出每个模块的搭配和区分:


纯白背景风:线框/轻淡色(灰)背景(文字一般采用黑色)

如何做好网页后台的表单和表格设计?


轻淡背景风:纯白色块背景(文字一般采用黑色)

如何做好网页后台的表单和表格设计?

深色背景风:带有透明度的纯色背景(文字一般采用白色)

如何做好网页后台的表单和表格设计?


设计过程是很主观的,所有设计参数都取决于设计师,但是要严格按照设计规范,并且让所有设计看起来和用起来都是合适的。


全屏响应式+轻淡色背景风是目前很主流的设计,也是很保守和安全的设计。对于轻淡色的HSB色值,可参考:H:0-360;S:0-5;B:90-97,当然没有绝对大部分情况用的浅灰是最多的,如H0;S0;B93-95。


以下将依据这个设计风格做例子展示。


一个完整的后台,由菜单/导航、数据/图形展示、表格、表单、控件/组件以及弹窗等构成,我把这些称为元件。这里主要分享的是构成后台中的模块和元件设计中的细节。下面重点跟大家分享表格和表单的设计。


你应清楚的是


为了避免在设计后台时一个人在YY,请保持左跟产品沟通,右跟前端沟通,这点非常重要。或许很多朋友在接到项目的时候不知道从何做起,会在网上寻找一些相关素材,然后会看到很多很炫的风格样式,像是各种各样的数据/图形展示,各种各样的统计曲线图,还有各种各样的展示动效,真想拖到自己要设计的后台。


如果合适当然可以,然而,很多情况下,统计分析一类的图表设计,产品已经有很多现成套用的模板,你可以做的很炫,但前端不一定会按照UI效果图来制作。从技术上来说,没有前端实现不了的效果,你真的不必怀疑前端的实力。所以,保持设计跟前端的良好沟通,更能提高工作的质量和效率,并且,很多时候口头/文字描述如何展示,是淡入淡出,还是弹出等等,前端是能理解的。通常地,做动效只是产品的一种展示,而并不是产品的本身,就当自己练手做动画吧。


简洁又灵活的表格


一个典型的表格(table)包含标题(表头单元格th),内容(标准单元格td),通常都是一行行(tr)展示。设计时,应该将标题和内容区分,比如标题文字加粗/颜色加深/字号加大,或标题背景加深。因选择淡灰背景风,一般用白色块区分的原则,表格设计也尽量不使用线框,然而一行行的标准单元格如果都是白色的就不便于预览,因此可以隔一行给背景设置比主背景更淡的背景。标题和内容一般有两种对齐方式,居中对齐,居左对齐,整个站的列表只选择一种对齐方式保持一致性。为了更简洁显示,我们还可以把每一列的间隔线去掉,但并不意味着间隔不存在。每一列的文字都不要贴边,给前端标记间距(内间距padding)值,告诉前端鼠标点击表头单元格的空白地方仍然可以拖动该列的宽度,拖动宽度时保持每一列的最小宽度并且标题仍然完全展示。


原文标题:如何做好网页后台的表单和表格设计?
欢迎您访问,如有疑问请联系客服
TAG如何,做好,网页,后台,表单,表格,设计,一个,完整,后台,,上海网站建设,上海网站制作,上海APP开发

最新案例

相关文章

更多最新文章

网站关键词

上海云轩网络版权所有 Copyright©2008-2018 http://www.lvon8.com All Rights Reserved 备案号:沪ICP备14049216号