Recommended
More Related Content
What's hot
What's hot (20)
Similar to DMS 20220311
Similar to DMS 20220311 (20)
More from Winny Wang
More from Winny Wang (20)
DMS 20220311
- 3. 課堂筆記與心得 請以小組為單位，彙整該堂課的上課筆記 評分的重點是「心得收穫」 整理成1~2頁A4檔案(word, pdf皆可) 隔天17:00前放上 雲端硬碟/課堂筆記與心得 (檔名格式：Week 1_Team 1) 遲交者視同沒交 筆記與心得成績將影響該階段組員的成績 第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 筆記資料不只是把白板上的紀錄重現 更需要梳理成自己的詮釋。
- 4. 主題報告｜當代大師 一人挑選一位當代大師進行報告分享 3~5頁的簡報： - 生平背景 - 經典作品、著作、專案 - 設計風格、理念思維 報告者準備5分鐘的PPT上台說明 (檔名格式：自選主題_報告者姓名) 報告前一天中午12:00前上傳至 Google Drive 當代大師 報告 日期 報告同學 原研哉 2/25 Winny 塩田千春 3/4 Winny 草間彌生 3/11 邱戴萌 Jonathan Hoefle (Netflix) 3/18 徐克祈 Ian Spalter (Netflix) 3/25 李靖彤、林威均 Ludwig Mies van der Rohe 4/8 張琪悅、林雅璇 Philippe Starck 4/15 馮品瑄 深澤直人 4/22 陳品涵、黃如玨 村田智明 4/29 吳冠儀、胡博翔 Tim Brown (TED) 5/6 林楷哲、林炯勛 Timothy Prestero (TED) 5/13 蔡晏慈 Tony Fadell (TED) 5/20 張睿麟 Paul Bennett (TED) 5/27 張育瑋 Don Norman (TED) 6/10 林子愉
- 5. 視覺美感 • 格式塔理論 • 平面構圖 • 排版關鍵技巧 • 網格系統
- 21. 平面構圖 “ Reference: https://www.freepik.com/premium-vector/abstract-background-design-with-composition-made-various-geometric- shapes_4855056.htm 構圖就是將畫面元素進行安排 中心點構圖 三分法構圖 四分法構圖 對角線構圖 引導線構圖
- 22. 中心點構圖 • 視線引導至中央 • 強化主題 • 引起注意力 • 嚴謹、莊嚴 關鍵：主題需要有一定程度的強度、震撼力 圖片來源：http://tutorial.jumpdesign.tw/handouts/graphic/composition/graphic.html
- 23. 三分法構圖 • 遠近層次感 • 立體空間感 • 穩定感 關鍵：把重點元素放在相交點上 圖片來源：https://snapshot.canon-asia.com/taiwan/article/zh/simple-but-essential-compositions-part-1-rule-of-thirds-rule-of-quarters
- 24. 四分法構圖 • 遠近層次感 • 立體空間感 • 穩定感 • 拍攝對象會更靠近外方邊緣 • 圍繞拍攝對象營造空間 關鍵：把重點元素放在相交點上 圖片來源：https://snapshot.canon-asia.com/taiwan/article/zh/simple-but-essential-compositions-part-1-rule-of-thirds-rule-of-quarters
- 25. 對角線構圖 • 動感 • 延伸感 • 空間感 • 生命力 • 不穩定性 關鍵：把重點元素放在對角線上 圖片來源：https://snapshot.canon-asia.com/taiwan/article/zh/simple-but-essential-compositions-part-2centre-composition-diagonal-composition
- 26. 引導線構圖 • 視覺動線 • 空間透視關係 • 視覺延伸、營造縱深層次 關鍵：把重點元素放在引導線的終點 圖片來源：https://www.mydesy.com/guide-line
- 27. 平面構成練習 1 海報排版練習 條件： A4橫式海報 內容素材： • 大標題：BARCELONA • 副標語：less is more • 說明文：The Barcelona chair was exclusively designed by Mies van der Rohe for the German Pavilion, that country's entry for the International Exposition of 1929, which was hosted by Barcelona, Spain….. • 品牌商標 • 主視覺產品圖 完成的作品請匯出成jpg張貼在 雲端硬碟/C_課堂練習上傳區
- 28. 排版關鍵技巧 “ Reference: issuu.com 良好的排版除了能夠瞬間抓住讀者的目光、 讓讀者更有效率的吸收資訊， 也能營造氛圍、帶給讀者文字外的感受。 群組 留白 對齊 對比 重複
- 29. 群組 • 確保將相關連的資訊組合在一起，讓人一看就 明白版面囊括了什麼資訊。 • 欲將版面做出更多層次，可以利用字體、顏色、 大小、空白、符號等變化方式，讓每個看似單 獨的字眼組成一個共同群體。 • 而大部分的版面為了整潔，通常不會有超過5個 以上的群體。 圖片來源：https://www.pinterest.com/pin/27232772737299501/
- 30. 留白 • 空白是每個構圖的重要組成部分。 • 它只是意味著負空間，就像內容之間、行之間， 甚至頁邊距的空間。 • 空白可説明你定義和分隔不同的部分；它為你 的內容提供了呼吸的空間。 圖片來源：https://www.canva.com/learn/graphic-design-terms/
- 33. 重複 • 重複是提醒每個項目應該具有一致的外觀和感 覺。 這意味著通過重複或回顯某些元素來尋找 增強設計的方法。 • 將重要的資訊不斷重複出現，不僅能讓讀者一 眼就辨識出重點，更能讓他們留下深刻的印象。 圖片來源：https://freepik.com
- 37. 切出網格 • 把選好的顯示範圍切成網格， 每格的尺寸大小一致， 並有著相同的間距。 • 根據項目的特點、圖文的疏密、比例關係等去設計網格 • 通常網格數量越多，運用起來也就越靈活。 圖片來源：Reference: https://www.zhihu.com/question/46781778
- 38. 進行排版 用對齊網格的方式，將內容元素都排上去，創造出 各種不同的視覺組合變化。 • 網格內的文字與圖像元素必須與網格架構對齊。 • 版面中所有元素的位置大小都要有一個比例依 據。 • 網格的內容沒有固定規則，需要根據實際內容 決定。 • 留白也是版面中的元素，不要把網格填滿。 圖片來源：https://www.zhihu.com/question/46781778
- 39. 網頁網格 在RWD網頁盛行之前，最著名的網格系統稱為960 Grid System。 主要是因為早期的電腦螢幕寬度約為1024，扣除 掉瀏覽器的Scroll Bar以及邊框；又因為960可以被 多個數字整除，因此就以960 pixel作為基礎，延伸 出多個不同網格寬度。 目前主流的網格系統以12或16欄為主。 圖片來源：https://www.zhihu.com/question/46781778
- 43. 課程作業 “
- 44. 課堂筆記與心得 請以小組為單位，彙整該堂課的上課筆記 評分的重點是「心得收穫」 整理成1~2頁A4檔案(word, pdf皆可) 隔天17:00前放上 雲端硬碟/課堂筆記與心得 (檔名格式：Week 1_Team 1) 遲交者視同沒交 筆記與心得成績將影響該階段組員的成績 第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 筆記資料不只是把白板上的紀錄重現 更需要梳理成自己的詮釋。
- 45. 主題報告｜當代大師 一人挑選一位當代大師進行報告分享 3~5頁的簡報： - 生平背景 - 經典作品、著作、專案 - 設計風格、理念思維 報告者準備5分鐘的PPT上台說明 (檔名格式：自選主題_報告者姓名) 報告前一天中午12:00前上傳至 Google Drive 當代大師 報告 日期 報告同學 原研哉 2/25 Winny 塩田千春 3/4 Winny 草間彌生 3/11 邱戴萌 Jonathan Hoefle (Netflix) 3/18 徐克祈 Ian Spalter (Netflix) 3/25 李靖彤、林威均 Ludwig Mies van der Rohe 4/8 張琪悅、林雅璇 Philippe Starck 4/15 馮品瑄 深澤直人 4/22 陳品涵、黃如玨 村田智明 4/29 吳冠儀、胡博翔 Tim Brown (TED) 5/6 林楷哲、林炯勛 Timothy Prestero (TED) 5/13 蔡晏慈 Tony Fadell (TED) 5/20 張睿麟 Paul Bennett (TED) 5/27 張育瑋 Don Norman (TED) 6/10 林子愉
Editor's Notes
- 在上圖中，可以看出左邊一排圓形的圖片，可以視為一個整體，每一張圓形圖片都代表一個聯絡人， 所以在這個介面上，就可知道這些資訊的整體性。 而右下方的圓形元件，是Floating Action Button，則是利用了下面會提到的「主體-背景」原則，與內容做分割來避免混洧。
- 透過物體與物體間距的控制，可以知道資訊排列越是接近，他們的關係就越是強烈， 可以視為一個整體，如果距離較遠，就可以視為與其他個別的整體。很常應用在排版之間關係的操作。
- 上圖紅框的部份，會看到數個灰色的點點，在介面設計上我們稱它為「Slider Dot Navigation」，通常是用來做侷部畫面的導覽切換， 這就是連續性的應用，在些灰點在連續排列的情況下， 我們會將視為一個整體，而非單純的灰、黃點，它會透過動態(自動換圖)的方式來提醒使用者，畫面是可以進行切換的。
- 上圖中畫面的下方，我們知道可以繼續瀏覽，但為什麼會知道畫面可以延續？ 因為封閉的原則，我們知道下面的卡片只有顯示到一半， 但人類的眼睛會自然填補失去的資訊，意識到下方還有沒看完的資訊，所以繼續下滑直到資訊結束。
- 上圖可以看到畫面中有明顯的分隔線，透過分隔線，可以知道內容所屬的範圍。 而卡片(card)的樣式，也是透過卡片來圍繞資訊，也是圍繞原則的應用方式。
- 對話框(Dialog)，很常應用在在介面或網頁設計上，因為要突顯這塊的資訊， 所以在背景蓋上一層半透明的黑色，此時使用者就會意識到這個對話框是主體，而其他區域則是背景。
- 上圖是Material Design 中，還蠻常使用的漂浮按鈕(Floating Action Button)，如果一個按鈕裡面有多種功選或選擇， 就會以像是上面圖片的方式呈現，幾乎在同一個時間點出現不同選擇，我們的大腦就會意識到，這些功能是一個整體。
- 對稱的原則無所不在，只是因為使用的太過於頻繁，反而會忽略掉它的存在， 上圖我將卡片樣式的畫面做了一些調整，把左右對稱拿掉，讓右邊存在的空隙小於左邊， 在這樣的畫面下，因為畫面不對稱，會感覺右邊內容還沒有結束， 所以可以知道，很多時候我們運用了畫面的對稱性來包住內容，引導視覺開始與結束的位置。 就像是網頁設計，通常會有header，也會有footer，包含在中間的就是body，才能構成一個完整的網頁(瀑布式部局的網站除外)。