chapter 1

「圖示」是什麼？??009



被我們稱為「圖示」的東西，到底是什麼呢？??010

畫面上的「圖示」也有很多種類??012

在「符號學」中，「圖示」被定位成這樣的角色??014

常說的「象形符號」跟「圖示」的差別是什麼？??016

我們每天的生活都被「圖示」包圍??018

能夠快速傳達意義或功能??020

能在小小的空間中，放入大量的情報??022

圖像＋文字更容易被記住，也更容易被想起來??024

不受出生與成長地區的語言限制，能夠傳達意義??026

我們是在「看」圖示，還是在「讀」它？??028



chapter 2

來看看「圖示」—歷史篇—??033



早在人類發明文字之前，就已經開始繪製「圖畫」與「線條」??034

洞窟裡描繪的，並不是「圖畫」??036

岩石上描繪的圖畫中，自古以來運用了大量與圖示類似的表現方式??038

世界上最大的「圖示」，位於南美大陸??040

吸引許多人的象形文字是「圖示」的祖先嗎？??042

除了象形文字外，世界上還曾有許多「圖示」般的文字??044

隨著文字逐漸用來表示語言的發音，符號則發展出不同的功能??046

日本引以為傲的圖示，非常現代且帥氣的家紋??050

地圖記號是圖示的樂園??052

連接到現代「圖示」的起點，從交通號誌開始??054

「象形符號」在東京奧運開花結果??056

追求「直覺」反應的汽車圖示等，意外地從很早之前就出現了?058

如今在大眾運輸設施常見的標示，是於1974年整理制定的??060

從人人可用的電腦中誕生的「圖示」??062

電腦畫面開始出現色彩，圖示也變成彩色的??064

可以直接碰觸的圖示也在90年代開始登場??066

隨著網頁瀏覽器登場，圖示也進入了大航海時代??068

智慧型手機的登場，是「圖示」的第2次誕生??070

然後就變得平面化了？畫面走向扁平化設計的世界??072

之後的圖示設計，又會有怎樣的變化呢？??074

FF Transit Pict??076

Poppi??078

Netto Icons??080



chapter 3

試著製作「圖示」??085



來設計「圖示」吧！

設計圖示的方法??086



step 1 確認目的

為什麼要使用圖示？??088

使用場所??089

要展示給「誰」看？??090

想要傳達的「內容」是？??091



step 2 試著調查對象

決定要畫什麼的時候??092

究竟應該畫些什麼呢？??093



step 3 考慮圖形的風格

以風格一致性做出獨特性??094

以重複性打造風格??095



step 4 草圖是非常重要的

在紙上，手就會動起來??096



到目前為止的總結

設計會反覆來回??097



step 5 實際製作看看

用描摹方式製作1??098

用描摹方式製作2??099

用網格方式製作1??100

用網格方式製作2??101

用網格方式製作3??102

用網格方式製作4??104



step 6 潤飾調整的重點

確認白色部分的間隙??106

確認邊角??107

網格只是輔助??108

再次檢視整體、做調整??109



chapter 4?

「圖示」的多樣性??115



各種設計與點子

大家的圖示都相同？嘗試看看各種風格吧！??116



字型家族思考法

可作為「圖形文字」參考的「字型家族」??118



改變路徑的粗細

光是改變線條的粗線，給人的印象就能大大改變??120



邊角圓化

邊角的處理方式不同，對整體的印象也會有很大的影響??122



塗黑

將塗黑部分作為主體的圖示設計??124



切割路徑

不閉合線條，製作成有間隙的圖示??126



試著製作出邊邊角角

正圓形＋垂直、水平、45度角線條，試著只用這些製作圖示??128



試著製作成剪影

進一步研究剪影風格的圖示??130



試著用四角形的網格

用粗曠的點陣圖示能營造復古氛圍??132



以燈泡或LED的形象來呈現

用圓點像素製作的圖示，帶有電子看板的風格??134



試著用點線製作

把線條風格的圖示製作成點線??136



加上顏色?

在圖示的局部加上重點色彩??138



加上顏色?

在圖示的局部加入相同顏色與形狀，並重複運用??140



加上顏色?

用黑色以外的2色配色，讓圖示繽紛起來??142



等距透視變形

試著將圖示的1面傾斜變形??144



立體化?

試著製作由上往下俯視的圖示??146



立體化?

在圖示中加入各種加厚設計，試著增加深度??148



手繪風格?

將圖示的線條轉換成手繪風格??150



手繪風格?

將圖示的線條轉換成鉛筆繪畫風格??152



漸層

運用漸層來製作出變化??154



加入變化、強調要素

在圖示的局部重點加入光暈??156



模糊局部

看得見？看不見？試著模糊圖示的局部??158



幽默很重要

試著在圖示中加上或刪除一些元素??160



以拼圖為主題

組合簡單的拼圖製作看看??162



chapter 5

圖示實例集11 Works??165



column

電腦畫面上的衝擊從資源回收筒開始!?

─資源回收筒圖示的歷史─??030



圖示能否超越語言隔閡!???032



回顧圖示的歷史

─圖示年表─??082



「繪文字」的歷史

─繪文字也是圖示的一部分？─??084



在海外時初次見到的圖示、象形符號??112



特別的圖示，箭頭與風景圖示??114



Google 官方圖示資源網

─Material Symbols and Icons─??164



公共衛生與圖示設計??180



technique

在製作圖示時，要熟練掌握的2個工具

─「即時圓角」、「路徑管理員」─???110





?