如果圖片值千字,原型設(shè)計(jì)值上千次會(huì)議.
- @IDEO
現(xiàn)在你有一些基本的iOS編程和界面編輯器的基本概念.像我一直說的,沒有比真正創(chuàng)建一個(gè)app更好的方法來學(xué)習(xí)app開發(fā).本書我們將一起創(chuàng)建一個(gè)真正的app.但是,我們不急于寫代碼.我們先構(gòu)建一個(gè)原型設(shè)計(jì).
每次我跟新手提到原型設(shè)計(jì),會(huì)出現(xiàn)兩個(gè)問題:
- 什么是原型設(shè)計(jì)?
- 為什么要做原型設(shè)計(jì)?
原型設(shè)計(jì)是一個(gè)產(chǎn)品的早期模型來測(cè)試概念或者圖像化一個(gè)想法.原始性及曾經(jīng)被用在許多行業(yè).在建造建筑物之前,建筑師需要畫一個(gè)建筑物的計(jì)劃然后做建筑物的模型.航空公司在構(gòu)建和裝備飛機(jī)之前要先構(gòu)建飛機(jī)的模型來測(cè)試設(shè)計(jì)缺陷.軟件公司在創(chuàng)作真實(shí)的應(yīng)用之前也要構(gòu)建軟件模型來探討想法.在app開發(fā)環(huán)境中,原型設(shè)計(jì)是app的早期樣本,沒有完整的功能然后包含基本的UI甚至是草圖.
原型設(shè)計(jì)是開發(fā)一個(gè)原型的進(jìn)程然后可以提供很多幫助.首先,它幫助你們形象化想法然后可以更好的跟你小組成員和用戶溝通你的想法.如果你是個(gè)人開發(fā)者和唯一的用戶,你可能不需要原型設(shè)計(jì),因?yàn)槟阒酪蠛蚢pp是怎樣工作的.所有的東西都在你腦子里,你確切的知道你想要什么和你需要構(gòu)建什么.
但是,像那樣的app開發(fā)很少發(fā)生.你可能在一個(gè)編程小組工作或者為客戶構(gòu)建app.即便你是個(gè)獨(dú)立開發(fā)者,你也很可能開發(fā)一個(gè)app涉及特殊的用戶群或者全球所有的用戶.你不得不尋找一些方法來交流你想法或者測(cè)試你的想法.你可以用文字來解釋你的想法,但是沒有人像看另一個(gè)煩人的想法展示.沒有什么方法比用一個(gè)工作demo來展示你的想法更好了.
通過創(chuàng)建一個(gè)原型設(shè)計(jì),你可以更早的接觸你的用戶,他們會(huì)更好的理解app是怎樣工作的然后指出漏掉了什么在前期開發(fā)的階段.
原型設(shè)計(jì)同樣允許你在沒有構(gòu)建真正的app的時(shí)候來測(cè)試你的想法.你可以展示原型設(shè)計(jì)給你的潛在客戶然后在app構(gòu)建之前獲得反饋.這會(huì)為你節(jié)約時(shí)間和金錢.下圖展示了原型設(shè)計(jì)的好處.
在紙上描述你的想法
現(xiàn)在你有了一個(gè)app想法你怎樣為你的app創(chuàng)作一個(gè)原型?
原型可以采取很多形式.它可以是紙制的,也可以是數(shù)碼的.它總是從手繪的概念開始,強(qiáng)烈建議用紙來勾勒出你的app設(shè)計(jì).這是最簡(jiǎn)單的辦法來創(chuàng)造app原型.紙仍然是最好的方法來快速記錄你腦海里的所有想法.例如,我有個(gè)想法,構(gòu)建一個(gè)食物app來保存我最喜歡的餐廳.我想為自己構(gòu)建一個(gè)app來創(chuàng)造一個(gè)私人飲食指南.這個(gè)app有這些特征:
- 在主屏上列出最喜歡的餐廳
- 創(chuàng)建一個(gè)餐廳記錄,從相冊(cè)導(dǎo)入相片作為餐廳圖片.
- 本地保存餐廳然后把它分享給世界上其他的美食家.
- 在地圖上顯示餐廳位置
- 觀看其他美食家分享的餐廳
我覺得其他人也會(huì)喜歡這個(gè)想法.為了測(cè)試我的想法,我先把我的設(shè)計(jì)畫在紙上.一些人說他們不擅長(zhǎng)畫圖.你不需要編程一個(gè)藝術(shù)家來畫你的app設(shè)計(jì).下圖展示的草圖足夠形象化你的想法和解釋你的app給你的朋友們.
用POP來給你的app做原型設(shè)計(jì)
你可以在紙上圖解你的app.但是如果你能創(chuàng)建一些屏幕交流不是更好嗎,那樣你的潛在用戶能夠互相交流app原型.這里有很多工具給開發(fā)者來做app的原型.POP軟件,Proto.io,Flinto,Principle和InvisionApp都可以.我將用POP來創(chuàng)建app原型但是其他工具也可以做的同樣的好.
POP軟件可以把你的手繪圖編程一個(gè)工作原型.你可以用相機(jī)捕捉你的手繪圖或者從你的相冊(cè)里倒入它們.為了與圖片進(jìn)行交互,app為你提供了各種視圖轉(zhuǎn)換來連接你的屏幕.你一會(huì)會(huì)看到我說的意思.
POP軟件用起來很簡(jiǎn)單.當(dāng)你登陸它,你會(huì)看到你的工程列表.點(diǎn)擊+圖標(biāo)來創(chuàng)建一個(gè)新的工程.給你的工程命名(如Food Pin).創(chuàng)建好以后選擇工程.默認(rèn)情況下工程是空的.現(xiàn)在點(diǎn)擊相機(jī)圖標(biāo)然后用相機(jī)選項(xiàng)來捕捉你的草圖.或者,你可以從你的相冊(cè)里導(dǎo)入草圖.下圖展示了POP工程案例.
從app主屏開始然后定義屏幕的轉(zhuǎn)換.POP讓你高亮圖片特定的區(qū)域和按下的指定區(qū)域.然后定義過渡類型包括fade,next,back,rise和dismiss.對(duì)主屏來說,當(dāng)按下任何記載時(shí)app應(yīng)該可以導(dǎo)航到細(xì)節(jié)的屏幕.所以我們高亮記載,設(shè)置過渡為”Next”然后鏈接它到細(xì)節(jié)的屏幕.一旦你做出了改變,輕按Play按鈕來與原型交互.當(dāng)按下任何記載的時(shí)候,app將轉(zhuǎn)到細(xì)節(jié)屏幕.
你僅僅需要重復(fù)這些步驟來定義其他的屏幕轉(zhuǎn)換.當(dāng)原型設(shè)計(jì)完成的時(shí)候,你可以用分享選項(xiàng)分享它給你的小隊(duì)成員和潛在用戶.
這是你怎樣展示你的想法和今早的征求用戶反饋.如果你的用戶不喜歡這個(gè)想法或者屏幕設(shè)計(jì),這不是一個(gè)偉大的想法.他們僅僅是草圖.我們可以扔掉這些草圖然后重新創(chuàng)建另一個(gè).或者你可以微調(diào)一些做的不好的區(qū)域來讓原型更好.你可以看到,這樣可以節(jié)約你的時(shí)間和金錢.
之前說過,app原型可以有多種形式.手繪是創(chuàng)造原型的方法之一.如果你是個(gè)設(shè)計(jì)師,你可以用PS或者Sketch來設(shè)計(jì)app原型.蘋果的Keynote同樣也能用來快速的制作原型.它內(nèi)置的繪制工具允許你來設(shè)計(jì)一個(gè)簡(jiǎn)單的app UI.Keynutpia提供模擬模板來組織你的想法.下圖展示了一個(gè)用Keynote制作的簡(jiǎn)單的屏幕.
參考:學(xué)習(xí)更多關(guān)于怎樣用Keynote創(chuàng)作原型,你可以參考
http://webdesign.tutsplus.com/tutorials/how-to-demo-an-ios-prototype-in-keynote--cms-22279.
