Intro
簡介
插圖著要用於幫助 KKBOX 傳達複雜、難以用簡短文字形容的情境給使用者，讓使用者能更快速地融入和理解，另外插圖的表現也讓 KKBOX 的整體體驗更加活潑、擬人，同時呼應「富表現的」的設計準則，利用到插圖的地方主要在歌單封面、通知卡片、特殊頁面等等。
When to Use
使用時機
以下時機可以 (但不一定要) 使用插圖設計
- 當我們需要傳達複雜情境給用戶時
- 當我們要表達恭喜或鼓勵用戶時
- 當我們有壞消息 (影響體驗) 要跟用戶溝通時
Resource
素材庫
Figure 人物
Objects 物件
How to Apply
插圖新增流程
頁面上需新增 Icon 時，請提供此 Icon 名稱、目的、時程等資訊給統一負責繪製 Icon 的設計師。
參考文件 了解完稿細節與投稿細節
Elements of Style and Design Guideline
風格與設計指南
Figure 人物
組成
頭
利用基本的幾何圖形，構出頭部輪廓。
手
圓形作為手指端點與手掌尾端，並利用鋼筆工具將其連接，並稍微做透視處理。
腳
將圓形作為手指端點與手掌尾端，並利用鋼筆工具描繪腳掌，腿寬與腳長的比為 1：2。
五官
由圓(眼)、線條(鼻)、曲線(嘴)構成五官。
比例原則
男生的頭、上半身、下半身的比例分別為1.5 : 3 : 5.5，女生的比例約是男生的90%
男
身體比例請參考下圖。
女
女生版略小於男生版，差距約在10%內
穿搭風格
服飾風格上趨向簡潔、休閒 ( 可適時加上簡單的圖案)，避免太過複雜的剪裁。
如果要傳達專業度或官方的，也可以有像是西裝的正式的打扮。
服飾建議圖案:
素色
條紋
幾何圖形
格子
數字或標語
色彩
- 固定色彩
- 其他色彩 Graphic Design Palettes
- 整體原則
- 插畫人物 Graphic Design Palette，️單一人物的情況下最多三色
- 避免使用漸層效果
- 避免使用陰影效果
表情
若需要表情變化，優先選用下列已建立的表情樣式，如果找不到合適的，可以在不影響臉部識別下，稍微調整五官。
a. 享受 / 沈浸
b. 俏皮
c. 哀傷 / 難過
d. 愉快 / 微笑
e. 訝異
a. 正面
b. 右前
c. 右
d. 左前
e. 左
頭部造型
全身
可以 / 不可以
符合比例規範的插畫
配色過多不宜過多
相同顏色的重疊處請用線條區隔
避免使用漸層色
避免使用陰影效果
Objects 物件
基本圖形
破壞透視原則，透視扁平化，可以一個物件有兩個透視方向。
圓形
圓柱體
矩形 1
正方體
矩形 2
粗線條
色彩
- 固定色彩
- Graphic Design Palettes
3.整體原則
- 物件的 Graphic Design Palette，️最多三色
- 避免使用漸層色
- 避免使用陰影
可以 / 不可以
破壞性的透視原則
配色過多不宜過多
同一個系列，配色過多不宜過多
避免使用漸層色
避免使用陰影效果
註:補充半透明漸層特例的說明
Usage 應用
通知卡片
當通知卡片被應用來溝通一些資訊像是新功能上線、引導探索、刺激付費等等都可以使用插圖來傳達用戶即將獲得的體驗情境，以引導更多使用
會員專屬 / 付費會員 / KKBOX Premium 會員
利用飲料，餐盤上的歌單組合，去帶出享用/享受音樂的氛圍，特別適用在會員專屬、付費會員限定等情境
高音質 / 沈浸體驗 / 享受音樂
跟著音樂流動的頭髮與音符，象徵 KKBOX 使用者沈浸在音樂的旋律裡面。
探索 / 發現 / 成為會員
太空有探索、發現的概念，用來表示成為會員後可以像太空人一樣，盡情的在 KKBOX 探索各種音樂。
特殊頁面
特殊頁面通常是在用戶體驗因為某些因素而被限制時出現，比如離線、斷線、錯誤之類，我們可以利用插圖更有人性 (擬人) 地安撫用戶
探索歌曲 / 收藏 / 我喜愛的歌曲
透過抱著歌曲列表的女孩，象徵用戶在KKBOX 探索找到自己喜歡的歌曲。
一起聽 / 與朋友一起
兩個好朋友坐在一起共同聽歌， 呼應「一起聽」的概念。
搜尋 / 找歌 / 找資料 / 尋找
利用放大鏡去詮釋找、歌找資料的概念。
離線
潛水員浮出水面/潛入水底，恰好貼近上線/離線的情境，所以利用「潛水」來詮釋離線狀態。
無資料 / 空資料
盒子代表 KKBOX ，空盒子代表在 KKBOX 找不到資料的情境。
斷線 / 無網路
用斷掉的線來表示目前斷線、無網路狀態。
錯誤 / 維護中
修理東西時常用到的「把手」，有維修、維護的概念，用來詮釋 KKBOX 錯誤、維護中的狀態
歌單封面
在固定主題的 AI 歌單封面我們也會應用插圖來表現這種類型歌單的意義，譬如「為你精選」歌單用擊掌去強調 KKBOX 是一位很懂你音樂品味的朋友然後推薦你這張歌單內的歌曲
