通用物件規格與範例
General VIS Objects and Standards in Web Era
數位出版/網路文創:識別標幟系統篇-知識美學/數位美學之建構方法
當前數位美工的最常應用就是視覺識別標幟系統，通常包括：標誌 (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~32*32~48*48~... |
Favicon 網站識別圖示，一個檔案內有多種尺寸。 |
|
|
27*26 |
按鈕 |
|
|
52*50 |
正方形 |
 |
80*80 | 基本核心標誌，要能 與各種物件組合應用。 |
|
|
143*59 |
Google標準 |
|
|
220*65 |
1024*768解析度，3 欄式常用規格。 |
 |
124*112 | 社群大型標章 |
|
|
46*40 |
留言用功能性動畫圖示 |
 |
66*120 | 象徵秘訣功能性動畫圖示 |
 |
140*35 | 可變色動態導覽按鈕 |
|
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 像素，當前由於顯示技術提升與跨平臺需求，已至少包括16*16~32*32~48*48 三種規格，而用在其他地方，可以有更大尺寸。
所謂其他地方，包括：
高解析度螢幕（Retina / 4K）：在 Mac 或高階筆電上，網址列的物理空間雖然小，但其顯示像素是加倍的。32
像素在高密度螢幕下看起來會呈現「虛邊」或「毛刺感」。
書籤列與快速存取：當使用者將您的網站加入瀏覽器首頁的「快捷鍵（Speed
Dial）」時，圖示會被放大顯示（通常是 48x48 或 64x64）。如果只有 32
像素，瀏覽器強行拉大後，邊緣會出現明顯的馬賽克或模糊，降低網站的專業質感。
Windows
任務欄與桌面：如果使用者將網頁「安裝為應用程式」或拖到桌面。Windows 桌面預設圖示大小是 48x48。16 或 32
的圖示會顯得縮在一團，或是因為拉伸而變形。
在<head>內加入指令
<link rel="icon" href="favicon.ico" sizes="any">
雖然不加也可以，加入最佳。加上 sizes="any" 是在告訴瀏覽器：「這份圖示就是標準規格，裡面大大小小尺寸都有。」這能減除瀏覽器搜索。
線上轉檔 ico
最簡工具:
https://favicon.io/favicon-converter/
它同時會給網路 ico 和手機的 favicon.png。
ico 是【容器檔案】，屬性可能顯示為 48x48，是該容器支援的最大尺寸，但它包括了3種格式。
如果需要更多對 iOS、Android、Windows 各個平台生成專屬的圖示優化方案，或 svg 檔,可至：
https://realfavicongenerator.net/
Favicon stands for "Favorite Icon" that highlights your URL while ico is a Window's graphic format.
Favicon.ico is a 16*16~24*24 graphic such as "
".
An introduction is at:
http://www.thesitewizard.com/archive/favicon.sHTML
Favicon: for TX URL 統雄網群網址圖示
統雄老師的設計理念，是由"T"與"X"，以前景、後景重疊的方式重疊組成。又因為標準主色的黃色在面積太小時會看不見，所以改用特別色。
新版原稿：
舊版 16*16 記錄。
A combination of "T" and "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
