關于排版,給你幾個甲方不懟你的理由!(二) - 優設-UISDC

關于排版,給你幾個甲方不懟你的理由!(二)

2018/10/31 21894評論區

不管是平面設計或者 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

小結

版式設計沒有什么固定的路子,也沒有說「這樣是絕對不行的」之類的。每一個設計師的風格的形成,都是受到他所看過的書籍或者作品的影響,慢慢從模仿到自己嘗試不同的實驗,逐漸形成自己的設計風格。

歡迎關注作者的微信公眾號:「設計師的私人日記」

平面設計課堂」

優設大課堂

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址:http://www.51294208.com/reasons-for-typography-not-to-refute-2

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

sketch 優設大課堂 轉場動效 設計師 扁平化設計 交互設計師 界面設計 排版布局 職場 平面設計 設計師專訪 素材下載 視覺設計 配色 設計流程 web前端開發 AI教程 用戶體驗設計 設計理論 神器下載 海報設計 字體下載 設計趨勢 設計規范 psd下載 動效設計 圖標設計 產品設計 logo設計 ICON 神器推薦 職場規劃 App設計 字體設計 酷站推薦 交互設計 ui設計 設計師職場 優秀網頁設計 用戶體驗 ps技巧 酷站 PS教程 網頁設計 經驗分享
wechat

優設官方微信

50萬設計師關注

微信號:youshege

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里

云南时时彩开奖今天