淺談統一原則在網(wǎng)頁(yè)設計當中的運用發(fā)布者：本站     時(shí)間：2021-12-29 09:12:19

形式美法則是人類(lèi)在創(chuàng )造美的形式和過(guò)程中對美的形式規律的總結概括，世間萬(wàn)物的美都可以用形式美法則來(lái)概括。在平面構成中也有形式美法則：統一和變化，對稱(chēng)和平衡，節奏和韻律，對比和調和。前面跟大家有分享了對比、留白在網(wǎng)頁(yè)當中的運用，今天我們繼續來(lái)分享網(wǎng)頁(yè)當中那么多元素是如何做到統一一致的。

在視覺(jué)上的統一可以體現在：圖片，色彩;區塊;布局;字體，視覺(jué)元素。此外，還有一個(gè)交互上的統一。

1、圖片統一

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

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

淺談統一原則在網(wǎng)頁(yè)<a href=/design/ target=_blank class=infotextkey>設計</a>當中的運用,PS教程,

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

好了，現在應該有人會(huì )想問(wèn)，那京東或是天貓淘寶通過(guò)搜索后進(jìn)去的頁(yè)面里面的產(chǎn)品配圖不是五顏六色的嗎，那怎么看起來(lái)也沒(méi)有覺(jué)得不協(xié)調。

淺談統一原則在<a href=/photoshop/web/ target=_blank class=infotextkey>網(wǎng)頁(yè)設計</a>當中的運用,PS教程,

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

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

2、色彩統一

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

淺談統一原則在網(wǎng)頁(yè)設計當中的運用,PS教程,

Obrigado椰子水飲料網(wǎng)站的主色調就是用了綠色與白色相結合，穿插了一些橘黃色，起到活躍畫(huà)面的作用，綠色是標志的主色，橘黃色也是標志的一個(gè)輔助色，可以看到整個(gè)網(wǎng)站簡(jiǎn)潔清爽，黃色和綠色并不是等比重出現在網(wǎng)頁(yè)當中，就跟標志一樣，黃色的占比少?？梢栽L(fǎng)問(wèn)看看，里面一些交互運用也做得比較好。

3、字體統一

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

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

淺談統一原則在網(wǎng)頁(yè)設計當中的運用,PS教程,

在一個(gè)網(wǎng)站當中，處理字體統一的時(shí)候，最好在界面設置的時(shí)候統一設置?？梢越柚恍┙ㄕ鞠到y去設置，也可以通過(guò)寫(xiě)css樣式去確定界面的字號，標題和正文的字體大小最好都統一一致，一定要避免首頁(yè)正文是14px，進(jìn)入到子頁(yè)面的時(shí)候字體大小就變成16px，這樣容易讓觀(guān)者產(chǎn)生一定的不舒服感。

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

4、區塊統一

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

淺談統一原則在網(wǎng)頁(yè)設計當中的運用,PS教程,

淺談統一原則在網(wǎng)頁(yè)設計當中的運用,PS教程,

Design3這個(gè)網(wǎng)站是小編用蟬知系統做的，用的也是一樣的區塊處理，看起來(lái)會(huì )比較簡(jiǎn)單明了。除此，瀑布流的區塊雖然區塊高度不像產(chǎn)品區塊一樣做了高度上的統一，但是在區塊的布局和間隙上做了一定的統一效果，使得界面不亂，這樣的例子有很多網(wǎng)站，比如花瓣的瀑布流設計。

5、布局統一

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

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

6、視覺(jué)元素統一

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

淺談統一原則在網(wǎng)頁(yè)設計當中的運用,PS教程,

MINGO這個(gè)食品網(wǎng)站從界面的標題顏色、按鈕大小顏色、文字大小什么的都做了協(xié)調統一，界面元素雖然多，但不凌亂，反而一些細節的統一處理讓界面更活潑。

7、交互統一

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

淺談統一原則在網(wǎng)頁(yè)設計當中的運用,PS教程,

給大家舉個(gè)簡(jiǎn)單的例子，這是常見(jiàn)的網(wǎng)頁(yè)標簽區塊，正常鼠標移過(guò)會(huì )顯示主色——橘色，右圖我做了一個(gè)錯誤的示例，倘若這個(gè)鼠標按鈕移過(guò)顯示橘色且按鈕放大，另外一個(gè)按鈕鼠標移過(guò)顯示藍色或綠色、且這個(gè)按鈕被縮小，這樣的交互體驗會(huì )有點(diǎn)糟糕，視覺(jué)上和交互上的不統一會(huì )讓瀏覽者使用起來(lái)比較難受，也比較突兀難以接受，所以我們都統一視覺(jué)元素的同時(shí)，交互也要做統一處理。

在視覺(jué)、交互方式和操作結果上保持一致。減少用戶(hù)使用成本，也能讓用戶(hù)感到親切感，體會(huì )到產(chǎn)品設計上的嚴謹性。統一協(xié)調其實(shí)在網(wǎng)頁(yè)當中也比較重要，它可以讓對比強烈或是突兀的一個(gè)界面變得比較舒服和柔和，降低用戶(hù)心里的不舒服感，拉近用戶(hù)之間的距離感和親切感。好啦，本期的統一原則的分享就到此結束啦，如果大家還有其他想分享或是想知道的內容可以告訴小編，我們可以一起學(xué)習與分享。