思途5.0圖片規范

一、說明

 此為標準版本的圖片規范：暫時的規范，待調整優化

    本次圖片規范主要統一用戶上傳的圖片，暫未涉及系統默認圖標

二、圖片規范

?1、CMS 5.0圖片處理方式?

（1）正常情況：按照后臺的標準圖片上傳

   A：處理方式：采用圖片寬高等比壓縮的方式

   B：優點：圖片不會存在被裁剪、拉伸的情況，不會失真

如圖：

  原圖（上傳至線路中）：會完整顯示，圖片不失真

  在線路詳情頁中顯示：

（2）異常一：所上傳的圖片寬高均大于標準尺寸

   A：處理方式：壓縮裁剪圖片

     將原圖最短邊壓縮為標準尺寸，較長邊裁剪為標準尺寸

   B：避免頁面布局混亂

如圖：

  原圖（上傳至線路中）：

  在線路詳情頁中顯示：被裁剪至與標準尺寸相同

3）異常二：所上傳圖片寬（或高）小于標準尺寸

   A：處理方式：裁剪較長邊

     直接顯示最小邊，將大于標準尺寸的邊做裁剪

   B：避免圖片失真、模糊的問題

如圖：

  原圖（上傳至線路中）：

  在線路詳情頁中顯示：會裁剪比標準尺寸長的邊

（3）異常三：所上傳圖片寬高均小于標準尺寸

   A：處理方式：不做處理，直接顯示

   B：可能會導致布局錯亂的情況

如圖：

  原圖（上傳至線路中）：

???

2、以下為PC端圖片的建議尺寸

（1）電腦端的圖片上傳建議尺寸與前臺顯示的尺寸列表

  A、包括后臺的建議上傳尺寸；

  B、首頁模板一、首頁模板二、首頁模板三各產品封面圖片的大小

  C、各產品欄目頁（產品封面、推薦封面）、產品篩選頁的產品封面、產品詳情頁中的圖片尺寸大小    （包括展示頁的大圖以及展示列表的小圖）

  D、線路詳情頁的行程安排中：景點提取到得圖片

  E、目的地詳情頁的封面圖片

  F、攻略詳情頁的產品封面

（2）手機端的圖片位置以及標準尺寸

 A、手機端圖片容器尺寸規范：

   W（寬度）=手機屏幕的尺寸*N%（不同位置圖片的占手機尺寸的比例）

   H（高度）=W寬度/比值M（M值見下表）

 B、移動端尺寸的大小

（3）子站尺寸規范????

（4）廣告尺寸規范

 A、PC版模板一的廣告位置尺寸

 B、PC版首頁模板二的廣告位標準尺寸

 C、PC版首頁模板三的廣告位置標準尺寸

 D、移動端廣告位標準尺寸