怎麼參考網站版型？重點不是圖片和顏色
很多人挑版型是看首圖美不美、顏色順不順眼、範例是不是同產業。但這些在套版過程中幾乎都會換掉。真正該看的是佈局和風格，還有一件事：參考可以，照抄不行。
挑版型的時候，很多人是這樣開始的：找三、四個喜歡的網站，跟設計團隊說「我想要這種感覺」。
要是問喜歡它們哪裡，答案通常是：「這張首圖很美」「這個藍色很舒服」「他們也是做餐飲的，版面剛好」。
這三個理由，到最後幾乎都會失效。因為圖片會換成你的，顏色會換成你的品牌色，那個「餐飲版型」裡的菜色照片和店名全是假的。你看上的那個範例，套版做完之後，大概有八成不一樣。
這篇講一下挑版型該看什麼、不該看什麼，還有著作權要注意的地方。
為什麼「看圖片、看顏色、看產業」是看錯地方
範例網站（demo）上的東西，可以分成兩種：內容和結構。
內容是會被換掉的那一層：
- 首圖、內頁的照片，換成你的商品、你的空間、你的團隊
- 每一段文字，換成你的文案，長度還不一定一樣
- 主色、輔色，換成你的品牌色
- 示範的產業、店名、菜單、價目，那些只是填充用的假資料
所以「這個藍色好好看」「他們也是賣咖啡的」這種理由，參考價值很低。你真正會拿到的，是把這些全部抽掉之後，剩下的骨架。
挑版型的時候，要練習把 demo 的圖片和文字當作不存在，只看剩下的東西。
該看的第一件事：佈局
佈局就是資訊的排列方式。哪個區塊在上面、哪個在下面，一個區塊裡放幾欄，選單怎麼分類。
你在參考裡看到的佈局，說穿了就是一種資訊順序。看的時候問自己：
- 這個首頁的順序，符合我想讓客人先看到的東西嗎？如果你要主打預約，就看它有沒有把行動按鈕放在前面，而不是壓在最後。
- 它有沒有我需要的頁面類型？作品集頁、服務列表頁、文章頁，這些在參考裡看得到雛形嗎？
- 這個結構撐得起我之後想加的內容嗎？還是它只適合現在這種資訊量？
佈局決定客人進站之後的動線。這比顏色重要得多。
該看的第二件事：風格
風格不是顏色。風格是一堆細節加起來的整體感覺：
- 圓角的大小，大圓角親切，直角俐落
- 陰影的輕重，淡陰影乾淨，重陰影有分量
- 留白的多少，留白多從容，留白少資訊密集
- 字級的對比，標題和內文差很多，還是差不多大
- 線條、分隔線、按鈕的形狀
- 捲動和 hover 的動畫節奏
這些細節你多半叫不出名字，但它們就是你「一看就喜歡」或「說不上來哪裡怪」的原因。你以為自己是被那張首圖打動，其實打動你的是這一層。
舉個例子。兩個網站都號稱「簡約風」。一個是大圓角、柔和陰影、大量留白，放什麼進去都顯得溫和好親近；另一個是直角、沒有陰影、線條銳利、排得比較滿，同樣的文字圖片放進去，就變得冷靜、專業、有點距離感。內容一模一樣，氣質差很遠。
這一層大多數人看不出來，因為注意力都被漂亮的示範圖吸走了。看參考的時候，多花點時間在這裡。有個簡單的練習：把截圖轉成灰階，或者瞇著眼睛看，只看形狀和疏密。如果拿掉顏色和照片還是喜歡，你要的就是它這個風格。
著作權：參考可以，照抄不行
「參考」和「拿來用」是兩件事。
看到喜歡的商業網站，不要請廠商「做一個一模一樣的」。版面配置、視覺細節如果抄得太接近，除了有法律風險，品牌上也沒有意義：你等於花錢做了一個別人的複製品。
正確的做法是：蒐集三到五個參考，然後講清楚你喜歡它的「哪一個點」。例如「我喜歡它選單收起來的方式」「我喜歡它作品集一排三個、滑過去會放大」「我喜歡它整頁留白很多」。把這些具體的點交給設計團隊，讓他們消化成你自己的版本。
Webflow 的 showcase、可以「複製」（clone）的專案，都很適合拿來當參考。但裡面的照片、字型、圖示、插畫、文字都是原作者的。參考它的排版和做法可以，把這些素材原封搬進你的網站不行，那會踩到圖庫和字型的授權。
多個參考不能硬拼
你可能喜歡 A 網站的 Hero、B 網站的聯絡區塊，想兩個都要。這很正常，但不能直接接起來。
A 和 B 的圓角、陰影、間距、字級規則多半不一樣，硬拼在一起會東一塊西一塊，看起來就是不對勁。要讓它們在同一個網站裡像一體，得有設計師把兩邊的細節調成同一套規則。你負責挑出喜歡的部分，融合的工作交給設計師。
挑版型時，問自己這五個問題
- 把圖片和文字當作不存在，這個版型的骨架我還喜歡嗎？
- 首頁區塊的順序，符合我想讓客人先看到的東西嗎？
- 我需要的頁面類型，作品集、服務、文章這些，它都有嗎？
- 圓角、陰影、留白給我的感覺，是我要的嗎？溫和、俐落、高級，還是活潑？
- 我是想參考它的某個優點，還是想照抄整個網站？如果是後者，停下來重想。
覺得很複雜？那其實很正常
挑版型比大部分人想的更有學問。要同時看懂佈局和風格，還要判斷哪些能改、哪些改了等於重做，這是做久了才會的判斷。
對網站設計沒概念的人，看完這篇覺得難，很正常，這本來就不是你該花時間練的技能。給我們三到五個你喜歡的網站或版型，每個附一句話說你喜歡它哪裡，剩下的交給我們。
想聊聊你手上的參考？聯絡我們，剩下的交給專業的我們。