原型设计转html5,H5的交互原型设计

现在市面上有很多诸如Axure、Shireframe、Pencil Project等产品原型设计软件，每个产品都有其独特的优越性，目标都只有一个：高效产出可测试、可交互的产品原型。

毋庸置疑，这些软件的功能都十分强大，但是事实上并没我们想象中的高效，除开都需要完成软件的下载安装捆绑等繁琐操作外，便携性差是他们最令人不满的地方。

就比如老板急需要你在手机上给他展示新制作的APP原型，而你艰辛地在Axure上把原型文件导入到手机中，在手机打开却需要花费几分钟，且浏览时发现效果甚差——动画卡、链接按钮丢失、画面显示不全...同时满足高效、可测试、可互动、方便老板浏览做决策等特点就需要选用一些辅助用的工具或软件了，而HTML5工具似乎是不二的选择。

纵观国内的HTML5制作工具，做得比较好的有易企秀、iH5、MAKA、爆米兔等，几款工具各有利弊但鉴于其交互性的实现，个人还是倾向于iH5。这款工具并非是专业的原型制作工具，它只是能通过高效产出一个产品原型的H5，来弥补Axure等专业工具所不具备的便携式掌上展示功能(特别是动画、动效、交互等元素的展示)，以此作为辅助性使用。之前有用过爆米兔给同学做校招的笔试题，网易春招的有道考神，效果还蛮不错的哦~~

下面向大家展示本人用该HTML5工具临摹的instagram APP中的一些交互界面(事先在手机上把各界面截图导出到电脑，然后用PS作切片处理)，以及叙述相应的逻辑：

页面跳转：页面的跳转主要用的逻辑为：透明按钮——置顶同层控件——显示/隐藏页面

个人作品页

以点击第一个icon和第二个icon的页面跳转为例，我们需要把已切片的素材导入，先隐藏初始不用显示的页面。在下方icon栏处设置画布，且对应地设置透明按钮，目的是为了用透明按钮+事件的逻辑实现页面跳转。

对于icon栏的切换，除了可以用iH5的时间轴+遮罩功能来实现，可以用“同层控件置顶”功能：在需要点击的按钮下设置事件，将对应的控件顶置即可。

另外这个工具带有“动效”功能，常见的向左进入、向右退出等动效都有，所以我们可以在页面下放置一个进入和退出的动效即可。

2.页面滑动：

页面滑动交互的主要逻辑为：固定顶、底栏——滑动时间轴——长图头尾设置轨迹关键帧

时间轴

首先固定首尾栏，设置滑动时间轴，在滑动时间轴下放置用于上下滑动的长图，用轨迹控制长图的头和尾的位置(在时间轴上添加轨迹的关键帧add，然后点击头帧和尾帧设置坐标属性)。值得注意的是，滑动时间轴的属性栏下的“自动跳转控制点”应选为NO。如果勾选该选项，我们在滑动的过程中松手，长图会自动跳转到顶部或者尾部。

3.页面嵌入视频：

页面嵌入视频交互的主要逻辑为：透明按钮——事件控制播放/暂停

视频规格似乎是限定MP4格式且不大于50M，在设置属性时取消自动播放，通过在播放的图标上设置透明按钮让用户点击触发视频播放和暂停。当然这个播放图标也可以用时间轴+轨迹的配合实现图标闪烁、呼吸型伸缩等提示效果。

首页

当然有很多页面我还没详细表达出来，包括：页面内的动画交互、图片预览时的放大收缩等，这些都能通过时间轴等功能实现，还有3D型翻转的相册类型交互都可以实现。

总而言之在整个体验的过程来说，操作的效率和实现的效果都很好。在使用Axure等工具制作原型时，不妨用H5来作辅助性展示，相信可以更加直观地提高与老板、交互设计师等对象沟通时的效率，便于作产品全局的决策。

原型设计转html5,H5的交互原型设计相关推荐

移动app部分机型无法唤起h5支付宝支付_案例分析：H5支付交互体验设计
随着互联网技术和手机软硬件的高速发展,手机的使用场景已经融入到日常生活的点滴中.购物用淘宝下单,饿了在美团点外卖,出行滴滴一下--这些关联衣食住行的应用,都离不开一个核心环节:线上支付. 手机支付通常 ...
软件测试-5-图编辑引擎antVx6和交互原型设计软件Axure
参考antv-x6官方文档API 参考antv x6流程图图绘制编辑:初始化配置(一) 参考antv x6流程图图绘制编辑节点属性.连线属性置(二) 1 图编辑引擎antv-x6 JavaScrip ...
Java毕业设计_基于HTML5的摄影社区的设计与实现
基于HTML5的摄影社区的设计与实现基于HTML5的摄影社区的设计与实现mysql数据库创建语句基于HTML5的摄影社区的设计与实现oracle数据库创建语句基于HTML5的摄影社区的设计与实现 ...
《人机交互技术》结课作业：界面调研报告交互界面设计快速原型设计（华科软院）
一.作业内容概述 ● 一.界面调研报告:图文并茂,不少于15页(Word或PPT) ● 二.界面改造:用Auxre RP或GUI Design对热力学计算的界面实现三种风格的改造:对话框方式.菜单方式 ...
rp软件app流程图_Axure RP 9 for Mac交互原型设计软件
Axure RP 9是一款快速原型设计软件,主要用于WEB界面.APP界面.软件界面产品的交互原型设计.是互联网产品经理必备的软件之一,主流科技公司都在用.Axure RP 9 是专为UX专业人员和业 ...
画出的点做交互_设计之下交互设计原型设计之概念设计
目录 //交互设计// 「设计之下」---交互设计:交互设计师是做什么的?上线的产品中那一块是交互设计师的产物呢? ·项目启动 1.1「设计之下」---交互设计:项目启动之从想法到项目,什么是项目? ...
vtk鼠标不交互_Axure RP 9.0 交互原型设计工具
Axure RP 是一款精心设计的快速产品原型设计软件,允许您从头开始设计网站模板,而且也不需要任何编程语言.程序基于各种不同的小部件集,网站通常由窗体.菜单.表和流元素组成,拥有全新的硬件加速渲染引 ...
IPAD移动端交互原型通用设计方案、ipad元件库、移动元件库、元件列表、设计元件、交互示例、界面模板、设备模板、手势图标、社交界面、音乐、电商、视图控制器、指示器、指纹解锁、手势解锁、rp元件库
IPAD移动端交互原型通用设计方案.ipad元件库.移动元件库.元件列表.设计元件.交互示例.界面模板.设备模板.手势图标.社交界面.音乐.电商.视图控制器.指示器.指纹解锁.手势解锁.rp元件库.平 ...
Framer X 21 特别版 Mac 强大的移动应用交互原型设计神器工具
今天和大家分享 Framer X 最新 Mac 版本,Framer X 是一款Mac上强大知名的移动交互原型设计工具,是Framer软件的全新版本,可以快速的创建可交互的原型,支持移动应用的原型设计, ...

原型设计转html5,H5的交互原型设计

原型设计转html5,H5的交互原型设计相关推荐

最新文章

热门文章