尺寸說明
| 長頁 | 750 * auto | 優(yōu)先選擇 小程序設計請選擇該項 |
|---|---|---|
| 640 * auto | 較少使用、特殊要求 | |
| 全屏切換(豎屏) | 750 * 1100(1650) | 優(yōu)先選擇:內容安全高度 1100px,背景延長至1650px 小程序設計請選擇該項 |
| 640 * 1000(1400) | 內容安全高度 1000px,背景延長至1400px | |
| 全屏切換(橫屏) | 1624 * 750(920) | 適用游戲內活動,無搜索欄、地址欄等瀏覽器通用信息場景 |
| 1624 * 580(920) |
推薦選擇:內容安全高度 580px,背景延長至920px TIPS:如產品有特殊要求,請以相應產品要求為準 |
|
| 1334 * 580(830) |
隨著手機屏幕越來越大,建議廢棄 內容安全高度 580px,背景延長至830px |
|
| 游戲內(優(yōu)聯(lián)) | 2340 * 1080(2160) | 游戲內:潘多拉/小應用 高2160為適配Ipad尺寸 |
PS:由于M端與小程序設計可以公用同一套PSD,最終需要制作為小程序時請注意告知相應前端
綜述Tips:
1、設計終稿確認后,請整理PSD圖層,按模塊分組,不需要圖層請刪除。
2、交付時盡量保證PSD體積,單個PSD最大不得超過1G。
3、網頁設計文字使用像素(px)單位,不使用點。
4、文字字號使用 整偶數(shù),拒絕出現(xiàn) 單數(shù)或小數(shù)點。
特殊產品設計規(guī)范
| 西山居 | 移動端設計規(guī)范 |
|---|---|
| 騰訊互娛 |
QQ主題規(guī)范 單機 手Q主題設計規(guī)范文檔 心悅俱樂部(模板專題) CF內嵌頁(PSD寬:1240px,頭圖高度請控制在593px以內) |
機型尺寸枚舉
| iPhone | iPhone 14plus | 1284x2778 | 屏幕尺寸6.7寸 |
|---|---|---|---|
| iPhone X | 1125x2436 | 屏幕尺寸5.8寸 | |
| iPhone 6/7/8 Plus | 1080x1920 | 屏幕尺寸5.5寸 | |
| 安卓 | 安卓全面屏 | 1080x2340 | 屏幕尺寸6.3寸 |
| 安卓劉海屏 | 1080x2280 | 屏幕尺寸6.0寸 | |
| 安卓水滴屏 | 720x1520 | 屏幕尺寸6.2寸 | |
| 平板 | 2k+超清屏 | 2560x1600 | |
| 2K超清屏,視網膜屏 | 2048x1536 | ||
| 1080P+全高清屏 | 1920x1200 | ||
| 720P+高清屏 | 1366x768 | ||
|
移動端根據(jù)機型屏幕分為:標準、短屏(海外版需求優(yōu)選)、平板 建議:頂部距離80px,底下距離34px | |||
背景處理方式
字號使用說明
可以借鑒PC經驗,PC通常使用的正文字體大小為12px\14px。在移動端會對設計稿中各元素做減半處理。
由此,可得到正文在移動端中應使用24px\28px 大小的字體。
減半處理的方式也使得要求頁面中各元素應以偶數(shù)設計。
范文一
標題:字號36點,行距50點,樣式為中等
正文:字號30點,行距50點,樣式為細體
對齊方式:最后一行左對齊,左右邊距:20像素

范文二
標題:字號30點,行距42點,樣式為中等
正文:字號24點,行距40點,樣式為細體
對齊方式:最后一行左對齊,左右邊距:20像素

由此,可得到正文在移動端中應使用24px\28px 大小的字體。
減半處理的方式也使得要求頁面中各元素應以偶數(shù)設計。
范文一
標題:字號36點,行距50點,樣式為中等
正文:字號30點,行距50點,樣式為細體
對齊方式:最后一行左對齊,左右邊距:20像素

范文二
標題:字號30點,行距42點,樣式為中等
正文:字號24點,行距40點,樣式為細體
對齊方式:最后一行左對齊,左右邊距:20像素

Tips:字號使用節(jié)制,主要字號不超過3種,字號用偶數(shù)。編輯文字最小不行小于24px。
觸控說明
移動端的主按鈕高度大于80px,文字鏈接上下的間距大于80px,手指在屏幕上熱區(qū)最小感應是44px。
按鈕
移動端的主按鈕高度大于80px,并且根據(jù)活動的需求放置在頁面醒目的位置。
主按鈕:560x100
次按鈕:300x90
主按鈕:560x100
次按鈕:300x90
Tips:圓角、漸變,投影,描邊(內描邊)可放肆運用。畫形狀時記得勾選上“對齊邊緣”
文字鏈接
文字鏈接不宜過小,推薦使用向右箭頭、下劃線、不同顏色、相關圖標等方式
移動端的兩個文字鏈上下的間距大于80像素,以防誤操作。
設計稿自審方法
第一步、打開chorme或者360瀏覽器,將750寬的JPG設計稿拖入瀏覽器。
第二步、F12調出開發(fā)調試面板。點擊手機圖標。選擇要查看機型效果。
第二步、F12調出開發(fā)調試面板。點擊手機圖標。選擇要查看機型效果。
快速生成網址二維碼
方法一:在線生成二維碼
方法二:打開新版chorme瀏覽器 ----> 右鍵(為此頁面創(chuàng)建二維碼)