使用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协同设计可以无缝衔接以往...
雕浩申优: 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做原型分为低保真、高保真两种,再复杂就是有交互效果的原型. 低保真就是只有线框图. 纯粹的只用线框来表示功能,没有做任何的渲染. 这种低保真我认为适合在公司内部最初梳理功能、流程,并且不需要想客户演示时候使用. ...