iT邦幫忙

2026 iThome 鐵人賽

0
Modern Web

從 UI/UX 設計到前端實作:30 天打造專屬的任務學習計時器系列 第 33 篇

DAY 33|修正錯誤、提高效能,還看了一堆貓咪影片

  • 分享至 

  • xImage
  •  

在 TaskTimer 完成核心開發並發布穩定的 v1.0.0 版本後,我便持續使用它來輔助自己的日常學習。而在實際使用的過程中,我也陸續觀察到幾個能讓操作體驗更順暢、更貼近真實情境的優化點:

暗色模式(Dark Mode)視覺對比度優化

在暗色模式下,原本用於副標題與備註說明的 Bootstrap text-secondary 樣式對比度較低,導致部分文字訊息不夠清晰。

為了提升閱讀舒適度與資訊可讀性,我將樣式調整為更符合 Bootstrap 5 深色模式規範的 text-body-secondary,讓文字在深色背景下依然保持良好的對比度與辨識度。

  • 修改前(對比度較低,閱讀較吃力)

修改前(對比度較低,閱讀較吃力)

  • 修改後(提升文字對比度,訊息更清晰)

修改後(提升文字對比度,訊息更清晰)


儲存彈窗時間格式:保持完整秒數顯示

為了避免餘光受到計時器數字跳動的干擾,我習慣開啟「隱藏秒數」功能。但在原先的邏輯中,隱藏秒數連帶讓「儲存計時紀錄」的對話框(Modal)也看不到秒數。

考慮到儲存紀錄時使用者需要確認本次計時的精確時間,我修改了結算 Modal 的時間渲染邏輯:無論主計時器是否開啟隱藏秒數,在跳出儲存確認時,均強制顯示完整的時間格式(HH:mm:ss),確保紀錄內容精確無誤。

  • 修改後(結算 Modal 強制顯示完整 HH:mm:ss 格式)

修改後(結算 Modal 強制顯示完整格式)


已完成子任務順序往後:優化選單選取效率

隨著專案推移、子任務越開越多,我發現已完成的任務依然留在列表上方,導致每次要選擇「進行中」的子任務時,都必須先滑過一整排已完成的項目,增加了操作時間。

因此,我優化了子任務列表的渲染與排序邏輯:將狀態為「已完成」的子任務自動排至列表底部,讓使用者開啟選單時,第一時間就能直接選取尚未完成的任務,大幅提升效率。

  • 修改後(已完成項目順序調整,優先呈現進行中任務)

修改後(已完成項目順序調整,優先呈現進行中任務)


跨分頁(Tab)切換之計時防錯提醒

在操作過程中發現了一個潛在的 UX 痛點:當計時正在進行時,若切換到其他頁面(如任務列表、常見 QA 或系統資料),介面並不會提醒「目前仍在計時中」。有時切換頁面後處理其他事情,就會忘記原本的計時器還在運作,導致下次切回時發現錄下了不準確的超長計時紀錄。

為了避免這種忘記關閉計時的情況,我新增了頁面切換防呆提醒機制:當系統偵測到「計時器運作中」且使用者嘗試切換 Tab 時,會立即跳出提示視窗,詢問使用者是否需要先結束並儲存當前計時。

  • 修改後(切換分頁時主動跳出防呆提醒,避免誤計時)

修改後(切換分頁時主動跳出防呆提醒,避免誤計時)


結語

雖然在最初的產品設計與開發階段,就已經對 TaskTimer 規劃了整體藍圖;但當產品真正落地、融入自己的日常使用後,依然發現許多能讓操作更為順手與貼心的細節。

這讓我體會到,開發時的藍圖設想與真實的使用情境之間,永遠存在著些許落差。而這或許正是軟體產品需要持續迭代的價值所在。

未來在持續使用 TaskTimer 的過程中,若發現其他能優化的痛點,我也會繼續微調與修正,期待能打造出更順暢的使用者體驗。


上一篇
DAY 32 | UX優化:備份檔名時間戳與意見回饋管道
系列文
從 UI/UX 設計到前端實作:30 天打造專屬的任務學習計時器 共 33 篇
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言