交互設(shè)計基礎(chǔ)-Foundamentals of Inter

交互設(shè)計基礎(chǔ)FoundamentalsofInteractionDesign徐俊南京信息職業(yè)技術(shù)學(xué)院目

錄01認(rèn)識交互設(shè)計WhatisInteractionDesign？

04原型設(shè)計Prototyping02交互設(shè)計原則ThePrincipleofInteractionDesign03信息結(jié)構(gòu)與交互產(chǎn)品方案Informationstructureandinteractiveproductsolutions05原型測試與匯報PrototypeandPresentation5.1低保真原型設(shè)計Low-fidelityprototyping線框圖Wireframe線框圖常用于項目初期，展示布局和功能，用于討論和反饋提。Wireframesareoftenusedintheearlystagesofaprojecttoshowlayoutandfunctionalityandtoprovidediscussionandfeedback.5.1低保真原型設(shè)計Low-fidelityprototyping快速創(chuàng)建設(shè)計師不用考慮太多細(xì)節(jié)，便能迅速畫好一個線框圖交付評審。QuickcreationDesignerscanquicklydrawawireframeandsubmititforreviewwithouthavingtoconsidertoomanydetails.5.1低保真原型設(shè)計Low-fidelityprototyping幫助緊焦簡潔精煉的線框圖能在產(chǎn)品項目的前期，去除視覺和細(xì)節(jié)的千擾，確保大家把注意力集中在什么需求、需要什么功能、優(yōu)先級如何劃分等重要問題上。HelpsfocusConciseandconcisewireframescanbeusedinproductIntheearlystageoftheproject,removevisualanddetaildistractionstoensurethateveryonefocusesonwhatneeds,whatfunctionsareneeded,howtodividepriorities,etc.onimportantissues.5.1低保真原型設(shè)計Low-fidelityprototyping方便修改線框圖的制作快速且低成本，在多種可能的對比下試驗，可以及時得到反饋，設(shè)計師可以輕松修改，要么及時放棄、重新繪畫新的線框圖。EasytomodifyWireframesarequickandinexpensivetocreate.Theycanbetestedunderavarietyofpossiblecomparisonsandgetfeedbackinatimelymanner.Designerscaneasilymodifyorabandonandredrawnewwireframes.5.1低保真原型設(shè)計Low-fidelityprototyping低保真原型固的作用第一

快速表現(xiàn)產(chǎn)品的信息架構(gòu)第二

快速表現(xiàn)產(chǎn)品它的頁面框架、交互邏輯第三為下一步的設(shè)計打下基礎(chǔ)第四減少了開發(fā)的成本Theroleoflow-fidelityprototypesFirst,quicklydisplaytheproduct'sinformationarchitectureSecond,quicklydisplaytheproduct'spageframeworkandinteractionlogicThird,itlaysthefoundationforthenextstepofdesign.Fourth,itreducesthecostofdevelopment.5.1低保真原型設(shè)計Low-fidelityprototyping什么是好線框圖？簡潔清晰能一眼了解頁面布局和元素規(guī)整統(tǒng)一能高效分辨不同類型模塊準(zhǔn)確到位原型表達(dá)準(zhǔn)確，不僅僅是布局與元素，還有線框圖中選用的示例重點突出可以清晰了解頁面重點和內(nèi)容主次5.1低保真原型設(shè)計Low-fidelityprototypingWhatisagoodwireframe?ClearandconciseYoucanunderstandthepagelayoutandelementsataglanceRegularandunifiedYoucanefficientlydistinguishdifferenttypesofmodulesAccurateandaccurateTheprototypeisaccurate,notonlyintermsoflayoutandelements,butalsointheexamplesselectedinthewireframeHighlightsYoucanclearlyunderstandthepagefocusandthepriorityofthecontent5.1低保真原型設(shè)計Low-fidelityprototyping低保真原型基本設(shè)計流程梳理內(nèi)容清單繪制線框圖低保真原型建立視覺層次打磨線框圖5.1低保真原型設(shè)計Low-fidelityprototypingBasicdesignprocessforlow-fidelityprototypesOrganizethecontentlistDrawwireframesLow-fidelit