长沙全速

广几_全速(QQ:376023727)

各线移动规范集合

互娱移动端文档:http://tgideas.qq.com/webplat/info/news_version3/804/25810/26096/m16274/201610/517971.shtml

蓝钻移动端文档:http://gamevip.qq.com/widget/guide/html/mobile-design.html

TGuide:http://tgideas.qq.com/cguide/

首屏范围

长  页:750 x auto 或 640 x auto

全屏切换:750 x 1170(背景高度延展到1650像素,兼容iphoneX)
     640 x 1000(背景高度延展到1400像素,兼容iphoneX)

Tips:为了更好的兼容高版本建议优先取750px的尺寸设计

示例
示例DEMO

Tips:需要滑动切屏的交互,建议多运用四周可颜色填充的设计效果,内容性可与背景分离。

安卓与IPAD尺寸

安卓主流尺寸

前最主流的分辨率为:1280x720像素

示例

目前安卓设备的主要分辨率有3个尺寸。小:800x480;中:1280x720(最主流);大:1920x1080
宽高比相同,适配比例为1.5倍

IPAD尺寸

IPAD的分辨率:1024x768像素,高清屏尺寸为它的两倍

示例

背景处理方式

背景延展方式1

道聚城——内容640宽,背景延展到1000px(不论切屏、长页),都统一处理为1000px宽

示例示例
背景延展方式2

640px或750px宽的设计,前端通过代码等比缩放(单屏切换时,请注意尺寸比例。参考尺寸

示例示例

字号使用说明

可以借鉴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像素,以防误操作。

示例

设计稿自审方法

设计稿自审方法1

将JPG发送到手机中查看。


示例
设计稿自审方法2

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

DEMO截图

示例