本類須校方申請後
該校學生才能參加



臺南市政府教育局
我是小企劃/製作教學
活動首頁
實施計畫
最新消息
一、說明
學習程式邏輯與設計是目前學校大力推動的資訊技能之一,除了可以培養對事物的敏銳看法,也有助於解決生活上流程最佳化與對數據分析統計的能
力,更能藉由工具的設計與視聽覺來營造優質的體驗性。網站、軟體(App)設計則是這個技能下最常見的產物,本活動以設計流程與介面的合理、創意
性為主,亦即假想自己作為一個軟體(App)開發階段前的企劃人員,如何執行有力的規劃來說服所有人,以下提供本類活動相關說明與工具參考:

1、題材發想:需針對「臺南市政府資料開放平台(http://data.tainan.gov.tw/)」提供的資料,發想可以投入的軟體設計方向。
2、資源蒐集:蒐集相關的地理歷史或人文藝術…資料圖文,並確認要使用的製作工具,可參考下述介紹的軟體架構設計平台來製作。
3、流程設計:以文字或草圖先規劃軟體的功能與操作流程,再投入圖形設計會比較順暢。
4、介面設計:流程設計確認無誤後開始繪製成正式作品,可以用創意的方式來妝點軟體介面,另外除了使用電腦繪製外,也可以使用紙筆手繪創作喔。
5、測試修正:針對完成的作品模擬操作流程與介面設計,有必要的話再進行修正。

二、臺南市政府資料開放平台操作說明
1、平台網址:http://data.tainan.gov.tw/,必須使用此平台的開放資料來企劃您要製作的軟體。
2、網站操作:
進入「群組」選單,選擇想要規劃的類別,也可以使用數個群組的資料來共同規劃一個作品,以下以「觀光景點/活動」中的「台南市夜市名冊」為例,
若想額外加入公車搭乘引導,也可以再加入「交通」下的「臺南市公車路線站牌資料」,請自行依照關連與必要性組合。
進入「台南市夜市名冊」後,點選「探索→預覽」,即可觀看目前政府提供的官方資料或數據,例如可以使用夜市名稱與地址,再結合公車站牌,來製
作一個「搭公車遊夜市」的手機軟體(App)。經由不同的資料數據組合,就可以創作出很多不同特性的軟體喔。
三、軟體(App)流程與架構規劃工具
1、平台註冊:https://cacoo.com/lang/zh_tw/ 這是一個簡單易用的線上繪圖工具平台,使用瀏覽器連線即可免費使用,不用安裝任何軟體。
須先註冊一個帳號才能使用,進入網站右側填寫電子郵件信箱(即此平台的帳號)後點選「註冊」。
再次填寫電子郵件信箱後點選「確定」。
對方會寄送一封認證信件,請到您方才填寫的電子郵件信箱收取認證信。
認證信內容如下,請點選信件中「Complete Sign Up」。
等連回以下網頁後,再依序填寫「Name英文名字」和「Password密碼」並勾選「By signing up, I'm agreeing...」,再來點選「Sign up」即可完成註冊與登入
的步驟。
2、製作流程
點選「製作新圖表」,開始製作新的作品。
可透過範本快速產生半成品,以下以製作手機版App為範例,點選「Wire Frame」再點選「iPhone Wireframe 2」,最後點選「選取」,即可立即使用現有
範本來練習喔。
如圖所示,範本提供一個簡單的版面,版面中的元件是可以隨便拖拉移動的,「設定格式工具列」則可針對所選擇的元件進行樣式與功能修改,右側
「快取圖案圖庫」提供更多額外的元件,可以透過拖拉的方式加入到App版面中。
將不必要的範例元件暫時移出版面備用,若不需要可直接選取後按鍵盤「Delete」刪除。
雙擊文字元件即可編輯文字內容,同時可以對文件樣式進行美化,例如調整顏色等。
大部分元件只要點選即可藉由「設定格式工具列」修改其樣式,例如調整顏色等。
透過右側「快取圖案圖庫」選擇所需的元件,即可拖拉進入版面,隨後進行樣式設定;另外也可以透過「從電腦檔案插入圖片」來匯入您自己的圖片。
透過「從電腦檔案插入圖片」來匯入您自己電腦中的圖片(免費帳號匯入的一個圖檔不能超過512 KB),匯入後再進行大小位置等調整。
如果有元件互相重疊,可以點選滑鼠右鍵選擇「四個調整上下層次的選項」來移動上下層次。
例如對要移動的圖片點選滑鼠右鍵選擇「後推一層」,圖片就會往下堆疊,藉此將元件彼此調整到正確的前後關係。
依照您的設計加入更多快取圖案,並透過元件周圍的縮放、旋轉工具來排版(快取圖案僅供練習使用,正式作品建議自行繪製後匯入,加強作品的原創
性)。
終於完成第一個App畫面囉,這就是企畫階段的任務,將構想好的版面使用工具排列出來,以便後續進行功能討論與投入軟體產品開發。
一個完整的軟體應該會有很多流程、順序與頁面,若想在目前這個作品中增加更多頁面,請點選最下方的「+」符號,即可新增一個頁面(這個平台雖然
可以免費使用,但一個帳號最多只能擁有25個頁面,若不夠可註冊多個帳號來使用喔),再點選最上方的「選取並插入範本」圖示。
這樣就如同一開始的步驟,第二個頁面也可以選擇範本來使用,而編輯的步驟也是大同小異。
3、儲存作品
做一半的作品或完成後的作品可以儲存在網站上,下次再登入網站即可繼續編輯,要儲存作品請點選「儲存圖表」。
在跳出來的對話框中,填上標題(即作品名稱),然後點選「儲存」。
儲存成功後右下角會顯示「圖表已儲存」。
4、管理作品
點選「返回圖表清單」可以返回作品管理畫面。
此時切換到「圖表總覽」可以觀看所有作品列表,由於免費帳號只能擁有25個頁面,建議將不必要的作品刪除,可以空出頁面來繼續使用。點選作品右下方「…」符號再選擇「移到資源回收桶」,接著在左選單點選進入「資源回收筒」,選擇「清理資源回收筒」即可完全刪除資源回收桶的作品。
若是登入要繼續編輯上次未完成的作品,請將滑鼠移到該作品上方,然後點選「編輯」圖示即可進入作品,繼續編輯喔。
5、匯出作品
本活動只接受JPG、GIF、PNG等三種圖片格式,這個平台創作完成的作品就可以直接匯出PNG格式的圖檔,相當方便,進入作品中,點選「匯出」。
點選「PNG格式匯出」即可將目前的頁面匯出成一張PNG圖檔,請再陸續將作品中的其他頁面匯出成PNG圖檔。
依照活動實施計畫規定,請將匯出後的所有圖片以檔名標明其順序(例如01.png02.png03.png04.png、…),讓別人也能了解軟體操作流程或順序。
此外還需包含作品詳細的說明,可如下圖採用一張張文字檔的方式,針對每一張圖片做詳細的功能、介面操作說明。最後請將這些圖檔和說明,壓縮成一個英文檔名的ZIP檔上傳,容量請勿超過 5 MB,否則會無法上傳喔。
四、網路資源
上述介紹的Cacoo教學僅提供參考,您也可以自行在網路上搜尋到很多Cacoo教學,或直接使用您常用的繪圖軟體來製作。
1Cacoo 線上中文免費畫流程圖軟體,即時協同設計多種企劃草圖
2製作 Wireframe 設計圖的免費工具整理