國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
第二節、Illuscook
+App 創作成果 一、Illuscook
+操作流程與介面呈現
(一) Illuscook+ App icon 設計
圖 6-3 Illuscook+ App icon
(二) Illuscook+操作流程與介面
1. Illuscook+開啟頁面：App 啟動時的進入畫面。
圖 6-4 Illuscook+ App 開啟頁面
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
2.手繪食事牆：使用者登入後，在手繪食事牆左右滑動可觀看【輕食】、【早午餐】、【甜 點與蛋糕】三種類別中的食譜，並可選取依照發表時間/依照作者名稱/依照食譜名稱來 排序並瀏覽手繪食譜，或是透過搜尋功能，尋找自己想要閱讀的食譜類別。
圖 6-5 手繪食事牆-三種類別瀏覽
3. 使用指南：使用者可點選右上角的「○? 」瀏覽Illuscook+個單元的功能簡介，並附有「食 譜單位參考指示」，協助使用者釐清本 App 中較不具明確衡量標準的單位參考份量。
圖 6-6 使用指南
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
食譜簡介 材料清單 步驟動畫
4.食譜閱覽：點選想看的食譜後，即進入食譜閱覽頁面，依照瀏覽順序呈現如以下流程：
圖 6-7 食譜閱覽流程
(1)食譜簡介：此畫面之主要視覺為該道手繪食譜的封面大圖，提供訊息包含食譜名稱 之大標題、hashtag、作者(可點選訂閱，接收作者發表的作品資訊)、食譜介紹文字、料 理耗費時間、熱量及份量等基本資訊，一目了然；若食譜作者有上傳影片，則會出現「觀 看影片」標籤，點選即可進入全螢幕播放，增加閱讀食譜的趣味及互動效果，同時也採 用使用者對手繪食譜仍需搭配真實照片之需求與建議，讓使用者可點選真實照片放大觀 看，方便料理時瀏覽與參考。
• 食譜名稱
• 分類 hashtag
• 作者(可訂閱)
• 食譜介紹
• 食譜份量標示
• 料理耗費時間
• 熱量標示(示意)
• 手繪食譜封面圖
• 食譜真實照片
• 影片觀看
• 食材清單，以清 楚之圓形手繪圖 示呈現
• 食材名稱與準備 份量
• 可勾選已準備完 成之材料
• 手繪插畫食譜料 理過程步驟動畫
• 步驟說明
• 計時功能
• tips 小撇步
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
圖 6-8 食譜簡介
(2)材料清單：食材清單，以清楚之圓形手繪圖示呈現材料名稱與準備份量，使用者可 將此清單做為 checklist 用途，勾選已準備完成之材料(如圖 6-10 所示)。
圖 6-9 材料清單與勾選功能
(3)步驟動畫：每道食譜的料理步驟過程均以手繪插畫的形式呈現，並且將插畫製成動 畫，方便使用者理解製作過程，並且提高觀看的趣味性。每一步驟均有簡明的步驟說明 文字，並提供製作時間、計時功能，按下開始計時將會對步驟耗費時間進行倒數，途中 可按下暫停或重新開始計時，時間到時會響鈴提醒。另外，若步驟具有 tips 小撇步提示，
也會在步驟說明下方以標籤呈現。
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
圖 6-10 材料清單-勾選準備完成的材料
以上為食譜閱覽的瀏覽順序及流程，另外，點入食譜閱覽後，上方均有以下五種功 能的按鈕可點選：(1)收藏食譜；(2)加入我的創意食譜書；(3)發問與討論；(4)分享及 (5)購物車，詳細功能請見以下說明。
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
(1)收藏食譜：以 按鈕表示收藏食譜，點選按鈕可選擇要加入收藏的食譜分類。
圖 6-11 收藏食譜
(2)加入我的創意食譜書：以 按鈕表示加入我的創意食譜書，點選按鈕可選擇要 加入哪一本創意食譜書，或新增一本創意食譜書類別。
圖 6-12 加入我的創意食譜書
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
(3)發問與討論：以 按鈕表示討論與發問，點選按鈕可進入討論及討論區留言。
圖 6-14 發問與討論
(4)分享：以 按鈕表示分享，點選按鈕可將食譜以社群網站、E-mail 等方式進行 分享，目前提供的分享方式為 Facebook 分享。
圖 6-15 Facebook分享食譜
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
勾選要購買的
食材與份量 選擇取貨門市 確認訂單 完成購買 (5)購物車：以 按鈕表示購物車，點選按鈕可購買製作該則食譜所需的材料，並且 提供配到好組合包或單項購買，本項服務及流程設計係依照使用者需求問卷調查及訪談 中所歸納之「不知某些材料是什麼」及「不知道要去何處購買食材」問題所提出之行銷 方案，購物流程設計如下圖：
圖 6-16 購物流程
5.我的 Illuscook：分為「我收藏的 Illuscook」及「我發表的 Illuscook」以及「我的創意 食譜書」。
(1)我收藏的 Illuscook：提供使用者瀏覽、管理已收藏的食譜。
圖 6-17 我的 Illuscook-我收藏的 Illuscook 提供單項食材購
買或配到好組合 包
使用者可自行選 擇方便取貨之合 作通路門市，下 單後自行取貨省 去運費問題
再次確認購物內 容及取貨門市
每次訂購完成均 贈送電子折價 券，促進重複消費 意願
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
填寫食譜 書資料
選擇食譜 書格式
管理收藏 內容
編輯食譜
書版型 輸出預覽 確認訂單 完成訂購 (2)我發表的 Illuscook：使用者可在此區管理、編輯自己創作的手繪食譜，也可點選「上
傳作品」，進入本 App 之食譜編輯流程。
圖 6-18 我的 Illuscook-我發表的 Illuscook
(3)我的創意食譜書：使用者可將手繪食譜收藏、命名為自己喜愛的書名，並可選擇出 版格式、書腰顏色、頁面版型，自行對內容進行編輯，並選擇欲輸出為電子書或實體書。
創意食譜書編輯流程設計如下圖：
圖 6-19 我的創意食譜書編輯流程
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
圖 6-20 我的創意食譜書編輯畫面
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
6.上傳手繪食譜作品：使用者可在 App 的右上角或是在「我發表的 Illuscook」中點選「上 傳作品」，即可進入本 App 的食譜上傳編輯器，依照步驟上傳並完成手繪食譜。步驟編 輯器左側為固定式選單，可在此輸入手繪食譜名稱、選擇食譜類別及食譜簡介、食譜份 量，並可為食譜自行標示標籤(hashtag，最多五個)，製作耗費總時間則會根據使用者在 每一步驟填寫的個別時間自行進行加總；並且可依照步驟依序上傳真實照片、使用者自 製小短片等。
圖 6-21 食譜創作-食譜基本資訊編輯
手繪編輯器繪製區提供各種分類的貼圖及文字輸入、不同畫筆、橡皮擦等工具，讓 使用者可用趣味、方便的方式自行創作、拼貼手繪食譜的封面圖，畫筆也具有調整筆刷 大小之功能。
圖 6-22 食譜創作-手繪編輯器
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
材料清單提供多種食材讓使用者直接選取，省去逐一輸入文字的不便，拉動食材 數量時，系統也會按照不同食材的份量自動計算熱量，並顯示於食材列表後方(目前為 概念功能，尚未實際建立食材熱量之數值資料庫)。
圖 6-23 食譜創作-材料清單編輯與選擇
步驟說明欄位用來填寫食譜的烹飪步驟及耗費時間，並上傳步驟照片或圖片，若繪 製多張具有連續動作效果的圖片並同時選取上傳，本 App 將為自動將圖檔製成 GIF，產 生具有動畫效果的步驟圖。
圖 6-24 食譜創作-步驟說明編輯
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
7.食‧畫‧趣遊：將烹飪與手繪插畫課程相關資訊呈現於此單元，也可在「趣遊」中報 名自己喜歡的文化小旅行等活動，詳細瀏覽課程及活動行程、地點、費用等資訊。
圖 6-25 食‧畫‧趣遊
8.附近優惠：提供位置感知服務(Location Aware Service)的功能，使用者可進行定位，
搜尋及下載所在地附近的店家所提供之食材購買或課程等相關優惠。
圖 6-26 附近優惠
9.食事話題：即是由 Illuscook+所編輯、發行之數位部落格或電子雜誌，未來可在本單元 中定期或不定期分享、報導與飲食文化、食材、手繪食譜相關的熱門話題或報導，做為 讀者資訊來源的另一多元管道。
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
圖 6-27 食事話題