（本文出自《經理人月刊》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. 找參考資料
為視覺找素材、確認風格，選擇閩南地區最普遍的神明媽祖。

7. 線框稿（wireframe）
畫出網站的雛型，先不用放正確的資訊。

8. 設計稿
結合參考資料與線框稿，先做一小部分確認風格，如果方向正確，再全部做完。

網站設計3心法

心法 1

不只要多看其他網頁，更要參考使用其他網站的經驗，確認這些動態、視覺手法是否能實現，可以用在哪些案子，作為素材資料庫。

心法 2

資訊圖表與網站的共同要素很多，但最重要的是吸睛度。得到關注後，要讓人馬上理解主題、看懂資訊，不要放太多細碎文字在圖表上。

心法 3

「你的不小心，客戶都看的到。」版面上的每個視覺元素都要有意義，不要認為沒有人會在意細節，心存僥倖偷工減料。

李明

1989 年生，實踐大學媒體傳達設計系、台北藝術大學新媒體藝術研究所肄業，現為版塊設計創辦人、流石五金選物共同創辦人。