一、功能完成後，為什麼還要調整介面？

在開發初期，我們通常會先確認功能能不能正常運作，例如新增資料、查詢病患、修改紀錄與刪除資料。

但是，功能正常不代表使用體驗就很好。

如果按鈕的位置不一致、欄位太擁擠，或是沒有提示使用者目前在哪個頁面，即使系統能正常運作，也可能讓使用者感到困惑。

今天要利用 HTML 與 CSS，為醫療資訊小系統建立更清楚的操作介面。

二、先統一頁面的基本樣式

可以在專案中新增 css/style.css：

• {
  box-sizing: border-box;
  }
  body {
  margin: 0;
  font-family: Arial, "Noto Sans TC", sans-serif;
  background: #f4f7fb;
  color: #263238;
  }
  .header {
  padding: 20px 28px;
  background: #176b67;
  color: white;
  }
  .container {
  width: min(1100px, 92%);
  margin: 28px auto;
  }
  .card {
  padding: 24px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  }
  h1, h2 {
  margin-top: 0;
  }
  button, .btn {
  display: inline-block;
  padding: 9px 16px;
  border: 0;
  border-radius: 6px;
  background: #176b67;
  color: white;
  text-decoration: none;
  cursor: pointer;
  }
  button:hover, .btn:hover {
  background: #10534f;
  }
  input, select {
  width: 100%;
  padding: 10px;
  margin-top: 6px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  }
  table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  }
  th, td {
  padding: 12px;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
  }
  th {
  background: #e8f4f2;
  }
  tr:hover {
  background: #f8fbfb;
  }

接著在 JSP 的 中引用：

使用 contextPath 可以避免專案部署路徑不同時，CSS 無法正確載入。

三、替病患清單加上清楚的版面

在 patient-list.jsp 中，可以將主要內容放入統一的容器：

這裡的 /patient/add 只是示意網址，請依照自己專案實際使用的 Servlet 路徑調整。

另外，病患資料表格如果欄位太多，可以考慮將次要資訊移到詳細資料頁面，避免清單一次呈現太多內容。

四、加入空資料提示

如果資料庫中還沒有任何病患，直接顯示空白表格會讓人以為系統出錯。

使用 JSTL 時，可以依照清單是否為空，顯示不同內容：

<c:choose>
<c:when test="${empty patients}">
目前沒有符合條件的資料。
</c:when>
<c:otherwise>

</c:otherwise>
</c:choose>

這裡假設 Servlet 已經將清單存入名為 patients 的 request attribute。

五、介面設計也要考慮使用情境

醫療資訊系統的介面不應只追求好看，還要讓操作清楚、減少誤操作。

例如：

• 必填欄位要清楚標示。
• 刪除按鈕應與一般操作有所區別，並考慮二次確認。
• 表單錯誤應顯示具體原因，而不是只寫「失敗」。
• 文字與背景要有足夠對比。
• 不應在首頁或清單中展示不必要的敏感資訊。

如果未來要讓系統在手機上使用，也要進一步調整表格的呈現方式與按鈕大小。

六、今日小結

今天透過 CSS 統一了系統的顏色、間距、按鈕與表格樣式，也加入空資料提示。

良好的介面設計能降低學習成本，讓使用者更容易找到需要的功能。

下一篇，我們要回到系統安全與錯誤處理，確認當程式出錯或收到不合理的請求時，不會直接洩漏內部資訊。