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

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

我之前按480320来设计，不过现在大屏幕手机越来越多，所以都按450800（是7201280等比例缩放）来设计（因为Ui也是按这个尺寸来设计的）

一个常用的移动设备尺寸列表，制作原型时根据查询的尺寸在axure中设置大小即可，设计完毕后在生成HTML时设置 手机/移动设备 中勾选包含视图接口（ include Viewport tag ），并进行配置即可。
如：
iPhone4 320480
iPhone5 320568
iPhone6 375667
iPhone 6 Plus 414736
Samsung Galaxy S4 360640
你可以按比例进行缩放

设计师怎样使用Xcode 5制作app原型

了解XCODE里的控件，知道控件的属性以及动作，会写一些简单的代码，就可以了。

今天的这篇，不涉及任何代码编程，纯粹通过大量与少许说明来展示实践方式；作者还提供了该案例的完整项目文件，我们可以边参考边学习。我个人建议，可以先读一遍我们之前的“设计师应该了解的iOS应用开发基础知识”一文，对相关的一点点理论知识有所认知，然后再跟着今天这篇文章进行实践。那我就不多念叨了。

这里进入译文。过去几个月里，我每天都早上7点起床，然后持续工作到晚上7点，为的就是既能把我自己的应用Ripple搞出来，同时又能保住我在Carsharehk的全职工作。这个月里，我整个人都扑在iOS的体验设计上了，我的挑战有两点：确保上面说的两个应用在年内发布，并且在这些项目中同时扮演设计师与前端开发的角色。

拥抱Xcode的Storyboard
在这期间，我遇到一名很棒的iOS开发工程师，他很认同Storyboard的使用。我曾经用Storyboard制作过简单的原型，但我的梦想始终是自己打造具有功能性的真正的iOS应用。在他的帮助下，我个人项目的开发工作变得相当简单：由他来负责那些更高级和复杂的功能与交互实现，而我则聚焦在布局、动效以及像素极精确的前端界面的实现上。幸运的是，苹果的官方文档绝对是世界级的，另外，时不时的到Stackoverflow中寻求解决方案也能让你感受到一个庞大而友好的设计开发社区随时可以帮到你。

我们是设计师
作为时常需要在交互、视觉和前端角色之间游走的设计师，我不能让自己的工作再增加任何复杂度了。如果我必须去学习Objective-C编程才能完成工作的话，我很快就会失去动力。本文所介绍的实践方法不涉及代码编写，而是聚焦于设计师所熟悉的领域，以及怎样通过Xcode的Storyboard将UI原型实现出来。

iOS 7与Xcode 5
在iOS7里，视觉设计扮演的角色相对以前来说弱了一些，设计师需要更加关注视觉风格背后的功能实现。伴随iOS7一同到来的是Xcode5，相比于以前的版本，它是一个更加友好的开发工具。Xcode5为我们带来了资源库(Assets Library)，自动化设置(Automatic Configuration，使在实际设备上的测试工作更轻松)，Open Quickly，SpriteKit，以及一个更加强大的Storyboard。

上手Xcode
本文的案例原型可以在这里下载。这是一个完整的Xcode项目文件，也正是我们需要通过学习来实现的东西，不妨先大致看下。

安装好Xcode之后，创建一个新项目(Create a new Xcode project)：
在接下来的界面中选择Single-View Application，然后为项目起个名字：
Xcode5中，每个新项目里都会默认包含一个Storyboard文件：
以及资源库(Assets Library)：
资源库中所需的东西都是设计师们所熟悉的：应用图标与加载。你可以直接从Finder当中把相关的拖拽放置到资源库里：
资源库，我的最爱
怎样更有效的导出和导入设计稿中的图形素材，这曾经是设计师与开发者在合作过程中所面对的最大问题之一。要么是开发者去学习使用Sketch或Photoshop，然后自己切图，要么就是与设计师就切图方式问题进行频繁沟通。对多数设计师来说，这是不得不做的事情，我们需要花费大量的时间来导出图形素材，并进行相关的文档标注工作。后来，又出现了可伸缩图形素材，你必须知道怎样去制作这些让人焦虑的东西；这东西真的太复杂了，以至于很多人会去写这方面的教程。好了，这些都是往事了；如今，Xcode5可以帮你创建那些可伸缩的图形素材了。

在Sketch中，导出两个规格的所有图形素材。Sketch会针对不同规格的图形文件自动进行命名：
然后将所有的图形素材导入到Xcode当中。Xcode会自动为它们进行匹配：
要处理可伸缩的图形，点击“Show Slicing”按钮：
然后点击“Start Slicing”，开始切片工作：
点击3个按钮当中的某一个，以设置切片方式；具体点击哪个，取决于你希望素材向哪个方向伸缩：
然后，Xcode就自动帮你完成其余的工作喽：
接下来你可以对其他所有按钮或气泡素材进行相同的处理。

我们的第一个界面
我们来创建第一个界面(如下面左图所示)。点击左侧导航栏中的Storyboard文件，从右侧的对象库里拖出一个Image View到中间的编辑区当中(如下面右图所示)：

然后，在右侧的属性检查器(Attributes Inspector)面板中找到“Image”一项，通过它为该Image View设置内容。Xcode会在“Image”的列表中自动填充来自资源库的图形素材，选择那张你要设置成背景的就好：

再拖进来一个Image View，将它的设置为“bubble-white”。要调整尺寸，可以拖拽气泡四周的把手，你会看到图形在伸缩过程中的表现有多平滑：
接下来，以同样的方式，通过Image View来创建头像。如果你按住Alt键，会看到在Sketch当中的所熟悉的功能：
然后，我们为气泡填充文字内容。从右侧的对象库中拖出一个Label对象到我们的气泡当中。在属性检查器中将“Lines”设置为0，这样就可以输出无限行的文本了：
保持该Label对象的选中状态，在右侧尺寸检查器(Size Inspector)中通过具体数字来调整文本对象的宽度，这样更精确些：
长按Alt查看查看尺寸，我们做完美主义者：
至于字体，可以试试更符合iOS7纤细风格的Helvetica Neue Light：
创建信息输入栏
从右侧对象库中拖一个View出来到我们的界面中，调整高度并放置在底部。你可以把View视图理解为一个文件夹，它拥有自己的一套属性，你可以向里面放各种东西：
然后，从右侧对象库拖出一个Text Field对象，也就是文本输入框控件，放在刚刚的View当中。可以在右侧的属性检查器中看下Text Field对象包含的若干属性，如果你会写CSS，那么对这些概念大概会比较熟悉一些。注意“Border Style”，要确保我们的输入框不带边框：
还差一个按钮。从对象库中拖一个Button控件放到Text Field的右侧，在属性检查器中找到“Image”并设置为“icon-camera”。注意，我们还可以在属性检查器中为按钮的不同状态设置不同的样式：
制作导航栏
这里有点小技巧。在界面编辑区左侧的，在Help菜单中搜索“Embed”，然后选择“Embed in Navigation Controller”，这样我们就将之前的界面嵌入到一个导航体系当中了，你会看到我们的界面左侧出现了一个新的视图控制器Navigation Controller：
在编辑区左侧的文档大纲中找到“Navigation Bar”，然后可以在右侧面板中找到很多风格样式的参数设置：
导航栏中需要标题？选择我们界面所在的试图控制器当中的“Navigation Item”，在右侧属性检查器中设置Title即可：
导航栏中同样可以放置按钮。在右侧的对象库中，拉到最下面，找到“Bar Button Item”，拖一个出来到导航栏右侧。记得编辑一下属性面板中的Tint颜色，在Xcode中你可以自由的为按钮着色：
圆角样式
从前，在使用CSS的时候，通过来制作圆角矩形背景可不是件让人开心的事。在Xcode5当中，你可以像CSS3那样直接程序化的设置圆角样式。

制作“附近的聊天室”列表界面时，我们使用View视图来创建列表条目，并通过View自身的属性来实现圆角样式。选中View视图，在右侧属性检查器中勾选“Clip Subviews”。这相当于CSS里的“overflow:hidden”：
保持View视图的选中状态，然后点击属性检查器高亮图标左侧的“Identify Inspector”图标。在“User Defined Runtime Attributes”中添加一个“layercornerRadius”属性，将其类型(Type)设置为“Number”，值(Value)为“5”：
圆角样式的效果不会在Storyboard中立刻体现出来；当你运行项目时(Command+R)，会在实际界面中看到圆角已经被创建出来了：
将界面连接起来
我们要实现这样的导航结构：在“附近的聊天室”列表界面中点击一个一个条目，进入聊天对话界面，也就是我们前面做的第一个界面。(建议打开下载的案例文件了解一下要实现的路径结构 - 译者C7210注)

从对象库中拖一个按钮控件(不是Bar Button)出来，放到聊天室条目上，清空按钮文字，调整尺寸，使其能准确覆盖下面的条目：
按住Ctrl键，从刚刚的透明按钮区域开始向另外一个界面进行拖拽，拖拽的过程中会出现一条蓝线，当蓝线右端进入目标界面之后，停止拖拽，从d出的菜单中选择“push”。这样，在模拟运行的时候，就可以通过点击列表条目进入对话界面了：
1像素的线条
Xcode以pt为单位，你没法把一个View视图设置为05pt或是1px，所以要在定制化的控件当中使用1像素的细线的话，还是需要首先创建素材：
制作标签栏
iOS的标签栏与工具栏的定制化程度还是很高的，你可以改变配色、文字和图标。

在Storyboard编辑区或其左侧的文档大纲中选择某个View Controller，在Help菜单中搜索“Embed”，这次选择“Embed In Tab Bar Controller”：
接下来便可以在右侧的检查器面板中对Tab Bar或Tool Bar进行设置：
有时，你希望界面在导航栏或标签栏的导航体系中，但又不希望导航栏或标签栏显示出来，那么可以在属性检查器中将“Bottom Bar”设置为“None”，并选中“Hide Bottom Bar on Push”：
滚屏
iOS中平滑的滚屏动效人见人爱。要实现这种效果，你通常需要使用Table View视图对象作为内容的容器。大致的结构可以是：Table View - View - 你的自定义对象：
需要注意，Table View和View默认都是白色的背景，你要根据需要在属性检查器中将它们设置为“Clear Color”：
另外，也可以通过使用Table View作为容器让界面当中的一部分成为可滚动的内容：

您好： APP store 上的应用 程序 是 基于
苹果Mac OS X 系统上的 XCode 编程环境开发的应用程序，
它主要用的语言是 Object C＋＋ 和 JavaObject C＋＋ 是 C ＋＋语言的 超集，而Java 又是 基于 C ＋＋ 上 改进的语言，两者 都是面向对象的编程如

1在Xcode5下，获取程序名字(app name)的方法为： NSString proName = [[[NSBundle mainBundle] infoDictionary] objectForKey:@"CFBundleDisplayName"]; NSLog(@"dicName ==== %@",[[NSBundle mainBundle] infoDictionary]); 打印之后可以看到

学习axurerp可以分为以下几个阶段：

一、新手级：

是指刚刚接触原型设计，这个时期主要是打基础。先熟悉AxureRP的工作台，有哪些功能及组件，以及一些基本的 *** 作，弄清楚每个组件是干什么用的。

在新手阶段，主要还是以熟悉为主，可以去网上找点前人总结的经验。再者就是要自己尝试着去用一遍里面的功能，可以做一些简单的页面原型，可以是没有任何交互的，也可以是带点交互的。

二、学徒级：

等到熟悉了AxureRP的所有功能之后，要开始实际应用其去设计一般的中低保真的原型了。光知道组件怎么用了还不够，还要配合交互事件，交互动作，条件判断，甚至是变量一起去实现某个交互的功能。如果说新手阶段是打基础的阶段，那么这个阶段其实就是一个融会贯通的过程，把所掌握的知识活学活用，真正的结合起来去实现一个整体的原型设计要求，这样才能掌握AxureRP的核心功能。

这个阶段的学习前期主要是模仿为主，首先要能看懂别人做的原型实例，看看人家是怎么设计的，然后依样画葫芦，自己动手做一个。

三、大师级

AxureRP自身所带的交互事件和动作已经能实现现有产品层面上的大部分交互效果，只要做基本上都可以用原型来实现。这个阶段可以试着做一些实现起来比较困难的实例，并可以尝试着开始做一些整站或者整体产品的效果，前面都大多停留在单个页面，单个实例的原型设计上，这里就要求能完成更整体的效果，出来的是一个产品的完整的原型。

最后要说明一下的就是，AxureRP只是一种原型设计工具而已，做交互设计最重要的还是想法，工具只是用来帮实现想法的。不必过于追求技术，不必过于追求视觉表现。把握好整个产品方向的同时，应专注于交互流程、页面内交互、布局结构的创新和优化。按照上面坚持下去，学习axure不在难！

1首先打开软件axure怎么导出，然后根据需要打开软件或创建新的Web原型。2然后在软件界面的左上角找到文件选项sketch素材，我们单击该选项，然后在其下方出现一个下拉框。3您可以在下拉框中看到很多 *** 作选项。我们在这些选项中找到将所有页面导出为选项，然后单击该选项。4然后将在界面上d出一个导出窗口。我们在窗口中找到三个小按钮，然后单击它以进入文件保存路径选择页面以选择文件输出路径。5接下来sketch作品，您可以在窗口中查看文件保存路径，然后在窗口中找到确定按钮，单击此按钮以图像格式将所有页面导出到软件。6最后，我们打开存储文件的文件夹，所有导出的都可以在该文件夹中查看。
axureRP是辅助产品设计和网页原型制作的软件。软件界面令人耳目一新。用户可以使用该软件为程序或网站创建动态线框，流程图和其他要求。该图表可为原型设计提供很大帮助，是产品经理的必要实用软件。

将其Axure文件与编辑中的Axure文件合并。

Axure 10 中导入RP文件目前只支持同版本创建的文件导入，即Axure 10中只能Axure 10创建的文件进行导入合并。

注：如果低版本创建的文件需要导入合并，需要先使用Axure 10正常打开软件一次，保存为Axure 10版本后再执行导入合并 *** 作。

汉化文件中，部分导入d框提示暂未覆盖到，详细用途与说明请参考详细导入步骤说明。

常规的导入，如果不涉及特殊的一些软件设置，常规导入进行到第三步就可以直接执行跳到末页进行导入。在导入前，首先确定需要导入文件中那些部分，然后进行部分步骤的跳过达到快速导入，节省时间。

在选择需要导入的文件后，会自动加载文件中全部的页面。可以通过选择所需的页面进行导入。

选择文件中需要导入的母版文件。

注：此处母版文件如果在导入页面中已使用，在未勾选的状态下也会为了保证导入页面信息完整自动导入。但是未使用的母版文件需要自行进行选择添加。

*** 作选项同页面 *** 作选项。

在选择了导入页面与导入母版文件后，会自动识别对应文件是否存在同名文件，若存在可以通过选择新增与替换进行页面导入选择。

支持全部页面与母版的整体 *** 作或单独选中页面与母版的导入方式调整。

第四步：选择视图

如果在导入文件中存在不同的视图布局设置时，此处会加载创建的视图，默然状态下视图不进行导入，需进行选择。

常规设置主要用于Axure转换为其它文件的设置，依次是HTML、导入Word、CSV报告、打印等设置。在日常使用中，一般进行常规设置改动较小，此处通常进行全部不选择导入。

注：相关详细的配置设置请查看菜单-发布相关文章。

若在页面中进行部分注释字段信息时，此处会加载注释信息，可以选择需要导入的注释信息。

注：相关注释设置请查看注释说明区域相关文章。

若在元件中进行部分注释字段信息时，此处会加载注释信息，可以选择需要导入的注释信息。

注：相关注释设置请查看注释说明区域相关文章。

页面样式设置的导入，页面样式导入后会全局替换掉已有的页面样式。

相关页面样式布局设置请查看样式区域文章。

元件样式设置，通常使用默认情况下的元件样式此处直接可以跳过，如果对默认样式进行了编辑更改，此处需要选中对应的修改后的样式或新增的样式进行导入。

相关元件样式布局设置请查看样式区域文章。

全局变量主要用于跨界面的部分数据联动，若涉及到对应的全局变量，此处进行勾选，防止因数据参数不全导致部分交互失效。

相关全局变量说明请查看菜单-视图的文章。

最后进行确认导入的文件内容。此处会进行相关新增、替换等进行说明。

1、打开Axure RP 80软件，执行“File--->Paper Size and Settings"命令

2、打开”纸张尺寸和设置“窗口

3、设置纸张尺寸，有A3、A4、B4、B5等选项

---