banner 是網頁的主要視覺,為了在不同寬度的手機、平板、電腦上有更好的呈現,設計時就需要特別注意一些特性,例如:原來為電腦設計的圖片,在手機顯示時,因為寬度明顯變窄,高度固定的情況下,圖片置中時兩邊就會被裁掉 (如下圖)。
 
8f246ba135625ebe5748633c8b14d164.png
 
看起來好像很複雜,其實主要的重點只有 3 項:
  1. 重要資訊放中間 (旁邊可能會被裁掉)
  2. 適合的高度 (太大,內容的空間就變小)
  3. 手機、平板、電腦可以放不同的背景圖
螢幕 1920x1080
763256f5d17aa7729296a429c9143f58.png
 
筆電 1280x720 (真實解析度 1920x1080,顯示比例 1:1.5)
f218a74787a309ab3aaa296327bd06f6.png
 
iphone 7 plus 414x736 (真實解析度 1242x2208,顯示比例 1:3)
9038abfd366ca30c929c495aa8104279.png
 
雖然系統也提供 banner 圖片輪播的方法,但主要的設計重點類似,以下就以單張圖片為例,說明主要流程與重點:
重點
  1. 上傳背景圖
  2. 1.
    進入「網站資訊 / 編輯」
    從「系統管理 / 網站設定」進入「網站資訊」,點擊「編輯」即可開始設定 banner 背景圖。
    d7f6c62a606a2c785271e733c8131858_thumb.png
  3. 2.
    上傳 banner 背景圖
    點擊縮圖,就可以上傳圖片 (jpg, png 或 gif)。
    關於圖片的大小規格,請參考下方的主題「設計不同裝置的背景圖」。
    eff0a7a78643a184eecb71feec086cba_thumb.png
  4. 3.
    檢視效果
    接著,就可以用瀏覽器的「開發人員工具」,模擬不同裝置 (電腦、平板、手機) 的閱讀效果,檢查圖片上的重要資訊是否完整呈現。
    b4beb8d23cbb8b5139c75d7f8e914a37_thumb.png
  5. 調整背景圖
  6. 4.
    設計不同裝置的背景圖
    雖然可以針對不同的裝置上傳不同的圖片,但因為解析度或螢幕放大比例的因素,即使都是電腦螢幕,也會有兩側被裁切的現象 (如下圖)。
     
    此外,現在螢幕的解析度都非常高,為了提供更細緻的呈現效果 (避免模糊),建議上傳高解析的的圖片,以下是針對不同裝置,建議的圖片大小:
    • 電腦
      建議 1920 x (設定的 banner 高度),呈現效果如下圖。
       
    • 平板
      一般平板的寬度是 768px,但因為超高解析度螢幕的關係,建議可以上傳 1.5 倍的解析度,例如,若設定的高度是 200px 時,可以上傳寬 768x1.5,高 200x1.5 的圖片。
       
    • 手機
      手機的寬度大約是 400px 左右,若設定的高度是 200px 時,因為手機螢幕更細緻,建議上傳 2 倍解析度的圖片,也就是寬 800,高 400 的圖片。
    小提醒:
    若沒有設計對應平板或手機的背景圖,呈現時就會以電腦圖片為主。
     
    螢幕 1920x1080
    465ff9def9583490dc52480ddb66d000.png
     
    筆電 1280x720 (真實解析度 1920x1080,顯示比例 1:1.5)
    0dff9b063c78e6b1d332f49b9934cfa3.png
  7. 5.
    調整 banner 高度
    網站 banner 的預設高度為 180px,可以依照需求自行調整。如果是以內容為主的網站,建議 banner 高度不要設太高,避免壓縮到內容的呈現空間。
     
    下圖是高度分別為 180px, 240px 和 360px 在手機的效果。
    e567e19d3a37b999e57701f7c6f478a8_thumb.png
  8. 6.
    手機不顯示 banner
    由於手機的空間有限,也可以設定不顯示 banner。
    4660e8bd5a7a01324f4a1de04e5e2818_thumb.png
  9. 7.
    背景圖的對齊設定
    系統提供了背景圖「水平對齊」及「垂直對齊」的設定,可以更符合展示圖片資訊的需求。以「背景水平對齊」為例,置中與靠右的效果如下圖。
     
    置中對齊
    65c1c7c76b1f257592b575dff3dce76f.png
     
    靠右對齊
    54dfe3863349d2e291ed725bc416e98e.png
    位置
    資料夾名稱
    系統管理 ~ 網站基礎管理
    發表人
    jell
    單位
    集智學習科技官方網站
    建立
    2021-03-11 13:14:22
    最近修訂
    2021-03-22 18:01:54