网易微博Web App用HTML5开发的进程介绍_HTML5教程

修改Tag赚U币
教程Tag:html518luck添加

引荐:HTML5 对各个标签的界说与规则:body的介绍
本文首要介绍body标签

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 导航规划评论》做过扼要剖析)。
网页制造Webjx文章简介:HTML5开发实战之网易微博.


三、交互规划:简练、高效
负责人:交互规划师;参与人:产品司理、视觉规划师、前端工程师、后台技能人员

交互规划理念:
该产品详细的交互规划理念来历于:用户运用场景的查询、竞品剖析、Web App研制现状、微博Web App的本身要求。终究概括得出的交互规划理念首要有:
1.增强易寻性:
大局导航的加强、快速回到主页、常用操作常驻、当令的动画演示、精约明晰的网页布局等。
2.进步运刻苦率
下降信息架构层级、恰当给出快捷键进口、确保安全触控区域、考虑用户阅览习气、优先确保中心功用、消除不必要的视觉噪音等。
3.愈加智能关怀
支撑离线运用、修改中的信息意外打断后主动填入、警示框的慎重运用、查找主张施行供给协助、针对当时使命需求组织东西栏、活跃有用的反应等。
4.进步使命专心度
单一使命操作途径、tab导航当令躲藏、消除搅扰要素、不可用button灰度化显现、使命进行页面最大化、未进行功用最小化等。
5.渠道共同性:
即看即点、iOS渠道的列表视图、行进及回来操作时的推屏动画、iOS渠道特征的模态视图、警示框、调取原生控件、简略明晰的跳转逻辑等。
此阶段的交互规划理念现已不单单是理念,更多的是对该Web App产品的详细规划辅导。承载着夸姣规划理念的规划完成办法,是规划研讨阶段的重要落地。
规划内容与细节繁复,这儿只捡一处细节与咱们共享一下:
增强易寻性——大局导航的加强

与原有的wap微博比较,大局导航条的固定存在是一个很大的改变之处。下面咱们简略剖析一下这么做的原因:
–用户的运用环境是什么样的?——室外的移动情境(如地铁上、排队中),或许室内清闲状况(如床上睡前刷微博);
–用户来到这个页面的意图是什么?——阅览微博;
–用户在这个页面中的常用操作有哪些?——下拉阅览、置顶并载入新信息、点击其他tab履行跳转;
–假如大局导航条固定在顶端,优点是什么?——便利用户回到顶部,便利用户载入新信息,便利用户切换tabs,具有较强的大局操控感;
–假如大局导航条固定在顶端,害处是什么?——吞噬了名贵的信息展现空间
…………
用户运用进程中,置顶、改写、切换tabs的行为也是比较频频的行为,操作的快捷性需求确保。而固定的大局导航条能够满意这个需求:点击HOME键能够置顶并改写,能够便利用户切换tabs. 一同,固定的大局导航条能够运用户一向明确地知道身处何处,能够去哪,给与用户较强的大局操控感。
四、视觉规划:新鲜风格的实验
负责人:视觉规划师;参与人:产品司理、交互规划师、前端工程师
网易微博Web app的视觉风格确实定是经过多角度评论的:
1.要不要和网易微博本地客户端的色彩坚持共同?
产品在不同渠道上需求坚持必定的共同性,色彩风格也是构成产品气质的重要组成,那咱们需求运用与网易微博本地客户端附近的皮肤吗?网易微博本地客户端的主色彩是赤色。
剖析如下:
–运用该赤色的优点是:比较强的产品共同性;赤色构成的产品气质比较“精力“。
–运用该赤色的害处是:赤色区域与微博内容比较略微抢眼,“沉溺式阅览”比较难以完成;
经过safari阅览器运用网易微博Web App,终究的视觉作用与本地客户端还有一个区别是,阅览器东西栏一向占有着屏幕的底部一行空间。赤色归于比较“喧嚣”的色彩,阅览器的东西栏蓝灰色相对“寂静”。这两种色彩巨大的距离形成眼镜极度不适。

概括以上剖析,沿袭本地客户端的赤色不太合适。
网页制造Webjx文章简介:HTML5开发实战之网易微博.


2.Safari阅览器内运转的影响?
网易微博Web App是从safari阅览器中运转和展现的,这是该产品的环境之一。网页给人“轻盈精简”的感觉,本地客户端给人“厚重恒稳”的感觉。
因而,视觉风格“轻量化”是个不错的挑选。
3.当时的视觉风格趋势
由Metro UI和Google+引领的“小新鲜”风格,成为一股不小的视觉风格开展趋势。精美繁复的视觉阅历一段时刻后,返璞归真,开端盛行简练新鲜的视觉风格。
所以,视觉规划师经过几回视觉测验,包含赤色、酷黑色、新鲜浅灰色。多方比较后,咱们共同认同新鲜浅灰色。新鲜浅灰色是主色彩,icon点击后的状况是网易惯常运用的赤色,必定程度上坚持了视觉风格共同性。
五、前端开发:见招拆招
负责人:前端工程师;参与人:产品司理、交互规划师、视觉规划师、后台技能人员
抵达这一部分的时分,或许咱们更关怀的是详细代码是怎么样的,完成结构是什么样的?十分抱愧的是,涉及到公司的产品秘要,详细完成代码不能展现给咱们。见谅!
此处挑选2个网友的问题进行扼要答复:
问题1:能不能讲讲前端架构呢,为什么没有选用sencha?
答:sencha touch 1.x/2.x,jQuery mobile等由于可定制性和功用及资源耗费还不抱负,所以网易前端自己开发了结构,正如你所说运用了seajs处理脚本加载,iscroll模仿翻滚,现在看来仍是作用不错的,网易前端将不断完善这个结构。
问题2:能摄影、上传图片么?
iPhone Safari没有给与调取照相机、图库的权限,所以这个需求尚没有满意。话说,Android给权限,到时分必定满意这一“刚需”。
六、后续作业
之后的作业首要是交互走查、视觉走查、QA测验、上线后总结反应修正问题、方案下一期迭代。项目流程咱们都懂,不多说了。
从中罗致的阅历教训
一、作业流程方面的感受
1、以优异的体会规划为先导。
这个项目是典型的以规划为先导的比如,首要给予规划师充沛的时刻和发挥空间,技能则见招拆招。这条作业思路是整个产品取得杰出用户体会的柱石。HTML5技能很强壮,有太多的或许性;而规划是将这些技能或许性塑形成型的模具。
2、产品司理、交互、视觉、前端及时频频的交流
整个项目中,产品司理、交互规划师、视觉规划师、前端工程师每周开一个碰头会。后期证明,这种频频的交流大大削减了返工率,进步了开发功率。
3、小步快跑,重视迭代。
网易微博产品比较复杂,加之HTML5开发进度比较慢,人力有限,不或许悉数功用细节一同做完上线。不然后期调试就要一个月的时刻,为产品的快速开展添加沉重的担负。因而,第一期只做最中心功用成为必然挑选。
二、用户体会方面的阅历
1、导航体系更合适在屏幕顶部。
阅览器的东西栏一向存在,致使tab导航栏现已不合适固定在屏幕底部,顶部愈加合适。
2、快捷性愈加重要,将最常用的功用奇妙的设置。
产品功用和阅览器功用的原因,现在的Web App流通度和跳转速度仍是不能与Native App相媲美,跳转本钱略微大一点。所以需求将最常刻苦用与用户靠的更近一些,削减跳转带来的等候本钱。
3、视觉稿在漂亮与简练之间权衡,绝大部分的视觉稿需求运用代码完成。
简直一切的视觉都是经过代码完成,视觉规划最好不要过于繁复。前端工程师对视觉稿的消化也是需求时刻的。

三、技能完成方面的了解
1、Safari阅览器的权限约束,Web App尚不能调用照相机东西、不支撑图片上传功用。
这是一件很头疼的事,也是很无法的事。iOS体系给与Web App的权限太低了。比较之下,Android 体系的Web App就能够调取照相机控件,也支撑微博图片上传功用(不过现在还没有开发Android版别)。
2、过场动画还完成不了如本地客户端的流通作用。
原因有:好的过场动画会蚕食产品的功用;HTML5技能还不是那么完善和成熟;现在还缺少一款强有力的阅览器。
小结
除了iOS体系的权限问题,Web App的优异体现现已挨近Native App了。HTML5技能给与了wap网页新的生命,为wap带来了颠覆性的革新。在HTML5项目中,功用策划以精粹为佳;信息架构需求尽或许的浅而窄;交互规划需求力求简练高效;视觉规划还要考虑阅览器这一特别的运转环境;前端不只需求逐渐消化交互规划和视觉规划,还要在新技能新问题中斗胆测验见招拆招。整个团队的频频交流十分有必要,开发进程最好采纳小步快跑的办法。
人力和精力有限,不免有偏颇之处,欢迎咱们拍砖!等待和您一同评论这一有意思的论题。

共享:关于HTML5的安全问题开发人员需求紧记的
HTML5中的安全问题也要留意的

来历:不知道//所属分类:HTML5教程/更新时刻:2013-04-22
相关HTML5教程