Iain McQueen：从移动应用开发中总结出的五个教训

     <div id="news_body">     <p style="text-align:center;"><a><img title="Swiperoo 创始人 Iain McQueen：从移动应用开发中总结出的五个教训" alt="Iain McQueen：从移动应用开发中总结出的五个教训" src="https://simg.open-open.com/show/9db5dce5e11a79100adbef46104453c8.jpg" width="150" height="150" /></a></p>     <p style="text-align:left;">        编者注：本文编译自 Iain McQueen 发表在 <a href="/misc/goto?guid=4958201633018606128" target="_blank">Posterous</a> 上的博文“<a href="/misc/goto?guid=4958201633754090572" target="_blank">What I Learned Building a Mobile Friendly Web App</a>”。</p>     <p>        自今年11月19日发布第一版 <a href="/misc/goto?guid=4958201634491098762" target="_blank">Swiperoo</a> 起，Dave 和我就开始时不时谈论开发初期遇到的各种问题。我想，一定也有很多其他移动应用开发者会遇到和我们一样的问题，因此，在这里把我在开发用户友好型移动应用时总结出来的五个教训和大家分享，希望对大家有一定的借鉴意义。</p>     <p>        <strong>1）用户期望本地浏览器功能保持不变</strong></p>     <p>        如果你计划开发一个移动优化网站，那么至少需要花一定的时间来模仿本地设备功能。进行滑动/分页的清扫手势就是一个很好的例子。清扫这个创意听 起来似乎不错，但通常需要禁用默认的平移和缩放手势功能，而这是某些用户并不希望发生的。我们正在努力寻求一种技术解决办法，一旦有所发现，便会第一时间 发布。</p>     <p>        <strong>教训：</strong>进行移动应用开发时，尽可能保持本地功能。</p>     <p>        <strong>2）并非所有设备“生来就平等”</strong></p>     <p>        假如移动应用开发领域存在可靠标准，那很多设计方面的头疼问题都会迎刃而解。但问题是，目前根本没有这样的标准存在，因此，该头疼的问题还是得 继续“头疼”。使用不同移动浏览器时会有细微区别，比如宽度设计。考虑到很多人喜欢固定宽度，960像素能很好地适用 iPad 和 iPhone。然而，或许你早已认识到，iPhone 上的高度并不完全相同，因而使设计变得更为复杂，而本地功能可以很好地避免这类问题，这又可以回到第一个教训。</p>     <p>        <strong>教训</strong>：在尽可能多的设备上进行测试，或者专注于某一类特定设备，如 iPad 或智能手机等。</p>     <p>        <strong>3）面向未来的兼容性是一个很大的挑战</strong></p>     <p>        Swiperoo 是面向平板和所有台式电脑浏览器的平台，用户需要将 Safari、Firefox 或 Chrome 等浏览器更新至最新版本才能获得我们产品的全方位体验。但据调查，非技术人员用户通常都不会主动更新他们的浏览器。如果想开发一个同时面向移动设备和本地 设备的的网站，<a href="/misc/goto?guid=4958193856985135572" target="_blank">Modernizr</a> 是一个不错的工具，或者至少应该提醒用户如何解决问题以及不解决这些问题可能受到的种种限制。</p>     <p>        <strong>教训：</strong>设计和开发前端产品时，多考虑传统浏览器。</p>     <p>        <strong>4）设计时需考虑资源问题</strong></p>     <p>        与台式电脑相比，移动网络在带宽和处理能力方面存在诸多限制。用户在抱怨速度太慢时，图片负载是一个很重要的因素，以下是一些处理图形的小技巧：</p>     <ul>      <li>图片可以不用时就不要用，实在需要时就尽可能使用小图片；</li>      <li>使用 sprites 减少 HTTP 请求；</li>      <li>图片的渐变和阴影效果会加大对硬件的压力，因此使用时需谨慎；</li>      <li>如需使用动画，使用较轻的渐变等效果。</li>     </ul>     <p>        有时候确实不可避免地需要用到图片，这些小技巧可在一定程度上起到改善性作用，同时也有助于维护缓存文件。</p>     <p>        <strong>教训：</strong>确保网站能快讯载入移动设备。</p>     <p>        <strong>5）尽可能使用 Javascript</strong></p>     <p>        在提高移动网络性能方面，Javascript 能有效地解决很多令人头疼的问题。现在几乎所有的移动浏览都兼容 Javascript，这样可以使 HTML 看起来整洁，减少页面大小。建议借助 Ajax 进行需要服务器端交互的页面更新，它不均可以避免重载不必要的内容，还能创造一种更本地化的用户体验。</p>     <p>        <strong>教训</strong>：通过使用有利于后端进程的前端技术提高性能。</p>     <div id="come_from">            来自:      <a id="link_source2" href="/misc/goto?guid=4958201635891070916" target="_blank">www.leiphone.com</a>     </div>    </div>