網(wǎng)頁設(shè)計(jì)中對齊原則有哪些作用

網(wǎng)頁設(shè)計(jì)中對齊原則有哪些作用

網(wǎng)頁設(shè)計(jì)中對齊原則有哪些作用？設(shè)計(jì)有一些原則是共通的，不管是產(chǎn)品設(shè)計(jì)、平面設(shè)計(jì)、還是服裝設(shè)計(jì)，設(shè)計(jì)的形式美法則都是通用的。今天跟大家分享對齊原則在網(wǎng)頁當(dāng)中的運(yùn)用。對齊，是很重要卻很容易被遺忘的一點(diǎn)。有四大原則：對比、重復(fù)、對齊、和親密性。書中提出：任何東西都不能在頁面上隨意擺放，每個(gè)元素都應(yīng)當(dāng)與頁面上的另一個(gè)元素有著某種視覺聯(lián)系。這樣能建立一種清晰、精巧而且清爽的外觀。那就開始今天的網(wǎng)頁設(shè)計(jì)中對齊原則課程之旅。

視覺上遵從保持尺寸和邊緣的一致性。

網(wǎng)頁設(shè)計(jì)中對齊原則有哪些作用？對齊可以讓一個(gè)網(wǎng)站頁面看起來比較規(guī)范整齊。對齊一般有三種方式：左對齊、居中對齊、右對齊。

在網(wǎng)頁當(dāng)中運(yùn)用比較多的是居中對齊和左對齊，大篇幅的右對齊可讀性上比較差，所以出現(xiàn)的頻率不高，小部分的出現(xiàn)還是有的。不管是哪種方式的對齊，網(wǎng)頁中對齊后的文本一定要考慮可讀性的問題，千萬不要本末倒置。

對齊在網(wǎng)頁中的運(yùn)用無非還是上面那三種對齊方式，正常情況下我們要注意的對齊有這些：元素的對齊、文字的對齊、圖片的對齊、區(qū)塊布局的對齊。

1、元素對齊

元素的對齊指的是網(wǎng)頁中的一些按鈕、圖標(biāo)、搜索框等網(wǎng)頁中的元素統(tǒng)一采用一種對齊方式對齊。

用主頁來舉例，可以看到圖標(biāo)部分都是居左對齊的，元素上的對齊分布讓整個(gè)界面看起來整齊簡潔，內(nèi)容劃分也變得比較明確，可讀性強(qiáng)，方便瀏覽者瀏覽。

一個(gè)網(wǎng)頁當(dāng)中，會(huì)有很多元素，而元素的對齊可以讓整個(gè)界面變得井然有序，元素過于隨意擺放沒有規(guī)律，會(huì)讓界面雜亂無章。

2、文字的對齊

文字的對齊方式也不外乎上面三種，左對齊是最常見的，居中對齊常出現(xiàn)在文章詳情的標(biāo)題部分，右對齊文字出現(xiàn)的頻率小一點(diǎn)，不會(huì)以大篇幅出現(xiàn)，大部分在登陸注冊或是產(chǎn)品詳情界面中常見。

左對齊的方式適合人們的閱讀習(xí)慣，在網(wǎng)頁中也比較常見，這里不多講了。

居中對齊是進(jìn)幾年隨著html5流行起來，越來越多設(shè)計(jì)師用居中對齊作為一些區(qū)塊內(nèi)容展示的方式。

可以看到，蘋果官網(wǎng)在產(chǎn)品介紹頁面，文字用得比較多的是這種居中對齊。這樣的對齊方式有個(gè)好處就是讓瀏覽者的視線集中在該區(qū)塊內(nèi)容上，其次從樣式上的不對稱感可以增加界面的層次感和設(shè)計(jì)感。但是文字居中對齊不適用于文字內(nèi)容太多的區(qū)塊。

右對齊常見到的是在一些小的細(xì)節(jié)中，比如登陸注冊界面、底部導(dǎo)航區(qū)塊等，仔細(xì)看看還是可以發(fā)現(xiàn)有一些地方用到了右對齊。

3、圖片的對齊

圖片對齊也不外乎上面說的三種方式，圖片對齊好處理一些，主要根據(jù)網(wǎng)頁想表達(dá)的內(nèi)容去做對齊，以達(dá)到好的視覺展示效果。所以在不同的情況下，可以采用不同的對齊方式。

4、區(qū)塊布局的對齊

上面講的小元素對齊重要，那大的區(qū)塊對齊也很重要。視覺上的對齊，可以讓瀏覽者快速的瀏覽到相應(yīng)的內(nèi)容。小元素不對齊會(huì)顯得亂，大區(qū)塊不對齊會(huì)讓整個(gè)界面沒有秩序感。

說到區(qū)塊的對齊，不得不提的柵格系統(tǒng)，柵格系統(tǒng)可以讓一個(gè)網(wǎng)站看起來有秩序感。很多人不喜歡柵格系統(tǒng)，覺得限制他們自己的創(chuàng)意。

事實(shí)上，柵格的運(yùn)用可以很靈活，分多少欄全看設(shè)計(jì)師的設(shè)計(jì)。

因此可見，對齊也是有層次的，不同層次內(nèi)容可以采用不同的對齊方式。

對齊相比較之前的其他設(shè)計(jì)原則來說，會(huì)比較簡單也好理解，但是在具體的實(shí)踐過程中，還需要設(shè)計(jì)師們?nèi)ニ伎己驮O(shè)計(jì)。對齊，不僅可以在信息層級上一致，而且會(huì)更有氣勢。

總之，在做網(wǎng)站的時(shí)候要以內(nèi)容為主旨，界面設(shè)計(jì)一定是要方便用戶快速找到他們想要的。其次使用正確的對齊方式，讓界面更為整齊，信息更為明確。

      注：尊重原創(chuàng)文章,轉(zhuǎn)載請注明出處和鏈接 http://m.universityresearchassociates.com/news-id-77626.html 違者必究！部分文章來源于網(wǎng)絡(luò)由培訓(xùn)無憂網(wǎng)編輯部人員整理發(fā)布,內(nèi)容真實(shí)性請自行核實(shí)或聯(lián)系我們，了解更多相關(guān)資訊請關(guān)注網(wǎng)頁制作頻道查看更多，了解相關(guān)專業(yè)課程信息您可在線咨詢也可免費(fèi)申請?jiān)囌n。關(guān)注官方微信了解更多：150 3333 6050