推薦：只需五步!增強(qiáng)網(wǎng)站的用戶黏度!
在社交媒體還沒(méi)出現(xiàn)之前，衡量網(wǎng)站的一個(gè)標(biāo)準(zhǔn)就是點(diǎn)擊量。然而隨著新數(shù)字媒體的出現(xiàn)，新的衡量標(biāo)準(zhǔn)也應(yīng)運(yùn)而生黏著度。 如今，單看網(wǎng)頁(yè)點(diǎn)擊量是看不出網(wǎng)頁(yè)上內(nèi)容的好壞的，需要對(duì)網(wǎng)頁(yè)進(jìn)行更深層次的挖掘。為了讓人們改變對(duì)點(diǎn)擊量的看法，GoSquared網(wǎng)站創(chuàng)始人對(duì)自己的網(wǎng)

 

隨著業(yè)務(wù)的不斷推進(jìn)，現(xiàn)在我們的后臺(tái)項(xiàng)目越來(lái)越多。但是由于前端和后臺(tái)之間聯(lián)調(diào)復(fù)雜導(dǎo)致項(xiàng)目經(jīng)常會(huì)推遲。為了能優(yōu)化項(xiàng)目流程，提高開發(fā)效率。交互和前端決定一起做一套DPL，做一系列的規(guī)范出來(lái)。這樣可以減少交互，前端，后臺(tái)互相的溝通成本，同時(shí)能夠沉淀下這段時(shí)間大家的收獲。

交互參與的DPL(Design Pattern Library)中我們主要是做柵格體系，控件體系，視覺體系，下面我來(lái)和大家分享下DPL中的柵格體系設(shè)計(jì)

柵格

研究網(wǎng)頁(yè)柵格系統(tǒng)前，來(lái)看一組數(shù)據(jù)：

網(wǎng)站 首頁(yè)頁(yè)面寬度 px

Yahoo! 950

淘寶 1000

MySpace 960

新浪 950

網(wǎng)易 960

Live Search 958

搜狐 950

優(yōu)酷 960

AOL 960

上面列舉的都是Alexa全球排名前100的站點(diǎn)，它們的首頁(yè)寬度為950px/960px. 除了微軟的Live Search, 這些站點(diǎn)有個(gè)共同特點(diǎn)：頁(yè)面結(jié)構(gòu)較復(fù)雜，都可以認(rèn)為是門戶型網(wǎng)站。

再來(lái)看看Google, YouTube, Facebook, Flickr!, eBay等知名站點(diǎn)，它們的首頁(yè)寬度沒(méi)什么固定規(guī)律，共同的特點(diǎn)是：功能專一，頁(yè)面結(jié)構(gòu)相對(duì)簡(jiǎn)單。

根據(jù)上面的簡(jiǎn)單分析可以認(rèn)為：當(dāng)搭建頁(yè)面結(jié)構(gòu)復(fù)雜的門戶型網(wǎng)站時(shí)，開發(fā)工程師們不約而同地都選擇將頁(yè)面寬度定為950px/960px.

這是一件很有趣的事情，為什么要選擇這個(gè)寬度呢?這個(gè)寬度值究竟有什么魔力?

上面的“自然”出現(xiàn)，細(xì)究自然是不讓人信服的。設(shè)計(jì)者們?cè)跊](méi)有喝醉酒的情況下選擇了960，而不是其它什么1000之類的整數(shù)，自然另有奧妙。

那么如何設(shè)計(jì)一個(gè)柵格系統(tǒng)?接下來(lái)我們將通過(guò)實(shí)例，詳細(xì)的介紹一下網(wǎng)頁(yè)柵格系統(tǒng)的原理與應(yīng)用：

在網(wǎng)頁(yè)設(shè)計(jì)中，我們把寬度為“W”的頁(yè)面分割成n個(gè)網(wǎng)格單元“a”，每個(gè)單元與單元之間的間隙設(shè)為“i”,此時(shí)我們把“a+i”定義“A”。他們之間的關(guān)系如下：

W =(a×n)+(n-1)i

由于a+i=A，

可得：(A×n) – i = W

 

注：960是加上最后一個(gè)i(i=10)的長(zhǎng)度，950是沒(méi)加上i的長(zhǎng)度

為了減少1.0版本的改動(dòng)，我們保持了i=10xp

我們的N是多少，A是多少?W是多少?

由于我們做的是后臺(tái)系統(tǒng)的網(wǎng)頁(yè)，所以和很多前臺(tái)網(wǎng)頁(yè)都有些不同，比如我們這次做的是內(nèi)頁(yè)的柵格，能在1280的展示全就可以了

 

n的特點(diǎn)：是3倍數(shù)，我們需要有一行三列的情況，同時(shí)不希望有重要信息在最后面(我們的系統(tǒng)在內(nèi)頁(yè)才有柵格，所以1280下能展示全，但是1024不一定能全部展示)，所以最好是整個(gè)柵格能平均分成3列

A的特點(diǎn)：是5的倍數(shù)，在設(shè)計(jì)控件等都是很方便的

W的特點(diǎn)：最好符合大眾化的

得：3x*5y-10=W 其中x，y為整數(shù)

15x*y-10=w

上面列舉的都是Alexa全球排名前100的站點(diǎn)，它們的首頁(yè)寬度為950px/960px. 除了微軟的Live Search, 這些站點(diǎn)有個(gè)共同特點(diǎn)：頁(yè)面結(jié)構(gòu)較復(fù)雜，都可以認(rèn)為是門戶型網(wǎng)站。

列舉下現(xiàn)在網(wǎng)站的柵格

詳情參考：網(wǎng)頁(yè)的柵格系統(tǒng)設(shè)計(jì)

網(wǎng)站

首頁(yè)頁(yè)面寬度(xp)

a*b(xp)

Yahoo!

950

64

淘寶

1000

66.1333

網(wǎng)易

950

64

Live Search

958

64.5222

良無(wú)限系統(tǒng)

1000

66.1333

結(jié)論，現(xiàn)有網(wǎng)站在n和A的特點(diǎn)下，x*y是整數(shù)的只有64.

很多成熟網(wǎng)站都是12或24柵格。

當(dāng)柵格為12(即3x=12)時(shí)：

4y=64

y=16即A=80

當(dāng)柵格為24(即3x=24)時(shí)：

8y=64

y=8即A=40

考慮到1.0的控件改動(dòng)盡量少,后臺(tái)系統(tǒng)布局結(jié)構(gòu)比較統(tǒng)一。我們采用24柵格

即：

我們的柵格是：

（40×24）- 10 = 950

基線

柵格設(shè)定好之后只是控制了縱向的整齊，橫向的需要用基線來(lái)控制。

在描述基線之前，我們先要了解下前端對(duì)于輸入框的結(jié)構(gòu)吧

 

如果我們?cè)O(shè)置一個(gè)12號(hào)字的輸入框，那么前端會(huì)對(duì)這個(gè)輸入框設(shè)定結(jié)構(gòu)。text area(藍(lán)色部分)他是個(gè)基礎(chǔ)，pading(內(nèi)白色部分)他是text area和框描邊的空隙，border(黃色部分)是框的描邊寬度，margin(黃色外虛線框范圍)他是鼠標(biāo)劃過(guò)的hover狀態(tài)的延伸區(qū)域。我們的12號(hào)字是在text area里面的。比如圖中，我們的text area設(shè)置的行高是18像素，字高12像素，居中的，上下各有3像素的間距。

根據(jù)這點(diǎn)，我們把表單里面的輸入框元素和柵格元素一起考慮，設(shè)置了每個(gè)控件在柵格里面的效果：

 

(其中藍(lán)色部分就是text area的內(nèi)容)

很多人會(huì)奇怪，為什么標(biāo)題部分都是三個(gè)位置，有的還是前面空一格呢?我們的系統(tǒng)在早期定義了這樣的效果，因?yàn)闃I(yè)務(wù)方的字段都是長(zhǎng)短不一的。如果做成了左對(duì)齊，戶很難看(我們一排可能出現(xiàn)三列)，所以在表單頁(yè)面和查詢頁(yè)面我們都統(tǒng)一冒號(hào)對(duì)齊，這樣就能保證輸出框是比較整齊的。方便用戶瀏覽。

下面來(lái)講我們的重點(diǎn)：基線。先看圖

 

反饋和輸入框是捆綁的，我們?cè)谟脩籼钔陜?nèi)容之后會(huì)給他第一時(shí)間的反饋，這時(shí)候如果位置放在后面，則會(huì)導(dǎo)致第二列的內(nèi)容不好放，我們就把反饋都放在輸入框的下面，而且反饋只會(huì)是出錯(cuò)的反饋，以免用戶瀏覽困難。 我們把基線間距設(shè)定為20像素，text area與之下對(duì)齊，這樣，兩個(gè)輸入框之間正好是18像素，正好放一個(gè)text area。

按照這個(gè)邏輯，我們做出了所有控件搭成的頁(yè)面。

 

注：動(dòng)作按鈕是冒號(hào)對(duì)齊，保證操作的連貫性

等到和前端溝通，方案通過(guò)之后，我們?cè)陂_始制作詳情頁(yè)和查詢頁(yè)

 

 

柵格規(guī)范做好之后，就為顏色規(guī)范和控件規(guī)范的打下了一個(gè)很好的基礎(chǔ)。

當(dāng)然，當(dāng)然制作柵格系統(tǒng)還有很多方法。作為設(shè)計(jì)師，特別是網(wǎng)頁(yè)設(shè)計(jì)師/交互設(shè)計(jì)師，我們不應(yīng)當(dāng)單純地憑借感覺，應(yīng)當(dāng)專注到像素級(jí)別，嚴(yán)謹(jǐn)設(shè)計(jì)，同時(shí)保持和前端的溝通，虛心接受他們的指導(dǎo)。其實(shí)，前期我們沒(méi)有想到柵格系統(tǒng)要做的這么復(fù)雜，都是前端攻城師們?cè)谠O(shè)計(jì)的時(shí)候發(fā)現(xiàn)我們的交付物不夠嚴(yán)謹(jǐn)，不斷的提出挑戰(zhàn)，才慢慢晚上的。所以我在文章的最后，想送給大家兩個(gè)詞：“嚴(yán)謹(jǐn)，溝通”

(本文出自于阿里巴巴良無(wú)限UPD團(tuán)隊(duì)Blog，轉(zhuǎn)載請(qǐng)注明出處)

分享：讀書筆記：《用戶體驗(yàn)的要素》筆記
關(guān)于用戶體驗(yàn) 用戶體驗(yàn)并不是指一件產(chǎn)品本身是如何工作的(雖然這有時(shí)對(duì)用戶體驗(yàn)具有很大的影響)。用戶體驗(yàn)是指產(chǎn)品如何與外界發(fā)生聯(lián)系并發(fā)揮作用的，也就是人們?nèi)绾谓佑|和使用它。 網(wǎng)站的用戶體驗(yàn)比任何其它產(chǎn)品都重要。因?yàn)樗�是一個(gè)自助式的產(chǎn)品。沒(méi)有事先閱讀的說(shuō)明