版式設(shè)計(jì)關(guān)注的是設(shè)計(jì)中文字和圖像的位置關(guān)系。 這些元素應(yīng)該如何擺放，它們彼此以及整體設(shè)計(jì)構(gòu)想的關(guān)系，都會(huì)影響到用戶對(duì)內(nèi)容的識(shí)別與接收，以及他們對(duì)內(nèi)容所產(chǎn)生的情緒反應(yīng)。利用親密性原則和對(duì)齊方式可以促進(jìn)用戶接收頁面中呈現(xiàn)的信息。
什么是對(duì)齊方式：是指文字或圖片在垂直層面和水平層面頁面的位置。
下面列舉一些較為常見的對(duì)齊方式：
1. 垂直對(duì)齊
文字的垂直對(duì)齊可以是居中對(duì)齊、上對(duì)齊或底端對(duì)齊
2. 水平對(duì)齊
文字或圖片的水平對(duì)齊可以是左對(duì)齊、右對(duì)齊、居中對(duì)齊或兩端對(duì)齊。
對(duì)齊方式?jīng)Q定了整個(gè)畫面的流暢性，在做日常需求中明明有對(duì)齊的意識(shí)，但是為什么設(shè)計(jì)出來的頁面就是很奇怪呢？對(duì)齊方式的合理運(yùn)用絕大部份是體現(xiàn)在視覺維度上，而我們往往僅考慮物理對(duì)齊方式。
下面舉幾個(gè)我的需求案例來解決視覺對(duì)齊的幾點(diǎn)問題：
3. 以視覺邊界線對(duì)齊
上圖案例好像看起來并沒有問題，但是在上半部分的列表中灰色背景承擔(dān)了兩端對(duì)齊的角色，而事實(shí)上文字的視覺重量大于背景，就會(huì)導(dǎo)致整個(gè)頁面的視覺重量不對(duì)等，視覺引導(dǎo)線發(fā)生形變。
而下圖中將列表數(shù)據(jù)做兩端對(duì)齊，讓整個(gè)畫面大方得體，視覺重量趨于一致，瀏覽閱讀上變得舒適。
小結(jié)：對(duì)齊邊緣以視覺引導(dǎo)線為準(zhǔn)。
4. 以視覺流對(duì)齊
我們正常在看東西的時(shí)候會(huì)是從上到下，從左到右這樣進(jìn)行瀏覽閱讀信息，那么在頁面設(shè)計(jì)的時(shí)候也應(yīng)當(dāng)考慮一下。
上圖兩個(gè)卡片的操作區(qū)域分別運(yùn)用了左、右對(duì)齊，兩種看起來沒有什么問題，但是考慮到視覺流向，會(huì)發(fā)現(xiàn)第二個(gè)的操作區(qū)域位置更為合理，也是視覺距離更近的方案。
小結(jié)：頁面的一個(gè)區(qū)塊內(nèi)，重要元素或者操作區(qū)往往會(huì)跟隨著視覺流向進(jìn)行布局。
5. 多屬性對(duì)齊原則
上圖案例在對(duì)齊方式上列表標(biāo)題和內(nèi)容采用了左對(duì)齊的形式，形成了不規(guī)整的邊緣，視覺上就會(huì)參差不齊，操作流暢性大打折扣。
上圖為優(yōu)化后的版本，將列表標(biāo)題和內(nèi)容的對(duì)齊方式進(jìn)行單獨(dú)劃分，用戶在瀏覽中可以快速識(shí)別和區(qū)分信息。
小結(jié)：同一屬性的可以使用同一對(duì)齊方式。
那么通過解決這幾個(gè)常見問題，我們會(huì)發(fā)現(xiàn)，對(duì)齊原則是在滿足物理對(duì)齊原則的同時(shí)，在視覺上也要思考他適合哪種對(duì)齊方式，元素之間是如何對(duì)齊。
首先通過一組物品來感受一下親密性原則。
這張圖片中的四個(gè)不同類別物品我們會(huì)感覺它們是一個(gè)整體。
當(dāng)我們移動(dòng)了物體的位置之后，會(huì)感覺左面三個(gè)物品屬于一個(gè)區(qū)域整體。
同一組物品我們將它們分成不同顏色，同樣也是左面三個(gè)物品看起來是一個(gè)區(qū)域整體
通過上面的案例我們可以得出一種結(jié)論：距離較近，我們就會(huì)感覺它們之間存在著一定的關(guān)系同屬一個(gè)整體。
由此我們可以得知，親密性原則是在界面設(shè)計(jì)中相對(duì)靠近的元素，它們之間就會(huì)存在聯(lián)系。
那么在需求中我會(huì)用到兩種方法來對(duì)親密性實(shí)現(xiàn)和調(diào)優(yōu)的：
上面這張?jiān)O(shè)計(jì)圖中，我們會(huì)感覺日期、評(píng)論、點(diǎn)贊量和下面的章節(jié)是一個(gè)區(qū)塊，在瀏覽的時(shí)候造成很大困擾。
而在優(yōu)化后，將三個(gè)信息點(diǎn)的距離拉近成為一個(gè)區(qū)塊，并且層級(jí)關(guān)系也一目了然。
小結(jié)：在信息容易產(chǎn)生誤解的時(shí)候，需要注意間距的把控
1. 借助元素建立親密性
除了把控間距之外我們?cè)谔幚碛H疏關(guān)系的時(shí)候還會(huì)借助一些輔助元素，下面介紹一下兩個(gè)常用的方式。
卡片工具
分割工具
小結(jié)：針對(duì)不同的頁面風(fēng)格和強(qiáng)弱，工具的使用也會(huì)有所差異，要適合頁面調(diào)性來選擇使用。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。