為什麼蘋果發表會的Keynote這麼好看?學會這4招,你也能做出同款簡報
為什麼蘋果發表會的Keynote這麼好看?學會這4招,你也能做出同款簡報

假如把蘋果發表會比擬成舞臺劇的話,那麼貫穿全場的Keynote就是它們的劇本。

Keynote1.jpeg
圖/ 愛范兒

今天就帶大家一起解析歷屆蘋果發表會Keynote的套路,手把手教你玩轉Keynote。

懶人目錄

  • 蘋果的Keynote有什麼套路?
  • 電影級別的流暢動畫
  • 手把手教你玩轉神奇移動
  • 還有這些加分的Keynote使用技巧,拿走不謝

蘋果的Keynote有什麼套路

嚴格遵守四原則

《寫給大家看的設計書》中,設計師羅賓·威廉斯(Robin Williams)將複雜的設計原理凝煉為親密性、對齊、重複和對比4個基本原則。我們將這四個原則套入到蘋果發表會的Keynote中,幫助大家更容易梳理製作的邏輯。

  • 親密性:親密性表現在將相關的項目組織在一起,包括物理位置的相近、整體風格的統一,使其成為一個視覺單元,達到一致性。
Keynote2.png
圖/ 愛范兒
Keynote3.png
圖/ 愛范兒
  • 對齊:找一條明確的對齊線,並堅持以其為基準進行對齊,包括文字對齊、圖片對齊、元素對齊等等。
Keynote4.jpg
圖/ 愛范兒
  • 對比:透過多種方式實現有效(突出)的對比。

這一點在蘋果凸顯產品細節時能夠清楚看到,利用單獨一頁來突出放大介紹產品的細節。

Keynote5.jpg
圖/ 愛范兒

又或者是用發光的色塊來突出某個部件,用線條引出對應的資訊。

Keynote6.png
圖/ 愛范兒

或者用「拆解」的方式放大某個零件。

Keynote7.jpg
圖/ 愛范兒
  • 重複:設計的某些方面需要在整個作品中重複,重複的本質是「一致性」。

蘋果風=極簡風,不管是蘋果官網、還是發表會中使用的簡報Keynote,你都可以看到蘋果強迫症式的一致極簡設計。

1. 背景統一

從賈伯斯固定使用的深藍色漸層背景,到現在庫克常用的全黑色背景,統一的字體,大範圍的留白,我們都可以看到這種整體風格的親密性帶來的愉悅。

Keynote8.jpg
圖/ 愛范兒
Keynote9.jpeg
新建Keynote,可以在預設看到賈伯斯固定使用的藍黑漸變範本
圖/ 愛范兒

2. 居中構圖

Keynote10.png
圖/ 愛范兒
Keynote11.png
圖/ 愛范兒

3. 平鋪排列

Keynote12.jpg
圖/ 愛范兒
Keynote13.jpg
圖/ 愛范兒
Keynote14.jpg
圖/ 愛范兒

4. 字體統一

從Myriad到自己設計的San Francisco,無襯線的字體顯得更加簡潔。在iPad介紹部分,也採用了具有手寫風格的字體。

Keynote15.jpg
圖/ 愛范兒

我們還為你們整理出了蘋果發表會的一些排版「套路」:

1. 關於數據的呈現,採用各種視覺化的方式表達。

Keynote16.png
圖/ 愛范兒
Keynote17.png
圖/ 愛范兒
Keynote18.png
在2018 WWDC上用一張一千億美元的支票。
圖/ 愛范兒

而在和以往單品對比上,也用所見即所得的方式,代替了枯燥的資料。

Keynote19.png
圖/ 愛范兒
Keynote20.png
圖/ 愛范兒

2. 關於產品功能羅列,不管是現場進行Memoji Facetime,還是為了展示Apple Watch功能,把電動腳踏車搬上舞臺,都讓你所見即所得。

Keynote21.png
圖/ 愛范兒
Keynote22.png
圖/ 愛范兒

3. Slogan或關鍵點的展示,換成了各種填充背景的字體做突出展示。

Keynote23.png
圖/ 愛范兒
Keynote24.png
圖/ 愛范兒

小結:

  • 少即是多:一頁就是一個主題,主要還是要靠簡報者豐富的現場演講。
  • 所見即所得:實景操作、用更加視覺化的形式展現數據、表現功能。
  • 講一個故事:有興趣的朋友可以去翻翻《賈伯斯的魔力演講》這本書。

而除了排版風格、整體配色上的一致性,Keynote的動畫也極具表現力和感染力。

Keynote25.gif
閃亮出場的轟炸效果
圖/ 愛范兒
Keynote26.gif
順暢過渡「神奇移動」
圖/ 愛范兒

而這些動畫的實現,全靠Keynote內建的動畫效果。像是剛剛的「神奇移動」,是每次發表會的固定「嘉賓」。今天讓我們一起來看看「神奇移動」如何實現。

手把手教你玩轉神奇移動

神奇移動,官方解釋是「將物件從一張投影片移到下一張投影片的效果」。

所以在製作的過程中,需要固定一個物件。讓我們用愛范兒的logo來試一下,我們選定了愛范兒及AppSo兩個logo作為固定元素,插入到第一張幻燈片中。

Keynote27.jpeg
圖/ 愛范兒

在第二張幻燈片中改變固定元素的位置大小,並在第一張幻燈片的動畫效果上選擇「神奇移動」,匹配選項選擇「物件」,即可看到改變位置神奇移動的效果。

Keynote28.gif
改變位置的神奇移動效果
圖/ 愛范兒

同理,你還可以在第三張幻燈片中,將愛范兒單獨拿出來放大,達到改變大小的神奇移動效果。

Keynote29.gif
改變大小的神奇移動效果
圖/ 愛范兒

通過位置和大小的變化,你可以實現從整齊排列到發散的流暢效果,反之亦可。

Keynote30.gif
圖/ 愛范兒

你還可以用來聚焦某個局部,或者是放散到整體:

Keynote31.gif
圖/ 愛范兒
Keynote32.gif
圖/ 愛范兒

除了匹配物件,你還可以匹配單詞和字元,用來表示縮寫。在第一張幻燈片輸入字元,然後在第二張幻燈片進行字元的縮寫。

Keynote33.jpeg
圖/ 愛范兒

選擇按「字元」的匹配方式,就可以達到以下的效果。

Keynote34.gif
圖/ 愛范兒

神奇移動製作的要訣就是選好固定要素,設計變化規則。

除了神奇移動,在剛結束的10月發表會開頭,蘋果為我們展示了300多種形態的蘋果icon,我們也嘗試用Keynote做了簡易版的同款。

首先需要製作一個鏤空的遮罩層,然後可以在背後插入圖片或者影片。

Keynote35.jpeg
圖/ 愛范兒

你就可以製作一個像這樣的遮罩短片。

Keynote36.gif
蘋果Share You Gift廣告片
圖/ 愛范兒

同理,你可以插入多個圖片,並設定各個背景圖片的出場順序,自己做一個渲染背景的效果。

Keynote37.gif
圖/ 愛范兒
Keynote38.jpeg
圖/ 愛范兒

實際上,Keynote還有很多值得把玩的過渡動態和自訂動畫效果,透過構件出現、動作、消失以及各個構件的順序,延續的時間、出場的規則,你可以用Keynote做出非常酷炫的動畫,例如iPhone 7/Plus發佈的快閃廣告。

還有這些加分的Keynote使用技巧,拿走不謝

在我們「高仿」蘋果發表會的過程中,也為你整理一些能幫你快速製作的技巧,在實際過程中也非常實用高效,拿走不謝。

1. 自訂範本保證統一性

為了保持製作過程中的統一性,你可以預設整體風格,文字大小、固定元素也可以在右邊的樣式框裡進行預設,在使用過程中,點擊即可使用,非常便捷。

Keynote39.gif
圖/ 愛范兒

2. 快速對齊模式保證對齊性

多個元素之間的排列,都可以點擊這裡進行選擇。

Keynote40.gif
圖/ 愛范兒

3. 善用陰影,製造層次感

你可以自訂Keynote圖片的陰影功能,陰影類型中的接觸陰影可以用來展現產品與其他元素的層次感。

Keynote41.png
圖/ 愛范兒
Keynote42.png
圖/ 愛范兒
Keynote43.gif
Keynote圖片陰影功能
圖/ 愛范兒

4. 一鍵匯出影片

製作完絢麗的動態效果,你可以直接點擊匯出為iMovie,就可以保存為影片模式,分享給更多的人。

Keynote44.png
圖/ 愛范兒

今天的蘋果發表會Keynote解析就到這裡,而我們還為你找到了WWDC 2014 Keynote的復刻版,讓你看看背後的製作原理。

Keynote45.png
圖/ 愛范兒

本文授權轉載自:愛范兒

關鍵字: #Apple #WWDC
往下滑看下一篇文章
TWQR是什麼?街口支付為什麼積極擁抱、將如何改變未來支付樣貌?
TWQR是什麼?街口支付為什麼積極擁抱、將如何改變未來支付樣貌?

研究機構OMFIF指出,多樣化的支付服務雖有助於創新變革與促進數位經濟發展,但也讓支付系統呈現碎片化發展趨勢,增加銀行、金融新創、商戶與民眾的操作複雜度。以台灣為例,過去,各個電子支付業者提供的QR Code格式不一,導致商戶得擺放多個掃碼立牌,民眾很容易混淆,以及增加詐騙與交易錯誤等風險。

為解決上述問題,財金公司於2023年10月推出國家級QR Code支付標準–TWQR,透過串聯38間銀行與10家電子支付機構的方式,讓商戶只要用一個QR Code收款碼即可接收所有支付業者的付款,同時,無論民眾是使用哪一個支付App都可以一掃就通,方便、高效且安全。

看好TWQR對商戶、民眾乃至產業發展帶來的綜效,台灣電子支付領導品牌–街口支付(JKOPAY)–不僅積極響應TWQR,更透過系統調整、簡便申請步驟、多項優惠補貼、跨業(競)合作等方式推廣街口TWQR,目標是讓商戶使用街口TWQR收款服務獲得更多客源,帶動業務持續成長,提升用戶體驗,把電支產業的餅做大做強。

兩大關鍵,街口支付積極支援TWQR加速支付生態體系變革成長

根據統計,街口支付的用戶數達690萬人、合作通路數亦高達30萬家,是引領台灣電子支付市場發展的關鍵品牌,在這個狀況下,街口支付為什麼願意大力支持TWQR、將原先的競爭優勢轉換成推促 TWQR 普及的關鍵?對此,街口支付商務發展部商務長張廷軒將原因歸結為二:「支持TWQR不僅是響應國家政策,也是推動台灣支付生態體系持續進化的關鍵。」他進一步解釋,TWQR的出現讓支付業者可以將資源集中在擴展新的商戶通路,如街口支付便積極佈局非都市區市場,目標是讓電子支付日趨普及、像信用卡與現金一樣便捷易用。

張廷軒表示,街口支付目前提供三種商戶收款方案:首先是適合各類型商戶使用的正掃收款服務,不分產業與規模,商戶只要設置 QR Code立牌,民眾即可掃碼付款;其次是反掃收款服務,亦即,由商戶的POS系統進行操作,店員透過設備掃描民眾出示的QR Code收款,適合已導入POS系統的商戶使用;最後是線上收款服務,亦即,透過API串接電商與品牌官網等方式,讓民眾可以在線上選擇使用街口支付。「我們在2024年7月開始提供街口TWQR正掃收款服務,在團隊成員的努力推廣下,除某些特定場域,既有商戶與新商戶都已導入街口TWQR正掃收款服務:在門市櫃台擺放一個街口TWQR立牌,即可支援所有民眾的付款App。」

街口支付
張廷軒指出:「關於支付服務,街口針對商戶最關心的議題而發。不僅提供免費申辦加入(交易才收取手續費)服務、推出商戶手續費優惠補助方案、提供可以讓商戶一目了然所有TWQR業者的交易紀錄的一站式帳務管理平台。」此外,街口支付更領先同業、針對個人商戶推出全新撥款服務:隔天即可入帳且天天可撥款,讓商戶更彈性且靈活的調配資金。
圖/ 街口支付

不僅積極將TWQR推廣到多元場景,更致力滿足商戶需求

為服務更多商戶與民眾,街口支付於今年7月提供TWQR反掃收款服務,接下來,除由團隊成員與合作夥伴協助商戶導入該項服務,更釋出多項優惠補助方案吸引商戶與民眾了解與使用TWQR服務。

舉例來說,截至2025年12月31日,商戶只要使用街口TWQR立牌接受付款,即享跨支付機構交易(非街口支付)手續費0%優惠,若民眾是以「街口支付」App付款,商家仍可享0.5%手續費優惠。

張廷軒進一步指出:「關於支付服務,商戶最關心的議題不外乎『交易手續費高低』、『是否易於對帳』以及『能否協助創收』,因此,街口支付除提供免費申辦加入(交易才收取手續費)服務、推出商戶手續費優惠補助方案、提供可以讓商戶一目了然所有TWQR業者的交易紀錄的一站式帳務管理平台,更透過用戶(交易)回饋方案等方式協助商戶創收。」此外,街口支付更領先同業、針對個人商戶推出全新撥款服務:隔天即可入帳且天天可撥款,讓商戶更彈性且靈活的調配資金、持續擴展業務成長。

街口支付
截至2025年12月31日,商戶只要使用街口TWQR立牌接受付款,即享跨支付機構交易(非街口支付)手續費0%優惠,若民眾是以「街口支付」App付款,商家仍可享0.5%手續費優惠。
圖/ 街口支付

透過策略聯盟擴展生態體系以實踐Super App願景

街口支付作為台灣電子支付領導品牌,除響應財金公司的 TWQR標準、提供符合商戶需求的收款方案,也很重視用戶需求,因此,與不同場景的龍頭品牌合作,透過策略聯盟建置與完善街口支付生態體系,滿足用戶在支付、購物、票券、生活與金融等多元場景需求。此外,也十分重視安全防護,由跨部門團隊從用戶、資料與系統等多層次機制建置與完善安防措施,降低詐欺與洗錢等風險。

「我們的目標是打造用戶導向的在地化數位生活超級應用服務(Super App),將持續深化與跨域夥伴的合作,更好滿足用戶需求,同時,穩健朝損益兩平的方向前進。」關於街口支付的未來規劃,張廷軒如是總結。

登入數位時代會員

開啟專屬自己的主題內容,

每日推播重點文章

閱讀會員專屬文章

請先登入數位時代會員

看更多獨享內容

請先登入數位時代會員

開啟收藏文章功能,

請先登入數位時代會員

開啟訂閱文章分類功能,

請先登入數位時代會員

我還不是會員, 註冊去!
追蹤我們
蘋果能再次偉大?
© 2025 Business Next Media Corp. All Rights Reserved. 本網站內容未經允許,不得轉載。
106 台北市大安區光復南路102號9樓