設計簡易 App
Keynote 原型
在 Keynote 中建立 app 原型。
本教學課程的預估完成時間:
40 分鐘
在 Keynote 中建立 app 原型。
本教學課程的預估完成時間:
40 分鐘
在 Keynote 計畫案簡報的「Keynote 原型」區塊中找到空白幻燈片,並用空白幻燈片製作原型。如有需要,可以複製幻燈片。
了解以下 Keynote 功能,以便用來製作自己的 app。每個區塊都會用「正向」app 當作範例。
加入文字、線條和形狀。
步驟 1
點一下「形狀」,並選擇元素以加入文字、線條和形狀。
步驟 2
點一下「媒體」,即可加入影像、音訊、繪圖或影片。
步驟 3
將藍色角落拖移到想要的位置,即可調整形狀或影像大小。
步驟 4
點兩下形狀即可加入文字。
步驟 5
加入 app 須使用的所有元素,然後調整為正確大小。
構思標題、影像和按鈕。
編輯原型內的元素色彩和透明度。
步驟 1
顯示幻燈片導覽器。
步驟 2
選取幻燈片並點一下「格式」,即可變更背景。
步驟 3
點一下「背景」,選擇顏色、漸層或影像。
步驟 4
點一下「動態」即可加入會移動的背景。
步驟 5
變更形狀色彩。
點一下一或多個形狀、點一下「格式」,然後點一下「填充」。
步驟 6
使用不透明度滑桿調整元素的透明度。
選取元素並點一下「格式」,然後滑動不透明滑桿,調整為想要的透明度。
步驟 7
使用所提供的控制項編輯文字樣式。
點一下以選取文字、點一下「格式」,然後點一下「文字」。
步驟 8
繼續按照喜好編輯原型設計樣式。
在幻燈片之間加入連結,讓 app 原型具有互動效果。
步驟 1
思考 app 是否需要任何過場或互動效果。
秘訣
使用多張幻燈片來加入或變更元素,讓原型具有互動效果。
步驟 2
點一下幻燈片,然後點一下「複製」即可加入幻燈片。
步驟 3
選取元素,然後點選「連結」即可建立連結。
步驟 4
決定連結目標。連結目標可以設定為幻燈片、網頁、電子郵件或電話號碼。
秘訣
設定為僅能用連結導覽,就能讓原型像 app 一樣運作。
步驟 5
點一下簡報名稱、點一下「簡報選項」,然後點一下「簡報類型」即可選取簡報類型。
步驟 6
點一下「僅連結」。
步驟 7
繼續製作幻燈片和連結,直到完成 app 為止。加入連結後,點一下「播放」 以進行測試。
步驟 8
點一下「播放」,並用所有可能的瀏覽順序查看 app 內容。是否有無法連結到其他內容的情形?如果發生這類情形,請加入連結,確保使用者不會卡住。
使用動畫加入、加強或移除元素。
步驟 1
點一下想設定動畫的元素,並點選「動畫效果」,即可加入動畫。
步驟 2
探索各種動畫選項。
「加入構件進入」 能在畫面中加入元素。
「加入動作」 能夠執行動作。
「加入構件離開」 能夠移除畫面中的元素。
步驟 3
嘗試選單內的各種動畫,找出適合的選項。
完成後,點一下「返回」。
步驟 4
點一下動畫並按照喜好調整設定,然後點一下「完成」。
秘訣
如果簡報類型設定為「僅連結」,那麼動畫只會接在過場效果後播放。
步驟 5
點一下「構件順序」,編輯構件設定。
步驟 6
在第一個動畫點一下「過場效果之後」。
步驟 7
其他動畫則點一下「在構件之後」。
步驟 8
點一下「預覽」 測試動畫。繼續編輯內容,直到正確設定 app 外觀和功能為止。
下一項: