[Fall, 2011]: 資訊視覺化方法 (Foundations & Methods for Visual Information Design)

資訊視覺化方法: 知識視覺化的基礎理論與案例

(Foundations & Methods for Visual Information Design)

Fall, 2011

本學期的課程分為兩階段，

(一) 對於Visual Information Design的基礎認識與探討，以及案例的介紹與分析。

(二) 透過與IIID協會(http://www.iiid.net/)合作，透過於2011 IDA Congress 台北世界設計大會 (IIID + 2011 IDA)參與協助中實踐對視覺資訊(訊息)設計宏觀的、跨地域性的認識、訓練、與表現。

我們將在第一階段有了基礎的認識(Instructor: Dr. Tingyi)，

並於十月份的密集訓練課程(Instructor: Dr. Tingyi + Mr. Martin Foessleitner)，

本課程目標期盼參與的學員將有中英文雙語的能力於IIID, IDA2011會場與其他Information Design感興趣的人士互動。

本課程學員除了課程學分和課程中的學習、訓練、與互動，

完成訓練課程者將成為IIID於世界設計大會的工作人員，

並得到IIID所發出的正式證書(Certificate)。

報名及相關訊息連絡人 / Enroll the course & Register for being a volunteer, 
you can contact： 采秀 Cai-siou

For more detail or inquiry: email Tingyi
-----------------------------------------

For the fall of 2011, this Visual Information Design course will focus on the fundamental and dynamic discussions in learning what Visual Information Design is. There are two sessions:

(A) Introduction case discussion on the topic of visual information design

(B) Volunteers and training session in the class and in the booth of IIID at 2011 IDA Congress

Possible benefits for the students are (Thanks Martin to manage those possible offers):
- the expo an IIID engagement are part of your course and education
- credits
- certificate of participation
- 2012 IIID membership
- visit the fair
- meet international ID-experts
- train your skills in ID and communication
- will receive a skirt/shirt and daily catering
- free copy pf our hanfbook of ID
- free copy of the IIIDaward book
- invitation to participate at ID-projects

Enroll the course & Register for being a volunteer,
you can contact：采秀 Cai-siou
For more detail or inquiry: email Tingyi

對於醫院標示提出相關改善建議/M9901207 陳廷威

期中時，我們曾提出如何從日常生活中所觀察到的種種問題於期末時提出改善建議。而我所觀察的主題是醫院的動線、標示等問題。由於醫院內進出人員複雜且關係到生命安全，如果能經由精準的視覺標示提出相關改善或許能得到良好效益，希望藉此能加速使用者到所需要的診療科別、地點和設施。

以下提出三點改善方案：

1.動線標示：動線設計改善能讓使用者更快速到達所需位置，利用反光文字標示及顏色管理讓使用者只需沿著以規畫之路線行走遍不會造成迷路或走錯窘境。希望以紅色為主要幹線(急診室 、門診區...等)，其餘以綠、黃、藍顏色來做使用且不可超過七種以免造成使用者混亂和複雜性。















2.科別看版：將看板上加入圖示作為視覺輔助，以利使用者更清楚了解所屬科別並強調其文字和數字所需傳達意念。

3.電梯區分外觀：電梯可能有分為家屬訪客、醫護人員及貨梯...等配置，又在其中細分為只停單、雙數樓層同樣利用顏色管理和文字輔助來作為改善依據，幫助人員使用上操作減少錯誤機率發生。

最後，結束了一學期課程從每次與老師互動集問題討論方式我的腦袋不斷思考，因為並非本科系出身的我可以用另一種方式來思考相當的問題，甚至回答出其意想不到意見而得到不同思考方向是我從這門課程中最棒的收穫，老師真的給我好多東西我也非常珍惜上課中所得到的。

情感溝通的落差與障礙_M9910203 溫哲霆

【情感溝通的障礙】



雖然我們可以透過語言、肢體動作、臉部表情來了解人的情緒。但由於每個人的成長環境、人格特質皆不相同；因此對於情緒的感受與表達也不相同。大致上可以將情緒溝通的障礙(或說落差)分為兩種：其一為單純的感受的落差，也就是每個人對於單一事件的感受不同，情緒用詞使用方式也不同，例如成人與孩童獲得一顆糖果的喜悅便不同，不同人格特質的孩童獲得糖果後所使用的情緒用詞也會不同。

其二是受到外力或社會價值觀與禮教教育所產生的情感壓抑，所導致的情緒溝通障礙。舉例來說，傳統的男人被教育為要內斂，不該喜形於色。於是當這樣的人即使內心感受極大的喜悅、即便他嘗試表達喜悅時，也常常是詞不達意。另一個情形是，亞洲人常被教育成「太禮貌」，即便不悅，當被問起時依然會回答「還好」。這樣的情形不僅是對於人與人之間的情緒溝通形成障礙，也往往使得對於自我的情緒認知產生混淆。

或許這樣的例子看起來在生活中無傷大雅，但這樣微弱的情緒溝通障礙卻常常成為人與人相處間爭執的遠因。

【解決方案】

事實上，所有的人都已在日常生活上尋找感受形容落差的解決方案，最顯而易見也是最容易忽略的便是我們在言語中使用副詞，「很」、「好」、「非常」…等。進階的還有許多人透過譬喻來形容自我的感受，「心情好得飛上天了」。或許這樣的方式的確縮小了理解情緒的落差，然而文字卻是抽象的，每個人的使用方式不同理解也不同。




另一個解決情感溝通的案例便是「表情符號」，這是為了新形態的溝通方式「CMC」所產生的。表情符號的產生除了為了解決新型態的溝通方式，也點出除了言語以外，人與人的溝通是需要更多線索的。




因此站在設計的角度，我認為可以發展出一套系統。尋找每個情緒的最小刺激值為基本單位，以便讓人能將自己的情緒感受以量化的方式呈現。例如我們可以假設將喜悅的感受以撿到一元的喜悅感受作為最小的刺激值，並稱為一個潘尼(penny)的喜悅，所以當兩個人面臨不同的事件，在表達喜悅時用同一種單位表達就能方便理解彼此的感受。然而這樣的測量單位必須透過大量的調查才能達到較客觀的結果。

但最終，這樣的量化其實仍然無法準確的測量人情感。人的情感是錯綜複雜的，即便是喜悅也不只是一種形式的喜悅。但透過這樣的設計活動，是希望能夠喚醒大眾將心比心的想法。讓在這凡事講求快速的時代重新反思，人與人的相處是必須透過時間，互相理解並將心比心，才能體會彼此的想法。

醫療中心指示標識分析-以內湖三軍總醫院為例_M9710304 謝易霆

大型醫療中心設備完善、診療詳細，是民眾健康的信心指標，但也因為醫療系統完整而往往院區廣大且路線複雜，所以院區內指標設計就更顯重要。

因為個人經歷所以選擇內湖三軍總醫院做為分析例子，該院區內的動線規劃以及指示設計並不是很切合人性以及功能性，使得第一次進入的人很容易困惑或是繞了遠路。通常來到醫院的民眾，不是就診就是來探病，心情上本來就容易荒張，再加上初次來到病院那種不熟悉的感覺，很容易迷路或是延誤就診。對於三軍總醫院有以下建議。

機車停車場在院區門口，距離主建物還有段距離，且從機車停車場(院區入口)至主建物之間的步行路程應該新增院區導覽地圖。民眾根據過往經驗，通常會往建築物正面前進，很直覺得認為正面就是入口，而且主建物的外觀設計看起來也有這樣的錯覺，但進入主建物後發現院區正面並不是主建物的正面-門診掛號區。 下圖(院區總覽地圖)進入主建物後才能看到。

主建物內各個入口處應該增置地圖導覽or樓層簡介，下圖之樓層簡介民眾必須走至中心處才找的到。

指示標識的設置過於複雜，在同一處指示標識林立，難以清楚辨認，反而讓使用者產生訊息干擾。指示標識的設計應求統一：院內指示標示只有1F有搭配色彩，二樓以上就只有文字指示，而標示的色彩應該與樓層平面圖做配合。

病院內部視覺信息過多，使民眾視覺困擾，容易越來越慌張。

總結：

醫院應該是要讓人感到放心的地方，但院區內部整體的視覺感受讓民眾無法獲得安定，甚至在住院病房大樓的設計還像是八卦陣，很容易迷失方向。大型醫療中心設備齊全，但也因為如此更為繁雜，就診的流程也不是一般診所可以比擬，從掛號到真正看到醫生這過程中可能已經走遍一半的院區，期間可能要抽血、驗尿、照X光、腦部斷層掃描、核磁共振…等等，需要到不同樓層、不同科別去，民眾帶著慌張的情緒更是容易疏忽、走錯，不僅延誤病患就診時間，也降低醫院的工作效率。醫療中心等級的大型醫院，應該從建築設計開始就須有整套的設計規畫，包含建物動線的安排與指示標識的設計，都應該在不影響功能的情況下考量使用者的心理及行為做整合設計。

漫畫角色特徵分析-以進擊的巨人作品為例 / m9910303 小捲

漫畫角色特徵分析-以進擊的巨人作品為例。

一、前言

最初題目發想是探討生活上視覺設計不當造成的問題，而在我設想了幾個題目後，選擇自己比較有興趣的題目作為探討，即是「漫畫角色特徵不夠明顯造成辨識困難」，由於個人喜愛閱讀動漫畫，在欣賞漫畫時想要快速進入劇情，因此必須很快的辨識出作品中角色的差異性，而日本最近有部漫畫「進擊的巨人」在市面上評價相當高，個人在觀看該作品後卻因為角色彼此間區別性不夠造成角色辨識混淆，造成故事聯貫上的困難，原本以為只是個人問題，爾後在觀看網友評論以及訪問幾位朋友後，發現到多數人具有同樣問題，故選擇以「進擊的巨人」的漫畫作為角色特徵設計的探討。

進擊的巨人(諫山創)

2011年4月漫畫單行本第4冊發行時（日本），已經累積超過400萬冊。

配角個人特徵不夠明顯造成辨識困難。

二、「進擊的巨人」漫畫風格。

日本漫畫文化相較於美國漫畫文化，日本漫畫受到手塚治虫江將助手制度與企業化經營的方式導入漫畫界，為了追求標準化作業流程，大多數的角色都有一定程度的簡化，相較之下美國漫畫則是偏向於寫實而充滿肌肉的英雄主義或者是具有幾何造型的卡通化漫畫，而有獨特風格的香港漫畫角色也是偏向於寫實的手法，故事以武俠、格鬥或黑道居多。因此「進擊的巨人」與眾多的漫畫風格相較下，人物描繪細節上並無陳某的「火鳳燎原」及井上雄彥的「灌籃高手」與「浪人劍客」細緻，也不至於簡化到如哆啦A夢般的簡化造型，屬於半寫實的少年漫畫風格，因此接下來分析的作品範圍就選擇半寫實風格的少年漫畫做為比較。

圖為陳某作品「火鳳燎原」，漫畫風格細緻寫實。

圖為井上雄彥作品「灌籃高手」，寫實的漫畫風格。

三、角色區別的方式分析：

運用簡單的基本設計理論分析如何讓角色有差異性，分別以視覺元素的形狀、大小、色彩、肌理做簡單的探討。

3-1形狀

A.角色身體造型。

一般角色設計上最基本的設計就是在形狀上著手，台灣漫畫家兼迪士尼花木蘭造型師張振益曾經在演講說過，一個好的角色設計，應該是將角色設計完後塗黑，仍有其辨識度，日本知名動畫的神奇寶貝(poke monster)，在怪獸設計就有很明顯的辨識度，因此在進入廣告時會有怪獸的剪影來讓觀眾猜測，而日本漫畫銀魂也在單行本第二十集一百六十九回提及到相關的概念，此外若角色於服裝造型上區別性低，例如屬同組織、同單位或同陣營等，角色群都是穿著同樣的制服，則就必須更加在角色身體造型特徵上著手，尤其是以頭髮形狀上的誇張化作差異性最為普遍，若是特別要強調角色的性別，則會在男女特徵上作突出的設計，例如猛男的肌肉，美女的大胸部。

神奇寶貝(poke monster)即使剪影也容易辨識。

在空知英秋作品「銀魂」中提到「七龍珠」的剪影造型。

B.角色服裝造型

漫畫角色的服裝設計，通常是象徵一個角色獨特的個性，或者代表著該角色職業身分、朝代或者所屬的陣營。美國英雄漫畫角色在服裝造型的設計上相當突出，具有讓觀眾一眼認出角色的辨識度，如蝙蝠俠、神力女超人、鋼鐵人、蜘蛛人，美國隊長等，都有很獨特的服裝造型，而在日本漫畫角色設計上，大多數角色服裝造型是個別設計，與同一個世界觀上其他角色具有差別的，且多數作品的主要角色服裝由始至終不會改變，然而服裝卻也有象徵漫畫劇情的階段性，例如漫畫神龍之謎，初期初出茅廬的主角服裝與過來獲得不同力量的時期造型有很大的不同，具有區別不同時期的主角作用。若說要加強角色不同的差異性，就可以從各種位置的服裝下手，衣服、帽子、耳環、手環、武器等強調角色的自我風格，相對的若是不重要的角色，則不宜有太突出的服裝設計。

美國英雄漫畫角色：蝙蝠俠、神力女超人、鋼鐵人、蜘蛛人，美國隊長

3-2大小

A.角色高矮胖瘦

漫畫角色區別常用的方法也有使用高矮胖瘦，然而近年來走紅的作品漫畫角色正派一方較少體態肥胖的造型，早期的漫畫作品比較會有正派的胖子角色，如哆啦A夢的胖虎、名偵探柯南的小島元太、甲賀忍法帖的鵜殿丈助、無敵鐵金剛的阿強等，現在多數為同樣體型但是身高上有所明顯的差距，如網球王子、幽遊白書等，而高矮胖瘦的設計也關係到角色的個性，多數的矮子個性都是屬於動作敏捷，胖子屬於較遲鈍、偏向丑角的性格，而極瘦的角色則是有性格偏激的頃向。

荒川弘 - 鋼之鍊金術的角色身高圖，通常在進行角色設計時都會將身高圖畫出。

B.角色身體特徵局部大小改變

此外亦有將角色身體特徵局部做大小的改變來區分，例如海賊王的佛朗基前臂有明顯的個人特色，騙人布擁有像木偶奇遇記主角的長鼻子，或是角色彼此間的五官大小改變，眼睛的大小與頭部的比例象徵著角色的年齡，年齡偏幼的角色具有大眼睛的特徵，老年者則因為老化則可能會有像兩邊下垂的眼睛或瞇瞇眼，同時五官的大小不同也牽連到角色性格，眼睛細長的設計通常象徵著工於心計的個性，大眼睛的主角多數是具有熱情奔放的性格，此外近年來則有漫畫作品將女性角色的胸部大小作為角色差異化的設計。

海賊王的造型：長鼻子的騙人布、有粗壯前臂的佛朗基、

強調女性角色胸部的漢考克。

3-3色彩

漫畫的色彩主要為黑白與彩色，常見的日本漫畫與都是屬於黑白漫畫，而美國漫畫與香港漫畫則屬於彩色漫畫居多，台灣則是黑白略多於彩色。

A.彩色漫畫

彩色漫畫最好區分角色差異性的方式就是運用色彩，最好的例子就是在特攝片中的超人戰隊，早期美國的金剛戰士(Power Ranger)，以及日本的忍風戰隊、百獸戰隊等，單取其造型不取色彩則相似度極高，然而套上色彩後可以明顯的辨別出角色，主要二色為紅色、藍色，通常具有隊長身分，充滿理想與熱情、領導能力，另外搭配黃色、綠色、粉紅色、黑色、白色等色彩，通常黃色與粉紅色都是女性角色使用。此外，角色設計上的顏色設計也象徵該角色性格特徵，紅色系往往屬於操控火能力、個性較為衝動、熱情，藍色系偏向水能力、靜態、文靜的個性，但不一定是絕對，最明顯的就是新世紀福音戰士的綾波零與明日香，火影忍者的鳴人與佐助，例外的角色則有幽遊白書的藏馬，擁有火紅的頭髮卻是冷靜的個性。此外亦有膚色不同作角色設計的差異化。

美國的金剛戰士(Power Ranger)，以及日本的忍風戰隊。

左圖為新世紀福音戰士的綾波零與明日香，

右圖為擁有紅頭髮卻個性冷靜的藏馬。

B.黑白漫畫

黑白漫畫論及到色彩區分角色特徵，那就是用色彩的灰階程度不同來區分角色，素描繪畫相關理論提及到，紅色的明度與綠色的明度不盡相同，而在黑白漫畫表現上則是利用網點或填滿黑色作為色彩的區分，例如黑色頭髮角色都會將頭髮塗滿黑色，金色、粉紅等明度較高的色彩則採用留白、或局部網點作為區別。此外也會使用貼網點來區別角色不同的膚色。

東清彥作品「四葉妹妹」，在黑白漫畫表現上，

綠色的頭髮使用淡色的網點，深褐色頭髮則塗黑。

3-4肌理

肌理運用於漫畫角色設計。

A.角色描繪的線條觀感

肌理應用於漫畫角色，即是用線條的感覺來製造肌理，若所設計的角色要讓她性感，更女性化，則在身體的邊線大量運用柔順曲線描繪，相對的若要男性化，陽剛的感覺，則使用有凌有角的直線強調發達剛硬的肌肉，此外亦可將角色骨頭形體描繪出來，強調角色的骨感。

B.角色的生理缺陷或瑕疵。

運用瑕疵形成角色特徵，由於漫畫屬於將寫實簡化後的造型，固捨棄掉許多人體上的瑕疵，如現實中人有因日曬不同而全身膚色不均，皮膚長痘痘或毛細孔明顯，皮膚粗操等，這些通常在漫畫中會簡化，因此可以將這些瑕疵帶入角色的獨有特徵，讓角色具有雀斑、痣、刀疤、胎記等，如陳某的作品火鳳燎原，因為該作品是改編至三國演義，豋場的角色眾多，故很多的角色造型的差異化都是採用刀疤的分布位置，此外，讓漫畫角色在身體上有所缺陷也是種方法，常見的有獨眼，獨臂，更誇張著還有無四肢的角色設計，如甲賀忍法帖的地虫十兵衛。

陳某作品「火鳳燎原」

左起：有特殊胎記的龐統、左臉有二道刀疤的張遼、

有雀斑的孫策，兩眼下方有道長刀疤的張郃。

左圖為伊藤潤二作品「富江」，最大的辨識特徵就是左眼下具有痣。

右圖為藤崎龍作品「封神演義」的黃天化，具有跟火鳳燎原張郃一樣的長刀疤。

四、結論

綜合以上的漫畫角色設計的形狀、大小、色彩、肌理分析，只要特別強化某一個特點即可增強角色彼此間的差異化，然而必須要注意的是若非主要角色就並不需要擁有太多突出的地方，以避免喧賓奪主，反而搶了主要角色的光采。而在巨人的進擊中主要角色並無有辨識的問題，在一開始所提及到所不能辨識的角色為配角，然而因為在故事劇情中配角有獨自的故事描述，因此在該作品中即使是配角也必須要注意到角色彼此間的差異，這四位角色分辨不清的問題，形狀上頭髮，臉輪廓，五官極為相似，服裝上由於屬於軍隊組織，穿著又相同，大小上因為分竟多為單體出現，無法比較身高呈現差異化，身體特徵也無特別強調部分，色彩上膚色、髮色相同，肌理上臉型的輪廓描繪感覺雖有差異，但差異程度仍然不夠，因此只要加強這四點的任一點即可解決角色辨識上的問題。

因為這些配角在形狀、大小、色彩、肌理上差異小，所以造成辨識不易。

Google Map路線指示設計分析以福和橋為例 / M9810210

關於本次設計專題的討論，我選擇了Google Map的路線圖示設計（以福和橋為例）做為研究題目。

打開Google Map，立即查詢路標、地址、欲前往的目的地已經是現代人生活中習以為常的動作，藉由網路的便利性與立即性，幫助我們更快速地到達欲前往的地方而不需要在大太陽底下攤開地圖分不清東南西北方向，揮汗如雨慌張地迷失自己。智慧型手機與Google Map的發明與結合劇烈地改變我們的生活方式，我們不再需要帶厚厚一疊的地圖出門、不再需要在地圖上塗滿方向標記、不再需要浪費時間猜測方位，拿出手機，單薄的見方螢幕立刻為我們指點迷津消災解厄讓我們甚至可以預見未來的路。

但再方便的系統總會有疏忽之處，藉由研究Google Map過程中，我發現Google Map 對於機車騎士以及行人的指示設計並不友善。以福和橋為例。

在永和區往台北市路段關於機車道的設計就有嚴重的指示問題，實際上機車騎士想要從永和區上騎上福和橋必須由成功路一段往台北市方向才能接上福和橋，而非由林森路直接接上福和橋。

在Google Map的圖示上，雖然福和橋路段上標有福和橋機車道，卻僅是〔台北→永和〕機車道。

而〔永和→台北〕機車道則一直要到接近台北市福和橋頭才會分支出來。

我想這對初次行駛福和橋路段的機車騎士肯定感到困惑。甚至永和福和橋頭路段竟然是禁止機車通行，而在Google Map上並無清楚標示同時亦未有任何指示引導機車騎士往成功路一段行駛。

另外同樣的問題也發生在行人身上。從Google Map圖示上欲由永和往台北市方向知行人完全無法得知必須從環河東路三段橋墩處上橋，而福和橋並無開放由台北市往永和區方向行人專用道。

由以上問題可以發現Google Map將路線圖示是設計給汽車駕駛人專用，對於機車騎士或是路人的使用需求並不是那麼重視，不過既然科技是用以服務人群，我認為它便有方便每個不同需求使用者之必要。於是針對以上問題點我試著提出一些改進建議。

針對不同路種做不同粗細變化，如一般道路為一般細線，橋梁為粗細線，高架橋為粗線，單行道為虛線。

可以針對用路需求設置不同的功能鍵，如：行人、自行車、機車、汽車、大眾運輸等，不同的用路需求則有不同顏色指示，點按功能鍵後顯示藉以引導使用者。

Poo Log之APP介面視覺分析 / D9710104劉元媛

人手一支智慧型手機，大家都低著頭緊盯銀幕，幾乎已成一種流行的「APP現象」。在APP store(Android market)中，找合適的APP，就像是交一個新的朋友。每個APP都有它的特質與內涵，設計者要介紹它，讓更多人認識，要讓自己設計的APP能夠吸引到使用者的目光，一開始在APP的icon上就必需要有自己獨到的視覺呈現。因為使用者第一眼看到的就是icon，它必需在非常短的時間內，以圖象的方式讓使用者快速的辨識這個APP的功用與目的。

 
以Poo Log 類型的APP為例，此類型APP雖為記錄型軟體，但本身就帶有較詼諧的特質含意，與其使用較具像的圖案或聯想（Poo or 馬桶 or 衛生紙）做為第一門面，不如讓人莞爾一笑，立即達到吸晴效果。

然而在內容的傳遞上，取APP Store排名第一的【Poo Log】為例，其本身還有許多可以改善的地方，以下為一些視覺傳遞可能影響介面操作的項目與建議：

 
* 介面使用咖啡色為主色調，完全一貫到底沒有變化，有些單調。建議可在不同的功能選單類別上，使用不同的色系，加深使用者對不同選單的操作記憶。
* 在Poo的描述方面，建議使用圖象來取代冗長的描述文字，應能加快使用者點選的速度與記錄時的流暢感。(上圖編號7)
* 統一的浮雕風格雖帶來介面的一致性感，但卻混淆了使用者對於「對話框」與「按鈕」的區別(上圖編號10)，建議使用顏色或不同的質感來呈現此兩種元件。