數位繪圖/數位美工

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

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

在網站設計中，各種共用物件，是網站視覺識別的主要角色，常合稱為「布景主題」。其中「橫幅、與導覽」為基本必要2物件，經常合為一組設計。

橫幅的空間較大，故常與風格元件組合，最常用的就是標誌 (Logo)或其變形。

而導覽空間較小，故常僅組合適當的風格物件。

「橫幅導覽組」

Banner and Navigation Bar Design

布景主題風格環境設定：樂水系列

布景主題的設計程序工程為：依據知識美學的風格論，應先企畫「風格環境主題」，再設計「橫幅、與導覽」的各建構物件，能夠表現風格，並應能與「Core Logo 核心標誌」組合。

再依據知識美學的統一與變化論，在一致的思想上，發揮不同變化，以形成系列系列。

以統雄老師的網站視覺識別「橫幅導覽組」系列為例，風格環境布景主題設定為：樂水系列。

解說如下；統雄樂水。
統雄的人生追求是「多元學習‧獨立好問」，好學合西方「愛智 Philosophy」之意，也效東方「智者樂水」之情。故視覺辯識系統，均以「愛智者樂水」系列為之，表達雖不能至，然心嚮往之。 

什麼是橫幅 Banner

橫幅就是「標題的文字、圖案與區塊的整體設計」，通常會包括：標誌或識別圖示、識別主色。經常採用「組合」方式製作。

橫幅的設計根據視覺設計4元素，與識別系統特性，從而企畫造型重點如下：
結構：組合式：標誌、加背景底框、加選擇性物件，然後個別加上標題。
意涵：形式：在已定的風格企畫下，掌握識別標幟系統特徵。內容：分作實題：重點解說式、應簡潔；虛題：趣味聯想式，可雅可Kuso；或可主副並用，先虛後實。甚至對仗題、摘要題…形式可變化多端，而風格應不離其宗。
動力：產生於標題的吸引力。
色彩：優先使用識別主色。

什麼是縱意橫幅 Web Doodle

縱意識別設計/素人識別設計

Doodle 是老詞新意，是由 Google 首先使用，故以 Google Doodle 聞名，其實就是網頁橫幅的變化、變形、與更自由的、延伸性的設計。

Google Doodle 的第一個作品，動機可稱偶然，是在1998年為「火人祭」活動設計的（如下圖），造型也可稱很業餘、或很素人--不過，這也正是網路文化的一部分。

Google 發現效果不錯，此後每逢的節日、紀念日、有成就的人物生日…等，就外包專用的臨時橫幅設計。至2000年再成立「Google Doodles」團隊，將 Doodle 視為正式產品，也徵求使用者投稿、並舉辦競圖活動。

Google Doodle 一般直譯為「Google 塗鴉」，應有扞格之處。塗鴉的語意是隨便、潦草、不經意；但Google Doodle 是有條件的，在結構上，一定必須包括商標名稱「Google」；在意涵上，尤其必須有獨特的目標；亦即，在技法上可寬鬆，在創意上有要求。

所以統雄老師建議譯為：縱意橫幅。它本來就是橫幅，有橫幅必須達成的任務，但在設計元素、技法、視覺呈現上，可以更随心所欲地、「縱意」設計。

Doodle 一詞在美語的演化過程中，也迭有變遷，最早是土包子，後來有浪子的意思，而再演化出來的 dude，更有我們口語中「帥哥」的意味。

Doodle 並不限定 Google 專用，任何網站都可嘗試網站縱意橫幅(Web Doodle)的設計。

本系列專文中，也會介紹到有縱意橫幅設計理念的作品。

什麼是導覽 Navigation

導覽 Navigation 的功能與程式設計，將另以「導覽列與導覽按鈕設計」系列專文介述。

導覽列上的「導覽按鈕」，則為布景主題設計的核心物件之一。

橫幅導覽組設計範例

以下是「樂水系列」風格，橫幅導覽組設計範例，橫幅通常有2種以上規格。

縱意頂圖設計範例

Social Media Doodle Samples

在網站設計上，跨全欄且置頂的是為頂圖。

頂圖亦可縱意化，且既然是系列，就要有統一元素的「風格物件」，與變化元素的「識別物件」。

這一系列的「風格物件」是統雄老師研究與教學網站的「智者樂水」。

統雄教學研究社群

統雄教學研究社群的「識別物件」，是以「遠洋探險/知識探險」取意，以7位改變歷史的老師為中心，搭配巨浪的挑戰。

數位文創社群

數位文創社群的「識別物件」，是以「彩天石」取意，以女媧彩石補天為中心，搭配視覺宇宙與山海洪荒。

另有子分類頂圖：微電影/數位視訊、網路文創與優化網站。

數位音樂社群

數位音樂社群的「識別物件」，是以「音樂的行雲流水」取意，以水中精靈演奏為中心，源源不絕之性靈滋潤。

社會科學/人類行為研究與第3類知識社群

社會科學/人類行為研究與第3類知識社群的「識別物件」，是以「南無大悲觀世音，願我速知一切法」」取意，以千手千眼觀世音所居之「海上仙山」普陀山紫竹林為中心，搭配觀世音所傳之「蓮花妙法、大明咒」，其內容「唵嘛呢叭咪吽」其實就是蓮花咒，以求大智慧。

資訊管理社群

資訊管理社群的「識別物件」，是以「西方智慧的源起」取意，以科技版的創世紀象徵「創造亞當」為中心，搭配樂園形成之初的宇宙山河。

網路使用行為與電子商務社群

網路使用行為與電子商務社群的「識別物件」，是以「銀河鵲」取意，以鵲橋為中心，搭配網路宇宙。

網路教育社群

網路教育社群的「識別物件」，是以統雄老師開發的「金蟠桃」網路教育平臺取意，以西遊記為中心，搭配取經挑戰的荒漠與宇宙。 

投票行為與選舉預測社群

投票行為與選舉預測社群的「識別物件」，是以「玄水淵（古代占卜之處）」取意，以大白鯊為中心，暗喻選舉的競爭，搭配洶涌波濤。

人文素養與公民素養社群

人文素養與公民素養社群的「識別物件」，是以「扛鼎」取意，鼎為至尊禮器，象徵制度宗法，同時紀念統雄老師曾以導入民意調查、獲得新聞公共服務金鼎獎，搭配日月光明、渡海伏波。

社交媒體 縱意橫幅設計範例

Social Media Doodle Samples

當前的社交媒體與部落格，多會提供「頂圖」、「主圖」的空間，給使用者發揮。以下以Fb 臉書為例，分享一些範例。

Fb 的網頁結構規畫，是以「頂圖」兼橫幅，故空間處理較多限制，又通稱「封面」。

「頂圖」區，有些固定區域，會被Fb 的大頭貼、標題…等占據，所以設計必須注意避免衝突。

節慶與親友活動縱意頂圖

1050*390 px，臉書 Facebook 個人網頁頂圖尺寸。

臉書 Facebook 個人網頁頂圖尺寸，官方公布為 850*315 px，但由於 fb 會壓縮圖片，且壓縮效果不佳，建議原稿以1050*390 px 為宜。

而Fb 的氛圍則近客廳聊天、往來有一點沾親帶故，所以風格環境的設計，也朝向家庭化。

注意：Fb 的平面規畫，是「頂圖」區兼橫幅，且與「標誌區」--即大頭貼重疊，所以設計時，不必重複組合標誌，倒是必須讓開左下角的大頭貼空間。

縱意橫幅的設計核心，就是「配合時節」、或是個人化的活動，如範例之一的「國小畢業50年聚」。

母親節

父親節

春節

雙十國慶

臺灣光復節

行憲紀念日

123 世界自由日

國父孫中山先生紀念日

蔣經國先生紀念日

823 炮戰紀念日

國小畢業50年聚

演講活動

演出活動

fb 社團封面‧真正實用尺寸/橫幅設計範例

臉書 Facebook 社團封面/網頁頂圖尺寸：原稿：1640*856 px 可用：1540*664 px

fb Group Banner's Real Practical Size 

fb 的網頁結構規畫，是以「頂圖」兼橫幅，故空間處理較多限制，唯中文經常譯為「封面」。「頂圖」區，有些固定區域，會被Fb 的大頭貼、標題…等占據，所以設計必須注意避免衝突。

而 fb 的網頁範本又有多種，其中「社團」封面/橫幅之尺寸標準，最被垢病。

真正實用尺寸的上傳原稿為：1640*856 px，但可用範圍為：1540*664 px。

雖然 fb 官方宣稱任何 1.91:1 的圖片都可以，但除了 1640*856 px 以上者可用，其他較小尺寸效果均不佳。同時，可用範圍只有：1540*664 px，上下超過範圍會不顯示。但如果上傳1540*664 px，畫面會被更為扭曲。原因在於 fb 在技術（包括：跨平臺 (RWD)、壓縮…）與設計（如視覺結構）兩方面均功力不足，且兩者缺乏合作融會能力。又，其資料庫管理、即資訊排列與查詢…等，表現也很不理想。

創意標幟範例

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

參考連結

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