<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
      备注:反馈问题后@管理员能让我们及时了解您的意见

      成长值达到300分以上才可以发?#21152;矗

      先看看别人的即刻>

      微云节日闪屏情感化设计

      原创文章 分类: 经验/观点 版权:
      11303 428 288 27
      更新于:2019-03-19
      99.6
      首页推荐


      情感化设计已经不是一个新概念,唐纳德·?#24503;?#22312;《情感化设计》一书中,清晰的阐述了情感化设计的重要地位与作用。现阶段,同类型的产品在功能、服务、内容上日益趋同,差异越来越小,想让产?#21453;?#21450;用户的内心,除了功能满足需求之外,也需要进行情感化运营。


      微云在不断完善基础功的同时,还基于用户行为,增加了许多情感化的体验,?#28909;?#24448;年今日、人脸相册等。在情感化运营上,微云在2018年开始了较为完整的节日闪屏设计,希望向用户传达节日的祝福,拉近产品与用户的距离。


      什么是节日闪屏?

      节日闪屏是指在特定的节日进行情感化设计、传递品牌关怀的闪屏。优秀的节日闪屏,在内容上不仅能够戳中用户的记忆点,也能够与品牌相融?#24076;?#36825;样既拉近了用户与产品的距离,也强化了品牌的?#29616;?#21644;记忆。

      Image title


      ?#33539;?#35774;计目标

      在开始设计之前,我们期望节日闪屏能够达到以下两个目标:
      1、传达节日祝福唤起用户回忆

      2、体现微云品牌调性


      不同的节日有不同的文化背景和风俗习惯,节日祝福可以结合最典型的特征,这样更有利于唤起用户回忆,后文会结?#20064;?#20363;进行分析。然而,品牌调性是在贯穿所有节日的,在设计之初,我们明确微云的品牌调性,这样更有利于品牌的传达。

      品牌调性研究

      Alan Cooper在《About face 4》中提到,在传达品牌调性时,可以用一组形容词来描述产品及体验,这些词可以组成词云,用来指导视觉设计。如何创建这组词云呢,Allan Cooper提供了四个方法:从品牌大纲提炼关键词、分析现有产品的界面和服务、分析竞品的界面和服务、收集用户反馈


      由于某些原因,微云暂时没有明确的品牌大纲,结合微云智能云盘的特征,我们主要从现有产品的界面和用户反馈两个角度进行分析,提炼符合微云调性的词云。

      Image title


      分析现有产品的界面

      微云的平台较多,包括WEB端、PC端、移动端、小程序等,其中WEB端和移动端的用户最多,就从这两个端入手,分析产品界面的品牌特征。从结构布局和从色?#26102;?#20363;上,可以归?#38378;?#31471;的共同点:结构清晰、留白较多、简约干净。

      Image title


      分析用户反馈

      微云用户在职业分布上,白领用户占最大;结合使用场景分析,用户反馈最多的词是:轻量、方便、下载快速。

      Image title


      提炼微云品牌词云

      结合产品界面“结构清晰、留白较多、简约干净”的特征和“轻量、方便、下载快速”的用户反馈,我们提炼出适合描述微云品牌的词云:简约、干净、留白。



      如何做一个节日闪屏?

      接下来就以劳动节闪屏为例,从节日特征?#25512;?#29260;调性两个维度来阐述节日闪屏的设计过程。


      节日特征

      利用穷举法,筛选最典型的节日特征。

      Image title

      微云是一个工具化的产品,旅行/度假更适?#19979;?#34892;类产品,劳动/休息与微云更契合。结合产品功能,定了两个方向,第一个是“五一不劳你动,微云帮你整理?#20445;?#19982;备份照片功能结?#24076;?#31532;二个是“劳动光荣?#20445;?#20984;显节日气氛。以下是一些草图方?#31119;?/p>

      Image title


      品牌调性

      前面三个方案重点在于功能的表达,把用户目光吸引到场景上,内容丰富,但可能造成用户在3秒内无法明白画面主题;方案四重点在于气氛的表达,关注人物?#36866;攏?#35282;色正在辛勤的劳动,直接点题,场景只起烘托作用。结合“简约、干净、留白”的品牌调性和“唤起美好回忆”的品牌期望,我们选择了氛围方向进行深入设计。


      主题?#33539;?#20043;后,就开始进行优化设?#23631;恕?#22260;绕着关键词,采用扁平化的设计手法,在色彩搭配上,由于劳动节没有明显的色?#26159;?#21521;,故?#20113;放评?#20026;主色调,橙色来源于产品图标,作为辅助色提亮整体画面;在页面排版上,保持大面积的留?#31069;?#31616;约清爽。

      Image title


      小结

      劳动节闪屏上线后,我们进行了复盘,我们希望微云的节日闪屏给用户传达的是“你的珍贵回忆微云帮你记录”这样的小心思,而不是“我们有xx功能”之类的广告,所以在以后的节日闪屏中,我们会更加倾向节日?#36866;?#24615;的表达;视觉风格则采用简约、干净、留白的方式,重点?#24576;?#20154;物?#36866;攏?#19981;在场景上过多渲染。

      按照这个思路,我们完?#23631;?#20854;他的节日闪屏设计。


      母亲节闪屏

      母亲节是一个西方节日,在这一天,孩子给母亲送?#30340;?#39336;来表达?#32422;?#30340;爱意。在节日?#36866;?#19978;选择了最具代表性的孩子给母亲?#31361;?#30340;场景。

      Image title


      端午节闪屏

      一提到端午节,就会想起粽子的“甜咸之战?#20445;?#21487;见粽子在端午节的重要地位,所以端午节的节日?#36866;?#23601;围绕粽子展开,三个好友齐心协力包粽子。

      Image title


      七夕闪屏

      牛郎织女,?#30331;?#30456;会,是七夕节的?#35272;?#20256;说,这一天情侣相聚,相互表达爱意。七夕?#36866;?#23450;格在情侣相会的?#24067;洌?#22899;生飞奔向男生,在银河上翩翩起舞,表达久别重逢的喜悦。

      Image title


      中秋节闪屏&圣诞节闪屏

      中秋节?#36866;?#20027;题是合家团圆、赏月?#21592;?#22307;诞节?#36866;?#21017;以?#27010;?#20108;人齐心协力装?#38382;?#35806;树为主题。

      Image title

      (备注: 圣诞节最?#25307;?#26524;?#21152;闪?#19968;同事绘制)


      所有节日闪屏合集
      Image title



      输出节日闪屏规范

      节日闪屏除了?#36866;?#24615;的表达之外,在设计上我们也输出了一部分规范,用来把控风格的统一。


      配色规范

      色?#39318;?#20026;用户最容易感知的部分,使用时与品牌相呼应,主色与辅助色均来源于产品图标。有明显色彩属性的节日,以节日固有色为主,?#28909;?#26149;节红色,中秋黄色等等;无明显色彩属性的节日,可以?#20113;放评?#20026;主,强化品牌印记。

      Image title


      角色规范

      我们希望重点展示的是人物的珍贵回忆,基于此,我们设?#23631;?#19968;批角色,讲述角色的?#36866;攏?#35753;用户产生代入感。为了保证统一性,我们制定了人物的细节规范,包括觉额色?#39134;?#27604;=1:9、服装款式以休闲为主、服饰颜色与品牌色呼应等。
      Image title

      在设定好人物细节规范之后,我们也完?#23631;?#35282;色资源库,方便后期在其他场景的应用。

      Image title


      场景规范

      在场景设计上,我们以简洁,明确为主,场景主要起烘托人物?#36866;?#30340;作用,而不进行过多的渲染。



      拓展场景的使用

      做了一系列闪屏之后,这些插图和角色并没有闲置,我们在线下挖掘了一些新的使用场景。这些素材被重新利用起来,变身为办公?#19994;?#35013;饰?#19968;?#33829;造出一个充满品牌气氛的办公环境。

      Image title

      Image title

      Image title



      总结

      2018年微云希望通过节日闪屏的情感化运营,给用户传达节日关怀的同时也强化微云的品牌?#29616;?#22312;后续的规划中,我们希望节日闪屏不仅仅只是单方面的给用户传递关怀,还能够和用户互动,实现更深层次的情感交流,?#28909;?#28857;击节日闪屏,跳转到往年今日,帮助用户回忆起以往的美好回忆,增加用户粘性。2019年微云会继续给大家传递节日的祝福,也会不断探索新的闪屏设计风格,敬请期待~



      原文链接:https://mp.weixin.qq.com/s/2BgTOZ9q1BJQVLgMFDaliw


      我是飞天兜

      140粉丝/9关注

      首页新秀
      CAD自学?#22987;恰猄UMMER IS COMMING
      2
      U8home

      页面是简介,留白多。 但是,情感化不够

      精彩!

      扫描二维码
      去手机端查看海报

      我是飞天兜

      TA已经获得1枚勋章啦

      • 成就勋章

        • 特别勋章

        • 身份勋章

      • 已拥有

      • 作品

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

      • 经验

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

      • 活跃

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

      • 拓展

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

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

      Cw9sdfed

      朕收下了
      印度快乐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>
              辽宁快乐12任3预测推荐 北京赛车pk10有无赚钱 3d和值 浙江快乐12预测 极速飞艇彩票官网 新疆11选5走势图360 福彩中奖店老板拿多少钱 湖南彩票 山西快乐十分钟开奖走势图 【高调照片】单双中特 天津快乐十分预测结果 体彩甘肃11选5开奖结果查询结果 排列三跨度走势图3d开 ag真人视频 七星彩走势图表带连线图标