使用Axure制作Appweb原型设计尺寸规范应该怎样设置尺寸

来源：蜘蛛抓取(WebSpider) 时间：2017-08-19 02:45 标签： app原型尺寸
善用Axure写PRD：如何设置手机APP原型？
善用Axure写PRD：如何设置手机APP原型？
人人都是产品经理
上篇文章聊了一下，今天我们来讲讲如何在Axure中如何设计375×667的原型。看起来再简单不过，其实这里面有很多讲究，请听我慢慢道来。为什么375×667是移动端原型设计的最佳分辨率如何创建APP页面新手一般是这样创建APP页面做第一个页面的时候，直接拖动几个矩形框到工作区，拼成大概的手机样子。或者找个手机壳模板套进去，然后在里面画。再做其他页面的时候，复制刚刚做好的页面到新页面，然后删除多余的部分。这样做并没有大错，但是效率很低。调用元件库创建APP页面我的元件库，创建一个适合自己的元件库，然后载入到Axure。点击参考然后每新建一个APP页面的时候，从左边元件库中拖动到右边，然后直接把位置改成(0,0)。延伸一下，创建元件库的时候尽量把这几个元件都命名一下，比如命名为页面框架，上导航，左按钮，右按钮。这样以后需要修改的时候直接全局搜索即可。使用母版创建APP页面也可以使用母板的方式来制作，但是设计新APP原型的时候就没办法反复调用了，但是不太推荐。设定一屏线有些页面需要考虑到重要内容得让用户第一眼就能看到，比如商品详情页面就需要保证订单在任何屏幕上都应该显示在第一屏幕。延伸阅读了解更多所以从横向标尺那里拉出一条线，有了拉的箭头你在往下拉到667的地方。如果你的APP比较特殊，所有的页面都需要用到一屏线。那就建一个”固定位置”类型的母版，画一条横线，位置(0,667)，宽度400左右。然后“添加到页面-所有页面”即可。兼顾主流屏幕虽然你的原型375×667只是iPhone6/6s/7的逻辑分辨率，但是我们可以在原型中把主流屏幕的分辨率体现出来，如果需要特殊适配的话，单独说明即可。比如Android主流分辨率是720×1280,那原型尺寸是360×640。建一个”固定位置”类型的母版，模板内容是一个360×640的页面，然后批量复制到所有APP页面的底层即可。当然也可以通过全局辅助线的方式来做，不过更适合Web端产品。这一步仅供有需求的产品参考，一般来说是不需要用到的。顺便提供主流屏幕和对应原型的分辨率对照图相关内容详见/guide/#g=1&p=设计指南总结相信看了这2篇文章，新手PM应该清楚APP页面的尺寸该怎么设定以及如何创建原型啦。下一篇文章会讲解如何生成原型并在手机上查看，敬请关注。相关阅读为什么375×667是移动端原型设计的最佳分辨率善用Axure写PRD，移动PD需要梳理这些流程图善用Axure写PRD，全局规范一个都不能少善用Axure写PRD，彻底丢弃Word和PPT善用Axure写PRD，APP文本框通用的输入规则善用Axure写PRD，2种模式7种方法解析页面加载逻辑#专栏作家#浪子，公众号langzisay，善用Axure写PRD，人人都是产品经理专栏作家。本文原创发布于人人都是产品经理。未经许可，禁止转载。
本文仅代表作者观点，不代表百度立场。系作者授权百家号发表，未经许可不得转载。
人人都是产品经理
百家号 最近更新：
简介: 中国最大、最活跃产品经理社区
作者最新文章(window.slotbydup=window.slotbydup || []).push({
id: '2014386',
container: s,
size: '234,60',
display: 'inlay-fix'
&&|&&0次下载&&|&&总13页&&|
您的计算机尚未安装Flash，点击安装&
阅读已结束，如需下载到电脑，请使用积分（）
下载：8积分
0人评价41页
0人评价11页
0人评价31页
0人评价12页
0人评价12页
所需积分：（友情提示：大部分文档均可免费预览！下载之前请务必先预览阅读，以免误下载造成积分浪费！）
（多个标签用逗号分隔）
文不对题，内容与标题介绍不符
广告内容或内容过于简单
文档乱码或无法正常显示
文档内容侵权
已存在相同文档
不属于经济管理类文档
源文档损坏或加密
若此文档涉嫌侵害了您的权利，请参照说明。
我要评价：
下载：8积分Axure RP移动APP应用原型设计技巧 - 为程序员服务
Axure RP移动APP应用原型设计技巧
移动素材库
工欲善其事必先利其器，素材库则是我们必不可少的利器。Axure RP本身源自Web设计，针对移动应用设计的支持并不完美。所以合理使用第三方开发的素材库（Widget Library），可以节省我们重新绘制APP基础部件的时间，提高产品设计的专注度及效率。 以下是收集整理的一些第三方付费素材库：
UXDesign.today
费用：5 USD（折合人民币32元）
费用：87 USD（折合人民币556.8元）
费用：38 USD（折合人民币243.2元）
移动APP设计尺寸
看到一张空白画布，我们就开始考虑APP的尺寸应该是多少？以下以几款主流iPhone为例，可以根据个人兴趣选择机型对应的Points列作为设计稿尺寸：
为什么不是Android？没有其他原因，就是不喜欢。这里可以写一篇《为什么喜欢iOS而不是Android》
Asset Resolution
Portrait (px)
1080 x 1920
750 x 1334
iPhone 55, 5S, 5C
640 x 1136
建议：以iPhone 6为标准 ，尺寸为375 x 667。演示时仅需要根据不同机型可调整Initial scale：
：Initial scale
：Initial scale
iPhone 6 Plus
：Initial scale
小技巧：按住Ctrl从标尺处拖拽全局参考线至横轴375、纵轴667，即可确定单页设计区域
APP设计规范
现在主流两大手机系统：iOS和Android，官方都对APP设计的指导文档：
Human Interface Guidelines
官方地址：
Layout传送门：
Material Design
官方地址：
Layout传送门：
以iPhone 6为，以下是一些常用的layout规范：
Status Bar
（状态栏） 宽100%、
Navigation Bar
（导航栏 ）Toolbar（工具栏）宽100%、
（标签栏）宽100%、
Search Bar
（搜索栏）宽100%、
PC上演示APP原型
写到此处，肚子微饿
创建一个Page叫做“iPhone Frame for Desktop View”，排序置顶
从第三方部件库中拖拽一个iPhone 6 的Body到当前Page
从default部件库拖拽Inline Frame到Body中心，设置weight：375 height：667，并调整位置至Body的屏幕位置
选中Inline Frame编辑Widget Properties的Frame Target属性为APP入口页，Frame Scrollbars为Never Show
在浏览器中预览当前页即可，APP会显示在iPhone 6 的body中
移动设备上演示APP原型
首先设置Preview Options里的Mobile/Device，勾选Include Viewport Tag，以便适配移动设备。再根据不同的iPhone 设备设置Initial Scale，这样即可在不同的设备上都完美适配。 Axure在移动设备上演示提供了两种方式：
导出Html文件
，通过手机浏览器本地或远程查看
发布至Axure Share
，通过下载AxShare应用或URL链接链接查看
建议：共享至Axure Share，手机通过AxShare应用查看。AxShare可以在线查看Cloud项目，也可以缓存到Local本地，同时满足实时预览及离线演示的需求。
如果基于公司信息安全的考虑，还是选择导出Html内网或下载至手机本地查看
参考资料：
The iOS Design Guidelines
产品设计/研发，追究品质生活
原文地址：, 感谢原作者分享。
您可能感兴趣的代码Axure RP 8.0怎么设置纸张尺寸和大小?
作者：佚名
字体：[ ] 来源：互联网 时间：08-03 11:37:34
Axure RP 8.0怎么设置纸张尺寸和大小？Axure中设置网页原型的时候，想给设置网页的大小，该怎么设置呢？下面我们就来看看Axure RP纸张的大小和尺寸的设置方法，需要的朋友可以参考下
Axure RP是一个专业快速设计原型工具，可以根据需求和规格、设计系统功能和原始界面，创建相关的线性图、流程图等。在设计之前，一定要设置好Axure RP 纸张的大小和尺寸。
1、打开Axure RP 8.0软件，执行&File---&Paper Size and Settings...&命令，如下图所示：
2、打开&纸张尺寸和设置&窗口，如下图所示：
3、设置纸张尺寸，有A3、A4、B4、B5等选项，如下图所示：
4、设置纸张的宽度和高度
Width：宽度
Height：高度
Units：单位
如下图所示：
5、设置纸张方向，
Portrait：纵向
Landscape：横向
如下图所示：
6、设置纸张的边页距
如下图所示：
注意事项：
熟悉Axure RP 8.0各种工具栏的用法。
熟悉Axure RP 8.0纸张尺寸设置以及各种属性。
相关推荐：
大家感兴趣的内容
12345678910
最近更新的内容

我要回帖

更多关于 app原型尺寸 的文章

 

随机推荐