HTML5开发实战之微博[整理].pdfVIP

HTML5 开发实战之网易微博 HTML5 在国内外越来越受到互联网开发团队的青睐。国外，谷歌兴致勃勃地开发 Chrome Web Store ，微软发布了支持使用 HTML5 技术开发的“ Irish Spring ”主 题网站，诺基亚斥巨资购得并打造的 NOKIA MAP 业务。国内的互联网巨头对这股 大洋彼岸吹来的新 web 开发标准也同样感兴趣，开始着手 HTML5 产品的试水。 网易微博 iPhone 平台 Web App 产品在 2012 年第一季度已经成功上线。现将此 项目开发的经验教训分享给大家，希望与大家在 HTML5 开发环境中共同成长。 人员配置 一、开发人员配置 产品经理： 1 名； 交互设计师： 1 名； 视觉设计师： 1 名； 前端工程师： 1 名； 后台工程师： 2 名； 测试人员： 1 名。 二、开发时间 交互设计师： 22 个工作日； 视觉设计师： 14 个工作日； 前端工程师： 50 个工作日； 后台工程师：因使用原有后台数据，只需配合前端工程师调用数据 其中，整个开发周期中交互和前端用时最长。 网易微博 Web App 开发过程 一、功能需求策划：有别于 Web 端及本地客户端 负责人：产品经理； 参与人：交互设计师 网易微博 Web App （本文内均指手机端） 有别于 Web 端产品，与本地客户端也有 所差异。 1. 网易微博 Web App 相较于 Web 端，具有较强的移动性、富媒体化等优势，同 时具有信息呈现空间狭小、信息架构深等劣势。二者的使用情境有所不同，微博 Web 端多在充裕的时间、 优越的网络条件下进行沉浸式的使用； 微博 Web App 多 是在琐碎的时间、良莠不齐的网络条件下打发时间。 因此，网易微博 Web App 应避免功能大而全，需要从 Web 端提炼选择出移动环 境下用户最常使用的功能，并增加手机端特有的需求功能（如迭代阶段会考虑加入 本地化服务功能）。 2. 网易微博 Web App 相较于本地客户端，具有免安装、升级简单、开发成本低、 可自适应布局等优势，同时具有反应速度稍慢、调取手机原生控件的权限低、稳定 性稍弱等劣势。 基于二者的优劣势分析，网易微博 Web App 需要追赶本地客户端的优质体验、尽 量保证轻量化而又快速。 一句话总结， Web App 的功能可以比 Web 端和本地客户端的更精炼，满足移动环 境下用户最为核心的需求。 网易微博 Web App 功能策划，如下图： 二、信息架构设计：尽可能的浅而窄 负责人：交互设计师； 参与人：产品经理 做过移动互联网产品的人肯定知道为什么信息架构需要尽可能的浅而窄，最大的原 因还是手机狭小金贵的显示空间。手机本地客户端的信息架构需要浅而窄， Web App 更需要如此，因为在浏览器的页面中始终存在着浏览器的底部工具栏，使原本 就局促的显示空间又被蚕食掉一小块。如下图： 手机屏幕底部的浏览器工具栏，对 Web App 产品很鸡肋： Web App 本身就是一 个闭环的应用程序，不需要借助浏览器工具栏。即使不会影响大的信息架构，也蚕 食了宝贵的显示空间，对导航系统的设计也有重要影响（这部分在之前的文章 《iPhone Web App 导航设计探讨 》做过简要分析）。 三、交互设计：简洁、高效 负责人：交互设计师；参与人：产品经理、视觉设计师、前端工程师、后台技术人 员 交互设计理念： 该产品具体的交互设计理念来源于：用户使用场景的调查、竞品分析、