第 4 章 乐乐果汁的课题实践应用
通过上述对网页中交互设计和用户体验的分析与探讨，本章笔者就前文所总结出的一些理论知识、设计方法作为依据，运用到自身毕业设计的课题实践中。
此次的课题研究主要是针对乐乐果汁所做的一个官网设计。乐乐果汁是笔者主观构想出的一个橙子口味的水果饮料，它的每一滴果汁都是经过鲜榨而来，不添加任何防腐剂、色素，是一款天然、富含丰富维生素的营养品牌。针对产品强调原汁原味、健康好生活的特点，整个设计以一个活泼、可爱、欢乐的卡通人物“乐乐”作为产品形象代表贯穿始终，以乐乐果汁网站设计为中心，并由此衍生出了其移动端宣传页面、海报、饮料瓶包装、杯子等一系列设计。
如图 4 所示，为网站设计的流程分析图。在进行乐乐果汁的官网设计时，首先，要根据网站的目标用户群体来进行网站定位，确定网站的整体风格；其次，要对网站各个模块间的关系进行梳理，确定网站的板块布局、页面间的层级关系，并绘制出草图；最后，确定网站的交互方式、交互步骤，实现网站界面。
4.1 网站定位与用户分析
乐乐果汁作为一个崇尚健康、时尚、活力的果汁饮料，其产品的目标用户定位为广大积极向上、朝气蓬勃的年轻人，受众群体年龄范围大概在 12 岁到 25 岁左右。他们拥有着一双追梦的翅膀，不惧困难、不轻易认输；他们时时处处都散发着青春的气息、永远的正能量满满、积极向上、充满活力。网站的目的，是对产品进行有效宣传，意在向目标用户传达出产品健康、自然的生活方式，让更多浏览者了解产品的最新动态、最新活动以及产品的生产地址与联系方式，透过网站最终加深产品在受众群体心中的形象地位，打造一流的品牌理念，使产品在时下众多果汁饮料品牌中具有强有力的竞争优势。
4.2 网站的整体规划及草图的绘制
要想使产品在同类产品中具有极大的竞争力，其官网的设计必须有与众不同之处，要能够具备独特的亮点与特色。不同于一般的产品介绍，乐乐果汁网站的整体规划更多的从满足用户情感诉求的角度出发，将产品健康、自然、时尚的特质淋漓尽致的投射在主人公“乐乐”身上，以拟人化的手法，生动的描述着乐乐一天的健康生活，以此更好的树立产品的品牌形象。乐乐在笔者的塑造下，被赋予成了一个热爱生活、喜欢挑战、活力四射的小大人，他喜欢阳光、运动和音乐，很容易得到开心与满足，向往着自由自在的生活。由此，可确定网站的整体风格是偏活泼类型。因而，在构图上，网格约束率较低，偏向于更加自由的表现方式；在色彩上，饱和度普遍偏高，网站以主人公乐乐人物形象中的橙色、黄色为主色基调进行色彩规划，其运用更加丰富；在文字上，以能够体现乐乐人物性格为根本，其字体偏向于卡通、玩味的书写方式，意在创造出既有趣又生动的画面，以此来迎合市场目标用户的需求。
通过以上分析，绘制出网站界面的手绘稿，如图 4.2 所示。通过手绘稿，明确网站页面间的层级关系，粗略的确定网站各个板块的位置、页面中所包括的元素、内容以及大致的交互操作步骤等。
4.3 网站界面及交互设计的呈现
如图 4.3.1 所示，根据手绘稿实现网站的高保真界面。纵观界面效果图，其特色在于对网站整体氛围的营造。乐乐果汁的官网设计紧紧围绕着主人公“乐乐”
健康、活泼的个性进行展开。当用户打开网站，伴随着页面中欢快背景音乐的响起、可爱产品形象的出现，此时，访客就如同置身于主人公“乐乐”的快乐庄园之中。明快靓丽的色彩、灵活的版式、扁平化表现手法的运用使得页面中时时处处都洋溢着阳光、幸福的氛围。整个网站的亮点在于对“我的故事”子页面的设计上。该子页面采用叙事的方式，以幽默、风趣的表现手法，讲述了乐乐热爱生活、热爱运动、热爱阳光、热爱音乐的四个场景故事，也由此彰显了乐乐果汁产品优质健康、纯天然的特质。同时，该子页面在动态效果的展示上，也别有一番乐趣。页面中云彩和大海浪花的呈现都是在循环往复中永不停息地做着水平运动，这样通过页面中部分元素运动、其他元素静止的方式，能够营造出强烈的视差对比，使得页面中故事情节的视觉感更加真实、生动--热气球仿佛在空中飘动、冲浪板似乎在海中前行。另外，在热爱音乐的场景叙述中，音箱伴随着页面中的背景音乐，在无间歇的重复放大和缩小，而音符的色彩也在明度上不停的发生着变化，以此给用户展现出了一幅有趣、欢乐的景象。在页面制作上，整个网站全部依附于 css3 语言进行动态效果的实现，而没有用任何一个 GIF 动画，大大减少了网站的内存使用，提升了网站访问时的速度和效率，为做好网站优化、促进用户体验的最大化获得做足铺垫。
在网站交互设计上，大多为图形界面上的交互，主要表现在导航、音乐播放器的安排上。由于该网站主要用于对产品的展示与宣传，所以页面中也较少的涉及到数据的交互，唯一的一个涉及数据交互的例子就是问卷调查页面。在网站的首页中，导航栏的设计打破了传统中规中矩的表现形式，以一系列彩色的圆圈将网站细分为“我的故事”、“品牌家族”、“联系我们”和“近期活动”四个部分，当访客用鼠标触碰每个部分的对应区域时，相应的圆圈会迅速变大并上下跳动，这样的动态效果明确的提醒了用户其当前的所在区域以及即将执行的操作行为，也在某种程度上增加了网站交互的趣味性。当用户用鼠标进行点击后，网站由主页迅速跳转到相应的子页面，用户也可以点击子页面右上角的关闭按钮，以快速返回到主页中去。其次，页面中的背景音乐也是可以控制的，音乐播放器的设计被固定在每个页面的右侧区域，方便用户及时进行暂停或播放的操作。在“近期活动”子页面中，推出了用户参与问卷，享受产品优惠的活动，用户通过填写下面五道问题，在最后一栏中留下自身的联系方式--邮箱或者电话，点击提交按钮后，将以上信息返回到数据库。后台程序将会自动把优惠券信息以邮件或短信的方式发送给用户，以此来鼓励更多的用户积极参与到对乐乐果汁产品的满意度调查之中，倾听用户的心声、了解用户的评价。在广大用户群体的帮助下，做到真正从用户的角度出发，不断进行产品优化，提升产品的用户体验，以赢得更多受众群体的喜爱。
