产品经理在产品设计中这三层最为注意

记得年前分享的文章中曾提到,由于开发对数据库进行调整,所以很多需求的研发、测试都暂停了。趁着“闲”下来的时间,我开始对自家产品的表单设计又拿来研究了。

在整个过程中我体会到了表单设计的微妙之处,趁此机会,就把自己体验到的东西分享给大家,如果能对大家有帮助,笔者不甚荣幸!

很多表单的设计都是根据系统数据存储标准或者数据采集规范而确立的。例如新用户注册,系统为了保存用户记录,就需要建立一个user_id,这个id可以是手机号、邮箱等,以作为该用户在后台数据库中的唯一标识。

为了确保系统存储到有效数据,那么在新用户登录某个产品注册时,产品就会在前端页面出现手机号输入框,这就可以理解为一种“由内而外”的表单设计。不光是数据存储的内容,存储的字符规范也是“由内而外”的方式呈现。

代码层面

有些产品注册时明确用户名、密码不得输入“%”,其目的是为了防止SQL注入(转至百度:就是通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令)。

假如一个产品的用户登录数据存储在数据表A中,且支持用户名、密码录入“%”。当某用户将用户名设为“张三%”,密码设为“123%”,那么该用户登录时,后台会访问数据库执行类似如下指令:“select * from A where name = “张三%” and password = “001%” ”。这个“%”就是表示所有以“张三”、“001”开头的数据都会查找出来,这就会出现数据泄露的风险。

但是市场上很多产品目前不会声明“%”不得录入,是因为在存储过程中将“%”进行了转义,从而规避数据安全问题。

系统层面

由于系统自身设计规范,某些特殊字符就也会被限制不得输入。例如笔者参与过的一次需求设计(外勤申请:员工在公司外办公,需要进行外请申请,并由主管进行审批),“外勤地址”就不支持输入“/”,如下原型(因为用户输入地址很少会出现“/”,为了避免干扰,我们没有在移动端将此限制标识出来):

如果用户在外勤地址中输入“/”,在提交时系统就会提示用户不得输入“/”,并自动清空该字符。

为什么会有这样的要求呢?员工在一周内可能需要在多个地区办公,那么就需要支持允许添加多条外勤地址。

为了使得表结构不冗余、复杂,我们的这个“外勤地址”在数据库表中是存储在一个单元格内的:

当员工进行外勤申请后,主管就需要审批。在审批页面中,外勤地址也是逐条显示的,而具体显示几条就是按照数据表中“/”字符判断的。作为系统重要的划分字符,在表单设计时就需要作出限制

采集规则层面

有些数据的采集,在系统、甚至国家都有相应的规范。比如国家规定统一社会信用代码不得输入“I、O、Z、S、V”这几个字母,所以我们有个关于发票的表单设计就限制这些的字符输入。

除此之外,比如国家相关法律规定的敏感字符也是不允许录入的。

表单是承载信息和展示信息的重要途径,因此我们在设计的时候要注意很多事情。

首先我们要知道表单的组成:

  • 标签
  • 帮助文字
  • 输入框
  • 报错提示。

那我我们在设计的过程中 到底要注意哪些事情呢?

1、布局上

我们尽量采用单列进行展示,建议这样做的原因一是能够方便用户进行浏览和输入,二是因为这样布局,能够进行响应式的开发,减少了成本。但是其自身也存在着缺点,当需要输入的条件过多时,用户需要拖动鼠标进行查看与填写。

2、标签的设计

标签的位置主要分成三种:左标签、顶标签、和内标签(图一、图二、图三、)。而关于是否要有必填和选填的存在,个人认为,选填是否存在是可以被考究的。

左标签是目前比价主流的排布方式,主要适用于web端,建议将标签靠左对齐,因为不仅在界面上会显得比较争气划一,在用户对信息的提取和响应也会效率大大提高。但是它存在着一个比较尴尬的问题,也就是空间的占用上,用于web倒也没有什么问题,但是当如果用于移动端,则会出现需要左右滑动,信息填写被覆盖等问题。

顶部标签很好的解决了左标签的尴尬处境,但是自身也存在着问题,也就是当需要填写较多信息的时候,出现滚动的场景几率也就相对较大。这里要注意的是在使用顶部标签的时候,我们要注意输入框与输入框之间的距离(如右图)。

将标签放进输入框中是一个很好的解决方式,但是随之而来的还有,当我填写信息的时候,输入框任何指示信息也没有,会让用户产生困惑的心里,那我们要如何解决呢:如上图,我们可以将图标放入输入框中或者放在左侧。

3、帮助性信息

帮助性文字的展示一般采用气泡框进行提示(也有会先将一些提示性文字放在页面的顶端,但是这个要取决于文案的内容多少,以及重要程度。)气泡框提示的内容要求简洁易懂,鼠标放上去则迅速展开提示内容,鼠标移开则消失,注意:展开的时候不宜挡住当前输入区域,这么做的原因是让用户知道我处于什么地方,我在针对什么。

4、输入框的设计

在进行信息录入的过程中,我们要保持输入框的独特性(录入前、录入中、录入后):录入前和输入中 我们要使输入框高亮、沉浸、悬浮、等方法,让用户只专注于当前的录入,录入后要给出反馈,是录入失败还是录入成功,当然这个要根据产品的特点,来进行控制。

5、报错提示

如上图,报错提示有很多种,要根据不同场景选择不同的报错提示,假如只是针对单个输入框的判断,则仅需在当前状态进行报错,文字提示和输入框颜色、样式、变化都可以。

但是如果是重大操作结果报错,我们还是优先选择用模态框的方式进行报错,这样的好处是能更好的提醒用户错误的结果,也能中断用户的操作,让用户专心思考和检查之前的信息。

6、自动配置。

我们在设计的过程中,要尽量减少用户的输入次数,有些信息,我们可以通过自动补全,或者提供默认值等方式减少用户的输入时间,毕竟用户输入信息只是一个过程。

7、尺寸和录入量、格式

很多数据已经证明根据内容作出适当的尺寸,能够大幅减少用户的不确定性,以及一些特定的信息(手机、银行卡等)采用特定的录入格式都会让用户的体检更加良好。

8、录入信息的分组

将同类信息进行分组,这样即使是很多的信息叠加在一起,用户在输入上的心理压力也会大大减小。

9、提高反馈报错和帮助信息的可见度

但用户在输入信息的过程中,当遇到磕绊或者提示时,证明用户正处在迷茫的状态,这时候表达要发挥它的易操作、易理解、以及可见性,来进行指导用户走出迷茫。

总结:好的表单设计,在使用上是高效的,友好的,体验统一的。因此在设计的初期,要对录入信息进行一个充分的了解,这样你的稿子才不会一审再审。

 

结语

今天只是将“由内而外”表单设计的一些原因,在我的认知范畴内整理出来。如果大家有其他原因或者想法,欢迎在下方留言。

最后,要感谢一下我的同事欢全,提供了技术层面的普及。下次,我将会给大家分享一下我整理的关于表单提示相关的内容,感谢关注。

文章由PM28网编辑,作者:海阁,如若转载,请注明出处:http://www.pm28.com/1165.html欢迎投稿

联系我们

在线咨询:点击这里给我发消息

邮件:403567334@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息