識別再設計 環境識別與指標設計|品牌應用設計發展

指標(圖標)設計概述與設計方法

圖標(圖示)ICON 設計

圖標設計訣竅 | 圖標設計是設計能夠代表物品、動作、程式等等圖形象徵的過程。圖標隨處都能看到;你可能在街道標誌、電話或是網站到達頁面看過他們。他們通常都是平面設計,有著清晰邊緣與平滑曲線,以確保所有尺寸的可讀性。圖標的主要目的就是快速而清晰地傳達視覺訊息。有效的圖標能夠打破語言藩籬,為所有觀看者提供普世意義。他們在你需要促進特定動作時非常重要,例如導航至機場或是在軟體介面中使用不同的命令。


文獻來源: 圖標設計訣竅 | 七大技巧教您設計一致且連貫的圖標組合

圖片來源: Material Icons | Google Fonts

產品圖標是品牌產品,服務和工具的視覺表達。圖標雖然很小,但是對於任何應用程序或網站的效率至關重要。圖標是代表某些動作,事物,人物,真實或虛擬的視覺符號。在許多情況下,圖標能夠代表文字,與閱讀和理解文本相比,閱讀和理解圖標的所花時間更少。圖標可以成功地將導航和解釋功能與產品的視覺表示的美學元素相結合,支持總體樣式並具有自己的特徵。


圖片來源: Foundations of iconography|圖標設計的基礎

隱喻作用

圖標通過傳遞我們已經理解的屬性來使用視覺隱喻來加快理解速度。
圖片來源: Unsplash Material Design 圖標 產生的鬧鐘

指路

隨著人們工作越來越忙,圖標已經成為了我們生活中的一部分。它們幫助我們快速定位,幫助我們快速的做出決定和行為,以及幫助我們找到需要的東西。圖標連接著整個世界。不管你使用什麼樣的語言,作為視覺語言的圖標都發揮著巨大的作用。
圖片來源: makebardo的皇后鎮機場

IconFont 圖示字體

圖標在視覺設計上,是非常重要的部分,但常因快速設計等問題,目前IconFont 圖示字體,非常流行,比較常見的如:Font Awesome 、 IcoMoon …等由於其輕便快速以及免費的性質,被廣泛運用在網頁設計與APP設計上,缺點則是無設計上的獨特性與品牌的象徵性,因此設計APP,獨特專屬的ICON設計也非常的重要
Font Awesome

Keyline Shapes

繪製ICON,可以使用不同的方法,包括:像素網格(pixel grid),關鍵線形狀(Keyline Shapes),正交形狀(orthogonals),蒙版(mask)和安全區域/修剪區域(safe area / trim area),每種方式都提供了關鍵的參考點。ICON的創作者可以選擇要使用的內容和要忽略的內容。
Icon Grids & Keylines Demystified|圖標網格和關鍵線不再神秘
iOS App圖標網格:蘋果的圓形圖標(例如Safari,時鐘,指南針和設置)直接遵循其圓形鍵線。
在設計ICON之前,需了解如何保持一致的視覺比例,Keyline形狀是基於網格。通過使用這些核心形狀作為基線,可以在整個產品 icon 中保持一致的視覺比例。 iOS和Material網格之間的主要區別是在Material中添加了關鍵形狀。模板化了四個基本形狀:
資料來源:如何繪製出視覺比例一致的產品圖標呢?
Gmail使用橫向矩形鍵線:
資料來源:UI/UX:畫 icon 的心路歷程

Grid|Keyline Shapes|說明與檔案分享

  1. 圖標設計的關鍵線模板|Keyline template for your icons
  2. 圖示設計|關鍵線SVG檔案|Keyline template

圖標的功能

  1. 有意義
  2. 圖標是具有高符號潛力的圖形元素。這意味著,創建圖標時,設計師首先應定義其作用和含義,作為單獨的元素並作為總體佈局的一部分。界面中使用的任何圖標均應具有其含義和功能。
    資料來源:COVID-19 Icons
  3. 簡單、清晰的
  4. 圖標的主要目標是快速傳達概念。
    7 Principles of Icon Design|圖標設計的7個原理
  5. 個性化、獨特性、美觀和吸引人 Personality
  6. 每個圖標集都有其風味。是什麼讓它與眾不同?它對品牌有何評價?它會產生什麼心情?

    Waze最受歡迎的設計在很大程度上取決於這些色彩繽紛的圖標。Twitter的圖標柔軟,輕巧,清晰。Freemojis展現可愛風格。



    7 Principles of Icon Design|圖標設計的7個原理
  7. 一致性的|Consistency
  8. 為了使圖標家族達到和諧,請始終保持相同的樣式規則。在iOS 13之前,Apple的圖標具有各種共同的筆劃,填充方式和尺寸比例:
    資料來源:System Icons (iOS 12 and Earlier)

    Phosphor Icons
指標系統案例

環境識別與指標系統

指標系統設計

指標系統設計結合了品牌識別、視覺設計、工業設計、立體造型設計、空間設計、建築設計等專業設計領域,使用品牌識別系統的元素,包含:色彩計畫、文字編排層級規範、輔助圖形應用、圖標系統pictogram等視覺圖像,透過編排與立體造型協助人們找到空間與場域中的定位。成功的指標系統設計涉及了一些主要的關鍵要素,這些要素會幫助人們找到穿越建築物的最短路徑,並確保在空間及路途中對於資訊與方向的體驗是易於理解的。如果希望打造暢通無阻的尋路系統設計(Wayfinding System Design)體驗,地圖、標牌和其他包含動線指引等尋路系統策略應該與人們在其他空間中尋找目標的過程及方式盡量保持一致。


桃園機場機場指標系統|舊|新細明體


東京成田機場


大阪關西機場


機場指標系統案例文獻
  1. 新細明體就是醜?從桃園機場指標談用字型的設計思考
  2. 告別新細明體!桃園機場新指標亮相
  3. 字型散步試讀_桃園機場指標的大問題:新細明體用錯了地方
  4. 細明體:是中華民國美學,還是日系精品感?從日本星悅航空被誤會大了的字體談起
  5. 機場好設計 (上)
  6. 成田機場|樓層平面圖
  7. 成田機場第一航廈入境、機場設施、到東京市區交通方式整理
  8. 機場旅客的「第一印象」 打造耳目一新的國家門面

基隆山海城指標設計

  • 山海城串聯:整合基隆山海城區指標,串連導覽動線引動基隆觀光能量
  • 模組延續性:指標以模組化元件設計,方便未來資訊更換與維護管理
  • 地圖分層系統:分層級的資訊地圖,讓地圖閱讀直觀簡明
  • 環境學習:結合歷史人文的在地知識,了解基隆過往發展
  • 基隆嚮導意象:將基隆特色轉化為嚮導意象,增加城市指標自明性

RESEARCH 田野調查

  • 以步行時間進行範圍疊圖,了解遊客步行與指標設置的需求點位 Source : 共感地景創作繪製

  • SIGNAGE SYSTEM 指標系統

    • 城市觀光指標,不僅作為旅遊意象的記憶點,更是一個城市的整合意象。
    • 材質以鍍鋅鋼板烤漆為主體,配合設置場域的不同,搭配通透性的黑玻璃或帶有歷史風采的耐候鋼,融入在地景觀與環境氛圍,達到視覺與功能性的平衡。

    城市系統-3D Mockup


    山海系統-3D Mockup


    COLOR PLAN 色彩計畫


  • 基隆山海城指標設計|城市觀光指標| Keelung City Wayfinding System Design|水越設計

  • 指標系統案例與文獻
    1. 指標系統設計|手心設計事務所
    2. 基隆山海城指標設計|城市觀光指標| Keelung City Wayfinding System Design|水越設計
    3. 新竹市|迎曦之路|全城市使用之指標導覽牌面介紹
    4. 新竹動物園 ─ 指標系統設計|版塊設計
    5. 國立成功大學校園指標系統
    6. Wayfinding 指標系統設計|Path & Landforms
    7. Path & Landforms指標系統設計巧思!臺南市立圖書館總館、黎明國小幼兒園等3件亮點作品
    8. 打造流暢的百貨體驗,描繪顧客感知地圖的指標系統設計|遠東集團 Far Eastern Group|Loftwork
    9. 操刀「嘉美館」視覺識別系統與指標設計!設計師莊濟寰:想像一個「好玩」的在地美術館
    10. 揭開指標系統的設計巧思!專訪「角白設計」莊濟寰、「Bohan Graphic」施博瀚
    11. 大潤發 中崙店|指標系統
    12. 引路:避難場所視覺指引系統設計展
    13. 桃園市觀光導覽指標系統規劃與設計作業手冊
    14. 故宮博物院|指標系統
    15. 台北國際會議中心指標系統更新研究與設計示範
    16. 常常跟著指標迷路?「尋路」設計原理大解密
    17. 服務標示 用指標構築特色友善場域
    18. 「指標設計」是什麼?水越設計教人用「直覺」探索空間:無感是最高境界
    19. 基隆10景點設置指標系統 「小橘公仔」成亮點
    20. Pinterest|指標系統設計

    指標系統案例與文獻

    應用設計

    應用系統模版應用

    在「Mockup」這門技藝中,需要的不僅僅只是軟體的操作技術,其中更重要的是敏銳的創意跟觀察力,才能讓畫面中的每個物件,適切且充滿魅力的被呈現。

    • 快速提升視覺效果
    • 提高溝通效率
    • 幫助客戶想像成品樣貌

    Mockup模版網站
    1. MockupWorld
    2. unblast
    3. Mockups-collection/
    4. Mockups-Design
    5. Products/Mockups
    6. Pixeden
    7. freepik Mockup

    品牌案例參考

    1. 從品牌手冊看品牌

    2. 品牌手冊是品牌製作的終極呈現,裡面有品牌的策略、設計與指引,本課程的作業也將以品牌手冊倒推的方式進行,逐步指引大家進入品牌的世界。以下為品牌手冊的蒐集寶庫。

      Branding Style Guides|品牌風格指南

      網站點進去之後可以透過上方的選單,選擇你要的品牌指南,有語言、年代、頁數、國家、類別,方便查找,之後可以透過基本的帳號註冊登入進去,就可以下載完整品牌指南的PDF檔,品牌課的大寶庫,請大家多多利用!接下來的課程,也將以品牌手冊作為指引的參考。


      以下為相關範例

      教育|大學|藝術
      1. HKUST_Brand_guideline-TC|香港科技大學
      2. Dalhousie|大學|加拿大
      3. aam-brand-guidelines|美國博物館聯盟

      SDGs|議題類
      1. SaveTHeChildren|救救孩子
      2. action-against-hunger-2016|反飢餓行動
      3. BornFree|生而自由
      4. the-climate-group|氣候組織

      城市|在地設計
      1. ville-de-paris-mini-charte-graphique|巴黎
      2. tokyobrand_logo_designmanual|東京
      3. Porto_Manual|葡萄牙波多
      4. City-of-Detroit|底特律
      5. Stadt-Bern-2022_web|瑞士伯恩
      6. governo-federal-brasil|巴西

      其他
      1. Special-Olympics_CHINESE|特奧會
      2. Volvo-2020-Dealer_Edition-CN
      3. Discord_BrandGuideline
      4. Subway


      從品牌手冊看品牌|線上講義

      從品牌手冊看品牌|線上講義|講義
    3. 品牌指南步驟

    4. How to Create a Brand Style Guide|如何創建品牌風格指南

      使用以下 6 個簡單步驟構建一個品牌指南:

      1. 以精彩的品牌故事開啟您的品牌風格指南
      2. 使用標誌指南創建可識別的品牌形象
      3. 進行品牌的色彩規範
      4. 決定排版層次
      5. 定義品牌聲音
      6. 指定視覺風格的圖像和圖標

      品牌指南線上講義

      1. Top 100 Best Style Guides Of Famous Brands|著名品牌 100 強最佳風格指南
      2. Definition: Brand guidelines|品牌指南

    5. 線上品牌手冊

    6. 以下為其他可供參考的線上品牌手冊


      1. FaceBook identity-guide
      2. Audi Brand Appearance
      3. Walmart brand center
      4. Zendesk Brandland |美國顧客服務軟體公司