您的位置: 主页 > 新闻中心 > 行业动态

实践经验!如何在网页后台设计表单和表格?

发布时间:2022-11-10 08:20 栏目: 行业动态 查看()

Vector Life(作者):一个完整的背景,由菜单/导航、数据/图形显示、表格、表单、控件/组件、弹出窗口等组成。下面给大家分享一下后台表格和表单的设计细节。当接到一个全新的网页背景项目时,先确定设计风格,再考虑背景大小是居中固定还是全屏响应式。全屏响应式网页设计,除非有规定,否则可以选择任意主流尺寸作为基础尺寸来设计网页。当然,无论你选择什么样的尺寸,你都得基于良好的背景来工作。

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

和产品经理沟通好。他们只是设计功能模块,而不设计这些模块如何呈现、操作、组合、分类等等。在后台设计交互很重要。如果有专业的交互设计师,可以给他们这些。毕竟交互设计的收入比UI高。然而,在许多中小型企业中,直接设计产品原型是常见的。在缺乏专业交互设计的时候,不要让产品觉得我们只是按照他们的原型在美化。那和美术设计师有什么区别?并不是他们看不起美术设计师。美术设计师都是美术设计工程师,职称很高,但是人家还是不愿意这么叫。广西模板网站优化可能感觉会对题集施加太大压力。其实UI要有基本的交互技能。

款式的选择很客观,需要产品经理/领导确认。如果他们相信你的实力,你得给出一个充分的理由,说明你为什么选择这种风格,而不是仅仅看起来高一点,或者仅仅是个人喜欢。

我对后台网页设计风格的理解大致可以分为三类:纯白背景风、浅色背景风、深色背景风。在开始后台设计之前,最好选择其中一种风格,因为后面所有组件的设计都必须基于这种风格。嗯,刚刚有一个三种风格的界面设计的后台作品已经在早前发布了。你可以看到每个模块的搭配和区别:

纯白背景风:线框/浅灰(灰色)背景(文字一般用黑色)。

浅色背景风:纯白色块状背景(文字一般为黑色)

深色背景风:透明的纯色背景(通常为白色文本)

设计过程非常主观。所有的设计参数都取决于设计师,但我们应该严格遵循设计规范,使所有的设计看起来和使用起来都合适。

全屏响应+轻背景风是目前非常主流的设计,也是非常保守安全的设计。光HSB色值请参考:H:0-360;s:0-5;B:90-97,当然绝大多数情况下用的是轻灰,比如H0;s0;B93-95 .

下面将是一个基于这种设计风格的例子。

一个完整的背景包括菜单/导航、数据/图形显示、表格、表单、控件/组件、弹出窗口等。我称这些元素为。这里主要分享一下后台的模块和组件的设计细节。下面,我想和大家分享一下表单和表单的设计。

你应该知道

为了避免在设计后台一个人在YY,保持与产品的左沟通和与前端的右沟通是非常重要的。可能很多朋友在接到项目的时候不知道从哪里入手,会在网上找一些相关的资料,然后会看到很多眼花缭乱的样式,比如各种数据/图形展示,各种统计图表,各种展示效果。我真想把它们拖到我想设计它们的背景上去。

当然,如果合适的话。但是,很多情况下,图表设计有很多现成的模板,比如统计分析。可以做的炫,但是前端不一定是按照UI效果图做的。技术上,没有前端达不到的效果。你真的不用怀疑前端的实力。所以设计和前端保持良好的沟通可以提高工作的质量和效率。而且很多时候,前端可以理解口头/文字描述是如何表现的,是淡入淡出,还是弹出等等。通常情况下,动画只是产品的展示,而不是产品本身。SEO优化推广的时候,要自己练动画。

简洁灵活的形式

典型的表格包含标题(标题单元格th)和内容(标准单元格td),它们通常以行(tr)显示。设计时要将标题与内容区分开来,如标题文字加粗/颜色较深/字体较大或标题背景较暗。因为选择了浅灰色背景风,所以一般用白块原理来区分,桌子设计也尽量不用线框。但如果各行的标准单元格都是白色的,就不方便预览了,可以隔一行设置比主背景浅的背景。而且标题和内容一般有两种对齐方式,居中对齐和左对齐,全站列表只选择一种对齐方式保持一致。为了更简洁的展示,我们也可以去掉每一列的间隔线,但不代表间隔不存在。不要粘贴每一列的文本,标记前端间距(填充)值,告诉前端鼠标点击表头单元格的空白处仍然拖动列宽。拖动宽度时,保持每列的最小宽度,标题仍然完整显示。

扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

上一篇:朝阳网站建设中容易被忽视的问题
下一篇:HTML4和HTML5在乡村媒体网站建设中的差异
郑重申明:安茂立网络以外的任何单位或个人,不得使用该案例作为工作成功展示!