談懶人包設計嘗試《讓宣傳飛,臉書拼圖全教戰》

2017/10/27《讓宣傳飛,臉書拼圖全教戰》

2017/10/17 ,讓狂人飛一週年的日子

其實當初這懶人包是要在 10/17 時發布,已經想好文案並且把彩蛋丟進去了,封面的 63,628 就是當時的粉絲人數、而 1017 shares 就是一週年的日子。

在這個懶人包之前,我設計了一份在讓狂人飛中比較少數的題材:攝影

2017/09/14《為何宣傳照,怎麼拍都拍不好》

在這懶人包之中,有三個嘗試

  1. 社群素材的嘗試
    其實在《讓宣傳飛,臉書拼圖全教戰》之前,懶人包製作群就已經嘗試了很多種版型和拼法,但過去的測試主要是單圖宣傳或者圖數較少的互動貼文,而不是懶人包,因此想要嘗試這種貼文的設計:既有互動內容按鈕又能接著看懶人包知識。
    這個設計的排法是「一直三方」的設計方式,為了讓整份懶人包的視覺有跨頁的效果,所以在第一張圖刻意畫了一條線。
    但這種「一直三方」的設計,為了在閱讀上不要讓觀眾覺得突兀(又直又橫的形狀一直跳很煩),所以在後續的內容都是以極窄的比例設計,這同時也測試了觀眾對於這種貼文呈現的接受度:像是電腦呈現可能就會覺得流失了一些版面,但在手機上的閱讀體驗就好一些。
    時間是大家現在都在競爭的資源,我們盡可能的讓內容紮根、將視覺優化。多數人主要用手機在看貼文,我希望優化的是:即使懶人包用手機看,也能很舒服。
  2. 社群題材的測試
    攝影是一個專業度比較高的題材。
    不是說簡報、行銷等其他領域專業度就比較低,而是在攝影中,光是器材就會讓攝影這個領域的學習門檻提高。
    「應知而未知,通常是一篇貼文爆紅的必要條件」,我必須斟酌這個內容是否多數人能夠使用,而這些內容的實用度又夠高,而不停留在「應知且知」的內容上,所以在內容的採集上有做簡單的統計:根據大家在手機拍攝的習慣上,會發生什麼問題?
    於是內容就這樣用 coggle 畫出架構並且設計好了。針對一般社團會有的手機做基礎偏誤的講解,經由這次的成效,之後可能會對測光、其他攝影知識,甚至一些基礎後製做更淺顯的解說。
  3. 色彩計畫的嘗試
    讓狂人飛沒意外是會改識別色,不過什麼時候全改還不確定,但目前一直都在測試不同載體的顏色接受度。
    之前的顏色不是不好,高對比的配色是安全有效,但也因為目前的色彩計畫不太好融入其他顏色,所以設計彈性不夠多。
    此外就是色彩心理對於受眾的影響,即使讓狂人飛的懶人包以精彩論述為主、設計為輔,但我還是希望在視覺呈現上能對受眾更體貼。

那麼,這兩份懶人包之間有什麼關係呢?

從「一直三方」式的設計鋪陳到「臉書拼圖全教戰」,為的就是這系列第三份懶人包,會解構各式拼圖的應用:包括單篇圖文、互動圖文⋯點擊類、抽卡類、亮點類,會把過去懶人包製作群嘗試的版型及拼法,作為教材再度補充回去,這同時像是部落格時代常見的連結串連互動,別讓其他好的懶人包就此沉下去。

回歸正題

2017/10/27《讓宣傳飛,臉書拼圖全教戰》佈局全覽
主視覺的一波三折
2017/10/27《讓宣傳飛,臉書拼圖全教戰》主視覺

設計風格

拼圖教學,一開始想設計的是一般跨頁的懶人包,但後來想想單純的跨頁設計其實很無聊,不如在封面做像是拼圖的效果,其次想到拼拼圖,最後就想到用組裝的方式做設計。
一般讓狂人飛懶人包的標題字,是左下斜上的文字標題,我其實也這麼做,但我嘗試了反透視原理去做設計,順便試試 Adobe CC 2018 的新功能。在介紹拼圖原理的時候都用組裝的設計風格去設計,直到教學開始才單調了一些,但目的是為了內容的聚焦。
但從佈局全覽可以發現,每張圖的設計,我都有設置固定的邊界,絕對會齊平等寬,不會有哪個部分的視覺特別突兀或者沒有對齊的狀況發生。

2017 ZA SHARE 雜學校照片集

內容素材

作為拼圖的教材,其實是要拿已經設計好的跨頁圖文當作教材。但因為要跟前一個懶人包相呼應,所以把這期間在雜學校拍攝的照片拿來使用,而上圖這張照片是在跨頁圖文中識別度最明顯的,所以用它。

設計製作及回饋修正

拼圖教學真的很不好製作,困難在於資訊呈現要跟風格一致,又不影響閱讀效果,而且拼圖教學要手把手帶出來,其實現場講的或者拍影片可能更清楚。但我盡量將資訊分拆到可以簡單呈現,因此頁數較多。
在發布之前也找了很多人前測,確認圖文是否有看不懂的問題,畢竟跟簡報相同,「讓人一看就懂」還是最重要的。

至於,大家對拼圖最有問題的,有三個部分

  1. 拼圖的相對位置
    如果要我用簡報軟體去排相對位置,估計自己也會搞的很慢,因為很不精準,因此我在特別做了一頁相對位置圖,好讓受眾可以簡單明白拼圖在照片中的相對位置。
  2. 縮圖的空白很難處理
    如果只是單純的照著模板裁切,可以,有拼圖效果。但前提是你後續的圖片都沒有超出模板範圍,只要超出,點開圖片就會有問題,因為跨頁圖只有封面會是正常全部顯示,但內容圖通通都不是。
    所以在這篇懶人包中特別提到了「剪裁遮色片」這件事情,這是向量繪圖軟體常常會用到的手法,它很像裁切,可裁切會一去不復返,而剪裁遮色片不會。其實還是會建議跨頁拼圖不要用簡報軟體去進行,只是大多數人都用簡報軟體,對於繪圖軟體有莫名的陌生感,因此提供了兩種做法。
  3. 圖文呈現方式,是依據製作的圖文比例做決定
    有很多人以為那是可以手動調整的,並不是。圖文的顯示會依照你上傳的圖片是直的橫的方的做決定,所以想要設計哪種跨頁呈現,就要設計那種比例的圖片。

那麼,談懶人包設計嘗試《讓宣傳飛,臉書拼圖全教戰》分享就到這邊,如果大家有興趣,歡迎追蹤讓狂人飛以及分享此篇文章,另外,在12月份就會出這篇的解鎖包,因為真的很難做,所以不確定是月初月中還是月底(笑)

對這篇文章有任何問題的話,也歡迎直接留言討論喔!

以上

--

--

Syuya Fujikawa|康浚蒍
graphic design:Flying info

企業內訓講師、TEDx 講者。致力於透過跨域學習經營、底層知識建構,以不同溝通模型解決問題