[Web Design系列]Layout佈局的對齊與重複
Layout的對齊
網頁，乃是使用HTML與CSS等技術來製作，並透過Web瀏覽器來解析而呈現的一種媒體。網頁中，HTML的功能是用來將內容結構化的標記式語言，其視覺表現則有賴於CSS的使用。網頁預設的對齊方式為「置左對齊」，其餘空白則集中在網頁的右側。其實，這樣子的對齊形式不是網頁所獨有的，除了阿拉伯語係採用相反的「置右對齊」外，大部分的文件都是採用這種預設的對齊方式。
在「置左對齊」的預設頁面上，添加上「置中對齊」和「置右對齊」的使用，就可以實現各種不同的視覺表現方式。一般最常見的搭配方式就是「置中對齊」的大標題。那是因為，與其讓網站的大標題靠左、或者是靠右對齊，「置中對齊」在視覺上可以讓人感覺穩定。
易言之，網頁基本上是「置左對齊」的，但是在資訊量和視覺效果方面，最好將它們「置中對齊」或將某些元素「置右對齊」移動。當然，也有網站採用較高技術難度的對角線對齊的方法。
頁面設計在彈性寬度與固定寬度間的差異
響應式網頁設計（Responsive Web Design），由於該網頁可以適應不同大小尺寸的螢幕，我們一般會設計成在桌上型電腦或筆記型電腦的寬螢幕（尺寸約大於1024 px）上時置左對齊，在像手機一樣的小螢幕(尺寸約小於680 px)時置中對齊。這是因為響應式網頁設計的可視區域會根據螢幕的長、寬比例而變化，因此有必要進行彈性且靈活的設計。另一方面，若是採用像素（px）為單位設計固定寬度的頁面佈局，將存在諸如一部分的訊息被可視區域隱藏的風險。
以下舉出各種網站內容的對齊方式：
水平切齊，可保穩定
網站以水平切面為準的對齊方式，因此具有穩定感。
デザインあ
「デザインあ」網站，左側的文字標題會根據，使用者在網頁右邊分隔的方格上滾動時，產生動態效果，增加瀏覽的樂趣。
網址：www.design-ah-exhibition.jp
MINERAL HEALTH
如網站MINERAL HEALTH，在產品頁面也是採取水平切齊方式。
垂直對齊，產生平衡感
頁面中各種不同大小的方塊模組，皆沿著垂直線對齊，讓網站產生了平衡感。
The Design Genome Project
網頁將畫面垂直切割為8個區塊，文字與圖片則沿著切割後的垂直線排列。
網址：www.invisionapp.com/enterprise/design-genome
Christopher Ireland
沉浸式的單頁網站
具有視差滾動效果的沉浸式單頁網站(Immersive Single Page)，網頁佈局係針對頁面的垂直滾動進行了優化設計。
茶ッカソン
「茶ッカソン」（chackathon）網站，從主視覺到網站的標題、文字等內容，都採用具有東方文字性質的直式排列法。
Uncanny Valley Studio
進入整個網站，就像是在看影片一樣，連續的出現各個畫面。
網址：https://uncannyvalley.studio/
Immersive Garden
網址：https://immersive-g.com/wishes-2017/
Rainforest foods
像電影一樣的，帶你體驗雨林世界。
網址：https://www.rainforestfoods.com/experience/#!/slide-intro
基本區塊式佈局
網站隨然採用基本塊狀的網頁佈局，但由於頁面的構成元素中具有圓形、橢圓形等幾何形狀，讓頁面看起來靈活而不呆板。置中對齊的文字，增加整體的統一感。
コトリの 湯
靠近 | 重複
靠近或疏離
頁面設計的基礎是要對所要處理的訊息進行組織，為了提高可讀性和可見性，採用了各種設計手法。這些手法各式各樣、非常多，從最基本的，如放大標題、調整行距和文字段落的間距，到更高段的技法，如採用分界線以及包圍的方式將頁面上的資訊分組，並特意製造留白來引導觀眾的注意力。
大多數人在編排頁面時，都會使用分隔符號、邊線、箭頭等來設計來增加可讀性，即使是在製作企劃書或是寫報告等等，一般不會請設計師參與的文件時，也會採用這個方式。因此，你可以說這些技法根本沒有什麼特別之處。然而，若是專業的設計師忽略了這些基本的技法，恐怕會受到網友們嚴厲的批評。
只是單純的按部就班地展開的資訊，往往是讓人難以讀懂的。解決這個問題，可以透過將性質相關的訊息集中在一起，或者是簡單的畫一條線來將它與其他的訊息分開來。這種將訊息與訊息拉近或者是分開的方法有很多種。
下面我們以幾個網站做例子：
毫無間隙地靠在一起
佈局上採用像磁磚一樣的區塊為單位，將網站內容一格一格的組織起來，順著水平與垂直的方向展開。其中，網站區塊與區塊間沒有留白的間隙。
Viennese Modernism 2018
具有高度原創性的「Viennese Modernism 2018」（維也納現代主義2018年網址大全）。
MINERAL HEALTH
如網站MINERAL HEALTH，在首頁一進來就可以看到整個採用區塊與區塊間沒有留白間隙的呈現方式。
將多個作品緊密連接在一起
網站畫面中大部分區域使用一字排開的作品圖來填滿，不留下任何的空白。並且輔以垂直移動的動態表現方式，給人一種精緻、簡單而不繁雜的感覺。
中村力也
攝影師「中村力也」的作品集。
MARCELL VON BERLIN
首頁也採用類似的佈局方式，隨然作品之間沒有緊密的皆在一起。
重覆
頁面的設計中，若置入某種「規律性」，可以讓整個頁面佈局產生穩定感。雜亂無章地隨意拼貼擺放資訊，會讓人感到混亂而不解，因為視線東一個、西一個的，並不固定。這時可透過橫向和縱向對齊的資訊來引導視線。將頁面上的標題與圖片等分門別類，使其形成一組組的資訊（或可以稱為「模組化」），透過橫向或縱向的排列對齊，即可產生規律並且提高可讀性。
這種類型的排版設計很容易做成樣板，所以在CMS上稿系統上和部落格中廣受歡迎。 對於文章數量較多或需要頻繁更新資訊的網站來說，採用區塊與區塊層疊的佈局排版，不但方便使用，又能提供一覽無遺的資訊。
<圖04網頁上的“ iterate”示例>
透過全部或局部採用模組化相關資訊的方式，可以讓您從左向右或是從上到下，輕鬆引導使用者的視線。但需要請注意的是，當資訊的密度過高時，採用這樣的方式可能會適得其反。
重複相同類型的模組
例如「AKOMEYA TOKYO」網站，將網站內容分為 「標題區塊」和「視覺區塊 」的模組來處理。頁面透過一塊一塊元件的並排，只需將白色部分視為一個背景，讓人感到非常容易閱讀。
62 Models
網址：http://62management.com/creatives/
重複不同類型的模組（module）
写真のサイズを統一せず、マガジン形式に近い自由度を持たせたことで、反復配置特有の整然とした安定感と起伏のある変化に富んだ表現がマッチしています。
VSN公司（株式会社VSN）的官方網站是由兩種模組組成的一個塊狀佈局。透過使用不同尺寸的照片，賦予類似於雜誌的自由感，而使照片的重複排列讓畫面產生秩序感和穩定感，且具有豐富的變化。
總結
就像在家整理房間一樣，把東西弄整齊可以是日常生活中的一種感官享受，即便你不是設計師，也會有如此的感覺。
透過調整元素之間的遠近距離，可以提高資訊的可讀性和可看性。你可以根據需要，使用分界線和框線來區分資訊。
「重複」是製造規律性的一種基本手法。在用來引導使用者的視線時具有一定的效果。
