4.1

視覺設計基本原則推薦書目“設計原則一、親密性二、對齊

三、重復四、對比

“

一、親密性什么是親密性一、親密性“

親密性是指將邏輯上存在關聯的元素排列組合在一起，歸為一組，使其被看作是密切相關的整體，而不是一堆雜亂無章的元素。一、親密性“試著快速說出，下面兩張圖片各有幾種水果？水果的個數分別多少？右圖更有組織性，更容易獲取信息?！耙?、親密性哪個設計更有組織性，更易獲取頁面信息？右圖更有組織性，更容易獲取信息。親密性的目的“

通過親密性應用，有助于組織信息，為讀者提供清晰的結構。一、親密性“將相關的項組織在一起,移動相關的項，使它們的物理位置相互靠近；無關要素，彼此分開。如何實現親密性一、親密性“親密性練習按照親密性原則，修改上述名片。一、親密性“二、對齊親密性案例“項與項之間又該如何組織呢？““二、對齊什么是對齊“

任何元素都不能在頁面上隨便擺放，每個元素應當與頁面的另一個元素存在某種視覺聯系，因此要在元素間建立視覺紐帶。二、對齊對齊的目的“使頁面統一而有條理二、對齊如何實現對齊“任何元素都能在頁面上找出與之對齊的元素；可采用左對齊、右對齊、居中對齊和兩端對齊等方式。二、對齊對齊案例“二、對齊邊界是“軟”的。邊界是“硬”的。對齊案例“二、對齊對齊案例“二、對齊通過親密性原則，可以劃分成不同的元素組合；通過對齊原則，使元素在視覺上看起來彼此相關。但僅僅依靠親密性及對齊原則并不能完整呈現

兩個平等關系的元素組合?！啊叭?、重復什么是重復“

讓有相同屬性的元素在整個作品中反復出現，可重復顏色、形狀、空間關系、字體、大小等，可增加作品風格的統一性。三、重復“可以通過使用不同的字體、字號、顏色進行重復。如何實現重復三、重復重復元素有哪些？粗字體細字體項目符號縮進行距對齊“““““要避免太多地重復一個元素，太多會讓人反感，注意對比的價值?！啊八摹Ρ仁裁词菍Ρ取?/p>

對比是指在頁面上的不同元素之間要以接截然不同的方式來呈現，通過對比，增強頁面視覺效果，強調視覺重點。無對比，不設計!四、對比“字體大小的對比；粗細對比；冷暖色的對比；行間距對比；大圖片與小圖片的對比。如何實現對比四、對比“對比案例四、對比小結“設計原則親密性對齊重復對比這四個設計原則實際上是相互關聯的，只應用某個原則的情況是很少的。謝

謝

觀

看！4.1

視覺設計基本原則推薦書目“設計原則一、親密性二、對齊

三、重復四、對比

“

一、親密性什么是親密性一、親密性“

親密性是指將邏輯上存在關聯的元素排列組合在一起，歸為一組，使其被看作是密切相關的整體，而不是一堆雜亂無章的元素。一、親密性“試著快速說出，下面兩張圖片各有幾種水果？水果的個數分別多少？右圖更有組織性，更容易獲取信息?！耙弧⒂H密性哪個設計更有組織性，更易獲取頁面信息？右圖更有組織性，更容易獲取信息。親密性的目的“

通過親密性應用，有助于組織信息，為讀者提供清晰的結構。一、親密性“將相關的項組織在一起,移動相關的項，使它們的物理位置相互靠近；無關要素，彼此分開。如何實現親密性一、親密性“親密性練習按照親密性原則，修改上述名片。一、親密性“二、對齊親密性案例“項與項之間又該如何組織呢？““二、對齊什么是對齊“

任何元素都不能在頁面上隨便擺放，每個元素應當與頁面的另一個元素存在某種視覺聯系，因此要在元素間建立視覺紐帶。二、對齊對齊的目的“使頁面統一而有條理二、對齊如何實現對齊“任何元素都能在頁面上找出與之對齊的元素；可采用左對齊、右對齊、居中對齊和兩端對齊等方式。二、對齊對齊案例“二、對齊邊界是“軟”的。邊界是“硬”的。對齊案例“二、對齊對齊案例“二、對齊通過親密性原則，可以劃分成不同的元素組合；通過對齊原則，使元素在視覺上看起來彼此相關。但僅僅依靠親密性及對齊原則并不能完整呈現

兩個平等關系的元素組合?！啊叭?、重復什么是重復“

讓有相同屬性的元素在整個作品中反復出現，可重復顏色、形狀、空間關系、字體、大小等，可增加作品風格的統一性。三、重復“可以通過使用不同的字體、字號、顏色進行重復。如何實現重復三、重復重復元素有哪些？粗字體細字體項目符號縮進行距對齊“““““要避免太多地重復一個元素，太多會讓人反感，注意對比的價值?！啊八摹Ρ仁裁词菍Ρ取?/p>

對比是指在頁面上的不同元素之間要以接截然不同的方式來呈現，通過對比，增強頁面視覺效果，強調視覺重點。無對比，不設計!四、對比“字體大小的對比；粗細對比；冷暖色的對比；行間距對比；大圖片與小圖片的對比。如何實現對比四、對比“對比案例四、對比小結“設計原則親密性對齊重復對比這四個設計原則實際上是相互關聯的，只應用某個原則的情況是很少的。謝

謝

觀

看！4.1

視覺設計基本原則推薦書目“設計原則一、親密性二、對齊

三、重復四、對比

“

一、親密性什么是親密性一、親密性“

親密性是指將邏輯上存在關聯的元素排列組合在一起，歸為一組，使其被看作是密切相關的整體，而不是一堆雜亂無章的元素。一、親密性“試著快速說出，下面兩張圖片各有幾種水果？水果的個數分別多少？右圖更有組織性，更容易獲取信息?！耙?、親密性哪個設計更有組織性，更易獲取頁面信息？右圖更有組織性，更容易獲取信息。親密性的目的“

通過親密性應用，有助于組織信息，為讀者提供清晰的結構。一、親密性“將相關的項組織在一起,移動相關的項，使它們的物理位置相互靠近；無關要素，彼此分開。如何實現親密性一、親密性“親密性練習按照親密性原則，修改上述名片。一、親密性“二、對齊親密性案例“項與項之間又該如何組織呢？““二、對齊什么是對齊“

任何元素都不能在頁面上隨便擺放，每個元素應當與頁面的另一個元素存在某種視覺聯系，因此要在元素間建立視覺紐帶。二、對齊對齊的目的“使頁面統一而有條理二、對齊如何實現對齊“任何元素都能在頁面上找出與之對齊的元素；可采用左對齊、右對齊、居中對齊和兩端對齊等方式。二、對齊對齊案例“二、對齊邊界是“軟”的。邊界是“硬”的。對齊案例“二、對齊對齊案例“二、對齊通過親密性原則，可以劃分成不同的元素組合；通過對齊原則，使元素在視覺上看起來彼此相關。但僅僅依靠親密性及對齊原則并不能完整呈現

兩個平等關系的元素組合?！啊叭⒅貜褪裁词侵貜汀?/p>

讓有相同屬性的元素在整個作品中反復出現，可重復顏色、形狀、空間關系、字體、大小等，可增加作品風格的統一性。三、重復“可以通過使用不同的字體、字號、顏色進行重復。如何實現重復三、重復重復元素有哪些？粗字體細字體項目符號縮進行距對齊“““““要避免太多地重復一個元素，太多會讓人反感，注意對比的價值?！啊八?、對比什么是對比“

對比是指在頁面上的不同元素之間要以接截然不同的方式來呈現，通過對比，增強頁面視覺效果，強調視覺重點。無對比，不設計!四、對比“字體大小的對比；粗細對比；冷暖色的對比；行間距對比；大圖片與小圖片的對比。如何實現對比四、對比“對比案例四、對比小結“設計原則親密性對齊重復對比這四個設計原則實際上是相互關聯的，只應用某個原則的情況是很少的。謝

謝

觀

看！

4.2色彩理論與電商色彩搭配策略配色設計一、色彩的基本屬性二、色彩的情感三、色彩的選擇四、配色理論與方法“一、色彩的基本屬性“自然界中的顏色可以分為非彩色和彩色兩大類。非彩色指黑色、白色和各種深淺不一的灰色，而其他所有顏色均屬于彩色。一、色彩的基本屬性“

彩色的三要素色相明度飽和度一、色彩的基本屬性彩色三屬性：色相色相也叫色調，指顏色的種類，是一種顏色區別于其他顏色的因素。“一、色彩的基本屬性彩色三屬性：飽和度“飽和度是指顏色的純度。一、色彩的基本屬性彩色三屬性：明度“明度是指人眼所能感受到的色彩的明暗程度。一、色彩的基本屬性“飽和度明度色相一、色彩的基本屬性“二、色彩的情感二、色彩的情感““

紅色二、色彩的情感“

紅色二、色彩的情感“

橙色二、色彩的情感

黃色“二、色彩的情感

綠色“二、色彩的情感藍色“二、色彩的情感

紫色“二、色彩的情感“三、色彩的選擇基于產品定位色彩三、色彩選擇““基于消費者特點選擇色彩三、色彩選擇“基于消費者特點選擇色彩三、色彩選擇“基于消費者特點選擇色彩三、色彩選擇“四、配色理論與方法色相環四、配色理論與方法““色相環四、配色理論與方法常用的色彩搭配法同類色搭配“15度以內四、配色理論與方法鄰近色搭配60度以內“常用的色彩搭配法四、配色理論與方法鄰近色搭配“常用的色彩搭配法四、配色理論與方法類似色搭配90度以內“常用的色彩搭配法四、配色理論與方法互補色直徑位置“常用的色彩搭配法四、配色理論與方法色彩搭配技法風景取色法“四、配色理論與方法選取圖像打馬賽克，選取顏色“風景取色法色彩搭配技法四、配色理論與方法

選取圖像選取顏色應用“風景取色法色彩搭配技法四、配色理論與方法工具取色法

“色彩搭配技法四、配色理論與方法色彩的基本屬性色彩的情感電商美工色彩選擇配色理論與方法小結“采用風景取色法對下面的圖像進行取色，并分析各自可應用于哪些領域？思考題“謝

謝

觀

看！

4.2色彩理論與電商色彩搭配策略配色設計一、色彩的基本屬性二、色彩的情感三、色彩的選擇四、配色理論與方法“一、色彩的基本屬性“自然界中的顏色可以分為非彩色和彩色兩大類。非彩色指黑色、白色和各種深淺不一的灰色，而其他所有顏色均屬于彩色。一、色彩的基本屬性“

彩色的三要素色相明度飽和度一、色彩的基本屬性彩色三屬性：色相色相也叫色調，指顏色的種類，是一種顏色區別于其他顏色的因素?！耙?、色彩的基本屬性彩色三屬性：飽和度“飽和度是指顏色的純度。一、色彩的基本屬性彩色三屬性：明度“明度是指人眼所能感受到的色彩的明暗程度。一、色彩的基本屬性“飽和度明度色相一、色彩的基本屬性“二、色彩的情感二、色彩的情感““

紅色二、色彩的情感“

紅色二、色彩的情感“

橙色二、色彩的情感

黃色“二、色彩的情感

綠色“二、色彩的情感藍色“二、色彩的情感

紫色“二、色彩的情感“三、色彩的選擇基于產品定位色彩三、色彩選擇““基于消費者特點選擇色彩三、色彩選擇“基于消費者特點選擇色彩三、色彩選擇“基于消費者特點選擇色彩三、色彩選擇“四、配色理論與方法色相環四、配色理論與方法““色相環四、配色理論與方法常用的色彩搭配法同類色搭配“15度以內四、配色理論與方法鄰近色搭配60度以內“常用的色彩搭配法四、配色理論與方法鄰近色搭配“常用的色彩搭配法四、配色理論與方法類似色搭配90度以內“常用的色彩搭配法四、配色理論與方法互補色直徑位置“常用的色彩搭配法四、配色理論與方法色彩搭配技法風景取色法“四、配色理論與方法選取圖像打馬賽克，選取顏色“風景取色法色彩搭配技法四、配色理論與方法

選取圖像選取顏色應用“風景取色法色彩搭配技法四、配色理論與方法工具取色法

“色彩搭配技法四、配色理論與方法色彩的基本屬性色彩的情感電商美工色彩選擇配色理論與方法小結“采用風景取色法對下面的圖像進行取色，并分析各自可應用于哪些領域？思考題“謝

謝

觀

看！

4.2色彩理論與電商色彩搭配策略配色設計一、色彩的基本屬性二、色彩的情感三、色彩的選擇四、配色理論與方法“一、色彩的基本屬性“自然界中的顏色可以分為非彩色和彩色兩大類。非彩色指黑色、白色和各種深淺不一的灰色，而其他所有顏色均屬于彩色。一、色彩的基本屬性“

彩色的三要素色相明度飽和度一、色彩的基本屬性彩色三屬性：色相色相也叫色調，指顏色的種類，是一種顏色區別于其他顏色的因素。“一、色彩的基本屬性彩色三屬性：飽和度“飽和度是指顏色的純度。一、色彩的基本屬性彩色三屬性：明度“明度是指人眼所能感受到的色彩的明暗程度。一、色彩的基本屬性“飽和度明度色相一、色彩的基本屬性“二、色彩的情感二、色彩的情感““

紅色二、色彩的情感“

紅色二、色彩的情感“

橙色二、色彩的情感

黃色“二、色彩的情感

綠色“二、色彩的情感藍色“二、色彩的情感

紫色“二、色彩的情感“三、色彩的選擇基于產品定位色彩三、色彩選擇““基于消費者特點選擇色彩三、色彩選擇“基于消費者特點選擇色彩三、色彩選擇“基于消費者特點選擇色彩三、色彩選擇“四、配色理論與方法色相環四、配色理論與方法““色相環四、配色理論與方法常用的色彩搭配法同類色搭配“15度以內四、配色理論與方法鄰近色搭配60度以內“常用的色彩搭配法四、配色理論與方法鄰近色搭配“常用的色彩搭配法四、配色理論與方法類似色搭配90度以內“常用的色彩搭配法四、配色理論與方法互補色直徑位置“常用的色彩搭配法四、配色理論與方法色彩搭配技法風景取色法“四、配色理論與方法選取圖像打馬賽克，選取顏色“風景取色法色彩搭配技法四、配色理論與方法

選取圖像選取顏色應用“風景取色法色彩搭配技法四、配色理論與方法工具取色法

“色彩搭配技法四、配色理論與方法色彩的基本屬性色彩的情感電商美工色彩選擇配色理論與方法小結“采用風景取色法對下面的圖像進行取色，并分析各自可應用于哪些領域？思考題“謝

謝

觀

看！

4.3構圖概述與基本形式構圖一、構圖概述二、構圖基本形式“

一、構圖概述一、構圖概述“九宮格構圖對稱式構圖對角線構圖三角形構圖“一、構圖概述引導線構圖水平構圖垂直構圖向心式構圖“一、構圖概述“

二、構圖的基本形式概念

九宮格構圖法是用水平和垂直的4條線將畫面分成9格，將主要元素放在線的交叉點上。01九宮格構圖““案例01九宮格構圖“案例01九宮格構圖

九宮格構圖使主體自然成為視覺中心，具有突出主體，并使畫面趨向均衡的特點。“特點01九宮格構圖

對稱式構圖是常用的一種構圖技巧，一般分為左右、上下和斜向三個方向上大致對等的視覺效果。概念“02對稱式構圖“案例02對稱式構圖

使用對稱式構圖，可以讓畫面達到一種平衡感，具有平衡、穩定、相呼應的特點?！疤攸c02對稱式構圖如何打破呆板、缺少變化的負面氣質？“負面氣質02對稱式構圖“應用案例02對稱式構圖

對角線構圖是基本的構圖方式之一，它把主體安排在畫面兩對角的連線上，有運動感、立體感和延伸感。概念“03對角線構圖“案例03對角線構圖“案例03對角線構圖對角線構圖法可以使畫面更加富有鮮活力和節奏感?！疤攸c03對角線構圖

三角形構圖是指在畫面中所表達的主體放在三角形中或影像本身形成三角形的態勢。概念“04三角形構圖“案例04三角形構圖三角形構圖既創造了平衡感、又增添了動感?！疤攸c04三角形構圖

引導線構圖法，即利用線條引導觀者的目光，使之匯聚到畫面的焦點。引導線不一定是具體的線，但凡有方向的、連續的東西，都可以稱為引導線。概念“05引導線構圖“案例05引導線構圖引導線構圖使近處和遠處的景物相呼應；增加了立體空間感（縱深感）；通過引導線引向興趣點，突出主體?！疤攸c05引導線構圖“應用05引導線構圖

水平線構圖是最基本的構圖法之一，以水平線條為主。水平，舒展的線條能夠表現出寬闊、穩定、和諧的感覺，通常運用在湖面、水面、草原等等。概念“06水平線構圖“案例06水平線構圖

垂直線構圖即畫面中以垂直線條為主。垂直線在人們的心里是符號化象征，能充分展示景物的高大和深度。概念“07垂直線構圖“案例07垂直線構圖

向心式構圖是指主體處于中心位置，而四周景物朝中心集中的構圖形式。具有突出主體的鮮明特點，但有時也會形成壓迫中心，產生局促沉重的感覺。概念“08向心式構圖“案例08向心式構圖構圖的基本方法案例解析綜合應用多種構圖法。小結“下面的海報主要采用什么構圖法?思考題“謝

謝

觀

看！

4.3構圖概述與基本形式構圖一、構圖概述二、構圖基本形式“

一、構圖概述一、構圖概述“九宮格構圖對稱式構圖對角線構圖三角形構圖“一、構圖概述引導線構圖水平構圖垂直構圖向心式構圖“一、構圖概述“

二、構圖的基本形式概念

九宮格構圖法是用水平和垂直的4條線將畫面分成9格，將主要元素放在線的交叉點上。01九宮格構圖““案例01九宮格構圖“案例01九宮格構圖

九宮格構圖使主體自然成為視覺中心，具有突出主體，并使畫面趨向均衡的特點?！疤攸c01九宮格構圖

對稱式構圖是常用的一種構圖技巧，一般分為左右、上下和斜向三個方向上大致對等的視覺效果。概念“02對稱式構圖“案例02對稱式構圖

使用對稱式構圖，可以讓畫面達到一種平衡感，具有平衡、穩定、相呼應的特點。“特點02對稱式構圖如何打破呆板、缺少變化的負面氣質？“負面氣質02對稱式構圖“應用案例02對稱式構圖

對角線構圖是基本的構圖方式之一，它把主體安排在畫面兩對角的連線上，有運動感、立體感和延伸感。概念“03對角線構圖“案例03對角線構圖“案例03對角線構圖對角線構圖法可以使畫面更加富有鮮活力和節奏感?！疤攸c03對角線構圖

三角形構圖是指在畫面中所表達的主體放在三角形中或影像本身形成三角形的態勢。概念“04三角形構圖“案例04三角形構圖三角形構圖既創造了平衡感、又增添了動感?！疤攸c04三角形構圖

引導線構圖法，即利用線條引導觀者的目光，使之匯聚到畫面的焦點。引導線不一定是具體的線，但凡有方向的、連續的東西，都可以稱為引導線。概念“05引導線構圖“案例05引導線構圖引導線構圖使近處和遠處的景物相呼應；增加了立體空間感（縱深感）；通過引導線引向興趣點，突出主體。“特點05引導線構圖“應用05引導線構圖

水平線構圖是最基本的構圖法之一，以水平線條為主。水平，舒展的線條能夠表現出寬闊、穩定、和諧的感覺，通常運用在湖面、水面、草原等等。概念“06水平線構圖“案例06水平線構圖

垂直線構圖即畫面中以垂直線條為主。垂直線在人們的心里是符號化象征，能充分展示景物的高大和深度。概念“07垂直線構圖“案例07垂直線構圖

向心式構圖是指主體處于中心位置，而四周景物朝中心集中的構圖形式。具有突出主體的鮮明特點，但有時也會形成壓迫中心，產生局促沉重的感覺。概念“08向心式構圖“案例08向心式構圖構圖的基本方法案例解析綜合應用多種構圖法。小結“下面的海報主要采用什么構圖法?思考題“謝

謝

觀

看！

4.3構圖概述與基本形式構圖一、構圖概述二、構圖基本形式“

一、構圖概述一、構圖概述“九宮格構圖對稱式構圖對角線構圖三角形構圖“一、構圖概述引導線構圖水平構圖垂直構圖向心式構圖“一、構圖概述“

二、構圖的基本形式概念

九宮格構圖法是用水平和垂直的4條線將畫面分成9格，將主要元素放在線的交叉點上。01九宮格構圖““案例01九宮格構圖“案例01九宮格構圖

九宮格構圖使主體自然成為視覺中心，具有突出主體，并使畫面趨向均衡的特點?！疤攸c01九宮格構圖

對稱式構圖是常用的一種構圖技巧，一般分為左右、上下和斜向三個方向上大致對等的視覺效果。概念“02對稱式構圖“案例02對稱式構圖

使用對稱式構圖，可以讓畫面達到一種平衡感，具有平衡、穩定、相呼應的特點?！疤攸c02對稱式構圖如何打破呆板、缺少變化的負面氣質？“負面氣質02對稱式構圖“應用案例02對稱式構圖

對角線構圖是基本的構圖方式之一，它把主體安排在畫面兩對角的連線上，有運動感、立體感和延伸感。概念“03對角線構圖“案例03對角線構圖“案例03對角線構圖對角線構圖法可以使畫面更加富有鮮活力和節奏感?！疤攸c03對角線構圖

三角形構圖是指在畫面中所表達的主體放在三角形中或影像本身形成三角形的態勢。概念“04三角形構圖“案例04三角形構圖三角形構圖既創造了平衡感、又增添了動感?！疤攸c04三角形構圖

引導線構圖法，即利用線條引導觀者的目光，使之匯聚到畫面的焦點。引導線不一定是具體的線，但凡有方向的、連續的東西，都可以稱為引導線。概念“05引導線構圖“案例05引導線構圖引導線構圖使近處和遠處的景物相呼應；增加了立體空間感（縱深感）；通過引導線引向興趣點，突出主體?！疤攸c05引導線構圖“應用05引導線構圖

水平線構圖是最基本的構圖法之一，以水平線條為主。水平，舒展的線條能夠表現出寬闊、穩定、和諧的感覺，通常運用在湖面、水面、草原等等。概念“06水平線構圖“案例06水平線構圖

垂直線構圖即畫面中以垂直線條為主。垂直線在人們的心里是符號化象征，能充分展示景物的高大和深度。概念“07垂直線構圖“案例07垂直線構圖

向心式構圖是指主體處于中心位置，而四周景物朝中心集中的構圖形式。具有突出主體的鮮明特點，但有時也會形成壓迫中心，產生局促沉重的感覺。概念“08向心式構圖“案例08向心式構圖構圖的基本方法案例解析綜合應用多種構圖法。小結“下面的海報主要采用什么構圖法?思考題“謝

謝

觀

看！4.4字體設計與信息層級構建字體設計一、字體的類型二、字體的選擇與應用三、文字層級的布局“

一、字體的類型英文字體襯線體：起筆和落筆有裝飾襯線。無襯線體：沒有裝飾襯線，筆畫粗細一致。一、字體的類型“

書法體：帶有強烈的書法特色。英文字體“一、字體的類型“

二、字體的選擇與應用二、字體的選擇與應用無襯線體使用男性字體硬朗粗獷力量簡約“

電商大促沖擊力激情動感