PSD文件尺寸說明
| 當前常用 | 1920 * auto | 內容安全寬度建議:1000-1400, 首屏展示內容建議高:700-750 |
|---|---|---|
| 1920 * 1080 | 一屏內容高度控制 750 以內 | |
| 2K(趨勢) | 2560*1440 | 通常27寸-32寸 (一屏內容高度控制 1000 以內) |
| 4K | 3840*2160 | 通常32寸-65+、電視機 (一屏內容高度控制 1500 以內) |
綜述Tips:
1、PC彈窗寬度盡量保持在800px內(寬屏2K或者4K可等比放大),高度最高不能超過一屏內容高度-100px;比如750內容高度,彈窗最高650px。
2、設計終稿確認后,請整理PSD圖層,按模塊分組,不需要圖層請刪除。
3、交付時盡量保證PSD體積,單個PSD最大不得超過1G。
4、網頁設計文字使用像素(px)單位,不使用點。
5、文字字號使用 整偶數,拒絕出現 單數或小數點。
特殊產品設計規范
| 西山居 | 移動端設計規范 |
|---|---|
| 騰訊互娛 |
QQ主題規范 單機 手Q主題設計規范文檔 心悅俱樂部(模板專題) CF內嵌頁(PSD寬:1240px,頭圖高度請控制在593px以內) |
圖層整理
為了方便重構師能更快捷的查找到對應內容,請設計師們對PSD圖層按區塊內容進行分組并對組簡單命名。分組與內容一一對應。
設計定稿后,將多余不要的圖層刪除(請不要只是隱藏了圖層,重構時通常會要去隱藏顯示一些內容來提取信息,容易把不要需要的圖層與重構時隱藏的混淆)。
彈出層請隱藏放到最頂層。
設計定稿后,將多余不要的圖層刪除(請不要只是隱藏了圖層,重構時通常會要去隱藏顯示一些內容來提取信息,容易把不要需要的圖層與重構時隱藏的混淆)。
彈出層請隱藏放到最頂層。
導航
多頁面設計時通常會有頁面導航信息,請將導航的默認狀態和當前狀態都設計出,分放在兩個文件夾組里即可。
(Tab切換功能和側導航信息也用同樣的方式放置圖層的狀態信息)。
(Tab切換功能和側導航信息也用同樣的方式放置圖層的狀態信息)。
側導航、Tips提示信息
在頁面兩側漂浮的導航或者廣告盡量少用不規則形狀、圓角、投影、外發光的效果。側導航的尺寸,不要太寬或者太高,標屏的用戶可能看不到,體驗差。
簽到功能
各種簽到表格里的狀態(已簽到、未簽到)及簽到按鈕狀態(簽到按鈕、已簽到過之后變灰色按鈕)要注意添加上。
抽獎組件
正常的抽獎控件(目前已有的類型:圓形轉盤抽獎、方形抽獎、老虎機、翻牌)為開發好的flash文件,無需再要求產品重新提動畫,遇到特例時具體再與重構進行溝通。
抽獎控件頁面效果預覽查看示例
圓形抽獎:各獎品360度等分,指針指向正上方一個獎品,注意不要把指針指在了產品間的分割線上。

抽獎控件頁面效果預覽查看示例
圓形抽獎:各獎品360度等分,指針指向正上方一個獎品,注意不要把指針指在了產品間的分割線上。

方形抽獎:獎品圖片大小一定要保持一致。
登錄功能
頁面中牽涉到有關抽獎、領取、簽到等開發性功能或者關系到個人帳戶時,頁面中一定要有登錄功能(請注意不要將“登錄”寫成了“登陸”或者“登入”的字樣)。
且登錄前、登錄后狀態需要注意留下足夠空間,目前QQ號最長的是12位數字。請注意登錄后的狀態,空間是否足夠。
(如果頁面中用的是微軟雅黑的字體,登錄后的寬度要再稍留寬一點,因為用戶電腦上沒有微軟雅黑的字體時,會被默認使用宋體,宋體的文字會比雅黑占位寬一些)。
且登錄前、登錄后狀態需要注意留下足夠空間,目前QQ號最長的是12位數字。請注意登錄后的狀態,空間是否足夠。
(如果頁面中用的是微軟雅黑的字體,登錄后的寬度要再稍留寬一點,因為用戶電腦上沒有微軟雅黑的字體時,會被默認使用宋體,宋體的文字會比雅黑占位寬一些)。
頁面字體
可編輯性的文字有以下三種:宋體、微軟雅黑、黑體。
且不帶諸如渾厚、銳利這樣的效果。
字號為偶數(12px \14px \16px…) 。
一般活動時間、活動規則、后期會修改的文字等都需要用可編輯性文字。
在這些可編輯性的文字上面不能加任何效果(例如:外發光、漸變、描邊等)。
且不帶諸如渾厚、銳利這樣的效果。
字號為偶數(12px \14px \16px…) 。
一般活動時間、活動規則、后期會修改的文字等都需要用可編輯性文字。
在這些可編輯性的文字上面不能加任何效果(例如:外發光、漸變、描邊等)。
表格
盡量少用圓角(實在要用圓角的弧度要小一點控制在6px以內,或者在圓角弧度范圍內不出現文字或者表格線的情況),
從以下示例來看表格之間的邊框線有直接觸伸到圓角的地方,這樣的設計重構師切圓角圖片時邊框之間的和邊框之間的線不好定需要定好一些樣式,邊線上升不到圓角的地方,不做圖片又和設計稿不一樣。
尤其是當你的表格內容不固定需要通過開發調取內容時,開發不會給每個td來添加另外的樣式,這樣的圓角設計到最后還是會被直接改成直角。
重構建議要么直接用直角的表格,或者在圓角弧度內沒有任何內容。

從以下示例來看表格之間的邊框線有直接觸伸到圓角的地方,這樣的設計重構師切圓角圖片時邊框之間的和邊框之間的線不好定需要定好一些樣式,邊線上升不到圓角的地方,不做圖片又和設計稿不一樣。
尤其是當你的表格內容不固定需要通過開發調取內容時,開發不會給每個td來添加另外的樣式,這樣的圓角設計到最后還是會被直接改成直角。
重構建議要么直接用直角的表格,或者在圓角弧度內沒有任何內容。

彈出層
彈出層的尺寸(寬度〈1000px && 高度〈=570,這個高度尺寸主要是兼容1024X768的分辨率,現在的重構還是會要求都要兼容這個尺寸的)。
且邊框盡量用規則方形,以下兩個示例不規則的圖形重構會大大增加處理圖片的時間。重構一般會要求把不規則邊框改為規則的,如果需求方有很強烈的特殊要求,請聯系重構介入溝通。
當頁面中有多個彈出層時,請注意彈層寬度一致,高度可自適應。

且邊框盡量用規則方形,以下兩個示例不規則的圖形重構會大大增加處理圖片的時間。重構一般會要求把不規則邊框改為規則的,如果需求方有很強烈的特殊要求,請聯系重構介入溝通。
當頁面中有多個彈出層時,請注意彈層寬度一致,高度可自適應。

頁面擴展性
通常來說頁面都要求做到高度自適應,可擴展。尤其是帶有較多的產品圖片展示、文字可編輯、有多個內頁設計等的需求,內頁一定要做可擴展。
在背景的設計上就需要特別注意了。背景要可循環。
不能大面積的應用不規則圖形、不能大面積的徑向漸變、不任意使用涂抹效果,同時還得考慮到內容太少了的時候,不可循環的背景會不會太高,頁面背景銜接不起來。


在背景的設計上就需要特別注意了。背景要可循環。
不能大面積的應用不規則圖形、不能大面積的徑向漸變、不任意使用涂抹效果,同時還得考慮到內容太少了的時候,不可循環的背景會不會太高,頁面背景銜接不起來。


表單
所有下拉菜單、單選按鈕、復選按鈕、上傳表單都用系統默認樣式,無需設計師額外設計過。
修飾小圖片
用來修飾頁面的小圖片使用有規律,一個區塊的小圖片使用盡量不影響另一個區塊擺放需要有考慮到規律性,是屬于哪一個區塊就放到那里就好了,不跨區,也不隨意亂貼小圖片。

微博墻
Tips:微博墻的寬高可變,話題墻內元素及表現樣式均不變(設計同學可直接截取下圖示例放到頁面中占位即可)
騰訊微博 頁面效果可參考此頁面查看示例
新浪微博 通常在“騰訊動漫”產品線要求嵌入的是新浪微博查看示例
EDM
在設計電子郵件EDM頁面模板時,遵循以下潛規則,可以提高EDM的兼容性,帶來更好的用戶體驗和營銷效果

- 頁面寬度在600到800px(像素)以內,長度1024px以內,其他可視情況,和需求方溝通確認。
- 使用table表格布局,不能使用外鏈的css樣式定義文字和圖片,所有樣式均寫在標簽內。
- 可編輯的文字下面不能使用背景圖片,edm不支持,只能使用純色背景,所有帶效果的設計都只能用圖片實現,圖片上面是不能放文字的。
- 無動態圖片(gif動畫)。
- 絕對不能使用js代碼,所以如果edm要實現一些動態特效是不可行的。
- 不能出現“onMouseOut” “onMouseOver”,所以要實現鼠標移進,移出的效果,也不可行。
