如何打造Axure原型
今天为大家介绍的是如何打造Axure原型，希望大家喜欢。就跟随小编一起去了解下吧，想了解更多相关信息请持续关注我们应届毕业生考试网!
Facebook新宠 Paper 发布后, 以其行云流水般的拖拽操作迅速成为小伙伴们讨论的热点. 同时微博上也在热传其幕后原型设计工具 Origami 有多厉害 我也跟风下载了 Origami, 但发现要上手其实还挺麻烦的, 至少不像他们说的 “可以让设计师快速构建原型”.仔细把玩 Paper 一翻后, 我发现其实用我们更熟悉的Axure也能实现其大部份交互效果. 虽然对于直接拖拽文章阅读这种帅气交互来说Axure还不能胜任6.5 不能动态改变 Dynamic Panel 大小真是渣啊!, 但经过一天的'打造也磨合得差不多了. 一起来看看吧
一. Paper 交互浅析
首先要说明,我觉得 Paper 的交互有点设计过度了.关于这点可以参考@C7210同学的系列文章:那些小处见大的设计细节 –FacebookPaper 专题, 很好的解析了 Paper 的各种交互细节.接着说说我对 Paper 的看法. 抛开各种设计和动画细节这点也是Axure目前还做不到的, 我觉得 Paper 有两个维度的核心: 交互操作方式核心“拖拽”和信息架构核心“卡片”.
全拖拽式操作
在 Paper 中, 需要用户点击的操作大大减少, 更多时候用户只需用大拇指拖拽信息对象, 就能完成主要任务. 在 PC 时代, 我们用鼠标点击界面中的各种元素. 这种习惯也被带到了移动应用里. 只是鼠标变成了手指, 链接变成了按钮. 想想我们平时常用的 APP, 是不是很少能体现出移动设备 “touch” 的特征呢? 难怪 APPStore 更喜欢带有滑动手势的应用呢
卡片式设计
Paper 的主要信息对象被设计成为一张张卡片. 配合拖拽手势, 几乎打破了传统 APP 首页 > 列表 > 文章详情式信息结构, 让用户在使用时信手拈来. 当然这也容易导致学习成本上升, 用户容易 “迷路” 等问题.
二. 原型效果
如前文所述, 因为Axure不能实现在拖拽 Dynamic Panel 时动态改变其大小, 也不能获取当前 Dynamic Panel 的基本属性位置, 大小等, 所以 Paper 很多漂亮的交互效果只能打了折扣如果有同学知道怎么获取这些参数还请留言告诉我哦. 好了, 先上一张整体效果:
开工前的注意事项
因为需要用到很多动画转场效果, 因此在开工前需要好好规划一下原型的整体结构. 原型有几层界面, 每层界面包含哪些元素, 界面之间的关系如何, 事件效果发生在哪个面板上, 等等. 同时会用到大量 Dynamic Panel, 不同面板的命名也相当重要.Axure毕竟不是代码工具, 如果面板层级混乱或命名不当, 很容易迷失在一大堆面板中.