思途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、移動端廣告位標準尺寸