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