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