在平面構(gòu)成中有形式美法則：統(tǒng)一和變化，對(duì)稱和平衡，節(jié)奏和韻律，對(duì)比和調(diào)和。前面跟大家有分享了對(duì)比、留白在廣州網(wǎng)頁(yè)設(shè)計(jì)當(dāng)中的運(yùn)用，今天創(chuàng)新互聯(lián)繼續(xù)來(lái)分享網(wǎng)頁(yè)當(dāng)中那么多元素是如何做到統(tǒng)一一致的。

1、圖片統(tǒng)一

圖片統(tǒng)一體現(xiàn)在圖片大小尺寸上的統(tǒng)一，顏色色系上的統(tǒng)一和圖片風(fēng)格的統(tǒng)一。

不管是京東還是天貓?zhí)詫?，這些商城在網(wǎng)站上的圖片處理就用了這樣的統(tǒng)一原則。不一樣的場(chǎng)景下對(duì)圖片的要求也都不一樣。比如京東商城的首頁(yè)，每一個(gè)區(qū)塊起到一定的導(dǎo)航性作用，在這樣的場(chǎng)景下，需要的圖片都是比較簡(jiǎn)潔而不是背景復(fù)雜的。下面我做了一個(gè)錯(cuò)誤的示例給大家演示：

左圖是官網(wǎng)的圖片，右圖是一個(gè)錯(cuò)誤示范。顯而易見，左圖的展示性和可讀性都比較強(qiáng)，視覺效果也比較好。右圖之所以覺得不好看是因?yàn)閳D片大小不一致，圖片的背景顏色也不一致，所以看起來(lái)特別不協(xié)調(diào)。

好了，現(xiàn)在應(yīng)該有人會(huì)想問，那京東或是天貓?zhí)詫毻ㄟ^搜索后進(jìn)去的頁(yè)面里面的產(chǎn)品配圖不是五顏六色的嗎，那怎么看起來(lái)也沒有覺得不協(xié)調(diào)。

這些界面的統(tǒng)一一致性體現(xiàn)在產(chǎn)品區(qū)塊的大小尺寸上和整體的樣式上，除了產(chǎn)品圖不一樣，其他的布局樣式、區(qū)塊大小都是一樣的，這恰恰跟首頁(yè)相反，首頁(yè)各個(gè)區(qū)塊大小不一致，所以采用圖片一致來(lái)協(xié)同，內(nèi)頁(yè)則是區(qū)塊樣式一致，圖片不一致。但不管哪一種協(xié)調(diào)方法，界面都起到了很好的協(xié)調(diào)性。

圖片風(fēng)格上的統(tǒng)一主要體現(xiàn)在網(wǎng)頁(yè)當(dāng)中的圖片選擇上，在寫實(shí)風(fēng)格的網(wǎng)頁(yè)中就不適合卡通的圖片，在清爽的界面當(dāng)中，就不適合勁酷的圖片。

2、色彩統(tǒng)一

色彩統(tǒng)一指的是網(wǎng)頁(yè)當(dāng)中色彩色系運(yùn)用的統(tǒng)一性，這樣的統(tǒng)一性可以體現(xiàn)在網(wǎng)頁(yè)中的整體色系，也可以體現(xiàn)在網(wǎng)頁(yè)當(dāng)中所有區(qū)塊標(biāo)題的顏色，甚至統(tǒng)一到整個(gè)網(wǎng)頁(yè)界面當(dāng)中按鈕的顏色搭配。一般情況下如果不知道網(wǎng)頁(yè)定什么色系好，給的意見和建議就是跟著你們的logo顏色走。

3、字體統(tǒng)一

都知道界面當(dāng)中的字體顯示尤為重要，所以字體一定不能讓觀者覺得亂，一定要做好統(tǒng)一。

字體可以在變化中找統(tǒng)一，不管是字體、字號(hào)或是顏色上的統(tǒng)一，切勿為了突出字體而做過多效果，反而削弱文字的可讀性。

在一個(gè)網(wǎng)站當(dāng)中，處理字體統(tǒng)一的時(shí)候，最好在界面設(shè)置的時(shí)候統(tǒng)一設(shè)置?？梢越柚恍?a href="http://jinyejixie.com/" target="_blank">建站系統(tǒng)去設(shè)置，也可以通過寫css樣式去確定界面的字號(hào)，標(biāo)題和正文的字體大小最好都統(tǒng)一一致，一定要避免首頁(yè)正文是14px，進(jìn)入到子頁(yè)面的時(shí)候字體大小就變成16px，這樣容易讓觀者產(chǎn)生一定的不舒服感。

除此，字體的選擇上也要統(tǒng)一?，F(xiàn)在字庫(kù)上有很多字體，所以在選用字體的時(shí)候最好選用跟網(wǎng)頁(yè)整體風(fēng)格相符的字體。

4、區(qū)塊統(tǒng)一

區(qū)塊的統(tǒng)一主要體現(xiàn)在各個(gè)區(qū)塊的高度大小、邊框顏色、標(biāo)題樣式或者是區(qū)塊的整體樣式，當(dāng)然并非所有統(tǒng)一起來(lái)就是好的，要具體情況具體分析。還是上面天貓產(chǎn)品界面，那么多區(qū)塊，樣式邊框都做了統(tǒng)一，看起來(lái)整齊而有序。下圖做了錯(cuò)誤的示范，區(qū)塊的邊框做了不一樣的顏色處理，這樣的區(qū)塊一起出現(xiàn)在界面當(dāng)中時(shí)就會(huì)顯得凌亂。

5、布局統(tǒng)一

布局的統(tǒng)一主要是說(shuō)網(wǎng)頁(yè)當(dāng)中一些布局設(shè)置要統(tǒng)一，不要這個(gè)導(dǎo)航進(jìn)去的側(cè)邊欄在左邊，下一個(gè)導(dǎo)航進(jìn)去側(cè)邊欄在右邊，這樣的界面會(huì)讓人摸不著頭腦，用戶需要重新去適應(yīng)新的界面布局。

頂部導(dǎo)航和Logo的位置是否一致？行間距、文字與圖像的間距是否一致？這些都體現(xiàn)了一個(gè)網(wǎng)站在細(xì)節(jié)上的考慮。有些網(wǎng)頁(yè)在設(shè)計(jì)上我們可能很難發(fā)現(xiàn)有多好，但是如果一些細(xì)節(jié)做得不夠好，卻很容易讓人覺得在使用上不舒服。所以在布局上建議統(tǒng)一一致，設(shè)計(jì)者可以在寫樣式布局的時(shí)候統(tǒng)一設(shè)置。相同類型的操作應(yīng)該有相似的結(jié)果反饋，相同的功能界面也應(yīng)該有類似的布局樣式。

6、視覺元素統(tǒng)一

這里的視覺元素包括網(wǎng)頁(yè)當(dāng)中各種元素的尺寸、大小和顏色。這些元素可以是按鈕、圖標(biāo)、動(dòng)畫等，在網(wǎng)站設(shè)計(jì)時(shí)也要考慮不同頁(yè)面之間的一致性，盡管功能不同，但是要大體上（可以略有變通）保持不同頁(yè)面之間視覺風(fēng)格的一致。

7、交互統(tǒng)一

交互上的統(tǒng)一也很重要，除了視覺外觀上可以一樣看到的，”交互”和”行為”上也要下一定的功夫。在各個(gè)頁(yè)面當(dāng)中的交互性也很重要，且最好保持大致的相同，以免太過凌亂。好比市面上的一些排插上的按鈕設(shè)計(jì)，有些排插上的按鈕按下去是開啟，有些排插按下去是關(guān)閉，這樣的交互設(shè)計(jì)不同一，會(huì)讓使用者摸不著頭腦，使用起來(lái)也及其不順手。生活中都如此，在網(wǎng)頁(yè)設(shè)計(jì)當(dāng)中也是不能忽略交互上的統(tǒng)一，倘若同個(gè)界面的同個(gè)元素，用戶觸發(fā)這個(gè)元素的時(shí)候，這個(gè)元素給用戶兩種不同的顯示效果，這樣只會(huì)讓用戶對(duì)這個(gè)網(wǎng)站產(chǎn)生距離感。

分享名稱：統(tǒng)一元素在廣州網(wǎng)頁(yè)設(shè)計(jì)當(dāng)中的運(yùn)用
地址分享：http://jinyejixie.com/news/155692.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營(yíng)銷、定制開發(fā)、定制網(wǎng)站、品牌網(wǎng)站制作、用戶體驗(yàn)、ChatGPT

廣告

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