您现在的位置: 首页 > 网站导航收录 > 百科知识百科知识

浏览器每次都新开一个网页(B端设计指南-弹窗)

用户,操作,模态浏览器每次都新开一个网页(B端设计指南-弹窗)

发布时间：2019-02-08加入收藏来源：互联网点击：

想用B端几个典型产品的几个案例来解释弹窗、抽屉与新建页

我举一个简单例子，现在你需要去设计一个客户详情页，但是因为客户详情页需要展示大量信息以及表格，同时还会有各种各样的交互行为：“点击、录入、甚至拖拽”，这时候你会怎么选择？现在你觉得采取弹窗就不太合适，感觉抽屉进行展示会更加合理。带着疑问，我们看看市面上不同的产品给出了完全不同的解决办法，当然他们每个产品的侧重点不同，导致最后的结果不同。

纷享销客、销售易——抽屉形式，方便用户切换

它们采取抽屉的形式，因为纷享销客与销售易都是属于aPaas平台[5]，存在用户去设置不同字段以及不同展示逻辑，每个详情页又会存在快速跳转等一系列方便用户同时也会带来交互问题的**“骚操作”[6]**，导致抽屉的选择是大于其他两种弹窗形式。

其次在内容量上，可以从截图上看出，内容大多以文字记录为主，不会存在大段文字以及大图的情况，因此不会存在宽度过宽的情况。

只是在字段数量上会有所增多，导致字段的高度会随之增加，因此满足上面条件的交互控件只有抽屉与新建页。最后在连贯性与切换成本上，明显在CRM产品中，用户需要经常来回切换去对比客户信息以及销售的更进状态，因此在抽屉的体验上，能够让用户进行连贯的用户体验，因此抽屉最为合适。

[5]aPaas平台：aPaaS的全称是application Platform as a Service，即应用程序平台即服务。Gartner对其所下的定义是：“这是基于PaaS（平台即服务）的一种解决方案，支持应用程序在云端的开发、部署和运行，提供软件开发中的基础工具给用户，包括数据对象、权限管理、用户界面等。”

[6]骚操作：主要是aPaas平台可以连续点击同类型的关键词进行相互跳转，实现我们团队内部所说的不断"套娃"，看似很不符合产品逻辑，实际是为了提升用户在详情页中的体验。通过多模态层的设计图就能够明白

Hubspot、Zoho——新建页形式，查看全量信息

Hubspot与Zoho都是国外两款非常出名的CRM，如果在做CRM领域的同学没有体验过的一定要试试首先，因为Hubspot、Zoho是属于国外产品传入中国。

因此在使用习惯上，更偏向于专注去做一件事，比如Hubspot上，在其客户详情页能够直接进行添加日程、拨打电话、发送邮件等几十项操作，并且一切围绕着Marketing、Sales展开，因此使得页面需要更加专注，需要看到更加全量的信息，再次国外Saas用户也是对完整流程的操作更加青睐（一个操作只干一件事），而国内喜欢快捷融合（喜欢有很多快捷操作）因此造成Hubspot与Zoho都采取新建页的形式查看数据（有机会一定与大家聊聊国内外B端产品的差异）

不过非常推荐大家体验hubspot，细节满满～

明道云、Teambition——复杂信息弹窗

它们采取大弹窗的形式，因为两者都是将信息分为左右两部分，左侧信息展示方便用户进行关键信息的阅读，满足用户的实际需求；右侧进行灵活的展示，能够通过不同业务的信息进行相应分配。复杂信息弹窗都会在左上角进行快速切换，通过上下箭头满足用户快速切换的需求。

关于弹窗高度，主要讲的是模态弹窗。我也只是讲行业中现在的集中做法罗列出来，大家根据自身产品进行使用。

顶部固定高度

弹窗与页面左右两边进行居中，所以主要标注的就是弹窗的高度问题，固定高度就是将弹窗整个固定在对应的尺寸高度，一般为120px、160px、200px，根据弹窗尺寸进行相应调整。需要注意，如果是固定高度，一定需要在页面中进行相应标注。同时需要思考弹窗的多个场景场景，否则会造成交互混乱，影响用户使用。

全局居中

全局居中也是最为常见的一种做法，放在用户视觉的正中心，让用户的使用上也更加友好。

在讨论尺寸之前，我们先对市面上主流电脑分辨率进行调研

统计数据来源与百度统计流量研究院

从数据上可以看出，目前市面上的屏幕分辨率占比1920x1080还是占据主导基本上最小的分辨率都为1280x768 （因1024x768占比实在太小，在页面中，可以采取滚动条进行兼容）所以一般将弹窗宽度设置到1000px以内，基本能满足日常需求。

定义弹窗高度：

我们以最小屏幕尺寸：768px来定义，一般浏览器输入框 菜单栏的高度为80px，底部系统工具栏高度为40px768px-80px-40px=约648px

对于页面中自适应的情况所以上需留出固定安全举例，所以弹窗的高度必须小于600px。

定义弹窗宽度：

弹窗宽度会根据内容量，进行宽度的调整，我总结目前常见的弹窗尺寸共有四种。

分别为：small、medium、large、x-large

其实这是一个很久远的话题，因为在我刚开始学设计时踩过弹窗同时出现两个滚动出现的坑，导致现在都还记忆犹新，大家的弹窗出现模态层时，一定要将背景滚动条进行锁定，不然两个滚动条的出现，会导致十分混乱照常和大家唠唠嗑弹窗在B端场景中，起到了很关键的作用，大家可以透过弹窗的思考方式去思考关于整个B端控件层面的信息展现问题。

写作真的很不容易，觉得不错点个赞。你的关注，就是对我的最大鼓励。

我是CE青年

一个2 B行业的2B设计师～

往期文章推荐：

B端设计指南 —— 按钮 究竟应该如何设计

B端设计指南 —— 菜单导航 究竟应该如何设计

B端设计指南 ——筛选 究竟应该如何设计

参考链接：

https://baike.baidu.com/item/对话框

https://www.jianshu.com/p/dbbfd0eb4b2f

https://isux.tencent.com/100个弹框设计小结.html

本文到此结束，希望对大家有所帮助呢。

 4/4   首页 上一页 2 3 4