前言
- 本规范用于，使用应用宝移动端常规运营活动视觉设计规范;
- 页面翻页方式为整屏滑动或者整页单屏；
- 为保证页面可用性，每个活动翻屏数量建议限制在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
- 大量复用的按钮上文字尽量不要用特殊字体
网友评论