版型與客製化

「可以改」和「改得動」是兩回事

幾乎所有廠商都會說版型可以調整。但「調整」的範圍差異極大，從只能換顏色，到整個版面重新排列都叫調整。

發包時把界線問清楚，可以避免上線後才發現想改的地方改不了。

調整程度的四個層級

套版通常只到 L2，模組化可以到 L3，客製設計則本來就是 L4。

洽談時的實用問法：「如果我上線後想把首頁的服務區塊移到案例區塊上面，可以嗎？要另外收費嗎？」——這一題的答案會直接告訴您架構的彈性。

常見的調整需求與難易度

通常沒問題

• 更換配色為企業標準色
• 更換字體
• 調整 Logo 大小與位置
• 增減選單項目
• 調整首頁各區塊的順序
• 更換首頁主視覺的圖片或影片

視架構而定

• 新增一個原本沒有的區塊類型
• 改變產品列表的呈現方式（列表改成卡片、三欄改成兩欄）
• 調整內頁的版面結構
• 增加後台可管理的欄位

通常等於重做

• 整體視覺風格轉向（例如從簡約改成華麗）
• 導覽邏輯改變（例如加入多層次的側邊選單）
• 新增大量的動態與互動效果

為什麼有些調整特別貴

價格反映的是工時，而工時取決於牽動的範圍。

換一個顏色只影響樣式；但把「三欄產品列表」改成「兩欄加大圖」，會連帶影響手機版排列、圖片尺寸規格、以及既有圖片是否需要重新裁切——一個看似簡單的改動，可能牽動數十個頁面。

這也是為什麼結構調整最好在設計階段就決定。設計稿確認後才要改版面結構，成本會高很多，因為程式已經照該結構寫了。詳見設計階段怎麼進行。

上線後還能改嗎

可以，但分成兩種：

• 內容與圖片更換——後台自行完成，不另計費
• 版面重新設計——另行報價

實務上不少公司是每隔幾年做一次局部改版，而不是整站重做——例如只重做首頁、或只調整產品呈現方式。這比整站翻新省得多，也不會影響既有的搜尋排名。

保固與維護涵蓋哪些改動，見保固與維護有什麼不同。

發包前建議問清楚的五件事

1. 哪些部分我可以在後台自己改？
2. 區塊的順序可以調整嗎？可以增減嗎？
3. 如果日後想加一個新的區塊類型，需要重做嗎？
4. 設計稿確認後想改版面結構，怎麼計費？
5. 上線後想局部改版，是重做還是可以延用既有架構？

第三題與第五題特別能看出架構的彈性——答案是「要重做」的架構，等於把您鎖在當下的決定裡。

一個實務建議：不要為了省錢硬改套版

常見的錯誤是：挑了便宜的套版，然後不斷要求調整，最後累積的調整費用超過一開始選模組化的價格，而且成果還是有各種將就。

如果您已經知道自己有明確的調整需求，一開始就選彈性足夠的方案，比事後一直加錢划算。 規劃階段把需求攤開來討論，見網站要規劃哪些單元。

客製設計的價值在於「不受限制」

套版與模組化能做的效果，是既有的那些。客製設計的差別在於：想得到的表現，都可以為您的品牌重新設計。

以下是常見的視覺表現方式，以及各自適合什麼情境。

常見的動態與互動效果

滿版影片首頁

影片作為第一印象的主體，搭配大字標題，訪客一進站就被畫面留住。

適合：有實景、有製程、有空間可拍的行業——餐飲、旅宿、建築、製造、觀光。
要注意：影片檔案大小會影響載入速度，需要壓縮與適當的載入策略；手機版通常要另外處理，不能直接播放大檔。

視差滾動

不同層次的元素以不同速度移動，創造空間深度。

適合：想營造沉浸感的品牌敘事。
要注意：過度使用會讓閱讀變得吃力，也可能造成部分使用者不適。建議用在敘事段落，不要整站都用。

數字動態

營業年資、服務客戶數、實績數量，以動態累加呈現。

適合：有具體數字可說的公司。這是最有效的信任建立方式之一——具體的數字比形容詞有說服力得多。

進場動畫

內容隨滾動優雅浮現，讓瀏覽過程有節奏感。

適合：幾乎所有網站，是最泛用的效果。
要注意：動畫要快、要輕。等待內容浮現超過一秒就會變成阻礙而非加分。

互動元素

滑鼠跟隨、懸停變化、可操作的圖表與地圖。

適合：想展現細膩度的品牌。
要注意：手機沒有滑鼠，這類效果需要另外設計替代方案。

全螢幕視覺敘事

一屏一個重點，像簡報一樣帶著訪客走完品牌故事。

適合：需要循序說明的品牌或產品。
要注意：內容量必須夠精煉，塞太多字反而破壞節奏。

深色模式與品牌配色系統

完整的色彩規劃，不只是換個顏色——包含主色、輔色、語意色，以及深淺兩套。

適合：重視品牌一致性、或內容以視覺作品為主的行業。詳見網站配色與品牌識別怎麼定。

多語系的排版處理

這一項容易被低估。中文的字距、斷行與重心，和英文完全不同——同樣的版面，中文排起來緊密，英文排起來鬆散，字數落差也大。

真正的多語系不是把版面翻譯一次，而是為不同語言的字距與長度重新調整。這是客製設計與套版最明顯的差距之一。

效果不是越多越好

這一點值得說清楚。動態效果的作用是引導注意力與建立品牌感受，不是展示技術。

常見的過度使用問題：

• 每一個區塊都有進場動畫，滾動起來像在等紅燈
• 滑鼠移到哪裡都有反應，反而讓人不知道哪些能點
• 載入動畫太長，訪客還沒看到內容就離開
• 手機上效果被關掉一半，變成殘缺版

好的做法是：選定二到三種主要效果貫穿全站，形成一致的節奏感，而不是每一頁都用不同的花招。

效果與載入速度的取捨

動態效果需要額外的程式與素材，會增加載入時間。而使用者對慢的容忍度很低，尤其在手機上。

處理原則：

• 首屏的內容優先載入，效果延後
• 影片壓縮、圖片使用適當格式與尺寸
• 手機版簡化或替換掉負擔重的效果
• 效果要能「優雅降級」——在條件不足時退回靜態呈現，而不是壞掉

設計與實作要同一個團隊

這些效果需要的不只是設計軟體，還需要能把設計精準實作出來的前端能力。

如果設計與程式是不同團隊，最常見的結果是設計稿被打折。 設計師畫了視差敘事，工程師做成單純的滾動；設計師設計了互動圖表，最後變成一張靜態圖。您確認的是 A，拿到的是 B。

發包時值得直接問：這些效果是誰做的？設計和前端是同一組人嗎？

費用怎麼算

客製設計沒有統一價格，因為工作量取決於要的表現程度。主要的影響因素：

• 版面種類數量——需要幾種不同結構的版面，比總頁數更影響工時
• 動態與互動程度——單純的進場動畫，與整站的視差敘事，差距很大
• 影片與素材製作——是否需要協助拍攝影片、產品攝影、3D 示意圖
• 多語系需求——每個語系都需要重新調整版面與字體排版
• 品牌識別的完整度——已有完整品牌規範，或需要一併規劃視覺系統

報價的看法見網站架設費用怎麼算。

配色不是挑喜歡的顏色

網站的視覺風格若與企業形象不一致，會讓訪客感到違和——精密機械公司用粉嫩色系、兒童教育機構用深黑色調，都會產生認知落差。

配色與字體的選擇，應該從品牌想傳達什麼、客戶是誰反推，而不是從個人喜好出發。

先確認品牌既有的規範

如果公司已經有 Logo 與標準色，網站應該延續，不要另起爐灶。開始設計前請準備：

• Logo 的原始向量檔——放大不會失真的檔案格式。只有一張從舊網站另存的小圖是不夠的
• 標準色的色碼——如果只有印刷用的色票，需要轉換成螢幕用的色碼
• 既有的應用範例——名片、型錄、招牌，讓設計師理解品牌的既有調性

如果這些都沒有，那網站設計其實是順便建立品牌視覺系統的機會，值得在這個階段一併規劃。

一套完整的配色系統包含什麼

不是挑一個顏色就結束。實務上需要規劃：

其中中性色最常被忽略但用量最大——網站上大部分的面積是文字與背景，這幾階灰的選擇直接決定整體質感。

色彩對比要足夠

淺灰字配白底看起來很有設計感，但在手機戶外使用時可能完全看不清楚。年長的訪客更明顯。

建議原則：

• 內文與背景要有足夠對比，這不只是照顧特定族群，對一般使用者的閱讀體驗也有幫助
• 不要只用顏色傳達資訊——例如「紅色是缺貨」，色覺障礙的使用者會看不出來，應同時加上文字或圖示
• 重要按鈕要明顯——「聯絡我們」「立即詢價」這類行動按鈕，對比不足會直接影響轉換

公部門與特定產業的網站另有無障礙法規要求，需在規劃階段確認。

字體的選擇

中文字體的現實限制

中文字數多，字型檔案比英文大得多。整套中文字型可能達到數 MB，直接載入會明顯拖慢網站。

處理方式：

• 使用系統內建字體——載入最快，但各裝置呈現略有差異
• 使用網頁字型服務——外觀統一，但需注意載入策略
• 標題用特殊字體、內文用系統字體——兼顧特色與速度的常見做法

字體數量要克制

建議整站不超過兩種字體：一種給標題、一種給內文。超過三種通常會顯得雜亂，而且每多一種就多一份載入負擔。

字級與行距

中文的閱讀舒適度很依賴行距。行距太緊會讓長段文字難以閱讀，尤其在手機上。這是設計稿階段就該確認的細節——看設計稿時請特別留意內文區塊，不要只看首頁主視覺。

依行業調整視覺調性

不同產業的訪客期待完全不同。設計的第一步永遠是搞清楚「誰會看這個網站，他在意什麼」：

• 醫療、診所——要讓人安心，通常偏向明亮、乾淨、留白多
• 法律、專業服務——要讓人信服，偏向穩重、對稱、深色系
• 建材、工業——要讓人快速找到規格，資訊密度可以高，重點是清楚
• 精品、觀光——要讓人嚮往，視覺占比大，文字精簡
• B2B 形象官網——決策者可能是主管或老闆，要能在會議上被打開來看

深色模式要不要做

深色模式不是把顏色反過來就好——需要重新調整對比、陰影、圖片處理，等於多一套配色系統。

建議做的情況：內容以視覺作品為主、目標客群偏年輕、或品牌調性本身偏深色。
可以不做的情況：一般企業形象網站，多做一套的成本與效益不一定成正比。

怎麼跟設計師溝通風格

形容詞很難執行。「要簡約大方」「要有質感」對設計師來說資訊量幾乎為零。

比較有效的做法：

1. 提供兩三個您喜歡的網站，並說明喜歡它哪裡——是配色、留白、字體，還是動態感
2. 提供不喜歡的例子，排除法往往比正面描述更精準
3. 說明使用情境——「客戶通常是在會議中用投影機打開」跟「客戶多半在通勤時用手機看」，設計方向完全不同

詳細的溝通方式見設計階段怎麼進行。

便宜的版型，成本可能在別的地方

網路上有大量免費或極低價的網頁版型，看起來能省下設計費。但這些版型的來源與授權往往不明確，用在商業網站上有兩類風險：法律風險與安全風險。

實務上我們看過的狀況是：網站上線一段時間後，無故被植入廣告、惡意程式，或藉由程式漏洞被竊取資料——尤其是購物網站的會員資料。最後只能重新製作，原本想省的錢反而多花好幾倍。

授權的問題

免費不等於可商用

「免費下載」與「可用於商業用途」是兩件事。常見的授權限制包括：

• 僅限個人非商業使用
• 可商用但須保留原作者標示
• 可商用但不得再散布或轉售
• 單一授權——只能用在一個網站，不能重複使用

使用時未遵守授權條款，即使是無心，仍可能面臨權利主張。

版型不能轉賣

購買的網頁版型若後來不想使用，不能轉賣給第三方。圖庫素材也一樣——授權對象以原受權人為主，關係企業或個人都無法接受轉授權。

如果公司整體轉讓，所使用的素材授權是否隨之移轉，需依轉讓合約中的標的物範圍而定。

版型內含的素材也有授權

容易被忽略的一點：版型示範用的照片、圖示、字體，往往有各自的授權。版型的授權不等於裡面所有素材的授權。 拿到版型後直接沿用示範圖片，是常見的侵權來源。

安全性的問題

來源不明的程式碼可能夾帶東西

版型不只是外觀，通常也包含程式碼。來源不明的版型可能夾帶：

• 隱藏的外部連結，指向博弈或成人網站
• 後門程式，讓他人能夠存取您的主機
• 惡意腳本，竊取表單送出的資料
• 會回傳網站資訊到不明伺服器的程式碼

這些通常不會立刻發作。可能上線幾個月後才被啟用，而您完全不會知道。

沒有更新來源

正式的版型或系統會持續發布安全性更新。來源不明的版型沒有更新管道——發現漏洞也不會有人修補，您的網站會永遠帶著那個漏洞運作。

被入侵的實際後果

• 網站被植入看不見的廣告連結
• 搜尋自己公司名稱時，出現不是自己放的內容
• 瀏覽器或搜尋結果顯示「這個網站有風險」的警告
• 搜尋引擎將網站標記為危險，恢復需要時間——這段期間的信任損失最難估算
• 若涉及客戶個資外洩，還有法律責任

怎麼降低風險

發包時要問的三件事

1. 版型的來源是哪裡？ 是自行設計、購買授權，還是取自公開資源
2. 程式碼的來源是哪裡？ 使用了哪些第三方套件
3. 素材的授權在哪裡？ 圖片、字體、圖示各自的授權狀態

願意清楚說明的廠商，通常在這方面是有把關的。含糊帶過的就要多留意。

合約中應有的約定

完整的合約會有雙向的著作權保證：業主保證提供的資料不侵害他人權利，廠商保證設計的網頁與程式不侵害他人權利，各自為自己提供的內容負責。

若合約只寫其中一方，風險就被單方面轉嫁了。詳見原始碼歸屬與著作權該怎麼約定。

自己提供素材時

從網路搜尋下載的圖片不能使用，即使是同業網站上的產品照也不行。應使用自行拍攝、或已取得授權的素材。素材準備原則見網站規劃階段要準備哪些資料。

合法取得素材的方式

• 自行拍攝與撰寫——最安全，而且最能呈現真實的樣貌
• 購買圖庫授權——注意授權範圍：是永久還是期間、可否用於哪些用途、有無數量限制
• 委託拍攝——產品攝影、環境拍攝、影片，可請廠商協助或另行外包
• 使用明確標示可商用的資源——仍需確認授權條件並保留來源紀錄

建議保留所有素材的授權證明。日後若有爭議，這是最直接的依據。

一個判斷方式

如果報價明顯低於市場水準，可以直接問：「這個價格是怎麼做到的？版型和程式是哪裡來的？」

低價不必然等於有問題，可能是使用了合法授權的商用版型、或是自有的模組化架構。但省下的成本一定有來源，問清楚來源，才知道自己承擔的是什麼。

各種製作方式的差別見套版、模組化與客製設計的差異。