长沙全速

广几_全速(QQ:376023727)

尺寸说明

长页 750 * auto 优先选择
小程序设计请选择该项
640 * auto 较少使用、特殊要求
全屏切换(竖屏) 750 * 1100(1650) 优先选择:内容安全高度 1100px,背景延长至1650px
小程序设计请选择该项
640 * 1000(1400) 内容安全高度 1000px,背景延长至1400px
全屏切换(横屏) 1624 * 750(920) 适用游戏内活动,无搜索栏、地址栏等浏览器通用信息场景
1624 * 580(920) 推荐选择:内容安全高度 580px,背景延长至920px
TIPS:如产品有特殊要求,请以相应产品要求为准
1334 * 580(830) 随着手机屏幕越来越大,建议废弃
内容安全高度 580px,背景延长至830px

PS:由于M端与小程序设计可以公用同一套PSD,最终需要制作为小程序时请注意告知相应前端

综述Tips:

1、设计终稿确认后,请整理PSD图层,按模块分组,不需要图层请删除。
2、交付时尽量保证PSD体积,单个PSD最大不得超过1G。
3、网页设计文字使用像素(px)单位,不使用点。
4、文字字号使用 整偶数,拒绝出现 单数或小数点。

腾讯互娱-移动端设计规范

特殊产品设计规范

西山居 移动端设计规范
腾讯互娱 QQ主题规范
单机
手Q主题设计规范文档
心悦俱乐部(模板专题)
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
移动端根据机型屏幕分为:标准、短屏(海外版需求优选)、平板
建议:顶部距离80px,底下距离34px

背景处理方式

示例

字号使用说明

可以借鉴PC经验,PC通常使用的正文字体大小为12px\14px。在移动端会对设计稿中各元素做减半处理。
由此,可得到正文在移动端中应使用24px\28px 大小的字体。
减半处理的方式也使得要求页面中各元素应以偶数设计。

范文一
标题:字号36点,行距50点,样式为中等
正文:字号30点,行距50点,样式为细体
对齐方式:最后一行左对齐,左右边距:20像素
示例

范文二
标题:字号30点,行距42点,样式为中等
正文:字号24点,行距40点,样式为细体
对齐方式:最后一行左对齐,左右边距:20像素
示例

Tips:字号使用节制,主要字号不超过3种,字号用偶数。编辑文字最小不行小于24px。

触控说明

示例

移动端的主按钮高度大于80px,文字链接上下的间距大于80px,手指在屏幕上热区最小感应是44px。

按钮

移动端的主按钮高度大于80px,并且根据活动的需求放置在页面醒目的位置。
主按钮:560x100
次按钮:300x90
示例

Tips:圆角、渐变,投影,描边(内描边)可放肆运用。画形状时记得勾选上“对齐边缘”

文字链接

文字链接不宜过小,推荐使用向右箭头、下划线、不同颜色、相关图标等方式
移动端的两个文字链上下的间距大于80像素,以防误操作。

示例

设计稿自审方法

第一步、打开chorme或者360浏览器,将750宽的JPG设计稿拖入浏览器。
第二步、F12调出开发调试面板。点击手机图标。选择要查看机型效果。
示例

快速生成网址二维码

方法一:在线生成二维码

方法二:打开新版chorme浏览器 ----> 右键(为此页面创建二维码)