形式美規律是形式美規律在創造美的形式和過程中的總結。世界的一切美都可以用形式美的規律來概括。
平面構圖也有形式美的規律:統一與變化、對稱與平衡、節奏與韻律、對比與和諧。
我們在網頁上分享了比較和空白應用程序。今天我們繼續分享網頁中這麼多元素是如何統一和一致的。
視覺的統一性可以體現在:畫面、色彩;塊;佈局;字體,視覺元素。此外,還有一個互動的統一體。
一
畫面統一
畫面的統一體現在畫面大小的統一、色彩系統的統一和畫面風格的統一。
無論是京東還是天猫淘寶,這些商場在網站的圖像處理上都採用了這樣的統一原則。不同的場景需要不同的圖片。比如京東商城的首頁,每個區塊都起到一定的導航作用。在這樣的場景中,所需的圖片相對簡單,而不是複雜的背景。在這裡,我舉了一個錯誤的例子來告訴你:
左圖是官方網站的圖片,右圖是錯誤的演示。顯然,左邊的影像更具顯示性和可讀性,視覺效果更好。正確的圖片之所以不好,是因為圖片的大小不一致,而且圖片的背景色也不一致,所以看起來特別不一致。
好吧,現在應該有人想問一下,京東或者天猫淘寶蒐索後進入的頁面中的產品匹配圖不是五顏六色的,所以看起來並不衝突。
這些介面的統一體現在產品塊的大小和整體風格上。除產品圖紙不同外,其他佈局樣式和塊尺寸相同。這與第一頁完全相反。首頁各塊大小不一致,所以圖片一致配合,內頁塊樣式一致,圖片不一致。但是,無論採用哪種協調管道,介面都具有良好的協調性。
圖片風格的統一主要體現在網頁圖片的選擇上。在網頁的寫實風格中,不適合卡通圖片。在清爽的介面上,不適合炫酷的圖片。
二
色彩統一
色彩統一是指網頁中色彩系統的統一。這種統一體現在網頁的整體色彩體系、網頁中所有塊標題的顏色,甚至整個頁面介面中按鈕的顏色搭配上。一般來說,如果你不知道網頁是什麼顏色設定的,你的意見和建議是按照你的標誌顏色。
obrigado椰子水飲料網站的主色調是將綠色和白色結合起來,並插入一些橙色,起到了積極的作用。綠色是標誌的主色,橙色也是標誌的輔助色。你可以看到整個網站簡潔清新,黃色和綠色的比例並不等於網頁的比例,就像logo一樣,黃色的比例也比較少。您可以訪問並看到一些互動也更好。
三
統一字體
大家都知道字體在介面中的顯示尤為重要,所以字體一定不能讓觀看者感到迷惑,一定要做好統一。
字體在變化中可以發現統一性,無論是字體、字型大小還是顏色的統一,都不要做過多的效果來突出字體,反而削弱了文字的可讀性。
在網站中,處理字體統一時,最好在設定時設定介面。您可以用一些建站系統來設定它,也可以通過編寫CSS樣式來確定介面的字體大小。標題和正文的字體大小應統一。有必要避免在頭版正文中出現14px。當進入子頁面時,字體大小將變為16px,這讓瀏覽者感到不舒服。
另外,字體的選擇要統一。現在字體庫中有很多字體,所以在選擇字體時最好選擇與網頁整體風格相匹配的字體。
四
區塊統一
區塊的統一性主要體現在每個區塊的高度大小、邊框顏色、標題樣式或整體樣式上。當然,並不是所有的都是統一的或好的。具體情況要具體分析。還是天猫上面的產品介面,這麼多的街區,風格邊界都統一了,看上去整潔有序。下圖顯示了錯誤,並顯示了塊的邊框
