18665606093
平面構成有形式美的規律：統一與變化，對稱與平衡，節奏與韻律，對比與和諧。和大家分享了對比和留白在廣州網頁設計中的應用。今天，我們繼續分享網頁中這么多元素是如何統一和一致的。
1.統一圖片
畫面的統一就是畫面大小、色彩、風格的統一。
無論是JD.COM還是天貓淘寶，這些商場都是用這樣一個統一的原理在自己的網站上進行圖像處理。不同的場景對畫面的要求不同。比如在JD.COM商城首頁，每個區塊都有一定的導航作用。在這樣的場景中，需要的圖片是簡單的，而不是背景復雜的。下面我舉一個錯誤的例子給你看：
左圖為官網圖片，右圖為錯誤演示。顯然，左圖顯示和可讀性強，視覺效果好。右邊的圖片之所以不好看，是因為圖片大小不一致，背景顏色不一致，所以看起來特別不協調。
好了，現在可能有人要問，JD.COM或者天貓淘寶搜索后進入的頁面上的產品圖片是不是很豐富多彩，看起來并不覺得不協調。
這些界面的統一性和一致性體現在產品塊的大小和整體風格上。除了產品圖不同，其他布局樣式和塊大小都是一樣的，和首頁正好相反。首頁每個塊大小不一致，所以圖片一致協調，內頁塊樣式一致，圖片不一致。但是無論哪種協調方式，界面都起到了很好的協調作用。
畫面風格的統一主要體現在網頁中畫面的選擇上，不適合寫實風格網頁中的漫畫畫面，也不適合刷新界面中的酷炫畫面。
2.統一的顏色
顏色統一是指網頁中顏色體系應用的統一，可以體現在網頁中整體的顏色體系，網頁中所有塊標題的顏色，甚至整個網頁界面中按鈕的配色。一般情況下，如果你不知道在網頁上設置什么顏色系統，你的建議和意見就是跟著你的logo顏色走。
3.統一字體
大家都知道界面中的字體顯示特別重要，所以字體一定不能讓查看者感到混亂，一定要統一。
字體可以在變化中統一，無論是字體、大小還是顏色的統一。不要做太多突出字體的效果，反而削弱文字的可讀性。
在一個網站中，在處理字體統一時，最好在設置界面時統一設置。可以借助一些網站建設系統來設置，也可以通過編寫css樣式來確定界面的字體大小。標題和文本的字體大小應該一致。需要避免第一頁的字體大小為14px，進入子頁面時字體大小變成16px，容易讓查看者感覺不舒服。另外，字體的選擇要統一。現在字體庫的字體很多，所以在選擇字體的時候，最好選擇與網頁整體風格一致的字體。
4.塊統一
街區的統一主要體現在街區的高度、邊框顏色、標題風格或者整體風格上。當然，不是所有的統一都是好的，但需要具體分析。還是上面的天貓產品界面，這么多塊，風格邊框統一，看起來整潔有序。下圖顯示了一個錯誤。塊的邊框用不同的顏色處理，使得它們在界面中一起出現時顯得凌亂。
5.統一布局
布局的統一主要是網頁中的一些布局設置要統一，這個導航條目的側邊欄不要在左邊，下一個導航條目的側邊欄要在右邊。這樣的界面會讓人感到迷茫，用戶需要重新適應新的界面布局。
頂部導航和Logo的位置是否一致？行距和文字與圖像的間距是否一致？所有這些都反映了網站對細節的考慮。我們可能很難發現有些網頁在設計上有多好，但如果有些細節做得不好，很容易讓人在使用中感到不舒服。所以建議布局統一，設計師在寫風格布局的時候可以統一設置。同一類型的操作應該有相似的結果反饋，同一功能界面也應該有相似的布局風格。
6.統一的視覺元素
這里的視覺元素包括網頁中各種元素的大小、大小和顏色。這些元素可以是按鈕、圖標、動畫等。在網站設計中，也要考慮不同頁面之間的一致性。雖然功能不同，但我們一般要(略有靈活性)保持不同頁面之間視覺風格的一致性。
7.互動與統一
互動的統一性也很重要。除了視覺表象之外，還要在“互動”和“行為”上做一些努力。頁面之間的交互性也很重要，最好保持大致相同，以免太亂。比如市面上有的按鈕是設計出來的，有的按鈕按下就開，有的按鈕按下就關。這樣的交互設計不一樣，會讓用戶感到困惑，使用起來不方便。生活中也是如此，交互的統一性在網頁設計中是不可忽視的。如果同一個界面的同一個元素被用戶觸發，這個元素會給用戶兩種不同的顯示效果，只會讓用戶感覺到和這個網站的距離。
添加企業微信
18665606093
