WWDC 2014 上，Apple的原型設計團隊分享了公司內部的一套App開發流程。在完成App之前不斷的進行原型迭代，這個過程中，原始的idea逐步變的更加具體真實，最終達到滿意的用戶體驗和達到預期的目的。本文包含了兩部分，前半部分介紹Apple的工作流，并且加上了部分個人理解；后半部分是Apple用一個虛擬的項目展示了如何快速完成一個三輪迭代。

開始一個App ？

說起做一個App，通常簡單的想法是，我有一個很cool的idea，按照這個想法做成App，接下來的要關心的事情就是數錢了：）

然而實際情況往往并非如此。在完成一個App的過程中，對于團隊,可能會遇到資金不足，時間不夠，人員流動，協作成本等種種問題；對于獨立開發者也可能會有項目進度、自律等問題。最終成功的都是少數，結果一般是悲劇的:(

在我經歷的幾個項目中，成功的經歷總是相似，失敗則各不相同。獨立開發過程中，影響因子大多集中到開發者本身，開發者自身的時間管理、架構設計、產品觀，設計技能以及coding能力都會成為關鍵。目前由于Sketch、云服務等工具的普及，獨立開發者可能存在的一些短板得到了一定的補充，所以App的成功率也在不斷提高。這里成功的定義是開發者在預期的時間內完成了符合要求的產品。

團隊開發中，眾多影響項目的因素分布在每一個人身上。我的體會是，團隊開發App成功，要么團隊有一個獨裁式的核心人物，他能保證一切正常的運轉，要么團隊由少數自我推動能力較強的人構成。第二種情況中，團隊成員更容易感受到做一件事情的激情，例如WI輸入法團隊在開發Android一個版本時，三個核心開發者都處在忙碌的大三學期，但最終保證了在一個學期左右的時間，快速的完成beta版本。又經歷了四個月的迭代，以一個成熟的App發布到市場上并獲得50萬用戶。我們在迭代中的做法是不斷通過郵件發給內測用戶beta版本并抄送給一些熱心關注的學校老師，聽取反饋，持續改進。

Apple的做法就是：一個App的誕生都是從idea 經過不斷的原型迭代，逐步的去接近其目標的體驗，變得更加具體真實，最后成為真實的產品給用戶。

為什么進行原型迭代？

驗證產品

原型可以快速的去驗證你是否在做正確的事情，及時發現問題可以大大節省時間和金錢。有時候，產品一口氣做到底，才發覺功能和體驗與最初的目標已經大相徑庭了。比如有人會提出這個很炫，那個很好玩，而忽略了產品最本質的東西。微信就不會因為各種生活服務而忽略其核心的溝通功能，“消息”和“通訊錄” 永遠在最直接的位置。

激發想法

在迭代的過程中，可能會想到更好的體驗。一個App在設計稿上，在設備上，在用戶手里都會有不同的體驗。原型迭代可以讓產品的體驗盡可能保持一致，而不致于出現想法和實踐上的不統一。

如何進行原型迭代？

在每一輪迭代中，要做三件事情

1. 制作原型
2. 把App給別人看
3. 從反饋中總結經驗

制作原型

哪些部分需要更加真實具體一些？

兩個用戶界面，在最初的原型里可能只是陳列起來，從頁面A到B是經過怎樣的轉換，這個功能指引并沒有在原型中體現出來，這里就是需要更加具體真實的。

我們可以去模擬哪些部分？

可以模擬一些icon，和列表內容。UGC的產品可以模擬已經存在的內容。

用戶在什么場景下使用？

這是非常關鍵的一個問題，好的設計應該是考慮到使用場景的。例如一款經常在戶外使用的App,就要考慮其視覺上是否可用，或者更明確的讓用戶看到其要使用的功能。我覺得App應該是向場景化靠近的，如何在特定的環境下讓用戶以最短路徑達到目的是在完成App是必須要考慮的問題。

不僅交互應該尊崇場景化，功能設計也應該考慮場景。百度地圖在查詢公交線路的時候，會考慮由于班車線路時間導致的錯過班車的問題，同類產品卻忽略了這個關鍵的場景因素。

生活場景互聯網化，有三個階段：首先互聯網可以承載生活中的信息，地圖App將班車線路從生活轉向互聯網，其次互聯網可以加工生活中的信息，地圖App又能根據你的出發和到達計算線路。最后，互聯網可以延伸生活的信息，即根據的你的線路可能會推斷出你的出行意圖，進而提供一下階段的服務，形成閉環。忽略場景的App在這條線路上可能是不完整的，也可能是惡性的循環，考慮那些毫無相關性打擾用戶的push消息。

給用戶展示

你的用戶是誰？

明確目標用戶很關鍵，從非目標用戶身上，甚至有可能受到錯誤的反饋。

你知道怎么使用XX功能嗎?

這里要驗證App的核心功能是不是能夠容易的被用戶感知和使用。

XX功能是不是用起來很簡單？

在滿足可用性的基礎上，要考慮功能的易用性。

我們怎么能使這個功能更好？

傾聽反饋，向用戶請教，不要辯駁或者否認。

最后，總結反饋的時候，我們要思考：

1. 哪些是正確的？
2. 哪些是錯誤的？
3. 我們還獲得了哪些idea？

一個例子

Apple展示了一個快速的三輪迭代的過程，它們的原型從最初簡單的圖片展示，到簡單動畫效果，最后到了交互展示。這也是一個App從最初的概念界面，逐步具體化，最后到動態交互的一個過程。他們通過Keynote完成靜態界面和動畫的制作，使用Objective-C 來編寫簡單的程序實現基本的交互演示。

第一階段Pictures

在最初的階段, 你可能想到自己的App有幾種布局，大概有 list view, grid view, 或者gallery view 幾種。這些基本的頁面布局在iOS內置應用中已已經有現成的應用了，例如下面的list view就是通過iOS內置音樂應用截屏的。在開始之前，你需要在Document設置中將slide size設置為 640 * 1136， 和iphone的屏幕適配。

使用Shape工具可以繪制矢量圖形，覆蓋原有的界面元素。

導入的圖片可以使用圖片的Mask功能，例如將一個面包圖片顯示成一個圓盤的形狀，完成界面元素的自定義、

使用特殊符號功能添加頁面基礎元素，將星星設置為金黃色。這樣以iOS內置音樂應用為布局基礎的美食列表頁面就完成了。

同樣的方式，還完成了grid view, map view 和gallery view，他們分別使用了iOS內置的相冊，地圖和天氣App.

第二階段 Animations

用戶可能會好奇尋找top toast 和 nearby toast的關系，此時原型中需要添加轉場動畫，兩個界面是怎樣轉換的呢？ Keynote中的動畫包括兩種

• Build 在一張slide之內的動畫
• Transition 不同之間切換的動畫

其中Transition中有一種非常給力的動畫叫做Magic Move, 它可以使同一元素在不同的slide之間進行動畫轉換，形成很炫酷的效果。利用這一特性可以做出不同的動畫，例如，一個圓盤圖標在slide1 和slide2中分別處于不同的位置，進行Magic move的時候，就會出現圓盤的跨slide平移效果。如果位置相同，slide1 和slide2中圓盤的大小角度不同，就可以出現旋轉或者放大的效果。理解Magic move的基本工作方式后，做出不同的效果靠自己發揮了。

第三階段 Interaction

在有了頁面之間的動畫轉換后，我們可能得到更多的反饋，比如nearby toast 和 top toast 的界面可以合并為一個頁面。原型中應該增加交互，讓App更加真實。

Apple使用了Xcode進行了簡單的交互制作，這些交互只是看起來在工作，例如地圖的移動只是一張圖片在拖拽，輸入文本只是在連續的切換十幾張圖片。

例如下面的界面實際上是一張圖片拆成了三個部分，一個導航欄，一個地圖，一個列表。

為layer編寫簡單的onTouchMove事件，模擬在一張地圖上拖拽瀏覽的操作。

 全能程序員交流QQ群290551701，群內程序員都是來自，百度、阿里、京東、小米、去哪兒、餓了嗎、藍港等高級程序員 ，擁有豐富的經驗。加入我們，直線溝通技術大牛，最佳的學習環境，了解業內的一手的資訊。如果你想結實大牛，那 就加入進來，讓大牛帶你超神！