PRODUCT互聯(lián)網(wǎng)產(chǎn)品原型設(shè)計(jì)主講人：馬勝銘時(shí)間：20265-5

AIGC輔助互聯(lián)網(wǎng)產(chǎn)品原型設(shè)計(jì)使用AIGC繪制原型草圖使用AIGC輔助原型設(shè)計(jì)01使用AIGC繪制原型草圖AIGC輔助互聯(lián)網(wǎng)產(chǎn)品原型設(shè)計(jì)應(yīng)用場(chǎng)景使用AIGC繪制原型草圖Deepseek創(chuàng)意構(gòu)思1設(shè)計(jì)概念生成2用戶故事與場(chǎng)景模擬3即夢(mèng)AI快速繪制草圖1線框圖制作2實(shí)踐操作案例1：使用Deepseek+即夢(mèng)AI進(jìn)行高校圖書(shū)館小程序原型草圖的繪制使用AIGC繪制原型草圖蘇信圖書(shū)館目前準(zhǔn)備開(kāi)發(fā)一款線上借書(shū)和座位預(yù)定的小程序，產(chǎn)品經(jīng)理Salmon想通過(guò)借助AIGC工具幫助提供一些設(shè)計(jì)靈感，并輔助繪制原型草圖，從而方便后續(xù)進(jìn)行分享匯報(bào)使用。任務(wù)情境實(shí)踐操作案例1：使用Deepseek+即夢(mèng)AI進(jìn)行高校圖書(shū)館小程序原型草圖的繪制使用AIGC繪制原型草圖步驟一：進(jìn)入Deepseek官網(wǎng)進(jìn)行提問(wèn)。如圖所示。（1）讓Deepseek提供原型設(shè)計(jì)結(jié)構(gòu)創(chuàng)意實(shí)踐操作案例1：使用Deepseek+即夢(mèng)AI進(jìn)行高校圖書(shū)館小程序原型草圖的繪制使用AIGC繪制原型草圖步驟二：進(jìn)行提問(wèn)（1）讓Deepseek提供原型設(shè)計(jì)結(jié)構(gòu)創(chuàng)意在輸入框中，輸入提示詞：作為資深的互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)經(jīng)理，需要為江蘇信息職業(yè)技術(shù)學(xué)院設(shè)計(jì)一款圖書(shū)館借書(shū)和座位預(yù)約的小程序，請(qǐng)為小程序設(shè)計(jì)開(kāi)發(fā)功能界面。生成結(jié)果如下：實(shí)踐操作案例1：使用Deepseek+即夢(mèng)AI進(jìn)行高校圖書(shū)館小程序原型草圖的繪制使用AIGC繪制原型草圖步驟一：繼續(xù)進(jìn)行提問(wèn)（2）將上述提供的建議界面轉(zhuǎn)化成即夢(mèng)AI可用的提示詞在輸入框中，輸入提示詞：現(xiàn)在你準(zhǔn)備各個(gè)功能模塊的描述，利用即夢(mèng)AI生成原型草圖，請(qǐng)你針對(duì)圖書(shū)借閱系統(tǒng)的首頁(yè)、圖書(shū)詳情頁(yè)頁(yè)面、座位智能選座系統(tǒng)頁(yè)面的描述，將描述轉(zhuǎn)化為即夢(mèng)AI生圖的提示詞。生成結(jié)果如下：實(shí)踐操作案例1：使用Deepseek+即夢(mèng)AI進(jìn)行高校圖書(shū)館小程序原型草圖的繪制使用AIGC繪制原型草圖步驟一：進(jìn)入登錄即夢(mèng)AI官網(wǎng)。（3）利用即夢(mèng)AI進(jìn)行草圖生成在即夢(mèng)官網(wǎng)選擇“圖片生成”功能，選擇合適的尺寸和分辨率。此處選擇默認(rèn)的1:1比例、標(biāo)清，如圖所示。實(shí)踐操作案例1：使用Deepseek+即夢(mèng)AI進(jìn)行高校圖書(shū)館小程序原型草圖的繪制使用AIGC繪制原型草圖步驟二：進(jìn)行提問(wèn)（3）利用即夢(mèng)AI進(jìn)行草圖生成在輸入框中，將上文生成的提示詞一個(gè)個(gè)粘貼到對(duì)話框：手繪線稿草圖,圖書(shū)館小程序首頁(yè),低保真線框單色線條,無(wú)背景--頂部：搜索欄（左側(cè)放大鏡圖標(biāo)+"搜索圖書(shū)/座位"占位文字）--中部：4個(gè)功能入口大按鈕（掃碼借書(shū)圖標(biāo)+文字、圖書(shū)檢索圖標(biāo)+文字、座位預(yù)約圖標(biāo)+文字、我的借閱圖標(biāo)+文字），2x2網(wǎng)格布局--下方：功能區(qū)標(biāo)題"熱門(mén)推薦"+橫向滾動(dòng)3個(gè)圖書(shū)卡片（簡(jiǎn)筆畫(huà)封面占位塊+書(shū)名標(biāo)簽）--底部：Tab欄（首頁(yè)/發(fā)現(xiàn)/個(gè)人中心圖標(biāo)+文字）組件帶手寫(xiě)標(biāo)注，線條輕微抖動(dòng)感，留白30%。實(shí)踐操作案例1：使用Deepseek+即夢(mèng)AI進(jìn)行高校圖書(shū)館小程序原型草圖的繪制使用AIGC繪制原型草圖步驟三：即夢(mèng)生成的結(jié)果如下（3）利用即夢(mèng)AI進(jìn)行草圖生成即夢(mèng)默認(rèn)會(huì)生成4個(gè)效果圖，如圖所示，可以根據(jù)生成的效果圖選擇一個(gè)合適的草圖進(jìn)行保存。參照上邊的兩個(gè)步驟，依次將圖書(shū)詳情頁(yè)和智能選座系統(tǒng)的提示詞輸入即夢(mèng)AI的對(duì)話框，生成效果圖。最后選擇合適的效果圖。02使用AIGC輔助原型設(shè)計(jì)AIGC輔助互聯(lián)網(wǎng)產(chǎn)品原型設(shè)計(jì)應(yīng)用場(chǎng)景使用AIGC輔助原型設(shè)計(jì)摹客快速生成低保真原型圖1借助摹客的AI功能，產(chǎn)品經(jīng)理或設(shè)計(jì)師只需輸入產(chǎn)品基本需求、功能結(jié)構(gòu)等關(guān)鍵信息，即可快速生成低保真原型圖。這為設(shè)計(jì)團(tuán)隊(duì)提供了初始框架，大大節(jié)省了從空白頁(yè)面開(kāi)始構(gòu)思和繪制的時(shí)間成本，提高了設(shè)計(jì)的啟動(dòng)效率。智能布局與元素推薦2摹客能夠根據(jù)產(chǎn)品類型和用戶需求，智能推薦合理的頁(yè)面布局方案以及常用UI元素。它基于大量的設(shè)計(jì)數(shù)據(jù)和模式識(shí)別，為原型設(shè)計(jì)中的界面排版、元素選擇提供參考建議，幫助設(shè)計(jì)師設(shè)計(jì)出更符合用戶體驗(yàn)和設(shè)計(jì)規(guī)范的低保真原型，提升原型的專業(yè)性和可用性。實(shí)時(shí)協(xié)作與反饋3在低保真原型圖制作過(guò)程中，團(tuán)隊(duì)成員可以通過(guò)摹客平臺(tái)進(jìn)行實(shí)時(shí)協(xié)作。產(chǎn)品經(jīng)理、設(shè)計(jì)師、開(kāi)發(fā)人員等不同角色能夠同時(shí)查看和編輯原型圖，隨時(shí)添加注釋、提出修改意見(jiàn)。實(shí)踐操作案例1：使用慕客AI輔助制作高校圖書(shū)館小程序使用AIGC輔助原型設(shè)計(jì)蘇信圖書(shū)館平臺(tái)希望根據(jù)規(guī)劃的圖書(shū)館小程序原型，設(shè)計(jì)低保真原型，以便后期能夠更好地和開(kāi)發(fā)人員及用戶分享。通過(guò)前期的規(guī)劃和構(gòu)思，預(yù)計(jì)設(shè)計(jì)以下幾個(gè)功能頁(yè)面。1.圖書(shū)借閱系統(tǒng)頁(yè)面：包含智能搜索、一鍵借閱、圖書(shū)詳情頁(yè)、個(gè)人借閱管理等。2.座位智慧預(yù)約頁(yè)面：包含3D樓層導(dǎo)航、智能選座系統(tǒng)、時(shí)段化預(yù)約動(dòng)態(tài)簽到機(jī)制等。3.學(xué)術(shù)支持中心：包含教材教參專區(qū)、考證資料庫(kù)、論文支持等。4.校園學(xué)習(xí)生態(tài)：包括學(xué)習(xí)計(jì)時(shí)器、失物招領(lǐng)平臺(tái)、活動(dòng)日歷等。任務(wù)情境實(shí)踐操作案例1：使用慕客AI輔助制作高校圖書(shū)館小程序使用AIGC輔助原型設(shè)計(jì)步驟一：進(jìn)入慕客平臺(tái)（1）借助慕客AI完成低保真原型的制作實(shí)踐操作案例1：使用慕客AI輔助制作高校圖書(shū)館小程序使用AIGC輔助原型設(shè)計(jì)步驟二：注冊(cè)登錄慕客，新建項(xiàng)目（1）借助慕客AI完成低保真原型的制作進(jìn)入慕客工作臺(tái)后，新建項(xiàng)目，選擇合適的畫(huà)板尺寸。此處將項(xiàng)目命名為“蘇信圖書(shū)館”、選擇“380x844”的畫(huà)板尺寸，如圖所示。實(shí)踐操作案例1：使用慕客AI輔助制作高校圖書(shū)館小程序使用AIGC輔助原型設(shè)計(jì)步驟三：借助小慕AI進(jìn)行原型制作（1）借助慕客AI完成低保真原型的制作通過(guò)小慕AI中的“智能原型”功能，進(jìn)行原型制作，如圖所示。實(shí)踐操作案例1：使用慕客AI輔助制作高校圖書(shū)館小程序使用AIGC輔助原型設(shè)計(jì)步驟四：給出智能原型的描述詞（1）借助慕客AI完成低保真原型的制作在對(duì)話框中輸入提示詞：風(fēng)格簡(jiǎn)潔的圖書(shū)館借書(shū)頁(yè)面，包含掃碼借書(shū)、圖書(shū)檢索、座位預(yù)約、我的閱讀，熱門(mén)推薦等。小慕AI根據(jù)用戶輸入的提示詞完后借書(shū)頁(yè)面的制作實(shí)訓(xùn)練習(xí)AIGC輔助互聯(lián)網(wǎng)產(chǎn)品原型設(shè)計(jì)實(shí)訓(xùn)背景校園生活服務(wù)APP旨在為在校師生提供一站式的生活服務(wù)解決方案。它整合了校園資訊、活動(dòng)報(bào)名、失物招領(lǐng)、校園維修、校內(nèi)導(dǎo)航等功能，致力于提升師生在校園內(nèi)的生活便利性和信息獲取效率。隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，校園信息化建設(shè)的推進(jìn)，開(kāi)發(fā)一款符合校園用戶需求的生活服務(wù)APP具有重要意義，能夠增強(qiáng)校園服務(wù)質(zhì)量，促進(jìn)師生之間的互動(dòng)交流。01實(shí)訓(xùn)要求1.學(xué)生分組進(jìn)行實(shí)訓(xùn)，每組4-5人，模擬互聯(lián)網(wǎng)產(chǎn)品開(kāi)發(fā)團(tuán)隊(duì)，負(fù)責(zé)完成校園生活服務(wù)APP的原型設(shè)計(jì)與相關(guān)任務(wù)。2.使用AIGC技術(shù)（如DeepSeek、即夢(mèng)AI等）完成APP各個(gè)頁(yè)面的描述和原型草圖繪制，為低保真原型制作提供創(chuàng)意和基礎(chǔ)。3.依據(jù)草圖，利用摹客AI制作校園生活服務(wù)APP的低保真原型，涵蓋首頁(yè)、活動(dòng)報(bào)名頁(yè)面、失物招領(lǐng)頁(yè)面、校園維修頁(yè)面、校內(nèi)導(dǎo)航頁(yè)面等主要功能模塊。4.提交實(shí)訓(xùn)匯報(bào)PPT，完成小組匯報(bào)PPT（8-10頁(yè)），需展示AIGC工具使用過(guò)程與最終的作品。02練習(xí)：蘇信校園生活服務(wù)APP低保真原型設(shè)計(jì)實(shí)訓(xùn)思路利用AIGC工具生成創(chuàng)意和草圖（1）通過(guò)DeepSeek獲取創(chuàng)意靈感，輸入產(chǎn)品目標(biāo)、用戶需求等關(guān)鍵信息，獲取關(guān)于校園生活服務(wù)APP的創(chuàng)意構(gòu)思、設(shè)計(jì)概念描述、用戶故事與場(chǎng)景模擬等，為原型設(shè)計(jì)提供多樣化的思路和方向。（2）基于DeepSeek提供的創(chuàng)意，使用即夢(mèng)AI的繪圖功能，快速繪制APP原型的草圖。在繪制過(guò)程中，明確各頁(yè)面的布局結(jié)構(gòu)、元素位置、操作流程等關(guān)鍵要素，為后續(xù)低保真原型制作奠定基礎(chǔ)。2.使用摹客AI制作低保真原型（1）借助摹客AI的智能原型功能，逐步構(gòu)建APP的低保真原型。將草圖中的頁(yè)面布局和元素轉(zhuǎn)換為摹客AI中的低保真組件，實(shí)現(xiàn)各頁(yè)面的基本結(jié)構(gòu)和布局。（2）在摹客AI中，完善頁(yè)面間的交互邏輯和導(dǎo)航關(guān)系，確保低保真原型能夠清晰地展示APP的操作流程和功能架構(gòu)。3.優(yōu)化與完善低保