30 十一

gmail交互和原型设计

题目一 设计一个阅读邮件界面,需表现以下功能点:

1) 顶部邮件信息默认缩略显示,只显示邮件名、发送人、时间,点击展开才显示全部信息。

2) 合并相关联邮件(回复和转发)为一封邮件

3) 邮件中出现邮箱地址,或已有联系人可生成DIV块,且有对应操作下拉菜单

4) 直接在浏览器中预览邮件中的附件(包括压缩包,word,pdf,ppt等)功能在界面上的表现s

5) 根据邮件正文关键字,在阅读邮件界面某区域放置相应推广内容,例如相关的网站链接。

主要参考gmail(其实要求就是gmail),基本是按照题目来的,稍稍做一些扩展和延伸。毕竟考试还是要所问应所答。

高保真PS制作:付说明

mail_01

未展开状态,支持多格式附件预览,回复对话,快速转发和回复双星收藏等等。

 

mail_02

全部展开状态,更多的预览和直接使用。

mail_03

图片浏览模式,不用多介绍了,基本跟满大街都是类lightbox的东东相同。能升级的地方基本上在图片与图片之间的动画化。   

用Mockups制作:简单说明,因为已经给出PS的清晰大图,下面的就没有附大图了。

mail_detail_thumbnail

mail_detail_open_thumbnail

画线框图还是很快的,做个高保真的UI可累死了。。。

One Response to “gmail交互和原型设计”

  1. webppd Says:

    文章不错

留言