租号玩移动端

移动端不支持video.js?

移动端不支持video.js?

答：

移动端支持video.js的！

video.js 移动端显示播放视频

用JS判断客户端是PC端,还是移动端来跳转不同的页面

function goPAGE() {

if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {

window.location.href="你的手机版地址";

}

else {

window.location.href="你的电脑版地址"; }

}

goPAGE();

你自己再加个判断页面尺寸的条件更加保险。

怎样登录百度云移动端

1、下载百度云移动端，如手机版百度云，在平常下载软件应用的市场，搜索百度云并下载安装；

2、打开百度云，使用百度账号即可登录，若无百度账号，点击登录旁边的注册。

移动端动画设计的12个原则

1. 挤压变形

挤压装满水的气球后形变，这能展示其具有较强的弹性

物体都存在质量，物体运动时的变形状态能反映其自身的刚性和弹性程度。例如书架椅子这类物体就具有较强的刚性，而衣服、树叶则具有更好的弹性。

在移动体验中，利用挤压变形原则能够唤起用户的主观记忆。如果你想表达应用刚毅的效果，你就可以使用刚性的界面和图形，以及更加精准的动画，如果想要唤起用户对有机物的记忆，则可以使用柔软易变的界面，以及更加优雅柔和的动画。

Flipboard刚毅效果的动画来切换界面

Ibook使用更复杂、更柔和的翻页效果来模仿真实阅读的体验

2. 预备动作

投掷保龄球前的甩臂就是一个预备动作

设计物体的运动都需要考虑这三个阶段：动作发生前的预备动作，动作本身，动作的结果。预备动作可以为即将发生什么动作提供线索和信息，例如棒球运动员扔球前的甩臂运动，弹簧的反冲动作等等。在移动设备的用户体验设计中，预备动作还可以暗示用户应用内元素的使用方法。现在很多移动应用的打开动画都是很好的预备动作案例。

打开照相应用时的动画运用了预备原则

WP系统主界面底部展示的少量色块图标暗示了向上滑动的手势操作

3. 状态

右侧图片具有很好的状态释义性，清楚的表现了两个角色的对话状态;左侧的图片并没有很好的解释这两个角色的心理状态

描述状态能更清晰的表达动画的中心思想。在移动体验设计中，状态原则主要涉及到屏幕的切换，和用户界面的交互过程。通过界面中的颜色、亮度、组成元素和动画来引导用户合理分配注意力，可以创造非常流畅的移动体验，并且可以增强应用的易用性。

Keynote运用状态原则使得用户能很好的理解正在处理的文件

4. 连贯与关键帧

上面那幅图片采用了连贯技术，即使用了每一帧画面来表现动作，而下面那幅则使用了三个关键帧来展示动画

为了捕捉快速而特殊的动作，经常需要从头至尾的绘制每一帧画面，这就是连贯原则。而关键帧技术则是绘制动作中关键点的画面，并采用补间来展示动画。移动端的动画设计大多采用关键帧技术来实现，这种技术比较简单，适用于展现简单的动作，而对于复杂特殊的动作，则可能需要使用绘制每一帧的连贯技术了。

由于游戏动作更复杂，水果忍者ipad版则采用了从头至尾的技术来渲染动作

植物大战僵尸Ipad版就采用了关键帧技术

5. 顺势和叠加

顺势可以描述物体运动时，不同部分以各异的速度运动(如小狗摇头时耳朵、下巴的摆动速度不一致)

想像一只小狗左右摇头，它脸上松弛的肉也会随着头一起晃动。这就是动作的顺势和叠加。很少有动作是突然发生又突然停止的，一般都是逐渐停止，在物体的其他部分已经停止运动时，某些部分还在继续运动。而且物体的不同部分运动时的速度、动作都可能是不一样的，只有考虑到这些细微的差异动画看起来才会更真实形象。移动端的界面元素可以协同形成一个整体、叠加的动画效果，这些动画可以帮助用户理解界面元素和操作方法。

WP上的色块Icon的运动使用了动作叠加的设计原则。色块并不是单独运动，而是色块组以不同的速度重叠运动。

6. 缓慢出现和结束

在动画的首尾增加更多的帧可以创造出更真实的效果

无论是汽车还是短跑运动员，几乎所有的动作都需要一定时间来加速或者减速停止，这是客观规律。动画设计中经常会在动作的首尾，相对运动过程中，增加更多的画面帧。在移动体验设计领域，将缓慢进出的原则运用于滚动数据列表等微妙的动画时，都能很好更真实的用户体验。

在移动界面上滚动列表运用了缓进缓出原则。在动画收尾增加更多的画面帧，使其更符合真实规律。

7. 运动路径

大多数时候物体的运动轨迹是不可见的，但是在特殊的情况下可以看到，如点燃的烟火可以根据火花来看到其运动的轨迹。

大多数物体的运动不是随机的，而是根据可预知的路径运动，但是通常情况下物体运动的轨迹是不可见的，不过一般具有一定模式。例如机械性的物体，如火车、汽车，运动轨迹一般是直线的，而有机物体，如植物、动物和人，更趋向于曲线运动。移动端的设计，需要考虑界面元素是按照机械物体还是有机物体的规律运动。

Iphone应用中的自然元素，例如鱼和水都是以曲线的轨迹来运动的

Android平台的界面元素趋向于使用直线型的轨迹来运动，使界面更有科技的感觉

8. 次动作

主要动作是松鼠的身体和脚，松鼠尾巴的运动则是次运动，这两个动作一同使得整个动作更加真实。

想象这个画面：一只松鼠跑过阳台跳到一棵树上，松鼠脚上的动作可以表现出它轻盈敏捷的特点，它的尾巴则可以通过有区分的运动方式来支持奔跑和跳跃的主要动作。不过次要动作主要是为了支持增强主动作而非分散了用户的注意力。

Iphone上的邮箱应用就使用了次动作原则，在邮箱邮件中点击链接将打开浏览器窗口，这时浏览器界面的出现是主要动作，而邮箱应用退后变为背景是次动作，次动作很好的增强了主动作的体验，又不会喧宾夺主。

两个应用界面切换时的动画很好的运用了次动作这一原则

9. 速度

在奔跑时不同的速度能很好的表现角色身体特征(体重，身高和动作幅度)和他的情绪

当动画中，对象或角色运动的速度太慢或太快都会引起人们的反感，也就是说动画的速度是非常重要的。在动画设计中，速度经常涉及到组成一个动作的画面帧数目。速度是一项非常重要的技术，它能够使物体看起来更符合客观规律。并且通过速度还可以表达角色的情绪状态和性格特征。

不管是列表的滚动还是不同界面的切换，速度原则都是一项非常微妙而重要的技术。在实际的设计中，动画的速度需要不断的尝试和试错，来验证速度的体验感。

Ipad照片应用使用了类似扑克快速洗牌的效果，这可以突出轻量、浮力和超现实的速度等感觉

10. 夸张

加拿大的动画设计师John Kricfalusi在他的动画片《Ren 和Stimpy》中使用了大量的夸张手法。

动画中的夸张能带来很多乐趣，并且也可以使对象更形象生动。一个没有进行夸张处理的动画可能看起来比较准确，但是容易让人感到乏味和缺乏人情味。在设计中运用这一原则来改变物体的形状、大小，能够增强运动的视觉感受和戏剧性。不过夸张也并不意味着完全失真。Disney对夸张的定义：以有想象力的形式展示真实性的内容。在设计移动体验时需要一定克制的使用夸张手法，界面上的夸张元素应该相互协调，避免给用户造成困惑和干扰。

主界面与应用程序打开界面的切换动作是进行了一定的夸张。这使得打开应用程序时更有趣和弹性，有点像蹦床。

11-12. 丰满的形象和个性

丰满的形象强调三维形态、精准感和动画的重量感、均衡感和光影感。

这条原则主要是真的动画角色的设计提出来的，通过重量、体积感、平衡、光影等手段创造一个具有三维感觉的动画角色，并且应该使角色具有个性魅力。这两条原则与移动体验的设计关系并不密切。角色的吸引力就想现场演员一样所具有的个人魅力。

以上十二条原则对于移动端的动画设计非常有帮助，那么在实际的设计过程中应该如何来做呢?第一步需要意识到动画元素是一个非常有用的设计元素，第二步是将动画的设计整合进整个设计过程，包括草图阶段、线框图阶段和原型阶段。

草图阶段 在草图阶段就应该考虑应该使用怎样的动作运用于界面元素，从而突出应用的个性和感觉。例如通过界面元素的状态改变，或者不同界面的切换方式来营造不一样的体验效果，这些都可以在草图阶段通过手绘形式来进行思考和设计。

在Itunes中阅读详细信息的动画设计草图

线框图 线框图经常用来表示界面的流程，在该阶段应该整合动画的设计，在线框图问卷中使用简单的动画来与开发工程是和老板沟通设计构思和想法。

线框图中的动画设计主要采用图片和插图的形式

原型阶段 草图和线框图是设计的第一步，高保真的设计原型能有更好的沟通效果和说服力。你可也通过使用原型工具来展示方案中动画的效果，例如使用Keynote和PPT来制作动画，这些动画可以帮助你和团队验证设计方案的可行性。

使用Keynote来制作的高保真原型，可以让你测试用户与界面的交互行为，探讨方案的可行性

不过在实际的移动体验设计项目中，动画的使用也有一定的原则：

克制 过多的动画会让人感到烦躁不安，会破坏产品的体验，需要有节制的使用动画元素，并且使用微妙精致的动画效果来营造良好的体验氛围。

互补原则 动画设计原则的使用很少是鼓励存在的，因此需要巧妙的结合不同的设计原则来设计优秀的动画效果。

动画是为了支持角色 电影中的动画都是为了支持剧情和角色，同样在移动端动画也属于辅助性的设计元素，不应该喧宾夺主，并且不能让用户因为动画而产生迷惑感。

腾讯移动端H5页面设计实战分享

《腾讯网UED体验设计之旅》一书集合了腾讯网UED团队在用户体验领域的十年探索经验，展示了大量精彩案例的设计技巧和过程。下面为该书的节选内容。

为什么要设计H5页面

移动设备的普及给媒体和娱乐带来了一场革命。根据中国互联网信息中心(CNNIC)2014年7月的报告显示，中国网民中，手机使用率达83.4%，已经超过传统PC整体80.9%的使用率。其中，手机网络新闻的使用率为74.2%，仅次于即时通信和搜索，远超其他手机网络应用。在资讯移动化的趋势下，观察近期各大门户在重大事件报道中的表现，会发现移动优先、产品社会化、交互趣味化是三个重要的趋势。其中，基于HTML5技术的移动Web页面(以下简称H5页面)，较完美地融合了上述三种属性，成为当下最受关注的内容报道形态，也引爆了社交平台上的大规模分享行为。

就像CD取代磁带成为一种更高效的音乐播放方式一样，数字文件也将取代CD，依此类推，智能手机也将会替代PC的一部分重要功能。尽管仍有争议，但不可否认的是，移动互联网时代已经到来，随着用户从PC向移动端的迁移，从大屏到小屏，从鼠标键盘到多点触控，移动端逐渐成为媒体报道的前沿阵地。

一提起移动端，大家首先想到的就是手机上安装的移动应用，比如微信、腾讯新闻客户端、QQ浏览器等。我们称这些应用为原生应用(Native App)，因为它们是需要安装在用户设备上的软件，它们的代码和界面都是针对所运行的平台开发和设计的。这些原生应用能够最大程度地发挥用户设备的性能，例如使用存储空间实现离线阅读，利用图形加速实现界面动效，以及利用摄像头来上传图片，等等。但跟Web专题相比，移动应用的开发周期长，开发者需要将产品提交到应用商店供用户下载使用。以苹果的iOS应用开发为例，开发者在应用商店要发布应用，需要通过约耗时8天的人工审核。因此，把PC端的Web专题做成一个个移动应用是不现实的。

除了原生应用之外，在移动端还有一种产品形态——移动Web页面。它源自于移动互联网诞生初期的WAP页面，有着和PC网页同样的优点：开发周期短、发布和更新方便。此外，用户只需要借助手机浏览器或者内嵌手机浏览器的应用就可以访问，比原生应用要方便得多。但在2014年前，因用户渠道和设备性能的原因，移动Web页面的形态通常都非常简单，也很少有用户互动。2014年，HTML5技术的普及、智能手机的更新换代和新闻客户端、微信等渠道用户的增长彻底改变了这一点。

在移动端，要在网页上实现交互和动效需要借助HTML5技术(例如CSS3媒体查询、CSS3动画、Canvas等)。现在的手机浏览器大都支持HTML5的核心技术，例如对触摸事件和手势的响应、播放声音和视频、渲染CSS变换，以及获取设备的加速度传感器数据等。这些技术衍生了诸如互动小游戏、交互型动画页面、可视化新闻等，为市场营销、媒体报道等提供了大量不同形式的载体，同时为产品策划与视觉设计带来了更多的想象空间。

通过HTML5实现交互效果时，通常比原生应用要更消耗设备资源，因此设备性能就成为H5页面效果的一大瓶颈。现在，这个瓶颈正在消除：2014年7月的一项调查表明，中国手机用户换机周期已由2011年的29个月缩短到18个月。而近两年上市的智能手机，大都运行着较新的操作系统和浏览器，性能上也能基本达到展示H5页面的要求。

好的产品需要恰当的渠道来让用户发现和传播，如果把一个个H5专题比作“箭矢”，那新闻客户端、微信和微博等传播渠道就是射出这些箭矢的“弓”。利用新闻客户端、微信和微博内嵌的网页浏览器(见图1)，H5页面可以与新闻文章、朋友圈状态和好友微博一起触达用户，再通过用户的分享形成传播。此外， H5交互页面凭借着精美的设计风格、新鲜的交互体验以及强烈的社交属性，对于用户来说有着极强的分享驱动力，很容易在移动社交环境中形成病毒式传播。微信红包和滴滴红包就是通过微信朋友圈广泛传播的H5案例。

图1 腾讯新闻客户端内的H5专题

综上所述，与原生应用相比，H5页面的传播性和灵活性使它更加符合媒体产品对时效性和差异化的要求，成为2014年移动媒体产品最重要的形态之一。

H5资讯专题主要基于H5技术，将图、文、动画、视频、音频等媒体形式进行合理组合，突破了传统新闻专题的内容、形式界限，让新闻资讯变得更加直观、生动。人性化的交互设计更好地将内容与人机互动结合，强化了用户的参与感。同时，这种多媒体形式创新带来的趣味性和新鲜感，也使用户分享专题的意愿得到提高，促进了新闻资讯专题的二次传播。

赛程魔方3D旋转界面设计

在2014巴西世界杯期间，我们与腾讯体育推出了一款世界杯赛程H5页面。在项目之初，我们就希望这一款小产品在内容定位+视觉设计+交互设计三个维度上可以高度统一，三位一体，围绕世界杯赛程赛事赛时这一中心，内容、交互、视觉密不可分;即设计与交互体现内容，内容反方向印证视觉与交互，将常规的体育赛程表通过多屏展现，时间轴表现等与H5交互特性紧密结合起来，创造出一种大家喜闻乐见的界面展示方式。随后小产品一经推出，赛程魔方(见图2)即引爆朋友圈，前后被复制抄袭几十次，从另一方面也印证团队定位的准确，形式与内容高度统一是项目成功的一大法宝。

图2 赛程魔方的视觉案例

交互形式与项目名称和内容高度统一：3D智能旋转交互方案(见图3)。

图3 3D旋转的交互模拟步骤

因团队负责媒体界面设计，所以从本源上我们十分强调内容与设计形式的高度结合，我们希望设计形式就可以强烈传达出我们要表现的内容与态度。项目名称为“赛程魔方”，体育赛事如同魔方一样复杂多变，结果未知，所以在交互设计上，希望能够利用HTML5的CSS 3D智能旋转方案完成多个页面的切换方式，以达到贴合“魔方”的项目概念。大家知道H5可以有3D旋转等形式，所以页面的交互方式将充分利用这一特性，当用户触控屏幕，手指上划，页面整体呼之欲出，以整体3D翻转的形式完成页面切换，交互形式新颖震撼并贴合内容。这一交互形式在随后多个项目中得到推广应用。

动态卡片抽出交互设计方案如图4所示。

图4 赛程魔方动态页卡抽出的交互虚拟步骤：从大屏到小屏

如图4所示，考虑到不同用户的不同需求，我们希望从封面起，即可以快速定位至相应页面，交互形式上补充了动态卡片抽出的交互设计方案，三排纵向并列式按钮以单击或滑动均可触发卡片抽出，继而快速定位至相应页面，满足相关用户的个性化需求。

如图5所示，封面主图构思思路来自桌面微景观，源于现实环境，设计师进行艺术加工，并与世界杯内容相互贴合，整体以线框式魔方包裹球场为出发点，将大力神杯底座与魔方设计融为一体，以半透明浅切面和不同粗窄线框相互结合，以表现艺术化的玻璃质感，从而模拟出整体空间感与立体感。

图5 场景化设计还原内容：抽象场景模拟现实环境

内容区重展示轻设计：突出内容主体，如图6、图7所示。

图6 小组赛赛程入口页　 　　 　图7 完全赛程页

对字母或数字序号类易识别元素强化设计，赋予归类指引的功能，放大字母可以将文字信息分类与定位，并增加版式节奏感。从小细节上将信息进行归类，方便阅读。整个赛程以时间轴的方式完全展现。

手机扫描二维码即可体验“赛程魔方”：

2014年多款H5小游戏一度刷屏，引发热议。众多H5小游戏都有一个共同的设定，即分享到移动端最具人气的微信朋友圈中，和小伙伴们比比高下。利用社交圈的攀比心理，是该类游戏成功的一大关键。基于社交圈的好友关系及信息分享链，重点挖掘了用户分享和攀比的模块，促使玩家为获得更好的成绩忍不住一次次在朋友圈炫耀。同时，在用户使用朋友圈的高峰时段去推动，更容易形成热点和话题。最有效地手段是利用玩家的慵懒心理。

相对于传统游戏，H5互动游戏除同时具备迅速传播的优势之外，还具有快速设计、快速开发的特点。在网络媒体行业，面对媒体资讯的高速爆发，H5互动小游戏可以做到快速贴合媒体事件的时间周期，并在一定程度上承载资讯，通过揣摩用户攀比心理，达到广泛传播的目的，成为通过资讯拉动网友参与热情与气氛的一道利器。

PC端和移动端的区别你知道吗

截至2015年11月，中国手机上网用户数已超过9.05亿，软件移动化成为一种趋势，移动产品经理成为了产品经理的一个重要分支，那么对于移动端和PC端到底有什么区别呢?在设计过程中有什么差异?下面我们逐一分析。

一、PC端与移动端区别

有人说手机端无非就是PC端的移植，功能设计照搬就行了，这是对于移动设计最大的误解，其实PC端与移动端是千差万别的。

1. 操作方式

PC端的操作方式与移动端已经有了明显的差别，PC端使用鼠标操作，操作包含滑动、左击、右击、双击操作，操作相对来说单一，交互效果相对较少，而对于手机端来说，包含手指操作点击、滑动、双击、双指放大、双指缩小、五指收缩和苹果最新的3Dtouch按压力度，除了手指操作外还可以配合传感器完成摇一摇、陀悬仪感应灯操作方式，操作方式更加的丰富，通过这些丰富的操作可设计不同新颖吸引人的交互互动设计。

2. 屏幕尺寸

随着时间的推移，移动端的设备屏幕逐渐增大，但是你再大也是大不过PC电脑屏幕的，这是毋庸置疑的。PC端屏幕大，所以他的视觉范围更广，可设计的地方更多，设计性更强，相对来说容错度更高一些有一些小的纰漏不容易被发现。移动端设备相对来说屏幕较小，操作局限性大，在设计上可用空间显得尤为珍贵，在小小的屏幕上使用粗大的手指操作也需要在设计中避免原件过小过近。

3. 网络环境

当下不管是移动端还是PC端都离不开网络，PC端设备连接网络更加稳定，而移动端可能遇到信号问题导致网络环境不佳，出现网速差甚至断网的问题，这就需要产品经理在设计中充分考虑网络问题，更好的设计相应的解决方案。

4. 传感器

移动端设备重磅武器来袭，完善的传感器是PC端设备望尘莫及的，压力、方向、重力、GPS、NFC、指纹识别、3Dtouch、陀螺仪等等等等，就是因为这些传感器的存在才使得我们的生活更加丰富多彩，有了他们你才能玩赛车游戏才能摇妹子才能统计每天走了多少步，产品在设计中巧妙地使用传感器能让产品添姿加彩。

5. 使用场景与使用时间

这两块我们一起来说，因为PC端设备的使用场景多为在家或者学校公司等一些固定的场景，所以其使用时间偏向于持续化，在一个特定的时间段内持续使用，而移动端设备不受局限可以吃饭用、坐车用、拉屎用、无聊打发时间用、躺着用、坐着用、倒立着用都没人管你，随时随地想用就用，所以他的使用时间更加灵活，时间更加碎片化，所以在操作上更偏向于短时间内可完成的。

6. 软件迭代时间以及更新频次

你有没有很久都没有更新你的PC软件了，但是你的手机软件确实永远保持着最新的状态，这就是他们两者的区别，对于移动端他的软件迭代时间较短，用户更新率较高而PC端软件迭代时间较长，除非出于需要用户一般不会主动更新软件，软件更新率低。

7. 续航

除了笔记本PC端台式机只要有点他就从没有考虑过这个问题，移动端设备则需要考虑。

二、在功能设计上的区别

你有没有在移动端看到过下拉菜单，有没有在PC端看到过滑动解锁，相同的功能在不同的设备上有其自己的展现形式，下面我们罗列一二，因为例子实在太多就不一一展开。

1. 文字输入

在文字输入中，PC端一般使用文本框解决。

而在移动端中因为手机屏幕尺寸以及UI风格的原因我们基本没有在手机上看到过PC端这样的展现形式，而是采用另起一页输入或者文字后直接输入方式，这就是各个平台根据自身特性的展现形式。

2. 内容选择

在PC端中，一般使用下拉菜单或者是单选按钮形式完成内容选择。

而在手机端由于手指的操作便捷性考虑一般不采用PC端的选择方式而是通过列表选择或者其他交互来完成。

这样的设计点不胜枚举，就不一一展开了，还需要在日常生活工作中多多留意，切不可把PC端的设计模型照搬到移动端。