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