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

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

第一步：選擇合適的字體

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

Avenir?字體

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

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

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

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

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

水平網(wǎng)格線

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

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

A與B的重疊效果

靈活的網(wǎng)格線

現(xiàn)在我可不相信我的網(wǎng)格線系統(tǒng)是完美的。因為不同寬度的視窗上頁面的載入情況也不同，可能會導(dǎo)致一些不和諧的效果。

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

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

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

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

中等寬度的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)邊距和水平的外邊距。我堅持使用多種基本元素，能幫助我在網(wǎng)格線無法正常布局的時候做出一些彌補，防止頁面在不同的設(shè)備上出現(xiàn)差錯。靈活性的布局卻缺少一些斷點，這在我看來是一種缺憾。

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

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

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

左對齊網(wǎng)格線

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

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

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

調(diào)整

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

總結(jié)：

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