干货！快速制作高保真原型不得不知的小技巧 - 简书
干货！快速制作高保真原型不得不知的小技巧
原型的目的在于清楚的表达产品的设计理念和功能的执行逻辑，所以我认为能够达到这个目的的原型都是合格的。但如果可以把原型做的更加精致美观些，又何乐而不为呢。然而需要注意的是，我们毕竟是负责产品的，不是负责界面设计的，所以哪怕是制作高保真原型，也要快。
在需求讨论，功能确定阶段，我们会画线框图，也就是低保真原型。待需求功能流程基本理清后，为保证时间效率，通常会出中保真原型图给设计，毕竟出高保真要占用更多的时间。不过，在有些时候我们是有必要甚至必须出高保真原型，比如进行原型测试。
这是我按照简书IOS端APP做的原型界面，两个界面没超过15分钟。
我不会告诉你我是这样做的
素材积累工作的时候每隔一段时间我会停下手头的活，休息几分钟（番茄工作法）。一般在这几分钟我会站起来走两步，然后就是看看素材类，图片类网站。因为逛这类网站不用动脑，所以放松挺不错。顺便看到不错的图片就保存下来当素材。
列一些我常去的网站：花瓣网
国内知名图片分享网站UI社
素材类网站easyicon
可以搜索你想要的各种icondribbble
交互类作品分享平台，国外大神常出没于此reeoo
国外素材类网站，支持免费下载
修图小技巧积累的图片素材有时候不能直接用，可能背景不透明，可能填充色不对等等。所以掌握简单的修图技巧还是需要的。通常用的比较多的就是切图（psd文件切图标用），剪切，调整图片大小，抠图，修改填充色。
由于MAC下PS比较卡，所以我用的修图软件是Affinity Photo(下简称AP)。网上不太容易找到AP的使用教程，这里就介绍下AP的切图方法。其他的琢磨两下就知道了。psd切图
用AP打开psd文件
原型设计规范刚开始学画原型图时，我总是在字体的大小，颜色等等这些细节上很苦恼。如果太随意，虽然省事，但效果实在不堪；如果扣细节，却又要花很多时间，得不偿失。
后来我发现，不同的产品原型完全可以用一套设计标准，因为不管原型如何，UI最终会针对APP出相应的视觉设计规范。于是我制定了我的设计标准，管你什么APP，直接套，即便捷又美观。
比如我的文字大小颜色等等是这样设置的。可以根据自己的需要制定自己的规范。
自定义组件虽然Axure已经提供了一些方便使用的基本组件，但为了提高效率，我们需要自定义常用的组件。比如iPhone的navigation栏和tab栏，跟大宝似的天天见。那我就做成了组件，随时用，随时拖。
我的一些自定义组件
注意，自定义组件本身也是遵守原型设计规范的。另外，看到图中方案1下面的那几个组件了吗？有什么用呢？待会说，先卖个关子。
Axure使用篇
常用快捷键想要快速，尽然不用快捷键？别逗了。分享下乌金老师整理的Axure RP7.0快捷键中英文PC和MAC对照版
辅助线Axure有全局辅助线和局部辅助线。全局辅助线在所有页面都有效，局部辅助线只在当前页面有效。
在开始制作原型图前，我会先布局好主要的辅助线。比如我做的原型界面是375x668（iphone6屏幕像素的一半）的大小，控件距屏幕边缘20px宽，为方便布局，我会先设置几条全局线。
创建全局辅助线
移动左边两条辅助线
选中所有辅助线，设置锁定
这样基础的辅助线就设置好了，再在具体使用中灵活运用局部辅助线，我们就可以愉快的布局玩耍啦。
利用辅助线快速布局
对齐分布和等间距分布想要多个控件的位置摆放合理美观，我们常常用到对齐分布或等间距分布。
对齐分布有三种方法：一，利用Axure的提示对齐线移动控件的过程中，提示对齐线会自动出现（原谅我截不了图），按提示操作即可，很傻瓜式。二，利用辅助线关于辅助线，前面已经说到，不罗嗦了。三，利用对齐动作比如我想让控件2对于控件1进行左对齐，先选中控件1，再选中控件2(注意顺序)，然后去点右上角红圈处的对齐按钮，选中左对齐即可。可以记住对齐快捷键，那操作就很快啦。
对于2两个以上的需要等间距分布的控件，我们可以利用等间距操作。比如tabbar，通常有4、5个按钮。我们在设置好一个按钮后，直接复制粘贴，如图
把最两边的按钮位置放好，选中全部按钮
进行水平等间距
取色这里正是我前面卖的关子。我们制定好了规范，每个界面的背景色都是#F7F7F7，现在我要修改一个蓝色背景的矩形组件，怎么该颜色呢？输入色值？当然可以，但慢啊。用取色笔？屏幕里没有我要的颜色啊？瞧我的。
我根据规范的颜色，分别自定义了矩形组件。这样会在Axure的组件栏里显示出来。
这些组件不是用来拖的，而是方便我取色的
接下来用取色笔就可以方便的取色啦，是不是很机智。
temp页写代码讲究复用，讲究ctrl+c,ctrl+v。做原型也一样，要学会“懒”。有时候某个界面的控件在其他地方也会用，对于这样的控件，我会把它放到temp页里。
temp页是做作原型过程中的临时页面。它就像个复用池，里面的控件随时准备被我拿来ctrl+c，啦啦啦。
挨抽的陀螺五款app原型设计工具对比
Proto.io, Pixate, Origami, Framer & Form
by 我用五款“高保真”原型设计工具重新创建了 user onboarding应用，目的是了解这些工具的不同之处，它们是Proto.io, Pixate, Framer, Facebook的 Origami 和 RelativeWave的Form。看看跟原装的对比，这些再造的产物表现如何：视频地址：基于页面还是层为什么我会选择这五款？我发现用多数原型设计工具再造这种重度动画效果的应用（图标以不同的速度向不同的方向移动）几乎不可能。大多数工具仅仅是让你连接静态“页面”，只有那些更复杂的才能让你在给定的页面里不同的对象或“层”添加动效。我接下来会进一步解释。基于页面的工具在基于页面的工具里，你布置好不同的屏，然后建立热点或者按钮将它们连接在一起。你轻触一个屏上某个按钮来进入另一个屏。基于页面的工具一般支持屏之间的多种过渡效果，比如淡入、从右滑入，从下滑入等等。虽然有点笨拙，但是当你还在设法搞清楚一个app的流程，比如说需要多少屏、它们如何呈现出来、按钮如何布置等等，用这种工具快速作出“实体模型”还算是个不错的方法。基于页面的工具有： ,&,&,&,&,,&,&,&,&,& 和 . 的确，这里面有些工具可以让你在一个页面里带有动效或者滚动区域，但是你无法用它们来模拟真实的原生app所有的交互效果。基于层的工具每个元件、界面元素，或者说层，都可以设置为可触摸、可滑动、可拖拽，还能带动效。然而，用这类工具制作一个完整的app原型会让人发疯的，会有太多的工作量，基本上就等于创建一个真正的app。但是，它们用来测试新的交互效果，或者微调一下动效的时间参数还是很棒的。我测试的是Proto.io, Pixate, Framer, Facebook的Origami 和 RelativeWave的Form。坦率的说，还有几个其他的 —
—不过它们好像更加企业级（就是挺贵的），我有可能以后尝试一下。好吧，我们就继续看看这些获选的工具。Proto.io基于Web界面，带有IOS和安卓下的调试器Proto.io这个web应用强大得令人吃惊，它有很多很多的功能。不过，因为所有工作都是依靠拖放、点击按钮和选择列表的值，有时候想找到需要的设定会让人有点儿不知所措。鉴于IF原型的本质特点——不同的对象以不同的速度移动——我不得不增加一些自定义的JavaScript计算脚本。Proto.io提供的单行文本框对于冗长的计算脚本来说太小了。为了能够概览脚本，我得把它们保存在我电脑上的文本文件里。特别需要注意是，这些JavaScript运算式可能会失败，却没有任何警告信息。如果有些东西不工作，一定要检查浏览器的控制台。（我遇到一个错误，是一个包含负值的变量造成的。）创建原型的同时预览这个相当让人恼火：你必须每次都点击 [ Save Project ] 然后点 [ Preview ] 才能看到你作出修改后的效果。把原型发给客户在网页上：简单——你可以生成一个公网链接，就像。（这些连接也可以用移动浏览器打开，然后作为一个“app”添加到IOS主屏上。）你可以在& 向公众用户展示你的作品。在移动设备上：你可以给用户建立免费的评估帐号，允许他们访问一个项目。他们可以在IOS或安卓app里运行你的原型。原型跟app的区别不多。不过动效不够流畅，因为我不得不在滚动视图里添加很多包含自定义JavaScript计算脚本的交互功能。在web上跑得蛮好的，但是在设备上实在太慢了。似乎更简单的原型回放速度能正常些。优点易于制作快速的实体模型，因为有大量的标准UI元素库，而且很多是可以定制的。Proto.io在这五种工具中是唯一一个同时也是基于页面的。你可以在一个项目中包含多个屏，屏之间可以创建过渡效果。支持元件跟Dropbox同步。缺点没有即时预览。如果加了很多交互，像本文的例子一样，动效会变慢。你的所有原型都保存在Proto.io的web平台上，这意味着如果你要取消你的帐号，你连运行它们都不再能了。（有个可能是你把帐号“寄存”：当你重新激活帐号，你的项目还会在那儿。寄存帐号是免费的。）3D动效不可能。原型范例在&上查看（注册一个帐号，把项目导入到你的帐号就能看了。）iOS app:Android app:价格：29美元/月,或者288美元/年,可以有5个活跃项目。还有10、15、30个活跃项目的套餐，以及一个15日免费试用期。PixateOS X和Windows桌面应用，IOS和安卓调试器Pixate似乎恰到好处的平衡了易用性和功能性：它比简单的基于页面的工具功能更多，但学习曲线并不很陡。仔细看过后你就能上手了。还有几个供你解构，看看它们是怎么做出来的。预览Pixate Studio可以使用Xcode的IOS Simulator（Mac版）来运行原型，也可以通过本地WiFi用IOS或安卓app来访问原型。这个功能很棒，特别是Simulator和app都是即时更新的。发给客户如果你有云套餐（5美元/月），你可以，人们可以用IOS或安卓调试器扫描这个网页上的二维码来运行原型。你可以在你的云帐号里增加无限量的"协作者"，允许他们访问原型，他们必须在调试器app中登录自己的帐号才能访问。或者，你可以仅仅把.pixate文件用邮件发给别人，他们可以在Pixate Studio中打开并运行（但同时客户也能看到原型是怎么做的，还能做出修改）。跟app的区别第六个页面会消失，因为Pixate的canvas画布只有这么宽（最多五个页面）。优点易于学习缺点依旧有些问题，有时可能需要。原型范例&|&Mac或PC应用：移动应用：&|&价格：Pixate Studio免费！（曾经149美元，直到谷歌于2015年7月收购Pixate。）Pixate Cloud5美元/用户/月 或者 50美元/用户/年，有30天免费试用期。Facebook Origami运行在苹果公司的Mac版Quartz Composer中，iPhone或iPad上有个查看器用来测试。你很可能已经知道，Origami是Facebook&的设计团队开发的。Origami不是个独立程序，它相当于的一个插件。而Quartz Composer是一个可视化程序设计环境，苹果公司开发工具集的一部分。在Quartz Composer里，你通过把多个“patch”相互连接来进行编程。不同的patch有不同的功能。Origami主要是一套额外的patch，用来设计app UI。与必须写代码相比，很多人更喜欢这种方式（不包括我）。但是，当你必须描述诸如“如果这样，那么就用这段计算的值那样做，但如果不是这样....”，你还是不得不“编程”，只不过这个编程是通过连接几个patch，而不是写几行代码。另外提一下：IDEO也基于Quartz Composer创建了一个原型设计框架，叫。它有的一些功能，在某些项目里可能会很方便：蓝牙集成、一个IOS交互式键盘、一个像滚轮那样交互的拨号盘patch、和一个可翻转的卡片patch，而且层也可以做成可拖拽的。预览在桌面：Quartz Composer有一个查看器，你在编辑器里的任何修改会在查看器里即时得到反映。在设备上：用Origami Live app，你可以在IOS设备上测试，IOS设备需要插在Mac上。app对所有手势(触摸、滑动等）都会作出反应，但实际上只是Quartz Composer里运行的程序的观察窗而已。如果你的Mac难以以60fps运行原型，那么它在Origami Live里面也跑不了多快。发给客户这个就难了。你当然可以给你的原型做一个屏幕录像，但是这样就达不到做一个交互式原型的目的了，还不如用After Effects做点什么呢。唯一一个在其它电脑上测试原型的现实办法是准备相同的配置。如果你的客户用Mac，她可以安装Quartz Composer + Origami来运行你的原型——当然，还得首先注册苹果开发者帐号。跟app的区别可能会比真家伙慢一点儿，这取决于你的电脑。Quartz Composer绝对是个电老虎，会让你的散热风扇狂转的，尤其是当你的Mac没有强大的显卡（比如我的Mac Mini），或者连接了多个显示器（罪过！）。我只用一台显示器，最多才能跑到20fps。优点虽然有些不全，但是有个非常活跃的。此外，你还可以找到不少的视频、教程和博文。缺点不容易知道活儿该怎么做，有那么多patch，不知道该用哪个。Quartz Composer否保持活跃开发现在还不清楚，最近的版本是2011年11月份发布的。但另一方面，苹果公司很可能会在搁置这个工具之前，发行一个使用Quartz框架的替换工具来做可视化交互设计。原型范例Mac 应用：IOS查看器：价格：免费！你还需要一个苹果开发者帐号，那也是免费的，就像啤酒、或者随便苹果公司的开发人员喝的什么。（译者注：苹果公司每隔数周都会举行“啤酒狂欢”奖励员工，为他们提供免费啤酒和开胃菜。）FramerFramer Studio是Mac上的原型设计应用，但Framer.js仅需要Safari或Chrome.这里没有拖放、按钮或连接点，用Framer你必须“写代码”。程序员会觉得这跟在家一样自在，而设计师就未必了。不过它并不很难————Framer Studio使用了一款精简版的JavaScript，叫CoffeeScript。实际的引擎(Framer.js)使用JavaScripts，这就造就了大量的可能性：只要浏览器可以做的你都能做，比如使用即时数据连接服务器，或者创建一个Twitter客户端显示实时推文。预览在桌面：Framer Studio在右侧有个即时可交互的预览，你做的修改可以马上更新。在设备上：有安卓和IOS下的app，在同一个WiFi网络里它们都可以连接到Framer Studio，每次在Framer Studio保存修改后会自动刷新原型。发给客户只需点一下鼠标就能生成一个公开页面（比如），可以用Chrome或Safari查看，移动浏览器也行（链接可以作为“应用”加入到IOS主屏）。同样的链接也能用IOS和安卓查看器（其实就是无边框的浏览器）打开。像IF这样较大的原型在查看器里加载需要花几秒钟，但加载后动效就平滑了。跟app的区别这个原型比其它四个更能干一些：你可以在最近的一页切换登录、注册和重置密码模式。（你并不能真正的登录或注册，但这些操作在Framer里也能再现。）优点与 Sketch 或 Photoshop的集成是再好不过了：设计的时候可以用你给的命名来引用层或对象。（Framer.js包含一个Mac应用Framer Generator，也能做到这一点。）任何JavaScript能做到的——比如从web service获得即时数据，使用加速度传感器——用Framer都是可以实现的。缺点你必须为所有东西写代码，包括动效或交互。你需要熟悉或者了解CoffeeScript，或许再加上JavaScript。原型范例&|&Mac应用：iOS app:Android app:价格：Framer.js，JavaScript框架，是开源免费的。Framer Studio 需要99美元。（有14天免费试用期。）Form by RelativeWaveMac应用，带有一个iPhone或iPad上的查看器Form还很年轻（2014年9月发布），而且很明显，它是从Facebook和IDEO在Quartz Composer上所做的得到了启发。RelativeWave的那些家伙很可能想：“如果没有Quartz Composer这个包袱，Origami会是什么样呢？” Origami用户会觉得Form用起来很舒服，很多patch是相同的，而且Form只包含你需要的那些patch。预览原型是在通过WiFi或USB连接的IOS设备上运行的。如果没有设备连上，你会发现双击两个patch之间的连接时不会有读数显示出来。如果像Quartz Composer那样，Mac应用里带个查看器的话肯定是很方便的，这个功能。发给客户免费的IOS查看器能够打开.form文件，你只需要把文件用邮件发给客户，让他们用自己的IOS设备运行即可。跟app的区别我觉得不多。如果你发现了就告诉我。优点与Origami相比：原型在设备上是以原生方式运行的，所以比Origami Live反应灵敏得多。你可以使用设备上的相机、加速度传感器、陀螺仪和定位功能。(Origami可以使用Mac上的摄像头)缺点跟Origami一样，如果搞了一个复杂的原型，跑起来就像面汤一样粘呼呼的。把patch组合起来能够获得更好的概览效果。原型范例Mac应用：iOS app:价格免费！Mac应用曾经是79.99美元，谷歌去年11月（那时Form发布了仅仅数月）收购了RelativeWave之后就免费提供了。如何挑选？如果你从未用过上述的任何一个，而且想快速的做出原型：Pixateor&Proto.io但是如果你愿意投入时间学习一个强大的工具：Form, 如果你喜欢可视化编程Framer, 如果你更愿意写代码这五款工具我已经全都了解了（至少一点点吧），所以我可能会在不同的场景使用不同的工具：当我还处在研究app流程的阶段，我用一款基于页面的工具，在这个阶段不需要高保真的原型设计。Proto.io也可以用作低保真原型设计： 它包含IOS、安卓、Windows Phone的标准界面元素，而且你可以链接不同的屏。它还有个进一步的优势，就是后期可以用Sketch或Photoshop设计的元件，来让原型“漂亮点儿”。当已经有现成的UI设计和元件了，用Pixate，只要动效别太复杂。如果原型里需要使用设备的传感器或相机，那就用Form。其他的情况都用Framer。
「GetParty」
关注微信号，推送好文章
微信中长按图片即可关注& &设计资源
现在大家都爱扁平风格的设计，但是因为简约的设计风格也意味着更少的元素表现，对于很多入行不久的设计师来说，打造新颖的“扁平”设计，确实有些难度。常常会不知道要在图层面板上放些神马东西，如果配色也不太懂， ...
设计师的资源库里面永远缺少设计素材。网页设计师希望它是一套响应式模板，UI设计师希望它是一套UIKit，前端希望它是新的框架，交互设计师希望它是一套新的交互设计方案，网站站长期待新的Wordpress主题能让他更省心 ...
随着移动端迅速发展，现在网站建设一般都要求兼容手机端，所以为了节约成本，大部分用户喜欢使用一些响应式前端框架，特别流行使用Bootstrap来建站，其良好扩展性加上实用的特效功能，足以应付大多数网站需求，今天 ...
必须承认，Wordpress依然是目前最流行、最易用的内容管理系统，合理地使用Wordpress主题能够让你的网站化身千万，适应不同需求，不论是新闻门户，还是时尚小站。也正是这种强大的可塑性，使得用户对于Wordpress主题 ...
为了适应手机版的网站，网站导航都需要逐一优化，今天分享9款最新的响应式导航菜单插件，帮你节省大量时间。Mmenu这个mmenu插件除了能实现手机侧边栏菜单外，它设计的2级菜单效果也很棒，就像是iPhone的设置菜单一样 ...
请问一下有没有五月份最新的免费PSD？有啊，你从这条微博右转那篇文章进去就有网站模板、名片模板、图标合集、Apple Watch模板等等，大多来自追波跟Behance呦。噢好谢谢。IOS 重设计概念稿PSD↓ ↓ 免费下载 ↓ ↓企 ...
绝对值得收藏！响应式网站是大势所趋，今天这组模板，可以非常方便地展示你的网站作品，全都附有笔记本、台式机、平板和手机的模板，建议马克下，以后一定会用到的。Responsive Showcase PSDApple Device Wireframe
前端框架对于不懂设计的程序员来说，可以说是极好的素材，如果想开发一个项目但又找不到设计师帮忙设计，那么我们可以直接使用前端框架来完成，而且能省去很多前端JS的工作，比如今天这款，质量就特别高.今天为大家 ...
模板的存在让Web和APP的UI设计省心了不止一星半点。成型的布局和系统的配色，省却了设计师从零开始设计的烦恼。目前主流的移动端系统依然只是Android和iOS，Windows Phone的崛起与否尚未可知。但是即便是这两大系统 ...
首先要告诉大家一个好消息，原本 $9.99 一个月 / $99.9 一年 的Assistor PS现已免费下载。对于学生用户全面免费，而其他用户在今年 6 月之后就不用再购买商业许可证也可以免费使用，功能强大，特别好用。基本介绍与 ...
22个你从未见过的免费图片站！今天这组图库站主打小众精致，当然也穿插了不少齐而全的免费图库站，小编亲测可打开，来收 。FANCYCRAVE分类：城市、旅行、建筑、自然、物品MADE IN MOMENTS分类：美食、城市、旅游、自 ...
今天这组优质字体全都出自全球艺术社区Behance和追波的设计师大神之手，风格之多，质量之高无须赘言，花了不少时间打包微盘，来收.字体打包微盘下载BesomMANIFESTOMuller fontMoonPIERSlotACHIGrowlSmaq ALDINickain ...
本次精选了三月份热门的优质PSD，包括高端的个人简历模板、饭店APP UI KIT、Apple Watch+iPhone 6 Sketch源文件、响应式网站模板等等，总25款，精选部分已打包微盘。个人简历模板↓↓ 免费下载 ↓↓Apple Watch iPho ...
三月初分享了一组优质的简历模板，很多同学怒赞，今天继续第二季，大多数是从追波和Bahance收集的高质量免费模板，好货不多说，来收!Free Resume Template by Ayoob UllahFree Vita / Resume / CV InDesign Template ...
3月第二组展示模板及时送到！说到这组模板，肯定少不了最近大热的全新MacBook，三色可选（土豪金、星空灰、银白色），可定制屏幕，超高分辨率，免费入手，已打包微盘。另附众多高质量的新鲜模板，绝对值得 ...
评论排行榜