关于如何把用手机查看原型

画好的app原型如何在手机上体验?

网上有很多方法,但很多都是收费的!分享一下我遇到的问题和解决方法~
温馨提示:一定看完再做,跟着我的步骤会生气哈哈哈哈

原本,我的目的是将原型做成二维码,这样别人可以扫描一下就可以在手机上运行起来~
思路:将原型上传到网上——生成网址——网址转换成二维码

一、画出适配手机屏幕的app原型
这部分内容可以参考“PM浪子”的文章为什么375x667是移动端原型设计的最佳分辨率如何在Axure中正确设置APP原型的尺寸 这两篇文章

二、将原型发布到网上
这里采用guihub这个网站,理由不多说,没用过的人可以百度一下~
PMcoff上也有相关的文章,但是遇到一些问题,这里详细来说一下:

  1. 首先,打开guihub官网,右上角sign up注册账号;
  2. 创建项目:登录成功后,点击右上角的+或者new repository按钮,开始创建仓库,你可以认为那是一个项目。
    在这里插入图片描述
  3. 下载安装客户端:点击set up desktop下载git客户端,然后安装并登录。(首次使用guihub账号需要配置,后面会讲到)
  4. 下载项目到本地:clone刚刚创建的项目到本地目录 file clone repository
    在这里插入图片描述
    这样~guihub上的准备工作就完成了!
  5. 发布原型到该路径下的目录:
    参考文章Axure如何生成适配手机屏幕的APP原型(来源:浪子PM)
    (Axure中 发布 生成html文件)“常规设置那里目标文件夹就是刚刚clone到本地 存放项目的文件夹啦”
    我设置完是这样的:
    在这里插入图片描述
  6. 提交到服务端:回到githubdesk,点击你的仓库,然后会显示哪些文件已修改,然后输入摘要和描述并Commit to master,最后Publish到服务端。在这里插入图片描述借用别人的图,界面有点不一样,但是问题不大~
    这里!!!问题就来了!!在这里插入图片描述
    解释一下:这是提示我没有配置我的用户名和邮箱
    百度找解决方法:git中config配置的增删改查操作。
    方法是打开Git Bash 输入一下命令进行配置(是的,需要下载github 。看起来好像很麻烦,其实是我太啰嗦啦!官网上下载就好了!)
    $ git config --global --replace-all user.email “输入你的邮箱”
    $ git config --global --replace-all user.name “输入你的用户名”
    但是!!我又遇到问题了!!!我太难了!
    当我设置个人信息时,出现了这个error:could not lock config file …/.gitconfig:No such file or directory
    或者可能出现:error:could not lock config file: * no such file D:/Study/Cadence
    这是因为你之前安装Cadence在环境变量中设置了一个HOME的变量名,然后配置git时就默认了这个路径啦!你只要把HOME删了就行了!(变量有用的话就修改一下就行了)反正我直接删啦!

问题解决了,就可以commit然后publish啦!

7.获得网址
回到guihub 官网,点击头像,your repositories找到刚刚的test项目,点击setting进入,然后页面往下拖动到GitHub Pages,将Source设为master branch 并保存(好像是自动保存的),回到GitHub Pages,会显示一行网址https://yourName .github.io/test/,这就是原型网址。

终于获得网址啦~这里再啰嗦几句:

  1. git 账号配置一次就可以啦,任何时候都适用的。
  2. 上传guihub的一个好处就是,原型更新只要发布生成的html文件覆盖原来的,再次上传就行了,网址是不会变哒~
  3. 真的不繁琐,是我讲得啰嗦啦233333

最后,你就可以在手机上体验原型啦!

三、手机查看原型
1.你可以在手机打开网址查看原型了,右下角close在这里插入图片描述
还可以在添加到桌面上,生成一个图标在这里插入图片描述
在这里插入图片描述
这样,目的基本就达成啦!
接下来我完成我的最后一步。
四、生成二维码
这一步很简单,用在线二维码生成器(比如联图网)在这里插入图片描述
把网址copy进去,保存右边的二维码图片,就成功的将原型转换成了二维码啦!任何人扫描一下都可以看~
简历上就可以用二维码的形式附带作品咯~看上去好像很厉害的样子!
我真的觉得自己太太太太太啰嗦了!!文笔不行啊~
在这里插入图片描述
感谢阅读,希望能帮到你!

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值