-28-1緒論1.1研究背景隨著移動互聯網的快速發展，游戲社區APP已成為游戲玩家互動交流的重要平臺。玩家不僅可以在平臺上找到游戲攻略、分享游戲經驗，還能結識志同道合的朋友，共同探索游戲的樂趣。因此，游戲社區類APP的用戶體驗對于吸引和留住用戶至關重要。UI設計在游戲社區APP中扮演著至關重要的角色。一個優秀的UI設計不僅能讓用戶快速了解平臺的功能和特色，還能提升用戶的參與度和活躍度。通過合理的界面布局、美觀的圖標設計、清晰的信息呈現等方式，UI設計可以有效地引導用戶進行互動，提高用戶的滿意度和忠誠度REF_Ref2666\r\h[1]。游戲社區APP的UI設計需要考慮多種因素。這包括平臺的定位、目標用戶群體、交互方式等。不同的游戲社區APP可能有不同的定位和特色，因此UI設計需要充分體現這些差異。同時，目標用戶群體的特點也是UI設計需要考慮的重要因素。例如，針對年輕用戶的游戲社區APP可能需要采用更加時尚、個性化的設計元素；而針對老年用戶的游戲社區APP則需要更加簡單明了的界面設計REF_Ref2729\r\h[2]。隨著游戲社區APP市場的競爭日益激烈，UI設計也成為了競爭的重要方面。一個優秀的UI設計能夠提升游戲社區APP的品牌形象和市場競爭力，幫助平臺在市場中脫穎而出。綜上所述，游戲社區APP的UI設計研究背景主要包括用戶體驗的重要性、UI設計的作用、設計因素的多樣性以及市場競爭的激烈性等方面。這些因素共同促使了游戲社區APP的UI設計研究成為了一個重要的課題。1.2國內外研究現狀1.2.1國內現狀游戲APP的界面設計是一個非常重要的問題，因為用戶的體驗和使用效率直接受到其影響。目前國內有關游戲APP的界面設計研究較少，但是可以從以下四方面分析國內的現狀。對于游戲APP，用戶主要需要一個簡單易用、功能齊全、操作便捷的平臺來進行道具的交易。因此，界面設計應該盡可能貼近用戶需求，簡化操作流程，提升用戶體驗。游戲APP的界面設計元素應該符合游戲的主題風格，同時應該保證界面的可讀性和易懂性。良好的界面設計應該包括明確的導航、簡潔的布局、清晰的標簽和按鈕等。游戲虛擬物品交易界面設計應以用戶為中心，在界面設計中要注意界面設計的合理化、平臺形象設計的生動化、視覺安全的重視化三個方面，從用戶的角度出發優化用戶體驗，同時提升品牌的競爭力REF_Ref2862\r\h[3]。UI即UserInterface，是用戶界面的簡稱，泛指用戶的操作界面，例如移動APP、智能穿戴設備、網頁等。UI設計不僅指界面的外觀樣式、美觀程度等，更重要的是軟件的人機交互設計、軟件操作邏輯等。優秀的UI界面設計，不僅可以讓移動APP變得更加人性化、個性化，還能讓APP的操作更加簡單、舒適、自由，從而優化用戶的使用體驗。在移動APP的UI設計中，主要包括外觀樣式設計和用戶交互設計兩方面內容REF_Ref2911\r\h[4]。游戲APP的界面設計需要得到技術團隊的支持，以確保界面的穩定性和靈活性。同時，需要考慮不同移動設備和操作系統的差異，開發出適配不同設備的界面設計。體驗設計的本質是服務設計，服務于用戶與企業。幾乎所有的產品與功能，都是通過用戶場景與業務發展的結合而產生的。想要做好產品體驗設計，繞不開用戶場景。而用戶場景的核心是用戶即人性，一切產品功能的設計都是圍繞“人”展開。人性的呈現是多種多樣的，想要設計一個體驗良好的產品，設計者需要深刻洞察用戶不同層次、不同維度的需求，理解人群的生理、心理差異以及場景的特殊性，精準的提供設計服務以滿足用戶REF_Ref2941\r\h[5]。總之，在設計游戲APP的界面時，需要綜合考慮用戶需求、設計元素和技術支持等因素，以達到最佳的用戶體驗和商業效益。1.2.2國外現狀在國外，游戲APP的界面設計已經有了比較成熟的研究和實踐。以下是一些主要的研究現狀：國外關于游戲APP的用戶需求分析主要聚焦于用戶心理需求和使用習慣。例如，美國加州伯克利分校的研究人員對游戲玩家進行了深入訪談，發現用戶通常希望APP的界面設計簡單明了、便捷高效。國外研究關注的界面設計元素主要有色彩、字體、圖標等各種視覺元素。例如，日本東京工業大學的研究人員提出了一種基于情緒識別的游戲交易APP界面設計方法，通過顏色和圖標來傳遞情感信息REF_Ref2993\r\h[6]。國外研究還非常注重技術支持方面，例如對不同系統和設備的適配等。例如，英國南安普頓大學的研究人員提出了一種基于多設備的游戲道具交易APP架構，可以在不同終端上實現自適應界面。喬布斯在2007年重新定義iPhone手機。極具代表性的圓角矩形圖標，將擬物化設計推向整個世界。2013年蘋果全球開發者大會上，蘋果公司對iOS7進行了扁平化設計，“蘋果式”的扁平化設計掀起了新的UI設計浪潮，也讓更多人清晰地認識到扁平化設計模式已經是UI設計的大勢所趨。而后，UI設計理念逐漸成熟，扁平化風格的UI設計成為App交互界面設計的主流趨勢，扁平化減弱了界面中分散用戶注意力的無用圖形，讓視線可以快速聚焦到信息上，特別是對于屏幕更小的移動設備，減少干擾尤為重要。如今，受到MaterialDesign的影響，App界面設計不再單一局限與扁平化的設計，開始向立體多維轉變。這種轉變開始與光和影的運用，就是所謂的“半扁平化設計”REF_Ref3029\r\h[7]。總之，國外的研究主要聚焦于用戶需求、界面設計元素和技術支持等方面，強調界面設計應該符合用戶心理需求和使用習慣，并且應該具有更加優化的視覺效果和靈活的技術支持。這些研究成果也為國內游戲APP的界面設計提供了重要的參考借鑒。1.3本文研究內容1.3.1論文結構本文主要分為以下五個部分：第一部分是緒論部分，簡要概述UI界面交互設計的項目背景和目前的發展概況。第二部分介紹UI界面設計的相關理論以及使用的技術和工具，主要進行UI設計的可行性分析及所要用到的軟件和技術。第三部分介紹UI的設計分析，主要包括LOGO和圖標設計以及功能模塊分析。第四部分為UI界面的詳細的設計和實現部分。第五部分是總結與展望，總結UI設計和實現過程中的問題。1.3.2研究方法及手段本文的研究方法如下：1、文獻研究法通過查閱和分析與UI界面設計相關的文獻，了解該領域的研究現狀、發展趨勢和前沿技術，為論文提供理論支持和背景信息。2、實驗研究法設計并實施UI界面設計的實驗，通過對比不同設計方案的效果，評估設計的可行性和有效性。3、案例研究法選擇具有代表性的UI界面設計案例進行分析和研究，提取成功的設計元素和方法，為論文提供實證支持。本文的研究手段如下：1、原型設計與評估：根據研究目標和用戶需求，設計UI界面原型，并通過用戶測試、專家評審等方式對原型進行評估和改進，以確保設計的合理性和可用性。2、用戶調研與測試：通過用戶調研和測試，了解用戶對UI界面設計的反饋和意見，發現設計中存在的問題和不足，為改進設計提供依據。3、競品分析與比較：對類似產品或服務的UI界面設計進行分析和比較，提取其優點和缺點，為設計提供參考和借鑒。

2“游寶”游戲APP的UI設計相關理論2.1UI設計關鍵技術2.1.1FigmaFigma是一個UI設計軟件，主要用于做UI設計。不過，其實是一個Allinone工具，產品經理、UI設計師、前端開發都能夠使用Figma完成自己的工作內容。Figma支持多種文件格式導入和導出，如Sketch、Photoshop和Illustrator等，同時也支持動態和交互式設計。此外，Figma具有智能自動布局功能，可以大大提高設計師的工作效率。Figma可以在所有主流操作系統中運行，包括MacOS、Windows、Linux和ChromeOS等。除此之外，Figma還提供了豐富的繪圖工具、矢量編輯、布局工具和排版功能，讓設計師能夠精確地定位和調整元素，創建出高品質的設計。同時，Figma具有高度可擴展性，可以與其他設計工具和開發工具無縫對接，方便設計師和開發人員之間的工作流程銜接。Figma還擁有強大的插件生態系統，用戶可以根據自己的需求安裝各種插件來提升工作效率。2.1.2Photoshop2023在Photoshop中打開需要修圖的圖片。可以通過菜單欄的“文件”>“打開”來選擇圖片文件。進行修圖的第一步通常是調整圖片的整體色調和色彩平衡。可以使用Photoshop中的“色調/飽和度”調整工具、曲線工具、色彩平衡工具等來調整圖片的色調、色彩、亮度和對比度等。接下來，可以使用修復工具來修復圖片中的瑕疵，常用的修復工具包括“克隆圖章”工具、“修復畫筆”工具等。這些工具可以從圖片的一個部分復制像素到另一個部分，從而掩蓋瑕疵。如果圖片構圖不佳或需要突出某個部分，可以使用裁剪工具來調整圖片構圖。通過選擇適當的裁剪比例和角度，可以讓圖片更加引人注目。Photoshop2023提供了豐富的濾鏡和效果，可以用來增強圖片的藝術感和視覺效果。例如，可以使用“銳化”濾鏡來增強圖片的細節，使用“模糊”濾鏡來創建柔和的效果，或者使用“色彩分層”濾鏡來給圖片添加獨特的色彩效果。最后，完成修圖后，需要保存或導出圖片。可以選擇適當的文件格式（如JPEG、PNG等）和導出選項，以滿足不同的需求。2.2“游寶”游戲APP的UI相關理論與傳播意義2.2.1“游寶”游戲APP的UI設計構成要素“游寶”游戲APP的UI設計構成元素主要有以下七個部分：狀態欄：位于屏幕頂部，主要用于顯示信號、運營商、電量等手機狀態信息。導航欄：顯示當前界面的名稱，包含相應的功能或頁面間的跳轉按鈕，通常位于屏幕底部或頂部。主菜單欄：類似于頁面的主菜單，提供整個應用的分類內容的快速跳轉，通常位于屏幕底部或頂部。內容區域：展示應用提供的相應內容，是用戶與應用交互的主要區域。文字元素：文字是信息傳達的主體部分，包括標題、信息、文字鏈接等，字體、大小、顏色和排布對頁面整體設計影響極大。圖形元素：包括標題、背景、主圖、鏈接圖標等，可以生動直觀、形象地表現設計主題，增強頁面的視覺效果。在人們的經驗中，視覺情感表現用圖形圖像來表達，能更好地幫助人們獲取和識別信息。圖形是手機APP的界面設計重要的視覺表現元素，能夠提供視覺信息的符號形象來吸引人們的眼球。圖形元素概括能力強，直觀、形象表現信息內容，給人留下生動而清晰的印象，易于被理解和接受，有利于信息的視覺傳達。圖形作為一種視覺語言形式，其在信息傳遞上更加直觀和立體，直接表達手機界面的內容，便于界面中有效信息的傳遞。圖形沒有文字的局限性，是世界通用的語言，圖形具有簡單直觀、便于理解等優點。圖形在傳達信息過程中，沒有文化、年齡等背景的限制。在手機APP的界面設計中，設計師應該在便于用戶的理解基礎上準確應用圖形，來傳達圖形的信息。運用視覺表現規律對各種符號進行重組、加工，從而實現有序、高效的信息傳遞。在手機APP的設計中，圖形設計分為具象圖形設計和抽象圖形設計。具象圖形是將相似物體進行符號化設計，是最直觀的表達方式。例如：用相機的符號來表達拍照功能，這種直接將生活中的元素以圖形符號化形式植入于手機界面中。抽象符號則與現實生活中的元素沒有直接的關聯，往往是人們共同的文化背景下而建立起來的。豎大拇指的形象代表稱贊等，將此類符號與用戶文化背景相對應才能取得良好的表達效果。因此，在手機界面設計上，能有效地運用圖形來表達藝術設計理念，以多樣的圖形來展示信息內容，使手機的界面設計更加的形象和生動，使信息的傳達更為準確REF_Ref3094\r\h[8]。頁面版式：將文字、圖形等視覺元素進行組合配置，使頁面整體視覺效果美觀和諧，便于閱讀，實現信息傳達的最佳效果。此外，UI設計中還需要考慮交互設計和視覺設計。交互設計是指用戶與APP之間的互動方式，常用的構成元素包括按鈕、輸入框、列表、滑動條等。視覺設計是指APP的整體外觀和風格，常用的構成元素包括顏色、字體、圖標、圖片等REF_Ref3117\r\h[9]。主頁面的設計還是要運用Photoshop軟件，多去看看成功的例子，然后養成自己的慣性思維，知道什么地方放圖標好看，什么地方放文字好看，形狀是什么樣子的順眼，顏色是什么和主題比較搭等等的問題都需要自己反復的實驗與嘗試REF_Ref3156\r\h[10]。綜上所述，APP的UI設計需要綜合考慮多個元素，包括狀態欄、導航欄、主菜單欄、內容區域、文字元素、圖形元素、頁面版式、交互設計和視覺設計等，以創造出符合用戶需求和審美需求的界面設計REF_Ref3186\r\h[11]。2.2.2“游寶”游戲APP的UI風格特點“游寶”游戲APP的UI風格特點采用簡約的扁平化風格，這種風格被廣泛應用于各類移動應用中，具有清晰簡潔、顏色搭配明亮和動感的特點。扁平化設計強調抽象、極簡和符號化，去除冗余、厚重和繁雜的裝飾效果，使“信息”本身重新作為核心被凸顯出來。2.2.3“游寶”游戲APP的傳播意義APP發展到今天，已經不僅僅只是移動設備上的一個客戶端小程序了，是人們生活不可或缺的一部分。各式各樣的APP軟件愈發豐富，使得用戶的忠誠度、活躍度都得到了極大程度的提升，從而帶進流量，為企業的創收和未來的發展起到了關鍵的推動作用REF_Ref3241\r\h[12]。“游寶”游戲APP的UI設計傳播意義在于提供直觀的用戶體驗、塑造品牌形象、提升用戶留存率以及促進信息傳播。這些意義共同作用于提升“游寶”游戲APP的用戶滿意度和活躍度，推動其持續發展。

3“游寶”游戲APP的UI設計分析3.1設計調研3.1.1用戶與產品定位分析此類APP的核心用戶通常是熱愛游戲、尋求游戲交流、分享和互動的玩家。這些用戶可能是游戲愛好者，也可能是游戲行業的從業者或媒體人。在設計實踐開始之前需要明確游戲論壇APP界面的用戶需求。對游戲玩家進行網絡訪談，得知16到30歲在玩家年齡分布中占主要地位。絕大多數游戲玩家對游戲的關注范圍十分寬泛，人均經常關注的游戲有5款，人均總關注多達17款以上。在使用時長方面，部分資深用戶的日均使用時間長達2個小時，用戶通常是在碎片化時間里漫無目的地瀏覽推薦內容，并且打開APP的頻率較高，這類用戶追求在碎片化的使用過程中快樂地消磨時間。一些游戲玩家對單獨某一款游戲的歸屬度較高，會加入討論群組，并且在交流過程中聲明自己是某某游戲粉絲，表達身份標簽REF_Ref3271\r\h[13]。產品定位是綜合性游戲社區，提供一個平臺，讓玩家可以交流游戲心得、分享游戲攻略、參與游戲討論，還可以組織或參與線上/線下游戲活動。針對某一類游戲或某一游戲平臺，提供深入、專業的服務，如針對某一熱門游戲的攻略分享、賽事組織等REF_Ref3320\r\h[14]。基于用戶的游戲喜好、行為習慣等，為用戶推薦適合用戶的游戲內容、活動或玩家。該APP提供最新的游戲資訊、更新公告、版本變動等，讓玩家及時了解游戲動態。3.1.2設計內容分析“游寶”游戲APP包含多個功能區域，如論壇、賽事、資訊、個人中心等。UI設計需要確保這些功能區域的劃分清晰、易于理解，并提供便捷的導航方式，以便用戶能夠快速找到所需內容REF_Ref3342\r\h[15]。整個APP的核心是內容的分享與交流。UI設計應確保內容展示清晰、易讀，并提供豐富的交互功能，如點贊、評論、分享等，以促進用戶之間的互動。在個人中心或用戶個人空間的設計中，應注重用戶信息的展示和個性化設置。用戶應能夠方便地查看和管理自己的信息、設置偏好、管理通知等。3.2設計創意3.2.1LOGO設計解析“游寶”游戲APP的LOGO設計創意是做減法，即去除掉冗雜花哨的圖案，以最真實的樣貌面對用戶，也就是文字形式，再稍加跟游戲相關的小圖案進行一個點綴，把無聲的文字和游戲關聯起來，使人可以看到LOGO就聯想到游戲。LOGO的簡潔之美如一泓清泉，悄然涌現在用戶眼前。游戲的精髓在于情感的流淌，文字是最貼近內心的表達方式。一抹游戲元素點綴其中，如星辰點亮夜空，瞬間勾勒出游戲的世界。在這個簡潔而又富有內涵的LOGO下，游戲的奇妙之旅即將展開。3.2.2“游寶”游戲APP的圖標設計解析“游寶”游戲APP的圖標設計靈感來源是來自于微軟的Xbos游戲機手柄以及索尼的PS5游戲機手柄，以兩種手柄的樣式作為原型，將兩種手柄的風格特點進行融合，最后形成一個APP圖標。圖標中手柄的曲線勾勒出一片流暢的游戲樂土，仿佛置身于虛擬的冒險之中。手柄上的按鈕如星辰般璀璨，寓意著無盡的可能性。在這個小小的圖標中，蘊含著萬千游戲的精髓，仿佛一扇通往奇幻世界的大門。用戶觸摸手柄，即刻沉浸于游戲的魔法中，釋放心靈的冒險激情。3.2.3功能模塊分析該APP的功能模塊：登錄注冊模塊、首頁推薦模塊、交流社區模塊、游戲推薦模塊、游戲交易模塊以及“我的”設置模塊。如圖3.1所示：圖3.1APP思維導圖3.2.4主要界面設計解析啟動頁：這是用戶首次打開APP時看到的頁面，通常展示APP的Logo、標語或短暫的加載動畫。這個頁面的設計需要簡潔、快速加載，并給用戶留下良好的第一印象。導航欄：導航欄位于APP的頂部或底部，提供用戶在不同頁面和功能之間切換的途徑。導航欄的設計需要直觀、易于理解，確保用戶能夠輕松找到所需的功能。主頁：主頁是APP的核心界面，通常展示最重要的內容、功能或信息。設計主頁時需要考慮信息的層次結構、布局和視覺元素，確保用戶能夠快速了解APP的主要功能和內容。內容頁：這些頁面用于展示具體的內容或數據，如文章列表、商品列表、用戶列表等。設計這些頁面時需要考慮內容的可讀性、可訪問性和交互性，確保用戶能夠輕松地瀏覽和交互。詳情頁：詳情頁用于展示具體的內容或項目的詳細信息，如文章詳情、商品詳情、用戶資料等。設計詳情頁時需要考慮信息的呈現方式、頁面的可讀性和交互元素，以便用戶能夠深入了解內容或項目。個人中心：這些頁面用于管理用戶的個人信息、偏好設置和其他個性化功能。設計這些頁面時需要考慮功能的分類和組織方式，以及用戶的操作習慣和便利性。

4“游寶”游戲APP的UI設計與實現4.1設計原則4.1.1“游寶”游戲APP的UI設計規范整體風格與調性：色彩方面選擇符合游戲社區主題和定位的色彩方案。因為APP定位是年輕、活力，所以選擇明亮、飽滿的色彩。字體方面選擇清晰易讀、符合品牌調性的字體。考慮字體的可讀性和在不同屏幕尺寸上的顯示效果。圖標上使用簡潔、易于理解的圖標，確保用戶能夠快速識別和理解功能。布局與結構：導航欄方面選擇設計直觀、易于使用的導航欄，確保用戶可以輕松找到所需功能。并且合理安排信息層次，確保重要信息突出顯示，次要信息易于訪問。同時保持頁面結構的一致性，使用戶在不同頁面之間能夠順暢切換。內容與交互：內容展示方面確保內容清晰、易讀，并提供足夠的交互元素，如點贊、評論、分享等。在交互反饋上提供明確的交互反饋，如按鈕點擊后的狀態變化、提示信息等，以增強用戶的操作體驗。具體設計規范如圖4.1所示：圖4.1UI設計規范4.1.2“游寶”游戲APP的UI的色彩設計整個作品采用偏暖的色調，即米黃色與藍紫色的搭配，這樣兩種顏色互補，并且具有一定的辨識度，提高用戶使用舒適度的同時還符合APP的產品定位。在這個色調的基礎上，又加入了一些微妙的變化，如在按鈕上使用了淡淡的金色漸變，給人一種華麗而又不張揚的感覺。界面上的圖標也經過重新設計，更加簡潔明了，使得用戶操作更為順暢。整體風格與之前相比更加成熟，更能吸引用戶的目光，為產品的推廣增添了不少利好。4.2設計步驟4.2.1UI關系設計“游寶”游戲APP的UI關系設計在于組織和呈現APP中的各個元素和組件，以形成一個直觀、連貫且易于理解的用戶界面。設計清晰的元素層級關系，使用戶能夠快速理解不同元素之間的從屬和關聯。主導航欄位于頁面的頂部，提供主要的分類和入口；子導航或面包屑導航可以顯示當前位置的上下文。信息架構：建立合理的信息架構，將內容、功能和信息組織成易于理解和導航的結構。確保每個頁面都有清晰的入口和出口，使用戶能夠輕松地從一個頁面跳轉到另一個頁面REF_Ref3421\r\h[16]。4.2.2UI布局設計導航欄位于APP的底部，提供用戶在不同頁面和功能之間切換的途徑。主頁是APP的核心界面，通常展示最重要的內容、功能或信息。設計主頁時需要考慮信息的層次結構、布局和視覺元素，確保用戶能夠快速了解APP的主要功能和內容。頁面用于展示具體的內容或數據，如文章列表、商品列表、用戶列表等。設計這些頁面時需要考慮內容的可讀性、可訪問性和交互性，確保用戶能夠輕松地瀏覽和交互。具體實現效果如圖4.2所示：圖4.2UI布局4.3視覺設計與實現4.3.1LOGO設計與實現1、LOGO原型圖設計與實現游寶游戲APP的LOGO的設計前衛大膽，而又時尚簡約，選擇了直接用藝術文字作為主要畫面構成，在加上游戲機手柄的圖案進行點綴，這樣設計的想法是在于，想讓用戶能夠直觀的看到APP的名字，并在心里留下印象，具體設計如圖4.3所示：圖4.3LOGO2、LOGO的設計與實現 “游寶”游戲APP的LOGO設計采用當下最流行的簡約風，整體色調選用偏暖色的米黃色打低，配合深藍色的字體，形成鮮明的色彩對比，可以對用戶產生強烈的視覺沖擊，使人記憶猶新，具體效果如圖4.4所示：圖4.4彩色LOGO4.3.2圖標設計與實現 1、圖標原型圖設計與實現APP的圖標是必不可少的主要組成部件，在這一方面，單獨設計一套屬于自己的圖標尤為關鍵，這樣做的好處有三，第一便是提高辨識度，加強用戶對APP的印象，第二就是提高APP整體的統一性，第三點就是可以避免與其他APP撞車的風險。具體的實現方法是，先觀察市面上用戶比較多的APP的圖標樣式，再根據“游寶”游戲APP的特點，設計出符合游戲特征的圖標草圖，最后再用Photoshop優化一下這些草圖，形成最后的圖標原型圖，具體效果如圖4.5所示：圖4.5APP圖標原型圖2、圖標的設計與實現 依據先前設計的原型進行進一步的細節完善，包括調整圖形的形狀、色彩和線條的粗細，以確保圖標不僅能有效地傳遞信息、提升視覺吸引力，還能為品牌或產品帶來獨一無二的魅力和識別度。此外，設計包括兩種配色方案，分別是未點擊時的中空顯示樣式和點擊后的實心顯示樣式，這樣的設計幫助用戶明確區別各個頁面，讓整個界面更加貼近大眾審美，APP圖標如圖4.6所示：圖4.6APP圖標高保真4.3.3主頁界面設計與實現1、原型圖設計與實現作為APP的主頁，也是主要的資訊頁，承擔著APP大部分的功能模塊，其中上半部分有搜索，“我的”消息，動態等一些分頁的跳轉按鈕，中間設計為主要的展示頁面，用于展示根據用戶使用偏好推薦的文章，攻略，新聞等等，最下方為貫穿整個APP的導航欄位置，可以跳轉到其他頁面，整個APP的主頁設計具體如圖4.7所示：圖4.7APP設計主頁原型圖2、UI界面設計與實現 根據原型圖制作高保真的UI設計圖以及需要的素材制作和收集。最終在UI界面的制作過程中對原型圖中的排版進行適當的調整從而使得UI界面更加美觀且合理的展示給用戶，具體效果如圖4.8所示：圖4.8APP設計主頁高保真4.3.4社區頁界面設計與實現1、原型圖設計與實現社區頁面的設計，這一頁是APP四大主頁之一的社區頁，整體的設計與第一個主頁區別不大，最大的不同在于頂部的導航欄的選擇變了，這里可以根據不同用戶的喜好推薦適合的社區，方便在用戶找到自己感興趣的社區，同時提高用戶在APP上的歸屬感。具體的設計內容如圖4.9：圖4.9社區頁設計原型圖2、UI界面設計與實現依據原始設計草圖，創建高保真的用戶界面設計圖及所需的素材搜集與制作。在用戶界面的最終制作階段，適度調整原始草圖中的布局，以提升用戶界面的美觀度和合理性，確保展示效果更佳，具體如圖4.10所示：圖4.10社區頁設計高保真4.3.5直播頁界面設計與實現1、原型圖設計與實現直播是目前互聯網最主流的變現方式，幾乎所有視頻平臺都可以開啟直播，那“游寶”游戲APP也不例外，加入了直播功能，UI界面設計方面參考了市面上主流的幾款直播軟件進行設計，如圖4.11和4.12所示：圖4.11直播頁原型圖圖4.12直播詳情頁原型圖2、UI界面設計與實現基于初始的設計草圖，構建了高度真實的用戶界面設計圖，并收集和制作了所需的素材。在用戶界面的最后設計階段，適當地調整了原始草圖的布局，目的是為了增強用戶界面的視覺吸引力和合理性，從而確保更出色的展示效果，具體細節請參考圖4.13和4.14所示：圖4.13直播頁高保真圖4.14直播詳情頁高保真4.3.6購買頁界面設計與實現1、原型圖設計與實現游戲購買是“游寶”APP獨具匠心的一頁，因為現階段網絡十分發達，玩家想要游玩到正版游戲，需要在網絡平臺購買，而“游寶”游戲APP恰恰有這個功能，可以為玩家提供游戲購買的便利，避免玩家在多個APP之間來回切換浪費時間，具體如圖4.15所示：圖4.15游戲購買頁原型圖2、UI界面設計與實現在初步設計草圖的基礎上，創建了一個高度逼真的用戶界面設計圖，并對所需的素材進行了收集和制作。在用戶界面的最終設計階段，對原始草圖的布局進行了適當的調整，這樣做的目的是為了提升用戶界面的視覺吸引力和合理性，從而確保展示效果更加出色，具體的細節可以參考圖4.16所示：圖4.16游戲購買頁高保真4.3.7“我的”頁界面設計與實現1、原型圖設計與實現“我的”這一頁，是幾乎所有APP都有的一頁，包含了個人數據，設置，訂單系統，稿件系統等一系列功能，其地位不可謂不重要。所以對于設計至關重要，既不能太花哨復雜，這樣會是用戶的使用難度加大。又不能設計得太過于簡單，太過于簡單反而會浪費大量的屏幕空間，使得本就不是很寬裕的手機顯示畫面變得雪上加霜，所以在這一頁的設計上，選擇了簡約而不失大方的設計，具體如圖4.17所示：圖4.17“我的”頁原型圖2、UI界面設計與實現根據原型圖制作高保真的UI設計圖以及需要的素材制作和收集。最終在UI界面的制作過程中對原型圖中的排版進行適當的調整從而使得UI界面更加美觀且合理的展示給用戶，精心選擇了顏色、字體和圖標，使得整體風格更加統一和吸引人。同時，在布局上注重了用戶操作的便捷性，讓用戶能夠更加輕松地找到用戶所需要的功能。這樣的設計不僅提升了產品的美觀度，也增強了用戶體驗的舒適度，為產品的成功打下了堅實的基礎。具體如圖4.18所示：圖4.18“我的”頁高保真4.3.8游戲庫頁界面設計與實現原型圖設計與實現游戲庫這一頁“游寶”游戲APP主打的一個功能頁面，也是最重要的頁面之一，可以說是整個APP最主要的盈利模塊，整個頁面集成了包括：游戲推薦、游戲促銷、游戲抽獎、游戲道具交易等十余個功能，具體如圖4.19所示：圖4.19游戲庫頁原型圖UI界面設計與實現依據原型圖，制作出高保真度的用戶界面設計圖，并搜集及制作所需素材。在用戶界面制作的最后階段，對原型圖的布局進行必要的調整，以確保用戶界面的美觀性和合理性得到更好的呈現，具體效果如圖4.20所示：圖4.20游戲庫頁高保真4.3.9交易頁界面設計與實現1、原型圖設計與實現現階段游戲賬戶，游戲道具等虛擬資產已經受到法律保護，而由此產生的虛擬道具，虛擬賬戶等虛擬資產的交易也是玩家們所需要的功能，“游寶”APP針對這項玩家需求，也推出了自己的虛擬道具交易功能，在這個頁面玩家可以自由的選擇需要交易的游戲和道具進行交易，具體設計如圖4.21所示：圖4.21交易頁原型圖2、UI界面設計與實現根據之前所設計的原型圖，進行更深層次的精細化打磨，再加上一些圖片素材，調整形狀、顏色、線條粗細等元素，使頁面更加符合大眾審美，同時兼顧功能性，既能提高用戶體驗，又能使用戶在心里留下較深的印象，具體設計如圖4.22所示：圖4.22交易頁高保真4.3.10消息頁界面設計與實現1、原型圖設計與實現“游寶”游戲APP作為一款主打社區服務類的APP，消息通知這一頁肯定是必不可少的，在這一頁的設計當中，才用了較為簡潔化的設計理念，用戶既不會因為繁雜的消息通知而錯過重要消息，也不會為找不到所需要的消息列表而煩惱，可謂是兼顧美觀與功能性的上佳設計。具體設計如圖4.23所示：圖4.23消息頁原型圖2、UI界面設計與實現依據先前設計的草圖，將設計靈感進一步細化和完善設計，通過添加圖像素材并調整形狀、顏色、線條的粗細等因素，使得頁面不僅美觀且符合公眾審美，而且功能全面，旨在增強用戶體驗并在用戶心中留下深刻印象。具體設計如圖4.24所示：圖4.24消息頁高保真4.3.11添加好友頁界面設計與實現1、原型圖設計與實現作為一款有社區性質的APP，社交屬性這一塊肯定是不可或缺的，所以添加好友頁面也是必須存在的一頁，這一頁的設計是在原本的消息頁面之上，做一個虛化處理，接著從下方彈出的一個浮動頁面，這樣的設計有一大好處就是，給用戶一種呼吸感，讓用戶的使用體驗更上一層樓，如圖4.25所示：圖4.25添加好友頁原型圖2、UI界面設計與實現根據之前的原型圖設計，將設計方向定為對原型圖進行更加精細化的調整和優化，通過添置圖形元素以及修改形狀、顏色和線條粗細等方面，達到既美觀又能滿足大眾審美標準的頁面效果，目的是提升用戶的使用體驗，并讓用戶對此留有深刻的記憶。具體的設計方案如圖4.26所示：圖4.26添加好友頁高保真4.3.12設置頁界面設計與實現1、原型圖設計與實現設置頁是每一個APP都必不可少的一頁，重要性不言而喻，因為APP設計師的想法不能代表所有用戶的使用習慣，所以這一頁的存在就是減少設計師與用戶之間隔閡，使用戶可以調整整個APP，使這款APP符合自己的使用習慣，具體如圖4.27所示：圖4.27設置頁原型圖2、UI界面設計與實現在原型設計的基礎上，深入細化和打磨，通過添加圖片素材、調節形狀、顏色及線條的粗細等元素，對UI界面的排版作出精心調整。這一過程不僅讓UI界面的美觀度和合理性得到提升，更使得頁面與大眾審美相契合，同時滿足功能性需求。這樣既能增強用戶體驗，也能在用戶心中留下深刻的印象，如圖4.28所示：圖4.28設置頁高保真4.3.13交互設計與實現整個“游寶”游戲APP的界面設計都是可以進行點擊跳轉的交互動作的，只需要點擊界面上所示的按鈕，即可跳轉的對應的頁面。這一系列的動作的實現主要歸功于Figma強大的內置交互系統，只需要把想跳轉的頁面相互連接即可實現此功能，比較類似于word中的超鏈接，部分效果如圖4.29所示：圖4.29部分界面交互示意圖

5總結與展望5.1總結整個“游寶”游戲APP的UI設計在上文中已經完全介紹，是一款集游戲資料、游戲交流、游戲交易、攻略查找、游戲測評、玩家社群于一身的多功能游戲社區類軟件，想實現這一切并不容易，需要有較強的設計功底，同時對各類設計軟件熟悉。“游寶”游戲APP對比同品類的APP的話，其優勢在于集百家之長，把原本需要在多個軟件中進行切換的功能做到了同一個軟件上，提高了用戶在本軟件上的停留率，停留率的提高同時也意味著使用率的提高，使用率提高就更容易為公司帶來收益。而“游寶”游戲APP本身具有與大部分APP共同的使用邏輯以及表達語言，這樣會大大降低用戶的學習成本，從而更有利于吸收新用戶，其本身自帶交易系統的特點，也為創收提供了更多的選擇。基于以上觀點，“游寶”游戲APP是一款全新的，具有商業價值的APP，從創新性以及實用性方面，該APP是有意義的。5.2展望當然，作為一款APP，此APP也不是完美到面面俱到的，也有著一些缺陷，比如因為集成了多種功能，那在后臺代碼方面，可能有些功能難以實現，或者優化難度高，易卡頓，這也是APP美中不足的地方，所以希望在未來的某一天，隨著手機配置的和軟件架構的提升，這些問題會迎刃而解。

參考文獻任葆軒.颯颯救援APP的扁平化界面設計的表現特征[D].哈爾濱師范大學,2019.啟駿.UI設計的交互性與界面視覺設計研究[J].數字通信世界,2022(09):56-58.李峻,朱琰翎