使用 Axure绘制原型
Axure是最常用的原型制作工作之一。无须任何HTML/CSS/JavaScript基础，你都可以使用Axure制作出具备良好交互效果的原型图。本系列笔记以金乌的《Axure RP7 网站和APP原型制作从入门到精通》一书为参考教材，系统地学习一下Axure这款原型工具软件及其背后的设计思想。
开篇之前先提几个基础问题：
（1）什么是用户体验设计？什么是交互设计？什么是视觉设计？它们之间有着怎样的关系？
（2）什么是 UE ？什么是 UX ？User Experience？Usability？衡量“用户体验”有哪些指标和要素？怎么理解“可用性”？
（3）线框图、原型、视觉稿这三者有哪些区别？使用场景是怎样的？
线框图： 低保真图，通常以“黑白灰”线条来表达，制作速度快。
原型图： 中高保真图，可以代表最终的产品，用于在利益相关者之间的沟通。
视觉稿： 高保真图，具备良好的视觉效果。
在大多数的公司中，企业对产品经理和用户体验设计师并没有明确的界限，甚至你可以把二者看成相同性质的角色。
产品经理“斡旋”于开发工程师、系统功能、视觉设计、用户、业务逻辑、项目经理、投资人之间，协调资源并推动产品的发展。作为产品经理，必须深刻理解利益相关者的视角（他们到底想要什么）并与其密切沟通，以营造无障碍的协作环境，让产品在可控范围内推进发展。
身为产品经理，我们必须综合表达许多不同的信息，而这些信息常常会相互矛盾或冲突。我们不仅要熟悉业务流程，要了解技术约束、资源约束等，要了解用户体验对软件程序性能的影响，还要反复地做用户研究和数据分析等。我们要在纷乱的多条件模式下找到至关重要的平衡，并创建出最佳的可行的用户体验。
事实上，任何工具都不过是一种为了实现产品目标的手段而已，Axure同样只是一款工具，在工作中最重要的元素恰恰不是这些工具，而是你本人和你的思想。
1、Axure工作台上常用功能区域划分
菜单栏、工具栏、站点地图、部件面板、母版面板、部件交互和注释面板、部件属性和样式面板、部件管理面板、页面属性面板（包含页面注释、页面交互和页面样式3个选项卡）。 视图 >重置视图 ，可以重置Axure工作台。
（1） 站点地图 ：用于增加、删除和组织原型中的页面。
（2） 部件面板 ：用于管理Axure内建的部件库、第三方部件库、自定义的部件库。
2、Axure有哪些内置的常用部件？
线框图就是由一系列的部件组合而成，这和前端页面是一样的，页面由一系列的UI组件组合而成。不同的部件有着不同的功能属性，绘制原型的过程中要恰当选用这些部件。
3、对Axure部件可以执行哪些操作？
4、页面样式 Page Style 有哪些常用的操作？
5、Axure中的交互基础
在Axure中创建 交互 Interactions需要包含以下3个构造模块，分别是： 事件 Events、 用例 Cases、 动作 Actions。交互是由事件触发的，事件是用来执行动作的；交互设计的目的把静态的元素变成动态的，以提升产品的用户体验。
交互是Axure中的构建模块，用来把静态的线框图转换为可交互的HTML原型。每一个 交互 都是由3个最基本的单元构成，即 什么时候When（事件） 、 在哪里Where（用例） 、 做什么What（动作） 。
（1） 事件Events（When） ：交互在什么时候发生？交互由事件Events来驱动。在Axure中的事件可以分为两大类，其一是页面事件，其二是部件事件。一个事件中可以包括多个用例，多用例根据条件判断来决定执行哪一条用例路径。
（2） 用例Cases（Where） ：用例是用户与应用程序或网站之间交互流程的抽象表达，每个用例中可以封装一个独立的路径。通常情况下，我们让原型按主路径来执行动作，但是为了响应用户的不同操作或其它条件，我们还需要制作可选路径来执行其它动作。Axure中的用例，正是用来给事件Event创建不同的执行路径。 一个事件中可以包含一个或多个用例（多用例时需要根据条件逻辑来判断执行），一个用例又包含一个或多个动作。事实上，你可以把用例看成动作Actions的容器 。
（3） 动作Actions（What） ：动作是由用例定义的对事件的响应。Axure中的动作分为六大类，分别是链接、元部伯、变量、中继器和杂项。
Axure RP是一个专业的快速原型设计工具。Axure（发音：Ack-sure），代表美国Axure公司；RP则是Rapid Prototyping（快速原型）的缩写。
Axure RP是美国Axure Software Solution公司旗舰产品，是一个专业的快速原型设计工具，让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具，它能快速、高效的创建原型，同时支持多人协作设计和版本控制管理 。
Axure RP已被一些大公司采用。Axure RP的使用者主要包括商业分析师、信息架构师、可用性专家、产品经理、IT咨询师、用户体验设计师、交互设计师、界面设计师等，另外，架构师、程序开发工程师也在使用Axure。
希望通我使用“原型+流程图”的多年经验，让更多的PM也可以掌握并运用到平常的原型设计工作中。
一、流程图的通病
目前所有流程图软件都存在一个问题，那就是流程图无法关联到原型页面。
无法做到直接点击流程图里面的节点(页面、功能、操作)，展示与之相关的更多信息。这样子使用上面会很受限。
页面流程图无法查看指定页面详情
比如我们画页面流程图，展示了所有页面以及页面间的流向关系。UI设计师和开发童鞋，有时候需要查看某个页面的具体内容。
功能流程图无法查看指定功能详情
功能流程图也存在类似的问题，开发童鞋想了解某个功能的具体情况，只能问PM或者自己找对应功能的原型页面。
功能逻辑图无法显示具体控件
画一个功能具体的步骤逻辑的时候，有时候我们需要展示一下其中的控件，比如写下单流程的时候可能需要展示一下付款弹窗。
当然也可以使用原始方法，直接复制过来，第一麻烦第二修改了无法同步。
无法对流程图节点做注释
流程图是由一个个节点连接而成，有时候节点需要写几句话注释一下。不是所有的流程图软件都能支持，更主要的是没办法做到默认隐藏，点击展开注释。除非你把流程导出为html格式，但是这样子又不能导入到Axure中了。
二、Axure流程图的介绍
以上这些使用问题，都可以使用Axure的流程图来满足。接下来我会一一的来讲解如何解决。
先简单介绍一下Axure的流程图功能是什么，其实本质上是一个元件库。
含有很多种元件，用途各不相同。大家使用的时候尽量遵循其定义的通用规范。当然如果你有特殊需要，可以单独定义。
三、流程图如何关联页面
Axure提供了两种操作方法，本质上都是设置“引用页面”属性，Flow元件库中的所有元件都具备该属性。Dafault默认元件库中部分元件支持该属性。
“引用页面”除了关联了对应页面，同时集成了对应页面的标题。当你修改页面结构中的页面标题，这里也会同步更新。
拖拽页面到工作区
当你画页面流程图的时候，需要展示某个页面的详情。
那么选中Axure左方的页面结构中的该页面。
然后拖动到右边的工作区即可，效果如下图。
最终的显示效果请查看我之前的文章，以及我绘画的 页面原型图 。
其中右下角带有“蓝色矩形组”图标的矩形，代表可以点击进入该页面的线框图，查看详细的页面布局、控件、逻辑等。
设置引用页面属性
根据上图，你应该可以猜到其实拖曳页面名称到工作区，是创建了一个页面并且设置了属性“引用页面”到该页面。所以你也可以这样做。
拖动Flow元件库中的元件到工作区
设置属性“引用页面”到你所需的页面
生成原型查看效果。
四、流程图如何关联具体功能
方法有2种，大家可以按需参考。
设置“引用页面”属性到具体的功能页面，方法如上。
设置单击链接到具体的功能页面，再简单不过。
五、流程图如何显示具体控件
在画某个功能的具体逻辑时候，我们可以借助Axure的“页面快照”功能来展示一些控件。有助于技术童鞋对功能的理解和实现。
新建页面快照
从左方的Flow元件库，拖动”页面快照”到右方的工作区。
设置引用页面
方法和上面的类似，但是展示效果有点区别哦。所谓页面快照是指将引用页面的具体内容显示到该元件区域范围里。比如我引用了 闪电约首页 这个页面，那么效果如下。
修改快照参数
显示明显有问题，我们可以修改一下参数。
取消适应比例，然后把该页面快照元件的尺寸修改成375 x667，然后填充的相对坐标改成(0,0,0,0)。此时快照效果如下。
配置动作
比如你可以设置该页面隐藏一些控件，或者展示隐藏的弹框，吐司提示。
大概是这样子了，在设计商品详情、购物车、确认订单的时候，该功能特别适用。有需要的童鞋可以试下。
七、流程图如何显示节点的注释
这个其实很简单，但是很多PM没用过。
具体的可以查看我写过的旧文《 产品逻辑的常用表达法 》，《 Axure最正统的产品逻辑表达法 》。
八、总结
以上这些技巧都是Axure自带的流程图功能，只是很少有人系统的总结并分享出来。
希望通过我的文章，大家以后能善用Axure的流程图。而不是盲目的跟风使用第三方脑图软件。
适合产品经理的流程图软件就是Axure，配合强大的原型功能。绝对是双剑合璧，天下无敌。
我之前按480*320来设计，不过现在大屏幕手机越来越多，所以都按450*800（是720*1280等比例缩放）来设计（因为Ui也是按这个尺寸来设计的）
一个常用的移动设备尺寸列表，制作原型时根据查询的尺寸在axure中设置大小即可，设计完毕后在生成HTML时设置 手机/移动设备 中勾选包含视图接口（ include Viewport tag ），并进行配置即可。
如：
iPhone4 320*480
iPhone5 320*568
iPhone6 375*667
iPhone 6 Plus 414*736
Samsung Galaxy S4 360*640
你可以按比例进行缩放
设计师怎样使用Xcode 5制作app原型了解XCODE里的控件，知道控件的属性以及动作，会写一些简单的代码，就可以了。
今天的这篇，不涉及任何代码编程，纯粹通过大量图片与少许说明来展示实践方式；作者还提供了该案例的完整项目文件，我们可以边参考边学习。我个人建议，可以先读一遍我们之前的“设计师应该了解的iOS应用开发基础知识”一文，对相关的一点点理论知识有所认知，然后再跟着今天这篇文章进行实践。那我就不多念叨了。
这里进入译文。过去几个月里，我每天都早上7点起床，然后持续工作到晚上7点，为的就是既能把我自己的应用Ripple搞出来，同时又能保住我在Carshare.hk的全职工作。这个月里，我整个人都扑在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”中添加一个“layer.cornerRadius”属性，将其类型(Type)设置为“Number”，值(Value)为“5”：
圆角样式的效果不会在Storyboard中立刻体现出来；当你运行项目时(Command+R)，会在实际界面中看到圆角已经被创建出来了：
将界面连接起来
我们要实现这样的导航结构：在“附近的聊天室”列表界面中点击一个一个条目，进入聊天对话界面，也就是我们前面做的第一个界面。(建议打开下载的案例文件了解一下要实现的路径结构 - 译者C7210注)
从对象库中拖一个按钮控件(不是Bar Button)出来，放到聊天室条目上，清空按钮文字，调整尺寸，使其能准确覆盖下面的条目：
按住Ctrl键，从刚刚的透明按钮区域开始向另外一个界面进行拖拽，拖拽的过程中会出现一条蓝线，当蓝线右端进入目标界面之后，停止拖拽，从弹出的菜单中选择“push”。这样，在模拟运行的时候，就可以通过点击列表条目进入对话界面了：
1像素的线条
Xcode以pt为单位，你没法把一个View视图设置为0.5pt或是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])打印之后可以看到
