Design Method & Skill_20211015
•
0 gefällt mir•215 views
The handout of the design method & skill course.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie Design Method & Skill_20211015
Ähnlich wie Design Method & Skill_20211015 (20)
Mehr von Winny Wang
Mehr von Winny Wang (20)
Design Method & Skill_20211015
- 3. 3 分組 Team 1 Team 2 Team 3 Team 4 導演 石乃耘 李修竹 陳柔羽 謝芝嫻 研究員 陳妙佳 陳丹 鄭宇劭 蔡旻潔 設計師 黃永約 蘇玉君 林家煒 朱亭宇 看護員 李亦婷 伍欣湉 分組作業、筆記心得、材料共用時，都是以小組為單位
- 4. 4 主題報告 當代大師 設計大師 報告日期 報告同學 原研哉 10/1 Winny 盐田千春 10/8 謝芝嫻 草間彌生 10/15 李修竹 Jonathan Hoefle (Netflix) 10/22 陳柔羽 Ian Spalter (Netflix) 10/29 黃永約 Ludwig Mies van der Rohe 11/5 蘇玉君 Georg Jensen 11/5 李亦婷 Philippe Starck 11/12 鄭宇劭 深澤直人 11/19 朱亭宇 Cas Holman (Netflix) 11/26 陳丹 Tim Brown (TED) 12/3 伍欣湉 Timothy Prestero (TED) 12/10 石乃耘 Tony Fadell (TED) 12/17 蔡旻潔 Paul Bennett (TED) 12/24 林家煒 Don Norman (TED) 1/7 陳妙佳 一人挑選一位當代大師 進行報告分享： 3~5頁的簡報： - 生平背景 - 經典作品、著作、專案 - 設計風格、理念思維 報告者準備5分鐘的PPT上台說明 報告前一天中午12:00前上傳至 雲端硬碟/B_當代大師主題報告 (檔名格式：自選主題_報告者姓名)
- 5. 5 課堂 筆記與心得 第1週 第2週 第3週 第4週 第5週 - Team 1 Team 2 Team 3 Team 4 第6週 第7週 第8週 第9週 第10週 Team 1 Team 2 Team 3 Team 4 Team 1 第11週 第12週 第13週 第14週 第15週 Team 2 Team 3 Team 4 Team 1 Team 2 第16週 - - - - Team 3 - - - - 每堂課輪流製作心得筆記 A4 word至少一頁 隔天17:00前放上 雲端硬碟/A_課堂筆記與心得 (檔名格式：Week 1_Name) 遲交者視同沒交
- 6. 草間彌生 當代 大師
- 7. • 格式塔理論 • 平面構圖 • 排版關鍵技巧 • 網格系統 視覺 美感
- 17. 17 連續 (Continuation) 連續的個別物體，形成的視覺動 線，會視為一個整體。 就算被中斷，我們的大腦仍然會 判定為一個整體，因為我們的視 覺容易感知連續的形式，而非離 散的片段。
- 24. 24 中心點構圖 • 視線引導至中央 • 強化主題 • 引起注意力 • 嚴謹、莊嚴 關鍵：主題需要有一定程度的 強度、震撼力 圖片來源：http://tutorial.jumpdesign.tw/handouts/graphic/composition/graphic.html Basic
- 25. 25 三分法構圖 • 遠近層次感 • 立體空間感 • 穩定感 關鍵：把重點元素放在相交點上 圖片來源：https://snapshot.canon-asia.com/taiwan/article/zh/simple-but-essential-compositions-part-1-rule-of-thirds-rule-of-quarters Basic
- 26. 26 四分法構圖 • 遠近層次感 • 立體空間感 • 穩定感 • 拍攝對象會更靠近外方邊緣 • 圍繞拍攝對象營造空間 關鍵：把重點元素放在相交點上 圖片來源：https://snapshot.canon-asia.com/taiwan/article/zh/simple-but-essential-compositions-part-1-rule-of-thirds-rule-of-quarters Advanced
- 27. 27 對角線構圖 • 動感 • 延伸感 • 空間感 • 生命力 • 不穩定性 關鍵：把重點元素放在對角線上 圖片來源：https://snapshot.canon-asia.com/taiwan/article/zh/simple-but-essential-compositions-part-2centre-composition-diagonal-composition Basic
- 28. 28 引導線構圖 • 視覺動線 • 空間透視關係 • 視覺延伸、營造縱深層次 關鍵：把重點元素放在 引導線的終點 Advanced 圖片來源：https://www.mydesy.com/guide-line
- 29. 29 練習： 燈具海報 排版 基本元素： • 一個大標題 • 一句標語slogan • 一個品牌商標 • 一張主視覺(圖) • 一段說明文 其他細節可自行補充 例如：購買資訊
- 41. 41 進行排版 用對齊網格的方式，將內容元素都 排上去，創造出各種不同的視覺組 合變化。 • 網格內的文字與圖像元素必須 與網格架構對齊。 • 版面中所有元素的位置大小都 要有一個比例依據。 • 網格的內容沒有固定規則，需 要根據實際內容決定。 • 留白也是版面中的元素，不要 把網格填滿。 Reference: https://www.zhihu.com/question/46781778
- 42. 42 網頁網格 在RWD網頁盛行之前，最著名的 網格系統稱為960 Grid System。 主要是因為早期的電腦螢幕寬度 約為1024，扣除掉瀏覽器的 Scroll Bar以及邊框；又因為960 可以被多個數字整除，因此就以 960 pixel作為基礎，延伸出多個 不同網格寬度。 目前主流的網格系統以12或16欄 為主。 Reference: https://www.zhihu.com/question/46781778 960 px
- 44. 44 練習： 摺頁式燈具型錄 排版 基本元素： • 大標題 • 子標題 • 品牌商標 • 視覺圖說 • 說明段落 你今天是一家燈具店的老闆，要在商展上發送 燈具型錄，吸引顧客上門參觀。 一張A4對折的四頁版面，你會如何編排？
- 46. • 課堂筆記心得 • 當代大師：Jonathan Hoefle 作業
- 47. 47 課堂 筆記與心得 第1週 第2週 第3週 第4週 第5週 - Team 1 Team 2 Team 3 Team 4 第6週 第7週 第8週 第9週 第10週 Team 1 Team 2 Team 3 Team 4 Team 1 第11週 第12週 第13週 第14週 第15週 Team 2 Team 3 Team 4 Team 1 Team 2 第16週 - - - - Team 3 - - - - 每堂課輪流製作心得筆記 A4 word至少一頁 隔天17:00前放上 雲端硬碟/A_課堂筆記與心得 (檔名格式：Week 1_Name) 遲交者視同沒交
- 48. 48 主題報告 當代大師 設計大師 報告日期 報告同學 原研哉 10/1 Winny 盐田千春 10/8 謝芝嫻 草間彌生 10/15 李修竹 Jonathan Hoefle (Netflix) 10/22 陳柔羽 Ian Spalter (Netflix) 10/29 黃永約 Ludwig Mies van der Rohe 11/5 蘇玉君 Georg Jensen 11/5 李亦婷 Philippe Starck 11/12 鄭宇劭 深澤直人 11/19 朱亭宇 Cas Holman (Netflix) 11/26 陳丹 Tim Brown (TED) 12/3 伍欣湉 Timothy Prestero (TED) 12/10 石乃耘 Tony Fadell (TED) 12/17 蔡旻潔 Paul Bennett (TED) 12/24 林家煒 Don Norman (TED) 1/7 陳妙佳 一人挑選一位當代大師 進行報告分享： 3~5頁的簡報： - 生平背景 - 經典作品、著作、專案 - 設計風格、理念思維 報告者準備5分鐘的PPT上台說明 報告前一天中午12:00前上傳至 雲端硬碟/B_當代大師主題報告 (檔名格式：自選主題_報告者姓名)
- 49. • 符號學 • 資訊視覺化 • 請攜帶筆電，課堂練習用 課程 預告 傳達設計
Hinweis der Redaktion
- https://www.as-creative.com.tw/%E6%99%82%E4%BA%8B/%E6%89%80%E6%9C%89%E8%A8%AD%E8%A8%88%E8%A9%B2%E4%BA%86%E8%A7%A3%E7%9A%84%E5%9F%BA%E7%A4%8E-%E8%A6%96%E8%A6%BA%E6%B3%95%E5%89%87-%E6%A0%BC%E5%BC%8F%E5%A1%94%E7%90%86%E8%AB%96%E7%9A%84/
- 用於介面設計，最常用的就是格點系統 (grid system) 如下圖，也是透過格點系統的建立，來劃分區塊， 我們未必要使用線條來進行資訊版塊的切割，只需要透過適當的留白，一樣可以讓閱讀者辨視出這些區塊的不同。
- 藉由兩個反方向的箭頭構成，中間也構成一個英文字母C
- 運用在介面設計上，最常用到的就是下圖中「請證明你不是機器人」的驗證碼 (CAPTCHA) 了， 這也是目前人類在視覺上勝過電腦的優勢，當然這樣的優勢再過個幾年可能就會被電腦給取代了, 而且有時候也是會遇到人類無法判別的驗證碼，恆常性失效。
- 在上圖中，可以看出左邊一排圓形的圖片，可以視為一個整體，每一張圓形圖片都代表一個聯絡人， 所以在這個介面上，就可知道這些資訊的整體性。 而右下方的圓形元件，是Floating Action Button，則是利用了下面會提到的「主體-背景」原則，與內容做分割來避免混洧。
- 透過物體與物體間距的控制，可以知道資訊排列越是接近，他們的關係就越是強烈， 可以視為一個整體，如果距離較遠，就可以視為與其他個別的整體。很常應用在排版之間關係的操作。
- 上圖紅框的部份，會看到數個灰色的點點，在介面設計上我們稱它為「Slider Dot Navigation」，通常是用來做侷部畫面的導覽切換， 這就是連續性的應用，在些灰點在連續排列的情況下， 我們會將視為一個整體，而非單純的灰、黃點，它會透過動態(自動換圖)的方式來提醒使用者，畫面是可以進行切換的。
- 上圖中畫面的下方，我們知道可以繼續瀏覽，但為什麼會知道畫面可以延續？ 因為封閉的原則，我們知道下面的卡片只有顯示到一半， 但人類的眼睛會自然填補失去的資訊，意識到下方還有沒看完的資訊，所以繼續下滑直到資訊結束。
- 上圖可以看到畫面中有明顯的分隔線，透過分隔線，可以知道內容所屬的範圍。 而卡片(card)的樣式，也是透過卡片來圍繞資訊，也是圍繞原則的應用方式。
- 對話框(Dialog)，很常應用在在介面或網頁設計上，因為要突顯這塊的資訊， 所以在背景蓋上一層半透明的黑色，此時使用者就會意識到這個對話框是主體，而其他區域則是背景。
- 上圖是Material Design 中，還蠻常使用的漂浮按鈕(Floating Action Button)，如果一個按鈕裡面有多種功選或選擇， 就會以像是上面圖片的方式呈現，幾乎在同一個時間點出現不同選擇，我們的大腦就會意識到，這些功能是一個整體。
- 對稱的原則無所不在，只是因為使用的太過於頻繁，反而會忽略掉它的存在， 上圖我將卡片樣式的畫面做了一些調整，把左右對稱拿掉，讓右邊存在的空隙小於左邊， 在這樣的畫面下，因為畫面不對稱，會感覺右邊內容還沒有結束， 所以可以知道，很多時候我們運用了畫面的對稱性來包住內容，引導視覺開始與結束的位置。 就像是網頁設計，通常會有header，也會有footer，包含在中間的就是body，才能構成一個完整的網頁(瀑布式部局的網站除外)。
- https://snapshot.canon-asia.com/taiwan/article/zh/simple-but-essential-compositions-part-1-rule-of-thirds-rule-of-quarters http://tutorial.jumpdesign.tw/handouts/graphic/composition/graphic.html http://www.cjc116.com/article/article30.html