標籤:

網頁設計的首屏尺寸一般是多少?

商城網頁首頁的首屏一般尺寸是多少?


Web-設計尺寸

一個網頁的尺寸設置和瀏覽器與系統的尺寸大為相關,我們不可能滿足所以用戶的最佳尺寸,但我們能做的是讓絕大多少用戶感覺是最佳的。

系統解析度統計

對大於30W台客戶端用戶進行測試,得到的測試數據如下(數據來源於網路):

在Window XP常見解析度1024×768下我們除掉任務欄,瀏覽器菜單欄以及狀態欄後剩下的網頁首屏高度平均值是584。

在Window 7常見解析度1440×900下我們除掉任務欄,瀏覽器菜單欄以及狀態欄後剩下的網頁首屏高度平均值是716。

綜合解析度及瀏覽器下的統計數據

Window XP首屏大小580 px

Window 7 首屏大小710 px


最新的數據可參考自己的一篇博客,文章中我並沒有說首屏的確切高度,但是首屏高度根據文章中的數據和不同的操作系統的瀏覽器高度自己控制好大致範圍即可,以不變應萬變,沒有死的一個標準,具體項目具體分析。

Web Design資料庫:最新2017響應式設計斷點數值與代碼段參考


網頁設計標準尺寸:

1、800*600下,網頁寬度保持在778以內,就不會出現水平滾動條,高度則視版面和內容決定。

2、1024*768下,網頁寬度保持在1002以內,如果滿框顯示的話,高度是612-615之間.就不會出現水平滾動條和垂直滾動條。(在dw裡面有設定好的標準值, 1024*768頁面的標準大小是955*600,照著它的尺寸做就行了)

3、在ps裡面做網頁可以在800*600狀態下顯示全屏,頁面的下方又不會出現滑動條,尺寸為740*560左右

4、在PS里做的圖到了網上就不一樣了,顏色等等方面,因為WEB上面只用到256WEB安全色,而PS中的RGB或者CMYK以及LAB或者HSB的色域很寬顏色範圍很廣,所以自然會有失色的現象.

頁面標準按800*600解析度製作,實際尺寸為778*434px

頁面長度原則上不超過3屏,寬度不超過1屏

每個標準頁面為A4幅面大小,即8.5X11英寸

全尺寸banner為468*60px,半尺寸banner為234*60px,小banner為88*31px

另外120*90,120*60也是小圖標的標準尺寸

每個非首頁靜態頁面含圖片位元組不超過60K,全尺寸banner不超過14K

標準網頁廣告尺寸規格

1、120*120,這種廣告規格適用於產品或新聞照片展示。

2、120*60,這種廣告規格主要用於做LOGO使用。

3、120*90,主要應用於產品演示或大型LOGO。

4、125*125,這種規格適於表現照片效果的圖像廣告。

5、234*60,這種規格適用於框架或左右形式主頁的廣告鏈接。

6、392*72,主要用於有較多圖片展示的廣告條,用於頁眉或頁腳。

7、468*60,應用最為廣泛的廣告條尺寸,用於頁眉或頁腳。

8、88*31,主要用於網頁鏈接,或網站小型LOGO。

更多的尺寸:網頁設計的標準尺寸

相關的資料下載:

網頁版式設計原理 ppt版本

《訪客至上的網頁設計秘笈》pdf全本

最後還有沙拉一道:常用工具下載、交互,UI相關分享設計師文化周


我設計的時候主體內容也是1000以內,但是我從13年開始接觸了很多網站都做得是1200,有時候想嘗試一下1200,但是項目安排是沒機會嘗試的,很惆悵。1200的看起來大氣,而1000的主體在1920的屏幕下看起來兩邊都很空,背景有元素還好(背景圖,廣告位等)。話說有沒有試過1200的朋友來探討一下?


那些尺寸是切出來的大小嗎?還ps原格式裡面的尺寸是多少


個人習慣上是使用1200,感覺挺看著挺舒服


這個可以參考天貓商城的比例,中國的大部分用戶已經被淘寶深度影響


你可以用@media screen自適應瀏覽器。設計的尺寸一般等同於工作用的機器。


首頁商城網站建議和淘寶一樣做950px,居中&........&就好了, 可以參考取市源導航首頁www.qshiy.com 免費提供該網站代碼給您


真的也此不過我都用到1240


推薦閱讀:

如何禮貌地向美工指出其配色問題?
見過最酷的簡歷是怎麼樣的?

TAG:網頁設計 |