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

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

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

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

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