項目2微信公眾號運營任務2.3微信公眾號的視覺設計新媒體運營2.3.2視覺設計的基本原則1.統一

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

（3）色彩的對比

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

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

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

（4）字體的對比

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

（5）圖文的對比

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