春季要到了。又到了設計師求職高峰期。在之前的文章裡《這樣設計作品集面試率更高》，竹子總結了作品集如何去整體構思的。今天我們繼續講講作品集相關的知識。好的作品集其實本質上就是好的作品的展示。那麼設計作品如何包裝，才能讓作品集從衆多求職者中脫穎而出了。這時候我們就需要學習一些排版的知識，讓你的作品在合适的版式展示下更加出彩。

排版的難點在于，網上有非常多的模闆，各種樣機。降低了排版的難度。我們可以直接套模闆，但有可能千篇一律，而且機械的套模闆，還帶來一個問題。這個模闆是否真的适合展示你相應的作品。如果選擇的不合适，不僅不會提升頁面的品質，還會拉低整個頁面的品質感。

我們要先分類好我們的内容，然後根據具體的内容來布局版面。例如版面中的圖片數量，有時候隻有一兩張，有時候是數量較多，版面的構成元素的不同，會導緻直接套用固有的模闆看起來效果并不如意。所以竹子今天就不同情況下，作品集有哪些排版技巧來做一些分享。

一、單圖排版

單圖排版，即版面中的展示的圖片隻有一個。雖然圖片隻有一個，但是根據所在位置的不同和展示内容的不同，也會相應地有不同的展示手法和方式。

單張圖片平鋪展示，即把圖片鋪滿整個版面，這種手法多用于作品集封面的設計。在平鋪圖片的同時，也需要做一些文字部分的排版。因為排版切忌形式感單一，我們需要混合多做些形式感，讓畫面的層次感更加豐富。

在内頁中，我們可以把整個版面一切為二，把某半個版面平鋪一張大圖，另一半版面則排列文字或者小圖。這樣的排版方式可以用來做作品的展示說明，既展示了作品的細節，同時對作品進行詳細的文字說明。

相似的手法可以拓展一下，将一半畫面一半文字的排版作為一個整體，做成卡片狀，可以加入彌散陰影。關于彌散陰影的知識可以百度下，當然我以後也準備單獨去寫一下。背景我們可以從從畫面作品中拆解出一些幾何元素，作為背景的裝飾。常見的幾何元素就是矩形，圓形，方形之類的基礎圖形，如果找不到，也可以去搜索孟菲斯風格的素材，從裡面挑選一些幾何元素使用。這樣在原排版的基礎上，增加了層次和細節。

我們繼續使用單張圖片來設計版式，我們可以把平鋪的圖片作品可以适當縮小，這樣版面留白更多，更透氣。在此基礎上，還可以給圖片加上加上投影來做圖文排版，加強層次感和空間感。

背景可以使用圖畫中出現的額顔色，做成集合背景。由于圖片尺寸的縮小，不可能把作品的細節全部展示清楚，所以更适合去截取作品中有亮點，出彩的局部進行展示。有人可能有疑問了。作品的展示不應該把作品全部細節展示的清清楚楚嘛，我的理解，古人有一句話說的好，猶抱琵琶半遮面，虛實結合，會讓作品更有想象的空間，所以既要有清楚交代細節的部分，也要有概括的部分結合展示。

至于作品的背景，我們可以繼續使用一些大的幾何圖形，形成的塊面放置在背景上，也可以在同樣排版的基礎上，直接複制該圖片，拉大，壓暗或降低透明度，作為背景。

這裡需要特别說明，直接平鋪作品做為背景，需要注意一點的是作品圖片本身會有一些文字，或者色彩過于突出，做為背景就算加入了一些黑色透明度，依然會對前景有明顯的幹擾，所以需要剔除這些幹擾元素。另外選擇圖片需要圖片本身比較有張力、有視覺重心，這樣的排版效果才會不單調。

四周留白的排版方式，即圖片要比版面小，四周都留出空白。畫面本身位于版面正中央，圖片周圍的留白寬度是一緻的，這種版式可用于每個項目的封面設計。這種版式看上去有點像相框的效果，視覺上有向畫面中心聚攏的感覺。内部文字的排版，通常會擺放在角落上。

通常大标題會在版面的左上方，方便閱讀。文字排版的時候需要注意對齊原則，不管文字的大小，排除的文字塊面，要左右對齊，這樣版面看起來比較整潔，有規律。

排版的時候會遇到這樣的情況，當大段大段的界面介紹，會讓人看的膩煩，很多面試官其實每天要看很多作品集的，看多了雷同版式的大段文字說明，會有膩煩心理。這時候穿插一些大留白式的排版是非常有必要的。這個時候我們可以使用預留白邊的排版版式，圖片周圍預留的白邊數量也會影響版面的呈現效果。

圖片作品可以适當縮小，圖片的上下左右都有留白，這樣版面留白更多，更透氣。留白較多的區域可以用來擺放設計說明文字。

三變留白就是把圖片的一條邊對齊邊界，其餘部分都留白。從視覺上看有點沖破束縛的感覺，可以激發觀者的想象力，增加版面的設計感。留白處也可以擺放文字，做設計說明。當然我們需要注意圖片的邊緣已經無縫貼合版塊的邊緣了。所以取圖的時候需要注意圖片的截取，不要出現圖片内有很多線條，貼在邊緣上，讓版面的幾何形狀淩亂。

單邊留白在作品集的排版中是很常用的一種手法。這麼做會把版面分成兩部分，一部分為色塊，一部分為圖片，在排版時我們還可以通過文字、色塊或顔色把這兩個部分聯系起來。

在展示運營設計的時候，都少不了各種超長的運營專題圖，由于常見的作品集比例，單張圖片展示的高度可能很難容納下如此長度的圖片，所以我們可以把一張長圖拆分成幾份，然後隔開一點排列。通過這種方式去展示專題的細節。另外這種方式的巧妙還可以把專題中不好看的部分截圖剔除掉。

這種版式同樣适用于UI展示中各種首頁的長圖，另外可以在展示完長圖之後，截取部分畫面的細進行強調式展示。根據畫面可展示細節的數量，做成一排或兩排。

當展示圖片數量較少的時候，可以在排版的基礎上，給圖片做上彌散陰影，利用樣式來增加版式細節，版面不會顯得很空。

如果計劃在一個頁面既要展示頁面，又同時展示頁面的局部細節。那麼可以選擇單排小圖的方式和文字描述一起排版，細節部分通常使用規則的圓形或者圓角矩形等幾何圖形作為小圖展示。

二、雙圖排版

在作品集的排版設計中，有時候我們會遇到比較長的圖，可能是橫構圖也可能是豎構圖。這取決于具體的内容以及排版形式，所以圖片的排版也要分成這兩種情況來考慮。

在很多作品集排版中常用到此排法，視覺流程簡單、清晰，操作起來也比較快捷。在排版的同時，可以在背景使用大塊的色塊作為鋪墊，增加版面的設計感。

如果有較多的說明文字，圖片也可以排版更加緊湊一些。文字部分遵循對其原則，這樣排版清晰整潔，便于展示作品。

這種排版對比鮮明，可以在作品集的某一頁中使用，打破太規則的感覺。如果展示的是專題長圖頁面，我們可以将其分為兩段展示。可以直接平鋪，或者适當加上彌散投影。

通過還可以利用大小圖的強烈對比感，進行改版說明，比如在UI界面内，我要去展示新版界面可以用大圖，舊版界面用小圖，因為大多數舊版界面肯定不是很好看，通過這種圖片的大小對比，進行對比說明。這種組合形式感靈活，對比更強烈。如果要擺放文字說明的話，可以适當移動小圖的位置。

三、多圖排版

有時候一個版面内的圖片會有很多，這種版面排起來會更有難度，因為需要掌握好多個圖片的比例問題，所以必須統一間距排版，因為圖片本身很多，如果沒有一種留白間距進行統一，畫面會有淩亂無規律感。

這種排版方法比較整潔，缺點是少了版式的變化，比較式适合用于目錄的排版或者在UI界面展示部分來展示産品和用戶畫像。

這樣的排列方式也可以用來排版面積較小的作品，如BANNER展示。在平鋪的基礎上，可以家夥是簡短的說明文字。

如果需要展示UI界面的圖标部分，或者去展示一些APP作品裡面的表情道具，都可以去采用這種格子規整的排版手法，如果想讓這個版式有些變化，我們可以采用删除一到兩個格子進行留白。或者把一到兩個格子連起來，形成新的版面。關于連格子的手法，竹子會在後續的排版文章中在進行詳細說明。

這種排法相對更靈活一點。為了版面的規範、舒适，可以利用網格工具來輔助排版，這樣雖然沒有統一圖片的大小，但由于保持了嚴格的對齊關系，所以依然顯得很整潔，不混亂。

一大多小的排版方式，版面有張力。把其中一張圖片放大，與其他圖片形成鮮明的大小對比，在多圖排版的時候顯得主次分明。

在對齊排版圖片的基礎上，我們可以增大留白，或者删除一大多小中的小模塊，把留白出來的空間，來寫設計說明。

錯位排版的圖片數量不要太多。效果比對齊排版更有動感，由于圖片不多，所以也不會顯得亂。可以再錯位的基礎上，以同樣的斜度排上文字。由于展示的圖片在強弱層次表達上基本上在一個基調上。所以适合展示平級關系的内容。例如作品集的目錄界面，分别表達作品集内包含幾個模塊的内容。如果是去表達界面的内容，那麼可以去表達幾個功能點和分類，都是屬于同一級的内容，所占的比例也相同，用這種組合的排列能夠保持各内容的關系，也能讓布局更有創意。

我們可以把多圖中的一些圖片進行着純色，與圖片進行混合排版，圖片與色塊組合在一起的排版可以加強畫面的設計感，不會那麼單調。除此之外，我們還可以利用色塊來排文字。但是要注意的是，色塊的顔色不要太多。并且色塊中的顔色最好來自圖片，這樣在色彩上可以有呼應的效果。

單圖排版的時候，色塊可以跟圖片交疊排版，緩解單體排版的單調感。這種疊放方式其實就是把我們常用的彌散陰影色塊化。

多圖排版的時候，排版方式跟多圖排版一樣，隻要将其中一些闆塊替換成色塊即可。在穿插多個色塊的時候，建議使用色相不多于三種，不然畫面會顯得眼花缭亂。

3.5.把圖片拼成特定的形狀

如果圖片比較多，可以使用這種排版方式，這樣可以避免因為圖多而顯得亂的情況。拼成的形狀要與設計需求相關，所以會顯得更有設計感。

3.6.按照某一路徑排版

這種排版方法和圖片拼形狀的方法一樣，适合數量較多的同類圖片使用，可以避免圖片排版的太過分散，如果統一圖片的大小和方向，或者使它們呈漸變式的變化，這些圖片還可以形成一定的節奏感，不僅不會亂，還很美觀。不統一圖片的大小和方向，效果會比較活潑但不規範。當然這種切割塊面不适合太多太碎，而且要配合大留白去使用。因為版面的形式感很強了，需要大留白給用戶眼睛休憩的空間。

來源網絡

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!