最後更新：2026/10/13
「我想要網站好看一點，可是說不出哪裡要改。」這是我們最常聽到的一句話，不管是臺北來談網站的店家，還是網頁設計課上的學員。
會這樣說很正常。好看的網站，我們一眼就認得出來，卻很少停下來想「它好看在哪裡」。我們在成人網頁設計課上，有一個單元專門練這件事：先大量看別人的網站，再把看到的東西拆成一個個可以照著做的重點。這篇把那套方法整理出來。
先從「改現成的」開始
上課時我們發現，一開始就要學員從空白頁面設計一整頁，難度太高，多數人會卡住。後來改成先「套版」：拿一個已經排好的頁面，換掉文字、圖片、顏色，在改的過程中慢慢看懂每個區塊為什麼放在那裡。等熟悉了，再複製頁面、自己重新組合。
自己改網站也一樣。與其對著空白頁面想，不如先找幾個你喜歡的網站當範本，問自己「我喜歡的是哪一部分」。
去哪裡找參考
設計參考網站集。 有人專門收集設計好的網站，依產業、顏色、版型分類。例如日本的 SANKOU!，可以照「業種・ジャンル」（產業）、「色・配色」、「書体」（字型）篩選，想看餐廳、想看藍色系的網站，點兩下就有一整排。日本網站在留白、字體排列上很細膩，很適合中文網站參考。
佈景主題和範本的展示站。 賣佈景主題、網站範本的地方，都會做一個完整的示範網站。它的好處是「整站」都看得到：首頁、關於我們、服務、聯絡頁怎麼串在一起，選單怎麼安排。
小效果看 CodePen。 按鈕的動畫、文字特效、背景效果，在 CodePen 這類分享程式碼的網站上搜尋，可以直接看到效果和寫法。
同業和不同行業的網站都要看。 同業的網站告訴你客人期待看到什麼資訊；不同行業的網站，常常能給你同業都沒想到的呈現方式。
看別人的網站，要看哪些地方
在課堂上，我們把「看網站」拆成五個重點，學員的作業也是照這五點評分：
主視覺的圖片，有沒有在講你的事。 首頁最大那張圖，要能傳達這個網站在做什麼。一張漂亮但和生意無關的風景照，不如一張店裡實際的照片。
標題和副標題，能不能讓人停下來。 人上網是在找問題的答案，標題要先回答「這裡能幫你什麼」。加上具體的數字，例如「20 年」、「3 天完成」，比形容詞更有說服力。
色彩的層次、對比、配色。 層次是用顏色深淺和陰影做出前後的空間感；對比是讓重要的按鈕、標題從畫面裡跳出來；配色則要節制，為了做層次和對比，顏色一多很容易變得又亂又雜。怎麼挑一組顏色，可以看〈網站配色怎麼選〉。
排版。 這一區是一欄、兩欄還是三欄？圖片和文字左右交錯，還是上圖下文？內容多的地方，有沒有分成好幾個小區塊？
圖片之間搭不搭。 同一頁的照片，色調、風格是否一致。一張是明亮的商品照、一張是昏暗的手機自拍，整頁就會顯得零散。
每看到一個喜歡的網站，就用這五點寫下一兩句筆記：「主視覺用人物照、標題有數字、只用黑白加一個亮色、三欄排服務、照片都是暖色調」。累積幾個之後，你會發現自己喜歡的東西有共通點，那就是你網站的方向。
好用的網站，為什麼那樣排
好看之外，好用的網站背後有一些關於「人怎麼看、怎麼選」的原則。知道這些原則，你看參考網站時就不只看到漂亮，還看得出它為什麼這樣排：
選項越多，人越難決定。 選單放十幾個項目、價目表列五六個方案，訪客會花更多時間比較，甚至乾脆離開。主選單控制在五到七項，方案三個左右，就是這個道理。
重要的按鈕要大、要近。 按鈕越大、離手指或滑鼠越近，越容易按到。手機上的「立即預約」放在拇指搆得到的地方、做得夠大，比放在頁面角落的小字連結好按得多。
靠在一起的東西，會被看成一組。 標題和它下面的說明靠近一點，和下一段之間留多一點空白，訪客不用讀就知道哪些是同一件事。長得一樣的東西也會被當成同一類，所以同一種功能的按鈕，樣式要一致。
第一個和最後一個最容易被記住。 一排選單或一串清單，人對開頭和結尾的印象最深。最重要的項目放在最前面，「聯絡我們」放在最後面，是很常見的安排。
一次給一小段。 長篇的說明切成幾個小段，各有小標題，比一整塊文字容易讀完。
做了動作，要有回應。 表單送出後要清楚寫著「已收到，我們會在一個工作天內回覆」，按鈕按下去要有變化。沒有回應，訪客會懷疑是不是壞了，然後再按一次。
還有一點常被忽略：別人的推薦。客人的評價、合作過的品牌、媒體報導，放在網站上能讓陌生的訪客比較放心，詳細的做法可以看〈網站有人看卻沒人聯絡？〉。
參考，不是照抄
看了很多網站之後，最後一步是回到自己身上：把筆記裡的重點，套到你自己的內容上。版面的排法、配色的比例可以參考，文字、照片、Logo 不能直接拿。
照片尤其要注意。我們在課堂上後來把規定改得很明確：作業一律用有商業授權的圖片，下載的時候把來源網址記下來。網站上線之後，被問到「這張圖哪裡來的」，你才拿得出證明。
還有一個小技巧：在喜歡的網站上按右鍵選「檢查」，瀏覽器的開發者工具會顯示那段文字用了什麼字型、什麼顏色、間距多少。不用懂程式，也能把「感覺」變成具體的數字。
設計靈感來自大量的觀察、筆記和比較。花一個下午認真看十個網站，你對自己網站的想法會清楚很多。
如果你已經整理出喜歡的方向，想找人把它做成一個完整的網站，可以先看〈IG 帳號不是你的資產〉想想網站要做到什麼。MIMI 專做客製化網頁設計，可以從你蒐集的參考網站開始討論，做出屬於你的版面。MIMI 提供臺北網頁設計服務，臺北的店家、創作者可以用電話、Email 直接和設計師討論；費用可以先看首頁的製作費用參考，歡迎聯絡 MIMI。
