如何打造Axure原型

　　今天為大家介紹的是如何打造Axure原型，希望大家喜歡。就跟隨百分網小編一起去了解下吧，想了解更多相關信息請持續(xù)關注我們應屆畢業(yè)生考試網!

　　Facebook新寵 Paper 發(fā)布后, 以其行云流水般的拖拽操作迅速成為小伙伴們討論的熱點. 同時微博上也在熱傳其幕后原型設計工具 Origami 有多厲害 我也跟風下載了 Origami, 但發(fā)現要上手其實還挺麻煩的, 至少不像他們說的 “可以讓設計師快速構建原型”.仔細把玩 Paper 一翻后, 我發(fā)現其實用我們更熟悉的Axure也能實現其大部份交互效果. 雖然對于直接拖拽文章閱讀這種帥氣交互來說Axure還不能勝任(6.5 不能動態(tài)改變 Dynamic Panel 大小真是渣啊!), 但經過一天的打造也磨合得差不多了. 一起來看看吧

　　一. Paper 交互淺析

　　首先要說明,我覺得 Paper 的交互有點設計過度了.關于這點可以參考@C7210同學的系列文章:那些小處見大的設計細節(jié) –FacebookPaper 專題, 很好的解析了 Paper 的各種交互細節(jié).接著說說我對 Paper 的看法. 拋開各種設計和動畫細節(jié)(這點也是Axure目前還做不到的), 我覺得 Paper 有兩個維度的核心: 交互操作方式核心“拖拽”和信息架構核心“卡片”.

　　全拖拽式操作

　　在 Paper 中, 需要用戶點擊的操作大大減少, 更多時候用戶只需用大拇指拖拽信息對象, 就能完成主要任務. 在 PC 時代, 我們用鼠標點擊界面中的各種元素. 這種習慣也被帶到了移動應用里. 只是鼠標變成了手指, 鏈接變成了按鈕. 想想我們平時常用的 APP, 是不是很少能體現出移動設備 “touch” 的特征呢? 難怪 APPStore 更喜歡帶有滑動手勢的應用呢

　　卡片式設計

　　Paper 的主要信息對象被設計成為一張張卡片. 配合拖拽手勢, 幾乎打破了傳統(tǒng) APP 首頁 > 列表 > 文章詳情式信息結構, 讓用戶在使用時信手拈來. 當然這也容易導致學習成本上升, 用戶容易 “迷路” 等問題.

　　二. 原型效果

　　如前文所述, 因為Axure不能實現在拖拽 Dynamic Panel 時動態(tài)改變其大小, 也不能獲取當前 Dynamic Panel 的基本屬性(位置, 大小等), 所以 Paper 很多漂亮的交互效果只能打了折扣(如果有同學知道怎么獲取這些參數還請留言告訴我哦). 好了, 先上一張整體效果:

　　開工前的注意事項

　　因為需要用到很多動畫轉場效果, 因此在開工前需要好好規(guī)劃一下原型的整體結構. 原型有幾層界面, 每層界面包含哪些元素, 界面之間的關系如何, 事件效果發(fā)生在哪個面板上, 等等. 同時會用到大量 Dynamic Panel, 不同面板的命名也相當重要.Axure畢竟不是代碼工具, 如果面板層級混亂或命名不當, 很容易迷失在一大堆面板中.

【如何打造Axure原型】相關文章：

axure生成網頁原型的方法10-13

axure導出原型為圖片的方法08-08

Axure設計原型的建議是什么09-11

解讀交互設計-Axure原型交互輸出11-12

Axure原型設計時的一些問題11-16

如何打造金屬文字07-30

如何在團隊中進行AxureRP原型設計11-17

Axure常用交互效果10-12

Fireworks如何打造特效文字09-28