《新媒體運(yùn)營》第2版 課件 2.3.2 視覺設(shè)計(jì)的基本原則

項(xiàng)目2微信公眾號(hào)運(yùn)營任務(wù)2.3微信公眾號(hào)的視覺設(shè)計(jì)新媒體運(yùn)營2.3.2視覺設(shè)計(jì)的基本原則1.統(tǒng)一

統(tǒng)一是指版面中所有部分——特別是每個(gè)與設(shè)計(jì)中其他部分相關(guān)的獨(dú)立元素——全面的凝聚和結(jié)合。許多品牌都會(huì)花大量的金錢和精力，打造視覺識(shí)別系統(tǒng)（VI），在新媒體視覺設(shè)計(jì)中，視覺識(shí)別系統(tǒng)基本要素是指Logo、封面、品牌標(biāo)語、標(biāo)題、二維碼、海報(bào)等。新媒體品牌同樣也應(yīng)該有視覺識(shí)別系統(tǒng)。二維碼封面標(biāo)準(zhǔn)字：鄭慶科黃油體標(biāo)準(zhǔn)色：#ab1942輔助色：#595959字號(hào)：15號(hào)&12號(hào)正文2.3.2視覺設(shè)計(jì)的基本原則1.統(tǒng)一（1）風(fēng)格統(tǒng)一

藝術(shù)家MarcoMarilungo用漫畫的形式將人類藝術(shù)史上最主要的16種風(fēng)格生動(dòng)形象地展現(xiàn)了出來?，F(xiàn)實(shí)主義印象主義野獸派新藝術(shù)運(yùn)動(dòng)表現(xiàn)主義立體主義未來主義抽象主義達(dá)達(dá)主義至上主義形而上主義超現(xiàn)實(shí)主義非正式藝術(shù)波普藝術(shù)極簡主義觀念主義2.3.2視覺設(shè)計(jì)的基本原則1.統(tǒng)一（1）風(fēng)格統(tǒng)一：插畫風(fēng)格2.3.2視覺設(shè)計(jì)的基本原則1.統(tǒng)一（1）風(fēng)格統(tǒng)一：手繪風(fēng)格2.3.2視覺設(shè)計(jì)的基本原則1.統(tǒng)一（1）風(fēng)格統(tǒng)一：極簡風(fēng)格2.3.2視覺設(shè)計(jì)的基本原則1.統(tǒng)一（1）風(fēng)格統(tǒng)一：極簡風(fēng)格2.3.2視覺設(shè)計(jì)的基本原則1.統(tǒng)一（2）色調(diào)統(tǒng)一在12色色環(huán)中，從紅色順時(shí)針旋轉(zhuǎn)到黃色的區(qū)域?qū)儆谂?，相?duì)的部分屬于冷色。2.3.2視覺設(shè)計(jì)的基本原則1.統(tǒng)一（2）色調(diào)統(tǒng)一暖色在自然界中常見于陽光、火焰、血液等，讓人感覺到溫暖和活力。對(duì)應(yīng)的關(guān)鍵詞有感性、歡樂、喧鬧、熱情、女性化等。比如，情感類自媒體，大都是以紅、黃等為主的暖色系，HUGO的主色彩偏冷，但在封面中用了紅、黃等暖色調(diào)和：2.3.2視覺設(shè)計(jì)的基本原則1.統(tǒng)一（2）色調(diào)統(tǒng)一主打女性用戶的時(shí)尚類自媒體也非常喜歡紅色：2.3.2視覺設(shè)計(jì)的基本原則1.統(tǒng)一（2）色調(diào)統(tǒng)一同樣的選色邏輯在美妝類自媒體中也適合：2.3.2視覺設(shè)計(jì)的基本原則1.統(tǒng)一（2）色調(diào)統(tǒng)一冷色在自然界中常見于海洋、天空、植物等，讓人感覺到清新和寧靜。對(duì)應(yīng)的關(guān)鍵詞有理性、自然、安靜、內(nèi)斂、男性化等。比如，金融理財(cái)類自媒體就更適合藍(lán)、綠等冷色系：統(tǒng)一原則

遵循統(tǒng)一原則，設(shè)計(jì)微信公眾號(hào)的視覺識(shí)別系統(tǒng)，包括但不限于：Logo封面品牌標(biāo)語標(biāo)題二維碼2.3.2視覺設(shè)計(jì)的基本原則2.平衡平衡的本質(zhì)是讓一條平衡軸兩側(cè)的重量保持平衡。2.3.2視覺設(shè)計(jì)的基本原則2.平衡平衡分為對(duì)稱平衡和非對(duì)稱平衡。對(duì)稱平衡非對(duì)稱平衡2.3.2視覺設(shè)計(jì)的基本原則（1）對(duì)稱平衡2.3.2視覺設(shè)計(jì)的基本原則（1）對(duì)稱平衡左圖：公眾號(hào)24HOURS封面；右圖：公眾號(hào)新世相封面2.3.2視覺設(shè)計(jì)的基本原則（1）對(duì)稱平衡居中對(duì)齊居中對(duì)齊2.3.2視覺設(shè)計(jì)的基本原則（1）對(duì)稱平衡兩端對(duì)齊2.3.2視覺設(shè)計(jì)的基本原則（2）非對(duì)稱平衡2.3.2視覺設(shè)計(jì)的基本原則（2）非對(duì)稱平衡圖片注釋右對(duì)齊作者介紹右對(duì)齊2.3.2視覺設(shè)計(jì)的基本原則（2）非對(duì)稱平衡左：HUGO，右：深夜發(fā)媸2.3.2視覺設(shè)計(jì)的基本原則（2）非對(duì)稱平衡左：24HOURS，右：十點(diǎn)讀書平衡原則（個(gè)人討論）判斷下面設(shè)計(jì)作品（圖1，圖2，圖3）是對(duì)稱平衡還是非對(duì)稱平衡。請(qǐng)將答案寫在討論區(qū)。圖1圖2圖32.3.2視覺設(shè)計(jì)的基本原則3.秩序

版面設(shè)計(jì)最理想的效果，就是可以讓讀者將版面全部內(nèi)容讀完。但通常情況下，這是很難實(shí)現(xiàn)的，因?yàn)樽x者的注意力很難集中，常常會(huì)跳躍式閱讀。為了避免這一點(diǎn)，需要?jiǎng)?chuàng)造合理的“視線流”，引導(dǎo)讀者循序漸進(jìn)地閱讀。視線流包括靜態(tài)和動(dòng)態(tài)兩種。2.3.2視覺設(shè)計(jì)的基本原則3.秩序（1）靜態(tài)視線流：從左到右

從左到右移動(dòng)視線，是我們?cè)诩埫綍r(shí)代保留下來的習(xí)慣，在很長的一段時(shí)期內(nèi)，我們還是會(huì)保留這個(gè)習(xí)慣。新媒體主要在移動(dòng)端的展示，橫向空間有限，沒有很大的發(fā)揮空間，但使用秀米編輯器實(shí)現(xiàn)首字下沉，可以使用戶在從左到右移動(dòng)視線時(shí)更容易找到起點(diǎn)。2.3.2視覺設(shè)計(jì)的基本原則3.秩序

大多數(shù)媒體都是以自上而下的視覺引導(dǎo)為基礎(chǔ)來進(jìn)行版式設(shè)計(jì)的，新媒體尤其明顯，因?yàn)樾旅襟w以手機(jī)端展示為主，左右的移動(dòng)空間受限，但上下移動(dòng)的空間不受限制，發(fā)揮空間很大。比如，微信公眾號(hào)局部氣候調(diào)查組以長圖為主要展示形式，無論是圖片還是文字，都遵循從上到下移動(dòng)的秩序，因?yàn)槭峭暾?、連續(xù)的長圖，所以讀者在從上到下移動(dòng)視線時(shí)非常順暢，不會(huì)被打斷，可以獲得非常好的閱讀體驗(yàn)。（1）靜態(tài)視線流：從上到下2.3.2視覺設(shè)計(jì)的基本原則3.秩序

在前面的平衡原則中已經(jīng)講過，大的物體會(huì)比小的物體擁有更大的視覺比重，所以，讀者的視線大部分情況下是從大到小移動(dòng)，我們應(yīng)該將重要的信息盡量放大。比如，通常情況下，我們會(huì)把標(biāo)題放大，把重要的圖片放大，都是遵循了視線從大到小移動(dòng)的規(guī)律。（1）靜態(tài)視線流：從大到小2.3.2視覺設(shè)計(jì)的基本原則3.秩序

人們的目光習(xí)慣向相同形狀或顏色的物體移動(dòng)。實(shí)現(xiàn)這種移動(dòng)最常見的方法就是使用統(tǒng)一的項(xiàng)目符號(hào)。比如說，這樣的項(xiàng)目符號(hào)，你看完一項(xiàng)，會(huì)自然地跳轉(zhuǎn)到下一項(xiàng)。（1）靜態(tài)視線流：向相似物體移動(dòng)2.3.2視覺設(shè)計(jì)的基本原則3.秩序

在人類文明中，對(duì)文明有巨大推動(dòng)作用的，當(dāng)屬文字。文字是從象形文字逐步演變而來，但在多年的演變過程中，箭頭的形狀卻從未改變。箭頭的出現(xiàn)，是因?yàn)楣畔ＥD畢達(dá)哥拉斯學(xué)派和柏拉圖認(rèn)為眼睛在捕捉物體時(shí)，視線、目光和力量，會(huì)以物體為目標(biāo)從眼睛向物體方向傳送，當(dāng)把這一想法用圖形來表示時(shí)，箭頭就誕生了。（1）靜態(tài)視線流：向箭頭方向移動(dòng)2.3.2視覺設(shè)計(jì)的基本原則3.秩序

動(dòng)態(tài)視線流是指用運(yùn)動(dòng)物體來引導(dǎo)視線，比較經(jīng)典的應(yīng)用是蘋果官方公眾號(hào)的推文《你不知道的Apple》，其中使用了移動(dòng)的葉子引導(dǎo)視線。（2）動(dòng)態(tài)視線流2.3.2視覺設(shè)計(jì)的基本原則4.對(duì)比

對(duì)比的目的主要有2個(gè)，一個(gè)是打破統(tǒng)一的版面設(shè)計(jì)，增強(qiáng)視覺效果。比如，差不多的兩個(gè)拳頭放在一起時(shí)，畫面很平淡，因?yàn)橹淮嬖诜较虻膶?duì)比：但如果是一個(gè)老人的拳頭和一個(gè)小孩的拳頭出現(xiàn)在同一畫面，視覺效果就會(huì)強(qiáng)烈很多，因?yàn)橥瑫r(shí)存在方向、大小、糙嫩3種類型的對(duì)比。2.3.2視覺設(shè)計(jì)的基本原則4.對(duì)比

對(duì)比的另一個(gè)目的是組織信息邏輯。完全統(tǒng)一的版面無法有效閱讀，只有通過對(duì)比，讀者才能對(duì)信息邏輯一目了然，對(duì)比越強(qiáng)烈，信息邏輯就越清晰。比如，一篇文章一般由標(biāo)題、小標(biāo)題、正文組成，如果標(biāo)題和正文間的對(duì)比不夠強(qiáng)烈，就很難一眼看出文章的邏輯，比如下面左圖中，只有文字大小的對(duì)比，小標(biāo)題就不夠顯眼，辨識(shí)較困難，如果加強(qiáng)對(duì)比，增加粗細(xì)和顏色的對(duì)比，改成右圖的樣式，對(duì)比就非常鮮明了，信息邏輯也就一目了然。2.3.2視覺設(shè)計(jì)的基本原則4.對(duì)比

（1）方向的對(duì)比2.3.2視覺設(shè)計(jì)的基本原則4.對(duì)比

公眾號(hào)HomeFacialPro的排版中也采用了這種方向的對(duì)比，標(biāo)題部分采用縱向布局，正文部分橫向排列，整體視覺效果非常靈動(dòng)。（1）方向的對(duì)比2.3.2視覺設(shè)計(jì)的基本原則4.對(duì)比

公眾號(hào)Voicer中的部分插圖也使用了橫向和縱向文字的對(duì)比，并增加了動(dòng)態(tài)效果，進(jìn)一步強(qiáng)化了對(duì)比。（1）方向的對(duì)比2.3.2視覺設(shè)計(jì)的基本原則4.對(duì)比

（2）形狀的對(duì)比大VS小幾何VS有機(jī)2.3.2視覺設(shè)計(jì)的基本原則4.對(duì)比

（3）色彩的對(duì)比

色彩的對(duì)比方案非常豐富，最為典型的有暖色和冷色的對(duì)比、亮色和暗色的對(duì)比、互補(bǔ)色對(duì)比等等。一般來說，色輪的右上方是暖色，左下方為冷色。暖色給人的印象：生動(dòng)、激情、有表現(xiàn)力，給人感覺在空間的位置靠前。適用于前景色。冷色給人的印象：謹(jǐn)慎、冷靜、平靜感，給人感覺在空間的位置靠后。適用于背景色。2.3.2視覺設(shè)計(jì)的基本原則4.對(duì)比

（3）色彩的對(duì)比冷暖色對(duì)比明暗色對(duì)比2.3.2視覺設(shè)計(jì)的基本原則4.對(duì)比（4）字體的對(duì)比西方國家字母體系分為兩類：襯線字體（serif）以及無襯線體（sansserif）。襯線字體，意思是在字的筆畫開始、結(jié)束的地方有額外的裝飾，而且筆畫的粗細(xì)會(huì)有所不同。常用的襯線字體為TimesNewRoman、Georgia、宋體。無襯線體是無襯線字體，沒有這些額外的裝飾，而且筆畫的粗細(xì)差不多。常用的無襯線字體為Verdana、Arial、黑體。2.3.2視覺設(shè)計(jì)的基本原則4.對(duì)比

（4）字體的對(duì)比思考：下面的字體屬于非襯線體還是襯線體？2.3.2視覺設(shè)計(jì)的基本原則4.對(duì)比

（4）字體的對(duì)比

根據(jù)經(jīng)驗(yàn)，最好選擇一種襯線字體和一種非襯線字體來設(shè)置對(duì)比，因?yàn)橥ǔ碚f，互補(bǔ)的兩種元素會(huì)產(chǎn)生很好的對(duì)比效果。右圖logo中非襯線體和襯線體，以及書寫體的對(duì)比完美平衡了整個(gè)設(shè)計(jì)。2.3.2視覺設(shè)計(jì)的基本原則4.對(duì)比

（5）圖文的對(duì)比

圖片和文字的視覺重量是不