天天看點

從0到1制作一個App第一步:制作産品原型第二步:産品頁面設計第三步:代碼編寫補充學習資料:

本文假定讀者是想通過自己的學習和努力,從0到1去制作自己的一款APP産品。

我将從獨立開發者的角度,盡可能描述一條可行的路徑。

第一步:制作産品原型

從0到1制作一個App第一步:制作産品原型第二步:産品頁面設計第三步:代碼編寫補充學習資料:

不懂開發的人可能覺得軟體産品就隻是程式員埋頭吭哧吭哧搞出來的,但編碼其實隻是其中一個環節,并不是全部。你可以把産品原型了解為房子的設計圖,簡單的房子可能不需要設計,但稍微複雜一點的,都是離不開圖紙的。

有些程式員想自己做個東西,也不需要和别人協作,覺得這個麻煩,就跳過這一步了。但我建議最好還是先做出原型來,它不僅可以幫助你把頭腦中的想發快速呈現出來,更重要的是,在你設計原型的時候,你已經把産品在腦海中做了一遍了,這樣對你在後面進行軟體的子產品設計的時候是有極大的好處的。

這裡推薦幾個做 App 産品原型的軟體:

墨刀

Axure

。如果不是特别清楚原型是什麼東西的話,可以到墨刀的讨論區去看看,有一些分享的作品。

第二步:産品頁面設計

這年頭顔值越來越重要了,對于大部分開發者來說,可能做不到設計驚豔,但是要做到簡潔大方并不是一件很難的事情。

秘訣就是要統一,統一好顔色、字型的使用場景,這樣出來的視覺效果一般不會很差。

從0到1制作一個App第一步:制作産品原型第二步:産品頁面設計第三步:代碼編寫補充學習資料:

這裡有篇文章介紹了設計規範的内容,你可以去參考一下:

APP界面設計規範編寫指南

還有一個就是圖示的問題,

阿裡巴巴圖示庫

有非常多圖示,一般App都夠用了。

一般來說,如果是我自己開發的應用,很少去動手設計頁面,都是直接用一套成熟的設計規範,然後對着産品原型來動手編碼了。比如 App 的就可以使用谷歌出品的

Material Design

,後面提到的 Flutter 就已經内置了 Material Design 的 UI 元件了。

如果你要自己動手設計頁面的話,在 mac 上面我推薦使用 sketch 。

第三步:代碼編寫

接下來就可以考慮開始動手幹了。首先我們要先定一套技術方案,一般來說,我們做一個普通的App,需要搞定的東西有除了手機App,還有相關的API服務接口。

App 用戶端

首先我們看一下App端,目前手機平台有兩大陣營,一個是 Google 開源的 Android 系統,一個是蘋果的 iOS 系統,它們使用的開發語言和開發工具都是不一樣的。其中 Android 可以使用Java 或者

Kotlin

語言來原生開發,iOS可以使用 Objective-C 或者

Swift

語言。

如果你要兩個平台都各做一個,那開發成本将會非常高。我建議你考慮直接采用跨平台的技術,比如Google 的

Flutter

(Dart語言)或者 Facebook 的

Reactive Native

(JavaScript語言)技術。

當然你要先調研一下你要做的産品在相關平台下實作有沒有可行性,這方面可以咨詢一下相關的技術專家。也可以按照經驗原則,你在别的App看到的功能,一般都能實作。

無論你使用什麼技術,一般來說在 App 端需要做的事情一般不外乎編寫頁面,編寫互動邏輯和資料通信,一般采用HTTP協定。

這裡涉及到的技術點比較多,我的經驗是直接通過一個完整的Demo源碼來邊學邊做是比較高效的學習方法,這個Demo最好足夠簡單,但是有完整的邏輯互動和通信過程,比如登入和資料清單。找Demo可以通過搜尋引擎、

GitHub 開源中國

等平台。

還有一個值得分享的經驗是要以官方文檔作為主要參考和學習材料,資料夠準确,你也會慢慢就能快速索引到相關知識點。遇到一些不懂的知識點要善于Google 或者百度,一門相對成熟的技術,網上都有很多資料的。

API 服務端

如果說App是可以看得見,摸得着的前端,那 API 就是看不到的後端了。這一塊的技術就更複雜了,你的App使用者是1000人,1W人,100W人,後面系統的設計複雜度是完全不一樣的。當然,這裡不去讨論負載均衡、分布式設計這些複雜的東西,目前我們能搭建一個簡單的web服務就好了。

雖然我自己用 Java 比較多,但如果你是剛開始接觸後端開發,你可以試一下

expressjs

,上手很快,對于簡單的接口開發是足夠啦,語言是 JavaScript,剛好你可以結合一下使用

來開發App,降低了不少學習和開發成本。

背景管理端

這個是用來友善你後面營運App用的,比如要錄入一些資料,管理使用者等。要完成這個,在懂得寫接口的基礎上,你還要學習怎麼編寫網頁。

如果你前面的事情都能搞定,那

HTML 和 CSS

這些對你來說就是小菜一碟了。如果你還有精力的話,你可以順便把

vuejs

也看一下,這裡推薦一個背景子產品:

vue-element-admin

如果實在學不動了,也可以用

boostrap

+ jquery 來搭建一套視覺還不錯的背景系統。

到此,你的 App 就算是完成了,測試和上架那些就不提了。推廣和營運又是另外一個話題了,有機會再聊。

補充學習資料:

  1. Flutter實戰
  2. 阮一峰 JavaScript 教程
  3. 廖雪峰 JavaScript 教程
  4. HTML/Css W3School 中文教程

關于 AgileStudio

我們是一支由資深獨立開發者和設計師組成的團隊,成員均有紮實的技術實力和多年的産品設計開發經驗,提供可信賴的軟體定制服務。