ICON圖示設計學: 設計師必備的視覺符號語言指南, 實例解析設計風格、思路與技法

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

作者／米倉英弘
YONEKURA, Hidehiro

自桑澤設計研究所畢業後，經歷道吉設計研究室，加入細山田設計事務所。參與《seven(朝日新聞社)》雜誌、《LohasMedical》雜誌等的創刊，以及《山與溪谷(山與溪谷社)》雜誌、《web creators(MdN Corporation)》雜誌、《Newton(牛頓出版社)》雜誌等的改版作業。曾執筆《設計學∞學設計(邦聯文化)》第6 章〈圖解、資訊圖表〉。主要從事雜誌、書籍等紙本媒體的編輯設計，也涉獵藝術指導與整體設計。2024年成立米倉設計室。


譯者／韓宇
任職編輯多年後轉行，最後還是放不下書，決定轉做譯者，繼續自己的愛書之路。
工作聯絡：hanyudosomething@gmail.com