關於排版，給你幾個甲方不懟你的理由！（二）
原標題：關於排版，給你幾個甲方不懟你的理由！（二）
原文地址：設計師的私人日記（公眾號）
作者：整夜
不管是平面設計或者UI設計等工作，我們在根據設計主題和視覺需求，在預先設定的有限版面內，運用造型要素和形式原則，根據特定主題與內容的需要，將文字、圖片（圖形）及色彩等視覺傳達信息要素，進行有組織、有目的的組合排列的設計，都會直接影響頁面的用戶體驗及相關性。
這就是我們需要學習版式設計的目的。
首先，我們先來了解兩個概念
版面率
在頁面上除去天地左右四周的余白，版面所佔的面積的比率叫做「版面率」
by サンチー
擴大頁面四周余白，版面率降低，頁面所包含的信息減少；
版面率降低，很容易給人造成一種典雅印象或者高級的感覺，適合於需要創造安靜和穩重的頁面設計。
by サンチー
縮小頁面四周余白，版面率提高，也看所包含的信息增加；
版面率提高，會給人以充滿活力且非常熱鬧的印象，適合於需要給觀者傳遞大量信息且留下深刻印象的設計。
圖版率
「圖版率「和」版面率「意思相近，」圖版率「表示在頁面中圖片所佔的比率
by hideto yagi
圖版率高的頁面會給人到來熱鬧活躍的印象；相反的，圖版率低的頁面則會產生一種非常沉穩的效果。我們經常通過調整頁面的圖版率來表現設計的意圖。
通過圖片的數量和尺寸來控制圖版率；在只有一張圖片的情況下，擴大圖片圖版率就會提高；在使用很多圖片的頁面中，縮小每張圖片的尺寸，圖版率就會降低。
by pinterest
頁面的底色也會改變對也頁面圖版率的印象；即使在設計中有大量的文字，我們通過頁面底色的調整，也可以取的和提高圖版率相似的效果，從而改變頁面所呈現出的視覺感受。
利用各種不同的模式進行排版設計
在排版設計之前，通過設置輔助線來當作排版的嚮導，使得排版工作進展的順利。
在建立輔助線之前，先要考慮好把頁面劃分為幾個部分；最基本的劃分頁面方式是水平劃分或者垂直劃分。
當然也可以增加對角線等斜線的方式。
by pinterest
可以將多個方框連起來作為某一個內容的安排空間，也可以將它們作為頁面上的留白。
by pinterest
嚴格按照方框來安排內容可能稍顯單調，可以考慮將某些部分有意的衝出框架的範圍，允許在一定程度上的不規則排版，也是非常必要的。
對稱型構圖是很具代表性的版面設計方式；上下左右對稱、重複交替構圖都可以靈活的運用到某些局部的構圖之中。
by pinterest
左右對稱：頁面左右完美重合，帶來一種安定的印象。
by pinterest
反覆型構圖：讓人感受到一種秩序，適用於需要表現統一感的畫面。
by pinterest
不規則對稱構圖：打破原來對稱的刻意處理的感覺，也是比較受歡迎的手法。
下面展示幾個實例運用
by Filip Justi?
by Filip Justi?
根據版式設計來區分內容的先後順序
在我們希望觀者注意到頁面內容的先後順序時，我們就必須通過設計將順序明確的提示出來。也就是我們常提到的「優先率」，「優先率」較高的頁面內容富於變化，產生動感和節奏的效果。
by Forbidden
通過圖片大小來區分內容的先後順序，我們會擴大主圖或者縮小其他圖片來提高「優先率」，來達到對內容的先後順序進行區分的目的。
通過文字的大小來區分內容的先後順序，將主要文字字型大小加大、加粗或者減小其他字體字型大小，來達到目的，需要注意的是，過度縮小的文字會造成閱讀的障礙。
by piecojp
通過顏色和形狀來區分內容的先後順序，在相似的顏色或者形狀中加入不同的顏色和形狀，產生「差別化」的概念，來對該內容進行強調。
下面展示幾個實例運用
by mshults
by Kavita Khati
有目的的留白設計
除了文字和圖片，留白也是構成頁面排版的必不可少的要素之一；靈活的運用頁面的留白，呈現出非常美觀的效果。
by pinterest
通過留白來減輕頁面的壓迫感，在頁面內容較多的時候，容易給人一種狹窄的壓迫感，通過適當的減少內容，或者提高圖片的色調，能讓那個觀者感受到一種寬鬆的氛圍。
by pinterest
通過留白使形式發生變化，在輔助線方框的形式下進行的排版，除了規矩也會帶來單調的感覺，可通過隨處添加的留白來使排版的形式發生一些變化。
by pinterest
通過留白來擴展頁面空間，頁面的四周沒有足夠的余白空間會造成一種封閉的感覺，在天地四周安排余白，會讓觀者感受到一種向外部的擴展的感覺，頁面產生一種寬鬆感。
下面展示幾個實例運用
by SELECTO
by Kavita Khati
小結
版式設計沒有什麼固定的路子，也沒有說「這樣是絕對不行的」之類的。每一個設計師的風格的形成，都是受到他所看過的書籍或者作品的影響，慢慢從模仿到自己嘗試不同的實驗，逐漸形成自己的設計風格。
TAG:學ui網mp |