網(wǎng)站原型交互設(shè)計(jì)課件 課件2

第5章Axure軟件主要功能5.1快捷功能區(qū)軟件的頂部是快捷功能區(qū)，它把一些常用功能的快捷按鈕全部集成在這里。其中包括常規(guī)功能、編輯功能、發(fā)布功能、團(tuán)隊(duì)項(xiàng)目功能等快捷按鈕。第5章Axure軟件主要功能5.2站點(diǎn)地圖站點(diǎn)地圖位于軟件的左上位置，其作用為增加、刪除和組織管理整個(gè)原型中的頁面。站點(diǎn)地圖是樹狀的，以首頁（index）為根節(jié)點(diǎn)。第5章Axure軟件主要功能5.3元件區(qū)原型設(shè)計(jì)中涉及到的文本、圖形、圖像等，在AxureRP中被稱為元件。默認(rèn)元件庫和流程圖元件庫，兩個(gè)元件庫可供選擇使用。第5章Axure軟件主要功能5.4元件屬性與樣式屬性是針對(duì)元件進(jìn)行的鼠標(biāo)懸停、鼠標(biāo)按下、選中等交互樣式設(shè)置。樣式方面是對(duì)所選擇的元件進(jìn)行位置、尺寸、基本樣式、邊框、線型、對(duì)齊等設(shè)置。第5章Axure軟件主要功能5.5生成與預(yù)覽原型設(shè)計(jì)的效果展示用生成與預(yù)覽來實(shí)現(xiàn)。點(diǎn)擊軟件菜單中的“發(fā)布”，再點(diǎn)擊其中的“預(yù)覽選項(xiàng)”，出現(xiàn)預(yù)覽設(shè)置，點(diǎn)擊其中的“配置”按鈕，進(jìn)入生成設(shè)置界面。第5章Axure軟件主要功能5.6元件交互與說明應(yīng)用場(chǎng)景：彈跳的愛心第5章Axure軟件主要功能5.7頁面設(shè)置應(yīng)用場(chǎng)景：向左滑動(dòng)的動(dòng)態(tài)效果第5章Axure軟件主要功能5.8母版管理母版的創(chuàng)建、修改等編輯操作與其他頁面的相關(guān)操作基本類似，主要涉及新建、編輯、刪除等三大塊的工作。第一，創(chuàng)建一個(gè)自定義的觸發(fā)事件。創(chuàng)建一個(gè)自定義的觸發(fā)事件需要在導(dǎo)航菜單“布置”列表最后一項(xiàng)“管理母版觸發(fā)事件”中進(jìn)行設(shè)置，單擊“+”添加一個(gè)事件名稱，并命名。第二，將母版中的某個(gè)事件與自定義觸發(fā)事件綁定。第5章Axure軟件主要功能5.9設(shè)計(jì)作業(yè)在第4章設(shè)計(jì)作業(yè)的基礎(chǔ)上，要求學(xué)生自行選擇素材，實(shí)現(xiàn)部件創(chuàng)建、屬性調(diào)整、部件庫的創(chuàng)建等操作。第6章變量與表達(dá)式6.1變量第6章變量與表達(dá)式6.1變量應(yīng)用場(chǎng)景：變量跨頁傳遞元件文字第6章變量與表達(dá)式6.2表達(dá)式表達(dá)式是由數(shù)字、運(yùn)算符、數(shù)字分組符號(hào)（括號(hào)）、變量等組合而成的公式。在Axure中表達(dá)式要用[[]]表示，在[[]]中的內(nèi)容是可以進(jìn)行運(yùn)算的，而寫在[[]]外面或者多個(gè)[[]]的內(nèi)容寫在一起時(shí)，則是將返回值與文字或返回值與返回值連接為一個(gè)字符串。第6章變量與表達(dá)式6.3設(shè)計(jì)作業(yè)在第4章設(shè)計(jì)作業(yè)的基礎(chǔ)上，要求自制iPhone控制面板控件，并實(shí)現(xiàn)通過單擊控制面板中的按鈕變量跨頁傳遞元件文字的功能。第7章動(dòng)態(tài)面板7.1動(dòng)態(tài)面板的組成動(dòng)態(tài)面板狀態(tài)及其預(yù)覽顯示情況第7章動(dòng)態(tài)面板7.2動(dòng)態(tài)面板的屬性滾動(dòng)條設(shè)置100%寬度允許觸發(fā)鼠標(biāo)交互禁用選中輸入[選項(xiàng)]組名稱元件提示第7章動(dòng)態(tài)面板7.3動(dòng)態(tài)面板的事件應(yīng)用場(chǎng)景：手游首頁界面第7章動(dòng)態(tài)面板7.4設(shè)計(jì)作業(yè)要求學(xué)生使用動(dòng)態(tài)面板設(shè)計(jì)實(shí)現(xiàn)Banner輪播畫面的自動(dòng)播放，單擊鼠標(biāo)切換寫一個(gè)畫面的效果。第8章函數(shù)與中繼器8.1函數(shù)通過程序代碼中引入函數(shù)名稱和所需的參數(shù)，可在該程序中執(zhí)行（或稱調(diào)用）該函數(shù)。函數(shù)名稱比較好區(qū)別，名稱帶有“()”，同時(shí)函數(shù)也分為無參數(shù)和有參數(shù)函數(shù)，前者可以直接調(diào)用，而后者則需要寫入?yún)?shù)進(jìn)行運(yùn)算。字符串函數(shù)數(shù)學(xué)函數(shù)日期函數(shù)數(shù)字函數(shù)元件函數(shù)頁面函數(shù)窗口函數(shù)鼠標(biāo)函數(shù)中繼器/數(shù)據(jù)集條件操作符第8章函數(shù)與中繼器8.2中繼器應(yīng)用場(chǎng)景：列表的翻頁效果第8章函數(shù)與中繼器8.3設(shè)計(jì)作業(yè)要求學(xué)生將iPhone狀態(tài)欄、iPhone控制面板及Banner輪播畫面等加以整合，并使用this等元件函數(shù)實(shí)現(xiàn)按住iPhone頁面圖標(biāo)可以移動(dòng)至指定位置的功能。第三部分

網(wǎng)站原型設(shè)計(jì)項(xiàng)目篇第9章個(gè)人作品展示網(wǎng)頁9.1應(yīng)用場(chǎng)景個(gè)人作品展示網(wǎng)頁是一種提供個(gè)人作品與人交互的途徑，通過作品展示達(dá)到招聘單位與被招聘人之間的信息傳播，在網(wǎng)頁設(shè)計(jì)中是一種廣泛使用的設(shè)計(jì)應(yīng)用。第9章個(gè)人作品展示網(wǎng)頁9.2制作過程第9章個(gè)人作品展示網(wǎng)頁9.2制作過程第9章個(gè)人作品展示網(wǎng)頁9.3設(shè)計(jì)拓展1.網(wǎng)站信息架構(gòu)的組成2.網(wǎng)站信息架構(gòu)的框架（1）設(shè)計(jì)結(jié)構(gòu)（2）決定組織方式（3）制定標(biāo)簽3.網(wǎng)站信息架構(gòu)的優(yōu)點(diǎn)

（1）區(qū)域?qū)Ш较到y(tǒng)

（2）體現(xiàn)自然結(jié)構(gòu)的導(dǎo)航

（3）情景