基本網(wǎng)頁設計中的尺寸選擇

時間：2023-10-08 23:06:01 | 來源：網(wǎng)站運營

時間：2023-10-08 23:06:01 來源：網(wǎng)站運營

基本網(wǎng)頁設計中的尺寸選擇：作者: xteamer成員: junyi

【摘要】在設計和實現(xiàn)PC端網(wǎng)頁時，我們通常選用1200px寬度作為安全區(qū)域的設計的標準。這主要取決于目前市面上的設備的主流分辨率及柵格概念的出現(xiàn)。

根據(jù)百度流量研究院的最新數(shù)據(jù)顯示，2019年10月份我國網(wǎng)民訪問PC網(wǎng)頁的主流設備分辨率仍然為1920*1080，占總百分百為42.94%。很顯然，絕大部分的屏幕分辨率都已經(jīng)超過了1366*768，在適配網(wǎng)頁時則不需要對1366寬度以下的尺寸做特殊處理。可見，1920px在目前是PC端網(wǎng)頁設計的標準。

需要注意的是，此圖中的分辨率數(shù)值僅作為上限的參考，在設計網(wǎng)頁時，不能夠將頁面的實際顯示內(nèi)容的區(qū)域（也成為安全區(qū)）等同于此上限看度?？紤]到在Windows等部分瀏覽器上，滾動條本身也需要占據(jù)一定的寬度，因此，過分的貼邊或是接近于整屏幕寬度的設計是不被推薦的。

以1920px寬度作為設計標準，在整個頁面中，網(wǎng)頁的安全區(qū)域則為1200px。換句話說，我們只要保證網(wǎng)頁的實際內(nèi)容展示區(qū)域控制在1200px這個范圍內(nèi)，就能保證整個頁面在不同尺寸的瀏覽器訪問時能夠完整的顯示出所有的內(nèi)容。

為了布局方便，我們通常會將內(nèi)容區(qū)域用柵格進行劃分，這里我們一般會將內(nèi)容區(qū)域劃分為12格或者24格。同時在柵格間增加通用固定的間距，可以很好的處理大部分情況下的垂直排列問題。

使用12格或24格的好處：能夠倍2、3、4整除；方便處理內(nèi)容區(qū)域中2:1；1:2:1這一類常見的間距分布。

柵格的計算方式：

我們把寬度為“W”的頁面分割成n個網(wǎng)格單元“a”，每個單元與單元之間的間距設置為“i”，此時我們把“a+i”定義為“A”，他們之間的關系如下：

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

由于a+i=A

可得(A*n)-i=W

我們定義了W為1180px，A為50px，i為20px，所以n=24

當我們設置設計柵格時，可以將總寬度設成1180（1200px安全區(qū)域減去兩邊柵格的留白），頁面分為24欄，每一欄的寬度為30px，間距為20px

使用柵格系統(tǒng)，可以有效提高網(wǎng)頁的規(guī)范性。在柵格系統(tǒng)下，頁面中的元素尺寸都是有同一基準線和規(guī)律的，而基于柵格系統(tǒng)進行設計，可以讓整個網(wǎng)站和各個頁面的布局保持一致，增強頁面統(tǒng)一性，提升用戶體驗。

---

歡迎關注 技術團隊的本站賬號 我們憑團隊實例運作以下專欄， 必須干貨！

互聯(lián)網(wǎng)創(chuàng)業(yè)專欄 (我們小伙伴的創(chuàng)業(yè)歷程)

與您一起聊技術 (APP、微信公眾號、小程序、H5 技術總結)

互聯(lián)網(wǎng)產(chǎn)品研發(fā)管理 (我們公司對產(chǎn)品結構的管理思路)

我們是不一樣的技術團隊：

我們認為:所有的企業(yè)行為，都解讀為交易行為，無論是摩拜單車、外賣平臺、自動售貨機、招聘社區(qū)、家政服務，都用交易的語言來表達，我們專欄里面有很多實際案例和開發(fā)過程和交付流程

類似于元素周期表，我們把交易拆解成元素級別，根據(jù)業(yè)務定制組裝，完全復原個性化需求，我們專欄里面有很學術也很實際的介紹

每個項目設置: 導師成長基金、參與人員的獎勵，全員股權池，創(chuàng)業(yè)氛圍濃郁，我們專欄公開分享了我們的一些經(jīng)驗

專治各種復雜的業(yè)務場景， 我們通過簡潔的元素和分層組合，來完成復雜場景的業(yè)務定制，我們在這一塊有非常多的案例，在互聯(lián)網(wǎng)創(chuàng)業(yè)專欄里面有詳細描述