本科畢業(yè)論文（設(shè)計）中文題目布萊盲盒界面的UI設(shè)計英文題目UI

Design

of

Bly

Blind

Box

Interface選題編號xgx230809016158系（部）專業(yè)學(xué)生姓名學(xué)號指導(dǎo)教師完成時間本科畢業(yè)論文（設(shè)計）緒論1.1研究背景隨著時代的發(fā)展，盲盒營銷開始逐漸火爆，一舉激活了青年潮玩市場，在潮玩文化的今天，盲盒成了大眾消費品，再加上目前移動端互聯(lián)網(wǎng)的發(fā)展，網(wǎng)民的規(guī)模不斷地擴(kuò)大，人們的生活已經(jīng)離不開手機(jī)，那么人們對界面設(shè)計的需求以及功能也在不斷地改變，如今市面盲盒APP不斷涌出，雖然功能豐富、大部分功能較為完善，但任不能滿足用戶的個性需求，據(jù)統(tǒng)計目前已經(jīng)有44萬盲盒玩家在閑魚平臺進(jìn)行盲盒交易，要想設(shè)計出一款以用戶需求，以人為本的線上盲盒界面設(shè)計，就需要設(shè)計交易板塊和社區(qū)交流板塊為創(chuàng)新突破點，同時還需要從運用簡單微小的交互用于枯燥無味的界面中，能夠?qū)嶋H增加界面的動態(tài)感。根據(jù)CNNIC發(fā)布的41—50次《中國互聯(lián)網(wǎng)絡(luò)發(fā)展情況統(tǒng)計報告》顯示截止2022年6月，我國的互聯(lián)網(wǎng)普及度已經(jīng)達(dá)到了74.4%，較2021年12月提升到了1.4%，網(wǎng)民規(guī)模更是已經(jīng)達(dá)到了10.51億。2017-2022互聯(lián)網(wǎng)普及率及網(wǎng)絡(luò)規(guī)模增長情況如圖1.1所示。圖1.12017-2022互聯(lián)網(wǎng)普及率及網(wǎng)絡(luò)規(guī)模增長情況如今盲盒經(jīng)濟(jì)逐漸成為風(fēng)口，移動互聯(lián)網(wǎng)的高速發(fā)展以及人們消費模式的日益改變，在這種契機(jī)下，出現(xiàn)盲盒移動APP，即盲盒的移動銷售APP，模擬線下的盲盒形式，是當(dāng)今消費形態(tài)轉(zhuǎn)變的產(chǎn)物，它使得用戶可以通過手機(jī)應(yīng)用程序快速便捷地獲得自己心儀的盲盒產(chǎn)品REF_Ref696\r\h[1]。用市場上多數(shù)APP售賣多品類的盲盒產(chǎn)品，像元氣瑪特、盲盒玩家，并沒有APP只針對盲盒潮玩IP形象周邊的產(chǎn)品進(jìn)行多種類系列的開發(fā)和營銷。對于潮玩愛好者而言，盲盒內(nèi)容物以二次元手辦以及動漫游戲周邊產(chǎn)品或者是泡泡瑪特公司的盲盒產(chǎn)品更容易吸引年輕人注意，獲得喜愛。因此，從下圖中可以反映出用戶在年齡、職業(yè)分布研究，可以看出，盲盒購買用戶大部分為年輕群體，其中18~24歲群體占大部分，此為用戶中多數(shù)職業(yè)為上班族和在讀學(xué)生，這也說明了18~24歲的青年群體有著較大的消費需求和體驗需求，喜歡嘗試新鮮事物，是潛在盲盒用戶的主力，因此主要針對年輕人進(jìn)行界面設(shè)計。盲盒主要消費者年齡分布如圖1.2所示。圖1.2盲盒主要消費者年齡分布1.2國內(nèi)外研究現(xiàn)狀1.2.1國內(nèi)現(xiàn)狀國內(nèi)盲盒及UI發(fā)展過程分為以下圖1.3所示。圖1.3國內(nèi)盲盒及UI發(fā)展過程從2004年以后，隨著手機(jī)，電腦附加軟件，MP3等大量產(chǎn)品上市，ID設(shè)計就和UI設(shè)計越來越緊密，UI設(shè)計也開始被提升到一個新的高度和重視程度。比如國內(nèi)眾多大型的IT企業(yè)百度、騰訊、網(wǎng)易等科技型企業(yè)。都有UI設(shè)計部分和用戶體驗中心。2009年蘋果公司正式把iphome帶入中國，移動UI開始迅速地紅火，至今國內(nèi)的UI已開始大步的發(fā)展，2012年開始，開始重視用戶體驗，同時盲盒開始在國內(nèi)出現(xiàn)，但大多數(shù)是國外的產(chǎn)品，2016年開始，UI界面設(shè)計開始進(jìn)入沉浸式體驗設(shè)計，增加了用戶的黏性同時留住用戶，也是盲盒營銷發(fā)展的風(fēng)靡時期。直到2020年開始，設(shè)計元素進(jìn)入了多元化的階段，再加上疫情的多種因素，致使盲盒也進(jìn)一步從線下盲盒售賣轉(zhuǎn)向了線上盲盒，小程序也開始一步步的興起。1.2.2國外現(xiàn)狀國外盲盒及UI發(fā)展過程分以下圖1.4所示。圖1.4國外盲盒及UI發(fā)展過程國外的盲盒及UI界面的發(fā)展比國內(nèi)明顯更早，從最從萌芽時期開始成為UI設(shè)計的開端，再到擬物化的時代，出現(xiàn)更重的浮雕陰影，最后到扁平風(fēng)時代到至今依舊非常流行。再加上海外的盲盒市場發(fā)展，從2006年開始成立的奇譚俱樂部網(wǎng)站只售賣扭蛋系列產(chǎn)品到如今各種知名的手辦、盲盒等產(chǎn)品，一步步從線下的售賣模式轉(zhuǎn)向了電商平臺的銷售渠道，深受多數(shù)消費者的喜愛。1.3研究目的及意義從界面設(shè)計發(fā)展來說，手機(jī)已經(jīng)成為了人們生活當(dāng)中不可缺少的一部分，再加上如今生活節(jié)奏很快，沒有誰愿意花時間在繁瑣的手機(jī)APP上，當(dāng)然UI界面設(shè)計在手機(jī)APP中具有非常重要的作用，因此APP界面的美觀性從最基本的需求逐漸提高到滿足心理需求REF_Ref12141\r\h[2]。布萊盲盒界面的設(shè)計最主要的目的是發(fā)現(xiàn)用戶群體對社區(qū)交流的需求量也越來越高，目前因為玩盲盒人群擴(kuò)大，盲盒可以說是新時代背景下扭蛋的進(jìn)階版。當(dāng)代年輕人對于設(shè)計實際追求偏向于情感設(shè)計體驗，趨向于精神補償性消費REF_Ref13454\r\h[3]。對玩偶款式收集需求提升，盲盒也成了一種“社交貨幣”，成為進(jìn)行社交的一個契機(jī)和驅(qū)動力，在年輕人中間成為獨立的圈層。很多盲盒愛好者會加入一些盲盒交換群，會互相交流經(jīng)驗，把自己的盲盒玩偶進(jìn)行各種造型并拍照“曬娃”或者是將多余的款式和別人交換或者售賣。于是在設(shè)計過程中，除了有盲盒抽取、商城購買另外還增加社區(qū)和售賣中心板塊，并且為了激勵和方便用戶隨時隨地內(nèi)容發(fā)布，所以把售賣中心功能里面觸發(fā)閃電回收和發(fā)閑置按鈕以大圖標(biāo)的形式展現(xiàn)。因此本項目的意義要簡單化但要功能齊全，并且操作起來不要特別繁瑣，在滿足時代發(fā)展需求的同時，也更需要注重以用戶的體驗為中心。在設(shè)計制作前，就要從需求分析從而設(shè)計出具有功能性、趣味性、美觀性、便捷性于一體的作品，以便更好地滿足到用戶的需求，達(dá)到以人為本的目標(biāo)。它傳遞給大眾最直觀的信息感受，他的設(shè)計好壞將直接影響用戶的感受和品牌的吸引力REF_Ref8101\r\h[4]。1.4本文研究內(nèi)容1.3.1論文結(jié)構(gòu)本文主要分為以下幾個部分：第一部分是緒論部分，簡要概述此項目的研究背景和目前的發(fā)展概況。第二部分是該系統(tǒng)使用的技術(shù)和工具部分，主要描述實現(xiàn)該系統(tǒng)所要用到的軟件和關(guān)鍵技術(shù)以及可行性分析。第三部分是該項目的界面設(shè)計闡述，從總體設(shè)計到頁面設(shè)計再到整體的色彩搭配和logo設(shè)計的模塊設(shè)計。第四部分是該項目的動態(tài)交互設(shè)計，介紹整體界面動態(tài)點擊部分。第五部分是界面設(shè)計的選題創(chuàng)意和設(shè)計創(chuàng)意的想法。第六部分是總結(jié)與展望，總結(jié)界面設(shè)計和在設(shè)計制作過程中的問題。1.3.2研究方法及手段1、文獻(xiàn)研究法文獻(xiàn)研究法通過查閱相關(guān)文獻(xiàn)資料，為闡述我國盲盒發(fā)展和UI界面設(shè)計的發(fā)展現(xiàn)狀以及差異，選取具有代表性的典型案例進(jìn)行深入了解，并結(jié)合當(dāng)前盲盒界面平臺的特點引用其他學(xué)者的觀點提供理論基礎(chǔ)。2、案例分析法案例分析法通過選擇一個參考界面從不同角度去分析界面的優(yōu)缺點，得出現(xiàn)在盲盒界面設(shè)計可能存在的問題，以及有待改善的地方，讓總結(jié)出自己的思路，使其更具實際意義。

2系統(tǒng)分析2.1可行性分析2.1.1經(jīng)濟(jì)可行性分析本界面設(shè)計的研發(fā)所需要使用的設(shè)計工具Photoshop+Illustrator+AdobeXD+即時設(shè)計等可從其官網(wǎng)下載，都為免費且開源的軟件，而且此系統(tǒng)選用的開發(fā)模式成本相對較低。綜上所述，該項目從經(jīng)濟(jì)上是可行的。2.1.2技術(shù)可行性分析本界面設(shè)計主要是以Photoshop作為主要界面開發(fā)工具，Illustrator為輔助畫出矢量圖組件支撐，可以設(shè)計出基本界面構(gòu)架，在AdobeXD作為中轉(zhuǎn)設(shè)計軟件，轉(zhuǎn)成XD文件進(jìn)入即時設(shè)計設(shè)計交互，以及模擬樣機(jī)狀態(tài)，有了這些軟件的支撐，設(shè)計出整體的界面不會存在風(fēng)險和技術(shù)難題，綜上所述，該項目從技術(shù)上是可行的。2.2需求分析2.2.1關(guān)鍵技術(shù)本項目界面設(shè)計主要運用photoshop、Illustrator為主要界面開發(fā)工具，交互動態(tài)設(shè)計使用AdobeXD、即時設(shè)計為主要交互動態(tài)工具。1、AdobephotoshopPhotoshop簡稱PS是Adobe公司旗下最著名的圖像處理軟件之一，它的主要特點在于處理信息能力“更高、更快、更強(qiáng)?！迸c傳統(tǒng)的手工設(shè)計和制圖軟件相比，photoshop圖形圖像處理軟件對信息處理的困難系數(shù)要求更高，可以解決更加復(fù)雜的信息REF_Ref2642\r\h[5]。PS有很多功能，在圖像、圖形、文字、視頻、出版等方面都有涉及，其中Adobe支持Windows操作系統(tǒng)、Android與MacOS；其應(yīng)用范圍覆蓋數(shù)碼照片處理、平面設(shè)計視覺創(chuàng)意合成、數(shù)字插畫創(chuàng)意、三維設(shè)計、網(wǎng)頁設(shè)計、交互界面設(shè)計等幾乎所有設(shè)計方向。2、AdobeIllustratorIllustrator簡稱AI是Adobe公司推出的矢量圖形制作軟件，從曲線工具、文字編輯、動態(tài)混合、文字編輯、動態(tài)混合、畫筆工具等工具的不斷完善，逐漸成為一款當(dāng)今主流的圖形圖像處理的設(shè)計軟件之一REF_Ref4454\r\h[6]。提供了豐富的素描繪功能以及舒暢靈活的矢量圖編輯功能，能夠快速地創(chuàng)建設(shè)計工作流程，其最大的特征就是鋼筆工具的使用，使得操作簡單功能強(qiáng)大的矢量圖繪圖成為可能。它還集成文字處理、上色等功能廣泛的應(yīng)用與平面設(shè)計、印刷出版、海報書籍排版、移動設(shè)備徽章、圖標(biāo)設(shè)計、VI設(shè)計、專業(yè)插畫、包裝設(shè)計、產(chǎn)品設(shè)計、多媒體圖像處理和互聯(lián)網(wǎng)網(wǎng)頁的制作。3、AdobeXD、即時設(shè)計AdobeXD是一站式UIX/UI設(shè)計平臺，在這款產(chǎn)品上可以進(jìn)行移動應(yīng)用和網(wǎng)頁設(shè)計與原型制作。即時設(shè)計和Figma一樣是在線協(xié)同設(shè)計軟件制作動態(tài)交互設(shè)計。運用AdobeXD與即使設(shè)計相結(jié)合，可以把靜態(tài)的界面設(shè)計成動態(tài)效果。他和AE這款軟件一樣，都可以用于創(chuàng)作動態(tài)圖形和視覺效果設(shè)計軟件，在影像合成、動畫、視覺效果、非線性編輯、設(shè)計動畫樣稿、多媒體和網(wǎng)頁動畫方面都有其發(fā)揮余地，目前主要在影視后期制作以及設(shè)計、視頻行業(yè)得到了普遍使用，具有音頻回訪、視頻增強(qiáng)的特點，在系統(tǒng)內(nèi)部引入了視頻預(yù)覽結(jié)構(gòu)，從而實現(xiàn)了緩存音頻的實時回放，并獲得應(yīng)用程序體驗REF_Ref9418\r\h[7]。2.2.2競品分析通過競品分析分別對元氣瑪特、潮玩家、盲盒玩家、好物盲盒平臺了解他們在產(chǎn)品定位，以及用戶群體，如表2.1所示。表2.1競品分析序號產(chǎn)品名稱產(chǎn)品定位用戶群體1元氣瑪特在線抽盲盒，潮玩購物熱愛潮玩盲盒，同時有購物需求2潮玩家滿足職場女性盲盒收集愛好者線上盲盒機(jī)熱愛線上扭蛋和潮玩，同時有強(qiáng)烈收集和收藏愛好用戶3盲盒玩家主打盲盒多種類在線開箱熱愛潮玩，同時喜歡在線開箱的用戶4好物盲盒隨時隨地多品類開箱、福袋，商城購物以及積分兌換好禮熱愛潮玩以及喜歡開箱、福袋的用戶通過競品分析可以得知該界面產(chǎn)品的定位都是以在線抽盲盒以及商城購買為主，其次在用戶群體定位也是對熱愛潮玩盲盒和購物需求的用戶主要群體，但從這些分析中，發(fā)現(xiàn)存在較多的問題，比如沒有重視為用戶的需求，人們對于交互界面體驗提出了更高的需求。不僅要關(guān)注到界面操作的簡易便利性，還必須要充分考慮到交互界面具有良好的人情味與趣味性，能夠滿足用戶的精神文化情感因素需求REF_Ref3498\r\h[8]。因此在設(shè)計布萊盲盒界面時，不僅要保留各平臺設(shè)計的基本功能，還要增加新穎的功能引起用戶的興趣和需求。接下來會詳細(xì)地分析界面的主要模塊和功能模塊。2.2.3界面設(shè)計主要模塊通過對布萊盲盒界面的整體分析，確定了主要受眾群體是潮流的年輕人，如學(xué)生，上班族，潮玩愛好者等。本APP界面的整體設(shè)計為注冊與登錄、社區(qū)、售賣中心、盲盒機(jī)等。設(shè)計出一款以用戶的為中心的界面APP，使用戶能夠在盲盒愛好者會加入一些盲盒交換群，會互相交流經(jīng)驗，多余的款式和別人交換或者售賣。本界面主要設(shè)計模塊以注冊與登錄、首頁、社區(qū)、消息、購物車、我的模塊，布萊盲盒界面主要模塊如圖2.1所示。圖2.1布萊盲盒界面模塊2.2.3功能模塊描述1、登錄與注冊登錄與注冊模塊描述如圖2.2所示。圖2.2登錄與注冊模塊2、首頁首頁模塊描述如圖2.3所示。圖2.3首頁模塊社區(qū)盲盒產(chǎn)品就是其相對低廉的價格歸屬感最后是情感化的消費動機(jī)，設(shè)計一款具有社交屬性的界面，會聚集擁有相同愛好的年輕人形成一種社群REF_Ref13638\r\h[9]；社區(qū)模塊是最具有亮點的設(shè)計，描述如圖2.4所示。圖2.4社區(qū)模塊消息消息模塊描述如圖2.5所示。圖2.5消息模塊購物車購物車模塊描述如圖2.6所示。圖2.6購物車模塊個人主頁個人主頁模塊描述如圖2.7所示。圖2.7個人主頁模塊3布萊盲盒界面的設(shè)計3.1總體設(shè)計布萊盲盒界面設(shè)計結(jié)構(gòu)圖如圖3.1所示。圖3.1布萊盲盒界面設(shè)計結(jié)構(gòu)圖3.2頁面設(shè)計3.2.1色彩搭配不同的用戶在對待每一種顏色都會有不一樣的色彩感受，良好的色彩搭配不僅能促使人們信息瀏覽的效率得到充分的提升。我們可以在APP界面上決定一個主色調(diào)，用幾種輔助色彩和裝飾色彩的反差來突出APP品牌調(diào)性REF_Ref19225\r\h[10]。在色彩搭配上選用以干凈、青春、暖調(diào)的黃色系中的橙黃色#F19149為主色調(diào)，#946552棕色調(diào)為輔，以此突出盲盒應(yīng)該帶給用戶新鮮的且較為中性的品牌調(diào)性，且配圖統(tǒng)一采用高質(zhì)量簡約美圖，使頁面統(tǒng)一成輕量化設(shè)計，干凈、簡潔、溫暖，活潑選取中性的輔助色#946552色調(diào)作為#F19149這一主色的點綴，突出自身的特點，再用#f4d9bc和鄰近色#f6c8a6作為點綴營造出豐富的質(zhì)感和層次，整體界面信息布局選擇使用列表布局法、宮格布局法展示其內(nèi)容，采用扁平風(fēng)設(shè)計突出功能本身，是一款比較新穎、暖色為主，整體風(fēng)格比較年輕化簡介，色彩不僅具有審美價值，對人的心理具有重要的影響，色彩的變化可以引發(fā)人們對主觀情感的能動反應(yīng)，人們對不同色彩的感知也存在較大差異。通過設(shè)計提升用戶使用率，極簡的界面風(fēng)格設(shè)計中，可以使界面主題視覺上更加清晰，一感官意義上，界面簡單明了，使用用戶的行為更直觀，更易于操作。更能促進(jìn)用戶的活躍度，如圖3.2所示。鄰近色#f4d9bc輔色調(diào)#946552鄰近色鄰近色#f4d9bc輔色調(diào)#946552鄰近色#f6c8a6主色調(diào)#F19149圖3.2色調(diào)搭配圖3.2.2名字設(shè)計布萊盲盒作為APP名稱由來主要均是以自身的產(chǎn)品功能為用戶提供服務(wù)，而布萊盲盒英文又叫bindbox諧音又與布萊相似，于是決定選擇貼近主題與盲盒相關(guān)，因此取名為布萊盲盒，簡單易懂。3.2.3logo設(shè)計大多數(shù)人聽到盲盒這一詞，就會想象到盒子，而且當(dāng)你在抽取盲盒時候，需要精美的盒子來包裝，因此logo以盒子為出發(fā)點，而在盲盒抽取前并不知道里面是什么，要拆開后才能看到里面是什么，所以將問號也將加入在創(chuàng)作靈感當(dāng)中，其次是配色的理由，盲盒作為潮玩類，年齡基本集中在18~25歲男女青年，選擇中性色，干凈、簡潔帶給用戶新鮮的品牌調(diào)性，也更能體現(xiàn)出布萊盲盒的理念。符合主題設(shè)計，與界面設(shè)計當(dāng)中的元素緊緊聯(lián)系在一起，設(shè)計說明如圖3.3所示。圖3.3logo設(shè)計圖3.3原型圖整體設(shè)計原型圖整體設(shè)計如圖3.4所示。圖3.4原型圖整體設(shè)計圖在整體界面設(shè)計之前，會將基本的原型圖構(gòu)架基本設(shè)計完整，首先在設(shè)計過程中，要有明確的市場目標(biāo)與定位，要符合時代發(fā)展的需要、當(dāng)代人的消費觀與內(nèi)心需求。分析用戶需求確定了功能模塊以及相關(guān)內(nèi)容，然后利用原型設(shè)計繪制出了布萊盲盒整體界面，接著根據(jù)功能模塊和字體說明結(jié)合起來，并對所繪制的界面進(jìn)行詳細(xì)的優(yōu)化，最后生成布萊盲盒的基本原型圖。3.4整體設(shè)計界面3.4.1引導(dǎo)頁在設(shè)計布萊盲盒引導(dǎo)頁時選擇使用功能介紹類并且將功能點濃縮成一句話并且以直觀的動態(tài)圖形來解釋這個功能點和吸引用戶的眼球，如圖3.5所示。圖3.5引導(dǎo)頁界面展示圖引導(dǎo)頁簡而言之就是文字信息之間的傳遞，文字是手機(jī)APP引導(dǎo)頁表現(xiàn)形式中最基礎(chǔ)的信息傳遞載體，也是最難把控的設(shè)計元素。簡短的文字更易于引導(dǎo)頁的信息傳遞，以文字信息傳遞為主的APP引導(dǎo)頁設(shè)計表現(xiàn)形式，需要對引導(dǎo)頁界面的文字進(jìn)行優(yōu)化，還可以通過文字字體的趣味性形態(tài)和排列組合方式讓用戶眼前一亮。引導(dǎo)頁是出現(xiàn)在加載完啟動畫面之后、進(jìn)入界面首頁之前用戶所見到的一系列畫面，其作用是在用戶使用APP之前提前告知該產(chǎn)品的主要功能特點，引導(dǎo)頁跟隨啟動畫面出現(xiàn)，也決定用戶對該APP印象好壞做出判斷。3.4.2登錄與注冊界面在產(chǎn)品設(shè)計過程中，如何根據(jù)產(chǎn)品的不同階段、不同的產(chǎn)品目標(biāo)、不同的群體定位、如何選擇注冊登錄方式和設(shè)計注冊登錄程序，都不會有標(biāo)準(zhǔn)的答案。在這里用到了用戶登錄和注冊，這部分包括兩個子部分：其中一個為新用戶注冊，在這里可以通過多種注冊方式，比如使用手機(jī)號驗證登錄，或者第三方登錄，（QQ、微信、微博）注冊之后享受更多的功能服務(wù)。另一個就是用戶登錄，其作用就是為用戶提供安全的訪問和數(shù)據(jù)操作，防止非法用戶進(jìn)入，有了登錄自然要有注冊，其實應(yīng)該是相反的，現(xiàn)有注冊才有登錄，只不過注冊通常是在登錄模塊的“登錄”窗體下加的注冊界面。在設(shè)計布萊盲盒登錄與注冊界面時，界面設(shè)計友好、美觀，在進(jìn)入登錄與注冊界面，并且易操作性，將登錄和注冊放在同一窗口，在用戶需要直接登錄時，只要輸入之前注冊過的信息就可以，可以選擇密碼登錄或者驗證碼登錄，同樣注冊在通過收集驗證碼登錄之后設(shè)置自己的密碼，如圖3.6所示。圖3.6登錄與注冊界面展示圖3.4.3首頁界面UI設(shè)計的首頁設(shè)計是最重要的一個頁面，是給用戶傳遞產(chǎn)品信息、功能的首頁頁面，首頁也是整個界面的風(fēng)格定向和功能定向，首先是基礎(chǔ)板塊，設(shè)計手機(jī)頂部狀態(tài)，第一部分狀態(tài)欄是位于整個界面最頂部如信號、運營商、電池等信息，為了配合APP的設(shè)計風(fēng)格，狀態(tài)欄和標(biāo)題欄都是融為一體。第二部分是搜索欄，用戶可以在搜索欄輸入需要的內(nèi)容，可以快速查詢到所需要的盲盒商品；第三部分是banner區(qū)，位于首頁等信息集合頁面中，展示數(shù)量為一張，減少用戶錯過一個就需要滑動多個才能找到，體驗感不好。第四部分是金剛區(qū)，位于界面主界面頭部搜索欄、主功能區(qū)以及Banner區(qū)下方，以圖標(biāo)+文字形式展示的多功能塊狀區(qū)域。第五部分是列表板塊，設(shè)置特定的優(yōu)惠專區(qū)，讓用戶能迅速找到自己的心儀板塊。第六部分就是標(biāo)簽欄，讓用戶在不同的子任務(wù)當(dāng)、視圖和模式進(jìn)行快速切換。工具欄設(shè)置了相應(yīng)的5個圖標(biāo)，位于界面最底端。第七部分是模態(tài)彈窗，設(shè)置專屬新人券領(lǐng)取彈窗，給用戶一個醒目的提示如圖3.7所示。其中首頁金剛區(qū)功能部分模塊包含盲盒商城、盲盒機(jī)、寄售中心、領(lǐng)券中心、每日簽到、布萊會員、我的盒柜、積分抽獎、盲盒幣充值、活動資訊功能具體如下。圖3.7主頁界面展示圖1、盲盒商城界面在金剛區(qū)域上，點擊盲盒商城直接進(jìn)入商城頁面，可以根據(jù)自己的喜好進(jìn)行點擊搜索選擇自己喜歡的盲盒系列進(jìn)行查看或者購買，同時商品分類讓用戶能夠快速地來選擇不同種類，范圍欄也可以提前讓用戶通過范圍來進(jìn)行篩選，如圖3.8所示。圖3.8盲盒商城界面展示圖2、盲盒機(jī)界面點擊盲盒機(jī)圖標(biāo)，進(jìn)入盲盒機(jī)界面，可以專屬抽取只在盲盒機(jī)上新系列盲盒（概不在商城售賣）使用盲盒幣或者抽獎券抽取，獲得盲盒商品，最下欄顯示其他系列盲盒產(chǎn)品，點擊“換一批”用戶可以選擇喜歡的系列抽取，點擊“查看商品詳情”用戶可以看到選中系列的所有盲盒款式，點擊規(guī)則說明可以查看抽取規(guī)則，如圖3.9所示。圖3.9盲盒機(jī)界面展示圖3、寄售中心界面進(jìn)入到售賣中心頁面，點擊閃電回收或者發(fā)閑置可進(jìn)行官方回收或用戶之間的交易。同時右上設(shè)置訂單可以查看自己在售賣中心的購買情況，可能回到是在原本價格的基礎(chǔ)上翻倍溢價，因此當(dāng)界面設(shè)定售賣中心讓盲盒投資的性能為盲盒消費注入活力，發(fā)揮了間接影響作用；消息框可以收到發(fā)布閑置用戶私信的聊天消息，而我的個人頁面可以查看發(fā)布閑置文章數(shù)有多少，售賣中心界面展示如圖3.10所示。4、領(lǐng)券中心界面用戶點擊金剛區(qū)進(jìn)入領(lǐng)券中心，新用戶如果沒有通過主頁彈窗領(lǐng)取新人優(yōu)惠券，可以從領(lǐng)券中心領(lǐng)券新人優(yōu)惠券以及每日限時秒殺限量優(yōu)惠券，同時還有其他限品類款式系列優(yōu)惠券，方便用戶領(lǐng)取使用，領(lǐng)券中心展示如圖3.10所示。5、每日簽到界面點擊每日簽到圖標(biāo)進(jìn)入，會出現(xiàn)簽到日歷框，每日簽到會有2積分，連續(xù)簽到3天會獎勵10積分，連續(xù)簽到10天得20積分，以此類推疊加，時間中斷會重新再簽到按第一天執(zhí)行來留住客戶堅持簽到得積分，每日簽到展示如圖3.10所示。6、布萊會員界面點擊進(jìn)入布萊會員，可以查看會員卡等級情況以及專屬布萊會員享有的特權(quán)和開通服務(wù)，以及每月會員可以領(lǐng)取優(yōu)惠券，布萊會員界面展示如圖3.11所示。7、我的盒柜在用戶有使用盲盒幣或者抽獎券在盲盒機(jī)抽取盲盒系列的產(chǎn)品當(dāng)中所獲得的商品，會顯示在我的盒柜里，用戶在通過點擊我的盒柜進(jìn)入界面查看所獲得的商品，我的盒柜界面展示如圖3.12所示。圖3.10寄售中心、領(lǐng)券中心、每日簽到界面展示圖圖3.11布萊會員界面展示圖8、積分抽獎界面積分抽獎主要是用戶在進(jìn)入抽獎界面，設(shè)置每天三次積分抽獎機(jī)會，每天十點進(jìn)行刷新，每次抽獎會扣除二十積分，通過積分抽獎可以概率獲得大額優(yōu)惠券或者積分獎勵，還設(shè)計了我的積分界面可以快速查看到積分的收入和支出明細(xì)以及積分兌換等功能，積分抽獎界面展示如圖3.12所示。圖3.12我的盒柜、積分抽獎界面展示圖9、盲盒幣充值界面點擊金剛區(qū)位置盲盒幣充值圖標(biāo)進(jìn)入界面，用戶可以看到充值活動、盲盒幣充值和抽獎券，用戶可以根據(jù)自己的需求和喜好進(jìn)行充值，充值活動為首要界面，吸引用戶眼球，通過優(yōu)惠充值盲盒幣的活動方式，來讓用戶進(jìn)行購買來抽取盲盒機(jī)的盲盒，盲盒幣充值界面展示如圖3.13所示。10、活動資訊界面點擊活動資訊圖標(biāo)進(jìn)入到活動資訊界面可以看到盲盒商城或者盲盒幣充值的所有活動，用戶可以快速查看當(dāng)天或者當(dāng)月的活動和優(yōu)惠的活動資訊，給用戶提供更快便攜的頁面設(shè)計，活動資訊界面展示如圖3.13所示。3.4.4社區(qū)界面點擊工具欄社區(qū)，進(jìn)入子任務(wù)社區(qū)界面，設(shè)計推薦關(guān)注部分，讓用戶選擇自己感興趣的盲盒或者手辦系列進(jìn)行關(guān)注，還設(shè)置推薦文章，用戶可以通過瀏覽文章進(jìn)行關(guān)注、評論或者是點贊，可以和潮流玩家一起交流分享，社區(qū)界面展示如圖3.14所示。圖3.13盲盒幣充值、活動資訊界面展示圖圖3.14社區(qū)界面展示圖3.4.5消息界面消息界面用戶主要設(shè)計了查看消息通知，例如社區(qū)對方評論提醒，或者關(guān)注私信提醒，互動消息就是用戶在發(fā)布社區(qū)文章時，對方評論文章時，點擊可以直接進(jìn)入查看評論消息并且回復(fù)，通訊錄在用戶和對方用戶互相關(guān)注之后，產(chǎn)生的聯(lián)系人進(jìn)行私信聊天。下方采用列表方式，使用戶能夠清晰地看到用戶相互關(guān)注后發(fā)送的私信消息，或者是布萊盲盒系統(tǒng)推送的活動或者上新，點擊就進(jìn)行回復(fù)或者查看，消息界面展示如圖3.15所示。圖3.15消息界面展示圖3.4.6購物車界面購物車頁面可以看到篩選欄，查看加入購物車的商品，參數(shù)規(guī)格以及數(shù)量或者加入購物車的商品降價通知及商品的庫存多少，在確定購買后，設(shè)計出提交訂單的界面，用戶可以進(jìn)入購物車選中直接去結(jié)算下單付款支付成功界面，購物車界面展示如圖3.16所示。圖3.16購物車界面展示圖3.4.7個人主頁界面?zhèn)€人主頁界面，主要設(shè)計了可以查看布萊用戶賬號名以及訂單待付款、待發(fā)貨、待收貨、待評價、退貨退款的詳細(xì)訂單，用戶還可以看到優(yōu)惠券數(shù)量，積分?jǐn)?shù)量以及賬戶余額錢包等，在設(shè)置相應(yīng)常用工具方便用戶使用和查找，例如用戶想查看商城商品瀏覽記錄時，可以通過點擊常用工具中的瀏覽記錄就可以查詢到想找的那款盲盒商品，個人主頁界面展示如圖3.17-3.18所示。圖3.17個人主頁界面展示圖圖3.18個人主頁界面展示續(xù)圖4布萊盲盒界面的動態(tài)交互設(shè)計4.1引導(dǎo)頁引導(dǎo)頁主要就是展示整體界面特色的功能，以及動態(tài)組件的點擊，引導(dǎo)頁的部分交互參數(shù)及交互連接線如圖4.1-4.2所示。圖4.1部分交互參數(shù)展示圖圖4.2部分交互連接線展示圖引導(dǎo)頁最終動態(tài)交互效果如圖4.3所示。圖4.3引導(dǎo)頁動態(tài)交互效果圖4.2登錄與注冊登錄與注冊界面主要是用戶通過登錄與注冊點擊進(jìn)入主頁，交互參數(shù)及交互連接線如圖4.4-4.5所示。圖4.4部分交互參數(shù)展示圖圖4.5部分交互連接線展示圖圖4.6登錄與注冊動態(tài)交互效果圖4.3首頁首頁是用戶登錄注冊后進(jìn)入的一級界面，功能眾多豐富的頁面，也是動態(tài)交互點擊設(shè)計最多的位置，比如主頁新人領(lǐng)券彈窗模塊，金剛區(qū)模塊。此部分是用戶登錄后進(jìn)入主頁界面，新人領(lǐng)券圖標(biāo)會隱藏在右邊位置，當(dāng)用戶點擊后會彈出新人領(lǐng)券頁，交互參數(shù)及交互連接線如圖4.7-4.8所示。圖4.7部分交互參數(shù)展示圖圖4.8部分交互連接線展示圖主頁及主頁新人領(lǐng)券最終動態(tài)交互效果如圖4.9所示。圖4.9主頁及主頁新人領(lǐng)券動態(tài)交互效果圖4.3.1金剛區(qū)功能模塊金剛區(qū)模塊部分交互連接線如圖4.10所示。圖4.10金剛區(qū)部分交互連接線圖1、盲盒商城這部分分為商城頁面，商城分類，商品詳情，交互參數(shù)及交互連接線如圖4.11-4.12所示。圖4.11盲盒商城部分交互參數(shù)圖圖4.12盲盒商城部分交互連接線圖盲盒商城最終動態(tài)交互效果如圖4.13所示。圖4.13盲盒商城動態(tài)交互效果圖2、盲盒機(jī)盲盒機(jī)部分主要動態(tài)設(shè)計在盲盒機(jī)規(guī)則，盲盒機(jī)產(chǎn)品系列轉(zhuǎn)換以及系列詳情展示，交互參數(shù)及交互連接線如圖4.14-4.15所示。圖4.14盲盒機(jī)部分交互參數(shù)圖圖4.15盲盒機(jī)部分交互連接線圖盲盒機(jī)最終動態(tài)交互效果如圖4.16所示。圖4.16盲盒機(jī)動態(tài)交互效果圖3、寄售中心寄售中心部分動態(tài)設(shè)計以發(fā)布閑置文章為主，交互參數(shù)及交互連接線如圖4.17-4.18所示。圖4.17寄售中心部分交互參數(shù)圖圖4.18寄售中心部分交互連接線圖售賣中心最終動態(tài)交互效果如圖4.19所示。圖4.19寄售中心交互效果圖4、領(lǐng)券中心及每日簽到這部分主要內(nèi)容展示領(lǐng)券中心及每日簽到的二級頁面，交互參數(shù)及交互連接線如圖4.20-4.21所示。圖4.20領(lǐng)券中心部分交互參數(shù)圖圖4.21領(lǐng)券中心及每日簽到部分交互連接線圖售賣中心最終動態(tài)交互效果如圖4.22所示。圖4.22領(lǐng)券中心及每日簽到動態(tài)交互效果圖5、布萊會員布萊會員這部分主要是展現(xiàn)出會員卡等級以及會員整體特權(quán)開通的交互界面，交互參數(shù)及交互連接線如圖4.23-4.24所示。圖4.23布萊會員部分交互參數(shù)圖圖4.24

布萊會員部分交互連接線圖布萊會員最終動態(tài)交互效果如圖4.25所示。圖4.25布萊會員動態(tài)交互效果圖6、我的盒柜及積分抽獎這部分主要內(nèi)容展示我的盒柜及積分抽獎的二級頁面以及積分的詳細(xì)信息，和領(lǐng)券中心每日簽到一樣，交互參數(shù)及交互連接線如圖4.26-4.27所示。圖4.26我的盒柜及積分抽獎部分交互參數(shù)圖圖4.27我的盒柜及積分抽獎部分交互連接線圖我的盒柜及積分抽獎最終動態(tài)交互效果如圖4.28所示。圖4.28我的盒柜及積分抽獎動態(tài)交互效果圖7、盲盒幣充值及活動資訊這部分主要內(nèi)容展示如上，和領(lǐng)券中心每日簽到一樣，交互參數(shù)如圖4.29所示。圖4.29盲盒幣充值及活動資訊部分交互參數(shù)圖盲盒幣充值及活動資訊最終動態(tài)交互效果如圖4.30所示。圖4.30盲盒幣充值及活動資訊動態(tài)交互效果圖4.4社區(qū)社區(qū)這部分功能是最具有亮點的設(shè)計，設(shè)置了推薦圈子和文章界面的動效，交互參數(shù)及交互連接線如圖4.31-4.32所示。圖4.31社區(qū)部分交互參數(shù)圖圖4.32

社區(qū)部分交互連接線圖社區(qū)最終動態(tài)交互效果如圖4.33所示。圖4.33盲盒機(jī)動態(tài)交互效果圖4.5消息消息這部分功能包含消息通知，互動消息，通訊錄，用戶聊天，可以點擊進(jìn)入到三級界面以及聊天對話框，交互參數(shù)及交互連接線如圖4.34-4.35所示。圖4.34消息部分參數(shù)圖圖4.35消息部分交互連接線圖消息最終動態(tài)交互效果如圖4.36所示。圖4.36消息動態(tài)交互效果圖4.6購物車購物車這部分動態(tài)效果包含購物車商品，商品結(jié)算，支付訂單，交互參數(shù)及交互連接線如圖4.37-4.38所示。圖4.37購物車部分參數(shù)圖圖4.38購物車部分交互連接線圖消息最終動態(tài)交互效果如圖4.39所示。圖4.39消息動態(tài)交互效果圖4.7個人主頁個人主頁包含設(shè)置、我的訂單、優(yōu)惠券、賬戶余額、瀏覽記錄、商品搜藏，交互參數(shù)及交互連接線如圖4.40-4.41所示。圖4.40個人主頁部分交互參數(shù)圖圖4.41個人主頁部分交互連接線圖個人主頁最終動態(tài)交互效果如圖4.42所示。圖4.42我的動態(tài)交互效果圖布萊盲盒交互設(shè)計首先從盲盒的設(shè)計考慮到用戶的心理預(yù)期和驚喜感。增加隨機(jī)性和設(shè)計限量的方式來增加用戶的期待感和驚喜感，其次就是用戶的體驗，交互設(shè)計需要考慮的就是用戶的體驗，包括用戶的操作流程、界面設(shè)計、反饋機(jī)制等。確保用戶能夠順暢的進(jìn)行操作；然后就是社區(qū)互動，社交互動可以來增加用戶的參與度和忠誠度，因此設(shè)置文章發(fā)布、交流分享等功能讓用戶能夠與其他用戶進(jìn)行互動和交流，最后總結(jié)了在交互設(shè)計中，要考慮注重盲盒設(shè)計、用戶體驗、社交互動可以增加驚喜感和社交互動來吸引用戶注意力從而提高用戶的參與度和忠誠度。5設(shè)計創(chuàng)意5.1選題創(chuàng)意布萊盲盒：在選題過程當(dāng)中，首先會考慮年齡階段定位，其次通過玩游戲后發(fā)現(xiàn)游戲界面是以抽取盲盒的界面設(shè)計瞬間引起興趣，因此選擇以盲盒為題材中心去了解其他APP盲盒界面的設(shè)計和查詢資料，發(fā)現(xiàn)作為如今隨著潮流文化的崛起和發(fā)展，越來越多的年輕人喜歡潮玩類的產(chǎn)品，同時也發(fā)現(xiàn)有的以盲盒形式清庫存，因此在確定以盲盒題目時，主要與潮玩、IP形象、手辦、虛擬人物的盲盒商品為首要定位，最后選擇取名，為了選擇簡單易懂的名字讓用戶能夠清晰記住，用盲盒的英文blindbox當(dāng)中的blind中文和布萊相似，最后確定取名為布萊盲盒。5.2設(shè)計創(chuàng)意本設(shè)計主題主要為“盲盒”為主題，在與別的APP設(shè)計功能相同的有盲盒抽取、商城購買同時在自己的創(chuàng)意設(shè)計上加增加了社區(qū)，來滿足用戶群體對社區(qū)的需求，讓用戶可以通過社區(qū)進(jìn)行互相交流經(jīng)驗，也可以對自己的盲盒玩偶或者是手辦進(jìn)行像朋友圈拍照“曬娃”，還可以選擇自己喜歡的圈子進(jìn)行關(guān)注和認(rèn)識朋友進(jìn)行互相關(guān)注私信，這樣不僅可以增加用戶的黏性，還可以提升產(chǎn)品的活躍度和用戶使用的積極性。還增加了售賣中心可以讓用戶將多余的款式進(jìn)行發(fā)布的形式和別人出售，或者是通過官方一鍵回收，在交易板塊這部分可以有效地增加用戶的積極性，降低用戶在盲盒抽取購買時候的負(fù)面情緒，還可以提高用戶的使用留存度。

6總結(jié)與展望6.1總結(jié)在此次做畢業(yè)設(shè)計中收獲非常的大，從最開始的選題我就感到非常的驚慌失措，后來通過導(dǎo)師的指導(dǎo)下選擇往UI界面設(shè)計方向，在選擇好題目和題材，就需要開始設(shè)計，最開始沒有一點頭緒后來去即時設(shè)計、千庫網(wǎng)等各種網(wǎng)頁進(jìn)行學(xué)習(xí)查看素材，多看多學(xué)確定界面配色和布局同時還購買了關(guān)于PS界面設(shè)計的書學(xué)習(xí)界面設(shè)計的規(guī)范，最終將界面整體基本構(gòu)架設(shè)計完成（引導(dǎo)頁、登錄與注冊、首頁等界面），最后再用即時設(shè)計做移動動效制作，最開始對做動態(tài)軟件非常的不熟悉和了解感覺會非常的麻煩，但還是努力堅持下來，通過關(guān)于界面設(shè)計動效的書以及觀看嗶哩嗶哩軟件上制作界面動效的課程，完成了布萊盲盒界面整體的動效制作。6.2展望首先是界面設(shè)計引導(dǎo)頁最初想選擇以動態(tài)IP形象動畫的方式進(jìn)入但是自身的能力有限，多次嘗試仍然失敗后來選擇設(shè)計靜態(tài)的引導(dǎo)頁是比較遺憾的，后期在完善自己的能力后再多次嘗試做出動態(tài)IP形象的引導(dǎo)頁其次是對界面設(shè)計的規(guī)范了解還不夠透徹，后期還要多繼續(xù)學(xué)習(xí)不斷地去完善布萊盲盒界面中字體、排版，以及頁面內(nèi)容。

參考文獻(xiàn)喬磊.現(xiàn)有盲盒APP界面設(shè)計配色方案應(yīng)用研究[J].流行色,2020,(10):79-85.WanqiuWang.InnovativeResearchonIllustrationApplicationsinAPPInterfaceDesign[C]//InstituteofManagementScienceandIndustrialEngineering.Proceedingsof20199thInternationalConferenceonEducationandSocialScience(ICESS2019).FrancisAcademicPress,2019:4.趙星晨,陳慶軍.盲盒設(shè)計理念對文創(chuàng)產(chǎn)品的借鑒意義探究[J].包裝工程,2021,42(20):6.房景麗.新媒體時代UI界面設(shè)計應(yīng)用與發(fā)展研究[J].北京