來源:本站日期:2017-6-16
現如今,柵格已經幾乎是所有網頁設計的基礎。這些隱形的線條創造出空間的節奏感和視覺的流暢感,他們是讓網頁變得更加和諧的基礎。
但是,柵格存在的目的是幫你創造好的設計,當你開始逐漸適應柵格的存在,千萬不要被它束縛住。你并沒有必...
想要打破柵格,那么你首先得深入理解柵格系統。無論你使用的是哪種樣式的柵格,它都是你的網頁設計過程中的“基礎設施”,它幫你確定元素要怎么放置,幫你確保不同的控件在頁面上堆疊而不會顯得突兀不協調,有助于保持頁面的組織性。
其實不同領域的設計師一直都在使用柵格。看看報紙和圖書吧,在網頁設計師開始使用柵格之前,他們已經將這套系統玩的爐火純青了。
柵格能做的事情有很多:
既然柵格有這么多的優勢,那么為何還要打破柵格呢?
這不難理解,柵格營造出一致和協調的觀感,打破柵格的元素 自然就顯得更加“刺眼”了,這無疑是一種強調了。想要讓這個元素打破柵格,又能與其他元素形成搭配,有許多講究。將不同的元素置于不同的圖層,這樣可以確保部分元素超出于柵格,而其他的元素保持一致。
由于Material Design 的流行,現如今許多網頁已經開始使用圖層來管理網頁中不同的元素。不同的元素在不同的圖層中,以不同的規則運動,相互交疊又互相區分,更為高效地運作。
在 這個網頁中,讓線條和文本同圖片產生了交疊,借助錯位的排版營造出一種失衡的效果。你會在整個設計中看到柵格的痕跡,而這個時候的視覺失衡的部分,就顯得相當顯眼了
想要強調一個元素,留白總是最有用的手段。只有在正確的地方創造留白,才能讓其環繞下的元素顯得突出。
我們常常會認為,在移動端布局上,單列或者單行的布局是比較合理,但是多行列的布局其實也是可行的,重要的是創造出整體性更強的視覺設計。
另一個網站,當設計師使用留白來打破傳統的布局之時,讓文字左對齊橫跨不同的區塊,加上居中的圖標。這樣的設計令這些打破柵格的元素更加醒目,引起用戶的注意力。留白的使用,為這些元素創造了“被注意”的機會。