網路時代視覺識別標幟系統

數位出版/網路文創:識別標幟系統篇-知識美學/數位美學之建構方法

當前數位美工的最常應用就是視覺識別標幟系統，通常包括：標誌 (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

在網路時代，個人化媒體得以生存發展，又誕生了個人網路識別標幟系統，而其中物件，有些需具備固定規格，以下將以統雄老師的「統雄網群識別標幟系統」為範例介紹相關物件。

本系列同時介紹識別標幟系統設計的2大技術：「變形技術」與「反相技術」，並以國際上著名的識別標幟為範例。

Identity System(IS) used to be considered as simple as an logo. Nowadays, it became a series of symbols and objects to be designed.

I am going to demonstrate designs for 2 different files.

Banner with an IS for gif file.

Logo for jpg file.

Though gif file has the advantages of being small and with transparent background, it suffers with its limitation of colors and the capability of modification.

I advice to use jpg file for advanced modification before to transfer it into gif file, if it is necessary. (For example, you need gif files to render animated graphics.)

See Advanced Skills of PhotoImact for more tips.

在傳統媒體時代，視覺識別標幟系統必備的，就是標誌(Logo,標準字+標準圖案)、橫幅(Banner)。橫幅就是大標題的底版，是表現媒體風格與環境布景主題的主要物件。

進入網路時代，個人化媒體得以生存發展，又誕生了個人網路識別標幟系統，而其中物件，有些需具備固定規格，以下將以統雄老師的「統雄網群識別標幟系統」為範例介紹相關物件。

網路時代識別符號通用物件與規格

General Identity System Symbols in Web Era

在網路發展過程中，有些網路識別符號，逐漸形成了通用的規格，最常使用的物件與尺寸、適用規格如下表。

本系列講義，並將特別介紹：核心標誌、Favicon 網站識別圖示、網頁橫幅，與動態導覽按鈕的設計與實作。

隨著螢幕解析度多元化、瀏覽器縮放功能彈性化後，除了Favicon 網站識別圖示仍有全球性固定規格外，當前其他物件，已愈來愈自由化，可自訂尺寸了。當然，如果加入特定社群，該社群還是可能存在社群內標準規格。

標誌符號	尺寸 (px,像素)	適用規格
	16*16	Favicon 網站識別圖示
	27*26	按鈕
	52*50	正方形
	80*80	基本核心標誌，要能 與各種物件組合應用。
	143*59	Google標準
	220*65	1024*768解析度，3 欄式常用規格。
	124*112	社群大型標章
	46*40	留言用功能性動畫圖示
	66*120	象徵秘訣功能性動畫圖示
	140*35	可變色動態導覽按鈕
		600px*85px 網頁橫幅 HTML5 尺寸
850px*85px 網頁橫幅，這是在螢幕解析度多元化、瀏覽器縮放功能彈性化後的可個人化尺寸。
網站全欄頂圖 1200px * 446px 高度可彈性
內文區主圖 600px * 230px 高度可彈性
1050*390 px，臉書 facebook 個人網頁頂圖尺寸。
820*428 px，臉書 facebook 社團網頁頂圖尺寸。唯臉書社團尺寸經常不告知而變動，造成不少困擾。
更多：布景主題‧橫幅導覽‧風格元件範例

Core Logo 核心標誌設計

核心標誌是指識別標幟系統中最基礎的部分，同時是可以和其他物件組合的部分。

核心標誌視覺設計４元素構想

對閱覽者，是先看到視覺結構、再導引出視覺意涵；而對設計者，是先確認視覺意涵、再發展出視覺結構，兩者在設計時，是平行創意的。

視覺結構

標誌「正格設計」的結構通律

如果希望標誌同時包括標準字與標準圖，在沒有「天才與靈感」的時候，有一個「正格設計」的通律：字、圖重疊，使得標準圖以底座的形式出現。

我們在前面的成功標誌展示，已發現許多這樣的範例。

統雄老師的「TX 社群」核心標誌，也由標準字與標準圖共同組成，並採立體重疊造型，文字凸在底座之上。

視覺意涵

標準圖：從「統」字取意，「統」有統一、一致、圓滿的引申涵義，所以採用「同心圓」造型。

標準字：使用「統雄」的英文「TX」。

注意：識別系統的「識別」就表現在「意涵」設計上。

視覺動力

借意地球立體運動，文字作圓弧變形之個人化，配合圖形以營造圓球型的立體感。 

視覺色彩

因本社群目標是研究與教學，所以採用具備理性的藍色，以及強調對比而配合其互補色黃色，作為雙主色。

色彩獨立性測試：灰階版

設計同時考慮「色彩獨立性」，在以黑白/灰階顯示時，也能保留視覺識別能力。

1.2 代版：變形技增強版。

「TX 社群」核心標誌 1.2 代版，主要是變形技增強版。

因為並沒有改變設計的基本統一元素：即結構與意涵，故稱為 1.2 代版。

同代而只有變化元素調整者，還是視為共同存在，視需求而可靈活應用。

手繪版

以上是使用繪圖軟體所設計的幾何造型版，線條嚴謹，適合第一標誌，表達較正式的用途，如代表「統雄社群」「統雄主題網站」等。

相對於幾何造型，使用手工繪製的標誌會更具個人化、更有輕鬆感，必要時可作為第二標誌，如代表「吳統雄」個人的大頭貼。

這種大頭貼，可用在各種社交網站、部落格，如臉書等的個人網頁上。

核心標誌設計實作範例

圖示的類型與規格  Icons Definition and Standards

圖示有2個意義：第一、是一種常用、共用、表達特定意義、尺寸較小、型式簡單、類似象形文字的繪圖。就此意義而言，可用各種圖形格式設計。

第二、是一種檔案格式，以.ico為副檔名，在微軟系統中，是可執行物件（程式、選單、網頁行為…）所搭配的視覺指定格式。高級繪圖軟體均可支援此種格式。

自創圖示設計

網路常用分享圖示庫

網站識別圖示 Favicon.ico

網站設計中最重要的 .ico圖示就是網站識別圖示 Favicon.ico，具備全球性固定規格16*16 px 像素。

Favicon stands for "Favorite Icon" that highlights your URL while ico is a Window's graphic format.

Favicon.ico is a 16*16 graphic such as "".

An introduction is at:

http://www.thesitewizard.com/archive/favicon.sHTML

There are many online generators that help you to convert gif into ico such as:

http://www.favicon.cc/

Favicon: ISS for TX URL 統雄網群網址圖示

16*16

A combination of "T" and "X".

網址圖示是瀏覽器網址所呈現的特殊規格，由於尺寸小，所以當一般專用標誌較大時，就必須另行設計。

統雄老師的設計理念，是由"T"與"X"，以前景、後景重疊的方式重疊組成。又因為原始淺黃色在面積太小時會看不見，所以改用金黃色。

創意標幟範例

識別標幟系統與標準字實作

參考連結

標誌設計 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