移动端活动运营页设计规范

前言

1. 本规范用于，使用应用宝移动端常规运营活动视觉设计规范;
2. 页面翻页方式为整屏滑动或者整页单屏；
3. 为保证页面可用性，每个活动翻屏数量建议限制在5屏以内。

翻页设计稿尺寸

首屏安全范围区域：720 * 832px（宽 ×高）

翻页设计稿尺寸翻页设计稿尺寸

说明：
手机端网页首屏安全范围:720x832。是根据目前android主流机型的尺寸来设定，减去状态条与浏览器的头部，以此得出的安全高度。

UI元素
一般由四个元 素组成，分别是：

状态栏：显示信号、运营商、电量等状态的区域
导航栏：显示当前界面的名称，包含相应的功能或页面间的跳转按钮
主菜单栏：类似页面的主菜单，提供整个应用的分类内容的快速跳转
内容区域：展示应用提供的相应内容，整个应用中布局变更最为频繁的区域

但并不是所有的安全高度都为720x832，还需要考虑实际的网页投放渠道来进行相应的调整。

微信浏览器高

微信的浏览器安全高度：832像素。设计需要考虑1008像素高度的呈现

微信浏览器安全区域高

移动网页在微信中传播量最为普遍，所以安全高度的设置也是根据微信的浏览器来变化。

手Q浏览器高

手Q浏览器安全高度：720x740像素

手Q浏览器安全区域高

手Q的浏览器比微信多了一个操作条，所以安全高度压缩到了740.如果网页的主要传播渠道包含手Q，需要考虑主要的信息需要在740中呈现。手Q的浏览器一般通过QQ空间，扫一扫二维码，聊天面板中打开。

单页面设计稿尺寸

单页面设计稿尺寸：720*任意高
若只在应用宝客户端内展示（即Anroid平台），则设计稿宽度可定义为720px，高度任意。

单页面设计稿尺寸

背景延展

左右两边延展需要过渡平滑，不建议有硬切的痕迹。
延展区域尽量简化，建议使用纯色、渐变、平铺或模糊的素材。
（或者背景可分层，装饰图片盖在上面，最底层的背景是纯色或者规律渐变。）

背景延展

字体

iOS系统使用的是黑体（STHeiti），如下图：

iOS系统字体

Android 使用的是文泉驿微米黑(Droid Sans Fallback)，如下图：

Android系统字体

字号

建议字号.jpg

建议字体大小：
A：导航栏标题：medium 34px；
B：按钮和表头：light 34px
C：表格标签：Regular 28px；
D：Tab页图标标签：Regular 24px
「小提示」：字号使用节制，主要字号不超过3种，字号用偶数，最小不得低于20px。

按钮

虽然iPhone导航栏上的操作按钮最小78px*168px

iPhone按钮

Android4.0规定的有效可触摸的UI元素标准是48dp，即视觉96px。

按钮最小尺寸

「小提示」：

• 设计和重构过程中，尽量把按钮的可点击区域做大，太小的按钮回提高用户的误操作率。
• 主按钮高度大于80px
• 文字链接不宜太小，推荐使用不同颜色、下划线、<符号等方式，以便引起用户注意
• 两个文字链上下的间距大于80px
• 可点击对象的区域尺寸不要小于88*88px
• 大量复用的按钮上文字尽量不要用特殊字体