免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

企業(yè)網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)頁(yè)面寬度是多少

2016-09-26    分類: 網(wǎng)站設(shè)計(jì)

PC 端網(wǎng)頁(yè)設(shè)計(jì)對(duì)于很多從事 UI 行業(yè)的新人來(lái)說(shuō)是一個(gè)充滿未知的領(lǐng)域,對(duì)于怎么進(jìn)行基本的畫布創(chuàng)建,規(guī)格設(shè)置,都處于兩眼一抹黑的狀態(tài)。雖然這是因?yàn)槎鄶?shù)人沒(méi)有系統(tǒng)的學(xué)習(xí) UI 知識(shí),它并不是一個(gè)合理的現(xiàn)象。

網(wǎng)頁(yè)設(shè)計(jì)也需要從用戶的體驗(yàn)角度出發(fā),特別是寬度不超過(guò)一屏,其最基本的表現(xiàn)是瀏覽器不出現(xiàn)橫向滾動(dòng)條。深圳網(wǎng)站設(shè)計(jì)公司大腕互聯(lián)專注網(wǎng)站建設(shè),網(wǎng)頁(yè)設(shè)計(jì)等建站服務(wù)。

960像數(shù)這個(gè)神奇的數(shù)字出現(xiàn)之初,大家各說(shuō)紛紜,有說(shuō)是因?yàn)樘O果設(shè)計(jì)師在1024×768的分辨率下打開(kāi)瀏覽器的寬度時(shí)974像數(shù),減去瀏覽器的寬度本生的寬度14像數(shù),這里這個(gè)神奇的960像數(shù)就這樣出生了;也有的說(shuō)在人眼不轉(zhuǎn)動(dòng)的情況下所能看到的大的寬度是960像數(shù)。我相信說(shuō)這話的人真是無(wú)時(shí)不刻不在考慮用戶體驗(yàn)啊

接下來(lái),我們會(huì)更新一些網(wǎng)頁(yè)設(shè)計(jì)的干貨,幫助更多 UI 設(shè)計(jì)師了解網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)知識(shí)。

首先,網(wǎng)頁(yè)設(shè)計(jì)的第一步就是畫布創(chuàng)建了,這也是困擾我們的第一個(gè)難題。由于市面上存在多種前端技術(shù)的應(yīng)用,以及一些歷史遺留問(wèn)題、設(shè)計(jì)場(chǎng)景差異等因素的影響,我們?cè)谒阉鳌妇W(wǎng)頁(yè)設(shè)計(jì)寬度」這類問(wèn)題的時(shí)候,得到的結(jié)果會(huì)有非常多的版本,導(dǎo)致更加迷茫。

所以,了解網(wǎng)頁(yè)設(shè)計(jì)的寬度定義,勢(shì)必要理解它們的底層原因,因?yàn)閷挾鹊脑O(shè)置:只有合適的寬度,沒(méi)有絕對(duì)正確的寬度。

對(duì)于任何網(wǎng)頁(yè)設(shè)計(jì)的項(xiàng)目,寬度設(shè)定的標(biāo)準(zhǔn)都是不同的,而在選擇寬度的過(guò)程里,需要考慮 2 個(gè)核心因素:

1. 設(shè)備因素

設(shè)備因素即確認(rèn)項(xiàng)目主要展示的屏幕設(shè)備是哪一種,它們對(duì)應(yīng)的分辨率是多少。最粗略的劃分,可以將設(shè)備劃分成 PC 端和移動(dòng)端。這兩者受制與顯示的尺寸,系統(tǒng)的限制,在設(shè)計(jì)和操作上都有比較大的區(qū)別。

瀏覽設(shè)備

瀏覽設(shè)備即網(wǎng)頁(yè)用戶所使用的屏幕類型,主要考量的標(biāo)準(zhǔn)是屏幕的分辨率(長(zhǎng)寬像素?cái)?shù))。常見(jiàn)的 PC 屏幕分辨率有 1280×800、1600×900、1440×800、1366×768、1920×1080、2560×1440 等,再加上一些更加不常見(jiàn)的(比如 surfacebook 的 3000×2000),可以列出數(shù)十種,這是大家都已經(jīng)知道的事情。

所以基于這個(gè)前提,很多人會(huì)去查找關(guān)于屏幕使用分辨率的統(tǒng)計(jì)表格,比如下圖這種,然后得出最常用的分辨率是 1080P。有了數(shù)據(jù)支撐,我們不就可以開(kāi)始動(dòng)手設(shè)計(jì)了?

實(shí)際上這個(gè)做法是錯(cuò)誤的。對(duì)于網(wǎng)頁(yè)設(shè)計(jì)來(lái)說(shuō),我們首先應(yīng)該確定的是──最小適配屏幕。

因?yàn)樵谝话銏?chǎng)景下,顯示器分辨率如果大于畫布,內(nèi)容可以被我們正常訪問(wèn);如果小于畫布,內(nèi)容就會(huì)顯示不全,相當(dāng)于低于這個(gè)分辨率設(shè)備的用戶被我們放棄了。

所以,做個(gè)簡(jiǎn)單的計(jì)算,如果以 1920×1080 為基礎(chǔ),則支持的用戶數(shù)為 27.38 %;如果是 800×600,則支持用戶數(shù)低于 3%。

這么考慮的話,我們是不是只要支持最小的分辨率即可?當(dāng)然也不是。

在今天,1024 以下寬度的設(shè)備已經(jīng)非常稀少,即便是 1024 本身,主流的設(shè)備也是平板而不是一般的 PC 電腦。當(dāng)這些設(shè)備的數(shù)量低到成為絕對(duì)的非主流時(shí),是可以選擇忽略它們,以滿足更多人的需要。

所以通常,我們最低支持的分辨率,不是 1024×768 就是 1280×800。如果大家不相信,可以去各類網(wǎng)站中,用 QQ 截圖工具量一下主要內(nèi)容區(qū)域的寬度,很難出現(xiàn)大于這兩個(gè)數(shù)值的情況。

與門戶類相比電商的改版更徹底了,我們來(lái)看下主流電商現(xiàn)在的頁(yè)面寬度:京東1210像素、當(dāng)當(dāng)1200像素、1號(hào)店1200像素、新蛋1200像素、蘇寧易購(gòu)1190像素、易訊1225像素、亞馬孫自適應(yīng)(最小寬度980像素)。可以看出現(xiàn)在電商主流的頁(yè)面設(shè)計(jì)是1200像素。

先來(lái)分析下那個(gè)時(shí)代主流大戶時(shí)至今日的頁(yè)面寬度就5到6年前或許更早(下文中姑且說(shuō)5年前),大家討論頁(yè)面設(shè)計(jì)寬度時(shí)基本都在950像素到1000像素之間,用960像數(shù)來(lái)設(shè)計(jì)為大多數(shù)網(wǎng)頁(yè)設(shè)計(jì)師接受,包括直到現(xiàn)在960PX還是指導(dǎo)著絕大部分門戶類的設(shè)計(jì)。在那個(gè)流行960像素的時(shí)代騰訊用的是910像素,而在今年騰訊的新首頁(yè)已改版為1000像素。與騰訊同步的還有比如鳳凰網(wǎng)、新華網(wǎng)(在這里吐槽下新華網(wǎng)頁(yè)面最外面的黑框)也是1000像素。搜狐、新浪依舊是950像素,網(wǎng)易保持960像素。淘寶網(wǎng)首頁(yè)1000像素(淘寶子頻道頁(yè)比如:點(diǎn)卡950像素、男裝990像素等各部相同),淘寶系列新推的網(wǎng)站比如:聚劃算990像素、天貓970像素、天貓電器城990像素、一淘網(wǎng)1200像素。

與門戶類相比電商的改版更徹底了,我們來(lái)看下主流電商現(xiàn)在的頁(yè)面寬度:京東1210像素、當(dāng)當(dāng)1200像素、1號(hào)店1200像素、新蛋1200像素、蘇寧易購(gòu)1190像素、易訊1225像素、亞馬孫自適應(yīng)(最小寬度980像素)。可以看出現(xiàn)在電商主流的頁(yè)面設(shè)計(jì)是1200像素。

2. 展示類型

展示類型,也只有兩點(diǎn),即寬度適應(yīng)屏幕,或者是定寬。

先說(shuō)說(shuō)第一種,可能有不少人已經(jīng)聽(tīng)過(guò)響應(yīng)式布局和自適應(yīng)設(shè)計(jì)的大名,先不論它們有什么區(qū)別,它們代表了網(wǎng)頁(yè)顯示內(nèi)容隨瀏覽器窗口尺寸變化而變化的技術(shù),比如使用 Bootstrap 架構(gòu)的星巴克官網(wǎng),更改瀏覽器窗口寬度后,可以得到以下不同的結(jié)果。

如果你現(xiàn)在還需要通過(guò)這篇內(nèi)容學(xué)習(xí)網(wǎng)頁(yè)寬度制定的情況下,我是不建議在真實(shí)項(xiàng)目中使用這種展示類型的。因?yàn)樗鼈兌夹枰獙?duì)前端架構(gòu)有一定的熟悉,以及對(duì) CSS 的屬性特性有基本認(rèn)識(shí),否則就無(wú)法在設(shè)計(jì)過(guò)程中直接考慮到其它分辨率下顯示的效果,以及制定不同元素的自適應(yīng)方式。

響應(yīng)式設(shè)計(jì)的規(guī)則非常靈活,會(huì)受到更多因素的影響,完整的響應(yīng)式界面設(shè)計(jì)會(huì)如上圖所示,提供多種尺寸的設(shè)計(jì)圖。常見(jiàn)的如 1920、1080、640 寬。

如果是定寬的設(shè)計(jì),那么就回到前面所說(shuō),我們只需要以適配 1280 或 1024 的屏幕展開(kāi)設(shè)計(jì)即可。但是,網(wǎng)頁(yè)的實(shí)際內(nèi)容區(qū)域,和我們要適配的范圍是不同的。

在瀏覽器中,首先有右側(cè)滾動(dòng)條的因素影響,并且主體內(nèi)容的兩側(cè)也要預(yù)留出內(nèi)邊距。

所以,我們真正創(chuàng)建的網(wǎng)頁(yè)內(nèi)容區(qū)域,是小于 1280 或者 1024 的。而得出具體的內(nèi)容區(qū)域尺寸的方法,是通過(guò)網(wǎng)頁(yè)的刪格系統(tǒng)計(jì)算出來(lái)的。

網(wǎng)頁(yè)刪格系統(tǒng)是由平面網(wǎng)格系統(tǒng)衍生出來(lái),針對(duì)網(wǎng)頁(yè)使用的排版系統(tǒng)。

如果選擇適配 1280,那么設(shè)計(jì)內(nèi)容的區(qū)域?qū)捦ǔ?1180、1190。而在適配 1024 下,那么內(nèi)容區(qū)域?qū)挸R?jiàn)的就有 950、970、990 等。當(dāng)我們創(chuàng)建完完整分辨率的畫布,再通過(guò)參考線的方式將內(nèi)容區(qū)域規(guī)劃出來(lái)即可。

對(duì)于網(wǎng)頁(yè)設(shè)計(jì)來(lái)說(shuō),最重要的參數(shù)就是內(nèi)容區(qū)域的寬度,但也有一些元素是例外,很多人可能發(fā)現(xiàn)網(wǎng)頁(yè)有一些元素是超過(guò)正常的內(nèi)容區(qū)域的(無(wú)論是對(duì)一般顯示模式或是自適應(yīng)模式),最常見(jiàn)的就是頂部的導(dǎo)航欄和底部的頁(yè)腳區(qū)域。比如打開(kāi)淘寶無(wú)論拉伸得多長(zhǎng),內(nèi)容區(qū)域固定是 1190 寬,而導(dǎo)航欄卻永遠(yuǎn)撐滿整個(gè)瀏覽器。

所以,我們不會(huì)將這些內(nèi)容的寬度計(jì)算在內(nèi),在設(shè)計(jì)稿中只要設(shè)計(jì)了這樣的元素,和前端人員適當(dāng)溝通和標(biāo)注,就可以獲得想要的效果。

標(biāo)題名稱:企業(yè)網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)頁(yè)面寬度是多少
當(dāng)前鏈接:http://m.newbst.com/news20/49720.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷seo公司;服務(wù)項(xiàng)目有網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

網(wǎng)站托管運(yùn)營(yíng)