<menuitem id="mh6do"></menuitem>

    
    
    <em id="mh6do"><ol id="mh6do"><mark id="mh6do"></mark></ol></em>
    <ol id="mh6do"></ol>
      <em id="mh6do"><tr id="mh6do"></tr></em>
      <dl id="mh6do"><ins id="mh6do"><thead id="mh6do"></thead></ins></dl>

      <sup id="mh6do"><menu id="mh6do"><small id="mh6do"></small></menu></sup>

      您的意见是我们 UI 中国进步的动力!
      点击立即反馈按钮,发表您的意见!
      立即反馈
      QQ群反馈
      您?#37096;?#20197;加入UI中国官方反馈群进行反馈!
      群号:302892100
      备注:反馈问题后@管理员能让我们及时了解您的意见

      社交互动创新 | 从点赞?#20132;?#25484;

      原创文章 分类: 经验/观点 版权:
      9376 147 338 27
      2019-06-25
      76.1
      首页推荐

      我们从前期互动行为的挖掘、情感化的视觉体验打磨以及趣味的玩法升级三个方面,剖析Qzone击掌功能的整个设计历程,或许能为大家提供一些参考性的思路和设计方法。

      Image title


      1 前言


      如何在产品功能上做更多的创新来体现设计价值一直是设计师关注的话题,尤其是在体系成熟的产品里,如?#21619;?#23436;善的基本框架和功能进行突破、如何挖掘用户的互动诉求并拓展更多的互动行为等对于设计师来讲都是很大的挑战。我们从前期互动行为的挖掘、情感化的视觉体验打磨以及趣味的玩法升级三个方面,剖析Qzone击掌功能的整个设计历程,或许能为大家提供一些参考性的思路和设计方法。


      2 何为互动


      我们先从真实生活场景中的互动说起。


      人与人之间的互动无处不在,它是我们生活中必要的组成部分,也是整个人类社会的基石。从本质上来讲,社交产品要解决的问题就是人们之间互动的问题。那么如?#21619;?#20041;互动呢,我们可以从日常的生活场景中窥得一二。


      反馈链


      首先,让我们来看一看日常生活中的互动案例:


      Image title


      这是一个很常见的熟人互动案例,我们可以看到,熟人间很容易产生话题,并?#20013;?#20114;动下去。但是如果同样的话题发生在不是很熟悉的人之间,可能就会是另一番场景:


      Image title



      在例二中,因为A与B互相不熟悉,所以A没有对B的回复产生进一?#20132;?#21160;,对话因此而结束。我们可以进一步推理,其实在这个案例中,不管原因变成什么,只要A没有响应B的反馈,那么A与B的互动就大概率会终止。


      Image title


      这是因为良好的互动行为一定是双方(或多方)的互相行为,一旦因为某些原因导致其中的反馈中断,互动将无法?#20013;?#30001;此可以总结出:


      互动在本质上是由一系列的反馈(互动)组成的一条反馈链


      Image title


      反馈质量


      但是光有反馈链还?#23545;?#19981;够,在社交场景下,我们往往希望反馈链足够长,这样才能让互动双方产生感情升温。在例二中,其实是存在着一条很短的反馈链的,A与B只互动了一个回合。A没有继续响应B的反馈,是因为B的反馈质量?#31995;汀?#35797;想,当A向B问好时,若B的回复是“早上好,你今天穿的真精神!”,那么A会不会响应B的反馈呢?#35838;?#24819;大概是会的。由此可见:


      反馈链的长短取决于每次反馈(互动)的质量。


      高质量的反馈具备很多特点,其中有三个尤为重要


      Image title



      1 反馈链中的指向性


      我们日常生活中的互动行为,?#35805;?#37117;会以一个“握?#21482;?#21046;”作为开端。这个握?#21482;?#21046;可以是显性的(直接喊出对方的称呼,可以是名字、外号,?#37096;?#20197;是关系称谓),有时?#37096;?#20197;是隐性的(眼光的对视、话题的流转等)。这个握?#21482;?#21046;帮助互动双方建立了互动的场景,?#30431;?#26041;达成"开始交流"的共识,?#21592;?#20449;息的接收者做?#20204;?#21548;并回复的准备,这就是互动中的指向性。


      任何互动行为都是发生在两个或者多个明确的对象之间的,因此在良好的互动行为中,指向性显得尤为重要——没有人会去响应别人的自言自语。在互动的过程中,指向性不明确的互动行为是低质量的,不容易获得进一步的反馈,例如评论区中的统一回复、群发的新年问候、领导在台上的讲话等。反之指向性明确的互动是高质量的,比较容易获得反馈,例如群聊中@某个人、收件人为某个人而非邮件组的邮件、多人聊天时眼光的对视等。


      Image title



      2 ?#35782;?#30340;互动行为


      互动行为的?#35782;?#21253;含两个方面:信息?#35782;?#21450;行为?#35782;取?/p>


      一方面,由于互动行为本质上是信息的传递过程,因此每次反馈的信息质量会直接影响到反馈的整体质量。好的反馈应该传达?#35782;?#30340;信息,让接收者可以?#28304;?#36882;的信息进行轻松的接收?#25353;?#29702;,最大程度降低接收者的反馈门槛。

      另一方面,传递信息的行为也应该是?#35782;?#30340;。在生活中,不同的场合下,我们会选择不同的行为来表达同样的意思,?#28909;?#27604;较正式的场合会选择握手作为问好,而与家人久别后的见面则可能是一个热情的?#24403;А?/p>


      3 反馈的即时性


      互动行为是?#35272;?#20110;一定语境的,当语境消失,互动?#27493;?#20572;止。在社交产品的互动场景中,互动语境?#35805;?#20250;随时间流逝而逐渐减弱直到消失,所以反馈的质量也随时间的流逝而逐渐衰减,若想让反馈链可以得到延续,要尽量保证在语境消失前产生反馈行为,因此即时性的反馈就显得十分重要。


      3 点赞?#20132;?#25484;的互动探索


      有了以上的理论基础,接下来分析一下Qzone中的互动行为。


      Qzone中的互动方式可以归为三类:评论、转发、点赞。其中,评论和转发都可以产生完整的反馈链。针对评论,用户还可以继续通过评论、点赞等方式进行反馈;针对转发内容,用户?#37096;?#20197;进行进一步的评论、转发、点赞。而对于点赞行为,反馈链到此戛然而止,用户无法对点赞行为进行直接的反馈。


      Image title


      因此,为了让用户的点赞可以形成完整的反馈链,我们的设计目标就呼之欲出——为Qzone中的点赞行为寻找一个具有指向性的、?#35782;?#30340;、具有即时性的反馈行为。互动场景的选择


      互动场景的选择


      ?#28909;?#35201;设计的是一个具有指向性的互动行为,我们就必须在可以接收到赞的场景里去做这件事。所以我们首先遍历了主人态下,所有可以看到别人给自己点赞的场景。


      Image title


      但是以上的场景中,并不是都适合?#24615;?#28857;赞的反馈行为。根据用户的行为目的,我们可以把以上场景分为两类?#20309;?#32469;点赞行为的关键行为路径(图c.消息列表、图d.点赞列表)、不以点赞为核心目标的其他场景(图a.好友动态、图b.个人主页)。显然,我们应该把围绕点赞行为的关键行为路径作为主要互动场景。并且所有对于点赞的反馈都是直接依?#25509;?#28857;赞行为本身的,使反馈行为具有明确的指向性。


      ?#35782;?#30340;语义及交互


      前文提到,?#35782;?#30340;互动包含“信息?#35782;?rdquo;和“行为?#35782;?rdquo;两个方面,落地到产品里,就是定义互动行为的“语义”和“交互行为”。


      关于点赞反馈行为的语义表达,我们列举了很多来自现实社交场景中的备选方案,然后以动作的情感程?#32676;?#25104;熟程度划分了4个象限,对这系列动作进行归类。


      Image title


      由于点赞行为本身所传达的情感是比较轻量化的,我们更倾向于选择一个轻量化的情感表达方式作为点赞的反馈;同时由于Qzone的用户群体以年轻用户为主,我们还需要选择一个尽量贴合年轻用户感官的语义。因此我们在象限图中初步选中位于左下角的“击掌”和“剪刀手”两个概念。考虑到“击掌”比“剪刀手”具有更为明显的指向性,所以?#33539;?ldquo;击掌”为最终的落地方案。


      Image title


      同时,因为点赞行为本身是一个及其轻量化的行为,所以我们也用最轻量的交互操作作为它的反馈,只需要一次点击即可。


      反馈的及时触达


      用户每?#38382;?#21040;针对点赞的反馈,都会收到一条与点赞相同的消息提醒,通过push、首页新消息提?#36873;?#32418;点?#28909;?#29992;户第一时间知晓。在消息箱列表中,每一条点赞和回赞都成为单独的一条消息,可以让用户最直观的查看并进行反馈。

      综上所述,我们?#33539;?#20102;整个反馈链的交互框架:


      Image title


      4 情感化的视觉体验打磨


      击掌的视觉设计是一个发现问题到解决问不断循环的过程。在这个过程中,推动解决方案逐步升级的核心方法是情感化设计。


      击掌动作本身就带有丰富的情绪,而情感化的设计方法可以?#20204;?#32490;的释放更大化,所以在视觉设计阶段,我们以情感化设计作为方法去?#24179;?#26041;案逐步完善,最?#25112;?#31435;起用户与产品、用户与用户间的情感连接,加深用户对功能的认可和共鸣,带来更加有趣的体验。


      情感化设计具象?#20132;?#25484;这个功能,需要解决两个问题:


      1.如何唤起用户在现实场景中的击掌?#19988;洌?/p>


      2.如何符合空间用户群体的基本调性。


      唤起用户在现实场景中的击掌?#19988;?/span>


      设计之初,我们用平面icon的形式来表现击掌,虽然可以满足基本的功能诉求,但是在视觉体验上乏善可陈,我们又尝试更丰富的各种视觉表现?#28304;?#24341;起用户对击掌这个动作的共鸣。


      在设计推敲的过程中共经历了三个阶段,在不断发现问题和解决问题的循环中寻找更优的设计方案:


      Image title



      Step 1 | 静态展示到动势塑造


      我们用两个手掌叠加的样式构造了击掌icon的基本造型。为了增强用户对于“击掌”的语义感知使用了漫画中常用的动态线条,让用户从视觉上直观感受到这是一个动态的互动行为,而非简单的单方面点亮icon,?#28304;?#21152;强用户对击掌这个互动行为的?#29616;?/p>


      Image title



      Step 2 | 2D动画演绎


      但是这样的动势表达仍然具有局限性,动态线条的表达方式并不具备普适性,无法保证用户可以理解其中的含义。因此我们在第二个阶段的设计迭代中使用更加直观的动画来帮助用户理解,使其与现实生活中的动作产生呼应。


      Image title



      Step 3 | 3D表现


      在解决了语义表达的问题后,我们遇到了一个新的挑战,由于整个动画的展示视范围较小,在视觉表现力上并不理想。因此在第三个设计阶段中,我们通过放大动画、尝试3D表?#20013;?#24335;的方法解决上述问题。同时,3D的表现手法还可以通过光影和质感?#21019;?#36798;更多信息,更加直观易懂,具有极强的代入感。


      Image title



      符合空间用户群体的基本调性


      空间的主流用户以年轻人居多,为了匹配用户群体的基本调性需要打造一个“年轻”、“有趣”的3D击掌动画。为此,我们以“3D”、“young”、“fun”作为关键词收集参考素材,?#28304;?#24314;立情绪版。


      Image title


      1 趣味和轻量的质感


      如前文所述,对于击掌反馈行为是一个轻量化的互动,为避免3D表现手法过于写实而带来不必要的厚重感,同时?#21442;?#20102;增加动画的趣味性,我们选择卡通的手掌造型进行建模;在材质的选择上我们偏向黏土材质,弱化高光,让视觉上体验更加轻量。


      Image title



      2 弹性曲线让动画更生动


      现实生活中的击掌动作是一个减速运动,但是为突出击掌的动势和加强趣味性,我们采用了非写实的弹性曲线?#21019;?#36896;这个动画,?#28304;?#21152;强动画的趣味性。


      Image title


      3 礼花烘托氛围


      在后续的产品迭代优化过程中,我们引入了无限击掌的玩法,用户之间可以无限回赞。这就导致动画被重复播放,会加速用户对动画的审美疲劳。所以为配合产品玩法的升级对动画的设计也进行了迭代,基于击掌次数设计了不同的展示?#23454;?mdash;—在击掌达到特定次数后,会有彩带礼花?#26576;觶?#22312;烘托多次击掌的热情氛围的同时,给用户带来更多趣味和惊喜。


      Image title


      在击掌功能的设计过程中,我们不断在发现问题、解决问题的循环中不断寻求更优解,逐步把一个不到100像素范围内的击掌icon做到更好,?#28304;?#26469;唤起用户的对现实击掌的?#19988;洌?#24314;立起与用户情感上的连接。


      另外,通过趣味性的视觉表现手法不断推敲动画设计,让Qzone的年轻用户不仅从心理上建立连接,在表现层也能感知到符合自身标签的趣味调性。


      5 趣味性的玩法升级


      除上文提到的彩带礼花以外,在击掌玩法升级过程中,我们也拓展了更多内容:


      给用户制造惊喜


      随着用户间反复击掌次数变多,粒?#26377;?#26524;会不断升级,并加入富有层次的入场效果;而且达到关键击掌次数的时候,会展示击掌的次数,通过用户的成就感?#21019;?#28608;其产生更多的击掌行为。


      Image title



      个性化的延展


      为了丰富手掌样式的选择,给用户提供更多样的体验,我们和增值团队一起设计了更多的手掌形式,同时引入一些IP形象,让击掌更能唤起用户的共鸣,也更加有趣。


      6 写在最后


      击掌这个功能从前期探索到上线和二次迭代经历了很长一?#38382;?#38388;,整个项目对设计师来说也是一?#38382;?#33719;满满的过程。


      创新?#37096;?#20197;是从1到N的过程


      创新并不都是从0到1从无到有的创新,尤其对于功能和框架体系成熟的产品,盲目的追求创新去改变用户的?#29616;?#21644;习惯是不妥的,从小的问题点着手去深挖和思考,找到合适的解决方案并打磨?#38468;?#32473;用户创造惊喜,以小博大去做创新也能达到四?#35762;?#21315;斤的效果。


      打磨?#38468;?#21019;造惊喜


      探索和挖掘到一个不错的想法之后,打磨?#38468;?#20063;是同样重要的,我们出了各种不同的击掌效果方案,去找到给用户惊喜和操作轻量的平衡,这个功能上线以后我们也一直在关注用户的反馈,从用户反馈中发现还可以做惊喜升级,从一个点出发,把这个点不断的扩充做的更细致和更加闭环。


      从生活中来,到生活中去


      击掌这个功能之所以有这个好的数据和用户认可度,有一个很重要的原因是因为本身这个行为和现实生活中的场景是相对应的,所以让用户能很快的理解和操作,符合用户真实场景的?#29616;?#25152;以学习成本比?#31995;停?#25105;们在做设计的时候用生活场景挖掘产品,能达到事倍功半的效果。

      腾讯ISUX

      It iS Ultramodern eXperience

      18418粉丝/3关注

      国民爱豆首页霸主“劳模勋章”之锄头勋章身经百战
      跨界设计 | 突破常规的设计思维 高效设计 | 云端库的工作方式
      6
      Alphabet

      你们只看到了腾讯的文章,没看到内容,然后跟风一波666 优秀 就是厉害 腾讯就是吊,这篇文章把点赞换成击掌,感觉就是很奇怪,我点个赞,来个击掌?

      精彩!

      扫描二维码
      去?#21482;?#31471;查看海报

      腾讯ISUX

      TA已经获得18枚勋章啦

      • 成就勋章

        • 特别勋章

        • 身份勋章

      • 已拥有

      • 作品

        创造者才是真正的享受者。

      • 经验

        经验是一所好学校,可它的学生却经常旷课。

      • 活跃

        大神都是从围观群众开始的

      • 拓展

        作品、经验、活跃还不能满足你?

      京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2019 UI.CN

      印度快乐8开奖号码
        <menuitem id="mh6do"></menuitem>

        
        
        <em id="mh6do"><ol id="mh6do"><mark id="mh6do"></mark></ol></em>
        <ol id="mh6do"></ol>
          <em id="mh6do"><tr id="mh6do"></tr></em>
          <dl id="mh6do"><ins id="mh6do"><thead id="mh6do"></thead></ins></dl>

          <sup id="mh6do"><menu id="mh6do"><small id="mh6do"></small></menu></sup>
            <menuitem id="mh6do"></menuitem>

            
            
            <em id="mh6do"><ol id="mh6do"><mark id="mh6do"></mark></ol></em>
            <ol id="mh6do"></ol>
              <em id="mh6do"><tr id="mh6do"></tr></em>
              <dl id="mh6do"><ins id="mh6do"><thead id="mh6do"></thead></ins></dl>

              <sup id="mh6do"><menu id="mh6do"><small id="mh6do"></small></menu></sup>
              青海十一选五 真正的香港六合彩网站 彩票辽宁35选7 进球彩app 篮球比赛比分直播捷报手机 全天极速3d彩票计划 胶州福彩中心电话 河北快三开奖走势图表跨度 计算双色球6个号秘诀 918时时彩票平台网址 湖北快三走势图表走势图分布图 自创六肖公式规律 福建11选5推荐预测 福彩360基本走势图 swlc上海福彩