首页 爱情文章 亲情文章 友情文章 生活随笔 校园文章 经典文章 人生哲理 励志文章 搞笑文章 心情日记
  • 爱情文章
  • 亲情文章
  • 友情文章
  • 生活随笔
  • 校园文章
  • 经典文章
  • 人生哲理
  • 励志文章
  • 搞笑文章
  • 心情日记
  • 英语文章
  • 范文大全
  • 作文大全
  • 新闻阅读
    •
    当前位置: 山茶花美文网 > 经典文章 > 正文

    [I,SEE,YOU,–,AVATAR,TALK,设计分享] I HE YOU

    时间：2018-08-11来源：山茶花美文网 本文已影响 人 山茶花美文网手机站
    I SEE YOU – AVATAR TALK 设计分享1

    随着移动通信互联网的逐渐成熟，通过文字、语音、图片、视频交流的通信应用(QQ、微信、Whatsapp、LINE…)一应俱全。我们在思考，如果有一种新的形式给即时通信带来突破，会不会成就一个与众不同的App呢?

    我们希望它十分有趣、新颖、能给好友间带来新的互动、解决尴尬环境下产生的问题并带来新的交友机会，同时还需要符合移动设备轻量、省电又省流量的诉求。于是，我们开始着手设计一款趣味化的视频IM——AVATAR TALK。

    下面跟大家简单的聊聊设计AVATAR TALK的整个流程，以及过程中遇到的问题和处理方案。

    前期预研

    AVATAR TALK到底是什么呢?

    它是一款新型的视频通讯工具，其主要是利用人脸识别技术以虚拟形象与好友进行实时视频通话及互动。它包括AVARTAR(角色装扮系统)+TALK(视频通话)功能。

    App Store和GooglePlay里面暂时都还没有发现虚拟互动聊天的应用。于是预研阶段我们尝试使用虚拟形象并提供了3种AVATAR模型进行测试。评估各种模型的视觉效果、设计成本及性能效率(如下图)，并快速敲定了位图方案。

    I SEE YOU – AVATAR TALK 设计分享2

    交互设计

    整个软件由三大模块组成(AVATAR TALK、联系人、会话)，自然造就了功能强大的入口。为了加强它与用户之间的亲切感，通过大范围的调整信息比例，让用户能马上被虚拟形象所吸引，同时也要便于后期的信息扩展。

    在这个过程中，我们遭遇了2大难题。

    1.个人主页

    如何设计个人主页是其中遇到的一大难点。在最初提出的快速通讯列表(以文字信息为主的主页)与个人动态墙(显示静态虚拟形象及浮动消息的主页)的基础上，最终优化成为动态主页。即让用户可以通过人脸识别，操作虚拟卡通形象，自己跟自己玩，以增加产品趣味，提升用户体验(如下图)。

    I SEE YOU – AVATAR TALK 设计分享3

    2.聊天界面

    在聊天界面布局安排上也产生过分歧，一度成为设计的瓶颈。

    传统聊天的大小窗口模式并不能适用于AVATAR的互动视频聊天。你对好友夸张互动时(比如揍他一拳、扔个鸡蛋、对TA无语飞个乌鸦神马的)也希望双方的反应大家能够及时感知，进而产生下一步的互动。

    又因为受硬件的制约，各种手机摄像头的位置不一，拍摄角度可视角度受限，还要顾及界面设计的合理布局等因素，两人并排在同一场景中的布局也无法实现。

    环境和技术的限制，再加上AVATAR是由表情控制，进过小组内多轮脑暴，最后一致认为采用1:1分割的方式能更充分的展示双方的面部表情以及互动。(如下图)

    I SEE YOU – AVATAR TALK 设计分享4

    动画开发

    开发动画对团队来说是一次全新的尝试。为了保证应用的轻量性，最大发挥互动动画的灵活性，采用了程序完成全程动画的方法(如下图)。

    I SEE YOU – AVATAR TALK 设计分享5

    由于互动动画是无规律运动，因此由交互先给出动画Demo，评审通过后再输出各个部件的动画规则。先使用临时素材制作Demo，当最终动画完成视觉才优化相应的部件，提高效率。

    视觉展示

    在Android系统里，为了AVATAR TALK能够更加轻量化，将程序入口拆分为3个模块。分别是：“AVATAR TALK”、“联系人”与“会话”。

    入口的设计为配合整体的风格最终选择了平面化的视觉表达方式。从立体的ICON优化成轻量的纸片化效果，更好的配合界面的整体风格。

    I SEE YOU – AVATAR TALK 设计分享6

    设计心得

    设计要推动产品，既需要设计师的直觉，也需要对产品有多维度的充分考虑，才能快速有效的集中。如何抓住核心的思考成为一个重要的挑战。

    在视觉设计方面，原型的结构骨骼设计(角色的身体结构，简单的说就是AVATAR赤果果的样子)在后期动画实现环节中有很大的影响。只有将每个活动的关节合理拆分才能配合好动画的制作，展示出理想的动态效果，更能无缝的衔接产品后期换装的功能;只有固定好骨骼的活动范围，才可以使原型在任何一个装扮下都活动自如，精准适配。

    结语

    AVATAR TALK就像电影阿凡达中的分身一样，用新的聊天模式让用户感受到“眼相见，心相连”的视频通讯体验!

    I See You!

    I SEE YOU – AVATAR TALK 设计分享7

    文章来源：Tencent CDC Blog

    • 爱情文章
    • 亲情文章
    • 友情文章
    • 随笔
    • 哲理
    • 励志
    • 范文大全

    最新文章

    热点文章

    推荐访问

    军训远足心得体会 军训爬山心得体会 大学军训徒步拉练感想 军训徒步作文 军训徒步10公里感想 军训徒步心得体会 5分钟演讲中秋节节日 中秋一分钟演讲 中秋节演讲稿4分钟 中秋节演讲稿一分钟 中秋节演讲稿五分钟 3-5分钟 中秋节短篇演讲稿 中秋节演讲稿两分钟 中秋节的演讲稿3分钟 关于中秋节的演讲稿三分钟 孩子体验军训的心得 参加孩子军训活动的感受与收获 家长对孩子军训后的收获和感悟 小孩军训的收获与感悟 学生军训的收获与感悟 孩子军训成长过程家长感悟 孩子军训感悟 孩子军训心得体会 孩子军训的收获与感悟 兵役前训练心得体会 部队当兵的心得 新兵役前教育训练心得体会 预备役军训心得体会 新兵军训感悟

    本文[I,SEE,YOU,–,AVATAR,TALK,设计分享] I HE YOU由山茶花美文网整理提供，版权归原作者、原出处所有。

    Copyright © 山茶花美文网 All Rights Reserved.