設(shè)計(jì)案例！說說品牌網(wǎng)站設(shè)計(jì)細(xì)節(jié)的重要性。(2)

Step2. 頁面排版

1)線框圖

線框圖通過安排和選擇界面元素來整合界面設(shè)計(jì)，可以確定一個(gè)建立在基本概念結(jié)構(gòu)上的架構(gòu)，同時(shí)指出視覺設(shè)計(jì)應(yīng)該前進(jìn)的方向。

2)固定寬度&響應(yīng)式（以IOS系統(tǒng)為例）

首先科普下固定寬度和響應(yīng)式的具體概念。

固定寬度：固定網(wǎng)頁布局指網(wǎng)站內(nèi)容被一個(gè)固定寬度的容器包裹，容器內(nèi)的區(qū)塊都有固定的百分比或者像素寬度值，不管屏幕分辨率如何變化，訪客看到的都是固定寬度的內(nèi)容。

響應(yīng)式：頁面的設(shè)計(jì)與開發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境(系統(tǒng)平臺(tái)、屏幕尺寸、屏幕定向等)進(jìn)行相應(yīng)的響應(yīng)和調(diào)整，跟隨屏幕大小的變化而變化。

整合固定寬度與響應(yīng)式設(shè)計(jì)的優(yōu)缺點(diǎn)，結(jié)合二者優(yōu)勢(shì)，最后決定為每個(gè)設(shè)備進(jìn)行獨(dú)立設(shè)計(jì)，可優(yōu)化設(shè)計(jì)視覺效果，同時(shí)提升最終網(wǎng)站用戶體驗(yàn)。

3)網(wǎng)格

網(wǎng)格是用豎直或水平分割線將布局進(jìn)行分塊，把邊界、空白和欄包括在內(nèi)，以提供組織內(nèi)容的框架。網(wǎng)格可以輔助我們?cè)O(shè)計(jì)結(jié)構(gòu)統(tǒng)一，畫面更為整潔。

然而，我們應(yīng)該勇敢地向網(wǎng)格以外的地方冒險(xiǎn)，要?jiǎng)?chuàng)造一個(gè)基于網(wǎng)格的作品，不意味著任何東西都要對(duì)齊。

越出網(wǎng)格邊界的元素會(huì)讓作品看起來更加簡潔和流暢。