那些總是叫不出名字的 UI Components 【Display 篇】
前情提要 💡
這一篇應該是 UI 相關文章的最後一篇了，主要是補充前面沒提過但實際上很常用到的項目，如果你還沒看過前面兩篇的話可以參考下面的連結。
Part1 在這 👇
那些總是叫不出名字的 UI Components 【Inputs 篇】
Part2 在這 👇
那些總是叫不出名字的 UI Components 【Navigation 篇】
在這篇文章中會介紹幾個主要跟「顯示」有關的元件，大致上屬於常態顯示於畫面上、幾乎沒有額外功能的元件。
Avatar
Avatar 應該是大家最熟悉的存在了，包括常用的 Line 和 Facebook 在內，我們的生活中總是一直一直看到它。
有人稱它大頭貼或頭貼，或是頭像，若還有其他的稱呼歡迎留言告訴我 🤣
Image Avatar
如果 Avatar 使用的是用戶設的圖片，那可以稱為 Image Avatar。
Letter Avatar
那如果沒有顯示的話，很多網站都會使用預設的 Avatar，像是下圖 Google 預設的頭貼，就是使用者所設定的名字的第一個中文字或是英文字母，這個就可以稱為 Letter Avatar，當然這個即使當初辦帳號時沒有設定，之後也都可以改成自己喜歡的圖片啦 🤣
Badge
Badge 指的是應用程式上面的紅色圈圈，像下圖的 Dock 上的 Line 和 App Store 上的數字提示一樣，訊息或通知上方通常會顯示有幾則未讀取。
Chip
Chip 有點像 Instagram 上的 Hashtag，但它又不是 Hashtag，主要應該是它沒有＃（英式英文也稱作 hash key 或是 hash mark，美式英文則為 pound sign）。Chip 通常會被一個標籤狀的東西框起來，也可以叫它 Label。但要注意的是 Label 常常會用來指元件上的文字，之前在 Part 1 那些總是叫不出名字的 UI Components【Inputs 篇】的 Button 有提過。
Divider
分隔線，字面上的意思。
List Dividers
比較常見的 Divider 也被用在 List 裡面，就直接稱叫 List Divider 就行了。
List / Table
List 和 Table 放一起說明並不代表他們是同樣的東西或是可以互換名稱，List 的中文叫清單，而 Table 則是列表，翻成中文後就很容易明白了吧。
可以用 To-do List 和 School/Class Timetable 來記憶～
像是前面用來解釋 List Divider 的圖就是 List 不是 Table~
Pagination
就是頁數，指的是下方「1 2 3 4 5 6 7 8 9 10 下一頁」那排。
後記 📷
寫前兩篇介紹 inputs 和 navigation 的時候都很認真地思考要怎麼讓介紹的順序有連貫性，因為不想要讓讀者有在看工具書的感覺，但寫到這篇的時候真的不知道要怎麼排順序，所以很乾脆地就按字母排序了。
這個系列寫起來有些尷尬，它的盲點在於很多名詞好像真的沒有解釋的必要，只寫一個中文翻譯再丟一張圖片說明又怪怪的，所以會找一些例子補充。不過這個系列的初衷在於講解那些沒有相應中文名稱的元件，希望可以幫設計師和前端工程師提升溝通技巧，達到精準的用字的能力。
網頁設計的發展已有數十年了，主要的 UI 元件都已經有既定的模式和設計規範，在短期內很難再有革命性的應用及發展。接下來也會寫一些跟使用者互動、使用者體驗相關的文章。如果有寫錯的地方或更好的建議也歡迎提供 feedback （this.yingchencheng@gmail.com），謝謝大家 ❤
