網頁設計中多元素是如何做到統一

來源:文萃谷 9.05K

形式美法則是人類在創造美的形式和過程中對美的形式規律的總結概括,世間萬物的美都可以用形式美法則來概括。在平面構成中也有形式美法則:統一和變化,對稱和平衡,節奏和韻律,對比和調和。前面跟大家有分享了對比、留白在網頁當中的運用,今天我們繼續來分享網頁當中那麼多元素是如何做到統一一致的。就跟隨本站小編一起去了解下吧,想了解更多相關信息請持續關注我們應屆畢業生考試網!

網頁設計中多元素是如何做到統一

在視覺上的統一可以體現在:圖片,色彩;區塊;佈局;字體,視覺元素。此外,還有一個交互上的統一。

  1、圖片統一

圖片統一體現在圖片大小尺寸上的統一,顏色色系上的統一和圖片風格的統一。

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

左圖是官方的網站的圖片,右圖是一個錯誤示範。顯而易見,左圖的展示性和可讀性都比較強,視覺效果也比較好。右圖之所以覺得不好看是因為圖片大小不一致,圖片的背景顏色也不一致,所以看起來特別不協調。

好了,現在應該有人會想問,那京東或是天貓淘寶通過搜索後進去的頁面裏面的產品配圖不是五顏六色的嗎,那怎麼看起來也沒有覺得不協調。

這些界面的統一一致性體現在產品區塊的大小尺寸上和整體的樣式上,除了產品圖不一樣,其他的佈局樣式、區塊大小都是一樣的,這恰恰跟首頁相反,首頁各個區塊大小不一致,所以採用圖片一致來協同,內頁則是區塊樣式一致,圖片不一致。但不管哪一種協調方法,界面都起到了很好的協調性。

圖片風格上的統一主要體現在網頁當中的圖片選擇上,在寫實風格的網頁中就不適合卡通的圖片,在清爽的界面當中,就不適合勁酷的圖片。

  2、色彩統一

色彩統一指的是網頁當中色彩色系運用的.統一性,這樣的統一性可以體現在網頁中的整體色系,也可以體現在網頁當中所有區塊標題的顏色,甚至統一到整個網頁界面當中按鈕的顏色搭配。一般情況下如果不知道網頁定什麼色系好,小編給的意見和建議就是跟着你們的logo顏色走。

Obrigado椰子水飲料網站的主色調就是用了綠色與白色相結合,穿插了一些橘黃色,起到活躍畫面的作用,綠色是標誌的主色,橘黃色也是標誌的一個輔助色,可以看到整個網站簡潔清爽,黃色和綠色並不是等比重出現在網頁當中,就跟標誌一樣,黃色的佔比少。可以訪問看看,裏面一些交互運用也做得比較好。

熱門標籤