Readiz 網頁 UI 設計
使用者不喜歡按鈕和說明佔滿整個畫面。應以小巧的操作區塊與明確的階層，讓實際內容一眼就能閱讀與瀏覽。在建立新的網頁 UI 或修改現有 UI 時，請套用此標準。若使用者指定了品牌、平台或無障礙需求，則優先遵循其要求。
基本密度
以下是未另行指定設計時的網頁工具起始值。重點是減少不必要的留白與操作區塊，而非將內文按壓得更小。
| 元素 | 預設值 |
|---|---|
| 一般按鈕·篩選器·select | 高度 28px, 字級 12px, 左右 padding 6~8px |
| 圖示按鈕 | 26×26px, 圖示 14~16px |
| 輔助/表格內操作 | 24~26px |
| 按鈕間距 | 4~6px |
| 卡片內邊距 | 12~16px |
| 表格儲存格 | 垂直 5 |
| 內文 | 13 |
- 較短的按鈕應配合內容寬度。不要只因它是主要操作就做成又大又寬的按鈕。
- 在行動裝置上也要維持緊湊的視覺尺寸。不要用統一的 media query 將所有按鈕放大到 38~48px。若實際發現觸控錯誤，則針對該操作的間距與點擊區域進行調整，並確認不會與相鄰操作重疊。若有明確的平台規範則另行遵循。
- 較長的選擇題或列表列應依文字長度自然延伸。不要用固定高度或省略號截斷可讀的內容。若能像編號導覽一樣單獨顯示當前標題，則將小型導覽操作與內容標題分開。
- 偏好以藍色系作為預設強調色。使用明亮、安靜的背景、細邊框與小圓角。保留既有的明確品牌色與圖表中各意義的顏色區分。
畫面構成
- 將實際的圖表、表格與核心內容放在最初可見的區域。不要用介紹性的大標題、長副標題或重複的徽章將工作區域推離。
- 重複的數值與比較用表格呈現，項目瀏覽用排序列表或短索引標籤，圖表操作則用小工具列。不要將個別按鈕排列得像大型卡片。
- 對於熟悉的操作，使用專案既有的 SVG/圖示系統。為圖示提供無障礙名稱及 tooltip/必要的簡短標籤。不要僅靠顏色區分選擇、成功或錯誤。
- 保留核心摘要與常用操作，將詳細說明、來源、使用方式與儲存條件放在 ⓘ 或預設摺疊的 details 中。錯誤、儲存失敗、執行結果以及重要的判斷條件則在必要時顯示。
- 不要在標題、卡片、徽章與說明中重複相同的狀態。不要讓使用者在尋找功能時不得不閱讀冗長的文章。
- 對齊操作按鈕、表格與圖表的間距與排列。桌面版的目錄應窄小，而行動版的目錄則適合使用可顯示當前位置的摺疊式結構。
以實際畫面進行驗證
- 修改前，先確認實際按鈕的 computed height、padding、line-height 以及第一個內容的位置。不要僅因為修改了 CSS 宣告就認為它變小了。
- 優先修改既有的元件 variant 與 token。檢查共用 CSS、高 specificity、行動版覆寫以及動態樣式是否又將尺寸放大。不要一味疊加覆寫規則，而應釐清該尺寸的根本原因。
- 在代表性的 PC、平板與 360~390px 的行動裝置上實際檢視。確認一般操作是否維持上述預設值、長文字是否被截斷、文件是否橫向溢出、工具與圖表是否重疊。
- 確認摺疊、選取、鍵盤焦點、觸控以及必要的儲存/還原功能。不要因設計變更而修改既有的資料、儲存鍵或圖表座標。
- 實作並驗證指定範圍內的結果，若工作包含部署，則需實際檢視部署後的畫面。此技能本身不會附加發布或傳送訊息的權限。