网易微博iPhone平台HTML5开发的WebApp产品已于2012年第一季度成功上线，现将本项目开发的经验教训分享给大家，希望与大家在HTML5中共同成长开发环境。人员配置1.开发人员配置产品经理：1名；交互设计师：1名；视觉设计师：1名；前端工程师：1名；后台工程师：2名；测试人员：1名。2、开发时间交互设计师：22个工作日；视觉设计师：14个工作日；前端工程师：50个工作日；后台工程师：因为使用了原有的后台数据，只需要配合前端工程师调用数据，整个交互和前端在开发周期中耗时最长。网易微博WebApp开发流程1.功能需求规划：区别于web客户端和本地客户端负责人：产品经理；参与对象：交互设计师Web端产品也不同于本地客户端。1、与Web端相比，网易微博WebApp具有移动性强、媒体丰富的优势，但也存在信息呈现空间窄、信息架构深的劣势。两者的使用场景不同。微博Web端多用于时间充裕、网络条件优越的沉浸式使用；微博WebApp主要用于琐碎的时间和不同的网络条件。因此，网易微博WebApp应避免功能庞大而完整。需要从Web端提取和选择用户在移动环境下最常使用的功能，并添加手机端特有的功能（例如，在迭代阶段会考虑本地化服务功能）。2、与本地客户端相比，网易微博WebApp具有免安装、升级简单、开发成本低、自适应布局等优点。它还具有响应速度较慢、调用手机原生控件权限较低、稳定性较弱等缺点。基于对两者优缺点的分析，网易微博WebApp需要赶上本地客户端的优质体验，并尽量保证轻量级和快速性。总之，WebApp的功能可以比Web客户端和本地客户端更加细化，能够满足移动环境下用户最核心的需求。网易微博WebApp功能规划，如下图：2、信息架构设计：尽可能浅、窄负责人：交互设计师；参会对象：产品经理做过移动互联网产品的一定知道为什么信息架构需要做的那么窄浅而窄，最大的原因就是手机的显示空间小而且贵。手机本地客户端的信息结构需要浅而窄，WebApp更是如此，因为浏览器页面中总有一个浏览器底部工具栏，侵蚀了一小块已经局促的展示空间。如下图：手机屏幕底部的浏览器工具栏对于WebApp产品来说很鸡肋：WebApp本身就是一个闭环应用，不需要浏览器工具栏。即使不影响大的信息架构，仍然会占用宝贵的展示空间，对导航系统的设计有重要影响（这部分在上一篇文章《iPhone Web App 导航设计探讨》中有简单分析）。3、交互设计：简洁高效负责人：交互设计师；参与对象：产品经理、视觉设计师、前端工程师、后台技术交互设计理念：本产品具体的交互设计理念来源于：用户使用场景调研、竞品分析、WebApp研发现状、微博WebApp的自己的要求。最后，主要交互设计理念如下：1.增强易查找性：增强全局导航、快速返回首页、常驻常用操作、及时动画演示、简洁明了的网页布局等2.改进降低使用效率，降低信息架构层次，提供合适的快捷键入口，保证安全触摸区域，考虑用户浏览习惯，优先展示核心功能，剔除不必要的视觉噪音等。3.更智能贴心的支持离线使用、编辑时意外中断自动填充信息、谨慎使用警告框、帮助搜索和建议执行、根据当前任务需求安排工具栏、主动有效的反馈等。4、提高任务聚焦度。单一任务操作路径，标签导航及时隐藏，排除干扰因素，灰度显示不可用按钮，任务在页面最大化，功能不最小化等。5.平台一致性：看到即点击，iOS平台列表视图，前进和返回操作时的推屏动画，iOS平台功能的模态视图，警告框，调用原生控件，简单明了的跳转逻辑等。这个阶段的交互设计理念不仅仅是一个概念，更是对WebApp产品的具体设计指导。承载优美设计理念的设计实施方法是设计研究阶段的重要实施。设计内容和细节很多，这里只分享一个细节给大家：EnhancedEaseofFinding—EnhancementofGlobalNavigation相对于原来的wap微博，固定存在的全局导航栏是一个很大的变化地方。我们简单分析一下其中的原因：–用户的环境是什么样的？——室外移动场景（如地铁、排队等），或室内闲置状态（如睡前刷微博）；–用户访问此页面的目的是什么？——浏览微博；——用户对该页面的常用操作有哪些？——下拉阅读，置顶加载新信息，点击其他标签进行跳转；–如果全局导航栏固定在顶部，有什么好处？——方便用户返回顶部，方便用户加载新信息，方便用户切换标签页，全局掌控感强；–如果全局导航栏固定在顶部，有什么缺点？——吞噬了宝贵的信息展示空间……用户在使用过程中，置顶、刷新、切换标签等行为也是比较频繁的行为，需要保证操作的便捷性。固定的全局导航栏可以满足这样的需求：点击HOME按钮置顶并刷新，方便用户切换标签页。同时，固定的全局导航栏让用户时刻知道自己在哪里，可以去哪里，给用户很强的全局掌控感。4、视觉设计：清新风格实验负责人：视觉设计师；参与对象：产品经理、交互设计师、前端工程师网易微博本地客户端保持不变的基调？产品在不同平台需要保持一定的一致性，色彩风格也是产品气质的重要组成部分。需要用类似网易微博本地客户端的皮肤吗？网易微博本地客户端的主色调是红色。分析如下：–使用这种红色的好处是：产品一致性比较强；红色所形成的产品气质更“精神”。–使用这种红色的缺点是：红色区域与微博内容相比略显醒目，“沉浸式阅读”更难实现；通过safari浏览器使用网易微博WebApp，最终视觉效果与本地客户端相同。不同之处在于浏览器工具栏始终占据屏幕的底行。红色是比较“喧嚣”的颜色，浏览器工具栏的蓝灰色是比较“安静”的颜色。两种颜色之间巨大的差距让眼镜产生了极度的不适。根据以上分析，不适合使用本地客户端的红色。2.在Safari浏览器中运行的影响？网易微博WebApp在产品环境之一的Safari浏览器中运行显示。网页给人的感觉是“轻巧、简洁”，而本地客户端给人的感觉是“厚实、稳定”。因此，视觉风格“Lightweight”是一个不错的选择。3、当前的视觉风格趋势已经从MetroUI和Google+首创的“小清新”风格转变为相当大的视觉风格发展趋势。经过一段时间精致复杂的视觉体验后，回归本源，简约清新的视觉风格开始流行起来。因此，视觉设计师进行了多次视觉尝试，包括红色、酷黑、清新的浅灰色。经过多次比较，大家一致认为是清新淡灰。清新的浅灰色为主色调，点击后图标的状态是网易惯用的红色，一定程度上保持了视觉风格的一致性。5、前端开发：见招聘负责人：前端工程师；参与人员：产品经理、交互设计师、视觉设计师、后台技术人员到了这部分，大家可能更关心具体的代码长什么样，实现框架长什么样？非常抱歉涉及公司产品机密，具体实现代码不能给大家看。对不起！下面简单回答网友的2个问题：问题1：能不能讲讲前端架构？你为什么不使用Sencha？答：senchatouch1.x/2.x、jQuerymobile等在可定制性、性能和资源消耗等方面都不太理想，所以网易前端开发了自己的框架。正如你所说，它使用seajs处理脚本加载和iscroll模拟滚动。目前看来效果不错，网易前端会继续完善这个框架。问题二：可以拍照上传吗？iPhoneSafari没有授予访问相机和画廊的权限，因此没有满足此要求。也就是说，Android给了权限，到时候肯定能满足这个“刚需”。6.后续工作之后的工作主要是交互走查、可视化走查、QA测试、上线后总结反馈修复问题，规划下一次迭代。项目流程大家都懂，就不多说了。从中得到的教训1.对工作流的感悟1.以优秀的体验设计为导向。本项目是一个以设计为先导的典型案例。首先，设计师有足够的时间和空间去发展，技术也会随之而来。这种工作思路是整个产品良好用户体验的基石。HTML5技术强大，拥有太多的可能性；设计是将这些技术可能性塑造成形状的模具。2、产品经理、交互、愿景、前端沟通及时、频繁。在整个项目中，产品经理、交互设计师、视觉设计师和前端工程师每周举行会议。后来证明，这种频繁的沟通，大大降低了返工率，提高了开发效率。3、小步快跑，注重迭代。网易微博产品相对复杂，HTML5开发进度相对缓慢，加上人力有限，不可能完成所有功能细节同时上线。否则，后期调试需要一个月的时间，给产品的快速开发增加了沉重的负担。所以第一期只做最核心的功能是必然的选择。二、用户体验方面的感受1、导航系统更适合放在屏幕上方。浏览器工具栏一直存在，让标签导航栏不再适合固定在屏幕底部，顶部更合适。2.方便更重要，最常用的功能巧妙设置。由于产品性能和浏览器性能的原因，目前WebApp的流畅度和跳转速度仍然无法与NativeApp相提并论，跳转成本略高。因此，需要将最常用的功能拉近用户的距离，减少跳转带来的等待成本。3.视觉稿是美观与简洁的折衷，大部分视觉稿需要使用代码来实现。几乎所有的视觉都是通过代码实现的，视觉设计不能太复杂。前端工程师消化视觉稿也需要时间。三、技术实现理解1、由于Safari浏览器的权限限制，WebApp无法调用相机工具，不支持图片上传功能。这是一件很痛苦的事情，也是一件很无奈的事情。iOS系统给WebApp的权限太低。相比之下，Android系统的WebApp可以调用相机控件，还支持微博上传图片的功能（不过Android版本还未开发）。2、过场动画达不到本地客户端的流畅效果。原因是：好的过场动画会侵蚀产品的性能；HTML5技术还没有那么完善和成熟；仍然缺乏功能强大的浏览器。总结除了iOS系统的权限问题外，WebApp的优秀性能接近NativeApp。HTML5技术赋予了wap网页新的生命，给wap带来了颠覆性的变化。在HTML5项目中，功能规划要细化；信息架构需要尽可能浅和窄；交互设计需要简洁高效；视觉设计也要考虑浏览器的特殊运行环境；前端不仅需要逐步消化交互设计和视觉设计，还要大胆尝试，在新技术、新问题中看到窍门。整个团队的频繁沟通是非常有必要的，开发步骤最好小步进行。人手和精力有限，难免会有偏差。欢迎大家拍砖！期待与您讨论这个有趣的话题。
