/// 01 ///
網格使用
簡單的確保您網頁是否平衡的方法是使用網格系統。曾經在紙上的網格近幾年也都轉變成了數字介質的網格概念,以便應用。
透過網格來確定頁面上不同元素的位置,能使您的網頁之間連線起來。這可以幫助您提高頁面佈局質量,從而讓多使用者看到一個清晰的結構,這很重要,因為當您所有頁面的元素都相互連通,多使用者會覺得整體效果更舒適,讓他們更易檢視頁面內容。
/// 02 ///
選擇單一焦點
其中有效的方式之一是用一顆平常心來選擇您佈局的單一焦點。我們看到的一個很好的例子就是使用大圖片作為網頁上大的單一焦點。
強烈的視覺效果可以起到引導作用,也可以在頁面中提供結構優勢,讓周圍內容得到多使用者關注。如果您有多個視覺元素,可以採用格式塔理論的就近原則, 將它們組合在一起來得到最佳化。
/// 03 ///
使用三分法
使用三分法或者黃金比例。簡單地說,三分法規則就是將您的頁面垂直和水平換分成為三份,在該網格線相交的點則是天然焦點。透過調整您的關鍵要素到這四點,會讓您的頁面更賞心悅目。
黃金比例
黃金比例在網頁中的應用——twitter
黃金比例在網頁中的應用——habitat
就其本身而言,三分法不會神奇為您平衡佈局,但透過延長原理來從這個天然焦點發散,可以幫助您平衡佈局。
/// 04 ///
使用空白
新手設計師在做一個頁面時,填充頁面上每一個空隙,充分利用每一個間隙填內容到滿。而有經驗的設計師會知道,有時候將元素適當捨棄會更好。
在列印中,利用空白的常見的方式是透過擴大頁邊距來實現。而在網頁中,提供大量的周圍的空間可以幫助佈局感平穩和協調,當您有一個清晰的結構,透過網格與內容結合起來,使用負形效果會更好。但如果引入不恰當,空白可能會使頁面與元素脫節。
/// 05 ///
重複設計元素
可重複的組合元素來建立連線與協調頁面。這個方式透過重組圖案或進行設計來使整個佈局協調,也可以讓多使用者感到即使領域不同,但相互也有聯絡,是一個整體。
重複給出了一個網站,強化了鮮明的地方感一致的視覺形象,這使得網站更令人難忘。透過一致的方法來佈局和導航可以使多使用者能很快適應的設計,並在該網站的網頁能夠自信地預測資訊和導航控制元件的位置。
/// 06 ///
使用等級制
建立結構和層次清晰感是一個關鍵的方法來調整佈局。既然談到了結構,您要知道在頁面中傳達不同內容的重要層級是非常重要的。例如,一個標題,應該比段落的內容更直觀更重要。
透過看不同的元素表現方式就知道您的網頁中的重要層級關係,從而有了結構等級制。
/// 07 ///
元素大小與比例
合理調整元素大小可以實現佈局的視覺平衡。透過使一些元素大於其他,來形成層次感。這有助於幫您創造一個舒適的佈局,因為多使用者會先看佈局中較大的元素,然後繼續閱讀較小的元素。
這一原則也適用於增加對比度,透過頁面上的元素對比,讓多使用者眼聚焦在重點上。在結構上和佈局上都有了些最佳化。
大小對比做得好的話,可以使得元素從整體佈局中脫穎而出。
版式是設計師必備技能之一,怎樣安排模組內容都是需要一步步思考再完成的。瀏覽網頁是我們的日常,在開啟網頁時可以多收藏一些別人的版式,以便做一些參考。