产品教练 · 老陈 
 
一名摸鱼14年的35+产品经理,依然奋战在前线,2020年建了产品教练,坚持了3年多,自学编程,开发应用,设想在40岁之前开发属于自己的产品,花费三年设计了12个产品知识库和知识体系,专注结构化的产品知识库和产品经理最佳实践经验分享,助力产品经理成长。
 
 

 

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

现在写需求比较流行的方式,是在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官网

关于下载

本站分享的产品前端、B端竞品和所有付费资源,均不是该资源的价格,本身资源是不用付费的,这是赞助知识库资源模板的收集整理、服务器维护的基础开销费用!


免责声明

1、本站分享的产品前端、B端竞品和产品知识库主要来源于网络的公开信息,均为网络搜索,微信缓存,免费下载,互联网平台整理而来,产品知识库的资料文档仅限用于学习交流。如若有侵权你的知识版权的嫌疑,请及时告知我们,我们会在24小时内进行删除。联系管理员:2841552294@qq.com
2、上述资源和模板的知识产权及相关权利归作者及制作公司所有。
3、上述资源和模板仅供学习参考及技术交流之用,未经源码的知识产权权利人同意,用户不得进行商业使用。
4、上述资源和模板如需商业使用,请自行联系源码知识产权权利人进行授权,否则,我们将积极配合作品知识产权权利人 一起维权。
5、上述资源和模板如有侵犯您的知识产权,请您立刻联系我们,我们会在24小时内做删除下架处理。