近期於前端開發時常會被 PM 要求先提個 Mockup 來看看呈現效果之類的。有鑑於公司目前的人力配置一直沒有規劃到 UI / UX 這個領域，那就自己下來碰碰看吧。這篇筆記的是六角學院的 UI 設計入門：畫出有程式邏輯的設計稿 中關於「連結與圖示」。
課程相關資訊
[連結]：https://courses.hexschool.com/courses/enrolled/724307
本篇範圍：Chapter 4 ( 從原子設計學習介面的常見元件 ) ，一共有 13 篇
請注意：本系列文章為個人對應課程的消化吸收後，所整理出來的內容。換言之，並不一定會包含全部的課程內容，也有可能會添加其他資源來說明。
筆記
1. 連結是個並不需要太多裝飾，就能讓使用者開始了解作用的元件
2. 連結通常是藍色，並加上下底線或是在文字旁加入圖標
3. 連結狀態可分為 Enable (可用), Hover (懸停), Pressed(點擊) 和 Visited (曾經點過)，通常會有顏色或是樣式的變化
4. 圖示 Icon 的部分，其狀態通常會有「填滿、外框和雙色」三種，常見的圖示資源是 Material Design 和 Font-Awesome
5. Icon 可以引入 SVG
6. 圖示的排版要注意：輔助文字、簡單明確、樣式一致、避免混淆和通用性
7. Icon 的狀態有開啟、關閉、停用和懸停 ( Hover )
8. 請在必要時，才加入圖示
