|
【李志超的回答(110票)】: 苹果就自己有个专门制作原型的团队，他们流窜在各个项目组之间包揽所有的原型制作工作，包括动画和交互。他们的主要工具就是Keynote。  这来自于WWDC 2014 Session Videos里有个视频Prototyping: Fake It Till You Make It ，就是他们指导如何用Keynote做出逼真的交互原型的，这段我也是刚看到，其实一直想补到之前的答案里。下面结合这个视频的截图可以介绍下他们是怎么充分发挥Keynote的特点的。 综述一下先：
首先：制作静态图。
 2. 对照一些线框图可以继续铺色块和布局，这个过程中你会发现这个对齐和吸附的过程是多么的神奇。2. 对照一些线框图可以继续铺色块和布局，这个过程中你会发现这个对齐和吸附的过程是多么的神奇。  3. 导入图片，Keynote有很多种方式可以调整素材样式，包框，阴影，透明图，实时遮罩等等。是的，你可以用PS慢慢玩，也可以用keynote一键完成。3. 导入图片，Keynote有很多种方式可以调整素材样式，包框，阴影，透明图，实时遮罩等等。是的，你可以用PS慢慢玩，也可以用keynote一键完成。  4. 很多人用原型软件是看中那些控件，其实大多数控件还不如自己在Keynote里制作快速。而且Keynote自带了很多标志和Icon，完全不用到处去找了。比如这个例子里的打分用五星，改个黄色就可以了。4. 很多人用原型软件是看中那些控件，其实大多数控件还不如自己在Keynote里制作快速。而且Keynote自带了很多标志和Icon，完全不用到处去找了。比如这个例子里的打分用五星，改个黄色就可以了。  5. 依次类推，可以很快做出很多页面，导出图片格式，在手机中查看5. 依次类推，可以很快做出很多页面，导出图片格式，在手机中查看  第二阶段，假互动，加入动画效果。具体关于为何这么做，每个阶段完后的反馈过程，目标等等原理的东西请大家看视频或者PDF吧，这里主要说下过程和他们是怎么充分发挥Keynote在原型制作中的特点的。 比如这个假互动的阶段，如果你不用Xcode的话，这个就是交互原型的最后阶段了。基本原理就是活用图片，活用物件动画，活用转场动画，足以做出以假乱真的原型，只要你的测试用户不要瞎点...... 关于Keynote自带的动画有非常多种和微调效果，起初我不是很理解，因为很多花哨的效果很难用到幻灯片里，直到开始做原型发现，其实很多动画经过调整都是很好的交互效果，包括现在看到的一些令人惊艳的反弹，延迟等逼真的细节动作，Keynote早就可以微调模拟了。 据说锤子手机和苹果的很多交互效果，都是先用Keynote做出来再给工程师写出来的。（是文末附的许岑视频中说的，好像是，记不清了，无责任据说预警） 1. 制作动画有很多方式，可以根据你的职业，习惯选择不同的方法。  也有很多很巧妙的方式，其中最简单，最快的就是一定要灵活运用图片。灵活到什么程度，我举个视频里面全场爆笑的例子。动画是这样的：敲击键盘，字符一个个的蹦着出现在屏幕上。里面说，我可以只用一行或者干脆不用代码就做出来。这个用Keynote就可以实现，各位可以想想。也有很多很巧妙的方式，其中最简单，最快的就是一定要灵活运用图片。灵活到什么程度，我举个视频里面全场爆笑的例子。动画是这样的：敲击键盘，字符一个个的蹦着出现在屏幕上。里面说，我可以只用一行或者干脆不用代码就做出来。这个用Keynote就可以实现，各位可以想想。  他们是这样做的：他们是这样做的：  每个字母做了个图片...... 还可以通过调整图片的排序大小制作不同的效果。  2. 特别提到一个Keynote独有的“神奇移动”效果。可以把前一页中的物件移动或放大到下一页中。效果非常出众。  好了，其实至此，绝大多数的动画效果都可以做出来了。如果不满足于此，学点简单的语法，在Xcode里只用针对图片和交互相关的代码就可以做出更加逼真的原型了。好了，其实至此，绝大多数的动画效果都可以做出来了。如果不满足于此，学点简单的语法，在Xcode里只用针对图片和交互相关的代码就可以做出更加逼真的原型了。 然后比较一下如果用代码实现和用Keynote的差别然后比较一下如果用代码实现和用Keynote的差别 回顾一下三个阶段：回顾一下三个阶段： 这里就是苹果官方的原型是如何以Keynote为主要工具制作一个足以乱真的App。这里就是苹果官方的原型是如何以Keynote为主要工具制作一个足以乱真的App。 我把视频和文档都传到了百度盘里Keynote_免费高速下载 另外关于Keynote的使用方法，推荐大家在 http://weibo.com/xucen 里跟着学习，足以从零开始做完原型，还可以做个漂亮的幻灯片忽悠投资去，一举两得！ 【林韜的回答(9票)】: 第一，因为Keynote免费。 第二，Keynote内建常用的动画效果而且品质不错。 第三，Keynote很容易学。 第四，Keynote可以在iPhone和iPad上面跑。所以如果你用的是Mac，你基本就白捡了一个做快速原型的工具。如果你想做一个简单的初期概念原型（Proof Of Concept），用Keynote真的是一个简单快速便宜的工具。我觉得它的价值在于用很低的成本让设计师快速验证一些早期的想法。 【MaggieKuo的回答(4票)】: Keynote 的超便捷以及容易學的這些特點，造就了設計團隊裡的”人人都能做UI demo”, “人人都能探索 UI 的動態效果”。 最怕設計師早期在跟團隊溝通設計想法的時候，就拿出一個靜態的東西，然後要大家想像這個按鈕按下去會變色還會放大，那個頁面換頁是從左邊翻滾進來，諸如此類的。這種做法的問題在於，這無法確保大家腦海裡的畫面是同步的，我也就不提團隊想法不同步的後果了。大多時候並不是這些設計師不懂得做 demo，而是要用After Effect或者其他專業動畫軟件來做出效果圖，實在費時又耗精神。 Keynote基本上不需要設計師級別的專業技巧，只要你會做報告，曾經用過Keynote或者 PowerPoint, 都能在幾個小時內上手。這對交互設計團隊來說的幫助就是，讓內部的設計溝通變得更有快，更精準，更有效率。 【知乎用户的回答(4票)】: 我現在所在的團隊也有成員使用 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. 提高對實現的要求：上下游此時對最終實現的期許已經提高了，具體、詳盡、直觀的動畫也限制了設計稿與實現之間的灰色地帶。 【李江华的回答(3票)】: 作为一个工具控，我曾经用keynote做过原型，如果不是keynote不支持各种动作事件（悬停、双击、滑动、长按...各种），我认为keynote几乎可以把市面上各种交互原型软件爆出翔来。 1.用keynote画各种原型，低高保真，keynote简直是毫无压力，这个可以说不会输给市面上任何一款交互原型软件 2.用keynote做各种动画效果，秒杀市面上的各种号称交互原型软件 【nfsking的回答(2票)】: 我在上上家公司打工的时候，公司老总还用PPT做呢，有什么好奇怪的。。。。。 虽然这类工具在某些场合下确实不那么顺手，但现在很多人做原型也好，做交互也好，偏离了这件事的本质：能让做后续工作的同事看懂并严格执行就好，何必非要为了用某个工具而用某个工具？ 【知乎用户的回答(1票)】: 谢邀。 快速原型是在软件开发中，交互设计阶段比较有用的方法。目的在于： 1、交互设计师设计平面稿后，其实还有很多问题尚不明确，这时可简单交互的原型就可以帮助设计师、产品经理更早的评估自己的设计是否可行；更重要的是，类似Keynote的原型可以直接交由用研团队（或由设计师本人）进行可用性测试，获得一手的反馈，这个反馈比纸面原型来的更加直接，包括简单视觉、颜色、动画的展示都可以丰富的集成在这类原型中； 2、对于软件工程师，较丰富的交互原型可以更好的理解设计师的意图，从而更有效率的进行开发，或评估设计； 3、对于测试团队，也可以借由此来测试软件界面的实现程度，帮助把控质量； 4、对于其他关系职业，可交互的原型能够帮助产品设计在项目组内部更好被理解，从而减少缺乏沟通带来的开发风险点； 5、也非常重要的一点，是由于这类由Keynote、PPT或asure生产的原型，制作简单，好玩容易不伤手，能非常好的贴合敏捷开发、快速迭代的产品周期。通常设计师本人稍加练习，1~2个小时就能很快的做出某些功能或交互的原型。至于哪个工具我觉得并不重要，看个人习惯和喜好了。 总之，在要求快速迭代的大部分移动互联网产品中，一些改良、精简过的设计和测试方法，比起完整的UCD流程更加实用和好用。各类方法、技术，其中关键是快、好用、简单，帮助设计师不用花大精力在“制作上原型上”，而是“思考解决方法中”，这才应是设计的本质。思考才为设计，文档只是承载，切勿本末倒置。 【晓生的回答(0票)】: 易用，做完直接在PPT当中展示方案，不用多个工具之间切换。 【邢风的回答(0票)】: 泻药 没用过这个，交互设计中，用什么工具都可以，只要能完整的表达自己的想法。给兄弟团队解释清楚，就可以了。此外，跟团队的习惯有关系吧，阿里这边，还是用AXURE的多，工具不重要的，想法才是优先的，哪怕你用Word呢 【毛斌的回答(0票)】: 好的工具可以事半功倍，提高效率，也有个人习惯在里面，一前同事专业交互，原型基本都是用ppt画的，效果也是非常震撼。 各种工具好比十八班武艺，挑一个自己使用最顺手的即可，核心还是对用户使用场景的理解和需求的揣摩。 各位PMer切勿本末倒置。 【威廉孙的回答(0票)】: 其实我也用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 仅供参考。 【cellier的回答(0票)】: 泻药。 ———— 最近一直在用Keynote做原型，最深的体会是，Keynote真的做到了简『单』优雅，稍微有点审美的人都能做出『大片级』的效果。 现在动效越来越流行，但是一大部分的应用是因为动效而动效，而又因为自身没把动效真正的内涵搞清楚，所以做出来的动效不符合『情感运动曲线』，这也是我当前的团队所缺的，而Keynote里面提供的动画，多是有『拟现实运动』性的，非常有惯性感，让用户没有突兀感。 当然，我最爱用keynote的一点是，当你站在投影仪前，使用remote，（我用的是Remoter app），在众人面前，使用手势，然后流利操控着幻灯片，脑海中浮现着...jobs WWDC上那惟妙的... ... 咳咳，by the way，导出HTML的功能真不错。 【金璐的回答(0票)】: 1. 交互设计师交付产物一般是静态设计文档，但有时一个好的Idea很难通过静态图表达或有特殊动效呈现时，设计师为了让项目成员能够最大化知晓设计思路及创意点，会通过动态形式传达语意。 2. 一般绘制交互图的工具有以下几种：Visio、Axure、PPT、Keynote、Omnigraffle、Mockup、Flash等，其中Axure、PPT、Keynote、Flash可实现动态跳转，在这其中PPT和Keynote又属于操作即可得的低成本工具，Keynote属于OS平台使用工具，PP他属于Windows平台使用工具，但Keynote上又有很多ppt不及的功能（如一楼 @李志超所答动画多样，操作简单，效果完美等），而其直接对图片的处理效果也是ppt不可匹及的，当然深受设计师的喜爱。 【徐涛的回答(1票)】: 因为他们用的apple不是windows 原文地址:知乎 |
|
|
