Ⅰ 網頁設計最標準的尺寸是多少
工具/材料
電腦
ps
- 01
當前最流行的解析度是1920*1080的,在該解析度下,頁面中心區域為1200px以內都可以。建議1000-1200
- 02
其他解析度情況下的尺寸如下:
800*600下,網頁寬度保持在778以內;
1024*768下,網頁寬度保持在1002以內; - 03
(1920*1080解析度下)頂部banner尺寸建議1920*500,最頂部信息欄與導航欄建議高度40、126
- 04
網頁中字體也是有使用規范的,合適的字體大小才能展現出最完美的效果,網頁尺寸標准字體不標准也不行(1920*1080解析度下)
特別提示
如果沒有指定的要求,以1920尺寸設計就好(這是目前最普遍的尺寸大小),前端開發人員會自行適配其他的解析度
Ⅱ 網頁設計的首屏尺寸一般是多少
網頁設計首屏的尺寸一般有一下幾中(這里指的是電腦的寬度):1280px、1440px、1600px、1920px、2560px、3840px,你要做全屏的網頁首頁,按這幾個尺寸來構化就可以了。
Ⅲ Web網頁設計尺寸,到底選哪個
很多新手設計師都會面對一個問題,Web頁面尺寸寬度到底選哪個?
其實答案並不是固定的,可以做成1920,也可以做1280。黑客認為最重要的決定因素在於你自己的工作電腦解析度。
這是廣告公司AdDuplex送出的統計大數據
市面上的電腦屏幕尺寸多種多樣,不過大部分都集中在這幾種:
1920-1080:目前常用設備中最大的尺寸(Mac 5K屏除外)
1440-900:15寸MacBook Pro為代表,很多UI設計師首選
1366-768:普通的PC電腦
1280-800:13寸MacBook Pro為代表
在以上設備中,13寸和15寸Mac Book,雖然實際解析度非常大,但由於是Retina屏幕,視覺展示上還屬於以上范圍。
所以,網站的內容顯示寬度大部分都在1200px以內,確保小的電腦屏幕能顯示全網頁內容。更早的時候很多都是960px,不過由於屏幕越來越大,目前比較少。
在了解過電腦屏幕尺寸後,網頁設計尺寸(本文專指寬度,高度不限)選哪個也很清楚了:選哪個都不會錯。
事實上很多設計師是這么做的:用小於1920的屏幕去設計1920的網頁。
這樣設計沒錯,而且是很多培訓機構、學校的標準定義:網頁設計寬度尺寸是1920。
但是如果你用了這個神器的Sketch插件,就不會按照之前的結論來設計了。
以前黑客有介紹過。 點擊查看
設計師在做界面的過程中需要經常查看設計稿,以便及時修改設計細節。除非你用1920的屏幕可以設計1920尺寸,否則我們的設計尺寸和屏幕尺寸不相同,就會導致預覽的界面偏移,需手動調節居中。
如果設計的尺寸和屏幕尺寸保持一致,那麼插件預覽的效果就會完美,不用每次都要去調節。
本質上網頁設計尺寸選哪個都是正確的,關鍵在於怎麼方便、快捷地幫助我們預覽、展示設計稿。
在利用sketch插件頻繁預覽的前提下,黑客建議網頁設計尺寸等於你的工作電腦屏幕尺寸,這會節約你很多時間。在設計後台類的界面時,這個方法的優勢會更加明顯。
最後有一點需要注意,在進行切圖的時候,如果遇到全屏的圖,需要把切圖修改成1920,否則在1920電腦中切圖寬度會不足。不過到了切圖這一步,就屬於設計工作的後期了,我們只需要花點時間把對應切圖改成1920即可。
更多UI設計干貨文章請關注UI黑客
微信公眾號 uihacker
UI黑客官網 http://www.uihacker.com/
UI黑客論壇 http://bbs.uihacker.com/
Ⅳ Web開發教程大全,標準的網頁一屏到底是多大
原來的大小是1024*768 現在解析度提高了。是1920*1080
Ⅳ 網頁的設計規范有哪些
一、畫板尺寸
因為網頁尺寸與用戶屏幕相關,而用戶屏幕的種類難以統計。所以我們的設計稿只能主要顧及主流用戶的解析度,其他解析度用適配的方式來解決。在最新版Photoshop網站Web預設尺寸給了我們一些啟示:常見尺寸(1366x768px)、大網頁(1920x1080px)、最小尺寸(1024x768px)、Macbook Pro13 (2560x1600px)、MacBook Pro15(2880x1800px)、iMac 27(2560x1440px)等。
二、文字規范
我們現在都知道了網站上面的文字是通過前端工程師重新寫在代碼里的。那這種文字在瀏覽器上的渲染與系統和瀏覽器有關。
三、圖片規范
網站設計中的圖片常用4(寬):3(高)、16(寬):9(高)、1:1等比例。具體圖片大小沒有固定要求,但整數和偶數為佳。
四、按鈕
按鈕的風格在過去的十幾年發生了很大的變化,由一開始的“斜面與浮雕”風格過渡到後面的“擬物風格”,現在更流行的是扁平風格。
Ⅵ 一般網頁的尺寸是多少
1、800*600解析度下,網頁寬度保持在778以內,就不會出現水平滾動條,高度則視版面和內容決定。
2、1024*768解析度下,網頁寬度保持在1002以內,如果全屏顯示的話,高度是612-615之間.就不會出現水平滾動條和垂直滾動條。(在dw裡面有設定好的標准值, 1024*768頁面的標准大小是955*600,照著它的尺寸做就行了)
只要你的width不超過1003就好,現在很多網站width在1000px 或者980 這樣大氣點,高度無所謂
Ⅶ 網頁設計合適的頁面尺寸是多少
網頁設計選用的解析度是72像素,使用的畫布尺寸1920px*1080px。但是並不意味著在整個畫布上進行設計,一般採用全屏展示和兩側留白的方式。
全屏展示,是整個網站看起來大氣一些,但是布局要合理安排,不然看起來有些傻大的感覺。
兩側留白是為了適配不同電腦屏幕的尺寸,能夠確保網站只是電腦站的時候一些筆記本電腦也能顯示全面網站的內容區域,內容限時區域在好控制在1000px-1200px。
Ⅷ 現在的網頁設計默認的尺寸做多大的
網頁設計合適尺寸,已經有了很大改變,不需要擔心設備尺寸不同的問題,以目前主流形式來看,有以下:
1、pc端網頁的設計稿尺寸是寬度1920px,高度最小是1080px , 主體內容在1200px內就行,比較規范。
2、移動端網頁的設計尺寸可以考慮680px和720px
Ⅸ web界面設計規范有哪些
一、網頁尺寸
製作網頁時,我們選用的解析度是72像素/英寸,使用的畫布尺寸1920px*1080px。
但是並不代表我們可以在整個畫布上作圖。
網頁的布局主要有兩種,左右型布局和居中型布局。布局的不一致,使得可設計的空間也不相同。
二、網頁字體
字體設計的總原則是:可辨識性和易讀性。
網頁的文字設計是系統默認的字體:宋體、微軟黑體、蘋果系統黑體,英文則建議使用arial無襯線字體
常用的字型大小大小有以下幾種:
12px是應用於網頁的最小字體,適用於非突出性的日期,版權等注釋性內容。
14px 則適用於非突出性的普通正文內容。
16px、18px或者20px 適用於突出性的標題內容。
Ⅹ 小屏幕大視野,如何讓筆記本模擬出1920寬度網頁效果
作為UI設計師,我們在做web頁面的時候會接觸到各種各樣的屏幕尺寸,最常用的有1920-1080、1440-900、1366-768、1280-800等,目前用戶電腦中最大的尺寸當屬1920了(Mac的5K屏幕可以忽略,用戶基數太少)。
問題隨之而來:很多設計師使用13寸和15寸的Retina MacBook,默認視覺解析度(並非物理解析度)只有1280-800和1440-900,有的公司不給配外接屏幕,那麼如何用筆記本預覽1920的網頁效果呢?
Chrome瀏覽器的設備模擬功能可以幫助我們,只用一台筆記本就可以模擬任何屏幕尺寸。
如何在筆記本電腦上模擬大尺寸網頁和手機網頁
了解Chrome瀏覽器的設備模擬功能
1-在頁面上右鍵選擇檢查
2-點擊下方彈出層左側手機圖標
3-發現頁面變化縮放了,點擊頂部的設備切換按鈕
4-選擇Edit...打開設備編輯頁面
在編輯頁面中Chrome內置了很多常用的設備尺寸,平板、手機電腦都有。所以很多時候我們不用手機,在電腦中就可以模擬預覽手機網站的頁面效果。
接著我們來添加一個1920的屏幕尺寸,步驟見下圖:
為了好區分,設備名稱直接寫1920,後面如果想添加1280,就寫1280。
我們現在添加的是Web頁面,所以一定要選擇Desktop,手機的話選擇Mobile。Chrome已經為我們設置好各種手機尺寸了,所以不再添加。
還有一點需要注意,高度我寫的是960,並非1080,這是為什麼呢?跟網頁實際顯示範圍相關。
拿1920-1080屏幕電腦來說,實際上,網頁的首屏展示高度並非是1080,而是要減去電腦系統的菜單欄和Chrome的各種欄目高度,大約是120,1080-120=960。所以我們的模擬尺寸高度也需要減小。如下圖:
瀏覽器不一樣可能這個值有所差別。在PC中,系統菜單欄是在下方,道理一樣。
添加完1920的設備後,就可以在設備切換中選擇1920來模擬了。
由於電腦屏幕小,只能顯示以30%的縮放來展示,不過這個縮放比例可以調節,大家可以嘗試下。
還有一種縮放網頁的方法是直接減小網頁比例,具體做法是快捷鍵cmd++/-。
但是縮小到一定程度,網頁字體就不會再縮小,整個樣式布局也會被破壞,效果很不好,不建議使用。
所以我們以後其實不需要申請外接屏幕,一樣可以用筆記本預覽大屏幕效果,希望本文能夠給各位UI設計師帶來設計效率上的提升。
更多UI設計干貨文章請關注UI黑客
微信公眾號 uihacker
UI黑客官網 http://www.uihacker.com/
UI黑客論壇 http://bbs.uihacker.com/