近日,日本設計節目「啊!設計」火遍網絡,相信你已經看過了那幾個視頻,其中「排版之歌」,我看了之後深有感觸,短短一分多鐘的視頻就把排版的重要性和排版的基本規則原理講的非常清楚,真是非常好的一部設計基礎教學片,那麼這部片子裡都講到了哪些排版的基礎知識呢?今天道哥就來給大家細細講解一下,也一起重新細細觀賞一下這部影片,裡面涉及到的知識量還是很大的。我們先來看一下視頻:影片一開始的幾個案例,講到了對齊的重要性,下面這個約定信息,使用了不適合的居中對齊方式,導致信息的易讀性較差:改為左對齊之後,信息的易讀性瞬間提升了不少,這個案例告訴我們,這種帶有序號的信息一定要讓序號對齊,否則會極大的影響信息的閱讀性!
一個亂糟糟的電腦桌面,會嚴重影響你的工作效率,甚至心情!
下面這樣是不是看著感覺好多了,只是因為做了一件事:對齊!
接下來的案例是地鐵站名導視,下圖採用了外框與文字長度想適配的方式,但由於站名長短不一,導致看上去非常亂,影響了信息的易讀性。優化後的圖改為了將外框的高度統一,看上去非常整齊,也避免了不同大小的框帶給人視覺上的幹擾,提升了信息的易讀性。下圖這個出口導視牌上的信息沒有主次之分,這就導致了關鍵信息無法被快速識別。顯然這種帶有編號的出口導視牌,箭頭方向和編號是最重要的,能夠快速讓人知道方位和辨別不同的出口,因此放大這兩個信息是可以極大提供導視牌的功能性的!接下來這個牛奶盒的包裝,也是典型的信息缺乏主次對比,主要信息沒有突出,而是和輔助信息用了同等的字號,這樣的包裝如果擺在貨架上是很難吸引到消費者的注意的,不僅如此,仔細觀察你會發現包裝盒側面的信息也是沒有條理的,看上去非常的擁擠。我們來看一下優化後的這個包裝盒,首先它的主次信息對比非常明顯,產品名稱放的很大,藍色的輔助信息縮的很小,不僅如此,盒子側面的信息也經過了精心編排,看上去非常的透氣、條理清晰,雖然看不清信息具體是什麼,但是從圖中就能明顯感受的到。下面這張海報是提示小朋友不要在這裡玩的,因為有可能被球砸到,顯然,目前的提示語是不夠醒目的,難以引起人們足夠的注意。
優化後的標題被放的很大,而且使用了醒目的紅色,具有很強的警示性!
下面這個桃子的價格標籤,信息之間的對比太弱了,沒有把消費者最關心的價格信息突出出來。
優化後的價格標籤,按照消費者關心程度將信息進行了強烈的大小對比區分,更能夠在短時間內吸引消費者,從而達成銷售目的。
下面這個路牌信息之間沒有主次對比之分,導致信息的傳達有誤導的可能。
將路牌文字按照信息重要層級重新調整後,信息變得清晰且有條理。下圖這個地鐵站牌,同樣的問題,信息沒有主次,缺乏對比。不僅顯得簡陋,而且傳達信息效果很差。
下圖才是一個地鐵站牌該有的樣子,要確保主要信息能夠在短時間內讓人清晰地識別。
下面這個牙膏的例子很好地說明了設計的重要性,沒有經過設計的牙膏就像下圖這樣,文字很隨意的擺放著,信息毫無主次區分。這樣的產品如果放在超市的貨架上也沒人敢買吧。同樣的信息,經過設計師的精心設計和處理後,看起來大不一樣,不僅是美觀,信息傳達也更加到位。一個停車場的標識牌,首先得讓人快速識別出是停車場,下圖這樣排版顯然容易讓人誤解。
首先是停車場(突出了P),然後是價格、開放時間,通過對信息的層級關係梳理和大小對比編排,讓信息傳達更清晰明確!
假設你的手機簡訊界面長這個樣子,相信你一定會抓狂吧,根本分不清哪些是你發的哪些是對方發的。很多你司空見慣了的東西,實際上已經是前人經過深思熟慮的結果,就像這個氣泡對話框的設計,它至少包含了這幾種信息的歸類:1. 我發給對方的;2. 對方發給我的;3. 已讀的;4. 未讀的;5. 發送成功的;6. 發送失敗的;7. 最新的.同樣,下面這個購物小票,商品信息和價格沒有進行歸類,而是都擠在了一起,閱讀起來非常困難。
優化後的小票將商品名稱左對齊,價格信息右對齊,非常便於閱讀。
垃圾分類在我國開始陸續實施了,你是什麼垃圾?這個分類一定要分清楚!下圖將可燃垃圾和不可燃垃圾的圖標混在了一起,是不可取的。
將圖標分類擺放後,是什麼垃圾,是不是看起來一目了然了?
車站的車次信息,如果不重視信息歸類區分的話,搭錯車一定是常有的事。將信息進行歸類並明確區分,會大大加強信息的識別效率!
如果一本書的正文排版是這樣的,那基本就喪失了可讀性了,跟天書沒什麼區別,你根本不知道該從何處讀起。
正文排版中,恰當的字距和行距是讓版面美觀和易讀的基礎,優化後的版式正是在這些方面下足了功夫。下面這邊動物畫冊同樣存在間距問題,因為圖片中間的文字和上下圖的間距是一樣的,所以很難判定文字是對上圖還是下圖的說明。將間距進行調整後,這樣的困惑便不存在了,可以很清晰的知道哪些文字和哪些圖片相對應,這裡涉及到了格式塔原理中的 「親密性」 原則,信息之間挨得越緊,它們之間的關聯性就越強。下面這張體操海報同樣是間距和透氣性的問題,信息都擠在了一起,非常難以閱讀。除非刻意追求藝術性和反常識,否則絕對不要這麼排。
有了舒適的留白和恰當的間距後,海報信息變得非常容易閱讀了,信息的傳達變得清晰而有效!
最後來看一下這張報紙,一張報紙的信息量是巨大的,報紙的排版會涉及到以上所講到的所有原則甚至更多,我們來看一下缺乏設計的報紙是什麼樣吧!
是不是完全無法閱讀?密密麻麻的文字就像螞蟻在亂竄一樣,毫無條理性可言。接下來我們看一下經過精心設計的報紙,在有限的空間內,將信息做了最大程度的歸類與整合,並且有主次、有對比,讓讀者能夠快速找到自己感興趣的內容,這就是排版的作用所在!好了,這部關於排版的短片解析就先講到這裡,如果你從中學到了一些東西,請幫我點個在看,大家一起來做知識的傳播者。
THE END
【資源總結】設計素材幹貨免費下載TOP100(年度合集)
- 點擊查看nicepsd.com都有哪些免費素材下載?-
關鍵詞回覆:
簡歷153、20202.5D、萬聖節、2019雙11、9款超實用的價格字體、C4D國潮海報
ui設計規範文檔、圖解平面設計規範
勞動節、520、小滿、兒童節、父親節
插畫1、插畫2
互動設計1
ui工具包10
圖標1、圖標2、圖標3、Helvetica
197可商用字體
女王節2
2019、豬年大吉、筆刷1、筆刷2、比特幣1
Adobe2017、Adobe2018、AdobeXD、c4d17、c4d18
6000ppt、180ppt、468ppt、400ppt、65ppt、10ppt
f1、f2、f3、f4、f5、f6、f7、f8、f9
30fonts、兒童節、端午節、父親節、母親節
gh1、gh2、gh3、gh4
m1、路徑、ui工具包1、ui工具包2、ui工具包3、ui工具包4
足球1、足球2
海報1
等距1、等距2、等距3
抽象1
圖案1
網頁模板1
中秋1
mockups1、mockups2
電商字體、1111
化妝1
李濤老師
雙12
(可直接獲取相應的免費資源)