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

　　…………

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

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

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

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

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

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

　　分析如下：

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

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

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

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

　　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技术还不是那么完善和成熟;现在还缺乏一款强有力的浏览器。