當前位置:首頁 » 網頁前端 » web尺寸規范
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

web尺寸規范

發布時間: 2022-01-15 21:59:25

『壹』 網頁的設計規范有哪些

一、畫板尺寸


因為網頁尺寸與用戶屏幕相關,而用戶屏幕的種類難以統計。所以我們的設計稿只能主要顧及主流用戶的解析度,其他解析度用適配的方式來解決。在最新版Photoshop網站Web預設尺寸給了我們一些啟示:常見尺寸(1366x768px)、大網頁(1920x1080px)、最小尺寸(1024x768px)、Macbook Pro13 (2560x1600px)、MacBook Pro15(2880x1800px)、iMac 27(2560x1440px)等。


二、文字規范


我們現在都知道了網站上面的文字是通過前端工程師重新寫在代碼里的。那這種文字在瀏覽器上的渲染與系統和瀏覽器有關。


三、圖片規范


網站設計中的圖片常用4(寬):3(高)、16(寬):9(高)、1:1等比例。具體圖片大小沒有固定要求,但整數和偶數為佳。


四、按鈕


按鈕的風格在過去的十幾年發生了很大的變化,由一開始的“斜面與浮雕”風格過渡到後面的“擬物風格”,現在更流行的是扁平風格。

『貳』 Web 頁面採用多大的寬度最合適

網頁設計在初始要界定出網頁的尺寸大小.就像繪畫給出一塊畫版來.這樣才能方便設計.

網頁的尺寸受限於兩個因素:一個是顯示器屏幕.顯示器現在種類很多,以17寸為主流, 正在朝19寸及寬屏的方向發展.但目前也有為數不少的15寸顯示器.另一個是瀏覽器軟體,就是我們常用的IE,遨遊,Friefox等.

高度:

高度是可以向下延展的,所以一般對高度不限制. 對於一屏來說,一般沒有一個固定值,因為每個人的瀏覽器的工具欄不同,我見過有的瀏覽器工具欄被插件佔了半個屏幕,所以高度沒有確切值。

寬度:

1、在IE6.0下,寬度為顯示器解析度減21,比如1024的寬度-21就變成1003。但值得注意的是IE6.0(或更低)無論你的網頁多高都會有右側的滾動條框。

2、在Firefox下,寬度的分率辨減19。比如1024的寬度-19就變成1005

3、在Opear下,寬度的分率辨減23。比如1024的寬度-23就變成1001

註:Firefox或Opear在內容少於瀏覽器高度時不顯示右側滾動條。

所以如果是1024的解析度,你的網頁不如設成1000安全一點。設成900兩側空白更大,視覺上更舒服一點.也方便做一些浮動層的設計.

如果是800的解析度一般都設成770。但也有設成760的.

這些需要明白並且牢記,不然很可能做出來不符合瀏覽器要求,不過一般我們都回設定的再稍微小一點,應為有些瀏覽器加了插件或者其他的東西寬度會有變化所以 800的解析度一般設定760左右,1024的設定990左右.

網頁設計標准尺寸:

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

2、1024*768下,網頁寬度保持在1002以內,如果滿框顯示的話,高度是612-615之間.就不會出現水平滾動條和垂直滾動條。

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

標准網頁廣告尺寸規格

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

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

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

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

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

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

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

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

廣告形式 像素大小 最大尺寸 備注

BUTTON 120*60(必須用gif) 7K

215*50(必須用gif) 7K

通欄 760*100 25K 靜態圖片或減少運動效果

430*50 15K

超級通欄 760*100 to 760*200 共40K 靜態圖片或減少運動效果

巨幅廣告 336*280 35K

585*120

豎邊廣告 130*300 25K

全屏廣告 800*600 40K 必須為靜態圖片,FLASH格式

圖文混排 各頻道不同 15K

彈出窗口 400*300(盡量用gif) 40K

BANNER 468*60(盡量用gif) 18K

懸停按鈕 80*80(必須用gif) 7K

流媒體 300*200(可做不規則形狀但尺寸不能超過300*200) 30K 播放時間 小於5秒60幀(1秒/12幀)

網頁中的廣告尺寸

1.首頁右上,尺寸120*60

2.首頁頂部通欄,尺寸468*60

3.首頁頂部通欄,尺寸760*60

4.首頁中部通欄,尺寸580*60

5.內頁頂部通欄,尺寸468*60

6.內頁頂部通欄,尺寸760*60

7.內頁左上,尺寸150*60或300*300

8.下載地址頁面,尺寸560*60或468*60

9.內頁底部通欄,尺寸760*60

10.左漂浮,尺寸80*80或100*100

11.右漂浮,尺寸80*80或100*10

『叄』 PC端UI設計尺寸規范

對於剛入行的UI設計師,最容易犯的錯就是在設計移動APP時,不懂什麼尺寸或者用哪種屏幕的尺寸是最適當的?為了解決這個問題,今天我們就簡單的為大家整理做UI時最基礎的尺寸規范。

現象


首先說現象,大家都知道移動端設備屏幕尺寸非常多,碎片化嚴重。尤其是Android,你會聽到很多種解析度:480×800, 480×854, 540×960, 720×1280, 1080×1920,而且還有傳說中的2K屏。近年來iPhone的碎片化也加劇了:640×960, 640×1136, 750×1334, 1242×2208。

不要被這些尺寸嚇倒。實際上大部分的appUI設計和移動端網頁,在各種尺寸的屏幕上都能正常顯示。說明尺寸的問題一定有解決方法,而且有規律可循。

像素密度

就目前市場狀況而言,各種手機的解析度可以這樣粗略判斷。雖然不全面,但至少在1年內都還有一定的參考意義:

ldpi 如今已絕跡,不用考慮

mdpi [320x480](市場份額不足5%,新手機不會有這種倍率,屏幕通常都特別小)

hdpi [480x800、480x854、540x960](早年的低端機,屏幕在3.5英寸檔位;如今的低端機,屏幕在4.7-5.0英寸檔位)

xhdpi [720x1280](早年的中端機,屏幕在4.7-5.0英寸檔位;如今的中低端機,屏幕在5.0-5.5英寸檔位)

xxhdpi [1080x1920](早年的高端機,如今的中高端機,屏幕通常都在5.0英寸以上)

xxxhdpi [1440x2560](極少數2K屏手機,比如Google Nexus 6)

自然地,以1倍的mdpi作為基準。像素密度更高或者更低的設備,只需乘以相應的倍率,就能得到與基準倍率近似的顯示效果。

不過需要注意的是,Android設備的邏輯像素尺寸並不統一。比如兩種常見的屏幕480×800和1080×1920,它們分別屬於hdpi和xxhdpi。除以各自倍率1.5倍和3倍,得到邏輯像素為320×533和360×640。很顯然,後者更寬更高,能顯示更多內容。所以,即使有倍率的存在,各種Android設備的顯示效果仍然無法做到完全一致。

單位

不難發現,真正決定顯示效果的,是邏輯像素尺寸。為此,iOS和Android平台都定義了各自的邏輯像素單位。iOS的尺寸單位為pt,Android的尺寸單位為dp。說實話,兩者其實是一回事。

單位之間的換算關系隨倍率變化:

1倍:1pt=1dp=1px(mdpi、iPhone 3gs)

1.5倍:1pt=1dp=1.5px(hdpi)

2倍:1pt=1dp=2px(xhdpi、iPhone 4s/5/6)

3倍:1pt=1dp=3px(xxhdpi、iPhone 6)

4倍:1pt=1dp=4px(xxxhdpi)

單位決定了我們的思考方式。在設計和開發過程中,應該盡量使用邏輯像素尺寸來思考界面。設計Android應用時,有的設計師喜歡把畫布設為1080×1920,有的喜歡設成720×1280。給出的界面元素尺寸就不統一了。Android的最小點擊區域尺寸是48x48dp,這就意味著在xhdpi的設備上,按鈕尺寸至少是96x96px。而在xxhdpi設備上,則是144x144px。

無論畫布設成多大,我們設計的是基準倍率的界面樣式,而且開發人員需要的單位都是邏輯像素。所以為了保證准確高效的溝通,雙方都需要以邏輯像素尺寸來描述和理解界面,無論是在標注圖還是在日常溝通中。不要再說「底部標簽欄的高度是96像素,我是按照xhdpi做的」這樣的話了。

Web怎麼辦

移動端頁面的絕對單位仍然是px,至少代碼里這么寫,但它的道理也和app一樣。由於像素密度是設備本身的固有屬性,它會影響到設備中的所有應用,包括瀏覽器。前端技術可以善加利用設備的像素密度,只需一行代碼,瀏覽器便會使用app的顯示方式來渲染頁面。根據像素密度,按相應倍率縮放。

以iPhone 5s為例,屏幕的解析度是640×1136,倍率是2。瀏覽器會認為屏幕的解析度是320×568,仍然是基準倍率的尺寸。所以在製作頁面時,只需要按照基準倍率來就行了。無論什麼樣的屏幕,倍率是多少,都按邏輯像素尺寸來設計和開發頁面。只不過在准備資源圖的時候,需要准備2倍大小的圖,通過代碼把它縮成1倍大小顯示,才能保證清晰。

實際應用

大家最關心的還是實際運用,畫布該怎麼設置。我們就iOS、Android、Web三個平台來分別梳理一下。不過在這之前,我要為使用PS進行設計的朋友介紹一個小技巧。


之前我說過,我們要以邏輯像素尺寸來思考界面。體現到設計過程中,就是要把單位設置成邏輯像素。打開PS的首選項——單位與標尺界面,把尺寸和文字單位都改成點(Point)。這里的點也就是pt,無論設計iOS、Android還是Web應用,單位都用它。當然,各平台單位名稱還是要記住的。這里我們用的只是它的原理,不用在意名稱。

要調節倍率,則通過圖像大小里的DPI來控制。這個DPI,其實就是PPI,像素密度。有個常識大家都知道,屏幕上的設計DPI設成72,印刷品設計DPI設成300。為什麼是這兩個數字?

首先說300,這和人眼的分辨能力有關。由於1英寸是固定長度,每1英寸有多少個像素點決定了畫質清晰程度。之前說過,這就是像素密度,也就是DPI。DPI達到300以上,其細膩程度就會給人真實感,像真實世界中的物件。相反,DPI只有10的話,在你一個食指指節大小的長度內只有10個像素,這明顯就是馬賽克了。所以印刷品要設成300,才能保證清晰。

再說72,這有一定的歷史原因。最早的圖形設計是在mac電腦上進行的,mac本身的顯示器解析度就是72。PS中把圖像DPI也設成72,就能保證屏幕上顯示的尺寸和列印尺寸相同,便於設計。72的PC顯示器解析度逐漸成為一種默認的行業標准,這套規則就這么沿用下來。


現在回到正題,我們怎麼通過DPI來調節倍率?既然屏幕本身的解析度是72,DPI設成72剛好是1倍尺寸,那設成72的兩倍就是倍率為2的屏幕了,就這么簡單。

下面來看看3個平台各自的畫布設置:

IPhone

iPhone的屏幕尺寸各不相同,我說的是邏輯像素尺寸,這確實是讓人很頭疼的事情。如果想用一套設計涵蓋所有iPhone,就要選擇邏輯像素折中的機型。

從市場佔有率數據來看,目前最多的是iPhone5/5s的屏幕。倍率為2,邏輯像素320×568。上升勢頭最猛,未來有望登上第一的是iPhone 6的屏幕。倍率為2,邏輯像素375×667。

按照這兩種尺寸來設計,都是比較主流的做法。可以兼顧短一些的iPhone 4s,大一點的6 plus也不會過於空曠。

不過在切圖的時候要注意,由於iPhone 6 plus的3倍圖是由2倍圖放大而來,所以點陣圖要注意保證清晰。

Android

都說Android碎片化嚴重,但它現在反而比iOS好處理。因為如今的Android屏幕邏輯像素已經趨於統一了:360×640,就看你設成幾倍了。想以xhdpi為准,就把DPI設成72×2=144。想以xxhdpi為准,就把DPI設成72×3=216。

對於那些比較老的低端機,寬度是480px的那批,畫面確實會小一些,顯示內容會更少。稍微留意一下,重要內容盡量保持在界面中上部分。

當然,這些機型不出一年就會被邊緣化,基本淘汰。現在能運轉的也是當作功能機在用,軟體多了必卡無疑,用戶體驗無從談起。不作考慮也是OK的。

Web

手機端網頁就沒有統一標准了,比較流行的做法是按照iPhone 5的尺寸來設計。倍率2,邏輯像素320×568。

這樣的做法比較實在,倍率2的屏幕無論在iOS還是Android方面都是主流,而且又是2倍屏幕中邏輯像素最小的。所以圖片的尺寸可以保持在較小的水平,頁面載入速度快。當然,缺點就是在倍率3的設備上看,圖片不是特別清晰。

如果追求圖片質量,願意犧牲載入速度,那麼可以按照最大的屏幕來設計。也就是iPhone 6 plus的尺寸,倍率3,邏輯像素414×736。

總結

移動端的尺寸比PC端復雜,關鍵就在倍率。但也正因為倍率的存在,把大大小小的屏幕拉回到同一水平線,得以保證一套設計適應各種屏幕。站在這條水平線的角度看,會發現它很好理解。

『肆』 1366*768的解析度,設計網頁尺寸是多大

無論電腦解析度或多或少,做網頁應該按照這個標准,只需要考慮web頁面的寬度,高度依賴於內容的布局。

現在大多數電腦方便的1280年,1366年,1440年,1660年,1920年,所以web頁面通常設計成一個新的帆布1920px寬,與核心內容控制在1280年,以確保大多數電腦打開網站,可以顯示所有的內容的網站。

(4)web尺寸規范擴展閱讀:

1366:768解析度:18.5英寸16:9顯示

其他不同大小的普通屏幕的最佳解析度(最佳解析度可能因顯示器的大小而異)

監視器:1440x900(16:10)

20寸顯示器:1600x900(16:9)1600x1200(4:3)

21.5」顯示器:1920x1080(16:9)

22英寸顯示:1680x1050(16:10)1920x1080(16:9)1920x1200(16:10)

23「顯示器:1920x1080(16:9)1920x1200(16:10)」

23.6「顯示器:1920x1080(16:9)」

24英寸顯示:1920x1200(16:10)1920x1080(16:9)

『伍』 網頁設計,一般最少要設置多少高度

大概的高度為:

Window XP首屏大小580 px
Window 7 首屏大小710 px

具體原因如下:

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

  • 系統解析度統計:

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

『陸』 網頁設計合適的頁面尺寸是多少

網頁設計選用的解析度是72像素,使用的畫布尺寸1920px*1080px。但是並不意味著在整個畫布上進行設計,一般採用全屏展示和兩側留白的方式。
全屏展示,是整個網站看起來大氣一些,但是布局要合理安排,不然看起來有些傻大的感覺。
兩側留白是為了適配不同電腦屏幕的尺寸,能夠確保網站只是電腦站的時候一些筆記本電腦也能顯示全面網站的內容區域,內容限時區域在好控制在1000px-1200px。

『柒』 web界面設計規范有哪些

一、網頁尺寸
製作網頁時,我們選用的解析度是72像素/英寸,使用的畫布尺寸1920px*1080px。
但是並不代表我們可以在整個畫布上作圖。
網頁的布局主要有兩種,左右型布局和居中型布局。布局的不一致,使得可設計的空間也不相同。
二、網頁字體
字體設計的總原則是:可辨識性和易讀性。
網頁的文字設計是系統默認的字體:宋體、微軟黑體、蘋果系統黑體,英文則建議使用arial無襯線字體
常用的字型大小大小有以下幾種:
12px是應用於網頁的最小字體,適用於非突出性的日期,版權等注釋性內容。
14px 則適用於非突出性的普通正文內容。
16px、18px或者20px 適用於突出性的標題內容。

『捌』 公司後台管理web界面設計尺寸是多少

這個一般用百分比來設計,頭部固定高度,左側固定寬度,右側用100%-左側寬度,以達到最佳瀏覽效果
一般後台管理都會有表格編排問題,會涉及到很多參數,用百分比可以根據表格屬性自動伸縮,而且不影響美觀性
望採納