Facebook 新寵 Paper 發(fā)布后, 以其行云流水般的拖拽操作迅速成為小伙伴們討論的熱點. 同時微博上也在熱傳其幕后原型設(shè)計工具 Origami 有多厲害: 【新聞聚合閱讀應(yīng)用Facebook Paper的幕后功臣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é) – Facebook Paper 專題, 很好的解析了 Paper 的各種交互細節(jié).

接著說說我對 Paper 的看法. 拋開各種設(shè)計和動畫細節(jié)(這點也是 Axure 目前還做不到的), 我覺得 Paper 有兩個維度的核心: 交互操作方式核心“拖拽”和信息架構(gòu)核心“卡片”.

全拖拽式操作

在 Paper 中, 需要用戶點擊的操作大大減少, 更多時候用戶只需用大拇指拖拽信息對象, 就能完成主要任務(wù). 在 PC 時代, 我們用鼠標(biāo)點擊界面中的各種元素. 這種習(xí)慣也被帶到了移動應(yīng)用里. 只是鼠標(biāo)變成了手指, 鏈接變成了按鈕. 想想我們平時常用的 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), 很容易迷失在一大堆面板中.

?

功能和實現(xiàn)原理說明

主屏界面 Banner 和 Post 的滑動:

滑動效果在原型中是最常見的效果. 可以使用 Dynamic Panel + onDrag 事件實現(xiàn). 稍麻煩點的是需要設(shè)定各種判斷條件來模擬出彈簧跳躍效果:

不同 Sections 之間的轉(zhuǎn)場效果:

?

轉(zhuǎn)場效果是 Axure 的硬傷之一. 因為 Axure 的 Dynamic Panel 在同一時間只能顯示唯一 state, 因此很難實現(xiàn)拖動當(dāng)前界面時露出其它界面. 所以當(dāng)向下拖拽當(dāng)前卡片時, Paper 中可以慢慢露出當(dāng)前卡片下的用戶 Profile, 但原型就做不到這點了.

最可惜的還是沒辦法在拖拽過程中動態(tài)改變 Dynamic Panel 大小, 導(dǎo)致文章切換效果退回成了老土的點擊切換. 唉~ Axure 得爭氣啊.

氣泡框彈出效果:
?

Paper 上那種氣泡框彈出來還會顫抖一下的細節(jié)咱 Axure 做不出來啊(這時候倒希望直接用 JS 來實現(xiàn)了)~ 所以用了常見的淡入淡出效果. 這個效果的難點是在點擊呼出不同氣泡框時需要判斷是否有其它氣泡框打開:

Messages 界面是我截的圖. 其中第三個頭像 “Eric Lu” 可點擊呼出用戶小頭像.

用戶頭像相關(guān)效果:

點擊用戶頭像可以呼出聊天面板(偷懶這里也用圖片啦). 將用戶頭像拖至刪除圖標(biāo)附近可以清除當(dāng)前用戶. 這里又要吐槽 Axure. onDrag 事件只提供了 DragX/Y(瞬間移動距離)和 TotalDragX/Y(本次移動總距離)可供使用. 我取不到用戶頭像的當(dāng)前位置, 所以原型里只能拖拽用戶頭像足夠長距離時, 才能清除…

當(dāng)然 Paper 里多個用戶頭像跟隨移動的高級效果更不用指望 Axure 能做出來啦

三. 原型下載及其它

原型在線預(yù)覽:?Facebook Paper Mockup Live

原型文件下載(使用 Axure 6.5 制作, 7.0 也可打開):?Dropbox?|?百度云

歡迎大家折騰, 也歡迎各位同學(xué)把自己的原型放上來分享.

最后想說的是, 原型核心在于產(chǎn)品經(jīng)理思路的完整體現(xiàn). 原型的形式其實多種多樣, 沒必要追求 “高保真”, 更不要把原型當(dāng)做實際產(chǎn)品來做(我在做這個原型時就常陷入 “象素級” 的大坑). 產(chǎn)品經(jīng)理最重要的能力還是在于那顆為人民服務(wù)的大腦和心.

本文系作者：Evan（微博@evanzhou）投稿發(fā)布，轉(zhuǎn)載請注明來源于人人都是產(chǎn)品經(jīng)理并保留本文鏈接