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