第五章 寫代碼之前先進行原型設計

專題目錄:

IOS 8 開發(fā)入門--序言(一)

IOS 8 開發(fā)入門--序言(二)

第一章:創(chuàng)建你的第一個App(一)

第一章:創(chuàng)建你的第一個App(二)

第二章:使用Storyboard設計用戶界面(一)

第二章:使用Storyboard設計用戶界面(二)

第三章 Hello World App 淺述(二)

第四章 自動布局(一)

第五章 寫代碼之前先進行原型設計

第六章 創(chuàng)建一個基于Table的簡單App(一)

什么是原型

現(xiàn)在你已經(jīng)對iOS開發(fā)有了基本了解了。正如我一直說的,沒有比自己動手真正開發(fā)app更好的方法來學習app開發(fā)。在這本書里我們會開發(fā)一個真正的app。但是現(xiàn)在先不著急寫代碼,我們需要先設計一個程序原型。

每次我向初學者提到原型,總是會遇到兩個問題:

1什么是原型?

2為什么要使用原型?

原型是一個產(chǎn)品的早期模型,主要目的是為了測試某些概念或者程序外觀。在許多工業(yè)領域都使用原型。在建房子之前,建筑師會為房子繪制設計圖和創(chuàng)建模型。飛機制造商在正式生產(chǎn)飛機之前會制作飛機原型用于測試可能存在的缺陷。軟件公司在正式開發(fā)產(chǎn)品之前會創(chuàng)建原型來驗證設計思想。在app開發(fā)領域原型是產(chǎn)品早期的樣品,它只包含部分功能和最基礎的UI甚至僅僅是草圖。

原型設計是指創(chuàng)建原型的過程,原型設計有很多的優(yōu)點。第一它將你的觀點通過可視化的方式表現(xiàn)出來,讓你更好的和你的團隊或者用戶之間溝通。如果你既是開發(fā)者又是用戶的話,你可能不需要原型,因為需求由你自己提出實現(xiàn)也由你自己。所有的東西都在你腦子里,你明確知道你想要什么以及你要創(chuàng)建什么。

但是這種開發(fā)情況很少見。大多數(shù)情況下你在一個團隊里工作或者為客戶開發(fā)軟件。即使你是獨立開發(fā)者,你也可能開發(fā)一款面向全球或者特別群體的應用。你必須找到一個方法來與人交流和測試你的想法。你可以用文字表達你的想法,但是沒有人愿意看無聊的文字屏幕來理解你的想法。最好的方法你使用一個demo來向用戶展示你的想法。

通過創(chuàng)建原型,你可以盡早的和用戶進行交流,用戶會更好的理解app是如何工作的,并且盡早的指出還缺什么。

原型還可以在不創(chuàng)建真實App的情況下驗證你的想法。你可以盡早的向你的潛在客戶展示你的原型,從而在App開發(fā)之前的獲得反饋。這樣既節(jié)約時間又省錢。


在紙上繪制你的App草圖

好了現(xiàn)在你有了一個點子,那如何創(chuàng)建你的原型呢?原型有很多形式,可以是紙制的也可以是電子的。我通常是從手繪開始的,所以我推薦你在紙上繪制你的App草圖。這是創(chuàng)建原型最簡單的方式。并且紙是最快把你的想法記錄下來形式之一。

例如我想創(chuàng)建一個美食類App用來記錄我喜歡的餐館。雖然Yelp非常好用,但是我還是想創(chuàng)建一個私人美食指南。這個App有以下特征:

1在主界面上列出所有喜歡的餐館。

2創(chuàng)建一條餐館的記錄,并且從相簿中選一張照片作為餐館的照片。

3記錄餐館的地址,并且能夠和世界上其他吃貨分享

4在地圖上顯示餐館的地址

5查看其他吃貨分享的照片。

我認為大家會喜歡這個主意。為了測試我的點子,我一開始在紙上繪制我的設計??赡苣承┤藭f我不擅長畫畫。繪制你的App,沒必要成為畫家。畫到圖中這種層次已經(jīng)足夠和你的朋友展示你的想法了。


使用POP創(chuàng)建你的App原型

你可以用紙說明的你App。但是如果你可以創(chuàng)建一個有屏幕變化能夠和你的潛在用戶交互的App原型是不是更好?有很多工具可以供開發(fā)者創(chuàng)建應用原型。Pop app,Proto.io,Flinto和InvisionApp都是這類原型工具。在這本書上我將會使用Pop創(chuàng)建App原型,不過其他工具的用法是類似的。

Pop可以將你手繪的草圖轉(zhuǎn)換為原型。它使用相機獲取你的草圖或者直接從相冊導入。為了喝圖片交換,Pop提供了許多方式將你的屏幕聯(lián)系起來。首先,在iPhone上下載Pop。同時從(下載地址)下載App原型。然后解壓圖片并且導入到你的iPhone中。

Pop很容易使用。當你第一次啟動后,你可以看到你的工程列表。點擊+圖標來創(chuàng)建一個新工程。接下來為工程取一個名字。然后選擇存放處。默認情況下工程是空的。現(xiàn)在我們點擊相機圖標并且使用相機選項來獲取你的草圖。另外你可以從相冊倒入草圖。下圖展示了一個Pop的示例工程。


從主屏幕開始,定義屏幕切換。POP允許你強調(diào)圖片的某個指定區(qū)域或者某個被點擊的指定區(qū)域??梢远x的屏幕切換類型有消失,前進,后退,升起,離開。從主屏幕開始,當點擊任何一條記錄App都應該導航至相應的細節(jié)屏幕。所以我們高亮被點擊的記錄,同時屏幕切換到“下一步”并且鏈接到細節(jié)屏幕。一旦你做出了改變,點擊Play按鈕和原型進行交互。隨后當記錄被點擊后,App將會跳轉(zhuǎn)到細節(jié)屏幕。


接下來你要做的就是重復以上的過程定義剩下的屏幕切換。當原型創(chuàng)建完畢,你就可以使用共享Share option和你的團隊成員以及潛在擁有分享你的原型。

這樣你就可以展示你的想法并且允許你盡量早的獲取你的用戶的反饋。如果你的用戶不喜歡你的想法活著界面設計,這不是什么大事,這些只是草圖而已。我們可以扔掉草圖然后再做一套,或者修改某些令人不滿意的地方讓原型變的更好。你可以看到,這種方法可以節(jié)約你的時間和金錢。

前面說過,App原型可以有很多形式。手繪草圖時很多種創(chuàng)建原型的方法之一。如果你是一個設計師,你可以使用photoshop或者sketch設計App原型。蘋果的Keynote同樣可以用來快速設計原型。Keynote是一個系統(tǒng)自帶的設計簡單App UI的工具。Keynotpia提供mock template讓你的草圖無縫轉(zhuǎn)換到Keynote。下圖展示了一個keynote創(chuàng)建的簡單的屏幕示例。


同樣的你可以將App屏幕導入到Pop并且定義屏幕切換。

小結(jié)

原型是App開發(fā)過程中一個非常普遍的過程。它可以讓你快速構(gòu)建一些可以工作的模型并且給用戶展示。原型可以用來驗證想法并且盡量早的獲取反饋。如果你正在為客戶創(chuàng)建App,使用原型可以讓你的客戶盡可能早的理解App的設計。

所以,無論你是一個獨立開發(fā)者還是一個開發(fā)團隊的成員,我希望你從今天開始使用原型。先在紙上或者使用Pop等其他原型工具創(chuàng)建原型,而不是直接開始編程。這可以讓你創(chuàng)建沒有返工的程序,節(jié)省你的時間和金錢。?

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,716評論 25 709
  • 發(fā)現(xiàn) 關注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 15,020評論 4 61
  • 如果圖片值千字,原型設計值上千次會議. @IDEO 現(xiàn)在你有一些基本的iOS編程和界面編輯器的基本概念.像我一直說...
    運營老周閱讀 1,021評論 0 1
  • 九、金玲毒氣 他們倆看著也快到中午了,決定先吃個午飯,下午再去古玩街逛逛。 譚久帶著見喜去了一家名叫仙逸樓的店家去...
    五行缺水也缺你閱讀 404評論 0 0
  • 謝謝朋友的記掛和關心
    妮妮Gloria閱讀 160評論 0 1

友情鏈接更多精彩內(nèi)容