1. <dd id="nlasp"></dd>

        <div id="nlasp"><tr id="nlasp"></tr></div>
        1. <em id="nlasp"></em>
          1. 當前位置: 首頁 > 設計教程 > 平面設計理論 > 網頁設計中多元素是如何做到統一一致

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

            形式美法則是人類在創造美的形式和過程中對美的形式規律的總結概括,世間萬物的美都可以用形式美法則來概括。在平面構成中也有形式美法則:統一和變化,對稱和平衡,節奏和韻律,對比和調和。前面跟大家有分享了對比、留白在網頁當中的運用,今天我們繼續來分享網頁當中那么多元素是如何做到統一一致的。

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

            1、圖片統一

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

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

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

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

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

            7d5658d21768a801219c77449eda.jpg

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

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

            2、色彩統一

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

            560d58d2177aa801219c77b3da73.jpg

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

            分享到: 
            平面設計中必須遵循的20個設計原則
            2017超流行的LOGO六大設計趨勢方法

            熱門推薦

            体彩11选5开奖查询