基于AR+的智能包装设计

2019-09-11 18:52靳芙蓉韩若冰李治刘琳琳
今日印刷 2019年8期
关键词:农夫山泉控件菜单

靳芙蓉 韩若冰 李治 刘琳琳

包装案例的选择

从哪种包装产品适合应用增强现实技术的角度考虑,快消品无疑是最佳选择,进行市场分析之后,本文以农夫山泉矿泉水为例。

该产品通过专业的游戏开发引擎Unity和Vuforia SDK进行Android端的App开发。最终,用户通过下载开发出来的软件、借助智能终端设备扫描产品包装识别图便可呈现声音、动画、视频以及与产品进行交互,在这个过程中,用户不仅了解了产品信息且获得了更真切的体验,从而让这个无生命的产品赋有活力。

整个产品的开发之初,最重要的工作是进行安卓环境的搭建,简化后的步骤大致如下:

①搜索与电脑系统相适应的JDK版本,下载并进行安装。

②为之前安装的JDK设置系统变量环境。

③下载并安装Android SDK。

④在Edit-preference中进行相应环境变量参数的设置。

对该包装产品的研究有两个核心点,一个是增强现实技术,另一个就是包装产品。这种技术应该嫁接在什么样的包装产品上是一个值得深思的问题。基于快消品全面展示产品信息,增强用户的体验性等原则,农夫山泉的开发设计逐步实现了如下3个层面:

第一,用户扫描识别图之后可以听到关于产品的语音介绍,通过宣传视频深入了解产品理念。

第二,通过一些小游戏或者简单的触摸、旋转等实现交互功能。

第三,借助大数据获取用户信息,实现双向识别,并为用户提供可行的建议和指导。

此外,在进行包装产品的选择时,尤其要避免进入“伪需求”这一陷阱。嫁接了AR技术的包装产品,其目标用户是消费者,尤其是年轻的消费者,在开发的过程中必须始终站在消费者的视角满足他们的需求,如此才能得到他们的青睐,做好增强现实技术这个“催化剂”。

农夫山泉产品的开发思路设计规划分为如下四步:

第一步:明确最终目标为获取apk文件。

第二步:市场调研与分析,确定包装产品的主题。

第三步:内容的规划与设计。富媒体资源的收集与分析、处理(包含用Adobe Photoshop处理图片,用Coreldraw制作农夫山泉的微量元素矢量信息标签,用拍大师剪辑视频,用视频下载王进行视音频转码,用音乐汇錄制音频等)。

第四步:测试运行与打包apk文件。Unity提供打包文件前的调试环节,如果这里出现任何问题或漏洞,可以及时帮助开发人员解决,避免软件下载到客户端之后才发现问题。

功能的实现与API方法的运用

Unity中所实现的交互效果,控制视频、音频的播放都是通过给物体添加组件Component实现的,而其中的大部分功能都是通过添加script脚本,编写代码实现的,比如场景跳转、返回菜单按钮、音频播放、视频播放等。

Vuforia SDK支持视频、动画的播放功能,更新后的新版本自带相应播放组件,不再需要在官网上额外下载并导入视频播放插件。在Unity中播放视频前需要创建电影纹理,与音频组件类似,电影纹理要正常使用也必须绑定到新创建的New Render Texture中,并在Videoclip中拖入需要播放的视频,当然也可以在GUI中播放,只是效率相对较低。新版本的软件支持MP4、MOV等格式的视频,不需要在外部进行繁琐的格式转换。

UGUI界面设计

1.UGUI基础控件介绍

在整合了G U I系统的部分功能后,UGUI的系统菜单中总共包含16个控件,可以简单分为EventSystem、Canvas(画布)、Panel、Text、Button、Image、RawImage7个部分,当然也可以将其自由组合成功能强大的复合控件使用。本次设计中使用到的控件包括Canvas、EventSystem、Text、Button、RawImage和Panel。

①Canvas画布控件:该控件是最基础的容器类控件,我们使用的所有其他控件都是它的子对象,也都是建立在该控件之内的。

②E v e n t S y s t e m控件:负责管理UI界面总体事件。

③Text控件:也叫文字控件,即控制文本内容的特性显示。

④Button控件:就是我们常说的按钮,包括文字和外观两部分,分别由Text和Image负责。

⑤Panel控件:即面板控件,常用来设置菜单背景灰度的一片区域。

⑥RawImage控件:是负责显示图像的专有控件。

本次设计中只使用RawImage控件而未使用Image的原因在于:前者是一种非交互仅显示的组件,后者则是用来交互显示的组件;另外, RawImage可以显示任何格式的纹理,而Image仅用来显示sprite精灵纹理。本次UI界面的设计是静态的且由于纹理的格式比较多,因此选择RawImage更加方便、简捷。

2.UI内容的设计

用户界面的好坏直接关系到这款软件的质量与档次,一般的UI设计师都经过专业的训练,具有一定的鉴赏能力和美术设计功底。农夫山泉产品的UI设计部分是将一些基础控件进行整合使用,让每一场景的界面设计看起来不过分呆板,符合用户的使用习惯。

在功能方面,采用了大量的Button控件,有效实现了交互效果。设置面板Panel的灵感来自于一款游戏的界面。在设计每一个界面时紧紧围绕着产品——矿泉水这一主题,在颜色的选择上反复斟酌,最终以清新的蓝绿色定为基本的基调,与实际的大自然山间环境相契合,每一个界面的颜色种类不多于3种,避免太过于花哨。语音介绍界面采用文字标签的形式介绍水中富含的微量元素以及pH值的范围,详细、简洁、一目了然,见图1。

AR+农夫山泉产品的场景

农夫山泉实现的功能:显示不同的UGUI界面,通过不同的按钮控制6个场景的跳转,不同的场景包含不同的富媒体资源,包含视频、音频、游戏、文字、标签等,以及静态的显示用户信息(因为技术问题尚未实现大数据与unity之间的动态传输)。不同场景的详细介绍如下:

场景一:主菜单。背景中的云朵、灰山、绿山、稻草以及背景色的渐变都是在Asset Store下载的2D贴图,通过构图设计形成这种野外大自然的效果。以蓝绿色为基调主要是映衬水质源于大自然、天然健康。在标题的下方是一个无声水滴动画,与产品主题相匹配。灰色面板中设置了“听一听”“看一看”“关于你”“玩一玩”4个按钮,点击可跳转至相应界面。

场景二:本场景“听一听”的设计主要是详细向用户介绍农夫山泉矿泉水的基本信息,一开始伴有录制的语音并且循环播放,用喇叭样的贴图做以语音播报提示,见图2。本页的创新之处在于给实景矿泉水包装上添加了矢量标签,每100g水中其微量元素如钠、钾、铝、镁、偏硅酸等的含量,让用户一目了然。为了保持矢量标签的分辨率,它的制作在CorelDraw软件中实现。左下角的返回主菜单按钮可方便用户反复选择。

场景三:本场景“看一看”主要是自动播放一个关于农夫山泉水源取自大自然的宣传广告。讲述了一个名为肖帅的水质检测员取水的经过,虽然路途艰辛但他喊出了那句“我们不生产水,我们只是水的搬运工”的口号。通过这个视频可以让用户对饮用水的水质与来源更加放心,更加理解与支持农夫山泉的品牌理念。

场景四、五:本场景“关于你”是获取用户信息并根据用户的体质情况提出合理的饮水建议与指导,见图3(a)。4个不同人物的布置寓意各种不同的用户,右边黄色指示牌上设计了一个可控按钮“点击有惊喜”,用户点击之后可以跳转至另一个场景,见图3(b)。该界面向用户详细介绍了矿泉水、山泉水、矿物质水、纯净水、蒸馏水这5种水的基本成分,以及是否适合长期饮用的建议。

场景六:即游戏场景。在商品同质化、缺乏差异化的今天,AR增强现实技术的游戏化营销手段是博得青少年喜爱的不錯的方式,基于此,专门设计了“玩一玩”场景,增强体验性与趣味感,见图4。该场景主要设计了一款简易的小游戏,(a)(b)(c)(d)场景依次是游戏的开始、游戏进行中、中途退出、重玩或返回主菜单。游戏时,点击屏幕可控制游戏主角兔子的跳跃方向(上、下),从而躲避炸弹,吃到的金币数量越高获得分数也就相应越高。

小结

基于增强现实的农夫山泉产品的软件开发,改进了以往在选择包装产品时的盲目“伪需求”的不足,从而选择了比较吸引广大消费对象的快消品——矿泉水。在产品高度同质化、缺乏差异性的今天,创新元素越多越能获得消费者的青睐。

猜你喜欢
农夫山泉控件菜单
中国新年菜单
本月菜单
你会关闭农夫山泉的广告吗?
ASP.NET服务器端验证控件的使用
Spreadsheet控件在Delphi数据库系统中的编程与应用