善用Axure写PRD,全面通用的移动端产品规范V2.0

35 评论 67817 浏览 1125 收藏 6 分钟

对于初级PM,会被动的感觉到技术会反复的问一些共性问题,比如页面如何加载、如何跳转,网络不好如何呈现,是否需要全局埋点统计数据。对于高级PM,会主动的整理出一套通用的产品规范来处理APP的各种设计问题,甚至参与到搭建和重构客户端框架。

产品规范的由来

像UI设计师有统一的视觉规范、UE设计师有公认的交互规则、服务端RD自己的设计模式,客户端RD有各种前端框架调用。

而在当下的互联网环境下,PM其实一直没有所谓的通用产品规范。也许是因为PM大部分是非科班出身,有可能是因为工作范围太模糊,更有可能是因为PM需要介入每个环节而无法专精。

我根据自己的PM经验,将这几年的产品文档剥离掉具体业务,整理了一套全面通用的移动端产品规范,希望对大家有点帮助。

产品规范是是什么

定义产品在原型、视觉、交互、实现等阶段,需要团队成员遵守的通用规则。

为什么是V2.0

之前写过《PRD1.0分享:全面通用的移动端产品需求文档》,里面其实包含不少这方面的知识。这次分享更加系统化,并且力求以很好的结构思维来呈现。

预览我的PRD规范

在线查看唯一更新网址,获取原型点击下载

功能规范

设计功能的时候应该遵循的规范,慢慢整理中。

比如功能尽量模块化,尽量解耦。

比如很多功能应该采用SDK,而不是自己开发。

比如时间显示应该有统一的规范,不应该一会儿是1分钟前一会儿是60秒前。

原型规范

包括设定原型的尺寸,创建原型,发布原型,查看原型的步骤。之前写过相关的文章,《为什么375×667是移动端原型设计的最佳分辨率》,《如何设置手机APP原型尺寸》 ,《如何生成适配手机的原型》。

视觉规范

指视觉元素需要遵循统一的视觉设计规则,所谓UI元素是我们应用程序里可以看见的任何可视内容。

页面

页面按照使用类型来划分,大概有启动页、闪屏页、故事板、主界面、Hybird页,普通页面。

一般分为状态栏、导航栏、搜索栏、工具栏、标签栏。

控件

太多了,常见的有文本框、按钮、表格、图片,具体的请下载原型或者查看在线原型。

临时视图

需要让用户停下当前操作的必须操作,一般显示在页面上一层。

比如警告框,用于告知用户一些会影响到他们使用APP或设备的重要信息。

内容视图

内容视图是整个APP信息展示的主要形式,比如列表、卡片、集合视图等。

顾名思义,用来展示内容。

交互规范

包含页面的交互、状态的切换、如何定义热区范围、边界问题、常见输入字段。详见之前的文章《APP文本框通用的输入规则》。

非功能性需求

软件产品为满足用户业务需求而必须具有且除功能需求以外的特性。

命名规范

命名规范的作用

PRD的目的是定义产品和传达需求,表达形式其实就2种图+文。对图文的命名直接影响着需求是否能够准确传达。

总结

以上内容是从PM的思路来通盘考虑产品开发的每一个阶段,梳理出的交付给UI、RD的PRD规范。其实还不够有深度和全面,甚至大纲还可以继续拓展。

某种程度上你可以认为这是一份提供给PM童鞋设计产品的SDK工具包,大部分内容可以直接拿到自己的APP项目中应用。

#专栏作家#

浪子,业务型PM,浪子PRD系列51prd.com,公众号langzisay。

本文由 @浪子 原创发布于人人都是产品经理。未经许可,禁止转载。

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
海报
评论
评论请登录
  1. 跪求文档,287503299@qq.com,谢谢

    来自上海 回复
  2. 要是能分享一个原型就好了,单看文章虽然明白,但是具体内容还是不清楚

    来自江西 回复
  3. 公众号搜索不到哦~

    来自北京 回复
  4. 很详细

    来自广东 回复
  5. 非常感谢帮了大忙

    来自广东 回复
    1. 不客气哈,可以打个赏

      回复
  6. 要花钱的哈。知识变现,666

    来自山西 回复
  7. 点击原型下载,页面报错哇

    来自江苏 回复
    1. 没有啊,我刚刚测试了是ok的。

      来自上海 回复
    2. 确实是OK的

      来自广东 回复
  8. 跪求文档!!!!351999238@qq.com

    回复
  9. 好文

    回复
  10. 您好,想请教一下,为何下载下来的PRD模板解压后都是HTML的文件。我该怎么在Axure里面运行呢

    来自上海 回复
    1. 因为我分享的是原型,所以格式自然是html了。这个不可以直接在axure中运行。
      可以运行的是axure的rp源文件,你可以关注我的公众号langzisay,里面有下载的方法。

      来自上海 回复
    2. 好的,已关注,谢谢!

      来自上海 回复
  11. 写的好专业

    回复
  12. 都是这样在axure中prd好详细

    回复
  13. 跪求prd文档学习,不胜感激!910306191@qq.com

    回复
  14. 能发个PRD吗?不胜感激。邮箱48806272@qq.com

    回复
    1. 原型地址是https://www.jianguoyun.com/p/DcbBFJAQu4zdBRik0yg,文中不是提供了吗?

      来自上海 回复
    2. 谢谢

      来自北京 回复
  15. 跪求PRD文件么?18234074294@163.com,谢谢,辛苦啦 😥

    来自北京 回复
  16. 视觉规范-页面-Hybird页,是不是打错字了,Hybrid?

    来自上海 回复
    1. 没有哦,hybird是混合式网页的意思。

      来自上海 回复
    2. 是hybrid,并没有hybird这个单词

      来自北京 回复
    3. 反复搜了一下,应该是很多人都打错了。
      你说得对,应该是Hybrid。

      来自上海 回复
  17. 求prd文件,diy615@163.com ,辛苦啦,感谢

    来自上海 回复
  18. 可以发一下prd文件吗,jzh_1982@126.com,谢谢

    回复
  19. 谢谢

    来自北京 回复
  20. 能不能在axure页面上怎么更清晰的写PRD的图片放两张看看?自己也做了不少,但是有些感觉不太好看,想学习一下。

    来自北京 回复
    1. 没看懂你的问题,麻烦描述清晰一点哈。

      来自上海 回复
    2. 跪求prd文件。万分感谢!
      xiaoxiao_1156@163.com

      回复
    3. 原型地址是https://www.jianguoyun.com/p/DcbBFJAQu4zdBRik0yg,文中不是提供了吗?

      来自上海 回复
    4. 想学习下PRD文件,发下邮箱zlmshu@qq.com。不胜感激!

      回复