- 簡(jiǎn)體
- 簡(jiǎn)體中文 English
網(wǎng)頁(yè)設(shè)計(jì)尺寸規(guī)范及標(biāo)準(zhǔn)詳解
1. 屏幕分辨率寬度
我們只看 PC 端,根據(jù)現(xiàn)在屏幕大小的分布統(tǒng)計(jì)(下圖為百度流量研究院最新數(shù)據(jù))
網(wǎng)站建設(shè)過(guò)程中絕大多數(shù)屏幕的分辨率已經(jīng)超過(guò) 1366*768,這是個(gè)屏幕逐漸變大的趨勢(shì),幾年前我們還需要考慮在 1024* 768 這個(gè)非常普遍的分辨率下的顯示效果,現(xiàn)在基本上不需要單獨(dú)對(duì)其做處理了。
這個(gè)分辨率值只是上限參考,你不可能把頁(yè)面的實(shí)際顯示內(nèi)容區(qū)(或者叫安全區(qū))搞到這個(gè)值,因?yàn)樵?Windows 等部分瀏覽器上,滾動(dòng)條等也要占據(jù)寬度,同時(shí)過(guò)分的貼邊在設(shè)計(jì)上是不被推薦的。
理解了這個(gè)我們就能清楚的知道一個(gè)基準(zhǔn)值的參考范圍。
2. 柵格與響應(yīng)式設(shè)計(jì)
這里需要理解一個(gè)概念,通常為了布局方便我們將內(nèi)容區(qū)域劃分為12或者24格,并在柵格間增加通用間距來(lái)處理絕大多數(shù)情況下的垂直排列問(wèn)題,12或24的好處是能夠被2、3、4整除,更方便來(lái)處理2:1,1:2:1等常見(jiàn)間距。
計(jì)算方式(我這里常見(jiàn)的是處理企業(yè)級(jí)的設(shè)計(jì)頁(yè)面)
到這里基本上就知道為什么我們常見(jiàn)的值會(huì)是1180(1200減去兩邊柵格的留白)。這個(gè)值叫做典型設(shè)計(jì)參照,以往的設(shè)計(jì)平面稿是沒(méi)辦法動(dòng)態(tài)適配各種寬度的,用典型值來(lái)作為設(shè)計(jì)稿基準(zhǔn)尺寸能夠表達(dá)典型效果,并在頁(yè)面實(shí)現(xiàn)時(shí)更容易還原。
響應(yīng)式布局是最近幾年比較流行的概念,在網(wǎng)頁(yè)渲染時(shí),能夠根據(jù)視窗寬度自動(dòng)對(duì) Layout 及頁(yè)面元素進(jìn)行重新排列。比較常見(jiàn)的 Bootstrap 響應(yīng)式部分的介紹:
以及柵格部分的詳細(xì)描述:
下面這張圖給出了 Bootstrap 的常見(jiàn)屏幕狀態(tài)下的幾個(gè)典型值:
關(guān)于網(wǎng)頁(yè)字體大小等問(wèn)題,也可以參考上面比較經(jīng)典的設(shè)計(jì)規(guī)范約定。常見(jiàn)的內(nèi)容段落文字大小約定為 14px。我這邊在做的規(guī)范,關(guān)于排版的約定如下:
建站流程
-
網(wǎng)站需求
-
網(wǎng)站策劃方案
-
頁(yè)面設(shè)計(jì)風(fēng)格
-
確認(rèn)交付使用
-
資料錄入優(yōu)化
-
程序設(shè)計(jì)開(kāi)發(fā)
-
后續(xù)跟蹤服務(wù)
-
聯(lián)系電話(huà)
010-60259772
熱門(mén)標(biāo)簽
- 網(wǎng)站建設(shè)
- 食品網(wǎng)站建設(shè)
- 微信小程序開(kāi)發(fā)
- 小程序開(kāi)發(fā)
- 無(wú)錫網(wǎng)站建設(shè)
- 研究所網(wǎng)站建設(shè)
- 沈陽(yáng)網(wǎng)站建設(shè)
- 廊坊網(wǎng)站建設(shè)
- 鄭州網(wǎng)站建設(shè)
- 婚紗攝影網(wǎng)站建設(shè)
- 手機(jī)端網(wǎng)站建設(shè)
- 高校網(wǎng)站制作
- 天津網(wǎng)站建設(shè)
- 教育網(wǎng)站建設(shè)
- 品牌網(wǎng)站建設(shè)
- 政府網(wǎng)站建設(shè)
- 北京網(wǎng)站建設(shè)
- 網(wǎng)站設(shè)計(jì)
- 網(wǎng)站制作
最新文章
-
企業(yè)網(wǎng)站建設(shè)過(guò)程中,需及時(shí)對(duì)網(wǎng)站數(shù)據(jù)開(kāi)展優(yōu)化與維護(hù)工作
類(lèi)型:網(wǎng)站建設(shè)
2025-07-03 -
基于用戶(hù)體驗(yàn)的企業(yè)商務(wù)網(wǎng)站建設(shè)信息質(zhì)量評(píng)價(jià)研究
類(lèi)型:網(wǎng)站建設(shè)
2025-07-03 -
基于Python的企業(yè)網(wǎng)站建設(shè)中的網(wǎng)頁(yè)信息爬取技術(shù)探究
類(lèi)型:網(wǎng)站建設(shè)
2025-07-02
推薦新聞
更多行業(yè)-
具有特色設(shè)計(jì)的網(wǎng)站建設(shè)要注意哪些細(xì)節(jié)
首先,在網(wǎng)站建設(shè)的設(shè)計(jì)上一定要講究精致、美觀(guān)、細(xì)節(jié),充分滿(mǎn)足網(wǎng)站開(kāi)發(fā)用...
2022-03-22 -
網(wǎng)站建設(shè)特色有哪些?
用戶(hù)體驗(yàn)優(yōu)化:網(wǎng)站建設(shè)越來(lái)越注重用戶(hù)體驗(yàn)。這包括簡(jiǎn)潔明了的導(dǎo)航、易于理...
2023-07-07 -
構(gòu)建科技網(wǎng)站建設(shè)指南:一站式解鎖您的數(shù)字競(jìng)爭(zhēng)力
在數(shù)字化時(shí)代,擁有一個(gè)高效且具有吸引力的科技網(wǎng)站是企業(yè)在激烈競(jìng)爭(zhēng)中脫穎...
2024-06-25 -
網(wǎng)站制作的難度主要是體現(xiàn)在哪里?
隨著現(xiàn)在互聯(lián)網(wǎng)的迅速發(fā)展,許多企業(yè)都很關(guān)注網(wǎng)站的使用,主要是利用網(wǎng)絡(luò)的...
2022-11-21 -
網(wǎng)站建設(shè)中哪些是網(wǎng)站設(shè)計(jì)比較重要的
網(wǎng)站設(shè)計(jì)需要注意的事項(xiàng)講的時(shí)間比較長(zhǎng),因?yàn)樾枰⒁獾狞c(diǎn)太多了,大部分都...
2021-12-07 -
網(wǎng)站設(shè)計(jì)如何才能夠?qū)崿F(xiàn)良好的用戶(hù)體驗(yàn)
我們都知道一個(gè)網(wǎng)站設(shè)計(jì)是否成功,關(guān)鍵還是在于用戶(hù)體驗(yàn)或者用戶(hù)量的多少。...
2020-07-07
預(yù)約專(zhuān)業(yè)咨詢(xún)顧問(wèn)溝通!
免責(zé)聲明
非常感謝您訪(fǎng)問(wèn)我們的網(wǎng)站。在您使用本網(wǎng)站之前,請(qǐng)您仔細(xì)閱讀本聲明的所有條款。
1、本站部分內(nèi)容來(lái)源自網(wǎng)絡(luò),涉及到的部分文章和圖片版權(quán)屬于原作者,本站轉(zhuǎn)載僅供大家學(xué)習(xí)和交流,切勿用于任何商業(yè)活動(dòng)。
2、本站不承擔(dān)用戶(hù)因使用這些資源對(duì)自己和他人造成任何形式的損失或傷害。
3、本聲明未涉及的問(wèn)題參見(jiàn)國(guó)家有關(guān)法律法規(guī),當(dāng)本聲明與國(guó)家法律法規(guī)沖突時(shí),以國(guó)家法律法規(guī)為準(zhǔn)。
4、如果侵害了您的合法權(quán)益,請(qǐng)您及時(shí)與我們,我們會(huì)在第一時(shí)間刪除相關(guān)內(nèi)容!
聯(lián)系方式:010-60259772
電子郵件:394588593@qq.com