
視覺識別系統
圖示‧專用圖示‧多元圖示‧風格物件 設計
VIS's Style Design: Icons
Personal Icons, Creative Symbolic Icons and Style Objects Design
數位出版/網路文創:識別標幟系統篇-知識美學/數位美學之建構方法
當前數位美工的最常應用就是視覺識別標幟系統,通常包括:標誌 (Logo, 標準字+標準圖案)、橫幅 (Banner)、縱意橫幅 (Web Doodle)、導覽 (Navigation),各式用途之系統化圖案、甚至衍生物品,如:圖示、卡片、貼圖、票證、文具、飾物、服裝…等,在縱意識別觀念興起後,識別系統物品又納入了各種年節禮品設計、在地紀念品設計,甚至由日用品延申到食品,如月餅設計。目前最ㄏㄤ的就是貼圖設計,而以標誌 (Logo)為系統中心且能具備「識別占有性」。
風格元件、風格物件
既為「系統」,各物品上必然會包括具「統一向面」的風格元件、風格物件。風格元件與風格物件都是建構風格的材料,只是風格元件結構比較完整,譬如標誌 (Logo)或其變形;而風格物件只是一個、或幾個具備一致性、聯想性的零件。
在網路識別標幟系統中,就應用目的還可簡分為:布景主題、圖示、與特用類型,其在達成主題性、系列性的要求相同;但在組合方法、與創意技術上,會因專用目的而有不同,介紹幾項範例如下:
網站視覺識別:布景主題‧橫幅導覽‧風格元件設計
VIS: Web Theme, Banner, Doodle, Navigation and Style Elements Design
網站視覺識別:圖示‧專用圖示‧多元圖示‧風格物件設計
VIS: Icons, Personal Icons, Creative Symbolic Icons and Style Objects Design
多元視覺識別:個人化社交卡‧貼圖‧票證‧禮品設計
VIS: Social Cards/Stickers/Tickets with Personal Visual Identity Symbols Design
網站視覺識別‧圖示與風格物件設計
VIS: Icons Design
完整的網路「布景主題」,包括一系列風格統一的提示性圖示,屬於視覺識別系統的支援物件,也可以反映作者的創意與巧思。
圖示的特點是極簡與抽象,在網路上的應用,常作為特定功能的按鈕,譬如瀏覽器上的工具列圖示;或特定意涵的提示,如表達警告的驚嘆號圖示等。
圖示的「系統」,經常採用風格物件組合技術,亦即只是組合一個、或幾個具備一致性、聯想性的零件。
視覺識別「專用圖示」系列
VIS: Personal Symbolic Icons Series
「系列」就要強調核心的風格(統一與變化)物件,「專用圖示」系列也就是要在各個圖示中,存在相同「個人化」的物件。
風格物件:統合同心金環
範例:網站分類圖示
此處為「TX Core Logo 核心標誌」的「統合同心金環」。
提示型圖示一般都在16*16 與 24*24 之間,以下為網站類型圖示,尺寸為17*17。
注意「意涵」與「結構」的一致性,正好代表 T, X, W 3個字母,也正是統雄老師的姓名縮寫。而 W 的設計,更具備反相技術(Inverting method)的應用。
因為正好是3件1組,所以使用 RGB 3 原色設計。
內容網站 |
互動群組 |
合作群組 |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
範例:網頁內容提示圖示
以下是內容提示圖示,尺寸為18*18。
統雄快訣 |
進階議題 |
音樂主題 |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
警示訊息 |
延伸閱讀 |
|
![]() |
![]() |
|
![]() |
![]() |
視覺識別「群組圖示」系列
VIS: Group Symbolic Icons Series
「群組圖示」是社交媒體興起、群組盛行後的產物,而大群組中可能存在小群組,而形成「系列」。也就是要在各個小群組圖示中,存在相同「群組化」的物件,強調核心的風格(統一)與各小組功能(變化)的物件。
風格物件:統合同心金環+標準字+劍
範例:「義聚」群組圖示
此「義聚」群組為統雄老師所發起,所以還是採用「TX Core Logo 核心標誌」的「統合同心金環」為風格底盤。
標準字為「義聚」,不僅是討論區,更為協作行動之群組。
小組的附加物件為「劍」,表達「劍及履及」的協作行動意涵,4件1組。
「義聚」群組圖示具備附加物件,尺寸定為180*172。
單劍、雙劍、4劍,正好在結構上創造 T, X, W 3個字母,也正是統雄老師的姓名縮寫。
動力設計上,單劍為佩劍,反映企畫運籌;雙劍互舞、4劍齊飛,表現分析與執行的揮劍行動。
色彩設計上,延續使用藍黃主色設計。
「義聚」群組(全體) |
企畫小組 |
分析小組 |
執行小組 |
![]() |
![]() 1 sword As T |
![]() 2 swords As X |
![]() 4 swords As W |
Google 服務圖示系列/漸進發展
風格物件:G,
藍主色+3輔色
Google 服務圖示的2大風格物件,是具備 G 字,或以藍主色+3輔色,輔色順序為:綠、黃、紅。
在這系列中,可看出 Google 服務圖示系列,是漸進發展的,開始對於「視覺識別系統」的觀念還不強韌,但隨著公司的壯大,愈發感受「視覺識別系統」的重要。
Mail, Calendar 是繼搜尋後,推出的第一個服務,當時可能還沒有「視覺識別系統」的觀念;而 YouTube 是併購的服務,所以這 2 項,是系列中,風格感較低者,不過,幸而也都搭到、繼承了「色彩」的風格元素。
而 Docs, sheets, Slides 是 Drive 的子服務,所以創造第二級造型,與採用主色系統。
Google 現在對「視覺識別系統」非常重視,非常強調風格的「統一」化,甚至成立了專責的團隊與網站 Google Design,中文細節說明請參考以下連結。同時,也提示,任何有意創作的組織與個人,在開始就應該準備「視覺識別系統」。
Google 設計團隊如何定義他們的新LOGO?
圖示網路資源/共享圖示
如果沒有辦法設計「專用圖示」,網路上也有一些網站,提供共享圖示,如有需要,可以採用。
不過,即使是共享圖示,最好還是作為範本修改,避免直接使用、而失去「個人化」意義。
iEmoji
提供多種用途、尺寸的圖示,設計也相當精致,作為範本修改,亦可為便利之途。
IconArchive
提供可共享的圖示,可作為範本修改。
圖示多元應用:視覺識別式圖示評論系列
VIS: Visual Commentary with Personal Symbols
圖示與源遠流長的漫畫相同,也可以作為評論的物件。
採用視覺識別的觀念企畫,更容易建構個人化風格。
東西相遇
以下是旅德華裔設計師劉揚的作品,她發現兩個國家文化間的巨大差異後,發表了一系列相當著名的圖示作品《東西相遇》,表現出德國人與中國人兩者鮮明的對比。
以下幾幅代表性的圖示,藍色就代表德國 (西方),紅色則代表中國 (東方)。身為華人的我們,看了一定也會多少發出讚嘆與感嘆。
領導人
準時
旅遊
交通
Chloe Chong 的生活駭客 Lifehack
Chloe Chong 是生活駭客 Lifehack 網站的作者,是亞洲人,可能是華人,發表了許多圖示評論。
成熟與不成熟
成熟與不成熟:成熟者常懷感激;不成熟者時時抱怨。
H-57工作室:名人圖示傳記
凱撒的一生
但他們的協力夥伴 http://firstfloorunder.com/ 設計專案網站,就過於花俏,反而失去普及性。
創意標幟範例
識別標幟系統與標準字實作
參考連結
標誌設計 http://www.thelogofactory.com/logo-design-tips/
全球最佳品牌標誌 http://www.interbrand.com/en/best-global-brands/best-global-brands-2008/best-global-brands-2011.aspx
全球最佳零售業品牌標誌 http://www.interbrand.com/en/BestRetailBrands/2011.aspx




