UI設計師應該知道的柵格系統

960網頁柵格系統設計:


柵格系統英文為“grid systems”,維基百科柵格的定義為:柵格設計系統(又稱網格設計系統、標準尺寸系統、程序版面設計、瑞士平面設計風格、國際主義平面設計風格),是一種平面設計的方法與風格。運用固定的格子設計版面布局,其風格工整簡潔,在二戰后大受歡迎,已成為今日出版物設計的主流風格之一。

 

如今,柵格系統也已經被運用到網頁中。它以規則的網格陣列來指導和規范網頁中的版面布局以及信息分布。對于網頁設計來說,柵格系統的使用,不僅可以讓網頁的信息呈現更加美觀易讀,更具可用性。而且,對于前端開發來說,網頁將更加的靈活與規范。

柵格系統的起源:

1692年,新登基的法國國王路易十四感到法國的印刷水平強差人意,因此命令成立一個管理印刷的皇家特別委員會。他們的首要任務是設計出科學的、合理的,重視功能性的新字體。

委員會由數學家尼古拉斯加宗(Nicolas Jaugeon)擔任領導,他們以羅馬體為基礎,采用方格為設計依據,每個字體方格分為64個基本方格單位,每個方格單位再分成36個小格,這樣,一個印刷版面就有2304個小格組成,在這個嚴謹的幾何網格網絡中設計字體的形狀,版面的編排,試驗傳達功能的效能,這是是世界上最早對字體和版面進行科學實驗的活動,也是柵格系統最早的雛形。


為什么960?

1024 x 768 的分辨率下,打開Firefox:

自然狀態下,Firefox窗體的大小約為 974 x 650. 減掉左右兩邊7px的邊框,網頁的實際大小為上圖中的紅色部分,高寬為 960 x 650.

960可以分解為2的6次方乘以3和5, 這使得960可以分割成以下寬度的整數倍:

2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480

共26種(26 = 7 * 2 * 2 – 2, 減去2是去掉1和960自身),我們標記為:N(960) = N(2^6 * 3 * 5) = 26

根據上面的算法,可以得到:

N(360) = N(2^3 * 3^2 * 5) = 22
N(480) = N(2^5 * 3 * 5) = 22
N(720) = N(2^4 * 3^2 * 5) = 28
N(750) = N(2 * 3 * 5^3) = 14
N(800) = N(2^5 * 5^2) = 16
N(960) = N(2^6 * 3 * 5) = 26
N(1000) = N(2^3 * 5^3) = 14
N(1024) = N(2^10) = 9
N(1440) = N(2^6 * 3^2 * 5) = 34
N(1920) = N(2^7 * 3 * 5) = 30

結論:

要使得N(width)最大,width的取值有兩個系列:

A系列: …, 320, 720, 1440, …

B系列: …, 480, 960, 1920, …

N越大,可組合的寬度值就越多。對柵格系統來說,這意味著越靈活!

960柵格化系統:


960柵格化系統是由Nathan Smith創造的,具體來講,就是基于960像素寬度,通過劃分具有規律的分割,來提高網頁開發效率。

960柵格化系統系統(或者說適應型css構架)早期主要用來進行快速原型制作,減少重復單調的工作,但是目前,它在網頁設計開發項目中開始扮演非常重要的角色了。它將為你的設計提供一個堅實的坐標基礎。


最初有兩種變形:12柵格和16柵格。它們互補保證了系統的融通性。后來產生了更多的衍生。上圖展示了16柵格到3柵格的案例。BBC和yahoo的門戶網站就采用了柵格化體系,從而非常好的規范了網站的信息布局和疏密程度。


在960寬度下12欄的刪格設計中,可以有如下的單位寬度可?。?br/>60, 140, 220, 300, 380, 460, 540, 620, 700, 780, 860 和 940.


在960寬度下16欄的刪格設計中,可以有如下的單位寬度可?。?br/>40, 100, 160, 220, 280, 340, 400, 460, 520, 580, 640, 700, 760, 820, 880 和 940.

在網站設計改版部分,如何選擇合適的屏寬(柵格化系統)來為網站做改版呢?

一、分析現有網站用戶的顯示器分布情況
為滿足大多數網站用戶的使用情況,需要收集現有網站用戶用的顯示器分辨率是多少?是以寬屏為主還是以窄屏為主?通過分析網站流量統計當中的數據,我們不難獲得用戶所能接受的最大屏寬數據,從而為下一步選擇合適的柵格化系統提供依據;

二、結合改版風格確定屏寬設計
不同的柵格化系統,具有不同的網站風格效果。常見的三種形式如下:

傳統型柵格化風格

以960到980像素為屏寬的網站設計,是網頁設計師設計網頁的標準寬度,可應用于絕大多數的網站建設項目。這是因為,960到980像素是最適合人眼視覺接受范圍的寬度,且和傳統的1024×768像素的顯示器分辨率相匹配,和最大限度的發揮其長處。

精細型柵格化風格

以900到940像素為屏寬的網站設計,屬于細膩、精致的風格展示,多用于界面設計工作室,品牌策劃公司。精細型屏寬設計,如同瘦身美女一樣,處處透露出其流線美,沒有任何一絲多余的‘贅肉’;

寬屏型柵格化風格

980像素以上的頁面設計,多應用在綜合門戶、網上商城等內容豐富的站點設計當中??砥劣齏篤?、豐富的視覺沖擊力,給人無限的遐想空間,因此也可用于個性藝術網站當中,例如婚紗攝影網站設計,可通過大幅的精致照片,烘托品質感受。但是,使用寬屏設計需要非常謹慎,因為使用寬屏設計的前提是舍棄一部分顯示器分辨率不高的用戶,畢竟,使用1440×900像素及以上分辨率的用戶目前還僅占少數。

因此,選擇何種寬度的柵格化網頁設計系統,需要結合現有用戶情況及網站改版的風格定位。企業還可借鑒網站制作公司的專業建議來決定最終的選擇。當然,不論使用哪種柵格化系統,僅僅是為了輔助網頁設計師進行更好的創造,最終的網站作品取決于設計師對于整體定位的把握和素材的運用。

 


使用網格系統的好處

好處很多——設計、開發、管理網站都用得到。
網格系統的好處之一是,允許按比例設計,可以組織不同元素之間的平衡感。網格系統一般都很靈活,這樣就可以在需要時自由調整。


PS中參考線

使用網格系統,讓你的設計具有正式感和規范感,還具有一種結構分明的設計感。這讓你設計起來更輕松,對于開發者來說,同樣如此。

網格系統的缺點

有好就有壞,我們來談談缺點。

首先,很多人,尤其是對于新手來說——網格系統會阻礙他們的發揮創造。你會感覺你的靈感被束縛在這些條條框框里面了。如果出現這種狀況,我建議你從網格系統中跳出來,用自己的創意去設計,按照自己的經驗來排布元素,然后再切出網格系統,想出一個二者結合的兩全其美的辦法,稍做調整,如果網格系統和你的原創設計出入過大,不能有效協調,那么建議換一個網格系統,或者自己設計一個。

其次,網格系統用起來比較困難,有一定的學習成本,需要有一定的數學基礎,你得懂比例,會計算。對于那些數學不好的人來說,網格系統真的是太復雜了。但是我認為,剛開始雖然比較難以上手,但是習慣之后,你會得心應手,設計也將會更加出彩。

在設計中應用網格系統:

幾條小建議:
在設計中使用重疊網格(網格線要可見):

如果你能喜歡使用CSS網格框架,那就再好不過了,無論是PS還是其他什么程序,將網格設置為疊加,然后鎖定。這樣設計的時候心中就有數了。

設置參考線:

有了重疊網格之后,設置分欄參考線。這樣就能夠更清楚的劃分邊界。

嘗試一下有限制的設計

最多16欄,6欄布局最明智。

運動員練習時都綁著沙袋還記得嗎,有限制的練習,之后再脫去舒服,跑的更快。
因此,可以試著自我約束一下,練習在限制的條件下進行布局,這樣你就能更專注于重點,進步更大。

注意空間問題.

每一欄之間的寬度越大,留給元素的空間越富裕。然而不要忘記垂直方向上的空間布局。是緊密還是充滿留白?這需要按情況而定。

結論:

現在你對網格系統已經了解了大概。
可以嘗試一下在設計前多做規劃,這樣網格系統用起來更得心應手,布局更流暢,多想想結構,多想想怎樣分欄的布局方式來規劃內容。

網格系統是一種好的習慣,也是一種格式化的設計工具。有了它,你能更專注于內容呈遞,更專注于強調重點。


來源:學UI網

上一篇: Memorial Day臨摹【做作業】

下一篇: iOS與Android用戶界面(UI)設計規范

分享到: 更多
彩票九365 网上彩票代理怎么赚钱 8码怎么倍投 新疆时时四星开奖结果 时时彩官网 ag延迟漏洞 重庆时时彩个位经验 时时彩官方开奖直播 球棎足球比分007 快速时时官网 双色球开奖软件下载安装 北京pk赛车139开奖历史 极速赛车为什么老是输 稳赚的足球竞彩分类 11选5定胆规律 重庆时时计划免费稳定版