Issuu on Google+

作品集 秦文婷

01 /

手机号: +86 139 0190 8269

交互设计

ui & Interaction Design

邮件地址: chingsesame@qq.com

02 /

视觉设计

CREATIVE & visual Design

03 /

最后更新于:2013.04

视频动画

Motion Graphic

COOP协同工作软件设计

大型促销活动页面设计

百视通网络电视机顶盒App设计

Shake Jeans 网站及游戏设计

CAM平台 & CMS系统设计

马克华菲

01media 2008年作品集视频

大金空调 售后服务网站设计

马克华菲概念视频

购买&支付流程优化(2011&2012) 邮乐网首页改版(2012)

VIP 用户

VIERA 3D 网站设计 松下

数据可视化视频设计及动画制作 腾讯MIND


01/交互设计

ui & Interaction Design

COOP协同工作软件设计 基于"问题"的在线项目管理工具

市场上传统的项目管理软件不同,COOP更专注对于 "问题"的管理,记录和管理在项目中产生的每条问题。 COOP可以让管理者,设计团队,客户,或其他用户加入 管理项目,并且可以精确的计算项目进程。

困难: -各个任务、操作之间,层级复杂,用户身份多样. -传统管理软件的界面比较单板,COOP要打破这个印象.

负责: -分析需求,优化原有的流程和原型. -改进页面排版架构,设计用户界面. -制作和维护设计说明. -与其他部门沟通合作,保证项目顺利执行.

Mobile: +86 13901908269

E-mail: chingsesame@qq.com


01/交互设计

Mobile: +86 13901908269

ui & Interaction Design

不断优化流程图&原型 COOP是以"项目"为单位,以"问题"管理为 基础的系统,所以将各个用户身份、操作、 属性、层级关系理清,是十分重要的。 初步的原型比较粗糙,不会面面俱到,在之 后的过程中不断被归零优化。

元素整理: 项目属性: 次级项目 进度 项目成员 项目状态 项目隐私 项目操作 删除/移动项目 创建/合并项目 日程表 "问题"定义和操作 问题处理 日期和时间 优先级 添加/删除/移动

E-mail: chingsesame@qq.com


01/交互设计

Mobile: +86 13901908269

初稿:

优化后第一版:

ui & Interaction Design

E-mail: chingsesame@qq.com


01/交互设计

ui & Interaction Design

Mobile: +86 13901908269

E-mail: chingsesame@qq.com


01/交互设计

Mobile: +86 13901908269

E-mail: chingsesame@qq.com

ui & Interaction Design

泼的色彩使COOP在第一眼时就能与市场上的其他产品区别开,我们认为管 理软件也能让人感觉有趣时尚,摆脱枯燥乏味的印象。 对于颜色的运用,我们也尝试将不同状态对应不同颜色,训练用户的使用习惯。


01/交互设计

ui & Interaction Design

百视通机顶盒App设计 百

视通机顶盒是一款基于安卓系统的网络电视盒子,除了提 供在线高清电影、高品质音乐等,还可以下载多款App. 邮乐网作为商业合作伙伴,邮乐原产地App将作为第一款电子商务 应用预装在盒子里。

困难: -我们对于电视机平台设计的经验很少,市场上也没有比较优 秀的基于电视机平台的电子商务应用. -项目时间非常的紧迫.

负责: -与百视通的负责人直接沟通,制定项目需求和策略. -与产品经理合作,并领导4位设计师,在紧迫的时间内尝试 了多版设计. -与百视通的设计总监沟通学习,优化用户体验和设计. -制定视觉设计规范和交互设计说明.

Mobile: +86 13901908269

E-mail: chingsesame@qq.com


01/交互设计

ui & Interaction Design

前期的界面设计尝试 由于时间和资源的限制,我们不得不从视觉上先入手,根据自己平时对 电视机使用的经验,做了多版的尝试。 这里展示3版比较完整的设计稿。我们的尝试大致分成了2个方向,抽象 的界面风格和具象的场景化风格。

Mobile: +86 13901908269

E-mail: chingsesame@qq.com


01/交互设计

Mobile: +86 13901908269

E-mail: chingsesame@qq.com

ui & Interaction Design

远离中心位置的功能可以 设置遥控器快捷键

Select frame

vision sequence

turn left

upwards

1

turn right

5

2

downward

4

3

过向百视通的设计总监的学习和交流,我们认知了电视机平台上的用户体验规范和交互设计方法. 在此基础上,我们重新对设计稿进行信息架构的排版,优化交互和视觉.

上方的灰框图中显示的1至5的顺序,是用户在电视机上的视觉顺序. 根据这个, 我们将元素重新摆放. 电视机的操作是基于遥控器的,所以,横向和纵向的区分需要十分清晰. 遥控器上,方向键除了控制方向,长按和短按也有不同的交互效果.


01/交互设计

ui & Interaction Design

Mobile: +86 13901908269

E-mail: chingsesame@qq.com


01/交互设计

ui & Interaction Design

CAS平台 & CMS系统设计 为

了便于管理者和商家登录邮乐网的多种后台,我们设计了 CAS单点登录的平台. 同时,做为比较重要的后台系统,我们重新设计了商家后台的 体验,由于系统庞大,第一版只对首页和主要样式做了改版.

困难: -线上的版本十分混乱,体验十分不好,改版工作量大. -克服业务和技术支持上的限制. -时间十分紧迫,和其他多个项目同时进行.

负责: -分析需求,定义及设计CAS平台的流程及UI设计. -负责CMS的改版,通过需求分析、灰框图、原型等设计方法 重新设计了商家后台. -撰写和维护设计说明文档. -设计店铺模版.

Mobile: +86 13901908269

E-mail: chingsesame@qq.com


01/交互设计

Mobile: +86 13901908269

E-mail: chingsesame@qq.com

ui & Interaction Design

对于CAS,判断用户的身份是该项目的主要流程. 当用户登录后,可以看到邮乐网的多种后台,系统自动高亮该用户有权限使用的平台.


01/交互设计

Mobile: +86 13901908269

E-mail: chingsesame@qq.com

ui & Interaction Design

正如之前提到的困难,由于诸多限制,在这版的优化上我们决定先着力于后台首页和主要样式(表单、TAB、筛选功能等)的设计. 根据业务和商家的两方需求,通过需求分析、纸原型等设计方法,我们进行了以下的设计.


01/交互设计

ui & Interaction Design

制作设计说明 & 后台独立登录页面 随着对CMS系统的不断优化,我制作了相关 的设计说明文档,迭代更新. 由于商家后台比较特殊,我们设计了独立的登 录页面.

Mobile: +86 13901908269

E-mail: chingsesame@qq.com


01/交互设计

Mobile: +86 13901908269

E-mail: chingsesame@qq.com

ui & Interaction Design

购买 & 支付流程优化 (2011&2012)

2010年 对比

ULE

Tmall

了日常维护和优化,邮乐网会在半年之际进行正式的流程 优化项目,跳出平时的项目,不断归零优化.

困难: -克服公司业务和技术上的限制. -分析邮乐网特性,融入用户熟知的主流流程体验中. -重新设计相关页面.

负责: -调研并分析竞品,保持与主流流程一致,降低用户学习成本. -与多部门沟通合作,分析用户需求、行为. -通过数据分析、用户模型、纸原型和高保真设计稿等设计方 法来优化流程体验和交互细节. -对相关页面重新设计,制定视觉规范和交互设计说明文档.

Dang dang Amazon


01/交互设计

Mobile: +86 13901908269

E-mail: chingsesame@qq.com

ui & Interaction Design

2011年改版: 如之前所说,在2011年, 公司在业务、资源和技术上有诸多限制,我们决定将流程优化成主流网站的做法,以此来降低用户使用邮乐网 的学习成本,降低改版的风险. 在这版的优化中,我们主要运用的是竞品分析和现有用户调研的方法,再通过用户模型、纸原型、灰框 图、高保真设计稿的方法将相关页面重新设计.


01/交互设计

ui & Interaction Design

Mobile: +86 13901908269

E-mail: chingsesame@qq.com


01/交互设计

Mobile: +86 13901908269

E-mail: chingsesame@qq.com

ui & Interaction Design

2012年: 在数据支持下,我们尝试通过优化流程的交互细节来缩短流程.比如,能帮助用户快速找到商品、快速支付,也是一种缩短流程的方法. 配合邮乐网的新业务模式,在这版的改版中,我们对购买及支付流程的相关页面都做了重新设计,包括信息架构,用户界面及交互.


01/交互设计

Mobile: +86 13901908269

E-mail: chingsesame@qq.com

ui & Interaction Design

配合此次改版,除了流程相关页面,另2个比较大的项目就是登录页的设计和在线客服的功能添加. 其中,在线客服将会在2013年进行更 多的优化.


01/交互设计

ui & Interaction Design

2012年邮乐网首页改版 每

一年,邮乐网会根据新的数据信息和业务发展来做一个比较 大型的首页改版.

困难: -深度分析邮乐网用户的需求和行为习惯. -说服领导层,做一些尝试.

负责: -调研分析竞品. -与多个部门合作,挖掘数据,分析用户需求和心理模型. -通过用户模型、心情版、故事版、纸原型、灰框图等设计方 法重新设计了首页的信息架构布局和界面. -根据反馈不断调整设计,并制定和维护设计说明文档.

Mobile: +86 13901908269

E-mail: chingsesame@qq.com


01/交互设计

Mobile: +86 13901908269

ui & Interaction Design

950px 导航

1

第一屏

其他板块

页脚

导航&迷你购物车设计

2

第一版的设计中, 由于平台招商不足, 我们尝试把热销品牌关键词直接放在 导航上,在一定程度上增加了销售和 点击深度。随着业务的发展,在这次 的改版中除去了这个功能,将导航简 化. 迷你购物车在电商中的作用越来越受到 重视,这版的优化中,我们改善了迷你 购物车的体验.

3

E-mail: chingsesame@qq.com


01/交互设计

Mobile: +86 13901908269

ui & Interaction Design

950px 导航

第一屏

其他板块

页脚

E-mail: chingsesame@qq.com


01/交互设计

Mobile: +86 13901908269

ui & Interaction Design

950px 导航 第一屏

其他板块

页脚

第一屏设计 & 其余栏目 第一屏对于一个网站来说十分的重要,电商网 站更需要在首屏展示出吸引住用户的功能、商 品和网站形象. 我们根据数据分析、用户需求挖掘等重新制定 了策略和功能. 通过灰框稿、纸原型等设计方法 对首屏进行了重新设计 . 主要针对邮乐卡支付 方式的特性. 邮乐卡:邮乐网主要的支付方式,和联华OK 卡类似,有面值的区分,常见的有50元,100元 200元,300元和500元.

E-mail: chingsesame@qq.com


02/视觉设计

Mobile: +86 13901908269

E-mail: chingsesame@qq.com

CREATIVE & WEB Design

邮乐网大型促销活动 iPhone抽奖活动页面

困难: -邮乐网平台的首次大型活动,需求和策略随时变化,影响后续设计和进度.

负责: -与活动策划人员、PM一起讨论,制定需求

是邮乐网平台的首次大型抽奖活动,也成为日后邮乐网抽奖活动的参 考基础,此次活动取得了很好的成绩,获得了用户好评。

-快速制作信息架构图和视觉设计图,不断的再修改和深入


02/视觉设计

CREATIVE & WEB Design

Mobile: +86 13901908269

E-mail: chingsesame@qq.com


02/视觉设计

Mobile: +86 13901908269

E-mail: chingsesame@qq.com

CREATIVE & WEB Design

邮乐网大型促销活动 Yummi手机游戏web页面设计

困难: -游戏自身界面较为抽象,没有视觉因素可以利用,同时要渲染游戏气氛.

负责: -与Yummi负责人直接沟通交流,明确需求.

内首款多人在线竞答手机游戏,由英国Yummi公司设计。与邮乐网 合作,宣传此款游戏和公布游戏的相关信息,发放中奖名单。

-快速制作信息架构图和视觉设计图,不断的再修改和深入.


02/视觉设计

Mobile: +86 13901908269

CREATIVE & WEB Design

重新设计

E-mail: chingsesame@qq.com


02/视觉设计

Mobile: +86 13901908269

CREATIVE & WEB Design

时间

马克华菲网站&游戏设计 SHAKE JEANS

高度

逢春季和秋季,马克华菲都会推出新品,这款游戏是为了他们的新 牛仔裤产品Shake Jeans而设计,通过简单的互动,让用户参与, 享受乐趣的同时,还能赢得奖品。

困难: -游戏形式需要简单易上手,但又不能枯燥. -基于创意和互动方式,需要在视觉设计上花大量时间和功夫.

负责: -参与游戏形式创意. -与另2名设计师合作,负责游戏的部分界面设计. -负责产品特性和商铺地图的页面设计,并制作Flash动画.

时间

-1

-与程序员沟通,确保效果.

时间

+1

E-mail: chingsesame@qq.com


02/视觉设计

CREATIVE & WEB Design

Mobile: +86 13901908269

E-mail: chingsesame@qq.com


02/视觉设计

CREATIVE & WEB Design

大金空调VIP售后服务网站 为

了提供更好的售后服务,大金空调为其VIP用户建立了这个网站, 用户可以在网站上注册自己的信息,获得更多更方便的服务。

困难: -客户对网站的规划比较模糊,希望不同于以往的服务性网站,尤 其在文字内容的排版上有较高的要求。

负责: -参与策划制定,并进行设计.参与内部比稿. -基于反馈,进一步优化设计. -除了官网,同时负责VIP用户后台界面设计. -制作首页Flash动画,交付设计说明文档.

Mobile: +86 13901908269

E-mail: chingsesame@qq.com


02/视觉设计

CREATIVE & WEB Design

Mobile: +86 13901908269

E-mail: chingsesame@qq.com


02/视觉设计

Mobile: +86 13901908269

E-mail: chingsesame@qq.com

CREATIVE & WEB Design

松下VIERA 3DTV 官网设计 等离子电视机

凡达3D电影取得成功之际,各大电视机厂商纷纷推出了家庭3D电视,三星造 势最为积极,松下也在此时推出了高品质,针对收入高、教育程度较高人群 的产品,由松下大中华区的负责人直接参与官网的设计方案.

困难: -各大厂商分别推出3D电视产品,也成了各大广告公司的竞争,三星抢先造势并取得不 错的反响,给其他公司造成压力. -松下的产品卖点和特性较为复杂,客户又想面面俱到的展现.

负责: -参与前期策划,与松下负责人直接沟通,确保设计方向正确. -负责产品特性描述的页面设计,并制作Flash动画,交付程序员设计说明文档. -配合市场部,设计营销活动页面设计.


02/视觉设计

CREATIVE & WEB Design

Mobile: +86 13901908269

E-mail: chingsesame@qq.com


03/视频动画

Mobile: +86 13901908269

E-mail: chingsesame@qq.com

FLASH & VIDEO ANIMATION

腾讯MIND数据可视化视频 NIKE WOMEN营销解决方案展示

频内容主要是通过对营销数据的可视化设计,最终用视频的形式,帮助腾讯MIND向他们的客户 展示其营销方案,包括腾讯如何在各个产品上精准的投放客户信息,寻找目标用户群体,并 取得的成果的展示,让腾讯客户对于枯燥的数据一目了然。

困难: -提炼数据,展示最核心的内容. -用创意和视觉形式来刻画枯燥的数据,让人一目了然.

责任: -与腾讯的项目负责人直接沟通交流,确认视频概念方向. -负责部分故事版设计. -用Flash、AE、Premiere等软件,制作出最后的视频.


03/视频动画

Mobile: +86 13901908269

E-mail: chingsesame@qq.com

FLASH & VIDEO ANIMATION

01media-2008年作品集展示 展

困难: -用视频语言来阐述和连接网页设计等作品.

负责: 示01media在2008年的主要项目,利用视频语言,将网页作品、动画视频作品、平面作品等生动 的串联起来,让人身临其境,同时也展示给潜在客户01的设计风格和实力.

-将设计稿分层、提炼,用于视频制作. -制作故事版,将每个项目的亮点和风格最大化的展示出来. -用Flash、AE、Premiere等软件,制作出最后的视频.


03/视频动画

Mobile: +86 13901908269

马克华菲-企业形象视频

困难:

E-mail: chingsesame@qq.com

FLASH & VIDEO ANIMATION

-表达抽象的关键���,同时也要将马克华菲的产品融入概念视频中.

责任: -负责部分的故事版设计.

了不断巩固企业理念,马克华菲每年都会制作一支新的视频来宣传其企业形象,即反战、 时尚优雅、自由、张扬个性的形象.

-将所有故事版设计稿整合衔接起来. -用Flash、AE、Premiere 制作视频.


谢谢您的阅读 我的联系方式:13901908269 / chingsesame@qq.com 最后更新于 2013/04


portfolio_qin_chinese