Avatar 頭像

代表一個人或組織的圖像。使用 Element Plus 的 el-avatar。

設計準則

• 優先序:有照片用照片 → 沒照片用姓名末兩字 → 匿名/系統帳號用人形圖標;同一列表混用沒關係,規則要一致
• 人用圓形(預設);品牌、組織用方形做區隔
• 尺寸:列表、留言用 small 或預設;個人資料頁的主頭像用 large 或自訂像素
• 圖片一定要設 fallback(slot 內容),載入失敗不能破圖

基本用法

loading

尺寸(圓形與方形)

三種預設尺寸 + 自訂像素;圓形給人、方形給品牌與組織:

loading

頭像組

多人協作、共同負責人用堆疊頭像組:負邊距重疊 + 背景色描邊區隔,最多露出 4–5 顆,其餘收成「+N」 (EP 沒有現成元件,此為規範寫法):

loading

載入失敗

loading

Do / Don't

✅ Do	❌ Don't
照片 → 文字 → 圖標的固定順位	沒照片就放空白圓
人圓形、組織方形	同一列表圓方隨機
設 fallback	載入失敗顯示破圖

給工程師

完整 API 見 Element Plus Avatar 文件。 本站規範優先於 EP 文件中的視覺建議。