設計的骨架:視覺解剖
十字準星式:瞄準期待
人的視線總是集中在頁面中心,因此將焦點設置在中心位置最迎合視線的做法。例如將網站的簡介放置於頁面中心,為了讓頁面更豐富,可以增加大圖的背景加強表達的維度。十字線條經過的地方即是視線引導的路徑,因此需要在線條的位置放上重要的元素。中心的位置其實也是一個期待點,瞄準視覺期待點,對設計師來說最大的便利就是省力。
無論網頁的導航等其他元素放置於頁面的哪個位置(盡量圍繞線條經過的方向),這兩個頁面都是屬於十字準星型的骨架結構,焦點始終位於正中,導航無論居於哪裡,都屬於次要的視覺地位。
正中的地位帶來絕對的穩定感,它也是設計師最容易做到的表達。這種骨架結構,相對比較穩定,因此在需要在細節上營造一些驚喜,來打破這種相對靜止的版式。
垂直雙欄式:雙面一體
將一個網頁分成兩欄並不意味著均分,它們是按照垂直方向形成了兩列的不同佈局。常見的的確是平均分配的表現情況,網頁的焦點內容可以選擇任一側,另一側作為補充。簡稱雙面一體是因為,你不能製造兩個焦點,分兩個部分,它們也應該共同營造一個焦點。
雙欄式的頁面設計表現比較靈活,通常會有一偏倚輕重這,樣就能確立好視覺焦點,形成對比,製造情景衝突。視覺重點在某一側,利用背景色的不同加強視覺重量的對比。
兩列縮略圖垂直排列,讓版式活躍起來的方法就是增加某一處高度的不同,強調一點細微的變化。
網格式:有序與無序
這種骨架樣式通常是基於某一個網格而搭建內容,網格的表現形式多樣,每個網格都用以展示不同的內容,可以是比較規範的網格,也可以是錯落有致……雖說每個網頁都可以基於網格而設計,但是網頁的表現未必要嚴格遵循網格本身。
規範的網格通常比較傾向古典懷舊,它傳遞出一種相對嚴格的秩序之美。
相對有些錯落變換的網格,更具現代風格,規則與反規則的交錯。
動感傾斜式:墜落的騙局
傾斜的線條容易形成動感的張力,利用這一點所形成的視覺骨架就能很好表現與“運動”“衝擊力”等動感較強的內容頁面。
斜向的頁面所製造的墜落式的衝擊力應該和配圖樣式相關,因此對慎選斜向的配圖非常重要,尤其是當大部分圖片其實都只適合正向方向的展示。
這些所謂的骨架原理在於隱藏於表層下方的最基地的視覺結構,事實上,其他的元素通常並不嚴格局限於某個區域,這就讓頂層的枝葉更加豐富。在我們著手進行頁面設計前,確定好一個視覺骨架的方向至關重要,這讓我們並不依賴於運氣去“撞”到某個好的表達,並且你也不需要單獨設定某個固定的骨架,還可以兩兩並用,一個網站有多個頁面,多個頁面都可以擁有不同的佈局。同一個頁面,也會因為內容的不同採用不同的視覺結構表達。<下面這一個網頁裡的多個頁面,每個頁面都根據不同的焦點表現形態選擇了不同的佈局,骨骼總是為內容而服務的。
後記
始終要承認的是,內容應該是高於形式的,設計時的任何視覺骨架都是為內容而服務的,因此內容可以以任何外在的形式來表現。說了半天,儘管我們都在講“顏值”,其實還是那句“飽讀詩書氣自華”。
原文地址:ifeiwu