Hype 3 教程 搭建本地服务器进行高保真DEMO测试

用户头像
上海/设计爱好者/10年前/1347浏览
Hype 3 教程 搭建本地服务器进行高保真DEMO测试
用户头像
CNYan

Hype 3 教程 搭建本地服务器进行高保真DEMO测试 便于局域网内分享

Hype 3 教程 搭建本地服务器进行高保真DEMO测试


搭建本地简易服务器 实现hype3 输出文件的移动端测试

视觉设计师在使用Hype3 制作完成高保真原型DEMO,可以通过搭建本地简易服务器来进行真实环境测试,目前我主要是用在App的DEMO演示使用。[同一局域网内,外网不可,如外网访问,需要使用外网空间]

另外,hype自家的APP  Hype Reflect 也可以实现 实时的Demo 演示,但是局限性是只能一台设备使用,而搭建了本地服务器后,可通过二维码进行分享,只要是在同一个局域网内的设备通过二维码或者地址都可以轻松访问到高保真的DEMO演示了。 大大提高了分享的效率。


首先,我们需要一个工具:小苹果HTML服务器 

适合谁用 Who?

  • 不会编程的视觉设计师 [展示高保真DEMO]

  • Mobile web前端开发人员: 「本地环境下手机调试」

  • 产品经理: 「局域网内演示app交互程序」

如何使用 How?

1、安装

  • Mac版直接下载解压后丢进应用程序文件夹即可(其实放在哪里双击后都可以正常运行)

  • Window版绿色版,双击 小苹果.exe 即可使用

  • Window安装版,按引导安装完后即可使用

2、本地服务器的配置(相当简单)

  1. 第一个输入框:内选择根目录,即你HTML项目所在文件夹,index.html文件用于默认的首页

  2. 第二个选择框:程序会自动读取IP地址一般不用你选择

  3. 第三个输入框:分配一个端口号,不与其它程序冲突即可,比如8082, 8083, 8084, 8085随便选一个都可

  4. 启动,That's all

3、使用

还有一些具体的介绍 请移步官网

官方网站:http://www.xbole.com


注意:

使用Hype3导出html5文件 到 之前小苹果 设置好的服务器目录文件夹 并把文件名改为 index.html

然后使用手机扫描生成的二维码就可以分享你的高保真DEMO进行测试了。


必须在同一局域网内~~~

必须在同一局域网内~~~

必须在同一局域网内~~~

重要的事情说三遍......

对于一些大牛来说,我这个方法可能有点LOW 但对我这个不会编程的视觉设计师,能会用这个方法,感觉自己已经很不错了。

谢谢


8
举报
|
9
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
抽象液态渐变UI背景模版
科技医疗透明柜UI界面设计
【新年UI图标】钱包icon
新拟态风格 UI设计组件库
我的钱包-UI界面设计-app
【新年UI图标】会员icon
拟物风质感写实UI卡片合集源文件
【新年UI图标】珠宝icon
矢量立体简约UI蓝白图标
3D渐变流体抽象矢量UI背景图
3D卡通UI界面图标可爱插画免扣素
UI通用设计素材1
【新年UI图标】30个图标
【新年UI图标】影音icon
UI 登录界面设计模板包
【新年UI图标】银行卡icon
高级表盘系列UI源文件
智能家居中心 简约 UI设计组件库
【新年UI图标】秒杀icon
高级感金属拟物 UI设计组件库
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
UI界面 组件
盲盒APP UI设计
你可能喜欢
大家都在看
登录注册