必威体育Betway必威体育官网
当前位置:首页 > 网站建设

实战经验!如何做好网页后台的表单和表格设计?

时间:2018-03-30 06:00:00来源:网站建设作者:seo实验室小编阅读:65次「手机版」
 

网页设计表单

带有识别功能的输入框:

当输入有误时,尽量避免弹出框提示,可以直接对输入框设计不同的状态显示默认状态、选中状态、错误状态、成功状态。

通过以上方式设计的一组信息录入型的表单设计,如图:

表单的设计可以单独出一篇更详细的文章,还有筛选/选择器一类的表单,这里就不一一描述了。

友好舒适的弹窗

弹窗在后台的出现频率非常高,其强度一般分为三种,弱弹窗、强弹窗、重弹窗。字面上已经很好理解,轻弹窗,一般鼠标经过的时候即可出现而不用点击,比如提示说明,显示更多信息,鼠标移过后立即消失,它不会影响下一层(当前页面内容)页面的视觉效果和操作,因此这个弹窗通常会设计一个浮动带有阴影效果的框。

而强弹窗则是一个对话框,它暗示你必须对这个对话框进行操作后才可以离开,如确认信息、错误提示信息。而重弹窗更像是一个新的页面,比如弹出的列表,详情,表单等。这两种弹窗通常是点击某一个按钮/经过某一个操作触发的。这两种弹窗一般会对下一层页面的视觉做蒙版处理,比如加上一定透明的黑色/白色,给下一层页面的内容做模糊滤镜等等。

当然,这三种弹窗式可以结合的,针对不同场景使用不同的弹窗设计这点非常重要,这直接关系到用户体验效果。你是否可曾遇到过使用一款产品时,动不动就弹窗,并且需要去点某一个按钮才可以关闭。

任何一种场景在设计上都可以得以解决,什么情况下使用什么弹窗设计,或者有时候必须使用强弹窗,但是又不想让用户操作关闭,我们可以设计几秒后自动关闭,或者点击弹窗以外的区域直接关闭。

弹窗还有两种主要的表现形式,一种是顶部有关闭按钮,另外一种是直接点击确认按钮或者读秒关闭。在保持规范性的同时,尽量避免按钮功能的重复,比如一个提示信息必须让用户点击确认按钮才可以关闭,那么就使用没有顶部关闭按钮的设计。对于重弹窗,一般都会采用顶部有关闭按钮的设计。

弹窗并不是后台的专利,它在移动端更高频率的出现,例如活动页面的弹窗,趣味性就显得更重要了。

总结:

这篇文章主要跟大家分享的是,当开始网页后台项目设计的时候,保持跟产品和前端的良好沟通。确定风格后开始设计,并分享了 3 个主要的点:

制作灵活又简洁的表格设计整齐并带有交互功能的表单选择友好舒适的弹窗

后台还有其他元件设计,欢迎大家共同探讨。

相关阅读

excel表格统计个数的方法步骤图

我们在工作中使用excel时,经常会用到统计个数的操作,统计个数的方法有很多种,不妨和小编一起看看以下这种统计个数的方法,或许对你有

动力节点Java项目实战

动力节点课程体系全部围绕企业真实项目设计,结合独有的PDT教学法,以企业真实项目驱动教学贯穿整个学习过程,做到理论与实践完美融合,

form表单的提交

开发工具与关键技术:MVC JQuery 的 form表单的提交一、Form表单有两个属性分别是:“action”和“method”:Action: 的值是URL 就是

前端实现多人视频聊天— WebRTC 实战(多人篇)

转自:https://juejin.im/post/5cbdc145e51d456e541b4cec

Excel将两个表格关联数据合并的方法

我们在使用excel表格的时候,有时候不能获取完整的数据,只能通过不同的渠道获取2分或者多分的表格数据,有时候一些数据是相关联的,可以

分享到:

栏目导航

推荐阅读

热门阅读