善用Axure写PRD,把原型放到手机里查看

从零开始学运营,10年运营老司机带路,2天线下集训+1年在线学习,做个优秀的运营人。了解详情

前几天讲了《为什么375×667是移动端原型设计的最佳分辨率》,然后《如何生成适配手机的原型》,以及《如何设置手机APP原型尺寸》。这一篇讲解如何将原型放到手机里面查看,先分享效果电脑打开网址手机打开网址

核心是应该是把原型发布到网络上。

一方面可以用手机查看原型并模拟用户使用APP的交互体验;另外一方面,让技术随时随地能够查看原型并写代码。

为什么选择Github

其实将原型发布到网络上的方法有很多种。

之所以选择Github,有以下几个原因:

  • 查看原型的主要是程序员,而大部分技术团队都在使用git或者svn来管理代码、你用github会让他们更认可你的能力。
  • Github的大部分功能是免费的,足够PM展示原型的需求。
  • 如果新原型出错,Github可以让你随时回退原型到以前的版本。
  • 方便双方撕逼,因为每一次原型都存档并记录在服务器上。

注册Github

打开https://github.com,输入相关资料注册一下,或者右上角Sign up。

创建项目

登录成功后,点击右上角的+或者new repository按钮,开始创建仓库,你可以认为那是一个项目。

下载和安装客户端

点击set up desktop下载git客户端,然后安装并登录。

下载项目到本地

clone你刚刚创建的项目到本地目录,很简单的。

发布原型到该目录

打开Axure生成原型到该目录,注意原型的尺寸需要单独设置。详见上篇文章《善用Axure写PRD,如何设置手机APP原型尺寸》。

提交到服务端

点击你的仓库,然后会显示哪些文件已修改,然后输入摘要和描述并Commit to master,最后Publish到服务端。

查看源代码

右键左边的项目进入它对应的主页,此时项目变成了这样。

开启网页访问功能

点击setting进入,然后页面往下拖动到GitHub Pages,将Source设为master branch并save。

得到原型的网址

保存成功之后回到GitHub Pages,会显示一行网址https://wbfbest.github.io/quickmeeting/,这就是原型网址。

手机查看原型

将该网址发布到手机上,然后关闭左下角的close,此时就可在手机浏览器上查看原型。当然最好生成到桌面查看效果。

比较原型版本

如果有需要的话,可以比较原型的版本。

总结

网上有通过命令行来发布原型到git的文章并且太偏技术语言了。不太适合PM同学来学习使用。所以单独从可视化的角度来写了这篇文章。

另外,通过使用github可以了解程序员是如何提交代码合并分支,对PM是件好事。

相关阅读

善用Axure写PRD,移动PM需要梳理这些流程图

善用Axure写PRD,全局规范一个都不能少

善用Axure写PRD,彻底丢弃Word和PPT

善用Axure写PRD,APP文本框通用的输入规则

善用Axure写PRD,PM应该知道的APP授权知识

善用Axure写PRD,2种模式7种方法解析页面加载逻辑

善用Axure写PRD,产品逻辑的5种呈现方法

#专栏作家#

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

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

祝给予赞赏的伙伴,2017年发大财!
5人打赏

评论( 31

写下你的想法
  1. 前生得罪程序员今生再虐设计师

    有两个问题想问问浪子哥:
    1:在上传的目录下更新HTML,github端是覆盖掉原来的文件还是新增文件,发布原型文件理论上也会在本地生成一份这个时候又是覆盖还是新增?
    2:对于有SVN管理的团队,或者局域网工作的团队用在本地搭建web服务器共享文件,或者自己购买域名服务器迭代文件,与这个方法比较的优缺点

    回复
  2. 前生得罪程序员今生再虐设计师

    下载客户端之后要在option里面再验证一下自己的身份不然传不上去,传送的速度有点慢,整体体验没有在虚拟服务器上传访问好

    回复
  3. 这个建完的项目怎样删除

    回复
    1. 回复

      进入要删的repository, 点settings tab, 一直往下拉, 你会看到一个很大的button, 有红色的字Delete this repository. :)

  4. 好是好 但是移动端显示模式效果不佳呀!

    回复
    1. 回复

      不会用罢了,你研究其他几篇相关文章即可。

  5. 为什么我的GIT上传时候提示*** Please tell me who you are.

    Run

    git config –global user.email “you@example.com”
    git config –global user.name “Your Name”

    to set your account’s default identity.
    Omit –global to set the identity only in this repository.

    fatal: unable to auto-detect email address (got ‘oukinkusunoki@localhost.(none)’)
    (128)

    回复
    1. 回复

      请按照我的步骤来操作

    2. 回复

      就是到发布原型到该目录时,我的是直接在桌面你的怎么是Github那个文件夹?

    3. 回复

      我别的都是按照顺序就这个有点区别是这个问题吗?

    4. 回复

      嗯,有影响的。你操作有误。

    5. 回复

      浪子大哥有没有,完整的App,prd文档啊,这几天,公司刚刚开发了,一款贷款App,我是刚刚入行产品助理新手,产品经理要我写整个App的PRD文档。能不能发一份我邮箱,1337589014@qq.com谢谢啦浪子大哥!

  6. 请问一下这个会泄露你的原型吗?公司项目隐私问题

    回复
    1. 回复

      这个是open的,可以使用付费版,也可以使用产品大牛的付费版本功能。

    2. 回复

      不付费的话就是公开的吗?

    3. 回复

      可不可以自定义HTML地址?

  7. 一直在摸索,一直在浪,从未停止。

    其实产品大牛也可以。

    回复
    1. 回复

      是,但是没有直接地址,非要多一层跳转。

  8. 请问下更新原型应该怎么做?是每次都在那个路径生成html吗?

    回复
    1. 回复

      嗯,使用老地址即可。

  9. 大师兄好,我是产品小白,想请问竞品的下载量在哪可以查询?推荐下工具吧,谢谢~

    回复
    1. 具体的肯定只有内部人才知道,可以大概猜测https://www.appannie.com/cn/

  10. 请问下为什么我用Axure画的原型在网页上位置不固定呢?本身我用Axure画的时候X,Y轴是固定好了的呀

    回复
    1. 回复

      怎么个不固定法。。。

    2. 回复

      浏览器兼容问题吧 用火狐试试

  11. 这个软件win10不兼容啊,怎么办?

    回复
  12. 公司封了github 哈哈哈哈哈哈

    回复
    1. 回复

      什么公司,竟然会封这个。。。

    2. 回复

      互金 因为之前有人把公司代码传到github

  13. 自由职业者

    原型要是高保真的就更好了

    回复
  14. 学习了

    回复

推荐阅读