东莞南城网站设计,python3 网站开发实例,西安网站外包,百度反馈中心表单是什么#xff1f;是用户和app之间的对话。作为人机交互的一种重要入口#xff0c;一个好的数据输入方式是很有必要去考虑的。但现实中#xff0c;我们大多设计师和产品经理前期设计的时候就没有太多的考虑#xff0c;到最后开发的时候就会发现问题#xff0c;然后就草…表单是什么是用户和app之间的对话。作为人机交互的一种重要入口一个好的数据输入方式是很有必要去考虑的。但现实中我们大多设计师和产品经理前期设计的时候就没有太多的考虑到最后开发的时候就会发现问题然后就草草了事了。那么我们今天就来好好探究下表单设计时要注意的事项。一、标签的设置标签的设置我们有时候会很纠结。移动端的兴起在pc之后所以很多pc的使用方法就应用在移动端设计上。首先我们要知道标签的作用是什么它是对输入数据的归类对用户输入的一种提示。标签分为图标标签和文字标签图标标签多用在登录等容易理解的场景用户对这些图标的感知度非常高了但是也要结合后面的提示文字使用没有提示文字用户也会一脸懵逼。但是在表单内容过多的时候文字标签更常用。要知道文字的识别度是远高于图标的识别的。常见的标签有顶对齐、右对齐、左对齐。马泰奥·彭佐在2006年7月的眼动研究发现标签如果采用顶对齐方式用户的视线从标签移动到输入框只需要50毫秒右对齐方式需要240毫秒左对齐方式需要500毫秒。如果从高效上讲应该是优先考虑标签顶部对齐。但是我们使用的时候要注意场景不管是移动端还是pc端如果全部采用顶对齐的方式就会占用更多的垂直空间一旦表单项过多对表单页的操作也会造成不便。移动端的尺寸很小尤其需要注意。所以单从马泰奥·彭佐来看如果表单项不多优先考虑标签顶部对齐要兼顾高效和页面的垂直空间则选择右对齐方式。那是不是左对齐标签无用呢其实并不是研究也有表明在涉及到专业性过强用户不熟悉的表单需要更长时间理解的标签项时则可以考虑左对齐方式。我们试着想下50毫秒、240毫秒、500毫秒对我们的输入影响真那么大么。一个表单页面的效率可不仅限于读取标签的速度它还受到输入形式表单多少表单布局等各种因素的影响。然而移动端中的表单我们经常看见的是标签左对齐其原因也以想象节约空间、统一布局。其实我们在考虑标签的对齐方式的时候也需要考虑输入内容的对齐方式。常见的内容对齐方式有左对齐、右对齐。如果标签采用顶对齐毫无疑问输入文字做对齐。若标签采用右对齐输入文字则采用左对齐。若标签采用左对齐则输入文字可以采用左对齐或右对齐。除了上面所说的标签样式外浮动标签是一个迅速获得普及的新的交互设计方式。在它的设计中标签文字开始作为提示文字然后一旦用户开始填写标签将升到上面解决了上述提示文字消失的问题。虽然这种方式还可以帮助减少页面长度在移动端特别有帮助。但是它不能解决文本框看上去已经被填补的问题。(Nielsen Norman Group曾做过的一项眼球追踪研究就说明空的输入框比有提示文字的输入框更能引起用户的关注而且与空的输入框相比用户更容易忽略有提示文字的输入框。换句话说被认为是有用的表单提示文本其实弊大于利尤其是对习惯大致浏览的用户。)因此Nielsen Norman Group不建议这种做法还是应该保持标签在上面除非页面长度是最重要的设计关注点。二、输入注意移动端表单输入是一个我们非常容易忽略的一个地方。输入方式的不同也是移动端和pc端非常大的一个区别pc端我们是采用大键盘输入而移动端是虚拟小键盘。实体键盘输入速度要比虚拟小键盘快很多。由于使用场景不同很多公司都是电脑网页和移动app同时开发的然后把pc端的所有功能都移植到移动app上表单也全部挪到移动端造成app体量非常庞大功能也臃肿用户使用起来非常不便。我们在做设计的时候要多问自己“为什么”采用5W2H法(what、who、when、where、why、how、how much)来审视一个表单的设计这样我们就能充分考虑设计的各种需求和场景了。1.减少输入移动端表单的设计我们首先要考虑是否有必要输入这个数据这个数据对我们的影响大么如果没有什么作用我们是否应该删除它如果pc端也有该功能我们是否可以让用户在pc端进行这些操作。所以常见的方式有下面这几种减少文字变输入为选择新开页面输入减少文字考虑这个字段是否有必要如果对我们没有任何作用那我们删除它吧。移动不是pc动不动就输入几百上千字那是不可能的所以在输入文字的时候可以做个限制让用户输入重要的信息即可。对于输入框我们应该直接告诉最多输入多少个文字让用户有心理预期。变输入为选择选择很多情况下比输入是更快的而且这样也能规范我们录取的数据这样也能快速筛选我们的数据前端和后端也更容易识别读取。新开页面输入有时候我们一个表单的内容很多输入和选择混杂在一起输入的文字也非常多那我们可以可以考虑在当前页面展示输入则进到新开页面进行。2.默认文字我们在录入表单的时候通常会有默认提示文字帮助我们更好的理解需要录入的内容。一旦表单获取点击焦点提示文字就消失了用户不再能看见它。所以这样其实是有个缺陷的这会让用户产生短期记忆的压力而增加错误的机率。在移动端这种缺陷是被大多数忽略的因为多数情况下默认文字是非常简单易理解的如果出现非常复杂的提示则我们应该增加说明文字进行说明。默认文字需要注意的几个地方文字不要太多尽量控制在一定范围内不要把默认提示展示的像输入的内容(默认文字是辅助内容不要抢风头)需要掩码的就采用掩码输入方式(常用于电话号码银行卡号等数字的输入。让用户方便记忆和录入减少错误)3.区分标签、默认文字、录入内容、不可更改内容我们在做表单的时候一定要注意表单的层级不要让用户在这里迷失。常用的方式就是以字体大小和颜色来区分标签、默认文字、录入内容、不可更改内容。至少采用三个文字颜色来区分这个层级常见的是深色(标签)、中灰色(输入内容)、浅色(默认提示)或者是中灰色(标签)、深色(输入内容)、浅色(默认提示)4.键盘选取键盘是很容易忽视的一个地方很多情况下不去定义键盘类型最后导致我们用户体验较差。但是有的使用场景用户体验的等级是较低的比如银行他的安全等级是最高的所以很多银行的键盘采用的是打乱的键盘。所以即使是为了安全性相对于用户输入体验差我们也更应该考虑键盘的选取类型。所以在交互稿或者是产品文档中应该注明键盘的类型以免开发工程师采用默认的类型造成用户体验差。iOS、Android提供多种键盘类型布局常用的键盘类型布局有(参考https://www.uisdc.com/soft-keyboard-design-element#)默认键盘常规的全键盘不做任何限制。文本键盘相比默认键盘取消了表情符号适合输入密码。整数键盘只能输入数字0-9。浮点数键盘在整数键盘基础上增加了小数点。电话号码键盘在数字键盘基础上增加了“*” 和 “#” 。邮箱地址键盘在常规全键盘基础上增加了“”和“.”。URL键盘输入网址用的在常规全键盘上增加或突出“.com”、“.”和“/”等。数字和符号键盘相比数字键盘多了很多标点符号。5.数据兼容键盘键盘选择好后也应该考虑键盘弹出时页面的展示方式。有的app在这里没有考虑太多弹出的键盘直接把输入文本框挡住造成用户体验非常差。所以当你的输入框在键盘的下面的时候应该将输入框推到键盘上面保证用户输入的可见性。6.文字高度自适应在输入文字的时候我们应该明确表单输入的文字的最小值与最大值然后根据最大值和最小值来确定最后的展示方式。对于输入文字较少的我们可以一行展示比如姓名通常一行可以展示完整给个最大限制就行。当你的文字大于一行所承受的范围时你就要考虑是否要自适应高度显示文本内容了。如果在设计的时候不考虑这些开发很容易忽略这些问题然后你就可以看到一大堆文字盖在标签上了。最好的方式就是把输入的文字全部展示出来如果你为了节约空间也可以一行展示多余的用”…表示。我们还可以采用新页面来专门输入这样就解决了这个问题也不怕文字过多了。对于备注或者反馈等大量文字输入时我们需要给文字输入框更大的高度保证在大多数情况下能正常展示。通常是有限制字数的(微博的140字)如微信个性签名会在输入框的右下角告诉你还可以输入多少字。采用这种方式告知用户还可输入多少以免造成不好的体验。三、告知必选为什么会出现选填和必填呢很多情况下是为了让用户快速完成操作就把不是必须的选项采用可选的方式进行操作。尤其是在b端设计中需要录入用户或者商家的信息非常多很多时候为了让商品信息更加全面所以会把所有规格参数一股脑的展示出来这个时候用户就懵了。在移动端使用场景也不固定用户很难会有大量时间来录入更多信息所以区分出选填和必填是非常有必要的然后用户可以在有空的时候完善信息。那如何区分选填和必填呢常见的有文字标明必填和选填(二者选其一)以代替以●代替这样就能最高效率区分出来必填字段和选填字段但现在大部分互联网用户对于「*」就代表必填这都已领会所以笔者还是推荐在表单中尽可能用「*」去区分必填和选填毕竟这属于最通用的方案。但是当一个表单都是必填时就没必要全部标记出来了比如登录表单大家都知道登录表单中的标签项都为必填同时也可以根据标签项是否输入的状态来激活「登录」按钮。四、合理组织信息组织是简化设计的一个重要策略尤其是大批量录入表单的时候我们更应该合理组织信息。移动端表单过多的时候用户很难定位到需要更改或者注意的地方。通常采用下面的方式来合理组织表单信息标签分类通过添加标题区分表单模块功能分类根据同等层次、同类数据分类合理的间距用间隔来区分避免拥挤分页录入 当一页的表单过多的时候给用户造成密集恐惧的感觉。我们可以分页录入一步步的完成要录入的表单五、及时反馈及时反馈这也是我们容易忽略的地方。很多时候用户在完成所有表单填写后提交的时候我们才给错误提示这样会让用户去重新修改所填内容如果所填内容过多用户修改起来就非常麻烦造成很不好的用户体验。比如选择时间的时候如果过去的时间无效那么我们就可以让过去的时间不可选直接定位到当前时间当前和后面的时间就可以选择这样就避免选择了过去时间造成的错误。或者有的情况下部分状态是不能选择的那我们也应该告知用户哪些不可用。再或者输入的号码格式数字明显错误我们也应该及时告知用户......每个表单所承载的功能是不同的我们要根据具体功能具体设计。总之有一点我们要注意的是在做设计的时候应该考虑更多的场景多问为什么。前期我们踩的坑多了后面开发和测试踩的坑就少了用户体验也会更好了。在这里我相信有很多想要学习UI设计的朋友我是一名从事了五年UI设计私人定制课程今年年初我花了一个月整理了一份最适合2019年学习的学习干货及教程从最基础到各种框架都有整理送给每一位UI设计取的可以关注我并在后台私信我学习即可免费获取
