Icon 圖樣
廣義上指所有有指示作用的標誌。
設計規範
透過Keyline的框線，讓元素一致，且能靈活的定位，保持 icon 一致的視覺比例。
Square
Circle
Vertical rectangle
Horizontal rectangle
Grid則是讓元素線條皆能在像素範圍內。
正確
錯誤
線條ICON設計方法
1.使用AI繪製。其重點圖層說明如下
trim area
icon邊界，4px
keylines
grid
keyline範圍
放在底層，對齊設計用
2.線條粗細為8px帶圓角，在Grid中佔兩格
3.設計完稿
複製到轉外框圖層，將圖轉外框
使用192x192色塊當遮罩
轉存為SVG檔
4.樣式皆使用最少線條表示，越單純越好
正確
錯誤
錯誤
5.若有共同元素，需沿用之前的設計，如手機、錢幣等
6.可以使用反白的設計，依照各產品使用不同色，線框跟底的面積為7:10，192px的icon，放在274px的底色中
色塊ICON設計方法
- 尺寸：192px X 192px
- 線條：8px
- 圓角：8px/4px
- 主要顏色(需佔ICON區域 80%)：
#00a19b#FFE7A3
- 次要顏色(不超過ICON區域20%)：
#FFC517#FFFFFF (60%)
1.使用AI繪製。其重點圖層說明如下
trim area
icon邊界，4px
keylines
grid
keyline範圍
放在底層，對齊設計用
2.線條粗細為8px帶圓角，在Grid中佔兩格
3.設計完稿
複製到轉外框圖層，將圖轉外框
使用192x192色塊當遮罩
轉存為SVG檔
4.樣式皆使用最少線條表示，越單純越好
正確
錯誤
5.ICON內元素2x為主，過細的元素不易辨識
正確
錯誤
6.示意ICON
