當前位置:首頁 > 技術教程>

帝國CMS前端設計-怎樣平衡好頁面布局與屏幕分辨率?

發表日期:2018-07-31 13:56:15文章編輯:池州網站建設瀏覽次數:5800 標簽:    

QQ截圖20180730111224.png

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

文/冬瓜一號

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

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

1.定寬頁面

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

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

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

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

2.全屏頁面

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

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

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

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

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

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

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

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

二 頁面高度

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

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

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

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

三 總結

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


 

全站導航

其他新聞

靈動標簽判斷奇數偶數實現不同的效果奇偶數

這篇文章主要為大家詳細介紹了帝國CMS靈動標簽中用if判斷第幾條附加特殊樣...

日期:2019-06-18

當前欄目下所有的標題分類并給當前標題分類高亮

<?php //判斷當前欄目是否有設置標題分類 $tr=$empire->fetch1("select tti...

日期:2019-05-26

帝國CMS錯誤報告功能啟用、防垃圾灌水、統計、增加報告分類

一、錯誤報告啟用 內容模板加 <a href="&#091;!--news.url--]e/public/repo...

日期:2018-11-24

幾何元素、大膽鋪色、雙重曝光,這些新技能你掌握了嗎?

不知不覺 2018 年的余額已經只剩下六分之一不知道大家年初定下的計劃有沒有...

日期:2018-11-01

列表頁調取副表字段befrom,writer,newstext

列表模板中要調用副表字段內容需要采用&ldquo;list.var支持程序代碼&rdquo;...

日期:2018-10-30

客戶案例

池州某信息技術服務公司網站

網站使用的是PC+移動端判斷跳轉的。主色調為藍色,突出科技主題,呈現服務宗旨...

日期:2019-06-18

池州某加工生產企業工程公司官方網站

...

日期:2019-05-26

某縣生產力促進中心官方網站

...

日期:2019-05-26

廣東中山某大型機械工程公司官方網站

這是廣東一家大型進出口機械設備制造公司,實力雄厚。網站是響應式的。客戶對...

日期:2018-11-06

帝國網站后臺登錄模板(帶動畫)

閑來無事,看到一個很漂亮的登錄模板,就順手修改成了帝國CMS7.5的后臺登錄模板...

日期:2018-11-02

下载麻将游戏四人麻将