形式美法則是人類在創(chuàng)造美的形式和過程中對美的形式規(guī)律的總結(jié)概括，世間萬物的美都可以用形式美法則來概括。在平面構(gòu)成中也有形式美法則：統(tǒng)一和變化近零，對稱和平衡，節(jié)奏和韻律溜歪，對比和調(diào)和若专。前面跟大家有分享了對比、留白在網(wǎng)頁當(dāng)中的運(yùn)用蝴猪，今天我們繼續(xù)來分享網(wǎng)頁當(dāng)中那么多元素是如何做到統(tǒng)一一致的调衰。
在視覺上的統(tǒng)一可以體現(xiàn)在：圖片，色彩自阱；區(qū)塊嚎莉；布局；字體沛豌，視覺元素趋箩。此外，還有一個交互上的統(tǒng)一加派。
1叫确、圖片統(tǒng)一
圖片統(tǒng)一體現(xiàn)在圖片大小尺寸上的統(tǒng)一，顏色色系上的統(tǒng)一和圖片風(fēng)格的統(tǒng)一芍锦。
不管是京東還是天貓?zhí)詫氈衩悖@些商城在網(wǎng)站上的圖片處理就用了這樣的統(tǒng)一原則。不一樣的場景下對圖片的要求也都不一樣娄琉。比如京東商城的首頁次乓，每一個區(qū)塊起到一定的導(dǎo)航性作用吓歇，在這樣的場景下，需要的圖片都是比較簡潔而不是背景復(fù)雜的票腰。下面我做了一個錯誤的示例給大家演示：
左圖是官網(wǎng)的圖片城看，右圖是一個錯誤示范。顯而易見丧慈，左圖的展示性和可讀性都比較強(qiáng)析命，視覺效果也比較好。右圖之所以覺得不好看是因為圖片大小不一致逃默，圖片的背景顏色也不一致鹃愤，所以看起來特別不協(xié)調(diào)。
好了完域，現(xiàn)在應(yīng)該有人會想問软吐，那京東或是天貓?zhí)詫毻ㄟ^搜索后進(jìn)去的頁面里面的產(chǎn)品配圖不是五顏六色的嗎，那怎么看起來也沒有覺得不協(xié)調(diào)吟税。
這些界面的統(tǒng)一一致性體現(xiàn)在產(chǎn)品區(qū)塊的大小尺寸上和整體的樣式上凹耙，除了產(chǎn)品圖不一樣，其他的布局樣式肠仪、區(qū)塊大小都是一樣的肖抱，這恰恰跟首頁相反，首頁各個區(qū)塊大小不一致异旧，所以采用圖片一致來協(xié)同意述，內(nèi)頁則是區(qū)塊樣式一致，圖片不一致吮蛹。但不管哪一種協(xié)調(diào)方法荤崇，界面都起到了很好的協(xié)調(diào)性。
圖片風(fēng)格上的統(tǒng)一主要體現(xiàn)在網(wǎng)頁當(dāng)中的圖片選擇上潮针，在寫實(shí)風(fēng)格的網(wǎng)頁中就不適合卡通的圖片术荤，在清爽的界面當(dāng)中，就不適合勁酷的圖片每篷。
2瓣戚、色彩統(tǒng)一
色彩統(tǒng)一指的是網(wǎng)頁當(dāng)中色彩色系運(yùn)用的統(tǒng)一性，這樣的統(tǒng)一性可以體現(xiàn)在網(wǎng)頁中的整體色系雳攘，也可以體現(xiàn)在網(wǎng)頁當(dāng)中所有區(qū)塊標(biāo)題的顏色带兜，甚至統(tǒng)一到整個網(wǎng)頁界面當(dāng)中按鈕的顏色搭配。一般情況下如果不知道網(wǎng)頁定什么色系好吨灭，小編給的意見和建議就是跟著你們的logo顏色走刚照。
Obrigado椰子水飲料網(wǎng)站的主色調(diào)就是用了綠色與白色相結(jié)合，穿插了一些橘黃色喧兄，起到活躍畫面的作用无畔，綠色是標(biāo)志的主色啊楚，橘黃色也是標(biāo)志的一個輔助色，可以看到整個網(wǎng)站簡潔清爽浑彰，黃色和綠色并不是等比重出現(xiàn)在網(wǎng)頁當(dāng)中恭理，就跟標(biāo)志一樣，黃色的占比少郭变⊙占郏可以訪問看看，里面一些交互運(yùn)用也做得比較好诉濒。
3周伦、字體統(tǒng)一
都知道界面當(dāng)中的字體顯示尤為重要，所以字體一定不能讓觀者覺得亂未荒，一定要做好統(tǒng)一专挪。
字體可以在變化中找統(tǒng)一，不管是字體片排、字號或是顏色上的統(tǒng)一寨腔，切勿為了突出字體而做過多效果，反而削弱文字的可讀性率寡。
在一個網(wǎng)站當(dāng)中迫卢，處理字體統(tǒng)一的時候，最好在界面設(shè)置的時候統(tǒng)一設(shè)置冶共【副埽可以借助一些建站系統(tǒng)去設(shè)置，也可以通過寫css樣式去確定界面的字號比默，標(biāo)題和正文的字體大小最好都統(tǒng)一一致，一定要避免首頁正文是14px盆犁，進(jìn)入到子頁面的時候字體大小就變成16px命咐，這樣容易讓觀者產(chǎn)生一定的不舒服感。
除此谐岁，字體的選擇上也要統(tǒng)一〈椎欤現(xiàn)在字庫上有很多字體，所以在選用字體的時候最好選用跟網(wǎng)頁整體風(fēng)格相符的字體伊佃。
4窜司、區(qū)塊統(tǒng)一
區(qū)塊的統(tǒng)一主要體現(xiàn)在各個區(qū)塊的高度大小、邊框顏色航揉、標(biāo)題樣式或者是區(qū)塊的整體樣式塞祈，當(dāng)然并非所有統(tǒng)一起來就是好的，要具體情況具體分析帅涂。還是上面天貓產(chǎn)品界面议薪，那么多區(qū)塊尤蛮，樣式邊框都做了統(tǒng)一，看起來整齊而有序斯议。下圖做了錯誤的示范产捞，區(qū)塊的邊框做了不一樣的顏色處理，這樣的區(qū)塊一起出現(xiàn)在界面當(dāng)中時就會顯得凌亂哼御。
Design3這個網(wǎng)站是小編用蟬知系統(tǒng)做的坯临，用的也是一樣的區(qū)塊處理，看起來會比較簡單明了恋昼。除此看靠，瀑布流的區(qū)塊雖然區(qū)塊高度不像產(chǎn)品區(qū)塊一樣做了高度上的統(tǒng)一，但是在區(qū)塊的布局和間隙上做了一定的統(tǒng)一效果焰雕，使得界面不亂衷笋，這樣的例子有很多網(wǎng)站，比如花瓣的瀑布流設(shè)計矩屁。
5辟宗、布局統(tǒng)一
布局的統(tǒng)一主要是說網(wǎng)頁當(dāng)中一些布局設(shè)置要統(tǒng)一，不要這個導(dǎo)航進(jìn)去的側(cè)邊欄在左邊吝秕，下一個導(dǎo)航進(jìn)去側(cè)邊欄在右邊泊脐，這樣的界面會讓人摸不著頭腦，用戶需要重新去適應(yīng)新的界面布局烁峭。
頂部導(dǎo)航和Logo的位置是否一致容客？行間距、文字與圖像的間距是否一致约郁？這些都體現(xiàn)了一個網(wǎng)站在細(xì)節(jié)上的考慮缩挑。有些網(wǎng)頁在設(shè)計上我們可能很難發(fā)現(xiàn)有多好，但是如果一些細(xì)節(jié)做得不夠好鬓梅，卻很容易讓人覺得在使用上不舒服供置。所以在布局上建議統(tǒng)一一致，設(shè)計者可以在寫樣式布局的時候統(tǒng)一設(shè)置绽快。相同類型的操作應(yīng)該有相似的結(jié)果反饋芥丧，相同的功能界面也應(yīng)該有類似的布局樣式。
6坊罢、視覺元素統(tǒng)一
這里的視覺元素包括網(wǎng)頁當(dāng)中各種元素的尺寸续担、大小和顏色。這些元素可以是按鈕活孩、圖標(biāo)物遇、動畫等省咨，在網(wǎng)站設(shè)計時也要考慮不同頁面之間的一致性娶耍，盡管功能不同，但是要大體上（可以略有變通）保持不同頁面之間視覺風(fēng)格的一致。
MINGO這個食品網(wǎng)站從界面的標(biāo)題顏色宣渗、按鈕大小顏色莺匠、文字大小什么的都做了協(xié)調(diào)統(tǒng)一万牺，界面元素雖然多关顷，但不凌亂，反而一些細(xì)節(jié)的統(tǒng)一處理讓界面更活潑始衅。
7冷蚂、交互統(tǒng)一
交互上的統(tǒng)一也很重要，除了視覺外觀上可以一樣看到的汛闸，”交互”和”行為”上也要下一定的功夫蝙茶。在各個頁面當(dāng)中的交互性也很重要，且最好保持大致的相同诸老，以免太過凌亂隆夯。好比市面上的一些排插上的按鈕設(shè)計，有些排插上的按鈕按下去是開啟别伏，有些排插按下去是關(guān)閉蹄衷，這樣的交互設(shè)計不同一，會讓使用者摸不著頭腦厘肮，使用起來也及其不順手愧口。生活中都如此，在網(wǎng)頁設(shè)計當(dāng)中也是不能忽略交互上的統(tǒng)一类茂，倘若同個界面的同個元素耍属，用戶觸發(fā)這個元素的時候，這個元素給用戶兩種不同的顯示效果巩检，這樣只會讓用戶對這個網(wǎng)站產(chǎn)生距離感厚骗。下面的反例
給大家舉個簡單的例子，這是常見的網(wǎng)頁標(biāo)簽區(qū)塊兢哭，正常鼠標(biāo)移過會顯示主色——橘色溯捆，右圖我做了一個錯誤的示例，倘若這個鼠標(biāo)按鈕移過顯示橘色且按鈕放大厦瓢，另外一個按鈕鼠標(biāo)移過顯示藍(lán)色或綠色、且這個按鈕被縮小啤月，這樣的交互體驗會有點(diǎn)糟糕煮仇，視覺上和交互上的不統(tǒng)一會讓瀏覽者使用起來比較難受，也比較突兀難以接受谎仲，所以我們都統(tǒng)一視覺元素的同時浙垫，交互也要做統(tǒng)一處理。
在視覺、交互方式和操作結(jié)果上保持一致夹姥。減少用戶使用成本杉武，也能讓用戶感到親切感，體會到產(chǎn)品設(shè)計上的嚴(yán)謹(jǐn)性辙售。統(tǒng)一協(xié)調(diào)其實(shí)在網(wǎng)頁當(dāng)中也比較重要轻抱，它可以讓對比強(qiáng)烈或是突兀的一個界面變得比較舒服和柔和，降低用戶心里的不舒服感旦部，拉近用戶之間的距離感和親切感祈搜。好啦，本期的統(tǒng)一原則的分享就到此結(jié)束啦士八，如果大家還有其他想分享或是想知道的內(nèi)容可以告訴小編容燕，我們可以一起學(xué)習(xí)與分享。
