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

(本文出自《經理人月刊》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 年生,實踐大學媒體傳達設計系、台北藝術大學新媒體藝術研究所肄業,現為版塊設計創辦人、流石五金選物共同創辦人。

延伸閱讀 \