版式設(shè)計(jì)四大原則-【方法論之“視覺設(shè)計(jì)”篇】

0 評(píng)論 2136 瀏覽 7 收藏 7 分鐘

在視覺傳達(dá)中,版式設(shè)計(jì)四大原則一直貫穿于我們的工作中。本文詳細(xì)闡述了這四大原則,希望能夠幫助你應(yīng)用于視覺設(shè)計(jì)中。

為了在別人吹牛逼的時(shí)候保持清醒,從2018年開始我整理了100多條互聯(lián)網(wǎng)設(shè)計(jì)方法論。

這些方法論里,我發(fā)現(xiàn)有的借鑒的是工業(yè)設(shè)計(jì),有的是建筑學(xué)、心理學(xué)的,還有傳播學(xué),甚至連語(yǔ)義學(xué)都出現(xiàn)了……

然后就想,怎么這么多互聯(lián)網(wǎng)設(shè)計(jì)方法論?每個(gè)方法論如何應(yīng)用?哪些又是瞎扯模型?

把這些分享出來(lái)希望能幫到更多的人!

我把這些方法論總結(jié)成了六大類:

版式設(shè)計(jì)四大原則(對(duì)比、親密、對(duì)齊、重復(fù))是視覺傳達(dá)中,最基礎(chǔ)也是最重要的設(shè)計(jì)原則,它一直貫穿于我們的設(shè)計(jì)工作,但又經(jīng)常被忽視。

當(dāng)我們?cè)谠O(shè)計(jì)提升階段中遇到瓶頸的時(shí)候,不妨好好回顧一下夯實(shí)一下版式基礎(chǔ),基礎(chǔ)決定我們走多遠(yuǎn)。

視覺傳達(dá)其本質(zhì)也是表達(dá)方式的一種,我們需要通過(guò)設(shè)計(jì)方法手段,通過(guò)將元素建立聯(lián)系有目的得引導(dǎo)用戶視覺流向,將信息在“最短時(shí)間”內(nèi)“快速”傳達(dá)給用戶。

任何元素都不能在頁(yè)面上隨意擺放,每個(gè)元素應(yīng)當(dāng)與頁(yè)面上另一個(gè)元素有某種視覺聯(lián)系,這樣才能建立一種清晰且輕巧的閱讀邏輯。

所以,我們的設(shè)計(jì)行為,是否讓信息更快速、更直接、更有效得傳達(dá)給用戶了?

對(duì)比

無(wú)對(duì)比,不設(shè)計(jì)。(沒有對(duì)比就沒有設(shè)計(jì)可言)

合理劃分好信息層級(jí),來(lái)引導(dǎo)用戶視覺流向。

親密

在版式設(shè)計(jì)中,親密和對(duì)比是相輔相成的。

彼此相關(guān)的元素應(yīng)當(dāng)靠近,歸組在一起,為讀者提供清晰的閱讀架構(gòu)。

對(duì)齊

對(duì)齊對(duì)比無(wú)處不在,對(duì)齊是設(shè)計(jì)的標(biāo)配。

我們?cè)谧鲈O(shè)計(jì)的過(guò)程中,腦海中已經(jīng)養(yǎng)成習(xí)慣得提醒自己“對(duì)齊對(duì)齊對(duì)齊對(duì)齊!”

重復(fù)

設(shè)計(jì)的某些元素或手法需要在整個(gè)作品中重復(fù)。降低了用戶的適應(yīng)成本,其本質(zhì)還是讓信息傳遞更快速有效。

一、對(duì)比

無(wú)對(duì)比,不設(shè)計(jì)。(沒有對(duì)比就沒有設(shè)計(jì)可言)

對(duì)比的目的:

  • 使有層級(jí)、有主次、有節(jié)奏、有設(shè)計(jì)感
  • 使閱讀方便
  • 突出重點(diǎn);強(qiáng)化要點(diǎn);表達(dá)核心信息

做好對(duì)比的前提是我們透徹得理解了業(yè)務(wù)和將要呈現(xiàn)的內(nèi)容。有目的得將元素拉開對(duì)比,合理劃分好信息層級(jí),來(lái)引導(dǎo)用戶視覺流向,第一視覺、第二視覺、第三視覺…之后讓用戶視線最終又落在哪里。

對(duì)比的手法:

形態(tài):方vs圓、長(zhǎng)vs短、粗vs細(xì)、大vs小、高vs矮、胖vs瘦、凹vs凸;

狀態(tài):動(dòng)vs靜、虛vs實(shí)、近vs遠(yuǎn);

色彩:黑vs白、明vs暗、炫彩vs單色、輕vs重色;

二、親密

在版式設(shè)計(jì)中,親密和對(duì)比是相輔相成的。

親密的目的:

  • 使元素間有關(guān)系成為一個(gè)家族,使有關(guān)聯(lián)
  • 合理分組

彼此相關(guān)的元素應(yīng)當(dāng)靠近,歸組在一起,如果多個(gè)項(xiàng)相互之間存在很近的親密性,它們就會(huì)成為一個(gè)視覺單元,而不是多個(gè)孤立的設(shè)計(jì)單元,這有助于組織信息減少混亂,為讀者提供清晰的閱讀架構(gòu)。

親密的手法:

親密即編組,將相關(guān)聯(lián)的信息進(jìn)行編組區(qū)分,關(guān)聯(lián)的元素組織在一起,移動(dòng)元素,使它們的物理位置相互靠近,使其形成閱讀秩序。使之成為整體的一個(gè)組,而不再是一堆彼此無(wú)關(guān)的片段。物理位置靠近的,就意味著存在關(guān)聯(lián)。(我們可以把它理解為元素間的父子關(guān)系)

文字與文字、文字與圖、圖與圖間通過(guò)物理距離,控制元素之間的關(guān)系。除了物理距離劃分,也可以用線條色塊切割。

三、對(duì)齊

對(duì)齊對(duì)比無(wú)處不在,對(duì)齊是設(shè)計(jì)的標(biāo)配。

我們?cè)谧鲈O(shè)計(jì)的過(guò)程中,腦海中已經(jīng)養(yǎng)成習(xí)慣得提醒自己“對(duì)齊對(duì)齊對(duì)齊對(duì)齊!”如果你還沒有養(yǎng)成習(xí)慣,那就逼著自己有目的得時(shí)刻提醒自己。

對(duì)齊的目的:

  • 對(duì)齊讓設(shè)計(jì)變得更有條理
  • 對(duì)齊讓設(shè)計(jì)變得更有邏輯
  • 對(duì)齊讓閱讀變得更輕松

對(duì)齊的手法:

對(duì)齊分為,左右對(duì)齊、上下對(duì)齊、居中對(duì)齊

  1. 右對(duì)齊——最常見的對(duì)齊方式
  2. 左對(duì)齊——最裝逼的對(duì)齊方式
  3. 居中對(duì)齊——最無(wú)能的對(duì)齊方式
  4. 右對(duì)齊不一定非要放右邊

四、重復(fù)

設(shè)計(jì)的某些元素或手法需要在整個(gè)作品中重復(fù)。其本質(zhì)還是讓信息傳遞更快速有效。

重復(fù)的目的:

  • 重復(fù)的作用:統(tǒng)一信息、強(qiáng)調(diào)信息、強(qiáng)化信息
  • 重復(fù)就是保持設(shè)計(jì)的一致性
  • 重復(fù)縮短了我們二次閱讀的時(shí)間(比如在商品詳情介紹中,如果沒有運(yùn)用重復(fù)原則版式不一致的話,用戶在閱讀過(guò)程中,需要時(shí)間適應(yīng)、習(xí)慣新的版式)

重復(fù)的手法:

  • 標(biāo)題的字體
  • 符號(hào)
  • 圖片的主色調(diào)
  • 版面的留白比例
  • 標(biāo)題與內(nèi)文的距離
  • 內(nèi)文大小統(tǒng)一

本文由 @胡冰茜 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)作者許可,禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash,基于CC0協(xié)議。

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒評(píng)論,等你發(fā)揮!