#設(shè)計(jì)觀點(diǎn)#“案例研究2：Laura?Kalbag個(gè)人網(wǎng)站布局心得”?在本文中她采用了多種方法進(jìn)行頁面上的布局，找到了一致性與靈活性的完美平衡點(diǎn)。?#SKYUI#

網(wǎng)格線，靈活性以及響應(yīng)式

第一步：選擇合適的字體

在我的網(wǎng)格線設(shè)計(jì)中第一步往往是選擇合適的字體。因?yàn)樵谧⒅匚谋緝?nèi)容的個(gè)人網(wǎng)站里，文本是應(yīng)該首先考慮的問題，因此字體相當(dāng)重要。我理想中的字體是閱讀友好，不會(huì)顯得特別正式，同時(shí)看起來清爽、專業(yè)，具有可讀性。我花錢買了幾種不為人所知的字體（每個(gè)人都希望與眾不同，不是嗎），后來我發(fā)現(xiàn)了Avenir，他們都說Avenir是唯一具備適用性的網(wǎng)絡(luò)字體，使用Avenir之后我發(fā)現(xiàn)字體的選擇變得容易多了。

Avenir?字體

二、字體的基本設(shè)置

通過Typecast這個(gè)App，我對(duì)Avenir字體進(jìn)行了一些實(shí)驗(yàn)，然后我知道我想要多大尺寸的字體了?？梢园阉某叽缯{(diào)大一點(diǎn)，不但凸顯字體的特點(diǎn)，而且最大化可閱讀性。而且我特別加高了行高，因?yàn)閳A角Sans?serif字體比較占空間。如果行間距太窄，會(huì)導(dǎo)致辨認(rèn)不全和無法正常引導(dǎo)閱讀的問題。

在Typecast中測試Avenir字體的設(shè)置 ? ? ??

一些基本單元的設(shè)置以及垂直瀏覽的律動(dòng)感

現(xiàn)在要開始考慮要用什么樣的基本單元來打造網(wǎng)格線布局了。我個(gè)人傾向于10條因?yàn)檫@樣利于計(jì)算，這次我挑戰(zhàn)了一下自我，我用了12條（6條用于細(xì)節(jié)上的規(guī)劃）。另外的理由就是，通過劃分出三塊區(qū)域，讓我的工作更協(xié)調(diào)。為了制造瀏覽網(wǎng)頁時(shí)的律動(dòng)感，我在垂直上設(shè)置了很多基本單位用于測量，包括行高、內(nèi)邊距、外邊距。

水平網(wǎng)格線

當(dāng)我開始為我的網(wǎng)站進(jìn)行網(wǎng)格線設(shè)計(jì)的時(shí)候，我很希望再能多使用下Gridset?這款App。我的內(nèi)容布局相當(dāng)靈活，大部分頁面都包括了大量的主題文本，與此同時(shí)達(dá)到了可讀性以及無障礙性閱讀，而Meta信息的設(shè)置要根據(jù)視窗(Viewport)中的可用空間來考量。在Gridset這款App中我進(jìn)行了多種嘗試，來讓內(nèi)容表現(xiàn)更具有靈活性。我選擇網(wǎng)格線A作為主要的網(wǎng)格線布局方式，因?yàn)椴季稚虾芏嗟牡胤脚c內(nèi)容協(xié)調(diào)。網(wǎng)格線B作為我的第二選擇，當(dāng)A的布局效果不佳時(shí)，內(nèi)容在縱列上能更好的表達(dá)時(shí)，我會(huì)選擇B。將兩種網(wǎng)格線重疊，這樣就保持了整體的一致，同時(shí)具備了更多的靈活性。

網(wǎng)格線A、網(wǎng)格線B

A與B的重疊效果

靈活的網(wǎng)格線

現(xiàn)在我可不相信我的網(wǎng)格線系統(tǒng)是完美的。因?yàn)椴煌瑢挾鹊囊暣吧享撁娴妮d入情況也不同，可能會(huì)導(dǎo)致一些不和諧的效果。

取而代之的，因?yàn)槲业囊暣皩挾嚷孕?，我刪除了最右面縱列的網(wǎng)格線，重新組織了相關(guān)的內(nèi)容，為的是使文章的可讀性和一致性更高。這并不是說我是個(gè)頁面控制狂，而是因?yàn)槲矣X得設(shè)計(jì)師理應(yīng)為了頁面更好的閱讀體驗(yàn)，選擇性的做出一些結(jié)構(gòu)上的修改、一些布局上的控制。我覺得通過網(wǎng)格線的布局來提高文章的可讀性，比通過在頁面上設(shè)置斷點(diǎn)更方便。

寬版的About?Me頁面，使用了整套網(wǎng)格線

寬版的Blog頁面，使用了整套網(wǎng)格線

普通寬度的About?Me頁面，網(wǎng)格線有一條縱列稍微向左移動(dòng)了一點(diǎn)

中等寬度的Blog頁面，Meta內(nèi)容展示于主文本之下，而不是放在左面。

寬度略窄的About?Me頁面，沒有使用網(wǎng)格線結(jié)構(gòu)，但是使用了內(nèi)邊距(padding)

寬度略窄的Blog頁面，沒有使用網(wǎng)格線結(jié)構(gòu)，但是使用了內(nèi)邊距(padding)。

內(nèi)邊距和外邊距。

正如我所使用的垂直的內(nèi)邊距和水平的外邊距。我堅(jiān)持使用多種基本元素，能幫助我在網(wǎng)格線無法正常布局的時(shí)候做出一些彌補(bǔ)，防止頁面在不同的設(shè)備上出現(xiàn)差錯(cuò)。靈活性的布局卻缺少一些斷點(diǎn)，這在我看來是一種缺憾。

去掉網(wǎng)格線（內(nèi)容至上）

有以下幾條因素促使我去掉網(wǎng)格線以更好的服務(wù)內(nèi)容：Past?Project的頁面，對(duì)于各種寬度的視窗來說，都能保持圖像夠大，保持信息傳達(dá)。但是頁面的長度根本就不夠。而而且圖像的長度都不一樣，所以我只能大致的保持一致性。

Past?Projects?頁面去掉了網(wǎng)格線，但是是更忠實(shí)于內(nèi)容的布局。

左對(duì)齊網(wǎng)格線

長期以來，我一直都很在意在我的頁面布局，一直致力于布局的優(yōu)化。我的這個(gè)網(wǎng)頁的設(shè)計(jì)是左對(duì)齊網(wǎng)格線，這就會(huì)讓我的布局看起來非常的有序并且有組織。

通常情況下，右面的換行處的空白區(qū)域，會(huì)讓一些用戶感覺一些突兀感，為了解決這個(gè)問題，我通常在右面換行的區(qū)域放上我的一些繪圖作品。這樣就合理的利用了多余的空間

About?me?頁面右面有很大的區(qū)域，放上作品之后能夠很好的引導(dǎo)閱讀。

調(diào)整

整體完工后，我又做了基礎(chǔ)調(diào)整，為了適應(yīng)一些屏幕較小設(shè)備的瀏覽需求，我專門為它們稍微調(diào)整了網(wǎng)格線，字體大小，行高。我可不想追隨那些惡心人的趨勢，就是為了支持小屏設(shè)備的瀏覽，把字體縮小到甚至都無法閱讀。正如Simon?Foster說的那樣，響應(yīng)式設(shè)計(jì)的核心在于測量、調(diào)整。字體我縮小了1/12，行高縮小了1/2。

總結(jié)：

通過上文的種種方法，既完成了我個(gè)人網(wǎng)站頁面的一致性，也達(dá)到了布局的高度靈活，同時(shí)稍微控制了一下失控的內(nèi)容來讓他們更加有序。關(guān)于響應(yīng)式的靈活度，我會(huì)繼續(xù)進(jìn)行探索。