版式設(shè)計在界設(shè)計面中的應(yīng)用

2022-02-10 點擊量：

版式設(shè)計關(guān)注的是設(shè)計中文字和圖像的位置關(guān)系。 這些元素應(yīng)該如何擺放，它們彼此以及整體設(shè)計構(gòu)想的關(guān)系，都會影響到用戶對內(nèi)容的識別與接收，以及他們對內(nèi)容所產(chǎn)生的情緒反應(yīng)。利用親密性原則和對齊方式可以促進(jìn)用戶接收頁面中呈現(xiàn)的信息。

 對齊原則

什么是對齊方式：是指文字或圖片在垂直層面和水平層面頁面的位置。

下面列舉一些較為常見的對齊方式：

垂直對齊

文字的垂直對齊可以是居中對齊、上對齊或底端對齊

水平對齊

文字或圖片的水平對齊可以是左對齊、右對齊、居中對齊或兩端對齊。

對齊方式?jīng)Q定了整個畫面的流暢性，嘉瑞廣告，在做日常需求中明明有對齊的意識，但是為什么設(shè)計出來的頁面就是很奇怪呢？對齊方式的合理運用絕大部份是體現(xiàn)在視覺維度上，而我們往往僅考慮物理對齊方式。

下面舉幾個我的需求案例來解決視覺對齊的幾點問題：

以視覺邊界線對齊

上圖案例好像看起來并沒有問題，但是在上半部分的列表中灰色背景承擔(dān)了兩端對齊的角色，而事實上文字的視覺重量大于背景，就會導(dǎo)致整個頁面的視覺重量不對等，視覺引導(dǎo)線發(fā)生形變。

而下圖中將列表數(shù)據(jù)做兩端對齊，讓整個畫面大方得體，視覺重量趨于一致，瀏覽閱讀上變得舒適。

小結(jié)：對齊邊緣以視覺引導(dǎo)線為準(zhǔn)。

以視覺流對齊

我們正常在看東西的時候會是從上到下，從左到右這樣進(jìn)行瀏覽閱讀信息，那么在頁面設(shè)計的時候也應(yīng)當(dāng)考慮一下。

上圖兩個卡片的操作區(qū)域分別運用了左、右對齊，兩種看起來沒有什么問題，但是考慮到視覺流向，會發(fā)現(xiàn)第二個的操作區(qū)域位置更為合理，也是視覺距離更近的方案。
 

小結(jié)：頁面的一個區(qū)塊內(nèi)，重要元素或者操作區(qū)往往會跟隨著視覺流向進(jìn)行布局。

多屬性對齊原則

上圖案例在對齊方式上列表標(biāo)題和內(nèi)容采用了左對齊的形式，形成了不規(guī)整的邊緣，視覺上就會參差不齊，操作流暢性大打折扣。

上圖為優(yōu)化后的版本，將列表標(biāo)題和內(nèi)容的對齊方式進(jìn)行單獨劃分，用戶在瀏覽中可以快速識別和區(qū)分信息。

小結(jié)：同一屬性的可以使用同一對齊方式。

那么通過解決這幾個常見問題，我們會發(fā)現(xiàn)，對齊原則是在滿足物理對齊原則的同時，在視覺上也要思考他適合哪種對齊方式，元素之間是如何對齊。

 親密性原則

首先通過一組物品來感受一下親密性原則。

這張圖片中的四個不同類別物品我們會感覺它們是一個整體。

當(dāng)我們移動了物體的位置之后，會感覺左面三個物品屬于一個區(qū)域整體。

同一組物品我們將它們分成不同顏色，同樣也是左面三個物品看起來是一個區(qū)域整體

通過上面的案例我們可以得出一種結(jié)論：距離較近，我們就會感覺它們之間存在著一定的關(guān)系同屬一個整體。

由此我們可以得知，親密性原則是在界面設(shè)計中相對靠近的元素，它們之間就會存在聯(lián)系。

那么在需求中我會用到兩種方法來對親密性實現(xiàn)和調(diào)優(yōu)的：

借助間距優(yōu)化親密性

上面這張設(shè)計圖中，我們會感覺日期、評論、點贊量和下面的章節(jié)是一個區(qū)塊，在瀏覽的時候造成很大困擾。

而在優(yōu)化后，將三個信息點的距離拉近成為一個區(qū)塊，并且層級關(guān)系也一目了然。

小結(jié)：在信息容易產(chǎn)生誤解的時候，需要注意間距的把控

借助元素建立親密性

除了把控間距之外我們在處理親疏關(guān)系的時候還會借助一些輔助元素，下面介紹一下兩個常用的方式。

卡片工具

分割工具

小結(jié)：針對不同的頁面風(fēng)格和強弱，工具的使用也會有所差異，要適合頁面調(diào)性來選擇使用。

總結(jié)：通過幾個小的需求案例，淮安專業(yè)廣告公司，希望可以給大家一些幫助～

原文：TCD設(shè)計中心