講述網(wǎng)頁設(shè)計中統(tǒng)一原則的運用

　　形式美法則是人類在創(chuàng)造美的形式和過程中對美的形式規(guī)律的總結(jié)概括，世間萬物的美都可以用形式美法則來概括。在平面構(gòu)成中也有形式美法則：統(tǒng)一和變化，對稱和平衡，節(jié)奏和韻律，對比和調(diào)和。前面跟大家有分享了對比、留白在網(wǎng)頁當(dāng)中的運用，今天設(shè)計中國網(wǎng)的筆者分享網(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ù)雜的。

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

　　2、色彩統(tǒng)一

　　色彩統(tǒng)一指的是網(wǎng)頁當(dāng)中色彩色系運用的統(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顏色走。

　　3、字體統(tǒng)一

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

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

　　在一個網(wǎng)站當(dāng)中，處理字體統(tǒng)一的時候，最好在界面設(shè)置的時候統(tǒng)一設(shè)置?？梢越柚恍┙ㄕ鞠到y(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)中時就會顯得凌亂。

　　5、布局統(tǒng)一

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

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

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

　　7、交互統(tǒng)一

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

　　在視覺、交互方式和操作結(jié)果上保持一致。減少用戶使用成本，也能讓用戶感到親切感，體會到產(chǎn)品設(shè)計上的嚴(yán)謹(jǐn)性。統(tǒng)一協(xié)調(diào)其實在網(wǎng)頁當(dāng)中也比較重要，它可以讓對比強(qiáng)烈或是突兀的一個界面變得比較舒服和柔和，降低用戶心里的不舒服感，拉近用戶之間的距離感和親切感。