对于B面项目辅助页面设计，采用哪种交互方式使产品页面更好？整体互动是否更统一？作者会组织总结项目经验和相关知识，希望对你有所启发。

B面设计的体验升级不是为了打磨高质量的交互体验，而是为了统一体验。B端产品业务复杂的用户体验讲究效率。除了主页面，还有很多辅助页面帮助用户完成功能操作。此时，这些辅助页面以何种形式呈现尤为重要。

目前有弹出、侧滑、跳转到新页面三种展示模式供设计师和产品选择。有时候认为三种显示模式中选一种都没什么大问题。但是，基于尼尔森可用性十大原则中的“一致性和标准”，我们非常有必要清楚地了解这三种显示模式的定义和适用场景，以便更好地为我们的页面服务。

共享内容

弹窗抽屉跳转页面需求内容合理规划总结

首先，弹出窗口

1.定义

轰炸是一种提醒、决策或解决任务的互动方式。弹出式框架通常包括遮罩、主体和封闭的入口，这在网页和移动终端中是常见的。优点是用户可以更专注，不必离开当前页面，完成任务更快更容易。

弹出窗口分为模态和非模态。非模态是用来提醒用户内容的。这里我们研究中断用户操作的模态弹出窗口。

2.尺寸怎么确定？什么时候使用？

在讨论如何确定弹出窗口大小之前，我们先调查一下市面上主流电脑的分辨率统计。

定义弹出窗口高度:

我们将其定义为最小屏幕尺寸，屏幕高度减去导航栏、菜单栏和内容区为620px。弹出窗口高度必须小于620px，上下安全距离要固定，便于页面适配，中间区域要适配。

定义弹出窗口宽度:

以1440的屏幕宽度为例，我们定义了网格系统。在自定义内容区，弹出窗口的宽度由网格数决定，即n*列宽+(n-1)*间距宽度。

使用场景:

对话框是用户在不离开主路径的情况下快速进行简单操作、确认用户信息或给出反馈提示的辅助窗口。(摘自融合设计)

总结起来就是:

页面内容较轻，可快速回上级页面页面相对独立，可不参照上级页面内容适合解决较为简单一次性操作内容

3.项目符号框架中不可忽视的几个细节

尽量避免弹窗上叠加弹窗弹出弹窗时锁定背景页面禁止跟随弹窗滚动原路返回，由哪个页面弹出弹窗，关闭弹窗后显示哪个页面新的交互方式有待我们共同探索

第二，抽屉

1.定义

抽屉是一种互动方式。当需要一个额外的面板来控制父页面内容时，这个抽屉会在需要时调用。

抽屉通常包括在网页和移动终端中常见的面罩、主体和封闭入口。您可以自定义四个方向:上、下、左、右。一般右侧最常见。

滑动抽屉连贯性强，适合显示与原页面结构连贯的内容。

2.使用场景？

抽屉弹出交互模式的运营成本和用户心理负担要小得多，比如iOS人际交互指南中的“Action Sheets”，MaterialDesign中的“background”，包括网页和Chrome浏览器中添加标签的交互模式，以及Antdesign中的Antdesign Pro改变颜色和主题的预览。他们完全可以使用弹出窗口，但出于上述目的，使用了类似的侧面弹出的交互模式。

场景一：Dialog 组件并不满足我们的需求, 表单很长, 或是你需要临时展示一些文档, Drawer 拥有和 Dialog 几乎相同的 API, 在 UI 上带来不一样的体验。场景二：需要附加面板来控制父窗体，这个面板需要时呼出。场景三：在当前任务流中插入临时任务，创建或预览附加内容，例如协议条款。

3.注意使用

抽屉页面上可以更深一步操作弹出弹窗或再叠加一个抽屉弹出弹窗时锁定背景页面禁止跟随弹窗滚动原路返回，由哪个页面弹出弹窗，关闭弹窗后显示哪个页面避免中间弹窗跳转抽屉弹窗的交互方式

第三，页面跳转

1.定义

常见的页面跳转方式有直接跳转、左右跳转、上下跳转等。在重新设计时，需要考虑其中的关联性，给出最符合用户心理预期的过渡模式，从而做出最合适的设计。
跳转页面有两种方式。页面浏览器地址栏中的url在调用转发时不会改变，但在重定向时会改变。

2.使用场景？

场景一:当页面携带内容过多或者需要打开新的URL链接时，

场景二:当前页面与要操作的页面无关

网页跳转的方式

跳转方式有直接跳转、左右切换跳转、上下跳转、翻转跳转、联动跳转、放大缩小跳转(iOS微信微信官方账号浮动窗口)、搜索框跳转等几种。【/br/】其中直接跳转是最原始最直接的跳转方式，在web上非常常见，实现难度和维护成本都非常低。

3.注意使用

跳转新页面时需要有较为明显的返回上级页面的按钮注意区分像弹窗的页面，和像页面的弹窗

第四，合理规划需求内容

1.虚心务实地学习商业

B端产品的设计需要一个精致严谨的效率思维。如果你想设计一个易用且合适的页面，首先你要彻底了解自己设计工作的业务细节，从你的产品和R&D同事那里详细了解产品需求，理清各个功能的业务逻辑，必要时甚至了解开发实现模式。

在确认需求的过程中，我们可以想象页面呈现方式既能满足需求方的业务逻辑，又能兼顾用户对页面的理解。

2.对页面进行总结和分类

得到原型后，就可以对新增、编辑、详细的页面进行整体规划。如果页面较多，内容复杂，可以根据事先定义好的布局来定义页面布局和设计。

例如，安全产品图经常被使用。由于数据加载时间等问题，开发人员根据需要与前端人员讨论设计布局，不仅是一种很好的体验，也很方便。

3.统一现有的交互规范

b端产品逻辑复杂，功能众多，迭代频繁。对于新增加的功能，考虑到之前类似的页面处理方式，重用可重用的组件规范，增强产品体验的一致性，减少开发人员不必要的工作量，快速响应需求完成迭代。

动词 （verb的缩写）内容摘要

1.了解自己，了解自己

己：需要对每种样式使用方式与注意事项有所了解彼：对产品的业务需求有所认知，对研发实现方式有一定了解
综合考虑设计出好用又统一的页面，避免不必要的重复性工作。

2.体验统一

对于以哪种风格展示页面有一个科学有说服力的解释，注意交互体验的一致性，为了一致性而注意不要一致。效率第一，满足业务需求第一。

考虑它们之间的关系，给出最符合用户心理预期的过渡模式，可以帮助我们找到最合适的设计。

3.未来趋势

网络技术不断影响着我们的工作和生活，移动终端也引领着设计潮流，追求体验一致性，已经衍生出了响应式Web Design的布局解决方案，因此Web设计越来越具有移动性。

可以想象，将会有一股巨大的移动体验浪潮向网页设计移动，比如弹出框中的多层次，通过左上角返回的交互体验，更加敏捷细腻的动画效果等等。我相信也会有更容易使用和维护的呈现方式。

视觉体验上大屏幕和全屏页面显示的普及都在追求简单的设计，ui界面也越来越轻。我们拭目以待。