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

    網頁設計也需要從用戶的體驗角度出發,特別是寬度不超過一屏,其最基本的表現是瀏覽器不出現橫向滾動條。深圳網站設計公司大腕互聯專注網站建設,網頁設計等建站服務。

    960像數這個神奇的數字出現之初,大家各說紛紜,有說是因為蘋果設計師在1024×768的分辨率下打開瀏覽器的寬度時974像數,減去瀏覽器的寬度本生的寬度14像數,這里這個神奇的960像數就這樣出生了;也有的說在人眼不轉動的情況下所能看到的最大的寬度是960像數。我相信說這話的人真是無時不刻不在考慮用戶體驗啊

    接下來,我們會更新一些網頁設計的干貨,幫助更多 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 截圖工具量一下主要內容區域的寬度,很難出現大于這兩個數值的情況。

    與門戶類相比電商的改版更徹底了,我們來看下主流電商現在的頁面寬度:京東1210像素、當當1200像素、1號店1200像素、新蛋1200像素、蘇寧易購1190像素、易訊1225像素、亞馬孫自適應(最小寬度980像素)??梢钥闯霈F在電商主流的頁面設計是1200像素。

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

    與門戶類相比電商的改版更徹底了,我們來看下主流電商現在的頁面寬度:京東1210像素、當當1200像素、1號店1200像素、新蛋1200像素、蘇寧易購1190像素、易訊1225像素、亞馬孫自適應(最小寬度980像素)??梢钥闯霈F在電商主流的頁面設計是1200像素。


    2. 展示類型

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

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

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

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

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

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

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

    網頁刪格系統是由平面網格系統衍生出來,針對網頁使用的排版系統。

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

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


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

    如需廣州網站建設,網站SEO優化,微信小程序開發,微信公眾號運營,企業郵箱注冊,購買服務器請聯系我們華創網絡(www.dengyingchao.com ),聯系方式:020-8633-7339。


    录像片,欧洲老妇BWWⅩXX,亚洲毛片无码不卡AV在线播放
  • <menu id="6iiga"><tt id="6iiga"></tt></menu>