火星网校
UI交互设计:设计高效好用的表单
发布时间：2024-04-16 16:07:59 浏览量：137次
表单设计是我们在进行UI交互设计时需要经常面对的问题，设计的首要目标是满足我们和用户想要的东西，并保证用户可以轻松快速的完成填写。重庆优就业的老师今天就来和大家分享一下怎样设计高效好用的表单。
选取合适的问题
只需要考虑两个问题：
1.我们通过表单想得到用户哪些信息?
2.用户当前操作需要哪些信息才能完成?
根据我们得到的问题，参考卡罗琳贾勒特提出的“保留，删减，延迟，解释”四大策略形成更好的问题。
保留：你问的就是用户想要的，那么留下这些问题
删减：并不需要通过用户填写得到答案的，我们可以通过用户其他信息推断出来，或者不必要的问题删掉，减少我们的工作量，减少用户填表的时间
延迟：并不需要马上得到答案的，延迟到合适的时间在合适的位置填写
解释：涉及到敏感信息或者用户个人隐私的，但我们必须要的信息，向用户解释为什么需要，对用户有什么好处
理清问题之间的逻辑：
我们通过分析得到相对合理的问题后，就要考虑问题之间的逻辑性，保证填写流畅
根据情境和问题数量将问题分组，思考放置这些问题合适的时间和位置。
已在苹果官网购买产品为例，若用户没有账号，依然可以购买产品，然后在付款结束时创建账号，不会因为用户没有账号而影响购买行为。
表单设计遵循的规则
合适的标签对齐方式
根据标签所处的位置可以分为左对齐标签，顶对齐标签、右对齐标签和输入框内标签。具体采用那种方式取决于我们希望用户完成表单的速度，屏幕显示的限制等因素。
顶对齐标签
顶对齐标签有清晰的完成路径，用户可以顺着标签可以很快的完成表单，在web端还可以增加横向空间，以其它方式来组合相关输入框;缺点是会占用额外的垂直空间，当内容较多时，慎重使用。需要注意的是顶对齐标签应当采用合适的垂直间距，一般使用输入框50%-75%的高度作为相邻输入框的间距。
右对齐标签
右对齐标签和相关输入框相邻，填写时间相对较快，占用的垂直空间减少;缺点是左侧不齐，降低了可读性。
左对齐标签
左对齐标签同样减少了垂直空间的占用，由于标签是左对齐的，符合我们的阅读习惯，所以用户可以快速了解表单需要回答的问题;缺点是右侧不齐，导致标签和相关输入框相邻间距增大，增加了用户完成表单需要的时间。
如果希望用户认真填写问题，采用左对齐标签是个不错的选择。
输入框内标签
输入框内标签极大的节省了页面空间，使界面看起来更加简洁美观，但是一旦用户点击切换到输入状态以后，用户就会看不到这些标签了。如果同一页面中表单项目很多(超过5个)，用户填写过程中可能会忘记之前的填写的项目是什么。为了解决这个问题，我们可以在行内标签前加一个图标来标识这个列表项，图标所占据的空间不会太大，而且会增加页面的美观性。
如果表单较长，输入框内标签并不适合，填完表格后标签不见了，用户检查填写好的也非常困难，所以输入框内标签更适合用于只有一个问题(比如搜索框)或两到三个输入框的表单或者用户非常熟悉的表单(比如登录)
明确输入框类型
常用的输入框类型包括单选框、复选框、下拉列表、文本框。
文本框：可以加入文本框暗示，帮助用户了解如何回答问题，无法防止输入出错，效率低。
单选框、复选框：答案明显，有效防止输入出错，如果选项较多，会影响界面美观，可以考虑使用下拉框。
下拉框：同单选框一样，可以防止输入出错，而且视觉效果好，缺点是牺牲了可用性和明确性，答案不明显，用户需要点击才能看到答案然后进行选择。
突出主要动作
通过视觉设计突出主要动作，表明重要性，减少次要动作的视觉干扰。
提供帮助的时机
帮助信息有直接展现形式和触发展现形式。
直接展现形式是指用户不需要进行任何操作，提示信息自动出现在相关的区域内，目前最常见的就是出现在输入框的内部或右侧。例如我们常用的登录页面，在为输入用户名时会提示你请输入邮箱/用户名/已验证手机的提示信息，帮助用户尽快完成操作。
触发展现形式是指用户触发操作后，展现出相关提示内容，提示用户该如何进行下一步操作、判断用户当前的操作是否正确。需要注意的是触发展现应该在用户表明已填好并进入下一个输入框时再进行验证，如果错误应告知用户正确的做法或者直接给出建议的答案。
热门课程推荐
热门资讯
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
大家今天走运了,我就把自己总结出来的学习UI设计的一些经验与大家一起分享吧。想做一个好的UI设计师除了应该具有一定的审美能力,还要了解整个产品的...
-
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
-
10. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
最新文章
