精致又賞心悅目的圖文排版是怎樣煉成的?
一個讓人看了覺得精致又賞心悅目的圖文排版也不僅僅是頁面布局的美觀設(shè)計,更是整體VI的可識性,易讀性
一個讓人看了覺得精致又賞心悅目的圖文排版也不僅僅是頁面布局的美觀設(shè)計,更是整體VI的可識性,易讀性。對于非設(shè)計師的小編來說,不要求能做到這樣吹毛求疵的日式雜志排版水平,但也得有自己的獨特風(fēng)格習(xí)慣,這不是強迫癥,是對愛你的粉絲讀者負責。
?
色即是空空即是色
你可以選擇沉穩(wěn)大氣的黑色,充滿理性gay意的藍色,火熱又中立的暗紅,你也可以選擇最新出爐的靜謐藍 / 粉晶
不管你選擇什么顏色,都要基于你公眾號的調(diào)性,以及整體風(fēng)格定位。在選好顏色之后,想要瞬間提升逼格又不會錯,請記住以下三大原則 ▼
深灰色作為正文字體主色調(diào)
一般來說,你的正文文字最好避免使用墨黑色(純黑),當大面積的黑色字存在的時候會給人以刺眼的感覺(特別是底色還是純白色),這也就是為何“黑色會壓倒一切”,而你所看到的UI設(shè)計不論是網(wǎng)頁還是app,看上去的黑色大多數(shù)都是深灰,深灰色一般更容易閱讀也不會累眼。
一種顏色突出重點(強調(diào)色)
如果你選擇好幾種不同的色調(diào)來,那么你的配色方案很大程度上是有問題的。你顏色用得越多,你的頁面就越來越難以控制。所以最好結(jié)合你公眾號的VI風(fēng)格或者本期圖文主題只選擇一種顏色來作為你想要突出的重點事物(我們稱為強調(diào)色),黑色不作為強調(diào)色,突出的事物比如標題(一級二級)、符號、分割線等等。
對強調(diào)色進行同族篩選
推薦配色網(wǎng)站https://color.adobe.com/zh/create/color-wheel
確定強調(diào)色之后不斷調(diào)整飽和度亮度灰度來選擇眼睛最舒適的顏色值。
舊版微信編輯后臺的標準色卡可以做這一項工作(比較簡單粗暴),自微信后臺改版以來,很多小編苦惱沒有原來的標準色卡,但其實第三方編輯器如 135編輯器(135editor) 仍然保留色卡取色,你可以選擇在編輯器修改顏色復(fù)制,也可以選擇借助第三方編輯器查找對應(yīng)顏色代碼值進行修改編輯存儲。以135編輯器為例:
▼
不知道文字顏色RGB時可直接復(fù)制進編輯器打開HTML查看 | |
▼
知道RGB值情況下取色區(qū)輸入RGB值,獲取對應(yīng)#顏色代碼復(fù)制便于添加新版后臺使用 | |
▼
135編輯器也會對最近使用的顏色進行記錄,方便直接編輯。 | |
● ● ●
?
距離產(chǎn)生美
比如“深夜發(fā)媸”這類情感向賬號標志性排版就是大面積空白,藝術(shù)角度上叫做留白(White Space),但是你知道為什么留白嗎?除了有強烈的視覺沖擊力之外還有什么奧秘和理論依據(jù)嗎?再談及這個問題之前我想跟大家探討一個更加實用的排版技巧。
以前講課的時候曾提到「 有種逼格叫做兩端縮進 」&「 有種文藝叫做字字間距 」,從設(shè)計學(xué)角度而言,它們也是留白的一種簡單形式。比如下面我們講解排版設(shè)計段落本身 ▼
·排版設(shè)計大法·
歐洲各大院校設(shè)計師練習(xí)排版最有用的辦法就是放棄電腦,然后找到一堆透明硫酸紙,將同種字體同種字號同種粗細的句子或者段落印在硫酸紙上,像下圖,然后不斷地進行排列組合。該方法可以不斷地提高我們對文字與行與段落的認識以及敏感度。
·普通的設(shè)計師·
·牛逼的設(shè)計師·
分享來自@孫青椒
那么兩端縮進和字間距的效果如何完成呢?
如果要進行CSS的書寫,則需要修改代碼的margin值,調(diào)整像素為10px-15px(越大縮進越多)▼
字字間距則記住這段代碼 ▼
<section style="letter-spacing:10px">
這里填寫需要設(shè)置字字間距的文字內(nèi)容
</section>
點擊html后將代碼復(fù)制進行修改即可。(關(guān)于字間距135編輯器訂閱號也有教過呢,更多實用文章請查看歷史消息)
●●●
?
大道至簡 極簡至真
「少即是多」的極簡主義理念,想必大家都耳熟能詳,很多關(guān)于簡約主義的說法是減少減少再減少。實際上,極簡主義是一種很極端的的概念,卻又能夠讓你不斷沉思其中,而且對于不同的人和事物有不同的極簡主義。比如對于徐老師而言,極簡主義這種東西似乎是直男設(shè)計師的專屬?但是由于美入人心又愛之不已。
Google的標志是極簡主義的代表,既有趣又讓人印象深刻 ▼
Google產(chǎn)品的Logo遵循統(tǒng)一的樣式(不包括Icon):每一個創(chuàng)新產(chǎn)品都配上簡約的標志,使人一眼就認出是Google家出來的。比如說Squared的設(shè)計, 將手勢和Squared經(jīng)典方括號形狀結(jié)合起來,就創(chuàng)造了一個完美的新標志,就像prezi里面的 Frame ?! ▼
▼
為了既要符合Google的風(fēng)格,也不能丟掉自己的個性,讓人感到別扭,所以還要繼續(xù)紅藍黃綠的配色基調(diào),讓人可以過目不忘。 | |
而對于我們微信圖文排版設(shè)計來說,極簡主義相較于整體的VI視覺識別尤為重要,比如你會發(fā)現(xiàn)JZ經(jīng)常使用的▼ / ●●● / ???等等,簡單的小符號給人以清晰的邏輯,與此同時帶來滿滿的逼格感,就像為什么字體小反而更有逼格?也是一樣的道理。
再者,文字和圖片也應(yīng)該有效對齊,保持一定縫隙用以產(chǎn)生節(jié)奏感。比如利用表格來實現(xiàn)左右分欄,既可以保證屏幕最大化利用(十屏呈現(xiàn)),也基于用戶體驗來考慮可識性和易讀性。
福利時刻-免費領(lǐng)取7天135編輯器VIP會員】
點擊http://youmiaifaone.com/users/invite/ddb12a17ce400c35fe041d275a578351,注冊135編輯器,即可獲得7天VIP會員
立即登錄

- 知乎熱議:微信公眾號如何快速漲粉?
- 0基礎(chǔ)運營小白學(xué)習(xí)什么新媒體課程比較好?
- 新媒體,自媒體新人必學(xué)的課程有哪些?
- 不懂就問:新媒體運營應(yīng)該怎樣學(xué)習(xí)?













