# 設計原則概述 * 設計原則是一套規則,用於創造有組織且視覺悅目的作品 * 理解原則後可以在適當情況下打破規則 * Envato Elements 提供範例與模板幫助學習設計原則 # 平衡(Balance)  * 平衡使設計作品穩定,每個元素具有視覺重量 * 視覺重量可由尺寸、形狀、顏色或質地決定 * 缺乏平衡會讓版面看起來向一側傾斜 * 範例:書籍封面對稱平衡、海報利用字體與圖像平衡偏移元素   # 統一(Unity)  * 統一是設計元素間的和諧與自然關聯 * 統一可透過一致的色彩、風格或元素關聯達成 * 缺乏統一會使設計感到混亂 * 範例:博物館海報創意但組織良好、返校宣傳單透過色彩與插畫風格保持統一   # 對比(Contrast)  * 對比指設計元素間的差異,用於建立視覺層次 * 對比可透過顏色、形狀、字體或質地實現 * 對比能創造焦點並引導觀眾閱讀順序 * 範例:海報使用黃紫對比、不同字體與形狀,雜誌封面利用字體大小和大小寫建立層次   # 強調(Emphasis)  * 強調用於吸引觀眾注意特定元素 * 透過顏色、線條及正負空間關係創造焦點 * 對比可強化強調效果 * 範例:書籍封面改變元素顏色與方向突出標題,宣傳單使用引導線指向重點元素   # 重複(Repetition)  * 重複指在設計中反覆使用相同元素以建立一致性 * 可重複字體、圖形元素或網格 * 範例:極簡海報重複葉子形狀,品牌套件中重複黃色波浪形元素建立一致性   # 圖案(Pattern)  * 圖案是多個元素的反覆排列,用於增強觀眾體驗 * 圖案可延伸品牌圖形線條或創造視覺氛圍 * 使用圖案時需避免過於雜亂或干擾訊息傳達 * 範例:海報使用簡單波浪圖案不干擾文字,名片透過大象圖示創造強烈品牌感   --- # 節奏(Rhythm)  * 節奏是元素反覆排列並略作變化形成的視覺節拍 * 節奏創造有組織的運動感,通常不易直接察覺 * 範例:背景矩形與顏色塊反覆排列、宣傳單透過三角形不同尺寸與顏色增加動態感   # 動作(Movement)  * 動作指觀眾視線在版面中的移動路徑 * 可透過元素排列引導觀眾到重點資訊 * 範例:海報利用摩托車輪與文字引導視線、宣傳單透過樹枝與有機形狀增加動感   # 比例(Proportion)  * 比例是元素間的關係感,用以增強統一、平衡與和諧 * 主次資訊透過字體大小與位置建立層次 * 範例:海報主標題居中,次要元素置於兩側,大小分明;書籍排版中標題、引用與正文大小區分明確   # 和諧(Harmony)  * 和諧是設計元素間的關聯感,使整體一致而不完全相同 * 可透過色彩、字體、風格相似性達成 * 範例:書籍封面字體與手寫元素搭配、CD封面色彩與幾何形狀和諧搭配   # 多樣性(Variety)  * 多樣性創造對比與張力,增加設計趣味性 * 可混合不同形狀、字體、影像或插畫元素 * 範例:海報結合嚴謹網格與手寫字體、不同角度影像;Envato Elements範例透過顏色與字體區隔各區塊   # 設計原則的作用 * 原則是創作組成的基礎,幫助建立結構與呈現方式 * 可作為檢視與編輯設計的工具,確保每個元素都有功能與目的 * 使用設計原則能有效傳達訊息,提升作品的清晰度與可理解性 * 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):從概念到完成作品的系統化步驟
×
Sign in
Email
Password
Forgot password
or
Sign in via Google
Sign in via Facebook
Sign in via X(Twitter)
Sign in via GitHub
Sign in via Dropbox
Sign in with Wallet
Wallet (
)
Connect another wallet
Continue with a different method
New to HackMD?
Sign up
By signing in, you agree to our
terms of service
.