一、前言

在前幾天的學習中，我們已經完成健康習慣追蹤系統的初版，並透過模擬測試資料，確認新增紀錄、歷史查詢與健康儀表板等功能能夠正常運作。

然而，一個系統除了需要具備正確的功能，也需要讓使用者能夠輕鬆理解及操作。

如果頁面資訊過於雜亂、功能分類不清楚，或是重要數據不容易找到，即使系統功能完整，也可能降低使用者的操作意願。

因此，今天的學習重點是改善 Streamlit 的網頁介面，透過頁面排版、資訊分類、欄位說明與視覺呈現，讓健康習慣追蹤系統更加直覺且容易使用。

二、今日學習目標

認識使用者介面（UI）的基本概念。

學習 Streamlit 的版面配置功能。

改善系統的標題、文字說明與導覽選單。

使用卡片式資訊呈現重要健康數據。

優化輸入表單與歷史紀錄的顯示方式。

提升整體介面的可讀性與操作便利性。

三、認識使用者介面設計

使用者介面（User Interface，簡稱 UI）是使用者與系統互動時所看到的畫面，例如按鈕、輸入欄位、選單、文字及圖表等。

以健康習慣追蹤系統為例，使用者進入網頁後，應該能夠快速找到以下功能：

新增每日健康紀錄。

查看過去的健康資料。

了解自己的喝水量與睡眠時間。

查看每週運動時間的變化。

因此，介面設計需要注意幾個方向：

1. 功能分類清楚

將新增紀錄、歷史查詢及健康儀表板分開，避免不同功能全部擠在同一個頁面。

2. 資訊容易閱讀

重要數據應該放在容易注意的位置，並搭配適當的標題與說明。

3. 操作流程簡單

減少不必要的操作步驟，讓使用者可以快速完成資料輸入。

4. 視覺呈現一致

統一標題、欄位名稱與頁面配置，讓整個系統看起來具有一致性。

四、學習 Streamlit 的介面配置功能

Streamlit 提供許多可以改善網頁介面的函式，以下介紹幾個常用功能。

這些功能可以讓原本單純由上而下排列的頁面，變成更有層次的資訊介面。

五、改善健康儀表板的視覺呈現

首先，將原本的平均喝水量、平均睡眠時間與平均運動時間，使用三欄式配置呈現。

import streamlit as st

st.title("💚 個人健康習慣追蹤系統")

st.subheader("今日健康概況")

col1, col2, col3 = st.columns(3)

col1.metric(
"平均喝水量",
"1880 ml",
help="根據目前有效的健康紀錄計算"
)

col2.metric(
"平均睡眠時間",
"7 小時"
)

col3.metric(
"平均運動時間",
"31 分鐘"
)

這裡使用 st.columns(3) 將畫面分成三個欄位，再透過 st.metric() 顯示不同的健康數據。

實際整合到系統時，應該將範例中的固定數值替換成前一天計算出的平均值，而不是直接寫死數字。

這樣使用者進入儀表板後，就能快速掌握自己的健康紀錄概況。

六、改善頁面資訊的分類

除了數據呈現，也可以利用 st.container() 和 st.expander()，將不同資訊整理成區塊。

1. 使用容器整理內容

with st.container():
st.subheader("💧 飲水紀錄")

st.write(
    "查看每日喝水量，觀察自己的飲水習慣變化。"
)

st.divider()

st.subheader("🌙 睡眠紀錄")

st.write(
    "透過每日睡眠時間，了解自己的作息紀錄。"
)

使用容器可以將相關內容集中管理，並透過分隔線區分不同主題。

2. 使用展開區塊呈現補充資訊

with st.expander("查看健康紀錄使用說明"):

st.write("1. 每天可以新增一筆健康紀錄。")

st.write("2. 可以透過日期範圍查詢歷史資料。")

st.write("3. 儀表板會根據已儲存的資料進行統計。")

這個功能適合放置使用說明或補充資訊，讓主要畫面保持簡潔，同時保留必要的操作指引。

七、改善新增紀錄表單

新增紀錄是整個系統最常使用的功能之一，因此需要讓使用者清楚知道每個欄位應該輸入什麼內容。

可以利用 st.caption() 增加補充說明，並透過 st.columns() 將部分欄位並排。

import streamlit as st

st.header("📝 新增健康紀錄")

st.caption(
"請依照今天的實際生活情況填寫，完成後按下儲存。"
)

with st.form("improved_health_form"):

record_date = st.date_input("紀錄日期")

col1, col2 = st.columns(2)

with col1:
    water_ml = st.number_input(
        "喝水量（ml）",
        min_value=0,
        max_value=10000,
        value=2000,
        help="請輸入今天的總喝水量"
    )

with col2:
    sleep_hours = st.number_input(
        "睡眠時間（小時）",
        min_value=0.0,
        max_value=24.0,
        value=7.0,
        step=0.5
    )

exercise_minutes = st.number_input(
    "運動時間（分鐘）",
    min_value=0,
    max_value=1440,
    value=30
)

vegetables_fruits = st.checkbox(
    "今日有攝取蔬菜或水果"
)

notes = st.text_area(
    "其他備註",
    placeholder="例如：今天進行散步、跑步或其他活動"
)

submitted = st.form_submit_button(
    "儲存健康紀錄",
    use_container_width=True
)

if submitted:
    st.success("表單資料已送出，請接續執行資料驗證與儲存程序。")

這裡主要調整了三個部分：

增加欄位說明，降低使用者不清楚輸入內容的情況。

將喝水量與睡眠時間並排，減少頁面過長的問題。

使用提示文字，讓使用者知道備註欄位可以填寫哪些內容。

這段程式碼是介面設計示範，實際整合時應保留 Day 25 原本的資料驗證、日期重複檢查及 CSV 儲存邏輯，並將 st.success() 放在資料確實儲存成功之後。

八、改善歷史紀錄的顯示方式

歷史紀錄如果只有原始資料表，使用者可能需要花較多時間尋找需要的資訊。

因此，可以透過欄位重新命名，讓資料更容易理解。

display_records = records.rename(
columns={
"date": "紀錄日期",
"water_ml": "喝水量（ml）",
"sleep_hours": "睡眠時間（小時）",
"exercise_minutes": "運動時間（分鐘）",
"vegetables_fruits": "蔬果攝取",
"notes": "備註"
}
)

st.subheader("📋 我的健康紀錄")

st.dataframe(
display_records,
use_container_width=True,
hide_index=True
)

透過 rename()，可以將原本偏向程式開發使用的英文欄位名稱，轉換成一般使用者更容易理解的中文。

需要注意的是，這裡只改變畫面顯示的欄位名稱，不會改變 CSV 原本儲存的資料欄位。

九、整合介面改善後的操作流程

完成上述介面調整後，可以重新檢查整個系統的使用流程：

使用者進入系統，先看到清楚的系統名稱與功能導覽。

選擇「新增健康紀錄」，依照欄位提示輸入資料。

儲存資料後，系統顯示成功或錯誤訊息。

選擇「歷史紀錄查詢」，查看過去的紀錄。

選擇「健康儀表板」，透過數據與圖表了解自己的紀錄變化。

這樣的流程能夠讓使用者從輸入資料到查看統計結果，都在同一個系統中完成。

十、今日成果與學習心得

今天的學習重點，是從使用者的角度重新檢視系統。

在前面的開發過程中，主要關注的是程式能不能執行、資料能不能正確儲存，以及統計結果是否合理。

但當系統逐漸具備基本功能後，也開始需要思考使用者是否能夠快速理解畫面，以及操作時會不會遇到不必要的困難。

透過 Streamlit 提供的版面配置、資訊區塊、欄位說明及數據卡片等功能，可以讓原本單純的網頁介面更有層次。

這也讓我理解到，系統開發不只是完成程式功能，還需要考慮實際使用者的需求。好的介面不一定需要複雜的設計，而是讓使用者能夠清楚知道自己目前在哪個頁面，以及接下來應該如何操作。

十一、下一步學習方向

明天將進入 Day 28，主要任務是進一步分析健康測試資料中的習慣變化。

除了計算平均值之外，也會嘗試觀察不同日期的喝水量、睡眠時間與運動紀錄之間的變化，從資料中找出可能的趨勢，讓健康習慣追蹤系統不只是紀錄工具，也能提供更有意義的資訊。

今日總結：透過 Streamlit 的版面配置與資訊呈現功能，改善健康習慣追蹤系統的操作介面，讓資料輸入、歷史查詢與健康統計更加清楚且容易使用。