做有温度的教育!
全国统一咨询热线:400-803-9399
北京
校区
新闻资讯> 行业新闻> 全栈UI设计—关于表单那些事(2)

全栈UI设计—关于表单那些事(2)

时间:2018-06-11
浏览:2914
发布:甲骨文华育兴业
赞:523

上回说到表单提升效率的方法,这次我们来说说全栈UI设计中表单的几个实际案例,里面的经验是我们以后会用得上的!

  1.表单要尽量简单

  尽量让你的表单短且简单。收集必要的数据,避免重复的输入。比如,把“再次输入你的密码”这一栏去掉,而是在“输入密码”区域增加一个“密码可视”的按钮,让用户可以选择看到自己输入的密码内容。

QQ截图20180611144253.jpg

(Jumia和亚马逊不同的用户密码验证方式)

  2.使用框内提醒:向用户反馈“输入错误”提示时,最好把错误提醒放在对应的输入框内。

  3.将相关信息分组:这一点很重要,把相关的信息分组,并将这些组按序列排列。这样可以帮助用户减少认知负荷,并能更加专注地填写当下的信息。  

  4.正确使用标签,并将其左对齐:标签要放在填写框的上方,最好不要把标签替换掉。

  如果没有标签,用户在提交表单之前很会反复确认他们填写的内容是否正确,这个过程会非常艰难,最直接的结果是就用户需要思考很多,导致提交率下降。

  而使用标签时,我们习惯于将标签放在填写栏的左上方,具体原因可以参看下面这篇论文,里面综合讲述了为什么这种方式对用户提交信息转化更有效。

  5.输入框的大小要与输入内容的长度和尺寸相匹配:简单来讲,要确保输入框的区域能够完美匹配输入内容的长度,比方说输入地址的区域长于输入邮政编码的长度

  6.CTA(提交操作) 按钮:所有的表单在最后都应该有一个“提交表单“的按钮,或者一个“下一步”按钮。如果一个页面里不止一个按钮,那么需要把重点放在主要的提交按钮上,另一个按钮需要稍微削弱一些存在感。

全栈UI设计

  (亚马逊将主要提交按钮突出得很好)

  如果使用弹窗状态来收集数据,那么次重点按钮通常是关闭弹窗的按钮。我们一般会在弹窗右上角使用“X”按钮来关闭弹窗,而不是专门设计一个“关闭表单”的按钮。

  7.搜索区域:不要隐藏你的搜索框,尤其当你的网页的内容非常多的时候,搜索会是用户的有限选择操作。

全栈UI设计

(亚马逊的搜索框十分显眼)

  另外,当一个用户提交一个搜索任务后,不要清除搜索框的内容,这样方便用户能很快且清晰地看到自己最初的搜索词是什么。

全栈UI设计

(Medium在搜索结果出来后不会清除搜索框里的内容)

  8.清晰:将信息清晰地传达给用户,尽可能清晰地告诉用户什么内容是被需要的,不要给出让用户误解的信息。没人喜欢填写表单,所以避免让用户填写第二次。  

全栈UI设计

(Cowrywise的标签短小精炼、信息清晰,甚至按钮上的文本表达也很到位)


人生从业之路的第一步,从甲骨文华育兴业开始,

背后付出的辛苦与努力只有自己知道,而这也只是他们职业生涯的开始。

勤恳努力的人终会得到最好的回报,有些努力需要时间来回答

你吃的苦终会铺成你想要的路!

甲骨文华育兴业,为你的IT之路开启梦想之门!


【版权与免责声明】如发现内容存在版权问题,烦请提供相关信息联系我们,我们将及时沟通与处理。本站内容除非来源注明甲骨文华育兴业,否则均为网友转载,涉及言论、版权与本站无关。

相关推荐

网络工程运维安全:远离故障的七大原则,你知道几个?

网络工程运维安全:远离故障的七大原则,你知道几个?

对于网络工程师来说故障是网络运营人员永远的痛,相信每一个网络工程运维人员都会在工作中 遇到各种各样的障碍,下面为了规避同学们在工作中能避免这些故障,甲骨文华育兴业的小编列举了以下几条,欢迎补充!也是运维最繁琐,最苦逼的地方,所有的变更都必须有回滚的办法,在同样的环境下测试过。没有做过的东西,总是会在你意想不到的地方给你一次痛击,多年运维经验告诉我们,所有没有做过的变更,出错的概率最大。所以我们需要给变更以回滚的可能,在各个步骤可能出错的情况下,考虑回滚到最初状态。优秀的运维人员对不考虑回滚的的操作都是敬而远之的。从某种意义上来说,运维是一门经验的学科,是一门试错的学科。

Java现在的就业前景怎么样?

Java现在的就业前景怎么样?

甲骨文华育兴业专注IT技术,重磅推出因材施教,分级教学模式,现已为万千学子成就IT之梦!来跟我们看看关于JAVA的一些知识把!相信现在众多想要学习Java的学员中,多数是以顺利就业为目的的,那么,我们就不得不考虑一个问题:Java现在的就业前景怎么样?这个问题,我们要从以下几个方面进行分析:

甲骨文华育兴业

一份优秀的程序员简历如何完成

对于本就不善言辞的程序员来说,一份优秀的简历不仅能够让你更加高概率地通过简历关,进入到笔试的流程当中,还能让你在面试的过程中有所加分。

甲骨文华育兴业

程序员应该为涨薪而频繁跳槽吗?

经常在技术群里看到有人说,某某哥们又跳槽了,薪资翻了一倍还多。然后就会引来群里好多人的羡慕。   说实话,为了涨薪而跳槽,真的好么?   市场经济下,不再单单是公司选择员工,更多的时候是员工与公司的双向选择,现在也很少有人会选择在一家公司干到退休。有时候还会出现一些“人才”被公司抢着要的情况。

大数据中hadoop是什么? ps使用 大数据 冲刺Java架构师年薪50W

友情链接: 甲骨文华育兴业太原校区 甲骨文华育兴业济南校区 甲骨文华育兴业哈尔滨校区 甲骨文华育兴业长春校区 魔据教育 音乐培训 青海律师

Copyright ©2016-2019. All Rights Reserved. 京ICP备17018991号-4

网站地图