設計有一些原則是共通的 ， 不管是產品設計、平面設計、還是服裝設計，設計的形式美法則都是通用的 。今天跟大家分享對齊原則在網頁當中的運用 。對齊 ， 是很重要卻很容易被遺忘的一點 。有四大原則：對比、重復、對齊、和親密性 。書中提出：任何東西都不能在頁面上隨意擺放，每個元素都應當與頁面上的另一個元素有著某種視覺聯系 。這樣能建立一種清晰、精巧而且清爽的外觀 。那就開始今天的網頁設計中對齊原則課程之旅 。
視覺上遵從保持尺寸和邊緣的一致性 。
對齊可以讓一個網站頁面看起來比較規范整齊 。對齊一般有三種方式：左對齊、居中對齊、右對齊 。
在網頁當中運用比較多的是居中對齊和左對齊，大篇幅的右對齊可讀性上比較差 ， 所以出現的頻率不高，小部分的出現還是有的 。不管是哪種方式的對齊 ， 網頁中對齊后的文本一定要考慮可讀性的問題，千萬不要本末倒置 。
對齊在網頁中的運用無非還是上面那三種對齊方式，正常情況下我們要注意的對齊有這些：元素的對齊、文字的對齊、圖片的對齊、區塊布局的對齊 。
1、元素對齊
元素的對齊指的是網頁中的一些按鈕、圖標、搜索框等網頁中的元素統一采用一種對齊方式對齊 。
用主頁來舉例，可以看到圖標部分都是居左對齊的，元素上的對齊分布讓整個界面看起來整齊簡潔 ， 內容劃分也變得比較明確，可讀性強，方便瀏覽者瀏覽 。
一個網頁當中，會有很多元素，而元素的對齊可以讓整個界面變得井然有序 ， 元素過于隨意擺放沒有規律，會讓界面雜亂無章 。
2、文字的對齊
文字的對齊方式也不外乎上面三種，左對齊是最常見的，居中對齊常出現在文章詳情的標題部分，右對齊文字出現的頻率小一點，不會以大篇幅出現，大部分在登陸注冊或是產品詳情界面中常見 。
左對齊的方式適合人們的閱讀習慣，在網頁中也比較常見 ， 這里不多講了 。
居中對齊是進幾年隨著html5流行起來，越來越多設計師用居中對齊作為一些區塊內容展示的方式 。
可以看到，蘋果官網在產品介紹頁面，文字用得比較多的是這種居中對齊 。這樣的對齊方式有個好處就是讓瀏覽者的視線集中在該區塊內容上 ， 其次從樣式上的不對稱感可以增加界面的層次感和設計感 。但是文字居中對齊不適用于文字內容太多的區塊 。
右對齊常見到的是在一些小的細節中，比如登陸注冊界面、底部導航區塊等，仔細看看還是可以發現有一些地方用到了右對齊 。
惠普商城注冊界面中輸入框提示文字全部都是居右對齊，讓提示信息和輸入框看起來更為整體和舒服 。在注冊界面上的設計 ， 大部分設計都是提示信息居右對齊，包括蟬知注冊界面也是這樣的設計方式，不信可以打開網站看看 。
3、圖片的對齊
圖片對齊也不外乎上面說的三種方式 ， 圖片對齊好處理一些，主要根據網頁想表達的內容去做對齊，以達到好的視覺展示效果 。所以在不同的情況下，可以采用不同的對齊方式 。
在當當的圖書展示頁中，列表展示方式下圖片在圖片的左邊，文字在圖片的右側 。
在大圖展示方式下 ， 可以看到產品圖是居中展示的 。所以就算是同一個網站也不會只用一種對齊方式，對齊比較靈活，就算是同個頁面，也可能為了視覺效果而采用兩種或三種對齊方式，這個根據整個界面的效果而定 。
4、區塊布局的對齊
上面講的小元素對齊重要，那大的區塊對齊也很重要 。視覺上的對齊，可以讓瀏覽者快速的瀏覽到相應的內容 。小元素不對齊會顯得亂 ， 大區塊不對齊會讓整個界面沒有秩序感 。
這樣的情況最常出現在一些產品展示的網站當中，設計這個網頁的設計師說他們刻意追求不對稱感 。按鈕的不對齊 ， 和區塊的不對齊，讓整個界面顯得很粗糙 。在不是瀑布流的情況下 ， 這種區塊大幅度出現在界面當中的時候，對瀏覽者來說就是一種折磨 。
說到區塊的對齊，不得不提的柵格系統，柵格系統可以讓一個網站看起來有秩序感 。很多人不喜歡柵格系統，覺得限制他們自己的創意 。
事實上，柵格的運用可以很靈活，分多少欄全看設計師的設計 。
【網頁設計中對齊原則的運用】
