Zi 字媒體

對不起，今天的設計稿我必須過！

2021/12/25

yidianzixun

溫馨提示：細讀本文需要7分鐘，速讀僅需2分鐘。

小編在給甲方看一些簡潔的設計稿時總會收到這樣的回復：

「這有什麼好看」

「只不過是簡單的排列，隨便誰都會堆上去」

「我給你的圖片你怎麼都沒排上去」

這時候小編總想扔給他蒙德里安永不褪色的時尚作品——「紅黃藍格」，這個你真的會排吧，因為簡單的色彩誰都會堆上去。

但是，面對甲方爸爸，小編總會繼續打開設計稿源文件，您看看到底怎麼改，我改！

為了中和小編的簡潔風格和甲方所需要的「創意性、有點意思的網站」的需要，小編總結了一些排版模式也許可以用到。說到設計模式，你也許會說一千個人眼中就會有一千個哈姆雷特，小編並不是說能總結出一個絕對正確的模式，但是這也是看過眾多設計作品之後經驗的累積。先看看網站有哪些排版模式：

固定邊欄布局

導航是網站的重要組成部分，也許你沒注意到，菜單是我們尋找的第一個元素。保持菜單的最常見的方法之一是將它放在固定的側邊欄。這意味著，即使你滾動網站的內容的其餘部分，菜單也保持靜止，總是可見。側欄還可以包含菜單以外的內容，包括社交媒體鏈接，聯繫信息或任何其他你想要訪問者輕鬆找到的內容。這類排版形式多被運用於企業網站中。由Build in Amsterdam設計的Trefecta的網站，其左側邊欄帶有公司的標誌和簡單的菜單，非常常見的設計形式：

兩欄布局

由於大部分網站都是基於用戶使用習慣的垂直滾動，因此豎版的信息展示自然是最多的，將網頁分為兩欄能夠多功能的展示。這種兩欄布局的網站在電商中也比較常見，能夠給用戶極好的視覺體驗，如果你要試試新布局，可以選擇等分兩欄式。這裡展示的是Get Bowtied的作品，大圖像的展示能給用戶更大的視覺衝擊，同時該作品在頁面中使用倒敘也是一個非常膽大的設計想法。

基於文本的排版布局

這類布局形式適合圖片較少的情況，通常在白色、黑色等純色背景中實現，整體的效果呈現一種乾淨和簡潔化的風格，而排版則通常會使用大一些的字元文本，防止設計看起來平淡無奇。Impossible Bureau的主頁以黑色背景呈現大型無襯線文字，為了一個漂亮的視覺驚喜，當您選擇一個菜單選項時，該欄又會以一個充滿活力的漸變照亮：

卡片式布局

與Google的MaterialDesign同種風格的卡片式布局也越來越受到大家的喜愛，這種排版能讓用戶以掃描的方式了解每個區域的內容。每一塊卡片區域都是獨立的信息展示，就好像一個個內容模塊一般。此外，因其方形的型態，在不同的螢幕大小下，網站也可以輕易地重新排配版面。Pinterest是應用卡片式排版的先驅。

自由排版布局

自由形式的網頁排版可以不受任何網格的限制，並可以有大量留白，呈現一個乾淨、現代的界面。同時這種結構可以隨時根據內容靈活調整，在留白位置可以通過填充色彩或空白來創意設計。這類排版手法通常用於創意型領域中，在Jonas和Noma的個人頁面設計網頁結構中，圖片大小不一、使用文本進行填充留白，組成了形狀、大小、形態上的變化，是一個非常有趣的視覺布局。

在使用這些排版模式時也會出現各種緊急突發事件，小編這裡可以預測幾種。

1.在甲方爸爸提供的圖片像素較低時：

這裡有三種處理方法，一是使用圖片外框，使用同基色的背景色填充區塊能夠起到調整圖片的作用；二是通過對圖片的重複使用來設計頁面，也能起到豐富網頁的作用；三是使用無損放大圖片軟體PhotoZoom，這款軟體能夠無損放大素材到你需要的像素。

2.甲方爸爸不捨得購買字體時：

出現這種情況可以大膽的調整文字的大小、色彩變化，通過大小、粗細對比和調整字間距來增加頁面的設計感，在設計的文本區域中，亦可以使用移動標題、內容的變化來調整排版模式，這樣同樣也是對內容的創新。

3.當甲方爸爸提供的內容幅寬不同時：

這種情況是經常在電商類網頁設計過程中碰到的。圖片的安排通常由縱向和橫向兩種不同的類型，在我們的排版中，對內容的統一顯然是很重要的，但也會經常出現產品的圖片是不同的兩種形式，自然可以通過裁剪圖片變成統一的形式，但這種處理方式使用在所有的作品中不免會讓人覺得缺少張力和創意性，其實還有另外一種處理方式，即在統一各項內容的邊線範圍內進行內容增減調整。