移动端首屏设计

首屏范围

首屏范围

首屏安全范围区域：640832px（宽高）

手机端网页首屏安全范围:640x832.是根据目前iphone的尺寸来设定，以iphone4屏幕的尺寸640x960，减去状态条
与浏览器的头部，以此得出的安全高度。

在设计页面时，需要把主要的视觉，操作按钮放在首屏范围内。1008的高度
为iphone5的高度，设计时可以把次要视觉，信息延展到1008像素的高度。

手机端网页首屏安全范围:640x832.是根据目前iphone的尺寸来设定，以iphone4屏幕的尺寸640x960，减去状态条
与浏览器的头部，以此得出的安全高度。

在设计页面时，需要把主要的视觉，操作按钮放在首屏范围内。

1008的高度为iphone5的高度，设计时可以把次要视觉，信息延展到1008像素的高度。

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

微信浏览器高

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

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

手Q浏览器高

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

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

安卓与PAD的主流尺寸

安卓主流尺寸

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

安卓设备的分辨率非常杂，设备最多和目前设计安卓界面的尺寸为：1280x720。

目前安卓设备的主要分辨率有3个尺寸。小：800x480；中：1280x720；大：1920x1080

宽高比相同，适配比例为1.5倍

IPAD尺寸

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

Ipad分普通屏与高清屏幕，高清屏幕分辨率为普通屏的2倍。

背景延展

背景延展

左右两边延展需要过渡平滑，不可有硬切的痕迹

页面时常根据屏幕宽度的变化而显示更多的内容，当更宽的屏幕显示页面时，背景的延展区域需要平滑，控件需要根据屏幕大小进行自适应放大缩小。

不要出现“一刀切”的生硬痕迹。

背景延展方式1

安全宽度设置640像素，延展区域至1000像素

把重要信息控制在640PX宽度内，背景区域延展至1000像素，推荐使用纯色，渐变，可以平铺的素材，以便于减少头图的大小，提高加载速度，并且延展区域可以无缝连接。模糊的背景可以最大限度的压缩图片质量。

背景延展方式2

安全宽度640像素，根据屏幕宽度等比例放大图片

把重要信息控制在640PX宽度内，背景图片根据屏幕宽度等比例缩放。

标题文字

背景延展

主标题一行不超过7个字，超过7字需换行

副标题文字字号在30pt-48pt之间，不建议使用艺术字

确保标题文字在安全区域内，大小在可阅读范围之内，注重阅读的节奏，同时区分主副标题文字的大小。

副标题往往是对主标题的注解，需要高识别度，所以不建议使用艺术字体

正文标题与内容

正文标题1

标题：字号30点，行距42点，样式为中等

正文：字号24点，行距40点，样式为细体

对齐方式：最后一行左对齐，左右边距：20像素

字号使用节制，主要字号不超过3种，字号用偶数。小于24px的字体需要切图，但最小不得低于18px。

正文标题2

标题：字号36点，行距50点，样式为中等

正文：字号30点，行距50点，样式为细体

对齐方式：最后一行左对齐，左右边距：20像素

字号使用节制，主要字号不超过3种，字号用偶数。小于24px的字体需要切图，但最小不得低于18px。

正文标题

清晰的标题让用户明确当前页面主题

每一屏都需要有清晰的标题，以便用户明确当前页面的主题，以及上下文信息的关系。

交互区域适合触控

手指在屏幕上热区最小感应区是44x44像素

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

文字大小

移动端最小字号不得小于22px

在内页文字排版的过程中确保文字的大小在可阅读范围之内，移动端的字号一般对应电脑中的两倍，一般在电脑中用的12px的字体在手机网页中就该使用24px左右。

主要字号控制在3种以内，大中小都有一个区间。避免随意用字体字号，并且字号必须是整数。

内容排版

大篇幅文字，注意间距、分段等处理。

在内页文字排版的过程中确保文字的大小在可阅读范围之内，段落分段要合理，注重阅读的节奏，同时区分标题文字和内容文字的大小。

内容分级

把文本内容分类归纳使其形成由例如按钮、图片、标签等形式来传达信息，比纯文字的传达更清晰。

设计尽可能清晰简洁，避免给用户提供太多大篇幅的内容。可以把信息分类归纳，然后利用进步的操作来触发展示更多详细内容。

层次结构

用醒目的颜色标识重点内容，建立层次，让玩家更快速的找到目标信息。

布局、颜色和字体会吸引眼球，页面中醒目的颜色适合放在合理的类目上。

先思考你想要用户在页面上看到什么，以什么样的顺序来浏览，然后设计出层次结构。

内容结构

将重要信息放在页面最显著的位置，让玩家更快速的关注到。

当创建一个页面的布局和内容结构时，先想想用户正在寻找什么。将最重要的内容，用户最需要的信息以最简单、醒目的形式呈现给玩家。

风格一致性

整体风格、交互体验保持统一

设计应保持一致性，包括风格、导航、版式、文案等界面元素应该遵循一定的设计规范。

适当的页面大小

把全部信息合理的展示在一个页面中最佳，尽量少用跳转。

手机用户的网络环境不如PC用户，页面的跳转会对用户产生更大的心理压力，如果在手机页面中能把信息合理的展示在一个页面中最佳。

如果非要跳转，咱们可以用些假装不是跳转的方式，比如展开，浮出等。减少用户产生的不安全感。但是也不要让页面太长，没有人喜欢无休止的电影了!

限制滚动方向

确保内容只在一个方向上滚动

身心容易为用户,当他们不需要锅在试图跟踪他们并没有看到

按钮

主按钮

主按钮大小：560x100像素

移动端的主按钮高度大于80px，并且根据活动的需求放置在页面醒目的位置。

次按钮

次按钮大小：300x90像素

移动端的按钮高度大于80px，并且根据活动的需求放置在页面醒目的位置。

文字连接

文字链接不宜过小，推荐使用向右箭头、下划线、不同颜色、相关图标等方式

移动端的两个文字链上下的间距大于80像素，以防误操作。

对象状态

可操作区（如按钮）通常有正常、按压、不可用三种状态

设计师需要将可操作去的三种状态都提供到，这样才可以确保重构最终实现效果符合交互和视觉标准。

边框和圆角半径

设计圆角边框时注意匹配内、外半径

有一些案例，以上都比较常见——匹配内、外半径，缩放原始形状的尺寸，并增加在边界和原来的内半径在一起。

后者是迄今为止最好的表现方法， 一致的轮廓让整体视觉更舒服。

按钮指令

需要明确按钮指令，做更有效快捷的沟通

不清楚标签或指令会迷惑用户，需要更有效的沟通。

在这个淘气的例子中，你会选择取消交易还是取消交易吗?

按钮形式选择

设计建议：重要功能按钮，要设计的足够醒目易懂，符合用户对可点击区域的理解习惯。

例如：上图中的小icon是可触发的按钮，但是不太易懂，不符合用户对可点击区域的理解习惯，所以点击率相对其他按钮低很多。

按钮位置

设计建议：重点按钮不要放得层级太深，尽量在靠前的醒目位置。

例如：上图中，按钮的点击量随着所处的页面层级加深而减少。

奖励类图形

设计建议：类似宝箱、礼包、Q币等奖励类的图形更能刺激用户关注和点击

例如：上图中天天飞车送MINI H5游戏中有3.3%的用户自发点击宝箱

页签

页签形式1

尺寸：560x90像素，用底色块来标识当前状态

页签形式2

用文字和下划线的颜色变化来标识当前状态

导航

页面导航条

导航高度：100像素

首页导航条：标签最多不超过三个

内页导航条：需要<图标，提示可以返回

导航菜单应该是直接、简单、明了的，这能让用户一眼就能分辨出他们想要访问的内容。

内容切换方式

设计建议：采用手势滑动方式来切换内容

根据数据发现：大部分用户习惯用手势滑动的方式来切换。导航按钮点击量很低，向左小箭头tab尤其不受欢迎。

如上图：

1. 切换导航点击率只有7%
2. 93%的用户选择手势滑动切换。
3. 向左的小箭头tab的点击率仅为10.1%。

图标

图标大小

热区大小 最小面积：44x44像素

图形大小 最小面积：30x30像素

所有图像和图标建议使用png格式，图标设计线条化。

图标的状态

未选中状态的图标线条化，而选中状态的图标则增加填充 。

当图标做为标签形式出现时，需要有未选中与选中两种状态，以便让用户更好理解目前的情况

图标的风格

图标需要风格一致、表现手法统一 。

图标在网页设计中算是一个小单元，但它的重要性大家都有目共睹。空心图标和实心图标在不同的环境中发挥着不同的作用，美化着网页中的小细节。

颜色和形状

图标需要符合对已知颜色和形状的认知习惯，更易被识别 。

通过人们对已知颜色的认知，结合到设计中。

与图标含义融为一体。如红色代表错误，绿色代表正确，黄色表达不安等。

三角形

快速转换为等边规模高度(最短的底部边缘)86.6%。 。

默认不等边的形状,而是x和y都使用相同的测量维度。

锐利边缘

模糊的、半像素的边缘是设计时的禁忌！

建议用photoshop中的【矩形工具】来绘制矩形，不建议用【矩形选框工具】选区后来填充。

用【矩形选框工具】选区后来填充，会产生偏离中心的半个像素移位，导致边缘模糊 。

LOGO使用

LOGO的使用

将LOGO放置于页面的左上角，图形大小在140x140像素左右 最小面积：44x44像素

由于logo形状各异，可自行适当调整

游戏下载

游戏下载入口

建议将LOGO放置于页面的右上角，按钮大小：170x64像素左右

由于logo形状各异，可自行适当调整

游戏下载

Loading形式

Loading需要用图形与数字百分比结合

Loading很重要

设计建议：5秒为用户的容忍时间。平均网速为93K/s的话，建议首次加载大小控制在465K以内。

采用Loading动画分散用户注意力，可以争取更多的用户等待页面加载时间

页面文件体积

设计建议：控制页面文件体积，提升访问速度

例如：【酷跑里约版本专题】几乎每页的小角色都有sprite动画的，文件加起来有1.5M。

在PC网页里，几M都是可理解的，但在手机，几百K都已经是致命的了（在中国国情下）。所以在上线第二天，紧急处理网页，减少动画，访问延时从16秒直线下降到6秒。

提示信息

操作提示

设计建议：相对操作提示信息，我们应更重视操作习惯。玩家没我们想象的那么重视提示信息。

根据数据发现：部分用户会忽略操作方法的提示信息，按习惯和经验操作，在尝试中体验游戏。

一方面我们要加强用户引导，另一方面需要尽量尊重用户习惯。

上图是天天飞车的小游戏页面，19%的用户忽略操作提示直接点击障碍物或拖动小车的方式来尝试。

加载提示

执行任务时给用户即时反馈，让用户放心。

操作交互行为后（如点击按钮或图片后）毫无反馈，会让用户不安。

反馈在这些情况下可能发生了什么，或用按下状态图和声音来加强反馈，表示已经触发了一个行动。

表单

编号列表

如果列表中超过三个分类，建议使用有序数字标识，而不是无序的图标。

无意义的装饰节点过多会混淆页面层级，数字排序会让页面结构更清晰。

标签输入字段

输入框需要有明确的标题，为用户节省思考时间

标签上面的输入框,而不是在他们,一旦有一个条目在后者,屏幕阅读器用户不会让同样的意义——它只会输出输入的值,而不是字段名。

检查数据即时反馈

即时反馈用户输入信息的有效性，提升用户体验

由于移动设备体积较小，输入操作已经较有难度，如果不即时反馈用户输入信息的有效性，会导致用户反复重新输入。

提供选项

尽量给用户提供选择，降低操作难度和输入错误的几率。

动态图形

动态图形

设计建议：重点按钮用动态图形更能吸引用户关注并点击。

动画明显的元素容易引起用户注意并点击。

例如：足球小游戏中，玩家会被动态的头像吸引而点击。

热门对象

热门对象

设计建议：采用热门对象会带来更多关注。

例如：世界杯期间的胜利足球射门小游戏，巴西队和德国队的选择比其他国家多4倍。

对齐与间距

对齐与间距

对齐元素，并让间距保持一致

一致性

每屏的公共元素（如标题栏、页签和页脚），保持在固定位置

多个页面之间的对齐也同样重要。

每屏固定不变位置如标题栏、页签和页脚，为他们建立一个网格， 定义一个结构，把它锁定在你的屏幕的固定位置。

这样他们就不会在翻页的时候跳来跳去。

访问高峰

访问高峰时段

设计建议：项目上线时间可以选择在晚上8点至凌晨1点的用户访问高峰时段

例如上图中某手游官网的访问曲线，高峰时段表现明显。

天天飞车项目参考上图数据，在8：50发布专题，半小时内超过1万的用户顺利参与活动。

访问热度时长

设计建议：上线前严格审核，确保质量，因为手机页面访问热度只持续2天。

手机页面生存周期在没有后期推广的情况下，可计算在1周内。发布后的前2天为访问高峰，第三天开始急速下滑，所以上线前必须严格审核

网络环境

用户网络环境

设计建议：页面加载速度的优化非常重要，大部分用户是在非wifi环境下访问页面的。

例如全民飞机大战的官网：在wifi环境下访问页面的用户仅25%，在移动网络环境下访问页面的用户有97.5%。

用户流失

层级过多导致流失

设计建议：控制页面层级在3层以下，避免用户过度流失。

根据数据发现：页面层级越多，蹦失率越大。

例如：天天飞车送MINI H5游戏，页面层级过多，39.4%的用户在从首页到游戏页的过程中流失。

输入行为导致流失

设计建议：尽量避免类似用户登录和资料填写的繁琐输入行为，否则会导致部分用户流失。

例如： 《洛克舞台剧潜能》第二页需要输入小名，选择年龄、星座才可进入第三页，在此页流失39%用户。而其他屏之间都没有如此大的流失率。

复杂交互导致流失

设计建议：避免复杂的交互行为，否则会导致部分用户流失。

例如：《洛克魔法夏令营》第二屏到第三屏需要完成一个小游戏，造成26%的用户流失。

软件设置

显示颜色设置

在photoshop中选择菜单：编辑>颜色设置…

改变工作空间> RGB >显示器RGB

也改变颜色管理政策> RGB为关

栅格设置

像素网格间隔定位10像素子网格设置为10

Photoshop>首选项>参考线，网格和切片…

设置网格后更容易控制图形尺寸和对齐

图形工具对齐网格

设置：将矢量工具与变化和像素网格对齐

在Photoshop CS6及以上中选择菜单：编辑>首选项…%的用户流失。

图层整理

图层与页面的阅读顺序

从左到右，从上到下的页面浏览顺序来排列图层

按照元素的功能逻辑来给图层命名，并按元素在页面中出现的从左到右，从上到下的浏览顺序来排列图层，更容易一一对应。

图层命名

图层命名要规范

规范的给图层命名，更利于项目的合作，让后续使用文件的人更轻松快捷的找到对应图层，提高工作效率。>首选项>参考线，网格和切片…

图层排列

建议分类排列图层

[/wiki/images/bak/images/mobile/image182.jpg /wiki/images/bak/images/mobile/image182.jpg]

比如：当创建列表时，建议把描述文字都放在同一个文本段落里，通过设置间距来调整效果，而不是每一行文字都单独的建层。它不仅可以更便捷的设置内容对齐和样式效果，也方便后期的更新。

图形绘制TIPS

形状工具

做一些简单图形时建议使用形状工具，方便后期调整，文件体积也相对较小

图形工具创建出来的图形可后期编辑，可缩放和改变形状，调整后图形品质不损失。

简单Loading的画法

使用描边图层样式，设置填充类型为渐变，样式为角度

常见按钮的绘制

用内发光和投影图层样式设置按钮外观

添加一个简单的噪声纹理可以采用内发光效果，源设置为中心，大小设置为0。

按钮阴影的绘制

将自定义的全局光设置改成90°

Photoshop中默认自定义的全局光设置是120°，可以点击菜单：图层>图层样式>全局光…修改默认角度为比较常用的90°，这样更适合移动端的设计。

圆角矩形的绘制

Photoshop的CC有一个很棒的属性面板：实时图形属性

创建形状图层后通过属性面板调整的尺寸、位置、添加或改变一个或所有的角半径的。调整图形大小后，角半径会保持不变，不会被扭曲。