产品经理-表单设计中,你需要注意这些事项

表单设计中,你需要注意这些事项表单是什么？是用户和网站之间的对话。设计表单如同设计一个产品,取决于你的理念是从产品目标还是用户目标出发。通过对表单设计中基本规范和表格输入方式的系统分析,提出了表单设计中结构设计要注意的事项。交互体验对于而今的互联网产品来讲,无论怎样重视都不为过。对于对视用户接触较多的表格设计,想必产品经理都有自己的心得体会,今天就和大家聊聊表单设计的基本规范和注意事情,疏漏之处,还请各位同行多多指教,共同探讨。在开启正篇之前,先请大家看几个有欠考虑的表单设计,我们一起看看问题到底出在哪里了？ 案例：某人事面试平台网站案例：1美于个人网页谖计内容提交s-WWI*IWHBa案例：1看完以上三例,不知大家更深一层感想,笔者在考试报名的时候,就碰到了案例的表单。1那么,为什么他们敢用这样的表单？ 1因为“刚需、“垄断,就像伟大的1230X、挤成照片的地铁,某三甲医院的高傲医学院态度等等。但是,朋友们,不是我们所做的所有产品都能有这样的场景吧,认认真真所以还是要老老实实的优化我们的用户体验,对吗？ 好,言归正传,首先要在此申明一下,表单设计的核心原则,也可以说是铁律。下面,我们从结构设计如下几点来聊聊表单设计的基本规范。1.1合理的结构1、如果表单的字段过多,而又无法避免的时候,可按照业务逻辑成功进行分类,把冗长的表单划分成几部分进行排布。2、如果表单内容存在前后上所步骤上能的逻辑关系,可以将其按步骤划分。3、一些不干扰主流程的信息,程序可以在可能需要启动该流程的时候,再让用户填写。1.2合适的位置其中顶对齐的风险问题在于,在垂直方向之上占用空间较大。行内标签由于位置所限。优点在于占用位置小,缺点在于填写完毕,标签的提示文字就消退了,复核信息较困难。因此,常在输入较少量信息时可使用,例如,登录。1利I导顺2、输入框提示信息的位置,一般推荐将提示信息放在操作的上下文中,最为明确。错误提示在输入框上面错误提示在行间过高的记忆U知员荷,更长的卧正时间赢少记悟讯知员荷,更短的琲正时间X Dont!3、提示信息在文本框的上下左右四个位置中,一般来讲右侧最受用户欢迎。（相关调研的结果供参考）Field Lmgl3. Abcnvumr input展声艰的4种显示位再L右以 2,下近 3.左也 4、上迎1.3恰当的语言1、设计中,恰当的使用文案,会为产品增色不少。文案的核心原则是清晰、明确,语言风格要根据产品定位详加斟酌。2、有些必要的操作,可以通过提示信息给用户解释清楚,为什么需要有用户填写此内容？填写之后能为用户会带来什么益处？这样用户在输入的时候会感受到自己并非被迫的。3、可以通过一些动效来增加情感联系,例如我曾经看到过一个登录页面,在用户填写账户时候,小蜜蜂会闭上眼睛。1.4合适的颜色一般来说,错误为红色,通知为蓝色,警告为黄色,成功确认为绿色。1.5适宜的时间推荐在用户输入完该项信息后,立即显示验证的成功/失败信息。同时化解还可以考虑为普通用户提供解决方法。在表单设计中,存在多种输入工具,那么在设计产品的过程中,我们该如何选择,如何取舍呢？以下是我在日常教育工作中的一些摸索摸索,也包括借鉴前辈的一些经验。供大家参考。2.1文本框、/-=t=r -fjX注意事情：1、合适的尺寸,根据编码重量内容的长度确定文本框的尺寸。2、自动匹配特定数字难题的输入格式问题：在显示银行账号、身份证号码等脆弱信息时,宜隐藏部分内容,避免内部信息泄露问题。针对卡号等复杂信息,现在很多银行的app都读取支持直接扫描贴纸获取账号。3、提供帮助和解释性文字,消除用户疑虑和困惑。4、文字输入最好有自动补全、自动建议功能。5、如有限制字符数,明确提示给用户为宜。6、表单编码内容过多时,可增加一键清空、复制按钮。7、移动端特有问题：弹出键盘与需要输入的文本类型相匹配。8、在英文语境下,要避免英文全大写的情况发生。2.2下拉列表优点：占用空间小,不需要输入验证,技术难度低,用户熟悉。适用场景：适用于当下拉选项数量过多时。、/注意事情：1、允许用户检索下拉选项更为友好。2、尽可能合理的排列选项,最容易选择的放到上面（如果无法确定默认选项源文件的话）。例如携程的目的地的选择。国内酒店海外酒店 酒店团购 酒店+景点 会议面岛坛住Jsaw入住日期火车门票支持中立湖音商甜辅人ABCD EFGH JKLM NOPQRS TUVWX YZItE?上淬天津垂宅先匣告斐芷安哄芸州断期值门成都翎圳广州三亚台北否老务南宁波爆E藏汉郑忡1X z3、下拉列表的提示信息也很重要,要让用户明确自己选择的是什么。出展日期vil&Jiv寸X2.3单项选择框、复选框注意事情：1、按一定排序的逻辑实施选项排序,例如根据会发生的可能性、难易程度、风险大小来排序。2、选项应该易于理解,容易区分。3、尽可能为客户提供默认选项。多项选择：1请选择你喜欢的专题简书会为弥定制更精;坚的信息能单项选择：12.4其他输入方式1、滑块：1 适用于精度要求不高的偏低数据分析输入,产品滑块的精度可以根据产品定义,最小值可以自行设定。i 滑块即可配合数字输入,微调钮等一并使用。i2、switch 开关：1蜂富替动数据O棒窝移动数据选项漫游已关闭3、tab 框：TAB框晴雨阴2.5日期选择器目前,在互联网产品上,日期选择器都得到了普遍的使用,很少有产品在要求用户手动输入日期了。那么日期选择器的添加应该注意哪些问题选择器呢？ 1、需要区分是选择时间前二天点还是选择时间段。河席7日住宿预订目的地入住日嘲2D1M725(醇天退房日明2、是否允许手动输入日期,加以控制手动输入日期的同时,要能可信识别用户输入日期的格式。3、是否需要给用户提供默认值。4、限制不可用日期。5、等待时间选择的颗粒度。6、周末是不是需要特殊标识。最末一点要说的是,表单校验的形式分为四种,一种是呈交后校验,一种是在用户填写完该条信息之后立即校验,一般推荐后者。好啦,关于表单设计的几点结构性问题就聊到这里了,不周之处还请各位多多指教,互相学习。