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

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

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

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

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

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

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

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

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

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

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

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

對比的目的主要有2個，一個是打破統(tǒng)一的版面設(shè)計，增強視覺效果。比如，差不多的兩個拳頭放在一起時，畫面很平淡，因為只存在方向的對比：但如果是一個老人的拳頭和一個小孩的拳頭出現(xiàn)在同一畫面，視覺效果就會強烈很多，因為同時存在方向、大小、糙嫩3種類型的對比。2.3.2視覺設(shè)計的基本原則4.對比

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

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

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

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

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

（3）色彩的對比

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

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

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

（4）字體的對比

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

（5）圖文的對比

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