柵格規(guī)范制作
2019-04-03 來源：良無限-UED
隨著業(yè)務(wù)的不斷推進，現(xiàn)在我們的后臺項目越來越多。但是由于前端和后臺之間聯(lián)調(diào)復(fù)雜導(dǎo)致項目經(jīng)常會推遲。為了能優(yōu)化項目流程，提高開發(fā)效率。交互和前端決定一起做一套DPL，做一系列的規(guī)范出來。這樣可以減少交互，前端，后臺互相的溝通成本，同時能夠沉淀下這段時間大家的收獲。
交互參與的DPL中我們主要是做柵格體系，控件體系，視覺體系，下面我來和大家分享下DPL中的柵格體系設(shè)計
柵格
研究網(wǎng)頁柵格系統(tǒng)前，來看一組數(shù)據(jù)：
上面列舉的都是Alexa全球排名前100的站點，它們的首頁寬度為950px/960px. 除了微軟的Live Search, 這些站點有個共同特點：頁面結(jié)構(gòu)較復(fù)雜，都可以認為是門戶型網(wǎng)站。
再來看看Google, YouTube, Facebook, Flickr!, eBay等知名站點，它們的首頁寬度沒什么固定規(guī)律，共同的特點是：功能專一，頁面結(jié)構(gòu)相對簡單。
根據(jù)上面的簡單分析可以認為：當搭建頁面結(jié)構(gòu)復(fù)雜的門戶型網(wǎng)站時，開發(fā)工程師們不約而同地都選擇將頁面寬度定為950px/960px。
這是一件很有趣的事情，為什么要選擇這個寬度呢？這個寬度值究竟有什么魔力？
上面的"自然"出現(xiàn)，細究自然是不讓人信服的。設(shè)計者們在沒有喝醉酒的情況下選擇了960，而不是其它什么1000之類的整數(shù)，自然另有奧妙。
那么如何設(shè)計一個柵格系統(tǒng)？接下來我們將通過實例，詳細的介紹一下網(wǎng)頁柵格系統(tǒng)的原理與應(yīng)用：
在網(wǎng)頁設(shè)計中，我們把寬度為"W"的頁面分割成n個網(wǎng)格單元"a"，每個單元與單元之間的間隙設(shè)為"i",此時我們把"a+i"定義"A"。他們之間的關(guān)系如下：
W =（a×n）+（n-1）i
由于a+i=A，
可得：(A×n) – i = W
注：960是加上最后一個i（i=10）的長度，950是沒加上i的長度
為了減少1.0版本的改動，我們保持了i=10xp
我們的N是多少，A是多少？W是多少？
n的特點：是3倍數(shù)，我們需要有一行三列的情況，同時不希望有重要信息在最后面（我們的系統(tǒng)在內(nèi)頁才有柵格，所以1280下能展示全，但是1024不一定能全部展示），所以最好是整個柵格能平均分成3列
A的特點：是5的倍數(shù)，在設(shè)計控件等都是很方便的
W的特點：最好符合大眾化的
得：3x*5y-10=W 其中x，y為整數(shù)
15x*y-10=w
上面列舉的都是Alexa全球排名前100的站點，它們的首頁寬度為950px/960px. 除了微軟的Live Search, 這些站點有個共同特點：頁面結(jié)構(gòu)較復(fù)雜，都可以認為是門戶型網(wǎng)站。
列舉下現(xiàn)在網(wǎng)站的柵格
網(wǎng)站
首頁頁面寬度(xp)
a*b(xp)
Yahoo!
950
64
淘寶
950
64
網(wǎng)易
950
64
Live Search
958
64.5222
良無限系統(tǒng)
1000
66.1333
結(jié)論，現(xiàn)有網(wǎng)站在n和A的特點下，x*y是整數(shù)的只有64.
很多成熟網(wǎng)站都是12或24柵格。
當柵格為12（即3x=12）時：
4y=64
y=16即A=80
當柵格為24（即3x=24）時：
8y=64
y=8即A=40
考慮到1.0的控件改動盡量少,后臺系統(tǒng)布局結(jié)構(gòu)比較統(tǒng)一。我們采用24柵格
即：
我們的柵格是：
（80×12）- 10 = 950
基線
柵格設(shè)定好之后只是控制了縱向的整齊，橫向的需要用基線來控制。
在描述基線之前，我們先要了解下前端對于輸入框的結(jié)構(gòu)吧
如果我們設(shè)置一個12號字的輸入框，那么前端會對這個輸入框設(shè)定結(jié)構(gòu)。text area（藍色部分）他是個基礎(chǔ)，pading（內(nèi)白色部分）他是text area和框描邊的空隙，border（黃色部分）是框的描邊寬度，margin（黃色外虛線框范圍）他是鼠標劃過的hover狀態(tài)的延伸區(qū)域。我們的12號字是在text area里面的。比如圖中，我們的text area設(shè)置的行高是18像素，字高12像素，居中的，上下各有3像素的間距。
根據(jù)這點，我們把表單里面的輸入框元素和柵格元素一起考慮，設(shè)置了每個控件在柵格里面的效果：
（其中藍色部分就是text area的內(nèi)容）
很多人會奇怪，為什么標題部分都是三個位置，有的還是前面空一格呢？我們的系統(tǒng)在早期定義了這樣的效果，因為業(yè)務(wù)方的字段都是長短不一的。如果做成了左對齊，戶很難看（我們一排可能出現(xiàn)三列），所以在表單頁面和查詢頁面我們都統(tǒng)一冒號對齊，這樣就能保證輸出框是比較整齊的。方便用戶瀏覽。
下面來講我們的重點：基線。先看圖
反饋和輸入框是捆綁的，我們在用戶填完內(nèi)容之后會給他第一時間的反饋，這時候如果位置放在后面，則會導(dǎo)致第二列的內(nèi)容不好放，我們就把反饋都放在輸入框的下面，而且反饋只會是出錯的反饋，以免用戶瀏覽困難。 我們把基線間距設(shè)定為20像素，text area與之下對齊，這樣，兩個輸入框之間正好是18像素，正好放一個text area。
按照這個邏輯，我們做出了所有控件搭成的頁面。
注：動作按鈕是冒號對齊，保證操作的連貫性
等到和前端溝通，方案通過之后，我們在開始制作詳情頁和查詢頁
柵格規(guī)范做好之后，就為顏色規(guī)范和控件規(guī)范的打下了一個很好的基礎(chǔ)。
當然，當然制作柵格系統(tǒng)還有很多方法。作為設(shè)計師，特別是網(wǎng)頁設(shè)計師/交互設(shè)計師，我們不應(yīng)當單純地憑借感覺，應(yīng)當專注到像素級別，嚴謹設(shè)計，同時保持和前端的溝通，虛心接受他們的指導(dǎo)。其實，前期我們沒有想到柵格系統(tǒng)要做的這么復(fù)雜，都是前端攻城師們在設(shè)計的時候發(fā)現(xiàn)我們的交付物不夠嚴謹，不斷的提出挑戰(zhàn)，才慢慢晚上的。所以我在文章的最后，想送給大家兩個詞："嚴謹，溝通"。
文章來源：lpued.com
標簽： 交互設(shè)計 柵格規(guī)范 網(wǎng)頁柵格化設(shè)計
版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。
