布莱盲盒界面的UI设计毕业设计论文

本科毕业论文（设计）中文题目布莱盲盒界面的UI设计英文题目UI

Design

of

Bly

Blind

Box

Interface选题编号xgx230809016158系（部）专业学生姓名学号指导教师完成时间本科毕业论文（设计）绪论1.1研究背景随着时代的发展，盲盒营销开始逐渐火爆，一举激活了青年潮玩市场，在潮玩文化的今天，盲盒成了大众消费品，再加上目前移动端互联网的发展，网民的规模不断地扩大，人们的生活已经离不开手机，那么人们对界面设计的需求以及功能也在不断地改变，如今市面盲盒APP不断涌出，虽然功能丰富、大部分功能较为完善，但任不能满足用户的个性需求，据统计目前已经有44万盲盒玩家在闲鱼平台进行盲盒交易，要想设计出一款以用户需求，以人为本的线上盲盒界面设计，就需要设计交易板块和社区交流板块为创新突破点，同时还需要从运用简单微小的交互用于枯燥无味的界面中，能够实际增加界面的动态感。根据CNNIC发布的41—50次《中国互联网络发展情况统计报告》显示截止2022年6月，我国的互联网普及度已经达到了74.4%，较2021年12月提升到了1.4%，网民规模更是已经达到了10.51亿。2017-2022互联网普及率及网络规模增长情况如图1.1所示。图1.12017-2022互联网普及率及网络规模增长情况如今盲盒经济逐渐成为风口，移动互联网的高速发展以及人们消费模式的日益改变，在这种契机下，出现盲盒移动APP，即盲盒的移动销售APP，模拟线下的盲盒形式，是当今消费形态转变的产物，它使得用户可以通过手机应用程序快速便捷地获得自己心仪的盲盒产品REF_Ref696\r\h[1]。用市场上多数APP售卖多品类的盲盒产品，像元气玛特、盲盒玩家，并没有APP只针对盲盒潮玩IP形象周边的产品进行多种类系列的开发和营销。对于潮玩爱好者而言，盲盒内容物以二次元手办以及动漫游戏周边产品或者是泡泡玛特公司的盲盒产品更容易吸引年轻人注意，获得喜爱。因此，从下图中可以反映出用户在年龄、职业分布研究，可以看出，盲盒购买用户大部分为年轻群体，其中18~24岁群体占大部分，此为用户中多数职业为上班族和在读学生，这也说明了18~24岁的青年群体有着较大的消费需求和体验需求，喜欢尝试新鲜事物，是潜在盲盒用户的主力，因此主要针对年轻人进行界面设计。盲盒主要消费者年龄分布如图1.2所示。图1.2盲盒主要消费者年龄分布1.2国内外研究现状1.2.1国内现状国内盲盒及UI发展过程分为以下图1.3所示。图1.3国内盲盒及UI发展过程从2004年以后，随着手机，电脑附加软件，MP3等大量产品上市，ID设计就和UI设计越来越紧密，UI设计也开始被提升到一个新的高度和重视程度。比如国内众多大型的IT企业百度、腾讯、网易等科技型企业。都有UI设计部分和用户体验中心。2009年苹果公司正式把iphome带入中国，移动UI开始迅速地红火，至今国内的UI已开始大步的发展，2012年开始，开始重视用户体验，同时盲盒开始在国内出现，但大多数是国外的产品，2016年开始，UI界面设计开始进入沉浸式体验设计，增加了用户的黏性同时留住用户，也是盲盒营销发展的风靡时期。直到2020年开始，设计元素进入了多元化的阶段，再加上疫情的多种因素，致使盲盒也进一步从线下盲盒售卖转向了线上盲盒，小程序也开始一步步的兴起。1.2.2国外现状国外盲盒及UI发展过程分以下图1.4所示。图1.4国外盲盒及UI发展过程国外的盲盒及UI界面的发展比国内明显更早，从最从萌芽时期开始成为UI设计的开端，再到拟物化的时代，出现更重的浮雕阴影，最后到扁平风时代到至今依旧非常流行。再加上海外的盲盒市场发展，从2006年开始成立的奇谭俱乐部网站只售卖扭蛋系列产品到如今各种知名的手办、盲盒等产品，一步步从线下的售卖模式转向了电商平台的销售渠道，深受多数消费者的喜爱。1.3研究目的及意义从界面设计发展来说，手机已经成为了人们生活当中不可缺少的一部分，再加上如今生活节奏很快，没有谁愿意花时间在繁琐的手机APP上，当然UI界面设计在手机APP中具有非常重要的作用，因此APP界面的美观性从最基本的需求逐渐提高到满足心理需求REF_Ref12141\r\h[2]。布莱盲盒界面的设计最主要的目的是发现用户群体对社区交流的需求量也越来越高，目前因为玩盲盒人群扩大，盲盒可以说是新时代背景下扭蛋的进阶版。当代年轻人对于设计实际追求偏向于情感设计体验，趋向于精神补偿性消费REF_Ref13454\r\h[3]。对玩偶款式收集需求提升，盲盒也成了一种“社交货币”，成为进行社交的一个契机和驱动力，在年轻人中间成为独立的圈层。很多盲盒爱好者会加入一些盲盒交换群，会互相交流经验，把自己的盲盒玩偶进行各种造型并拍照“晒娃”或者是将多余的款式和别人交换或者售卖。于是在设计过程中，除了有盲盒抽取、商城购买另外还增加社区和售卖中心板块，并且为了激励和方便用户随时随地内容发布，所以把售卖中心功能里面触发闪电回收和发闲置按钮以大图标的形式展现。因此本项目的意义要简单化但要功能齐全，并且操作起来不要特别繁琐，在满足时代发展需求的同时，也更需要注重以用户的体验为中心。在设计制作前，就要从需求分析从而设计出具有功能性、趣味性、美观性、便捷性于一体的作品，以便更好地满足到用户的需求，达到以人为本的目标。它传递给大众最直观的信息感受，他的设计好坏将直接影响用户的感受和品牌的吸引力REF_Ref8101\r\h[4]。1.4本文研究内容1.3.1论文结构本文主要分为以下几个部分：第一部分是绪论部分，简要概述此项目的研究背景和目前的发展概况。第二部分是该系统使用的技术和工具部分，主要描述实现该系统所要用到的软件和关键技术以及可行性分析。第三部分是该项目的界面设计阐述，从总体设计到页面设计再到整体的色彩搭配和logo设计的模块设计。第四部分是该项目的动态交互设计，介绍整体界面动态点击部分。第五部分是界面设计的选题创意和设计创意的想法。第六部分是总结与展望，总结界面设计和在设计制作过程中的问题。1.3.2研究方法及手段1、文献研究法文献研究法通过查阅相关文献资料，为阐述我国盲盒发展和UI界面设计的发展现状以及差异，选取具有代表性的典型案例进行深入了解，并结合当前盲盒界面平台的特点引用其他学者的观点提供理论基础。2、案例分析法案例分析法通过选择一个参考界面从不同角度去分析界面的优缺点，得出现在盲盒界面设计可能存在的问题，以及有待改善的地方，让总结出自己的思路，使其更具实际意义。

2系统分析2.1可行性分析2.1.1经济可行性分析本界面设计的研发所需要使用的设计工具Photoshop+Illustrator+AdobeXD+即时设计等可从其官网下载，都为免费且开源的软件，而且此系统选用的开发模式成本相对较低。综上所述，该项目从经济上是可行的。2.1.2技术可行性分析本界面设计主要是以Photoshop作为主要界面开发工具，Illustrator为辅助画出矢量图组件支撑，可以设计出基本界面构架，在AdobeXD作为中转设计软件，转成XD文件进入即时设计设计交互，以及模拟样机状态，有了这些软件的支撑，设计出整体的界面不会存在风险和技术难题，综上所述，该项目从技术上是可行的。2.2需求分析2.2.1关键技术本项目界面设计主要运用photoshop、Illustrator为主要界面开发工具，交互动态设计使用AdobeXD、即时设计为主要交互动态工具。1、AdobephotoshopPhotoshop简称PS是Adobe公司旗下最著名的图像处理软件之一，它的主要特点在于处理信息能力“更高、更快、更强。”与传统的手工设计和制图软件相比，photoshop图形图像处理软件对信息处理的困难系数要求更高，可以解决更加复杂的信息REF_Ref2642\r\h[5]。PS有很多功能，在图像、图形、文字、视频、出版等方面都有涉及，其中Adobe支持Windows操作系统、Android与MacOS；其应用范围覆盖数码照片处理、平面设计视觉创意合成、数字插画创意、三维设计、网页设计、交互界面设计等几乎所有设计方向。2、AdobeIllustratorIllustrator简称AI是Adobe公司推出的矢量图形制作软件，从曲线工具、文字编辑、动态混合、文字编辑、动态混合、画笔工具等工具的不断完善，逐渐成为一款当今主流的图形图像处理的设计软件之一REF_Ref4454\r\h[6]。提供了丰富的素描绘功能以及舒畅灵活的矢量图编辑功能，能够快速地创建设计工作流程，其最大的特征就是钢笔工具的使用，使得操作简单功能强大的矢量图绘图成为可能。它还集成文字处理、上色等功能广泛的应用与平面设计、印刷出版、海报书籍排版、移动设备徽章、图标设计、VI设计、专业插画、包装设计、产品设计、多媒体图像处理和互联网网页的制作。3、AdobeXD、即时设计AdobeXD是一站式UIX/UI设计平台，在这款产品上可以进行移动应用和网页设计与原型制作。即时设计和Figma一样是在线协同设计软件制作动态交互设计。运用AdobeXD与即使设计相结合，可以把静态的界面设计成动态效果。他和AE这款软件一样，都可以用于创作动态图形和视觉效果设计软件，在影像合成、动画、视觉效果、非线性编辑、设计动画样稿、多媒体和网页动画方面都有其发挥余地，目前主要在影视后期制作以及设计、视频行业得到了普遍使用，具有音频回访、视频增强的特点，在系统内部引入了视频预览结构，从而实现了缓存音频的实时回放，并获得应用程序体验REF_Ref9418\r\h[7]。2.2.2竞品分析通过竞品分析分别对元气玛特、潮玩家、盲盒玩家、好物盲盒平台了解他们在产品定位，以及用户群体，如表2.1所示。表2.1竞品分析序号产品名称产品定位用户群体1元气玛特在线抽盲盒，潮玩购物热爱潮玩盲盒，同时有购物需求2潮玩家满足职场女性盲盒收集爱好者线上盲盒机热爱线上扭蛋和潮玩，同时有强烈收集和收藏爱好用户3盲盒玩家主打盲盒多种类在线开箱热爱潮玩，同时喜欢在线开箱的用户4好物盲盒随时随地多品类开箱、福袋，商城购物以及积分兑换好礼热爱潮玩以及喜欢开箱、福袋的用户通过竞品分析可以得知该界面产品的定位都是以在线抽盲盒以及商城购买为主，其次在用户群体定位也是对热爱潮玩盲盒和购物需求的用户主要群体，但从这些分析中，发现存在较多的问题，比如没有重视为用户的需求，人们对于交互界面体验提出了更高的需求。不仅要关注到界面操作的简易便利性，还必须要充分考虑到交互界面具有良好的人情味与趣味性，能够满足用户的精神文化情感因素需求REF_Ref3498\r\h[8]。因此在设计布莱盲盒界面时，不仅要保留各平台设计的基本功能，还要增加新颖的功能引起用户的兴趣和需求。接下来会详细地分析界面的主要模块和功能模块。2.2.3界面设计主要模块通过对布莱盲盒界面的整体分析，确定了主要受众群体是潮流的年轻人，如学生，上班族，潮玩爱好者等。本APP界面的整体设计为注册与登录、社区、售卖中心、盲盒机等。设计出一款以用户的为中心的界面APP，使用户能够在盲盒爱好者会加入一些盲盒交换群，会互相交流经验，多余的款式和别人交换或者售卖。本界面主要设计模块以注册与登录、首页、社区、消息、购物车、我的模块，布莱盲盒界面主要模块如图2.1所示。图2.1布莱盲盒界面模块2.2.3功能模块描述1、登录与注册登录与注册模块描述如图2.2所示。图2.2登录与注册模块2、首页首页模块描述如图2.3所示。图2.3首页模块社区盲盒产品就是其相对低廉的价格归属感最后是情感化的消费动机，设计一款具有社交属性的界面，会聚集拥有相同爱好的年轻人形成一种社群REF_Ref13638\r\h[9]；社区模块是最具有亮点的设计，描述如图2.4所示。图2.4社区模块消息消息模块描述如图2.5所示。图2.5消息模块购物车购物车模块描述如图2.6所示。图2.6购物车模块个人主页个人主页模块描述如图2.7所示。图2.7个人主页模块3布莱盲盒界面的设计3.1总体设计布莱盲盒界面设计结构图如图3.1所示。图3.1布莱盲盒界面设计结构图3.2页面设计3.2.1色彩搭配不同的用户在对待每一种颜色都会有不一样的色彩感受，良好的色彩搭配不仅能促使人们信息浏览的效率得到充分的提升。我们可以在APP界面上决定一个主色调，用几种辅助色彩和装饰色彩的反差来突出APP品牌调性REF_Ref19225\r\h[10]。在色彩搭配上选用以干净、青春、暖调的黄色系中的橙黄色#F19149为主色调，#946552棕色调为辅，以此突出盲盒应该带给用户新鲜的且较为中性的品牌调性，且配图统一采用高质量简约美图，使页面统一成轻量化设计，干净、简洁、温暖，活泼选取中性的辅助色#946552色调作为#F19149这一主色的点缀，突出自身的特点，再用#f4d9bc和邻近色#f6c8a6作为点缀营造出丰富的质感和层次，整体界面信息布局选择使用列表布局法、宫格布局法展示其内容，采用扁平风设计突出功能本身，是一款比较新颖、暖色为主，整体风格比较年轻化简介，色彩不仅具有审美价值，对人的心理具有重要的影响，色彩的变化可以引发人们对主观情感的能动反应，人们对不同色彩的感知也存在较大差异。通过设计提升用户使用率，极简的界面风格设计中，可以使界面主题视觉上更加清晰，一感官意义上，界面简单明了，使用用户的行为更直观，更易于操作。更能促进用户的活跃度，如图3.2所示。邻近色#f4d9bc辅色调#946552邻近色邻近色#f4d9bc辅色调#946552邻近色#f6c8a6主色调#F19149图3.2色调搭配图3.2.2名字设计布莱盲盒作为APP名称由来主要均是以自身的产品功能为用户提供服务，而布莱盲盒英文又叫bindbox谐音又与布莱相似，于是决定选择贴近主题与盲盒相关，因此取名为布莱盲盒，简单易懂。3.2.3logo设计大多数人听到盲盒这一词，就会想象到盒子，而且当你在抽取盲盒时候，需要精美的盒子来包装，因此logo以盒子为出发点，而在盲盒抽取前并不知道里面是什么，要拆开后才能看到里面是什么，所以将问号也将加入在创作灵感当中，其次是配色的理由，盲盒作为潮玩类，年龄基本集中在18~25岁男女青年，选择中性色，干净、简洁带给用户新鲜的品牌调性，也更能体现出布莱盲盒的理念。符合主题设计，与界面设计当中的元素紧紧联系在一起，设计说明如图3.3所示。图3.3logo设计图3.3原型图整体设计原型图整体设计如图3.4所示。图3.4原型图整体设计图在整体界面设计之前，会将基本的原型图构架基本设计完整，首先在设计过程中，要有明确的市场目标与定位，要符合时代发展的需要、当代人的消费观与内心需求。分析用户需求确定了功能模块以及相关内容，然后利用原型设计绘制出了布莱盲盒整体界面，接着根据功能模块和字体说明结合起来，并对所绘制的界面进行详细的优化，最后生成布莱盲盒的基本原型图。3.4整体设计界面3.4.1引导页在设计布莱盲盒引导页时选择使用功能介绍类并且将功能点浓缩成一句话并且以直观的动态图形来解释这个功能点和吸引用户的眼球，如图3.5所示。图3.5引导页界面展示图引导页简而言之就是文字信息之间的传递，文字是手机APP引导页表现形式中最基础的信息传递载体，也是最难把控的设计元素。简短的文字更易于引导页的信息传递，以文字信息传递为主的APP引导页设计表现形式，需要对引导页界面的文字进行优化，还可以通过文字字体的趣味性形态和排列组合方式让用户眼前一亮。引导页是出现在加载完启动画面之后、进入界面首页之前用户所见到的一系列画面，其作用是在用户使用APP之前提前告知该产品的主要功能特点，引导页跟随启动画面出现，也决定用户对该APP印象好坏做出判断。3.4.2登录与注册界面在产品设计过程中，如何根据产品的不同阶段、不同的产品目标、不同的群体定位、如何选择注册登录方式和设计注册登录程序，都不会有标准的答案。在这里用到了用户登录和注册，这部分包括两个子部分：其中一个为新用户注册，在这里可以通过多种注册方式，比如使用手机号验证登录，或者第三方登录，（QQ、微信、微博）注册之后享受更多的功能服务。另一个就是用户登录，其作用就是为用户提供安全的访问和数据操作，防止非法用户进入，有了登录自然要有注册，其实应该是相反的，现有注册才有登录，只不过注册通常是在登录模块的“登录”窗体下加的注册界面。在设计布莱盲盒登录与注册界面时，界面设计友好、美观，在进入登录与注册界面，并且易操作性，将登录和注册放在同一窗口，在用户需要直接登录时，只要输入之前注册过的信息就可以，可以选择密码登录或者验证码登录，同样注册在通过收集验证码登录之后设置自己的密码，如图3.6所示。图3.6登录与注册界面展示图3.4.3首页界面UI设计的首页设计是最重要的一个页面，是给用户传递产品信息、功能的首页页面，首页也是整个界面的风格定向和功能定向，首先是基础板块，设计手机顶部状态，第一部分状态栏是位于整个界面最顶部如信号、运营商、电池等信息，为了配合APP的设计风格，状态栏和标题栏都是融为一体。第二部分是搜索栏，用户可以在搜索栏输入需要的内容，可以快速查询到所需要的盲盒商品；第三部分是banner区，位于首页等信息集合页面中，展示数量为一张，减少用户错过一个就需要滑动多个才能找到，体验感不好。第四部分是金刚区，位于界面主界面头部搜索栏、主功能区以及Banner区下方，以图标+文字形式展示的多功能块状区域。第五部分是列表板块，设置特定的优惠专区，让用户能迅速找到自己的心仪板块。第六部分就是标签栏，让用户在不同的子任务当、视图和模式进行快速切换。工具栏设置了相应的5个图标，位于界面最底端。第七部分是模态弹窗，设置专属新人券领取弹窗，给用户一个醒目的提示如图3.7所示。其中首页金刚区功能部分模块包含盲盒商城、盲盒机、寄售中心、领券中心、每日签到、布莱会员、我的盒柜、积分抽奖、盲盒币充值、活动资讯功能具体如下。图3.7主页界面展示图1、盲盒商城界面在金刚区域上，点击盲盒商城直接进入商城页面，可以根据自己的喜好进行点击搜索选择自己喜欢的盲盒系列进行查看或者购买，同时商品分类让用户能够快速地来选择不同种类，范围栏也可以提前让用户通过范围来进行筛选，如图3.8所示。图3.8盲盒商城界面展示图2、盲盒机界面点击盲盒机图标，进入盲盒机界面，可以专属抽取只在盲盒机上新系列盲盒（概不在商城售卖）使用盲盒币或者抽奖券抽取，获得盲盒商品，最下栏显示其他系列盲盒产品，点击“换一批”用户可以选择喜欢的系列抽取，点击“查看商品详情”用户可以看到选中系列的所有盲盒款式，点击规则说明可以查看抽取规则，如图3.9所示。图3.9盲盒机界面展示图3、寄售中心界面进入到售卖中心页面，点击闪电回收或者发闲置可进行官方回收或用户之间的交易。同时右上设置订单可以查看自己在售卖中心的购买情况，可能回到是在原本价格的基础上翻倍溢价，因此当界面设定售卖中心让盲盒投资的性能为盲盒消费注入活力，发挥了间接影响作用；消息框可以收到发布闲置用户私信的聊天消息，而我的个人页面可以查看发布闲置文章数有多少，售卖中心界面展示如图3.10所示。4、领券中心界面用户点击金刚区进入领券中心，新用户如果没有通过主页弹窗领取新人优惠券，可以从领券中心领券新人优惠券以及每日限时秒杀限量优惠券，同时还有其他限品类款式系列优惠券，方便用户领取使用，领券中心展示如图3.10所示。5、每日签到界面点击每日签到图标进入，会出现签到日历框，每日签到会有2积分，连续签到3天会奖励10积分，连续签到10天得20积分，以此类推叠加，时间中断会重新再签到按第一天执行来留住客户坚持签到得积分，每日签到展示如图3.10所示。6、布莱会员界面点击进入布莱会员，可以查看会员卡等级情况以及专属布莱会员享有的特权和开通服务，以及每月会员可以领取优惠券，布莱会员界面展示如图3.11所示。7、我的盒柜在用户有使用盲盒币或者抽奖券在盲盒机抽取盲盒系列的产品当中所获得的商品，会显示在我的盒柜里，用户在通过点击我的盒柜进入界面查看所获得的商品，我的盒柜界面展示如图3.12所示。图3.10寄售中心、领券中心、每日签到界面展示图图3.11布莱会员界面展示图8、积分抽奖界面积分抽奖主要是用户在进入抽奖界面，设置每天三次积分抽奖机会，每天十点进行刷新，每次抽奖会扣除二十积分，通过积分抽奖可以概率获得大额优惠券或者积分奖励，还设计了我的积分界面可以快速查看到积分的收入和支出明细以及积分兑换等功能，积分抽奖界面展示如图3.12所示。图3.12我的盒柜、积分抽奖界面展示图9、盲盒币充值界面点击金刚区位置盲盒币充值图标进入界面，用户可以看到充值活动、盲盒币充值和抽奖券，用户可以根据自己的需求和喜好进行充值，充值活动为首要界面，吸引用户眼球，通过优惠充值盲盒币的活动方式，来让用户进行购买来抽取盲盒机的盲盒，盲盒币充值界面展示如图3.13所示。10、活动资讯界面点击活动资讯图标进入到活动资讯界面可以看到盲盒商城或者盲盒币充值的所有活动，用户可以快速查看当天或者当月的活动和优惠的活动资讯，给用户提供更快便携的页面设计，活动资讯界面展示如图3.13所示。3.4.4社区界面点击工具栏社区，进入子任务社区界面，设计推荐关注部分，让用户选择自己感兴趣的盲盒或者手办系列进行关注，还设置推荐文章，用户可以通过浏览文章进行关注、评论或者是点赞，可以和潮流玩家一起交流分享，社区界面展示如图3.14所示。图3.13盲盒币充值、活动资讯界面展示图图3.14社区界面展示图3.4.5消息界面消息界面用户主要设计了查看消息通知，例如社区对方评论提醒，或者关注私信提醒，互动消息就是用户在发布社区文章时，对方评论文章时，点击可以直接进入查看评论消息并且回复，通讯录在用户和对方用户互相关注之后，产生的联系人进行私信聊天。下方采用列表方式，使用户能够清晰地看到用户相互关注后发送的私信消息，或者是布莱盲盒系统推送的活动或者上新，点击就进行回复或者查看，消息界面展示如图3.15所示。图3.15消息界面展示图3.4.6购物车界面购物车页面可以看到筛选栏，查看加入购物车的商品，参数规格以及数量或者加入购物车的商品降价通知及商品的库存多少，在确定购买后，设计出提交订单的界面，用户可以进入购物车选中直接去结算下单付款支付成功界面，购物车界面展示如图3.16所示。图3.16购物车界面展示图3.4.7个人主页界面个人主页界面，主要设计了可以查看布莱用户账号名以及订单待付款、待发货、待收货、待评价、退货退款的详细订单，用户还可以看到优惠券数量，积分数量以及账户余额钱包等，在设置相应常用工具方便用户使用和查找，例如用户想查看商城商品浏览记录时，可以通过点击常用工具中的浏览记录就可以查询到想找的那款盲盒商品，个人主页界面展示如图3.17-3.18所示。图3.17个人主页界面展示图图3.18个人主页界面展示续图4布莱盲盒界面的动态交互设计4.1引导页引导页主要就是展示整体界面特色的功能，以及动态组件的点击，引导页的部分交互参数及交互连接线如图4.1-4.2所示。图4.1部分交互参数展示图图4.2部分交互连接线展示图引导页最终动态交互效果如图4.3所示。图4.3引导页动态交互效果图4.2登录与注册登录与注册界面主要是用户通过登录与注册点击进入主页，交互参数及交互连接线如图4.4-4.5所示。图4.4部分交互参数展示图图4.5部分交互连接线展示图图4.6登录与注册动态交互效果图4.3首页首页是用户登录注册后进入的一级界面，功能众多丰富的页面，也是动态交互点击设计最多的位置，比如主页新人领券弹窗模块，金刚区模块。此部分是用户登录后进入主页界面，新人领券图标会隐藏在右边位置，当用户点击后会弹出新人领券页，交互参数及交互连接线如图4.7-4.8所示。图4.7部分交互参数展示图图4.8部分交互连接线展示图主页及主页新人领券最终动态交互效果如图4.9所示。图4.9主页及主页新人领券动态交互效果图4.3.1金刚区功能模块金刚区模块部分交互连接线如图4.10所示。图4.10金刚区部分交互连接线图1、盲盒商城这部分分为商城页面，商城分类，商品详情，交互参数及交互连接线如图4.11-4.12所示。图4.11盲盒商城部分交互参数图图4.12盲盒商城部分交互连接线图盲盒商城最终动态交互效果如图4.13所示。图4.13盲盒商城动态交互效果图2、盲盒机盲盒机部分主要动态设计在盲盒机规则，盲盒机产品系列转换以及系列详情展示，交互参数及交互连接线如图4.14-4.15所示。图4.14盲盒机部分交互参数图图4.15盲盒机部分交互连接线图盲盒机最终动态交互效果如图4.16所示。图4.16盲盒机动态交互效果图3、寄售中心寄售中心部分动态设计以发布闲置文章为主，交互参数及交互连接线如图4.17-4.18所示。图4.17寄售中心部分交互参数图图4.18寄售中心部分交互连接线图售卖中心最终动态交互效果如图4.19所示。图4.19寄售中心交互效果图4、领券中心及每日签到这部分主要内容展示领券中心及每日签到的二级页面，交互参数及交互连接线如图4.20-4.21所示。图4.20领券中心部分交互参数图图4.21领券中心及每日签到部分交互连接线图售卖中心最终动态交互效果如图4.22所示。图4.22领券中心及每日签到动态交互效果图5、布莱会员布莱会员这部分主要是展现出会员卡等级以及会员整体特权开通的交互界面，交互参数及交互连接线如图4.23-4.24所示。图4.23布莱会员部分交互参数图图4.24

布莱会员部分交互连接线图布莱会员最终动态交互效果如图4.25所示。图4.25布莱会员动态交互效果图6、我的盒柜及积分抽奖这部分主要内容展示我的盒柜及积分抽奖的二级页面以及积分的详细信息，和领券中心每日签到一样，交互参数及交互连接线如图4.26-4.27所示。图4.26我的盒柜及积分抽奖部分交互参数图图4.27我的盒柜及积分抽奖部分交互连接线图我的盒柜及积分抽奖最终动态交互效果如图4.28所示。图4.28我的盒柜及积分抽奖动态交互效果图7、盲盒币充值及活动资讯这部分主要内容展示如上，和领券中心每日签到一样，交互参数如图4.29所示。图4.29盲盒币充值及活动资讯部分交互参数图盲盒币充值及活动资讯最终动态交互效果如图4.30所示。图4.30盲盒币充值及活动资讯动态交互效果图4.4社区社区这部分功能是最具有亮点的设计，设置了推荐圈子和文章界面的动效，交互参数及交互连接线如图4.31-4.32所示。图4.31社区部分交互参数图图4.32

社区部分交互连接线图社区最终动态交互效果如图4.33所示。图4.33盲盒机动态交互效果图4.5消息消息这部分功能包含消息通知，互动消息，通讯录，用户聊天，可以点击进入到三级界面以及聊天对话框，交互参数及交互连接线如图4.34-4.35所示。图4.34消息部分参数图图4.35消息部分交互连接线图消息最终动态交互效果如图4.36所示。图4.36消息动态交互效果图4.6购物车购物车这部分动态效果包含购物车商品，商品结算，支付订单，交互参数及交互连接线如图4.37-4.38所示。图4.37购物车部分参数图图4.38购物车部分交互连接线图消息最终动态交互效果如图4.39所示。图4.39消息动态交互效果图4.7个人主页个人主页包含设置、我的订单、优惠券、账户余额、浏览记录、商品搜藏，交互参数及交互连接线如图4.40-4.41所示。图4.40个人主页部分交互参数图图4.41个人主页部分交互连接线图个人主页最终动态交互效果如图4.42所示。图4.42我的动态交互效果图布莱盲盒交互设计首先从盲盒的设计考虑到用户的心理预期和惊喜感。增加随机性和设计限量的方式来增加用户的期待感和惊喜感，其次就是用户的体验，交互设计需要考虑的就是用户的体验，包括用户的操作流程、界面设计、反馈机制等。确保用户能够顺畅的进行操作；然后就是社区互动，社交互动可以来增加用户的参与度和忠诚度，因此设置文章发布、交流分享等功能让用户能够与其他用户进行互动和交流，最后总结了在交互设计中，要考虑注重盲盒设计、用户体验、社交互动可以增加惊喜感和社交互动来吸引用户注意力从而提高用户的参与度和忠诚度。5设计创意5.1选题创意布莱盲盒：在选题过程当中，首先会考虑年龄阶段定位，其次通过玩游戏后发现游戏界面是以抽取盲盒的界面设计瞬间引起兴趣，因此选择以盲盒为题材中心去了解其他APP盲盒界面的设计和查询资料，发现作为如今随着潮流文化的崛起和发展，越来越多的年轻人喜欢潮玩类的产品，同时也发现有的以盲盒形式清库存，因此在确定以盲盒题目时，主要与潮玩、IP形象、手办、虚拟人物的盲盒商品为首要定位，最后选择取名，为了选择简单易懂的名字让用户能够清晰记住，用盲盒的英文blindbox当中的blind中文和布莱相似，最后确定取名为布莱盲盒。5.2设计创意本设计主题主要为“盲盒”为主题，在与别的APP设计功能相同的有盲盒抽取、商城购买同时在自己的创意设计上加增加了社区，来满足用户群体对社区的需求，让用户可以通过社区进行互相交流经验，也可以对自己的盲盒玩偶或者是手办进行像朋友圈拍照“晒娃”，还可以选择自己喜欢的圈子进行关注和认识朋友进行互相关注私信，这样不仅可以增加用户的黏性，还可以提升产品的活跃度和用户使用的积极性。还增加了售卖中心可以让用户将多余的款式进行发布的形式和别人出售，或者是通过官方一键回收，在交易板块这部分可以有效地增加用户的积极性，降低用户在盲盒抽取购买时候的负面情绪，还可以提高用户的使用留存度。

6总结与展望6.1总结在此次做毕业设计中收获非常的大，从最开始的选题我就感到非常的惊慌失措，后来通过导师的指导下选择往UI界面设计方向，在选择好题目和题材，就需要开始设计，最开始没有一点头绪后来去即时设计、千库网等各种网页进行学习查看素材，多看多学确定界面配色和布局同时还购买了关于PS界面设计的书学习界面设计的规范，最终将界面整体基本构架设计完成（引导页、登录与注册、首页等界面），最后再用即时设计做移动动效制作，最开始对做动态软件非常的不熟悉和了解感觉会非常的麻烦，但还是努力坚持下来，通过关于界面设计动效的书以及观看哔哩哔哩软件上制作界面动效的课程，完成了布莱盲盒界面整体的动效制作。6.2展望首先是界面设计引导页最初想选择以动态IP形象动画的方式进入但是自身的能力有限，多次尝试仍然失败后来选择设计静态的引导页是比较遗憾的，后期在完善自己的能力后再多次尝试做出动态IP形象的引导页其次是对界面设计的规范了解还不够透彻，后期还要多继续学习不断地去完善布莱盲盒界面中字体、排版，以及页面内容。

参考文献乔磊.现有盲盒APP界面设计配色方案应用研究[J].流行色,2020,(10):79-85.WanqiuWang.InnovativeResearchonIllustrationApplicationsinAPPInterfaceDesign[C]//InstituteofManagementScienceandIndustrialEngineering.Proceedingsof20199thInternationalConferenceonEducationandSocialScience(ICESS2019).FrancisAcademicPress,2019:4.赵星晨,陈庆军.盲盒设计理念对文创产品的借鉴意义探究[J].包装工程,2021,42(20):6.房景丽.新媒体时代UI界面设计应用与发展研究[J].北京