跟「拜拜基本款」學做資訊圖表!圖解複雜的祭拜流程,你會怎麼做?

跟「拜拜基本款」學做資訊圖表!圖解複雜的祭拜流程,你會怎麼做?

經理人 Managertoday
https://bnextmedia.s3.hicloud.net.tw/image/album/2019-04/img-1554954597-12894@900.jpg
逢年過節或想尋求心靈平靜時,多數人可能會想到「拜拜」。不過,要拜什麼、怎麼拜、在什麼時候拜、有哪些禁忌,很多人不清楚;這次或許問了家裡長輩怎麼拜,但下次祭拜時可能就忘了⋯⋯。
(本文出自《經理人月刊》2019 年 3 月號,封面故事:圖解力) 逢年過節或想尋求心靈平靜時,多數人可能會想到「拜拜」。不過,要拜什麼、怎麼拜、在什麼時候拜、有哪些禁忌,很多人不清楚;這次或許問了家裡長輩怎麼拜,但下次祭拜時可能就忘了⋯⋯。 2018 年初,出現了「拜拜基本款」網站,一次解決這些問題。「我覺得應該要有人統整這些資訊,」網站設計公司版塊設計創辦人李明指出架設網站的初衷。 重點明顯、內容易懂,讀者才願意看下去 2015 年,李明成立版塊設計,8 成案件以接顧客的網站設計為主,其餘則是做非營利案件,保留設計的自由。不論做哪一種,資訊清楚、內容易懂則是不變的核心。 李明表示,現代人手邊資訊很多,有太多東西要看,以至於分配給每個資訊的時間變得很少。無論是網站、圖表,還是海報、文宣,最重要的就是要「吸睛」,吸引到對方的目光後,更要短時間讓讀者知道主題是什麼,快速理解整件事情的脈絡, 「重點明顯、易懂、能快速理解,這3件事先做到,才會有後續。」 「拜拜基本款」是版塊設計討論度最高的專案,「2018 年有一半以上的案子,都是因為這個專案來的。」 只是,客戶的專案不一定適合這些特殊設計,而網站要能夠吸引人,也不能只靠特效或吸引人的視覺發想,還是要靠內容打動使用者, 「主題要引起共鳴,回到大家身邊的事。」 綜觀版塊的非營利專案,從婚姻平權、競選文宣設計,再到拜拜指南,都是攸關民生與政治,才能帶動討論。 鮮明特色當視覺主軸,再逐層調整架構 「資訊圖表只是一張圖,但網站的範圍可能是 100 張圖。」當資料呈現的版面更多更廣, 鮮明的主軸與特色 更顯重要,才會讓使用者留下深刻印象。因此,做每個專案時,版塊團隊會先找出客戶或主題的特色,把這些特點拉出來,轉化成可以做視覺、玩動態的效果。 以「拜拜基本款」為例,他們一開始就決定用一尊神像作為網站的最大賣點(主視覺),「網站的形式太多了,先確認網站最開始吸睛的地方,剩下的細節後面再調整。」 拋棄直覺式發想,挖掘更多有意義的圖示 「做網站這件事情,像是在幫客戶想怎麼宣傳。」 當客戶找上門有兩種情況,一是資料太多,必須篩選才能找到宣傳重點;二是資料不夠,必須不斷來回溝通、討論。 以 2018 年 4 月接到時代力量案子為例,在接洽的時候,時代力量只有企業形象識別系統(CIS,corporate identity system),連提名人、政見等細節都還沒確定,版塊等於是在幾乎沒有資料的情況下,要完成一個網站。 當手邊沒有太多資訊可以參考時,就必須不斷提問,釐清網站的方向與目的,才有辦法發想架構、視覺。時代力量架設競選網站的目的是想吸引年輕人的注意,目標族群鎖定在 20 至 40 歲;再來,他們想強調人海戰術,傳遞「不用擔心返家投不到時代力量候選人」的訊息。 李明指出,當討論到想傳達「全台灣都有候選人」概念時,他腦中浮現的是台灣地圖的視覺,「是不是可以在看完名單後,剛好帶讀者繞台灣一圈?」一有想法,他當下就提出這樣的視覺特效,「其實我們腦中都會有很多想做的 layout(版面設計),只是在找適合的時機丟出來而已。」 透過提問釐清網站必須放入哪些內容,就可以繪製網站架構圖。以時代力量來說,他們想在網站裡露出政黨的「核心政策」及「候選人概況」「募款資訊」等訊息,卻又希望網站不要太「深」,使用者只要滑動滑鼠,就可以瀏覽完網站的所有內容,不用不斷點擊、進出網頁。接著,按照架構圖逐一討論細節,例如確認核心政策的數量、重點,才有辦法進一步發想視覺。 有趣的視覺往往比較容易讓人記得住,但要如何做到「有趣」?答案是拋開直覺。 「用直覺意義會讓看的人覺得無聊,我希望看的人看到這些東西,可以想到它背後的意義。」 李明說,他習慣用第二層意義作為視覺元素,例如,「守護勞工連線」政策的視覺是西裝筆挺的人戴著一頂工地帽,而不是一般直覺想到的脖子掛著毛巾、穿無袖汗衫的工人。 李明非常在意網站的畫面、按鈕或圖像等是否具有意義,「我覺得好看的圖大家都做得到,但還是要帶點趣味、注重細節。」 這樣的理念讓成立僅 3 年的版塊設計,不僅以歌手 9m88《九頭身日奈》專輯官網得到德國設計界最高榮譽的獎項「德國設計獎」(German Design Awards),其他專案也得到 iF 設計獎等國內外大獎。 兩階段梳理資料:先篩選資訊呈現數量,再逐一蒐集內容 版塊設計創辦人李明認為,網站繪製的過程其實與製作圖表沒有太大差異,只是守備範圍更廣,共包含了動態、平面、視覺。下圖以「拜拜基本款」為例,說明網站的製作流程。 前置期 1. 競業調查 確認主題後,先觀察有沒有人做過、思考如何做出差異。 2. 目標與對象 目標族群鎖定在20∼35歲的創業者與家庭、評估網站效益。 3. 資料略查 大略查詢與主題相關的資料數量,若太過複雜,就先取捨內容。 4. 確認做法 找出網站的最大賣點,網站入口以神明廳開場,作為網站的主視覺。 執行期 5. 蒐集資料 針對要做的內容蒐集資料,即確定每個節日要拜誰、幾點拜、怎麼拜。 6. 找參考資料 為視覺找素材、確認風格,選擇閩南地區最普遍的神明媽祖。 經理人月刊第 172 期 7. 線框稿(wireframe) 畫出網站的雛型,先不用放正確的資訊。 經理人月刊第 172 期 8. 設計稿 結合參考資料與線框稿,先做一小部分確認風格,如果方向正確,再全部做完。 經理人月刊第 172 期 網站設計3心法 心法 1 不只要多看其他網頁,更要參考使用其他網站的經驗,確認這些動態、視覺手法是否能實現,可以用在哪些案子,作為素材資料庫。 心法 2 資訊圖表與網站的共同要素很多,但最重要的是吸睛度。得到關注後,要讓人馬上理解主題、看懂資訊,不要放太多細碎文字在圖表上。 心法 3 「你的不小心,客戶都看的到。」版面上的每個視覺元素都要有意義,不要認為沒有人會在意細節,心存僥倖偷工減料。 經理人月刊第 172 期 李明 1989 年生,實踐大學媒體傳達設計系、台北藝術大學新媒體藝術研究所肄業,現為版塊設計創辦人、流石五金選物共同創辦人。