• Home
  • 設計
  • 研究
  • 產業
  • 團隊
  • 教育
  • VIDE 徵求作者
Facebook Twitter Instagram
RSS Facebook Twitter
Vide
  • Home
  • 設計
  • 研究
  • 產業
  • 團隊
  • 教育
  • VIDE 徵求作者
Vide

打造插圖風格規範

0
By vide 編輯群 on 2017-07-12 教育, 組織溝通, 網站設計, 設計方法

作者:Alan Power
譯者:Yuming Cheung

本篇文章與資訊圖表的原文作者是來自愛爾蘭的插畫家 Alan Power,已有 13 年的設計師經驗,專長是視覺設計和品牌規劃。

插圖 (illustration) 就跟其他任何一種設計形式一樣,前後一致(consistent) 非常重要。而要達到這個境界最好方法,就是製作適用所有插圖的規範(guidelines)。

為什麼得這麼做?

說到為何要使用插圖?確立核心價值、高階基礎原理(high-level rationale) 是初步描繪樣式的關鍵。擁有前後一致的樣式就可以打造完整和諧的風格,把不同插畫家的作品擺在同一個平台上時,也有自信它們會像系列畫作。

整份樣式規範裡,特別重要的是調色盤或框線粗細等關鍵。不過,像是插圖樣式數值的設定資訊,或任何你想要用它們在平台上達成的事情等也同樣重要。

不要急著開始做⋯

在你開始任何專案之前,確實了解你或是利害關係人(stakeholder)在此專案裡想要什麼,是非常重要的。我通常把流程拆解成以下問題,讓我自己和利害關係人更了解從這個專案想要獲得什麼。

1. 目標
你為什麼要在平台上使用插圖?你要如何認定這個構想是對的?

2. 現有的樣式規範
如果手上已經有一套樣式規範(styleguide),肯定非常有幫助。它不一定是給插圖使用的。核心設計規範、品牌規範等任何構成整體品牌識別的東西都有助於專注。尤其是現有的調色盤,還有你打算插圖要多倚賴這幾個可用的顏色。即使公司已經有調色盤,也不代表插圖的風格一定得要遵循。你繪製的插圖可能得要從介面裡感覺顯眼,如果只用了品牌顏色,某方面來說會造成反效果。

3. 價值
你是如何看待在平台上放插圖?你覺得插圖要怎麼塑造出你的品牌識別?它們是有趣的?可愛的?溫柔的?融入的?很仔細的?優雅的?很清楚的?此外,在開始之前就應該要對於「插圖如何在介面裡運作」有想法,例如:你要怎麼使用插圖來引導使用者,或是你只是純粹想要在專案裡注入一些自我個性。

4. 情緒板
製作可能適合當前產品方向的樣式情緒板 (moodboard)。這一直是可以讓利害關係人清楚地指著某樣式說「我想要這個」的好方法。當然,他們不能獲得「那個」,但是可以讓插畫家更知道利害關係人要的是什麼。製作情緒板的時候,風格不用一致。這只是概略讓你認為哪些方向會是有用的。有很多地方可以讓你研究一番,例如 Behance、Dribbble、Pinterest、iStock 或甚至 Google 圖片也可以。這裡要做的就是在想要打開畫板 (artboard)設計之前先盡量蒐集資訊。

▲不要急著開始做。你得先知道為何要做。

5. 上工的時間到了
很幸運地,這裡已經準備好一份之前做的。我之前加入 Globeforce,工作內容就是整個白牌平台的插圖風格。
我們用插圖是為了在平台上一些他們覺得好像不完整的地方,注入一些個性(personality)。或者,是以一個高階的角度來看:打造完整和諧的插圖風格,為我們的平台帶來前後一致的感覺。

6. 探索、探索、再探索
這不會是一個輕鬆、迅速的流程。我們早已探索許多不同的樣式,但是最後仍逃不過丟進垃圾桶的命運。不過,這就是點子的探索,沒有任何東西是浪費掉的。找到最終的方案之前,所有東西都有扮演某種角色。只不過就是終點線之前幾個要跳過的柵欄。

有些風格有用,但是有些沒有,所以你得要願意拋棄那些點子。有些點子很棒,但是就真的無法在本次專案達到你想要的效果。

7. 我們的插圖語言
說到用語,每個人都進入狀況是非常重要的。你要打造一份專有名詞的解說,而且大家都可以接受、理解。沒有必要寫得非常細,只要是讓利害關係人和設計師可以談論插圖,而不會搞不清楚狀況的一張列表即可。

8. 圖示

9. 點綴插圖

10. 空白狀態插圖

11. 場景插圖

用來取悅和引導使用者,要不然那些地方會毫無生氣!

本文授權來源:Intersection〈打造插圖風格規範〉
原文出處:Creating an Illustration Guideline

UI 設計 插圖 網站企劃 行動應用 設計規範 認知心理學 資訊圖表
Share. Facebook Twitter Pinterest LinkedIn Tumblr Email
Previous Article跨領域溝通先破後立 Open HCI 2017 紀實
Next Article 到底ピコ太郎的餅乾該放在量販店中的哪一類?
vide 編輯群
  • Website
  • Facebook
  • Twitter

vide 編輯群

Related Posts

培養全方位醫療顧客經驗管理(Customer Experience Management)經理 – 第一個跨域醫療服務設計整合課程在輔大開跑

用戶研究的三個謊言

為什麼大多數的Redesign其實沒什麼意義?因為忽略了三件事

Leave A Reply Cancel Reply

近期文章
  • 日誌研究的執行經驗分享 Tips for conducting Diary Studies 2019-12-13
  • 培養全方位醫療顧客經驗管理(Customer Experience Management)經理 – 第一個跨域醫療服務設計整合課程在輔大開跑 2019-11-16
  • 用戶研究的三個謊言 2019-10-24
  • 不靠大數據,從粉絲的小數據讀出關鍵需求 2019-09-23
  • 為什麼大多數的Redesign其實沒什麼意義?因為忽略了三件事 2019-09-9
最受歡迎文章
By VIDE 編輯2019-12-13

日誌研究的執行經驗分享 Tips for conducting Diary Studies

By VIDE 編輯2019-11-16

培養全方位醫療顧客經驗管理(Customer Experience Management)經理 – 第一個跨域醫療服務設計整合課程在輔大開跑

By VIDE 編輯2019-10-24

用戶研究的三個謊言

By 奧沃市場趨勢顧問2019-09-23

不靠大數據,從粉絲的小數據讀出關鍵需求

By Lil Andy2019-09-9

為什麼大多數的Redesign其實沒什麼意義?因為忽略了三件事

文章分類
  • Featured (221)
  • 專欄 (21)
  • 教育 (93)
    • 工作坊 (49)
  • 未分類 (7)
  • 洞察 (269)
    • 數據分析 (42)
    • 消費者洞察 (125)
    • 研究調查 (144)
  • 產業案例 (299)
    • 交通 (30)
    • 公共服務 (46)
    • 城市 (82)
    • 政府 (28)
    • 旅遊 (68)
    • 日常生活 (146)
    • 金融 (21)
    • 銀髮 (33)
  • 組織文化 (133)
    • 團隊介紹 (40)
    • 組織溝通 (94)
  • 設計 (518)
    • 服務設計 (155)
    • 物聯設計 (35)
    • 網站設計 (86)
    • 行動設計 (116)
    • 設計思考 (128)
    • 設計方法 (103)
    • 通用設計 (38)
    • 體驗設計 (179)
關於 VIDE
VIDE 創誌是一個聚焦洞察與設計,關心教育發展並鼓勵創新的媒體平臺。
VIDE 代表 Value,Insight,Design,Education。源自於拉丁文 videre,意思是「看到」。

VIDE 持續透過介紹國內外創新案例、概念發想與設計思維與實踐方法,並邀請創新設計團隊、組織、社群成為 VIDE 的內容與活動合作夥伴。期許自己能成為國內重要創新設計的媒體代表,協助建構臺灣創新設計的產業鏈與生態系。
追蹤 VIDE
Facebook: https://facebook.com/videmedia
Twitter:https://twitter.com/vide_tw
RSS:https://vide.hpx.tw/feed

聯絡:editor@vide.tw 或 02-2511-7626
地址:10459 台北市松江路158號11F-1
2015-2017 VIDE 創誌 - 帶你看見創新設計 / 悠識文化股份有限公司

Type above and press Enter to search. Press Esc to cancel.