浅析数字化时代3d元素在视觉设计中的运用

　　3D英文全文是“Three Dimensions”，当前一般将其叫做“三维”。和只有长、宽的平面，也就是2D进行比较，三维主要包含长、宽、高三部分，简单的说，是立体的。一般状况下，大众所了解到的物体都是以三维立体形态出现，其颜色、光泽等外部质感和内部相对复杂的结构与物体之间的运动关系，都相对丰富、类型众多。人的视网膜感受到的物体一般是二维，其中感受三维空间关系一般依赖双眼间距产生的视差。一般成人两眼相距是6.5厘米，查看立体物象的时候，双眼感知出现差异，两种视像在视网膜上无法全面重合。双眼信息通过大脑加工合成，就形成立体视像，人就可以辨别远近、深度[1]。

　　另外，由于大众现实生活的空间是拥有多个维度的，现实世界带来的直接感受与日常经验促使我们产生视觉习惯、空间定义与思维模式。因此，我们一般会把出现在二维空间内的图像主观给予其三维立体空间观，其一般是由于大脑习惯性地把视觉信息自主改变成我们日常了解的三维空间。总之，和二维物象进行比较，三维立体的物象涵盖大量的视觉信息，也会给观者留下较为清楚的印象。

　　伴随信息科技的持续发展和使用，当前3D一般表示基于电脑端数字化的3D技术，也就是三维数字化。此科技催生出全新的视觉形态,已然成为一种趋势趋势，在影视、游戏、建筑设计中都已得到广泛运用，而今三维风格也慢慢地影响到了平面设计。也就是说，3D风格视觉形态的出现与使用，肯定会对之前的平面广告设计行业产生重要的影响,此外也会为其增加全新的动力。

　　其中扁平化是和三维化对立的表现手法，既将物象二维化，从古埃及特色鲜明的壁画、中世纪欧洲的宗教画，到文艺复兴时期人物画的光影表现，从2010年以前平面设计盛行的拟物化风格，到2013年iOS7开始采用扁平化设计后扁平化设计的大为盛行，再到近几年由于VR、AR技术发展而重新开始流行的色彩渐变风格和3D化视觉表现。人们的审美趋势似乎亦步亦趋地跟随着科技的发展，螺旋式、循环往复地上升着。总体来说，近些年的3D风格设计回潮，与发展至瓶颈的扁平化设计不无关系，人们尝试在大面积色块的基础上加上渐变、阴影，抑或是使用3D软件进行视觉表现设计，都使得原本略显呆滞与冰冷扁平化设计变得更加温暖、人性化，这不得不说是一种突破。

　　目前,3D形态的视觉风格或相关元素表现方式，开始深入影响与进入到平面设计作品中，变成此后设计的重要方向，对其的使用也会持续深入和宽泛。依靠设计者的智慧和强大的想象力，创造具备艺术价值的3D风格视觉元素，且把其使用到平面艺术设计中，是相对高效、方便的技术方式。

　　随着当今快速发展的信息时代，信息技术逐渐打破了我们对标志表现形式传统意义上的理解。传统平面的Logo已无法满足未来品牌的市场竞争需要和用多媒体方式的传播需要。根据对全球最近几年的设计分析，可以预测到设计界中立体设计将很长一段时间是主力军，追随着这个发展时代的脚步，引领这个时代的潮流。

　　现代科学技术发展迅猛，标志的传播已不再仅仅是以往传统的印刷媒介，而是转向利用显示设备进行传播，比如显示屏、视频输出设备等。视觉设计的发展方向必然是新技术、各种媒介相结合，因此现在更多的设计师开始尝试运用计算机等多媒体工具，在进行标志的设计时会更加注重对品牌理念、设计形式、传播媒介等方面进行创新,充分满足人们各种需求的多种感官享；在表现形式上不再是呆板的简约造型，更加注重艺术性和表现性，出现了动态、三维立体的多形态的设计发展趋势,满足了不断改变的受众的审美观念，准确、清晰的将标志的独特及自身寓意表达出来，使得标志更轻松被识别，这是设计行业带给观众的一次视觉大改革。

　　立体视觉化设计仅仅是为标志设计开创了一个全新的方向，引领人们向新的未知领域探索和发展。将来的标志设计必然会向全方位、系统化、综合性的方向探索，也一定会是综合性的视觉盛宴。正是如此，标志设计也由从最初充满质感的写实性表达，到以二维抽象构成图形为主的标志，再到近几年包含二维标志、三维标志、动态标志等多种形式同时存在。当今数字化时代的标志，不再是过去乏味呆滞的扁平风，而是添加了美妙的光影与渐变，用全新的形式强化了标志在二维平面中的视觉表现，加强了标志的亲和力，拉近了与受众的距离，仿佛让人触手可及。

　　在标志设计中，所谓3D形式是指通过不同的表现与处理方法，呈现出立体效果的标志。标志的三维表现形式可大致分为两类，一类是在二维几何图形的基础上通过赋予其光影、材质、冷暖色彩、透视原理、矛盾空间等与空间感紧密相关的因素，使其产生纵深感和空间感；另一类则是直接运用3D软件进行设计和制作，其实质就是三维立体图形，当今软件科技的发展，尤其是3D软件的发展与应用，给标志的设计带来了新的概念，使得标志立体化，动态化的设计能够现实。

　　2016年巴西里约奥运会的会标，如图2.1，由巴西本土著名的塔蒂尔工作室创作设计而成。此会标的主体为三个线条优美的人形图案构成，并结合柔和的色彩渐变使得光源所投影的绿、黄、蓝三色展现在三个人性之上，同时把光影的对比融入其中，从而设计出一个较之中国奥运会和伦敦奥运会标志更为空间感更强的标志。由此可见，这现代化背景下的标志设计中，色调和光线两个因素的三维视觉研究与应用，对于空间感的构成及表现尤为重要。

　　从色调可以看出，蓝、绿、橙三色均被运用于里约奥运标志及会徽，这恰恰与巴西国旗颜色和其国家队的服饰相对应。中奥会标的制作，将徽标的主体图案用两个折叠的分别巧妙的赋予浅绿色和深绿色的色调构成的心型结构组成，在这里采用了色调的明暗搭配手法。与之前14年的巴西世界杯相比，本届奥运会的标志在公布的同时展出了3D实体模型，比起之前愈加强调了在于实体空间的观感，显得更加完美。也正是因此，奥运会标志得到了良好评价，奥委会xxxx罗格对此连连称赞。上述更关注二维空间的光影立体会徽以及附属实物模型在奥林匹克历史上也是第一次，且超过巴西世界杯会徽，肯定会刺激其余种类标志设计的丰富想象和探索思索。[2]

　　诞生于2014的《奇葩说》国内首家多人辩论脱口秀节目，由于节目嘉宾们独特的视角和犀利的观点，受到了诸多年轻人喜爱。栏目主要目标是寻找华人华语世界中，特征明显、口才出众的“最会说话的人”[3]。在播出之后就得到良好播出效果，设计师为《奇葩说第二季》栏目组设计了一个有趣而不同寻常的三维标志（图3.2）。此三维标志是由3D软件制成，由于电视栏目标志的特殊性，通常是在数字屏幕而非纸质媒介上出现，首先考量的是在第一时间用新奇而强烈的视觉语言抓住观者的视线。这款标志采用了明度和纯度特别高的紫色系与粉色系，同时运用了青色、黄色这样与之相反的颜色，再加上强烈的光影效果，标志整体视觉冲击力特别强。同时作为一款栏目的标志，设计师也充分考虑了标志的延展性，标志上的各种卡通形象可以作为装饰雕像出现在舞台上，丰富了整个舞台的视觉观感，显得特别有趣而年轻化，非常符合当代年轻人追求的个性、新奇、有趣的审美，在加上有趣而富有话题性的节目内容，一起造就了《奇葩说》，成为当年的爆款节目。

　　运用了3d元素的标志与以往标志的最大区别在于其表现形式标新立异、别具一格，使得标志易于认识和记忆，对于观众的吸引力更强，从视觉的延伸层次信息化背景下的现代标志设计中立体视觉的研究与应用给予人们满足感。立体标志设计无法阻挡的发展趋势，得益于软件功能的不断增强、人们对世界欣赏的苛刻需要、传播媒体的快捷便利。

　　样机，为检验设计或预案的科学性与正确性，或生产可行性而生产的样品[4]，目前平面设计行业一般表示将材质、光影赋予标志、包装、画册等二维的设计内容，模拟出其在展示空间中、承载媒介上的表现。使用样机进行标志的展示有三个好处：

　　1、降低与客户的沟通成本：由于客户是非专业人士，对于设计师所设计的

　　内容、无法有太直观的认识。为了便于理解，设计师必须将二维、平面的设计内容立体化、三维化，使其产生空间感、景深感，模拟在真实场景的成像，以方便客户对于设计内容的评估与进一步给出反馈。

　　2、降低设计印刷工艺的试错成本：平面设计师在设计过程中，时常得考虑到使用烫金、UV等印刷工艺。相比于制成印刷实体，使用展示样机进行印刷工艺的模拟，其试错成本和时间成本更低，便于提高设计师的工作效率。但是样机对于印刷工艺的模拟并不能完全等同于现实中的实际效果，如果客户在精度、工艺方面有特殊要求，还需使用真正的印刷实体。

　　3、提高标志展示效果的美观程度：设计师在对客户提案的时候或者将设计作品发表到设计网站的时候，使用样机模板能使设计作品的质感和格调得到充足的提升，显得更加美观大气。

　　通常情况设计师会在千图网等国内网站上下载并使用通用的样机模板，但是并不是每个都特别使用与设计师所要求的，遇到这种情况，设计师会选择自行制作展示样机模板，一种是使用Photoshop、Illustrator等二维设计软件进行光影和材质的模拟设计，另一种是使用三维软件建模的方式，并将其渲染出来。虽然第二种方法制成的样机展示相比之下会更加真实，但由于三维设计软件与二维软件存在一定的差别，其学习成本较高，并非所有的设计师都会选择这种方式来制作标志的样机展示。

　　针对这一情况，Adobe公司于2017年10月18日在拉斯维加斯召开的Adobe MAX 2017创新大会上，除了推出拳头产品Photoshop、Illustrator等设计软件的更新版本之外，更是推出了一款名为Dimension的三维设计软件（如图3.1）。如同官方所宣传的一般，软件可以创造高质量、逼真的3D图像，让2D与3D素材合成完整的场景更为容易，可以根据适合的灯光、景深、材质和其余特点，让上述多种组合得到良好的效果。Dimension界面简单、操作方便（如图3.2），解决了二维设计在三维物料上的呈现这一痛点，设计师们能快速上手使用软件，大大提高了设计师的工作效率。

　　H5是HTML 5的简称，HTML是HyperText Markup Language的缩写，中文译超级文本标记语言，属于一种规范和应用，其利用标记符号来标记需要展现的网页内的多个部分，是前端工程师给浏览器下发指令的语言。HTML 5是于2014年发布的HTML的第五个版本，具体内容与本文关系不大，在此不展开讨论。

　　而在国内的语境下，H5通常是指以商业用途为主的、基于HTML5的交互网页应用。下面列举部分普遍的商业应用场景[5]：

　　1、微信H5：当前HTML5应用相对频繁的形式，因为手机移动端无法支持Flash，其中HTML5在动画展现与交互上大致能满足公司需求，此外由于微信的不断支持，HTML5网页被当做营销方式被全面使用，营销圈将其叫做H5。

　　2、户外大屏交互解决方案：基于HTML5技术的户外大屏技术，支持多屏拼接和多点触控，不仅降低成本，还方便了内容更新。

　　3、PC HTML5广告：在Flash时代过去之后，HTML5将取代Flash作为网页动画广告的首选。本文所指的H5是第一种，微信H5，近年特别常见的营销广告方式。

　　有数据表明，自2016年开始，由于新增用户减少，而导致互联网红利渐渐消失。越来越多的进场企业间进行的是用户存量竞争而非增量竞争，所以企业遇到的困惑是营销成本增长的问题。而微信H5互动广告作为一种新兴的广告形式，它具有开发成本低，受众接受度较高等优势，因此成为了企业经常选择的新的营销方式。

　　目前，广告开始从“传播信息”发展成“体验信息”，参加、个性、时效性等感性因素在广告传播、沟通中彰显更加关键的现实作用。互动广告，其和传统广告“灌输式”被动传播模式不同，主要使用主动“进攻”的模式。此类广告主要表达方式具备的特点是利用用户和广告的互动，提升受众的参与感，进而提升受众对品牌的认知度和好感。对这种交互体系的设计，让H5的传播手段愈加地丰富，其应用的范围也随之变得广泛。微信H5依托于微信这个国民级的社交平台，只要广告本身足够新奇、有趣、吸引人，人们便会乐于将其分享至朋友圈，成为一个爆点，进而引起刷屏热潮，给广告主带来足够的曝光度与好感度。

　　以互动方式来分类的话，H5一般可以分成四类：基于传感器、基于触摸屏操作、基于画面呈现。这种分类方式并不是绝对的，四类之中继续划分成不同小类，实际使用中可使用1种，也可以多种类别组合起来使用。接下来进行全面叙述：

　　1、基于传感器：手机上的传感器主要包含陀螺仪、GPS、摄像头、麦克风、震动传感器、光线传感器等多个部分。

　　2、基于触摸屏操作：在触摸屏上的操作具有众多互动模式，比如单屏滚动、手势操作、全景交互和多屏互动等。

　　3、基于画面呈现：通常是表现一段具有乐趣的、技术含量高的画面，比如视频、动画、特效，让使用者产生视觉上的冲击，使用者也能利用和画面内容互动，查看个人需要的内容。

　　通常来说，运用到3d元素的H5设计，一般以第一种和第三种互动方式为主。这类H5的制作成本一般比实拍视频类的H5低一些，同时使用3D元素也可以实现一些比较华丽的视觉效果。下面展示的两个案例具有比较典型的代表意义，体现了3d元素在H5中最常见的两种运用，互动游戏与VR虚拟全景。

　　去年10月，SK-II为主打产品“神仙水”推出了其新款——改写命运宣言限量版神仙水。设计师团队受到时趣互动邀约，为此限量版产品社设宣传H5——SK-II宣言博物馆（图4.1）。“宣言神仙水”依照SK-II宣言涂鸦总共被划分成三款，设计师将“博物馆”当做着手点，主要设计不同的展示场景,搭配对应的文字，表现出三款宣言涂鸦。此H5在设计上增加了更多的交互操作，特别是第二个场景增加需要使用手机陀螺仪时时交互的游戏关卡。用户在紧跟文字引导的时候，利用对应操作筹集宣言涂鸦，在上述时期用户操作和最后呈现的宣言建立因果联结,进而促使用户对宣言内容的了解与认知更加深入。美术层面主要将白色当做基调，使得色彩鲜艳的涂鸦宣言更加凸显，力图创造一种“五彩斑斓”的白。

　　2018年3月的杜蕾斯AIR爱情薄·物馆（如图4.2）不同于15年杜蕾斯“液体主义美术馆”所表现的情爱的高潮，这次展览的主题内容是“爱情”，选择使用了线上VR展加上线下巡展同时发力的模式，从不同方位诠释“爱的厚度，可以很薄”这一主旨。在H5虚拟馆中，用户可以随意走动，选择展台上14种物品中的任一款，进入后点击页面的“Play the story.”，听取此物品身后隐藏的普通却不平凡的爱情故事。从陌生人、同学、朋友、同事..最后变成恋人乃至家人，14个爱情故事，对应的都是厚重的爱。在商店中，用户可挑选雨伞、雨衣等物品，进去之后出现按钮，指导用户分享或者步入京东杜蕾斯秒杀日页面。页面看起来简单直接，没有复杂的修饰，把用户的眼光汇聚到展览的展品上，用真挚的语言表达展品背后的故事，以及所传递给用户的细腻情感。

　　其实3D元素在H5的运用除了以上据的例子之外，还有更多的玩法，例如配合明星制作一个酷炫的H5视频等等，画面与内容相适应，能够准确且有趣传达所需信息给受众，才是H5互动广告的目的所在。

　　随着互联网的发展与普及，电子商务这一新兴行业也如雨后春笋一般进入人们的生活中。2017年“天猫双十一全球狂欢节”单日的交易额冲破1682亿元，由此可见，如今网购已成了人们生活中不可分割的一部分，人们消费习惯已逐渐从实体店转移到了电商平台，与此同时有越来越多线下品牌企业也开始进驻天猫、京东等平台，试图在电商平台上分得一块蛋糕。

　　近些年，电商平台上的促销活动越做越大、越做越多，大到电商平台天猫的双十一、京东的618等的“造节”活动，小到单个品牌的线上活动“超级品牌日”，不无是通过运营上的优惠促销、设计上的独特视觉来吸引人们的注意力，以达到提高产品销售额和品牌知名度的营销目的。而顾客在进入品牌的电商页面之后，第一时间注意到的就是促销活动的主视觉，因此，主视觉的设计作为视觉营销的一部分，其重要程度便不必多表。

　　根据对于网购消费者年龄分布的调查表示，网购的主力人群是年轻群体。在高强度的工作、快节奏的生活至于，年轻群体显得个性鲜明、对于新事物的接受程度高。正是由于这些因素的存在，使得他们在闲暇之余浏览品牌电商页面时，更喜欢风格具有气质灵动、活力充沛、新颖有形且色彩明快的电商品牌。但也因此对于电商品牌视觉形象的要求也越来越高，但如果电商主视觉设计过于繁杂或者过于简单且缺乏设计感，无法在第一时间吸引受众的眼球，从而导致浏览的跳失率上涨。

　　十九世纪末期,芝加哥学派建筑师沙利文清楚指出“形式追随功能”(Form Follows Function)的观点，其表明建筑物或物体的形状应主要与其预期的功能或目的相关[6]，这句话运用在电商设计上也是十分合适的。电商页面的设计风格、整体调性要符合品牌的形象、气质和定位。关于网站的风格问题，XSimple Flame企业网页开发高级工程师Patrick McNeil在自身所撰写的系列《网页设计创意书》中汇总出11种当前网页设计的重要风格，包含：扁平化设计、反扁平设计、3D设计、极简风格、超级头版、黑板风格等多种类型[7]。近期在在天猫、淘宝和京东三家国内第一梯队电商平台上，越来越多地出现了使用3D元素的视觉风格，摒弃以往的扁平化设计及轻质感设计手法，引领了一股新的设计潮流，受到了为数众多的品牌方们的青睐。

　　而在这众多3d风格的电商设计中，设计师们几乎都是使用了Cinema 4D这款3D软件来实现设计的，甚至于在电商设计领域，C4D成为了3D风格的代名词，受到了大量的设计师的追捧。究其缘由，作者认为无非三个原因：一、相比于之前的扁平化设计风格，3D风格类型的设计多了光影、材质等因素，显得更加的酷炫和有趣，视觉冲击力显然不可同日而语；二、C4D软件本身功能强大、上手容易且渲染质量高，可以用3D图片代替实体摄影，降低了制作成本；三、国内设计平台上，头部设计师对于相关优质设计内容的分享，吸引了诸多追随者。

　　电商设计从广义上来说包括电商平台网站设计、品牌店铺页面设计、活动专题页设计、商品详情页设计、Banner设计等等，而3D作为一种视觉冲击力很强的设计风格，最多被运用在活动专题页设计的头部banner中（如图5.1）。

　　图5.1，电商活动专题页设计，图片来源：http://www.uisdc.com/c4d-in-e-commerce-design

　　3D作为电商的视觉输出可以有很多种风格与感觉，是一种可塑性极强的视觉风格，3D元素在banner设计中一般可以分为四种类别：

　　1、3D字体设计：这是一种最常见的3D风格的banner类型，由于电商活动页设计是时效性非常强，一个banner从活动策划到输出上线的时间特别仓促，而3D字体设计拥有强烈的视觉冲击力的同时其制作难度相对其他类型比较低，常常作为Banner视觉输出的优先考虑。天之眼作为国内知名的终端品牌，其聚划算活动页显得充满了酷炫的科技感

　　2、搭建3D场景：这也是一种Banner类型，与3D字体设计相比，通过3D建模的形式搭建一个品牌视觉形象显然更有挑战性、耗时更长、难度更大，但是这种方式输出的视觉形象显然更加饱满而耐看、充满细节。正如小米天猫超级品牌日的banner，上面陈列了众多的小米产品，点击可以直接进入每个产品的详情页，整个画面显得特别地温暖、女性化。（如图5.2）

　　3、3D与摄影相结合：这种类型的Banner设计也可以分为两种：一种是用建模形式搭建商品展示场景，并与商品的摄影图片相结合（如图5.3）；一种是以摄影图片为主，3D元素作为装饰性的元素出现，此类Banner摄影图片一般以模特为主，用3D元素来增添整个画面的设计感。

　　4、添加了交互、动效的banner：这种类型的banner一般和上面的几种类型相结合，在添加了交互或者动画之后显得更加的引人注目、提高受众的兴趣。

　　近年来电商的迅猛发展是不争的事实，由于网上售卖价格是公开透明的，对于商品质量和价格都相近的商品而言，要想吸引住消费者的注意力，电商的视觉设计的作用更是不可低估，甚至可以说视觉是消费者网购的前提，一个不重视视觉设计的电商品牌，绝不是一个优秀的电商品牌。无论是3D风格或者扁平风、复古风等等视觉风格，如何在充分展现电商品牌形象、气质的前提下，设计出能够第一时间抓住消费者眼球的设计，是电商设计师们需要努力钻研的课题。

　　[1]郭瑶，基于2D图像的3D化研究与应用:[硕士学位论文].上海：东华大学，2013

　　[2]毛明琪，信息化背景下的现代标志设计中立体视觉的研究:[硕士学位论文].湖南：湖南师范大学，2015

　　[3]奇葩说，百度百科，https://baike.baidu.com/item/奇葩说第一季/16950230?fr=aladdin

　　[4]样机，百度百科，https://baike.baidu.com/item/%E6%A0%B7%E6%9C%BA/2656562?fr=aladdin

　　[5]H5是什么，知乎，https://www.zhihu.com/question/30363342

　　[6]form follows function，wikipedia，https://en.wikipedia.org/wiki/Form_follows_function

　　[7]Patrick McNei1著，王沛译，《网页设计创意书》，第1版，北京：人民邮电出版社，2015