難道要成為一位 App 設計師真這麼難?那倒不一定,目前標榜免程設經驗的 App 開發設計方案,已經越來越多了,像是 iBuildApp 這個網站,就提供了簡單又直覺的網頁介面,可以協助你設計出屬於自己的 App,它不但支援文字、RSS訂閱、圖片、聲音檔與視訊檔,並提供各種現成的 App 範本,可自行選擇套用,你甚至可以將你的部落格或網站做成 App。

快速瀏覽:

  1. 註冊帳號及功能概觀
  2. 創建 App 使用者介面
  3. 動手實作 App
  4. 編輯 App 的功能與內容
  5. App 上架及下載

此外,iBuildApp也提供App管理者介面,讓你可以方便隨時更新App的內容。目前iBuildApp所製作的App,可支援iPhone、iPad以及Android系統,不久後更將拓展至BlackBerry系統。最重要的是,除非你有特殊需求,否則大部分的功能都是完全免費的。

註冊帳號及功能概觀

iBulidApp提供了一個整合性的平台,讓用戶擁有免費上傳內容、並即時更新App的功能,製作過程完全不需下載任何安裝程式,將App程式設計轉型成為一種網路服務,只要登入網站,便可開始進行App的製作與維護。

Step 1

首先在iBulidApp的首頁上,點選右上角的「SignUp」註冊,或者也可直接使用Facebook帳號登入。 

Step 2

在My Profile頁面,可以更新個人頭像,編寫個人介紹,也有閱讀站內訊息和Apps管理的功能。

 

Step 3

iBulidApp擁有自己的App Store,基本上是會員自行製作的,可分為使用原生語言的Native Apps或使用HTML 5的Web Apps。 

Step 4

範本市集Marketplace是iBulidApp的另一個重點,有許多現成的精美範本可以套用,不過部分範本需要付費才能使用。 

Step 5

iBulidApp也提供付費升級功能的服務,像是去廣告,App下載流量分析等等,一般使用者可選用免費的入門型START即可。

 

創建App使用者介面

在開始建立一個App之前,首先要決定的,就是App的屬性,不同類型的App,所應用的介面也會不同,像是音樂類型的App介面理應與電子書App不同,若範本市集內找不到適合的介面範本,你也可以自行創建。

Step 1

進到My Templates頁面,點選+號按鈕新增範本,之前已經建過的範本,亦可在此頁面查詢並編修。 

Step 2

替新建範本命名後,就可進到介面設計的主畫面,點選手機螢幕,右方欄位可設定背景,有內建圖片,或自行上傳圖片等選項,決定後按下Apply changes。 

Step 3

左方欄位UI Library是建立使用者介面的工具箱,用拖曳方式拖至手機螢幕,即會出現對應的設定選項,可調整按鈕及字體大小。 

Step 4

UI Library下方的Menu,是用來增加App介面底部的功能選單,右側可選擇對應的功能圖示,最多可擺放5個。

Step 5

當你的App範本設計完成後,你還可以選擇是否要發佈到公開的範本市集中,提供給其他網站會員套用。

動手實作App

要快速產出一款實際可用的App,套用iBulidApp的範本是最快的方法,雖然部分精美的範本需要額外付費才能取得,但市集中亦有許多免費實用的範本,只需順著網頁上的提示步驟,便能迅速上手。

Step 1

在My Apps頁面點選+號按鈕新建App,可選擇要建立官方原生架構的Native App,還是採用HTML 5技術的Web App,差異是前者執行效能較穩定,但後者的自由度高。 

Step 2

接著選擇你想套用的範本,除了一些基本的範本外,像我們前一步驟所自建的範本,以及之前曾在市集中所購買的範本,這邊也會幫你一併列出來。 

Step 3

這裡選擇名為E-book 2的範本,進入設計主頁面,可以看到iBuildApp將製作流程簡化成4個主要步驟,手機左側可選擇以iOS或Android系統預覽。 

Step 4

因為是直接套用範本,前三個步驟流程,分別設定App的背景、Logo,以及功能按鈕和選單的文字,很快便能完成。  

Step 5

再來第四個步驟是設定App各功能連結頁的內容,在Current Page下拉選單,選擇要設定的分頁進行編輯。

編輯App的功能與內容

在前面流程中,我們大致完成了使用者介面的設計,但對於一款App來說,內容與功能性才是使用者最在意的重點,iBuildApp也提供了相當完整的功能模組,可以依照App的屬性不同,讓設計者自由更換選用。

Step 1

在第四步驟出現了一行紅字,代表iBuildApp偵測到這款App的內容還未完成,於是手機預覽圖出現了一堆驚嘆號。 

Step 2

在分頁下拉選單選擇Contents,可看到此分頁的類型為eBook,所以可以在下面按+Add為電子書增加文章章節。

Step 3

點選Change page type的連結,便可改變此分頁的功能類型,目前官方提供22種的功能模組,如地圖、相簿或RSS訂閱等功能。

Step 4

將分頁類型變更為Photo Gallery,內容編輯介面亦跟著改變,提供RSS訂閱更新或自行手動上傳照片兩種方式。 

Step 5

使用RSS訂閱來更新App相當方便,不需一筆一筆輸入資料,還可直接將個人部落格文章拉進App之中,一個專屬於你的App便隱然成形。

App上架及下載

如果你想上架Apple或Android的官方市集,卻又沒有開發者帳號,iBuildApp亦提供教學及代為上架的服務,不過得收取費用,此外,會員還可上架到iBuildApp的App Store,或者你也可在個人頁面直接下載製作好的App安裝檔,再分享給朋友即可。

Step 1

配置完App的功能,最後還有一些設定要完成。在App Settings頁面,設定App的使用平台、時間格式以及啟動畫面。 

Step 2

接著在App Info頁面中,設定App的名稱、類別、描述以及關鍵字等資訊,另外別忘記上傳一個App的專屬Logo圖示。 

Step 3

如果希望你的App可以自動發佈推播訊息,亦可以在Notifications頁面作設定。

Step 4

因iOS需要開發者帳號,故以Android系統為例,按畫面指示申請App所需的金鑰,按下Continue提交,整個App製作便告完成。 

Step 5

審核通過,iBuildApp便會將App上架到自己的App Store,並提供預覽以及下載App安裝檔的功能。

資料來源:http://www.techbang.com/posts/10611-programming-free-experience-homemade-mobile-app-app-designers-use-ibuildapp-promotion-pchome-200-skills?page=1

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 Dat 的頭像
    Dat

    Dat知識倉庫

    Dat 發表在 痞客邦 留言(0) 人氣()