关于多项表单录入页的设计探索

本文探讨了在设计多项表单录入页面时遇到的问题,如表单项过多和用户使用习惯。提出了将表单分为展示和编辑录入两部分,主要项和次要项的区分,以及展开式交互的设计方法。强调了必填项提示、标题内容适配、参差感在提升用户体验和视觉效果中的作用。

        最近要改一个的表单录入页面,由于涉及到了应用场景和用户的使用习惯,出现了一些问题。

        1.表单项非常多,而界面空间不足

        2.需要尽可能直接的展现,减少复杂的交互逻辑

        3.分页、分栏的模式不太符合用户的使用习惯

        个人认为表单的录入其实是很忌讳多而杂的表单项的,一方面会给用户使用带来不变,另一方面会显得单调、不美观。很多设计会采用分栏、分页的方式来减少过多表单项给用户带来的视觉压力和心理压力,在移动端的设计中尤为明显。而这种模式其实现在有很多优而精的思路和模板,本次想要探讨的只是,基于各种原因而堆砌起来的最劣解,或者说“矮个子里挑将军”。

        在逻辑上可以把整个表单的页面分为两个部分,展示部分以及编辑、录入部分。

        展示部分主要根据业务场景将表单项划分为主要项和次要项,主要项是业务场景中用户关注或是较为关注的、会经常浏览的内容,而次要项则是一些默认项、只读项和一些其他的次要内容。基于这种理念可以初步拟定展示部分的设计:对主要项进行着重展示以减少界面空间的占用,同时提供向下展开的方式来进行次要内容的拓展展示。

        作为分页的另一种展示方式,与分页相比也算是各有优劣。一方面这种方式相比于分页可以更方便、直接的浏览上一页内容;另一方面也正因如此,并不能从根本上解决表单项过多造成的视觉冗余。

        展示部分的设计相较于编辑、录入部分,要求会有比较大的差异,展示部分的要求可以理解为“精”,尽可能展示用户想看到的;而编辑、录入部分的要求就可能是“全”,兼顾细节,满足用户的所有使用场景。因此,在页面上,编辑、录入部分的设计难度会更高一些,如何在尽可能保持设计风格一致的情况下,满足不同方向的要求?

        同样的,将编辑、录入部分的表单项根据场景进行划分,将每项表单项归类到场景1、场景2这样的模式中,可能是根据流程进行区分,也可能是根据用户角色。但个人认为,场景可能不适宜划分过细,2-3个为佳。过细的划分反而使整个录入部分显得空而大,影响整体的使用体验。当然,在很多时候不论是根据场景进行表单项的归分或是根据主次进行归分,往往结果是大同小异的。因为在整个流程中,用户往往会聚焦在一个场景,这个场景中的表单项自然也就是主要项。

        由于前面提到的,保持设计风格的一致,所以我沿用了展开式的交互进行编辑、录入部分的设计。

 

 ​​​​​​​

        在这两部分的表单项中,展示部分的A8和编辑、录入部分的a9是对A和a这两块内容的备注或者说简述,因此在页面的设计时,选择了这种部分展示的效果。 

        在整个编辑、录入部分的设计中,会发现一些需要注意的点,或者说会影响到整体观感的点:

        1.必填项的提示。必填项的提示可以减少新人的学习成本,提高使用的体验,另一方面减少试错带来的时间成本。

        2.表单项的标题与内容的长度需要有一定的适配,需要考虑到边界对于输入框的影响,包括展示效果以及留白。

        3.巧用参差感。这是个人在设计中比较喜欢的点,对于我而言,参差有一种别样的美感,“层次”,避免了整齐的条条框框带给用户的审美疲劳,同时通过参差达到一些重要项的强调效果。

        以上大概是全部的内容了吧,可能会有很多不足,很多片面、青涩的观点,给大佬们磕头了,Orz。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值