極簡風網站怎麼做才不空？留白、大圖、字少的 6 個拿捏

「我想要簡單一點、有質感的網站。」這是做網站時最常聽到的一句話。

極簡風很好看，但也最容易做壞：留白太多變成空，字太少客人看不懂你在做什麼，按鈕太淡找不到在哪裡。

我們看了幾個把極簡風做得很好的網站，整理出 6 個拿捏。每個例子都附上連結，你可以自己點進去看；網站上的照片和文字屬於各自的公司，這篇只描述版面的做法。

1. 一屏只放一個重點

ZARA 台灣官網的首頁，電腦版打開是一整面的服裝照片，品牌字樣大大地壓在照片上，角落只有一個選單圖示和幾個很小的文字連結：搜尋、購物籃、登入、協助。按右下角的箭頭換下一張。整個畫面除了照片，幾乎沒有別的東西。

這種做法的重點是：每一屏只讓眼睛看一個地方。

一般公司可以這樣用：首頁第一屏放一張最能代表你的照片，加一句話說清楚你們做什麼、一個聯絡按鈕。其他的服務、案例、公司介紹，往下一屏一屏地講，每屏一個主題。

2. 照片要統一，才撐得起留白

極簡風的網站，照片就是主角。ZARA 的照片都是專業拍攝，同一組照片的光線和色調一致。

WoodMart 版型的極簡風示範站，所有商品照都放在一樣的淺灰色背景上，角度、大小差不多，排成一排排的格子，看起來就很整齊。

要注意：留白會把照片的缺點放大。背景亂、光線不一、有的直拍有的橫拍，放在大片的白色旁邊會更明顯。商品照片要嘛統一請人拍，要嘛自己用同一個背景、同一個時間拍完。

3. 層次靠字的大小和粗細，不靠顏色

極簡風通常只用黑、白、灰加一兩個顏色，所以「哪裡是標題、哪裡是說明」要靠字來分：

• WoodMart 示範站的首屏標題又大又細，說明文字很小，按鈕是小小的黑色方塊，三者的大小差距很大，一眼就分得出來。
• ZARA 的分類頁，左邊是一排加了編號的小分類（像「01 查看全部」「02 某種外套」），中間一張很大的商品照，照片下面三行小字：新品標記、名稱、價格。

一般公司可以這樣用：整個網站只挑一套字型，標題和內文的大小拉開（例如差一倍以上），用細線、編號、對齊來製造秩序，不用一直加顏色和框框。

4. 選單可以收起來，但要找得到

ZARA 首頁看起來什麼都沒有，但點開左上角的選單，裡面是完整的分類：女士、男士、童裝，每一類底下再分外套、大衣、針織衫……一層一層非常詳細。

也就是說，極簡的是畫面，不是內容。東西都在，只是收起來了。

手機版也一樣，WoodMart 示範站在畫面最下面固定一排工具列（商店、收藏、會員、比較），不管捲到哪裡都按得到。

要注意：一般公司的網站，「電話」「LINE」「預約」這些最重要的按鈕不要收進選單裡，要一直看得到。

5. 字可以少，但不能淡到看不清楚

極簡風很容易用淺灰色的小字，看起來很高級，但對比不夠就很難讀，對長輩、在太陽下看手機的人更吃力。

國際的網頁無障礙標準規定，一般大小的文字和背景的對比至少要 4.5 比 1。灰色要深到什麼程度、品牌色怎麼調深一階給小字用，可以看〈品牌色怎麼定〉。

6. 軟體、工具類的產品頁，也可以很極簡

FormCraft（一個做表單的外掛）的官網，首頁只有三段：

1. 一條藍色的橫帶，放一台筆電，螢幕上是產品實際的操作畫面，旁邊一行大標和「示範」「購買」兩個按鈕。
2. 16 個功能，每個一個線條圖示和兩三個字的名稱，排成四排。
3. 頁尾的連結。

功能很多的產品，不一定要寫成長長的說明。先用圖示讓人掃過一遍「它能做什麼」，想了解的人再點進去看說明文件。

什麼樣的公司不適合太極簡

ZARA 可以只放照片，是因為大家已經知道 ZARA 是誰、賣什麼。一般中小企業還沒有這個條件：

• 客人還不認識你：首頁一定要有一句話說清楚你們做什麼、在哪裡、服務誰。
• 服務需要解釋：工程、裝修、補習班、診所，客人要先看懂流程、價格、資格才敢聯絡，資訊太少反而讓人不安。
• 要被 Google 找到：只有照片、沒有文字的頁面，Google 不知道它在講什麼。每個服務頁都要有足夠的文字說明。

比較好的做法是：畫面極簡，內容完整。首頁和每一屏都保持乾淨，詳細的說明放在服務頁、常見問題、文章裡。

想參考喜歡的網站做出類似的感覺，又不想太像，可以看〈參考別人的網站，學什麼、不學什麼？〉；不同風格的購物網站版型，可以看〈購物網站版型怎麼選？6 種風格各適合賣什麼〉。

正威可以幫什麼

正威網路行銷是 25 年經驗的基隆網頁設計工作室，也提供台北網頁設計與全台灣的網站服務。做網站時，你可以帶幾個喜歡的網站來，我們一起整理你喜歡的是哪些地方，再設計成適合你的行業、你自己的樣子。

想要簡單有質感，又擔心做出來太空？歡迎免費諮詢。