Details · 4 個模組
Tooltip、捲軸、游標、間距節奏
Tooltip
四個方向
圖示按鈕
名詞解釋
這個月的 有效額度 還剩 18 分鐘，超過的部分會用 加購單位 計算。
不能做的事
不要把唯一的說明放在 tooltip 裡 —— 手機上沒有 hover，那段字等於不存在。
不要在 tooltip 裡放連結或按鈕 —— 滑鼠移過去的路上它就消失了。
不要用 tooltip 顯示錯誤 —— 錯誤要留在畫面上直到被處理。
停用狀態
處理中
Scroll
Styled
預設。看得見、跟著主題走。
Overlay
滑鼠移進來才出現，不佔版面。
Hidden ＋ 邊緣淡出
藏捲軸就一定要補一個「還有更多」的訊號。
橫向：篩選列
橫向捲動藏捲軸是合理的 —— 被切一半的下一個項目本身就是「還有更多」的提示。
寬表格
表格在自己的容器裡橫捲，不會把整頁撐寬。這是最常見的手機破版原因。
| 專案 | 負責人 | 語言 | 格式 | 狀態 | 更新時間 | 長度 |
|---|---|---|---|---|---|---|
| 開箱不睡覺 EP.40 | 陳怡君 | 繁體中文 | SRT / VTT / MP4 | 已完成 | 2 小時前 | 8:00 |
| 產品發表會 EP.41 | 陳怡君 | 繁體中文 | SRT / VTT / MP4 | 已完成 | 2 小時前 | 15:13 |
| 客戶簡報 EP.42 | 陳怡君 | 繁體中文 | SRT / VTT / MP4 | 已完成 | 2 小時前 | 22:26 |
| 街訪 EP.43 | 陳怡君 | 繁體中文 | SRT / VTT / MP4 | 已完成 | 2 小時前 | 29:39 |
另外兩個常被忘記的：overscroll-behavior: contain 讓捲到底時不會帶著整頁一起動；scrollbar-gutter: stable 讓內容從一頁變兩頁時，版面不會突然往左跳 15px。
Cursor
pointer 可以點的東西：按鈕、連結、分頁籤text 可以選取或輸入的文字not-allowed 停用中。不要留 pointerprogress 在處理，但你還能操作別的wait 整個畫面卡住。應該很少用到grab / grabbing 可以拖的東西，按下要換成 grabbingcol-resize 拖曳分隔線改寬度zoom-in 點了會放大的圖copy 點了會複製到剪貼簿help 有說明、但點了不會怎樣crosshair 要精準選點：裁切、取色default 純顯示，什麼都不會發生處理中的狀態
aria-busy="true" 同時做兩件事：游標變 progress，
內部不再吃點擊。少了第二件，使用者會連按五次。
拖曳
grab → 按下 → grabbing。
沒有切換的話，拖曳過程會感覺沒有回應。
拖曳分隔線
分隔線要用 col-resize，而且拖的時候不能選到旁邊的文字
—— 所以要加 user-select: none。
關於自訂游標：換掉系統游標會失去作業系統的尺寸與高對比設定，主執行緒忙碌時還會有延遲。 活動頁與形象站可以玩，每天要用八小時的工具不要。這個站只有 粗野等寬 這一個風格換了游標，切過去就看得到差別。
Spacing
刻度
十階，全部乘上密度係數。設計時只從這裡挑，不要自己想數字。
space-1 space-2 space-3 space-4 space-5 space-6 space-7 space-8 space-9 space-10 親疏關係
標題屬於它下面的段落，不屬於上面的區塊。所以上方的空間要比下方大。
錯：上下一樣
每月 30 分鐘影片，可跨裝置接續編輯。
年繳可省 17%，隨時可以取消。
對：上大下小
每月 30 分鐘影片，可跨裝置接續編輯。
年繳可省 17%，隨時可以取消。
節奏：容器負責，元素不帶 margin
.ds-flow > * + * 只在兄弟之間加間距，
第一個之前與最後一個之後永遠沒有多餘的空隙 —— 所以這個區塊丟到任何地方都不會多一截。
支援 MP4、MOV、MKV，最大 2GB。檔案留在你的電腦上。
時間軸已經對好了，你只需要處理專有名詞。
檢查方法：搜尋原始碼裡的 margin 與 padding，只要出現不在刻度上的數字，就是有人在憑感覺推像素。