<option id="7m6je"><span id="7m6je"></span></option>
<menuitem id="7m6je"></menuitem>
<tbody id="7m6je"><div id="7m6je"></div></tbody>
    1. <track id="7m6je"></track>
      <nobr id="7m6je"><optgroup id="7m6je"></optgroup></nobr><nobr id="7m6je"><optgroup id="7m6je"></optgroup></nobr>
    2. <nobr id="7m6je"><optgroup id="7m6je"><big id="7m6je"></big></optgroup></nobr>
      <bdo id="7m6je"><optgroup id="7m6je"></optgroup></bdo>
      header_v1.7.40

      品牌设计探索-让品牌融于应用之中

      36天前发布

      原创文章 / 多领域 / 观点
      腾讯ISUX 原创,如需商业用途或转载请与腾讯ISUX联系,谢谢配合。

      It is ultra experience

      DOV BRAND DESIGN




      项目概述

      ——————————

      2017年短视频产品爆发,有别于一般短视频产品,DOV主要讲求透过短视频记录生活,并且将短视频分享给熟人关系链好友,透过短视频本身作为媒介达到社交的目的。目标族?#22909;?#30830;的定位在于高中以上的年轻族群。设计的任务除了基础的体验之外,更应该将分享生活的轻松感以及时下年轻人的生活态度结?#29616;?#20135;品之中,藉由视觉的手法提升用户的记忆与认同。


      本次DOV的品牌设计在基础UI已具备的条件下,上线前两周经过讨论,以QQ family中人气最高的多福熊作为吉祥物,品牌LOGO也沿用了多福的形象,为了有更全面的品牌感受,本次DOV品牌的设计包含了LOGO、吉祥物、图形系统、动效系统、常规运营规范等?#21462;?/p>



      回顾DOV品牌设计,主要可分为提案前准备、图像系统设计、界面控件优化、动效主题铺陈、运营规范制定?#20219;?#20010;环节。





      一. 提案前准备

      ——————————

      以两周含开发还原的时间来说,完成全?#35838;?#20010;步骤不切实际,故上线前必须至少完成图像系统设计以及界面控件设计的层?#25105;?#30830;保用户体验的完整。在时间有限的情况之下,提案前准备至关重要,好的准备可以避免走弯路,?#37096;?#20197;将时间精准的?#24230;?#22312;创意之中。


      首先提案前准备阶段是关键页面的选择,以及明确设?#21697;?#21521;。


      1.1 提案关键页面选择


      提案关键页面的抉择有几个要点:


      1.高效率:若要提高效率则不能在任何地方浪费设计资源(人力、时间),品?#21697;?#26684;提案建议在3帧画面以内,免去不必要的工作量,除此之外,三帧画面也?#19988;?#21160;端設計在PPT上?#25925;?#26368;理想应用空间的帧数。



      2. 高检视:必须确保方案的呈现上可以概览日后延展的各种可能,以品?#21697;?#26696;阶段为例,必须兼顾图像与UI的协调、大面积?#25925;?#26102;的效果、以及最小限?#26085;故?#26102;是否还能?#26377;?#21697;牌的感受。在DOV提案中,设计选择?#21496;?#26377;最大面积展空间的Login场景,保证最好的视觉效果可以被检视,其次选择资料卡,验证图像与UI面积各50%时的协调性,最后选择消息列表,确认即使几乎没有图像辅助是否还能?#26377;?#21697;牌感受。




      1.2 明确设计目标


      设计的内容必须为目标服务,DOV的slogan为无乐不作,目标族群为18-25岁一线城市年轻人,故视觉风格一方面朝向年轻人群中较顶端的潮流族群为主,另一方面则向大众流行的风格作尝试。设计团队此次刻意简化方向,不做太多的关键字发散想象,原因在于虽然关键字发散想象虽然有帮助于设计师勾勒大致感觉,但没有被收敛或是没有被二次形容、亦或者没有被类比为图像的关键词基本上无法形成共识,过长的发想时间也?#29615;?#21512;互联网公司的敏捷特质。敏捷和明确是DOV品牌设计的前提。




      二. 图像系统确定

      ——————————

      完成了设计前准备,后面则是图像系统确定的阶段,此阶段分别是风格发散以及设计细节的挖掘。


      2.1 风格的发散



      多人提案的过程中如果没有明确的共识往往会难以发挥,单纯的定义方向往往会造成设计师们重复设计路线或者命题太广导致难以下手的问题,所以本次DOV团队采用容器+内容的设?#21697;?#25955;方式。所谓容器,即是指常用的基本视觉原理、设计?#35760;?#31561;等归纳出可能的设?#21697;?#24335;。视觉原理与经典的设计手法能比?#29616;?#25509;地引起用户视觉心理上的主观反应,具有强且纯粹的视觉冲击力。所谓内容,则是属于可以象征DOV目标人群的符号,这些符号往往透过符号学中的定锚效应让用户有更深层次的认同感。


      除此之外,此次提案也使用极?#30830;备?#30340;原则。在众多社交产品中,过度干净纯粹的设计在当下各种日益娱乐化手营造视觉氛围的竞品app中已经难以取得优势,且一些朝向年轻化或是潮流化的时尚品牌或者艺术家近年来也大量的使用极繁的手法来影响设计的走向,这是一个趋势。


      透过容器+内容的设?#21697;?#24335;,可以简单的提炼出可能的手法。如下:



      经由这些设?#21697;?#24335;的组合,顺应设计的目标,?#21202;?#22823;众化的口味以及潮流的风格分别有以下五组方案。


      方案A:利用简单的等比级数分割画面,在画面切割的模组内填入潮流中常用的斜纹、X?#30830;?#21495;,形成稳定肌理之后再与DOV熊作形态上大小的对比,营造精致?#39029;?#20987;力饱满的画面。




      方案B?#21644;?#36807;反覆的方式在画面背景中铺陈稳定?#19994;?#33410;奏营造热闹的社交氛围,另外透过前方特写的多福形成强烈对比,制造出强?#19994;?#35270;觉冲击感吸引用户目光。




      方案C:同方案B利用对比的手法塑造视觉冲击感受,同时简化了DOV的形象并带入了类似潮流公仔翻玩造型内材质的手法,兼顾了品?#21697;?#21495;的印象也带入潮流氛围。




      方案D:利用具有涂鸦手感的字体设计手法填满背景,透过字体形塑潮酷的氛围,背景前景以资讯量多?#36873;?#38754;积差异?#30830;?#38754;做对比处理,形成有态度且丰富的画面感。




      方案E:将潮流中常用的X符号与多福熊做组合,安排在等比级数分割的框架之中形成?#19979;?#20043;美,同时部分元素加上了潮流常用的流光材质,让DOV的意象完全与潮流形象贴合。




      最后方案整体全览如下,在跨度上包含了潮流与大众流行,透过拦访验证,左起2、4、5方案也受到了用户明确好评,反馈,但基于4、5的用户好恶较极端,?#39318;?#32456;选了方案2作为DOV的主视觉。




      2.2 设计细节挖掘


      整体品?#21697;?#26684;定案后,选择用户在体验过程中最高频的下拉上滑场景以及必经的登录流程中植入?#23454;埃?#22312;上线前以有限的精力内用最小的设计?#24230;?#25442;得最多的精致感以及情感传递。





      三. 界面调性重塑

      ——————————

      大面积的图像氛围以及体验路径上必经的关键点品牌化之后,界面本身的品牌调性也必须跟进,让静态的平面上达到图像与界面最大的契合,此次DOV分别在界面的造型以及界面的效果做调整。



      3.1 造型统一


      造型上统整了所有界面的轮廓,以大?#27493;?#21628;应了图像系?#22478;?#21644;的特质。




      3.2 效果统一


      效果上一致采取?#21496;?#26377;Y轴偏?#39057;?#25237;影,透过营造漂浮层次过程中减少过硬的线段分隔,达到亲和的特质。






      四. 动画主题铺陈

      ——————————

      除了图像元素以及控件元素外,由于动画可以透过结合品牌印记、动效曲线、情节设计等部分,形成令人有记忆点并且愉悦的效果,所以在品牌化的过程中是为画龙点睛的环节。





      4.1 动效曲线


      UI操作的场景之下,DOV利用了特别的动效曲线,将减速度的时间延后,加上?#23454;?#30340;位移塑造动效快速到位且有惯性回弹的果动感效果,让整体的氛围高效?#35270;?#39640;趣味性共存。






      4.2 品牌印记


      一般动效主题大多止于动效曲线,而DOV则除了共同的动效曲线外,融入了品牌吉祥物以及更生动活泼的?#36153;?#22411;变,让动效的记忆点更加鲜明。





      4.3 情节设计


      除了令人有记忆点的动效曲线以及融入品牌识别的形变,动效本身因为具有时间轴的特性,在?#23454;?#30340;场合中可适度加入简单的动作情节,让APP的氛围更轻松有趣。(备注:DOV1.2.1版本后已无消息列表下拉刷新)





      五. 运营规则制定

      ——————————

      APP本身具有完整的视觉品牌调性之后,对外的一切宣传与运营也需要让用户有固定的?#29616;?#36879;过制定通用的运营专用字体、以及通用的辅助图形,明确定义可发挥区域,让DOV运营设计品质事半功倍,且?#30475;位?#21160;都可以?#30001;?#29992;户对DOV的印象。


      5.1 DOV运营字体


      DOV运用“造字工房素白“字体,取其圆润且适合用于标题的特性大幅减少?#30475;?#36816;营情况都需要重新写标准字的困扰,另外边?#23548;?#19978;立体画的手法,让DOV运营字体体量更充足,更有冲击力。



      5.2 DOV运营图形


      DOV运营场景拥有专属的monogram pattren,除了可以让背景丰富以外,每个单元都可以?#21202;?#36816;营的需要替换,由此去保证共同的设计手法。





      六. 设计总结

      ———————————

      品牌化设计在过去往往发力于Logo、吉祥物、以及部分线下场景的组合运用,这类组合体现品牌传播效果上?#38901;?#19981;足,但若能全盘铺陈线上落地的场景,严格把控设?#21697;?#21521;,不仅可以设计在多人协作的情况下轻松的把控一致调性,更可以让软件本身以及运营项目?#20013;?#30340;强化用户记忆与设计的效率。 DOV上线后经历了两次大改版以及精简视觉设计师的?#24230;?#19979;仍保持同样的气?#23460;?#21450;配合产品高效的产出,证明了方法的可行也保证了后续设计体验的一致。让用户从应用中各个场景体验到品牌精神,可能将会是品牌化设计的重要趋势。


      Ps. 下面是DOV APP的二维码链接,?#38431;?#22823;家下载体验!






      感谢阅读,以上内容均由腾讯ISUX团队原创设计,以及腾讯ISUX版权所有,转载请注明出处,违者必究,谢谢您的合作。


      587

        文章信息

        • 文章标签

        没有新消息

        提示文案

        提示文案

        提示失败
        提示成功
        全年无错六肖中特论坛

        <option id="7m6je"><span id="7m6je"></span></option>
        <menuitem id="7m6je"></menuitem>
        <tbody id="7m6je"><div id="7m6je"></div></tbody>
        1. <track id="7m6je"></track>
          <nobr id="7m6je"><optgroup id="7m6je"></optgroup></nobr><nobr id="7m6je"><optgroup id="7m6je"></optgroup></nobr>
        2. <nobr id="7m6je"><optgroup id="7m6je"><big id="7m6je"></big></optgroup></nobr>
          <bdo id="7m6je"><optgroup id="7m6je"></optgroup></bdo>

          <option id="7m6je"><span id="7m6je"></span></option>
          <menuitem id="7m6je"></menuitem>
          <tbody id="7m6je"><div id="7m6je"></div></tbody>
          1. <track id="7m6je"></track>
            <nobr id="7m6je"><optgroup id="7m6je"></optgroup></nobr><nobr id="7m6je"><optgroup id="7m6je"></optgroup></nobr>
          2. <nobr id="7m6je"><optgroup id="7m6je"><big id="7m6je"></big></optgroup></nobr>
            <bdo id="7m6je"><optgroup id="7m6je"></optgroup></bdo>