第1章界面原型設(shè)計(jì)簡(jiǎn)介模塊一項(xiàng)目準(zhǔn)備階段教學(xué)重點(diǎn)難點(diǎn)PARTONE項(xiàng)目準(zhǔn)備與課堂思政PARTTWO界面原型常用工具PARTTHREE界面原型設(shè)計(jì)原則PARTFOUR界面原型設(shè)計(jì)思想PARTFIVE教學(xué)小結(jié)與課堂作業(yè)PARTSIX目錄CONTENTS.（01）教學(xué)重點(diǎn)難點(diǎn)PART-掌握界面原型設(shè)計(jì)中思政審查的重要性，確保設(shè)計(jì)符合法律法規(guī)和社會(huì)倫理道德。熟悉Sketch、Axure、Figma、AdobeXD四款主流設(shè)計(jì)工具的特點(diǎn)與應(yīng)用場(chǎng)景。理解并運(yùn)用界面原型設(shè)計(jì)的七大原則與六大設(shè)計(jì)思想。教學(xué)重點(diǎn)將抽象的法律法規(guī)和倫理道德轉(zhuǎn)化為具體的設(shè)計(jì)約束。在設(shè)計(jì)中平衡易用性與簡(jiǎn)潔性、一致性與品牌差異化。根據(jù)項(xiàng)目需求快速選擇合適的設(shè)計(jì)工具，避免功能堆砌。教學(xué)難點(diǎn)整體教學(xué)重點(diǎn)與難點(diǎn)（02）項(xiàng)目準(zhǔn)備與課堂思政PART-項(xiàng)目準(zhǔn)備階段思政要求設(shè)計(jì)需嚴(yán)格遵循國(guó)家法律法規(guī)，避免出現(xiàn)任何違法或不當(dāng)內(nèi)容。社會(huì)價(jià)值界面設(shè)計(jì)應(yīng)清晰傳達(dá)所需信息，引導(dǎo)用戶進(jìn)行正確操作，避免誤導(dǎo)或混淆。注重用戶體驗(yàn)，考慮不同用戶群體的需求和特點(diǎn)，確保界面易于理解和操作。通過思政審查，確保設(shè)計(jì)方案具有合法性、合理性和社會(huì)價(jià)值，提升整體質(zhì)量和影響力。用戶體驗(yàn)信息清晰合法性（03）界面原型常用工具PART-MacOSX平臺(tái)最受歡迎的矢量繪圖軟件，功能強(qiáng)大，支持界面原型設(shè)計(jì)和用戶界面設(shè)計(jì)，擁有豐富插件和模板，適合設(shè)計(jì)師快速完成工作。SketchSketch與Axure工具介紹Figma與AdobeXD工具介紹專業(yè)的用戶體驗(yàn)設(shè)計(jì)工具，廣泛應(yīng)用于交互式原型設(shè)計(jì)、信息架構(gòu)等領(lǐng)域，支持復(fù)雜動(dòng)畫和數(shù)據(jù)驅(qū)動(dòng)的原型，可快速創(chuàng)建高保真原型。Axure基于云的界面設(shè)計(jì)工具，支持多人協(xié)作，界面靈活，可繪制矢量圖形、創(chuàng)建交互原型，擁有強(qiáng)大的插件系統(tǒng)和資源庫。FigmaAdobe公司推出的設(shè)計(jì)工具，支持交互式原型設(shè)計(jì)和用戶界面設(shè)計(jì)，輕便易用，適合在多設(shè)備和平臺(tái)上進(jìn)行設(shè)計(jì)。AdobeXD（04）界面原型設(shè)計(jì)原則PART-MAIN設(shè)計(jì)應(yīng)簡(jiǎn)單易懂且易于使用，減少用戶思考和操作，讓用戶輕松完成所需任務(wù)。易用性原則七大設(shè)計(jì)原則CONTENT（05）界面原型設(shè)計(jì)思想PART-界面原型應(yīng)對(duì)所有用戶可訪問，包括視障和聽障者，確保不同需求的用戶都能獲取和使用信息?？稍L問性原則七大設(shè)計(jì)原則（06）教學(xué)小結(jié)與課堂作業(yè)PART-七大設(shè)計(jì)原則一致性原則界面原型應(yīng)保持一致性，使用相似的布局和交互模式，幫助用戶更容易地預(yù)測(cè)和理解界面的工作方式。界面原型應(yīng)及時(shí)提供反饋，告知用戶操作是否成功及錯(cuò)誤信息，幫助用戶了解操作結(jié)果并糾正錯(cuò)誤。反饋性原則七大設(shè)計(jì)原則界面原型應(yīng)簡(jiǎn)潔明了，只顯示必要信息，減少噪音和混淆，確保用戶輕松理解和使用界面。簡(jiǎn)潔性原則七大設(shè)計(jì)原則教學(xué)小結(jié)整體教學(xué)小結(jié)通過本模塊學(xué)習(xí)，學(xué)生應(yīng)樹立合法、合理、合情的設(shè)計(jì)價(jià)值觀，掌握四款主流工具的特點(diǎn)與應(yīng)用場(chǎng)景，理解并運(yùn)用七大設(shè)計(jì)原則與六大設(shè)計(jì)思想，為后續(xù)高保真原型制作奠定基礎(chǔ)。用200字說明如何在需求階段完成思政審查，確保設(shè)計(jì)符合法律法規(guī)和社會(huì)倫理道德。作業(yè)1繪制一張思維導(dǎo)圖，將七大設(shè)計(jì)原則與六大設(shè)計(jì)思想映射到登錄頁設(shè)計(jì)要點(diǎn)，體現(xiàn)其在實(shí)際設(shè)計(jì)中的應(yīng)用。作業(yè)3列表對(duì)比Sketch、Axure、Figma、AdobeXD四款工具，并給出選型理由，選擇最適合項(xiàng)目的工具。作業(yè)2提交Axure低保真源文件及500字設(shè)計(jì)說明，展示如何在設(shè)計(jì)中體現(xiàn)思政要求和設(shè)計(jì)原則。作業(yè)4課堂綜合作業(yè)課后拓展作業(yè)拓展作業(yè)任選一款常用APP，完成可用性與思政合規(guī)性雙維度評(píng)估報(bào)告。列出3處違反設(shè)計(jì)原則或倫理準(zhǔn)則的界面元素，用Axure制作改進(jìn)原型并撰寫300字說明，提交PDF報(bào)告及可交互原型鏈接。THANKYOU感謝您的觀看模塊一項(xiàng)目準(zhǔn)備階段第2章界面原型設(shè)計(jì)標(biāo)準(zhǔn)模塊一項(xiàng)目準(zhǔn)備階段教學(xué)重點(diǎn)難點(diǎn)PARTONE設(shè)計(jì)尺寸與規(guī)范PARTTWO頁面與自適應(yīng)視圖PARTTHREE元件詳解PARTFOUR交互事件與動(dòng)態(tài)面板PARTFIVE中繼器與母版PARTSIX目錄CONTENTS.變量函數(shù)與團(tuán)隊(duì)協(xié)作PARTSEVEN教學(xué)小結(jié)與課堂作業(yè)PARTEIGHT目錄CONTENTS.（01）教學(xué)重點(diǎn)難點(diǎn)PART-牢記各類終端的統(tǒng)一設(shè)計(jì)尺寸與基礎(chǔ)規(guī)范，熟練運(yùn)用Axure中的頁面、自適應(yīng)視圖、元件、動(dòng)態(tài)面板、中繼器、母版、變量與函數(shù)、團(tuán)隊(duì)協(xié)作與發(fā)布功能。教學(xué)重點(diǎn)教學(xué)重點(diǎn)與難點(diǎn)在有限時(shí)間內(nèi)將規(guī)范尺寸與元件邏輯準(zhǔn)確轉(zhuǎn)化為可交互原型；理解自適應(yīng)視圖與動(dòng)態(tài)面板、中繼器之間的配合關(guān)系；掌握變量與函數(shù)在復(fù)雜交互中的實(shí)際應(yīng)用，避免邏輯沖突。教學(xué)難點(diǎn)（02）設(shè)計(jì)尺寸與規(guī)范PART-設(shè)計(jì)尺寸參考各類終端原型設(shè)計(jì)尺寸參考為保證演示文件效果規(guī)范，建議統(tǒng)一采用AxureUX提供的各類終端原型設(shè)計(jì)尺寸標(biāo)準(zhǔn)，僅限定寬度，高度隨內(nèi)容自動(dòng)變化。圖2-1所示為AxureUX目前所采用的各類終端原型設(shè)計(jì)尺寸標(biāo)準(zhǔn)，基本符合主流設(shè)計(jì)規(guī)范，便于后續(xù)跨設(shè)備展示。設(shè)計(jì)時(shí)建議使用輔助線幫助排版，使頁面效果更規(guī)范。輔助線排版基礎(chǔ)設(shè)計(jì)規(guī)范參考WEB端橫向區(qū)塊列數(shù)常用2、3、4列，圖2-2給出各設(shè)計(jì)尺寸下每列內(nèi)容區(qū)塊寬度對(duì)照表。內(nèi)容區(qū)塊間距常用10px或20px，Axure中按住Shift鍵+方向鍵每次移動(dòng)10px。區(qū)塊列數(shù)與間距創(chuàng)建新項(xiàng)目時(shí)應(yīng)先設(shè)置元件及頁面默認(rèn)樣式，確保原型樣式統(tǒng)一。推薦字號(hào)18px、16px、14px、12px，行間距28、24、20，均使用偶數(shù)。設(shè)置頁面樣式（03）頁面與自適應(yīng)視圖PART-AxureRP9中，頁面用于設(shè)計(jì)和展示界面布局與樣式，每個(gè)頁面可包含按鈕、輸入框、列表等元件，用戶可添加、刪除、重命名和組織頁面。自適應(yīng)視圖用于測(cè)試不同分辨率與設(shè)備的界面布局與自適應(yīng)性，用戶可預(yù)覽不同分辨率效果并測(cè)試設(shè)備上的自適應(yīng)性能。頁面與自適應(yīng)視圖頁面與自適應(yīng)視圖概念（04）元件詳解PART-MAINAxureRP9元件是構(gòu)建原型的基本構(gòu)建塊，圖2-5展示元件面板。常用元件包括按鈕、標(biāo)簽、文本框、下拉框、復(fù)選框、單選框、圖像、輪播圖、列表、進(jìn)度條、導(dǎo)航欄等。高級(jí)元件有交互面板、面板組、滑塊等，支持自定義元件庫，便于快速創(chuàng)建和測(cè)試不同用戶界面與交互方式。元件功能常用元件功能一覽CONTENT（05）交互事件與動(dòng)態(tài)面板PART-交互決定部件和頁面動(dòng)態(tài)行為，如單擊按鈕導(dǎo)航或鼠標(biāo)懸停顯示部件，可在交互窗格創(chuàng)建和管理，圖2-6示意交互窗格，圖2-7示意交互用例。動(dòng)態(tài)面板是容器，將部件保存在狀態(tài)中，一次僅顯示一種狀態(tài)，圖2-8示意動(dòng)態(tài)面板結(jié)構(gòu)。動(dòng)態(tài)面板支持拖動(dòng)滑動(dòng)及固定位置，適合輪播、幻燈片、導(dǎo)航標(biāo)題和側(cè)邊欄。動(dòng)態(tài)面板非常適合創(chuàng)建輪播和幻燈片，因?yàn)榭梢詣?dòng)態(tài)設(shè)置可見狀態(tài)，實(shí)現(xiàn)不同內(nèi)容的切換展示。交互事件動(dòng)態(tài)面板應(yīng)用場(chǎng)景交互事件與動(dòng)態(tài)面板（06）中繼器與母版PART-中繼器是高級(jí)部件，用于顯示文本、圖像等重復(fù)集合，圖2-9示意中繼器結(jié)構(gòu)。數(shù)據(jù)驅(qū)動(dòng)，可動(dòng)態(tài)排序篩選，適合動(dòng)態(tài)表或產(chǎn)品列表。中繼器母版是部件集合，可集中維護(hù)并重復(fù)使用，修改自動(dòng)更新所有實(shí)例，圖2-10示意母版管理，常用于頁眉、頁腳、導(dǎo)航欄，提升效率與一致性。母版中繼器與母版功能（07）變量函數(shù)與團(tuán)隊(duì)協(xié)作PART-變量與函數(shù)Axure函數(shù)為特殊變量，通過調(diào)用獲取特定值，僅用于表達(dá)式。圖2-13示意編輯文字對(duì)話框，用于插入變量、屬性、函數(shù)或運(yùn)算符。函數(shù)變量包括全局變量和局部變量，可存儲(chǔ)文本數(shù)字供后續(xù)使用，圖2-11示意全局變量，圖2-12示意局部變量。變量可在元件文本、條件邏輯、函數(shù)表達(dá)式中調(diào)用。變量團(tuán)隊(duì)合作與發(fā)布輸出團(tuán)隊(duì)合作與發(fā)布團(tuán)隊(duì)項(xiàng)目允許多個(gè)AxureRP9用戶共同創(chuàng)作原型，圖2-14示意創(chuàng)建團(tuán)隊(duì)項(xiàng)目對(duì)話框?？赏ㄟ^菜單新建或轉(zhuǎn)換現(xiàn)有項(xiàng)目為團(tuán)隊(duì)項(xiàng)目。設(shè)計(jì)完成后，單擊預(yù)覽按鈕或發(fā)布→預(yù)覽命令直接預(yù)覽，也可選擇發(fā)布→生成原型文件，在發(fā)布項(xiàng)目對(duì)話框設(shè)置信息后輸出，便于他人使用與測(cè)試。（08）教學(xué)小結(jié)與課堂作業(yè)PART-通過本章學(xué)習(xí)，學(xué)生應(yīng)掌握統(tǒng)一設(shè)計(jì)尺寸與基礎(chǔ)規(guī)范，熟練運(yùn)用Axure頁面、自適應(yīng)視圖、元件、動(dòng)態(tài)面板、中繼器、母版、變量與函數(shù)，理解團(tuán)隊(duì)協(xié)作與發(fā)布流程，為后續(xù)高保真原型制作奠定理論與操作基礎(chǔ)。教學(xué)小結(jié)整體教學(xué)小結(jié)任務(wù)1：按本章尺寸規(guī)范繪制首頁低保真線框圖；任務(wù)2：使用動(dòng)態(tài)面板實(shí)現(xiàn)輪播圖，中繼器展示商品列表；任務(wù)3：創(chuàng)建母版統(tǒng)一頁眉頁腳。作業(yè)任務(wù)提交Axure源文件及300字設(shè)計(jì)說明，說明如何確保尺寸規(guī)范與元件復(fù)用。提交要求校園二手書交易平臺(tái)原型標(biāo)準(zhǔn)實(shí)踐。作業(yè)主題課堂綜合作業(yè)任選一款常用APP，完成“規(guī)范符合度”評(píng)估報(bào)告：列出3處未遵循本章尺寸或規(guī)范的具體界面元素，用Axure制作改進(jìn)原型并撰寫200字說明。提交格式：PDF報(bào)告+可交互原型鏈接。目的：培養(yǎng)規(guī)范意識(shí)與持續(xù)優(yōu)化能力，將課堂知識(shí)延伸至真實(shí)產(chǎn)品場(chǎng)景。拓展作業(yè)課后拓展作業(yè)THANKYOU感謝您的觀看模塊一項(xiàng)目準(zhǔn)備階段第3章網(wǎng)站登錄界面模塊二網(wǎng)站界面原型設(shè)計(jì)教學(xué)重點(diǎn)難點(diǎn)PARTONE思政與界面分析PARTTWO元件與動(dòng)態(tài)面板搭建PARTTHREE輸入框與校驗(yàn)碼實(shí)現(xiàn)PARTFOUR輔助功能與按鈕PARTFIVE錯(cuò)誤提示與狀態(tài)管理PARTSIX目錄CONTENTS.小結(jié)與練習(xí)PARTSEVEN總結(jié)與課堂作業(yè)PARTEIGHT目錄CONTENTS.（01）教學(xué)重點(diǎn)難點(diǎn)PART-本章重點(diǎn)在于掌握網(wǎng)站登錄界面的完整交互設(shè)計(jì)流程，包括需求分析、元件布局、動(dòng)態(tài)面板狀態(tài)管理以及條件邏輯配置。同時(shí)，要熟練運(yùn)用Axure工具實(shí)現(xiàn)校驗(yàn)碼隨機(jī)刷新、錯(cuò)誤提示動(dòng)畫、加載旋轉(zhuǎn)器顯示等關(guān)鍵交互功能，確保界面功能完善且用戶體驗(yàn)良好。教學(xué)重點(diǎn)在多條件分支交互設(shè)計(jì)中，保證邏輯嚴(yán)謹(jǐn)是一大難點(diǎn)。例如，校驗(yàn)碼的實(shí)時(shí)比對(duì)、空值檢測(cè)的優(yōu)先級(jí)處理、錯(cuò)誤提示狀態(tài)的切換與動(dòng)畫同步等，都需要細(xì)致的條件設(shè)置和動(dòng)作配置。此外，在有限時(shí)間內(nèi)完成高保真原型制作，并確保視覺與交互的一致性，也是需要克服的挑戰(zhàn)。教學(xué)難點(diǎn)整體教學(xué)重點(diǎn)與難點(diǎn)（02）思政與界面分析PART-網(wǎng)站界面設(shè)計(jì)不僅是技術(shù)工作，也是藝術(shù)創(chuàng)作，要求設(shè)計(jì)者具備藝術(shù)修養(yǎng)和審美情趣。設(shè)計(jì)需符合法律法規(guī)，避免不當(dāng)信息，傳達(dá)正確價(jià)值觀。思政課堂要求用戶需輸入用戶名、密碼和校驗(yàn)碼完成登錄。若輸入有誤或?yàn)榭?，頁面?huì)即時(shí)提示錯(cuò)誤信息。正確輸入后，點(diǎn)擊登錄按鈕會(huì)觸發(fā)加載效果，確保操作反饋及時(shí)。界面功能需求頁面布局的合理性與創(chuàng)意直接影響網(wǎng)站的美觀程度。合理的布局能給用戶帶來美的享受，而設(shè)計(jì)的好壞在很大程度上取決于開發(fā)人員的藝術(shù)修養(yǎng)和創(chuàng)新能力。界面美觀需求思政課堂與界面需求界面效果圖展示登錄界面效果圖圖3-1展示了網(wǎng)站登錄界面的最終效果圖。界面以居中的面板為核心，包含品牌標(biāo)題、輸入框組、校驗(yàn)碼、記住密碼、忘記密碼鏈接及登錄按鈕。整體采用淺色背景搭配藍(lán)色主色調(diào)，視覺效果簡(jiǎn)潔友好，符合主流Web設(shè)計(jì)審美。（03）元件與動(dòng)態(tài)面板搭建PART-圖3-2展示了如何在Axure中拖入一個(gè)尺寸為470×540的動(dòng)態(tài)面板，并命名為“登錄面板”，同時(shí)勾選“調(diào)整大小以適合內(nèi)容”選項(xiàng)，以便后續(xù)內(nèi)容自適應(yīng)面板大小。登錄面板搭建登錄面板與背景構(gòu)建圖3-3演示了在“登錄面板”內(nèi)放置一個(gè)全尺寸矩形，設(shè)置白色填充、15%透明度的黑色陰影和5px圓角，形成一個(gè)具有懸浮卡片效果的背景，為后續(xù)元素提供統(tǒng)一的視覺容器。背景矩形設(shè)置圖3-5至圖3-7演示了如何添加工具提示，包括觸發(fā)區(qū)、信息圖標(biāo)和隱藏的提示文本。當(dāng)鼠標(biāo)懸停時(shí)，顯示登錄說明，提升界面的引導(dǎo)性和用戶體驗(yàn)。工具提示添加提示文本設(shè)置為“需驗(yàn)證用戶信息完成登錄”，字號(hào)為14，字體顏色為白色，左邊距為15，確保提示信息清晰易讀，引導(dǎo)用戶完成登錄操作。提示文本配置圖3-4展示了在面板頂部放置一個(gè)380×60的矩形，輸入雙語文本“用戶登錄USERLOGIN”，并區(qū)分字號(hào)與顏色層次，以突出顯示登錄區(qū)域的標(biāo)題。標(biāo)題設(shè)置標(biāo)題與提示工具（04）輸入框與校驗(yàn)碼實(shí)現(xiàn)PART-圖3-8至圖3-12展示了如何依次拖入賬戶輸入框組合，包括左側(cè)圖標(biāo)和右側(cè)文本框，設(shè)置邊框色、提示文字、焦點(diǎn)陰影與禁用樣式，確保視覺統(tǒng)一與功能區(qū)分。賬戶輸入框設(shè)置賬戶與密碼輸入框密碼輸入框類型設(shè)置為密碼，圖標(biāo)替換為鑰匙，滿足用戶隱私保護(hù)需求，同時(shí)保持界面簡(jiǎn)潔與功能完整。密碼輸入框配置圖3-13至圖3-19展示了校驗(yàn)碼區(qū)域的布局，包括270×50的輸入框與100×50的動(dòng)態(tài)面板并列，面板內(nèi)矩形顯示四位隨機(jī)字符，確保校驗(yàn)碼的顯示與輸入功能完整。校驗(yàn)碼區(qū)域布局通過變量與隨機(jī)函數(shù)實(shí)現(xiàn)點(diǎn)擊或加載時(shí)刷新驗(yàn)證碼，確保交互安全與實(shí)時(shí)更新，提升用戶體驗(yàn)。校驗(yàn)碼刷新邏輯校驗(yàn)碼顯示區(qū)域設(shè)置填充顏色為#F9F9F9，邊框厚度為1，顏色為#E4E4E4，圓角半徑為5，邊距默認(rèn)為2，確保視覺效果與整體界面協(xié)調(diào)。校驗(yàn)碼樣式設(shè)置校驗(yàn)碼動(dòng)態(tài)面板（05）輔助功能與按鈕PART-記住密碼與忘記密碼圖3-20至圖3-22展示了如何添加復(fù)選框“記住密碼”，并設(shè)置選中時(shí)的線條顏色，滿足用戶記憶需求，提升登錄便捷性。記住密碼功能添加文本鏈接“忘記密碼？”，設(shè)置字體為微軟雅黑，右對(duì)齊，字體顏色為#409EFF，為用戶提供找回密碼的入口，保持界面簡(jiǎn)潔與功能完整。忘記密碼鏈接點(diǎn)擊登錄按鈕后，根據(jù)輸入條件觸發(fā)不同的交互效果，如成功登錄、錯(cuò)誤提示等，確保交互邏輯嚴(yán)謹(jǐn)，滿足不同場(chǎng)景下的用戶需求。按鈕交互邏輯登錄按鈕與加載動(dòng)畫設(shè)置隱藏的加載旋轉(zhuǎn)器，在滿足條件時(shí)顯示并延遲跳轉(zhuǎn)，增強(qiáng)等待體驗(yàn)，確保用戶在登錄過程中的視覺反饋及時(shí)準(zhǔn)確。加載動(dòng)畫實(shí)現(xiàn)圖3-23至圖3-26展示了藍(lán)色登錄按鈕的設(shè)置，包括懸停、按下、禁用狀態(tài)樣式，增強(qiáng)操作反饋，提升用戶體驗(yàn)。登錄按鈕設(shè)置（06）錯(cuò)誤提示與狀態(tài)管理PART-圖3-26至圖3-31展示了如何創(chuàng)建380×40的動(dòng)態(tài)面板“警告提示”，并預(yù)設(shè)五種狀態(tài)，包括空用戶名、空密碼、空校驗(yàn)碼、錯(cuò)誤憑據(jù)、錯(cuò)誤校驗(yàn)碼等，確保用戶在不同錯(cuò)誤場(chǎng)景下都能得到明確提示。各狀態(tài)矩形填充色、邊框色、圖標(biāo)與文本差異化設(shè)置，確保用戶可以快速識(shí)別問題所在，提升界面的引導(dǎo)性和用戶體驗(yàn)。提示文本內(nèi)容如“請(qǐng)?zhí)顚懹脩裘Q”等，字體為微軟雅黑，字號(hào)為13，字體顏色為#FF9900，左對(duì)齊、上下居中，確保提示信息清晰易讀。警告提示面板創(chuàng)建狀態(tài)樣式設(shè)置提示文本配置警告提示動(dòng)態(tài)面板圖3-32至圖3-39展示了登錄按鈕“鼠標(biāo)單擊時(shí)”的多條件用例設(shè)置，滿足校驗(yàn)碼、用戶名、密碼均正確時(shí)觸發(fā)加載旋轉(zhuǎn)器，實(shí)現(xiàn)成功登錄的交互效果。登錄成功條件用戶名或密碼錯(cuò)誤時(shí)，切換至錯(cuò)誤憑據(jù)狀態(tài)，校驗(yàn)碼錯(cuò)誤時(shí)額外刷新驗(yàn)證碼，確保交互邏輯嚴(yán)謹(jǐn)，滿足不同錯(cuò)誤場(chǎng)景下的提示需求。錯(cuò)誤提示邏輯當(dāng)用戶名、密碼或校驗(yàn)碼為空時(shí)，切換至對(duì)應(yīng)的警告狀態(tài)并播放彈跳動(dòng)畫，確保用戶在輸入錯(cuò)誤時(shí)能得到及時(shí)反饋。空值檢測(cè)邏輯通過設(shè)置顯示/隱藏動(dòng)作、移動(dòng)動(dòng)作等，實(shí)現(xiàn)警告提示的動(dòng)畫效果，增強(qiáng)界面的交互性和用戶引導(dǎo)性。交互動(dòng)作配置交互邏輯與條件配置（07）小結(jié)與練習(xí)PART-本章完整演示了網(wǎng)站登錄界面的制作流程，從需求分析、元件布局、動(dòng)態(tài)面板狀態(tài)管理到條件邏輯配置，涵蓋基礎(chǔ)元件、動(dòng)態(tài)面板、第三方元件庫應(yīng)用，幫助讀者掌握高保真原型制作流程，提升工作效率。小結(jié)內(nèi)容本章小結(jié)加深練習(xí)要求未輸入時(shí)提示文字，點(diǎn)擊登錄按鈕出現(xiàn)彈跳效果，鼠標(biāo)懸停第三方圖標(biāo)變色交互，確保界面交互豐富且用戶體驗(yàn)良好。交互要求圖3-40給出了練習(xí)效果圖，要求使用AxureRP9完成高保真登錄原型，包括用戶名、密碼輸入框、登錄按鈕、第三方登錄圖標(biāo)等元素，滿足不同交互需求。練習(xí)目標(biāo)（08）總結(jié)與課堂作業(yè)PART-通過本章實(shí)戰(zhàn)，學(xué)生應(yīng)掌握登錄界面的完整流程，包括需求拆解、元件布局、動(dòng)態(tài)面板狀態(tài)、條件邏輯、交互反饋等，確保能夠獨(dú)立完成高保真原型制作。教學(xué)小結(jié)在提供素材基礎(chǔ)上，獨(dú)立完成帶第三方登錄的高保真登錄原型，提交Axure源文件及300字設(shè)計(jì)說明，重點(diǎn)闡述如何優(yōu)化錯(cuò)誤提示與加載體驗(yàn)，提升用戶滿意度。課堂作業(yè)總結(jié)與作業(yè)THANKYOU感謝您的觀看模塊二網(wǎng)站界面原型設(shè)計(jì)第4章網(wǎng)站注冊(cè)界面模塊二網(wǎng)站界面原型設(shè)計(jì)輸入框與實(shí)時(shí)驗(yàn)證PARTFOUR協(xié)議與按鈕交互PARTFIVE面板與標(biāo)題搭建PARTTHREE教學(xué)重點(diǎn)難點(diǎn)PARTONE界面需求與效果圖PARTTWO目錄CONTENTS.小結(jié)與練習(xí)PARTSIX總結(jié)與課堂作業(yè)PARTSEVEN目錄CONTENTS.（01）教學(xué)重點(diǎn)難點(diǎn)PART-掌握注冊(cè)界面完整交互閉環(huán)，包括需求拆解、元件布局、動(dòng)態(tài)面板狀態(tài)切換、實(shí)時(shí)表單驗(yàn)證及倒計(jì)時(shí)邏輯；熟練運(yùn)用Axure實(shí)現(xiàn)賬號(hào)、密碼、手機(jī)號(hào)的格式校驗(yàn)及提示動(dòng)畫。教學(xué)重點(diǎn)在多條件分支中保證邏輯嚴(yán)謹(jǐn)，如空值檢測(cè)優(yōu)先級(jí)、格式正則匹配、兩次密碼一致性、60秒短信倒計(jì)時(shí)與按鈕禁用同步；在有限時(shí)間內(nèi)完成高保真原型并確保視覺與交互一致性。教學(xué)難點(diǎn)整體教學(xué)重點(diǎn)與難點(diǎn)（02）界面需求與效果圖PART-設(shè)計(jì)時(shí)需注重用戶體驗(yàn)，確保界面布局合理、交互流暢，同時(shí)滿足功能需求，提升用戶注冊(cè)過程的便捷性和滿意度。設(shè)計(jì)要點(diǎn)注冊(cè)界面需求與效果圖圖4-1展示最終注冊(cè)界面效果圖：居中480×600面板承載標(biāo)題、四組輸入框、協(xié)議復(fù)選框、注冊(cè)按鈕；整體采用淺色背景與藍(lán)色主色調(diào)，視覺簡(jiǎn)潔友好，符合主流Web審美與可用性原則。效果圖展示用戶需按提示填寫賬號(hào)名稱、登錄密碼、確認(rèn)密碼、手機(jī)號(hào)碼完成注冊(cè)；缺失或格式錯(cuò)誤即時(shí)提示。正確輸入后點(diǎn)擊“注冊(cè)”按鈕完成操作。注冊(cè)界面需求（03）面板與標(biāo)題搭建PART-MAIN圖4-2演示拖入480×600動(dòng)態(tài)面板“注冊(cè)面板”，新增“用戶注冊(cè)”“注冊(cè)成功”兩狀態(tài)并勾選自適應(yīng)內(nèi)容。圖4-3在面板內(nèi)放置全尺寸矩形，設(shè)置白色填充、15%黑色陰影、5px圓角，形成懸浮卡片效果，為后續(xù)元素提供統(tǒng)一容器與視覺層次。注冊(cè)面板構(gòu)建注冊(cè)面板與背景構(gòu)建CONTENT標(biāo)題與跳轉(zhuǎn)鏈接圖4-5右側(cè)放置200×50矩形輸入“已有賬號(hào)，立即登錄”，字體Regular13px藍(lán)色右對(duì)齊，并添加點(diǎn)擊跳轉(zhuǎn)登錄頁交互，滿足老用戶快速入口需求。跳轉(zhuǎn)鏈接設(shè)置圖4-4在面板頂部放置380×50矩形輸入“用戶注冊(cè)”標(biāo)題，字體微軟雅黑Bold16px左對(duì)齊。標(biāo)題設(shè)置（04）輸入框與實(shí)時(shí)驗(yàn)證PART-圖4-6至4-9展示賬號(hào)名稱輸入框組合：380×50文本框配40×50綠色驗(yàn)證圖標(biāo)，設(shè)置邊框、提示文字、焦點(diǎn)陰影及禁用樣式。賬號(hào)名稱輸入框失去焦點(diǎn)時(shí)實(shí)時(shí)校驗(yàn)長(zhǎng)度與字符類型，空值提示“賬號(hào)名稱不能為空”，格式錯(cuò)誤提示“賬號(hào)名稱格式不正確”，正確時(shí)顯示綠色勾選，提升用戶即時(shí)反饋體驗(yàn)。失去焦點(diǎn)時(shí)驗(yàn)證通過設(shè)置局部變量和條件判斷，實(shí)現(xiàn)對(duì)賬號(hào)名稱的實(shí)時(shí)驗(yàn)證，確保用戶輸入符合要求，提高注冊(cè)流程的準(zhǔn)確性和效率。驗(yàn)證邏輯賬號(hào)名稱輸入與驗(yàn)證圖4-17至4-20展示復(fù)制組合并調(diào)整為密碼與確認(rèn)密碼輸入框：提示文字分別為“請(qǐng)?jiān)O(shè)置6-20位登錄密碼”“再次輸入登錄密碼”，類型設(shè)為密碼。失去焦點(diǎn)時(shí)校驗(yàn)長(zhǎng)度及兩次一致性，錯(cuò)誤提示“登錄密碼不正確”“兩次密碼不一致”，確保密碼安全與用戶記憶。通過交互設(shè)計(jì)，實(shí)現(xiàn)密碼輸入的實(shí)時(shí)驗(yàn)證和提示，幫助用戶在注冊(cè)過程中及時(shí)發(fā)現(xiàn)并糾正錯(cuò)誤，提升用戶體驗(yàn)。密碼輸入框設(shè)置密碼驗(yàn)證邏輯交互設(shè)計(jì)密碼與確認(rèn)密碼驗(yàn)證圖4-21至4-24展示手機(jī)號(hào)輸入框組合：提示文字“請(qǐng)輸入手機(jī)號(hào)碼”，類型設(shè)為電話號(hào)碼。手機(jī)號(hào)輸入框失去焦點(diǎn)時(shí)使用局部變量與正則表達(dá)式校驗(yàn)11位數(shù)字格式，空值提示“手機(jī)號(hào)碼不能為空”，格式錯(cuò)誤提示“手機(jī)號(hào)碼格式不正確”，確保短信驗(yàn)證碼可正常發(fā)送。手機(jī)號(hào)驗(yàn)證邏輯手機(jī)號(hào)碼驗(yàn)證是注冊(cè)流程中的關(guān)鍵環(huán)節(jié)，確保用戶輸入正確的手機(jī)號(hào)碼，以便后續(xù)接收短信驗(yàn)證碼，完成注冊(cè)流程。驗(yàn)證的重要性手機(jī)號(hào)碼驗(yàn)證邏輯（05）協(xié)議與按鈕交互PART-圖4-25至4-28展示復(fù)選框“勾選同意《用戶服務(wù)協(xié)議》”及藍(lán)色注冊(cè)按鈕：復(fù)選框設(shè)置選中色與禁用填充。用戶協(xié)議設(shè)置用戶協(xié)議與注冊(cè)按鈕注冊(cè)按鈕380×50藍(lán)色圓角，設(shè)置懸停、按下、禁用狀態(tài)樣式，點(diǎn)擊時(shí)校驗(yàn)所有字段與協(xié)議勾選狀態(tài)，滿足條件后切換至“注冊(cè)成功”狀態(tài)，完成注冊(cè)流程。注冊(cè)按鈕交互（06）小結(jié)與練習(xí)PART-小結(jié)本章小結(jié)本章完整演示網(wǎng)站注冊(cè)界面制作：從需求分析、元件布局、動(dòng)態(tài)面板狀態(tài)管理、實(shí)時(shí)表單驗(yàn)證到協(xié)議勾選邏輯，涵蓋表單元件、動(dòng)態(tài)面板、第三方元件庫應(yīng)用，幫助讀者掌握高保真原型流程并提升工作效率。加深練習(xí)要求使用AxureRP9完成高保真注冊(cè)原型：包含手機(jī)號(hào)、短信驗(yàn)證碼、登錄密碼輸入框、注冊(cè)按鈕。練習(xí)目標(biāo)格式錯(cuò)誤即時(shí)提示；點(diǎn)擊注冊(cè)按鈕彈跳效果；獲取短信驗(yàn)證碼時(shí)60秒倒計(jì)時(shí)交互。交互要求在設(shè)計(jì)過程中，注重用戶體驗(yàn)和交互設(shè)計(jì)，確保注冊(cè)流程簡(jiǎn)潔、高效，同時(shí)滿足功能需求。設(shè)計(jì)要點(diǎn)（07）總結(jié)與課堂作業(yè)PART-通過本章實(shí)戰(zhàn)，學(xué)生應(yīng)掌握注冊(cè)界面完整流程：需求拆解、元件布局、實(shí)時(shí)驗(yàn)證、倒計(jì)時(shí)邏輯、協(xié)議交互。教學(xué)小結(jié)教學(xué)小結(jié)在提供素材基礎(chǔ)上，獨(dú)立完成帶短信驗(yàn)證碼倒計(jì)時(shí)的高保真注冊(cè)原型，提交Axure源文件及300字設(shè)計(jì)說明，重點(diǎn)闡述如何優(yōu)化驗(yàn)證提示與倒計(jì)時(shí)體驗(yàn)。課堂作業(yè)課后拓展作業(yè)任選一款常用APP注冊(cè)頁，完成“規(guī)范與體驗(yàn)”雙維度評(píng)估報(bào)告：列出3處未遵循本章驗(yàn)證或倒計(jì)時(shí)規(guī)范的具體問題，用Axure制作改進(jìn)原型并撰寫200字說明。作業(yè)要求提交格式：PDF報(bào)告+可交互原型鏈接。目的：培養(yǎng)規(guī)范意識(shí)與持續(xù)優(yōu)化能力，將課堂知識(shí)延伸至真實(shí)產(chǎn)品場(chǎng)景。提交格式THANKYOU感謝您的觀看模塊二網(wǎng)站界面原型設(shè)計(jì)第5章網(wǎng)站首頁界面模塊二網(wǎng)站界面原型設(shè)計(jì)教學(xué)重點(diǎn)難點(diǎn)PARTONE需求與架構(gòu)總覽PARTTWO導(dǎo)航欄模塊化PARTTHREE輪播圖交互實(shí)現(xiàn)PARTFOUR新聞與文章模塊PARTFIVE快訊與視頻數(shù)據(jù)驅(qū)動(dòng)PARTSIX目錄CONTENTS.熱榜排行與底部導(dǎo)航PARTSEVEN教學(xué)小結(jié)與課堂作業(yè)PARTEIGHT目錄CONTENTS.（01）教學(xué)重點(diǎn)難點(diǎn)PART-教學(xué)重點(diǎn)與難點(diǎn)熟練掌握網(wǎng)站首頁四大模塊的原型流程，包括導(dǎo)航、輪播、內(nèi)容展示、底部導(dǎo)航。教學(xué)重點(diǎn)實(shí)現(xiàn)輪播圖的無縫循環(huán)播放，確保新聞模塊的懸停放大效果，以及熱榜的動(dòng)態(tài)更新功能。教學(xué)難點(diǎn)學(xué)會(huì)使用動(dòng)態(tài)面板、中繼器、母版等工具，完成模塊化設(shè)計(jì)和數(shù)據(jù)驅(qū)動(dòng)的頁面制作。技能目標(biāo)（02）需求與架構(gòu)總覽PART-網(wǎng)站首頁包含導(dǎo)航欄、輪播圖、新聞模塊、最新文章、最新快訊、視頻推薦、24小時(shí)熱榜和底部導(dǎo)航欄。功能結(jié)構(gòu)通過效果圖展示首頁的整體布局和視覺效果，為后續(xù)制作提供參考。效果圖展示首頁功能結(jié)構(gòu)與效果圖（03）導(dǎo)航欄模塊化PART-頂部導(dǎo)航動(dòng)態(tài)面板與母版新建1260×60的動(dòng)態(tài)面板，設(shè)置100%寬度自適應(yīng)，為導(dǎo)航欄提供基礎(chǔ)容器。創(chuàng)建母版從系統(tǒng)元件庫導(dǎo)入導(dǎo)航欄，刪除多余項(xiàng)目，設(shè)置菜單文本、懸停與選中樣式。為導(dǎo)航欄配置下拉菜單，設(shè)置菜單項(xiàng)的懸停填充效果，提升用戶體驗(yàn)。將導(dǎo)航欄創(chuàng)建為母版，實(shí)現(xiàn)全局復(fù)用與統(tǒng)一維護(hù)，提高開發(fā)效率。配置下拉菜單導(dǎo)入導(dǎo)航欄元件創(chuàng)建導(dǎo)航面板（04）輪播圖交互實(shí)現(xiàn)PART-導(dǎo)入輪播元件并調(diào)整尺寸為800×350，設(shè)置四張輪播圖狀態(tài)。導(dǎo)入輪播元件為輪播圖替換01-04素材，確保視覺效果符合設(shè)計(jì)要求。替換輪播素材新增指示點(diǎn)Dot4，設(shè)置填充、透明度及單擊切換狀態(tài)，增強(qiáng)交互性。添加指示點(diǎn)為輪播圖設(shè)置自動(dòng)循環(huán)、5000ms間隔、左右箭頭懸停變色，確保無縫銜接。設(shè)置自動(dòng)循環(huán)輪播動(dòng)態(tài)面板與指示點(diǎn)（05）新聞與文章模塊PART-創(chuàng)建170×160新聞模塊動(dòng)態(tài)面板，插入圖片與雙層標(biāo)題，設(shè)置基礎(chǔ)布局。創(chuàng)建新聞模塊設(shè)置鼠標(biāo)進(jìn)入時(shí)圖片放大至230×230并切換完整標(biāo)題，移出時(shí)恢復(fù)，提升交互體驗(yàn)。設(shè)置懸停效果通過復(fù)制與素材替換快速生成四宮格新聞區(qū)，實(shí)現(xiàn)統(tǒng)一交互與視覺一致性。批量生成新聞新聞模塊懸停放大創(chuàng)建800×840“最新文章”容器，為文章卡片提供布局空間。創(chuàng)建文章容器將首篇文章制作為“文章卡片”母版，后續(xù)通過脫離母版替換內(nèi)容，實(shí)現(xiàn)高效更新。創(chuàng)建母版設(shè)計(jì)包含背景、圖片、標(biāo)簽、標(biāo)題、摘要、來源與時(shí)間的文章卡片，豐富內(nèi)容展示。設(shè)計(jì)文章卡片通過母版確保文章卡片的樣式統(tǒng)一，提升整體視覺效果。樣式統(tǒng)一最新文章母版卡片（06）快訊與視頻數(shù)據(jù)驅(qū)動(dòng)PART-添加“查看更多”按鈕與懸停變色效果，提升用戶交互體驗(yàn)。添加交互效果時(shí)間軸快訊列表使用組合“快訊標(biāo)題與時(shí)間”并復(fù)制五組，設(shè)置10px間距，生成快訊列表。生成快訊列表構(gòu)建370×840“最新快訊”動(dòng)態(tài)面板，包含標(biāo)題、時(shí)間軸垂直線、時(shí)間點(diǎn)圓點(diǎn)。構(gòu)建快訊容器視頻推薦中繼器創(chuàng)建800×550“視頻推薦”容器，為視頻展示提供布局空間。創(chuàng)建視頻容器拖入中繼器實(shí)現(xiàn)三列卡片布局，提升頁面信息密度。拖入中繼器設(shè)置背景、內(nèi)聯(lián)框架、標(biāo)題、作者、時(shí)間元件，豐富視頻卡片內(nèi)容。設(shè)置視頻元素在數(shù)據(jù)中維護(hù)url、title、author、time四列，通過項(xiàng)目加載時(shí)綁定變量實(shí)現(xiàn)批量渲染。綁定數(shù)據(jù)（07）熱榜排行與底部導(dǎo)航PART-確保熱榜排行的視覺效果與整體頁面風(fēng)格保持一致。視覺一致性中繼器數(shù)據(jù)綁定picture、ranking、title、time四列，實(shí)現(xiàn)動(dòng)態(tài)排行更新。綁定數(shù)據(jù)設(shè)置排行標(biāo)簽、標(biāo)題、時(shí)間、圖片懸停放大效果，增強(qiáng)視覺吸引力。設(shè)置排行元素創(chuàng)建370×710熱榜容器，包含TOP1-2大圖卡片與TOP3中繼器列表。創(chuàng)建熱榜容器24小時(shí)熱榜排行創(chuàng)建1260×100底部導(dǎo)航動(dòng)態(tài)面板，設(shè)置100%寬度自適應(yīng)，填充深灰色。輸入版權(quán)與分類鏈接文本，設(shè)置文字鏈接及懸停變色效果。通過母版或全局元件實(shí)現(xiàn)全站統(tǒng)一底部，確保品牌一致性與維護(hù)效率。創(chuàng)建底部導(dǎo)航輸入版權(quán)信息實(shí)現(xiàn)全局統(tǒng)一底部導(dǎo)航版權(quán)區(qū)（08）教學(xué)小結(jié)與課堂作業(yè)PART-教學(xué)小結(jié)掌握首頁模塊化思路，包括母版導(dǎo)航、輪播自動(dòng)循環(huán)、新聞懸停放大等。模塊化思路重點(diǎn)理解動(dòng)態(tài)面板狀態(tài)、中繼器變量綁定、母版復(fù)用三大核心技能。核心技能為后續(xù)復(fù)雜頁面制作奠定扎實(shí)基礎(chǔ)，提升綜合設(shè)計(jì)能力。后續(xù)基礎(chǔ)利用AxureRP9制作新聞首頁高保真原型，包含導(dǎo)航、新聞列表、登錄模塊、熱榜、視頻等功能，提交源文件及設(shè)計(jì)說明。作業(yè)要求課堂綜合作業(yè)THANKYOU感謝您的觀看模塊二網(wǎng)站界面原型設(shè)計(jì)第6章網(wǎng)站子頁界面模塊二網(wǎng)站界面原型設(shè)計(jì)教學(xué)重點(diǎn)難點(diǎn)PARTONE需求與架構(gòu)總覽PARTTWO母版導(dǎo)航與文章詳情PARTTHREE互動(dòng)按鈕三態(tài)切換PARTFOUR正文與圖文混排PARTFIVE評(píng)論區(qū)實(shí)時(shí)交互PARTSIX目錄CONTENTS.浮動(dòng)作者卡片PARTSEVEN上下篇導(dǎo)航與分享PARTEIGHT教學(xué)小結(jié)與課堂作業(yè)PARTNINE目錄CONTENTS.（01）教學(xué)重點(diǎn)難點(diǎn)PART-本章重點(diǎn)在于掌握子頁的完整制作流程，包括母版導(dǎo)航欄的復(fù)用、文章詳情的排版、動(dòng)態(tài)面板實(shí)現(xiàn)關(guān)注點(diǎn)贊收藏的三態(tài)切換、中繼器渲染評(píng)論列表以及浮動(dòng)作者卡片的固定定位。這些技能將幫助學(xué)生構(gòu)建功能豐富的子頁原型。教學(xué)重點(diǎn)教學(xué)難點(diǎn)在于協(xié)調(diào)多動(dòng)態(tài)面板狀態(tài)同步，確保點(diǎn)贊數(shù)實(shí)時(shí)增減、評(píng)論實(shí)時(shí)追加與字符計(jì)數(shù)聯(lián)動(dòng)，同時(shí)保證交互邏輯零沖突。這些難點(diǎn)需要學(xué)生具備較強(qiáng)的邏輯思維和細(xì)致的操作能力。教學(xué)難點(diǎn)教學(xué)重點(diǎn)與難點(diǎn)（02）需求與架構(gòu)總覽PART-圖6-1展示了最終子頁的效果圖，整體布局合理，色彩搭配協(xié)調(diào)，導(dǎo)航欄固定在頂部，文章內(nèi)容排版整齊，評(píng)論區(qū)交互友好，浮動(dòng)作者卡片設(shè)計(jì)新穎，為用戶提供了良好的閱讀體驗(yàn)。效果圖展示子頁設(shè)計(jì)注重視覺與交互的一致性，品牌元素貫穿始終，從頂部導(dǎo)航到正文排版，再到評(píng)論區(qū)和浮動(dòng)卡片，都保持了統(tǒng)一的風(fēng)格和流暢的交互體驗(yàn)，增強(qiáng)了用戶對(duì)品牌的認(rèn)知和好感。視覺與交互一致性子頁功能結(jié)構(gòu)清晰，頂部復(fù)用導(dǎo)航母版，下方為文章詳情區(qū)，包含標(biāo)題、作者、時(shí)間、關(guān)注按鈕等元素。正文圖文混排，點(diǎn)贊收藏并列，評(píng)論區(qū)含輸入框、字符計(jì)數(shù)、發(fā)布按鈕，右側(cè)浮動(dòng)作者卡片固定展示頭像、簡(jiǎn)介、最新文章，底部為上下篇導(dǎo)航。子頁功能結(jié)構(gòu)子頁功能結(jié)構(gòu)與效果圖（03）母版導(dǎo)航與文章詳情PART-MAIN圖6-2演示了將“網(wǎng)頁頂部導(dǎo)航欄”母版拖入子頁并脫離，坐標(biāo)歸零的操作。這種復(fù)用方式不僅節(jié)省了設(shè)計(jì)時(shí)間，還確保了導(dǎo)航欄在不同頁面間的一致性，為用戶提供熟悉的導(dǎo)航體驗(yàn)。母版導(dǎo)航復(fù)用母版導(dǎo)航復(fù)用與標(biāo)題區(qū)CONTENT（04）互動(dòng)按鈕三態(tài)切換PART-關(guān)注按鈕動(dòng)態(tài)面板圖6-6至6-10展示了創(chuàng)建70×30動(dòng)態(tài)面板“關(guān)注按鈕”的過程，內(nèi)含“已關(guān)注”“未關(guān)注”兩狀態(tài)。通過矩形文本分別為“已關(guān)注”“+關(guān)注”，設(shè)置懸停、按下、禁用樣式，實(shí)現(xiàn)了關(guān)注按鈕的交互效果。動(dòng)態(tài)面板創(chuàng)建單擊關(guān)注按鈕時(shí)，狀態(tài)會(huì)在“已關(guān)注”和“未關(guān)注”之間切換，并記錄全局變量，實(shí)現(xiàn)用戶關(guān)注狀態(tài)的持久化與視覺反饋，增強(qiáng)了用戶與頁面的互動(dòng)性。狀態(tài)切換邏輯關(guān)注按鈕的設(shè)計(jì)注重視覺反饋，通過顏色變化和圖標(biāo)切換，清晰地向用戶展示了當(dāng)前的關(guān)注狀態(tài)，提升了用戶體驗(yàn)。視覺反饋設(shè)計(jì)圖6-15至6-25并行創(chuàng)建了“點(diǎn)贊”“收藏”兩動(dòng)態(tài)面板，尺寸120×40，圓角20，分別含選中/未選中狀態(tài)。這種設(shè)計(jì)使得點(diǎn)贊和收藏功能的交互更加直觀和友好。點(diǎn)贊收藏面板創(chuàng)建點(diǎn)贊數(shù)實(shí)時(shí)+1/-1，收藏圖標(biāo)實(shí)心/空心切換，保證了數(shù)據(jù)的即時(shí)更新和交互的一致性，讓用戶能夠清晰地看到自己的操作結(jié)果。數(shù)據(jù)同步與交互點(diǎn)贊和收藏功能的優(yōu)化設(shè)計(jì)，不僅提升了用戶的操作體驗(yàn)，還增強(qiáng)了用戶對(duì)內(nèi)容的參與度和互動(dòng)性，有助于提高網(wǎng)站的用戶粘性。用戶體驗(yàn)優(yōu)化點(diǎn)贊收藏雙態(tài)切換（05）正文與圖文混排PART-正文文本與配圖布局圖6-11至6-14依次插入正文文本框800×620，設(shè)置字號(hào)16行距26，邊距30，保證閱讀舒適。通過復(fù)制文本框追加后續(xù)段落，實(shí)現(xiàn)長(zhǎng)文分段展示，為評(píng)論區(qū)留出視覺空間。正文文本排版在正文排版中，合理插入配圖760×450，以及圖注標(biāo)簽，增強(qiáng)了文章的視覺效果和信息傳達(dá)能力，使用戶在閱讀過程中能夠更好地理解和吸收內(nèi)容。圖文混排設(shè)計(jì)（06）評(píng)論區(qū)實(shí)時(shí)交互PART-圖6-35至6-44構(gòu)建了評(píng)論輸入?yún)^(qū)，包括750×160動(dòng)態(tài)面板、頭像、680×100多行文本域、125×40字符計(jì)數(shù)、90×35藍(lán)色發(fā)布按鈕，為用戶提供了便捷的評(píng)論輸入環(huán)境。評(píng)論輸入?yún)^(qū)構(gòu)建文本域設(shè)置提示文字、焦點(diǎn)陰影、字符實(shí)時(shí)統(tǒng)計(jì)與100字截?cái)?，保證了輸入體驗(yàn)與數(shù)據(jù)安全，讓用戶在評(píng)論時(shí)能夠清晰地了解剩余字符數(shù)。字符實(shí)時(shí)統(tǒng)計(jì)通過字符計(jì)數(shù)和實(shí)時(shí)反饋，優(yōu)化了評(píng)論輸入的交互體驗(yàn)，避免用戶輸入過長(zhǎng)內(nèi)容導(dǎo)致的不便，同時(shí)提升了頁面的整體交互質(zhì)量。交互體驗(yàn)優(yōu)化評(píng)論輸入與字符計(jì)數(shù)評(píng)論列表的優(yōu)化設(shè)計(jì)，使得用戶能夠方便地查看和互動(dòng)評(píng)論，增強(qiáng)了社區(qū)的活躍度和用戶的參與感。用戶體驗(yàn)提升評(píng)論列表中繼器渲染通過數(shù)據(jù)列picture、name、comment、time、evaluation、like綁定，實(shí)現(xiàn)了評(píng)論數(shù)據(jù)的動(dòng)態(tài)加載和交互一致性，提升了頁面的動(dòng)態(tài)性和用戶體驗(yàn)。數(shù)據(jù)綁定與交互圖6-47至6-55創(chuàng)建了評(píng)論列表中繼器，每行750×130，包含頭像、用戶名、評(píng)論內(nèi)容、發(fā)布時(shí)間、復(fù)評(píng)數(shù)、點(diǎn)贊數(shù)等元素，實(shí)現(xiàn)了評(píng)論的批量渲染。中繼器創(chuàng)建（07）浮動(dòng)作者卡片PART-圖6-66至6-72創(chuàng)建了370×400浮動(dòng)動(dòng)態(tài)面板，固定于瀏覽器右側(cè)頂部，包含頭像、作者名、新銳作者標(biāo)簽、簡(jiǎn)介、文章統(tǒng)計(jì)、最近內(nèi)容列表，為作者信息提供了突出展示。浮動(dòng)面板創(chuàng)建作者信息浮動(dòng)面板浮動(dòng)作者卡片的設(shè)計(jì)采用了固定定位，無論頁面如何滾動(dòng)，卡片始終保持在視野內(nèi)，方便用戶隨時(shí)查看作者信息，增強(qiáng)了作者的曝光度。固定定位設(shè)計(jì)（08）上下篇導(dǎo)航與分享PART-圖6-32至6-34添加了360×100上下篇導(dǎo)航矩形，左側(cè)邊框高亮，懸停變色跳轉(zhuǎn)，為用戶提供了便捷的導(dǎo)航體驗(yàn)，方便用戶快速切換到相關(guān)文章。上下篇導(dǎo)航設(shè)計(jì)上下篇與社交分享圖6-27至6-31在底部添加了分享到QQ、微信、微博圖標(biāo)，設(shè)置懸停變色與空鏈接，完成了站內(nèi)外傳播閉環(huán)，提升了內(nèi)容的傳播范圍。社交分享配置（09）教學(xué)小結(jié)與課堂作業(yè)PART-通過本章實(shí)戰(zhàn)，學(xué)生已掌握子頁完整流程：母版導(dǎo)航復(fù)用、文章排版、動(dòng)態(tài)面板多態(tài)切換、中繼器評(píng)論渲染、浮動(dòng)卡片固定定位、社交分享配置。重點(diǎn)理解狀態(tài)同步、變量綁定、字符計(jì)數(shù)三大核心技能，為后續(xù)詳情頁與社區(qū)頁奠定扎實(shí)基礎(chǔ)。教學(xué)小結(jié)教學(xué)小結(jié)綜合作業(yè)要求課堂綜合作業(yè)作業(yè)主題為新聞子頁高保真原型。任務(wù)包括：頂部固定導(dǎo)航含下拉菜單與搜索；正文圖文排版；作者信息浮動(dòng)卡片；中繼器熱門作品；頭條熱榜滾動(dòng)交互。提交Axure源文件及500字設(shè)計(jì)說明，重點(diǎn)闡述狀態(tài)同步與數(shù)據(jù)綁定邏輯。THANKYOU感謝您的觀看模塊二網(wǎng)站界面原型設(shè)計(jì)第7章手機(jī)引導(dǎo)頁界面模塊三手機(jī)界面原型設(shè)計(jì)教學(xué)重點(diǎn)難點(diǎn)PARTONE課堂思政與需求總覽PARTTWO啟動(dòng)頁搭建PARTTHREE廣告頁布局PARTFOUR倒計(jì)時(shí)邏輯實(shí)現(xiàn)PARTFIVE加載與自動(dòng)跳轉(zhuǎn)PARTSIX目錄CONTENTS.變量與表達(dá)式應(yīng)用PARTSEVEN交互細(xì)節(jié)優(yōu)化PARTEIGHT小結(jié)與練習(xí)PARTNINE總結(jié)與作業(yè)PARTTEN目錄CONTENTS.（01）教學(xué)重點(diǎn)難點(diǎn)PART-掌握手機(jī)引導(dǎo)頁制作全流程，包括啟動(dòng)加載動(dòng)畫、廣告倒計(jì)時(shí)、跳過按鈕、狀態(tài)切換與變量驅(qū)動(dòng)。熟練運(yùn)用動(dòng)態(tài)面板、變量、條件邏輯實(shí)現(xiàn)5秒倒計(jì)時(shí)與左右滑動(dòng)切換功能。教學(xué)重點(diǎn)在375×812iPhone11Pro畫布內(nèi)協(xié)調(diào)倒計(jì)時(shí)變量遞減、循環(huán)面板狀態(tài)切換、自動(dòng)跳轉(zhuǎn)與手動(dòng)跳過邏輯，確保倒計(jì)時(shí)實(shí)時(shí)準(zhǔn)確、交互零沖突，提升用戶體驗(yàn)。教學(xué)難點(diǎn)教學(xué)重點(diǎn)與難點(diǎn)（02）課堂思政與需求總覽PART-引導(dǎo)頁需融入社會(huì)主義核心價(jià)值觀，通過圖標(biāo)、標(biāo)語、文明用語提醒用戶遵守網(wǎng)絡(luò)禮儀，強(qiáng)調(diào)思政教育對(duì)個(gè)人和社會(huì)的重要性。思政融入用戶點(diǎn)擊應(yīng)用后先顯示加載動(dòng)畫，隨后進(jìn)入廣告頁，可選擇跳過或觀看5秒廣告，完成品牌曝光與合規(guī)引導(dǎo)，為后續(xù)首頁體驗(yàn)奠定視覺與價(jià)值基調(diào)。功能需求一引導(dǎo)頁需支持左右滑動(dòng)切換廣告內(nèi)容，同時(shí)提供單擊按鈕直接跳過引導(dǎo)頁的功能，確保用戶操作的多樣性和便捷性。功能需求二思政融入與功能需求效果圖（03）啟動(dòng)頁搭建PART-新建375×812動(dòng)態(tài)面板‘啟動(dòng)頁’，新增‘啟動(dòng)頁’‘廣告頁’兩狀態(tài)并勾選自適應(yīng)。導(dǎo)入狀態(tài)欄、麥克風(fēng)圖標(biāo)、加載動(dòng)畫，設(shè)置坐標(biāo)、字號(hào)48、填充色#9689FF，形成品牌識(shí)別與加載反饋，為后續(xù)倒計(jì)時(shí)預(yù)留視覺空間。啟動(dòng)頁搭建啟動(dòng)頁動(dòng)態(tài)面板與素材（04）廣告頁布局PART-廣告背景與跳過按鈕導(dǎo)入全屏廣告圖375×812作為背景，確保廣告內(nèi)容完整展示，吸引用戶注意力，為品牌推廣提供視覺焦點(diǎn)。廣告背景添加103×30跳過按鈕，圓角15，填充#333333，文本‘跳過廣告’，置于右上角，提供用戶隨時(shí)退出廣告入口，保證體驗(yàn)友好與合規(guī)提示并存。跳過按鈕（05）倒計(jì)時(shí)邏輯實(shí)現(xiàn)PART-創(chuàng)建30×20倒計(jì)時(shí)動(dòng)態(tài)面板，內(nèi)含提示文字、循環(huán)面板、時(shí)間變量矩形，為倒計(jì)時(shí)功能提供基礎(chǔ)結(jié)構(gòu)。通過局部變量time存儲(chǔ)剩余秒數(shù)，確保倒計(jì)時(shí)邏輯的實(shí)時(shí)性和準(zhǔn)確性，為后續(xù)狀態(tài)切換提供數(shù)據(jù)支持。使用表達(dá)式[[time-1]]實(shí)現(xiàn)每秒遞減，[[time]]直接顯示剩余秒數(shù)，精準(zhǔn)控制倒計(jì)時(shí)進(jìn)度。倒計(jì)時(shí)面板變量存儲(chǔ)表達(dá)式計(jì)算倒計(jì)時(shí)面板與變量狀態(tài)切換邏輯循環(huán)面板狀態(tài)切換為循環(huán)面板設(shè)置‘面板狀態(tài)改變時(shí)’交互，條件time>1時(shí)遞減變量并更新提示文字，狀態(tài)1時(shí)自動(dòng)跳轉(zhuǎn)首頁，確保倒計(jì)時(shí)邏輯閉環(huán)與跳轉(zhuǎn)時(shí)機(jī)精準(zhǔn)。（06）加載與自動(dòng)跳轉(zhuǎn)PART-為啟動(dòng)頁設(shè)置‘加載時(shí)’交互，等待3000毫秒，確保加載動(dòng)畫完整呈現(xiàn)，提升用戶對(duì)應(yīng)用啟動(dòng)的感知。加載等待3秒后切換至廣告頁，淡入淡出500毫秒，平滑過渡至廣告內(nèi)容，為品牌曝光與倒計(jì)時(shí)啟動(dòng)提供緩沖。自動(dòng)跳轉(zhuǎn)啟動(dòng)頁加載等待與跳轉(zhuǎn)（07）變量與表達(dá)式應(yīng)用PART-變量存儲(chǔ)與表達(dá)式計(jì)算變量與表達(dá)式應(yīng)用通過全局變量time存儲(chǔ)倒計(jì)時(shí)秒數(shù)，使用表達(dá)式[[time-1]]實(shí)現(xiàn)每秒遞減，[[time]]直接顯示剩余秒數(shù)，示范變量與表達(dá)式在移動(dòng)端原型中的實(shí)時(shí)計(jì)算與文本替換方法。（08）交互細(xì)節(jié)優(yōu)化PART-跳過按鈕點(diǎn)擊直接跳轉(zhuǎn)首頁，避免用戶長(zhǎng)時(shí)間等待倒計(jì)時(shí)，提升用戶體驗(yàn)，確保操作的即時(shí)性。跳過按鈕優(yōu)化跳過按鈕與手勢(shì)擴(kuò)展為后續(xù)練習(xí)預(yù)留左右滑動(dòng)切換廣告邏輯接口，保證用戶操作多樣性與體驗(yàn)流暢，滿足不同用戶習(xí)慣。手勢(shì)擴(kuò)展（09）小結(jié)與練習(xí)PART-通過本章實(shí)戰(zhàn)，學(xué)生已掌握引導(dǎo)頁完整流程：?jiǎn)?dòng)加載、廣告倒計(jì)時(shí)、變量驅(qū)動(dòng)、狀態(tài)切換、自動(dòng)跳轉(zhuǎn)與手動(dòng)跳過，理解變量與表達(dá)式在移動(dòng)端交互中的核心作用，為后續(xù)復(fù)雜原型奠定邏輯基礎(chǔ)。本章小結(jié)本章小結(jié)根據(jù)圖7-17效果圖，完成加載動(dòng)畫、5秒廣告倒計(jì)時(shí)、左右滑動(dòng)切換廣告、跳過按鈕跳轉(zhuǎn)功能，確保交互邏輯清晰。練習(xí)要求一提交Axure源文件及300字設(shè)計(jì)說明，重點(diǎn)闡述倒計(jì)時(shí)變量邏輯與手勢(shì)切換實(shí)現(xiàn)思路，體現(xiàn)設(shè)計(jì)細(xì)節(jié)。練習(xí)要求二設(shè)計(jì)說明需包含如何優(yōu)化用戶體驗(yàn)、提升交互效率的方法，體現(xiàn)對(duì)用戶需求的深入理解。練習(xí)要求三加深練習(xí)要求（10）總結(jié)與作業(yè)PART-在375×812iPhone11Pro畫布上完成手機(jī)引導(dǎo)頁高保真原型，確保適配主流設(shè)備。作業(yè)任務(wù)一課堂綜合作業(yè)實(shí)現(xiàn)3秒啟動(dòng)加載動(dòng)畫，吸引用戶注意力，為品牌曝光與后續(xù)內(nèi)容展示做好鋪墊。作業(yè)任務(wù)二完成5秒倒計(jì)時(shí)廣告頁，支持左右滑動(dòng)切換廣告，提升用戶操作靈活性。作業(yè)任務(wù)三確保跳過按鈕即時(shí)跳轉(zhuǎn)，避免用戶等待，提交Axure源文件及400字設(shè)計(jì)說明，重點(diǎn)闡述實(shí)現(xiàn)方法。作業(yè)任務(wù)四THANKYOU感謝您的觀看模塊三手機(jī)界面原型設(shè)計(jì)第8章手機(jī)主頁界面模塊三手機(jī)界面原型設(shè)計(jì)卡片內(nèi)容橫向滑動(dòng)PARTFOUR底部標(biāo)簽欄狀態(tài)切換PARTFIVE輪播圖與手勢(shì)切換PARTTHREE教學(xué)重點(diǎn)難點(diǎn)PARTONE主頁架構(gòu)與狀態(tài)欄PARTTWO目錄CONTENTS.設(shè)置頁結(jié)構(gòu)與開關(guān)PARTSIX教學(xué)小結(jié)與作業(yè)PARTSEVEN目錄CONTENTS.（01）教學(xué)重點(diǎn)難點(diǎn)PART-本課程聚焦于在375×812iPhone11Pro畫布上，完成從頂部狀態(tài)欄到設(shè)置頁的完整原型流程。學(xué)生需掌握動(dòng)態(tài)面板、中繼器、變量等工具的使用，實(shí)現(xiàn)自動(dòng)輪播、手勢(shì)切換等復(fù)雜交互，最終交付零沖突、視覺一致的高保真原型，為復(fù)雜App項(xiàng)目奠定基礎(chǔ)。教學(xué)重點(diǎn)課程產(chǎn)出包括頂部狀態(tài)欄、輪播圖、橫向滑動(dòng)卡片、底部標(biāo)簽欄以及設(shè)置頁的開關(guān)與彈窗交互。學(xué)生將通過實(shí)戰(zhàn)，熟練運(yùn)用各類工具，完成從設(shè)計(jì)到交互的全流程，為后續(xù)項(xiàng)目積累可復(fù)用的方法論。課程產(chǎn)出全流程高保真原型重點(diǎn)在有限畫布內(nèi)，輪播指示點(diǎn)與手勢(shì)滑動(dòng)邊界容易發(fā)生沖突，搶占觸控區(qū)域。通過精確限定邊界，確保輪播圖的自動(dòng)與手動(dòng)切換流暢，避免用戶操作時(shí)的誤觸，提升交互體驗(yàn)。輪播指示點(diǎn)與滑動(dòng)邊界沖突中繼器數(shù)據(jù)更新與實(shí)時(shí)渲染可能出現(xiàn)延遲，影響用戶體驗(yàn)。通過變量監(jiān)聽與數(shù)據(jù)綁定優(yōu)化，確保數(shù)據(jù)實(shí)時(shí)更新，實(shí)現(xiàn)卡片內(nèi)容的無縫滑動(dòng)與展示，保持視覺與交互的一致性。中繼器數(shù)據(jù)更新延遲開關(guān)狀態(tài)需跨頁面級(jí)聯(lián)同步，確保用戶設(shè)置即時(shí)生效。通過變量與表達(dá)式的應(yīng)用，實(shí)現(xiàn)開關(guān)狀態(tài)的全局同步，保證設(shè)置頁的交互邏輯清晰、操作便捷。開關(guān)狀態(tài)同步問題交互零沖突難點(diǎn)拆解（02）主頁架構(gòu)與狀態(tài)欄PART-頂部90px固定狀態(tài)欄包含狀態(tài)圖標(biāo)、搜索框、漢堡菜單與免流量角標(biāo)，為用戶提供穩(wěn)定的操作區(qū)域，同時(shí)為下方內(nèi)容區(qū)留出穩(wěn)定空間，確保整體布局的協(xié)調(diào)性。頂部狀態(tài)欄主頁功能結(jié)構(gòu)全景中部345×135輪播圖支持自動(dòng)5秒切換與左右手勢(shì)，為品牌曝光與用戶互動(dòng)提供視覺焦點(diǎn)，吸引用戶注意力，增強(qiáng)頁面的動(dòng)態(tài)效果。輪播圖區(qū)域快捷導(dǎo)航、推薦歌單、民謠、排行榜四大卡片模塊橫向滑動(dòng)展示更多內(nèi)容，豐富頁面信息量，滿足用戶多樣化的瀏覽需求，提升用戶體驗(yàn)?？ㄆK底部102px固定標(biāo)簽欄實(shí)現(xiàn)發(fā)現(xiàn)、播客、我的、關(guān)注、社區(qū)五態(tài)切換，為用戶提供便捷的導(dǎo)航入口，確保頁面切換的直觀性與品牌一致性。底部標(biāo)簽欄新建375×90動(dòng)態(tài)面板并固定于頂部，為狀態(tài)欄與搜索框提供穩(wěn)定的承載空間，確保在頁面滾動(dòng)時(shí)頂部區(qū)域始終保持不變。依次置入狀態(tài)欄圖片、30×30漢堡菜單、225×35搜索框及22×22免流量角標(biāo)，合理安排各元件的坐標(biāo)與尺寸，實(shí)現(xiàn)頂部區(qū)域的信息完整展示。搜索框通過設(shè)置提示文字、焦點(diǎn)變色、圖標(biāo)占位，完成視覺與交互的一致性設(shè)置，提升用戶操作的友好性與便捷性。動(dòng)態(tài)面板搭建元件插入與布局交互一致性設(shè)置狀態(tài)欄與搜索框?qū)崿F(xiàn)（03）輪播圖與手勢(shì)切換PART-輪播動(dòng)態(tài)面板與指示點(diǎn)創(chuàng)建345×135輪播動(dòng)態(tài)面板，內(nèi)含四狀態(tài)輪播區(qū)域，分別插入四張素材圖，為輪播圖的展示提供基礎(chǔ)結(jié)構(gòu)，確保圖片的完整展示與視覺效果。輪播區(qū)域搭建添加4個(gè)4×4圓點(diǎn)指示器并設(shè)置選中高亮，通過‘面板狀態(tài)改變時(shí)’事件綁定指示器選中狀態(tài)，實(shí)現(xiàn)自動(dòng)與手動(dòng)切換的雙向映射，為用戶提供清晰的導(dǎo)航指引。指示點(diǎn)設(shè)置配置自動(dòng)循環(huán)5000ms、左右滑動(dòng)切換、淡入淡出動(dòng)畫，實(shí)現(xiàn)手勢(shì)與自動(dòng)雙重控制，確保輪播圖的視覺流暢與交互零延遲，提升用戶體驗(yàn)。交互邏輯實(shí)現(xiàn)（04）卡片內(nèi)容橫向滑動(dòng)PART-推薦歌單中繼器滑動(dòng)構(gòu)建375×160滑動(dòng)面板，內(nèi)嵌660×160內(nèi)容區(qū)域，為推薦歌單的展示提供充足的空間，確?？ㄆ瑑?nèi)容的完整展示與橫向滑動(dòng)的流暢性。滑動(dòng)面板構(gòu)建拖入橫向中繼器展示120×120歌單封面與40×11標(biāo)