首頁

Keynote 原型

設計簡易 App

Keynote 原型

在 Keynote 中建立 app 原型。

本教學課程的預估完成時間:

40 分鐘

建立 Keynote 原型。

在 Keynote 計畫案簡報的「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 外觀和功能為止。

下一項: