欢迎登陆陪学网
欢迎注册陪学网账号
密码找回
iPhone上浏览原型
时长: 指导老师:Axure官网 困难程度:容易
主要内容
真实体验在iPhone上浏览iPhone应用。开始设计前,在share.axure.com网站申请一个免费的AxShare帐号,做为原型主机(或者也可以使用自己的网络服务器)。下面的课程将用AxShare做为主机,在iPhone浏览器中查看原型
手机设置
浏览器设置
iPhone浏览器配置项在“生成->原型”对话框中的“手机/移动设置”部分。下面图片中的设置是在iPhone上查看iPhone应用的常规设置。
窗口标签(Viewport tag)决定原型在设备的尺寸或比例。如果应用设计时,己经设置为320PX页宽,那么不需要修改窗口标签(Viewport tag)的默认设置。
隐藏地址栏(Hide address bar)将去除浏览器上方,用来输入网址的地址栏部分。
禁止页面垂直滚动(Prevent vertical page scrolling)在用户拖动屏幕边缘时,保持应用的设计。
最后,隐藏浏览器导航(Hide browser nav),当原型在主屏幕中启动时,隐藏浏览器按钮
------------------------------------------------------------------------------------------------------------------------------------------------------------------------
手机/移动设置
点击下列复选框查看浏览时的变化。
------------------------------------------------------------------------------------------------------------------------------------------------------------------------
主屏幕图标
主屏幕图标是一个114*114px的PNG图片,图标像真正的应用一样,显示在iPhone主屏幕。图标添加在“生成->原型->手机/移动设置”。下面教程学习如果添加iPhone主屏幕的应用图标。
设计图标时,注意当在iPhone上查看时,给透明区域一个黑色的背景
------------------------------------------------------------------------------------------------------------------------------------------------------------------------
启动页面
点击主屏幕图标(像打开应用一样),等待原型载入打开时显示启动页面。启动页面尺寸和文件格式为:320*480px PNG,在“生成->原型->手机/移动设置”中可以导入启动图片。
如果启动图片需要水平显示,在导入前使用图像工具旋转图片
在iPhone中查看应用原型
步骤1:发布到AxShare或网络服务器
在主菜单栏,点击AxShare按钮(F4),或选择“生成->发布到AxShare”,上传原型到AxShare。如果没有AxShare的帐号,点击创建帐号或浏览share.axure.com网站,注册免费的AxShare帐号。点击“发布”上传原型文档。也可以将己生成的原型文档发布到自己的网络服务器
------------------------------------------------------------------------------------------------------------------------------------------------------------------------
步骤2:点击“Show Links & Options”按钮
下一步,在浏览器中打开原型,获取没有网站地图的首页链接。在应用首页,或应用设计的开始页点击“Show Links & Options”按钮,复制"without sitemap"文本框中的URL链接。
------------------------------------------------------------------------------------------------------------------------------------------------------------------------
步骤3:在iPhone浏览器打开URL链接
在iPhone浏览器中打开URL链接,发送一份带URL的电子邮件给自己,然后在iPhone手机中收取链接,可以很方便的获得复制的URL。
现在可以测试原型交互了,但这时,浏览器导航还是可以看见的
------------------------------------------------------------------------------------------------------------------------------------------------------------------------
步骤4:添加到主屏幕
点击底部导航中间的“设置”按钮,选择“添加到主屏幕”。
浏览器会提示预览主屏幕图标,并要求选择名称,点击“添加”。现在可以在主屏幕打开应用原型,打开原型时将显示启动画面并隐藏导航按钮
在iPhone5中浏览
注意,在iPhone5中浏览上面的原型时,屏幕会切去原型的页首和页尾。修复这个现象的办法是删除窗口标签中“宽”文本框中的值,保持文本框为空。在下载的压缩包中有一个iPhone5模板文档,模板文档中有文档设置和适合的参考线。
------------------------------------------------------------------------------------------------------------------------------------------------------------------------
本课程原创内容来源:Axure官网(www.axure.com) 翻释:陪学网