使用Axure制作App原型应该怎样设置尺寸

作者&投稿:秋界 (若有异议请与网页底部的电邮联系)
使用Axure制作App原型怎样设置尺寸~

使用Axure制作的原型,如果你没有设置自适应视图的话它是不会自动适应任何设备的。

若要解释清楚这个问题需要的篇幅比较长,请大家自行参考
Point/Pixel/PPI/DPI
的意思和它们之间的关系。这里不再赘述,直接给大家提供一个常用的移动设备尺寸列表,制作原型时根据查询的尺寸在axure中设置大小即可,设计完毕后在
生成HTML时设置 手机/移动设备 中勾选包含视图接口( include Viewport tag
),并进行配置,生成HTML后再到相应的移动设备中浏览就正常了。

意思是:你要先确定制作的APP原型要放到什么设备里面进行演示,然后才打开Axure开始设计。

如:

iPhone4 320*480

iPhone5 320*568

iPhone6 375*667

iPhone 6 Plus 414*736

Samsung Galaxy S4 360*640



Viewport Sizes


设备名称

系统平台

像素密度

屏幕尺寸

竖屏尺寸

横屏尺寸



Acer Iconia Tab A100
Android
166dpi
7″
800
1280

Acer Iconia Tab A101
Android
170dpi
7″
600
1024

Acer Iconia Tab A200
Android
160dpi
10.1″
800
1280

Acer Iconia Tab A500
Android
149dpi
10.1″
648
1280

Acer Iconia Tab A502
Android
149dpi
10.1″
800
1280

Ainol Novo 7 Elf 2
Android
170dpi
7″
496
1024

Apple iPad
iOS
132dpi
9.7″
768
1024

Apple iPad 2
iOS
132dpi
9.7″
768
1024

Apple iPad 3 (and 4)
iOS
264dpi
9.7″
768
1024

Apple iPad Mini
iOS
163dpi
7.9″
768
1024

Apple iPhone 3G
iOS
163dpi
3.5″
320
480

Apple iPhone 3GS
iOS
163dpi
3.5″
320
480

Apple iPhone 4
iOS
326dpi
3.5″
320
480

Apple iPhone 4S
iOS
326dpi
3.5″
320
480

Apple iPhone 5
iOS
326dpi
4″
320
568

Apple iPod Touch
iOS
163dpi
3.5″
320
480

Archos 70b (it2)
Android
??
7″
600
1024

Archos 80G9
Android
160dpi
8″
768
1024

Arnova 7 G2
Android
??
7″
480
800

Arnova 7FG3
Android
??
7″
640
1067

Arnova 8C G3
Android
125dpi
8″
800
1067

Arnova 10b G3
Android
160dpi
10.1″
600
1024

ASUS Padfone
Android
??
4.3″
800
1128

ASUS Transformer Pad TF300T
Android
??
10.1″
800
1280

ASUS Transformer TF101
Android
149dpi
10.1″
800
1280

BAUHN AMID-972XS
Android
??
9.7″
768
1024

BlackBerry 9520
Blackberry OS
185dpi
3.25″
345
691

BlackBerry Bold 9360
Blackberry OS
246dpi
2.44″
320
N/A

BlackBerry Bold 9780
Blackberry OS
246dpi
2.44″
480
N/A

BlackBerry Bold 9790
Blackberry OS
246dpi
2.45″
320
N/A

BlackBerry Bold 9900
Blackberry OS
287dpi
2.8″
356
N/A

BlackBerry Curve 9300
Blackberry OS
246dpi
2.45″
311
N/A

BlackBerry Curve 9320
Blackberry OS
164dpi
2.44″
320
N/A

BlackBerry Curve 9380
Blackberry OS
188dpi
3.2″
320
N/A

BlackBerry PlayBook
Blackberry Tablet OS
169dpi
7″
600
1024

BlackBerry Torch 9800
Blackberry OS
187.5dpi
3.2″
320
480

BlackBerry Torch 9810
Blackberry OS
250dpi
3.2″
320
480

BlackBerry Z10
Blackberry OS10
355dpi
4.2″
345
521

Google Nexus 5
Android
445dpi
4.95″
360
598

HP Touchpad
Android
132dpi
9.7″
768
1024

HP Veer
WebOS
197dpi
2.6″
320
545

HTC 7 Mozart
Windows Phone 7
252dpi
3.7″
320
480

HTC 7 Trophy
Windows Phone 7
245dpi
3.8″
320
480

HTC Desire
Android
252dpi
3.7″
320
533

HTC Desire C
Android
164dpi
3.5″
320
480

HTC Desire HD
Android
216dpi
4.3″
320
533

HTC Desire Z
Android
252dpi
3.7″
480
800

HTC Evo 3D
Android
256dpi
4.3″
540
960

HTC Legend
Android
??
3.2″
320
480

HTC One S
Android
256dpi
4.3″
360
640

HTC One V
Android
252dpi
3.7″
320
533

HTC One XL
Android
260dpi
4.7″
360
640

HTC Sensation XL
Android
198.5dpi
4.7″
360
640

HTC Titan 4G
Windows Phone 7
198.5dpi
4.7″
320
480

HTC Velocity 4G
Android
245dpi
4.5″
360
640

HTC Wildfire S
Android
180dpi
3.2″
320
480

HTC Windows Phone 8X
Windows Phone 8
341dpi
4.3″
320
480

Huawei U8650
Android
165dpi
3.5″
320
480

Kindle 3
Kindle
167dpi
6″
600
N/A

Kindle Fire HD 7
Android
216dpi
7″
533
801

Kindle Fire HD 8.9
Android
254dpi
8.9″
533
801

Kindle Fire HDX 7″
Android
323dpi
7″
600
902

Kindle Paperwhite
Kindle
212dpi
6″
758
N/A

Kobo eReader Touch
Android
N/A (E Ink)
6″
600
N/A

LG Optimus 2X
Android
233dpi
4″
320
533

LG Optimus L3
Android
125dpi
3.2″
320
427

LG Optimus Pad
Android
168dpi
8.9″
768
1280

LG Viewty KU990
Java
155dpi
3″
240
400

Microsoft Surface (RT)
Windows RT
148dpi
10.6″
768
1366

Motorola Defy
Android
265dpi
3.7″
320
569

Motorola Droid3
Android
275dpi
4″
360
599

Motorola Droid Razr
Android
256dpi
4.3″
360
640

Motorola Milestone
Android
265dpi
3.7″
320
569

Motorola Razr HD 4G
Android
312dpi
4.7″
360
598

Motorola Razr M 4G
Android
312dpi
4.7″
360
598

Motorola Xoom
Android
149dpi
10.1″
800
1280

Motorola Xoom 2
Android
149dpi
10.1″
800
1280

Nexus 4
Android
318dpi
4.7″
384
598

Nexus 7
Android
216dpi
7″
603
966

Nexus S
Android
233dpi
4″
320
533

Nokia 300
Nokia
167dpi
2.4″
234
N/A

Nokia 500
Symbian
229dpi
3.2″
360
640

Nokia 700
Symbian
229dpi
3.2″
240
427

Nokia 2700
S40
200dpi
2″
240
N/A

Nokia Lumia 520
Windows Phone 8
233dpi
4″
320
480

Nokia Lumia 610
Windows Phone 7
252dpi
3.7″
320
480

Nokia Lumia 710
Windows Phone 7
252dpi
3.7″
320
480

Nokia Lumia 800
Windows Phone 7
252dpi
3.7″
320
480

Nokia Lumia 820
Windows Phone 8
217dpi
4.3″
320
480

Nokia Lumia 900
Windows Phone 7
217dpi
4.3″
320
480

Nokia Lumia 920
Windows Phone 8
332dpi
4.5″
320
480

Nokia Lumia 1020
Windows Phone 8
332dpi
4.5″
320
480

Nokia Lumia 1520
Windows Phone 8
367dpi
6″
320
480

Nokia N95
S60
154dpi
2.6″
240
N/A

Nokia N900
Naemo
267dpi
3.5″
480
800

Panasonic Toughpad A1
Android
127dpi
10.1″
768
1024

Samsung Galaxy Ace
Android
165dpi
3.5″
320
480

Samsung Galaxy Ace 2
Android
246dpi
3.8″
320
533

Samsung Galaxy Grand
Android
187dpi
5″
480
800

Samsung Galaxy Note
Android
285dpi
5.3″
400
640

Samsung Galaxy Note 2
Android
267dpi
5.5″
360
640

Samsung Galaxy Note 10.1
Android
149dpi
10.1″
800
1280

Samsung Galaxy S2
Android
217dpi
4.3″
320
533

Samsung Galaxy S3
Android
306dpi
4.8″
360
640

Samsung Galaxy S3 Mini
Android
233dpi
4″
360
640

Samsung Galaxy S4
Android
441dpi
5″
360
640

Samsung Galaxy S4 Mini
Android
256dpi
4.3″
360
640

Samsung Galaxy Tab 2 7.0
Android
170dpi
7″
600
1024

Samsung Galaxy Tab 7
Android
170dpi
7″
600
1024

Samsung Galaxy Tab 8.9
Android
170dpi
8.9″
800
1280

Samsung Galaxy Tab 10.1
Android
149dpi
10.1″
800
1280

Samsung Galaxy Tab 10.1
Android
149dpi
10.1″
800
1280

Sony Xperia E Dual
Android
164dpi
3.5″
320
480

Tesco Hudl
Android
242dpi
7″
600
799

Windows Surface Pro
Windows 8
207dpi
10.6″
1080
1920

不同设备的尺寸是不一样的,但是通常我们可以用360像素*640像素来做原型,这个尺寸适应于大多数分辨率在1080像素*1920像素,屏幕在5~5.5英寸的移动设备。

不过使用Axure制作的原型,如果你没有设置自适应视图的话它是不会自动适应任何设备的。
如果需要原型尺寸适配移动设备,需要在生成HTML文件的页面,勾选“移动设备-包含视口标签

制作原型时根据查询的尺寸在axure中设置大小即可,设计完毕后在生成HTML时设置 手机/移动设备 中勾选包含视图接口( include Viewport tag ),并进行配置即可。
移动设备分辨率与原型尺寸对照表:

1、axure 生成HTML的设置的时候需要选取的一些参数设置如下:

2、axure原型制作时还有几点注意事项:

2.1、页面命名最好都用英文,以防中文在解压时出现乱码;

2.2、APP主页面不要用index来命名,否则打开Index时默认隐藏侧边栏,后续无法复制URL;

2.3、设计尺寸大小取决于选择的演示方式:

a).Web APP模式:屏幕高度-ios设备状态栏高度,eg:设计尺寸=480-20px=460px;

b). APP打开模式:采用设备默认尺寸。



我之前按480*320来设计,不过现在大屏幕手机越来越多,所以都按450*800(是720*1280等比例缩放)来设计(因为Ui也是按这个尺寸来设计的)


Axure9 RP 9基础教程(五)-axure视图的设置
前面我们说的几种操作方法是关闭一侧所有的功能窗口。如果要关闭单个的功能窗口,可以以怎么做呢?a. 跟单侧功能区关闭有些相似。拖动概要窗口,将面板独立之后,点击关闭按钮。这里注意拖动的是单个窗口,不能如关闭单侧一般将整个功能区进行拖动。 b. 选择视图-功能区-概要,将这个功能窗口取消...

axure问题。 可以做点击a显示b,再次点击a隐藏b的功能交互吗? 做出的效 ...
可以 很简单

Axure3个下拉框选项筛选怎么做
这个必须要用到动态面板,完全用下拉列表不行。你说的这个有点像城市的联动,选择某个省份后,显示该省下的城市,显示城市后显示县区。A下拉列表显示,B下拉列表使用动态面板做,用两个状态把这两个需要的放进去。C也如此。然后通过设置条件设置选择A1时显示相应的动态面板,以此来做B下拉列表就行了。

axure,按一次1#按钮,显示A颜色,再次按1#按钮显示B颜色,第三次按1#...
可以通过设置一个全局变量来判断,若按一下,变量为1,按第二下,变量值为2,按第三下,变量值为3。再根据变量值不同,显示不同颜色。

Axure其中A和B两个动态面板按钮如何设置指向同一个C面板?
同一个页面的话,应该是指向C面板的不同状态吧,这里可以通过点击某按钮,设置C动态面板的某个状态;如果不同页面的话,

Axure RP 9基础教程(八)-交互按钮 (Interactive Button)设置_百度知...
动作,禁用样式效果选择的是 启用 \/ 禁用 动作。这是交互按钮的样式设置,跟之前的版本在设置上存在一些不同,比如设置的入口。比如Axure8可以直接看到交互样式设置的所有名称,点击之后就直接设置即可。但Axure 9不能直接看到设置的样式名称,需要做其他的点击过后,才能看到,这是大家需要注意的。

axure里如何实现动态面板在指定范围内拖动
移动物件为动态面板“移动物品”,移动区域为“区域”在移动区域A内建立一个热区“不见”,放最下方(移动物品下方),见图 试试看吧

【Axure原型分享】穿梭框选择器
探索Axure原型设计的秘密武器:穿梭框选择器的魅力 今天,让我们一起步入Axure原型设计的新天地,深入了解五种创新的穿梭框选择器:单选、多选、拖动、搜索以及树形选择,它们将为你的用户体验设计增添无限可能。原型预览:点击揭示无限精彩 只需轻轻一按,体验这些穿梭框的魔力!立即点击下方链接预览:https:\/\/...

axure教程哪个适合新手入门?
步骤4:学习一些复杂的元件,比如动态面板、中继器,了解如何用,有哪些属性,如何做交互;步骤5:这时候可以把上面学习的知识做个串联汇总,制作一个比较复杂的原型,比如从简单的商品管理系统,包括登录密码的验证、商品列表的动他展示排序等;通过上面的5个步骤,你就可以算入门了,可以在工作中使用axur...

axure是什么软件?
axure是一款原型设计工具,更推荐选择Pixso协同设计。Pixso 不仅实现了和 Sketch、Adobe XD的无缝衔接,更基于优秀的组件变体、自动布局、实时协作等特色功能,团队成员面对一个复杂的设计项目,不再需要等主视觉完成后再进行子页面设计,让UI设计师在网页上就可以尽情自由创作。Pixso协同设计可以无缝衔接以往...

昌宁县18588541159: 如何用Axure快速制作APP交互原型 -
雕浩申优: 1. 打开Axure,在元件库面板「三条横线」按钮下拉选项中找到「创建部件库」功能,点击会弹出一个另存为对话框,这里需要选择元件库文件的存储位置,并需要输入元件库的名称.2. 此时,我们可以看到,文件的后缀名为 .rplib,这个就是元...

昌宁县18588541159: 如何用axure画app原型图 -
雕浩申优: 多学习,多练手画好原型后 1.下载Axure 2.如果是给itouch或者iPhone用的,比较好办,直接用320*480的分辨率画好辅助线,然后画原型 3.按F5生成原型的时候,在“Mobile/Device”选项中可以设置适配移动设备的特殊原型 4.设置说明见下图:(页面大小显示我的这个设置是按320*480的大小,默认不缩放) 5.用你的移动设备访问你生成的原型链接(如本地服务器,或Dropbox托管)6.把该页面创建一个桌面快捷方式7.完成(有icon,有闪屏) 另:想做鼠标动作或者复杂的页面交互比较麻烦,不推荐,尽量简洁.

昌宁县18588541159: 如何用axure做一个手机app原型 -
雕浩申优: 一、原型默认整体大小为640*960即可,位置为x为0、y为0起始,这样即可 二、下拉效果可以做,用动态面板来完成,可以上下拖拽. 三、可以放在web服务器上,就可以通过http的方式来访问.

昌宁县18588541159: 使用Axure制作App原型应该怎样设置尺寸 -
雕浩申优: 一个常用的移动设备尺寸列表,制作原型时根据查询的尺寸在axure中设置大小即可,设计完毕后在生成HTML时设置 手机/移动设备 中勾选包含视图接口( include Viewport tag ),并进行配置即可.如:iPhone4 320*480 iPhone5 320*568 iPhone6 375*667 iPhone 6 Plus 414*736 Samsung Galaxy S4 360*640 你可以按比例进行缩放

昌宁县18588541159: 使用Axure制作App原型应该怎样设置尺寸 -
雕浩申优: 目前比较好的解决办法是:1.下载Axure 6.5Beta版.而且不好意思是英文版的.2.如果是给itouch或者iPhone用的,比较好办,直接用320*480的分辨率画好辅助线,然后画原型3.按F5...

昌宁县18588541159: 如何用Axure RP7创建响应式原型 -
雕浩申优: 响应式布局可以的,但是个人认为必要性不大,做响应式布局目的在于对不同分辨率设备能兼容做到自适应,其实这个东西开发做起来更容易,axure是快速原型软件,重点在于快速的把产品经理的想法展示出来,并不要去花太多时间做这些东西.如果实在要做,可以留个邮箱给我,我发个案例给你.

昌宁县18588541159: 如何使用axure进行原型设计 -
雕浩申优: 第一步:完全学会axure.第二步:收集微信的icon或将微信页面全部截图.第三步:花费时间去模仿微信原型吧.

昌宁县18588541159: 如何高效输出移动app产品原型 -
雕浩申优: 一、输出以界面为单位的产品流程图 高效输出,首先要保证产品的整体思路要正确,这点可以从产品流程图中体现出来.移动产品需要做到聚焦,因为手机界面的大小,用户的碎片化使用等等,所以一个界面上必然不可能出现太多的内容和行动...

昌宁县18588541159: axure怎么画手机原型 -
雕浩申优: 首先,下载ios组合元件库 Axure制作手机原型引入外壳(竖)部件,该部件自带内部框架 Axure制作手机原型 Axure制作手机原型引入状态栏A(白)这个元件自带方法,可自动获取当前时间,将该部件置于外壳如图处; Axure制作手机原型 Axure制作手机原型双击内部框架,在弹窗处设置连接地址,可选择axure自带页面,也可填写url进行外部地址链接 Axure制作手机原型 Axure制作手机原型此处我设置的是内联至page1,再对page1页面添加部分元件,效果如图 Axure制作手机原型返回home页,点击加载则效果如图 Axure制作手机原型

昌宁县18588541159: AXURE原型需要做到什么程度? -
雕浩申优: AXURE做原型分为低保真、高保真两种,再复杂就是有交互效果的原型. 低保真就是只有线框图. 纯粹的只用线框来表示功能,没有做任何的渲染. 这种低保真我认为适合在公司内部最初梳理功能、流程,并且不需要想客户演示时候使用. ...

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 星空见康网