手机二维码 手机二维码

UI设计中的操作性弹窗

发表时间:2020-10-21    人气:251    来源:原创
    要通过UI设计进行用户认知能力和系统的反馈,弹窗是经常用到的组件之一。而弹窗如何设计,既能让用户体会到便捷智能,又能方便统计数据?我们常说的用户的认知能力与系统的反馈,这里的反馈很多时候会用到弹窗组件,今天,小编就来跟大家聊一聊UI设计中的操作性弹窗。

    有时候一个复杂的场景需要拆分,我们便会对一个页面的UI设计进行优化,把一些功能通过弹窗形式来展示;例如:个人信息页面,包含很多分组,主界面是分组的集合,每个分组通过弹窗打开来维护;这样可以把复杂的表单简化,分段维护。

    交互设计可以简单理解为把复杂转移给系统,把简单留给用户,让用户更多的感受便捷化、智能化。

    操作性弹窗主要是一些表单类、配置类界面,例如新增、导入、设置等。
UI设计中的操作性弹窗
    有些人可能说新增可以利用UI设计做成标签页形式,作为独立的页面存在,不过这里是讲弹窗,所以暂不考虑这种情况;啰嗦一句,如果是页签形式,新增提交后,页面要消失,并且要把值传给父级页面。

    比较常见的是弹窗形式,新增提交后,弹窗消失,值传给父级并自动刷新页面。

    1、简单场景

    表单输入项不多,或者页面内容不多的情况,可以看成简单场景;一个弹窗页面只需要把一个功能完成好,没有太多关联性的操作,例如输入内容不多的新增弹窗。

    另外类似于批量查询、导入这类操作,弹窗中还需要再弹个弹窗去执行导入模板的操作,这种情况还是可以归于简单场景。

    小结:简单场景差不多就是表单内容不多、功能单一、业务简单的操作性弹窗。

    2、复杂场景

    表单输入内容很多需要分组,或者有很多需要关联的操作,可以看成是复杂场景。

    要么是一个主体弹窗,包含很多再弹开的弹窗。

    或者是就在一个主体弹窗内,通过分组、TAB、分步等来优化复杂业务。

    1)弹窗TAB

    这里的TAB不是指页签,而是在弹窗内部用TAB进行分组。以前设计CRM系统时,新增会员信息部分就采用的这种方式。

    其实也不代表这种方式有多好,主要是技术上当时弹窗尺寸需要固定,写成公共样式,有的内容很多,有的内容很少,为了兼容多种情况,才考虑这种TAB分组。

    这里有个注意点,就是必填字段问题,由于字段信息都影藏到每个TAB标签中,不能一眼看到哪些字段是必填,以及必填未输入时如何提醒,我以前是设计成小三角放在标题右顶部。

    当影藏的TAB标签中有必填字段未填或者其他校验信息提示时,可以采用红标方式来提醒用户,当用户切换到红标TAB时,即可查看弹窗无法提交的原因;问题全部解决后,红标才会消失,当前TAB问题则可以直接看到。
UI设计中的操作性弹窗
    2)分组弹窗

    在弹窗内将字段信息全部展开,但是其中一部分字段又属于同一类型的,这时可以采用分组信息来区分;分组弹窗可以将字段信息条理化,便于用户输入信息,可以理解为提高了用户的认知能力。

    字段信息可以全部顺排,也可以按数量横向排列,例如一排摆2个字段,需要根据整体界面结构来设计;另外还需要考虑下系统反馈时的展示方式,例如是放在信息框右侧、底部、浮层提示等。

    3)分步弹窗

    在弹窗内部将字段信息按先后顺序分开,这种就叫分步弹窗,这种设计有个要点,就是第二步操作的数据需要第一步来做支撑;如果不完成第二步,无法直接从第一步到第三步。

    可能有人会说,如果字段前后没有关联,是不是就不能用分步弹窗了,一般WEB端是采用分组方式,移动端可以按照分步来;但是一般都不是必填的,用户可以后面有兴趣时再去补充。

    例如注册一些APP后,需要选择一些初始设置,以及填写个人资料,不过都可以不填直接跳过。

    以上就是小编为大家总结的关于UI设计中的操作性弹窗的相关信息,希望对您有帮助。如果了解提示性弹窗,可以移步UI设计中的提示性弹窗

每日前50名预约咨询

可免费获取专属优惠

*
*

电话咨询

400-0731-162

在线咨询

返回顶部