表单设计及Axure原型

Posted 2023-04-17

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了表单设计及Axure原型相关的知识，希望对你有一定的参考价值。

参考技术A

某大型电子商务网站的注册登录界面如下：

当用户把想要购买的商品放入购物车，点击结算按钮时，登录表单会出现。用户实际想进行的操作是结算而不是登录。这样的设计会给用户带来困扰。

网站设计团队认为，这样设计可以加快老客户购买结算的速度，新客户不介意注册。而实际使用情况是新客户很介意注册，不希望网站收集信息推送广告，对注册页面天然排斥。而且用户有时并不是很清楚自己是否注册过，多次盲目尝试邮箱和密码组合的失败会让用户沮丧甚至放弃购物。

表单设计的初衷是方便用户购物，结果却阻碍了商品销售。通过以下的改动可以解决这个问题。将注册按钮改为继续按钮，同时加上一段简短说明。这样不强制用户注册，同时也能增加购买行为。

目前很多电商网站采用的是第一种设计，都需要用户注册成为会员才能购买商品，可能在结算、加入购物车或者浏览商品时要求用户进行注册登录服务。但美团和携程采用的是第二种设计，在购买商品和使用服务时并不强制用户登录注册，而是改为采用手机校验或动态口令。

分组前的表单，所有的内容杂糅在一起，需要花费很多时间寻找并填写信息。分组后的表单，对表单问题重新放置，使得层次分明。用户清楚地明白在各个区域填写哪些对应的信息。

较长和复杂的表单需要将内容分布到多个页面，这种表单通常需要设置顺序向导流程提示用户一步步完成表单填写步骤。

这张表单缺乏向导设置，每次填写完一个页面的内容，需要点击下一步按钮进入新的页面，用户对于后续的表单内容一无所知，对于需要花费多少时间填写剩余部分的内容也没有把握，这样的设计容易让用户失去继续填写的耐心。

改进的向导型表单让用户和能够很容易地知道总共的填写步骤。

向导型表单能够将注册登录的每一个步骤都展示给用户，由用户决定是继续填写还是退出，提升用户体验。

标签在输入框的上方。

优点
减少表单填写时间，将用户注意力集中于完成表单。
标签和输入框位置非常靠近，填写表单很快很容易，用户眼球只需要向下移动，为用户填写完表单提供了清晰的完成路径。
提供了大量横向空间，对标签设置大小字号不会影响页面布局，对长标签很有用。

缺点
大量占用垂直空间，垂直空间十分有限的情况下慎重使用。

注意
根据实验测试，用户的眼球从标签移动到输入框的时间在顶对齐方式下是50ms，左对齐是500ms，右对齐是240ms。要想让用户快速完成表单，最好采用顶对齐方式。
标签和输入框之间的间距最好使用输入框高度50%~75%的高度作为与标签的间距。
国外网站大多采用顶对齐方式，国内网站大多采用右对齐方式。

标签在右侧呈现为对齐方式。

优点
输入框与标签相邻很近，用户同样可以快速填写表单。
减少表单占用垂直屏幕空间，适用垂直空间有限的情况。

缺点
在左侧形成难看的锯齿状边缘，降低快速浏览完表单的效率。
灵活性不够，标签文字过长或者需要两行文字，都会破坏页面布局。

标签在左侧呈现为对齐方式。

优点
有利于用户考虑表单问题后再回答问题，用户浏览表单问题更容易。不会被右侧输入框打断。

缺点
增加标签到输入框的距离，增加用户填写表单的时间。

把标签和输入框组合为同一个元素。

优点
适用于屏幕空间宝贵的情况，能节省一半的屏幕空间。

缺点
用户填写内容时标签会消失，对于不明显的问题，需要参考标签的情况下，用户容易迷茫。

标签采用分散对齐的方式。

注意
慎用，会破坏明确的完成路径和布局一致性。同时，如果每个标签之间的长度差距过大，会在字之间形成很多空隙。整体界面效果会很难看。没有明确理由，不建议使用。

如果要减少填写时间，标签长度需要灵活可变，用顶对齐。
如果要减少填写时间，但垂直屏幕空间有限，用右对齐。
如果要求用户浏览表单标签，知道必填问题或者回到多个问题中的某个问题，用左对齐。
如果表单很短，屏幕空间极度有限，采用输入框内对齐。
除非有合适理由，一般不采用混合对齐方式。

输入框的类型包括文本框、单选按钮、复选框和下拉菜单。

设计输入框时注意输入框的长度，输入框的表现形式需要提供给用户填写表单的有用线索。例如名称、地址、证件号的输入框一般要很长。验证码的输入框可以短一些，因为验证码一般是四位数字。如果输入框的长度模糊不定，会给用户造成对填写结果正确性的困扰。

星号在实际情况中可以代表必填项也可以代表选填项。如果表单上多数问题都是必填项，而少数问题是可选项，就可以用星号来标注可选项，再配上说明。如果表单上多数问题都是可选项，而少数问题是必填项，就用星号来标注必填项。如果差不多，标注必填项即可。

设计表单时。通过对文字设置不同字号，强调的文字设置大一些，辅助的文字设置小一些。醒目的文字设置颜色。通过差异化设置，层次就会分明，让用户很容易地抓住重点。

设置问题尽量少，让用户尽快完成表单。
设置表单问题时，如果表单问题并非绝对必要，或者可以在其他必要的时机再提出，则视为无用输入，可以去除。

例如图中的性别和学历在注册时就是无用的输入信息，需要去掉。

为方便用户输入，加快表单填写过程，在有些问题上可以为用户提供默认输入，让用户减少思考。但注意默认输入要符合用户利益，如果默认输入时用户并不喜欢的选项，会使用户对服务产生怀疑，可能导致潜在用户流失。

例如上图的预订机票表单，订票日期采用默认输入为加减0天，因为大部分人都是按预订日期进行筛选；默认订票数为大人票1张，儿童票0张；默认支付币种为美元，根据公司网站所在地的通用货币设计。

根据用户的回答出现一系列后续回答的问题。如：手机注册和邮箱注册。

在表单中设置直接反馈有助于确保用户的回答是有效的，这种实时沟通的方式称为即时校验。

即时校验提供多种反馈，确认回答是否合适。建议有效回答，通过实时更新设计，帮助人们把提交数据控制在必要的限制范围内。

即时校验一般发生在人们在输入框中开始输入或者停止输入的时候。

如果用户不能正确回答问题，确认他们的回答就非常重要。例如：输入用户名时存在用户占用问题。如果是重复的用户名，网站则会认为该答案是无效的。但用户又不知道哪些用户名可用，表单的即时校验在这个问题上需要提供确认帮助。密码则可能在长度、组成、强度上有更多的限制，即时校验能够确认用户所提供的密码是否合适。也会表明密码的安全程度，现在通常采用的做法是设置密码尺。

是否需要对表单的所有选项都设置即时校验是一个需要权衡的问题。尽可能多地为问题设置即时校验可以确保一次性快速填写完表单。但同时验证所有输入框会分散用户的注意力，也可能会引起用户的反感。如果我们需要为许多问题提供即时校验，要把握好时机。例如，在明确填写结束后（输入框失去焦点），再进行即时校验比在填写过程中进行即时校验要好。

建议提供有效答案的示例或提示。建议能保证用户输入有效，但并不考虑用户体验。例如我们会建议用户按照设定的电话号码格式（区号-电话号码）来输入，而用户喜欢简单地输入电话号码，我们需要考虑在用户输入完不同格式的电话号码后转化为我们想要的格式。

很多表单有字数限制。我们需要设计即时校验提示用户字数限制上限以及当前的输入字数，让用户对后续的输入有预期。

在标签和输入框旁边增加帮助文字，告诉用户应该如何回答问题。

标签列出用户需要回答的问题，输入框让用户填写答案。我们还需要通过动作设计来对表单进行操作。典型的Web表单可能包括提交、保存、继续等多种操作按钮来完成表单。这些操作按钮根据重要程度及使用的频率被分为 主动作 和 次动作 。

主动作代表多数人填写表单的主要目标或首选处理方式。对于表单来说，保存、提交常常代表主动作，取消、返回、删除一般是次动作。

主动作和次动作在设计时通常需要被赋予不同的视觉重要性。 费茨法则 给出了点击目标所花费的时间与鼠标到达目标的距离和目标尺寸之间的函数关系。

根据费茨法则，我们需要设计次动作的按钮减少用户的注意力。另外，根据实验测试，按钮放置的位置也对用户的操作正确性有较大的影响。例如主动作和输入框左对齐可以减少填完表单的时间。左对齐使所有元素依靠左侧形成自上而下的视觉移动路径，用户填写完表单后视线会规则性的向下移动找到提交按钮。主动作和次动作过于分散容易造成用户点击出错。

一些常用的设计包括：主动作采用按钮，次动作采用文字链接，使主动作按钮更为突出也易于点击；主动作和次动作都采用按钮，但主动作按钮尺寸更大，并添加醒目颜色，次动作按钮一般为白色或灰色，利用视觉差异来强调首选操作，避免用户犯错。

点击提交按钮后一般需要等待一段时间以便服务器处理数据并返回结果。在等待的时间里为了避免用户重复点击提交按钮，可以修改按钮的文字和状态来响应用户的请求。例如，我们在提交按钮上设计当点击提交后按钮变为灰色不可用状态并且显示“正在提交…”响应用户的提交请求，这样重复点击就不会起作用了。也有很多网站采用动画方式响应请求，显示一个进度条或者一个等待加载的图片来提示目前的提交状态。

有的表单要求提交之前需要同意相关的服务条款。目前通常有两种设计，一种是将服务条款选项与提交按钮分离，单独设置服务条款。另一种是去掉复选框并将按钮改为“同意并注册”。后者的主动作能同时包含确认服务条款和完成表单，避免了复杂化的操作，同时方便用户填写完表单。

实际案例是京东商城的个人用户注册表单。上图是改版前京东商城的注册表单，问题的选取采用用户名、密码、手机/邮箱这三部分，为了获得有效手机号，还需要对手机号进行验证。验证码能对网站安全进行保护，防止机械注册。

对齐方式采用右对齐，方便用户填写，但不利于快速浏览表单。输入框设计方面，用户名、密码、手机的输入框较长，并配有提示图片，提醒用户输入哪些信息。验证码的输入框很短，提示用户只需输入几个数字即可。

然而，在表单设计上也存在一些问题。例如，每个填写项前面都有红星，说明都是必填项，这样增加了很多冗余信息量，这些红星完全可以去掉。下图是改版后的京东商城注册表单，将右对齐方式改成了混合对齐方式，同时去掉了冒号和红星，使得整个表单更加紧凑。

京东商城采用的注册表单交互效果包括：

涉及的Axure知识： 组件使用、动态面板、变量设置和条件控制、交互效果设置。