網頁寬度到底該怎么定?這篇全面好文告訴你! - 優設網 - UISDC

網頁寬度到底該怎么定?這篇全面好文告訴你!

2019/07/29 57108評論 37

PC 端網頁設計對于很多從事 UI 行業的新人來說是一個充滿未知的領域,對于怎么進行基本的畫布創建,規格設置,都處于兩眼一抹黑的狀態。雖然這是因為多數人沒有系統的學習 UI 知識,它并不是一個合理的現象。

接下來,我們會更新一些網頁設計的干貨,幫助更多 UI 設計師了解網頁設計的基礎知識。

首先,網頁設計的第一步就是畫布創建了,這也是困擾我們的第一個難題。由于市面上存在多種前端技術的應用,以及一些歷史遺留問題、設計場景差異等因素的影響,我們在搜索「網頁設計寬度」這類問題的時候,得到的結果會有非常多的版本,導致更加迷茫。

所以,了解網頁設計的寬度定義,勢必要理解它們的底層原因,因為寬度的設置:只有合適的寬度,沒有絕對正確的寬度。

對于任何網頁設計的項目,寬度設定的標準都是不同的,而在選擇寬度的過程里,需要考慮 2 個核心因素:

1. 設備因素

設備因素即確認項目主要展示的屏幕設備是哪一種,它們對應的分辨率是多少。最粗略的劃分,可以將設備劃分成 PC 端和移動端。這兩者受制與顯示的尺寸,系統的限制,在設計和操作上都有比較大的區別。

瀏覽設備

瀏覽設備即網頁用戶所使用的屏幕類型,主要考量的標準是屏幕的分辨率(長寬像素數)。常見的 PC 屏幕分辨率有 1280×800、1600×900、1440×800、1366×768、1920×1080、2560×1440 等,再加上一些更加不常見的(比如 surfacebook 的 3000×2000),可以列出數十種,這是大家都已經知道的事情。

所以基于這個前提,很多人會去查找關于屏幕使用分辨率的統計表格,比如下圖這種,然后得出最常用的分辨率是 1080P。有了數據支撐,我們不就可以開始動手設計了?

實際上這個做法是錯誤的。對于網頁設計來說,我們首先應該確定的是──最小適配屏幕。

因為在一般場景下,顯示器分辨率如果大于畫布,內容可以被我們正常訪問;如果小于畫布,內容就會顯示不全,相當于低于這個分辨率設備的用戶被我們放棄了。

所以,做個簡單的計算,如果以 1920×1080 為基礎,則支持的用戶數為 27.38 %;如果是 800×600,則支持用戶數低于 3%。

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

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

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

2. 展示類型

展示類型,也只有兩點,即寬度適應屏幕,或者是定寬。

先說說第一種,可能有不少人已經聽過響應式布局和自適應設計的大名,先不論它們有什么區別,它們代表了網頁顯示內容隨瀏覽器窗口尺寸變化而變化的技術,比如使用 Bootstrap 架構的星巴克官網,更改瀏覽器窗口寬度后,可以得到以下不同的結果。

如果你現在還需要通過這篇內容學習網頁寬度制定的情況下,我是不建議在真實項目中使用這種展示類型的。因為它們都需要對前端架構有一定的熟悉,以及對 CSS 的屬性特性有基本認識,否則就無法在設計過程中直接考慮到其它分辨率下顯示的效果,以及制定不同元素的自適應方式。

響應式設計的規則非常靈活,會受到更多因素的影響,完整的響應式界面設計會如上圖所示,提供多種尺寸的設計圖。常見的如 1920、1080、640 寬。

如果是定寬的設計,那么就回到前面所說,我們只需要以適配 1280 或 1024 的屏幕展開設計即可。但是,網頁的實際內容區域,和我們要適配的范圍是不同的。

在瀏覽器中,首先有右側滾動條的因素影響,并且主體內容的兩側也要預留出內邊距。

所以,我們真正創建的網頁內容區域,是小于 1280 或者 1024 的。而得出具體的內容區域尺寸的方法,是通過網頁的刪格系統計算出來的。

網頁刪格系統是由平面網格系統衍生出來,針對網頁使用的排版系統。如果稍微看過這類文章的同學都會看見一個公式:

(Axn)- i = W

這個做法就是通過將內容區域劃分成若干內容塊和間隔模塊的方式,輔助我們排版。在本篇內容里不做具體介紹,只需要關注結果即可。

如果選擇適配 1280,那么設計內容的區域寬通常為 1180、1190。而在適配 1024 下,那么內容區域寬常見的就有 950、970、990 等。當我們創建完完整分辨率的畫布,再通過參考線的方式將內容區域規劃出來即可。

對于網頁設計來說,最重要的參數就是內容區域的寬度,但也有一些元素是例外,很多人可能發現網頁有一些元素是超過正常的內容區域的(無論是對一般顯示模式或是自適應模式),最常見的就是頂部的導航欄和底部的頁腳區域。比如打開淘寶無論拉伸得多長,內容區域固定是 1190 寬,而導航欄卻永遠撐滿整個瀏覽器。

所以,我們不會將這些內容的寬度計算在內,在設計稿中只要設計了這樣的元素,和前端人員適當溝通和標注,就可以獲得想要的效果。

總結

其實講了一堆,最后我們用一個表格來總結一下。

關于 PC 端網頁設計寬度的設定介紹到這里就結束了,如果有什么疑問,可以在評論區留言。

歡迎關注作者的微信公眾號:「超人的電話亭」

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址:http://www.dbw33.com/web-page-width

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

設計圈干貨 界面設計 排版布局 版式設計 職場 優設專訪 優設大課堂 設計師干貨 設計達人 配色 web前端開發 視覺設計 素材下載 AI教程 設計理論 設計流程 神器下載 字體下載 設計師專訪 psd下載 海報設計 設計規范 設計趨勢 用戶體驗設計 動效設計 logo設計 平面設計 圖標設計 ICON 產品設計 神器推薦 App設計 字體設計 職場規劃 酷站推薦 交互設計 ui設計 優秀網頁設計 設計師職場 ps技巧 酷站 用戶體驗 PS教程 網頁設計 經驗分享

您還沒有登錄

優設啟用更安全省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里

久播电影网伦理片