實(shí)用的排版技巧 大大提升設(shè)計(jì)效率！

大家好，今天分享的是「排版技巧」，頁面的排版很靈活，但在排版時我們不單單要考慮視覺上的好看，還要考慮使用上的體驗(yàn)。

將頁面中的內(nèi)容和元素通過合理的方式方法進(jìn)行排版，保證重點(diǎn)內(nèi)容突出而且容易閱讀是首要目的。

這次總結(jié)一些在頁面排版和布局中需要注意的技巧，掌握這些容易上手的排版技巧能夠大力提升設(shè)計(jì)效率。

一、鄰近性

鄰近性是指頁面中有關(guān)聯(lián)的元素比其他元素的距離更近。頁面中的內(nèi)容或元素按照鄰近性分組，比按照形狀或者顏色分組更直觀。

登錄/注冊后可看大圖

二、相似性

同一頁面中表達(dá)相同功能的元素，通過相同的形狀表示。相似性是視覺上相似元素的組合，通常通過大小、形狀和顏色來區(qū)分。

相似的元素會表現(xiàn)出相似的行為，比如下圖右邊的選項(xiàng)中，都使用了一致的單選框，更利于用戶做出選擇。

登錄/注冊后可看大圖

如果像左圖一樣，單選框的樣式不統(tǒng)一，那么用戶在選擇的時候可能就會產(chǎn)生疑問，是不是點(diǎn)擊不同樣式的單選框會有不同的意思，造成不必要的困擾。

三、連續(xù)性

現(xiàn)在很多移動端產(chǎn)品都采用feed流的形式，可以無限加載內(nèi)容，用戶怎么滑都滑不到底。這樣的場景下就要考慮feed流內(nèi)容的連續(xù)性，通過將內(nèi)容進(jìn)行合理地對齊，保證閱讀上的連續(xù)性。

對齊的作用除了可以讓頁面的內(nèi)容看起來更整齊，還能夠下意識地影響用戶的瀏覽視線和閱讀順序。比如F型和Z型視覺動線，通過不同的對齊排版方式來引導(dǎo)用戶的視線。

登錄/注冊后可看大圖

四、閉合性

閉合性是通過排版布局元素自身的邊距以及元素間的間距，來減少用戶的認(rèn)知負(fù)荷?，F(xiàn)在流行的卡片式布局就用到了這個原則，通過將元素整合到一個卡片中，合理安排元素的間距來達(dá)到整齊的效果。

比如在“左圖右文”的卡片布局中，要考慮圖片與標(biāo)題的間距、標(biāo)題是否需要和圖片頂部對齊、在規(guī)定空間內(nèi)標(biāo)題如果字?jǐn)?shù)過多怎么折行和省略處理、標(biāo)題和注釋之間的距離和對齊方式等等一系列問題。

登錄/注冊后可看大圖

看到這里會發(fā)現(xiàn)，想要把一個簡單的卡片式布局排版好，并不簡單，需要考慮到很多的細(xì)節(jié)。

另外，卡片式的排版不一定必須帶有外邊框，如果每個卡片中內(nèi)容排版很整齊，就算不用額外邊框，用戶也可以清晰地閱讀。

五、共同命運(yùn)

具有相同概念的元素需要設(shè)計(jì)為具有相同的行為。當(dāng)元素沿同一方向移動時，它們被識別為同一級別的元素。比如在手機(jī)中有時候會看到橫向排版的內(nèi)容，這些內(nèi)容處于用一個層級，用戶左右滑動來觀看。

登錄/注冊后可看大圖

六、前景和背景

設(shè)計(jì)使前景和背景清晰區(qū)分。當(dāng)我們的視線感知到元素重疊時，會根據(jù)焦點(diǎn)分別識別前景和背景。

為了減少混亂，可以使用深色蒙版或者彈窗陰影來分離前景和背景。當(dāng)頁面中有彈窗跳出，通常背景會有一層深色的遮罩，以此來突出彈窗中的內(nèi)容。

登錄/注冊后可看大圖

七、分組

當(dāng)我們想把不同類別的內(nèi)容進(jìn)行分組時，可以添加線條或背景來區(qū)分。

聚集在同一區(qū)域的元素被看做為屬于同一板塊的元素，因此這些內(nèi)容需要與其他元素有明顯的區(qū)別。常用的方法是改變背景的顏色或者在背景中插入圖片，讓這個板塊的內(nèi)容和其他內(nèi)容有強(qiáng)烈的對比。

登錄/注冊后可看大圖

八、單位

設(shè)定有效設(shè)計(jì)的最小單位。要在多個倍數(shù)（如1.5x 2x）中使用設(shè)計(jì)元素，使用可以整除的偶數(shù)。

其中，8點(diǎn)網(wǎng)格系統(tǒng)被廣泛使用，它可以將主顯示器的整個像素除以一個整數(shù)。但是8點(diǎn)網(wǎng)格并不能適用于所有的設(shè)計(jì)，比如iOS的375和750的屏幕尺寸。

登錄/注冊后可看大圖

九、網(wǎng)格

網(wǎng)格是一種高效設(shè)計(jì)的工具，通過定義一個大的框架來進(jìn)行元素排版。網(wǎng)格系統(tǒng)易于構(gòu)建，而且能提供一致的視覺節(jié)奏，非常適合應(yīng)用在日常的平面設(shè)計(jì)工作中。

登錄/注冊后可看大圖

十、屏幕尺寸

設(shè)計(jì)的時候要考慮移動設(shè)備的屏幕尺寸問題。就iOS而言，手機(jī)機(jī)型都是固定的，因此主要基于旗艦機(jī)型的尺寸進(jìn)行設(shè)計(jì)。

由于使用Android系統(tǒng)的手機(jī)品牌太多，因此不可能優(yōu)化所有屏幕，因此傾向于遵循谷歌提供的規(guī)范。

登錄/注冊后可看大圖

十一、密度

為了在屏幕放大時顯示相同的大小，需要了解屏幕的密度。PPI是常用的單位，代表每英寸的像素?cái)?shù)，是指在1英寸x1英寸的屏幕區(qū)域中物理顯示的像素?cái)?shù)。

以DP和PX為單位進(jìn)行設(shè)計(jì)，以便在任何屏幕尺寸上都能物理顯示相同的大小。

登錄/注冊后可看大圖

十二、響應(yīng)式

對于同時支持移動端和桌面端的產(chǎn)品，可以使用響應(yīng)式設(shè)計(jì)來提升效率和體驗(yàn)，常用的結(jié)構(gòu)形式分為導(dǎo)航欄、工具欄和內(nèi)容區(qū)。

導(dǎo)航欄：頂級導(dǎo)航菜單區(qū)，如分類、菜單。

工具欄：搜索、書簽等工具。

內(nèi)容區(qū)域：文本、圖像、列表等內(nèi)容顯示區(qū)。

登錄/注冊后可看大圖

十三、最后

以上就是排版設(shè)計(jì)中要注意的細(xì)節(jié)和技巧，希望通過這些內(nèi)容能幫助你對排版和布局有更多的思考。