--- # System prepended metadata title: Envato Tuts+ - The Principles of Design tags: [Design] --- # 設計原則概述 * 設計原則是一套規則，用於創造有組織且視覺悅目的作品 * 理解原則後可以在適當情況下打破規則 * Envato Elements 提供範例與模板幫助學習設計原則 # 平衡（Balance） ![image](https://hackmd.io/_uploads/r1jaOCR7-l.png) * 平衡使設計作品穩定，每個元素具有視覺重量 * 視覺重量可由尺寸、形狀、顏色或質地決定 * 缺乏平衡會讓版面看起來向一側傾斜 * 範例：書籍封面對稱平衡、海報利用字體與圖像平衡偏移元素 ![messageImage_1766938769794](https://hackmd.io/_uploads/ByP2u0AQ-l.jpg) ![messageImage_1766938779633](https://hackmd.io/_uploads/H1R2_CAQbx.jpg) # 統一（Unity） ![image](https://hackmd.io/_uploads/rkqAdC0mbx.png) * 統一是設計元素間的和諧與自然關聯 * 統一可透過一致的色彩、風格或元素關聯達成 * 缺乏統一會使設計感到混亂 * 範例：博物館海報創意但組織良好、返校宣傳單透過色彩與插畫風格保持統一 ![messageImage_1766938854870](https://hackmd.io/_uploads/S1SlYARQbl.jpg) ![messageImage_1766938878399](https://hackmd.io/_uploads/rk3bKARQWg.jpg) # 對比（Contrast） ![image](https://hackmd.io/_uploads/SJqftRRXZl.png) * 對比指設計元素間的差異，用於建立視覺層次 * 對比可透過顏色、形狀、字體或質地實現 * 對比能創造焦點並引導觀眾閱讀順序 * 範例：海報使用黃紫對比、不同字體與形狀，雜誌封面利用字體大小和大小寫建立層次 ![messageImage_1766938939392](https://hackmd.io/_uploads/By3SF0C7Zx.jpg) ![image](https://hackmd.io/_uploads/By_UtRRQWg.png) # 強調（Emphasis） ![image](https://hackmd.io/_uploads/HJkPFRA7bg.png) * 強調用於吸引觀眾注意特定元素 * 透過顏色、線條及正負空間關係創造焦點 * 對比可強化強調效果 * 範例：書籍封面改變元素顏色與方向突出標題，宣傳單使用引導線指向重點元素 ![image](https://hackmd.io/_uploads/rySdKRCXbe.png) ![messageImage_1766939044988](https://hackmd.io/_uploads/ry73YC0XWe.jpg) # 重複（Repetition） ![image](https://hackmd.io/_uploads/SJ16KACQbe.png) * 重複指在設計中反覆使用相同元素以建立一致性 * 可重複字體、圖形元素或網格 * 範例：極簡海報重複葉子形狀，品牌套件中重複黃色波浪形元素建立一致性 ![messageImage_1766939087181](https://hackmd.io/_uploads/SJ6CtRCQWl.jpg) ![image](https://hackmd.io/_uploads/rJMJ5AA7Wg.png) # 圖案（Pattern） ![image](https://hackmd.io/_uploads/r1CyqC0mbg.png) * 圖案是多個元素的反覆排列，用於增強觀眾體驗 * 圖案可延伸品牌圖形線條或創造視覺氛圍 * 使用圖案時需避免過於雜亂或干擾訊息傳達 * 範例：海報使用簡單波浪圖案不干擾文字，名片透過大象圖示創造強烈品牌感 ![messageImage_1766939141697](https://hackmd.io/_uploads/BJXMcRAQZl.jpg) ![messageImage_1766939157158](https://hackmd.io/_uploads/BkQQ5RRmbl.jpg) --- # 節奏（Rhythm） ![image](https://hackmd.io/_uploads/BJeNqCCX-x.png) * 節奏是元素反覆排列並略作變化形成的視覺節拍 * 節奏創造有組織的運動感，通常不易直接察覺 * 範例：背景矩形與顏色塊反覆排列、宣傳單透過三角形不同尺寸與顏色增加動態感 ![image](https://hackmd.io/_uploads/S13H90CXbg.png) ![messageImage_1766939229555](https://hackmd.io/_uploads/r16PqAAmWg.jpg) # 動作（Movement） ![image](https://hackmd.io/_uploads/H1c_5ACQWe.png) * 動作指觀眾視線在版面中的移動路徑 * 可透過元素排列引導觀眾到重點資訊 * 範例：海報利用摩托車輪與文字引導視線、宣傳單透過樹枝與有機形狀增加動感 ![messageImage_1766939281900](https://hackmd.io/_uploads/rkgiqR0Q-l.jpg) ![image](https://hackmd.io/_uploads/HyL35ACQWl.png) # 比例（Proportion） ![image](https://hackmd.io/_uploads/SJc0c0C7Wg.png) * 比例是元素間的關係感，用以增強統一、平衡與和諧 * 主次資訊透過字體大小與位置建立層次 * 範例：海報主標題居中，次要元素置於兩側，大小分明；書籍排版中標題、引用與正文大小區分明確 ![messageImage_1766939370781](https://hackmd.io/_uploads/ry_lsC0X-l.jpg) ![messageImage_1766939392882](https://hackmd.io/_uploads/Sy1zjCAXZe.jpg) # 和諧（Harmony） ![image](https://hackmd.io/_uploads/HJ3NsAR7-g.png) * 和諧是設計元素間的關聯感，使整體一致而不完全相同 * 可透過色彩、字體、風格相似性達成 * 範例：書籍封面字體與手寫元素搭配、CD封面色彩與幾何形狀和諧搭配 ![messageImage_1766939478352](https://hackmd.io/_uploads/rJLwj0Am-e.jpg) ![messageImage_1766939508666](https://hackmd.io/_uploads/SyKYsAC7bg.jpg) # 多樣性（Variety） ![messageImage_1766939514398](https://hackmd.io/_uploads/ry0FsC0XWg.jpg) * 多樣性創造對比與張力，增加設計趣味性 * 可混合不同形狀、字體、影像或插畫元素 * 範例：海報結合嚴謹網格與手寫字體、不同角度影像；Envato Elements範例透過顏色與字體區隔各區塊 ![messageImage_1766939547630](https://hackmd.io/_uploads/HJpss00mWl.jpg) ![messageImage_1766939561987](https://hackmd.io/_uploads/H193j0AmZl.jpg) # 設計原則的作用 * 原則是創作組成的基礎，幫助建立結構與呈現方式 * 可作為檢視與編輯設計的工具，確保每個元素都有功能與目的 * 使用設計原則能有效傳達訊息，提升作品的清晰度與可理解性 * Envato Elements提供模板、字體與圖像資源，方便設計學習與實作 # Terminology * 平衡（Balance）：設計中元素的視覺重量分配，使整體感覺穩定與和諧 * 統一（Unity）：設計元素之間的和諧與關聯性，使作品整體協調一致 * 對比（Contrast）：透過顏色、形狀、質感等差異創造視覺層次與焦點 * 強調（Emphasis）：引導觀者注意特定設計元素的策略 * 重複（Repetition）：在設計中反覆使用相同元素以建立一致性 * 圖案（Pattern）：多個設計元素的重複排列，用於增強視覺體驗 * 節奏（Rhythm）：透過元素的重複與變化創造有組織的視覺運動感 * 動態（Movement）：引導觀者視線沿著設計元素流動的路徑 * 比例（Proportion）：設計元素間尺寸與比例的協調，以增強和諧感 * 和諧（Harmony）：設計元素之間的整體一致性與關聯性 * 多樣性（Variety）：透過不同元素的對比與變化增加視覺趣味 * 排版（Typography）：文字的設計、排列與樣式運用 * 字體（Typeface）：文字的字形設計風格 * 字重（Font Weight）：字體的粗細程度 * 行距（Leading）：文字行與行之間的垂直間距 * 字距（Kerning）：個別字母之間的水平間距調整 * 字組距（Tracking）：整段文字整體的字距調整 * 視覺層次（Visual Hierarchy）：設計中資訊呈現的重要性排序 * 焦點（Focal Point）：吸引觀者注意的主要視覺元素 * 網格系統（Grid System）：用於排列與對齊設計元素的結構框架 * 對稱（Symmetry）：設計元素沿中心軸線均衡分布 * 非對稱（Asymmetry）：設計元素不對稱但仍保持視覺平衡 * 主次分明（Hierarchy）：設計中資訊優先順序的清楚表現 * 空間感（White Space）：設計中空白區域，用以增強可讀性與焦點 * 視覺重量（Visual Weight）：元素在設計中對視覺吸引力的強度 * 色彩心理學（Color Psychology）：不同顏色對情感與認知的影響 * 色彩對比（Color Contrast）：使用不同顏色創造視覺區別 * 補色（Complementary Colors）：色輪上相對的顏色組合 * 類似色（Analogous Colors）：色輪上相鄰的顏色組合 * 色相（Hue）：顏色的基本種類 * 飽和度（Saturation）：顏色的純度或鮮豔程度 * 明度（Brightness/Value）：顏色的明暗程度 * 網頁設計（Web Design）：針對網頁界面的設計與排版 * UI 設計（User Interface Design）：使用者介面的視覺設計 * UX 設計（User Experience Design）：使用者體驗設計，關注互動與易用性 * 原型設計（Prototype）：設計初步互動模型或樣機 * 視覺焦點（Visual Emphasis）：在構圖中突出特定元素 * 導視線（Leading Lines）：引導觀者視線的設計元素線條 * 空間層次（Depth）：透過大小、位置、顏色創造空間感 * 層疊（Overlay）：元素重疊以增加視覺深度或效果 * 負空間（Negative Space）：設計中未被元素占用的空白區域 * 正負關係（Positive and Negative Space）：設計中元素與空白之間的互動 * 形狀（Shape）：設計中可辨識的外輪廓或圖案 * 幾何形狀（Geometric Shape）：規則、數學形式的形狀 * 有機形狀（Organic Shape）：自然、不規則的形狀 * 質感（Texture）：設計元素的視覺或觸覺表現 * 動態構圖（Dynamic Composition）：創造視覺運動與張力的構圖方式 * 平面設計（Graphic Design）：以視覺傳達為目的的設計創作 * 品牌設計（Brand Design）：品牌識別系統與視覺形象設計 * 模板（Template）：可重複使用的設計範例或框架 * 設計資源（Design Assets）：可用於加速設計的素材、圖像、字型等 * 版面配置（Layout）：設計元素在平面上的排列方式 * 印刷設計（Print Design）：以實體印刷品呈現的設計作品 * 數位設計（Digital Design）：以螢幕顯示為主的設計作品 * 創意流程（Creative Process）：從概念到完成作品的系統化步驟