如何打造Axure原型
今天為大家介紹的是如何打造Axure原型，希望大家喜歡。就跟隨百分網(wǎng)小編一起去了解下吧，想了解更多相關(guān)信息請持續(xù)關(guān)注我們應(yīng)屆畢業(yè)生考試網(wǎng)!
Facebook新寵 Paper 發(fā)布后, 以其行云流水般的拖拽操作迅速成為小伙伴們討論的熱點. 同時微博上也在熱傳其幕后原型設(shè)計工具 Origami 有多厲害 我也跟風(fēng)下載了 Origami, 但發(fā)現(xiàn)要上手其實還挺麻煩的, 至少不像他們說的 “可以讓設(shè)計師快速構(gòu)建原型”.仔細把玩 Paper 一翻后, 我發(fā)現(xiàn)其實用我們更熟悉的Axure也能實現(xiàn)其大部份交互效果. 雖然對于直接拖拽文章閱讀這種帥氣交互來說Axure還不能勝任(6.5 不能動態(tài)改變 Dynamic Panel 大小真是渣啊!), 但經(jīng)過一天的打造也磨合得差不多了. 一起來看看吧
一. Paper 交互淺析
首先要說明,我覺得 Paper 的交互有點設(shè)計過度了.關(guān)于這點可以參考@C7210同學(xué)的系列文章:那些小處見大的設(shè)計細節(jié) –FacebookPaper 專題, 很好的解析了 Paper 的各種交互細節(jié).接著說說我對 Paper 的看法. 拋開各種設(shè)計和動畫細節(jié)(這點也是Axure目前還做不到的), 我覺得 Paper 有兩個維度的核心: 交互操作方式核心“拖拽”和信息架構(gòu)核心“卡片”.
全拖拽式操作
在 Paper 中, 需要用戶點擊的操作大大減少, 更多時候用戶只需用大拇指拖拽信息對象, 就能完成主要任務(wù). 在 PC 時代, 我們用鼠標點擊界面中的各種元素. 這種習(xí)慣也被帶到了移動應(yīng)用里. 只是鼠標變成了手指, 鏈接變成了按鈕. 想想我們平時常用的 APP, 是不是很少能體現(xiàn)出移動設(shè)備 “touch” 的特征呢? 難怪 APPStore 更喜歡帶有滑動手勢的應(yīng)用呢
卡片式設(shè)計
Paper 的主要信息對象被設(shè)計成為一張張卡片. 配合拖拽手勢, 幾乎打破了傳統(tǒng) APP 首頁 > 列表 > 文章詳情式信息結(jié)構(gòu), 讓用戶在使用時信手拈來. 當(dāng)然這也容易導(dǎo)致學(xué)習(xí)成本上升, 用戶容易 “迷路” 等問題.
二. 原型效果
如前文所述, 因為Axure不能實現(xiàn)在拖拽 Dynamic Panel 時動態(tài)改變其大小, 也不能獲取當(dāng)前 Dynamic Panel 的基本屬性(位置, 大小等), 所以 Paper 很多漂亮的交互效果只能打了折扣(如果有同學(xué)知道怎么獲取這些參數(shù)還請留言告訴我哦). 好了, 先上一張整體效果:
開工前的注意事項
因為需要用到很多動畫轉(zhuǎn)場效果, 因此在開工前需要好好規(guī)劃一下原型的整體結(jié)構(gòu). 原型有幾層界面, 每層界面包含哪些元素, 界面之間的關(guān)系如何, 事件效果發(fā)生在哪個面板上, 等等. 同時會用到大量 Dynamic Panel, 不同面板的命名也相當(dāng)重要.Axure畢竟不是代碼工具, 如果面板層級混亂或命名不當(dāng), 很容易迷失在一大堆面板中.
【如何打造Axure原型】相關(guān)文章：
axure生成網(wǎng)頁原型的方法03-08
axure導(dǎo)出原型為圖片的方法09-21
Axure設(shè)計原型的建議是什么08-30
Axure原型設(shè)計時的一些問題10-28
如何打造金屬文字11-19
Fireworks如何打造水晶圖標12-03
如何打造高效營銷團隊02-16