Icons
Icons

Icons

Icons

KKBOX 的各項產品運用圖標系統來強化一致性的跨平台使用體驗，為確保圖標能清楚傳達其意義，同時也維持良好設計品質，設計師們皆使用統一設計原則及製作方法進行繪製。 目前 KKBOX 產品內使用的圖標，可以於下方 Figma 檔案瀏覽及下載。

[規範] 圖標系統 Icons

Last modified by 黃英傑 ⋅ 8 months ago

Icon Principles

Icon 設計原則

image

Icon 設計的缺口風格

將 App Icon 的設計精神延伸至圖標系統，在視覺上我們打破制式的封閉圖形規則，希望跳脫既有的設計框架，傳達產品力求突破與改變的決心。

(一) 重疊型 Icon

特徵：兩個圖形重疊的 Icon

作法：可以在圖形重疊處做出缺口

image

(二) 多邊形 Icon

特徵：偶數多邊形的 Icon

作法：可以在對角處加上缺口

image

(三) 對稱型 Icon

特徵：左右造型對稱的 Icon

作法：可以在左右兩邊的對稱位置加上缺口

image

(四) 一線到底型 Icon

特徵：由一條線構成的 Icon

作法：在線條的頭、尾(或擇一)加上缺口

image

Icon 設計的基本原則

  1. 以圓潤單色的線條搭配缺口風格為主體
    2. image
  2. 圖標注重辨識度不宜有過多細節
    3. image
  3. 善用使用者已熟知的圖形概念
    4. image

Icon Types

Icon 種類

產品內使用的圖標分為 UI、Pictogram 兩種，各自有其不同的使用情境及形式。

UI 介面

主要應用於產品操作介面，並根據不同平台（Mobile App / Universal / Car Mode） 調整圖標的尺寸 / 粗細度 / 應用情境等。

Pictogram 象形

主要應用於 Mood Icons，例如：曲風情境、網站示意支援跨平台的裝置等。尺寸通常較大，且能夠清楚示意圖形用意。

UI v.s. Pictogram 比較表

UI
Pictogram
使用目的
作為 KKBOX 介面的基本元素 以簡單筆畫的圖形，幫助使用者學習該功能含義，並透過辨識圖形直覺操作
以輔助文字資訊的方式傳達含義，營造畫面輕鬆趣味感，讓資訊看起來活潑友善
形式
具備最小形式的基礎辨識度。
通常較 UI Icon 樣式更詳細
Size
112x112（車機） 96x96（車機） 44x44 32x32 24x24 20x20 16x16
36x36 300x300
Use case
- Primary navigation，例如 App Bottom Navigation - 和文字結合使用，例如 Universal 的 Side Menu
- 產品介面的曲風情境 - Website 支援平台裝置
UI - 介面的基本元素
UI - 介面的基本元素
Pictogram - 介面的曲風情境
Pictogram - 介面的曲風情境

UI Size 尺寸

不同平台的 Icon 尺寸會有所不同，下表列出各平台經常使用的尺寸。一些特殊尺寸未在以下表格列出，但仍可於 Figma 檔案中瀏覽及下載。

Mobile / Tablet (Large Screen)
Universal
Car
TV
Watch
主要
32x32 24x24
32x32 24x24
Android: 44x44 iOS: 96x96 *Border 5.4px
Android: 106x106 Apple: 44x44（箭頭）48x48（音質）
Android: 24x24 iOS:未知
次要
20x20 14x14
44x44 20x20 16x16
Android: 112x112
-
-

Creating Icon

建立新 icon

設計 Icon 的四個基本注意事項

  1. 使用 16 x 16 pixel 的網格作為基底製作圖標 (可以開啟 Figma 的 Pixel p review 來進行)
  2. 線條粗細統一使用 1px，盡量讓線條貼齊或置中於網格系統上
    1. 線條兩端選擇為 Round
    2. 轉折處也選擇為 Round
    3. 整體 icon 的線條粗細維持一致
  3. 為確保圖標尺寸有視覺上的平衡，在圓形、正方形、矩形等情況下要做好大小的比例
      4. 參考 Key Contour Lines
    1. 圓形：貼齊邊緣
    2. 正方形：邊緣預留 1px 的空白
    3. 矩形：長邊貼齊邊緣
      4. image
  4. 圖標的命名原則：
    1. App：ic_圖標意義_尺寸 ex: ic_play_32
    2. Universal：ic/位置/圖標意義_尺寸 ex: ic/SideMenu/Discover_24

How to Apply 新增流程

頁面上需新增 Icon 時，請提供此 Icon 名稱、目的、時程等資訊給統一負責繪製 Icon 的設計師。

了解完稿細節與投稿細節 參考文件
image

Icon Interaction 互動原則

  1. 顏色使用

    2. Icon 使用 Semantic Colors 做顏色套用

    Icons semantic colors

    Color Core Tokens - ICON

    ‣
    Primary Icon/ Secondary Icon
    ‣
    PrimaryOnDarkIcon / SecondaryOnDarkIcon
    ‣
    onBrandIcon
    ‣
    interactiveIcon
    ‣
    negativeIcon
    ‣
    iconDisabled
  2. 互動行為 (Hover, Pressed)
    1. Hover：
      1. Universal & Website 均有 Hover 狀態，以變換透明度為主 (70%)
      2. Universal Hover List Item、Cards 上的 icon，icon 為 100%（Default 75%）
    2. Pressed：App 有 Pressed 狀態的顏色變化 (參考顏色使用)
  3. 點擊範圍
    • 原則上產品中 icon 的點擊範圍等同 icon 尺寸 （32x32, 24x24），或是和搭配的文字包在一起變成一個點擊範圍 （視情況會有額外 padding） 設計師應針對小 Icon 定義點擊範圍，最小點擊範圍為 44x44 (iOS)
      • 了解設計師應定義的點擊尺寸

      參考 Layout

      image

When to Use Icons

使用時機

Icon 在介面設計中時常運用為視覺輔助，或是簡化介面用，並幫助使用者加速辨識功能來取代閱讀文字。但同時也需避免使用過多 icon 或在呈現上辨識度低的 icon 設計時，未提供文字輔助。

常使用 Icon 的情境：

  • 主要的 Bottom Nav 入口
  • 在清單或按鈕中，時常以文字搭配 Icon 同時使用增加資訊豐富度
  • 空間不足時會以 Icon 單獨使用來減少畫面的複雜度
    • 例如常見的播放器操作按鈕會以使用 Icon 為主
  • 運用使用者熟悉度高的 icon 來加速介面的閱讀（分享、下載、刪除…etc.）
  • 在通知版位運用 icon 來快速提示訊息類型

Changelog

Date
Version
Notes
Chapters
Person
January 17, 2023
1.2

・Layout - 響應式斷點說明更新 ・Icons - 新增缺口風格設計說明

All
Jaco Huang
November 25, 2022

・所有筆記彙整

All
Mark Liang
November 22, 2022
1.1

・Changelog 測試 ・範本介紹

All
Mark Liang
November 1, 2022
1.0

・XD Playbook Foundation 正式上線

All
pei-tzu Lin