<b>HTML5带来wap网页颠覆性变革 开发实战之网易微博</b>

作者: 来源:未知 2012-06-13 12:47:08 阅读 我要评论 直达商品

  –如果全局导航条固定在顶端,好处是什么?——方便用户回到顶部,方便用户载入新信息,方便用户切换tabs,具有较强的全局控制感;

  –如果全局导航条固定在顶端,坏处是什么?——吞噬了宝贵的信息展示空间

  …………

  用户使用过程中,置顶、刷新、切换tabs的行为也是比较频繁的行为,操作的便捷性需要保证。而固定的全局导航条可以满足这个需求:点击HOME键可以置顶并刷新,可以方便用户切换tabs. 同时,固定的全局导航条可以使用户一直明确地知道身处何处,可以去哪,给与用户较强的全局控制感。

  四、视觉设计:清新风格的试验

  负责人:视觉设计师;参与人:产品经理、交互设计师、前端工程师

  网易微博Web app的视觉风格的确定是经过多角度探讨的:

  1.要不要和网易微博本地客户端的色调保持一致?

  产品在不同平台上需要保持一定的一致性,颜色风格也是形成产品气质的重要组成,那我们需要使用与网易微博本地客户端相近的皮肤吗?网易微博本地客户端的主色调是红色。

  分析如下:

  –使用该红色的好处是:比较强的产品一致性;红色形成的产品气质比较“精神“。

  –使用该红色的坏处是:红色区域与微博内容相比略微抢眼,“沉浸式阅读”比较难以实现;

  通过safari浏览器使用网易微博Web App,最终的视觉效果与本地客户端还有一个区别是,浏览器工具栏一直占据着屏幕的底部一行空间。红色属于比较“喧嚣”的颜色,浏览器的工具栏蓝灰色相对“沉静”。这两种颜色巨大的差距造成眼镜极度不适。

  

 

  综合以上分析,沿用本地客户端的红色不太适合。

  2.Safari浏览器内运行的影响?

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

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

  3.当前的视觉风格趋势

  由Metro UI和Google+引领的“小清新”风格,成为一股不小的视觉风格发展趋势。精致繁复的视觉经历一段时间后,返璞归真,开始流行简洁清新的视觉风格。

  于是,视觉设计师经过几次视觉尝试,包括红色、酷黑色、清新浅苄?而设计是将这些技术可能性塑造成型的模具。

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

  人力和精力有限,难免有偏颇之处,欢迎大家拍砖!期待和您一起讨论这一有意思的话题。


  推荐阅读

  网站用户体验:做交互应该知道的视觉几件事

偶尔会听到产品经理和交互设计抱怨,视觉设计稿和最初规划差别太大,我自己也遇到过类似状况。究其原因,大多还是沟通中出现了问题。 有效沟通,信息的对等是很重要的。这个对等,既包括让视觉设计尽早了解产品需求,>>>详细阅读


本文标题:<b>HTML5带来wap网页颠覆性变革 开发实战之网易微博</b>

地址:http://www.lgo100.com/a/22/20120613/67463.html

顶一下

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
我的评论: 人参与评论
验证码: 匿名回答
网友评论(点击查看更多条评论)
友情提示: 登录后发表评论,可以直接从评论中的用户名进入您的个人空间,让更多网友认识您。
自媒体专栏

评论

热度