為什麼會有人用 Keynote 做動畫和交互?這能為交互設計提供哪些幫助?
蘋果就自己有個專門製作原型的團隊,他們流竄在各個項目組之間包攬所有的原型製作工作,包括動畫和交互。他們的主要工具就是Keynote。
這來自於WWDC 2014 Session Videos里有個視頻Prototyping: Fake It Till You Make It ,就是他們指導如何用Keynote做出逼真的交互原型的,這段我也是剛看到,其實一直想補到之前的答案里。下面結合這個視頻的截圖可以介紹下他們是怎麼充分發揮Keynote的特點的。綜述一下先:
- 靜態圖
- 先用畫好的線框圖或者直接在keynote里用色塊布局
- 填充圖片,可調整陰影等基本效果
- 導出圖片放進手機里
- 根據用戶反饋調整
- 動畫效果
- 利用Keynote自帶的物件動畫
- 活用Keynote最棒的「神奇移動」轉場效果
- 手機裝上keynote app打開演示文檔
- 根據反饋調整效果
- 交互事件
- 調整圖片尺寸導入xcode
- 僅用針對圖片的簡單代碼
- 僅用簡單的交互手勢 代碼
首先:製作靜態圖。
- 先用畫好的線框圖或者直接在keynote里用色塊布局,keynote提供了多種智能的對齊,布局,格式等等設計方式,整個過程會非常的輕鬆。比如自動標尺吸附等距等等,比絕大多數原型製作軟體都簡單人性化。
2. 對照一些線框圖可以繼續鋪色塊和布局,這個過程中你會發現這個對齊和吸附的過程是多麼的神奇。
3. 導入圖片,Keynote有很多種方式可以調整素材樣式,包框,陰影,透明圖,實時遮罩等等。是的,你可以用PS慢慢玩,也可以用keynote一鍵完成。
4. 很多人用原型軟體是看中那些控制項,其實大多數控制項還不如自己在Keynote里製作快速。而且Keynote自帶了很多標誌和Icon,完全不用到處去找了。比如這個例子里的打分用五星,改個黃色就可以了。
5. 依次類推,可以很快做出很多頁面,導出圖片格式,在手機中查看
第二階段,假互動,加入動畫效果。具體關於為何這麼做,每個階段完後的反饋過程,目標等等原理的東西請大家看視頻或者PDF吧,這裡主要說下過程和他們是怎麼充分發揮Keynote在原型製作中的特點的。
比如這個假互動的階段,如果你不用Xcode的話,這個就是交互原型的最後階段了。基本原理就是活用圖片,活用物件動畫,活用轉場動畫,足以做出以假亂真的原型,只要你的測試用戶不要瞎點......
關於Keynote自帶的動畫有非常多種和微調效果,起初我不是很理解,因為很多花哨的效果很難用到幻燈片里,直到開始做原型發現,其實很多動畫經過調整都是很好的交互效果,包括現在看到的一些令人驚艷的反彈,延遲等逼真的細節動作,Keynote早就可以微調模擬了。
據說鎚子手機和蘋果的很多交互效果,都是先用Keynote做出來再給工程師寫出來的。(是文末附的許岑視頻中說的,好像是,記不清了,無責任據說預警)
1. 製作動畫有很多方式,可以根據你的職業,習慣選擇不同的方法。
也有很多很巧妙的方式,其中最簡單,最快的就是一定要靈活運用圖片。靈活到什麼程度,我舉個視頻裡面全場爆笑的例子。動畫是這樣的:敲擊鍵盤,字元一個個的蹦著出現在屏幕上。裡面說,我可以只用一行或者乾脆不用代碼就做出來。這個用Keynote就可以實現,各位可以想想。
他們是這樣做的:
每個字母做了個圖片......
還可以通過調整圖片的排序大小製作不同的效果。
2. 特別提到一個Keynote獨有的「神奇移動」效果。可以把前一頁中的物件移動或放大到下一頁中。效果非常出眾。
好了,其實至此,絕大多數的動畫效果都可以做出來了。如果不滿足於此,學點簡單的語法,在Xcode里只用針對圖片和交互相關的代碼就可以做出更加逼真的原型了。
然後比較一下如果用代碼實現和用Keynote的差別
回顧一下三個階段:
這裡就是蘋果官方的原型是如何以Keynote為主要工具製作一個足以亂真的App。
我把視頻和文檔都傳到了百度盤裡Keynote_免費高速下載
另外關於Keynote的使用方法,推薦大家在 http://weibo.com/xucen 里跟著學習,足以從零開始做完原型,還可以做個漂亮的幻燈片忽悠投資去,一舉兩得!
——————————
更新一些內容:
1. 大家普遍提到屏幕旋轉的問題,官方視頻沒有介紹, @Mixar 經過研究給大家提供了簡便的操作方式,還有旋轉腳本提供下載 感謝感謝! 為什麼在國外會有人用 Keynote 做動畫和交互?這能為交互設計提供哪些幫助? - Mixar 的回答
在官方的培訓資源下載頁面Sample Code - Resources中找到了視頻中的keynote源文件,演示的文件叫Toast Modern Prototype。答案是:Apple他們也是做了一份橫屏版的效果在iPhone上演示!大概這種方法太上不了檯面,他們在視頻里也就沒涉及。
2. 關於怎麼出現特殊圖標:編輯-特殊字元
個人一直都在用Keynote做原型(前東家當然不是用它233),動畫視頻,現在知乎專欄里的插圖也是用Keynote做的。
Keynote不是專業的原型軟體也不是後期軟體更不是插畫軟體,所以很多時候總是有種種缺憾,但是它對我來說最重要的體驗就是一個字:
快!
rapid prototype, 天下武功唯快不攻啊。有了設計概念,花小半天就做出來,然後拿出來給大家討論,比慢悠悠沒有東西在紙上談兵空談理論要有效的多,很多時候你用草圖和文檔並不能傳遞的體驗,通過快速原型很快就能傳達出來。
也有個人順手不順手的問題,比如說Axure和Keynote比的話,我認識的人有人愛用Axure也有人用Keynote更順手,還是看個人習慣了。
第二個重要體驗就是:
全!
它什麼都能做啊,原型、動畫、插圖,我都用它做,簡直棒棒的,我電腦上現在都沒裝AE和AI。
【製作原型】
這是當時Siri剛出來的時候我和同學一起用keynote做的一個基於Siri服務找停車場的demo(請務必忽略槽點滿滿的視覺UI),從構思到原型做完用時4小時左右。
雖然很多動畫很僵硬,細節也表達不到,但功能和交互表達都可以清晰展示。
這也是快速原型的意義。
FINPA Demostration—在線播放—優酷網,視頻高清在線觀看視頻
送上蘋果官方教程一個:
Apple Keynote Prototype—在線播放—優酷網,視頻高清在線觀看視頻
【製作動畫視頻】
除了原型以外,Keynote還是動畫視頻快速製作利器。
這是我拿Keynote做的一個公益宣傳小視頻,用premiere合了音頻,調了速度,雖然很粗糙,但前後用了不到3小時,不追求效果只是給人展示概念的話就會省很多時間。
如果是用AE做的話不知道要花多久了(每次用AE我都想死。。。)PapaMama-社區公益組織—在線播放—優酷網,視頻高清在線觀看視頻
【畫簡單的插圖】
還有插圖什麼的也超方便,我用AI畫明顯就會慢很多。
————————
進化論 - 知乎專欄
情商、智商、職業、外貌,生活的全面提升。
多來這裡,你整個人都變好了。
【我們是】 兩個女博士, 一個非主流前微軟設計師, 還有一個辭了麥肯錫的創業狗。
【我們產】 80%乾貨+20%雞精
第一,因為Keynote免費。
第二,Keynote內建常用的動畫效果而且品質不錯。
第三,Keynote很容易學。
第四,Keynote可以在iPhone和iPad上面跑。所以如果你用的是Mac,你基本就白撿了一個做快速原型的工具。如果你想做一個簡單的初期概念原型(Proof Of Concept),用Keynote真的是一個簡單快速便宜的工具。我覺得它的價值在於用很低的成本讓設計師快速驗證一些早期的想法。
作為一個工具控,我曾經用keynote做過原型,如果不是keynote不支持各種動作事件(懸停、雙擊、滑動、長按...各種),我認為keynote幾乎可以把市面上各種交互原型軟體爆出翔來。
1.用keynote畫各種原型,低高保真,keynote簡直是毫無壓力,這個可以說不會輸給市面上任何一款交互原型軟體
2.用keynote做各種動畫效果,秒殺市面上的各種號稱交互原型軟體
Keynote 的超便捷以及容易學的這些特點,造就了設計團隊裡的」人人都能做UI demo」, 「人人都能探索 UI 的動態效果」。
最怕設計師早期在跟團隊溝通設計想法的時候,就拿出一個靜態的東西,然後要大家想像這個按鈕按下去會變色還會放大,那個頁面換頁是從左邊翻滾進來,諸如此類的。這種做法的問題在於,這無法確保大家腦海裡的畫面是同步的,我也就不提團隊想法不同步的後果了。大多時候並不是這些設計師不懂得做 demo,而是要用After Effect或者其他專業動畫軟體來做出效果圖,實在費時又耗精神。
Keynote基本上不需要設計師級別的專業技巧,只要你會做報告,曾經用過Keynote或者 PowerPoint, 都能在幾個小時內上手。這對交互設計團隊來說的幫助就是,讓內部的設計溝通變得更有快,更精準,更有效率。謝邀。
快速原型是在軟體開發中,交互設計階段比較有用的方法。目的在於:
1、交互設計師設計平面稿後,其實還有很多問題尚不明確,這時可簡單交互的原型就可以幫助設計師、產品經理更早的評估自己的設計是否可行;更重要的是,類似Keynote的原型可以直接交由用研團隊(或由設計師本人)進行可用性測試,獲得一手的反饋,這個反饋比紙面原型來的更加直接,包括簡單視覺、顏色、動畫的展示都可以豐富的集成在這類原型中;
2、對於軟體工程師,較豐富的交互原型可以更好的理解設計師的意圖,從而更有效率的進行開發,或評估設計;
3、對於測試團隊,也可以藉由此來測試軟體界面的實現程度,幫助把控質量;
4、對於其他關係職業,可交互的原型能夠幫助產品設計在項目組內部更好被理解,從而減少缺乏溝通帶來的開發風險點;
5、也非常重要的一點,是由於這類由Keynote、PPT或asure生產的原型,製作簡單,好玩容易不傷手,能非常好的貼合敏捷開發、快速迭代的產品周期。通常設計師本人稍加練習,1~2個小時就能很快的做出某些功能或交互的原型。至於哪個工具我覺得並不重要,看個人習慣和喜好了。
總之,在要求快速迭代的大部分移動互聯網產品中,一些改良、精簡過的設計和測試方法,比起完整的UCD流程更加實用和好用。各類方法、技術,其中關鍵是快、好用、簡單,幫助設計師不用花大精力在「製作上原型上」,而是「思考解決方法中」,這才應是設計的本質。思考才為設計,文檔只是承載,切勿本末倒置。我現在所在的團隊也有成員使用 Keynote 製作動畫,有交互動畫也有產品宣傳動畫。我自己還用 Powerpoint 製作過視覺完成度很高的動畫。
幾個原因:
1. ( 所謂)扁平化設計的視覺風格 UI 細節並不複雜,可以較簡單的用 Keynote 實現。
2. Keynote 有很多簡單好用的 transition 可以使用,Magic Move 更是神器,整體製作過程很快。
3. 為展現交互的動畫通常都不複雜。
4. Keynote 能直接輸出 mov 等常用視屏格式,易於在下一步的編輯(例如 iMovie) 中使用。
5. 相對之下,Flash 或 AE 雖然強大,但速度會比較慢,對於新手難度也比較大。
0. 有些交互問題可以通過動畫來解決,這裡暫不展開。可以參考 iOS 7 及扁平化設計給交互設計帶來哪些啟發?
1. 對任務流的說明: 經常遇到合作方對 keyscreen 之間的轉換關係,甚至產品整體的工作流,沒有直觀認識(主要是因為沒有深入到項目中啊喂),動畫可以很生動的向對方說明這些問題。
2. 對細節的說明:有時候 keyscreen 之間的中間態或特殊態用大量的圖或絮叨的文字很難描述具體,而一個動畫經常能無聲地傳遞這些信息。
3. Engaging:會動的、完成度高的、Alive 的設計 demo 是很有吸引力的。非常有助於提升合作方對 design proposal 的認同感。
4. 提高對實現的要求:上下游此時對最終實現的期許已經提高了,具體、詳盡、直觀的動畫也限制了設計稿與實現之間的灰色地帶。
一直在用Keynote做移動端設計原型,基本步驟是
- 在Mac上的Keynote設計製作界面。繪圖排版工具幾乎可以勝任現在的扁平化設計。對齊工具,屬性常數工具反而比PS更優於排版工作。
- 利用自帶的豐富動效給元素和幻燈片之間設置轉場效果。這是最賞心悅目和愉悅的環節,常常會驚訝於Keynote自帶的動畫效果。
- 給元素添加交互鏈接,點擊後可跳轉到不同的幻燈片,演示的時候點擊完全可以以假亂真。
- 通過iCloud或iTunes同步到iOS設備上的Keynote,全屏播放,就成了一個可以點擊的設計原型。
碰到最大的問題就是:iPhone版的keynote不支持豎屏演示!(Pad版無問題)也就是說我們在Mac上製作好的文件,放到iPhone里展示是橫屏的,不能旋轉界面!真是就差一點,就能稱得上完美了。能想到的方法就是製作好之後,把所有元素旋轉90度,再在iPhone端演示。但這種方法看上去多少不太智能。
直到看到本問題贊同最多的答案,算是了解到Apple自己也是用Keynote做移動設計原型,不過視頻中他們沒有提到怎麼放到iPhone上去演示,而是直接跳到了最後的演示效果。那Apple是怎麼實現在iPhone上進行豎屏演示的?畢竟Keynote是他們自己設計的軟體。
在官方的培訓資源下載頁面Sample Code - Resources中找到了視頻中的keynote源文件,演示的文件叫Toast Modern Prototype。答案是:Apple他們也是做了一份橫屏版的效果在iPhone上演示!大概這種方法太上不了檯面,他們在視頻里也就沒涉及。
然後在網上搜尋了一下看是否有解決方案,所幸在Keynote官方論壇找到了這個問題
Keynote iOS 7 Portrait Orientation
有位網友自己寫了一段程序腳本,能幫助把Keynote文件元素自動旋轉90度
腳本地址在這裡,共享給大家:Rotate Keynote Document for use as an app Prototype
親測可用!該腳本需要最新的Yosemite系統,請注意備份好文件,因為是直接在原文件上執行的。
這裡把我這邊生成的腳本程序共享給大家,只要把keynote文件拖到程序上就運行了。
keynote_rotate.zip_免費高速下載
這個工具大大提升了效率,唯一的小遺憾是元素動效方向需要重新設置。但一想到能在iPhone上完美演示,能支持那麼多華麗的動效和轉場,稍微多花點時間都是值得的:)
有其它更優的解決方案,也歡迎大家交流。希望Apple官方能儘早增加支持Keynote豎屏演示的功能!---------------------------
10月17日更新
現在最新的10月15日更新的iOS版Keynote已經支持豎排演示了!!
親測可用,會根據屏幕方向自動旋轉。大家馬上更新到最新版吧。
易用,做完直接在PPT當中展示方案,不用多個工具之間切換。
Keynote 算是一個非常強大的工具了。上兩個視頻來演示一下。下面是最近做的開源眼鏡項目的演示視頻,裡面的轉場效果都是內置的。
O.S.G 開源智能眼鏡 概念闡述視頻
下面這個是interface的demo。裡面的簡單轉換和跳轉鏈接都是可以直接實現的。
O.S.G 開源智能眼鏡 界面概念演示視頻俺只用axure……謝邀
Keynote 做UI,動畫最大的好處就是簡單,甚至無腦。
如果點陣圖可變形,動作速度可以像AE這類軟體一樣用坐標軸來調整,那keynote做原型交互幾乎無可挑剔,再進階就是流體力學之類的演算法支持了。
廢話不多說,我認為有以下幾個原因:
- mac黨你懂的,認為mac的一切都是好的(有時我也是這麼認為的)。
- 標新立異黨,覺得用一個非交互設計為重的軟體來做交互的事情很牛逼(其實我也是這麼來的)。
- keynote確實很牛,特別是做一些交互動畫效果,足夠簡單,容易上手,效果也很震撼,特別是那牛逼烘烘的神器移動,爽!!!
- 真的好用,不想再多說了,試試就知道了。我用keynote不光可以做交互原型,也可以做項目管理、各種演示文檔、視頻專場效果都棒棒噠!
大家看到@李志超 的答案很,一定都狠興奮,keynote太神了,做出來的原型簡直amazing,回去打開keynote就開始試驗,但是發現很多問題,現在來一一簡答,這都是折騰了好多天才弄明白。
keynote原生模板是寬屏的,即1920X1080,首先我們先要在模板設置處改成我們要做的app的解析度,例如iphone6 plus是1080 X 1920.
點擊document --&>slid size --&> custom slide size,然後輸入1080 X 1920,點擊確定
這樣你的portrait mode就出現了,接著可以開始做你的原型了
到這裡,你肯定很開心的做完就拿到手機上放映了,結果是這樣的,無論你怎麼轉動手機,都沒有像官方視頻里那樣,充滿整個屏幕, damn it !!
可是蘋果的視頻里WWDC 2014 Session Videos確實說了,他們整個團隊就是這麼用的,難道他們把mac豎過來做的,還是直接就是歪著脖子做的?另外一個想法就是,我把這個內容轉90°不就行了嗎,但是有那麼多元素....
問遍了所有人,都不知道弄,終於有一天,我發現了其中的奧義(摩擦摩擦!)新建一個寬屏的keynote,把你做好的原來豎屏的元素組合成一起
變成一張圖片後,複製到新建的寬屏Keynote,轉90°,然後再ungroup,done!!
可以拿著你的神奇移動,去測試啦~
因為他們用的apple不是windows
我學了兩天做了個交互原型,感覺上手容易,不過還需要摸索。怎麼動不了我擦。不支持gif,我擦
!
我在上上家公司打工的時候,公司老總還用PPT做呢,有什麼好奇怪的。。。。。
雖然這類工具在某些場合下確實不那麼順手,但現在很多人做原型也好,做交互也好,偏離了這件事的本質:能讓做後續工作的同事看懂並嚴格執行就好,何必非要為了用某個工具而用某個工具?只是因為正版 PowerPoint 比 KeyNote 貴很多罷了......
無邀自答。
題目問的是 Why 和 What,而包括目前排行第一的的很多回答卻是針對 How 的問題。
答題前,我們先來審題。題目其實有兩個大問題,一個是「為什麼在國外有人用 Keynote 做動畫和交互」,一個是「這能為交互設計提供哪些幫助」。
## 先看第一個「為什麼在國外有人用 Keynote 做動畫和交互」
不只是「國外有人」在用 Keynote 做動畫和交互,國內也有非常多的人在用 Keynote 做動畫和交互。所以國外這個定語並沒有什麼特殊性,問題可以簡化為「為什麼有人用 Keynote 做動畫和交互」。相比 Quartz Composer, Framerjs,Form, Flinto,同樣都是工具,Keynote 的特點在哪?
作為工具之一,Keynote 其他工具相比,有非常大的優勢。我整理了一個對比圖:
參考鏈接:
Designer』s Toolkit: Road Testing Prototype Tools
Prototyping Tools
比Keynote快的沒有的動畫效果精細, 比 Keynote 動畫效果精細的沒有 Keynote 學習成本低,更關鍵的是 Keynote 免費(當然,Mac 還是要花錢買的)。
學習容易,耗時短,效能高,可設計,保真程度高,還有不錯的動畫效果,更難能可貴的是價格為0。要知道在國外,版權保護是很嚴格的,在國內任意用的盜版破解版綠色版這些習以為常的事情,要是不買,想白用,在國外風險是很大的。當然,Keynote 也有缺點,比如說不支持跨平台,不支持手勢等等,但是這些也都不是問題。
同時,最新版的 Keynote 包含了非常豐富且高品質的動畫效果,非常利於設計師們進行動效的設計:
- 新增了跟蹤動畫
- 優化了單元格邊框樣式
- 多種構件動畫效果,包括百葉窗、飛入、飛離、軌道運動、繞軸心點旋轉、比例 (大)、飛馳、水滴、網路、漂移、放大及滑落
- 多種過渡效果,包括百葉窗、顏色平面數、五彩紙屑、掉落、透視效果、繞軸心點旋轉、飛馳和對象旋轉
- 可將運動模糊效果應用到動畫
- 改進了 Magic Move 效果,包括文本變形
- 可允許幻燈片上的對象與母版層疊
- 支持 GIF 動畫
來自:Apple - 效率 App
動畫可能的效果,我也做過兩個 Demo:
1. Keynote 製作 HTML5 動效:Keynote 製作 HTML5 頁面動效視頻
2. Keynote 製作高保真原型及動效設計:
Keynote 製作高保真原型及動及動效設計教程視頻
答題者中有人提到的國外設計師用 Keynote 重製作 Material Design 的視頻,我研究並自己嘗試過。原作者的視頻中是 OK 的,但源文件會有一些問題,主要出在 Magic Move 的運用上,可能是 Keynote 版本的問題(我懷疑原作者用的是 Keynote09 或者 Keynote13較早的某個版本),因為我做的時候也發現過類似問題。
## 這能為交互設計提供哪些幫助
結合我之前做過的產品和項目,幫助還是很多的:
1. 快速原型,儘早溝通。通過快速動態的原型,可以儘早的溝通設計,也因為成本低,可以不斷修改完善。
2. 便於協作和交付。Keynote 可輸出為 MOV 和 HTML 格式,工程師可以根據此進行開發,不用像以前一樣,設計師站在工程師面前「這個快一點,這個慢一點,這個時間長一點」的低效率溝通,有些部分文字和語言難以闡明,通過動效可以清晰明了的傳達。
3. 提高通過率,提升認同感。靜態的「交互設計」不能很好地說明用戶行為在系統上的「交互」,而動態可交互的「交互」原型可以讓團隊成員更好的理解與認同。
4. 驗證想法。如果有好的 idea,可以先通過 Keynote 做交互設計,然後與程序員溝通可行性和難度,也可以通過它去和投資人溝通,不再是「有一個 idea 就差程序員了」。(當然,你還是需要程序員的)
這是我認為的 Why 和 What,具體怎麼去做的 How 的問題,可參考其他問題下的答案:
用 Keynote 快速製作高保真交互原型,有哪些技巧? - 原型設計
使用 Keynote 做高保真動效交互設計原型,有哪些教程或學習資料? - 用戶體驗設計
在知乎上看到過很多高質量的回答,漲了不少姿勢,喜歡這種認真答題的氛圍和分享的精神,也歡迎各位一起交流產品與設計。其實我也用Keynote做過類似於動畫的東西,當然我做的原因是這樣的:
1. 數字傳播技術老師要我們交一個動畫(flash的)作期末作業打分用。
2. 我幾乎沒聽flash課而且我對所有技術類課程都不感興趣。
3. 我平常經常要用Keynote做pre,那時候iCloud還沒有出iWork的那幾個件,所以我知道可以把Keynote文件導出成.mov格式然後用windows上面的QT放出來,效果和Keynote差不多。
4. 我當時下載的converter可以把所有格式的視頻轉換成flash文件。
根據1,2,3和4,我的做法就是:
1. 根據老師給出的主題,做出一個Keynote文件。
2. 排練好這個Keynote,根據我自己看著舒服的順序調好時間軸還有動畫效果等等。
3. 導出為.mov格式。此時這個mov文件會自動播放,因為你已經排練好了。
4. 導出為flash動畫。
這樣做的直接結果是:
1. 我沒聽flash課也得了分(雖然這樣投機取巧很不好)。
2. 由於keynote自帶的動畫效果比較絢麗,做出來的效果遠遠超出一學期2學分的flash課能夠達到的水準,從而得到了老師積極評價。
這樣做的間接後果是:
這門課拿個非常不錯的分數。
此外Keynote的很多功能在你想偷懶的時候都很好用。比如懶得摳圖的話就把圖片粘貼到Keynote文稿當中,點Alpha,它就自動幫你把圖摳好了,截屏出來就可以用,粘貼到你想要的背景當中。
什麼?你說背景顏色不符?……Mac OS X上面自帶的測色筆,你測一下你要用的那個背景顏色(僅限於單色),然後設置背景RGB值,就可以了呀XD
推薦閱讀:
※柴靜的霧霾調查《穹頂之下》的幻燈片是誰做的?
※怎樣做出優秀的扁平化設計風格 PPT 或 Keynote 幻燈片演示文稿?