盛京棋牌

扫一扫石家庄富鸿装修公司微信号
您当前所在位置:盛京棋牌 > 精品施工 >

精品施工

Web表单设计5个方面

发布时间:2018-05-02  所属栏目:精品施工

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

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

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

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

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

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

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

标签通常是每个输入项的名称(例如:帐号、ID号、服务器名)。根据填写信息的必要性,它可以分为需要和不需要的项目。顾名思义,所需的项目是用户必须输入有效的文本信息。否则,表单不能正常提交和保存,而非需要的项目是用户可以填写,并根据用户的愿望和需要自愿选择填写。

输入字段不仅是文本输入框,而且还从交互组件的角度,包括文本输入框、单个框、复选框、开关、选择器、步进栏、上传、选项卡开关(主要是按钮类型)、滑块、步进杆等等。在。

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

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

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

在页面中显示一个功能的主要操作过程以保证主要功能的流畅性,同时,如果输入较多,则建议使用跳过页面,页面跳转的信息承载能力强,反馈的及时性要求不高。GH;体重越重,稳定性越高,尤其是重要的功能形式填写确认表明页面跳动。

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

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

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

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

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

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

本地编辑通常嵌入在列表和卡片中,通过双击或单击特定操作按钮将信息显示区域更改为活动编辑状态。其存在的意义在于改进或增强主要功能的操作,而不是INT。弄错了。

根据标签与输入域之间的位置关系,其对齐可分为右对齐、左对齐和顶部对齐三种类型,每种对齐方式都具有一定的优点和完整性。因此,在正确的场景中选择正确的标签样式可以提高用户的输入效率。

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

希望用户可以快速填写表格,并使用顶部对齐来完成任务。顶部对齐比其他对齐方法要求更少的眼睛移动。移动终端的形式主要用于这种形式,并且移动电话的垂直高度是无限的。

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

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

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

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

但作为一种形式,单栏形式的浏览和填充效率最高,用户的视觉流程更加流畅,提高了填充效率,减轻了用户的疲劳,因此采用了单栏布局。

对于内容太多的表单输入组件,排版排版方法使用户感觉更好,而不是大而有序的安排,用户可以在完成段落后停止心理休息,减少视觉疲劳和心理压力。

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

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

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

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

板栗:Ali云的云服务器ECS在表单页面中购买一个详细的价格概览模块,搜索多个表单,默认默认;用户点击过滤器按钮展开搜索。保存页面空间,允许用户查看更多的列表和其他重要信息。默认情况下。

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

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

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

更常见的即时检查反馈是根据输入字符的数量显示密码的强度,以提示用户当前的密码强度满足要求。该方法的验证条件大多是本地的,不需要发送命令。对服务器进行实时反馈。

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

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

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

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

操作按钮:在完成表单内容后,将要执行的动作(如保存、取消、提交、确认等)。

在完成表单输入域后,必须执行最终的操作反馈,以确保用户输入的信息是否有效。操作按钮不保存、取消、提交、重置、上下、保存和提交。

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

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

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

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

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

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

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

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

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

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

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

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

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

使用良好默认值

标签字段简洁明了,有利于标签排版的对齐,减少了用户阅读和理解的难度,准确的措词避免了用户的其他解释,导致输入信息不正确,另外,可以省略标签。如果条目项更清晰,例如登录用户名和密码。

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

通过不同的检查规则和表单进行反馈,这样用户在点击提交之前就不会开始检查,这样用户就可以提前更正错误。

在充分获取所需信息的前提下,越少的条目,越能充分利用用户的输入信息。例如:让用户输入身份证

号码,不要让用户再次进入生日,此时,您可以阅读用户的生日。从用户的身份证号码,从而减少用户的输入。

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

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

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

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

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

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

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

当输入帧非常高(特别是所需和不需要的项目)时,整个反馈链路是长而复杂的,并且禁止规则很难被识别,并且容易引起混淆。

取板栗:网易七鱼新客户服务表单页面,一屏无止境,保存按钮即使禁用,用户也很难看到。

本地验证需要平台的内容多于一个操作,否则会造成用户的麻烦,全局存储应该清楚相关按钮的清晰性。如果这需要用户查找,那是一个明显的经验问题。

取一个板栗:熟悉的淘宝注册单页,输入电话号码后,会有相应的提示(成功或失败)。在按下滑块后,出现相应的提示(成功或失败)。

将一种简单有效的动画添加到表单中,给用户带来一定程度的惊喜。可爱、简洁、有趣的动画有助于减少和减少用户输入形式的反感和焦虑,体现了产品设计和服务中的服务提供商的创新。他追求极致的用户体验。

取栗子:自述的登录页面,email是一个明文,猫头鹰张开手,睁开眼睛去看,显示出它更好奇的心理。

看似简单易用的输入表单的设计、设计原则和技巧并不局限于本文所讨论的内容,为了提高用户的体验,我们需要更多地学习、总结和实践更多的东西。我们期待着您的反馈和沟通。

红衣路,公共地址:UIUX设计工作室,每个人都是产品经理专栏作家,专注于B业务,尤其是后台程序界面设计,包括需求沟通、原型设计和后期设计评审。

555彩票 波克棋牌 555彩票 555彩票网 盛京棋牌 盛京棋牌官网 盛京棋牌 大神棋牌 彩客网 盛京棋牌