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