• 优质范文
  • 工作总结
  • 工作计划
  • 作文大全
  • 心得体会
  • 述职报告
  • 实习报告
  • 写作方案
  • 教案反思
  • 演讲稿
  • 发言稿
  • 读书笔记
  • 精美散文
  • 读观后感
  • 当前位置: 博通范文网 > 读观后感 > 正文

    APP原型图【教你用HYPE3做APP原型的基础过场】

    时间:2018-08-16 来源:博通范文网 本文已影响 博通范文网手机站

    Hype3

    官网:/hype/

    App Store:https://

    场景设定

    示范: iPhone 内建的音乐 App

    教你用HYPE3做APP原型的基础过场1

    1.打开 Hype3 ,官网下载的试用版可以用很久,还有简中接口,先抓下来玩看看,喜欢再买。(这套定价也很便宜!)

    教你用HYPE3做APP原型的基础过场2

    2. 既然是 iPhone 的 Prototype,来改一下场景尺寸。我用的是 640x1136px,画质比较细。

    教你用HYPE3做APP原型的基础过场3

    3. 因为画面是长型的,所以我把时间轴和图层从下方挪到右边去。

    汇入图档

    教你用HYPE3做APP原型的基础过场4

    4. 手机截图,直接扔进 Hype3 里。

    教你用HYPE3做APP原型的基础过场5

    (表示做自己的东西实可以直接拿 Mockup 的 jpg 或 png 图直接上!)

    设定动作范围

    教你用HYPE3做APP原型的基础过场6

    5. 来做「动作触发的范围」,在图上先拉个矩形。

    教你用HYPE3做APP原型的基础过场7

    6. 右边选单设定无填色、无笔划。

    教你用HYPE3做APP原型的基础过场8

    7. 下方 Tab Bar 第 2 颗的位置就有一块透明的区域,也就是「动作触发的范围」。

    教你用HYPE3做APP原型的基础过场9

    8. 设定动作,虽然手机上不会有光标,但我还是喜欢把可触发的区域光标换成手指,在 Browser 预览时可以快速确认自己Link设对了没有。

    教你用HYPE3做APP原型的基础过场10

    9. 记得,所有场景、图层什么的,要重新命名成有意义的名字,当页数和组件一多时才不容易出错。

    教你用HYPE3做APP原型的基础过场11

    10. 像 Keynote 一样,可以一次做了好几个组件,选起来好拷贝到其他场景贴上。

    教你用HYPE3做APP原型的基础过场12

    (图层前后会影响操作和组件显示,如果有时候发现某个地方怎么点都没效果、或是看不到,检查下图层顺序。)

    过场方式

    教你用HYPE3做APP原型的基础过场13

    11. 点着个 BTN、播放中的页面是由右往左推进。

    教你用HYPE3做APP原型的基础过场14

    12. 所以记得把过场动效改成「推动」(由右往左)。

    教你用HYPE3做APP原型的基础过场15

    13. 秒数我习惯设 0.3s,依个人感觉不同,请自己试看看。

    教你用HYPE3做APP原型的基础过场16

    14. 这个 Btn 点下去、会由下往上出现歌曲列表页。记得设定「推动」(由下往上)。

    教你用HYPE3做APP原型的基础过场17

    15. 点了「完成」后,页面会由上往下。

    教你用HYPE3做APP原型的基础过场18

    (当很多页面都有一样的回前页、Tab 的Link要处理时,可以先做完一页,剩下 Copy、Past 就好。)

    汇出 HTML 档

    教你用HYPE3做APP原型的基础过场19

    选 HTML5、活页夹,档名命名好。

    教你用HYPE3做APP原型的基础过场20

    会出现一个 HTML 档和一个文件夹。把这两个档传到服务器上,就可以用手机开网址测试了。

    如果想预览自己做的如何,工具栏上有个 Chrome 或 Safari 的 icon,按下去就是了。不过它不是实时的,每次修改存盘就要再点一次这 icon 重新产生预览,直接点 Browser 重新整理看到的会是修改前的样子。

    原型专用浏览器 —— Frameless

    官网:stakes.github.io/Frameless/

    App Store:https://

    这是个连「状态栏」都没有,真正全屏幕的浏览器。免费!

    输入你的Prototype网址,就可以像真的 App 一样,用手机做测试了。

    祝顺利!

    范例

    上面做的范例请用手机开 goo.gl/0X0sWV,或是扫这个 QRcode。

    教你用HYPE3做APP原型的基础过场21

    最好的浏览方式请用 Frameless 开启。

    (熟练了大约20分钟内绝对搞的定上述步骤。范例有些细节、瑕疵、落差就不调整了。比如由下往上推不该是真的推走,有些更精致的设定我留着下次经验分享。)

    推荐访问:过场 原型 教你用 教你用HYPE3做APP原型的基础过场 hype3破解版

    • 读/观后感
    • 精美散文
    • 读书笔记
    • 演讲
    • 反思
    • 方案
    • 心得体会

    推荐访问

    增量发展跑出“加速度” 经验交流:党建赋能激活“新引擎” 综合行政执法局2024年上半年工作总结及下... 县教育体育局干部队伍建设情况报告 守正创新向未来 在机关青年干部座谈会上发言:自信自强勇担当 县纪委监委开展“校园餐”突出问题专项整... 局2024年上半年全面从严治党形势分析报告 在党建引领乡村振兴工作会议上交流发言:... 在全市物业管理工作专题推进会上汇报发言 2024年上半年发展党员工作总结 县教育体育局2024年上半年改革工作情况汇报 促进党建效能提升 经验交流:科学规范党建领题 在“金秋圆梦爱心助学”暨“希望工程圆梦... 统战部在全市机关党建工作年中推进会上汇... 在2024年全市党校学员管理工作现场推进会... 守规矩”主题党日活动上党课讲稿 部长在组织部机关党支部“学党纪 县城乡环境综合大整治工作开展情况报告 在宣传思想文化工作会议上交流发言:发挥... 某局领导干部2024年上半年落实全面从严治... 基层工会干部教育培训调研报告 争做新时代好青年 心得体会:奋力奔跑逐浪前行 关于乡村振兴示范村建设情况考察报告 市农科院在2024年全市机关党建工作年中推... 党风廉政建设突出问题整改工作总结 党支部落实党风廉政建设主体责任报告 卫健委在2024年全市法治政府建设重点任务...