WWDC 2014 上，Apple的原型設(shè)計團(tuán)隊分享了公司內(nèi)部的一套App開發(fā)流程。在完成App之前不斷的進(jìn)行原型迭代，這個過程中，原始的idea逐步變的更加具體真實，最終達(dá)到滿意的用戶體驗和達(dá)到預(yù)期的目的。本文包含了兩部分，前半部分介紹Apple的工作流，并且加上了部分個人理解；后半部分是Apple用一個虛擬的項目展示了如何快速完成一個三輪迭代。
說起做一個App，通常簡單的想法是，我有一個很cool的idea，按照這個想法做成App，接下來的要關(guān)心的事情就是數(shù)錢了：）
然而實際情況往往并非如此。在完成一個App的過程中，對于團(tuán)隊,可能會遇到資金不足，時間不夠，人員流動，協(xié)作成本等種種問題；對于獨立開發(fā)者也可能會有項目進(jìn)度、自律等問題。最終成功的都是少數(shù)，結(jié)果一般是悲劇的:(
在我經(jīng)歷的幾個項目中，成功的經(jīng)歷總是相似，失敗則各不相同。獨立開發(fā)過程中，影響因子大多集中到開發(fā)者本身，開發(fā)者自身的時間管理、架構(gòu)設(shè)計、產(chǎn)品觀，設(shè)計技能以及coding能力都會成為關(guān)鍵。目前由于Sketch、云服務(wù)等工具的普及，獨立開發(fā)者可能存在的一些短板得到了一定的補(bǔ)充，所以App的成功率也在不斷提高。這里成功的定義是開發(fā)者在預(yù)期的時間內(nèi)完成了符合要求的產(chǎn)品。
團(tuán)隊開發(fā)中，眾多影響項目的因素分布在每一個人身上。我的體會是，團(tuán)隊開發(fā)App成功，要么團(tuán)隊有一個獨裁式的核心人物，他能保證一切正常的運轉(zhuǎn)，要么團(tuán)隊由少數(shù)自我推動能力較強(qiáng)的人構(gòu)成。第二種情況中，團(tuán)隊成員更容易感受到做一件事情的激情，例如WI輸入法團(tuán)隊在開發(fā)Android一個版本時，三個核心開發(fā)者都處在忙碌的大三學(xué)期，但最終保證了在一個學(xué)期左右的時間，快速的完成beta版本。又經(jīng)歷了四個月的迭代，以一個成熟的App發(fā)布到市場上并獲得50萬用戶。我們在迭代中的做法是不斷通過郵件發(fā)給內(nèi)測用戶beta版本并抄送給一些熱心關(guān)注的學(xué)校老師，聽取反饋，持續(xù)改進(jìn)。
Apple的做法就是：一個App的誕生都是從idea 經(jīng)過不斷的原型迭代，逐步的去接近其目標(biāo)的體驗，變得更加具體真實，最后成為真實的產(chǎn)品給用戶。
驗證產(chǎn)品
原型可以快速的去驗證你是否在做正確的事情，及時發(fā)現(xiàn)問題可以大大節(jié)省時間和金錢。有時候，產(chǎn)品一口氣做到底，才發(fā)覺功能和體驗與最初的目標(biāo)已經(jīng)大相徑庭了。比如有人會提出這個很炫，那個很好玩，而忽略了產(chǎn)品最本質(zhì)的東西。微信就不會因為各種生活服務(wù)而忽略其核心的溝通功能，“消息”和“通訊錄” 永遠(yuǎn)在最直接的位置。
激發(fā)想法
在迭代的過程中，可能會想到更好的體驗。一個App在設(shè)計稿上，在設(shè)備上，在用戶手里都會有不同的體驗。原型迭代可以讓產(chǎn)品的體驗盡可能保持一致，而不致于出現(xiàn)想法和實踐上的不統(tǒng)一。
在每一輪迭代中，要做三件事情
制作原型
哪些部分需要更加真實具體一些？
兩個用戶界面，在最初的原型里可能只是陳列起來，從頁面A到B是經(jīng)過怎樣的轉(zhuǎn)換，這個功能指引并沒有在原型中體現(xiàn)出來，這里就是需要更加具體真實的。
我們可以去模擬哪些部分？
可以模擬一些icon，和列表內(nèi)容。UGC的產(chǎn)品可以模擬已經(jīng)存在的內(nèi)容。
用戶在什么場景下使用？
這是非常關(guān)鍵的一個問題，好的設(shè)計應(yīng)該是考慮到使用場景的。例如一款經(jīng)常在戶外使用的App,就要考慮其視覺上是否可用，或者更明確的讓用戶看到其要使用的功能。我覺得App應(yīng)該是向場景化靠近的，如何在特定的環(huán)境下讓用戶以最短路徑達(dá)到目的是在完成App是必須要考慮的問題。
不僅交互應(yīng)該尊崇場景化，功能設(shè)計也應(yīng)該考慮場景。百度地圖在查詢公交線路的時候，會考慮由于班車線路時間導(dǎo)致的錯過班車的問題，同類產(chǎn)品卻忽略了這個關(guān)鍵的場景因素。
生活場景互聯(lián)網(wǎng)化，有三個階段：首先互聯(lián)網(wǎng)可以承載生活中的信息，地圖App將班車線路從生活轉(zhuǎn)向互聯(lián)網(wǎng)，其次互聯(lián)網(wǎng)可以加工生活中的信息，地圖App又能根據(jù)你的出發(fā)和到達(dá)計算線路。最后，互聯(lián)網(wǎng)可以延伸生活的信息，即根據(jù)的你的線路可能會推斷出你的出行意圖，進(jìn)而提供一下階段的服務(wù)，形成閉環(huán)。忽略場景的App在這條線路上可能是不完整的，也可能是惡性的循環(huán)，考慮那些毫無相關(guān)性打擾用戶的push消息。
給用戶展示
你的用戶是誰？
明確目標(biāo)用戶很關(guān)鍵，從非目標(biāo)用戶身上，甚至有可能受到錯誤的反饋。
你知道怎么使用XX功能嗎?
這里要驗證App的核心功能是不是能夠容易的被用戶感知和使用。
XX功能是不是用起來很簡單？
在滿足可用性的基礎(chǔ)上，要考慮功能的易用性。
我們怎么能使這個功能更好？
傾聽反饋，向用戶請教，不要辯駁或者否認(rèn)。
最后，總結(jié)反饋的時候，我們要思考：
Apple展示了一個快速的三輪迭代的過程，它們的原型從最初簡單的圖片展示，到簡單動畫效果，最后到了交互展示。這也是一個App從最初的概念界面，逐步具體化，最后到動態(tài)交互的一個過程。他們通過Keynote完成靜態(tài)界面和動畫的制作，使用Objective-C 來編寫簡單的程序?qū)崿F(xiàn)基本的交互演示。
第一階段Pictures
在最初的階段, 你可能想到自己的App有幾種布局，大概有 list view, grid view, 或者gallery view 幾種。這些基本的頁面布局在iOS內(nèi)置應(yīng)用中已已經(jīng)有現(xiàn)成的應(yīng)用了，例如下面的list view就是通過iOS內(nèi)置音樂應(yīng)用截屏的。在開始之前，你需要在Document設(shè)置中將slide size設(shè)置為 640 * 1136， 和iphone的屏幕適配。
使用Shape工具可以繪制矢量圖形，覆蓋原有的界面元素。
導(dǎo)入的圖片可以使用圖片的Mask功能，例如將一個面包圖片顯示成一個圓盤的形狀，完成界面元素的自定義、
使用特殊符號功能添加頁面基礎(chǔ)元素，將星星設(shè)置為金黃色。這樣以iOS內(nèi)置音樂應(yīng)用為布局基礎(chǔ)的美食列表頁面就完成了。
同樣的方式，還完成了grid view, map view 和gallery view，他們分別使用了iOS內(nèi)置的相冊，地圖和天氣App.
第二階段 Animations
用戶可能會好奇尋找top toast 和 nearby toast的關(guān)系，此時原型中需要添加轉(zhuǎn)場動畫，兩個界面是怎樣轉(zhuǎn)換的呢？ Keynote中的動畫包括兩種
其中Transition中有一種非常給力的動畫叫做Magic Move, 它可以使同一元素在不同的slide之間進(jìn)行動畫轉(zhuǎn)換，形成很炫酷的效果。利用這一特性可以做出不同的動畫，例如，一個圓盤圖標(biāo)在slide1 和slide2中分別處于不同的位置，進(jìn)行Magic move的時候，就會出現(xiàn)圓盤的跨slide平移效果。如果位置相同，slide1 和slide2中圓盤的大小角度不同，就可以出現(xiàn)旋轉(zhuǎn)或者放大的效果。理解Magic move的基本工作方式后，做出不同的效果靠自己發(fā)揮了。
第三階段 Interaction
在有了頁面之間的動畫轉(zhuǎn)換后，我們可能得到更多的反饋，比如nearby toast 和 top toast 的界面可以合并為一個頁面。原型中應(yīng)該增加交互，讓App更加真實。
Apple使用了Xcode進(jìn)行了簡單的交互制作，這些交互只是看起來在工作，例如地圖的移動只是一張圖片在拖拽，輸入文本只是在連續(xù)的切換十幾張圖片。
例如下面的界面實際上是一張圖片拆成了三個部分，一個導(dǎo)航欄，一個地圖，一個列表。
為layer編寫簡單的onTouchMove事件，模擬在一張地圖上拖拽瀏覽的操作。
全能程序員交流QQ群290551701，群內(nèi)程序員都是來自，百度、阿里、京東、小米、去哪兒、餓了嗎、藍(lán)港等高級程序員 ，擁有豐富的經(jīng)驗。加入我們，直線溝通技術(shù)大牛，最佳的學(xué)習(xí)環(huán)境，了解業(yè)內(nèi)的一手的資訊。如果你想結(jié)實大牛，那 就加入進(jìn)來，讓大牛帶你超神！
新聞熱點
疑難解答
