用Axure打造FacebookPaper原型

　　Facebook新宠Paper发布后，以其行云流水般的拖拽操作迅速成为小伙伴们讨论的热点。同时微博上也在热传其幕后原型设计工具Origami有多厉害：【新闻聚合阅读应用FacebookPaper的幕后功臣Origami】。我也跟风下载了Origami，但发现要上手其实还挺麻烦的，至少不像他们说的“可以让设计师快速构建原型”。
　　仔细把玩Paper一翻后，我发现其实用我们更熟悉的Axure也能实现其大部份交互效果。虽然对于直接拖拽文章阅读这种帅气交互来说Axure还不能胜任（6。5不能动态改变DynamicPanel大小真是渣啊！），但经过一天的打造也磨合得差不多了。一起来看看吧
　　一。Paper交互浅析
　　首先要说明，我觉得Paper的交互有点设计过度了。关于这点可以参考C7210同学的系列文章：那些小处见大的设计细节FacebookPaper专题，很好的解析了Paper的各种交互细节。
　　接着说说我对Paper的看法。抛开各种设计和动画细节（这点也是Axure目前还做不到的），我觉得Paper有两个维度的核心：交互操作方式核心“拖拽”和信息架构核心“卡片”。
　　全拖拽式操作
　　在Paper中，需要用户点击的操作大大减少，更多时候用户只需用大拇指拖拽信息对象，就能完成主要任务。在PC时代，我们用鼠标点击界面中的各种元素。这种习惯也被带到了移动应用里。只是鼠标变成了手指，链接变成了按钮。想想我们平时常用的APP，是不是很少能体现出移动设备“touch”的特征呢？难怪APPStore更喜欢带有滑动手势的应用呢
　　卡片式设计
　　Paper的主要信息对象被设计成为一张张卡片。配合拖拽手势，几乎打破了传统APP首页列表文章详情式信息结构，让用户在使用时信手拈来。当然这也容易导致学习成本上升，用户容易“迷路”等问题。
　　二。原型效果
　　如前文所述，因为Axure不能实现在拖拽DynamicPanel时动态改变其大小，也不能获取当前DynamicPanel的基本属性（位置，大小等），所以Paper很多漂亮的交互效果只能打了折扣（如果有同学知道怎么获取这些参数还请留言告诉我哦）。好了，先上一张整体效果：
　　开工前的注意事项
　　因为需要用到很多动画转场效果，因此在开工前需要好好规划一下原型的整体结构。原型有几层界面，每层界面包含哪些元素，界面之间的关系如何，事件效果发生在哪个面板上，等等。同时会用到大量DynamicPanel，不同面板的命名也相当重要。Axure毕竟不是代码工具，如果面板层级混乱或命名不当，很容易迷失在一大堆面板中。
　　
　　功能和实现原理说明
　　主屏界面Banner和Post的滑动：
　　滑动效果在原型中是最常见的效果。可以使用DynamicPanelonDrag事件实现。稍麻烦点的是需要设定各种判断条件来模拟出弹簧跳跃效果：
　　不同Sections之间的转场效果：
　　
　　转场效果是Axure的硬伤之一。因为Axure的DynamicPanel在同一时间只能显示唯一state，因此很难实现拖动当前界面时露出其它界面。所以当向下拖拽当前卡片时，Paper中可以慢慢露出当前卡片下的用户Profile，但原型就做不到这点了。
　　最可惜的还是没办法在拖拽过程中动态改变DynamicPanel大小，导致文章切换效果退回成了老土的点击切换。唉Axure得争气啊。
　　气泡框弹出效果：
　　
　　Paper上那种气泡框弹出来还会颤抖一下的细节咱Axure做不出来啊（这时候倒希望直接用JS来实现了）所以用了常见的淡入淡出效果。这个效果的难点是在点击呼出不同气泡框时需要判断是否有其它气泡框打开：
　　Messages界面是我截的图。其中第三个头像“EricLu”可点击呼出用户小头像。
　　用户头像相关效果：
　　点击用户头像可以呼出聊天面板（偷懒这里也用图片啦）。将用户头像拖至删除图标附近可以清除当前用户。这里又要吐槽Axure。onDrag事件只提供了DragXY（瞬间移动距离）和TotalDragXY（本次移动总距离）可供使用。我取不到用户头像的当前位置，所以原型里只能拖拽用户头像足够长距离时，才能清除
　　当然Paper里多个用户头像跟随移动的高级效果更不用指望Axure能做出来啦
　　三。原型下载及其它
　　原型在线预览：FacebookPaperMockupLive