再加上许多JavaScript库，移动开发的可能性是无限的。
现在可以仅使用HTML5和CSS3生成整个Web应用程序。
目的是使您的移动Web应用程序具有与本地界面相似的外观。
与框架或本机应用程序相反，该集合更侧重于HTML5 / CSS3 / JS webapps。
在本文中，我汇总了70多种资源来开发移动网站和Web应用程序。
PSD和UI图形
同样，这组图形将包括大量的按钮，表单，纹理，工具栏和其他有用的GUI套件。
如果您不精通Photoshop，那么尝试设计美观的界面可能会感到压力很大。
对于网站开发人员来说，免费的PSD通常是最有用的资产。
所有按钮，渐变，下拉菜单和菜单的外观都与本机iPhone 5完全相同。
即使是本地iOS程序员，也可以真正享受此移动套件的精确性。
Teehan + Lax的移动GUI套件对于所有移动开发人员而言都是臭名昭著的资源。
坚持基本风格将使您的设计看起来更融入设备。
根据您要如何设计移动Web应用程序的样式，这两个图形包可能会提供您所需的一切。
类似于第一个GUI工具包，我们还可以找到与基于Android的本机应用程序相关的移动元素。
整个设计是分层的，可以免费下载。
这是针对移动应用程序存折的，其中包含来自不同页面的一系列屏幕截图。
至于更高级的UI套件，我们有这个很棒的iPhone应用程序设计PSD。
这将为您提供丰富的界面风格，从而使您在竞争中立于不败之地。
图标和按钮样式可以通过图像或CSS3代码重复。
菜单工具提示并不常见，但这并不意味着它们在HTML5网络应用中没有任何作用。
您可以使用PSD图形在您自己的Web应用程序中复制相似的标题栏和渐变/纹理。
该UI工具包标有Fresh iPhone，并显示了有用的iOS应用程序设计。
但是，它们的许多免费内容仍具有卓越的质量。
使用这个免费的PSD，可以更轻松地自定义渐变和图标。
但是，如果您走这条路，将会为应用程序提供更自然的感觉。
移动网站通常无法正确使用此功能，因为在页面之间进行切换将需要一些JavaScript。
另一个相当晦涩的元素是在许多iOS应用程序中发现的tabbbar。
它可以轻松自定义不同的配色方案，并为开发人员提供更加简洁的用户界面。
看看这个免费的PSD，它提供了皮革纹理的iOS风格的顶部菜单栏。
特别是对于移动应用程序，这些应用程序通常没有足够的空间容纳大量浮华的标题。
顶部的工具栏设计也是屏幕不动产的一个突出领域。
加上中心标签图标实际上要膨胀得比其余标签大，这是iOS应用程序开发人员常用的设计风格。
PSD图形包括顶部标题菜单栏和页脚标签栏。
维吉尔·帕纳 （ Virgil Pana ）发布的这个特殊的iPhone UI PSD工具包在设计本机iOS接口方面令人振奋。
背景比普通的界面元素要深得多，并且文本也更大且更易于阅读。
使用此PSD图形，您可以尝试构建具有更令人愉悦的配色方案的样式相似的拨动开关。
拨动开关实际上是iOS设备固有的，但在HTML5 / CSS3的任何地方都找不到。
我们可以找到按钮，搜索栏，滑块，开/关开关，下拉菜单以及大量其他有趣的东西。
时光倒流，我想参考Cloudy UI Kit，其中包含了许多惊人的图形元素。
365psd是一个了不起的网站，仍然每天持续发布新的免费赠品。
这些迷你地图图钉图标是任何样式的移动Web应用程序的完美伴侣。
还已围绕诸如Google Maps之类的 API创建了HTML5 Web应用程序。
因此，许多本机Android和iOS应用程序将专注于地理位置。
PSD完全免费下载，其中包含许多元素可供选择。
这些不是常见的样式，但是它们为开发人员提供了一个很好的起点。
当将您的一般运行界面组合在一起时，“移动和Web” UI套件非常棒。
您可以更新渐变和图标以将其很好地融合到任何主题中。
这个免费的PSD图形是基于将选项卡按钮混合到固定工具栏中的想法而构建的。
一些移动设计师将使用固定的顶部导航栏，而不是镜像iOS标签栏效果。
此窗口UI应该提供一个很好的起点。
制作高级Web应用程序时，您可能需要处理头像上传或用户发布的类似内容。
这个免费赠品下载包括一个带有加载程序栏的移动应用程序屏幕。
DeviantArt是一个非常有才华的艺术家的社区。
这个PSD赠品有一些标签栏图标和一个顶部工具栏，值得一看。
全屏网站和移动应用程序都对细节纹理越来越感兴趣。
木材纹理是我们可以在网上找到的另一个重要功能。
渐变和按钮非常简单，几乎可以匹配任何设计类型。
此处的功能被调低以显得更常见。
我们在列表的前面部分看到了类似的移动iPhone UI PSD，我想将这个工具包作为伴侣。
将meta标签应用到HTML5 Web应用程序中非常简单，以便将自定义iOS图标图形样式化到用户的主屏幕上。
我觉得这个PSD赠品对年轻的应用程序开发人员来说是一个很好的设计灵感。
iOS应用程序图标风格出色，反映了当前的技术进步时代。
值得一看的是，看看这些元素是否可以在您自己的布局中正常工作。
但是，有些设计师宁愿不走这条路，并认为更详细的图形会吸引眼球。
移动Web应用程序可以在非常小的屏幕上运行，因此受益最大。
平面Metro风格的Web元素越来越受欢迎。
这是一个了不起的免费赠品，值得在以后的项目中使用。
从理论上讲，用户可以点击导航标题，以显示更多链接。
这个免费的PSD提供了一个带有图标链接的迷你垂直快捷菜单，用于导航。
查看免费赠品，看看您是否认为值得调查。
通过使用一些jQuery，该过程非常简单，不需要大量的开发知识即可实现。
最近，我们发表了一篇文章，解释了如何像此PSD一样构建滑动移动导航 。
手机模板
我已经为Android和iOS设备提供了线框图模板。
少量的移动模具和线框将帮助您完成此任务。
但是，花点时间来计划结果可能会带来很大的帮助。
通常更倾向于直接进行编码并随后详细说明布局。
绘制移动Web应用程序的过程可能很困难。
您可以获取一个预览图，这提供了一个漂亮的图形，可以在您的网站上发布。
将您的应用程序图标附加到PSD中，并按比例缩小以与蓝图图标重叠。
这个免费的PSD模板是完美的解决方案。
您是否想查看您的应用程序图标在iPhone主屏幕上的外观？
如果您打算支持将移动网络应用程序保存到iPhone主屏幕上，我必须100％建议抓住这个免费赠品。
最近，他为AppIconTemplate.com购买了顶级域名，您可以在其中下载此免费PSD。
几乎每个iOS设计师/开发人员都必须在Pixel Resort上了解Michael Flarup的iOS图标模板。
而且，如果您同时针对这两种平台进行开发，则无论如何都要检查它们！
但是，与iOS相比，标准图标的大小有很大不同。
这也是免费下载，并且PSD的设置方法与上述相同。
同样，我们也为设计师提供了一个漂亮的Android应用程序图标模板。
它为添加自己的内容和为Webapp设置基本页面模板提供了理想的起点。
此PSD集将包含您期望在iOS应用程序中找到的所有典型界面元素。
我想将AppView主题更多地视为极简设计者的模板。
它是免费下载的，并且为您的移动Web应用程序提供了常用屏幕的绝佳来源。
追求Android图形样式的开发人员将希望研究适用于Adobe Fireworks的UI工具包。
该资源包括HDPI分辨率，在高分辨率屏幕上甚至更好。
您肯定会想查看整个免费赠品，其中包含PNG图标和其他移动元素。
当涉及基本模板时，Lookamore Android UI套件绝对令人赞叹。
水平网格应适合iPhone 4和4S设备，因此它是一个革命性的模板。
iPhone 5无处不在，许多苹果发烧友已经选择了这项新技术。
在构建基本网页模板时，此网格PSD可能有用。
您可以从十几个不同的屏幕中进行选择，并操纵元素以使其完全适合您自己的布局。
UI套件更多是用于移动Web应用程序的线框图模板。
对于Adobe Illustrator的用户而言，这种iPhone模板设计将是一个更加平滑的过渡。
但这确实有助于将默认元素用作项目的起点。
请记住，您的移动Web应用程序无需模仿任何一个移动操作系统。
这些Android模具是用于构建核心线框的另一个工具。
这些AI套件将包括矢量草图，可以对其进行调整和缩小，而不会造成任何质量损失。
同样，您可以找到用于iPhone应用程序界面的Adobe Illustrator元素和模具。
但是，如果您计划启动大量的移动Web应用程序，则值得详细研究。
我认为这不是对所有人都有帮助的免费赠品。
最初为各种智能手机和平板电脑构建模板时，线框设备是一个很好的工具。
可能无法帮助所有人的其他示例，但这些接口对于特定的设计师领域很有用。
这些模板实际上已加载到Google云端硬盘中，并且可以免费使用。
我最近刚刚在这个Tumblr页面上找到了很多有用的免费赠品。
加上用于您自己的自定义的主屏幕和内容页面设计。
他们的库中包含许多有用的移动图形，但是这个特定的iPhone界面提供了一个标签栏和图标集。
这个免费的iPhone应用程序PSD模板由PixelsDaily提供 。
图标集
这些收藏中的大多数将包括视网膜版本以及标准图标尺寸。
另外，您可以将图标集嵌入到页面内容中，以在移动屏幕上获得更直观的方法。
顶部导航工具栏和底部标签栏区域将经常使用图标表示按钮动作。
想一想所有可以找到这些标志符号的地方。
没有一系列相关的界面图标，什么样的移动网络应用才可以完成？
由于图标是基于矢量的，因此可以为视网膜设备轻松调整其大小和位置。
首先，我从Dezinerfolio找到了精美的矢量图标集合。
图标也完全免费供个人和商业使用。
这些字形的样式为白色至灰色，应在较暗的背景上使用。
PixelPress Icons实际上是作为iPhone应用程序工具栏图标销售的。
他们的背包提供了600多个精美制作的图标，可以轻松地适合任何布局。
Gemicon集必须包含在这一系列资源中。
免费的iOS标签栏图标
但是拥有如此强大的界面功能将是值得的。
在HTML5 / CSS3中重新设计iPhone UITabBar的想法时，可能需要花费大量时间才能在不同的浏览器中压缩bug和修复UI。
另一个完美的iPhone工具栏应用程序图标系列。
这些图标可以在布局的任何位置使用，也可以@ 2x放置以用于高DPI屏幕。
就在最近，Speckyboy为移动设计师发布了免费的视网膜字形图标集合。
在您自己的时间免费下载包装和玩具。
您可以看到如何将这些图标放置为典型的布局样式，因此着陆页非常突出。
MFGLabs在将免费赠品发布到设计社区方面拥有良好的记录。
但是这些集合都是免费的，可以免费下载。
除了界面功能外，并非所有移动Web应用程序都需要大量图标。
这些经过精心设计的图标在典型的移动内容区域中也很有用。
此免费赠品套装非常适合希望模仿Android界面感觉的移动开发人员。
但是，Android GUI包也提供了很多本机图标。
我们看到的大多数收藏都与Apple风格的iOS图标有关。
图形为白色到灰色，但是您可以在Photoshop中更新颜色和效果。
但是它们只是界面功能和工具栏按钮的正确尺寸和形状。
IconDeposit中的Clean Icons太小，无法在标签栏元素中使用。
看看他们的画廊，您可能会对许多变化感到惊讶。
这些最初设计为iPhone标签栏图标，但是它们非常适合任何界面。
粗俗的图标集包含超过350个字形，可在您的移动网络应用中的任何地方使用。
灰色包装包含300多个图标，适合视网膜设备使用。
IconBeast免费赠品包还包含iPhone标签栏的漂亮标志符号。
这些是单色图标，可以更好地适合您的内容，段落或菜单按钮。
这个迷你设备存储包确实让我印象深刻，我想将其包含在我们的移动资源中。
这些可以轻松地在大小和颜色上进行更新，而且它们可以很好地适合任何移动版式。
矩形图标是裸内容美学的另一种解决方案。
但它也可能包括内容小部件或webapp页脚区域。
该BG可能是您的iOS样式的标题栏。
白色阴影（Shades of White）奇怪地是为更深色的背景构建的。
这意味着您可以直接在Adobe Photoshop中移动图标并更新其大小，颜色和纹理！
与其他图标集相反，此包内置在免费的PSD中，而不是矢量或PNG。
此免费赠品是该套装的绝佳补充，该套装主要由iOS样式控制。
最后，我们还有一些基于Android的本机移动UI图标。
线上工具
Web工具通过提供HTML5 / CSS3代码模板，图标生成器，智能手机演示以及许多其他功能，可以使您的工作变得更轻松。
但是，在线工具可以为加快开发过程提供很多帮助。
诚然，用于构建移动网站的在线工具和Web应用程序并不多。
它是完全免费的，可以使用所有常见的图标格式。
如果您没有时间调整大小和创建其他图标，则此Webapp将为您处理该工作。
MakeAppIcon可能是移动开发人员在线上最出色的工具。
只需在网站上进行搜索或单击侧栏中的任何相关标签即可。
他们的数据库包含新的开源GPL图标，可在您自己的应用程序中使用。
如果上面列出的图标集不够用，您可以随时查看图标数据库。
这考虑了许多不同的iOS应用程序以及基于Android的Web浏览器。
他们的页面用图形编码，显示在浏览器中呈现移动HTML时的所有差异。
移动HTML5不像在线资源那样是Web应用程序。
查看一些功能，看看您是否有兴趣研究手头的任何主题。
该页面特别处理用于移动Web应用程序HTML5开发。
他们的视频库包括CSS3，HTML5，jQuery，甚至是Objective-C编程。
Treehouse是一个新的在线学习库，可帮助开发人员掌握新技能。
即使您不熟悉线框图制作过程，它也是一个有趣的工具。
只需导航到主页，即可使用自己的工作区进行设置。
Mobjectify是可直接在浏览器中工作的移动线框图工具包。
如果您刚开始为移动Web应用程序构建布局，则将非常有帮助。
它们提供了用于构建自己的布局的非常基本的界面元素。
Mockup Designer是Github托管的工具，每个人都可以免费使用。
基本服务是免费使用的，并且通常会提供出色的效果。
您可以再次检查自己的Web应用程序是否运行正常，甚至不拥有原始设备。
Manymo是用于模拟移动浏览器的在线工具。
这将节省您在开发过程中的时间，并大大减少您的编码要求。
它是一个免费的网络工具，它将捆绑和打包HTML5 / CSS3代码作为您的项目的模板。
如果您没有HTML5模板，那么我建议您检查Initializr。
开源代码
您还将找到反映Android和iOS智能手机的本机效果的代码段。
但是，这些插件和代码框架中的许多都允许进行移动响应式Web设计，这在支持桌面浏览器时也非常有用。
我想指出，在构建移动Web应用程序时，这并非总是可行的方法。
所有前端开发人员至少都听说过响应式Web设计。
构建移动Web应用程序的最后一步是代码。
但是，如果您有兴趣测试其他第三方模板，则这是一种解决方案。
并非所有开发人员都会对使用框架感到满意。
开源Jo框架为HTML5移动Web应用程序提供了一种简单的解决方案。
对于非JavaScript用户几乎没有支持，但是它是一个不错的库，值得关注。
它将迫使某些功能的行为就像它们是在iPhone上本地渲染的一样。
iOS.js是功能强大JavaScript库，可更新您网页的外观。
这些要比Mobile Safari工具栏扩展到浏览器标题要好得多。
这会将本机滚动条添加到您选择的任何元素上。
jQuery Nicescroll对移动Web开发人员来说是一个非常酷的插件。
这将提供一个基本HTML5 / CSS3 / JS框架，用于创建需要标签导航的移动Web应用程序。
它们可以与此免费脚本iTabBar结合使用。
还记得我们之前提供的所有这些标签栏图标和标志符号吗？
这些代码很容易实现，绝对值得在您有空的时候进行检查。
Android，iOS，BlackBerry和Palm OS支持它。
Lungo是用于构建本机移动Web应用程序HTML5跨设备框架。
iOS ScrollPane是Web应用程序的免费资源，可以复制相同的主屏幕效果。
这个确切的效果已经作为jQuery插件在网络上复制了。
您知道如何在iPhone主屏幕上向左/向右滑动以在图标之间切换吗？
智能手机和平板电脑都将从此jQuery插件中受益。
他们的文档非常简单，支持非常出色。
比较移动响应幻灯片放映插件时，我必须推荐PhotoSwipe。
如果您喜欢它们的库，那么您肯定会想尝试复制iOS本机应用程序的这个主题。
大多数前端Web开发人员都知道jQuery Mobile ，它提供了动态HTML5 / CSS3移动界面。
Github上另一个很棒的软件包是这个iOS风格的jQuery Mobile主题。
因此，尽管此插件非常适合移动用户，但对于响应式网站却不是理想的选择。
使用鼠标导航时，这些功能在您的桌面浏览器中将无法正常工作。
slideToucher是一个jQuery插件，用于将滑动面板添加到您的移动应用中。
此代码将帮助您在任何Sencha移动应用程序中实现滑动导航功能。
Sencha Touch是一个令人兴奋的移动HTML5框架，用于构建浏览器内Web应用程序。
它提供本机触摸手势，并且还通过JavaScript代码支持强大的扩展。
这个开源的Lime.js库是用于浏览器内游戏HTML5框架。
除了典型的移动Web应用程序外，还有许多对HTML5移动游戏感兴趣的设计师。
您可以在半透明的OSX样式工具栏上滑动以滚动或单击并拖动。
这将模仿滑动内容的iOS样式，该样式可以应用于页面上的任何div或部分。
在这里所有的jQuery插件中，我认为Custom Content Scroller是我的最爱。
可能需要一些初步的初步工作来确定基础知识，但这在支持移动HTML5 Web应用程序方面迈出了一步。
他们的网站上有很多演示，文档非常容易阅读。
Junior是用于构建移动Web应用程序的更加完善和完善HTML5框架。
这些代码可免费下载，并且很容易在任何网站上进行。
这个jQuery插件将允许您设置任何输入表单复选框元素的样式，使其类似于滑块。
我们都知道iOS中的本机ON / OFF开关。
寻找自然iOS Web应用程序HTML5解决方案的任何人一定应该查看Luckyshot框架 。
整个框架的构建没有任何JavaScript，并且具有完全响应能力，可以自然地适合所有监视器和移动屏幕。
Luckyshot模板是一个免费的开源HTML5 / CSS3项目，用于构建类似于iPhone和iPad应用程序的布局。
最后的想法
但是，如果您有任何疑问或我们可能错过的其他资源，请随时在论坛讨论区中分享您的想法。
我希望本指南将为您以正确的方式启动您的Webapp想法提供一个大胆的起点。
随着趋势的发展，我们很可能会看到在线发布了全新的工具和资源。
大量的移动代码和GUI套件应为新开发人员提供一个库。