移动端网页制作;用web做移动端网站 收藏 0

美页：在手机上生成移动端精彩页面

美页是一款在手机上使用的移动端页面生成工具，可以生成微信、微博的有趣好玩的移动端页面。

美页的网站主页

移动互联网时代，移动端的网页的呈现也越来越多的像移动端转移。而在生成工具方面，专业级的生产工具，大部分仍然停留在PC级的专业工具。其实，一些简单的页面，完全可以用消费级的工具生成。今天创业记介绍的这款APP即是这样一款工具。

美页的模式和模板

在工作流程上，逻辑非常简单。打开该APP首页，选择一种模式即可。 分别为微页、贴图和恶搞。以第一个选项为例，微页为制作可以在微信、微博上分享的移动端的页面，选择其中一个模板，即可开始制作，制作的流程跟手机上的PPT差不多。

微页的制作和分享页面

制作完成后，即可选择分享，可以选择分享给微信好友、朋友圈、微博、QQ空间，以及复制链接或者保存在本地。在这一过程中，微页其实将本地生成的内容上传到服务器，生成了一个保存在服务器端的移动端页面。

美页的贴图模式和恶搞模式

其它模式方面，你可以使用美页生成像海报一样美图，也可以使用美页生成各类恶搞的图片，比如新闻联播的图片、火车票、微信对话画面等创意恶搞的图片。（李珣）

PC端/web端/移动端开发的区别在于什么？

2023年，说一点真事。

移动互联网的红利已经没有了，也别再埋头只是做APP了。

但即使大家都知道移动互联网红利没了，我发现现在许多身边的互联网从业者都，如果做产品研发仍然是会首先考虑移动端，因为这里用户更近，可以更容易获得用户。用小程序或者APP，来作为产品主要的形态。要么就是用网页端的SaaS产品来替代，很少有产品经理会去负责客户端的产品设计工作。

你在市面上找的产品经理工作，也是以移动端、网页端为主。

但实际上，以上3类产品都是非常受限网络效果的，因为网络传输慢或者网络限制，就导致页面无法加载，无法执行操作。

对于PC端产品，现在仍然有非常多的场景仍然更加适合在PC上的，而不是在移动端上。

在PC端里，因为用户坐在电脑前面，拥有整块的时间，可以聚焦在产品上，移动产品则不一样，非常碎片化，很难集中高效操作。

所以当我们开始新项目的产品设计后，搞清楚这3点的区别，更加有利于首发优势。

PC 端擅长做复杂的图标呈现、特效制作、大型游戏、数据计算、后台处理、文字水处理、同时PC端所对应的硬件兼容性更好，性能更高。

对于有的PC端来说，用户还能够离线操作，用户只需要专注在功能使用即可。有没有网络并不会影响他的主要操作。

移动端手机的尺寸有非常多，需要做屏幕适配，同时不同机型下的系统版本还要做兼容处理，对于产品经理来说，PC端一个页面可以展示10个以上功能都没事，而移动端则TAB不能超过5个。

现在的移动端还不局限手机，还有平板电脑、穿戴设备都可以属于移动端。

所以移动端的开发，APP成本并不低。当然有一些开发者会主要集中在某个系统的某几个版本上，但是也丧失掉了许多用户。

网页端有兼具两者的优势，网页端可以足够大，在手机上还能用响应式完成。

但是网页端受限于浏览器，无法使用复杂的应用程序。同时需要优秀的前端进行优化，否则就极易造成访问速度过慢。

而对于一些数据查看、协同轻办公的产品，仍然可以遵循比较火的SaaS产品，而这些以网页端为主，用户不需要下载客户端即可完成操作。只要有网络的情况下，就可以通过账户密码的形式登录，完成产品的使用。

如何判断一个产品更加适合移动端还是PC？

最简单的办法就是记得一点：PC端更加适合稳定，长时间不动的办公场景，移动端更加适合碎片化的场景。

而对于有的产品，即使场景很适合PC端，但是受限于版权，导致错失大量用户，比如咪咕音乐就是没有客户端，第一是受限于音乐版权，其次是音乐严格的安全管控问题。

PC端的用户，在很多时候和移动端用户其实很多时候会是两批用户。两者面向的场景是不同的，角色对象也是有区别的。

所以你会发现办公类、游戏类、设计复杂工作的一定在PC端，尤其现在办公场景的同学，用户都有笔记本电脑，而移动端的用户则没有。

所以移动端的产品用户、PC端的用户的两类需求不能共存。

全方位梳理：如何成为一个移动端UI设计师

移动端的UI设计有其独有的一套设计规则和约束。新技术的不断加入促进了移动平台的快速增长，而移动端的UI设计也和传统的平面海报/网页设计不太一样。那么，要成为一个合格的移动端UI设计师需要掌握什么样的技能，经历怎样的涅磐才行呢？

Part 1 挑战和制约

每个媒体都有它的局限所在。即使是在移动端这个充满机会、自由和创意的平台上也有着许多亟待解决的问题，和无法回避的局限性。

时至今日，市面上流通的智能机已经多不胜数了，不同的智能终端不仅仅尺寸不尽相同，而且因为分辨率的差异使得屏幕的像素密度也有很大差异，往细了考虑，这些终端的输入机制、屏幕比例、屏幕方向都会影响到移动端的UI设计。

移动端的网页设计可以借助响应式设计保证不同屏幕下的浏览体验，相比之下移动端的APP设计则相对缺少流动性。所以，作为移动端的UI设计师，还是需要考虑屏幕差异造成的布局设计的不同以及用户体验上的变化。

目前主流的三大移动端操作系统是iOS，Android 和 Windows Phone（市场份额较小，在国内基本被边缘化了），每个操作系统都有它们自己的一套设计规范，交互方式，程序接口，而随着操作系统的版本更新，这些东西也都有着各自的变化。其中最典型的就是Android操作系统的版本分裂，分裂所造成的程序兼容问题至今都尚未弥合，这其中涉及到了操作系统版本的差异，以及厂商定制化之后造成的千奇百怪的兼容性问题（Android开发者已经无数次哭晕在厕所）。iOS也随着6.0到7.0的大版本升级，经历了一个较长的过度时期，至今两个大版本之间在设计风格和兼容性上的问题还影响着开发者。Windows Phone 从7到8的升级有多我就不在此赘述了，那不堪回首的过去和微软高管被口水淹没的场景我真的不想回忆。

即使是三大平台在各自平台内交互设计有着较高的统一，系统版本分裂、操作系统差异以及厂商定制化所造成的影响是不容开发者和设计师忽视的。

设计和构建一个APP的方式会直接影响到它的性能。换句话说，手机里安装的程序如果设计的好可以你的手机可以待机一天半，而如果其中有一个程序设计的有问题，会让你需要出门多带一个移动电源了。一些不必要的转场动画可能会让你的CPU为之进行密集地运算，一段存在问题的JS代码可能让你的浏览器耗费多于平常数倍的电量。也许今年刚刚上的Galaxy S5能够流畅运行某个应用，但是2年前的Galaxy Nexus可能会打开应用的时候立马卡出翔。总的来说，设计和开发，都会影响到APP的性能，甚至左右手机的续航（部分国产手机用户同开发者一起哭晕在厕所）。

有很多应用在构思之初非常酷炫新颖，但是这并不意味着它可以轻松实现。应用的设计和开发的方式会直接决定它能否在Deadline来临之前实现。如果我们无法认清一个应用的开发成本，那么开发者所承担的负担会成倍增加，也为应用的后续发展埋下了祸根。

Part 2 抛弃思维定势

当我们刚刚开始学习设计和开发的时候，，这个数字时代才刚刚开始，我们对于新兴事物的认知尚且稚嫩。学校教育和实际设计开发上的“时代差异”，让很多设计师对数字化的互联网的认知稍显“静态”，甚至形成某种思维定制，对于移动互联网也知之甚少。在这个信息爆炸的时代，激烈的竞争催化下的移动互联网正在以一种恐怖的速度演化、推进，这使得设计师们需要紧跟发展的步伐，随时更新升级自己对于互联网的认知。

移动端设计和平面设计有着巨大的差异，它不再是一张平面的画布。我怀疑PS和AI并不足以帮助设计师完成从平面向移动互联网的转变，尽管PS和AI已经帮助设计师们在过去的20年里完成了无数壮举。目前，我们依然需要借助它们来绘制更多不同屏幕尺寸下的UI和图标，但是我们需要借助更多的其他软件来展现移动端不一样的一面，比如用AE来绘制动效。

的确，当涉及移动端UI设计的时候，单单考虑屏幕布局是远远不够的。像Facebook Paper，雅虎天气，Weather Channl这样的优质移动APP就像我们证明了界面间的转场动画到底能让一个UI界面产生怎样的张力。而刚刚推出的Android L所用的Material Design则更是在看似普通的静态界面之后，隐藏了一系列让你欲罢不能的过度效果。

界面转换之间的动效，在过去只为博得一笑，今天却正在走向主流，成为移动端的用户体验的核心。它正在成为交互和界面的重要元素，赋予界面以韵律和生命力。动效不仅呈现运动的过程，还能表现出空间、层次，变化，在基础的界面结构上为用户带来截然不同的体验。

你并不需要将界面做独特或者原创，尤其是当你是为了独特而重新设计所有的界面，然后让整个产品为独特而担上风险。很多时候，坚持使用原生UI元素和模式是让应用能按时出货的重要保证。比起强行推动独特原创的设计，很多时候更合适的做法是打造简单高效的交互界面，创造真正的品牌价值。

很多设计师喜欢上Behance和Dribbble这样的网站上去找灵感，虽然其中有很动优质的设计作品，但如果你并非一个经验丰富的移动UI设计师的话，可能会被这些作品误导。其中很多设计都仅仅只是从未实现过的高保真Demo，当你正打算设计一个界面的时候，其中某些设计可能会影响你的思路。所以，不妨从那些已经上线的成功APP中汲取营养吧。你会从中汲取到丰富的营养，看到蓬勃发展的设计趋势，这些经过市场和用户验证的案例会让你明白什么值得学习的设计。

Part 3 学习新技能

正如同web设计师需要了解HTML/CSS一样，作为移动端UI设计师的你应该了解移动端APP的架构。首先移动端开发的语言和网页设计就不太一样，各个不同平台有着各自的编程语言和接口，界面的构成也无法使用CSS和标签来实现。

你需要深入阅读官方的开发文档，明白APP的构成，编译方式，发布方式，了解设计的规则。这些东西不仅关系到你的应用开发好坏，还会影响系统的稳定性，电池续航长短等多种因素。作为移动端UI设计师，你单了解设计是不够的。当然，从长远来看，这对于你的职业生涯也很有好处。

光了解平台的基本特征是不够的。接下来你需要了解它相关的技术构成：位置服务（wifi，GPS等），蓝牙（低功耗蓝牙技术），信号，前后摄像头，麦克风，陀螺仪，位置传感器，加速度传感器，指纹扫描仪（iPhone 5s），眼动追踪技术，语音识别，人脸识别，等等等等。每一个新技术的背后以为着应用程序更多的可能性，交互设计、使用体验，甚至商业模式。

每个移动操作系统中中总有着大量的本地UI组件，他们有着极大的自由度，方便你进行定制。你需求确切地知道他们的特征（尺寸，大小，功用），你可以为与你合作的开发者节省大量的工作时间。

安装SDK并运行，了解移动开发框架，比如TubyMotion、Xamarin、Titanium。熟悉集成开发环境，因为这其中包含了移动开发所需的方方面面。

三大移动平台之间，有着相似之处，但是在深入探究他们的交互设计，会发现它们在理念上的巨大差异。作为一个设计师，你需要明白这些差异所在，以及它们是如何体现在实际案例中的。

不要只着眼于单一平台，三大平台都需要深入体验，每天至少都要把玩一下，并且最少要持续半年。在这个过程中，体会差异，并且将你觉得重要的、有代表性的、值得保存记录的界面截图留存。作为单一平台的狂热粉丝，你是做不好移动端UI设计师的。

考虑到屏幕截图并不足以表现UI全部的特性，你需要学会记录界面不同的状态、转变过程、转场动画等信息，并且学会记录界面对于不同状况的反馈。

一个现代的设计师应该是具备战略眼光的设计师。你的目标不能局限于闷头制作漂亮的界面，你应该让你的设计与团队合作结合到一起，切合项目需求。洞悉用户深层次的需求，并且能快速地随之反馈到设计上。将设计作品保存下来并附上详细的说明，确保所有的设计都与核心理念保持一致，与用户需要保持一致。

你不能只将高保真的模型交给开发者就了事，因为在开发过程中会不断提出新的需求。总会有之前考虑不周全的情况，需要在开发阶段进行补充完善，设计师需要随之进行快速响应。所以，在这个阶段，设计师真的需要坐在开发者旁边应付突发情况。确保开发者在碰到新的需求的时候，不用他们自己来补充UX的细节，或者再来找设计师。

Part 4 关于移动端网页设计的小技巧

在移动端，响应式设计并非是放之四海皆准的解决方案。有时候它非常适用，但是有的时候并非如此。你有责任考量什么时候采用专门的解决方案，什么时候需要做响应式设计。

的确，CSS动画，渐变，阴影都非常赞，也非常容易实现。视差网页看起来也很酷，很多设计师都对此感兴趣。但是这些元素都非常消耗资源，对移动端的浏览器会产生很大的负荷，进而影响电池续航。适度控制CSS特效和JS动效都是很有必要的。即便低性能手机上浏览器可以良好地支持CSS3选择器，但是性能的瓶颈会让整体体验非常差。

这并不是是一个非常确切的清单，但是你能从中发现很多不错的工具帮你完成不同的工作。其中有一部分是免费的，有一部分是Mac平台的。

Part 5 所有的这些都已经过时了？

这么说，对，但也不对。目前移动端开发发展非常迅猛，设计趋势不断转变，智能家电，物联网时代也即将来临，相应的传感器技术和移动应用也会带来更多的挑战。作为一个移动端UI设计师，我们要学习的东西太多了，相应的，机会也迎面走来。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com