美感與設計課程

虛擬導覽系統

核心概念
  • 美的原理原則
  • 視覺識別系統
美感知能
  • 美的原理原則
  • 設計思考-同理心、需求定義、創意頭腦、製作原型、實際測試
  • 新媒體初探-Roundme、Matterport、Meshroom、Paint3D

課程概說

配合教育部 108 新課美術域的加深加廣選課程,將基礎美感課程與設計方法做連結並以新媒體 VR/AR 做技術初探,整合美感社群學習資源,使「美感與生活」、「美感與設計」、「美感與新媒體技術運用」三者依序相互銜接,轉化合宜教材運用,透過下列流程實施課程:
1.設計思考的初階練習
學期初以史丹佛大學〈The Wallet Project〉任務作為設計思考的暖身,使學習者意識到由使用者出發的同理心思,與訪談技巧的練習。
2.使用者為出發的導覽提案
接序以甫落成的臺中捷運文華高中站為核心,學生透過運輸網交織串聯生活環境與校園的路徑觀察,整合在地的情感與理解,經由使用者(如新生、家長、遊客⋯⋯)需求訪談,為其建構主題式的導覽企劃(如新鮮人校園巡禮、老社區特色導聆、捷運沿線的文青小旅行⋯⋯)。
3.視覺識別系統設計
經由比例、色彩、質感與構面的練習、建構主題式導覽的視覺識別系統,透過美感設計串連名區紊亂的指標,完成符合使用者導覽需求的視覺呈現。
4.導覽系統的 VR 建置
以 Google Street View App、GoPro MAX 360 度全方位攝影機記錄導覽環境,運用 Photoshop Mix 編修,經由 VeerEditor 掛載虛擬指標系統,透過 VR 開源軟體 RoundMe 與 Matterport 發布虛擬實境,並搭配相關介紹說明。
5.美感的 AR 整合
視覺識別系統中的吉祥物設計,以軟體 Paint 3D 與 Meshroom 進行建模,經由 Sketchfab 進行上載與讀取,透過 AR.js 與 Glitch 的設定掃描觀看,結合美感原理與新媒體技術的導覽企劃,在使用者用行動載具進行反饋後,正式發布雲端空間,並進行後續成果發表。

美感預期成果

  1. 主題導覽的視覺識別設計暨指標系統設計。
  2. 主題導覽的 VR 系統建置一Roundme 或 Matterport。
  3. 主題導覽的 AR 系統建置一Web-enabled AR experiences。

 

教師課後省思

新課綱的變革中,高中教育階段的美術課產生了多元的可能性與火花,其中部定選修的加深加廣課程-基本設計,開啟學生美感設計與生活運用的視野。

在課程規劃的部分,以 AA-M-M(Aesthetic Aspects-Module/Move-Map/Mapping) 的模式進行美感課程設計。其中的 AA 為美感六大構面,透過概念理解、美感意識到造形設計的創造,逐步建立學生由基礎審美感知到進階設計運用的能力;接續 M 的部分,建構具流動性且模組化的美感教材,提供教學者基礎課程至專題任務時的有效教學運用,同時開啟跨領域整合的可能性;第二個 M 則是全盤檢視學生美感習的路徑,建構教學者的美感課程地圖,達到有條理脈絡清晰的美感學習歷程。

在基本設計課程中,則強調美感構面的深化運用,包含「設計思考」、「視覺識別系統」、「材料專題」與「新媒體運用」,將美感透過設計轉化,產出以人為本的創造實踐。其中設計思考採用 Stanford University 中 d.school 的〈The Wallet Project〉挑戰,使學習者練習同理與問題定義的設計核心,經由視覺識別系統的設計,產出概念化的美感圖像。接著透過版畫工坊、金屬工坊及陶藝工坊,將作品原型產出,結合新媒體的 VR 展出技術,作為測試發表,使未來對於藝術及設計領域有高度興趣的學習者,可以透過美感基礎的概念理解,到進階的設計實踐,有完整的美感學習體現,在做中學的美感實踐歷程中,學生普遍表現出高度的參與熱忱,當然也在逐步教學的步伐中,產生滾動式的螺旋型修正,逐步紮根基本設計教學。

 

課程規劃
  • 01
    藝術與設計大哉問一美術課、美感課與設計課

    1.撲克牌破冰遊戲:組員分組、自我介紹,由遊戲中初步分析組員思考模式。 2.間謀遊戲:對談技巧練習。 3.組織美術課、美感課內容,並鋪陳設計提問。 4.設計思考流程體驗 1:Backpack Project。(改編自史丹佛大學 Wallet Project)

  • 02
    設計思考體驗一以人為本的解決問題方法論

    1.設計思考流程體驗 2:Backpack Project。(改編自史丹佛大學 Wallet Project) 2.世界咖啡館模式:組員輪流分享 prototype 的歷程心得。 3.小組討論歸納設計一詞的定義。

  • 03
    設計案例分析─淺探視覺識別系統

    1.藝術與設計的異同。 2.星巴克 CIS 範例一MI、BI、VI。 3.小米的視覺識別系統。 4.北京前門再造計畫視覺系統提案案例。

  • 04
    基本設計 1一由觀察出發

    1.比例、色彩、質感與構成構面練習。 2.學校建築物 / 社區環境觀察。 3.學校建築物 / 社區環境使用者訪談。

  • 05
    基本設計 2一定義問題與草圖發想提案

    1.聚焦使用者問題。 2.分析校園 / 社區環境色彩。 3.觀察校園 / 社區環境配置。 4.視覺識別暨指標系統概念提案。

  • 06
    基本設計 3一視覺識別系統建構

    1.資料蒐集。 2.文案彙整。 3.視覺識別暨指標系統設計。

  • 07
    基本設計 4一視覺識別系統建構

    1.視覺識別暨指標系統設計。 2.PhotoshopMix 編修。

  • 08
    虛擬實境導覽系統 1一全景影像紀錄

    1.Google Street View、GoPro MAX 360 進行校園 / 社區環境全景建置。 2.以 VR 眼鏡觀看建置後的全景照片。

  • 09
    虛擬實境導覽系統 2一全景影像編修

    1.運用 VeerEditor 在全景照片中,進行視覺識別暨指標系統的標示與編修。 2.Roundme 教學。

  • 10
    虛擬實境導覽系統 3一導覽系統發布

    1.Roundme 串聯全景影像。 2.Roundme 虛擬指標系統上線。

  • 11
    進階設計與運用 1一視覺識別系統中的吉祥物

    1.日本熊本縣吉祥物設計案例與美學效益。 2.Smoothie-3D 體驗。

  • 12
    進階設計與運用 2一3D吉祥物設計

    1.微調修正視覺識別系統中的吉祥物造型。 2.Paint 3D 製作一造型建模。

  • 13
    進階設計與運用 3一3D吉祥物設計

    Paint 3D 製作一造型建模。

  • 14
    進階設計與運用 4一3D吉祥物設計

    Paint 3D 製作一材質貼圖。

  • 15
    擴增實境的虛實整合 1

    1.透過 Sketchfab 存放平臺,進行 3D 吉祥物模型上傳與設定。 2.行動載具經由 Sketchfab 進行擴增實進行展示。

  • 16
    擴增實境的虛實整合 2

    發布 Web-AR 使用 Glitch 平臺,提供在瀏覽器上啟用手機攝影機功能,透過偵測標記顯示 3D 吉祥物模型。

  • 17
    虛擬導覽系統使用者測試

    收集使用者意見並進行修正。

  • 18
    虛擬導覽系統成果發表

    1.小組簡報發表與分享。 2.正式發布雲端空間。

高嘉宏
臺中市立文華高級中等學校 教師

任教於臺中市立文華高級中等學校

其他美感課程