成都seo博客

蔡江博客

網站頁面設計布局與瀏覽器適配平衡點

作者:choi 日期:2020-03-26 21:25 瀏覽:

  在考慮web頁面布局的時候,或者后期與UI、前端同事溝通的時候,經常會被問到“這個頁面是定寬頁面還是全屏頁面?”“針對大小屏幕這個頁面如何適配?”“這個頁面是使用瀏覽器的滾動條還是頁面內滾動?”本文作者分享了自己的解決方法。

  一、頁面寬度:定寬頁面or全屏頁面?

  采用定寬或者全屏。而大部分網站,是需要根據頁面內容,才能決定是使用定寬還是全屏。

  1.定寬頁面

  目前市場上,筆記本常見的屏幕分辨率為1366*768;臺式機常見分辨率有1440*900、1920*1080。市場上可能遇到的最低分辨率為1280*768,比如投影儀或者其他設備(其他更小的屏幕可暫不考慮)。

  為了保證在小屏下,內容可查看完整,因此目前常用的定寬頁面尺寸是1200px,實際可能會根據所展示的內容,頁面導航,頁面其他元素,頁面所要適配的終端等,進行調整。比如,簡書首頁的寬度為960px;京東訂單詳情為1210px。

  定寬頁面常用于:詳情,圖片,字段并不多的列表,內容流等。

  定寬頁面雖然可以免去屏幕適配的煩惱,但是對于有些內容,可能會感覺在大屏下顯得過于小氣,體驗并不好,比如圖片。而站酷在這一點上,處理的比較好,可以借鑒。當屏幕寬度大于 1600 時,采用 1400 的定寬;當屏幕小于1600,使用 1150 的寬,同時圖片大小也會發生改變。(注:淘寶和京東的商品列表頁也采用了類似的處理方式)

  2.全屏頁面

  全屏頁面指,除了頁面左右兩側的邊界,頁面中的內容會隨著屏幕大小而撐滿。但是為了保證頁面內容正常顯示,一般會設定最小的適配寬度,頁面低于該寬度不再設配,頁面出現橫向滾動條。

  全屏頁面常用于:網站宣傳頁、采用左側導航的管理類網站、字段很多的列表頁、需要全屏查看的看板頁、使用瀑布流的頁面,或者頁面中有用戶需要可視區域更大才可方便操作的元素,比如地圖軌跡等。

  對于全屏頁面,需要考慮,當屏幕變大或者變小時如果適配。一般常用的適配方式有:

  根據屏幕大小等比例放大(或者根據不同的屏幕設定不同的放大/縮小比例);

  根據屏幕大小拉寬元素,元素高度不變(大屏下,可能會導致元素比例變形,視覺效果不佳);

  根據屏幕大小,增加/減少每行顯示的內容多少(多數適合于頁面內容為網格布局的情況);

  使用bootstrap等框架,采用響應式布局(根據屏幕大小,改變大小的同時改變元素排版方式)。

  具體采用哪種適配方式,需根據頁面內容,以及內容在大小屏幕下的顯示情況,以及整個網站所使用的框架等進行選擇。

  二 頁面高度

  當頁面內容超出頁面高度時,是采用頁面滾動條,還是模塊內滾動?

  頁面滾動條適合于內容流的頁面。這種頁面,頁面底部固定或底部無其他元素。另外,這種滾動方式需與‘返回頂部’按鈕配合使用。當數據需要分頁時,多采用滾動分頁。

  模塊內滾動,常用于操作需固定在頂部/底部的頁面。當頁面中有多個模塊需要內滾動或者模塊被分割的較小時,需考慮在小屏下每個模塊的可視區域是否過小而無法進行操作。當數據需要分頁時,多采用翻頁分頁。

  如下示例:由于在 1366 的屏幕下,內容的顯示高度除去瀏覽器的高度以及網站導航的高度,可能只有 650 左右,導致可視區域過小影響用戶體驗。因此整個頁面的布局可能需要重新調整。

  三 總結

  設計頁面時,需特別注意,屏幕大小對頁面的影響。否則,會導致整個頁面的交互布局需重新設計。另外,具體使用哪種方式,需權衡各自的利弊,最大程度保證大小屏幕下,用戶的體驗不受影響。


文章來源:未知
文章標題:網站頁面設計布局與瀏覽器適配平衡點
本文地址:http://www.5837392.live/seo/11292.html
相關文章
電商網站站內優化中的棘手問題處理辦法 電商網站站內優化中的棘手問題處理辦法

電商網站SEO優化,相信很朋友都不是很 了解,那么電商網站常用優化方法有哪些呢?SEO優化中會遇到的問題及解決方法有哪些

網站頁面設計布局與瀏覽器適配平衡點 網站頁面設計布局與瀏覽器適配平衡點

如何平衡好頁面布局與設備適配?

錨文本、關鍵詞、meta標簽優化內容 錨文本、關鍵詞、meta標簽優化內容

要怎樣才可以做好搜索引擎優化是很多網站持有者想要探討的問題,如果讓自己網站的排名有了很大的提高的話就會使得網站

網站頁面設計與網站收錄是否息息相關? 網站頁面設計與網站收錄是否息息相關?

設計精良的網站和設計一般的網站,兩個網站更新的內容哪個更容易被收錄呢?很多人對這個問題的解答并非一句話可以說清

網站打開速度是否影響搜索引擎抓??? 網站打開速度是否影響搜索引擎抓???

網站加載慢會增加跳出率,會給訪客帶來很差體驗,影響網站加速重要性有哪些。網站速度作為排名因素,百度向用戶提供搜

SEOer基礎知識,元標簽的設計和概念 SEOer基礎知識,元標簽的設計和概念

站內優化是SEO優化工作中的重點,不僅僅對排名起著非常重要的作用,更對用戶的感官有著直接的影響。設計良好的網站,能

SEO優化推廣對企業是否還重要? SEO優化推廣對企業是否還重要?

在互聯網時代,想要更好的宣傳自己的產品和店鋪,就得從日常的SEO優化做起。這種優化的方式雖然比較簡單,但卻是必不可

SEO項目主管,如何打造一個SEO團隊? SEO項目主管,如何打造一個SEO團隊?

我們知道這是一個新媒體快速發展的時代,但我們仍然不可否認的是搜索引擎對企業產品轉化,仍然起著積極的推動作用,理

怎樣修改網站標題不會導致百度降權? 怎樣修改網站標題不會導致百度降權?

網站修改標題降權了-怎么修改網站標題對seo優化沒有影響? 在網站優化過程中tittle、keywords、deion占有舉足輕重的地位,清晰

網站快照異常預示網站優化有問題 網站快照異常預示網站優化有問題

什么是搜索引擎快照回檔或倒退呢?什么是搜索引擎不快照或不更新呢?是什么原因導致快照回檔或倒退的呢?很多網站建好以后

  • 精彩推薦
  • 最近發布
分享到:
Copyright © 2016-2021 「蔡江博客」版權所有
蜀ICP備15028159號-6  
網站地圖 | 技術支持:點瑞網絡
多人扑克牌玩法大全 正版台湾码资料网站 52大庆麻将苹果下载 天空网赚论坛 股票面值与发行价格 泳坛夺金河南近200期 手机炒股怎样开户 互联网平台赚钱吗 打麻将游戏在线玩 平特肖推算法 宝博斗地主网址是多少