🔵

輔助圖形

IllustrationsIllustrations 👨‍🎨插圖 🔵輔助圖形

Intro

簡介

輔助圖形是偏向裝飾性的圖案,可以將品牌主題、元素融入產品,讓整體的主視覺有一致性,目前輔助圖形有按照內容功能去區分音樂、Podcast、一起聽,但若代表整體 KKBOX 本身可混搭。

When to Use

使用時機

  • 當我們想要在元件上增加品牌元素
  • 當我們想要暗示用戶內容或功能的分別

Resource

素材庫

Elements of Style and Design Guideline

風格與設計指南

基本造型

  • 圖形依照產品分成音樂、Podcast、一起聽,使用時請依照對應的情境去做設計
  • 繪製時以圓形作為圖像端點形並適時運用曲線銜接, 增添圖像的流動感 (至少要有兩個曲線銜接處)
image

呈現方式

請依照下列五種形式套用在設計上

1 單獨使用

image

2 局部取用

image

3.遮罩

image

4.重複 I 單一圖形

image

5 重複 I 混搭圖形

image

可以 / 不可以

請勿任意改變圖形比例

image

請勿在輔助圖形使用漸層色

image

避免使用陰影效果

image

文字搭配較複雜的輔助圖形,可以在底下壓色,確保文字清楚呈現

image

作為藝人遮罩使用時,請留意勿裁切頭部

image

正確的對應產品功能使用

image

Usage 應用

單獨使用

直接用一整個完整的「音樂」輔助圖形納入設計,並利用大小、顏色、方向去做不同風格呈現,同時也保留彩蛋應用的彈性

每日新發現歌單封面
每日新發現歌單封面

局部取用

輔助圖形大於區域,利用螢幕的限制去裁切圖形,此種設計需注意不同螢幕尺寸的定位以及縮放規則

MIH Jumbo Card 底圖色塊
MIH Jumbo Card 底圖色塊

重複

單一圖形

同一種輔助圖形的重複排列形成的圖案

每日新發現歌單封面
每日新發現歌單封面

混搭圖形

另一種重複的應用是利用不同輔助圖形混搭排列

💡
因輔助圖形進行改版後尚未應用在所有地方,以下某些範例暫放舊版範例以表示應用方式,但新設計請用新版輔助圖形
個人頁背景圖
個人頁背景圖
Universal 登入頁面 (動態)
Universal 登入頁面 (動態)
官網首頁 (動態)
官網首頁 (動態)
付費中心頁
付費中心頁