三、交互设计：简洁、高效
负责人：交互设计师；参与人：产品经理、视觉设计师、前端工程师、后台技术人员
交互设计理念：
该产品具体的交互设计理念来源于：用户使用场景的调查、竞品分析、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，最终的视觉效果与本地客户端还有一个区别是，浏览器工具栏一直占据着屏幕的底部一行空间。红色属于比较“喧嚣”的颜色，浏览器的工具栏蓝灰色相对“沉静”。这两种颜色巨大的差距造成眼镜极度不适。
综合以上分析，沿用本地客户端的红色不太适合。
2.Safari浏览器内运行的影响？
网易微博Web App是从safari浏览器中运行和展示的，这是该产品的环境之一。网页给人“轻盈精简”的感觉，本地客户端给人“厚重恒稳”的感觉。
因此，视觉风格“轻量化”是个不错的选择。
3.当前的视觉风格趋势
由Metro UI和Google+引领的“小清新”风格，成为一股不小的视觉风格发展趋势。精致繁复的视觉经历一段时间后，返璞归真，开始流行简洁清新的视觉风格。
于是，视觉设计师经过几次视觉尝试，包括红色、酷黑色、清新浅灰色。多方比较后，大家一致认同清新浅灰色。清新浅灰色是主色调，icon点击后的状态是网易惯常使用的红色，一定程度上保持了视觉风格一致性。
本文链接：http://www.mobileui.cn/html5-163-weibo.html本文标签: HTML5, IOS, iPhone, Web App, 互联网, 交互设计, 用户体验, 网易微博, 网站, 视觉设计
