今天為大家介紹的是如何打造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, 不同面板的命名也相當重要e畢竟不是程式碼工具, 如果面板層級混亂或命名不當, 很容易迷失在一大堆面板中.
