本港台开奖现场直播 j2开奖直播报码现场
当前位置: 新闻频道 > IT新闻 >

报码:使用Axure打造最佳的移动端交互原型教程(附元件(3)

时间:2017-06-17 02:30来源:报码现场 作者:本港台直播 点击:
设置方式:启动safari浏览器打开原型地址—点击浏览器底部的设置图标(正中间)—添加到主屏幕——完成添加即可。大家可以尝试使用下方演示地址进行添

设置方式:启动safari浏览器打开原型地址—点击浏览器底部的设置图标(正中间)—添加到主屏幕——完成添加即可。大家可以尝试使用下方演示地址进行添加看看效果。

演示地址:

添加到主屏和最终运行时的效果:

  

报码:使用Axure打造最佳的移动端交互原型教程(附元件

  

报码:使用Axure打造最佳的移动端交互原型教程(附元件

  

报码:使用Axure打造最佳的移动端交互原型教程(附元件

按照上述的设置之后,你将原型生成为HTML文件之后上传到你的服务器或原型托管平台,通过手机访问原型链接演示即可。

10. 其它的补充说明

如果我们设计的移动端原型不需要考虑在手机上演示的场景,仍然可以参照本文中相关的规范。我一般会在编辑区域放置一个设备模板,新建一个内容框架的动态面板用来放置页面的主要内容,而这个内容框架的尺寸同样是我们之前定义的内容区域尺寸(宽)375px*(高)667px。另外,内容框架的动态面板的属性中需要将滚动条设置为“自动显示垂直滚动条”,这样当框架的内容超出时可以拖动滚动条进行查看。

  

报码:使用Axure打造最佳的移动端交互原型教程(附元件

通过添加设备模板的设计区域效果

通过使用设备模板可以让输出的原型效果更标准和规范,如果我们在编辑界面中放置了设备模板,则不再需要对导航栏、标签栏或工具栏、模态窗口等动态面板进行固定到浏览器设置,你只需要拖动到设备模板对应的位置并置于内容框架上方即可。

如果你需要获取相关设备模板的图片,请通过下面的下载地址获取到。这套素材中包含了iphone、Android、IPAD等各种机型常用模板,而且都已经按标准尺寸定义好,只需要直接下载使用即可。使用方法:在创建Axure原型文件时建立一个模板母版,然后将设备图片导入到母版中,再将母版拖至设计界面区域。

  

报码:使用Axure打造最佳的移动端交互原型教程(附元件

常用移动端设备模板素材

获取地址:

11. 移动端元件库分享

最后分享的是AxureUX交互原型移动端元件库精简版,这套元件库基本是按照本文所介绍的相关规范和标准进行制作的,共由常用组件、信息输入、信息输出、信息反馈、综合系列等五大元件类型组成,其中还包含各类移动端基本元素、动态交互组件,以及各类常用界面模板,能助您快速的输出友好美观的移动端交互原型。

相关截图:

  

报码:使用Axure打造最佳的移动端交互原型教程(附元件

  

报码:使用Axure打造最佳的移动端交互原型教程(附元件

  

报码:使用Axure打造最佳的移动端交互原型教程(附元件

  

报码:使用Axure打造最佳的移动端交互原型教程(附元件

  

报码:使用Axure打造最佳的移动端交互原型教程(附元件

下载地址:https://pan.baidu.com/s/1pKTHWxl

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

  

报码:使用Axure打造最佳的移动端交互原型教程(附元件

(责任编辑:本港台直播)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
栏目列表
推荐内容