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