如何设计响应式和设备无关的表单

无论是注册流程还是多视图步进器,表单都是数字产品设计中最重要的组成部分之一 - 因此您需要对它们进行设计,以便它们在移动设备上有效工作。

以下是如何为移动设备设计表单,包括快速查看如何使用Flexbox

01.垂直滚动的设计

A single column layout works better

单列布局效果更好

无论设备大小如何,完成表单的最简单方法是线性方式。多列会破坏用户的动量(用户可能会不一致地解释字段,这在可用性方面是负面因素)并且可能导致用户不得不求助于水平滚动。

在布局表单时,您应该在一列中设计条目:如果表单在单个列中,则完成的路径是页面的直线。

02.将标签放在字段上方

Place labels above form fields

将标签放在表单字段上方

标签告诉用户相应的输入字段的含义。选择放置标签的位置时,您有两种选择:左对齐或顶对齐。

如果在桌面或平板电脑上完成表单,则左对齐标签可以很好地工作。但是,对于屏幕空间有限的移动设备,它们是一个糟糕的解决方案。由于左对齐标签需要位于场地之前,因此窄屏幕为场地本身留下的空间非常小 - 特别是如果设备处于纵向模式。这会产生两个严重的可用性问题:

  • 表单字段的宽度不足以显示用户的整个输入,使他们更有可能错误输入他们的回复并导致提交更多错误的表单
  • 当用户被通知他们输入了错误信息时,他们可能很难发现并修复问题,因为他们将无法看到整个无效输入

当用户从移动设备浏览时,将标签放置在表单字段上方将确保用户可以看到输入其详细信息的最大宽度,因为您不需要使用任何标签。

在输入字段上方写下标签也可以使您更容易编写清晰且有意义的字段标签,因为您不会限制一两个单词。

03.使用水龙头目标

点击目标应该易于使用,无论它们显示在什么尺寸的设备上。对于灵活性较低的用户来说,较大的目标(输入字段和按钮)更容易,无论是永久性条件还是由环境引起的临时条件。

目前,最大的目标尺寸是触控设备,因此您需要先设计触控设计。这可确保用户无需放大即可输入文本或选择选项。可点击区域应遵循胖指规则而不是侵占周围区域:平均人手指垫为10 x 14mm,平均指尖为8-10mm,使10 x 10mm成为良好的最小触摸目标尺寸。

但是,不仅应该适当调整水龙头目标,还应确保多个水龙头目标之间有足够的空间。事实上,如果您在移动搜索引擎优化工具上获得“点击目标大小”错误,通常是因为您的点按目标太靠近,而不是实际的点按目标太小。

在移动设备上阅读内容可能很困难,因此将输入100%并确保文本设置为至少16px(1em)将会产生很大的不同。这样,读取所需信息将不需要捏缩放或额外滚动。

04.使用HTML5表单字段

移动设备为不同的输入类型提供自定义软件键盘,HTML5表单字段是改善表单用户体验的最简单方法。这些输入类型向浏览器提供有关为屏幕键盘显示的键盘布局类型的提示。

包括输入类型电子邮件联系电话网址日期,并且移动设备上的键盘输入将更新,以便用户更容易填写表单。它不需要您为样式表单输入添加额外的类,您需要做的就是使用有效的HTML5输入类型:

05.使用Flexbox

让我们面对现实 - 在HTML中创建响应式布局很困难。我们大多数人在某个方面都在努力解决这个问题。尽管使用专门技术使布局始终按预期运行是可能的,但这个过程从未如此简单。

处理结构化布局的技术多年来一直存在和变化:开发人员使用HTML框架,HTML表格,基于浮动的布局,以及最近由CSS框架推广的各种网格系统,如引导

但随着HTML Flexible Box模型的出现(或Flexbox的),HTML终于获得了一个丰富的盒子格式引擎,可以解决复杂的布局,包括HTML表单。

Flexbox为快速构建精美表单提供了极大的灵活性。关于Flexbox的关键是它是一个容器操作工具:它旨在提供一种更有效的方法来布置,对齐和分配容器中的项目之间的空间,即使它们的大小未知和/或动态(因此单词'flex')。

有趣的是,Flexbox为我们提供了极大的灵活性,可以在不使用任何媒体查询的情况下快速构建表单。此外,所有当前浏览器都支持它。

我们的网页设计师的Flexbox指南文章告诉你更多,但是现在让我们做一些练习并学习如何利用Flexbox创建一个响应式表单。首先,让我们为表单定义HTML结构:

请注意,我们表单中的每个列表项都有一个类柔性。此类在表单中标识Flex容器。 Flexbox的一大好处是它能够使用任何HTML元素来定义其容器和元素。

您可以将Flexbox样式应用于任何HTML元素,这意味着您可以轻松地彼此独立地重新设置和重排元素。请记住,Flexbox只是一种样式机制,这意味着您可以随意添加和删除它。

让我们在CSS中识别flex容器。此外,我们希望将横向轴上的柔性项目垂直居中。指定它很容易,我们只需要设置一个简单的CSS规则:

.flex li {display:flex; flex-wrap:wrap; align-items:center; }

下一步是指定弹性项的宽度。主要要求:

  • 标签应至少为100px,最多为200px
  • 标签后面的表单元素应至少为200px

这给了我们什么?当表单的宽度总计至少为300px时,每个标签及其关联的表单元素将显示在单个水平行上(请记住,我们在此处使用右对齐标签)。

.flex> li> label {flex:1 0 100px;最大宽度:200px; } .flex> li> label + * {flex:1 0 200px; }

最后,对于提交按钮,它也是一个flex项,我们定义了一些基本样式:

.flex li button {margin:auto;填充:22px 46px; }

如您所见,凭借最小的标记和Flexbox的强大功能,我们构建了一个响应式表单。

随着越来越多的用户携带移动设备,在任何设备上提供用户友好的体验至关重要。关键是要适应用户的需求和设备的功能。

本文最初发布于第287期网络杂志,专业网页设计师和开发人员杂志 - 提供最新的网络趋势,技术和技术。在这里订阅网。

相关文章:



翻译字数超限