一個好的網頁設計,我會歸納出三個重點:好讀、好用、不要太醜。如果你不是網頁設計師卻得做網頁,只要掌握文章提到的 3 大網頁設計的重點,你的網頁就不會太差。
這篇文章適合的對象
- 非 Web UIUX,而是其他領域的設計師
- 想架站的一般人
- 被迫做網頁專案的行銷人或pm
正式開始之前,我先說說自己跟網頁設計的關係。
我並非主修 UI/UX 的設計師,以前學的是工業設計,求學時國內並沒有 UIUX 專門學系。
我所了解的網頁設計與相關知識,是在公司被指派要做網站時,自己邊做、邊看書,慢慢自學而來,並不是「正規」的學習。
如果你很在意扎實的理論,那真的別花時間看下面的內容,而是去上國外的線上課程,比方說 Google UX Design on coursera、Nielsen Norman Group 的相關課程。
倘若你跟我的目的一致:
「管他什麼理論,我得趕緊做出一個可以用的網頁!!!」
那這篇文章,真的是我自己一路以來做網頁時的學習總和,文末我也會分享幾本網頁設計和使用者體驗相關的書單。
我的執行經驗:
- 各類型 WordPress 網站設計架設
- 電商網站/品牌形象官網/個人品牌形象網站/課程銷售到達頁
- 越昇國際、軒言文創、雷蒙三十、草根體育協會、wecan 官網
- Web Saas
- Teachify 後台 UIUX 合作
網頁設計的流程與工具
一個網頁設計的正式流程大概是這樣:
- 確定網站地圖 Sitemap
- 網頁線框圖 Wireframe
- 介面設計 UI Design
- 互動原型 Prototype
- 建置 Coding or Building

根據網站的規模、分工,流程可能會有差異,有些不用做 Prototype、有的不用 Coding 而是用一些 No-code 工具達成(比方說 Wix、Webflow、Wordpress),考量大家的場景各不相同,步驟 4&5 不會在本篇文章的討論範圍。
文章後面提到的內容,跟步驟 1~3 有關係,這也是所有網頁設計都會碰到的流程,無論你是要自架網站,或是跟外部網站架設公司配合都得走過。
網頁設計沒辦法憑空想像,以下是我實際會用的工具,這些都有免費版:
- 發想收斂工具 – 心智圖 Xmind
梳理網站地圖,以及 Wireframe 裡該有什麼細節 - 紙和筆記本
快速勾勒 Wireframe - 繪圖工具 – Figma
將 Wireframe & UI 視覺化模擬瀏覽效果,以及素材圖輸出
開始設計網頁前,先確定做網站的目的
網頁的目的不外乎 2 個,一是展現形象,二是和讀者接觸。前者適用於創意產業,後者才是大部分做網頁的真實需求。
展現形象的網站,會特別重視視覺,融入各種設計手段:視覺排版、動態特效甚至是音訊效果,希望讓人留下印象。
通常只有創意產業的公司比較適合,比方說設計工作室、廣告創意、時尚產業,用網站展現想法,想法就是他們的主力商品。
如果其他行業的公司採取這種網頁設計,我想讀者應該會搞不清楚你想表達什麼,看過就沒了。
因此,真正的網頁設計是要達成和讀者接觸的目的,促使他們展開行動,無論是留下聯絡資訊、或是下單購買。
這時候網站好不好看、有沒有創意並不是重點,而是得讓讀者願意多看幾眼、真正了解你的網頁資訊,並且做出你想要他做的事。
(當然,也不是說視覺完全不重要,如果真的醜到難以入目,讀者會選擇相對順眼的。)
因此網頁設計得滿足3個條件:好讀、好用、覺得不醜。
網頁設計怎麼讓人「好讀」
好不好讀跟視覺表現有關,會運用很多平面設計的手法,不過閱讀場域換成了發光的電子設備,此時需要調整細節,不能把設計印刷的手法完全照抄。
如果你不是設計師底,看不懂上面在講什麼也沒關係,接下來會拆解每個跟好讀有關的細節。
色彩運用
因為裝置會發光,不讓人覺得刺眼是必要的,以下列出 4 個用色注意事項。
1. 別用純黑色,善用灰階色票
大部分的網頁背景都是白色,純黑的字容易產生視覺暫留,看段落文字會有殘影。
相對的,如果你要做暗黑模式(Darkmode),背景也不要用純黑色,而是改用類似 #212121 深灰色的色票。
善用 Tint & Shade Generator,你可以得到純黑以外的各種灰階選擇。

2. 色彩對比度要夠
黑白是超強對比會造成閱讀殘影,但如果對比度不夠,讀者也很難閱讀。
想要更細節檢查自己的用色對比,推薦使用 Contrast Ratio 檢查,對比值越大越好。你的讀者如果是長輩居多,或想申請無障礙標章,一定得注重色彩對比。
3. 太亮的顏色別挑
什麼叫太亮的顏色,我的定義是彩度、明度都很高的顏色,比方說打開選色工具,最上層的飽和顏色我是絕對不會挑,這些顏色對眼睛過於刺激。

4. 色彩一致性
網頁本身要有主色,頂多額外搭配一到兩種輔色,呈現不要花花綠綠,喪失資訊傳遞的功能。
想知道怎麼挑選顏色,歡迎閱讀:怎麼挑選品牌色?3 步驟找出理想色彩
字型運用
中文網頁設計免費、可商用的字體相當有限,相關的建議有 3 個。
1. 挑選可讀性高的字體 – 無襯線體(Sans-serif)
無襯線體指的是沒有裝飾線的字體,常見如微軟正黑、蘋方、思源黑體等等。大家最常聽到的新細明體則是對照組,專業稱作襯線體(Serif)。

如果你不是品牌形象需求,在進行網頁設計時,選擇無襯線字體是最好的,因為少了額外的裝飾、稜角,簡潔的特性讓它們在小尺寸裝置也能辨識。
現今常用的網頁無襯線體你可以選擇:Noto Sans TC(思源黑體)、Gensen-font 源泉圓體。
或是付費使用如 justfont 雲端中文字型 的服務,會有更多字體可挑選。
2. 字型搭配不選超過 2 種
由於中文可選的字很少,很少網站會超過兩種以上,此建議適用於設計英文的網站(因為 Google font 就提供了多樣的免費字型選擇)。
運用超過 2 種的字型,搭配難度上升許多,不小心就會讓版面變得複雜難讀,也容易喪失品牌的一致性。
3. 字重的選擇也不要超過 3 項
字重代表的意思是字的粗細,在網頁設定中稱之為 font weight。
除了常見的粗、中、細之外,有些字型提供很細節的調整,比方說超粗、粗、中、一般、細、極細……。

雖然彈性很高,但千萬不要通通都在同一個頁面中使用,不同粗細,就如同不同的字型,越多變化,視覺表達越混亂。
我自己設計時,會盡可能壓縮到 3 種字重。
字的大小與排版
讀者看網頁的裝置很多元,不光是電腦螢幕有多種,加上不同品牌的平板、手機,很難通通都規劃,但至少一定得設計兩個版本:電腦(寬 1440px)&手機(寬 768px)。
設計上得注意的細節有 3 個。
1. 善用 H 標題
網頁設計中的 H 標題就像報紙,有頭條、次要新聞、一般新聞類似的分級,每個標題的大小會依次減少(H1最大、H6最小),形成明顯的視覺層次。
H標題不僅會幫助後續建置時,可以快速統一調整,也能讓網頁的結構分明,符合 SEO 的基本條件。
以下是我常用的設定,你可以自行調整:
電腦 | 平板 | 手機 | |
---|---|---|---|
h1 標題 | 48px | 48px | 40px |
h2 標題 | 40px | 40px | 36px |
h3 標題 | 36px | 36px | 28px |
h4 標題 | 28px/24px | 24px | 20px |
※備註 A:我不太使用 h5、h6 的標題,因為大多數的網頁內容,沒有需要細分到那麼多層級,使用預設值即可
※備註 B:統一用 px 單位,不討論 % /rem/em 等網頁專業人士才用的單位
2. 中文的內文字體 16 ~ 20px
對設計師來講,越小的文字越有精緻感,但在網頁設計中千萬不可以為了精緻感,放棄閱讀性!一般內文最小 16px 是極限,我最常使用 18px,電腦手機皆適用。
只有附註說明或是補充資訊,才適合 16px 以下的大小。
3. 字體的行距與字距
行距可設定字體大小的 1.5 倍。例如,16px 字體大小的行距應設置為 24px;字距通常設置為 0.5px 至 1px。

圖片或圖卡搭配
讀者看網頁時大多是持續往下滾動,先掃視一下有什麼重點,再決定要不要看。
圖片是一種抓取注意力和調整閱讀節奏的好方法,畢竟一直滾動的過程都是字,容易讓人疲勞。
而且假如你的圖片、圖卡如果能傳達資訊,更能幫讀者省時間就能理解頁面重點,省時間也是讓讀者覺得好讀的要點之一。
- 賣實體商品,大範圍運用「好看」的商品照,它們甚至比頁面視覺設計更重要。
- 要傳達資訊,請挑出讓人產生想像力、有代入感的照片,交織在你的頁面設計中。
詳細的挑圖方法,請看這篇文章:經營品牌怎麼挑選照片?和設計師學選圖的方法
網頁設計怎麼讓人「好用」
好用的網站跟資訊架構有關係,像是導覽分層、網站動線引導。以及適用於各種不同的裝置,有沒有響應式設計、互動選項,更細緻的體驗更可納入字體大小切換、一般與黑暗模式。
資訊架構規劃
1. 先製作清晰的網站地圖
一個網站內部會有很多的頁面,網站地圖(Site Map)就像是為這些內頁分門別類,梳理之間的關聯性。
如果你做的是單一頁面,這點可跳過;但如果是規劃整體的網站,沒有事先幫使用者梳理,你的讀者很容易在裡面迷路。
簡易版的網站地圖很單純,善用樹狀圖即可,很快速地勾勒出頁面之間的關係,也能讓你很清楚,哪些頁面要安排互動按鈕。

2. 資訊多,請放麵包屑
麵包屑適用於層級很多、內頁複雜的網站使用,一般會放在頁面的最上層,幫助讀者釐清自己正處於網站中的哪個位置,就好比地圖的定位功能。
網站結構很單純的,麵包屑就沒那麼必要。

排版設計規劃
1. 多裝置可讀的響應式設計
為不同的裝置設計不同的畫面,也要學習一些常用元件,在電腦、手機之間怎麼變動。
舉例來說,電腦版的導覽列一般都是在頂部,將所有的資訊呈現出來;切換到手機版時,導覽列會收闔成三條線的漢堡式選單(Hamburger Menu),點擊之後才會滑動選項出來。
這個部分必須自己觀察其他網頁怎麼做,才能很好的融入到自己的設計圖稿中,你可以閱讀蘋果的設計技巧指南,也可以瀏覽 Google 的 Material Design。
不過最快的,還是直接開幾個你喜歡的網站,縮放視窗觀察頁面元件如何變化。
2. 按鈕設計
和讀者互動最直接的方法,就是在頁面某些地方塞入按鈕,讓讀者看到之後,知道可以點擊,會有下一個事情發生。
按鈕會有幾個狀態:一般 Normal、滑鼠覆蓋 Hover、點擊 Active、不可點擊 Disable。
這四個是最基本的,你可以為四個狀態設定不同的樣式,幫助讀者辨別這顆按鈕能不能互動。比方說滑鼠覆蓋時,按鈕顏色會改、會變大縮小、會傾斜、會出現底線……等等,有各種不同的動態變化可以玩。
另外提一個小操作,電腦版和手機版的按鈕大小我會分開規劃。
在手機版中,我會盡量讓按鈕都是全寬的,一方面是搶眼、另一方面是更容易被按到。

3. 黑夜模式切換與字的大小切換
提供讀者自己調整喜歡的閱讀環境,是許多要滿足無障礙條件的網站會融入的功能。
不過會影響到設計的圖片素材與排版,增加製作成本,因此不是必要選項,可以自己評估要不要添加。
網頁設計怎麼讓人「覺得不醜」
不醜的意思是讀起來舒服,不代表一定要很美、很精緻,也就是說,即便不是設計、美術出身的人,也能掌握基本的設計原則,規劃出讓人覺得舒適的頁面。
運用的原則和「好讀」提到的內容差不多:色彩運用、字型運用、字的排版、挑對圖片,還有幾個推薦給你。
善用留白、簡潔比繁複好
我個人是留白的倡導者,出社會走上設計這一途,總會遇到有些老闆希望把畫面填滿,能放上越多資訊越好,這樣讀者才會看見品牌的好。
實際上,越滿的頁面,讀者只會看不到重點,反而覺得煩躁!
試想你在用手機,螢幕已經很小了,還被一堆東西占滿,你的下一步應該直接關掉或是回到上一頁吧?
留白有幾個優勢:
- 留白就像一個畫框,讀者注意力會被匯集到中間資訊處
- 你的資訊看起來一組一組的,滾動掃讀很方便
- 也因為一組一組,版面看起來整齊、有被安排過
- 當你有重點要強調時,更容易被看見
網頁設計如何留白:畫布設定、字的段落行距設定。
1. 畫布設定
網頁設計的畫面有分為兩種設計:滿版(Full-width)、最大寬度(Max-width),前者如其名,整個頁面都是你的排版範圍;後者則是頁面中有一個隱形的容器,螢幕超過容器之後,旁邊都會留白。

對於新手來說,採用最大寬度是最不容易出錯的選擇,左右會自主的留白,幫助讀者聚焦在畫面中心。
只是當讀者的螢幕很寬,超出你設定的最大寬度後,留白的幅度會有點大看起來小怪。
如果你很在意視覺張力,那麼使用滿版的網頁畫布會更理想,你設計的網頁會隨著螢幕大小縮放,這也是近代網頁設計常採用的方式(也就是說感覺會比較新)。
我自己後期做的案子幾乎都改成全版的模式,能滿足越出越大的螢幕閱讀需求。
2. 字的段落行距
除了字本身的行距之外,段落和段落之間,我一樣會留很多的空白,因為我希望讓讀者能更容易的將文字群組化。
常見的架設網頁工具所預設的段落行距,我自己認為都不夠,像 wordpress 預設的文章功能,文字都會黏再一起非常難讀。
我自己常用的數值是字的大小 x2 甚至以上(差不多是 32px or 36px)。
設定品牌規範,維持表現一致性
品牌規範是一份文件,其實就是把網站該用到的顏色、字體樣式全部收斂起來,在設計網頁的時候,盡可能只用上面的元素,讓網站的視覺保有一致的風格。
詳細的設計規範教學,歡迎參考這篇文章:製作設計規範 Design Guideline,形象經營事半功倍
或是前往下載知識包:品牌規範製作方法
了解時下的設計趨勢
讀者用網路查東西,總會想要找到最新的資料,跟上潮流趨勢的網頁設計,能讓讀者還沒看資料,光掃描你的網站時就覺得應該不會太落伍。
你可以在 Google、Pinterest 或 Dribbble 這些平台,打上「年代 + 類型 + 設計趨勢」,找到最潮的設計風格來參考,比方說「2024 Web Design Trends」、「2025 視覺設計趨勢」。
像過去網頁設計曾流行過新擬物化設計 Neomorphism、酸性設計 Acid Design、便當格式設計 Bento Design、3D Design,2024 年則是有 Y2K 復古元素、動態字體 Kinetic Typography、AI 生成風格。


結論
網頁設計的最大好處是可以動態修正,根據讀者的反饋、頁面轉化率表現或是學到的最新網頁設計知識,讓你的網頁保持活力。
假如你不只會網頁設計,更擁有後續建置的能力,頁面修調的速度會更快,盡早達到你當初做這個網頁或網站的目標。
以下推薦幾個我自學時看的內容:
- 資訊架構學:網站、App與資訊生態系統規劃
- UX從新手開始:使用者體驗的100堂必修課
- 設計的心理學:人性化的產品設計如何改變世界
- 部落格 – 嫁給 RD 的 UI Designer Akane
- 部落格 – invision 設計相關專欄與資源包
未來我也會分享一些常見的 No-Code 建置網頁的工具,幫助你不一定需要有工程師,也能實際呈現自己想要的網站,敬請期待~