錄音全螢幕「縮小」鈕:位置與明顯度評估

你回報縮小鈕移到右上角後不夠顯眼。下面用產品實際外觀畫出現況與兩個方向:手機版留在右上角但加大加字,桌面版改成和暫停、停止並排多一顆。共三題,每題就地拍板,最後底部按鈕複製摘要給我。

現況:右上角一顆 36px 透明圓鈕,只有圖示

現在的縮小鈕是 ghost 樣式(無底色、無邊框),跟背景幾乎同色,只靠一個 20px 圖示。手機與桌面都是同一顆。桌面版視覺重心全在中間那排大 pill 按鈕,右上角很容易被略過。

現況 · 手機(<768px)
只有圖示、無底色
錄音進行中

週會 9/5 產品同步

00:12:37
當前裝置:iPhone 麥克風收音正常
暫停 停止錄音 取消
現況 · 桌面(≥768px)
離操作區很遠、容易被略過
錄音進行中

週會 9/5 產品同步

00:12:37
當前裝置:MacBook Pro 麥克風收音正常
暫停 停止錄音 取消

題 1 · 手機版:留右上角,怎麼變明顯

手機版按鈕已經直排吃滿寬度,再塞一顆會把整排推到螢幕外,所以右上角是對的位置。差別只在那顆鈕長什麼樣。

現況
錄音進行中

週會 9/5 產品同步

00:12:37
當前裝置:iPhone 麥克風收音正常
暫停 停止錄音 取消

36px 透明圓、只有圖示。沒人知道那是「縮小」。

1-A 圖示+文字 pill(推薦)
縮小 有字+白底邊框
錄音進行中

週會 9/5 產品同步

00:12:37
當前裝置:iPhone 麥克風收音正常
暫停 停止錄音 取消

改成 outline pill、圖示加「縮小」二字。字才是關鍵:使用者不用猜圖示。樣式與下面「取消」鈕同一套,看起來是同一個系統。

1-B 加大加底色,仍只有圖示
44px 灰底圓
錄音進行中

週會 9/5 產品同步

00:12:37
當前裝置:iPhone 麥克風收音正常
暫停 停止錄音 取消

44px 灰底圓、加邊框陰影。看得到了,但仍要猜圖示意思;縮小圖示不是通用符號。

題 1 · 手機版右上角採哪個?

題 2 · 桌面版:縮小鈕併進按鈕列,放哪個位置

桌面版的視線終點就是中間那排 pill。多一顆「縮小」放進去,使用者掃一次就看到全部動作。兩個位置差在「誤按風險」:縮小是無害動作,離紅色「停止錄音」遠一點比較安心。

現況
錄音進行中

週會 9/5 產品同步

00:12:37
當前裝置:MacBook Pro 麥克風收音正常
暫停 停止錄音 取消

三顆在中間,縮小孤零零在右上角。

2-A 縮小放最左(推薦)
錄音進行中

週會 9/5 產品同步

00:12:37
當前裝置:MacBook Pro 麥克風收音正常
縮小 暫停 停止錄音 取消

順序:縮小 · 暫停 · 停止錄音 · 取消。兩顆無害動作分列兩端,兩顆會改錄音狀態的擠中間;縮小離紅鈕隔一顆。綠框只是示意重點,實際同「取消」的 outline 樣式。

2-B 縮小放最右
錄音進行中

週會 9/5 產品同步

00:12:37
當前裝置:MacBook Pro 麥克風收音正常
暫停 停止錄音 取消 縮小

順序:暫停 · 停止錄音 · 取消 · 縮小。兩顆 outline 相鄰,「取消」與「縮小」樣式相同又並排,急著找的時候容易按錯邊。

題 2 · 桌面版縮小鈕放哪?

題 3 · 桌面版併入按鈕列後,右上角那顆留不留

同一個動作兩個入口,使用者會懷疑兩顆是不是不一樣。建議桌面版只留按鈕列那顆;手機版本來就只有右上角,不受影響。

方案 桌面看到什麼 好處 代價
3-A 拿掉右上角(推薦) 只有按鈕列四顆 單一入口、畫面乾淨 習慣舊位置的人要重新找一次(目前只有你在測)
3-B 兩顆都留 按鈕列四顆+右上角一顆 不管看哪裡都找得到 同動作雙入口;測試要多守一條

題 3 · 桌面右上角那顆?

文案:現在三語 i18n 寫的是「最小化」,你口頭都講「縮小」。demo 用「縮小」;拍板後我一併把文案改成「縮小」,除非你在補充框說要保留「最小化」。

拍完之後

等你動手
  1. 三題各選一項,需要就寫補充
  2. 底部「複製拍板摘要」,貼回對話給我
我自動接手
  • 開一張小卡(走小卡節流:計劃閘最多 2 輪)
  • 改動只在一個元件+三語文案+既有測試的 testid;不動錄音邏輯、不動 sticky 列
  • 跟 train-8 一起上 staging 給你真機看
實作細節:只動一個元件、三語文案、既有測試 testid(展開看清單)
  • 元件:錄音全螢幕面板——右上角按鈕依題 1 換樣式;桌面依題 2 在操作列插一顆,依題 3 決定右上角去留;手機/桌面分支既有(768px 斷點)
  • 文案:最小化文案三語(zh-TW/en/ja)改「縮小」或保留「最小化」
  • 測試:既有縮小鈕 testid 保留;桌面新鈕補一條「按下只切顯示模式、不動錄音器」(不變量 I8)
  • 不動:sticky 列、錄音狀態機、鎖與上傳佇列
已選 0 / 3
⌘ + Enter 送出 · Esc 取消
— 我的評論