iT邦幫忙

2026 iThome 鐵人賽

DAY 27
0

做到第二十七天,專案已經有共同帳單、現金確認、快照和找零試算,但功能多了之後,畫面也開始出現另一種負擔:使用者不知道應該先按哪裡。有些入口像一般文字,有些管理操作一直佔著畫面,還有提示只說資料有變動,卻沒有說下一步怎麼做。今天整理的重點,是讓常用操作容易找到,低頻操作需要時再展開。

前幾次調整已經建立底部導覽、馬卡龍按鈕和更多選項,今天把它們當成同一套介面繼續檢查。我發現本機頁面仍保留舊導覽列的水平位移設定,和新版左右貼齊的配置衝突,因此明確取消舊位移。同時補上共用的 hidden 規則,避免按鈕外觀的 display 樣式讓原本應該隱藏的元素又出現。這類問題光看新增的樣式不一定容易發現,還需要檢查新舊規則如何疊在一起。

共同帳單新增「全部帳單」與「只看待我填」。大家不必每次都滑過已經完成的帳單,才能找到自己的工作。篩選只改變呈現,不刪除帳目,也不會丟棄正在修改的草稿。即使一張帳單曾經提交過,只要自己的输入框已有未存修改,切到待填篩選時仍會保留它,避免使用者以為內容消失。

結算頁則增加一張「下一步」提示卡。資料還沒備齊時,提醒先完成帳單與現金;自己尚未確認時,指出確認按鈕;正在等夥伴時,說明等待與讀取最新狀態;全員確認後,再依擁有者或一般成員顯示鎖定或等待提示。快照有效時,就引導查看付款與找零方案。這樣使用者不必靠猜測一排按鈕的作用,才能知道現在輪到誰。

錯誤提示也要能幫助人繼續操作。之前版本衝突仍叫使用者重新整理共享清單,容易讓人按到瀏覽器重新整理而失去草稿。今天共同帳單的提示改成明確說明草稿仍保留,並要求按 App 的「讀取最新資料」。現金頁發生錯誤時,會展開包含重新讀取的更多選項,讓恢復操作不會藏在收起的區域裡。

配色延續中性馬卡龍:霧藍用於一般入口,淡紫用於主要操作,薄荷綠承載狀態提示,蜜桃色表示錯誤,奶油黃用於結算下一步。文字維持深色,不能為了柔和而變得難讀。今天計算了五組固定文字與背景色的對比,結果介於 6.71 到 8.53 比 1。這只代表所檢查色組的數值,不等於所有停用、透明、漸層或滑鼠狀態都完成無障礙驗收。

手機與鍵盤方面,補上「跳到主要內容」、焦點外框、底部導覽預留空間,以及小螢幕輸入欄位的十六像素文字。使用者偏好減少動態效果時,介面也會停用平滑捲動與轉場。目標不是強迫所有內容塞進一個螢幕,而是減少不必要的捲動,同時保留可讀文字、可點擊按鈕和需要時能查看的細節。

今天通過五十八項模擬介面與回歸檢查,涵蓋本機流程、共享空間、共同帳單、現金和結算找零。另檢查五個 HTML 頁面的重複 ID、共用資源與主要內容入口,以及五組色彩對比。嘗試啟動無頭瀏覽器時,執行環境回報存取被拒,因此沒有取得真正的桌面或手機渲染證據,也沒有把真人鍵盤與草稿操作標記成完成。

Day 27 不需要新的資料庫 SQL,重新載入頁面即可取得介面更新。接下來仍需在電腦、手機和平板確認底部導覽不遮住內容、選項區能以鍵盤展開、篩選與更新保留草稿。Day 25 和 Day 26 的上雲與找零真人驗收也仍待回報。今天完成的是介面修正、離線檢查與文章,把尚未驗證的部分清楚留下,才不會讓好看的畫面掩蓋真正還沒做完的工作。


上一篇
Day 26|多人現金交付,順序不能亂
下一篇
Day 28|從自己能用,到兩個人真的能一起用:整理分帳驗收流程
系列文
《腦中的點子真的做得出來嗎?30 天 AI Vibe Coding 實驗》 共 30 篇
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言