新媒體產(chǎn)品設(shè)計(jì)與項(xiàng)目管理課程簡介基本介紹教學(xué)大綱期末考核新媒體產(chǎn)品設(shè)計(jì)？傻傻分不清楚網(wǎng)頁設(shè)計(jì)界面設(shè)計(jì)交互設(shè)計(jì)場景不同、軟件不同一、基本介紹

什么是交互？什么是交互設(shè)計(jì)？交互設(shè)計(jì)的范疇？常見的術(shù)語？有哪些就業(yè)崗位？一、基本介紹什么是交互？交互，即交流互動(dòng)，其實(shí)這個(gè)詞語離我們的生活很近，例如中國式打招呼：簡單幾個(gè)字的你來我往，搭配眼神和動(dòng)作，傳遞出了禮貌、親近、尊敬等諸多豐富含義。人和機(jī)器間的交流互動(dòng)是什么呢？一、基本介紹舉個(gè)例子如果你想解鎖一個(gè)手機(jī)，你與手機(jī)的交流可能是下面這種情景：–按home鍵（嗨，手機(jī)，好久不見?。。┄C屏幕亮了沒解鎖，彈出輸入密碼頁面（哎？是小明來了么？）–輸入密碼（是?。。┄C解鎖（哦哦，歡迎歡迎快請(qǐng)進(jìn)~）當(dāng)人和一件事物（無論是人，機(jī)器，系統(tǒng)、環(huán)境等等）發(fā)生雙向的信息交流和互動(dòng)，就是一種交互行為。一、基本介紹

這種交流和互動(dòng)必須是雙向的，如果只有一方的信息輸出，而沒有第二方的參與，那么只能是信息展示而不是交流互動(dòng)，如下兩張圖。一、基本介紹什么是交互設(shè)計(jì)？“交互設(shè)計(jì)，是人工制品、環(huán)境和系統(tǒng)的行為，以及傳達(dá)這種行為的外形元素的設(shè)計(jì)與定義。”“交互設(shè)計(jì)，是交互行為的外在表現(xiàn)的設(shè)計(jì)，它一個(gè)或者一系列交流互動(dòng)，用文字、圖像或文檔等方式，從交流的內(nèi)容、方式、規(guī)則等維度進(jìn)行統(tǒng)一的設(shè)計(jì)。形象理解：交互設(shè)計(jì)就是給一個(gè)或一系列交互行為設(shè)計(jì)一個(gè)劇本。一、基本介紹

就像之前例子中提到的輸入框，輸入的字?jǐn)?shù)限制是多少，什么情況是正確的，什么情況是錯(cuò)誤的，在正確的時(shí)候有什么反饋，在錯(cuò)誤的時(shí)候有什么反饋，這些都會(huì)像是劇本里的故事情節(jié)和臺(tái)詞一樣被提前設(shè)計(jì)好，并由演員（元件）來表演出來，用戶在這個(gè)過程中，既是觀眾（觀看情節(jié)發(fā)展）也是演員（與圖形界面互動(dòng)，觸發(fā)情節(jié)）。人物情節(jié)舞臺(tái)...一、基本介紹交互設(shè)計(jì)的范疇？交互設(shè)計(jì)涉及到人與人、機(jī)器、環(huán)境等等，是一個(gè)很寬泛的概念。

互聯(lián)網(wǎng)行業(yè)內(nèi)大熱的交互設(shè)計(jì)，主要是人與互聯(lián)網(wǎng)產(chǎn)品（網(wǎng)站、App、智能手表等）的交互行為的設(shè)計(jì)。

例如，跟手機(jī)淘寶App進(jìn)行交流從而買到一款心儀的鞋子；跟大眾點(diǎn)評(píng)App交流讓它推薦一個(gè)附近性價(jià)比高的川菜館；跟支付寶交流讓它給你剛買的一瓶礦泉水付賬…一、基本介紹

UI(UserInterface)：用戶界面。用顏色或圖形明確產(chǎn)品功能與內(nèi)容的主次和展示。UE或UX(UserExperience)：用戶體驗(yàn)。通常國外和國內(nèi)的的外企叫UX，國內(nèi)叫UE?；ヂ?lián)網(wǎng)中的用戶體驗(yàn)是指用戶在訪問平臺(tái)的過程中的全部體驗(yàn)，它包括平臺(tái)是否有用，疑惑或者bug程度，功能是否易用、簡約，界面設(shè)計(jì)和交互設(shè)計(jì)是否友好等方面。UCD(User-CenteredDesign)：以用戶為中心的設(shè)計(jì)。在產(chǎn)品設(shè)計(jì)和開發(fā)的過程中，充分理解和挖掘用戶的需求，創(chuàng)造良好而舒適的用戶體驗(yàn)。IxD(Interactiondesign)：交互設(shè)計(jì)。解決應(yīng)用如何使用。力求提供最簡潔有效的路徑給用戶，讓用戶更方便的通過你的產(chǎn)品解決他的問題。常見的術(shù)語？一、基本介紹UI設(shè)計(jì)師視覺設(shè)計(jì)師交互設(shè)計(jì)師用戶體驗(yàn)設(shè)計(jì)師產(chǎn)品經(jīng)理有哪些就業(yè)崗位？一、基本介紹

大致明白了什么是交互設(shè)計(jì)，那么交互設(shè)計(jì)師的工作內(nèi)容也就呼之欲出了。簡單來說，如果交互設(shè)計(jì)是給交互行為寫劇本，那么交互設(shè)計(jì)師就是編劇，負(fù)責(zé)構(gòu)思、撰寫和修改這個(gè)劇本。交互設(shè)計(jì)師是做什么的？例如：你想讓大眾點(diǎn)評(píng)App給你推薦一個(gè)附近性價(jià)比高的川菜館，那么劇本大概包括以下這些?！局骶€】打開App-搜索關(guān)鍵詞-篩選-查看詳情-導(dǎo)航到達(dá)-評(píng)價(jià)【劇情】在哪個(gè)頁面找到搜索，搜索在什么位置，點(diǎn)擊哪個(gè)按鈕進(jìn)入搜索，App在什么情況下給出怎么樣的提示…【分支劇情】插播一條廣告，推薦給你相似的商家【大結(jié)局】你最終找到了符合你要求的餐廳。一、基本介紹交互設(shè)計(jì)師主要有哪些工作？

撰寫交互設(shè)計(jì)文檔設(shè)計(jì)產(chǎn)品原型...一、基本介紹撰寫交互設(shè)計(jì)文檔工具一、基本介紹什么是產(chǎn)品原型設(shè)計(jì)？通俗來講，在正式制作真實(shí)軟件產(chǎn)品前，通過原型給大家一個(gè)產(chǎn)品的模型展示，而這個(gè)模型我們可以通過非常簡單快速的方式得到。產(chǎn)品原型設(shè)計(jì)產(chǎn)品框架設(shè)計(jì)交互視覺測(cè)試直觀方式設(shè)計(jì)師產(chǎn)品溝通最終形態(tài)必須支持快速演示擁有高效復(fù)用的組件庫可以快速生成交互原型具有在線聯(lián)機(jī)協(xié)作功能一、基本介紹一款優(yōu)秀的產(chǎn)品原型設(shè)計(jì)工具應(yīng)具備的主要功能一、基本介紹通常原型設(shè)計(jì)工具分為兩類：原型設(shè)計(jì)工具基于移動(dòng)端基于PC端交互POP適用于手繪底仿真原型MockplusAxure

RP適用于中/高仿真原型一、基本介紹原型設(shè)計(jì)工具：AxureRP

推薦同學(xué)們使用AxureRP工具進(jìn)行產(chǎn)品原型設(shè)計(jì)?。。?nèi)部函數(shù)庫高保真原型 流程圖功能 團(tuán)隊(duì)協(xié)作邏輯關(guān)系表達(dá)式 低保真原型 定制特殊行為 托管團(tuán)隊(duì)項(xiàng)目Axure的使用場景場景一草根站長、互聯(lián)網(wǎng)創(chuàng)業(yè)者場景二開發(fā)外包業(yè)務(wù)人員場景三視覺設(shè)計(jì)師場景四用戶體驗(yàn)場景五業(yè)務(wù)運(yùn)營人員場景一：草根站長、互聯(lián)網(wǎng)創(chuàng)業(yè)者

有想法，有創(chuàng)業(yè)，起步難。當(dāng)前階段的產(chǎn)品處于想象中，只是一個(gè)原始想法，如果將創(chuàng)業(yè)想法表達(dá)出來呢，又如何避免與他人溝通過程中產(chǎn)生理解差異呢？使用草圖/截圖和文字來描述想法，但這樣又難以展示產(chǎn)品的核心功能與價(jià)值。使用Axure制作產(chǎn)品原型可以準(zhǔn)確形象的表達(dá)你的想法。場景二：開發(fā)外包業(yè)務(wù)人員

與客戶接洽溝通的過程中，通常都難以捕捉客戶全部需求，并且有些客戶在開發(fā)過程中對(duì)需求修改比較頻繁，甚至做很大的變動(dòng)。使用Axure制作產(chǎn)品原型與客戶溝通，可以有效驗(yàn)證是否是客戶想要的產(chǎn)品和功能，通過原型調(diào)整并確定最終需求。而這一切都不需要開發(fā)人員編寫一行代碼，有效提高效率，節(jié)省時(shí)間。場景三：視覺設(shè)計(jì)師

在開發(fā)產(chǎn)品的過程中，設(shè)計(jì)人員往往了解產(chǎn)品需求的時(shí)間沒有產(chǎn)品經(jīng)理和需求人員長，并不能很好的理解產(chǎn)品的真實(shí)意圖，讓設(shè)計(jì)人員在較短的時(shí)間內(nèi)設(shè)計(jì)出符合需求或者優(yōu)秀的產(chǎn)品，確實(shí)有些難度。使用Axure給設(shè)計(jì)人員提供一份產(chǎn)品原型圖，可以很好的彌補(bǔ)這一不足，也能節(jié)省很多溝通成本。場景四：用戶體驗(yàn)

在創(chuàng)業(yè)初期，正式開發(fā)產(chǎn)品之前，可以使用Axure制作出產(chǎn)品高仿真原型，并將原型發(fā)送給目標(biāo)用戶群體和項(xiàng)目干系人測(cè)試使用并獲取他們的反饋。可以充分利用他們的反饋意見對(duì)創(chuàng)業(yè)思路和產(chǎn)品功能界面進(jìn)行打磨調(diào)整，在原型中做這些要比開發(fā)出應(yīng)用程序后再做強(qiáng)過百倍。場景五：業(yè)務(wù)運(yùn)營人員

現(xiàn)在的公司，往往是產(chǎn)品剛有一個(gè)概念，還沒有開發(fā)出成品，就開始推廣宣傳，正所謂一步快，步步快！而運(yùn)營和銷售人員以什么來推廣銷售產(chǎn)品或服務(wù)呢？在確定產(chǎn)品需求以后，你可以使用Axure快速制作一個(gè)產(chǎn)品原型演示給運(yùn)營和銷售人員，然后銷售人員就可以緊鑼密鼓的組織工作了。你甚至可以使用幾個(gè)小時(shí)或幾天時(shí)間制作出一個(gè)高仿真產(chǎn)品原型，并將其上傳到WEB服務(wù)器中，這樣可以隨時(shí)讓團(tuán)隊(duì)成員和客戶使用PC或移動(dòng)設(shè)備來使用你的產(chǎn)品。小結(jié)使用Axure制作出品原型成本低；方便團(tuán)隊(duì)熟悉需求和評(píng)估需求，也給開發(fā)人員評(píng)估需求的可實(shí)現(xiàn)性。避免需求設(shè)計(jì)人員（創(chuàng)業(yè)者）的“天馬行空”和“不切實(shí)際”的想法，讓注意力時(shí)刻聚焦在用戶需求和產(chǎn)品功能上。方便團(tuán)隊(duì)及時(shí)提出改進(jìn)建議，降低產(chǎn)品后期大改需求導(dǎo)致產(chǎn)品不能按時(shí)上線的可能性，從而提高產(chǎn)品的（創(chuàng)業(yè)）成功率。課程教學(xué)大綱一、Axure基礎(chǔ)走進(jìn)AxureRP9頁面管理、流程圖元件區(qū)域自定義部件庫交互基礎(chǔ)事件用例動(dòng)作母版動(dòng)態(tài)面板二、Axure高級(jí)高級(jí)交互條件邏輯中繼器組件數(shù)據(jù)集三、Axure案例“夸父網(wǎng)”網(wǎng)站原型設(shè)計(jì)“微信”APP原型設(shè)計(jì)考評(píng)體系考勤、課堂表現(xiàn)20分平時(shí)作業(yè)20分網(wǎng)上測(cè)驗(yàn)30分平時(shí)成績一課一文30分期末考評(píng)體系考勤（20分）曠課扣5分遲到扣2

分請(qǐng)假不扣分曠課1/4取消考試課堂互動(dòng)主動(dòng)回答問題每次+1分，最高5分在線討論，最高5分

在線學(xué)習(xí)任務(wù)學(xué)習(xí)任務(wù)單視頻討論平時(shí)作業(yè)（20分）共7-8次課后作業(yè)網(wǎng)上測(cè)驗(yàn)（30分）共

6

次網(wǎng)上測(cè)驗(yàn)一課一文（30分）期末每位同學(xué)提交一份1000字左右的文章期末作品要求設(shè)計(jì)主題：

分組完成，分析與設(shè)計(jì)一個(gè)有創(chuàng)意的互聯(lián)網(wǎng)產(chǎn)品，主題自擬（5人左右一組）。具體要求分析文檔和一套產(chǎn)品原型中（或高）保真設(shè)計(jì)作品。產(chǎn)品主題鮮明，內(nèi)容豐富健康，實(shí)用性強(qiáng)，頁面元素豐富（有文字、圖片、交互等）。有PC端和移動(dòng)端兩種方案，頁面數(shù)量不少于10頁（如啟動(dòng)頁、首頁、注冊(cè)頁、個(gè)人頁、列表頁、詳細(xì)頁、留言頁等）。Word編寫的設(shè)計(jì)方案（選題意義、目標(biāo)群體、欄目模塊等），在文檔中要包含團(tuán)隊(duì)成員信息及分工情況，產(chǎn)品存在的問題分析和改進(jìn)意見。最后一周，所有團(tuán)隊(duì)展示作品及陳述。期末小組作品評(píng)分標(biāo)準(zhǔn)

Axure軟件介紹與頁面認(rèn)識(shí)技術(shù)型文科人才系列課程主講人：文學(xué)與傳媒學(xué)院交互設(shè)計(jì)Axure軟件界面大致可以分為8個(gè)區(qū)域，分別為菜單欄區(qū)域、工具欄區(qū)域、頁面區(qū)域、元件庫區(qū)域、母版區(qū)域、工作區(qū)域、檢視區(qū)域、頁面概要區(qū)域，如圖2.11所示。

軟件界面頁面區(qū)域位于軟件界面的左上方，是用來管理頁面和顯示頁面的區(qū)域，如圖2.1所示。

管理軟件頁面關(guān)系軟件的骨架，清晰展示軟件的結(jié)構(gòu)

管理頁面層級(jí)本章案例：“百度門戶”欄目規(guī)劃。

“百度門戶”欄目規(guī)劃效果2.1?認(rèn)識(shí)軟件界面2.2?用頁面區(qū)域管理軟件頁面2.3?移動(dòng)端與PC端的原型制作規(guī)范2.4?小結(jié)2.1.1菜單欄區(qū)域

菜單欄區(qū)域有文件、編輯、視圖、項(xiàng)目、布局、發(fā)布、團(tuán)隊(duì)、賬戶、幫助9個(gè)菜單項(xiàng)，包含了軟件的一些常規(guī)操作和功能。

“文件”菜單：

（1）可以新建工程、打開工程及保存工程，這些操作可以使用快捷鍵或者工具欄快速操作按鈕完成；

菜單欄區(qū)域文件菜單選項(xiàng)

（2）可以導(dǎo)入RP文件，新建團(tuán)隊(duì)項(xiàng)目、打開團(tuán)隊(duì)項(xiàng)目；

（3）可以進(jìn)行打印紙張尺寸設(shè)置，打印index頁面，導(dǎo)出index圖片；

（4）可以設(shè)置定時(shí)備份軟件原型，避免制作軟件原型丟失。

“編輯”菜單：

可以完成復(fù)制、剪切、粘貼、撤銷、重做等操作，也可以使用快捷鍵來完成這些操作，所以很少會(huì)使用這個(gè)菜單。

“視圖”菜單：

編輯菜單選項(xiàng)視圖菜單選項(xiàng)

（１）“工具欄”選項(xiàng)。將工具欄區(qū)域劃分為基本工具欄和樣式工具欄兩類，可以通過勾選的方式控制工具欄區(qū)域內(nèi)容的顯示，同時(shí)提供自定義工具欄功能，工具欄內(nèi)容可以自行定義；

（２）“功能區(qū)”選項(xiàng)，分為5個(gè)區(qū)域，即頁面區(qū)域、元件庫區(qū)域、母版區(qū)域、檢視區(qū)域、概要區(qū)域，可通過勾選的方式控制這些區(qū)域的顯示與隱藏效果，還提供開關(guān)左側(cè)功能欄和開關(guān)右側(cè)功能欄的功能；

工具欄選項(xiàng)功能區(qū)選項(xiàng)

（３）“遮罩”選項(xiàng)，通過勾選的方式來控制隱藏對(duì)象、母版、動(dòng)態(tài)面板、中繼器、文本鏈接、熱區(qū)是否添加遮罩效果。

“項(xiàng)目”菜單：

（1）可對(duì)元件、頁面的樣式進(jìn)行編輯；

（2）具有自定義元件字段說明和頁面字段說明功能；

（3）具有添加全局變量功能。

遮罩選項(xiàng)項(xiàng)目菜單選項(xiàng)“發(fā)布”菜單：（1）可以進(jìn)行原型預(yù)覽，對(duì)預(yù)覽方式進(jìn)行設(shè)置，選擇打開瀏覽器方式和工具欄設(shè)置；（2）可以將原型發(fā)布到AxShare上面進(jìn)行托管；（3）以生成HTML文件的方式進(jìn)行原型發(fā)布；（4）生成需求規(guī)格說明書的Word文檔；（5）預(yù)覽和生成原型文件。

發(fā)布菜單選項(xiàng)“團(tuán)隊(duì)”菜單：

可以創(chuàng)建團(tuán)隊(duì)項(xiàng)目和獲取團(tuán)隊(duì)項(xiàng)目，進(jìn)行多人協(xié)作?！百~戶”菜單：

可以進(jìn)行賬戶登錄和服務(wù)器代理設(shè)置。

團(tuán)隊(duì)菜單選項(xiàng)賬戶菜單選項(xiàng)“幫助”菜單：（1）通過開始演示動(dòng)畫選項(xiàng)，學(xué)習(xí)原型工具的使用，提供在線培訓(xùn)教學(xué)功能及進(jìn)入Axure論壇

功能；（2）通過管理授權(quán)完成注冊(cè)，獲得軟件使用的授權(quán)；（3）提供軟件檢查更新及提交軟件意見和軟件錯(cuò)誤功能。

幫助菜單選項(xiàng)2.1.2工具欄區(qū)域

工具欄區(qū)域包含有使用頻率最高的快捷工具。

我們?cè)谠O(shè)計(jì)原型的過程中經(jīng)常會(huì)用到這些操作，理解工具欄的功能并掌握它的使用方法，可以提高制作原型的效率。

工具欄區(qū)域分為基本工具欄和樣式工具欄，同時(shí)提供自定義工具欄功能。

下面通過對(duì)兩個(gè)矩形元件的操作，熟悉一下工具欄的使用，如圖1.24所示。

工具欄區(qū)域1.基本工具欄

新建、打開、保存操作

文件：新建一個(gè)工程項(xiàng)目，快捷鍵是Ctrl+N。

打開：打開一個(gè)已有的工程項(xiàng)目（只能打開rp類型的工程），快捷鍵是Ctrl+O。

保存：保存一個(gè)工程項(xiàng)目，快捷鍵是Ctrl+S。

復(fù)制：單擊這個(gè)快捷按鈕，可以復(fù)制選中的元件，它的快捷鍵是Ctrl+C。

剪貼板：可以粘貼復(fù)制的元件。單擊這個(gè)快捷按鈕，可以把復(fù)制的元件粘貼到工作區(qū)域，它的快捷鍵是Ctrl+V。

撤銷：單擊這個(gè)快捷按鈕可以撤銷上一步的操作，快捷鍵是Ctrl+Z。

重做：單擊這個(gè)快捷按鈕可以重做上一步的操作，快捷鍵是Ctrl+Y。

剪切：單擊這個(gè)快捷按鈕可以剪切選中的元件，快捷鍵是Ctrl+X。

新建、打開、保存操作實(shí)戰(zhàn)演練1. 在元件庫區(qū)域，拖曳兩個(gè)矩形元件到工作區(qū)域，并在矩形元件上分別雙擊，進(jìn)行重新命名，一個(gè)矩形命名為“矩形一”，另一個(gè)矩形命名為“矩形二”，單擊保存快捷按鈕或者使用Ctrl+S快捷鍵保存上面的操作，如圖1.26所示。

拖曳矩形元件2. 選中“矩形一”元件，利用Ctrl+C快捷鍵復(fù)制出同樣的一個(gè)元件，再利用Ctrl+V快捷鍵粘

貼，也可以利用工具欄上快捷按鈕操作。

復(fù)制矩形元件

選擇、連接、鋼筆、更多、縮放操作

元件的選擇、連接、鋼筆、邊界點(diǎn)、切割、裁剪、連接點(diǎn)、格式刷以及縮放操作的快捷工具按鈕。

選擇、連接、鋼筆更多

選擇：用來選中工作區(qū)域中的元件，包括相交選中和包含選中，相交選中所選擇的區(qū)域只要和元件有接觸、有相交，這個(gè)元件就會(huì)呈現(xiàn)為選中狀態(tài)；而包含選中是把元件完全包含進(jìn)來，才會(huì)呈現(xiàn)為選中狀態(tài)。

連接：用來連接兩個(gè)元件。這個(gè)操作多用于繪制流程圖。

鋼筆：可以繪制出自定義的形狀。

縮放：設(shè)置工作區(qū)域的縮放比例，可以根據(jù)頁面內(nèi)容進(jìn)行調(diào)整。

布局操作

布局操作用來設(shè)置頁面中元件的布局，包括設(shè)置元件頂層、底層、組合、取消組合、對(duì)齊、分布操作。布局操作按鈕

頂層、底層：將工作區(qū)域中的元件置于頂層操作和置于底層操作。

組合、取消組合：可以將不同元件設(shè)置為一個(gè)組合，這樣可以把組合的元件一起移動(dòng)或者進(jìn)行其他操作；同時(shí)也可以將一個(gè)組合拆散為單獨(dú)的元件。

對(duì)齊：提供左對(duì)齊、左右居中、右對(duì)齊、頂部對(duì)齊、上下居中、底部對(duì)齊方式。

分布：包括水平分布和垂直分布兩種分布方式。

水平分布：單擊這個(gè)按鈕，可以讓選中的按鈕呈現(xiàn)為橫向均勻分布。

垂直分布：單擊這個(gè)按鈕，可以讓選中的按鈕呈現(xiàn)為縱向均勻分布。

對(duì)齊方式分布方式

鎖定、開關(guān)功能欄、發(fā)布、登錄操作

鎖定元件、取消鎖定元件、開關(guān)左側(cè)功能欄、開關(guān)右側(cè)功能欄、預(yù)覽、共享、發(fā)布、登錄操作按鈕。

鎖定、發(fā)布操作

鎖定、取消鎖定：將工作區(qū)域中的元件鎖定，變?yōu)椴豢梢砸苿?dòng)，也可以取消鎖定，進(jìn)行移動(dòng)。

開關(guān)功能欄：包括開關(guān)工作區(qū)域左側(cè)的功能欄和工作區(qū)域右側(cè)的功能欄。

預(yù)覽：以原型預(yù)覽的方式在瀏覽器中顯示，不生成本地原型文件。

共享：通過共享的方式創(chuàng)建團(tuán)隊(duì)項(xiàng)目，發(fā)布到AxShare上面。

發(fā)布：可以通過預(yù)覽的方式發(fā)布，也可以通過生成本地文件的形式發(fā)布。

登錄：提供登錄的快捷按鈕。2.樣式工具欄

樣式工具欄可用來給文本內(nèi)容或者元件邊框設(shè)置樣式，可以設(shè)置文本內(nèi)容顏色、字號(hào)、字體，也可以給元件邊框設(shè)置樣式。

樣式工具欄

：填充背景顏色，同樣單擊下三角可以選擇要填充的顏色。

：設(shè)置外部陰影，勾選陰影復(fù)選框，讓它生效，在這里可以設(shè)置陰影的偏移位置和模糊程度，并且可以設(shè)置陰影的顏色。

：設(shè)置元件邊框的顏色，單擊下三角，彈出框可用來選擇顏色。

：設(shè)置元件線寬，單擊下三角，彈出框可用來選擇邊框的寬度。

：設(shè)置元件的線條樣式，單擊下三角，彈出框可用來選擇線條樣式，實(shí)線或虛線。

：可以設(shè)置水平線元件和垂直線元件的箭頭樣式。

實(shí)戰(zhàn)演練1. 單擊矩形一元件，將其邊框編輯為紅色、粗線、打點(diǎn)式線條；將矩形二編輯成藍(lán)色背景，紅色外部陰影。

編輯矩形一和矩形二

2. 將矩形二的文本字體設(shè)置為華文琥珀，字體類型設(shè)置為BoldOblique，字號(hào)設(shè)置為28，添加粗體、斜體、下劃線設(shè)置，字體顏色設(shè)置為黃色，水平位置靠左對(duì)齊，垂直位置頂部對(duì)齊。

矩形二字體設(shè)置3. 將矩形二元件的x值設(shè)置為360，y值設(shè)置為80；寬度w值設(shè)置為240，h值設(shè)置為100。

編輯元件的位置和大小3.自定義工具欄

工具欄里有很多快捷按鈕，有一些按鈕是經(jīng)常會(huì)用到的，有一些按鈕可能很久都不會(huì)用到一次，這時(shí)可以自定義工具欄，在自定義工具欄里選擇顯示什么快捷按鈕。

單擊視圖菜單下工具欄選項(xiàng)，選擇自定義工具欄。

自定義工具欄2.1.3頁面區(qū)域

頁面區(qū)域是用來顯示軟件頁面的，從這里可以了解到軟件的大致結(jié)構(gòu)，有哪些頁面，以及頁面之間的關(guān)系。

頁面區(qū)域采用樹狀結(jié)構(gòu)來顯示頁面，以index頁為樹的根節(jié)點(diǎn)，可以對(duì)頁面進(jìn)行增加、移動(dòng)、刪除等操作來管理軟件原型的頁面。

頁面區(qū)域2.1.4元件庫區(qū)域

元件庫區(qū)域包含了制作原型需要的一些基礎(chǔ)元件，AxureRP8中原型設(shè)計(jì)工具默認(rèn)包含線框圖元件庫和流程圖元件庫、圖標(biāo)元件庫。

線框圖元件庫里提供了40種線框圖元件，常用的有圖片、文本標(biāo)簽、矩形、占位符、水平線、垂直線、文本框、下拉列表框、復(fù)選框、單選按鈕、提交按鈕。

線框圖元件

流程圖元件庫里提供了13種流程圖元件，有各種圖形、圖片、文件、角色、數(shù)據(jù)庫等。

圖標(biāo)元件庫里提供了各種各樣的圖標(biāo)，比如箭頭、電池、統(tǒng)計(jì)圖標(biāo)等。

流程圖元件圖標(biāo)元件2.1.5母版區(qū)域

母版區(qū)域用來設(shè)計(jì)一些共用、復(fù)用的區(qū)域，如網(wǎng)站尾部版權(quán)區(qū)域，可能每個(gè)頁面都會(huì)用到版權(quán)信息，也可以設(shè)計(jì)導(dǎo)航菜單，如移動(dòng)App的底部標(biāo)簽導(dǎo)航，在母版中設(shè)計(jì)一次，在其他頁面可直接引用，達(dá)到共用、復(fù)用的效果。

母版區(qū)域2.1.6工作區(qū)域

工作區(qū)域是用來繪制原型的畫布。在這個(gè)區(qū)域里完成原型的設(shè)計(jì)，就像畫畫時(shí)在畫布上盡情繪制。

工作區(qū)域1.1.7檢視區(qū)域

檢視區(qū)域是用來設(shè)計(jì)頁面或者元件的樣式和交互效果的，可以設(shè)置屬性，如添加頁面交互效果，頁面載入時(shí)觸發(fā)事件、窗口尺寸改變時(shí)觸發(fā)事件、窗口滾動(dòng)時(shí)觸發(fā)事件，以及在更多事件里還提供許多其他的事件。

屬性設(shè)置

在檢視區(qū)域中可以填寫頁面或者元件注釋，自定義注釋的名稱，如圖1.46所示。

還可以設(shè)計(jì)頁面、元件的樣式，比如頁面在瀏覽器中顯示的對(duì)齊方式是居中對(duì)齊還是居左對(duì)齊，頁面的背景色或者背景圖片，還可以設(shè)置草圖的效果，針對(duì)元件設(shè)置禁用、選中等屬性，也可以給元件添加樣式，設(shè)置元件的位置和大小、選擇元件的樣式，以及字體、邊框線、圓角半徑、對(duì)齊方式等。

說明樣式2.1.8頁面概要區(qū)域

頁面概要區(qū)域用來管理頁面上使用的元件，可以查看頁面上使用了哪些元件及管理這些元件，比如可以管理動(dòng)態(tài)面板，增加動(dòng)態(tài)面板、移動(dòng)動(dòng)態(tài)面板及刪除動(dòng)態(tài)面板等操作。

頁面概要區(qū)域2.1?認(rèn)識(shí)軟件界面2.2?用頁面區(qū)域管理軟件頁面2.3?移動(dòng)端與PC端的原型制作規(guī)范2.4?小結(jié)2.2.1?頁面區(qū)域是什么

2.2.2?頁面區(qū)域的功能使用2.2.3實(shí)戰(zhàn)——“百度門戶”欄目規(guī)劃2.2.4?小結(jié)2.2.1頁面區(qū)域是什么什么是頁面區(qū)域頁面區(qū)域由兩部分組成。一部分是功能菜單，就是一些操作頁面的按鈕，在頁面右鍵選項(xiàng)里提供更多操作按鈕，另一部分是頁面，呈現(xiàn)樹狀結(jié)構(gòu)，與Windows文件存放目錄結(jié)構(gòu)一致。通過父與子的頁面關(guān)系、兄弟和兄弟的頁面關(guān)系，將設(shè)計(jì)的產(chǎn)品頁面整合起來，形成產(chǎn)品的文檔，如圖2.3所示。

圖2.3頁面區(qū)域的結(jié)構(gòu)和功能

頁面區(qū)域能干什么1.頁面區(qū)域可以用來規(guī)劃軟件的功能單元或者軟件的結(jié)構(gòu)

2.頁面區(qū)域可以讓使用者快速地了解軟件的結(jié)構(gòu)

3.頁面區(qū)域方便使用者快速地找到想要的頁面

使用頁面區(qū)域注意事項(xiàng)1.制作軟件原型時(shí)要規(guī)劃軟件的功能菜單或者欄目結(jié)構(gòu)2.頁面的命名要有意義制作原型時(shí)要事先規(guī)劃好軟件的功能菜單或者欄目結(jié)構(gòu)，不要隨意地在站點(diǎn)地圖上新建頁面，導(dǎo)致頁面結(jié)構(gòu)混亂，根本看不出軟件的功能結(jié)構(gòu)。頁面的命名要讓使用者一看，就能知道這個(gè)頁面所要表達(dá)的含義。要做到顧名思義，不光是頁面要命名得有意義，部件也要命名得有意義。2.2.1?站點(diǎn)地圖是什么2.2.2?頁面區(qū)域的功能使用2.2.3?實(shí)戰(zhàn)——“百度門戶”欄目規(guī)劃2.2.4?小結(jié)2.2.2頁面區(qū)域的功能使用頁面區(qū)域的功能使用包括兩方面內(nèi)容：

功能菜單的使用01OPTION02OPTION頁面管理圖2.4頁面的功能菜單

除了使用功能菜單來管理頁面，也可以在頁面上右鍵單擊，通過彈出的

菜單選項(xiàng)管理頁面，如圖2.5所示。

圖2.5頁面右鍵菜單選項(xiàng)

添加：菜單選項(xiàng)，可以所選頁面之前或之后新增同級(jí)頁面，新增文件夾或新增子頁面。它的效果和功能條上的新增頁面和新增文件夾是一樣的。

移動(dòng)：菜單選項(xiàng)可以移動(dòng)頁面的前后順序關(guān)系，調(diào)整頁面的層級(jí)關(guān)系，和功能條上的移動(dòng)操作一致。

刪除：不想要的頁面或者文件夾可以通過刪除菜單選項(xiàng)來進(jìn)行刪除。如果當(dāng)前頁面下含有子頁面，Axure會(huì)自動(dòng)提示，單擊提示中的“確認(rèn)”后會(huì)同時(shí)刪除所有子頁面。

重命名：頁面的重新命名的方式有3種。

頁面重新命名的方式有3種：通過快捷鍵F2進(jìn)行頁面的重新命名。通過右鍵菜單選項(xiàng)里的重命名選項(xiàng)來重新命名；選中頁面后再單擊頁面名稱；312通過圖表（標(biāo)）類型菜單選項(xiàng)來更改頁面的圖標(biāo)類型，可以改為頁面或者流程圖的圖標(biāo)。圖標(biāo)的更改并不會(huì)影響頁面的內(nèi)容，只是便于對(duì)頁面的管理。通過生成流程圖菜單選項(xiàng)，可以生成縱向或者橫向的流程圖。選中index頁面，然后單擊鼠標(biāo)右鍵，選擇生成流程圖選項(xiàng)，生成縱向流程圖，如圖2.6所示。

圖2.6縱向流程圖2.2.1?站點(diǎn)地圖是什么2.2.2?頁面區(qū)域的功能使用2.2.3?實(shí)戰(zhàn)——“百度門戶”欄目規(guī)劃2.2.4?小結(jié)2.2.3實(shí)戰(zhàn)——“百度門戶”欄目規(guī)劃

結(jié)合前兩節(jié)學(xué)習(xí)的內(nèi)容，我們來做一個(gè)“百度”欄目規(guī)劃的案例，如圖2.7所示。

圖2.7百度門戶百度門戶，它有7個(gè)一級(jí)菜單，也就是被劃分為7個(gè)大的功能模塊。123456（一）首頁：這個(gè)是很多網(wǎng)站都存在的模塊，展示網(wǎng)站的綜合信息。（二）百度介紹：也就是企業(yè)介紹，也是必有的一個(gè)模塊。（三）新聞中心：用來介紹公司的一些新聞事件。（四）產(chǎn)品中心：這個(gè)模塊可以根據(jù)實(shí)際情況來選擇是否有。（五）商業(yè)中心：是百度的營銷推廣模塊，可以根據(jù)實(shí)際情況來選擇（六）招賢納士：是很多門戶網(wǎng)站都存在的功能模塊。7（七）聯(lián)系我們：是很多門戶網(wǎng)站都存在的功能模塊。1.將index頁面重新命名為“百度門戶”，在百度門戶下面建立7個(gè)頁面，分別命名為“首頁”“百度介紹”“新聞中心”“產(chǎn)品中心”“商業(yè)中心”“招賢納士”和“聯(lián)系我們”，如圖2.8所示。

圖2.8百度一級(jí)菜單

在百度介紹頁面新增兩個(gè)子頁面，有兩種方式：一種是通過功能條，另一種是通過右鍵單擊

菜單選項(xiàng)。將兩個(gè)子頁面分別命名為“百度文化”和“百度之路”，如圖2.9所示。在產(chǎn)品中心頁面新增3個(gè)子頁面，分別命名為“產(chǎn)品大全”“用戶幫助”和“投訴中心”，

可以把暫時(shí)不需要展示的子頁面收縮起來，如圖2.10所示。

圖2.9百度介紹二級(jí)菜單

圖2.10產(chǎn)品中心二級(jí)菜單

在商業(yè)中心頁面新增4個(gè)子頁面，分別命名為“百度推廣”“營銷中心”“互動(dòng)營銷”和

聯(lián)盟合作”，如圖2.11所示。在招賢納士頁面新增3個(gè)子頁面，分別命名為“社會(huì)招聘”“校園招聘”和“百度校園”，

如圖2.12所示。

圖2.11商業(yè)中心二級(jí)菜單

圖2.12招賢納士二級(jí)菜單

6. 在聯(lián)系我們頁面新增一個(gè)子頁面，命名為“參觀百度”，如圖2.13所示。

圖2.13聯(lián)系我們二級(jí)菜單2.2.1?頁面區(qū)域是什么

2.2.2?頁面區(qū)域的功能使用2.2.3?實(shí)戰(zhàn)——“百度門戶”欄目規(guī)劃2.2.4?小結(jié)2.2.4小結(jié)

本小節(jié)主要學(xué)習(xí)頁面區(qū)域的使用，通過頁面區(qū)域管理頁面，應(yīng)當(dāng)做到以下幾點(diǎn)。

（1）了解什么是頁面區(qū)域，頁面區(qū)域由兩部分組成：功能菜單和頁面。它可以管理軟件的頁面關(guān)系。

（2）通過功能菜單和右鍵菜單選項(xiàng)來管理頁面，包括新增頁面、移動(dòng)頁面、刪除頁面及搜索頁面等。

（3）學(xué)會(huì)如何規(guī)劃軟件欄目結(jié)構(gòu)。練習(xí)題目：通過頁面區(qū)域進(jìn)行“清華大學(xué)門戶”欄目規(guī)劃導(dǎo)航菜單有：首頁、清華新聞、學(xué)校概況（校長致辭、學(xué)校沿革、歷任領(lǐng)導(dǎo)、現(xiàn)任領(lǐng)導(dǎo)、組織機(jī)構(gòu)、統(tǒng)計(jì)資料）、院系設(shè)置、師資隊(duì)伍、教育教學(xué)（本科生教育、研究生教育、留學(xué)生教育、繼續(xù)教育）、科學(xué)研究（科研項(xiàng)目、科研機(jī)構(gòu)、科研合作、科研成果與知識(shí)產(chǎn)權(quán)、學(xué)術(shù)交流）、招生就業(yè)（本科生招生、研究生招生、學(xué)生職業(yè)發(fā)展）、人才招聘（招聘計(jì)劃、招聘信息、我要招聘）、圖書館、走進(jìn)清華（校園生活、校園風(fēng)光、實(shí)用信息）?！咀⒁狻浚豪ㄌ?hào)里面是二級(jí)菜單。2.1?認(rèn)識(shí)軟件界面2.2?用頁面區(qū)域管理軟件頁面2.3?移動(dòng)端與PC端的原型制作規(guī)范2.4?小結(jié)2.3?移動(dòng)端與PC端的原型制作規(guī)范2.1?認(rèn)識(shí)軟件界面2.2?用頁面區(qū)域管理軟件頁面2.3?移動(dòng)端與PC端的原型制作規(guī)范2.4?小結(jié)2.4小結(jié)本章節(jié)主要講解了：認(rèn)識(shí)Axure的軟件界面，了解軟件界面上的8個(gè)區(qū)域及它們含義和功能。學(xué)習(xí)頁面區(qū)域的使用，通過頁面區(qū)域管理頁面的知識(shí)。謝謝觀賞互聯(lián)網(wǎng)＋職業(yè)技能系列微課版創(chuàng)新教材上次課程回顧初識(shí)Axure軟件界面頁面區(qū)域使用頁面區(qū)域注意事項(xiàng)1.制作軟件原型時(shí)要規(guī)劃軟件的功能菜單或者欄目結(jié)構(gòu)2.頁面的命名要有意義制作原型時(shí)要事先規(guī)劃好軟件的功能菜單或者欄目結(jié)構(gòu)，不要隨意地在站點(diǎn)地圖上新建頁面，導(dǎo)致頁面結(jié)構(gòu)混亂，根本看不出軟件的功能結(jié)構(gòu)。頁面的命名要讓使用者一看，就能知道這個(gè)頁面所要表達(dá)的含義。要做到顧名思義，不光是頁面要命名得有意義，部件也要命名得有意義。

頁面區(qū)域的功能使用頁面區(qū)域的功能使用包括兩方面內(nèi)容：

功能菜單的使用01OPTION02OPTION頁面管理頁面的功能菜單

除了使用功能菜單來管理頁面，也可以在頁面上右鍵單擊，通過彈出的

菜單選項(xiàng)管理頁面。

頁面右鍵菜單選項(xiàng)練習(xí)題目：通過頁面區(qū)域進(jìn)行“夸父網(wǎng)”欄目規(guī)劃導(dǎo)航菜單有：首頁、學(xué)院介紹（學(xué)院簡介、學(xué)院院長、專業(yè)介紹、行政人員、大事記）、師資隊(duì)伍（學(xué)術(shù)帶頭人、客座講授、兼職教師、教授、副教授、講師）、教學(xué)管理（教務(wù)管理、教研活動(dòng)、教務(wù)通知）、學(xué)生工作（學(xué)生活動(dòng)、優(yōu)秀學(xué)子）、實(shí)習(xí)實(shí)訓(xùn)（校內(nèi)實(shí)訓(xùn)平臺(tái)、校外實(shí)習(xí)基地）、培養(yǎng)成果（考研留學(xué)、競賽獲獎(jiǎng)、曬就業(yè)、學(xué)生文集）、創(chuàng)新實(shí)驗(yàn)班【注意】：括號(hào)里面是二級(jí)菜單。

Axure基本元件和母版技術(shù)型文科人才系列課程主講人：王向軍文學(xué)與傳媒學(xué)院新媒體產(chǎn)品設(shè)計(jì)與項(xiàng)目管理大家小時(shí)候都玩過積木，積木的形狀、大小、長短各不相同，發(fā)揮我們自己的想象力，就可以用積木拼出一座橋、一個(gè)城堡、一座大樓。

Axure也提供了很多積木，我們稱之為組件或者元件，只不過它要比小時(shí)候的積木復(fù)雜了很多。使用元件，加上設(shè)計(jì)、經(jīng)驗(yàn)、想象力，我們可以繪制出想要的軟件原型，Axure默認(rèn)內(nèi)置了線框圖元件庫、流程圖元件庫、圖標(biāo)元件庫，除了使用內(nèi)置的元件庫，也可以載入元件庫和自定義元件庫。

用元件“搭積木”1?Axure基本元件

2

課堂練習(xí)：頁面頂部和底部3

課堂練習(xí)：母版4

小結(jié)3.1Axure基本元件AxureRP8原型設(shè)計(jì)軟件里默認(rèn)內(nèi)置了基本元件有20種，表單類元件有7種，菜單與表格元件有4種，標(biāo)記元件有9種。

元件庫3.1基本元件的使用?基本元件包括矩形1、矩形2、矩形3、橢圓形、占位符、按鈕、主要按鈕、鏈接按鈕、一級(jí)標(biāo)題、二級(jí)標(biāo)題、三級(jí)標(biāo)題、文本標(biāo)簽、文本段落、水平線、垂直線、熱區(qū)、動(dòng)態(tài)面板、內(nèi)部框架、中繼器等。最后3個(gè)元件，由于使用比較復(fù)雜，交互效果豐富，使用頻率非常高，放在后面的章節(jié)中詳細(xì)介紹。

基本元件1.標(biāo)題元件的使用

標(biāo)題元件可以用來作為一段文字的標(biāo)題，也可以用來作為某個(gè)區(qū)域的標(biāo)題說明。大家都設(shè)計(jì)過自己的簡歷，常把“個(gè)人信息”“教育經(jīng)歷”“工作經(jīng)驗(yàn)”這類文字加粗起強(qiáng)調(diào)作用，這時(shí)就可以使用標(biāo)題元件。 Axure提供了一級(jí)標(biāo)題、二級(jí)標(biāo)題、三級(jí)標(biāo)題3個(gè)元件，一級(jí)標(biāo)題元件是32號(hào)字、加粗、黑色（333333），二級(jí)標(biāo)題元件是24號(hào)字、加粗、黑色（333333），三級(jí)標(biāo)題元件是18號(hào)字、加粗、黑色（333333）。

標(biāo)題1、標(biāo)題2和標(biāo)題3元件2.文本標(biāo)簽元件和文本段落元件的使用

文本標(biāo)簽元件是單行文本元件，文本段落元件是多行長文本元件。如果只有一行文本選擇文本標(biāo)簽

元件，如果有多行文本可以使用文本段落元件。

文本標(biāo)簽和文本段落元件3.水平線和垂直線元件的使用水平線和垂直線是很靈活的兩個(gè)元件，用它們可以設(shè)置一條水平線或者垂直線，可以利用工具欄快捷按鈕編輯這兩個(gè)元件，設(shè)置橫線和垂直線的顏色、線框、線條樣式和箭頭方向。

水平線和垂直線元件3.2?課堂練習(xí)：錦城學(xué)院頁面頂部和底部參照錦城學(xué)院官網(wǎng)（/index.html），完成頂部和底部的原型設(shè)計(jì)。頂部參考效果：底部參考效果：用Axure母版減少重復(fù)工作

主講人：王向軍文學(xué)與傳媒學(xué)院技術(shù)型文科人才系列課程新媒體產(chǎn)品設(shè)計(jì)與項(xiàng)目管理在原型設(shè)計(jì)過程中，往往會(huì)涉及很多重復(fù)的頁面內(nèi)容，包括頁面的首部、版權(quán)信

息、導(dǎo)航菜單等，如果不使用母版，這些頁面就需要重復(fù)制作，工作量很大，若使用

母版，在母版里面只需要設(shè)計(jì)一次頁面內(nèi)容，這樣其他頁面可以直接使用這個(gè)母版，

在母版里修改還可以實(shí)現(xiàn)所有引用母版的頁面同時(shí)更新，也不需要再到每個(gè)頁面里修

改內(nèi)容，如圖所示。

1?母版功能介紹2?母版3種拖放行為的使用3?實(shí)戰(zhàn)——錦城學(xué)院導(dǎo)航菜單母版設(shè)計(jì)4?小結(jié)1母版功能介紹Axure的母版解決重復(fù)制作原型某個(gè)類似功能的問題，制作一次母版，其他頁面進(jìn)行復(fù)用。在Axure原型設(shè)計(jì)工具的左下角區(qū)域是Axure的母版區(qū)域。

實(shí)戰(zhàn)演練單擊“新增母版”按鈕可以新增一個(gè)母版，也可以單擊鼠標(biāo)右鍵選擇“添加”，輸入母版的名稱“導(dǎo)航菜單”。單擊“新增文件夾”按鈕可以新增文件夾，命名為“頁面母版”。對(duì)母版進(jìn)行歸類，可以存放導(dǎo)航菜單的母版、頁首的母版、頁尾的母版，單擊鼠標(biāo)右鍵選擇“移動(dòng)”選項(xiàng)調(diào)整頁面層級(jí)關(guān)系。

導(dǎo)航菜單母版母版文件夾在母版上單擊鼠標(biāo)右鍵的選項(xiàng)里，通過“移動(dòng)”選項(xiàng)可以調(diào)整母版之間的上下順序和層級(jí)關(guān)系，通過“刪除”選項(xiàng)可以進(jìn)行刪除母版，刪除子母版的時(shí)候會(huì)彈出提示信息。在母版上單擊鼠標(biāo)右鍵的選項(xiàng)里，除了可以進(jìn)行新增母版、新增文件夾、移動(dòng)和刪除操作，

還提供母版重命名、母版復(fù)制、設(shè)置母版拖放行為、將母版添加到頁面中、將母版從頁面中刪除及查看母版使用情況等功能。

1.2制作母版的兩種方式實(shí)戰(zhàn)演練1. 在母版區(qū)域里新建一個(gè)“導(dǎo)航菜單”母版，進(jìn)入這個(gè)母版里，拖曳5個(gè)矩形1元件，寬度設(shè)置為100，高度設(shè)置為40，制作首頁、公司介紹、新聞中心、招賢納士、聯(lián)系我們這5個(gè)菜單。

1.通過母版區(qū)域新建母版2. 在頁面區(qū)域上新建5個(gè)頁面，分別命名為“首頁”“公司介紹”“新聞中心”“招賢納士”和“聯(lián)系我們”，用來顯示這5個(gè)菜單的內(nèi)容。

將制作完的母版，引用到5個(gè)頁面里，需要在導(dǎo)航菜單母版上，鼠標(biāo)右鍵單擊選擇“新增頁面”選項(xiàng)，將母版引用到想引用的頁面里。進(jìn)入“首頁”頁面里，可以看到將母版的“導(dǎo)航菜單”引用到了首頁里，其他頁面也是一樣的。

5. 假如不想將母版引用到頁面里，在“導(dǎo)航菜單”母版上單擊鼠標(biāo)右鍵，選擇“頁面刪除”選項(xiàng)即可，也可以直接在首頁里將該母版引用刪除。

2.通過元件轉(zhuǎn)換為母版實(shí)戰(zhàn)演練在頁面區(qū)域上建立一個(gè)頁面“首頁”。進(jìn)入“首頁”里，同樣制作5個(gè)菜單。同時(shí)選中這5個(gè)菜單，單擊鼠標(biāo)右鍵選擇轉(zhuǎn)換為“母版”，新母版命名為“導(dǎo)航菜單”即可。

3. 元件轉(zhuǎn)換完母版后，就可以在母版區(qū)域里看到轉(zhuǎn)換后的母版“導(dǎo)航菜單”。

2母版的3種拖放行為母版有3種拖放行為：任何位置、鎖定到母版中的位置、從母版脫離。下面來看看母版這3種拖放行為及它們的含義。

2.1拖放行為為任何位置1. 在母版區(qū)域新增一個(gè)母版，命名為“版權(quán)信息”。進(jìn)入這個(gè)母版里，拖曳一個(gè)矩形1元件，寬度設(shè)置為800，高度設(shè)置為100，文本內(nèi)容輸入為“這是版權(quán)信息”。

在頁面區(qū)域上新建5個(gè)頁面，分別命名為“首頁”“公司介紹”“新聞中心”“招賢納士”和“聯(lián)系我們”，用來顯示這5個(gè)菜單的內(nèi)容。將制作完的母版引用到“公司介紹”“新聞中心”兩個(gè)頁面里，需要在版權(quán)信息母版上單擊鼠標(biāo)右鍵，選擇“新增頁面”，將母版引用到想引用的頁面。

4. 進(jìn)入“公司介紹”頁面，可以看到“版權(quán)信息”的母版被引用到了“公司介紹”，移動(dòng)引用的版權(quán)信息內(nèi)容，發(fā)現(xiàn)無法移動(dòng)，在母版上單擊鼠標(biāo)右鍵，將“固定位置”取消勾選，就可以隨意移動(dòng)母版內(nèi)容了，這就是任何位置的拖放行為。

5. 在“版權(quán)信息”母版里修改版權(quán)信息，回到“公司介紹”“新聞中心”頁面里，可以看到引用母版的頁面內(nèi)容也會(huì)發(fā)生修改。這樣當(dāng)有變更的時(shí)候，就不需要到頁面里逐個(gè)進(jìn)行修改，只需要在母版里進(jìn)行修改，引用母版的頁面可以自動(dòng)更新。

2.2拖放行為為鎖定到母版中的位置鎖定到母版中的位置：母版在引用的頁面會(huì)處于最底層并被鎖定，對(duì)母版所做的修改會(huì)在所有引用母版的頁面同時(shí)更新，頁面引用母版中的控件位置與母版中的位置相同，這種拖放行為常用于布局和底板。

很多網(wǎng)站需要更換不同的背景色或者背景圖片，使用母版可以進(jìn)行背景色或者背景圖片的切換，這樣所有的頁面背景都會(huì)一起更改。

實(shí)戰(zhàn)演練新增一個(gè)母版，命名為“背景圖”。打開這個(gè)母版，拖曳一個(gè)矩形3元件，寬度設(shè)置為800，高度設(shè)置為1000，位置（0,0）。將“背景圖”母版引用到“招賢納士”頁面。打開“招賢納士”頁面，可以看到母版已被成功引用。

3. 在“招賢納士”頁面里可以看到我們無法移動(dòng)引用的母版內(nèi)容。如果背景圖想換成其他的顏色，比如綠色，只需要在“背景圖”母版里，填充為綠色（00CC00），頁面的背景圖也會(huì)隨之變?yōu)榫G色。

2.3拖放行為為從母版脫離

從母版脫離：這種拖放行為會(huì)使頁面引用的母版與原母版失去聯(lián)系，頁面引用的母版元件可以像一般元件一樣進(jìn)行編輯，常用于創(chuàng)建包含自定義元件的組合。實(shí)戰(zhàn)演練在母版區(qū)域里新建一個(gè)“導(dǎo)航菜單”母版，進(jìn)入這個(gè)母版里，同樣制作5個(gè)菜單。將制作完的“導(dǎo)航菜單”母版，引用到“聯(lián)系我們”頁面里。

3. 進(jìn)入“聯(lián)系我們”頁面里，可以看到引用的導(dǎo)航菜單內(nèi)容，默認(rèn)引用的母版內(nèi)容是鎖定的，不能移動(dòng)。如果想修改引用的母版內(nèi)容，需要將其變?yōu)橐话阍?，在母版?nèi)容上單擊鼠標(biāo)右鍵勾選“脫離母版”。

4. 導(dǎo)航菜單從母版脫離后，變?yōu)槠胀ㄔ?，?dǎo)航菜單內(nèi)容可以隨意地移動(dòng)和放置，就算“導(dǎo)航菜單”母版內(nèi)容修改，“聯(lián)系我們”頁面內(nèi)容也不會(huì)隨之變化。進(jìn)入“導(dǎo)航菜單”母版，復(fù)制一個(gè)導(dǎo)航菜單，文本內(nèi)容為“留言本”，回到“聯(lián)系我們”頁面可以看到，內(nèi)容并沒有更新。

3實(shí)戰(zhàn)——錦城學(xué)院導(dǎo)航菜單母版設(shè)計(jì)1. 在母版區(qū)域新建一個(gè)母版，命名為“導(dǎo)航菜單母版”。設(shè)計(jì)“導(dǎo)航母版”。2.在母版區(qū)域新建一個(gè)“頁尾母版”并設(shè)計(jì)。將“導(dǎo)航母版”引用到頁面上。在“導(dǎo)母版”上單擊鼠標(biāo)右鍵，選擇“新增頁

面”選項(xiàng)，在彈出的對(duì)話框中單擊“全選”按鈕將所有頁面選中，再單擊“確定”按鈕即可。將“頁尾”母版也引用到頁面上。在“頁尾母版”上單擊鼠標(biāo)右鍵，選擇“新增頁

面”選項(xiàng)，在彈出的對(duì)話框中單擊“全選”按鈕，選中所有頁面，再單擊“確定”按鈕即

可。

小結(jié)

本章主要學(xué)習(xí)Axure母版的使用，應(yīng)當(dāng)做到以下幾點(diǎn)。

（1）學(xué)會(huì)Axure母版的基本操作，如新增母版、刪除母版、將母版引用到頁面、從頁面上刪除母版等操作。

（2）學(xué)會(huì)制作母版的兩種方式：一種是通過母版區(qū)域新建母版，另一種是通過元件轉(zhuǎn)換為母版。

（3）學(xué)會(huì)母版的3種拖放行為：任何位置、鎖定到母版中的位置、從母版脫離。根據(jù)不同的場合使用不同的拖放行為。

謝謝

Axure表單元件技術(shù)型文科人才系列課程主講人：文學(xué)與傳媒學(xué)院新媒體產(chǎn)品設(shè)計(jì)與項(xiàng)目管理本章案例：制作“百度注冊(cè)界面”，效果如圖所示。

回顧:矩形、圖片元件1.設(shè)置頁面居中；添加頁面背景填充（圖片）;知識(shí)點(diǎn)：頁面屬性2.設(shè)置表單背景;知識(shí)點(diǎn)：矩形的應(yīng)用拓展：設(shè)置文本框的邊框?yàn)闇\藍(lán)色，圓角半徑為15px知識(shí)點(diǎn)：添加形狀、鋼筆工具、更換形狀、改變形狀（翻轉(zhuǎn)、合并、去除、相交、排除）3.添加圖片LOGO.知識(shí)點(diǎn)：添加圖片、分割圖片、裁剪圖片、變換圖片（翻轉(zhuǎn)、優(yōu)化、固定邊角（圓角））3

實(shí)戰(zhàn)——制作“仿百度注冊(cè)原型”1

Axure表單元件2

課堂練習(xí)4

小結(jié)回顧：

Axure基本元件AxureRP8原型設(shè)計(jì)軟件里默認(rèn)內(nèi)置了基本元件有20種，表單類元件有7種，菜單與表格元件有4種，標(biāo)記元件有9種。

元件庫1表單類元件的使用表單類元件是用在設(shè)計(jì)表單時(shí)經(jīng)常會(huì)用到的元件，如登錄、注冊(cè)表單等。

表單類元件包括文本框、多行文本框、下拉列表框、列表框、復(fù)選框、單選按

鈕、提交按鈕。

表單型元件案例：制作“百度注冊(cè)界面”，效果如圖所示。

1.文本框元件和多行文本框元件的使用文本框元件，經(jīng)常用于收集表單內(nèi)容，如單行輸入框；多行文本框元件，用于多行文本的輸入。

文本框和多行文本框元件

在登錄網(wǎng)站的時(shí)候，經(jīng)常會(huì)在輸入框里看到“請(qǐng)輸入用戶名、手機(jī)號(hào)或者郵箱”，文本框元件同樣可以填寫提示信息。

在文本框輸入內(nèi)容時(shí)，提示文字會(huì)自然消失。在檢視區(qū)域的屬性選項(xiàng)卡里，可以設(shè)置文本框的輸入類型，如文本（Text）、密碼、郵箱、Number等。

文本框類型

選擇文本（Text）類型可以設(shè)置提示文字的樣式，輸入文字：“請(qǐng)輸入用戶名”，字體顏色為淺灰色（CCCCCC），單擊“提示樣式”來設(shè)置。

提示文字

在屬性選項(xiàng)卡還可以設(shè)置文本框元件文字輸入的最大長度，同時(shí)也可以隱藏邊框、設(shè)置為只讀或者禁用。

文本框?qū)傩?/p>

多行文本框元件的右側(cè)屬性選項(xiàng)卡里同樣可以設(shè)置提示文字、隱藏邊框、只讀和禁用，但是不能設(shè)置文本框的類型和最大長度。

多行文本框元件設(shè)置2.下拉列表框元件和列表框元件的使用

下拉列表框元件，是經(jīng)常用到的下拉菜單，只能顯示一個(gè)下拉菜單選項(xiàng)，而列表框元件可以顯示多個(gè)下拉菜單選項(xiàng)。

如果頁面區(qū)域有限，可以使用下拉列表框元件，如果頁面區(qū)域比較大，只放置一個(gè)下拉列表框，感覺整個(gè)頁面布局不是很美觀，使用列表框元件更合適。

下拉列表框元件和列表框元件實(shí)戰(zhàn)演練1. 拖曳一個(gè)下拉列表框元件，雙擊這個(gè)元件，彈出編輯選項(xiàng)對(duì)話框，單擊加號(hào)可以新增一個(gè)菜單選項(xiàng)，單擊菜單選項(xiàng)可以對(duì)它重新命名，命名為“北京”，再新增一個(gè)下拉選項(xiàng)，命名為“上?！?。

編輯列表選項(xiàng)對(duì)話框單擊向上箭頭和向下箭頭，調(diào)整下拉菜單選項(xiàng)的順序，單擊紅色差號(hào)，可以刪除選項(xiàng)。單擊“添加多個(gè)”按鈕，彈出添加多個(gè)對(duì)話框，每行代表一個(gè)下拉菜單選項(xiàng)。

調(diào)整選項(xiàng)順序和刪除

添加多個(gè)選項(xiàng)對(duì)話框如果想把某個(gè)選項(xiàng)作為默認(rèn)顯示的選項(xiàng)，只需要勾選其前面的復(fù)選框。列表框的操作方式和下拉列表框的操作方式一樣，但是它允許選擇多個(gè)默認(rèn)選項(xiàng)。

設(shè)置默認(rèn)選項(xiàng)列表框設(shè)置默認(rèn)選項(xiàng)3.復(fù)選框元件和單選按鈕元件的使用

如果允許選擇多個(gè)選項(xiàng)，可以使用復(fù)選框元件，如果每次只能選中一個(gè)，適合使用單選按鈕元件。

復(fù)選框和單選按鈕元件4.提交按鈕元件的使用提交按鈕元件經(jīng)常被用來作為操作按鈕，如注冊(cè)、登錄、保存、取消按鈕等。

課堂練習(xí)實(shí)戰(zhàn)1——制作“仿百度注冊(cè)原型”1.新建項(xiàng)目l新建項(xiàng)目，另存為“百度.rp”;l重命名頁面“page1”為“注冊(cè)”。2.在頁面中拖入文本元件。依次拖入一級(jí)標(biāo)題和文本標(biāo)簽，雙擊畫布上的元件，修改元件文字。3.設(shè)置文本樣式、對(duì)齊和分布。框選所有文本元件，點(diǎn)擊上方樣式面板的“左”對(duì)齊和“垂直”分布，使其在畫布上平均排列。選擇文本“登錄”，設(shè)置文本顏色為藍(lán)色.4.拖入文本框元件。從上面標(biāo)尺拖入3條水平頁面輔助線，分別到“用戶名”、“手機(jī)號(hào)”、“密碼”文本元件處；從左邊標(biāo)尺拖入一條垂直頁面輔助線，距離文本元件20px；勾選“視圖”→“標(biāo)尺，網(wǎng)格和輔助線”→“對(duì)齊輔助線”命令；從表單元件列表中，拖入3個(gè)文本框元件到相應(yīng)位置。5.設(shè)置文本框的提示屬性點(diǎn)開“交互”面板的提示屬性，設(shè)置用戶名文本框的類型為“文本”，提示文字為“請(qǐng)?jiān)O(shè)置用戶名”，并設(shè)置“獲取焦點(diǎn)”之后隱藏該提示文字；設(shè)置手機(jī)號(hào)文本框的類型為“電話號(hào)碼”，提示文字為“可用于登錄和找回密碼”，并設(shè)置“獲取焦點(diǎn)”之后隱藏該提示文字；設(shè)置密碼文本框的類型為“密碼”，提示文字為“請(qǐng)?jiān)O(shè)置登錄密碼”，并設(shè)置“獲取焦點(diǎn)”之后隱藏該提示文字。6.拖入按鈕元件拖入1個(gè)主要按鈕到頁面相應(yīng)位置；雙擊按鈕元件，修改按鈕上的文字為“注冊(cè)”；選擇按鈕上的文本，修改樣式為：微軟雅黑、加粗、16px；修改按鈕的填充顏色為淺藍(lán)色；修改按鈕的圓角為20px。7.拖入復(fù)選框從表單元件列表中拖入1個(gè)復(fù)選框到頁面相應(yīng)位置，并修改文字。修改文字的顏色。8.預(yù)覽設(shè)置點(diǎn)擊快捷功能中的“預(yù)覽”按鈕可以預(yù)覽頁面效果。預(yù)覽可以選擇不同的設(shè)置，在“發(fā)布（Publish）”菜單中的“預(yù)覽選項(xiàng)”里設(shè)置預(yù)覽的瀏覽器等。

實(shí)戰(zhàn)2——制作“仿百度注冊(cè)原型”1）打開項(xiàng)目2）設(shè)置頁面樣式（設(shè)置“頁面對(duì)齊（PageAlign）”方式為：居中；設(shè)置“填充（Fill）”為“圖片”，導(dǎo)入背景圖片）3）添加矩形背景（置于表單底部，“填充”顏色為白色，透明度為90%，圓角為12px）。拓展：設(shè)置文本框的邊框?yàn)樗{(lán)色。4）添加LOGO圖片。5）預(yù)覽效果小結(jié)

本章主要學(xué)習(xí)Axure元件庫的使用，使用元件庫繪制軟件界面原型，應(yīng)當(dāng)掌握線框圖元件的含義和使用，包括基本元件、表單型元件。

謝謝觀賞技術(shù)型文科人才系列課程新媒體產(chǎn)品設(shè)計(jì)與項(xiàng)目管理

Axure交互基礎(chǔ)技術(shù)型文科人才系列課程主講人：文學(xué)與傳媒學(xué)院新媒體產(chǎn)品設(shè)計(jì)與項(xiàng)目管理第五章AxureRP交互基礎(chǔ)5.1AxureRP交互的三要素5.2實(shí)現(xiàn)注冊(cè)信息驗(yàn)證交互功能第五章AxureRP交互基礎(chǔ)5.1AxureRP交互的三要素事件（events）：是一個(gè)交互的觸發(fā)器，例如，一個(gè)點(diǎn)擊，鼠標(biāo)懸停，鼠標(biāo)拖動(dòng)，一個(gè)拖放等。不同的部件擁有不同的響應(yīng)事件。用例（cases）：是響應(yīng)事件的路徑，它可以定義條件邏輯。動(dòng)作（actions）：對(duì)事件的響應(yīng)，也可以理解為事件的結(jié)果。事件：當(dāng)……，什么時(shí)候第五章AxureRP交互基礎(chǔ)Axure的事件有兩種：頁面事件：頁面加載時(shí)/頁面載入……頁面載入時(shí)OnPageLoad:當(dāng)頁面啟動(dòng)加載時(shí)窗口改變大小時(shí)OnWindowResize:當(dāng)瀏覽器窗口大小改變時(shí)窗口滾動(dòng)時(shí)OnWindowScroll:當(dāng)瀏覽器窗口滾動(dòng)時(shí)鼠標(biāo)單擊時(shí)OnClick:頁面中的任何部件被點(diǎn)擊時(shí)（不含空白處）鼠標(biāo)雙擊時(shí)OnDoubleClick:當(dāng)頁面中的任何部件被雙擊時(shí)（不含空白處）鼠標(biāo)右鍵單擊時(shí)OnContextMenu:當(dāng)頁面中的任何部件被鼠標(biāo)右鍵點(diǎn)擊時(shí)（不含空白處）鼠標(biāo)移動(dòng)時(shí)OnMouseMove:當(dāng)鼠標(biāo)在頁面任何位置移動(dòng)時(shí)按鍵按下時(shí)OnKeyDown:當(dāng)鍵盤上的按鍵按下時(shí)按鍵彈起時(shí)OnKeyUp:當(dāng)鍵盤上的按鍵釋放時(shí)自適應(yīng)視圖更改時(shí)OnAdaptiveViewChange:當(dāng)自適應(yīng)視圖更改時(shí)當(dāng)……什么時(shí)候第五章AxureRP交互基礎(chǔ)Axure的事件有兩種：元件事件鼠標(biāo)單擊時(shí)/鼠標(biāo)移入時(shí)……鼠標(biāo)點(diǎn)擊并保持超過2秒時(shí)OnLongClick:當(dāng)一個(gè)部件被點(diǎn)擊并且鼠標(biāo)按鍵保持超過2秒時(shí)按鍵按下時(shí)OnKeyDown:當(dāng)鍵盤上的鍵按下時(shí)按鍵彈起時(shí)OnKeyUp:當(dāng)鍵盤上的鍵彈起時(shí)移動(dòng)OnMove:當(dāng)面板移動(dòng)時(shí)顯示OnShow:當(dāng)面板通過交互動(dòng)作顯示時(shí)隱藏OnHide:當(dāng)面板通過交互動(dòng)作隱藏時(shí)獲取焦點(diǎn)OnFocus:當(dāng)一個(gè)表單獲取焦點(diǎn)時(shí)失去焦點(diǎn)時(shí)OnLostFocus:當(dāng)一個(gè)部件失去焦點(diǎn)時(shí)鼠標(biāo)單擊時(shí)OnClick:當(dāng)部件被點(diǎn)擊鼠標(biāo)移入時(shí)OnMouseEnter:當(dāng)光標(biāo)移入部件范圍鼠標(biāo)移出時(shí)OnMouseOut:當(dāng)光標(biāo)移出部件范圍鼠標(biāo)雙擊時(shí)OnDoubleClick:當(dāng)時(shí)鼠標(biāo)雙擊時(shí)鼠標(biāo)右鍵單擊時(shí)OnContextMenu:當(dāng)鼠標(biāo)右鍵點(diǎn)擊時(shí)鼠標(biāo)按鍵按下時(shí)OnMouseDown:當(dāng)鼠標(biāo)按下且沒有釋放時(shí)鼠標(biāo)按鍵釋放時(shí)OnMouseUp:當(dāng)一個(gè)部件被鼠標(biāo)點(diǎn)擊,這個(gè)事件由鼠標(biāo)按鍵釋放觸發(fā)鼠標(biāo)移動(dòng)時(shí)OnMouseMove:當(dāng)光標(biāo)在一個(gè)部件上移動(dòng)時(shí)鼠標(biāo)懸停超過2秒時(shí)OnMouseHover:當(dāng)光標(biāo)在一個(gè)部件上懸停超過2秒時(shí)動(dòng)作動(dòng)作1.鏈接：切換用戶UI鏈接動(dòng)作包括當(dāng)前窗口打開鏈接、新窗口/標(biāo)簽頁打開鏈接、彈出窗口打開鏈接、父窗口打開鏈接、關(guān)閉窗口、內(nèi)部框架打開鏈接以及滾動(dòng)到部件（錨點(diǎn)鏈接）。動(dòng)作2.元件：元件效果元件動(dòng)作是常用到的交互行為，它分為元件的顯示/隱藏行為、設(shè)置元件文本行為、設(shè)置元件圖像行為、設(shè)置元件選擇/選中行為、設(shè)置元件選定的列表項(xiàng)行為、設(shè)置元件啟用/禁用行為，設(shè)置元件移動(dòng)行為，設(shè)置元件置于頂層/底層行為、設(shè)置元件獲得焦點(diǎn)行為、設(shè)置元件展開/折疊樹節(jié)點(diǎn)行為，元件的交互行為越豐富，制作出的原型交互效果體驗(yàn)度越真實(shí)。動(dòng)作3.設(shè)置動(dòng)態(tài)面板動(dòng)態(tài)面板的動(dòng)作包括設(shè)置動(dòng)態(tài)面板的顯示、隱藏以及設(shè)置動(dòng)態(tài)面板的顯示效果，同時(shí)可以設(shè)置動(dòng)態(tài)面板的大小，通過動(dòng)態(tài)面板的使用，可以使原型的交互效果更真實(shí)，體驗(yàn)度更好動(dòng)作4.中繼器：動(dòng)態(tài)操作數(shù)據(jù)中繼器的動(dòng)作可以實(shí)現(xiàn)對(duì)數(shù)據(jù)的增加、刪除、修改、查詢等功能，模擬真實(shí)系統(tǒng)的數(shù)據(jù)庫操作，進(jìn)一步加強(qiáng)交互效果，給用戶最真實(shí)的系統(tǒng)使用體驗(yàn)。案例當(dāng)“用戶名”文本框獲取焦點(diǎn)時(shí)，顯示提示信息；當(dāng)“用戶名”文本框失去焦點(diǎn)時(shí)，隱藏提示信息；交互對(duì)象：用戶名文本框事件：當(dāng)用戶名文本框獲取焦點(diǎn)時(shí)動(dòng)作：顯示提示信息事件：當(dāng)用戶名文本框失去焦點(diǎn)時(shí)動(dòng)作：隱藏提示信息注意：提示信息初始狀態(tài)為隱藏。交互對(duì)象：密碼文本框事件：當(dāng)密碼文本框獲取焦點(diǎn)時(shí)動(dòng)作：顯示密碼提示信息用例1.新建、刪除條件和條件之間關(guān)系當(dāng)選擇“全部”的時(shí)候，多個(gè)條件是并集關(guān)系，當(dāng)設(shè)置的條件都滿足時(shí)，才執(zhí)行相關(guān)動(dòng)作。選擇“任意”的時(shí)候，當(dāng)多個(gè)條件有一個(gè)滿足時(shí)，就可以執(zhí)行相關(guān)動(dòng)作。2.條件設(shè)置條件設(shè)置部分可以理解為三個(gè)部分，用來比較圖的圈4和圈6的關(guān)系，圖圈5是運(yùn)算符，是比較方式。隨著圖的圈4選擇，圈6也是隨著變化。交互對(duì)象：密碼文本框事件：當(dāng)密碼文本框失去焦點(diǎn)時(shí)用例1：密碼文本框

元件文字長度<6動(dòng)作1：隱藏密碼提示信息動(dòng)作2：密碼格式提示

設(shè)置文本

密碼格式不符合要求

用例2：密碼文本框

元件文字長度>=6動(dòng)作：隱藏密碼提示信息動(dòng)作2：密碼格式提示

設(shè)置文本“”案例當(dāng)“密碼”文本框失去焦點(diǎn)時(shí)，判斷密碼是否大于6位，否則顯示提示信息：密碼設(shè)置不符合要求；案例:多個(gè)邏輯條件當(dāng)鼠標(biāo)單擊“注冊(cè)”按鈕時(shí)，如果用戶名、手機(jī)號(hào)、密碼文本框?yàn)榭眨瑒t提示“用戶名、密碼、手機(jī)號(hào)不符合要求”；當(dāng)鼠標(biāo)單擊“注冊(cè)”按鈕時(shí)，如果未選中“閱讀同意協(xié)議”，則提示“請(qǐng)閱讀并同意用戶協(xié)議”；當(dāng)鼠標(biāo)單擊“注冊(cè)”按鈕時(shí)，如果文本框不為空且同意協(xié)議，則打開鏈接“注冊(cè)成功”頁面。案例:多個(gè)邏輯條件5.2實(shí)現(xiàn)注冊(cè)信息驗(yàn)證交互功能案例描述：當(dāng)鼠標(biāo)懸停用戶名、手機(jī)號(hào)、密碼文本框或獲取焦點(diǎn)時(shí)，邊框顏色改變；當(dāng)“用戶名”文本框獲取焦點(diǎn)時(shí)，顯示提示信息，失去焦點(diǎn)時(shí)，隱藏提示信息；當(dāng)“密碼”文本框失去焦點(diǎn)時(shí)，判斷密碼是否大于6位，否則顯示提示信息；當(dāng)鼠標(biāo)單擊“注冊(cè)”按鈕時(shí)，如果用戶名、手機(jī)號(hào)、密碼文本框?yàn)榭?，則提示“不能為空”；當(dāng)鼠標(biāo)單擊“注冊(cè)”按鈕時(shí)，如果為選中“閱讀同意協(xié)議”，則提示“請(qǐng)閱讀并同意用戶協(xié)議”；當(dāng)鼠標(biāo)單擊“注冊(cè)”按鈕時(shí)，如果文本框不為空且同意協(xié)議，則打開鏈接“首頁”頁面。交互樣式當(dāng)用戶名、手機(jī)號(hào)、密碼文本框獲取焦點(diǎn)時(shí)，邊框顏色改變；小結(jié)交互：根據(jù)用戶時(shí)間的輸入，通過不同的用例和動(dòng)作，來讓元件按照外界的輸入來展現(xiàn)出相應(yīng)的行為，以此實(shí)現(xiàn)交互效果。謝謝觀賞技術(shù)型文科人才系列課程新媒體產(chǎn)品設(shè)計(jì)與項(xiàng)目管理回顧：交互三要素事件：交互的觸發(fā)器，我們可以理解為“當(dāng)……”。如，當(dāng)鼠標(biāo)單擊某個(gè)按鈕，當(dāng)文本框獲得焦點(diǎn)，等。動(dòng)作：對(duì)事件的響應(yīng)，即：交互觸發(fā)后，發(fā)生了什么？如，顯示元件、隱藏元件，打開鏈接頁面，等。用例：動(dòng)作發(fā)生的條件。如，只有注冊(cè)表單信息不為空，才打開注冊(cè)成功頁面。回顧：交互三要素事件動(dòng)作用例1動(dòng)作1動(dòng)作2用例2動(dòng)作

Axure動(dòng)態(tài)面板技術(shù)型文科人才系列課程主講人：文學(xué)與傳媒學(xué)院新媒體產(chǎn)品設(shè)計(jì)與項(xiàng)目管理案例引入第六章Axure動(dòng)態(tài)面板目標(biāo)（1）知識(shí)目標(biāo)：了解動(dòng)態(tài)面板元件及狀態(tài)的概念；理解動(dòng)態(tài)面板元件及其狀態(tài)的關(guān)系

。（2）能力目標(biāo)：熟練掌握創(chuàng)建動(dòng)態(tài)面板的方法；熟練掌握動(dòng)態(tài)面板的常用事件和動(dòng)作；（重點(diǎn)。中階思維和能力）熟練掌握動(dòng)態(tài)面板制作各種復(fù)雜的交互效果。（難點(diǎn)。高階思維和能力）（3）素養(yǎng)目標(biāo)：培養(yǎng)學(xué)生提出問題、分析問題、解決問題的能力；（高階思維和能力）培養(yǎng)學(xué)生養(yǎng)成知識(shí)總結(jié)習(xí)慣；培養(yǎng)學(xué)生表達(dá)演示素養(yǎng)。第六章Axure動(dòng)態(tài)面板6.1AxureRP動(dòng)態(tài)面板元件及狀態(tài)6.2動(dòng)態(tài)面板的事件和動(dòng)作6.3利用動(dòng)態(tài)面板實(shí)現(xiàn)圖片自動(dòng)輪播高階思維和能力擴(kuò)展：（1）分別添加左、右箭頭（icon元件庫中），當(dāng)點(diǎn)擊向左箭頭圖標(biāo)時(shí)，圖片向右滑動(dòng)切換上一幅圖；當(dāng)點(diǎn)擊向右箭頭圖標(biāo)時(shí)，圖片向左滑動(dòng)切換下一幅圖。（2）在動(dòng)態(tài)面板上，鼠標(biāo)左滑動(dòng)時(shí)，圖片向左滑動(dòng)切換下一幅圖；鼠標(biāo)左滑動(dòng)時(shí)，圖片向右滑動(dòng)切換上一幅圖。第六章Axure動(dòng)態(tài)面板6.1AxureRP動(dòng)態(tài)面板元件及狀態(tài)動(dòng)態(tài)面板有多個(gè)狀態(tài)每個(gè)狀態(tài)本身是一個(gè)頁面任何時(shí)候一個(gè)動(dòng)態(tài)面板只能顯示一種狀態(tài)第一個(gè)狀態(tài)為默認(rèn)狀態(tài)通過設(shè)置面板狀態(tài)來控制狀態(tài)的顯示順序或隱藏/達(dá)成交互的效果動(dòng)態(tài)面板添加動(dòng)態(tài)面板1.直接通過拖拽的方式從元件面板加入到畫布中2.將頁面中的元件或元件組轉(zhuǎn)換成動(dòng)態(tài)面板演示：在動(dòng)態(tài)面板狀態(tài)1中添加圖片元件，或?qū)D片轉(zhuǎn)換成動(dòng)態(tài)面板動(dòng)態(tài)面板狀態(tài)管理（1）雙擊頁面中的動(dòng)態(tài)面板元件。進(jìn)入到動(dòng)態(tài)面板的第1個(gè)狀態(tài)，在狀態(tài)頂部菜單中執(zhí)行【管理面板狀態(tài)】命令。（2）在【概要】面板中,雙擊動(dòng)態(tài)面板元件或者也右擊它,從彈出的快捷菜單中執(zhí)行【管理面板狀態(tài)】命令?？梢蕴砑?、刪除、上移、下移、復(fù)制狀態(tài),或編輯狀態(tài)內(nèi)容等。演示：復(fù)制4個(gè)狀態(tài)，分別添加不同的圖片6.2動(dòng)態(tài)面板的事件和動(dòng)作動(dòng)態(tài)面板的事件【載入時(shí)】剛在網(wǎng)頁中加載動(dòng)態(tài)面板【狀態(tài)改變時(shí)】指從一個(gè)狀態(tài)切換到另一個(gè)狀態(tài)?！就蟿?dòng)時(shí)】【拖動(dòng)開始時(shí)】、【拖動(dòng)結(jié)束時(shí)】如使用鼠標(biāo)拖動(dòng)動(dòng)態(tài)面板完成諸如拼圖的游戲等操作?！鞠蜃笸蟿?dòng)結(jié)束時(shí)】、【向右拖動(dòng)結(jié)束時(shí)】、【向上拖動(dòng)結(jié)束時(shí)】和【向下拖動(dòng)結(jié)束時(shí)】如滑屏動(dòng)作6.2動(dòng)態(tài)面板的事件和動(dòng)作動(dòng)態(tài)面板的動(dòng)作1.選擇狀態(tài)可以選擇動(dòng)態(tài)面板中的某個(gè)狀態(tài)【下一項(xiàng)】顯示下一個(gè)狀態(tài)，還可以指定是否向后循環(huán)以及循環(huán)的間隔時(shí)間等?！旧弦豁?xiàng)】顯示上一個(gè)狀態(tài)，還可以指定是否向前循環(huán)以及循環(huán)的間隔時(shí)間等?！就Ｖ寡h(huán)】停止動(dòng)態(tài)面板的狀態(tài)循環(huán)?！局怠繉顟B(tài)名或狀態(tài)序列號(hào)作為指定的顯示狀態(tài)。2.進(jìn)入和退出動(dòng)畫可以設(shè)置由一個(gè)狀態(tài)進(jìn)入另一個(gè)狀態(tài)時(shí)的動(dòng)畫過渡效果。第六章Axure動(dòng)態(tài)面板事件用例動(dòng)作動(dòng)態(tài)面板“載入時(shí)”

圖片動(dòng)態(tài)面板狀態(tài)改變?yōu)椤盃顟B(tài)2”，動(dòng)畫：向左滑動(dòng)動(dòng)態(tài)面板“狀態(tài)改變時(shí)”圖片動(dòng)態(tài)面板狀態(tài)改變?yōu)椤跋乱豁?xiàng)”，“向后循環(huán)”，設(shè)置動(dòng)畫：向左滑動(dòng)；重復(fù)間隔時(shí)間。6.3動(dòng)態(tài)面板實(shí)現(xiàn)滑動(dòng)圖片輪播第六章Axure動(dòng)態(tài)面板6.3動(dòng)態(tài)面板實(shí)現(xiàn)滑動(dòng)圖片輪播

演示在圖片下方，添加圓點(diǎn)動(dòng)態(tài)面板；圖片下方小圓點(diǎn)隨著圖片變化同步變化；（狀態(tài)變化和時(shí)間間隔需要一致）事件用例動(dòng)作單擊圓點(diǎn)熱區(qū)時(shí)

圖片動(dòng)態(tài)面板狀態(tài)隨之改變第六章Axure動(dòng)態(tài)面板高階思維和能力擴(kuò)展：（1）分別添加左、右箭頭（icon元件庫中），當(dāng)點(diǎn)擊向左箭頭圖標(biāo)時(shí)，圖片向右滑動(dòng)切換上一幅圖；當(dāng)點(diǎn)擊向右箭頭圖標(biāo)時(shí)，圖片向左滑動(dòng)切換下一幅圖。（2）在動(dòng)態(tài)面板上，鼠標(biāo)左滑動(dòng)結(jié)束時(shí)，面板向左滑動(dòng)切換下一幅圖；鼠標(biāo)右滑動(dòng)結(jié)束時(shí)，面板向右滑動(dòng)切換上一幅圖。事件用例動(dòng)作圖片動(dòng)態(tài)面板“左滑動(dòng)結(jié)束時(shí)”

圖片動(dòng)態(tài)面板狀態(tài)變?yōu)椤毕乱豁?xiàng)”圖片動(dòng)態(tài)面板“右滑動(dòng)結(jié)束時(shí)”圖片動(dòng)態(tài)面板狀態(tài)變?yōu)椤鄙弦豁?xiàng)”小結(jié)動(dòng)態(tài)面板支持在同一個(gè)區(qū)域內(nèi)放置多個(gè)狀態(tài)的內(nèi)容，選擇顯示其中一個(gè)狀態(tài)的內(nèi)容，不能同時(shí)顯示多個(gè)狀態(tài)。支持外部通過命令來切換動(dòng)態(tài)面板的狀態(tài)，面板的狀態(tài)有先后順序，支持正序和倒序變換。在狀態(tài)變化時(shí)支持一些簡單的過場動(dòng)畫。謝謝觀賞技術(shù)型文科人才系列課程新媒體產(chǎn)品設(shè)計(jì)與項(xiàng)目管理

Axure內(nèi)聯(lián)框架技術(shù)型文科人才系列課程主講人：文學(xué)與傳媒學(xué)院新媒體產(chǎn)品設(shè)計(jì)與項(xiàng)目管理第七章Axure內(nèi)聯(lián)框架目標(biāo)（1）知識(shí)目標(biāo)：了解內(nèi)聯(lián)框架元件；理解內(nèi)聯(lián)框架的作用

。（2）能力目標(biāo)：熟練掌握內(nèi)聯(lián)框架的使用方法；（重點(diǎn)）熟練掌握熱區(qū)元件的使用方法。（3）素養(yǎng)目標(biāo)：培養(yǎng)學(xué)生提出問題、分析問題、解決問題的能力；（高階思維和能力）培養(yǎng)學(xué)生養(yǎng)成知識(shí)總結(jié)習(xí)慣；培養(yǎng)學(xué)生表達(dá)演示素養(yǎng)。網(wǎng)頁中嵌入互聯(lián)網(wǎng)網(wǎng)頁、音視頻文件、地圖等。內(nèi)聯(lián)框架組件內(nèi)聯(lián)框架是Axurerp9中的一個(gè)元件，也相當(dāng)于一個(gè)容器，內(nèi)聯(lián)框架支持嵌入外部資源在元件中，包括互聯(lián)網(wǎng)網(wǎng)頁、音視頻文件、網(wǎng)頁地圖等。設(shè)置內(nèi)聯(lián)框架的樣式添加框架目標(biāo)、隱藏邊框、滾動(dòng)和預(yù)覽功能內(nèi)聯(lián)框架的基本操作嵌入網(wǎng)頁跳轉(zhuǎn)網(wǎng)頁內(nèi)聯(lián)框架可以鏈接文件路徑，文件路徑包括本地路徑和網(wǎng)絡(luò)路徑，這兩種路徑分別支持嵌入本地視頻和網(wǎng)絡(luò)視頻。本地視頻:把視頻文件放在生成后的文件夾，內(nèi)聯(lián)框架的url設(shè)置中寫本地路徑（帶擴(kuò)展名）。網(wǎng)絡(luò)視頻:分享-通用代碼-找到src的值（‘’引號(hào)里面的內(nèi)容）例<iframeheight=498width=510src='/embed/XNTA5NDI1MTc2NA=='frameborder=0'allowfullscreen'></iframe>

嵌入視頻嵌入地圖案例演練：視頻點(diǎn)播案例描述頂部為視頻播放控件（內(nèi)聯(lián)框架），下方是視頻列表，點(diǎn)擊任意列表項(xiàng)（熱區(qū)），即刻播放相關(guān)視頻內(nèi)容。事件用例動(dòng)作單擊列表某一熱區(qū)時(shí)

內(nèi)聯(lián)框架目標(biāo)隨之改變操作關(guān)鍵點(diǎn)試做：仿微信低保真原型案例描述底部為菜單，點(diǎn)擊不同的區(qū)域，菜單圖標(biāo)顏色改變，且主屏顯示不同頁面。謝謝觀賞技術(shù)型文科人才系列課程新媒體產(chǎn)品設(shè)計(jì)與項(xiàng)目管