形式美法則是人類在創(chuàng)造美的形式和過程中對美的形式規(guī)律的總結概括，世間萬物的美都可以用形式美法則來概括。在平面構成中也有形式美法則：統(tǒng)一和變化，對稱和平衡，節(jié)奏和韻律，對比和調和。前面跟大家有分享了對比、留白在網頁設計當中的運用，今天創(chuàng)新互聯(lián)專業(yè)網站制作我們繼續(xù)來分享網頁當中那么多元素是如何做到統(tǒng)一一致的。
在視覺上的統(tǒng)一可以體現(xiàn)在：圖片，色彩;區(qū)塊;布局;字體，視覺元素。此外，還有一個交互上的統(tǒng)一。
1、圖片統(tǒng)一
圖片統(tǒng)一體現(xiàn)在圖片大小尺寸上的統(tǒng)一，顏色色系上的統(tǒng)一和圖片風格的統(tǒng)一。
不管是京東還是天貓?zhí)詫殻@些商城在網站上的圖片處理就用了這樣的統(tǒng)一原則。不一樣的場景下對圖片的要求也都不一樣。比如京東商城的首頁，每一個區(qū)塊起到一定的導航性作用，在這樣的場景下，需要的圖片都是比較簡潔而不是背景復雜的。下面我做了一個錯誤的示例給大家演示：
左圖是官網的圖片，右圖是一個錯誤示范。顯而易見，左圖的展示性和可讀性都比較強，視覺效果也比較好。右圖之所以覺得不好看是因為圖片大小不一致，圖片的背景顏色也不一致，所以看起來特別不協(xié)調。
好了，現(xiàn)在應該有人會想問，那京東或是天貓?zhí)詫毻ㄟ^搜索后進去的頁面里面的產品配圖不是五顏六色的嗎，那怎么看起來也沒有覺得不協(xié)調。
這些界面的統(tǒng)一一致性體現(xiàn)在產品區(qū)塊的大小尺寸上和整體的樣式上，除了產品圖不一樣，其他的布局樣式、區(qū)塊大小都是一樣的，這恰恰跟首頁相反，首頁各個區(qū)塊大小不一致，所以采用圖片一致來協(xié)同，內頁則是區(qū)塊樣式一致，圖片不一致。但不管哪一種協(xié)調方法，界面都起到了很好的協(xié)調性。
圖片風格上的統(tǒng)一主要體現(xiàn)在網頁當中的圖片選擇上，在寫實風格的網頁中就不適合卡通的圖片，在清爽的界面當中，就不適合勁酷的圖片。
2、色彩統(tǒng)一
色彩統(tǒng)一指的是網頁當中色彩色系運用的統(tǒng)一性，這樣的統(tǒng)一性可以體現(xiàn)在網頁中的整體色系，也可以體現(xiàn)在網頁當中所有區(qū)塊標題的顏色，甚至統(tǒng)一到整個網頁界面當中按鈕的顏色搭配。一般情況下如果不知道網頁定什么色系好，小編給的意見和建議就是跟著你們的logo顏色走。
Obrigado椰子水飲料網站的主色調就是用了綠色與白色相結合，穿插了一些橘黃色，起到活躍畫面的作用，綠色是標志的主色，橘黃色也是標志的一個輔助色，可以看到整個網站簡潔清爽，黃色和綠色并不是等比重出現(xiàn)在網頁當中，就跟標志一樣，黃色的占比少。可以訪問看看，里面一些交互運用也做得比較好。
3、字體統(tǒng)一
都知道界面當中的字體顯示尤為重要，所以字體一定不能讓觀者覺得亂，一定要做好統(tǒng)一。
字體可以在變化中找統(tǒng)一，不管是字體、字號或是顏色上的統(tǒng)一，切勿為了突出字體而做過多效果，反而削弱文字的可讀性。
在一個網站當中，處理字體統(tǒng)一的時候，最好在界面設置的時候統(tǒng)一設置?？梢越柚恍?a href="http://www.rwnh.cn/" target="_blank">建站系統(tǒng)去設置，也可以通過寫css樣式去確定界面的字號，標題和正文的字體大小最好都統(tǒng)一一致，一定要避免首頁正文是14px，進入到子頁面的時候字體大小就變成16px，這樣容易讓觀者產生一定的不舒服感。
除此，字體的選擇上也要統(tǒng)一?，F(xiàn)在字庫上有很多字體，所以在選用字體的時候最好選用跟網頁整體風格相符的字體。
4、區(qū)塊統(tǒng)一
區(qū)塊的統(tǒng)一主要體現(xiàn)在各個區(qū)塊的高度大小、邊框顏色、標題樣式或者是區(qū)塊的整體樣式，當然并非所有統(tǒng)一起來就是好的，要具體情況具體分析。還是上面天貓產品界面，那么多區(qū)塊，樣式邊框都做了統(tǒng)一，看起來整齊而有序。下圖做了錯誤的示范，區(qū)塊的邊框做了不一樣的顏色處理，這樣的區(qū)塊一起出現(xiàn)在界面當中時就會顯得凌亂。
Design3這個網站是小編用蟬知系統(tǒng)做的，用的也是一樣的區(qū)塊處理，看起來會比較簡單明了。除此，瀑布流的區(qū)塊雖然區(qū)塊高度不像產品區(qū)塊一樣做了高度上的統(tǒng)一，但是在區(qū)塊的布局和間隙上做了一定的統(tǒng)一效果，使得界面不亂，這樣的例子有很多網站，比如花瓣的瀑布流設計。
5、布局統(tǒng)一
布局的統(tǒng)一主要是說網頁當中一些布局設置要統(tǒng)一，不要這個導航進去的側邊欄在左邊，下一個導航進去側邊欄在右邊，這樣的界面會讓人摸不著頭腦，用戶需要重新去適應新的界面布局。
頂部導航和Logo的位置是否一致?行間距、文字與圖像的間距是否一致?這些都體現(xiàn)了一個網站在細節(jié)上的考慮。有些網頁在設計上我們可能很難發(fā)現(xiàn)有多好，但是如果一些細節(jié)做得不夠好，卻很容易讓人覺得在使用上不舒服。所以在布局上建議統(tǒng)一一致，設計者可以在寫樣式布局的時候統(tǒng)一設置。相同類型的操作應該有相似的結果反饋，相同的功能界面也應該有類似的布局樣式。
6、視覺元素統(tǒng)一
這里的視覺元素包括網頁當中各種元素的尺寸、大小和顏色。這些元素可以是按鈕、圖標、動畫等，在網站設計時也要考慮不同頁面之間的一致性，盡管功能不同，但是要大體上(可以略有變通)保持不同頁面之間視覺風格的一致。
MINGO這個食品網站從界面的標題顏色、按鈕大小顏色、文字大小什么的都做了協(xié)調統(tǒng)一，界面元素雖然多，但不凌亂，反而一些細節(jié)的統(tǒng)一處理讓界面更活潑。
7、交互統(tǒng)一
交互上的統(tǒng)一也很重要，除了視覺外觀上可以一樣看到的，”交互”和”行為”上也要下一定的功夫。在各個頁面當中的交互性也很重要，且最好保持大致的相同，以免太過凌亂。好比市面上的一些排插上的按鈕設計，有些排插上的按鈕按下去是開啟，有些排插按下去是關閉，這樣的交互設計不同一，會讓使用者摸不著頭腦，使用起來也及其不順手。生活中都如此，在網頁設計當中也是不能忽略交互上的統(tǒng)一，倘若同個界面的同個元素，用戶觸發(fā)這個元素的時候，這個元素給用戶兩種不同的顯示效果，這樣只會讓用戶對這個網站產生距離感。下面的反例
給大家舉個簡單的例子，這是常見的網頁標簽區(qū)塊，正常鼠標移過會顯示主色——橘色，右圖我做了一個錯誤的示例，倘若這個鼠標按鈕移過顯示橘色且按鈕放大，另外一個按鈕鼠標移過顯示藍色或綠色、且這個按鈕被縮小，這樣的交互體驗會有點糟糕，視覺上和交互上的不統(tǒng)一會讓瀏覽者使用起來比較難受，也比較突兀難以接受，所以我們都統(tǒng)一視覺元素的同時，交互也要做統(tǒng)一處理。

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

本文來自創(chuàng)新互聯(lián)品牌網站建設網站設計制作公司-創(chuàng)新互聯(lián)
標簽：網頁設計, 做網站公司,  企業(yè)網頁制作, 企業(yè)網站建設, 專業(yè)網站制作

新聞名稱：統(tǒng)一原則在網頁設計中的運用
轉載來于：http://www.rwnh.cn/news/166160.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供網站設計、自適應網站、品牌網站設計、品牌網站建設、微信小程序、企業(yè)建站

廣告

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