成都seo博客

蔡江博客

企業網站推廣中網站設計布局及移動適配的重要性

作者:choi 日期:2020-08-06 17:23 瀏覽:

  在考慮網站頁面設計樣式布局的時候,或者后期與UI、前端設計人員溝通的時候,經常會被問到“這個頁面是定寬頁面還是全屏頁面?”“針對不同移動終端做適配”“這個頁面是使用瀏覽器的滾動條還是頁面內滾動?”本文作者分享了自己的解決方法。

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

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

  1.定寬頁面

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

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

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

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

  2.全屏頁面

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

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

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

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

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

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

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

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

  二 頁面高度

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

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

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

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

  三 總結

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


文章來源:未知
文章標題:企業網站推廣中網站設計布局及移動適配的重要性
本文地址:http://www.288037.tw/seo/11292.html
相關文章
企業網站推廣中網站設計布局及移動適配的重要性 企業網站推廣中網站設計布局及移動適配的重要性

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

電商網絡SEO站內優化細節分析 電商網絡SEO站內優化細節分析

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

成都網站推廣效果大失所望?SEO診斷優化扭轉局面 成都網站推廣效果大失所望?SEO診斷優化扭轉局面

在做網絡優化人員及網站數量快速增長的同時,現今做網站SEO的難度變得越來越大,很多站長們都在抱怨網站排名不好,關鍵

企業網絡推廣如何利用文章優化關鍵詞排名? 企業網絡推廣如何利用文章優化關鍵詞排名?

對于SEO行業有一定了解的人來說,做網站優化必然受不了文章內容的輸出,尤其是現今很多行業企業站或者個人站數量不計其

做SEO推廣讓餐飲品牌吹響反"疫"號角 做SEO推廣讓餐飲品牌吹響反"疫"號角

2020年注定就是不平凡的一年,在疫情的影響下,很多行業都閉門歇業;在復產復工后,很多行業的倒閉率都明顯增長;而餐飲行

成都SEO網站內鏈優化技巧分析 成都SEO網站內鏈優化技巧分析

隨著做網絡營銷企業數量的增長,現今做網站推廣的人也變得越來越多,很多人在做網站SEO的過程中,常常忽視很多SEO優化細

成都SEO排名減緩收錄較差?站內優化基礎不可忽視 成都SEO排名減緩收錄較差?站內優化基礎不可忽視

現今從事網站SEO推廣的企業或者個人數量變得越來越多,同時要想能夠在搜索引擎中獲得更多的流量和更靠前的排名,這還得

網絡優化困境重重,SEO技巧突瓶頸 網絡優化困境重重,SEO技巧突瓶頸

在當前網絡營銷十分盛行的時代,現今做網站優化的企業數量也變得越來越多,通過SEO優化提升網站關鍵詞在百度中得排名,

企業SEO優化排名止步不前,站內優化技巧是捷徑 企業SEO優化排名止步不前,站內優化技巧是捷徑

對于要做網站推廣的企業來說,要想能夠在搜索引擎中獲得好的排名,那么對百度算法,及SEO技巧就要有一定的了解,否則網

成都網絡推廣不知所措?站內優化是關鍵 成都網絡推廣不知所措?站內優化是關鍵

對于常年混跡于SEO行業的人來說,要做好網站關鍵詞排名,新站優化之初就得做好網站內部優化,做好網站各個優化細節,便

  • 精彩推薦
  • 最近發布
分享到:
Copyright © 2016-2021 「蔡江博客」版權所有
蜀ICP備15028159號-6  
網站地圖 | 技術支持:點瑞網絡
福彩福建快3走势图