表单样式设计,表单css样式
FineReport怎么进行表单设计 FineReport的表单设计简单示例
打开设计器,点击文件新建表单,即可新建一张表单
表单设计的一般操作步骤:
新建表单:FineReport支持新建工作簿,即普通cpt模板,还支持新建表单两种设计模式
拖入组件:FineReport表单支持多种不太的组件类型,包括报表、参数、图表和控件
定义数据集:定义各个组件数据来源,与普通模板的数据来源一样,图表组件数据即可来源于数据集,也可来源于单元格
设置表单样式:即设置表单的显示样式。
如果你还有什么不懂的,可以去帆软论坛逛逛,那里有很多人为你解答的。
设计师的表单设计的常见问题有哪些?
1、表单设计的常见问题有哪些——框架结构
当我们获得文本信息时,我们不会逐字读它。我们经常使用“扫描”来确定一个段落的大纲,以获取信息。定期的日程安排也有助于加快“扫描”的速度,提高信息传递的效率。
因此,在设计中,我们遵循类似的信息一致性的原则,简化冗余的视觉干扰,帮助用户快速建立他们的心理预期的类型表单填写的形式“顶级类型+底内容”根据每个单元的表单项模型。在大量相同填充区域中,统一左侧内容头对齐方式,使用单词的颜色和权重,确保内容头是未触发时的主要内容,隐藏提示是辅助的。在内容填写完毕后,通过内容的标题来补充视觉表达。因此,用户识别主要和次要信息的体验仍然在表单的不同阶段得到保证。
2、表单设计的常见问题有哪些——品牌信息传播
为了减少寒冷的感觉填表单,框架的集成信息的基础上,我们也解构品牌,颜色的形式集成到表单页面设计,实现品牌功能,辅助产品,深化品牌用户的三维感知。
当然,品牌功能的整合也需要有限。这次主要从大气、控制、操作、提示四个方面着手。在不影响表格表示的主要信息,我们遵循适度的原则,适度。构,将色彩的形式融入表单页面设计,实现品牌功能化,协助产品深化品牌用户的立体感知。
当然,品牌功能的整合也需要受到限制。这次主要从气氛,控制,操作,提示四个方面入手。在不影响主要信息以表格形式呈现的基础上,我们遵循适度和适度两个原则。
以上便是关于表单设计的常见问题有哪些的介绍了,希望它能帮助我们开拓,并确定属于我们自己的设计风格,这一点非常重要。如果您想了解更多关于ui设计的相关设计技巧及素材等,也可以点击本站的其他文章进行学习。
[交互设计]PC移动端表单设计
手机App为生活带来巨大便利,多种多样的移动表单设计形式进入我们的工作与生活。表单是移动应用中与用户产生最多交互的地方,包括:用户注册、订阅服务、用户反馈、问卷表单、买卖交易等等。
一个优秀的表单设计有助于提升产品用户体验,提高转化率,达到更好的营销效果。
每个表单都有特定的目的,或吸引注册,或达成交易。考虑不周或错误设计会导致用户流失或交易失败。
学习表单设设计,需要先了解表单设计的基本原则,避免做表单时进入雷区。
表单设计基本原则
1.?逻辑清晰
表单是产品与用户沟通的语言,和对话一样,表单应当符合逻辑,帮助双方完成交流。
? 2.?尽量使用单列设计
多列表单容易让用户漏填,无法集中精力完成填写。单列表单填写路径单一、直接、相比更为高效。?
3.?减少输入
表单越长越复杂,用户完成表单的意愿越低(尤其在移动端产品中)。最大限度减少输入字段,使表单完成更快速,尤其向用户索取大量信息时,更要注意表单简洁。
4.?提供合适的输入方式
输入“账号、密码,邮箱,昵称”时应提供不同键盘,减少输入错误,帮助用户快速完成填写。?
5.?避免把标签当占位符使用
有一种设计模式是让标签作为占位符置于输入框中,用户点击输入时自动消失。这种设计比较简约,但用户输入时容易忘记需要输入的字段是什么,从而产生问题。
优秀案例:移动端表单设计?
↘Dropbox?by Sam Atmore
交互设计分析?:
Sam的登陆/注册表单中,登陆、注册逻辑非常清晰。
1.使用单列二选一表单设计。用户使用App前,只需要二选一随标签提示进行下一步操作。就是误操作也可以用滑动回到另一选项。
2.登陆、注册页面的主按钮明确,有强引导作用。?
↘Location Switching?- by Nimasha Perera
交互设计分析:关键词“智能自动填充选项”
表单设计融入更多自动化元素。如:自动定位功能,根据当前位置智能填充信息。省去用户地理位置选择操作,货币转化操作,省时省力
↘Form Validation?- by Emmanuel Torres
交互设计分析?:关键词“明显可见的提示信息”
用户登陆、注册过程,理想状态是完成信息填写并提交。
但实际操作中错误不可避免,表单设计要考虑有辨识度的信息提示,实时提醒用户填写错误。而不是全部完成后再告诉他。
拆解表单组件样式
表单的主要特点是引导用户填写信息,设计上应考虑主要信息内容如何引导用户浏览。表单中的信息内容包括:
1) 输入字段: 包括文本字段、密码字段、复选框、单选按钮、滑块和其他需要用户输入的字段;
2) 字段标签: 说明用户输入字段的含义,如文本框前的“你的姓名”;
3) 外观和结构: 包括字段顺序、表单在界面中的样式及不同字段间逻辑关系;
4) 动作按钮: 至少有一个操作按钮(如提交按钮);
5) 反馈信息: 将操作结果通知用户。如:“谢谢,表单提交成功!”、“你提供的数字不正确”。
l主流表单样式
↘上标题下提示内容的表单
优点:标题、提示内容可以很长,预览速度快,可以加功能按钮(如附件和照片添加)。
缺点:占据垂直空间较大。
多用于信息内容填写和维修工单信息填写,可以减少页面跳转。
↘左标题右内容(左右对齐)
优点:常用组件,前端可以直接套用,节省垂直空间,引导用户视觉左右移动,增加用户思考时间,对关键信息填写更加安全。
缺点:相比上下结构表单,用户视觉移动距离增加,行数量多,视觉会很乱。
适用于通用表单填写场景。
↘左标题右内容(全部居左对齐)
优点:强暗示可输入,视觉浏览速度快。
缺点:标题字段数量不能太过长短不一,会导致视觉不均衡。
主要适用场景:适合金额数字类和身份信息填写。
↘归类标题表单(内容归属一类)
将同类表单项合成小组内容,帮助用户分类理解填写内容。符合格式塔原理的相似性和封闭性原理。
多用于详情信息展示。
↘仅提示内容表单
优点:信息少,不需要思考。
缺点:当内容一多很容易出现用户“不知道产品要做什么”的困惑(表单无标题)。
用于登录页或内容较少,如修改手机号/修改姓名/填写备注等。
拆解表单组件交互
表单交互主要有两个目标:引导操作和反馈。
交互操作时,表单有3个交互阶段:输入前、输入中、输入后
↘输入前
引导用户输入内容,如:密码设置场景
输入框在默认状态提示文案引导用户输入相应的内容;或输入框外有提示,仅支持字母、数字、某某符号输入
↘输入中
点击输入框弹出键盘,光标闪烁,定位用户当前位置。
表单内容一般有字符数量限制,输入过程中超过字符限制实时报错提示。
如下图:聚焦请输入原密码时,线段颜色明显加重,做为输入中提示。
↘输入后
web端
输入框失焦即判断输入信息是否符合规则,不合规则报错提示。例如:
玩家用户名重复提醒,密码首字母没有大写,密码长度不符合要求;
输入成功则成功反馈,例如:
输入框右侧图标点亮
移动端
输入所有内容,不即刻做规则判断,先激活按钮。例如:
发布、完成、下一步按钮激活
用户点击操作按钮再进行输入信息合规判断。
案例:提升用户体验和客户转化的最佳表单设计
填写表单对于用户来说是一道槛,下面就来看一看提升用户体验和客户转化的注册、登录表单中最佳设计模式时应注意哪些设计、交互细节:
1.说明注册价值
用户最不想做的事就是注册。用明确的价值说明能激发注册行为。表达的价值主张:在这里,连接世界。
2.设置醒目登陆输入框
直接显示输入框,而不是设置“登录”链接给用户增加一次点击。
3.允许使用第三方账号注册、登录
允许用户使用现有的第三方帐户登录产品能给用户带来便利,记很多密码是令人头痛的问题。
4.用户名采用邮箱或手机号码
使用电子邮件、手机号码作为用户名比起一个新名字让用户轻松很多,因为新起的用户名往往已被占用。
5.登录、注册功能区分明显
登录(Sign in/Login)、注册(Register/Sign up)链接放在一起,很容易使用户混淆,尽可能将两者区别表达
6.高亮显示输入框,允许记住用户登录信息
用户在输入框输入内容时,文本框高亮显示提示正在该框内工作。允许该表单记住本人登录信息。
7.允许用户查看密码
密码总是以圆点显示,不能确认输入的密码是否正确,允许密码明文显示是充满人性的设计。
8.必要的信息提示
输入错误的信息提示,还包括一些重要的注意事项提示,例如以下三个表单:
9.显示密码强壮程度
10.少使用下拉选项
表单中某项目里只有3-4个参数要选择,不要使用下拉框更有利于用户体验。不要要求用户重复填写Email地址。
html 怎么设置漂亮的表单样式
html 设置漂亮的表单样式,以下是代码:
1、编写一个from表单
form id="payment"
fieldset
legend用户详细资料/legend
ol
li
label for="name"用户名称:/label
input id="name" name="name" type="text" placeholder="请输入用户名" required autofocus
/li
li
label for="email"邮件地址:/label
input id="email" name="email" type="email" placeholder="example@163.com" required
/li
li
label for="phone"联系电话:/label
input id="phone" name="phone" type="tel" placeholder="010-12345678" required
/li
/ol
/fieldset
fieldset
legend家庭住址(收货地址):/legend
ol
li
label for="address"详细地址:/label
textarea id="address" name="address" rows="1" required/textarea
/li
li
label for="postcode"邮政编码:/label
input id="postcode" name="postcode" type="text" required
/li
li
label for="country"国 家:/label
input id="country" name="country" type="text" required
/li
/ol
/fieldset
fieldset
legend付费方式/legend
ol
li
fieldset
legend信用卡类型/legend
ol
li
input id="visa" name="cardtype" type="radio"
label for="visa"中国工商银行/label
/li
li
input id="amex" name="cardtype" type="radio"
label for="amex"中国人民银行/label
/li
li
input id="mastercard" name="cardtype" type="radio"
label for="mastercard"中国建设银行/label
/li
/ol
/fieldset
/li
li
label for="cardnumber"银行卡号:/label
input id="cardnumber" name="cardnumber" type="number" required
/li
li
label for="secure"验 证 码:/label
input id="secure" name="secure" type="number" required
/li
li
label for="namecard"持 卡 人:/label
input id="namecard" name="namecard" type="text" placeholder="确定是否该卡用户!" required
/li
/ol
/fieldset
fieldset
button type="submit"现在购买/button
/fieldset
/form
2、编写css样式
style type="text/css"
/*分别定义HTML中和标记之的距离样式*/
html, body, h1, form, fieldset, legend, ol, li {
margin: 0;
padding: 0;
}
/*定义body标记样式*/
body {
background: #ffffff;
color: #111111;
font-family: Georgia, "Times New Roman", Times, serif;
padding-left: 20px;
}
/*定义付费内容的样式*/
form#payment {
background: #9cbc2c;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 20px;
width: 400px;
margin:auto;
}
form#payment fieldset {
border: none;
margin-bottom: 10px;
}
form#payment fieldset:last-of-type { margin-bottom: 0; }
form#payment legend {
color: #384313;
font-size: 16px;
font-weight: bold;
padding-bottom: 10px;
text-shadow: 0 1px 1px #c0d576;
}
form#payment fieldset legend:before {
content: "Step " counter(fieldsets) ": ";
counter-increment: fieldsets;
}
form#payment fieldset fieldset legend {
color: #111111;
font-size: 13px;
font-weight: normal;
padding-bottom: 0;
}
form#payment ol li {
background: #b9cf6a;
background: rgba(255, 255, 255, .3);
border-color: #e3ebc3;
border-color: rgba(255, 255, 255, .6);
border-style: solid;
border-width: 2px;
-webkit-border-radius: 5px;
line-height: 30px;
list-style: none;
padding: 5px 10px;
margin-bottom: 2px;
}
form#payment ol ol li {
background: none;
border: none;
float: left;
}
form#payment label {
float: left;
font-size: 13px;
width: 110px;
}
form#payment fieldset fieldset label {
background: none no-repeat left 50%;
line-height: 20px;
padding: 0 0 0 30px;
width: auto;
}
form#payment fieldset fieldset label:hover { cursor: pointer; }
form#payment input:not([type=radio]), form#payment textarea {
background: #ffffff;
border: #FC3 solid 1px;
-webkit-border-radius: 3px;
font: italic 13px Georgia, "Times New Roman", Times, serif;
outline: none;
padding: 5px;
width: 200px;
}
form#payment input:not([type=submit]):focus, form#payment textarea:focus {
background: #eaeaea;
border: #F00 solid 1px;
}
form#payment input[type=radio] {
float: left;
margin-right: 5px;
}
/style
3、漂亮的表单生成。