現況:右上角一顆 36px 透明圓鈕,只有圖示
現在的縮小鈕是 ghost 樣式(無底色、無邊框),跟背景幾乎同色,只靠一個 20px 圖示。手機與桌面都是同一顆。桌面版視覺重心全在中間那排大 pill 按鈕,右上角很容易被略過。
週會 9/5 產品同步
週會 9/5 產品同步
題 1 · 手機版:留右上角,怎麼變明顯
手機版按鈕已經直排吃滿寬度,再塞一顆會把整排推到螢幕外,所以右上角是對的位置。差別只在那顆鈕長什麼樣。
週會 9/5 產品同步
36px 透明圓、只有圖示。沒人知道那是「縮小」。
週會 9/5 產品同步
改成 outline pill、圖示加「縮小」二字。字才是關鍵:使用者不用猜圖示。樣式與下面「取消」鈕同一套,看起來是同一個系統。
週會 9/5 產品同步
44px 灰底圓、加邊框陰影。看得到了,但仍要猜圖示意思;縮小圖示不是通用符號。
題 1 · 手機版右上角採哪個?
題 2 · 桌面版:縮小鈕併進按鈕列,放哪個位置
桌面版的視線終點就是中間那排 pill。多一顆「縮小」放進去,使用者掃一次就看到全部動作。兩個位置差在「誤按風險」:縮小是無害動作,離紅色「停止錄音」遠一點比較安心。
週會 9/5 產品同步
三顆在中間,縮小孤零零在右上角。
週會 9/5 產品同步
順序:縮小 · 暫停 · 停止錄音 · 取消。兩顆無害動作分列兩端,兩顆會改錄音狀態的擠中間;縮小離紅鈕隔一顆。綠框只是示意重點,實際同「取消」的 outline 樣式。
週會 9/5 產品同步
順序:暫停 · 停止錄音 · 取消 · 縮小。兩顆 outline 相鄰,「取消」與「縮小」樣式相同又並排,急著找的時候容易按錯邊。
題 2 · 桌面版縮小鈕放哪?
題 3 · 桌面版併入按鈕列後,右上角那顆留不留
同一個動作兩個入口,使用者會懷疑兩顆是不是不一樣。建議桌面版只留按鈕列那顆;手機版本來就只有右上角,不受影響。
| 方案 | 桌面看到什麼 | 好處 | 代價 |
|---|---|---|---|
| 3-A 拿掉右上角(推薦) | 只有按鈕列四顆 | 單一入口、畫面乾淨 | 習慣舊位置的人要重新找一次(目前只有你在測) |
| 3-B 兩顆都留 | 按鈕列四顆+右上角一顆 | 不管看哪裡都找得到 | 同動作雙入口;測試要多守一條 |
題 3 · 桌面右上角那顆?
拍完之後
- 三題各選一項,需要就寫補充
- 底部「複製拍板摘要」,貼回對話給我
- 開一張小卡(走小卡節流:計劃閘最多 2 輪)
- 改動只在一個元件+三語文案+既有測試的 testid;不動錄音邏輯、不動 sticky 列
- 跟 train-8 一起上 staging 給你真機看
實作細節:只動一個元件、三語文案、既有測試 testid(展開看清單)
- 元件:錄音全螢幕面板——右上角按鈕依題 1 換樣式;桌面依題 2 在操作列插一顆,依題 3 決定右上角去留;手機/桌面分支既有(768px 斷點)
- 文案:最小化文案三語(zh-TW/en/ja)改「縮小」或保留「最小化」
- 測試:既有縮小鈕 testid 保留;桌面新鈕補一條「按下只切顯示模式、不動錄音器」(不變量 I8)
- 不動:sticky 列、錄音狀態機、鎖與上傳佇列