interactive design sample reels by zpp

Page 1



专业技能/SKILLS PHOTOSHOP ILLUSTRATOR SKETCH MAYA / C4D AE / PR

C / C++

2016年8月 - 2016年10月

2016年8月

Uber - 视觉设计

娃哈哈首届全国名校广告创意精英赛

就职于 social media 部门,设计厦门优步线上线下

全国银奖

的活动宣传品、微信图片、动图、app 弹屏、活动 海报易拉宝、KT 板等。参与优步厦门“ 一鹭 U 你 ” 微信公众号。

一个基于AR技术的产品设计和广告创意,团队中负责视 觉设计、三维建模及动画

2014年8月 - 2014年9月

厦门米雀软件公司 - UI设计

2016年1月

UI 设计实习,主要参与理臣会计在线教育项目。

咪咕动漫——厦门大学2016寒假科研实习营

HTML / CSS

二等奖

UNITY

由C++语言编写,openCV环境的二维动画变形系统, 团队中负责遍历算法的优化

获奖情况/AWARDS

工作经验/EXPERIENCE 2018年1月 -

网易游戏 - 交互设计 - 游戏界面拼接、界面优化、迭代、修改等工作

2017年11月

2015年7月

第九届国际用户体验设计大赛

厦门大学第九届软件设计大赛

全国二等奖、最佳创意奖

二等奖

参赛项目为所见,一个基于亲密关系的VR短视频互

参赛作品为校园江湖,一个校园互助社交平台。团队中

动应用,团队中负责动画、UI设计及部分建模和交

负责UI设计


所见 - 让VR成为一种交流方式 -


所见

为亲密关系设计的VR短视频互动app 利用VR的沉浸感、为异地的情侣们营造共同 空间的氛围,通过有趣的互动让异地关系之 间更加亲密

需求分析流程 用户研究 寻找VR短视频产品能解决的用户痛点,在深 度访谈和问卷中把握用户心理

竞品分析 从竞品中寻求设计启发

产品定位 确定用户需求并完善产品概念 VR 场景视频: https://www.bilibili.com/video/av16332387/

*点击页眉可以返回目录哟


所见

用户调研·问题方向

用户拍照片和视频的场景,在不 同平台上用户的行为会有所改变 吗?为什么?

用户对短视频VR内容的偏好, 年龄、经济水平在其中的影响

A

D

目标用户

B

E

用户对VR的需求,是否有可以 通过VR解决的痛点

F

用户在使用VR中遇到的问题, 现有VR平台的不足之处

所见的目标用户是18-30岁,熟 悉视频产品且对新事物充满好奇 的都市青年群体

我们想知道 用户对照片、视频的编辑需求

会和谁一起看视频,为什么?一 起看时会想做什么

C


所见

用户调研·结果分析

拍视频动机:记录重要的时刻

10 位 深度访谈

103 份 调查问卷

不会拍视频的原因中,“没有必要”、“很麻烦”和 “觉得自己拍的不好”成为最主要的问题。但从中发 现,由于拍视频的门槛较高,所以用户倾向于在值得 纪念的场合下拍视频,如旅游、毕业、演唱会等。此 外,超过半数的用户表示会拍摄视频给另一半。

一起看视频的人:另一半或暧昧对象 对于陌生人的视频:注重视频质量 对陌生人的视频和普通朋友发表的视频质量要求较 高,非常关注视频内容。

亲密关系:观看积极性很高 如果是男女朋友拍摄的视频,没有用户会“ 完全不 想看 ”、“ 不太想看 ”,高达 83.5% 的用户表示“ 想 看 ”,其中有 58.76% 的用户表达了强烈的观看意愿。

令我们惊讶的是大部分用户都表示不会想到和家人一 起观看视频,因为年轻群体感兴趣的视频内容大多是 新潮有趣甚至可能带有一点色情,不适合与家人一同 观看。即使是没有伴侣的用户也表示最想和暧昧对象 一起看而不是家人。

对VR互动的期待:有趣与共同话题 游戏、牵手、拥抱、拍照、语音、留言、想知道对方 视线的位置,知道对方在看哪里。有不少用户表示不 希望有虚拟人偶。



所见

用户调研·用户画像

视频拍摄情况

分析完用户心智模 型后,我们对用户 进行画像,总结出

林丽元喜欢拍照、拍视频,也很喜欢分享给别人看。她说自己拍照比拍 视频更多,因为视频的容量太大了,虽然她使用 64 GB 的 iphone6S 手机,但仍然对视频大小存有顾虑。

三种主要的用户角 色,这里只展示其 中一种

林丽元说自己在参加活动的时候最愿意拍摄视频,也会看别人发的视频, 但大多数时候她觉得别人发的视频都很无聊,所以渐渐的也不怎么看了, 而且担心看视频消耗流量太多了,她很少在视频 App 上看视频。

全景短视频拍摄者 林丽元

“希望VR能帮助我减少异国恋的距离感, 让我们感觉还在彼此身边” / 武汉大学数字媒体技术专业的大三学生 / 喜欢摄影,现在在与男友的异国恋中 / 手机型号 iphone6S,熟悉电子产品的 使用,愿意尝试新科技

个人情况和需求 林丽元与男友异地恋一年,男朋友在加拿大留学。小丽平常与男友交流 主要使用微信,也会用 skype 视频聊天,但两人学业都较为繁忙,且 有 10 小时的时差,所以视频的次数不多。 小丽觉得异国恋非常的辛苦,因为难以参与到彼此的生活中,不清楚彼 此的生活细节。有时即使视频聊天也会觉得没有话题可聊。 小丽希望能借助 VR 拉近她和男友之间的距离,让她能把身边有趣的事 情以更好的形式分享给男友,而男友也能得到充分的体会。






象片 - 告别剪刀手,用有趣的方式记录生活 -


象片

告别剪刀手——用更有趣的方式记录生活 对热门IP进行创意cos的拍摄助手与创意素材 库

部分设计流程 项目背景 选题背景分析,寻找突破口

可用性评估 关注最能解决用户痛点的核心功能,优化使用 流程

高保真原型与核心场景交互流程 根据产品特性,进行交互、视觉与整体逻辑设 计 视频介绍: https://www.bilibili.com/video/av20335307/



象片

六顶帽子

中年人 市场 考虑 多人协作

图像处理 技术

红帽子

在概念设计初期,我们使用六顶帽子、10+10等思 考方式来发散思维,寻找机会点和创新突破

百度搜索 结果250万

白帽子

Multipeer Connectivity 框架

cosIP 上热搜

解决 构图问题

游戏化: 通关、接龙

绿帽子 实时 屏幕共享

可暂存 依赖 热点 拼图打卡

黑帽子

图片质量vs 操作简便

专注创意 cosIP

黄帽子

UGC

定位 好玩


象片

第一次功能框架

经过用户研究后,我们定位该app的 功能点为 1、素材库:搜索想要cos的素材, 同时提供以图搜和基于地理位置搜的 功能 2、拍照时提供辅助线与原图帮助还 2、拍照时提供 原人物位置、动作。并可对拍完的照 片进行编辑美化 3、添加协作功能,方便被拍者了解 自己在镜头钱的模样,方便交流拍照 意见和挑选自己满意的照片 4、用户可以 4、用户可以上传自己的创意cos作 品也可以查看关注和最热的cos


象片

第一次可用性评估

第一次可用性评估反馈总结 1、协作:认可想法,但功能设计流程较为新颖,初学者难以适 应,且略繁琐 2、圈子:传播效果不如微信、微博,应当增加趣味性的互动 3、拍照:功能太多不利于用户理解与操作

修正核心使用场景 1、查看模版库——选择模版——线框指引(增加线框和原图的 透明度调节)——完成拍照 2、自定义模版——上传图片——自动识别边缘线——手动修改 ——扩充资源库 3、增加活动专题挑战、趣味接龙等趣味互动形式,将优质内容 置于顶端 4、通过收藏、点赞、活动等操作, 4、通过收藏、点赞、活动等操作,筛选出用户真正感兴趣的、 具有热度的优质模版素材


象片

第二次可用性评估

测试任务 第二次可用性评估采用认知走查法,对产品的核心任务进行测试 1、寻找模版进行拍照 - 预估路径 模版页

搜索

模版详情

我要拍

调整线框图和原图的透明度,进行拍照

保存到本地相册并分享

跳转到动态页

2、上传自定义模版 - 预估路径 模版页

上传

从相册中选择

修改参考线

完善信息并上传

跳转到我的模版页

3、发起一个挑战 - 预估路径 活动页

发起

选择类型

完善信息

选择模版

选择作品

发布

跳转到活动详情页

4、参与一个接龙 - 预估路径 我的页

消息

@我的接龙详情页

接受

拍照或上传

指定下一个接龙者和模版

跳转到接龙详情页


象片

第二次可用性评估结果

第二次可用性评估反馈总结 1、接龙更像一个私密的活动(只能一人参与,其他人看 ),却和挑战一起放在活动,给人全民参与的感觉,且 机制复杂很难理解 2、首页的模版分类:最新、推荐、主题等 3、模版与作品设计上的区别、模版详情与挑战的区别

修改与优化 1、去掉活动页,将挑战与模版详情合并 2、去掉动态页,弱化社交,专注于拍照功能与丰富素 材 3、丰富模版首页,多种分类:推荐、最新、主题


象片

核心场景交互流程图

核心场景任务1:搜索模版、使用模版辅助拍照 六月毕业季, 李美丽和大学同学相约拍毕业照, 除了自拍, 大家都是并排站比剪刀手很普通的姿势。大家想拍点比较有创意的照片作为毕业纪念, 但是一时想不到什么好玩的拍照姿势。有人提议说可以参照别人毕业季拍的一些比较有意思的照片,于是大家上网搜相关的照片,搜到的照片大 多质量不佳,很费时。 李美丽想起了一个创意拍照小助手—— 【象片】 。他打开【象片】 ,浏览了主页,没有找到跟毕业照相关的,于是点击搜索框,输入“ 毕业 ”搜 索后看到很多跟毕业相关的模版和主题。他看到有很多人都引用了“ 那些年 ”的模版,点击进入到模版详情页,看到其他人模仿海报拍的照片, 觉得特别有意思,于是将模版分享到同学群,很快便得到大家一致的认可。李美丽点击拍照按钮打开相机,有了模版参考线的辅助,大家很快地 找到了相应的位置,按下快门,一张有趣的毕业照就快速拍好了。大家都觉得很满意,把它保存下来,发到朋友圈晒图吸赞。


象片

核心场景交互流程图

核心场景任务2:上传模版 李美丽最近在追一部很火的韩剧《太阳的后裔》 , 非常喜欢男女主, 很想模仿里面的经典场景。在【象片】理搜索相关剧照, 因为是最新出的韩剧,没有找到相关的模版。 李美丽想到【象片】可以让用户自己自定义拍照模版,于是他在首页点击上传模版,选择想要制作模版的照片,象片自 动识别照片中的边缘线,但是李美丽发现有多余的线和没有识别的参考线,于是使用工具擦除和添加参考线,为了让参考线 看得更清楚,李美丽调低了原图透明度,确认后给自己上传的模版写模版描述、选择分类标签,上传成功后就用新模版愉快 地拍照了。


象片

视觉设计展示

高保真原型 设计时无论字号还是图标都比传统的界面设计较小, 体现产品的设计理念——“小而精” 蓝紫色渐变体现年轻人自傲、自由、酷的摄影态度


能力展示 - UI设计、视觉设计、动画视频等 -






视频链接 https://v.qq.com/x/page/b05480h0a69.html

视频链接 ( 密码:134340) http://v.youku.com/v_show/id_XMTc3Mzc3ODM0OA==. html?spm=a2hzp.8244740.userfeed.5!9~5~5~5!3~5~A



演示视频 (密码:134340) http://v.youku.com/v_show/id_XMzAxMDcwMjUwMA==. html?spm=a2hzp.8253869.0.0



Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.