設計提案優化 — 用Sketch製作投影片的小技巧
相信從事產品設計的諸位苦逼設計師們在工作中肯定經常地需要進行設計提案的相關活動，又或者經常面臨突如其來的 Design Review 而措手不及。然而在那個當下，若是直接打開 Sketch, Figma 等設計工具來進行報告，往往會由於缺乏內容組織與溝通架構等原因，使得你的設計邏輯沒辦法被聽眾很好地理解，而無法達成有效溝通的目的。這也是為什麼幾乎在所有的演說、講課、產品發佈會等場合，大家都會傾向使用投影片來作為溝通工具原因，因為投影片本身就是為了滿足對聽眾溝通的需求所產生的發明。
投影片這種乘載內容的形式我覺得是個很偉大的發明，由於它先天上的形式限制，沒辦法將全部的文字內容一次性呈現，如同書本或雜誌一般，進而迫使我們在製作投影片時需要事先規劃好陳述的架構，將資訊提煉成單頁能夠迅速吸收的信息量，以及透過更多視覺化的手法來呈現內容。好的演講，往往一頁投影片只乘載一個最重要的觀點，因為如果在一頁投影片放入了過多的資訊，便失去了以投影片作為溝通工具的目的，倒不如直接寫本書或文章或許更符合你的需求。
這篇文章目的並不是要教大家如何製作投影片，只是在我現在的工作環境中，因為組織架構龐大，Dependency 很高的緣故，經常性地需要做許多簡報，無論是為了溝通產品策略、設計提案，或是 regular 的設計評審（Design critiques），甚至到部門的長期目標規劃，都是需要透過投影片進行簡報的方式來與利益相關者溝通並取得共識。其中，特別是設計方面的簡報，由於它並非單純的文字文字資訊，更重要的往往是視覺、設計上的圖像呈現，例如：wireframe, mockups。特別是針對移動裝置，由於 form factor 的差異會使得當我們需要在投影片上呈現連續的手機螢幕畫面或互動設計時，需要製作多張投影片並透過轉場動畫進行銜接，才能夠完整展示使用者滑動手機或點擊特定 CTA 之後所體驗到的介面與互動設計。
至於一些點擊的互動，當然也是能夠利用一些過場的手法，例如 Keynote 的 Magic move 在投影片上進行模擬。但這個過程不僅繁瑣且費時，相同的一組 transition 也很難被重複利用。此外，假如我們需要對介面進行修改後再更新到投影片上，這又是一個大工程。只要圖片的尺寸或者 layout 有所變動，原本設定好的 transition 就很有可能需要再進一步的微調，這對設計師而言確實是低效率，卻也不得不為之的必要之惡。
因此，為了提升我在準備這些提案簡報的效率，把節省下來的時間花在更有意義的工作上，我開始嘗試用不同的工具與方法來製作投影片，在歷經各種踩雷之後，我才總算找到了一個既能維持投影片本質的呈現方式，同時也能夠有彈性的因應介面與互動設計修改的工作流程。關鍵就在於，直接在 Sketch 製作簡報。把 Sketch 裡的 artboard 作為一頁一頁的投影片來使用，具體的操作流程是這樣的。
一般寬版投影片的比例為 16:9，而 Keynote 預設的解析度為 1920*1080，因此我會在 Sketch 裡新增多個 1920*1080 的 artboard 作為投影片的製作區域。
至於添加文字、影像與排版的過程大致上與 Keynote 大同小異，甚至還更容易操作，但 Sketch 本身並不具備投影片播放的功能，而我是透過 Sketch Link 的功能來實現。Sketch 大約是在 48 之後開始提供簡單的 prototyping 功能，which is link。使用者先選擇 artboard 上的物件，接著點擊右上角 Link 的選項，便能夠指定在點擊該物件後應過渡到哪一個頁面，並提供基本的過場動畫，其中包含 Mobile app 上經典的 Push view, Modal view, Fade-in, Fade-out 等等，這對我來說已經十分足夠了。
唯一比較麻煩的步驟在於當你第一次用這個方法製作簡報時，需要在每個頁面上設置好觸發下一頁與上一頁的物件（它可以是直觀的左右箭頭，或者用一層透明的 layer 覆蓋在 artboard 上），並且將前後的頁面彼此關聯。這點確實是用 Sketch 做簡報比較繁瑣的部分，不過一但你在第一次做好這些頁面之間的關聯順序與可點擊的物件之後，基本上它就可以成為一組模板（Template）。之後如果再有簡報的需求時，能夠一再地被重複使用與優化，算是一個先苦後甘的概念。
但是，採用 Sketch 來進行簡報對我來說最大的好處在於能夠將投影片的內容與 Prototype 的演示無縫地銜接。這是什麼意思呢？我原本就是在 Sketch 上進行主要的介面設計工作，倘若需要在 Keynote or PPT 中加入 mockup or prototype，主要有兩種方式：
- 將 artboard 輸出為 png 圖檔並複製到投影片上，接著再利用 Keynote 自帶的 magic move 模擬頁面之間的動效
- 拆分簡報與 prototype 演示的流程，報告時在兩個不同的應用程式間切換（Keynote & Flinto, Keynote & Framer）
然而無論是哪一種方式，都沒辦法同時兼顧簡報的流暢度，以及設計調整後可即時更新的彈性。而我目前所找到最符合我的需求的解決方案就是採用 Sketch 來進行簡報的小技巧，它讓我能夠在呈現完整的投影片內容同時，也展示介面設計的細節與互動流程，既不會因為在多個應用程式之間切換，而降低簡報的流暢度，我在 Sketch 上修改之後的設計又能夠即時地反映在簡報上，提升了調整設計的彈性與效率。
或許之後還能夠發現更有效率的工作流程也說不定，畢竟作為設計師不必只拘泥於產品設計本身，適時的優化工作流程與溝通方式，working process 也能成為你設計的對象。
You can’t innovate on products without first innovating the way you build them.
- Airbnb
