【最佳实践】设计一个沉浸式阅读的PRD框架

• 【最佳实践】何正确有效的使用AI流程图

• 【最佳实践】如何有效解决需求评审的反馈和记录？

• 【最佳实践】设计一个带交互的通用管理后台框架

接下来分享的内容基于通用管理后台框架，如果之前不了解的点击上面的链接去先看看。

现在写需求比较流行的方式，是在Axure原型上，直接写批注的方式呈现需求文档

如果是APP的产品原型，然后批注详细的需求文档，对开发人员来讲是比较友好的

但是在管理后台的产品原型上，如果你想批注详细的需求文档，有时候需求要描述的东西很多，写着写着就老长，不单单影响阅读体验，还不好维护。

预览效果

https://apps.pmmaster.cc/preview/40

那么接下来我们来设计一个轻量级的需求文档，满足沉浸式阅读的体验，也满足长文档的编写和阅读，也能实现结构化的呈现。

设计之前你需要了解

1、先了解通用管理后台框架

2、注册语雀，赠送1个月会员

产品教练邀请你加入语雀，注册后在会员信息页填写邀请码 KR6IR6 即可领取 30 天语雀会员。前往注册：https://www.yuque.com/about

3、如果不喜欢用语雀，用其他在线文档也是可以的。

现在开始，在通用管理后台框架的原型基础上，加上阅读需求文档的功能。

第一步：添加母版

因为我们实在指定功能原型上去阅读文档，所以是一个功能页面对应一个需求文档。

选择【母版】，添加，重命名为对应的功能名称，即可

第二步：添加需求按钮

从元件库-按钮-图标按钮，拖放到母版的画布

会出现很多的按钮样式，我们选择第一行第二个，按钮比较大，带图标，其他的删除即可

接下来做几个调整

1、设置按钮的坐标是0.0

2、更换图标

3、文本修改为：需求文档

4、设置为动态面板

5、选中动态面板，设置面板名称为“需求按钮”

6、设置固定到浏览器

7，母版添加到功能页面

随便拖放到任意一个位置

8、F5预览，查看效果

按钮稳稳的显示在屏幕的右侧中间

第三步：添加需求面板

我们希望点击按钮后出现一个需求文档的，需求是写在在线文档，所以需要用内联框架在加载，在内联框架上面，加一个标题栏，有一个收缩的操作，用来隐藏需求面板

1、标题栏

• 宽度为60，高度无所谓，后面会通过交互去自动适配屏幕高度

• 背景色为浅灰色，边框设置为0

2、标题

• 字号20，加粗，黑色

3、按钮

按钮使用元件库的，可以自己根据需要去放一个任意外观的按钮，主要作用是将面板隐藏

4、内联框架

• 隐藏边框，边框太丑了

• 默认根据需要去滚动，当文档内容很长，就会出现滚动

• 加上边距，左边和上面加上边距，避免文档内容，挨着边框很丑。这里根据使用不同的在线文档，进行设置，如果使用语雀，建议左边和上边留出10的间距

5、创建需求面板

选中标题栏和内联框架的所有内容创建动态面板

6、设置需求面板

• 将面板命名为“需求面板”

• 将面板设置为隐藏，这样在一开始的时候，需求文档是不是显示的

• 固定到浏览器，设置在右边顶部显示

• 设置背景色为白色#ffffff

7、设置完成后，目前预览是只能看到按钮，无法看到面板，还需要增加更多的交互设置

第四步：添加交互

1、需求按钮交互

• 按钮点击时，显示需求面板

• 设置滑动和遮罩效果

2、按F5预览，看到面板已经弹出，基本效果已经实现，但是目前还没有内容，所以是空白

3、收缩按钮交互

• 点击搜索按钮，将需求面板隐藏

• 动态效果是向右滑动

4、设置需求面板的高度自适应

打开母版，设置需求面板的高度为屏幕高度

5、设置文档内容为屏幕高度-60-10,60是标题栏的高度，10是上间距

第五步：使用需求文档

1、先确保，对应的功能页面，拖放一个对应的需求文档母版

2、设置文档连接

打开母版，选中内联框架，设置方法如下

• 双击内联框架

• 添加框架目标

输入一个你需要展示的在线文档链接

3、F5预览，效果就出来了

预览效果

https://apps.pmmaster.cc/preview/40

设计文件不支持下载，可以自己按教程设计一个即可，又不是很难

本篇文章来源于微信公众号: 产品教练

主题授权提示：请在后台主题设置-主题授权-激活主题的正版授权，授权购买：RiTheme官网