高端网站制作公司:5个方面阐述,Web表单设计

　　高端网站制作公司:5个方面阐述,Web表单设计

　　最近，作者正在做一个比较复杂的Web产品交互和视觉设计工作，涉及到很多形式的类型页面,高端网站制作公司。

　　形式的内容是不确定的，成分是变化的。在工作过程中，用户输入过程、页面布局和形式统一有很多限制，在优化功能交互过程和清除交互布局水平的基础上，努力提高用户的输入信息体验，提高输入效率；希望给用户带来惊喜。

　　在形式设计的过程中，根据自己的工作经验，同时寻找一些案例数据，完成表格设计的归纳和总结，为小伙伴的需要做参考。

　　本文的结构框架

　　首先，形式定义

　　表单的核心功能是收集数据和信息，可以作为采集、传输和提交数据的中间媒介，作为获取用户输入的重要方式，也起到匹配问答的作用。

　　二。形式形式

　　表单通常由标签、输入字段、填充提示、操作按钮等组成，根据输入过程，用户输入过程可分为输入、输入和输入。

　　表单示例

　　标签：告诉用户表单需要填写什么类型的信息，通常放在窗外或左外的窗体文本框之外。在很少情况下，它也将被放置在文本输入框中，并且激活输入框将消失。

　　标签通常是每个输入项的名称（例如：帐号、ID号、服务器名）。根据填写信息的必要性，{关键字47}可以分为所需和不需要的项目。。否则，表单不能正常提交和保存，而非需要的项目是用户可以填写，并根据用户的愿望和需要自愿选择填写。

　　输入域：用于收集用户操作的信息，每个输入字段包含一种类型的信息。

　　输入场不仅是一个文本输入框，而且从交互的组件的角度，包括文本输入框、单选框、复选框、开关、选择器、步进酒吧，上传，标签交换（主要是按键式），滑块，步进酒吧等在。

　　填写提示：帮助用户有效、正确填写内容或反馈信息内容。

　　提示可分为引导提示和反馈提示两种，引导提示发生在用户输入之前，引导用户正确输入信息或解释输入信息的要求，反馈提示发生在输入或输入后，界面显示。根据用户的输入提示信息。

　　操作按钮指的是操作操作（如保存、取消、提交、确定等）以完成当前操作过程或在过程中或之后或在填写表单内容之后打开新的功能操作。

　　三，形式表达形式

　　表单页面显示有三种形式：跳转、输入和编辑。影响页面形式的因素包括表单的输入容量和操作过程的主次关系。

　　（1）页面跳变

　　在页面中显示一个功能的主要操作过程，以保证主要功能的流畅性；同时，如果输入越多，建议使用跳过页面，页面跳转的信息承载能力强，反馈的及时性要求不高。身高、体重感重，稳定性高于关键词105。

　　跳过页面包括两种：新页面打开和当前页面跳转。

　　在主进程步骤中，打开新页面作为分支过程，不会影响用户主进程的连续操作，并且页面功能是独立的。

　　当前页面跳转是流程步骤中的关键步骤，提示用户进入下一步，页面之间的跳跃体现了产品的基本使用过程。关键流程关键路径建议打开当前页面，使产品过程更加清晰，页面少开，以减少多余信息的分心给用户的注意力，高端网站制作公司,并让用户关注当前页面的信息。

　　（2）输入弹出窗口

　　弹出式的输入形式，当前页面的分支操作，反映了页面之间的层次关系。输入弹出式的形式，输入量介于两种样式之间的跳过和就地编辑之间。IVE页面流不适合本地编辑，也没有达到新页面的级别。

　　用户在不离开当前页面的情况下继续插入性。对于过程步骤中的分支行为，可以由用户选择，不覆盖用户已经阅读的内容，输入窗口较轻，信息负载弱于页面跳过，比本地编辑强，并且输入内容具有较大的弹性空间。

　　这种类型的表单会中断当前的主操作过程，高端网站制作公司能及时响应，给人们带来更多的局部性，所以输入内容不应太多，不能太过关注用户，否则会造成用户主要操作过程的强烈分离。减少输入的流畅性。

　　（3）地方编辑

　　就地编辑是一种轻量级的信息采集形式，适用于输入较少、频率较低、主要功能分支的场景，其优点是操作方便、随时启用和退出，保证了用户在主要功能上的流畅性。

　　本地编辑通常嵌入在列表和卡片中，并且通过双击或单击特定操作按钮将信息显示区域更改为活动编辑状态。其存在的意义在于改进或增强主功能的操作，而不是中断{关键字298}。

　　2。标签样式

　　根据标签与输入域之间的位置关系，其对齐可分为右对齐、左对齐和顶部对齐三种类型，每种对齐方法都有一定的优势和局限性，因此在适当的SCN中选择合适的标签样式。E可以提高用户的输入效率。

　　（1）右对齐

　　当你想要减少垂直空间和加速场景时，使用右对齐。右对齐标签的表单浏览时间比顶部对齐标签长，但比左对齐时间短。如果页面高度有限，公司推荐这种对齐方式。

　　优点：节省垂直空间。

　　缺点：减少可读性，标签长度和输入框的灵活性。

　　板栗：腾讯蓝鲸故障自愈平台的新收敛规则表页收敛，左对齐布局用于促进用户的快速操作，并完成新的收敛规则形式的完成。

　　（2）顶部对准

　　希望用户可以快速填写表格并使用顶部对齐来完成任务。顶部对齐比其他对齐方法需要更少的眼睛移动。移动表单主要用于这种形式，移动电话用于下拉交互。垂直高度不受限制。

　　优点：浏览速度和处理速度最快；标签长度灵活。

　　缺点：非常垂直的空间。

　　（3）左对齐

　　希望用户在使用左对齐类型的情况下减慢并仔细考虑表单中每个输入框的场景。在三中，带有左对齐标签的窗体是最长的，但是当用户希望用户放慢速度并仔细思考时，可以使用这种对齐方式（例如IM）。输入端）。

　　优点：阅读文本开头的视线，便于阅读，节省垂直空间。

　　缺点：灌装速度慢，标签长度和输入箱灵活性小。

　　取板栗：腾讯云，购买云产品的表单界面，让用户仔细观察，慎重选择，采用左对齐的方式。

　　三。输入域风格

　　输入字段是表单的主题和核心。

　　（1）组件风格

　　组价格的常见形式包括表单、文本字段、选择器、开关、复选框、无线电、步骤、滑块、上传、标签等。下面将详细讨论建立的选择。

　　输入部件之间的间距不应窄。更大的文本输入框和适度的空白空间会使人们更想填写。在表单间距处理中，每个块之前的空间，例如在一列中的一组字段输入框之间的间距，以及双列中左右列之间的距离。需要特别注意。

　　（2）单排和多排布局

　　在网页中，由于页面关系，跳转页面和弹出窗口的水平空间较大，垂直空间不足。如果有更多的输入内容，当不能使用模块、步骤和更高层次的交互布局时，一些设计者会使用双列表或多列表形式来改善水平空间的使用，这也是可以接受的，此时，我们应该注意T的合理性，高端网站制作公司。他在列和列之间的距离，并观察用户的视觉流。我们可以参考费兹定律。

　　但作为一种形式，浏览和填充单柱形式的效率是最高的，用户的视觉流程更顺畅，从而提高灌装效率和降低用户的疲劳。因此，单栏布局用于建议的形式。

　　（3）子模块

　　要形成输入组件过多的内容、分类、子模块布局，让用户感觉更好，而不是一个大密集、组织良好的用户。用户可以在心理暂停中填补一段内容，减少视觉疲劳和心理压力。

　　板栗：网易七鱼服务平台的基础是基于表单页面，它分为几个小模块，如欢迎设置、未选择的分类提示、在线会话关闭的两个确认、重复的咨询识别、会话定时设置、服务时间设置、连接确认设置、会话访问提示等。层次清晰明了。

　　子模块实例

　　（4）一步一步

　　对于输入组件的内容过于丰富，有一个清晰的操作关系，可以逐步选择。在该步骤中，每个屏幕仅显示表单输入部件，并且还可以逐级执行检查反馈。

　　板栗：云平台的注册分为3个步骤：账户设置、数据完成和注册完成，用户可以一步一步地填写，每个屏幕只显示当前步骤下的输入组件，允许用户一步一步地清除用户行为和RE。减轻用户的心理负担，及时反馈检查，避免发现其中一个输入不正确。

　　阶梯式壳体

　　（高级）（不必要的项目应在默认情况下停用）

　　有很多形式的形式，有一些非必要的项目，并不那么重要。默认情况下，您可以选择隐藏它。当用户想要填写时，可以填写。或者搜索太多的条件，默认情况下，显示更多的信息内容；当搜索时，点击开始。

　　栗子：Ali云的云服务器ECS购买详细价格概述模块形式的页面，有许多形式的搜索，并默许默认；用户点击过滤按钮搜索形式展开。保存网页空间，让用户看到其他更重要的信息在列表中的默认。

　　高级示例（默认）

　　先进实例（展开）

　　4。提示风格

　　根据提示信息的位置和提示的时间，提示可分为输入框提示、输入框提示、激活输入框提示、图标悬停提示和单独区域提示等。有两种提示方式：引导提示和反馈提示。

　　（1）指南提示

　　引导提示符是用户输入信息规则的注释和描述。在用户输入之前，输入框中的提示、输入框中的提示以及输入框提示的激活可以被分类为引导提示。

　　可以分为：全局提示和定位提示。

　　全局提示：场景的使用是：告诉用户填写表单，并帮助用户改善相关表单的内容（好处提示）会带来什么好处。登录页面中没有很多项目，或者没有很多提示，U在信息的收集和使用保证（安全提示）的使用，减轻用户输入的关注。

　　位置提示：适用于形式较多的内容，当字段的内容较少时，应提示在相应的错误位置，帮助用户快速查找错误内容。

　　（2）反馈提示

　　反馈提示是页面系统检查用户输入并显示验证结果的提示形式，反馈提示由用户输入提示，输入和输入可分为即时检查反馈、本地检查反馈和全局检查反馈。

　　更常见的即时检查反馈是对输入的字符数的基础上显示密码的强度，从而提示用户当前的密码强度满足要求。该方法的验证条件大多是本地的，不需要发送命令对服务器实时得到反馈。

　　板栗：BHANCE网站的一页，密码设置要求用户输入密码以满足其下的条件，并根据用户输入的密码实时作出相应的反馈。

　　即时验证案例

　　本地检查反馈：当注册一个帐户时，输入完整的用户名，指示用户名是否可用，然后本地检查反馈。检查的内容存储在远端，程序需要完整的输入信息以在远端和馈送进行测试。背面提供。

　　本地校准主要应用于更多的输入项，输入有先决条件，并确定下一个输入，这样可以避免对用户输入不完整造成的干扰，减少服务器上的压力。一般的注册、登录、网页页面将使用部分检查F。反馈。

　　全局检查反馈：当输入完成或分阶段时，给出来自接口的输入反馈，用户需要触发操作。当用户操作反馈动作按钮时，接口在相应位置给出不兼容的反馈提示（一般为B）。ELOW或在单个输入帧的右侧）。

　　5。操作按钮窗体

　　操作按钮：在完成表单内容后，将要执行的动作（如保存、取消、提交、确认等）。

　　在完成表单输入字段后，必须执行最终的操作反馈，以使用户清楚地知道其输入的数据信息是否可以有效地保留或放弃。操作按钮不保存、取消、提交、重置、上下、保存和提交。

　　四。控件的选择

　　对于用户来说，最好的体验是没有表单输入，无论形式如何，都不能满足用户的心理预期。因此，在设计表单时，应尽可能减少用户的思维、操作和理解负担，减少用户的疲倦感。形成和提高表单的输入效率，这是表单输入的核心原则，因此，控制类型和风格的选择尤为重要。

　　1。选择框优于输入框

　　任何高密度操作都会引起用户的不适。因此，在选择输入项时，选择而不是键盘输入。

　　一方面，它简化了用户的操作，点击次数远小于输入，从而降低了用户的操作密度。

　　另一方面，可以减轻用户的认知和记忆负担，与输入框相比，操作步骤的选择较少，效率相对较高。同时，用户考虑输入值，不需要重新输入输入错误的风险，用户可以清楚地选择项目，明确哪些值是可用的。对于一些无关紧要或更难理解的输入项，您可以预制默认值并在所有阶段照顾用户。

　　2。单选框和下拉选择框

　　作为同一类型的输入项，选择框具有与下拉框相同的优点，所使用的场景是完全不同的。

　　复选框更适合较少的选项（小于五），同时，选择项更相似。此外，当选择可视性和快速响应优先级时，应优先选择框，因为与下拉选择相比，使用RS可以通过显示的选项直接选择目标选项，以提高输入效率。

　　下拉选择框更适合多选项（五以上），有默认选项，或者选择项之间存在很大差异。同时，下拉的选择不应引起输入项的数量和页面的变化。否则，页面的选择和页面的变化会很容易导致用户的不适。

　　如果有太多的选项和超过二十个，最好引入模糊匹配和某些排序规则（字母排序、数值排序等）。用户预先预览选项的一般位置，或者通过模糊检索找到合适的选项。

　　3。合并相邻字段/结构格式

　　当两个输入帧高度相关时，它们可以来回拼接以减少页面空间，即合并相邻字段。例如，服务器的IP和端口、区域代码和联系方式的数量以及时间范围的选择，高端网站制作公司。

　　虽然用户输入或现场操作的选择没有减少，但是它的视觉简单性和用户心理压力会降低，用户熟悉输入的内容，并且系统不希望接受任何偏离预期格式，并且可以使用结构化的。放盒格式。

　　栗子：当淘宝帐号注册时，淘宝网络用户群遍布世界各地，电话号码是在电话号码前结构化的。前者只需由用户选择，同时在验证过程中添加一个简单有效的动画，给用户带来一定程度的惊喜。

　　4。水平连杆机构

　　这个区域与邮政编码有关。在用户选择该区域后，邮政编码将自动识别并填充，当然它支持用户再次编辑，有许多类似的城市，如级联选择、组织级等。

　　5。智能联想

　　智能关联是一种联想功能，它赋予用户输入字段的能力，使得用户很容易选择并将原始输入转换为选择。例如：邮件可以提供公共域名关联， 将出现163.com、126com、qqcom和其他域名允许用户使用。选择。

　　栗色：当注册百度帐户时，由于百度注册用户的基础和数量众多，注册了许多公共字段。当用户输入已注册用户名时，除了用户的用户名之外，还有类似的推荐用户名。反馈提示出现在后方。

　　也就是说，用户输入字段智能地与用户可选择的类似用户名相关联，高端网站制作公司，虽然最终用户可能不选择由较低的智能关联推荐的用户名，但它在一定程度上优化了用户体验，使得用户感觉到对设计师有一点小小的惊喜。

　　五、应用原则和技巧1。明确告知要输入的信息内容。

　　确保用户知道他们想要提供什么信息以及他们为什么要提供信息。

　　为本地用户提供一个标签，偶尔访问用户，为领域专家提供专业术语作为标签。当用户需要提供敏感信息时，输入提示符被用来解释系统为什么这样做，例如，当您需要获得身份证号码和电话号码。

　　2。让用户在上下文中获取信息并帮助他完成输入

　　使用良好默认值

　　3。标签简单准确

　　标签领域的简洁，有利于标签排版对齐，减少了用户的阅读和理解的难度。措辞准确防止用户有其他的解释，导致输入错误的信息。此外，标签可以省略如果输入项是清晰的，如登录的用户名和密码。

　　4。必需品

　　所要求的项目一般都需要清楚地识别，除非它们都是必需的，高端网站制作公司，并且所需项目的数量小于7。当项目相对较小时，通常不需要识别因特网产品，并且不需要这些词。

　　5。是容错的

　　对错误敏感，尽可能容忍，具有容错性。

　　反馈是通过不同的审查规则和形式，这样用户不开始检查之前，点击提交，以便用户可以纠正错误提前。根据容错格式

　　6。简化不必要的输入项

　　在充分获取所需信息的前提下，越少的条目，越能充分利用用户的输入信息。例如：让用户输入身份证号码，不要让用户再次进入生日，此时，您可以阅读用户的生日。从用户的身份证号码，从而减少用户的输入。

　　7。合理分类

　　输入信息分类是减轻用户疲劳的有效方法，分类有多种。根据表单的输入内容与内容类别的相关性，可以输入相同类型的数据，以减少用户输入信息的跨度，提高输入效率。

　　根据输入信息的优先级或重要性，进行分类，将高优先级放在前面，将低优先级放在最终或折叠中，将默认值的输入项放在较低的值中，普通用户可以忽略输入。这部分。

　　8。合理分步

　　一步一步地处理输入表单，可以减少用户的操作频率，高端网站制作公司，给用户一定的休息空间，用户会有成就感，并且输入的步骤也有利于降低信息的错误率。

　　如果输入表单内容较多，输入内容具有逻辑顺序，则可以逐级处理输入表单。

　　禁用9的原理。主按钮

　　当输入框非常小（通常小于3）时，如果用户不输入所需项目中的内容，则可以禁用诸如提交的主按钮。当输入框很长（超过5或更多）时，不建议禁用主按钮。

　　当输入框非常小时，用户在输入时会得到反馈，因此主按钮的禁用规则非常清晰，易于用户理解。

　　板栗：禁止网易七鱼密码设置模块保存主按钮。当用户正确填写所需密码和新密码时，保存按钮就可用了。　　

　　转载请注明:高端网站制作公司:http://www.mfwind.cn/newsshow/238.html