思途5.0圖片規(guī)范

一、說(shuō)明

 此為標(biāo)準(zhǔn)版本的圖片規(guī)范：暫時(shí)的規(guī)范，待調(diào)整優(yōu)化

    本次圖片規(guī)范主要統(tǒng)一用戶上傳的圖片，暫未涉及系統(tǒng)默認(rèn)圖標(biāo)

二、圖片規(guī)范

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

（1）正常情況：按照后臺(tái)的標(biāo)準(zhǔn)圖片上傳

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

   B：優(yōu)點(diǎn)：圖片不會(huì)存在被裁剪、拉伸的情況，不會(huì)失真

如圖：

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

  在線路詳情頁(yè)中顯示：

（2）異常一：所上傳的圖片寬高均大于標(biāo)準(zhǔn)尺寸

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

     將原圖最短邊壓縮為標(biāo)準(zhǔn)尺寸，較長(zhǎng)邊裁剪為標(biāo)準(zhǔn)尺寸

   B：避免頁(yè)面布局混亂

如圖：

  原圖（上傳至線路中）：

  在線路詳情頁(yè)中顯示：被裁剪至與標(biāo)準(zhǔn)尺寸相同

（

3）異常二：所上傳圖片寬（或高）小于標(biāo)準(zhǔn)尺寸

   A：處理方式：裁剪較長(zhǎng)邊

     直接顯示最小邊，將大于標(biāo)準(zhǔn)尺寸的邊做裁剪

   B：避免圖片失真、模糊的問(wèn)題

如圖：

  原圖（上傳至線路中）：

  在線路詳情頁(yè)中顯示：會(huì)裁剪比標(biāo)準(zhǔn)尺寸長(zhǎng)的邊

（3）異常三：所上傳圖片寬高均小于標(biāo)準(zhǔn)尺寸

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

   B：可能會(huì)導(dǎo)致布局錯(cuò)亂的情況

如圖：

  原圖（上傳至線路中）：

 在線路詳情頁(yè)中顯示：會(huì)裁剪比標(biāo)準(zhǔn)尺寸長(zhǎng)的邊

???

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

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

  A、包括后臺(tái)的建議上傳尺寸；

  B、首頁(yè)模板一、首頁(yè)模板二、首頁(yè)模板三各產(chǎn)品封面圖片的大小

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

  D、線路詳情頁(yè)的行程安排中：景點(diǎn)提取到得圖片

  E、目的地詳情頁(yè)的封面圖片

  F、攻略詳情頁(yè)的產(chǎn)品封面

（2）手機(jī)端的圖片位置以及標(biāo)準(zhǔn)尺寸

 A、手機(jī)端圖片容器尺寸規(guī)范：

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

   H（高度）=W寬度/比值M（M值見(jiàn)下表）

 B、移動(dòng)端尺寸的大小

（3）子站尺寸規(guī)范????

（4）廣告尺寸規(guī)范

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

 B、PC版首頁(yè)模板二的廣告位標(biāo)準(zhǔn)尺寸

 C、PC版首頁(yè)模板三的廣告位置標(biāo)準(zhǔn)尺寸

 D、移動(dòng)端廣告位標(biāo)準(zhǔn)尺寸