如何在B端产品中合理利用弹窗？
这是我关于目前工作中有关B端产品的一点感悟，也是这类文章的第一篇，后面会争取输出更多的有质量的文章，欢迎大家一起探讨鸭。
写在前面的话
这是我入行的第四个年头，也是在医疗信息化这个领域的第二个年头，从一开始的懵懵懂懂接到原型就开始画表格，画表单，到现在开始从设计中剥离开来，开始思考，我究竟能为这个行业的发展带来些什么，如果只是一味的画那些没有什么视觉冲击感的表格跟表单，我想任何一个会点设计软件的设计师都能够胜任。所以现在我开始回味这两年做的产品，开始深入了解医疗信息化这个行业，开始通过查阅资料，请教前辈、同事的方式，来为我这两年做的产品复盘，目的在于规范产品的细节跟用户体验，并输出相应的文章，我希望通过这样的方式，能让我在医疗信息化，在B端产品中不断的沉淀，也希望通过这种方式让前辈来批评指教，不断成长。
我遇到的问题
最近刚结束一个新的项目，在做页面评审的时候，前端主管指出是不是要规范下弹窗的样式跟尺寸，其实之前给另外一个系统做视觉规范的时候有做过一版，但是都是一年前的事情了，当时也没有形成具体的规范文档或链接，后面前端人员不断更替，就开始随意定义弹窗的尺寸跟弹出形式(居中弹出或者推出)，所以就借着这个机会，我开始思考弹窗在B端产品中的应用，究竟什么时候该用弹窗以及弹窗都有什么形式跟规范？
辅助页面在当前的医疗信息化产品中都有哪些运用？
辅助页面，通俗的讲就是主页面信息放不下，需要一些辅助页面共同承载，在医疗信息化产品中运用的也是十分广泛，想想我们有时候去医院，你有没有注意过医生的电脑，当他在挂号列表中找到你的名字后，就要进行各种操作，例如开药，开检查单，开检验单等，这些如果都是在一个页面上展示，难免显得很拥挤，而且医院的电脑分辨率都普遍偏低，承载不了这么多信息，这时候就需要辅助页面来承载这些信息。
弹窗、抽屉、新页面的优缺点？
弹窗
弹窗的定义就不再说明，一般包含一个蒙版，一个主体及一个关闭入口，弹窗的优势在于通过蒙版跟主页面隔离开，让用户在操作时更聚焦到弹窗的内容避免出错，同时当退出弹窗时还停留在主页面上没有发生跳转，减少应页面跳转带来的加载等待。但是缺点就是阻碍了主页面操作的连续性，过多的弹窗会导致整个页面的用户体验变差。
抽屉
抽屉比弹窗用起来更流畅，减小用户的认知负担，可以从上下左右弹出，但是一般都是从右侧向左推出，点击空白处可以收起抽屉，但是抽屉的缺点相比较弹窗而言没有能让用户视觉聚焦，主页面的信息可能干扰到用户的判断，同时当信息量过少时，由于抽屉的高度相对固定，所以会导致页面过于空白，页面不美观。
新页面
新页面的缺点是显而易见的，跳转到新页面就会面临加载的情况，加载的快慢直接决定整个产品的体验，而且尤其是对于医院这种产品而言，可能好看是次要的，稳定，快才是主要考量的指标，而且不断的跳转新页面不断的有新的标签，用户想要回到一个页面要在里面找很久，对于用户来说体验也是很糟糕的，唯一的优点我想就是能承载更多的信息，减少上下的滚动。
弹窗在医疗信息化产品中都有哪些形式？
这两年做的医疗信息化的产品大概覆盖了医院的方方面面，总结下来大概弹窗在医疗产品中有三种形式出现：信息展示、任务操作、结果反馈
信息展示
信息展示类弹窗在产品中的应用还是比较广泛的，例如查看患者的详细信息，打印时的打印预览，展示出院，入院的登记表格、以及公卫任务时展示各个排行榜等等，这些弹窗主要用于查看信息、列表等。
任务操作
这类弹窗主要用于产品中医生或者护士对患者的一些操作任务，比如开处方、开检查单、编辑医嘱信息等，这类弹窗大小根据信息多少大小不一，同时按钮也根据业务不同有所差距，如“保存”、“提交”、“发送”等
结果反馈
结果反馈是产品中很重要的组成部分，医疗产品都关乎着患者的生命安全，所以都是确认再确认，当操作不合规或者错误时，会出现一次或者多次的反馈提示，如当医生给患者开药时，其中有种药患者已经登记过是药物过敏，当医生选择这款药时，系统给出反馈，告知不能开出这款药物。这样的反馈能很好的规避掉一些风险。
如何去规范弹窗在页面中的尺寸以及样式？
在解决这个问题之前，我们先来聊聊栅格，栅格在后台产品的设计中运用广泛，栅格的定义和用法现在网上也有很多的文章，运用栅格布局，让产品在不同分辨率中显示有了一个准侧，而弹窗的设计也应该根据栅格来做设计，这样的好处在于通过弹窗在栅格中占的百分比而不是固定宽高，让弹窗在任何分辨率中都有一个合适的大小。
所以弹窗在不用的形式下会呈现出不同的样式与规范。
信息展示类弹窗，一般与主页面有着强关联性，用户召唤即出，不需要则收回，且不阻断用户在主页面的操作动作，所以比较适合侧滑弹窗，从右侧向左划出，根据内容的多少，宽度占4*n个栅格。
任务操作类弹窗，一般需要用户聚焦弹窗信息且需要做相应的表单填写等操作，比较适合居中弹窗，居中弹出，宽度占4*n个栅格，高度上下各留90px。
结果反馈类弹窗，这类弹窗主要用户用户操作的反馈跟警示，样式都是一段反馈类文案，所以宽度固定，高度随内容多少变化，上下各留90px，居中弹出。
总结
这次有关医疗信息化中弹窗应用的探究，是在项目实际问题的基础上，通过查阅资料，请假前辈，以及跟公司技术负责人和产品负责人的不断沟通，最后形成的一套相对完善的弹窗规范，并运用到公司的前端开发以及设计规范中，从而使公司的产品在视觉上更统一，用户体验上也更加的友好。
最后想说说设计师的成长，现在设计师正处在一种焦虑的状态，随大流学习各种技能，转交互，转产品，在我看来，兴趣才是最好的内在驱动力，找到设计中你感兴趣的点，同时找到你自身的优势，通过自身的优势把兴趣打造到极致，我想这是设计师乃至各行各业解决焦虑的一种比较好的方式吧。
欢迎各大佬前辈指导交流，咱们下篇见~
