今天给各位分享web前端表单制作的知识,其中也会对web前端制作表格进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!
本文目录一览:
Web前端怎样实现像excel那样的按列拖选的表格
Web前端实现像excel那样的按列拖选表格的方法:
1.通过flash,flex实现FLEX 功能强大的datagrid
2.通过jquery插件,js实现
JS实现可编辑的表格,双击可编辑,可以删除行和列,增加行和列,重置,导出表格,也可以上下移动元素
Flexigrid – Web 2.0 Javscript Grid for jQuery - 可变列宽,自动适应表头宽度,可通过 Ajax 连接 XML 数据源,类似 Ext Grid,但基于 jQuery 因此更轻量小巧。
Chromatable JQuery Plugin - 固定表头,可滚动内容区,内容区滚动的时候表头位置保持不变。
Ingrid, the jQuery Datagrid - 在 HTML 表格上加入列宽调整,分页,排序,行列式样等功能(演示)。
JQTreeTable - 在表格中加入树形结构
Scrollable HTML table - 将普通 HTML 表格变为可滚动状态。将表头部分放入 THEAD 区,内容部分放入 TBODY 区,脚注部分放入 TFOOT 区域,引用 webtoolkit.scrollabletable.js 文件,然后在每个表格后面创建 ScrollableTable() 对象即可(演示)。
KeyTable - 象 Excel 那样,在单元格之间巡游,可以现场编辑。
graphTable - 借助 flot 将 HTML 表格中的内容变成图形(演示)。
DataTables - 非常强大的 jQuery 表格插件,可变宽页码浏览,现场过滤。多列排序,自动探测数据类型,智能列宽,可从几乎任何数据源获取数据。
关于Web表单设计的经验分享
表单在UI设计中的出现场景还是比较多的,尤其是在一些To B的产品设计中。最近自己有做大量web 表单设计,就想把自己学到的一些关于表单设计的知识点分享给大家~
一、什么是表单?
表单在网页中的主要功能是负责采集数据以及向服务器传送数据的。表单是采集用户信息数据重要的途径。好的表单设计能提升信息采集的效率与成功率。不好的表单设计会影响用户心情,体验差,导致信息采集不成功甚至带来利益的损失。
二、表单的构成
表单通常由标签、输入域、操作按钮、这三部分构成。
标签
标签我们可以把它理解为标题,告诉用户该表单需要填写什么信息、该表单需要采集什么内容。标签通常出现在输入域的左边、顶部、或者输入域内。
标签按所填信息的必要性分为必填项和非必填项,一般我们会在必填项的标签内容加上*号。*号的的摆放位置有下面两种情况:
1.当标签与输入域居中对齐时,建议把*号放在标签左侧。
因为*号比较显目,用户往往第一眼会先看到它,然后按照用户从左往右的阅读习惯,视觉落点分别为文字标签、输入域。考虑到表单的填写效率,*号位于左侧的表单阅读起来会更加顺畅。所以当标签与输入域居中对齐时,把*号放在标签左侧会更好。
2.当标签与输入域左对齐时,建议把*号放在标签右侧。
由于人们纵向的阅读习惯,视线会成F型。*号在左侧还是在右侧并不会对用户视觉落脚点造成太多困扰,另外考虑到对齐的形式,*号放在标签右侧会更好。
输入域
输入域是录入用户各种类型信息的重要交互区域。输入域包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框、和文件上传框等等。
不知道这些输入域的区别的小伙伴可以去ant design官网学习一下,传送门:
因为输入域是录入信息很重要的交互区域,在设计时我们应该考虑用户输入的多种场景去设计。我们可以将用户的输入过程分为输入前、输入中、输入后。根据每一种场景中细化我们的设计。比如在输入中:我们要考虑光标的设计、输入文字信息的设计,信息提示等,在输入后:我们要考虑信息输入错误应该给予怎样的视觉反馈等。总之考虑得越细致,越能提高信息录入的成功率。
操作按钮
操作按钮是在用户填写完表单各项内容后,所要进行的操作动作,来完成或者结束当前操作流程。操作按钮分为全局操作按钮与局部操作按钮。全局操作按钮控制整个表单,比如提交、发送等操作按钮。局部操作按钮是对某一范围的内容起作用,比如编辑、删除操作。
三、表单设计常见问题
1.标签采用哪种对齐方式更好?
在我们的实际项目中,通常会因为文案的长短不一,导致我们不知道该采用哪种对齐方式。标签的处理原则就是要要尽量对齐,采用哪种对齐方式应考虑具体的制约因素和目标来定。
左对齐
当标签采用左对齐的方式的时,因为文字标签的长度不统一,导致标签与输入框的间距是不可控的。这就会造成设计的通用性不强,以及横向空间的浪费。
如果采用左对齐的形式,就要尽量去保持文字标签的长度一致,比如通过字距的调整让文字标签的长度保持一致或者通过留足留白空间,这样设计上会更统一。以为例,采取左对齐形式,但是它留足了文字标签与输入域之间的距离,让表单看上去更统一和谐,不足的就是造成了部分空间的浪费。
顶对齐
采用顶对齐的形式,会让标签和输入域垂直显示,纵向布局的信息呈现效果会更好,从而提高用户填写的效率。顶对齐因为垂直排布,会造成纵向空间的浪费,但在横空间上比较节省,比较适用于横向宽度较窄的页面。
▵顶对齐
右对齐
右对齐跟左对齐一样会因为标签长度不可控。导致设计的通用性不强,以及横向空间的浪费,但节约了纵向空间。
▵右对齐
在这几种对齐方式中,用户浏览信息的速率顶对齐右对齐左对齐。顶对齐形式适合简易表单、右对齐与左对齐表单适合复杂表单。
2.操作按钮应该用哪种设计形式比较好?
对于全局的操作按钮会用常规的按钮样式,全局按钮分为主按钮与次按钮。
主按钮
主按钮是界面中比较重要的功能操作按钮,比如提交、保存等一些正向的操作。主按钮在视觉层级上最高,能够引导用户很快的找到核心的操作并点击。主按钮通常是纯文本或图文结合的面性形式。图文结合的形式能吸引用户注意,也帮助用户理解该按钮的操作含义。
次按钮
次按钮的层级相对于主按钮层级要弱一些,通常采用线性形式。在一个页面中可以出现多个次按钮。
对于局部操作按钮的设计形式可以是文字按钮、图标按钮,也可以是图标+文字的形式。至于应该应用哪种形式就要结合具体端场景去考虑。
图标按钮
图标按钮就是用图标来代表该操作的含义,能够直观的表达按钮的功能。在设计的时候我们需要注意图标是易于理解的、是用户熟悉的。图标按钮的设计通常都会配上悬浮框设计,也就是当用户鼠标停留在该图标按钮上会出现对该按钮的文字释义的悬浮框。以微信公众号为例,当鼠标停留在编辑图标那时会出现黑色的悬浮框对其进行解释,让用户理解此按钮的意义,让用户放心操作。
在web设计中,由于按钮的种类与使用场景比较多,建议局部的操作按钮使用线性图标,让它的层级相对其他按钮要弱化一些。
文字按钮
文字按钮通常出现在列表的操作项中。文字的颜色通常是品牌色或者蓝色,因为蓝色在用户的认知中通常是可点击的。
图标+文字 按钮
图文结合的按钮相对于纯文字按钮会更加直观,也能更吸引用户注意。
3.输入框应该设计几种状态?
考虑的状态越多,设计就会越细,能够及时的反馈信息给用户,从而提高表单填写效率。在考虑输入框的设计状态时,遵循及时反馈的设计原则去考虑。
为了避免用户填写完所有信息后,才反馈有错误,会造成时间浪费,表单填写效率低。通常会把输入框线变成红色,同时出现红色的说明文案,来引起用户的注意。
▵及时反馈错误信息
在设计中我们还需要考虑自动校验的成功与警告状态。颜色通常为绿色与橙色。
输入框到底应该设计几种状态我们也需要根据我们表单的复杂情况去考虑,对于简单的表单设计过于细化的状态是没有必要的。
写在最后的话
表单设计看起来简单,但实际在设计过程中还是有大量的点值得我们去学习与研究的。在这次做表单的过程中,觉得作为设计师我们不应该去挑活,不要觉得表单设计是一个很小的设计就不动脑的照着别人的设计规范抄一遍。像这种看似枯燥但又很重要的模块设计,我们在前期开始设计之前可以从交互层去考虑,再从视觉层面去考虑怎样的表单设计能让用户填得舒心又高效。在看别人的设计规范比如ant design的组件规范时,我们可以去留意他们的设计细节,比如表单上下之间的间距留的是多少?有什么规律吗?按钮的上下边距与左右边距有什么关系吗?通过这些思考,然后去观察总结,并转化为自己的小技巧,到下一次设计表单的时候,我们就会做得很好了。
往期解析
UI设计-首页解析
详情页设计技法解析
轻松get文字标签设计技法
Get点9切图方法(内附切图神器)
前端开发应该知道的几个CSS网页表单布局技巧
1、绝对定位
在绝大过程中,想确定一个元素在网站当中的固定位置,绝对定位是实现这个方式的解决办法。在网页当中,绝对定位可精确的控制元素在网页当中的位置,我们可使用顶部、底部、左侧和右侧,附上一个像素值来控制元素所在的位置。
position:absolute;top:50px;right:50px
上面的CSS设置一个元素的位置从浏览器的顶部和右边保持50px。你也可以在div内使用绝对定位。
2、覆盖所有样式
写CSS的时候都应该知道,当你想给一个元素添加一个新的CSS样式,但这个样式之前已经被定义过了。此时我们可以采用!important来定义。
例如,如果我想在我的网站的特定部分的H3标题是红色而不是黄色,可以使用下面的CSS:
.section h3 {color:red !important; }
3、居中
居中分很多情况,一般会分成文本居中和DIV的内容居中。
文本居中
文本居中使用text-align:center; 。如果想让文本在左右两侧,可以使用左侧或右侧。
DIV内容
DIV内容居中跟文本居中不一样。CSS可以这样定义:
#div1 { display: block; margin: auto; width: anything under 100% }
把宽度设置为“100%以下”的原因是因为如果它是100%宽度,那么如果是全宽度,并且不需要居中。最好有一个固定的宽度,如60%或550像素等。
4、垂直对齐(对于一行文本)
要使菜单的高度和文本的行高一致,可以这么设置:
.nav li{line-height:50px; height:50px;}
5、悬停效果
这适用于按钮,文本链接,网站的部分,图标等等。如果你想做一个悬停效果,可以试试:
.entry h2{font-size:36px; color:#000; font-weight:800;} .entry h2:hover{color:#ffeb3b;}
这个功能可以让你的h2标签的颜色从黑色变成黄色。
6、悬停效果过渡
对于悬停效果,如使用菜单或网站上的图像,我们肯定不希望颜色快速贴近结果,所以我们可以通过使用时间变化来达到过渡的效果。
.entry h2:hover{color:#ffeb3b; transition: all 0.5s ease;}
这就使得样式上的改变,可以是从黑色变黄色的过渡时间是0.5秒,而不是立即变成黄色。这使得悬停效果更加和谐而不会显得太突兀。
7、a标签的状态
我们在遇到a标签的时候,一定要给a标签做样式定义,否则特别容易造成用户在使用上的困惑。通过样式可以让用户知道这个链接是否被点击过,更利于用户体验。
a:link {color: blue; } a:visited {color: red; }
8、轻松调整图像大小以适应
说到这个样式,我之前不知道可以通过以下方式达到图片的自适应效果。作为一个新手,我相信这个效果肯定有很多人都想做,当然,我提供的方法也只是其中的一种:
img {max-width:100%;height:auto;}
这个样式意味着最大的图像可能是100%,并根据图像宽度自动计算高度。在某些情况下,您可能还必须指定宽度为100%。
9、父级元素和子元素
如果ni不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器:
h1 strong {color:red;}
特殊情况下你可能会想定义第N个子元素的样式,这样就可以用到下面这个样式:li:nth-child(n)
具体的使用方法可以去w3school上看。
10、将CSS应用于多个类或选择器
如果你想要在所有图片,博客部分和侧边栏上添加相同的边框。你不必写出相同的CSS样式重复3次。只需列出这些项目,用逗号分隔:
.blog,img,.sidebar {border: 1px solid #000;}
关于web前端表单制作和web前端制作表格的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。
温馨提示
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请后台提交工单处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,请使用WINRAR解压,如遇到无法解压的请后台提交工单!
【免责声明】:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。
【关于转载】:
本站尊重互联网版权体系,本站部分图片、文章大部分转载于互联网、所有内容不代表本站观点、不对文章中的任何观点负责、转载的目的只用于给网民提供信息阅读,无任何商业用途,所有内容版权归原作者所有
如本站(文章、内容、图片、视频)任何资料有侵权,先说声抱歉;麻烦您请联系请后台提交工单,我们会立即删除、维护您的权益。非常感谢您的理解。
【附】:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!
注:本站资源来自网络转载,版权归原作者和公司所有,如果有侵犯到您的权益,请第一时间联系我们处理!
-----------------------------------------------------------------------------------------------------------
【版权声明】:
一、本站致力于为源码爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、如有内容侵犯您的版权或其他利益的,请编辑邮件并加以说明发送到站长邮箱。站长会进行审查之后,情况属实的会在三个工作日内为您删除。
-----------------------------------------------------------------------------------------------------------
源码村资源网 » web前端表单制作(web前端制作表格)
1 评论