民初思韻網

加入收藏   設為首頁
選擇語言   簡體中文
你好,請 登陸 或 注冊
首頁 人文思韻 傳奇人物 歷史思潮 時代作品 話題討論 國民思韻 民初捐助 賬戶管理
  搜索  
    人文精神 >>> 創業先鋒 眾人拾柴火焰高
字體    

蘋果團隊如何用Keynote制作產品原型
蘋果團隊如何用Keynote制作產品原型
互聯網er的早讀課     阅读简体中文版


蘋果就自己有個專門制作原型的團隊,他們流竄在各個項目組之間包攬所有的原型制作工作,包括動畫和交互。他們的主要工具就是Keynote。

WWDC 2014 Session Videos

這來自于WWDC 2014 Session Videos里有個視頻Prototyping: Fake It Till You Make It ,就是他們指導如何用Keynote做出逼真的交互原型的,這段我也是剛看到,其實一直想補到之前的答案里。下面結合這個視頻的截圖可以介紹下他們是怎么充分發揮Keynote的特點的。


綜述:


1.靜態圖

    1. 先用畫好的線框圖或者直接在keynote里用色塊布局

    2. 填充圖片,可調整陰影等基本效果

    3. 導出圖片放進手機里

    4. 根據用戶反饋調整


2.動畫效果

    1. 利用Keynote自帶的物件動畫

    2. 活用Keynote最棒的“神奇移動”轉場效果

    3. 手機裝上keynote app打開演示文檔

    4. 根據反饋調整效果


3.交互事件

    1. 調整圖片尺寸導入xcode

    2. 僅用針對圖片的簡單代碼

    3. 僅用簡單的交互手勢 代碼


1.制作靜態圖



  1. 先用畫好的線框圖或者直接在keynote里用色塊布局,keynote提供了多種智能的對齊,布局,格式等等設計方式,整個過程會非常的輕松。比如自動標尺吸附等距等等,比絕大多數原型制作軟件都簡單人性化。

色塊布局

2. 對照一些線框圖可以繼續鋪色塊和布局,這個過程中你會發現這個對齊和吸附的過程是多么的神奇。

對齊和吸附很輕松

3. 導入圖片,Keynote有很多種方式可以調整素材樣式,包框,陰影,透明圖,實時遮罩等等。是的,你可以用PS慢慢玩,也可以用keynote一鍵完成。

調整圖片樣式

4. 很多人用原型軟件是看中那些控件,其實大多數控件還不如自己在Keynote里制作快速。而且Keynote自帶了很多標志和Icon,完全不用到處去找了。比如這個例子里的打分用五星,改個黃色就可以了。

自制圖標


5. 依次類推,可以很快做出很多頁面,導出圖片格式,在手機中查看

手機查看

插入一段來自知乎評論里的內容,關于如何讓keynote在手機上豎屏的@Marc :下載 Apple 官方給出的 Keynote 你就明白了,每個 xxx.key 文件都對應著一個 xxx-iPhone.key,這個逆時針旋轉90度之后的文件才是最終用來在 iPhone 上面演示的文件。


2.假互動,加入動畫效果



具體關于為何這么做,每個階段完后的反饋過程,目標等等原理的東西請大家看視頻或者PDF吧,這里主要說下過程和他們是怎么充分發揮Keynote在原型制作中的特點的。


比如這個假互動的階段,如果你不用Xcode的話,這個就是交互原型的最后階段了。基本原理就是活用圖片,活用物件動畫,活用轉場動畫,足以做出以假亂真的原型,只要你的測試用戶不要瞎點......


關于Keynote自帶的動畫有非常多種和微調效果,起初我不是很理解,因為很多花哨的效果很難用到幻燈片里,直到開始做原型發現,其實很多動畫經過調整都是很好的交互效果,包括現在看到的一些令人驚艷的反彈,延遲等逼真的細節動作,Keynote早就可以微調模擬了。


據說錘子手機和蘋果的很多交互效果,都是先用Keynote做出來再給工程師寫出來的。(是文末附的許岑視頻中說的,好像是,記不清了,無責任據說預警)


1. 制作動畫有很多方式,可以根據你的職業,習慣選擇不同的方法。

動畫效果

也有很多很巧妙的方式,其中最簡單,最快的就是一定要靈活運用圖片。靈活到什么程度,我舉個視頻里面全場爆笑的例子。動畫是這樣的:敲擊鍵盤,字符一個個的蹦著出現在屏幕上。里面說,我可以只用一行或者干脆不用代碼就做出來。這個用Keynote就可以實現,各位可以想想。

逐字出現的動畫效果

他們是這樣做的:

每個字母做了個圖片......

還可以通過調整圖片的排序大小制作不同的效果。

圖片的排序

2. 特別提到一個Keynote獨有的“神奇移動”效果。可以把前一頁中的物件移動或放大到下一頁中。效果非常出眾。

神奇移動

好了,其實至此,絕大多數的動畫效果都可以做出來了。如果不滿足于此,學點簡單的語法,在Xcode里只用針對圖片和交互相關的代碼就可以做出更加逼真的原型了。


3.交互事件


針對圖片和交互相關的代碼

然后比較一下如果用代碼實現和用Keynote的差別

代碼實現和用Keynote的差別

回顧一下三個階段:

回顧

對比

這里就是蘋果官方的原型是如何以Keynote為主要工具制作一個足以亂真的App。


我把視頻和文檔都傳到了百度盤里Keynote_免費高速下載


另外關于Keynote的使用方法,推薦大家在 http://weibo.com/xucen 里跟著學習,足以從零開始做完原型,還可以做個漂亮的幻燈片忽悠投資去,一舉兩得!


作者:@李志超,Onefootball中國區產品經理  原創并投稿早讀課

更多鏈接內容點擊,請登錄:zaodula.com

2015-08-23 08:43

歡迎訂閱我們的微信公眾賬號!
春秋茶館訂閱號
微信號 season-tea(春秋茶館)
每天分享一篇科技/遊戲/人文類的資訊,點綴生活,啟迪思想,探討古典韻味。
  清末民初歷史人物  民初人物
憲政專家民主理論大師
宋教仁(1882年4月5日-1913年3月22日),字鈍初,號漁父,生於中國湖南省桃源縣,中國近代民主革命家,是中華民國初期第一位倡導內閣制的政治家。
晚清改革家強權人物
袁世凱(1859年9月16日-1916年6月6日),字慰亭,號容庵,河南項城人,故又稱袁項城,清末民初的軍事和政治人物,北洋系統的領袖。袁世凱出生於清咸豐九年八月二十日(....
資助民初精神網
        回頂部     寫評論

 
評論集
暫無評論!
發表評論歡迎你的評論
昵稱:     登陸  註冊
主頁:  
郵箱:  (僅管理員可見)

驗證:   验证码(不區分大小寫)  
© 2011   民初思韻網-清末民初傳奇時代的發現與復興   版權所有   加入收藏    設為首頁    聯繫我們    1616導航