论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: 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:18:29

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


设计内容与细节也是比较繁多,今天在这里只捡一处细节与大家分享一下:

增强易寻性——全局导航的加强

与原有的wap微博相比,全局导航条的固定存在是一个很大的变化之处。下面我们简单分析一下这么做的原因:

–用户的使用环境是什么样的?——室外的移动情境(如地铁上、排队中),或者室内闲散状态(如床上睡前刷微博);

–用户来到这个页面的目的是什么?——浏览微博;

–用户在这个页面中的常用操作有哪些?——下拉阅读、置顶并载入新信息、点击其他tab执行跳转;

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

–如果全局导航条固定在顶端,坏处是什么?——吞噬了宝贵的信息展示空间;
    用户使用过程中,置顶、刷新、切换tabs的行为也是比较频繁的行为,操作的便捷性需要保证。而固定的全局导航条可以满足这个需求:点击HOME键可以置顶并刷新,可以方便用户切换tabs. 同时,固定的全局导航条可以使用户一直明确地知道身处何处,可以去哪,给与用户较强的全局控制感;

四、视觉设计:清新风格的试验
负责人:视觉设计师;参与人:产品经理、交互设计师、前端工程师

网易微博Web app的视觉风格的确定是经过多角度探讨的:
1、要不要和网易微博本地客户端的色调保持一致?
   
产品在不同平台上需要保持一定的一致性,颜色风格也是形成产品气质的重要组成,那我们需要使用与网易微博本地客户端相近的皮肤吗?网易微博本地客户端的主色调是红色;

分析如下:
–使用该红色的好处是:比较强的产品一致性;红色形成的产品气质比较“精神”;
–使用该红色的坏处是:红色区域与微博内容相比略微抢眼,“沉浸式阅读”比较难以实现;
    通过safari浏览器使用网易微博Web App,最终的视觉效果与本地客户端还有一个区别是,浏览器工具栏一直占据着屏幕的底部一行空间。红色属于比较“喧嚣”的颜色,浏览器的工具栏蓝灰色相对“沉静”。这两种颜色巨大的差距造成眼镜极度不适;

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

三、交互设计:简洁、高效
负责人:交互设计师;参与人:产品经理、视觉设计师、前端工程师、后台技术人员;

交互设计理念:
   
该产品具体的交互设计理念来源于:用户使用场景的调查、竞品分析、Web App研发现状、微博Web App的自身要求。最终归纳得出的交互设计理念主要有:

1、增强易寻性:全局导航的加强、快速回到首页、常用操作常驻、适时的动画演示、简约明了的网页布局等;

2、提高使用效率:降低信息架构层级、适当给出快捷键入口、保证安全触控区域、考虑用户浏览习惯、优先保证核心功能、消除不必要的视觉噪音等;

3、更加智能体贴:支持离线使用、编辑中的信息意外打断后自动填入、警示框的谨慎使用、搜索建议实施提供帮助、针对当前任务需求安排工具栏、积极有效的反馈等;

4、提高任务专注度:单一任务操作路径、tab导航适时隐藏、消除干扰因素、不可用button灰度化显示、任务进行页面最大化、未进行功能最小化等;

5、
平台一致性:即看即点、iOS平台的列表视图、前进及返回操作时的推屏动画、iOS平台特色的模态视图、警示框、调取原生控件、简单明了的跳转逻辑等;此阶段的交互设计理念已经不单单是理念,更多的是对该Web App产品的具体设计指导。承载着美好设计理念的设计实现方式,是设计研究阶段的重要落地。
视频教程列表
文章教程搜索
 
Dreamweaver推荐教程
Dreamweaver热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058