手机App开发之前的设计，用什么软件画原型

如果你不是专业的产品经理，需要快速能入门的原型设计工具，个人比较推荐：摹客原型，它是一款基于Web的全新原型设计工具。

与Axure、Mockplus等原型工具相比，摹客原型是在线的，它无需下载，打开链接就可以使用，更加灵活易用，灵活的组件拖动操作方法，也降低了新手的学习成本，即便是新手也能很快的把文字需求用原型形式表现出来，非常强大。

同时它还支持设计脑图和流程图，特别适合新人，一款工具，满足产品设计中大部分需求。

那axure和腾讯cdc的uiddesigner，还有在线的fluidUI也可以考虑。其他好像没有了吧。但除了axure，后两者所谓的交互其实都是不同的界面截图之间的切换，说白了就是多节点式结构的ppt，不是真正的交互。axure的思想更接近实际开发，比如通过master实现界面元素的封装复用，条件判断，函数，变量。这些功能除了开发工具，原型工具还有谁能比得上axure吗？ app原型相比网页，界面结构简单，但交互复杂得多。界面上的div也不是平铺的，为了有效利用空间会用到很多层叠，卡片式之类的展示方式。要做这类高保真可交互原型，我觉得非auxre莫属。比如一个tableview滑动到顶部刷新，底部回弹，不借助开发只有axure能做出来。 我从07年开始用axure，曾经一度认为做网站原型，axure已经不需要再怎么改进了。自从做app之后，觉得axure有点根不上时代，但试了其他工具，还是觉得auxre最合适。仔细做过几个以后，我觉得axure还是完全适合做app原型的。做好以后分享也方便。放到内网，或者axshare上，或者有一个html runtime的app，可以在设备上直接浏览axure输出的html。 当然axure作为一个工具，不可能每个环节都是最好的。比如我希望axure能借鉴一下其他工具和开发思想，把UI和素材分离出来，就像换皮肤一样，一个控件可以随便更换图片素材。这样pm或者交互用最简单的线框设计，确定交互以后，可以把设计师的图贴上去，这样就100%保真了。 axure对app设计不友好或者说最落伍的地方，就是支持的事件类型太少。交互上无法模拟出多点触摸，无法模拟设备运动，无法模拟各类传感器……或许对一个原型工具来说，要求太高了。

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

我之前按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])打印之后可以看到

   APP软件开发为什么要先定原型图呢？一个最简单的理由，为了避免后期的修改减少不必要的费用产生，及节约开发时间，且一个交互的原型图比图片更利于项目的沟通，所以 开发软件 原型图的设计是非常有必要的；原型图也是有分类的，下面我们一起来做下了解和区分。

1、草图

  草图意思就是使用笔和纸去手绘产品页面的草图，以便快速的和产品经理以及客户等进行讨论，这样会使产品更具体化。

2、低保真原型

  低保原型图意思就是在草图的基础上通过电脑软件由简单的线框和文字去绘制这个界面，另外还要进行一些简单的交互操作，也就是动态设计，这样可以简单地进行体验一下这个设计，尽可能去发现问题修改问题。

3、高保真原型图

  高保原型图意思就是在线框图的基础上进行视觉设计，再将这个视觉设计稿制作成可以进行交互操作的原型图，这个效果可能和最后成品相差无几，甚至可以在手机上进行模拟的操作。这个原型图一般都可以交付给开发和测试那边，然后开发人员按照这个原型图进行开发，测试人员将会以这个原型图为基准，对开发人员交付的产品进行测试。

不是，这一类属于产品经理领域的范围，原型设计是需求设计的一部分，UI只负责效果图的设计，通常来说，产品经理这一个职位主要负责需求调研、用户分析、原型文档的产出工作，这一个职位是互联网职位中的一种核心职位，类似UI，却比UI做的多一些东西。

开发手机app过程很多，要需求分析、确定合作伙伴、app程序原型设计、界面设计和开发、产品测试交付、App提交、售后服务等这一系列的工作。

1、需求分析

APP开发公司和客户谈确定需求，并通过分析竞争产品做出最终相关报告，收集用户使用习惯的报告，最后产生需求文档。专业的移动app开发团队将考虑所有客户的需求，选择最合适的技术和方法来实施这个想法。

2、确定合作伙伴

确定需求和沟通功能和细节，以便双方可以签署相关文件确定合伙关系。

3、app程序原型设计

在明确项目目标和定义项目的主要目标之后，我们的UI/UX设计师开始设计app程序的原型。启动项目的原型设计部分，绘制流程图，制作、修改仿真原型，最后通过交互式计划和交互方式的讨论和评价，修改评审进入测试阶段。

4、界面设计和开发

在我们的设计师完成了app程序的原型之后，我们开始了app程序的制作过程。程序员根据需求实现所有必要的功能。这个过程也是一个重要的合作过程。双方必须保持沟通，确保项目顺利完成。

5、产品测试交付

完成产品测试和最终交付后的开发，经过数据筛选后提交给用户软件检查报告，使用不同的测试方法，为APP产品提供有效的质量保证。

6、App提交

制作一个功能齐全的app程序是不够的成功，需要能够被用户发现，脱颖而出，从数百个类似的app程序。开发高效的着陆页面，创建演示文稿和视频，并吸引目标受众从一开始。

7、售后服务

售后服务必须是必要的，包括维护和升级，以及紧急维修后的紧急情况。

1. sketch自带模板

Sketch做的非常人性化的一点，就是自带了很多模板，而且用来画交互完全够用，省去了从网上各种非正规渠道找资源的麻烦，如果你是sketch的老用户，而不知道自带模板功能的话，真的是要面壁思过了。

其中，APP相关的模板有两个“iOS用户界面设计”和“Material Design”，顾名思义，分别用来设计ios界面和Android界面。以ios为例，模板中包含了常用的各种控件：状态栏、导航栏、弹窗、键盘等等，当我们需要的时候，直接拿过来用，不仅省事而且非常精致，并且如果我们多去研究并拆解一下官方的这些控件的制作过程，能给我们提供很多设计思路，比如如何用各种形状拼合成想要的图形，如何利用填充和阴影达到想要的视觉效果......这部分就不展开讲解了，留给你自己去发现。

2. APP原型样式

知道利用sketch自带的APP界面模板之后，我们首先讨论一下APP原型采用哪个样式比较合适。

2.1 待选样式

在Sketch中插入画板的时候，软件会提供一些常用设备的尺寸供用户选择，我们需要用到的是iPhone6（375×667px），为什么一定要采用iPhone6呢？非常重要的一点，是因为上边提到的sketch自带模板，iOS界面的所有控件大小全部是以iPhone6尺寸为基准的，拿过来可以直接使用。如果采用了plus或se的手机型号尺寸，控件大小和画板大小标准不一致，还得需要人为调整，异常的繁琐。

当我们在同一个画布（或称为页面）下插入多个iPhone6画板时，sketch会自动排列所有的画板，间隔100px。然后经过一番设计，在各个画板上填充相关元素之后，大概就形成了这样一份交互稿，如下图：

看上去，整齐划一、非常美观，所以这种样式比较适合从全局的角度来展示APP所有页面的交互样式，但并不适用于作为交付物，提供给开发和测试同学在实际工作中使用，主要的问题有以下两点：

标注信息无法体现，标注信息包括了“页面之间的跳转关系”和“相关交互逻辑的说明性文案”。在sketch内，由于位于画板之外的元素无法显示并导出，如上，即以一个iPhone6页面为一个画板，造成画板之外的“箭头”或“文字”就无法派上用场；

功能点结构化的展示比较欠缺，上面也提到了，这种形式比较适合进行全局展现，但在实际项目运作中，会拆分成多个相关的独立功能点，并且每个主要功能点，又要分为正常主干流程和多个异常分支流程，同时对于分支流程来说，不一定需要整个页面做信息呈现，很可能局部模块展示就足够了。

针对第1个问题，其实也有专门用来做标注的sketch插件，比如Notebook，直接用插件做标注虽然方便，但是格式太受限，非常的不灵活，尤其是经常需要修改时候，所以在我试用了两次之后，最终还是放弃了。

2.2 采用样式

否定了上边提到的APP原型样式后，我们又该如何通过其它的样式来解决遇到的一些问题呢？

在sketch中，是以画板或切片为单位进行导出的，所以我们可以根据需要，自由把握一个画板的大小，而不是局限于以一个iPhone6页面为一个画板。比如如果需要全局展示APP整体样式，则可以将所有APP页面放在一个画板中，如果只是讲解某个具体的功能点，则可以只将涉及到的APP页面放在一个画板中。

那每个具体的APP页面该怎么体现呢，很简单，通过一个375×667px 的矩形框来表示一个常规的APP页，或许你已经注意到了，这个尺寸正好是sketch默认的iPhone6画板的大小，采用这个尺寸矩形的好处就是，所有自带的控件仍可以继续无缝的使用。

这样做的另一个好处，APP页面之外可以体现更多的元素，比如表示跳转关系的“箭头”，比如解释性“文字”，比如表示分支流程的“局部模块”

如图所以，其中有几点使用习惯可以参考一下：

可以针对每个画板或者某个功能模块，宏观上用一句话概括一下功能点，从而帮助阅读者能快速的知道下面的交互针对哪个具体功能，如图中左上角的标题所示，说明这是与“增加在线客服”相关的需求；

可以对每个具体的页面取一个小标题，从而帮助阅读者快速定位这是哪一个页面，如图中“1.1 个人中心”、“1.2 在线客服”两个页面标题，同时在需要引用其它相关页面的时候，也可以通过1.1、1.2的序号进行快速定位；

对于每个页面的注释信息，可以采用一个固定的特殊颜色来进行区分，对于颜色选择恐惧症来说，直接从sketch全局颜色库中选择一个即可，另外注释部分放置的位置，可以在相关页面的右侧，也可以在下侧，具体怎么选择可以根据信息多少等实际情况来考虑；

对画板中相关的元素根据相关性进行灵活的编组，比如可以将如图所示的1.1和1.2两个页面编成两个大组，同时对每个大组，再根据“页面”和“注释”两部分分别编组，当然层级可以继续下探，比如“注释”组中可以根据“文字”、“箭头”维度继续分组，具体维度的和粒度，可以根据个人习惯而定；

3. 控件使用技巧

讲完了原型样式，下面说一下控件的使用技巧，主要有组件和文本样式两部分

3.1 组件

上边提到过，sketch自带模板中包含了很多常用控件，我们可以直接在自带的模板基础上进行设计，也可以自己创建一个新文件作为模板，然后根据情况，将需要使用到的控件复制过来用。我个人倾向于后一种，因为很多时候不需要这么多，按需提取即可，另外除了直接采用自带控件，自己也可以创建，同时可以灵活的维护多套模板，使用在不同的项目中。

无法采用哪种使用形式，控件的使用中都会涉及到了一个非常重要的sketch功能点，那就是“组件/Symbol”，sketch自带模板中的控件实际上就是组件的形式，它能够帮助我们方便的在多个页面和画板中重复运用某组内容，其实类似于Axure中的母版功能。比如APP端常用的cell控件，可以将常用的几种类型维护成组件，需要使用的时候，直接拖过来用，方便快捷。

除了系统层面的“状态栏”、“导航栏”、“键盘”等组件，针对特定的项目，自己也可以将常用的某个模块创建为组件，比如电商项目中常用的商品模板，可以创建“商品/横排”“商品/竖排”两种形式的组件，从而可以不断的快速复用。

并且有个命名的小技巧可以参考一下，通过符号“/ ”进行名称的层级划分，sketch会自动将“/”符号之前名称相同的组件归为一组，分门别类之后，我们在插入组件的时候就能快速定位，尤其是组件比较多的时候。

在使用“组件”功能的时候，我们会经常遇到一种情况，视觉样式都是一样的，但是文案有不同，比如“按钮”控件，和上边提到的“cell”控件。sketch非常完美的解决了这个问题，当我们插入一个组件后，可以用特定的文字去覆盖原有组件的文字，甚至不透明度、混合形式、阴影都可以自定义。如下图所示，我从同一个组件插入了三个按钮，每个都可以配置不同的文案和不透明度。

综上，我们可以直接复制sketch中自带的控件（以组件形式存在），也可以自己把常用的某些模块创建为组件，这些就组合成了针对某个项目的特定组件库，在画交互的时候直接可以复用，并且还支持文案、不透明度等自定义，效率和美观性都得到了保障。

3.2 文本样式

“组件”功能的核心使用场景就是某些元素经常需要复用在不同地方，字体和图层也如此。在一个项目的交互稿中，使用到的样式种类是有限的，如果对每个元素如果都单独维护，会比较繁琐，sketch中的“文本样式”和“图层样式”功能就完美解决了这个问题，针对文字和图形元素，在“检查器”中选择需要共享的样式，能够快速的将颜色、阴影、不透明度等样式配置套用过来，而不再需要做重复性的样式配置，非常的便捷。

可以根据需要，整理一套自己常用的样式规范，比如”正文常规性文字”，统一采用“微软雅黑，色值#ffffff，字号18pt”的样式，在之前提到的“页面注释说明”，统一采用“微软雅黑，色值#5CD600，字号20pt”.......将规范维护成共享的样式文本，在需要的地方直接复用即可，不仅仅提高了效率，并且保证了交互稿统一美观性。

熟练使用“组件”和“文本样式”，不仅仅是在创建的时候能提高效率，尤其是在涉及修改时，你会发现只要修改一处，全局同步调整完成，那种快速带来的痛快感更加明显。当然效率的提升是一方面，通过不断复用标准精致的控件，采用统一规范的文本样式，也保障了交互稿整体的美观性。

4. 原型文件维护和导出

原型设计的一些思路说的差不多了，那不同项目以及不同版本的原型该怎么维护比较合适，将原型同步给团队成员的方式有哪些呢？

4.1 原型文件维护

需要注意的一点是，上边提到的“组件”和“文本样式”，它们均保存在某一文件中，并不能在不同文件中共享，并且这两个东西是跟项目有比较大的相关性，所以我比较倾向于一个项目维护一个sketch文件，比如“某某应用APP端原型”文件。

以一个页面（或称为画布）呈现一个版本的原型内容，然后在某个页面/版本内，以一个画板呈现一个功能点模块的原型内容。当然，主体思路是这样的，特殊情况也可以做灵活的调整，比如对应用的第一个版本来说，原型内容会非常多，也可以分成多个页面来呈现。

这样做，不仅仅是“组件”和“文本样式”可以在一个项目内复用，其它相关的元素，比如某个页面，或者某个画板，都可以更加方便的复用。

4.2 导出和共享

然后简单说一下导出，对于交互稿来说，基本上以画板为单位进行导出就够了，至于是图片格式，还是PDF等其它格式，以团队内其他成员普遍接受的形式既可。当然也可以用插件，以HTML的格式进行导出，我常用的就是这一种，好处就是以网页形式打开，在左侧可以看到所有画板的列表，也就是某个版本内所有的功能点信息，相互切换也比较方便。

最后推荐一个sketch插件，sketch-measure 下载地址：utom/sketch-measure 这块插件功能非常强大，导出只是其中一个（我就是用这块插件来导出html格式原型），更多功能可以自己去探索。

5. 总结

以上，基本就是用sketch设计APP原型的整体思路，产出物从视觉上看会非常精致，完全达到了高保真原型的水准，使用熟练的话，制作效率也非常高。在同样甚至更短的时间内，如果能设计出更精致的原型，何乐而不为呢？