中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

網(wǎng)站建設(shè)中對齊原則的運用

2022-06-18    分類: 網(wǎng)站建設(shè)

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

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


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

分享文章:網(wǎng)站建設(shè)中對齊原則的運用
文章URL:http://m.rwnh.cn/news8/168858.html

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

廣告

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

h5響應(yīng)式網(wǎng)站建設(shè)
怀宁县| 新安县| 濮阳县| 宝兴县| 中宁县| 钟祥市| 墨竹工卡县| 万源市| 都江堰市| 宁都县| 涟源市| 汶上县| 延吉市| 乐清市| 安丘市| 尼玛县| 富川| 安新县| 昭觉县| 襄垣县| 宜宾县| 吉隆县| 广平县| 南乐县| 蕉岭县| 金门县| 禹城市| 潼南县| 青河县| 嘉定区| 台州市| 祥云县| 克什克腾旗| 金寨县| 浦北县| 丰宁| 龙门县| 台南市| 延长县| 宁化县| 新津县|