PRODUCT互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計與開發(fā)主講人：馬勝銘時間：20266-4AIGC輔助互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計與開發(fā)使用AIGC輔助優(yōu)化互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計使用AIGC進行互聯(lián)網(wǎng)產(chǎn)品開發(fā)01使用AIGC輔助優(yōu)化互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計AIGC輔助互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計與開發(fā)應(yīng)用場景使用AIGC輔助優(yōu)化互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計UXbot交互原型生成1可以通過向UXbot輸入產(chǎn)品基本需求、功能流程等關(guān)鍵信息，快速生成具有交互功能的原型。UXbot能夠基于其智能算法和交互設(shè)計原則，自動生成頁面布局、元素交互效果等，為團隊提供一個可操作的初始交互原型，大大節(jié)省了從零開始設(shè)計交互原型的時間成本，提高了設(shè)計的啟動效率。交互動作優(yōu)化2UXbot可以對原型中的交互動作進行智能分析和優(yōu)化建議。它能夠識別交互流程中的潛在問題，如操作步驟過于復(fù)雜、交互反饋不及時等，并提供優(yōu)化方案。通過優(yōu)化交互動作，使產(chǎn)品的交互更加自然、流暢，提升用戶體驗。用戶體驗測試與反饋3UXbot能夠模擬用戶行為對交互原型進行測試，生成用戶體驗測試報告。報告中包含用戶在使用產(chǎn)品過程中的操作路徑、停留時間、操作錯誤率等關(guān)鍵數(shù)據(jù)，幫助團隊直觀了解交互設(shè)計的優(yōu)缺點。實踐操作案例1：使用UXbot進行高校圖書館小程序的交互設(shè)計與優(yōu)化使用AIGC輔助優(yōu)化互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計通過前期的規(guī)劃與設(shè)計，產(chǎn)品經(jīng)理Salmon已經(jīng)完成了小程序草圖和低保真界面的設(shè)計，準備設(shè)計開發(fā)高保真的蘇信圖書館小程序，并且添加元件以及界面之間的交互，讓其更加符合用戶的使用習(xí)慣和開發(fā)目標。任務(wù)情境實踐操作案例1：使用UXbot進行高校圖書館小程序的交互設(shè)計與優(yōu)化使用AIGC輔助優(yōu)化互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計步驟一：登錄UXbot官網(wǎng)，開啟新對話。如圖所示。（1）借助UXbot創(chuàng)建高保真交互原型實踐操作案例1：使用UXbot進行高校圖書館小程序的交互設(shè)計與優(yōu)化使用AIGC輔助優(yōu)化互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計步驟二：創(chuàng)建項目，如圖所示。（1）借助UXbot創(chuàng)建高保真交互原型UXbot提供了三種創(chuàng)建項目的方法，分別為AI文字生成產(chǎn)品、參考圖片生成界面、從模板庫選擇。如果通過前面的項目完成了低保真原型的制作，可以通過參考圖片生成界面。此處為了更完整地應(yīng)用UXbot制作高保真原型，選擇使用“AI文字生成產(chǎn)品”功能創(chuàng)建一個新項目，如圖所示。實踐操作案例1：使用UXbot進行高校圖書館小程序的交互設(shè)計與優(yōu)化使用AIGC輔助優(yōu)化互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計步驟三：輸入產(chǎn)品信息（1）借助UXbot創(chuàng)建高保真交互原型從下圖可以看出創(chuàng)建項目包含四個步驟：產(chǎn)品信息——生成Workflow——選擇產(chǎn)品風(fēng)格——生成產(chǎn)品界面，如圖6-71所示。在產(chǎn)品信息區(qū)域，根據(jù)需要選擇合適的平臺類型、分辨率和撰寫產(chǎn)品描述。此處由于制作的是小程序，所以選擇平臺類型為手機APP，分辨率為402x874，產(chǎn)品描述為：蘇信圖書管理系統(tǒng)是用來為在校大學(xué)生提供圖書借閱和座位預(yù)約的系統(tǒng)，其中圖書借閱系統(tǒng)需要包含智能搜索、圖書詳情頁、一鍵借閱和個人借閱管理；座位智慧預(yù)約系統(tǒng)需要包含3D樓層導(dǎo)航、智能選座系統(tǒng)、時段化預(yù)約和動態(tài)簽到機制。如果不確定那個如何撰寫產(chǎn)品信息，可以單擊“用案例體驗一下”按鈕，會生成標準的產(chǎn)品信息文案，可以參考修改。實踐操作案例1：使用UXbot進行高校圖書館小程序的交互設(shè)計與優(yōu)化使用AIGC輔助優(yōu)化互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計步驟四：完成Workflow工作流的設(shè)置與優(yōu)化（1）借助UXbot創(chuàng)建高保真交互原型通過產(chǎn)品信息描述會生成各個頁面之間的工作流關(guān)系，如果自動生成的工作流內(nèi)容有誤差，可以選擇需要優(yōu)化的流程進行修改優(yōu)化。實踐操作案例1：使用UXbot進行高校圖書館小程序的交互設(shè)計與優(yōu)化使用AIGC輔助優(yōu)化互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計步驟五：選擇合適的產(chǎn)品風(fēng)格（1）優(yōu)化產(chǎn)品交互動作UXbot提供了多種產(chǎn)品風(fēng)格，可以根據(jù)實際情況和產(chǎn)品用戶畫像選擇合適的產(chǎn)品風(fēng)格。此處選擇“經(jīng)典學(xué)院”風(fēng)格，如圖所示。選擇風(fēng)格后單擊“生成產(chǎn)品界面”即可完成原型的初步制作，如圖所示實踐操作案例1：使用UXbot進行高校圖書館小程序的交互設(shè)計與優(yōu)化使用AIGC輔助優(yōu)化互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計步驟一：選擇需要優(yōu)化的元件或界面（2）優(yōu)化產(chǎn)品交互動作通過預(yù)覽最終的原型發(fā)現(xiàn)，在3D流程導(dǎo)航頁面中“智能推薦座位”按鈕的交互存在一定的問題，當單擊時，可選擇的座位動畫效果不夠明顯，因此選中“智能推薦座位”按鈕，重新撰寫描述詞：單擊智能推薦座位時，將推薦的可預(yù)約座位變換顏色，并動態(tài)展示變換效果。如圖所示。單擊“重新生成”則會根據(jù)描述重新優(yōu)化交互效果。實踐操作案例1：使用UXbot進行高校圖書館小程序的交互設(shè)計與優(yōu)化使用AIGC輔助優(yōu)化互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計步驟二：預(yù)覽優(yōu)化效果（2）優(yōu)化產(chǎn)品交互動作單擊右上角“預(yù)覽”按鈕，鼠標單擊“智能推薦座位”按鈕，可以看到淡綠色的可選座位顏色變化，并且有明顯的動態(tài)效果，更易于用戶使用和查看。其他界面或按鈕的交互可以參照上邊的操作步驟進行優(yōu)化，最終完成蘇信圖書館借書高保真系統(tǒng)的制作。適老化設(shè)計貼心服務(wù)對于當代大學(xué)生來說，在進行互聯(lián)網(wǎng)產(chǎn)品開發(fā)時，特別需要關(guān)注老年人等特殊群體的需求，要認識到為特殊群體設(shè)計產(chǎn)品的重要性，培養(yǎng)自己的社會責(zé)任感和愛心，將關(guān)愛他人、服務(wù)社會的理念貫徹到未來的產(chǎn)品開發(fā)中。另外要深入了解用戶需求和使用習(xí)慣。這不僅體現(xiàn)對用戶的尊重，只有將用戶放在中心位置，才能設(shè)計出有價值的產(chǎn)品，還與社會主義核心價值觀中的“以人民為中心”的發(fā)展思想相契合。02使用AIGC進行互聯(lián)網(wǎng)產(chǎn)品開發(fā)AIGC輔助互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計與開發(fā)應(yīng)用場景使用AIGC進行互聯(lián)網(wǎng)產(chǎn)品開發(fā)扣子空間（Coze）智能體創(chuàng)建與集成1扣子空間（Coze）可快速創(chuàng)建智能體，并將其集成到互聯(lián)網(wǎng)產(chǎn)品中。平臺提供了簡潔易用的界面和豐富的開發(fā)工具，即使不具備深厚人工智能專業(yè)知識的開發(fā)人員，也能高效地構(gòu)建智能體，為產(chǎn)品賦予智能問答、智能推薦、自動化流程處理等人工智能能力，豐富產(chǎn)品功能，提升用戶對產(chǎn)品的滿意度和依賴度。智能功能開發(fā)與優(yōu)化2在開發(fā)過程中，扣子空間（Coze）的開發(fā)平臺可以搭建完整的應(yīng)用?？圩又写罱ǖ腁I應(yīng)用具備完整業(yè)務(wù)邏輯和可視化用戶界面，是一個獨立的AI項目。通過扣子開發(fā)的AI應(yīng)用程序可以進行輸入和輸出，可以根據(jù)既定的業(yè)務(wù)邏輯和流程完成一系列簡單或復(fù)雜的任務(wù)，例如AI搜索、翻譯工具、飲食記錄等。開發(fā)效率提升與成本降低3該平臺的一站式開發(fā)環(huán)境整合了豐富的資源和工具，簡化了開發(fā)流程，減少了開發(fā)人員在搭建環(huán)境、配置參數(shù)等基礎(chǔ)工作上的時間消耗。其高效的開發(fā)模式和自動化測試工具，能夠快速發(fā)現(xiàn)并修復(fù)問題，縮短開發(fā)周期。此外，平臺還提供了靈活的擴展功能，方便開發(fā)人員根據(jù)產(chǎn)品發(fā)展需求逐步添加和升級智能功能，避免了一次性大規(guī)模投入，有效降低了開發(fā)成本。實踐操作案例1：使用扣子（Coze）開發(fā)AI應(yīng)用使用AIGC進行互聯(lián)網(wǎng)產(chǎn)品開發(fā)隨著人工智能技術(shù)的飛速發(fā)展，眾多AIGC（人工智能生成內(nèi)容）工具和平臺應(yīng)運而生，例如扣子。這些平臺能夠助力開發(fā)者構(gòu)建包含智能體的智能化應(yīng)用。在當今社會和各行業(yè)快速發(fā)展的背景下，對于能夠勝任場景化應(yīng)用的人才需求日益迫切。本文旨在通過扣子開發(fā)AI應(yīng)用的案例，詳細講解開發(fā)流程，以啟發(fā)學(xué)生掌握相關(guān)技能并拓展思維。任務(wù)情境實踐操作案例1：使用扣子（Coze）開發(fā)AI應(yīng)用使用AIGC進行互聯(lián)網(wǎng)產(chǎn)品開發(fā)步驟一：創(chuàng)建AI應(yīng)用項目（1）設(shè)計你的應(yīng)用功能登錄扣子開發(fā)平臺。在左側(cè)菜單欄，單擊“創(chuàng)建”按鈕，創(chuàng)建一個“應(yīng)用”，如圖所示。實踐操作案例1：使用扣子（Coze）開發(fā)AI應(yīng)用使用AIGC進行互聯(lián)網(wǎng)產(chǎn)品開發(fā)步驟一：創(chuàng)建AI應(yīng)用項目（1）設(shè)計你的應(yīng)用功能在應(yīng)用模板頁面，單擊“創(chuàng)建空白應(yīng)用”實踐操作案例1：使用扣子（Coze）開發(fā)AI應(yīng)用使用AIGC進行互聯(lián)網(wǎng)產(chǎn)品開發(fā)步驟一：創(chuàng)建AI應(yīng)用項目（1）設(shè)計你的應(yīng)用功能輸入應(yīng)用名稱，并單擊圖標旁的AI圖標使用AI自動生成一個圖標。然后單擊確定，如圖所示。應(yīng)用創(chuàng)建成功后，會直接進入到應(yīng)用的集成開發(fā)環(huán)境(IDE)。實踐操作案例1：使用扣子（Coze）開發(fā)AI應(yīng)用使用AIGC進行互聯(lián)網(wǎng)產(chǎn)品開發(fā)步驟二：編排業(yè)務(wù)邏輯（1）設(shè)計你的應(yīng)用功能在業(yè)務(wù)邏輯頁面，找到工作流，然后單擊“+”號，新建工作流，如圖所示輸入工作流名稱和說明，然后單擊確認。工作流名稱只支持字母、數(shù)字和下劃線，且必須以字母開頭實踐操作案例1：使用扣子（Coze）開發(fā)AI應(yīng)用使用AIGC進行互聯(lián)網(wǎng)產(chǎn)品開發(fā)步驟二：編排業(yè)務(wù)邏輯（1）設(shè)計你的應(yīng)用功能在工作流畫布，單擊開始節(jié)點的連接線或畫布下方的添加節(jié)點按鈕，然后依次添加插件、大模型、圖像生成節(jié)點，并完成連線實踐操作案例1：使用扣子（Coze）開發(fā)AI應(yīng)用使用AIGC進行互聯(lián)網(wǎng)產(chǎn)品開發(fā)步驟二：編排業(yè)務(wù)邏輯（1）設(shè)計你的應(yīng)用功能工作流的整體結(jié)構(gòu)如下圖所示然后依次單擊工作流的每個部分，設(shè)置詳細的參數(shù)實踐操作案例1：使用扣子（Coze）開發(fā)AI應(yīng)用使用AIGC進行互聯(lián)網(wǎng)產(chǎn)品開發(fā)步驟二：編排業(yè)務(wù)邏輯（1）設(shè)計你的應(yīng)用功能為了保證業(yè)務(wù)邏輯實現(xiàn)符合預(yù)期，單擊試運行測試工作流的執(zhí)行，如圖所示。在完成業(yè)務(wù)邏輯搭建并通過測試后，就可以開始用戶界面搭建了。實踐操作案例1：使用扣子（Coze）開發(fā)AI應(yīng)用使用AIGC進行互聯(lián)網(wǎng)產(chǎn)品開發(fā)步驟三：搭建用戶界面（1）設(shè)計你的應(yīng)用功能扣子提供了可視化的用戶界面搭建能力，可以通過拖拉拽的方式搭建一個用戶界面，無需寫一行代碼。在應(yīng)用IDE，單擊頁面上方的用戶界面頁簽。選擇合適的UI搭建類型，然后單擊開始搭建實踐操作案例1：使用扣子（Coze）開發(fā)AI應(yīng)用使用AIGC進行互聯(lián)網(wǎng)產(chǎn)品開發(fā)步驟三：搭建用戶界面（1）設(shè)計你的應(yīng)用功能添加頁面組件，完成頁面搭建。具體使用的組件和Axure類似，將不再詳細介紹實踐操作案例1：使用扣子（Coze）開發(fā)AI應(yīng)用使用AIGC進行互聯(lián)網(wǎng)產(chǎn)品開發(fā)步驟四：為用戶界面添加事件和設(shè)置參數(shù)（1）設(shè)計你的應(yīng)用功能搭建好頁面后，就可以通過配置事件和添加數(shù)據(jù)實現(xiàn)業(yè)務(wù)邏輯與用戶頁面的聯(lián)動了。具體的參數(shù)配置如下圖所示。實踐操作案例1：使用扣子（Coze）開發(fā)AI應(yīng)用使用AIGC進行互聯(lián)網(wǎng)產(chǎn)品開發(fā)步驟四：為用戶界面添加事件和設(shè)置參數(shù)（1）設(shè)計你的應(yīng)用功能完成參數(shù)設(shè)置后，單擊右上角的“預(yù)覽”按鈕，即可查看最終效果。如圖所示。實訓(xùn)練習(xí)AIGC輔助互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計與開發(fā)實訓(xùn)背景江蘇信息職業(yè)技術(shù)學(xué)院作為一所現(xiàn)代化的高等學(xué)府，擁有豐富的校園活動和社團文化。為了更好地服務(wù)師生、提升校園活動的組織效率和參與度，學(xué)校計劃開發(fā)一款校園活動助手APP。該APP將涵蓋活動發(fā)布、報名管理、活動提醒、現(xiàn)場簽到、活動評價等功能，旨在打造一個便捷、高效的校園活動平臺，促進師生之間的交流與互動，豐富校園文化生活。01實訓(xùn)要求1.學(xué)生分組：學(xué)生分為若干組，每組4-5人，模擬互聯(lián)網(wǎng)產(chǎn)品開發(fā)團隊，負責(zé)完成校園活動助手APP的交互設(shè)計與開發(fā)任務(wù)。2.需求分析與原型設(shè)計：各小組深入調(diào)研校園活動的組織流程和師生參與活動的需求，完成校園活動助手APP的需求分析報告，并使用專業(yè)工具繪制低保真和高保真原型。3.交互設(shè)計實現(xiàn)：基于原型，運用所學(xué)的交互設(shè)計原則和方法，完成APP的交互設(shè)計，包括事件與用例定義、動作與交互樣式設(shè)計、邏輯條件與變量應(yīng)用、動態(tài)面板與中繼器的應(yīng)用等。4.AIGC輔助優(yōu)化：借助AIGC工具（如UXbot）優(yōu)化交互設(shè)計，提升設(shè)計效率和質(zhì)量，并探索AIGC在產(chǎn)品開發(fā)中的應(yīng)用。5.提交實訓(xùn)報告，需包含開發(fā)的背景、目的和意義、需求分析、原型設(shè)計、交互設(shè)計實現(xiàn)、AIGC應(yīng)用和原型評審與優(yōu)化；完成小組匯報PPT，需展示此次實訓(xùn)的主要過程與成果結(jié)論。02練習(xí)：蘇信校園活動助手APP交互設(shè)計與開發(fā)實訓(xùn)思路1.需求調(diào)研階段：小組成員通過問卷調(diào)查、訪談等方式，收集學(xué)校各社團、活動組織方以及廣大師生對于校園活動APP的功能需求、使用習(xí)慣、期望體驗等方面的信息。