如何在網站設計中使用網格系統?

發布時間:2020-01-26 09:38:00

如上所述,任何網格系統都可以通過改變a和I的值來派生。不同的人有不同的習慣。有的像12柱網,有的像16柱網,有的像24柱網等等。關鍵不在于有多少種類型的網格,而在于實際使用哪種類型的網格!

如何在網站設計中使用網格系統?

在網格系統中,設計人員根據自己的需要進行不同的布局或劃分塊,其依據是上面相應的表。這樣,網格系統的應用就開始了。我們可以看到使用網格系統的web設計是非常有組織和舒適的。最重要的是,它為整個網站的頁面結構定義了一個標準。對于視覺設計師來說,他們不必擔心為每個頁面設計寬度或高度的網站。對于前端開發工程師來說,頁面的布局將完全標準化和可重用,這將大大節省開發成本。對于內容編輯或廣告銷售,所有廣告都是常規和通用的。他們不再需要制作一組不同大小的廣告地圖

當然,只要你愿意,我們可以派生任何網格系統,只要你改變a和I的值,這是基于網站的實際情況。

如上所述,任何網格系統都可以通過改變a和I的值來派生。不同的人有不同的習慣。有的像12柱網,有的像16柱網,有的像24柱網等等。關鍵不在于有多少種類型的網格,而在于實際使用哪種類型的網格!

我個人更喜歡12列網格。每列的寬度取決于應用最終輸出的位置,例如打印或網頁,以及用于分段的引用的總寬度。如果我設計的東西有很多,很多小元素,我會切換到24列網格。塊之間的間隔根據內容進行調整。如果我創建瀑布流的布局,我可能只留下1-2px的間隔,這確實需要靈活。

我喜歡12或24列網格,因為我可以從中派生出許多不同的布局方案。根據您的個人喜好,可以按24列中的一列或12列中的兩列的寬度排列內容,也可以使用八列中的三列來放置元素,甚至六列中的四列。您知道,雖然網格系統是一個限制,但它在應用程序中也非常靈活,這使您的設計具有高度的可擴展性。通過匹配不同的組合,你可以制作完全不同的字體。

一般來說,網格只是由水平線和垂直線分隔的特定空間。似乎很難攜帶任何設計元素,所以大多數設計師都會根據路徑來描述幾何特征。我們已經習慣了在畫廊、博客和新聞相關網站看到干凈的網格,但事實上,我們只需要熟練地處理這些規章制度,就可以吸引用戶對內容本身的關注,增加訪問者的粘性。是滴滴,不是世界末日!這也不奇怪,因為網格具有以下特性:

當組合各種元素時,它們是自由和獨立的,模塊可以呼吸接下來,讓我們來看看下面的例子,在這個例子中,您將看到如何使用網格來制作有吸引力的web設計。該網站是一個簡單的三列布局,這給了圖像足夠的空間,并把文本分成一個小板塊。這個網站漂亮地使用了一個窄的柱網來提供盡可能多的信息。這是一個將視覺內容放在垂直列中并適當刪除行的網站,以便更好地顯示大型照片。

網格是一種不可或缺的設計工具,它將混沌過程簡化為有序的過程,這種能力在網站設計中非常重要。在設計中使用網格可以使設計工作更有邏輯性,網格系統可以更好地組織屏幕中的信息,使重要元素更加清晰,使設計稿具有更好的結構,帶來更好的體驗。設計師的工作是盡可能創造性地傳達信息。網格系統是實現信息組織化的途徑之一。但我們不必完全按照網格列進行設計。我們還需要及時打破網格系統,這也是創造視覺興趣點的好方法!


聯系我們,談您的需求

立即咨詢
广东快乐十分计划app 贵州捉鸡麻将规则 股票数据分析 新城控股股票今日股 斗牛棋牌玩法说明 股票价格一下子暴跌 黑黑桃棋牌官方下载中心 王中王精选四肖八码爆特 精准六肖期期中无错版 在线查看股票行情 送10元以上的彩金?