这篇文章是从微软的Web开发系列的一部分。 感谢您支持谁使SitePoint可能的合作伙伴。

多年来,我听到开发商说,“你就总能知道当它是一个Web应用程序,”影射当本机应用程序相比,网页应用所缺乏的。 这些相同的人会声称,Web应用程序性能差和设计是劣。 虽然这可能是真正年前是,现在的网络交易会比昔日的网络要好得多。 我们的运行时间是超高速,不留缺乏对应用程序的性能。 而在网络上最好的用户体验是几代领先于本机应用程序,具有响应式设计制作的网络应用程序在任何设备上一个伟大的经验。

Web应用程序的好处继续。 当写得很好,任何人只要有浏览器就可以与Web应用程序与平台无关,版本或设备进行交互。 它的单个代码库也使得它为开发商,品牌,不希望或有资源来构建和维护每个平台的本地应用程序的公司的共同选择。

在本机应用程序中设计Web代码

真棒web应用程序是真棒应用。 无论是在浏览器或应用程式商店。

定义问题

与谁正在使用的开发人员,我每天的工作ManifoldJS冒很大的web应用程序,并把它们变成商店的应用程序。 ManifoldJS可以让你通过建立托管的Web应用程序保持网站的精神。 因为它们允许在Web服务器上的代码,现场就像当你在浏览器中访问它托管的Web应用程序是不同的。 这意味着代码库始终是最新的,只要你的愿望,你可以部署的变化,而且,一般地,如果在浏览器的代码作品那么它将作为托管网络应用程序的工作。

大网络应用有很大的用户体验和设计工作在各种浏览器和设备能够非常好地作为一个跨平台的托管网络应用的web应用程序。 像这样的应用程序的一些主要特点是:

  1. 响应布局。 该设计呈现良好的阅读/观看体验无论什么屏幕尺寸或方向。 用户可以实现他们的目标,而不需要滚动在多于一个方向或放大和缩小与应用进行互动。
  2. 适当大小的字体。 你应该能够很容易地阅读屏幕上的字体。 这两种方式都可以 - 它应该是被一个小屏幕上阅读够大,但它不应该在更大的屏幕大的离谱。 平衡是关键。
  3. 灵活的输入。 该应用程序应该支持触摸屏,键盘和鼠标; 但如果你想支持下一代接口,不要忘了,如语音或手势输入模式。
  4. 交货快捷。 不是每个人都有光纤连接和无限的带宽硬有线接入。 许多装置具有有限的带宽或更慢的处理器速度。 您的应用程序不应该太长时间负载或相互作用的过程中感觉迟钝。

所有这一切考虑,这个问题我最常得到的是: 我应该如何设计我的应用程序? (和它们的含义,在美学方面。)换句话说,又该视觉设计是什么样子? 一般来说,有三种选择:

  1. 设计一个单一界面的应用程序,所以它看起来是一致不管是什么平台,它正在对使用。
  2. 设计出更“原生”的界面为每个平台兑现其独特的外观和感觉。

我的答案是一致的一样: 我不知道 幸运的是,我的队友阿隆·古斯塔夫森对此事虽然有些想法:

这取决于。

我完全理解有一个接口,看起来像是相同(或相似)到本机操作系统的愿望。 它可以为您的用户这可能使他们更容易了解如何使用您的应用“无缝”的体验。 也就是说,如果您的应用程序是直观的,没有理由认为它看起来像底层OS将会做出任何更好地为他们的事实。 此外,“本机”外观和感觉将不会呈现一个蹩脚的应用立即可用。

最重要的是,追本机OS的设计可能不是你想要去下了兔子洞。 这里的原因:实现精确的设计和一些简单的本地控制和经常网络控制功能之间的平等,需要额外的标记,一堆的CSS和JavaScript代码的。 任何事情都是有无限的时间和预算实现的,所以它是完全可行的,但它是很好的估计成本,看看你是否仍然认为这是一个值得努力。

假如是这样,你再有哪个操作系统后,控制模型的问题。 或者,也许你想提供基于该操作系统的用户是对控制不同的看法。 在这种情况下,你可能需要通过要支持的操作系统的数量乘以原先的估计。 值得一提的是,在Android的世界至少,不同的设备制造商通常“皮肤”的操作系统从其他厂商的Android设备看起来不同。 你需要弄清楚你想在您的支持矩阵包括繁衍据此估计哪些。

再有就是QA和维护。 你需要测试其相应的平台上的每类天然控制。 您还需要测试选其经验被交付到设备,以确保你不小心发送了错误的经验脚本。 您还需要测试交付脚本对其他浏览器在您的测试矩阵,以确保它不会导致问题出现了。

再有就是,你需要在一个新的操作系统版本铺开做什么的问题。 iOS的,例如,在有他们的母语控制的设计与每一个主要版本所做的根本性转变。 你可能希望创建的每个控制为每个支持的操作系统的每个版本的唯一版本。 你还需要,如果他们参观的iOS 8我们的网站,有一个控制,看起来像它的iOS 6是你需要添加OS的数量不断升级的标签,所以你最终不会混淆用户你想要的版本支持到乘数为好。

您还需要一个基准部件的外观和感觉为每个人谁不落入你的矩阵。

最后:有多少控制你想这种方法适用于一次吗?

或者你可以拥抱网络和使用天然形式控制和接口将只是工作。 网络的普及是它的权力。 方法,如自适应设计和渐进增强拥抱并支付这种增加触及方面巨大的回报,并降低设计,开发和维护成本 一次构建,随处部署 - 这是网络的承诺,这是什么让有能力成为一个真棒安装的网络应用也有很大的Web应用程序。

-Aaron

去托管容易

毫无疑问,我认为托管网络应用程序是一个伟大的方式建设专卖店的应用程序。 对于“如何”开启一个网络应用程序转换为托管应用程序,检查出我的博客文章开始使用ManifoldJS ; 这是很容易做到,你甚至可以生成使用你的浏览器你的应用程序ManifoldJS网站

托管应用程序为您提供通过平台API的浏览器无法新的和有趣的机会。 iOS和Android应用程序可以被配置为访问科尔多瓦API,如媒体捕获和接触,为Windows 10,你可以访问所有这些API加上整个的Windows通用API集 新功能可以通过简单的功能检测的API,然后执行额外的JavaScript添加到您的应用程序。

它不需要一吨的额外的工作,使您的网络应用程序的应用程序商店。 一旦出现,你必须基于商店发现的利益,真正的原生应用体验。 那么,为什么还要等待? 如果你有一个伟大的Web应用程序, 需要五分钟,并使其成为托管网络应用程序

多动手用JavaScript

这篇文章是由微软技术传道者的web开发一系列实用的JavaScript学习,开源项目,和互操作性的最佳实践,包括一部分微软边缘浏览器和新的EdgeHTML渲染引擎

我们鼓励您跨浏览器和设备,包括微软边缘测试-适用于Windows 10的默认浏览器-与免费工具dev.modern.IE

深入微软边缘,距离我们的工程师和传道者的Web平台技术的学习:

更多免费的跨平台工具和资源,为网络平台:

From: https://www.sitepoint.com//designing-web-code-native-app/

相关文章: