论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > Dreamweaver教程
Tag:Dreamweaver CS,Dreamweaver 8,css,表格,布局,字幕,flash,声音,菜单,乱码,图层,行为,视频教程

HTML5教程:网易微博Web App开发过程介绍(三)

文章类别:Dreamweaver | 发表日期:2012-6-13 9:29:51

HTML5教程:网易微博Web App开发过程介绍(三)


2、Safari浏览器内运行的影响?
   
网易微博Web App是从safari浏览器中运行和展示的,这是该产品的环境之一。网页给人“轻盈精简”的感觉,本地客户端给人“厚重恒稳”的感觉;

    因此,视觉风格“轻量化”是个不错的选择;

3、当前的视觉风格趋势
   
由Metro UI和Google+引领的“小清新”风格,成为一股不小的视觉风格发展趋势。精致繁复的视觉经历一段时间后,返璞归真,开始流行简洁清新的视觉风格;
    于是,视觉设计师经过几次视觉尝试,包括红色、酷黑色、清新浅灰色。多方比较后,大家一致认同清新浅灰色。清新浅灰色是主色调,icon点击后的状态是网易惯常使用的红色,一定程度上保持了视觉风格一致性;

五、前端开发:见招拆招
负责人:前端工程师;参与人:产品经理、交互设计师、视觉设计师、后台技术人员;

此处列表一些问到的问题进行简要回答:

问题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项目中,功能策划以精炼为佳;信息架构需要尽可能的浅而窄;交互设计需要力求简洁高效;视觉设计还要考虑浏览器这一特殊的运行环境;前端不仅需要逐步消化交互设计和视觉设计,还要在新技术新问题中大胆尝试见招拆招。整个团队的频繁沟通非常有必要,开发步骤最好采取小步快跑的方式;

    今天这篇文章就给大家介绍到这里啦!

视频教程列表
文章教程搜索
 
Dreamweaver推荐教程
Dreamweaver热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058