編者按：本文分享了12個(gè)實(shí)用的排版設(shè)計(jì)技巧，很適合新手入門(mén)學(xué)習(xí)。

更多排版技巧：

大家好，這里是設(shè)計(jì)夾，今天分享的是「排版技巧」。頁(yè)面的排版很靈活，但在排版時(shí)我們不單單要考慮視覺(jué)上的好看，還要考慮使用上的體驗(yàn)。

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

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

一、鄰近性

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

二、相似性

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

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

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

三、連續(xù)性

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

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

四、閉合性

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

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

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

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

五、共同行為

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

六、前景和背景

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

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

七、分組

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

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

八、單位

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

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

九、網(wǎng)格

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

網(wǎng)格系統(tǒng)的具體用法可以看這篇文章多案例幫你掌握柵格系統(tǒng)的布局設(shè)計(jì)：

十、屏幕尺寸

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

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

十一、密度

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

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

十二、響應(yīng)式

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

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

工具欄：搜索、書(shū)簽等工具。

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

最后

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

慢慢來(lái)比較快，如覺(jué)得有幫助，

歡迎關(guān)注作者微信公眾號(hào)：「Clip設(shè)計(jì)夾」