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

Tinadmin • • 原型设计教程

最近有几位小伙伴儿都提出同样一个疑问：想用Axure设计一个 APP原型 放到真实的移动设备中演示，但不知道应该使用什么尺寸？
若要解释清楚像素和分辨率需要的篇幅比较长，请大家参考百度百科。
这里金乌直接给大家提供一个常用的移动设备尺寸列表，制作原型时根据查询的尺寸在axure中设置大小即可，设计完毕后在生成HTML时设置 手机/移动设备 中勾选包含视图接口（ include Viewport tag ），并进行配置即可。

文章目录[隐藏]

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

最近有几位小伙伴儿都提出同样一个疑问：想用Axure设计一个 APP原型 放到真实的移动设备中演示，但不知道应该使用什么尺寸？
若要解释清楚像素和分辨率需要的篇幅比较长，请大家参考百度百科。
这里小编直接给大家提供一个常用的移动设备尺寸列表，制作原型时根据查询的尺寸在axure中设置大小即可，设计完毕后在生成HTML时设置 手机/移动设备 中勾选包含视图接口（ include Viewport tag ），并进行配置即可。

如：

 

iPhone4 320*480
iPhone5  320*568

Samsung Galaxy S4 360*640

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

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

转载请注明：木卫艾欧网

原创文章，作者：Tinadmin，如若转载，请注明出处：https://www.iamue.com/2444/

赞 (0)
TinadminTinadmin
0
上一篇 2014-12-31
下一篇 2014-12-31

相关推荐

  • 001.Axure rp 6.5的软件安装、汉化与注册 原型设计教程

    001.Axure rp 6.5的软件安装、汉化与注册

    第一步：从网络上下载axure安装程序到本地电脑、汉化语言包、注册码，双击安装程序，如图：                     第二步：安装过程截图乱码的情况是正常的 &nbs…

    2014-09-09
  • Axure

    如何用 Axure 制作类似的手机滑屏效果原型？

    不要太复杂： 1.设置2个动态面板 外面的是窗口 里面的是内容 图1：2个动态面板展示，记住这只是展示你不要放在一个层面上，应该是包含关系   图2：包含关系目录示意 2.设计交互事件   接下来看一下设计交…

    2015-07-21

  • 【Mockplus教程】删除

    1 删除单个页面或分组 直接选中需要删除的页面或分组，在右键菜单中选择“删除”，或者使用Delete键删除； 2 删除多个页面或分组 在同一个分组下，按住Ctrl键，鼠标单击页面选择多个需要删除的页面或分组，然后右击选…

    Mockplus 2015-09-10

  • 交互设计-网站页面视差效果（Axure RP 7.0 源码下载）

    很多（想）学习Axure的朋友，都是伸手党，这是一条不争的事实，直接拿过来省事又省时；
    能真正学会并驾驭这款软件的毕竟是少数（其他软件也一样，这似乎是一条无法打破的规律），不过金乌老师还是希望想使用这款工具帮你应付差事（实现梦想）的小伙伴儿们加油，自学是很辛苦的，只有经历了挫败、枯燥、郁闷的适应期才能真正适应并喜欢上自学这种方法，不积跬步无以至千里。

    IxD案例 2015-01-05
  • Axure实例教程：仿淘宝搜索原型 原型设计教程

    Axure实例教程：仿淘宝搜索原型

    做了个模仿淘宝搜索原型，先上图啦

    看似简单的搜索栏，包括的内容可不少哦，包含了：矩形、文本框、动态面板等。

    2014-12-31
  • Mockplus视频教程 Mockplus

    Mockplus原型交互跟我做之1-30秒做一个自动消失的消息框（Toast）

    从现在做，跟我一起来认识Mockplus的交互。 Mockplus的交互，非常简单、直观、容易上手。你所需要做的，只是拖一拖鼠标，然后几步设置而已。 当然，只要你愿意，还可以实现强大的交互效果。 不废话，先来做一个，试…

    2016-01-18
  • Axure中文教程：格式设置详解 原型设计教程

    Axure中文教程：格式设置详解

    AxureRP 6.0以前版本的格式设置都是在右键菜单里面的，不是很方便操作，6.0版本将这个功能分到右侧面板里面，并且增加了页面级的格式设置，大大方便了操作设置，包括增加了对手绘风格格式的默认支持，再也不需要通过加载额外的手绘组件库来完成了。AxureRP的组件和页面级的格式设置，其实就是网页设计当中的CSS代码，只不过用图形界面实现了，这样更直观，也更好掌握，毕竟不是所有的产品设计人员都懂CSS的。

    2015-01-01
  • 022.axure母版（模板）区域介绍 原型设计教程

    022.axure母版（模板）区域介绍

    axure的模板区域是非常重要的一个功能，网站的头部、尾部部分等很多页面同时用到的内容，都可以使用母版，因为在母版中只需要修改一次，就可以实现所有的页面更新，可以大大的加速原型的制作速度。需要重复理解复用…

    2014-09-12
  • luck Axure

    Axure RP 8.0 抽奖大转盘实例教程附.RP下载与视频演示

    原标题：【AxureRP8实现真正抽奖大转盘】 效果图： Demo地址：http://www.iaxure.com/share/luck/ （有广告） 视频： 实现过程： 1、生成一个0-360之间的随机数，保存至变量； 2、旋转转盘到达指定角度，案例中为3-…

    2015-08-24

  • 实例学Axure7.0简约教程 产品原型必备技能

    首先我们要知道Axure是产品经理、原型师经常使用的原型设计工具，能快速地把自己想要的方案展示出来，给程序、美工参考。加快产品开发进度及工作效率，弥补了返工重做的机率。 我们打开Axure，把我们想要的产品方案…

    原型设计教程 2014-09-28