快速制作高保真原型不得不知的小技巧

原型的目的在于清楚的表达产品的设计理念和功能的执行逻辑，所以我认为能够达到这个目的的原型都是合格的。但如果可以把原型做的更加精致美观些，又何乐而不为呢。然而需要注意的是，我们毕竟是负责产品的，不是负责界面设计的，所以哪怕是制作高保真原型，也要快。

在需求讨论，功能确定阶段，我们会画线框图，也就是低保真原型。待需求功能流程基本理清后，为保证时间效率，通常会出中保真原型图给设计，毕竟出高保真要占用更多的时间。不过，在有些时候我们是有必要甚至必须出高保真原型，比如进行原型测试。

这是我按照简书IOS端APP做的原型界面，两个界面没超过15分钟。

原型示例

我不会告诉你我是这样做的

准备篇

• 素材积累
  工作的时候每隔一段时间我会停下手头的活，休息几分钟（番茄工作法）。一般在这几分钟我会站起来走两步，然后就是看看素材类，图片类网站。因为逛这类网站不用动脑，所以放松挺不错。顺便看到不错的图片就保存下来当素材。

  列一些我常去的网站：
  花瓣网 http://huaban.com/
  国内知名图片分享网站UI社 http://www.uishe.cn/ 素材类网站，免费下载psd文件
  easyicon http://www.easyicon.net 可以搜索你想要的各种icon
  dribbble https://dribbble.com/ 交互类作品分享平台，国外大神常出没于此
  reeoo http://reeoo.com 国外素材类网站，支持免费下载

• 修图小技巧
  积累的图片素材有时候不能直接用，可能背景不透明，可能填充色不对等等。所以掌握简单的修图技巧还是需要的。通常用的比较多的就是切图（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对照版http://vdisk.weibo.com/s/sRCuwKXDvAjWC

• 辅助线
  Axure有全局辅助线和局部辅助线。全局辅助线在所有页面都有效，局部辅助线只在当前页面有效。

  在开始制作原型图前，我会先布局好主要的辅助线。比如我做的原型界面是375x668（iphone6屏幕像素的一半）的大小，控件距屏幕边缘20px宽，为方便布局，我会先设置几条全局线。

  
  

  创建全局辅助线
  
  

  移动左边两条辅助线
  
  

  移动后
  
  

  选中所有辅助线，设置锁定

  
  这样基础的辅助线就设置好了，再在具体使用中灵活运用局部辅助线，我们就可以愉快的布局玩耍啦。

  
  

  利用辅助线快速布局

• 对齐分布和等间距分布
  想要多个控件的位置摆放合理美观，我们常常用到对齐分布或等间距分布。

  对齐分布有三种方法：
  一，利用Axure的提示对齐线移动控件的过程中，提示对齐线会自动出现（原谅我截不了图），按提示操作即可，很傻瓜式。
  二，利用辅助线关于辅助线，前面已经说到，不罗嗦了。
  三，利用对齐动作比如我想让控件2对于控件1进行左对齐，先选中控件1，再选中控件2(注意顺序)，然后去点右上角红圈处的对齐按钮，选中左对齐即可。可以记住对齐快捷键，那操作就很快啦。

  
  

  
  对于2两个以上的需要等间距分布的控件，我们可以利用等间距操作。比如tabbar，通常有4、5个按钮。我们在设置好一个按钮后，直接复制粘贴，如图

  
  
  
  

  把最两边的按钮位置放好，选中全部按钮
  
  

  顶部对齐
  
  

  进行水平等间距
  
  

  完成

• 取色
  这里正是我前面卖的关子。我们制定好了规范，每个界面的背景色都是#F7F7F7，现在我要修改一个蓝色背景的矩形组件，怎么该颜色呢？输入色值？当然可以，但慢啊。用取色笔？屏幕里没有我要的颜色啊？瞧我的。

  我根据规范的颜色，分别自定义了矩形组件。这样会在Axure的组件栏里显示出来。

  
  

  这些组件不是用来拖的，而是方便我取色的

  
  接下来用取色笔就可以方便的取色啦，是不是很机智。

  
  

• temp页
  写代码讲究复用，讲究ctrl+c,ctrl+v。做原型也一样，要学会“懒”。有时候某个界面的控件在其他地方也会用，对于这样的控件，我会把它放到temp页里。

  temp页是做作原型过程中的临时页面。它就像个复用池，里面的控件随时准备被我拿来ctrl+c，啦啦啦。

  
  

转自：http://www.jianshu.com/p/6824fe2568fb