整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML文本格式化基础教程1

HTML中可以使用文本标记、段落标记、列表标记和排版标记对文本进行各种各样的格式化工作。

下面让我们来进行上述内容的学习:

文本格式化

HTML为单独的词或者句子定义了两种样式:物理样式(Physical Style)和逻辑样式(Logical Styles)。

物理样式标记也称为字体样式元素或实体字符控制标记,因为它们为浏览器提供了特定的字体指令。现在各类网页开发工具中仍然有这类标记。

物理样式标记(Physical Style):

标记说明
b软件工程专业!/b黑体
i软件工程专业!/i斜体
u软件工程专业!/u下划线
del软件工程专业!/del删除线
big软件工程专业!/big变大字号
small软件工程专业!/samll变小字号
Xsup2/sup上标--X2
Ysub1/sub下标--Y1

逻辑样式标记(Logical style):

逻辑样式标记也称为基于内容的标记。

标记主要用途
abbretc./abbr表示缩写
address江苏省南京市/address表示地址(address)
cite软件工程!/cite书名、影视名等的引用,斜体
code软件工程!/code计算机代码,显示固定宽度字体
dfn软件工程!/dfn定义一个词,通常为斜体
samp软件工程!/samp显示固定宽度字体
kbd软件工程!/kbd键盘输入,显示无格式的固定宽度字体
em软件工程!/em强调,通常为斜体
strong软件工程!/strong强调,显示黑体字符(重要性)
var变量/var变量,显示斜体字符

文本格式化其它标记使用

标题字(heading):标题是通过 h1~h6 等标记进行定义的。h1 定义最大的标题,h6 定义最小的标题。浏览器会自动地在标题的前后添加空行。

添加空格 (nbsp; -non break space):

基本语法: nbsp;

添加特殊符号:编写网页代码时有时需要一些特殊符号,如©、®等,可以直接添加相应的符号代码即可。

段落格式化

p标记属性语法:浏览器会自动地在段落的前后添加空行

预格式化文本标记

实现预先排版好的文本原封不动地显示出来

居中标志

center 实现网页中段落居中显示

段落缩进

可以实现文字缩排,一对缩排标记可以缩进5个西方字符位置

列表标记

列表将网页中相关的资料以条目的形式而形成的一种特殊的表,列表主要分为以下几类;

  1. 无序列表:ul

无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。

无序列表始于 ul 标签。每个列表项始于 li。

2. 有序列表:ol

同样,有序列表也是一列项目,列表项目使用数字进行标记。

有序列表始于 ol 标签。每个列表项始于 li 标签。

3. 定义列表:dl

自定义列表不仅仅是一列项目,而是项目及其注释的组合。

自定义列表以 dl 标签开始。每个自定义列表项以 dt 开始。每个自定义列表项的定义以 dd 开始。

本标签: 32

  1. <html></html>,创建一个HTML文档;
  2. <head></head>,设置文档标题和其它在网页中不显示的信息;
  3. <title></title>,设置文档的标题;
  4. <h1></h1>,最大的标题;
  5. <pre></pre>,预先格式化文本;
  6. <u></u>,下划线
  7. <b></b>,黑体字;
  8. <i></i>,斜体字;
  9. <tt></tt>,打字机风格的字体;
  10. <cite></cite>,引用,通常是斜体;
  11. <em></em>,强调文本(通常是斜体加黑体);
  12. <strong></strong>,加重文本(通常是斜体加黑体);
  13. <font,size="",color=""></font>,设置字体大小从1到7,颜色使用名字或RGB的十六进制值;
  14. <BASEFONT></BASEFONT>,基准字体标记;
  15. <big></big>,字体加大;
  16. <SMALL></SMALL>,字体缩小;
  17. <STRIKE></STRIKE>,加删除线;
  18. <CODE></CODE>,程式码;
  19. <KBD></KBD>,键盘字;
  20. <SAMP></SAMP>,范例;
  21. <VAR></VAR>,变量;
  22. <BLOCKQUOTE></BLOCKQUOTE>,向右缩排;
  23. <DFN></DFN>,述语定义;
  24. <ADDRESS></ADDRESS>,地址标记;
  25. <sup></SUP>,上标字;
  26. <SUB></SUB>,下标字;
  27. <xmp>...</xmp>固定宽度字体(在文件中空白、换行、定位功能有效)
  28. <plaintext>...</plaintext>固定宽度字体(不执行标记符号);
  29. <listing>...</listing>,固定宽度小字体;
  30. <font,color=00ff00>...</font>字体颜色;
  31. <font,size=1>...</font>最小字体;
  32. <font,style,='font-size:100,px'>...</font>无限增大.

格式标签: 16

  1. <p></p>,创建一个段落;
  2. <p,align="">,将段落按左、中、右对齐;
  3. <br>,换行,插入一个回车换行符;
  4. <blockquote></blockquote>,从两边缩进文本;
  5. <dl></dl>,列表标签,定义列表;
  6. <dt>,定义列表标题;
  7. <dd>,定义列表内容;

例:

<dl>

<dt>标题1</dt>

<dd>内容11</dd>

<dd>内容12</dd>

<dt>标题2</dt>

<dd>内容21</dd>

<dd>内容22</dd>

</dl>

  1. <ol></ol>,列表标签,定义一个标有数字的列表;
  2. <ul></ul>,列表标签,定义一个标有圆点的列表;
  3. <li>,放在每个列表项之前; 放在<ol></ol>之间则每个列表项加上一个数字,放在<ul></ul>之间则每个列表项加上一个圆点;
  4. <div,align=""></div>,分区标签,用来排版大块HTML段落,也用于格式化表;
  5. <MENU>,选项清单;
  6. <DIR>,目录清单;
  7. <nobr></nobr>,强行不换行;
  8. <hr,size='9',width='80%',color='ff0000'>水平线(设定宽度);
  9. <center></center>,水平居中.

链接标签: 7

  1. <a,href="URL"></a>,创建超文本链接;
  2. <a,href="mailtEMAIL">
  3. </a>,创建自动发送电子邮件的链接;
  4. <a,name="name"></a>,创建位于文档内部的书签;
  5. <a,href="#name"></a>,创建指向位于文档内部书签的链接;
  6. <BASE>,文档中不能被该站点辨识的其它所有链接源的URL;
  7. <LINK>,定义一个链接和源之间的相互关系;

链接标签注解:

target="...",决定链接源在什么地方显示(用户自定义的名字,_blank,_parent,_self,_top);

rel="...",发送链接的类型;

rev="...",保存链接的类型;

accesskey="...",指定该元素的热键;

shape="...",允许我们使用已定义的形状定义客户端的图形镜像(default,rect,circle,poly);

coord="...",使用像素或者长度百分比来定义形状的尺寸;

tabindex="...",使用定义过的tabindex元素设置在各个元素之间的焦点获取顺序(使用tab键使元素获得焦点).

表格标签: 21

  1. <table></table>,创建一个表格;
  2. <tr></tr>,表格中的每一行;
  3. <td></td>,表格中一行中的每一个格子;
  4. <th></th>,设置表格头:通常是黑体居中文字;
  5. <table,cellspacing="">,设置表格格子之间空间的大小;
  6. <table,border="">,设置边框的宽度;
  7. <table,cellpadding="">,设置表格格子边框与其内部内容之间空间的大小;
  8. <table,width="">,设置表格的宽度.用绝对像素值或总宽度的百分比;
  9. <table,align="">,设置表格格子的水平对齐方式(left,center,right,justify);
  10. <tr,align="">,设置表格格子的水平对齐方式(left,center,right,justify);
  11. <tr,valign="">,设置表格格子的垂直对齐方式(baseline,bottom,middle,top);
  12. <td,colspan="">,设置一个表格格子跨占的列数(缺省值为1);
  13. <td,rowspan="">,设置一个表格格子跨占的行数(缺省值为1);
  14. <td,nowrap>,禁止表格格子内的内容自动断行;
  15. <CAPTION></CAPTION>,表格的标题;
  16. <COLGROUP></COLGROUP>,定义多个列为一组列;
  17. <TABLE></TABLE>,创建一个表格;
  18. <THEAD></THEAD>,定义表格的页眉;
  19. <COL>,定义一个列组中的列,以便对它们能够同时设置有关属性;
  20. <TBODY></TBODY>,定义一个表格的实体;
  21. <TFOOT></TFOOT>,定义一个表格的页脚;

表单标签: 18

  1. <form></form>,创建表单;

action="...",接收数据的服务器的URL;

method="...",HTTP的方法(get,,post),其中get是被反对使用的;

enctype="...",指定MIME(Internet媒体类型);

onsubmit="...",当提交表单时发生的内部事件;

noreset="...",在重新设置表单时发生的内部事件;

target="...",决定把内容显示在什么地方(_blank,_parent,_self,_top)

  1. <select,multiple,name="name",size=""></select>,创建滚动菜单,size设置在需要滚动前可以看到的表单项数目;
  2. <option>,设置每个表单项的内容;
  3. <select,name="name"></select>,创建下拉菜单;
  4. <textarea,name="name",cols=40,rows=8></textarea>,创建一个文本框区域,列的数目设置宽度,行的数目设置高度;
  5. <input,type="checkbox",name="name">,创建一个复选框,文字在标签后面;
  6. <input,type="radio",name="name",value="">,创建一个单选框,文字在标志后面;
  7. <input,type=text,name="foo",size=20>,创建一个单行文本输入区域,size设置以字符串的宽度;
  8. <input,type="submit",value="name">,创建提交(submit)按钮;
  9. <input,type="image",border=0,name="name",src="name.gif">,创建一个使用图象的提交(submit)按钮;
  10. <input,type="reset">,创建重置(reset)按钮;
  11. <BUTTON></BUTTON>,创建一个按钮;

disabled="...",把按钮的状态设置为不能;

name="...",按钮的控制名,value="...",按钮的值;

type="...",按钮的类型(button,,submit,,reset);

  1. <FIELDSET></FIELDSET>,把相互关联的控件组合成一组;
  2. <ISINDEX>,提示用户输入;
  3. <LABEL></LABEL>,为一个控件提供标签;
  4. <LEGEND></LEGEND>,为FIELDSET元素指定一标题;
  5. <SELECT></SELECT>,为用户做选择创建各个选项;
  6. <TEXTAREA></TEXTAREA>,创建一个允许用户多行输入的区域.

表单标签注解:

type="...",用于输入控件的类型(text,password,checkbox,radio,submit,reset,file,hidden,image,button);

name="...",控件的控制名(要求是除了submit和reset之外的任何名字);

value="...",控件的初始值;

checked="...",把一个单选钮设置为选中的状态;

disabled="...",把控件的状态设置为不能使用;

readonly="...",只对输入密码的文本框使用;

size="...",表示以像素为单位的除了文本框和密码框控件之外的其它控件的宽度,它是用来指定字符的数目;

src="...",一个图像控件的URL;

maxlength="...",指定可以输入的最多的字符数目;

alt="...",另外一种文本描述;

usemap="...",到客户端图形镜像的URL;

align="...",被反对.控制对齐方式(left,,center,,right,,justify);

tabindex="...",通过定义的tabindex值确定在不同元素之间获得焦点的顺序;

onfocus="...",当元素获得焦点时发生的事件;

onblur="...",当元素失去焦点时发生的事件;

onselect="...",当元素被选中时发生的事件;

onchang="...",当元素状态被改变时发生的事件;

accept="...",允许上载的文件类型.

帧标签(框架标签): 27

  1. <frameset></frameset>,放在一个帧文档的<body>标签之前,也可以嵌在其他帧文档中;
  2. <frameset,rows="value,value">,定义一个帧内的行数,可用像素值或高度百分比;
  3. <frameset,cols="value,value">,定义一个帧内的列数,可用像素值或宽度百分比;
  4. <frame>,定义一个帧内的单一窗或窗区域;
  5. <noframes></noframes>,定义在不支持帧的浏览器中显示什么提示;
  6. <frame,src="URL">,规定帧内显示的HTML文档;
  7. <frame,name="name">,命名帧或区域以便别的帧可以指向它;
  8. <frame,marginwidth="">,定义帧左右边缘的空白大小,必须大于等于1;
  9. <frame,marginheight="">,定义帧上下边缘的空白大小,必须大于等于1;
  10. <frame,scrolling="">,设置帧是否有滚动栏,其值可以是"yes","no",或"auto";
  11. <frame,noresize>,禁止用户调整一个帧的大小;
  12. <IFRAME></IFRAME>,创建一个内联的帧;

scr="...",定义在帧中显示的内容的来源;

frameborder="...",定义帧之间的边界(0或1);

align="...",被反对,控制对齐方式(left,,center,,right,,justify);

height="...",帧的高度,width="..."帧的宽度;

  1. <marquee>...</marquee>,普通卷动;
  2. <marquee,behavior=slide>...</marquee>,滑动;
  3. <marquee,behavior=scroll>...</marquee>,预设卷动;
  4. <marquee,behavior=alternate>...</marquee>,来回卷动;
  5. <marquee,direction=down>...</marquee>,向下卷动;
  6. <marquee,direction=up>...</marquee>,向上卷动;
  7. <marquee,direction=right></marquee>,向右卷动;
  8. <marquee,direction='left'></marquee>,向左卷动;
  9. <marquee,loop=2>...</marquee>,卷动次数;
  10. <marquee,width=180>...</marquee>,设定宽度;
  11. <marquee,height=30>...</marquee>,设定高度;
  12. <marquee,bgcolor=FF0000>...</marquee>,设定背景颜色;
  13. <marquee,scrollamount=30>...</marquee>,设定卷动距离;
  14. <marquee,scrolldelay=300>...</marquee>,设定卷动时间;
  15. <img,src="">,插入图片,参数有:width="宽",alt="说明文字",height="高",boder="边框".

文档整体属性标签: 10

  1. <body,bgcolor="">,设置背景颜色.使用名字或RGB的十六进制值;
  2. <body,background="">,设置背景图片;
  3. <body,bgsound="">,设置背景音乐;
  4. <body,bgproperties="fixed">,固定背景图片(IE适用);
  5. <body,text="">,设置文本颜色.使用名字或RGB的十六进制值;
  6. <body,link="">,设置链接颜色.使用名,字或RGB的十六进制值;
  7. <body,vlink="">,设置已使用的链接的颜色.使用名字或RGB的十六进制值;
  8. <body,alink="">,设置正在被击中的链接的颜色.使用名字或RGB的十六进制值;
  9. <body,topmargin="">,设置页面的上边距;
  10. <body,leftmargin="">,设置页面的左边距.

户在填写表格时可能会因为填写流程过于复杂放弃填写表格,所以,作为app表单设计师,就应当把尽可能简化填写表格的过程作为设计的目标。本文中,笔者将与大家分享一些可以帮助大家设计有效表格的技巧。

表格是所有移动互动的关键,它站在人和他们正在寻找的东西之间的桥梁。我们每天都使用表单来进行必要的在线活动。回想上一次你买了一张机票,预定了一个酒店房间或者网上购物,最可能是这些互动包含了一个填表的步骤。

表格只是达到目的一种手段。最终的目的应该是要让用户能够快速、无混淆地完成这些任务。

在本文中,您将学习帮助您设计有效表单的实用技术。

一、什么是有效的形式

每个表单的主要目标都是填写完成。

有两个因素对完成率有重大影响:

1. 复杂性感知

当用户看到一个新表单时,首先要做的就是估计完成它所需的时间,用户可通过扫描表单来做到这一点。

感知在评估过程中起着至关重要的作用。表单看起来越复杂,用户就越有可能放弃这个过程。

2. 交互成本

交互成本是用户为了达到他们的目标,而与界面交互的努力的总和——包括认知的和物理的。

交互成本与表单可用性有着直接的关系——用户完成表单的努力越多,表单的可用性就越低。

高的交互成本可能是由于难以输入的数据、无法理解某些问题的含义,或对错误消息的混淆造成的。

二、表单的构成要素

典型的表格由以下五个要素组成:

  1. 输入字段:这些字段包括:文本字段、密码字段、复选框、单选按钮、滑块和任何其他为用户输入而设计的字段。
  2. 字段标签:这些标签告诉用户:相应的输入字段意味着什么。
  3. 结构:包括字段的顺序、窗体在页面上的外观,以及不同字段之间的逻辑连接。
  4. 操作按钮:表单将至少有一个操作调用(触发数据提交的按钮)。
  5. 反馈:反馈是用户操作的结果反应。反馈可以是正面的(例如:表示表单提交成功),也可以是否定的(比如:“您提供的数字不正确”)。

本文涵盖了与结构、输入字段、标签、操作按钮和验证相关的许多方面。

本文中提到的大多数要点,都具有可视化的要做的示例,和不要做的示例,所有这些示例都是使用AdobeXD创建的。

接下来分别从这八个方面进行展开细讲:输入域、字段标签、布局、操作按钮、帮助与支持、易接近、测试设计决策、结论。

1. 输入域

当涉及到表单设计时,设计师所能做的最重要的事情就是将打字的需求降到最低,减少投入是必不可少的。设计师可以通过关注表单领域的设计来实现这一目标。

1.1 最小化字段总数

您要求用户填写的每个字段都需要付出一定的努力。填写表单所需的工作越多,用户完成表单的可能性就越小。这就是为什么形式设计的基本规则更短更好的原因——摆脱所有不必要的领域。

Baymard研究所对结账表格进行了分析,发现:结账过程太长或太复杂是结账过程中放弃的主要原因之一。

研究发现:平均签出包含近15个表单字段,大多数在线服务可以将默认显示的字段数量减少20%到60%。

许多设计师都熟悉“越少越多”的规则。不过,他们还是会问更多的问题,试图收集更多关于他们的用户的数据。在初始注册期间收集更多关于用户的数据可能很有诱惑力,但要抵制这种诱惑,可以这样想:添加到表单中的每一个附加字段,都会增加失去潜在用户的可能性。

您从某个领域获得的信息是否值得失去新用户?

请记住,只要您已经收集了用户的联系信息,您就可以随时跟踪请求获得更多的数据。

1.2 <明确区分所有可选字段

在优化可选字段之前,问问自己是否真的需要将它们包含在表单中。想想你真正需要什么信息,而不是你想要什么。理想情况下,表单中的可选字段数应为零。

如果在头脑风暴会议之后,您仍然希望在您的表单中包含一些可选的问题,请向用户明确这些字段是可选的:

  • 标记可选字段而不是强制字段:如果您要求尽可能少,那么您形式中的绝大多数字段将是强制性的。因此,只在少数人中标记那些字段。例如:如果六个字段中有五个是强制性的,那么只将一个字段标记为可选字段是有意义的。
  • 使用“可选”标签表示可选字段:避免使用星号(*)来表示“可选”。并不是所有的用户都会将星号与可选信息相关联,一些用户也会对此含义感到困惑(星号通常用于表示强制字段)。

1.3 相应的大小字段

在可能的情况下,使用字段长度作为支持,输入字段的长度应与该字段所期望的信息量成比例。字段的大小将起到视觉约束的作用——用户将通过查看字段就知道需要输入多少文本。

一般来说,诸如区号和房号之类的字段应该比街道地址的字段短。

1.4 提供领域焦点

自动对焦表单中的第一个输入字段,自动对焦字段给用户一个指示和一个起点,以便他们能够快速开始填写表单。

通过这样做,您可以降低交互成本——为用户节省了一个不必要的点击。

使主动输入字段突出和集中,该领域的焦点本身应该是晶莹剔透的——用户应该能够理解一目了然的焦点在哪里。

它可能是带有口音的边框颜色,也可能是框的淡入。

1.5 提不要要求用户重复他们的电子邮件地址

电子邮件地址的额外字段在产品开发人员中如此流行的原因是显而易见的:每一家公司都希望将硬反弹(无效的电子邮件地址导致的无法交付)的风险降到最低。

不幸的是,遵循这种方法并不能保证您将得到一个有效的地址。用户经常从一个字段复制和粘贴他们的地址到另一个字段。

1.6 提供“显示密码”选项

复制密码输入字段是产品设计人员中另一个常见的错误。

设计人员采用这种方法是因为:他们认为这样可以防止用户错误输入密码。

实际上,第二个密码字段不仅会增加交互成本,而且也不能保证用户不会出错。因为用户看不到他们在字段中输入了什么,他们可能会犯两次相同的错误(在这两个字段中),并且当他们尝试使用密码登录时会遇到问题。

正如Jakob Nielsen总结的那样:

“当用户输入密码而得到的唯一反馈是一行子弹时,可用性就会受到影响。通常情况下,屏蔽密码甚至不会增加安全性,但由于登录失败,它确实会使您的业务损失。”

提供一个选项,允许用户查看他们选择创建的密码,而不是重复密码字段。有一个图标或复选框,当单击密码时,该图标或复选框将解除密码掩码。密码预览可以为用户在发送之前检查其数据提供一个机会。

1.7 不要分割数据字段

当询问全名、电话号码或出生日期时,不要分割字段。切片字段会迫使用户进行额外的点击以移动到下一个字段。对于需要某些格式(例如电话号码或出生日期)的字段,最好让单个字段与明确的格式规则匹配作为占位符。

1.8避免下拉菜单

卢克·沃罗博列斯基(LukeWroblewski)曾说过:跌落应该是万不得已的UI。

下拉列表对于移动设备尤其不利,因为折叠元素会使数据输入过程更难在一个小屏幕上进行:将选项放置在下拉列表中需要两次点击并隐藏选项。

如果您使用下拉列表来选择选项,请考虑用单选按钮替换它。他们将使所有选项都可以浏览,同时也降低了交互成本——用户可以点击该项目并立即进行选择。

1.9 使用占位符和蒙面输入

格式不确定性是表单设计中最重要的问题之一。

这个问题与放弃表单有直接关系——当用户不确定他们应该提供数据的格式时,他们可以迅速放弃表单。有几件事你可以做,使格式清楚。

1.9.1 占位文本

输入字段中的文本可以告诉用户所期望的内容。占位符文本对于诸如“全名”这样的简单字段并不是必需的,但是对于需要特定格式的数据的字段来说,占位符文本是非常有价值的。

例如:如果您设计用于跟踪包裹的搜索功能,最好提供一个示例跟踪编号作为跟踪号字段的占位符。

重要的是,您的表单应该在占位符文本和用户输入的实际值之间,有一个清晰的视觉区别。

换句话说:占位符文本不应该像预设的值。

如果没有清晰的视觉区分,用户可能会认为带有占位符的字段已经有了值。

1.9.2 遮挡输入

字段掩蔽是一种帮助用户格式化输入文本的技术。许多设计师把字段掩蔽和占位符文本混为一谈,但它们不是一回事。

与占位符不同,占位符基本上是静态文本,掩码会自动格式化用户提供的数据。

在下面的示例中,当输入电话号码时,括号、空格和破折号会自动出现在屏幕上。

屏蔽输入也使用户更容易验证信息——当一个电话号码是块显示,它使它更容易找到和纠正一个错误。

1.10 提供匹配键盘

移动用户喜欢为该领域提供合适键盘的应用程序和网站。此功能阻止它们执行其他操作。

例如:当用户需要输入信用卡号码时,应用程序应该只显示拨号盘。这在整个应用程序中始终实现键盘匹配是非常重要的(应用程序中的所有表单都应该具有此功能)。

设置HTML输入类型以显示正确的键盘。

有七种输入类型与表单设计相关:

  • input type=”text”displays the mobile device’s normal keyboard.
  • input type=”email”displays the normal keyboard and ‘@’ and ‘.com’.
  • input type=”tel”displays the numeric 0 to 9 keypad.
  • input type=”number”displays a keyboard with numbers and symbols.
  • input type=”date”displays the mobile device’s date selector.
  • input type=”datetime”displays the mobile device’s date and time selector.
  • input type=”month”displays the mobile device’s month and year selector.

1.11 请求特定范围时使用滑块

许多表单要求用户提供一系列的值(例如,价格范围、距离范围等)。为了达到这个目的,不要使用两个单独的字段——“From”和“to”,而是使用一个滑块来允许用户通过拇指交互来指定范围。

1.12 清楚地解释:你为什么要求敏感的信息

人们越来越关注隐私和信息安全。

当用户看到他们认为是隐私的信息请求时,他们可能会想:“嗯,为什么他们需要这个?”

如果您的表单要求用户提供敏感信息,请确保解释您为什么需要它。您可以通过在相关字段下面添加支持文本来做到这一点。

根据经验,解释文本不应超过100个字符。

1.13 注意静态默认值

与由系统根据系统拥有的有关用户的信息计算的智能默认值不同,静态默认值是以对所有用户相同的形式预置值。避免静态默认值,除非您相信有相当一部分用户(例如,95%)会选择这些值——特别是对于所需的字段。

为什么?

因为您可能会引入错误——人们会很快地扫描表单,并且不会花费额外的时间来解析所有的问题;相反,他们只会跳过这个字段,假设它已经有了一个值。

1.14 保护用户数据

JefRaskin曾经说过:“系统应该把所有用户的输入视为神圣的。”

对于表格来说,这是绝对正确的。

当您开始填写Web表单,然后意外刷新页面时,这是很棒的,但是数据仍然保留在字段中。Garlic.js等工具会帮助您在本地持久化表单的值,直到表单提交为止。这样,如果用户不小心关闭选项卡或浏览器,就不会丢失任何宝贵的数据。

1.15 自动动作

如果您想使数据输入过程尽可能流畅,那么仅减少输入字段的数量是不够的——您还应该注意数据输入所需的用户工作量。

打字的交互成本很高,即使使用物理键盘,也容易出错,而且耗时。但当涉及到移动屏幕时,它变得更加关键。更多的输入会增加用户出错的机会。

尽量避免不必要的打字,因为这样会提高用户的满意度,降低错误率。

为了实现这个目标,您可以做以下几件事:

自动完成:

大多数用户在Google的搜索框中输入问题时都会自动完成。

Google向用户提供了与用户在字段中键入的内容相关的建议列表。

同样的机构也适用于形状设计,例如:表单可以自动完成电子邮件地址。

自动大写:

自动大写使第一个字母自动成为大写字母。

这个特性对于像名字和街道地址这样的字段是很好的,但是对于密码字段则要避免它。

自动纠错:

自动更正修改似乎拼写错误的单词。对于唯一的字段,如名称、地址等,请关闭此功能。

自动填写个人资料:

输入地址通常是任何在线注册表单中最繁琐的部分。通过使用浏览器函数根据以前输入的值填充字段,可以简化此任务。

根据谷歌的研究,自动填充可以帮助人们更快地填写表格。

1.16 使用移动设备的本机功能简化数据输入

现代移动设备是一种复杂的设备,拥有大量惊人的功能。设计人员可以使用设备的本机功能(如照相机或地理位置)来简化输入数据的任务。

下面是关于如何使用传感器和设备硬件的一些提示。

定位服务:

可以根据用户的地理位置数据预选用户的国家。

但是,由于准确性问题,有时预填完整的地址可能会有问题。Google的PlaceAPI可以帮助解决这个问题,它使用地理定位和地址预填充,根据用户的准确位置提供准确的建议。

使用位置服务,还可以提供智能默认值。

例如:对于“查找航班”表单,可以根据用户的地理位置使用最近的机场预先填充“FROM”字段。

生物鉴别授权:

今天使用文本密码的最大问题是大多数人忘记密码——82%的人不记得他们的密码,5%到10%的会话要求用户重置密码。

在电子商务中,密码恢复是一件大事——75%的用户如果在签出时尝试恢复他们的密码,他们就不会完成购买。

密码的未来不是密码。即使在今天,移动开发人员也可以利用生物识别技术。用户不需要输入密码,应该就能够使用生物识别阅读器进行身份验证——使用指纹或面部扫描进行签名。

相机:

如果您的表单要求用户提供其驾照上的信用卡详细信息或信息,则可以使用相机作为扫描仪简化数据输入过程。提供一个选项,以拍摄一张卡片,并自动填写所有细节。

但是请记住:无论您的应用程序填写的字段有多好,都必须让它们可供编辑,用户应该能够随时修改字段。

声音:

诸如Apple HomePod、GoogleHome和AmazonEcho等语音控制设备正在积极地蚕食市场,喜欢使用声音进行共同操作的人数显著增加。根

据ComScore的数据,到2020年,50%的搜索将是语音搜索。

随着用户使用语音命令变得更加舒适和自信,他们将成为移动交互的一个预期功能。

语音输入为移动用户提供了许多优势——在用户无法集中注意力在屏幕上的情况下,例如:开车时,语音输入特别有价值。

在设计表单时,可以提供语音输入作为数据输入的替代方法。

由于此文章内容干活较多,需要读者细心消化。故拆分为上下两部分。

本文由 @Johnson 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自 Unsplash ,基于 CC0 协议