網(wǎng)站建設(shè)中對(duì)齊原則的運(yùn)用

設(shè)計(jì)有一些原則是共通的，不管是產(chǎn)品設(shè)計(jì)、平面設(shè)計(jì)、還是服裝設(shè)計(jì)，設(shè)計(jì)的形式美法則都是通用的。前面跟大家也分享了一些對(duì)比、統(tǒng)一、留白在網(wǎng)頁(yè)當(dāng)中的運(yùn)用，今天成都網(wǎng)站建設(shè)公司跟大家分享對(duì)齊原則在網(wǎng)頁(yè)當(dāng)中的運(yùn)用。
對(duì)齊，是很重要卻很容易被遺忘的一點(diǎn)。在《給大家看的設(shè)計(jì)書(shū)》這書(shū)中提出了四大原則：對(duì)比、重復(fù)、對(duì)齊、和親密性。書(shū)中提出：任何東西都不能在頁(yè)面上隨意擺放，每個(gè)元素都應(yīng)當(dāng)與頁(yè)面上的另一個(gè)元素有著某種視覺(jué)聯(lián)系。這樣能建立一種清晰、精巧而且清爽的外觀(guān)。
視覺(jué)上遵從保持尺寸和邊緣的一致性。
對(duì)齊可以讓一個(gè)網(wǎng)站頁(yè)面看起來(lái)比較規(guī)范整齊。對(duì)齊一般有三種方式：左對(duì)齊、居中對(duì)齊、右對(duì)齊。
在網(wǎng)頁(yè)當(dāng)中運(yùn)用比較多的是居中對(duì)齊和左對(duì)齊，大篇幅的右對(duì)齊可讀性上比較差，所以出現(xiàn)的頻率不高，小部分的出現(xiàn)還是有的。不管是哪種方式的對(duì)齊，網(wǎng)頁(yè)中對(duì)齊后的文本一定要考慮可讀性的問(wèn)題，千萬(wàn)不要本末倒置。
對(duì)齊在網(wǎng)頁(yè)中的運(yùn)用無(wú)非還是上面那三種對(duì)齊方式，正常情況下我們要注意的對(duì)齊有這些：元素的對(duì)齊、文字的對(duì)齊、圖片的對(duì)齊、區(qū)塊布局的對(duì)齊。
1、元素對(duì)齊
元素的對(duì)齊指的是網(wǎng)頁(yè)中的一些按鈕、圖標(biāo)、搜索框等網(wǎng)頁(yè)中的元素統(tǒng)一采用一種對(duì)齊方式對(duì)齊。
用zui主頁(yè)來(lái)舉例，可以看到圖標(biāo)部分都是居左對(duì)齊的，元素上的對(duì)齊分布讓整個(gè)界面看起來(lái)整齊簡(jiǎn)潔，內(nèi)容劃分也變得比較明確，可讀性強(qiáng)，方便瀏覽者瀏覽。
一個(gè)網(wǎng)頁(yè)當(dāng)中，會(huì)有很多元素，而元素的對(duì)齊可以讓整個(gè)界面變得井然有序，元素過(guò)于隨意擺放沒(méi)有規(guī)律，會(huì)讓界面雜亂無(wú)章。
2、文字的對(duì)齊
文字的對(duì)齊方式也不外乎上面三種，左對(duì)齊是最常見(jiàn)的，居中對(duì)齊常出現(xiàn)在文章詳情的標(biāo)題部分，右對(duì)齊文字出現(xiàn)的頻率小一點(diǎn)，不會(huì)以大篇幅出現(xiàn)，大部分在登陸注冊(cè)或是產(chǎn)品詳情界面中常見(jiàn)。
左對(duì)齊的方式適合人們的閱讀習(xí)慣，在網(wǎng)頁(yè)中也比較常見(jiàn)，這里不多講了。
居中對(duì)齊是進(jìn)幾年隨著html5流行起來(lái)，越來(lái)越多設(shè)計(jì)師用居中對(duì)齊作為一些區(qū)塊內(nèi)容展示的方式。
可以看到，蘋(píng)果官網(wǎng)在產(chǎn)品介紹頁(yè)面，文字用得比較多的是這種居中對(duì)齊。這樣的對(duì)齊方式有個(gè)好處就是讓瀏覽者的視線(xiàn)集中在該區(qū)塊內(nèi)容上，其次從樣式上的不對(duì)稱(chēng)感可以增加界面的層次感和設(shè)計(jì)感。但是文字居中對(duì)齊不適用于文字內(nèi)容太多的區(qū)塊。
右對(duì)齊常見(jiàn)到的是在一些小的細(xì)節(jié)中，比如登陸注冊(cè)界面、底部導(dǎo)航區(qū)塊等，仔細(xì)看看還是可以發(fā)現(xiàn)有一些地方用到了右對(duì)齊。
惠普商城注冊(cè)界面中輸入框提示文字全部都是居右對(duì)齊，讓提示信息和輸入框看起來(lái)更為整體和舒服。在注冊(cè)界面上的設(shè)計(jì)，大部分設(shè)計(jì)都是提示信息居右對(duì)齊，包括蟬知注冊(cè)界面也是這樣的設(shè)計(jì)方式，不信可以打開(kāi)網(wǎng)站看看。
3、圖片的對(duì)齊
圖片對(duì)齊也不外乎上面說(shuō)的三種方式，圖片對(duì)齊好處理一些，主要根據(jù)網(wǎng)頁(yè)想表達(dá)的內(nèi)容去做對(duì)齊，以達(dá)到好的視覺(jué)展示效果。所以在不同的情況下，可以采用不同的對(duì)齊方式。
在當(dāng)當(dāng)?shù)膱D書(shū)展示頁(yè)中，列表展示方式下圖片在圖片的左邊，文字在圖片的右側(cè)。
在大圖展示方式下，可以看到產(chǎn)品圖是居中展示的。所以就算是同一個(gè)網(wǎng)站也不會(huì)只用一種對(duì)齊方式，對(duì)齊比較靈活，就算是同個(gè)頁(yè)面，也可能為了視覺(jué)效果而采用兩種或三種對(duì)齊方式，這個(gè)根據(jù)整個(gè)界面的效果而定。
4、區(qū)塊布局的對(duì)齊
上面講的小元素對(duì)齊重要，那大的區(qū)塊對(duì)齊也很重要。視覺(jué)上的對(duì)齊，可以讓瀏覽者快速的瀏覽到相應(yīng)的內(nèi)容。小元素不對(duì)齊會(huì)顯得亂，大區(qū)塊不對(duì)齊會(huì)讓整個(gè)界面沒(méi)有秩序感。
這樣的情況最常出現(xiàn)在一些產(chǎn)品展示的網(wǎng)站當(dāng)中，設(shè)計(jì)這個(gè)網(wǎng)頁(yè)的設(shè)計(jì)師說(shuō)他們刻意追求不對(duì)稱(chēng)感。按鈕的不對(duì)齊，和區(qū)塊的不對(duì)齊，讓整個(gè)界面顯得很粗糙。在不是瀑布流的情況下，這種區(qū)塊大幅度出現(xiàn)在界面當(dāng)中的時(shí)候，對(duì)瀏覽者來(lái)說(shuō)就是一種折磨。
說(shuō)到區(qū)塊的對(duì)齊，不得不提的柵格系統(tǒng)，柵格系統(tǒng)可以讓一個(gè)網(wǎng)站看起來(lái)有秩序感。很多人不喜歡柵格系統(tǒng)，覺(jué)得限制他們自己的創(chuàng)意。
事實(shí)上，柵格的運(yùn)用可以很靈活，分多少欄全看設(shè)計(jì)師的設(shè)計(jì)。記得在給大家分享區(qū)塊對(duì)比的時(shí)候，曾分享過(guò)zui前端框架和Gridpak柵格的小工具，這兩個(gè)工具可以幫助設(shè)計(jì)師怎么更好的用柵格系統(tǒng)來(lái)搭建你的網(wǎng)站。
用當(dāng)當(dāng)?shù)牡顷懡缑娼o大家總體分析一下，在當(dāng)當(dāng)網(wǎng)的界面當(dāng)中，有左對(duì)齊、居中對(duì)齊和右對(duì)齊，其實(shí)這些概念大家都懂，就是不知道怎么合理的運(yùn)用到各個(gè)網(wǎng)頁(yè)當(dāng)中。
可以看到整個(gè)界面的層次區(qū)分圖，這是人視覺(jué)停留的內(nèi)容層次圖，通過(guò)層級(jí)關(guān)系的分析，我們可以找到一定的規(guī)律：
第一眼是居中顯示的，當(dāng)視線(xiàn)提留到1區(qū)時(shí)，1區(qū)的內(nèi)容是右對(duì)齊，視線(xiàn)轉(zhuǎn)移到2區(qū)時(shí)，2區(qū)內(nèi)容是左對(duì)齊。3區(qū)則是為了平衡界面有左對(duì)齊也有右對(duì)齊。
因此可見(jiàn)，對(duì)齊也是有層次的，不同層次內(nèi)容可以采用不同的對(duì)齊方式。
對(duì)齊相比較之前的其他設(shè)計(jì)原則來(lái)說(shuō)，會(huì)比較簡(jiǎn)單也好理解，但是在具體的實(shí)踐過(guò)程中，還需要設(shè)計(jì)師們?nèi)ニ伎己驮O(shè)計(jì)。對(duì)齊，不僅可以在信息層級(jí)上一致，而且會(huì)更有氣勢(shì)。

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

本文來(lái)自創(chuàng)新互聯(lián)品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)
標(biāo)簽：重慶網(wǎng)站建設(shè)公司,成都網(wǎng)頁(yè)設(shè)計(jì)公司,成都網(wǎng)站設(shè)計(jì)公司,高端網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè)

分享文章：網(wǎng)站建設(shè)中對(duì)齊原則的運(yùn)用
文章URL：http://www.bm7419.com/news8/168858.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專(zhuān)注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司；服務(wù)項(xiàng)目有網(wǎng)站建設(shè)等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)