7表单设计
- 格式:docx
- 大小:30.52 KB
- 文档页数:7
基础表单及模板的设计在进行基础表单及模板的设计时,首先需要明确表单的目的和内容,以便有效地收集所需信息。
一个好的表单设计应该简洁、易于理解和填写。
以下是一些设计基础表单及模板的要点:1. 标题和描述:表单的标题应简洁明了,能够准确描述该表单的用途。
在表单的上方或顶部,提供一个简短的描述,概括表单的内容和目的。
2. 字段选择:确定需要收集的信息,并将其转化为相应的字段。
确保字段名称简洁明了,便于理解和填写。
对于文本输入框,可以设置合适的长度限制或字符类型(如数字、日期等)。
3. 必填字段标识:对于必填字段,在其旁边使用星号或其他明显的标识符进行标记,以便用户清楚地知道哪些字段是必须填写的。
4. 选项和单选:对于一些具有固定选项的字段,如性别、婚姻状况等,可以使用单选按钮或下拉菜单。
确保选项清晰、明了,覆盖用户常见的选择。
5. 多选和复选框:对于需要用户选择多个选项的字段,如兴趣爱好、技能等,可以使用多选框,允许用户选择多个选项。
6. 提醒和错误处理:在字段旁边提供适当的提示或示例,帮助用户理解该字段的输入要求。
同时,对于错误的输入,给予及时的错误提示,以便用户及时纠正。
7. 美观和易用性:表单的整体布局应简洁明了,不要过于拥挤。
使用合适的间距和排列,确保不同字段及其标签之间有足够的可读性。
同时,选择合适的字体和颜色,使表单整体外观美观、舒适。
8. 模板设计:在设计表单时,可以考虑将其制作成模板,以便在需要时可以简单地复用和修改。
模板的设计应符合通用的设计原则和标准,以便适用于不同的表单需求。
综上所述,设计基础表单及模板需要考虑界面的简洁性、易用性和美观性,同时准确收集所需的信息。
通过合适的字段选择、明确的标识和错误处理,可以提高表单的填写效率和准确性。
制作表单模板可以节省时间并提高工作效率。
怎样设计一个好的表单在现代社会中,表单已经成为必不可少的一种信息收集工具,无论在生活中还是工作中都随处可见。
一个好的表单可以让用户更轻松地填写信息,同时也可以节约公司等组织的人力物力。
然而,不是所有的表单都是好的,有些表单设计得太过复杂、有些表单格式不规范,使得用户填写起来非常费劲,给用户和公司都带来了不便。
那么,怎样设计一个好的表单呢?下面,我就从以下几个方面谈谈设计一个好的表单的具体步骤。
1、确定表单类型表单类型包括调查问卷、报名表、投诉表和反馈表等不同类型。
在设计表单前,需要先确定表单类型,以便更好地定位目标用户受众,并且针对受众特点进行设计。
2、梳理表单内容和信息梳理表单内容和信息是设计表单的基础,必须要考虑到需要收集哪些信息和相关问题,列出详细的问题和答案。
同时,需要把问题按照主题和逻辑顺序进行分组,防止用户混淆。
3、根据设备类型进行响应式设计在表单设计中,需要考虑到用户使用的设备类型,并进行响应式设计,也就是根据设备的不同,自适应的调整页面结构和样式。
如在移动端的设计,应该做好排版、字体大小、图片等方面的优化,使得用户在手机上更方便地填写表单。
4、使用可读性好的字体在表单设计中选择合适、可读性好的字体很重要。
一般建议基本字体可以采用宋体,辅助字体可以采用黑体、微软雅黑、Arial和Times New Roman等字体。
除此之外,字体大小也需要进行合适的设置,让用户舒适、方便地填写表单。
5、颜色的设计颜色的选择可以使表单内容更加突出、清晰。
建议使用单一的主调颜色,其他的辅助颜色可以根据主调颜色进行搭配。
同时,为了方便用户填写表单,建议在表单中设置必填项的颜色进行标注。
6、设计布局和标识在表单设计中,需要以页面布局的方式呈现问题。
从表头开始,逐行呈现每个问题。
同时,在每个问题之间需要增加合适的间距,避免页面的混乱。
需要注意的是,表单的布局和标识应该清晰明了,用户能够一目了然。
除此之外,建议在表单中设置分页和进度条,让用户了解填写表单的进度和距离完成的时间。
7个表单设计的秘诀7个表单设计的秘诀表单是网页设计中最常见的元素,几乎每个网站都会包含一种甚至几种不同类型的表单。
从简单的电子邮件搜集和订阅,到注册、下单、购买,表单一直伴随着网页而存在。
所以,设计出好看易用的表单是非常有必要的。
今天分享7个表单设计的秘诀,帮你设计出素质过硬的网页表单。
1、尽量让表单一目了然用户浏览网站的时候,通常会快速扫视来获取信息,看看网站内容和设计是否对他们的胃口或者符合需求,再决定要如何应对、交互。
表单也是一样的道理。
一目了然的表单能让用户立刻知道他们需要填写多少信息,以及如何提交表单。
一份一目了然的表单具备下面的特征:·对比度:文本和标签都简短直观,易于阅读,避免使用大量的色彩,尽量采用传统的黑白式的文本/背景组合。
·分组和间距:像较长的表单那样,将相近、相关的信息都分到同一组当中。
以支付为例,用户的基本信息、支付信息和物流信息分成不同的组。
三个较短的条目比一个较长的条目要更容易接受。
控制好标签文本和填写表单之间的间距,根据相关靠近原则,让条目之间的相互关系更明确。
·行为召唤:金莲使用大且容易看清的按钮。
按钮中的文本指向性明确,比如“提交”“立即支付”或者“下一步”,直观不拖沓。
2、考虑使用浮动的提示文本对于是否要在表单的输入框中加入提示文本有很多争论,其中主要的争论围绕在一点上:当用户点击输入框,光标出现准备输入的时候,其中的提示文本并没有自动消失,而需要手动删除之后再才能输入。
这就非常尴尬了。
此外,Nielsen Norman Group 的研究发现,空白字段会更加吸引用户注意,并且能够帮助用户更加清晰的输入信息。
如果你觉得有必要给用户以提示,那么请考虑使用交互性更强的解决方案:浮动的'提示文本。
在输入框内加入提示文本,让它看起来是占位符,但是允许它动效化,当用户的光标悬停或者点击输入框的时候,提示信息移动到左上角的位置上,它永远不会消失,起到了提示的作用,便于用户输入,动效还能给用户以惊喜,何乐而不为呢?3、使用表单格式掩码格式掩码能够提醒用户输入的内容的格式,字段的长短大小,对于表单的可用性有明显提升。
表单外观设计参考标准规定内容:1表单宽度750px;2表单长度要适中,注意美观(没有具体的规定);3 logo标题,默认(div 的背影色要和logo的背景色相同);4 标题, 24号,宋体,加粗;5 lable标签,小五;6 text文本框,小五;7 按钮,默认形式,按钮的长度根据字的个数适当调整,按钮间距15px ;8 链接其他页面的字的规范(例如:打印,历史记录)用按钮实现;9 Grid表中“删除行,增加行“用按钮实现;10 Grid表中的字段个数和长度要合理的分配,要全部显示出来;11 文本框不需要隐藏(特殊效果除外);12 表单与上下边的距离要适中(没有具体的规定);13 数字要右对齐;14 Combobox有默认值是“请选择”;15 按键字体的大小(例如增加附件,双击上传图片等)应为默认形式;16 shap画表格时,要注意shape的颜色。
具体颜色参看模板(#c9c9c9);17 Logo与表单的宽度相同,并且用shape在左右两边封口。
注意:模板中将按钮放在了logo中,制作表单时,按钮(例:打印,历史记录等)放在logo的下面。
布局原则:将窗口中控件和面板的尺寸调整为适合典型内容的大小。
避免截断文本使其带有省略号。
用户应当不需要任何操作即可查看窗口的典型内容——为通常不会出现的大量内容预留调整大小和滚动功能。
特别要检查:控件尺寸。
控件尺寸应当适合于其典型内容,将控件变得更宽、更高、必要时使用多行编辑。
调整控件的尺寸,以避免或减少在那些有大量空间的窗口中进行滚动。
而且,不应在有大量空间的窗口中存在任何被截断的标签或文本。
∙列宽。
确保列表视图具有合适的默认、最小及最大列宽。
为列表视图使用不会引起文本截断的默认列宽,尤其当列表视图中还有足够空间时。
∙布局平衡。
窗口布局应当让人感到大致平衡。
如果觉得布局左侧偏重,应当考虑增加控件的宽度,并将一些控件移到右侧。
∙布局尺寸调整。
当窗口尺寸能够缩放且数据被截断时,确保更大的窗口尺寸能够显示更多数据。
要求:标签中显示当前时间,并实时改变1.在表单上画一个标签,一个计时器2.选中计时器,在time event中写入bel1.caption=time()3.在interval中写入1000等较大的数字4.保存,运行1.使用“表单设计器”创建表单,表单名称“工作人员”,窗口如下。
1.单上画一个表格2.右击表格,点击生成器3.把所需要的数据选上2.使用“表单设计器”创建表单,表单名称“Form1”,操作步骤如下。
1)设计“Form1”表单,并保存备用2)操作要求:有一张标签有一个组合框,可以选择的内容是“星期一、星期二、星期三、星期四、星期五、星期六、星期日”,选择后,标签上显示所选择的文字。
1.在表单上画一个标签,一个组合框2.选中组合框3.在rowsource中输入星期一到星期五,其中用英文逗号分隔4.在interactive change中写入bel1.caption=this.value5.rowsourcetape中把0改为1-值操作要求:该表单有两张表格:第一张表格显示“公司部门”表的数据,是主表第二张表格显示“工作人员”表的数据。
当选择第一张表的某一行时,第二张表应该只显示所在部门编号的人员。
1.画两个表格2.点击主表,右击,生成器,选择部门编号3.在数据库中将工作人员表设置为普通索引4.选中,右击,生成器,在数据库和表,在候选的地方选择工作人员表5.将可用字段需要的选入6.在关系中,父表中的关键字段中选择两个表都有的联系,本题中为部门编号7.在子表中的相关索引为部门编号3.使用“表单设计器”创建表单,表单名称“工作人员查询”,操作步骤如下。
1)设计“工作人员查询”表单,并保存备用2)操作要求:表单标题“工作人员查询”两个文本框中显示“工作人员”表中的编号和姓名单击“上一条”时,显示上一条数据单击“下一条”按钮时,显示下一条数据。
1.在表单上画上相应的控件2.在第一条中写入go topthisform.refresh3.在上一条中写入if not bof()skip-1thisform.refreshendif4.在下一条中写入if not eof()skipthisform.refreshendif5.一条中写入Go bottomThisform.refresh5.右击,选择数据环境6.将所需要的数据拖进来4.使用“表单设计器”创建表单,表单名称“信息查看”,窗口如下。
表单设计思路表单设计思路随着互联网的发展,越来越多的企业和个人开始使用在线表单来收集信息和数据。
一个好的表单设计可以提高用户体验、减少错误和重复信息,提高数据质量。
下面将介绍一些表单设计的思路。
一、目标与定位在设计表单之前,需要先确定表单的目标和定位。
例如,是用于收集用户反馈、报名注册、订单提交等等。
不同类型的表单对于用户而言,具有不同的使用场景、需求和期望。
因此,在设计之前需要明确表单所要达到的目标,并为此制定相应的策略。
二、布局与排版一个好的布局与排版可以让用户快速地理解并填写表单。
以下是一些建议:1. 简洁明了:尽可能简化每个字段,并避免冗余信息。
2. 分组分类:将相关字段分组并分类,以便于用户快速找到所需信息。
3. 逻辑关系:将相关字段放在一起,并根据其逻辑关系进行排列。
4. 字段长度:尽可能使每个字段长度相等或类似,以便于视觉上对齐。
5. 字段顺序:按照常规顺序排列字段(例如姓名、邮箱、电话),以便于用户理解和填写。
三、表单元素在设计表单时,需要考虑以下元素:1. 标题:使用简短而有意义的标题,以便于用户快速理解表单目的。
2. 标签:为每个字段添加标签,以便于用户理解该字段所要求的信息。
3. 输入框:尽可能使用默认输入框,并确保其大小和位置一致。
4. 单选框和多选框:使用单选框和多选框来收集二进制数据(例如是/否、男/女等)。
5. 下拉菜单:使用下拉菜单来收集有限数量的数据(例如省份、城市等)。
6. 滑块:使用滑块来收集连续范围的数据(例如年龄、收入等)。
7. 按钮:使用按钮来提交表单或进行其他操作。
四、验证与反馈在设计表单时,需要考虑以下验证与反馈:1. 必填字段:标记必填字段,并确保用户填写了这些字段。
2. 错误提示:当用户填写错误或不完整信息时,提供相应的错误提示以帮助他们纠正错误或完善信息。
3. 成功提示:当用户成功提交表单时,提供相应的成功提示以告知他们提交成功并感谢他们的参与。
第七章表单设计7.1 基本概念1.名词解释表单:即用户与计算机进行交流的一种屏幕界面,用于数据的显示、输入、修改。
该界面可以自行设计和定义,是一种容器类,可包括多个控件(或称对象)。
表单集:可包含一张或多张表单的容器。
数据环境:在打开或修改一个表单或报表时需要打开的全部表、视图和关系。
它以窗口形式(类似于数据库设计器)反映出与表单有关的表、视图、表之间关系等内容。
可以用数据环境设计器来创建和修改表单的数据环境。
2.表单设计界面[图例]主要包括: 表单向导、表单设计器、表单设计器工具栏、表单控件工具栏、属性窗口3.表单设计中常用的属性、事件与方法介绍属性、事件、方法说明默认值AlwaysOnTop属性控制表单是否总是处在其他打开窗口之上假(.F.)AutoCenter属性控制表单初始化时是否让表单自动地在VisualFoxPro主窗口中居中假(.F.)BackColor属性决定表单窗口的颜色255,255,255BorderStyle属性决定表单是否有边框,若有边框,是单线边框、双线边框,还是系统边框。
如果BorderStyle为3(系统),用户可重新改变表单大小3Caption属性决定表单标题栏显示的文本Forml Closable属性控制用户是否能通过双击“关闭”框来关闭表单真(.T.)MaxButton属性控制表单是否具有最大化按钮真(.T.)MinButton属性控制表单是否具有最小化按钮真(.T.)Movable属性控制表单是否能移动到屏幕的新位置真(.T.)WindowState属性控制表单是最小化、最大化还是正常状态0 正常WindowType属性控制表单是非模式表单(默认)还是模式表单。
如果表单是模式表单,用户在访问应用程序用户界面中任何其他单元前必须关闭该表单0 非模式Activate事件当激活表单时发生Click事件在控制上单击鼠标左键时发生DblClick事件在控制上双击鼠标左键时发生Destroy事件当释放一个对象的实例时发生Init事件在创建表单对象时发生Error事件当某方法(过程)在运行出错时发生KeyPress事件当按下并释放某个键时发生Load事件在创建表单对象前发生Unload事件当对象释放时发生RightClick事件在单击鼠标右键时发生AddObject方法运行时,在容器对象中添加对象Move方法移动一个对象Refresh方法重画表单或控制,并刷新所有值Release方法从内存中释放表单Show方法显示一张表单7.2 创建表单可以用表单向导、表单设计器、表单生成器、编程四种方法创建表单。
1. 利用向导创建表单(1)创建单张表的表单:打开文件菜单→ 新建→ 表单→向导 [或从常用工具栏上选择表单(F)] →选择表单向导→选取字段→ 选择样式→选择排序记录→选择保存方式→给出合适的文件名和保存位置。
(2)创建多个相关表的表单:打开文件菜单→新建→表单→向导 [或从常用工具栏上选择表单(F)] →选择一对多表单向导→选取父表字段→选取子表字段→选定关系→选择样式→ 选择排序记录→选择保存方式→给出合适的文件名和保存位置。
注意:用向导创建的表单一般含有一组标准的命令按钮。
表单保存后系统会产生两个文件:表单文件:扩展名为.SCX表单备注:扩展名为.SCT2. 利用表单生成器创建表单文件菜单→新建→表单→新文件→ 表单菜单→快速表单命令→选择字段和样式并确定之。
注意:用生成器创建的表单不能直接产生一些命令按钮。
3. 利用设计器创建表单文件菜单→ 新建→表单→新文件→在表单设计器中,用表单设计器和表单控件工具条上的按钮创建所需的表单→保存表单→ 给出文件名和保存位置。
注意:用设计器创建的表单,用户必须为控件设置有关的属性及事件处理代码。
4. 利用编程的方法创建表单按照面向对象设计的方式,先可视化地利用类来创建表单,再将类代码复制到程序窗口,适当添加部分设置系统环境的代码,以程序文件的形式保存。
5. 运行表单从常用工具栏上单击运行按钮(!)或从表单菜单中选择运行表单命令或从命令窗口中输入: DO FORM表单文件名。
7.3 向表单中添加控件1. 常用控件的作用标签:用于保存不希望用户改动的文本,常用来为添加的控件写标。
文本框:用于输入或编辑表中的非备注型字段,框中一般是单行的文本。
编辑框:用于输入或编辑长字段或备注字段,框中可以有多行并有垂直滚动条。
列表框:用于显示一组预定的、供用户选择的值,可以是一列或多列,可通过滚动条浏览列表信息。
组合框:一种下拉式的列表框,可以从中选择一项或人工输入一个值,兼有列表框和文本框的功能复选框:用来显示多个选项,可以选择其中的一项或多项。
表格:一个按浏览窗口样式显示数据的容器,常用来显示一多关系中的子表。
页框:一种用于创建选项卡式对话框的容器类,一个页框可以包含多个页面,但每次只能有一个活动页面。
微调控制:用于接受给定范围内的数据输入。
命令按钮:常用来启动一个事件。
命令按钮组:用来把相关的命令按钮编成组。
选项按钮组:用于显示多个选项,只允许从中选择一项。
计时器:可以在指定时间或按照设定的间隔运行进程,此控件在运行时不可见。
2. 用生成器向表单中添加控件:打开所需表单,进入表单设计器→从表单控件工具栏上选择生成器锁定按钮→从该工具栏上选择所需控件并放在表单上→在生成器的选项卡中填上有关信息。
3. 利用数据环境在表单中创建控件:从数据环境中直接将所需字段或表拖到正在设计的表单中,VFP 会自动生成符合要求的控件。
若要创建一个将下面的项拖动到表单表格表复选框逻辑型字段编辑框备注型字段OLE 绑定型控制通用型字段文本框其他类型的字段4. 自定义方式创建控件打开表单设计器→ 根据需要从工具栏上单击某个控件→用鼠标直接在表单上画出控件外形→ 在属性窗口设置该控件的各项属性。
5.使用类浏览器向表单中添加控在表单设计器中打开表单→ 在类浏览器中打开类库文件,其中应包含有添加到表单中的对象的类→从类列表中,选择类名,然后把类图标拖放到表单上。
类图标位于类列表的上方。
附注:如果要把类添加到表单的容器对象上,则需把类图标拖放到表单中一个区域,然后把对象剪切并粘贴到所要的容器上。
6. 控件常用的属性、事件与方法属性说明AutoSize属性指定控件是否依据其内容自动调节大小ButtonCount属性指定命令组或选项组中的按钮数Caption属性指定在对象标题中显示的文本ControlCount属性指定容器对象中控件的数目ControlSource属性指定与对象绑定的数据源Enabled属性指定对象能否响应用户引发的事件Filter属性排除不满足条件的记录。
筛选条件由给定表达式指定Increment属性单击上箭头或下箭头时,微调控件中数值增加或减少的量InputMask属性指定控件中数据的输入格式和显示方式MoverBars属性指定是否在列表框控件中显示移动按钮Name属性指定在代码中引用对象时所用的名称Parent属性引用一个控件的容器对象ReadOnly属性指定是否可以编辑控件或者更新与临时表对象相关联的表或视图RecordSourceType属性指定如何打开填充表格控件的数据源RowSource属性指定组合框或列表框控件中值的来源ToolTipText属性为一个控件指定作为“工具提示”出现的文本Value属性指定控件的当前状态Click事件在控件上单击鼠标左键时方生DblCick事件在控件上双击鼠标左键时方生Destroy事件当释放一个对象的实例时发生Init事件在创建对象时发生InteractiveChange事件当更改控件的值时发生Load事件在创建对象前发生RightClick事件在单击右键时发生Addobject方法运行时在容器对象中添加对象Clear方法清除组合框或列表框控件的内容Refresh方法重画表单或控件,并刷新所有值KeyPress事件当按下并释放某个键时发生7.4 修改表单布局打开表单,进入表单设计器,用表单设计器工具栏或显示菜单中的各命令修改表单。
1. 选择、移动和缩放控件选择:用鼠标单击所需控件移动:选定控件,用鼠标拖动到新位置或从编辑菜单中选择剪切再在新位置粘贴缩放:选定控件,用鼠标拖动尺寸柄直至所需大小松开2. 复制和删除表单控件复制:选定表单上现有的控件→从编辑菜单中选择复制→从编辑菜单中选择粘贴。
删除:选定表单上现有的控件→按 Delete 键。
3. 控件的布局可利用布局工具栏使表单上的所有控件排列整齐、大小合理、对称美观。
7.5 定制表单1. 改变文本的字体和大小打开表单,进入表单设计器→选择要修改的控件→ 打开属性窗口→设置字体大小和字形,如FontName 、FontSize、FontBold。
2.向表单中添加线条和形状选择工具栏上的线条或形状按钮,在表单中所需位置拖动鼠标,画出线条或图形,图形界于正方形和圆形、长方形和椭圆形之间(属性窗口中的 Curvature 值从 0~99 )。
线条和形状的颜色可以在属性窗口中设定。
3.向表单中添加图形从表单控件工具栏中选择图象→在属性窗口中选择 Picture 属性单击该栏的…按钮→在打开对话框中找到所需的图象文件→确定4.设置一个表单的前景和背景颜色用调色板工具栏或通过属性窗口中的 ColorSource 属性来设置。
5. 创建表单集启动表单设计器→从表单菜单中选择创建表单集→设计第一张表单→从表单菜单中选择添加新表单→设计另一张表单→添加新表单→ 设计另一张表单……7.6 设计自定义表单的一般方法1.与数据表绑定型表单(1) 生成基本表单:新建→表单→新文件→进入表单设计器→表单菜单→快速表单→选定数据库(表)→选定输出字段→选定样式→确定。
(2) 修改基本表单:1) 用鼠标拖动来调整各字段的布局(排列位置、大小、对齐等);2) 在属性窗口中设置表单中各对象的属性:表单(form1):caption:输入表单的中文标题backcolor:设置表单背景颜色autocenter:使表单运行时自动处于屏幕中央visible:设置表单在运行时是否可见,一般采用 .T.各字段控件:autosize:根据所容纳的内容自动调整大小, 常采用 .T.backstyle:字段标题一般可设为透明,其它可设为不透明caption:输入中文的字段标题fontname:设置控件字体fontsize:设置字体大小forecolor :设置字体颜色(3) 根据需要添加控件:1) 利用数据环境:打开基本表单→单击鼠标右键→ 从快捷菜单中选择数据环境→将所需字段拖到表单中→用标签控件为字段添加标题(先画出标签控件再更改标签的 caption 属性)。