欢迎前往极客标签查看原文：http://www.gbtags.com/gb/share/9353.htm

多年来，我曾听无数开发人员说过，“当它成为一个Web App，请你告诉我”，这意味着网络应用比较于本地App是很缺乏的。这些相同的民众会声称，Web App的性能较差，设计低劣。虽然在几年前这个想法是对的，但现在的网络市场比过去好很多了。我们的运行时是超级快的，不会留下缺乏性能的应用程序。而在网络上最好的用户体验是世代领先的本地App，具有响应式设计使得Web App在任何设备上有很好的体验。

继续说Web App的好处。如果程序代码写的好，任何人只要有浏览器，无论在什么平台、版本或者设备上，都可以与Web App进行交互。它独立的代码库也使得它为众人所选，对于开发商、品牌和企业来说，他们不希望耗费资源去给每个平台建立和维护本地应用程序。

牛逼的Web App才是牛逼的App。无论是在浏览器上还是App Store上

我每天和使用ManifoldJS（ManifoldJS 是微软开源的,号称最简单的跨平台,跨设备 APP 创建方法）的开发人员一起工作，他们能制作很棒的Web App并把它们放到App Store上。ManifoldJS通过构建托管Web App使得你能坚持这个互联网的精神。托管Web App是与众不同的，因为它们允许你的代码生存在Web服务端上，就像你用浏览器访问它时，在Web服务器上一样。这意味着代码库始终是最新的，你可以随时根据你的意愿获得部署的变化，而且一般情况下，如果这个代码在浏览器运行，然后会像托管Web App一样工作。

好的Web App拥有很好的用户体验，以及一个Web App作为托管跨平台的Web App被设计为工作在各种浏览器和设备可以执行得很好。像这样的应用程序具有的一些主要特点是：

1. 响应布局。 该设计提供了一个良好的阅读/观看体验无论是屏幕大小还是方向上。用户可以达到他们的意图，而不需要滚动更多或一个方向的放大与缩小，来与应用程序进行交互
2. 适合的字体大小。你应该能够在屏幕上轻松地阅读字体。它要在两个条件下运作，它应该足够大，以在小屏幕上读取，但它不应该在大屏幕大的离谱。平衡是关键。
3. 灵活的输入。 该应用程序应该支持触摸屏，键盘和鼠标；但如果你想支持下一代接口，不要忘了输入模式，如语音或手势。
4. 快速传送。 不是每个人都有固线接入光纤连接和无限的带宽。许多设备只有有限的带宽或很慢的处理速度。您的应用程序不应该花费太长的时间来加载或在互动的时候感觉呆滞。

带着这所有的考虑，我最经常得到的问题是：我应该如何设计我的App？ （他们的意思是在美学方面的。）换句话说，视觉设计该是什么样子的？一般来说，有这几种选择：

1. 设计一个单一接口的App，所以它看是一概不管是什么平台，它都用的上。
2. 为每个平台设计出更“原生”的界面，以履行其独特的外观和感觉。

我的回答是一致的相同：我不知道。但幸运的是，我的队友Aaron Gustafson对此事有一些看法：

         这要看情况。

我完全理解对于本地操作系统来说，一个界面的外观和感觉相同（或相似）。它给您的用户创建了一个“流畅”的体验，可能更容易让他们了解如何使用您的App。也就是说，如果你的App是直观的，没有理由认为它看起来就像是底层的操作系统的事实，将会为他们更有效工作。此外，“原生”的外观和感觉将不会呈现出一个蹩脚的App被使用。

最重要的是，追求本地操作系统的设计可能不是你想要去下了兔子洞（来自爱丽丝梦游仙境，含义是一个奇特、不同世界的入口）。这里的原因：实现精确的设计和功能等同于一些简单的本地控制和网络控制之间需要额外的标记，一堆的CSS和一些JavaScript。在无限时间和预算下，任何事都可以实现，所以这是完全可行的，但它要很好的估计成本，看看你是否仍然认为这是值得努力的。

假如是这样，你在有这种操作系统来控制之后进行建模的相关问题。或许你想提供一个基于不同的操作系统来控制你的用户。在这种情况下，你可能需要用你想支持的操作系统的数量乘以原来的预算。值得一提的是，至少在Android世界，不同的设备制造商通常“表皮”操作系统看起来与其它厂商的Android设备不同。你需要判断哪些是你需要包括在你的支持模型，并乘以的估值。

此外，还有质量保证和维护。你需要测试每个像本地一样的控制在其相应的平台上。您还需要测试选择其中被交付给设备的体验脚本，以确保你不小心发送了错误的体验脚本。你还需要测试在你的测试模型上每个浏览器的传输脚本，以确保它不会导致问题出现。

还有一个问题，当一个新的操作系统版本推出的时候你需要做什么。iOS系统中，例如，已经在他们的原生控制的每一个主要版本的设计做出显著的变化。你可能想给你支持每个版本的OS系统上创建唯一版本控制。你还需要密切关注升级，这样就不会使用户混淆，如果他们在iOS8上访问我们的网站，有一个控制使它看起来像来自iOS6。你需要增加你想要的版本添加到OS系统数量的乘数为好。

你还需要一个基准部件的外观和让大家不会陷入你的模型的感觉。

最后：你想要多少控制去再次使用这种方法。

或者你可以涵盖网络，可以使用本地形式的控制并且接口将只用工作。这个网络的普及是因为它的功率。就像响应式网页设计和渐进增强的方式，付出如此巨大的利益，来增加覆盖条件，并降低设计、开发和维护成本。一次构建，随处部署，这就是网络的承诺，这就是让一个很棒的Web App也能够成为一个值得安装的Web App的原因。

–Aaron

毫无疑问，我认为托管的Web App是一个伟大的方法来构建存储应用程序。对于如何把一个Web App转变为托管App，请在开始使用ManifoldJS并阅读我的博客文章；这很容易做到，你甚至可以使用ManifoldJS网页在你的浏览器上生成App。

托管App为您提供全新以及令人兴奋的机会，这是不可能在浏览器上通过平台API获得的。iOS和Android的应用程序可以被配置为访问Cordova API，如媒体捕获和接触，您可以访问所有这些API以及整个Windows通用API集合通过Win10。新功能可以通过简单的功能检测的API，然后执行额外的JavaScript添加到您的应用程序。

它不需要大量的额外工作，使您的Web App发布到App stores。一旦出现，你就会有App stores给你带来的利益以及真正的本地App的体验。那么，为什么还要等待？如果你有一个伟大的Web应用程序，只需要五分钟，并可使其成为托管Web App。

这篇文章是Web开发系列从微软技术传道者实际的JavaScript学习，开源项目，和交互操作性的最佳实践，包括微软Edge浏览器和新的EdgeHTML渲染引擎的一部分。

我们鼓励您测试跨浏览器和设备，包括微软的Edge——Win10的默认浏览器，以及在dev.modern.IE上的免费工具：

• 扫描你的网站外的日期库，布局问题，和可访问性
• 使用虚拟机的Mac，Linux和Windows
• 在你自己的设备上微软的Edge远程测试
• GitHub上的编码实验室：跨浏览器测试和最佳实践

深入技术的在微软的Edge和来自我们的工程师和福音传道者的Web平台上学习：

• 微软先进的2015Web峰会（期待与新的浏览器，支持全新的网络平台标准，还有来自JavaScript社区的演讲嘉宾）
• 哇，我可以在Mac和Linux上测试边及Edge浏览器！（来自Rey Bango）
• 不会破坏网络的先进的JavaScript（来自Christian Heilmann）
• Edge渲染引擎使网络正常工作（来自Jacob Rossi）
• 释放出3D与WebGL的渲染（来自David Catuhe包括vorlon.JS和babylonJS项目）
• 托管的Web App和网络平台的创新（来自Kevin Hill和Kiril Seksenov包括manifold.JS项目）

为网络平台提供更自由的跨平台工具和资源：

• 为Linux，MacOS的，和Windows提供Visual Studio代码
• Node.js的代码和在Azure免费试用

Jeff Burtoft

Jeff Burtoft 是Microsoft的技术专员。Jeff与别人共同撰写了他的第一本书，题目是HTML5 Hacks（O'Reilly Media出版），在html5hacks.com的创始博主。在500强公司的立场上，他一直像“网络高手”给国防部担任首席前端工程师。Jeff是Web标准的一个巨大的支持者，并爱所有的编程语言，只要它们是JavaScript。Jeff与他的妻子和三个孩子住在德克萨斯州。在业余时间，他喜欢写程序，他的孩子们和玩视频游戏。阅读他的博客或者在Twitter上@boyofgreen跟随着他。

这是我自己翻译的一篇文章，用来介绍本地App上如何设计Web代码的，分享给大家，

英文原文地址：http://www.noupe.com/design/designing-web-code-in-a-native-app-93464.html