首页 热点正文

用usdt充值(www.caibao.it):表单设计:掌握表单设计方式(表单体验篇)

约稿员 热点 2021-01-20 48 0

allbet欧博集团

欢迎进入allbet欧博官网(www.ALLbetgame.us)。allbet欧博官网开放ALLBET欧博真人客户端、Allbet代理网页版、Allbet会员网页版、Allbet会员注册、Allbet代理开户、Allbet电脑客户端下载、Allbet手机版下载等业务。

原题目:表单设计:掌握表单设计方式(表单体验篇)

编辑导语:表单是我们对照常见的一个信息录入工具,糟糕的表单设计会带来令用户抓狂的交互体验。本文作者连系案例对表单的组成及注重事项举行了详细的说明,信赖对表单设计不熟悉的同砚看完后一定会有不少的收获~

说到表单实在在生活中可以接触到林林总总的表单,主要目的就是让用户填写来【网络用户信息】

如:

初看这些表单,你可能以为很简单,就是一些标签、基础的小组件,然则在现实营业中,想要将这些小组件组合拼装成合适的表单却需要推敲异常多的细节,经常会让设计师陷入无限的纠结中,好比:

以是针对这些问题,我从【框架】>【细节】的逻辑与人人一起探讨「若何设计一份体验好的表单」。

01 表单拆分

在UX Collective中有个作者名为“Taras Bakusevych” 举行了详细的论述,对表单的组成部门举行了详细的拆解与说明 ↓ ↓ ↓

(1)标签:标签文本主要是注释输入项的寄义,一样平常不宜太长,需要简明扼要,快速让用户明了;另有一部门是见告用户哪些是必填项。

(2)占位提醒:直接展示在输入项中,接纳弱提醒文本对所需信息形貌、示意,当用户输入信息时即消逝。

(3)校验:对输入项举行验证,并给出反馈提醒,如:用户未填写,花样错误、内容错误等

常见的校验类型

(4)基础组件:可交互输入的区域,是组成表单的核心内容,主要有:输入框、单(复)选框、上传、时间选择器、开关……

(5)提醒:形貌该输入项需要的输入类型,如:上传的文件类型

(6)按钮:用户完成输入后,点击按钮举行提交、进入下一步等,按钮一样平常是追随的最后一个输入项后面,若输入项超出一屏显示,则按钮悬浮固定在底部;按钮“确定”放左、右统一即可,没必要太过纠结。

02 表单类型

看了许多文章,对表单类型的划分主要是:基础表单、分步表单、高级表单(分组表单)[1]

(1)基础表单:常见于输入项较少的表单场景,如:登录、注册。

如:登录

(2)分步表单:常用于输入项较多,营业自己具有流程化特征(如:转账)

为了提高用户填写效率,削减用户心理肩负,将一个冗长或用户不熟悉的表单义务拆分成多个步骤,一步步指导用户完成。

分步表单可以缓解用户需要填写较多内容时刻的抵触情绪,而且通过拆分步骤,聚焦于每次填写的内容,提升用户在差别模块间的浏览效率。

泉源:Ant Design Pro

(3)高级表单(分组表单):主要用于需要一次性输入、提交 大批量数据的场景。高级表单与分步表单有点类似,都是为了减轻用户填写压力,将填写内容举行分块。差别的点在于,分步表单的流程化显著,后一步填写的内容都是基于前一步来填写、是前一步反馈。

如:站酷上传作品

然则以上说的基础表单、分步表单、高级表单都是基于营业需要而举行选择,然则现实在设计时,往往还需要思量的是:这些表单应该是以什么承载结构展示?

是整页展示、弹窗展示、侧边栏展示?表单内部结构方式,一定是平铺的一栏么,是否可以增添侧边目录?

这些都是设计师需要举行全盘思量的问题,以是在设计表单的时刻需要先确定这些框架,由外>内,层层深入,再对细节举行处置。以是接下来我会针对若何由外>内设计表单举行详细的陈述。

03 表单页设计步骤

在详细论述若何设计表单页前,先明确下我对于表单页的划分:

,

Allbet Gmaing代理

欢迎进入Allbet Gmaing代理(Allbet Game):www.aLLbetgame.us,欧博官网是欧博集团的官方网站。欧博官网开放Allbet注册、Allbe代理、Allbet电脑客户端、Allbet手机版下载等业务。

,

我将表单页大要划分成【页面框架】和【表单内容区】

这样划分是出于我对 AJAX之父Jesse James Garrett在2007年出书了一本名为《用户体验要素》的书,提出了从5个要素自下而上的建设用户体验,即:战略层、局限层、结构层、框架层、显示层,这种逐层的思索逻辑对于设计表单是十分必要的,由于在设计表单的时刻,经常需要思量这个表单页所需承载的营业诉求(战略上)基础上去做后面的优化体验。

以是在设计表单的时刻应:

  • 在确定页面框架后,就需要对表单需展示的内容举行明确的划分,如:表单的内容是否要展示流程进度?表单内容是否有差别层级的导航?确定了这些后,我们表单内容的大致结构框架就可以确定下来,我们才气进入下一步(内容区详细的陈列方式)的设计;
  • 表单内容区主要是对输入项的陈列方式,对齐方式,举行体验优化;
  • 最后对所有输入项举行统一整理,检查是否与用户预期一致?与其他输入项的关系是否清晰等。

整体而言可以分为以下四步:

1. 确定【页面框架】

这里得页面框架指的是承载着整个表单页的页面框架,即:整页式(新页面)、弹窗式、侧边栏式。由于其页面面积巨细不一样,以是使用情境有所差别。[2]

  • 整页式:最常用方式,适用于绝大部门的表单,可以支持构建庞大的表单。
  • 弹窗式:通过小面积的弹窗举行轻量化的编辑,利便快速举行增、删、改、查;输入项较少,一样平常不会有滚动条。
  • 侧边栏式:与弹窗式相似,通过小面积的侧边栏举行编辑;可承载比弹窗更庞大一些的表单内容,可以有滚动条。

以上这些就是常见的表单页面框架,我们在思量接纳何种样式时需要综合以下几个因素思量:

  • 内容若干 —— 内容较多不适合使用弹窗式
  • 与原页面关系强度 —— 需与原页面保留强关联建议使用弹窗式、侧边栏式
  • 表单内容区庞大水平 —— 一样平常高级表单、分组表单、分步骤表单、有表格聚合的表单、联动表单等都建议接纳整页式的框架来展现。
2. 确定【表单内容区结构】

如上图所示,一个正常的表单内容区主要有:题目区、二级导航区、主内容区

1)其中题目区是必须要有的,题目区可以让用户快速明了该表单是需要网络什么内容

2)二级导航可以凭据营业需要举行设置

3)主内容区则是表单填写的主区域,通常我们直接将这个区域称之为“表单内容区”,该区域结构样式可以分为三种:

  1. 通栏式,即:在页面中居中显示,从上到下直接平铺控件颗粒。
  2. 左右式,即:在表单域内容区左边放置导航栏、或在右侧放置辅助信息栏(如:流程节点展示)。
  3. 左中右式,即:分别在表单域内容区左侧放置导航栏,右侧放置辅助信息栏。

以上三种样式就是常见的表单内容区的结构,接纳哪种结构,可以综合以下几个因素思量:

  • 内容若干——若是内容许多导致页面很长,则可以思量将内容分类,作为左侧导航栏,接纳左右式结构。
  • 内容类型——导航作用内容必须放置左侧(有些分步骤的表单也会将步骤条放置左侧),而辅助信息的内容建议放在右侧(由于人眼浏览习惯都是从 左 > 右,以是信息主要度建议根据该视线路径放置)
3. 确定【表单内容排列方式】

在该步骤中,主要确定表单内容区控件颗粒的排列方式:单列结构 or 多列结构

  • 在输入项不多的情形下,建议接纳单列结构,由于单列结构,用户填写的路径就是从上>下的一条直线,十分相符用户的视觉动线,能够提高用户浏览与填写的效率。
  • 多列结构的表单会导致用户的视觉路径变长,用户需以 Z 字形的视觉动线扫描表单,会提高浏览与填写的效率,而且多列表单容易造成用户填写时的杂乱,易填错,体验差。
  • 然则有时部门营业诉求和某些特征的场景要求,会需要在有限的空间上放入更多的控件颗粒来网络用户的信息,这时就不得不使用多列结构的样式,由于多列能够省纵向空间。

so 凭据单列结构、多列结构的优劣势,连系现实营业需要来选择:

【单列结构】

  • 优:视觉路径清晰,填写效率高,体验好;
  • 劣:占用纵向空间。

【多列结构】

  • 优:省空间,能够放置更多的控件颗粒;
  • 劣:视觉路径模糊,填写成本高,填写易失足。

在这个环节中,除了需要思量单列式结构照样多列式结构,另有一个也是需要全盘思量的——【标签的对齐方式】

在设计时,到底是接纳左对齐、右对齐照样顶部对齐呢?

Matteo Penzo《Label Placement in Forms》文章中,有对标签差别的方式方式优劣势举行了说明。[3][4]

后续在这块纠结的时刻,则可以对照上面表格举行评估了,其中详细原理你也可以点击下方链接举行查看:UX Collectiveuxdesign.cc

4. 确定【表单内容颗粒】

最后一步只需要根据网络信息类型的需要,选择准确的控件颗粒,如:若是是要网络用户购置数目,则可以直接使用“数字步进器”、“输入框”。

在选用控件颗粒时,需要注重的是:

  • 选用的控件颗粒应是用户可以最快输入的,能点击完成就别输入完成
  • 表单中同个信息类型的控件颗粒应统一
  • 指意不明确的表单应搭配占位提醒,占位提醒应是完整的陈述句

  • 主要信息的输入项应该有错误提醒校验,这种一样平常用于错误率较高的情形,制止用户频频填写。如:在登录注册时,我们填写手机号若是不满11位数,就会报错。
  • 特定的输入型颗粒控件,需要凭据输入信息的特殊性给与花样的提醒与限制,如:邮箱 @http://qq.com,这样有助于辅助用户提前感知,削减表单填写错误。

  • 表单颗粒的宽度应该 表示填写内容的长度,与输入预期成正比,在Ant Design 4.0 系列分享的文章[5]剖析结论是:犬牙交错的排版比整齐划一更恬静,由于在视觉上我们更容易将下方有图的空间和内容视为一个协调的整体,但左图过分的对齐导致表示隐性的截断,我们会感受表单列右侧空间缺了一大块。

04 写在最后

本篇文章从表单所在的页面形式 > 表单框架 > 表单内容区 逐层对表单举行剥离拆解,辅助人人加倍周全的认知表单,并总结了一样平常事情中设计师经常会遇到的表单类型和结构,设计师可连系文章中给出的建议参考并天真应用。

希望能够通过这边文章给到人人更多的启发。文章中若是有不严谨、错误的地方希望人人给与指正。最后,作为一名刚刚将自己事情内容举行沉淀并分享给人人的设计师,希望人人可以多多点赞谈论激励下(狗头保命)

参考:

  1. 表单类型: https://preview.pro.ant.design/form/advanced-form
  2. 页面框架: https://www.uisdc.com/structured-approach-2
  3. 标签对齐选择依据: https://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php
  4. 标签对齐优劣势: https://www.uisdc.com/middle-form#
  5. 整齐划一?不如犬牙交错。Ant Design 4.0 系列分享: https://zhuanlan.zhihu.com/p/110096160

本文由 @小发鸽 原创公布于人人都是产物司理,未经作者允许,克制转载。

版权声明

本文仅代表作者观点,
不代表本站浙江生活网的立场。
本文系作者授权发表,未经许可,不得转载。

评论

站点信息

  • 文章总数:3258
  • 页面总数:0
  • 分类总数:16
  • 标签总数:768
  • 评论总数:1278
  • 浏览总数:833200

浙江生活网

https://www.fxlnx.cn/

| 闽ICP备11025223号

Powered By 浙江生活网

关注我们可获取更多热点资讯