原型設(shè)計必備的四大排版原則

0 評論 9099 瀏覽 33 收藏 7 分鐘

編輯導(dǎo)語:一個好的排版頁面可以有效提升用戶的體驗感和平臺的曝光度,本文作者分享了原型設(shè)計中必備的四大排版原則,介紹了親密性、對齊、重復(fù)、對比四大排版原則,一起來學(xué)習(xí)一下吧。

作為一個產(chǎn)品,好像我們哪方面都不懂,又好像但凡有一方面不懂就難以協(xié)調(diào)多方資源順利完成項目。產(chǎn)品在不同的階段對接的對象不同,所以需要用到的專業(yè)知識和職場技巧差異也是完全不同的。

那么今天就分享一波設(shè)計原型排版階段常用到的設(shè)計原則——親密性、對齊、重復(fù)、對比,接下來給大家展示一張圖片。

圖片1——原始圖片

看完圖片什么感覺吶?掃一眼得到的信息 —— 一些整理的詩句說明和圖片,然后就沒有看下去的欲望了。

一、親密性原則

親密性原則是將 業(yè)務(wù)邏輯相關(guān)的獨立項 物理位置靠近,從而被用戶看起來是一個整體;業(yè)務(wù)邏輯不相關(guān)的獨立項物理位置遠離。

通過位置是否靠近體現(xiàn)獨立項之間的關(guān)系,有關(guān)聯(lián)的獨立項視覺效果也讓其靠近,沒有關(guān)聯(lián)的獨立項視覺效果也讓其分割。最終實現(xiàn)讓【相關(guān)性的對象成為一個組織】的目的。根據(jù)親密性的設(shè)計原則,經(jīng)過排版的更改,優(yōu)化之后的圖片如下。

圖片2——利用親密性原則優(yōu)化之后的圖片

看完圖片什么感覺吶?掃一眼得到的信息 —— 相比較圖片1,即便不看具體的文字信息,讀者可以清晰知曉所有的內(nèi)容被劃分為4個模塊,每個模塊有對應(yīng)的文字和圖片。

二、對齊原則

對齊原則指的是 頁面上的任何獨立項都應(yīng)當(dāng)和頁面上其他的某個獨立項存在視覺上的聯(lián)系。我們的眼睛喜歡看看到有序的事物,閱讀舒適且能快速get到信息。

通過不同的對齊方式或者借助各種輔助線來達到【使頁面統(tǒng)一而且有條理】的目的。

對于初級設(shè)計者盡量只使用一種對齊方式:全部左對齊&全部右對齊&全部居中對齊,避免混合使用多種文本對齊方式。根據(jù)對齊的設(shè)計原則,經(jīng)過排版的更改,優(yōu)化之后的圖片如下。

圖片3——利用對齊原則優(yōu)化之后的圖片

看完圖片什么感覺吶?掃一眼得到的信息 —— 相比較圖片2,同樣能在不看具體的文字信息,讀者可以清晰知曉所有的內(nèi)容被劃分為4個模塊,每個模塊有對應(yīng)的文字和圖片。但是卻比圖片2閱讀起來更輕松舒適,讓用戶有深度了解的欲望。

三、對比原則&重復(fù)原則

對比原則指的是 頁面上不同獨立項之間要有強烈的視覺對比效果,且能表達出不同獨立項之間有組織有結(jié)構(gòu)層次的關(guān)系。

最終達到【增強頁面的視覺吸引力的同時,更科學(xué)地組織信息結(jié)構(gòu)】的目的。對比維度有很多,例如 字體,顏色,大小,形狀等等。如果使用對比,就要加大對比的力度,例如深灰和淺灰色的對比遠不如橙紅色和水綠色對比效果好。

重復(fù)原則指的是 設(shè)計的某些方面需要在頁面中重復(fù),讀者能看到任何方面都可以作為重復(fù)元素,例如顏色、符號、字體形式等等。重復(fù)可以將一些獨立項關(guān)聯(lián)起來,從而實現(xiàn)【統(tǒng)一且增強視覺效果】。

根據(jù)對比&重復(fù)的設(shè)計原則,經(jīng)過排版的更改,優(yōu)化之后的圖片如下:

圖片4——利用對比&重復(fù)原則優(yōu)化之后的圖片

看完圖片什么感覺吶?掃一眼得到的信息 —— 相比較圖片3,讀者能直接清晰的知道內(nèi)容為春夏秋冬的詩句&詩句的說明&詩句對應(yīng)的圖片,并且讀者的焦點直接聚集在4句詩句上,激發(fā)了用戶的閱讀興趣。

具體的調(diào)整是 每個模塊的詩句和下面的說明有字體類型、字體大小、字體顏色的對比,但是不同模塊下詩句的字體類型&字體的大小,詩句說明的字體類型&字體大小又是重復(fù)的。

利用設(shè)計的四大原則—親密性、對齊、對比、重復(fù),從圖1逐步優(yōu)化到圖4,很明顯能感覺到用戶在閱讀舒適的情況下 在極短的時間內(nèi)迅速GET到圖片要表達的內(nèi)容,激發(fā)了繼續(xù)閱讀的欲望。其實這4大原則在PM設(shè)計原型時經(jīng)常被大家有意識或者無意識地用到。

但是為了使我們設(shè)計的原型看起來更高大上,和交互設(shè)計師&UI設(shè)計師溝通起來更順暢,應(yīng)該在平時的工作溝通中有意識地去按照這4大原則進行具體的排版工作。如果有想進一步深入了解這4大原則的小伙伴,可以去閱讀《寫給大家看的設(shè)計書》(第4版)。

本次的分享就到這啦~希望此篇文章能在大家設(shè)計原型或者其他的排版工作時有些許幫助~

 

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

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

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