關閉導覽列 Close Menu
數位文創
English
吳統雄
數位美學
電子書
數位視覺
優化網站
微電影
數位文創管理
大學青年網誌
研究目錄
教學課程頁
討論區目錄
站務與協助
☰
│吳統雄
履歷 研究 教學 服務 榮譽
│社科
第1類知識 第2類知識 第3類知識 研究方法 統計分析 選舉預測 選民結構 人類取用行為 國際研究團隊
│資管
管理‧經濟 貨幣主義 數位貨幣 資訊系統開發 電子商務 網路教育 數位電視 產學合作 就業進修
│文創
數位美學導論 數位出版/電子書 視覺設計 優化網站 數位視訊/微電影 數位文創管理 大學青年雜誌
│電音
數位音樂作品選 被禁唱的民歌手 雄歌經典音樂廳 數位音樂教學 音樂知識美學 點歌與樂譜下載 我唱我歌專欄 歌曲評論專欄
│人文
公共評論 法律評論 社會評論 教育文化傳媒 科技科普評論 美語樂學 文學創作 萬象現代(NBA) 資訊社會 幽默人生
More
社群地圖 社群新聞
統雄樂水
數位繪圖/數位美工設計

視覺識別標幟系統 設計思想演變
Evolution of Visual Identity System Design

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

視覺識別標幟系統的觀念,自有人類社群組織出現便已發生,最原始的型式就是圖騰 Totem,是將某種動物、自然、天文或想像物體視作與本氏族有特殊關係的崇拜行為,是原始宗教的最初形式,大約出現在舊石器時代晚期。圖騰 Totem 一詞雖來自西方(對美洲古文化的研究),但在中華的商周遺跡中,已有圖騰 Totem 現象的具體存在,所以是一種跨文化的人類行為。

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


VIS 設計演變

由繁複而入簡約

視覺識別標幟系統 VIS 設計思想演變趨勢,就是「由複入簡」,如以下的例證:清末金龍旗、北洋十二章、中華民國青天白日、美國遊騎兵團盾章、美國職籃識別標誌演變…等。

視覺識別標幟系統的進階主題,則包括:

網路時代視覺識別系統
通用符號與規格
Core Logo 核心標誌
Favicon 網站識別圖示
標準圖案設計實作
元件設計師

標準字設計與文字工具
造型家族:變形‧扭曲

Logos of Modern Chinese

中華近代識別標誌

中華近代標誌的演變,也恰巧可以反映識別系統設計思想的改變。

清末金龍旗

清末金龍旗

設計分析:圖畫式,古典設計思想主流。

結構與意涵:黃底藍龍戲紅珠圖。

黃龍旗初為軍旗,呈三角形。1888年(光緒14年) 經慈禧太后選定為大清國旗,也是中華史上正式確立的第一面國旗。

「黃」本義為「光」,黃帝就是太陽光明的化身。據五行學說,中央屬土,黃色,自唐代起黃色成為帝王專用色。龍是中國文化的一個象徵物,自稱龍的傳人,先祖都神化為龍的形象。 

民初北洋政府國徽:十二章

民初北洋政府國徽:十二章

設計分析:圖畫式,古典設計思想。

結構與意涵:中國古代禮服上常見的十二種花紋。

十二章是歷代服制,天子十二章,按品位遞減。日本、朝鮮禮服也跟進。
1912年中華民國臨時大總統袁世凱指定研擬國徽圖案,1913年2月教育部發表,結合日、月、星辰、山、龍、華蟲、總彝、藻、火、粉米、黼、黻12種吉祥紋章的圖樣。

其中華蟲是雉雞,即鳳凰。宗彝是古代宗廟祭把所用的酒器。 藻取潔淨之意。 粉米是白色米形花紋,取有所養之意。黼是黑白相間如斧形的花紋,取割斷、果斷之意。黻是黑青相間的如兩弓相背形的花紋,取其辨別、明察、背惡向善之意。

中華民國國徽:青天白日

中華人民共和國國徽

中華民國國徽:青天白日

設計分析:圖示式,超越時代的簡潔現代設計思想。

結構與意涵:青色代表光明純潔、民族和自由;白色代表坦白無私、民權和平等。日出東方光華四射,普照全球。 十二道光芒,代表一天十二個時辰,自強不息。

這是「本思想世代」的「圖示式」設計,在視覺結構上有:簡單、易組合性。擁有視覺動力:有立即衝擊、立即烙印(容易記憶)感,以及能夠立即仿製的能力。在色彩設計上,更具備色彩獨立性。

原為革命先烈陸皓東,在民國成立前所設計的革命標誌,可以說是超越時代的簡潔現代設計思想。民國十七年(西元1928年)被確定為國徽。

中華民國國徽與中國國民黨黨徽相似,不同處在於國徽中的「白日」形狀較小,而國民黨黨徽的青天白日是與邊緣相連的。

大陸國徽對比

大陸的國徽,是由被譽為民初才女林徽音所設計的,屬於上一「思想世代」的「圖畫式」設計,細節太多,不易立即烙印,也欠缺能夠立即仿製的能力。

美國陸軍第75遊騎兵團盾章
75th Ranger Regiment

美國陸軍第75遊騎兵團章

設計分析:圖示式,標誌應具備「易組合性」在此案例中充分展現。

結構與意涵:左上角是中華民國「青天白日」,右下角是「美國銀星」,紀念第二次世界大戰期間,遊騎兵與中國軍隊在緬甸戰區的作戰經歷。中央紅色閃電象徵遊騎兵善於的突擊作戰,上方代表對緬甸的記憶。 

美國陸軍第75遊騎兵團(75th Ranger Regiment),常被簡稱為遊騎兵(Rangers),與三角洲特種部隊、海豹特種部隊合稱為美軍三大特種部隊。

該部隊最輝煌的戰史為與中國部隊共同擊敗了日本侵略軍,且中國對這支美軍部隊曾有數度「救命之恩」,因此該將中華民國國徽永遠銘刻於徽章上。

遊騎兵的特色隊呼為:一位遊騎兵說出「Rangers, lead the way」之後,另一位就會接上「All The Way!」 整句話就是「遊騎兵開路先鋒,勇往直前!」

美國國徽與軍徽源遠流長,也是屬於複雜的圖畫式設計。在南北戰爭後,威爾遜總統設計了表彰戰爭英雄的「銀星勛章」,其中的「銀星」元素,具備各項 Logo 標誌的要件,逐漸成為各軍種的核心統一圖示。

緬甸軍政府國旗

緬甸軍政府國旗

設計分析:大結構類似中華民國國旗,主標誌有大陸 5 星意涵。

1962年-1974年,為吳尼溫之軍人獨裁統治,確立一黨專政,實行緬甸式社會主義,並排華、排印。
但吳尼溫本人是華裔客家人,他採用的國旗,兼有中華兩岸國旗的元素。
1988吳尼溫改任太上皇,隨後部下叛變,2002在軟禁中去世。難怪獨裁者都緊咬權位,絕不放棄,至到被部下所殺。


50 大著名識別標誌演變‧前後比較

www.boredpanda.com/ 曾經選出50 大著名識別標誌演變、與其前後比較,大體趨勢都是「由繁複而入簡約」。

除了該網站自己的作品外,實質第一名,就是前章介紹過的 Apple 蘋果。

前章介紹過的其他幾個識別標誌,也因所見略同而入列如下。

簡化為單一標準字、或標準圖

識別標誌演變

Canon 於 1933 創辦時稱為 KWANON,音近日文 かんのん,意思是觀音,期許如觀音大士創造出世界上最好的相機。 當時的標準圖,是典型的圖畫式設計,標準字則設計成火焰形象,後來才簡化為「Canon」。

識別標誌演變

IBM 於1888成立,原名Computing-Tabulating-Recording Company (CTR) 計算列表紀錄公司,當時的標誌是圖案式組合,除了 CTR 3個字外,並加上圖形顯示售賣電子計時設備、打孔製表機、打卡紙帶。1924年才改名為 International Business Machines, IBM,新公司還是採用圖案式設計。

1946 設計師 Paul Rand 使用了3個字母 IBM的 Logo 設計,是為「極簡」造型的先驅,被認為帶動了1950年代後設計的方向。但 Paul Rand 還是不滿意,他自評這三個字母 看起來有的粗有的細,很不協調。終於在1972年再修改,以 8 條紋建立起了視覺的平衡,同時產生了節奏感的視覺動力,主色為藍色,則代表了科技的理性。 

識別標誌演變

1881年建立的 Eastman Dry Plate Company 伊斯曼乾版公司,於 1907 改名 Eastman Kodak Company 伊士曼柯達公司,並推出以 EKC 組成的圖案式商標。2006年,柯達一連串業績下滑危機,只能結束相機業務,並且力圖尋求新的利潤來源,而改為全標準字的 Logo。

Kodak

不過柯達於2016又捲土重來,新標準卻是回復他們上一代、也就是巔峰時期的圖示式設計,這也是設計史上少有的「復古」行為。

識別標誌演變

由圖畫式而圖案式‧由圖案式而圖示式

識別標誌演變 識別標誌演變 識別標誌演變 識別標誌演變 識別標誌演變

原設計之元件、細節簡化

原始設計風格定位沒有巨大改變,但將建構之元件、細節簡化,同時也調整各種視覺元素。

Disney 除了刪除原有的 Walt 之外,原始的黃色,通常不是優先的第一主色,所以換成黑色,並且達成「色彩獨立性」,提高了特定變化使用的便利性。

識別標誌演變

Snapchat 將細節刪除,並取消背景漸層。

識別標誌演變

Visa 刪除2副色區塊,但標準字加上微漸層。

識別標誌演變 識別標誌演變 識別標誌演變 識別標誌演變

強化結構、意涵、質感

在強化結構方面,企業組織幾乎都有往「幾何感」發展的趨勢。

Shell 與 Bored Panda 原來都是手繪設計,個性比較趨向個人(individual),而幾何造型較易表現質感,也較有組織、公務的性格。

識別標誌演變 識別標誌演變

CocaCola 的原始標誌,幾乎稱不上「設計」,只是平凡的市售字。因此改為有歡樂意涵,結構、動力、色彩,均能呼應的當前標誌。

識別標誌演變

強化動力

Walmart 已在前章介紹,當然除了強化動力,也強化了標準字、色彩對比。

識別標誌演變

Pampers 也是由幾無設計,針對主要客戶改為有童趣的標準字,並以「愛心之光」強化動力。

識別標誌演變

強化「特殊系統應用」需求

以下:Volkswagen、Audi、Mazda 都是汽車,也不約而同,改用了具備:立體結構造型、圓形流動意涵、科技銀色的設計建構物件。

識別標誌演變 識別標誌演變 識別標誌演變

強化國際化

Nintendo 由漢字改為英文,應是以國際化為主要考量。

但近20年來,在國際設計上,漢字其實逐漸有被認為是具設計潛力的物件。

識別標誌演變


NBA Logos' Evolution 美國職籃

聯盟識別標誌演變

NBA 美國職籃聯盟識別標誌,自1969制定後,歷48年,只在2017演變過一次。

而組成標誌的 3 物件中,只改變了 2 項?請問是哪 2 項?效果如何?

新標誌也發揮了更多「標誌的組合功能」。

NBA Logos' Evolution 美國職籃

各隊識別標誌演變

美國職業籃球 NBA 各隊識別標誌,除了1隊,各隊均曾經改變。

除了火箭隊的最新標誌有圖示意味外,其餘都是圖案式,或圖畫式。

演變過程中,可以看出有:由複入簡,以及由手繪感往幾何感的趨勢。

只有芝加哥公牛隊的識別標誌、與標準色:紅色,從來沒有改變過。第一次抉擇,很重要!

NBA Logos' Evolution 美國 NBA 各隊識別標誌演變


Batman Logos' Evolution for 80 years

蝙蝠俠80年來識別標誌演變

美國蝙蝠俠80年來識別標誌多次改變,讀者可以評論其設計理念演化的結構、意涵與效果嗎?

Batman_Evolution

腾讯識別標誌演變腾讯識別標誌演變與其組合應用
网易識別標誌演變网易識別標誌演變

創意標幟範例個人網路識別標幟系統:物件規格與範例

創意標幟範例創意標幟範例

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


參考連結

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

回頁首 Up to page head 至相關主題 Go to related pages
上一頁 Back to previous page 回頁首 Up to page head 下一頁 Go to next page

留言區因雲端系統重整,暫停開放。敬請以電子郵件留言。 同類別內相關主題

數位文創線上講義總目

數位文創目錄 數位美學‧數位文創導論目錄

Introduction to Digital Aesthetics and
Digital Contents/ Cultural Content Creation

數位文創目錄 數位文創製作管理目錄

Project Management in
Digital Contents/ Cultural Content Creation 

數位文創目錄 數位視覺設計‧影象處理目錄

Visual Design and Digital Imaging
Design and Production

數位文創目錄 數位出版(DTP)設計製作目錄

Digital Publishing/ Desktop Publishing
Design and Production

數位文創目錄 網路文創設計製作目錄

Web-based and Interactive Cultural Creation
Design and Production 

數位文創目錄 數位視訊設計製作目錄

Storyboard and Digital Video
Design and Production 

數位音樂特區 數位音樂特區目錄 TX Midi Zone

Listening Design and Digital Music
Design and Production 

數位文創目錄 數位文創設計製作習題

Exercises and Hand-on Works in
Digital Contents/ Cultural Content Creation 

數位文創目錄 數位文創庫存講義目錄

Achieved Readings and Deprecated Techniques

創用 CC 授權條款 此作品衍生自「統雄網路社群 TX Web Community」,由 吳統雄 Sean TX Wu 製作,以 創用CC 姓名標示-非商業性-相同方式分享 3.0 Unported 授權條款 釋出。此條款之授權同時適用於 https://seantxwu.pages.dev/ 下,與 http://tx.shu.edu.tw 下,除特別標明外之所有媒體形式著作物。
本網群為公益服務,瀏覽者須接受以下聲明方可瀏覽: 著作權聲明-Copyright © 吳統雄: 申請引用資訊- 免責聲明- 鳴謝:本網路社群之開發曾受國內外機構、包括臺灣大學補助。

Copyrights of TX Web Community This is a public service web community under a "Creative Commons" license. You must accept the following statements before entering: Copyright © Sean TX Wu, All Rights Reserved. Request for Citation, Disclaimer, and Acknowledgement.
內容網站:提供與分享各種知識、資訊、作品。互動群組:社員可以討論、展示、交流、企畫、分工、管理、投票決策。合作群組:Web2.0的民主自治精神,社員可以參與決定群組的內容與表現形式。

吳統雄的音樂-Sean TX Wu's Music  笑話中學美語-Humor and American English Learning   私人來信-Write a private mail to Sean TX Wu  留言與討論 Leave Comments/ Forum 吳統雄的相簿-Sean TX Wu's Album

只在「統雄社群」內查詢以下主題 Search in TXCommunity

統雄網群的Google排行本站Google排行榜‧全球冠軍
當代實用美術/視覺設計
印象派 Impressionism
後印象派 Post-Impressionism
前印象派 Preface to Impressionism
新印象派 Neo-impressionism
表現主義 Expressionnisme
野獸派 Les Fauves
抽象表現主義 Abstract Expressionism
立體主義 Cubism
歐普藝術 OP Art
拼貼畫技 Collage
普普藝術 Pop Art
複合主義 Multiplexism
創意媒材 Creative Media

當代實用藝術作品品析
洪通 跨時空而通的素人畫家
Barry Kite 異常拼貼畫
Jeannette Guichard-Bunel 法國浪漫
Santosh Chattopadhyay 印度異情
Mike Butkus 數位色彩全設計
Kellie Day 40歲開畫不晚
寫實主義 Realism
劉溢:魔幻現實主義
冷軍:極端寫實主義
曾浩:敦煌元素再發揚
謝楚余:女性圖西構東意

數位繪圖/美工設計建構
PhotoImpact 設計實作
數位圖片色彩導向實作
數位圖片檔案轉換實作
多選取區與物件實作

視覺識別標幟系統
Log 標誌設計元素
標準字
標準圖案分類
識別占有性
VIS 設計思想演變
清末金龍旗
北洋十二章
中華民國青天白日
美國遊騎兵團盾章
著名識別標誌演變
美國職籃識別標誌演變
蝙蝠俠80年來識別標誌演變
視覺識別標幟系統應用專域
紋章學
旗幟學
創意標誌品析
變形技術
反相技術
網路時代視覺識別系統
通用符號與規格
Core Logo 核心標誌
Favicon 網站識別圖示
標準圖案設計實作
元件設計師

標準字設計與文字工具
造型家族:變形‧扭曲

布景主題與風格物件
縱意橫幅設計 (Web Doodle)
專用圖示設計
圖示評論
個人化社交卡設計
數位貼圖設計
票證設計

網頁橫幅實作
gif 透明檔案處理技巧
動態導覽按鈕
手繪視覺識別系統設計
西方手繪視覺識別系統
中華手繪視覺識別系統紋飾
其他國家的手繪VIS
手繪版「大頭貼 Logo」設計
手繪與數位的整合應用
素人創意漫畫
取用模式研究國際團隊 Adoption Modeling International Research Team 合作群組取用模式
國際研究群
吳統雄的研究、教學、與作品 Sean TX Wu's Research, Teaching and Art Works 內容網站第3類知識
互動群組研究方法
內容網站數學樂學
內容網站美語樂學
內容網站人文社會
互動群組產學合作
資訊管理/資訊科技/資訊系統 Information Management/ Information technology/ Information Systems 合作群組資管教育
互動群組資訊管理
內容網站電子商務
內容網站網路教育
數位文創 Digital Cultural Content Creation 內容網站數位文創
合作群組大學青年
合作群組數位電視
互動群組美學實驗
數位音樂 Digital Music 內容網站數位音樂
內容網站社會參與
內容網站文學創作
投票行為、選舉預測與其他行為研究 Election Prediction and Other Behavioral Research 內容網站選舉行為
互動群組其他專題
第3類知識 The 3rd Knowledge 合作群組接龍實驗
互動群組招親實驗
互動群組公投實驗
互動群組量尺實驗
互動群組舞者實驗
年度20大點播音樂

偶然
金蟠桃
水調歌頭
請你,天明再離開我
點燭
別離
挖呀挖
稚情(嫦娥)
天亮歌
願意
墟
思念
華靈廟
Panda
團團和圓圓

相逢
媽媽的愛心
從此
笑笑歌
幕落(必然)
上山打野狼

研究與講義目錄

研究方法講義目錄
統計多變項分析講義
資訊管理講義目錄
數位文創/數位內容講義目錄
數位音樂講義目錄
產學合作-就業進修講義目錄
人文素養-人與社會講義目錄
人類行為+資訊管理研究目錄
網路使用/電子商務研究目錄
網路教育研究目錄
數位音樂作品目錄

在「瀏覽時間」前50%以內,剔除工具頁(如SharePoint應用)、簡介頁(如統雄曲目)、互動頁(如討論區)。粉底文章亦同屬年度20大瀏覽時間。

統雄-統計神掌 因素分析篇
性幻想行為簡說:格雷的五十道陰影
作業流程圖範例
UML
:統一塑模語言與流程圖

信度與效度分析
統雄-統計神掌 共變數分析篇
統雄-統計神掌 調節模型篇
統雄-統計神掌 多元迴歸篇
投考-甄試研究所之自傳秘笈
統雄-統計神掌簡單迴歸/相關分析
統雄-統計神掌 變異數分析篇
MIS:管理資訊系統
多氯聯苯大追兇
和聲與和弦進行設計
統雄-統計神掌SPSS篇
統雄-統計神掌中介模型分析篇
學術論文寫作法
統雄-統計神掌因素效度分析篇
研究所甄試之研究計畫秘笈
統雄-統計神掌多變項精華篇
問卷設計流程圖-範例
電子郵件亂碼的解決
統雄-統計神掌易筋經
定量方法對定性方法
統雄-統計神掌因徑/結構方程模型1
六藝:多元學習的詮釋與實踐
個案研究法/參與觀察法
文獻研究法
和聲與和弦分析
實驗法、準實驗法
歷史記錄

在「點閱數」前50%以內,剔除工具頁(如SharePoint應用)、簡介頁(如統雄曲目)、互動頁(如討論區)、與已經出現在同屬「年度20大點閱數」之頁。

網路使用行為研究方法
視訊後製作程序
爸爸
大學青年‧網路雜誌
網頁3大基本語言與編輯軟體
科學知識產生的程序
打二房別亂了套 
1篇30年後引起迴響的文章
向老大哥WGA說不! 
知識美學與數位美學 
我,被禁唱的民歌手
金蟠桃 第一幕 樂園
偶然、或然、必然 音樂劇4
接龍實驗-結果討論
MIS專案進度管理甘梯圖
知律,破律,又合於律
真實美語/生活英語選
當代流行歌 又吵又欠缺變化
職業化快閃影片創作品析
驗證式SEM解析篇-計畫行為論
歷史記錄

這裡有我在30餘年教學經驗中的學習與分享。

教改‧我先走了三十年教改‧我先走了三十年
教學的理念、實踐與感受教學的理念、實踐與感受
其實,每個人都可以唸臺大其實,每個人都可以唸臺大
2012總統選舉預測 2012總統選舉預測
大任務‧小使者大任務‧小使者
Fulbright Project Fulbright Project
統雄老師領導的美國喬治亞理工
Adoption Model國際研究群
Westgate FraudWestgate Fraud
e世代公共服務新聞宣言e世代公共服務新聞宣言
虛擬整合校園虛擬整合校園
請將連結不到網頁的網址,寄給統雄老師,謝謝!連結不到網頁

請按此,至友站列表。並歡迎同好加入友站。
回頁首 Up to page head