当前位置: 新闻中心 网页设计 设计出色形式的7个秘诀

设计出色形式的7个秘诀

几乎每个网站设计都包含某种形式的表单。从简单的电子邮件地址收集,注册新闻通讯或通知,到完整的付款收集表单,当务之急是设计一个易于使用和理解的表单。

表单设计的标准也在不断发展。尽管许多表单过去常常包含多个列并要求提供大量信息,但大多数最佳实践现在建议将表单保持尽可能简单。设计还有很多。好的表格是可扫描的,不需要大量的输入,并且包括智能的标签和格式,以帮助用户在第一时间正确填写表格。

这里有一些秘密,可确保您设计的是用户实际填写的表格。

 

1.轻松扫描和阅读

您知道用户会扫描网站以收集信息,并确定他们将采取什么行动,或者内容和设计是否使他们感兴趣。形式也是如此。用户应该能够一眼就知道需要什么信息,并清楚地说明该表单的用途以及如何提交。

高度可扫描的表单包括以下内容:

  • 对比:文字必须简短且易于阅读。避免使用多种颜色,并在浅色文本-背景组合上坚持使用传统的深色。
  • 分组和空格:将较长表格上的相似信息分组例如,在收集付款信息时,将客户信息,付款信息和运输信息分组。三个短块比一个长块更容易消化。使用智能间距将标签连接到其说明的字段,而不是在文本和字段元素之间使用均匀的间距。
  • 清除结束语/号召性用语:使按钮较大且易于查看。按钮内的显微镜应该告诉用户将要发生的事情,例如“提交”,“立即付款”或“进行下一步”。记住要关闭反馈循环,并让用户知道正确提交表单的时间。

 

2.考虑浮动标签

关于是否在表单字段内使用提示文本的争论很多。主要的问题是,此文本通常不会随着单击消失,并且用户必须主动将其删除才能开始输入。尴尬了。


此外,尼尔森·诺曼小组(Nielsen Norman Group)发现,空白字段可以吸引眼球,并帮助用户更清楚地输入信息。

如果您需要使用提示,请考虑使用交互式解决方案-浮动标签。将您的标签信息包括在表单字段中,以使其看起来像占位符文本,但是一旦用户将鼠标悬停或单击该字段,就可以使文本动起来并移动到左上角。标签或提示永远不会消失,也不会妨碍用户尝试填写表单。(加上小动画对于用户来说是一个有趣的惊喜。)

 

3.使用场罩

场掩码可以提供一些相同的线索和形式提示,但不会妨碍可用性。仅当用户激活字段并提供有关所需信息的附加扫描提示时,字段掩码才会出现。掩码可以通过自动格式化信息来进一步帮助用户,从而避免会在提交时将表格踢出的错误。

电话号码是行动面具的一个很好的例子。考虑多种格式选项:

  • (000)000-0000
  • 000-000-0000
  • 0000000000

用户如何知道哪个将工作?表单字段将根据用户类型指定和调整格式,因此他或她不必考虑它,而只需键入数字。(这也免除了在移动设备上的键盘之间切换的麻烦。)


 

4.使表单键盘友好

您无法知道用户将在哪种设备上遇到您的表单,但是无论如何都应该很容易填写。考虑可以将信息发送到表单并调整字段以检测和使用适当选项的所有不同类型的键盘。

在台式机上,用户无需单击鼠标即可输入表格并填写每个字段。完成后会自动从一个字段前进到下一个字段,或者使用标签或Enter键移动。W3.org有一套可靠的键盘建议供您遵循。

在移动设备上,将键盘类型与所需数据匹配。如果输入的是字母,请调出字母键盘;对于数字,请调出数字选项。来自Google:“应用程序用户非常喜欢为文本输入提供适当键盘的应用程序。确保在整个应用程序中一致地实施此操作,而不是仅针对某些任务而不是针对其他任务。”


 

5.选择垂直格式

垂直表格对用户而言比多列格式更容易。最佳实践规则是确保所有字段都可以在屏幕上显示,而无需以从上到下的格式滚动。

一个例外是超短格式,其中用户仅需要输入电子邮件地址或名称和电子邮件地址。在这种情况下,只要电子邮件框足够长,用户可以看到其地址的所有字母,则两个并排的列以及一个号召性用语可以很好地工作。

记住也要以垂直形式对元素进行逻辑排序。如果您要收集名字,姓氏,电子邮件地址和头发颜色,则以这种方式对其进行排序。


 

6.限制输入

在表单中使用尽可能多的预填充解决方案。没有什么比添加地址更令人高兴了,在点击了头几下之后,Google API就会启动并建议地址选项。

这执行三件事:

  • 它使用户更轻松,尤其是在移动设备上。
  • 它有助于限制必要的字段数。
  • 它可以帮助消除一些用户错误,例如错误输入。

考虑与电子邮件地址相同的事物,以便在@符号后为用户提供流行的电子邮件域。当用户输入web @ g…时。该字段会自动建议web@gmail.com


 

7.简短而甜美

您将很容易向用户询问表单中的许多信息。抵制冲动!

只要求提供重要信息。用户更有可能填写需要较少承诺的表格。如果以后需要更多信息,则可以从列表中通过电子邮件将其发送,以询问其他详细信息。(正如已经选择加入的人一样,此时用户更有可能与您进行更多互动。)

避免使用可选字段。不要要求提供多余的信息。请勿在可以使用一个字段的多个字段(例如电话号码)中使用。


 

结论

杭州网站建设供一些填写表格的回报。使其有趣或有趣。感谢用户。

创建易于阅读和易于使用的表单将增加您收集数据并将网站访问者转变为重复用户的机会。


返回观点列表
本文标签:

相关专题

  • 品牌官网设计
    品牌官网设计

    杭州派迪科技为高端客户提供品牌官网咨询策划,品牌官网设计,品牌官网建设开发服务,以国际化视野和标准为基础,为各行业领军品牌提供高端企业网站定制、策划、设计、互动与制作

    查看详情
  • 大策略营销门户网站
    大策略营销门户网站

    杭州派迪科技有自己的营销型网站CMS系统,适合白帽SEO网站。特别对大策略的营销型门户网站制作有一定的经验,曾经为上海天擎外贸行业网站、浙江兆龙营销型门户、先临三维门户营销网站提供全程的技术支持及SEO优化指导

    查看详情
  • 集团/上市公司网站
    集团/上市公司网站

    杭州派迪科技为杭州本地集团公司提供网页设计、制作、开发服务,为集团公司网站建设提供了响应式、营销型、品牌型、门户型网站建设需求,欢迎广大集团公司客户咨询

    查看详情
  • 外贸网站建设
    外贸网站建设

    杭州派迪科技为高端客户提供外贸网站咨询策划,外贸官网设计,外贸官网建设开发服务,以谷歌搜索引起算法为基础,为各行业外贸公司提供高端企业外贸网站定制、策划、设计、互动与制作

    查看详情
  • 企业网站建设
    企业网站建设

    高端专业、令人印象深刻的用户界面、易于访问——企业网站必须反映一切,因为派迪科技在这里提供帮助,凭借精湛的技术、丰富的经验、与客户的持续沟通以及对每一个细节的关注,我们确保在快速的周期时间内提供优质的服务。

    查看详情
  • 半定制网站
    半定制网站

    杭州派迪科技模板网站建设专题_各行业方案专题栏目提供各行业产品适合的网站建设方案,帮助企业了解派迪科技建站效果等信息,您可以通过本站了解各行业网站建设方案,如需要获取本行业定制网站建设方案,可以联系在线客服或拨打电话咨询

    查看详情

体验从沟通开始,让我们聆听您的需求!

开始您的数字化品牌体验! 15158117070 期待您的来电!

[ 网站建设×品牌官网设计×大策略营销门户×微信小程序开发×微信公众号开发]

派迪业务总监微信号

派迪业务总监微信号

了解最新项目报价

派迪产品经理微信号

派迪产品经理微信号

免费获取项目策划

我们正使用 cookies 来改善您的访问体验

派迪科技非常重视您的个人隐私,当您访问我们的网站www.hzpady.com时,请同意使用所有cookies 。

如果您想详细了解我们如何使用cookies请访问我们的 《隐私政策》

Cookie 偏好

如果您想详细了解我们如何使用cookie请访问我们的 《隐私政策》

管理cookie偏好

基本 cookies

始终允许

这些 cookies 是网站运行所必需的,不能在我们的系统中关闭。它们通常仅针对您所做的相当于服务请求的操作而设置,例如设置您的隐私首选项、登录或填写表格。您可以将浏览器设置为阻止或提醒您有关这些 cookies 的信息,但网站的某些部分将无法运行。这些 cookies 不存储任何个人身份信息。

性能 cookies

始终允许
这些 cookies 使我们能够计算访问量和流量来源,以便我们可以衡量和改进我们网站的性能。它们帮助我们了解哪些页面受欢迎和不受欢迎,并了解访问者如何在网站上移动。这些 cookies 收集的所有信息都是汇总的,而且是匿名的。如果您不允许这些 cookies,我们将不知道您何时访问了我们的网站,也无法监控其性能。

功能性 cookies

这些 cookies 收集信息用于分析和个性化您的定向广告体验。您可以使用此拨动开关来行使选择不获取个人信息的权利。如果您选择关闭,我们将无法向您提供个性化广告,也不会将您的个人信息交给任何第三方。

定位 Cookies

这些 cookies 可能由我们的广告合作伙伴通过我们的网站设置。这些公司可能会使用它们来建立您的兴趣档案,并在其他网站上向您展示相关广告。它们不直接存储个人信息,而是基于唯一标识您的浏览器和互联网设备。如果您不允许使用这些 cookie,您将体验到较少针对性的广告。

我们正使用 cookies 来改善您的访问体验

派迪科技非常重视您的个人隐私,当您访问我们的网站www.hzpady.com时,请同意使用所有cookies 。

如果您想详细了解我们如何使用cookies请访问我们的 《隐私政策》