用 Keynote 來做令人驚艷的 APP 原型

prototyping

原型(prototyping)的重要性不僅在於驗證想法,很多時候原型反而在幫助自己思考產品走向、釐清產品脈絡。在設計流程中,設計師有時不見得會從使用者調查開展任務,反倒會先依照自己的感悟做出原型,讓使用者測試後反過頭來研究使用者行為。 在互連網創業中,我認為即便你不是團隊中的產品創造者(工程師、設計師、產品經理),也應該了解如何創作原型以及相關測試。理由在於在創作原型的過程中,你能更了解產品的使用場景以及互動邏輯,並從中挖掘產品核心價值。

對於不是設計師或是工程師的人而言,看到百花爭鳴的原型製作工具這麼多,不管從 Axure 、 frame.js 、Quartz Composer 甚至是最近很熱的 Form ,每個似乎都有一定的學習成本,讓人還沒踏出第一步就在心中打起了退堂鼓。

而在這裡,我想分享使用每個 Mac 使用者都會用 Keynote 簡報工具,來創作你自己的原型,讓你可以像做簡報一樣輕鬆地做出還不錯的原型。

為什麼使用 Keynote

在教學開始之前,我們先來討論為什麼在這麼多原型工具中,我要介紹 Keynote 以及使用 Keynote 做原型的侷限在哪裡,讓大家了解 Keynote 並不是做原型的賢者之石,而是你的入門磚,在不同的情境底下你還是需要去學習其他更高階的工具,甚至是直接學習透過程式做原型。

Keynote 的優點

  • Mac 用戶幾乎都擁有
    近期的 Mac 用戶通常能免費取得 Keynote ,不需要額外花費金錢買軟體。
  • 操作簡單
    iWork 系列軟體設計簡單,對於新手來說十分好上手,而你只要會做 Keynote 簡報,你就會做 Keynote 原型。
  • 提供基本的鋼筆與形狀工具
    對於沒有繪圖軟體的使用者來說, Keynote 提供了最基本的繪圖工具,方便你話基礎的介面。
  • 能輕易做出驚艷的動畫效果
    借助於 Keynote 獨有的瞬間移動( Magic Move),能很簡單快速做出漂亮的互動動畫。

Keynote 的侷限

  • 沒有辦法做複雜流程的原型
    由於缺乏變數、狀態管理,你要做出根據使用者輸入的內容而產生不同互動的高保真原型很困難,像是上傳、填入資料或是篩選資料等等,而由於 Keynote 是設計成線性展示的工具,要做分支流程很多的原型也會需要花比較多的功夫才能完成。

    線性

  • Keynote 沒有辦法使用 Gesture
    Keynote 上只有點擊的互動方式,沒有辦法在原型上提供滑動以及多指手勢等互動方式,通常只能透過播放動畫來展示「如果使用手勢後的效果會是什麼樣子」。
  • 想要在 ios 裝置上測試,需要經過較為繁瑣的前置處理
    透過 Keynote iOS 版本,我們可以直接在 iPhone 及 iPad 上直接展示我們的 Keynote 原型,然而 Keynote iOS 上因為只有 Landscape (橫式螢幕)的展示模式,因此你需要把 Keynote 原型旋轉九十度後才能在 iOS 上展示 Portrait (直式螢幕)的介面。

另外,如果你使用非 Apple 官方提供的字體時, Keynote iOS 版本會無法正常顯示,需要將文字轉為圖片後放進 Keynote 中。

protait

總和來說,如果你想做的原型是很單純並沒有複雜的流程,或是只是想展示某幾個介面過場的動畫,那 Keynote 可以滿足你的基本需求。

接下來我要帶大家做一個簡單的 Keynote iOS APP 介面原型,假設我們要做一個專門找晚上活動的 APP 叫做--「漫夜」,功能上他可以根據地點以及時間篩選活動,那麼要怎麼做呢?

完成範例

範例 Keynote 下載
旋轉後範例 Keynote 下載

準備工作

首先你要先準備一些 iOS 的 UI 素材,方便之後快速設計開發。
如果你願意付一點錢 ,我推薦你使用 keynotopia 的素材,他已經把常用的 iOS UI 做成 Keynote ,你可以直接複製貼上到自己的 Keynote 中。

keynotopia

如果你會基礎的 illustrator、Photoshop 或是 Sketch App,你可以上網搜尋 ios ui design kit,找其他設計師做好的素材包,這裡提供design+code 整理的一份資源連結

如果你什麼都沒有,那就直接打開你的 iPhone 截圖吧!
從你手上的 iPhone 找到你想要的介面截圖下來,就是一比一的介面素材,把圖片直接放 Keynote 稍作修改,看起來就會像是你自己設計的一樣。

接下來,準備些常用的 icon ,方便之後設計之用,如果你有設計軟體,你可以直接上 flaticon 下載你需要的 icon 來修改。 而這邊要介紹的是,如果新手也能快速上手的 icon 使用法-- icon font !icon font 是指本身的文字都是 icon 的字體,原本 abc 字母都轉換成一個個 icon ,只要簡單地輸入字母就可以產生 icon 。在這次的範例中,你會用到的 icon font 是 Modern Pictograms ,請預先下載好安裝到電腦上。

icon font example

最後,準備 iOS UI 的尺寸表方便設計時快速查詢,這裡我推薦 Ivo Mynttinen 所整理的尺寸表

先別急著打開軟體

在創作原型前,你應該先想好你要做什麼東西,有什麼功能以及大略的互動流程是什麼,在我之前的文章中「 像個設計師一樣設計你的 App UI」,有簡單提過要怎麼思考 APP 的介面。在這個階段,你應該要拿起鉛筆與紙分析流程以及畫草稿,想清楚你想展示 APP 的結構,以及這個原型要展現 APP 哪些部分。

在我們這次的案例中,找晚上活動醉雞本需要列舉活動給使用者,並且提供不同的篩選器幫住使用者篩選,像是地點、種類、時間…等等。

設計你第一個 Keynote APP 原型

新增檔案

首先打開你的 Keynote 並新增一個檔案選擇黑色佈景主題,因為我們要以夜晚為主題的APP,所以以暗色為主要背景。

點選右邊的 文件 > 幻燈片大小 > 自定幻燈片大小…,將投影片設為 iPhone 6 大小:750 x 1334 ,此時你的投影片看起來應該會像是一個 iPhone 的長方形。

Set your slide size as iPhone 6

製作狀態列與導覽列

接下來讓我們設計我們的主頁面吧!
首先先從你下載的素材或是截圖中放上 iOS 的 Status bar ,並且畫一個大小為 750 × 88 的 Navigation bar ,並把背景設定為你喜歡的顏色,我這邊使用的是 #FB0D60 桃紅色,並且在 Navigation bar 上輸入 Helvetica Neue、44px 的白色標題,最後在 Navigation bar 上加上陰影。

Create Navigation bar and Status bar

加上活動篩選器

我們要在導覽列的右邊加上一個地點的 icon 來作為打開地點篩選器的方式,這個時候剛剛介紹的 icon font 就可以派上用場了!打開你 Mac 裡頭的 字體簿(fontbook) ,找到剛剛安裝的 Modern Pictograms 點選地點 icon 複製,再到 Keynote 貼上,選擇 格式 > 字體 > 中空字 就可以把 icon 做成空心的,並且調整一下樣式,放到合適的位置。

icon font

接下來要做時間篩選器,再畫一個大小為 750 × 86 並且底色為 #262725 的長方形,並且畫上 #929691 透明度 50% 的三角形,放上 Helvetica Neue 30px 細體的時間標記,再用線條工具畫出時間刻度,最後再幫篩選器加一點陰影,陰影的數據如下:

shadow info

完成後應該長成這個樣子:

time selector done

加上活動列表

接下來要加上活動內容,我這邊為了製作方便,使用活動通上面活動內容與圖片貼過來,請注意上面的活動內容歸活動主辦人所有,請勿使用上面的資料於正式產品上。

在這邊感謝我用於示範的活動主辦人:

將圖片貼上後稍微旋轉 10 度讓圖片看起來更為活潑,但是傾斜的圖片沒有辦法好好對齊做成一個列表,所以我們要用遮罩把圖片剪成排列整齊的長方形。先畫一個大小為 750 × 320 的長方形蓋在圖片上,並同時選取圖片與長方形,選擇菜單上的 格式 > 影像 > 以所選範圍進行遮罩 ,此時圖片就會剪裁成我們想要的樣子了。

clip image

接下來我們要在圖片上加上活動資訊,為了要讓文字更為明顯,我們在圖片上加上漸層半透明黑色方塊,漸層為黑色從透明度 0%到80%。

gradient block

最後再加上標題與時間,時間的 icon 如之前地點 icon 製作的方式,直接從字體簿複製過來調整就可以了,完成後如下圖:

list done

製作地點篩選器效果

我們完成了第一頁的靜態圖,但是還沒有做互動效果,首先我們要做地點篩選器的互動動畫。 複製剛剛做好的首頁到第二頁,並做一個半透明的 750 × 750 正方塊作為地點菜單並放上縣市選項,把菜單複製一份到第一頁,但移到投影片上方外,如下圖所示:

location selector

再來我們來加上動畫效果吧! 點選第一頁投影片並且選右邊的 動畫效果 > 加入效果 > 瞬間移動,這樣從第一頁到第二頁時就會有菜單滑入的效果了。而我們想要點選地點 icon 時進行換頁,所以要在 icon 上加個連結到第二頁上,同時在第二頁的菜單上也加一個連結回到第一頁,同樣第二頁投影片也要加上瞬間移動效果。

magic move

在 icon 上右鍵開啟選單後點選加上連結來添加物件的點擊互動。

hyperlink

製作時間篩選器效果

一樣將第一頁首頁複製一份,並且調整排版為下圖的樣子,並在 20:00 加上連結回第一頁,而第一頁的 19:30 上加上連結到剛剛複製的頁面。動畫的部份透過瞬間移動的效果會自動幫我們完成,之後我們就可以透過點選時間來移動刻度以及刪減活動內容了。

製作活動細節頁面

我們想要點擊第二個活動項目時,可以進入第二個項目的說明頁,所以我們要來製作活動說明頁面。首先請將每一頁的第二個活動的圖片重置遮罩並將圖片移至最後。

reset

接下來複製一份第一頁來製作活動說明頁。 先把不相干的活動與時間篩選器移動到畫面外,並且把地點篩選器給刪掉,如此一來,在過場的時候這些不相干的項目就會移動出畫面外或是消失。

move

接下來我們把圖片角度調正,並且把它放大放在畫面的中間,同時也調整黑色漸層半透明遮罩的大小,調整完圖片後再加上更多的細節資訊,像是地點、評級以及敘述等等。

desc

接下來我們先來加上返回鍵,請用形狀工具話兩條白線組成箭頭放在導覽列,並把導覽列的標題改成活動內容

back

最後再把頁面連結加上去,讓點活動項目可以跳轉至活動頁,而點返回鍵則回到主頁。

link

如果你只是要在電腦上展示的話,你已經完成你的原型囉!你可以拿著這個原型去詢問使用者的意見。

在 iOS 裝置上展示原型

如果想要在手機上實機展示的話,你需要:

  1. 將 icon font 轉為圖片
    由於 iOS 是沒有辦法安裝字體,也因此手機上會沒有我們所使用的 icon ,我們必須先把裡面的 icon 全部換為圖片才能在手機上正常顯示。如果你有 illustrator 可以直接把 Keynote 中 icon 複製到 illustrator,再從 illustrator 複製回 Keynote ,此時 icon 就會轉為圖片。如果你沒有繪圖工具的話,也可以把 Keynote 裡頭的 icon 截圖後再貼回去。
  2. 將投影片旋轉 90 度

    rotate issue

    由於 Keynote iOS 版本只能以 landscape 展示並無法直立展示,所以我們必須要把整個投影片旋轉 90 度,想必讀者想到「這麼多的物件要自己手動一個個旋轉」就頭昏了吧!

幸運的是,我參考了ericallam提供的腳本,做了一個轉換程式,讓你的 Keynote 自動幫你轉換! 使用方法為把你的 Keynote 檔案拖到 keynote rotate for ios 轉換程式上,Keynote 便會開始慢慢旋轉你的投影片。

script

學習了如何使用 Keynote 創作 APP 原型以後,再也不擔心下次做原型要怎麼辦了呢!趕快一起來做一個 APP 原型看看吧!做完以後可以在下方討論區分享你的作品,跟大家一起討論喔!

Reference

Cover photo by Paul, CC License.


本文由Conversion Lab特約作者Lucien撰寫,未經許可請勿轉載。原文連結

LC

Lucien Lee/鹿尋
畢業於商學院,但不甘於停留在商業思考,跑到電腦科學裡頭研究 Human Computer Interaction ,遊走在設計、資訊以及商業領域之間。 我相信設計的過程最重要的是原型(Prototyping),去驗證去實踐想法的過程才能讓設計真正與現實接軌,而社會最基礎的創新來自於打造(Crafting),唯有像個工匠直面面對自己的產品,才能創造實質的價值給這個社會。 曾為 HackNTU 共同創辦人、網路及平台服務程式設計課程講師、阿里巴巴集團互動設計師。 更多Lucien的文章請見部落格 Self Efficacy 以及 Let’s make things

特約邀稿
  • Wang Han-Yu

    太強惹吧!!