我們一路學了這麼多 CSS、Angular Material 和 Flex Layout，現在終於要來談談大家最在意的部分了——畫面美感！不管功能多強大，如果網站看起來醜醜的，使用者肯定一進來就跑了。所以，今天我們要來聊聊設計和優化網站畫面的那些事。

但說真的，前端的畫面設計挑戰可不是開玩笑的。有時候一個字體、一個按鈕的間距沒調好，整個版面就說不出哪裡的怪，特別是當我們還在學習如何控制佈局時，常常搞得頭很大。所以今天不只要教你如何設計，也會告訴你一些常見的錯誤，讓你避開那些坑。

文章大綱：

1. 前端美感設計的挑戰
2. 元件置中的問題
3. 產品卡片設計：間距與字體
4. 程式碼集中管理
5. 避免固定長寬，改用比例排版
6. 美化與優化的心得
7. 學習設計是一條不斷進步的路

1. 前端美感設計的挑戰

大家有沒有發現，上一篇文章最後的畫面，有一些地方都還是怪怪的，這就是我們要調整的地方。

設計網站的外觀其實很有挑戰，尤其對於新手來說。以下幾個問題最常讓大家崩潰：

• 元件怎麼置中？有時候用了一堆 margin，但看起來還是歪歪斜斜的。
• 間距怎麼設計？字跟圖片黏得太近，看起來超擠，太遠又覺得浪費空間。
• CSS 怎麼管理？專案一大就發現一堆重複的樣式，維護起來超麻煩。

沒關係，這些問題我都經歷過，今天就讓我們一起來解決吧！

2. 元件置中的問題

這大概是大家最常碰到的問題之一吧！怎麼讓一個元素置中？有些人會用 margin-left 或 margin-right 來調整位置，結果在不同裝置上完全歪掉。

錯誤範例：

.container {
  margin-left: 50px;
}

這樣做只會讓你的畫面在某些螢幕上看起來還行，但在別的螢幕上根本就不居中。那怎麼辦呢？來，讓我們用 Flexbox 來解決！

正確範例：

.container {
  display: flex;
  justify-content: center; /* 水平置中 */
  align-items: center;      /* 垂直置中 */
  height: 100vh;            /* 設定容器高度 */
}

這樣你不管在什麼螢幕上看，內容都會乖乖地待在正中間。是不是很簡單！

3. 產品卡片設計：間距與字體

好，現在我們來討論產品卡片的設計。很多人會卡在「要怎麼設計合適的間距」和「怎麼讓文字好讀」這兩點上。如果間距太小，看起來很擁擠；太大，畫面又太空。還有，價格怎麼設計才能一眼抓住使用者的注意力呢？

錯誤範例：

.product-card {
  padding: 50px;
  margin: 50px;
}

這樣卡片之間的空隙太大，畫面會顯得很散，沒有聚焦感。看起來很鬆散、沒有結構。

正確範例：

.product-card {
  padding: 1.5rem;
  margin: 1rem;
  background-color: #f9f9f9;
}

用 rem 或 百分比 來控制間距，這樣隨著畫面大小變化，間距也會跟著變，感覺更自然。另外，價格部分我們也來改一下吧。

價格顯示設計

錯誤範例：

.price {
  font-size: 10px;
  color: blue;
}

這樣的設計，字太小，價格看不清楚，還用藍色顯示價格，真的很奇怪吧！大多數人看到藍色可能還會以為是連結。

正確範例：

.price {
  font-size: 1.5rem;  /* 字體稍微放大 */
  color: #e74c3c;     /* 使用鮮豔的紅色 */
  font-weight: bold;
}

這樣價格一下就跳出來，使用者一看就知道，這個產品有優惠或是價格很吸引人。

4. 程式碼集中管理

當專案越來越大時，維護性就會變得更加重要。尤其是像 Header 這種會重複出現在多個頁面中的部分，最好將它獨立出來成為一個可以重複使用的元件。這樣一來，如果要修改 Header，只需要改一個地方，所有引用這個元件的頁面都會自動更新，讓開發和維護更加方便。

接下來，我們就將原本的 Header 部分拆出來，變成一個獨立的元件，這樣其他頁面也能共用這個 Header。

4-1. 生成 Header 元件

首先，我們使用 Angular CLI 來生成一個新的 Header 元件：

ng generate component header

這會生成一個新的元件，包含 header.component.ts、header.component.html 和 header.component.css 檔案。

4-2. 將 Header HTML 拆出來

接著，我們把原本在 app.component.html 裡的 Header 部分移到 header.component.html：

header.component.html

<mat-toolbar color="primary" fxLayout="row" fxLayoutAlign="space-around center">
  <div>
    <span>毛毛購物</span>
    <button mat-icon-button>
      <mat-icon>home</mat-icon>
    </button>
  </div>
  <mat-form-field fxFlex="50%">
    <mat-label>搜尋商品</mat-label>
    <input matInput placeholder="輸入商品名稱" />
  </mat-form-field>
  <button mat-icon-button>
    <mat-icon>shopping_cart</mat-icon>
  </button>
</mat-toolbar>

4-3. 修改 app.component.html 引入 Header

在 app.component.html 裡，我們只需要引入這個 Header 元件即可，這樣讓結構更清晰。將 Header 部分替換成 app-header：

app.component.html

<app-header></app-header>

<div fxLayout="row" class="banner">
  <h1 fxFlex>本季熱銷商品！買一送一優惠中！</h1>
</div>

<div fxLayout="row" fxLayoutGap="16px" fxLayoutAlign="center">
  <mat-card fxFlex="30%">
    <mat-card-header>
      <mat-card-title>毛毛舒適床!!!柔軟透氣寵物床</mat-card-title>
      <mat-card-subtitle>$100</mat-card-subtitle>
    </mat-card-header>
    <img mat-card-image src="assets/product1.jpg" alt="產品 1" />
    <mat-card-actions>
      <button mat-raised-button color="primary">加入購物車</button>
    </mat-card-actions>
  </mat-card>

  <mat-card fxFlex="30%">
    <mat-card-header>
      <mat-card-title>(⁎˃ᆺ˂)萌萌健康糧天然有機寵物飼料</mat-card-title>
      <mat-card-subtitle>$200</mat-card-subtitle>
    </mat-card-header>
    <img mat-card-image src="assets/product2.jpg" alt="產品 2" />
    <mat-card-actions>
      <button mat-raised-button color="primary">加入購物車</button>
    </mat-card-actions>
  </mat-card>

  <mat-card fxFlex="30%">
    <mat-card-header>
      <mat-card-title>毛寶潔牙棒-天然口腔清潔零食</mat-card-title>
      <mat-card-subtitle>$300</mat-card-subtitle>
    </mat-card-header>
    <img mat-card-image src="assets/product3.jpg" alt="產品 3" />
    <mat-card-actions>
      <button mat-raised-button color="primary">加入購物車</button>
    </mat-card-actions>
  </mat-card>
</div>

4-4. CSS 集中管理

對於樣式，我們也可以將與 Header 有關的樣式放到 header.component.css，這樣不同元件的樣式就能分開管理，保持程式碼的乾淨和可維護性。

header.component.css

mat-toolbar {
  margin-bottom: 20px;
}

這樣，Header 的 HTML 和 CSS 就都被拆分成了一個獨立的元件，未來如果有其他頁面需要使用 Header，只需要在該頁面中引入 <app-header> 就可以了。

5. 避免固定長寬，改用比例排版

初學者很愛用固定的長寬值，但這樣的設計在不同螢幕上會造成很大問題，尤其是手機上，圖片可能變得太小或太大。

錯誤範例：

.image {
  width: 400px;
  height: 300px;
}

這樣在大螢幕上或許還行，但在手機上圖片會變得超級小，完全沒法看。

正確範例：

.image {
  width: 80%;
  height: auto;
}

這樣就可以根據螢幕自動調整圖片大小，讓圖片在任何裝置上看起來都很好看。

6. 美化與優化的心得

美化網站其實是一個不斷嘗試的過程，有幾點心得可以跟大家分享：

1. 保持簡單：不要塞太多元素到畫面上，簡單清爽的設計反而更受歡迎。
2. 一致性設計：字體、顏色和間距要保持一致，這樣網站看起來會很專業。
3. 持續學習：前端技術日新月異，學習新的工具和框架，會讓你的設計變得更靈活。

7. 學習設計是一條不斷進步的路

今天的內容大致介紹了如何讓畫面看起來更美觀，也討論了一些常見的錯誤和改進方式。希望這些技巧能幫助你設計出既美觀又實用的網站，讓使用者愛不釋手！前端設計就是這樣，需要不斷地學習與改進，過程中雖然會遇到挑戰，但每次看到畫面變美的那一刻，真的超有成就感！