《視覺(jué)營(yíng)銷設(shè)計(jì)》課件-跨境電商視覺(jué)設(shè)計(jì)法則

03跨境電商視覺(jué)設(shè)計(jì)法則Visualdesignprinciplesforcross-bordere-commerce3.1設(shè)計(jì)基本原則3.2配色設(shè)計(jì)3.3構(gòu)圖設(shè)計(jì)跨境電商視覺(jué)設(shè)計(jì)法則3.4字體設(shè)計(jì)3.5留白設(shè)計(jì)3.1

視覺(jué)設(shè)計(jì)基本原則3.1設(shè)計(jì)基本原則變化與統(tǒng)一對(duì)比與調(diào)和對(duì)稱與均衡分割與比例節(jié)奏與韻律焦點(diǎn)與重點(diǎn)3.1設(shè)計(jì)基本原則變化與統(tǒng)一設(shè)計(jì)中要在統(tǒng)一中求變化，變化中求統(tǒng)一，使單調(diào)的豐富起來(lái)，使復(fù)雜的一致起來(lái)，形成多樣統(tǒng)一的美感。3.1設(shè)計(jì)基本原則對(duì)比與調(diào)和對(duì)比是突出事物之間的差異，產(chǎn)生沖突，調(diào)和是尋求元素之間的共同點(diǎn)，緩和矛盾。需從全局規(guī)劃畫(huà)面，組織元素，達(dá)到視覺(jué)的統(tǒng)一。3.1設(shè)計(jì)基本原則對(duì)稱與均衡對(duì)稱與均衡統(tǒng)稱為平衡，平衡在設(shè)計(jì)中指視覺(jué)重量的平等分布，可以帶來(lái)心理上的穩(wěn)定感和安全感，以創(chuàng)造出具有美感和吸引力的作品。3.1設(shè)計(jì)基本原則分割與比例在設(shè)計(jì)中會(huì)考慮各個(gè)元素之間的比例關(guān)系，確定分割的位置和大小，使分割更加合理和有序，從而增強(qiáng)作品的整體美感。3.1設(shè)計(jì)基本原則節(jié)奏與韻律節(jié)奏強(qiáng)調(diào)動(dòng)感和規(guī)律性，韻律注重和諧性美感，兩者都指有規(guī)律的變化，表現(xiàn)出秩序美和條理美。3.1設(shè)計(jì)基本原則焦點(diǎn)與重點(diǎn)焦點(diǎn)和重點(diǎn)的設(shè)置可以引導(dǎo)觀眾的視線，強(qiáng)調(diào)重要信息，引導(dǎo)觀眾更好的理解和體驗(yàn)設(shè)計(jì)。小結(jié)這六個(gè)設(shè)計(jì)原則實(shí)際上是相互關(guān)聯(lián)的，只應(yīng)用某個(gè)原則的情況是很少的。3.2

配色設(shè)計(jì)3.2.1色彩的基本屬性自然界中的顏色可分為非彩色和彩色。非彩色指黑色、白色和各種深淺不一的灰色，它們沒(méi)有明顯的色相偏差又稱作為“中性色”。3.2.1色彩的基本屬性彩色指彩色是指帶有某一標(biāo)準(zhǔn)色傾向的顏色。彩色是無(wú)數(shù)的，由紅、綠、藍(lán)三原色綜合而來(lái).明度最高的黃色，明度最低的紫色。3.2.1色彩的基本屬性彩色的三要素色相明度飽和度3.2.1色彩的基本屬性彩色三屬性：色相色相也叫色調(diào)，指顏色的種類，是一種顏色區(qū)別于其他顏色的因素。3.2.1色彩的基本屬性彩色三屬性：飽和度飽和度是指顏色的純度。3.2.1色彩的基本屬性彩色三屬性：飽和度同一色相中，飽和度從高到低，從鮮艷到渾濁。3.2.1色彩的基本屬性3.2.1色彩的基本屬性彩色三屬性：明度明度是指人眼所能感受到的色彩的明暗程度。3.2.2色彩傳達(dá)白色3.2.2色彩傳達(dá)紅色系3.2.2色彩傳達(dá)橙色系3.2.2色彩傳達(dá)綠色系3.2.2色彩傳達(dá)藍(lán)色系3.2.2色彩傳達(dá)藍(lán)色系3.2.3配色技巧同色系搭配營(yíng)造統(tǒng)一感15度以內(nèi)3.2.3配色技巧3.2.3配色技巧鄰近色搭配畫(huà)面和諧、有層次。60度以內(nèi)3.2.3配色技巧3.2.3配色技巧3.2.3配色技巧互補(bǔ)色搭配畫(huà)面具有視覺(jué)沖擊力。相距180度3.2.3配色技巧3.2.3配色技巧冷、暖色搭配提升畫(huà)面質(zhì)感

色彩學(xué)上依賴于任何社會(huì)生活經(jīng)驗(yàn)和聯(lián)想產(chǎn)生的感受，把顏色分為冷色調(diào)和暖色調(diào)，冷色調(diào)色彩的亮度越高，給人的感覺(jué)越溫暖;暖色調(diào)色彩的亮度越高，給人的感覺(jué)越冷。3.2.3配色技巧3.2.3配色技巧3.2.4色彩搭配的素材3.2.4色彩搭配的素材3.3構(gòu)圖設(shè)計(jì)3.3.1構(gòu)圖概述3.3.1構(gòu)圖概述九宮格構(gòu)圖對(duì)稱式構(gòu)圖對(duì)角線構(gòu)圖3.3.1構(gòu)圖概述引導(dǎo)線構(gòu)圖向心式構(gòu)圖三角形構(gòu)圖3.3.2構(gòu)圖的基本形式九宮格構(gòu)圖法九宮格構(gòu)圖法是用水平和垂直的4條線將畫(huà)面分成9格，將主要元素放在線的交叉點(diǎn)上。3.3.2構(gòu)圖的基本形式主體成為視覺(jué)中心，具有突出主體，并使畫(huà)面趨向均衡。特點(diǎn)3.3.2構(gòu)圖的基本形式對(duì)稱式構(gòu)圖法對(duì)稱式構(gòu)圖是常用的一種構(gòu)圖技巧，一般分為左右、上

、下和斜向三

個(gè)方向上大致對(duì)等的視覺(jué)效果。3.3.2構(gòu)圖的基本形式畫(huà)面達(dá)到一種平衡感，具有平衡、穩(wěn)定、相呼應(yīng)的特點(diǎn)。特點(diǎn)3.3.2構(gòu)圖的基本形式對(duì)角線構(gòu)圖對(duì)角線構(gòu)圖是基本的構(gòu)圖方式之一，它把主體安排在畫(huà)面兩對(duì)角的連線上，有運(yùn)動(dòng)感、立體感和延伸感。3.3.2構(gòu)圖的基本形式對(duì)角線構(gòu)圖法可以使畫(huà)面更加富有鮮活力和節(jié)奏感。特點(diǎn)3.3.2構(gòu)圖的基本形式三角形構(gòu)圖三角形構(gòu)圖是指在畫(huà)面中所表達(dá)的主體放在三角形中或影像

本身形成三角形的態(tài)勢(shì)。3.3.2構(gòu)圖的基本形式三角形構(gòu)圖既創(chuàng)造了平衡感、又增添了動(dòng)感。特點(diǎn)3.3.2構(gòu)圖的基本形式3.3.2構(gòu)圖的基本形式引導(dǎo)線構(gòu)圖引導(dǎo)線構(gòu)圖法，即利用線條引導(dǎo)觀者的目光，使之匯聚到畫(huà)面的焦點(diǎn)。引

導(dǎo)線不一定是具體的線，但凡有方向的、連續(xù)的東西，都可以稱為引導(dǎo)線。3.3.2構(gòu)圖的基本形式引導(dǎo)線構(gòu)圖使近處和遠(yuǎn)處的景物相呼應(yīng)；增加了立體空間感（縱深感）；通過(guò)引導(dǎo)線引向興趣點(diǎn)，突出主體。特點(diǎn)3.3.2構(gòu)圖的基本形式向心式構(gòu)圖向心式構(gòu)圖是指主體處于中心位置，而四周景物朝中心集中的構(gòu)圖形式。具有突出主體的鮮明特點(diǎn)，但有時(shí)也會(huì)形成壓迫中心，產(chǎn)生局促沉重的感覺(jué)。3.3.2構(gòu)圖的基本形式向心式構(gòu)圖3.4字體設(shè)計(jì)3.4.1字體的類型英文字體襯線體：起筆和落筆有裝飾襯線。無(wú)襯線體：沒(méi)有裝飾襯線，筆畫(huà)粗細(xì)一致。3.4.1字體的類型書(shū)法體：帶有強(qiáng)烈的書(shū)法特色。英文字體3.4.2字體的選擇與運(yùn)用無(wú)襯線體使用男性字體硬朗粗獷力量簡(jiǎn)約3.4.2字體的選擇與運(yùn)用電商大促?zèng)_擊力激情動(dòng)感無(wú)襯線體使用3.4.2字體的選擇與運(yùn)用女性字體柔軟纖細(xì)秀美襯線體使用3.4.2字體的選擇與運(yùn)用文藝、民族風(fēng)作品優(yōu)美復(fù)古典雅襯線體使用3.4.2字體的選擇與運(yùn)用強(qiáng)烈的個(gè)性書(shū)法體使用3.4.3文字的層級(jí)與布局第一層級(jí)是首要文字第二層級(jí)是次要文字第三層級(jí)是正文3.4.3文字的層級(jí)與布局第一層級(jí)第二層級(jí)第三層級(jí)3.5留白設(shè)計(jì)宋代馬遠(yuǎn)創(chuàng)作的【寒江獨(dú)釣圖】“3.5.1什么是留白很多人認(rèn)為留白就是留出（）色。白留白≠留出白色。留白是指在作品中留出相應(yīng)的空白，留出空間3.5.1什么是留白3.5.1什么是留白3.5.1什么是留白3.5.2為什么要留白3.5.2為什么要留白01突出主題哪一張的主體更加突出？3.5.2為什么要留白3.5.2為什么要留白無(wú)印良品“地平線”海報(bào)3.5.2為什么要留白無(wú)印良品“地平線”海報(bào)3.5.2為什么要留白02提升品質(zhì)3.5.2為什么要留白02提升品質(zhì)3.5.2為什么要留白3.5.3如何留白KISS原則（KeepItSimple&Stupid）3.5.3如何留白01去掉多余的元素3.5.3如何留白3.5.3如何留白BENECIOEMILYDELTOROBLUNTNevergiveyourtalentawayforfreeLIQUIDITYINTHEATERSNOVEMBER02留出足夠的空間3.5.3如何留白BENECIOEMILYDELTOROBLUNTNevergiveyourtalentawayforfreeLIQUIDITYINTHEATERSNOVEMBER02留出足夠的