恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
如何在B端产品中合理利用弹窗?
0.0°
2020-06-18 原创文章 经验/观点 举报 1159 7 4 0

写在前面的话


这是我入行的第四个年头,也是在医疗信息化这个领域的第二个年头,从一开始的懵懵懂懂接到原型就开始画表格,画表单,到现在开始从设计中剥离开来,开始思考,我究竟能为这个行业的发展带来些什么,如果只是一味的画那些没有什么视觉冲击感的表格跟表单,我想任何一个会点设计软件的设计师都能够胜任。所以现在我开始回味这两年做的产品,开始深入了解医疗信息化这个行业,开始通过查阅资料,请教前辈、同事的方式,来为我这两年做的产品复盘,目的在于规范产品的细节跟用户体验,并输出相应的文章,我希望通过这样的方式,能让我在医疗信息化,在B端产品中不断的沉淀,也希望通过这种方式让前辈来批评指教,不断成长。


我遇到的问题


最近刚结束一个新的项目,在做页面评审的时候,前端主管指出是不是要规范下弹窗的样式跟尺寸,其实之前给另外一个系统做视觉规范的时候有做过一版,但是都是一年前的事情了,当时也没有形成具体的规范文档或链接,后面前端人员不断更替,就开始随意定义弹窗的尺寸跟弹出形式(居中弹出或者推出),所以就借着这个机会,我开始思考弹窗在B端产品中的应用,究竟什么时候该用弹窗以及弹窗都有什么形式跟规范?



辅助页面在当前的医疗信息化产品中都有哪些运用?


辅助页面,通俗的讲就是主页面信息放不下,需要一些辅助页面共同承载,在医疗信息化产品中运用的也是十分广泛,想想我们有时候去医院,你有没有注意过医生的电脑,当他在挂号列表中找到你的名字后,就要进行各种操作,例如开药,开检查单,开检验单等,这些如果都是在一个页面上展示,难免显得很拥挤,而且医院的电脑分辨率都普遍偏低,承载不了这么多信息,这时候就需要辅助页面来承载这些信息。



弹窗、抽屉、新页面的优缺点?


弹窗

弹窗的定义就不再说明,一般包含一个蒙版,一个主体及一个关闭入口,弹窗的优势在于通过蒙版跟主页面隔离开,让用户在操作时更聚焦到弹窗的内容避免出错,同时当退出弹窗时还停留在主页面上没有发生跳转,减少应页面跳转带来的加载等待。但是缺点就是阻碍了主页面操作的连续性,过多的弹窗会导致整个页面的用户体验变差。



抽屉

抽屉比弹窗用起来更流畅,减小用户的认知负担,可以从上下左右弹出,但是一般都是从右侧向左推出,点击空白处可以收起抽屉,但是抽屉的缺点相比较弹窗而言没有能让用户视觉聚焦,主页面的信息可能干扰到用户的判断,同时当信息量过少时,由于抽屉的高度相对固定,所以会导致页面过于空白,页面不美观。



新页面

新页面的缺点是显而易见的,跳转到新页面就会面临加载的情况,加载的快慢直接决定整个产品的体验,而且尤其是对于医院这种产品而言,可能好看是次要的,稳定,快才是主要考量的指标,而且不断的跳转新页面不断的有新的标签,用户想要回到一个页面要在里面找很久,对于用户来说体验也是很糟糕的,唯一的优点我想就是能承载更多的信息,减少上下的滚动。



弹窗在医疗信息化产品中都有哪些形式?


这两年做的医疗信息化的产品大概覆盖了医院的方方面面,总结下来大概弹窗在医疗产品中有三种形式出现:信息展示、任务操作、结果反馈。


信息展示

信息展示类弹窗在产品中的应用还是比较广泛的,例如查看患者的详细信息,打印时的打印预览,展示出院,入院的登记表格、以及公卫任务时展示各个排行榜等等,这些弹窗主要用于查看信息、列表等。




任务操作

这类弹窗主要用于产品中医生或者护士对患者的一些操作任务,比如开处方、开检查单、编辑医嘱信息等,这类弹窗大小根据信息多少大小不一,同时按钮也根据业务不同有所差距,如“保存”、“提交”、“发送”等



结果反馈

结果反馈是产品中很重要的组成部分,医疗产品都关乎着患者的生命安全,所以都是确认再确认,当操作不合规或者错误时,会出现一次或者多次的反馈提示,如当医生给患者开药时,其中有种药患者已经登记过是药物过敏,当医生选择这款药时,系统给出反馈,告知不能开出这款药物。这样的反馈能很好的规避掉一些风险。



如何去规范弹窗在页面中的尺寸以及样式?


在解决这个问题之前,我们先来聊聊栅格,栅格在后台产品的设计中运用广泛,栅格的定义和用法现在网上也有很多的文章,运用栅格布局,让产品在不同分辨率中显示有了一个准侧,而弹窗的设计也应该根据栅格来做设计,这样的好处在于通过弹窗在栅格中占的百分比而不是固定宽高,让弹窗在任何分辨率中都有一个合适的大小。



所以弹窗在不用的形式下会呈现出不同的样式与规范。


信息展示类弹窗,一般与主页面有着强关联性,用户召唤即出,不需要则收回,且不阻断用户在主页面的操作动作,所以比较适合侧滑弹窗,从右侧向左划出,根据内容的多少,宽度占4*n个栅格。




任务操作类弹窗,一般需要用户聚焦弹窗信息且需要做相应的表单填写等操作,比较适合居中弹窗,居中弹出,宽度占4*n个栅格,高度上下各留90px。




结果反馈类弹窗,这类弹窗主要用户用户操作的反馈跟警示,样式都是一段反馈类文案,所以宽度固定,高度随内容多少变化,上下各留90px,居中弹出。




总结

这次有关医疗信息化中弹窗应用的探究,是在项目实际问题的基础上,通过查阅资料,请假前辈,以及跟公司技术负责人和产品负责人的不断沟通,最后形成的一套相对完善的弹窗规范,并运用到公司的前端开发以及设计规范中,从而使公司的产品在视觉上更统一,用户体验上也更加的友好。

最后想说说设计师的成长,现在设计师正处在一种焦虑的状态,随大流学习各种技能,转交互,转产品,在我看来,兴趣才是最好的内在驱动力,找到设计中你感兴趣的点,同时找到你自身的优势,通过自身的优势把兴趣打造到极致,我想这是设计师乃至各行各业解决焦虑的一种比较好的方式吧。


欢迎各大佬前辈指导交流,咱们下篇见~

Powered by Froala Editor

更新:2020-06-18

收藏

7人已收藏

背包流浪

保持成长

  • 6

    作品

  • 13

    粉丝

  • 40

    关注

  • 如何从0-1设计一个抽奖交互流程
  • B端产品中的响应式设计
  • 产品体验日记第二期-鲨鱼记账
  • 动效设计-下载动效练习合辑
相关标签
B端复盘总结

    猜你喜欢

      2020-06-18 原创文章 经验/观点 举报 1159 7 4 0

      如何在B端产品中合理利用弹窗?

      0.0°

      你确定要举报如何在B端产品中合理利用弹窗?

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2020年06月18日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      4
      7
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录