Axure RP 8 網(wǎng)站與APP原型設(shè)計(jì)-全套課件_第1頁(yè)
Axure RP 8 網(wǎng)站與APP原型設(shè)計(jì)-全套課件_第2頁(yè)
Axure RP 8 網(wǎng)站與APP原型設(shè)計(jì)-全套課件_第3頁(yè)
Axure RP 8 網(wǎng)站與APP原型設(shè)計(jì)-全套課件_第4頁(yè)
Axure RP 8 網(wǎng)站與APP原型設(shè)計(jì)-全套課件_第5頁(yè)
已閱讀5頁(yè),還剩142頁(yè)未讀 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

Axure標(biāo)準(zhǔn)教程第1章課程安排原型設(shè)計(jì)與工具準(zhǔn)備AxureRP看懂AxureRP的主界面動(dòng)手:一個(gè)APP登錄頁(yè)的低保真原型制作原型設(shè)計(jì)與工具1.什么是原型設(shè)計(jì)原型大致可以分為三類:草圖原型、低保真原型以及高保真原型。(1)草圖原型。(2)低保真原型。(3)高保真原型。產(chǎn)品原型能快速的挖掘出用戶的需求,設(shè)計(jì)師們根據(jù)項(xiàng)目的大小,項(xiàng)目的類型以及項(xiàng)目的工期以及用戶的需求來(lái)制作原型原型設(shè)計(jì)與工具2.原型設(shè)計(jì)工具NEWAxureNOT畫圖工具、PhotoShop工具、Word畫圖或者Excel畫圖、PPT畫圖Visio、Dreamweave原型設(shè)計(jì)與工具3.AxureRP8的特色準(zhǔn)備AxureRP1.AxureRP的安裝/article-690-1.html準(zhǔn)備AxureRP2.AxureRP的漢化Windows版漢化方法將下載到的lang文件夾復(fù)制到Axure的安裝目錄。最終lang包所在的目錄位置類似如下:c:\ProgramFiles\Axure\AxureRPPro8/lang/default(32位系統(tǒng)),c:\ProgramFiles(x86)\Axure\AxureRPPro8/lang/default(64位系統(tǒng))。準(zhǔn)備AxureRP3.AxureRP的注冊(cè)漢化完之后啟動(dòng)Axure程序,進(jìn)入到Axure工作界面,準(zhǔn)備注冊(cè)工作,單擊“Help”|“ManageLicensekey…”菜單命令,選擇注冊(cè)命令菜單。安裝包里有個(gè)注冊(cè)碼文本,或者自己上網(wǎng)尋找有效注冊(cè)碼,在彈出框輸入用戶名和注冊(cè)碼,單擊Submit按鈕,進(jìn)行注冊(cè)??炊瓵xureRP的主界面動(dòng)手:一個(gè)APP登錄頁(yè)的低保真原型制作1.拖拽一個(gè)矩形組件到工作區(qū)域,作為登錄區(qū)域的邊框動(dòng)手:一個(gè)APP登錄頁(yè)的低保真原型制作2.拖拽兩個(gè)標(biāo)簽組件到工作區(qū)域,分別命名為“用戶名”、“密碼”動(dòng)手:一個(gè)APP登錄頁(yè)的低保真原型制作3.拖拽兩個(gè)文本框組件到工作區(qū)域,作為“用戶名”和“密碼”密碼的輸入框動(dòng)手:一個(gè)APP登錄頁(yè)的低保真原型制作4拖拽一個(gè)HTML按鈕組件到工作區(qū)域,作為登錄的提交按鈕Axure標(biāo)準(zhǔn)教程第2章課程安排認(rèn)識(shí)站點(diǎn)地圖動(dòng)手:“百度”UI的站點(diǎn)地圖認(rèn)識(shí)站點(diǎn)地圖1.什么是站點(diǎn)地圖站點(diǎn)地圖區(qū)域是由兩部分組成,一部分是功能條,是對(duì)頁(yè)面操作的按鈕,另一部分是樹狀結(jié)構(gòu)的頁(yè)面,采用的和Windows(用官方標(biāo)準(zhǔn)大小寫)目錄結(jié)構(gòu)一致,通過(guò)父與子的頁(yè)面關(guān)系,兄弟和兄弟的頁(yè)面關(guān)系,就這樣把要設(shè)計(jì)的產(chǎn)品頁(yè)面關(guān)系整合起來(lái),形成產(chǎn)品的文檔關(guān)系。認(rèn)識(shí)站點(diǎn)地圖2.站點(diǎn)地圖的功能條①用來(lái)彈出或彈入頁(yè)面面板。②為所選擇的節(jié)點(diǎn)頁(yè)面創(chuàng)建一個(gè)新的同級(jí)頁(yè)面。③可以為所選擇的節(jié)點(diǎn)頁(yè)面創(chuàng)建一個(gè)新的同級(jí)文件夾,文件夾可以把頁(yè)面管理起來(lái),如同Windows文件夾一樣,把相關(guān)文件放置在一起。④搜索頁(yè)面。認(rèn)識(shí)站點(diǎn)地圖3.站點(diǎn)地圖的頁(yè)面管理頁(yè)面管理主要是對(duì)頁(yè)面進(jìn)行添加頁(yè)面、刪除頁(yè)面、重命名頁(yè)面、調(diào)整層級(jí)頁(yè)面、調(diào)整順序頁(yè)面進(jìn)行管理,添加頁(yè)面、刪除頁(yè)面、調(diào)整層級(jí)頁(yè)面、調(diào)整順序頁(yè)面操作可以通過(guò)功能條或者單擊右鍵進(jìn)行完成。一是雙擊當(dāng)前節(jié)點(diǎn)頁(yè)面進(jìn)行頁(yè)面重命名;二是在當(dāng)前頁(yè)面上單擊右鍵進(jìn)行頁(yè)面重命名;三是通過(guò)F2進(jìn)行頁(yè)面重命名。動(dòng)手:“百度”UI的站點(diǎn)地圖1.“百度”產(chǎn)品的頁(yè)面規(guī)劃動(dòng)手:“百度”UI的站點(diǎn)地圖2.增加頁(yè)面動(dòng)手:“百度”UI的站點(diǎn)地圖3.移動(dòng)頁(yè)面動(dòng)手:“百度”UI的站點(diǎn)地圖4.刪除頁(yè)面動(dòng)手:“百度”UI的站點(diǎn)地圖5.生成流程圖Axure標(biāo)準(zhǔn)教程第3章課程安排線框圖組件有哪些?圖片組件標(biāo)題1和標(biāo)題2組件文本標(biāo)簽和文本段落組件矩形和占位符組件自定義形狀組件水平線、垂直線組件圖像熱區(qū)組件動(dòng)態(tài)面板組件內(nèi)聯(lián)框架組件中繼器組件文本框和多行文本框組件下拉列表框和列表選擇框組件復(fù)選框、單選按鈕和HTML按鈕組件樹、表格、菜單組件線框圖組件有哪些AxureRP8原型設(shè)計(jì)軟件默認(rèn)內(nèi)置了40種線框圖組件圖片組件圖片占位功能組件,在設(shè)計(jì)低保真原型時(shí),可以用圖片在頁(yè)面設(shè)計(jì)上占位,讓相關(guān)使用人員,頁(yè)面的圖片區(qū)域是圖片的位置。也可以替換成真實(shí)的圖片。標(biāo)題1和標(biāo)題2組件這兩個(gè)組件是用來(lái)設(shè)置一級(jí)標(biāo)題和二級(jí)標(biāo)題。文本標(biāo)簽和文本段落組件文本標(biāo)簽組件是單行文本,而文本組件式多行長(zhǎng)文本,根據(jù)使用場(chǎng)景選擇這兩個(gè)組件進(jìn)行使用,如果只有一行文本選擇文本標(biāo)簽組件,如果有多行文本就選擇文本段落組件。矩形和占位符組件矩形組件和占位符組件可以用來(lái)做很多工作,但在本質(zhì)上這兩種組件沒(méi)有太大的區(qū)別,可以用這兩種組件做一個(gè)橫向或者縱向的菜單,或者可以做一個(gè)藍(lán)色背景圖等等,這兩種組件的區(qū)別在于占位符組件更強(qiáng)調(diào)占位作用,在制作原型時(shí),想表達(dá)頁(yè)面區(qū)域某個(gè)位置放什么,可以放一個(gè)占位符,這樣其他人在制作產(chǎn)品的時(shí)候能看明白占位符所表達(dá)的意思。自定義形狀組件自定義形狀組件類似矩形組件一樣,可以做出各種形狀的按鈕或者菜單或者頁(yè)簽等水平線、垂直線組件水平線和垂直線是很靈活的兩個(gè)組件,用它們可以設(shè)置一條水平線或者垂直線,也可以用它們分割一塊區(qū)域,并且可以利用工具欄按鈕編輯這兩個(gè)組件,編輯水平線和垂直線的顏色、線框、線條樣式和箭頭方向圖像熱區(qū)組件如果就想知道褲子的信息或者衣服的信息怎么辦,它現(xiàn)在是一體圖片,單擊圖片觸發(fā)的效果并不是我們想要的,我們只想看到其中一件信息,這時(shí)候圖像熱區(qū)可以解決這個(gè)問(wèn)題,分別在衣服和褲子加圖像熱區(qū),也就是增加兩個(gè)錨點(diǎn),錨點(diǎn)鏈接到不同頁(yè)面就可以看到不同信息。動(dòng)態(tài)面板組件動(dòng)態(tài)面板組件從字面上看,就是讓制作的原型動(dòng)態(tài)交互起來(lái)的一個(gè)組件,實(shí)現(xiàn)系統(tǒng)的高級(jí)交互效果,它能實(shí)現(xiàn)多種動(dòng)態(tài)效果,包含多個(gè)狀態(tài)(states),每個(gè)狀態(tài)可以理解為一系列組件的容器。任何時(shí)候一個(gè)動(dòng)態(tài)面板只能顯示一種狀態(tài),就像老師桌子上的一摞作業(yè)本,只能看到最上面的作業(yè)本是誰(shuí)的,是什么樣的作業(yè)本。內(nèi)聯(lián)框架組件在html網(wǎng)頁(yè)代碼中有iframe標(biāo)簽,iframe元素會(huì)創(chuàng)建包含另外一個(gè)文檔的內(nèi)聯(lián)框架,實(shí)現(xiàn)不同條件下嵌入不同的文檔效果。在Axure中,利用內(nèi)部框架組件完全可以達(dá)到iframe標(biāo)簽的框架效果。中繼器組件中繼器組件的功能特點(diǎn)是用來(lái)動(dòng)態(tài)的存儲(chǔ)數(shù)據(jù)的元件,可以在原型上實(shí)現(xiàn)數(shù)據(jù)的增加、刪除、修改、查詢操作,進(jìn)一步增強(qiáng)交互效果。文本框和多行文本框組件文本框組件是我們經(jīng)常用到的組件,分為單行文本框和多行文本框,在制作表單的時(shí)候經(jīng)常會(huì)使用它們作為輸入框下拉列表框和列表選擇框組件下拉列表框是每次在頁(yè)面上只顯示一個(gè)下拉菜單,也只允許選中一個(gè)下拉菜單;而列表選擇框在頁(yè)面上顯示所有的下拉菜單,并且可以選中多個(gè)下拉菜單復(fù)選框、單選按鈕和HTML按鈕組件復(fù)選框、單選按鈕和HTML按鈕,是常用到的組件,也是我們比較熟悉的組件。樹、表格、菜單組件樹、表格、菜單組件是常用到的組件,樹經(jīng)常用在表達(dá)部門結(jié)構(gòu),表格用在詳情列表,菜單分為橫向菜單和縱向菜單Axure標(biāo)準(zhǔn)教程第4章課程安排流程圖組件有哪些?創(chuàng)建流程圖流程圖組件有哪些?AxureRP8原型設(shè)計(jì)軟件默認(rèn)內(nèi)置了19種流程圖組件8種流程圖組件(1)矩形組件:代表要執(zhí)行的處理動(dòng)作,用作執(zhí)行框使用。(2)圓角矩形組件:代表流程的開始或者結(jié)束,用作起始框或者結(jié)束框。(3)菱形組件:代表決策或者判斷,用作判斷框。(4)文件組件:代表一個(gè)文件,用作以文件方式輸入或者以文件方式輸出。(5)括弧組件:代表說(shuō)明一個(gè)流程的操作或者特殊行為。(6)平行四邊形組件:代表數(shù)據(jù)的操作,用作數(shù)據(jù)的輸入或者輸出操作。(7)角色組件:代表流程的執(zhí)行角色,角色可以是人也可以是系統(tǒng)。(8)數(shù)據(jù)庫(kù)組件:代表系統(tǒng)的數(shù)據(jù)庫(kù)。創(chuàng)建流程圖1.流程圖形狀創(chuàng)建流程圖2.連接模式在繪制流程圖時(shí),對(duì)不同的流程圖形狀添加連接線之前,必須將選擇模式切換為連接線模式。在工具欄中單擊連接線圖標(biāo)或者按下快捷鍵Ctrl+3創(chuàng)建流程圖3.標(biāo)記頁(yè)面為流程圖頁(yè)面流程圖是使用站點(diǎn)地圖中的頁(yè)面進(jìn)行管理的。雖然在設(shè)計(jì)原型過(guò)程中不是必要的操作,但其最主要的功能就是將含有流程圖的頁(yè)面與其他頁(yè)面區(qū)分開。創(chuàng)建流程圖4.連接線在制作流程圖時(shí),需要將不同的形狀連接起來(lái),首先將選擇模式該位連接線模式,然后鼠標(biāo)指向形狀部件上的一個(gè)連接點(diǎn),并單擊拖拽,當(dāng)連接到另一個(gè)形狀的連接點(diǎn)后,松開鼠標(biāo)。要改變連接線的箭頭形狀,選中連接線,并在工具欄中選擇箭頭形狀,也可以修改連接線的線寬和顏色創(chuàng)建流程圖5.添加參照頁(yè)創(chuàng)建流程圖6.生成流程圖Axure標(biāo)準(zhǔn)教程第5章課程安排如何載入元件庫(kù)制作自己的元件庫(kù)如何載入元件庫(kù)1.選擇載入元件庫(kù)命令,找到下載好的元件庫(kù)如何載入元件庫(kù)2.載入到AxureRP8原型工具里的Andriod元件庫(kù)制作自己的元件庫(kù)1.選擇創(chuàng)建的元件庫(kù)存放的位置制作自己的元件庫(kù)2.添加注釋和交互創(chuàng)建自定義元件庫(kù)是可以給元件添加注釋和交互,當(dāng)使用該元件時(shí),注釋和交互也會(huì)被添加到設(shè)計(jì)區(qū)域。比如,使用動(dòng)態(tài)面板創(chuàng)建一個(gè)有交互效果的開關(guān)按鈕,當(dāng)把這個(gè)自定義按鈕拖入到工作區(qū)域時(shí),它的交互效果依然存在。制作自己的元件庫(kù)3.組織元件庫(kù)到文件夾與【站點(diǎn)地圖】面板中組織管理頁(yè)面一樣,自定義元件也可以添加到不同的文件夾進(jìn)行分類管理。在自定義元件面板中點(diǎn)擊文件夾小圖標(biāo),可以添加文件夾,然后拖放自定義元件到文件夾中,或者使用箭頭來(lái)移動(dòng)元件制作自己的元件庫(kù)4.使用自定義樣式自定義元件可以指定自定義樣式。設(shè)計(jì)自定義元件時(shí),可以給元件填充顏色、邊框、字體、陰影等樣式。當(dāng)自定義元件添加到項(xiàng)目時(shí),它的樣式也被同步導(dǎo)入項(xiàng)目文件制作自己的元件庫(kù)5.編輯自定義元件屬性Axure標(biāo)準(zhǔn)教程第6章課程安排關(guān)于母版區(qū)域動(dòng)手:“12306火車購(gòu)票網(wǎng)站”母版原型設(shè)計(jì)關(guān)于母版區(qū)域1.什么是母版區(qū)域在原型設(shè)計(jì)過(guò)程中經(jīng)常會(huì)碰到一些常用的功能模塊,比如導(dǎo)航條、尾部版權(quán)信息是很多頁(yè)面都會(huì)用到的模塊。母版就是解決避免重復(fù)設(shè)計(jì)的神奇功能,它可以實(shí)現(xiàn)一次設(shè)計(jì),其他頁(yè)面共用的效果,同時(shí)也能解決在母版一次修改,其他頁(yè)面會(huì)同步更新的效果。大大避免了做重復(fù)的功能,會(huì)提高原型設(shè)計(jì)的效率,也會(huì)使原型易于管理與維護(hù)。關(guān)于母版區(qū)域2.母版的基本功能:?jiǎn)螕暨@個(gè)新增母版按鈕可以實(shí)現(xiàn)新增一個(gè)母版。:?jiǎn)螕暨@個(gè)新增文件夾按鈕可以實(shí)現(xiàn)新增一個(gè)文件夾,可以用來(lái)管理新增的母版,對(duì)母版進(jìn)行分類放置。:?jiǎn)螕暨@個(gè)向上移動(dòng)按鈕可以把選中的母版上移一個(gè)位置,提高母版的排序。:?jiǎn)螕暨@個(gè)向下移動(dòng)按鈕可以把選中的母版下移一個(gè)位置,降低母版的排序。:?jiǎn)螕暨@個(gè)降級(jí)按鈕可以把當(dāng)前母版降級(jí)為上一個(gè)母版的子母版。:?jiǎn)螕暨@個(gè)升級(jí)按鈕可以把當(dāng)前母版從子母版升級(jí)為母版。關(guān)于母版區(qū)域3.母版使用在制作母版時(shí),會(huì)發(fā)現(xiàn)母版有三種拖放行為:任何位置、鎖定到母版中的位置、從母版脫離。在頁(yè)面使用母版時(shí),可以根據(jù)三種拖放行為來(lái)選擇制定母版。動(dòng)手:“12306火車購(gòu)票網(wǎng)站”母版原型設(shè)計(jì)1.效果動(dòng)手:“12306火車購(gòu)票網(wǎng)站”母版原型設(shè)計(jì)2.建立站點(diǎn)地圖動(dòng)手:“12306火車購(gòu)票網(wǎng)站”母版原型設(shè)計(jì)3.建立母版頁(yè)面動(dòng)手:“12306火車購(gòu)票網(wǎng)站”母版原型設(shè)計(jì)4.按F8發(fā)布制作好的原型,在頁(yè)面上已經(jīng)把頁(yè)頭、頁(yè)尾母版引用到了頁(yè)面上Axure標(biāo)準(zhǔn)教程第7章課程安排觸發(fā)事件交互條件交互行為動(dòng)手:“百度”登錄的交互設(shè)計(jì)觸發(fā)事件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)作。觸發(fā)事件2.條件設(shè)置條件設(shè)置部分可以理解為三個(gè)部分,用來(lái)比較圖的圈4和圈6的關(guān)系,圖圈5是運(yùn)算符,是比較方式。隨著圖的圈4選擇,圈6也是隨著變化。觸發(fā)事件3.交互條件應(yīng)用在上小學(xué)的時(shí)候,那時(shí)父母每天零花錢給1元錢,用來(lái)給我們買零食;當(dāng)我們上中學(xué)的時(shí)候,父母每天會(huì)把零花錢增加到5元錢,可選的零食范圍也多了;當(dāng)我們上高中的時(shí)候,面臨著高考,壓力很大,父母為了我們能吃好,營(yíng)養(yǎng)充足,每天零花錢增加到30元錢,這時(shí)很爽了,給女生買零食,爭(zhēng)取追到一個(gè)女生作為女朋友。上大學(xué)時(shí),我們已成年了,離父母也更遠(yuǎn)了,父母擔(dān)心我們吃不好,穿不好,往往都會(huì)寄很多錢給我們,就當(dāng)每天50元作為生活費(fèi)。以這個(gè)為例子,來(lái)看看交互條件是怎么應(yīng)用的。交互行為1.鏈接:切換用戶UI鏈接交互行為包括當(dāng)前窗口打開鏈接、新窗口/標(biāo)簽頁(yè)打開鏈接、彈出窗口打開鏈接、父窗口打開鏈接、關(guān)閉窗口、內(nèi)部框架打開鏈接以及滾動(dòng)到部件(錨點(diǎn)鏈接)。交互行為2.元件:元件效果介紹元件交互行為是常用到的交互行為,它分為元件的顯示/隱藏行為、設(shè)置元件文本行為、設(shè)置元件圖像行為、設(shè)置元件選擇/選中行為、設(shè)置元件選定的列表項(xiàng)行為、設(shè)置元件啟用/禁用行為,設(shè)置元件移動(dòng)行為,設(shè)置元件置于頂層/底層行為、設(shè)置元件獲得焦點(diǎn)行為、設(shè)置元件展開/折疊樹節(jié)點(diǎn)行為,元件的交互行為越豐富,制作出的原型交互效果體驗(yàn)度越真實(shí)。交互行為3.動(dòng)態(tài)面板深入使用動(dòng)態(tài)面板的交互行為包括設(shè)置動(dòng)態(tài)面板的顯示、隱藏以及設(shè)置動(dòng)態(tài)面板的顯示效果,同時(shí)可以設(shè)置動(dòng)態(tài)面板的大小,通過(guò)動(dòng)態(tài)面板的使用,可以使原型的交互效果更真實(shí),體驗(yàn)度更好交互行為4.中繼器:動(dòng)態(tài)操作數(shù)據(jù)中繼器的交互行為可以實(shí)現(xiàn)對(duì)數(shù)據(jù)的增加、刪除、修改、查詢等功能,模擬真實(shí)系統(tǒng)的數(shù)據(jù)庫(kù)操作,進(jìn)一步加強(qiáng)交互效果,給用戶最真實(shí)的系統(tǒng)使用體驗(yàn)。動(dòng)手:“百度”登錄的交互設(shè)計(jì)1.分析百度登錄界面動(dòng)手:“百度”登錄的交互設(shè)計(jì)2.制作百度登錄原型動(dòng)手:“百度”登錄的交互設(shè)計(jì)3.用戶名輸入框聚焦后用戶名圖標(biāo)和輸入框的邊框變成藍(lán)色動(dòng)手:“百度”登錄的交互設(shè)計(jì)4.密碼輸入框聚焦后密碼圖標(biāo)和輸入框的邊框變成藍(lán)色動(dòng)手:“百度”登錄的交互設(shè)計(jì)5.登錄時(shí)進(jìn)行表單驗(yàn)證動(dòng)手:“百度”登錄的交互設(shè)計(jì)6.登錄成功時(shí)跳轉(zhuǎn),并把用戶名帶過(guò)去Axure標(biāo)準(zhǔn)教程第8章課程安排變量動(dòng)手:加減乘除運(yùn)算函數(shù)變量1.全局變量和局部變量全局變量:在整個(gè)原型設(shè)計(jì)過(guò)程中都可以使用,但是作為全局變量也同時(shí)可以被修改掉,所以在使用的過(guò)程中需要注意。局部變量:只供某個(gè)觸發(fā)事件的某個(gè)動(dòng)作使用,其他觸發(fā)事件不可以使用。變量設(shè)置規(guī)則:變量名必須是字母或者是數(shù)字,并以字母開頭,少于25個(gè)字符,且不能包含空格,Axure會(huì)默認(rèn)一個(gè)變量叫做“OnLoadVariable”。變量2.內(nèi)置變量Axure我們不僅可以自行建立全局變量和局部變量,它內(nèi)部默認(rèn)內(nèi)置很多變量供我們使用,包括中繼器/數(shù)據(jù)集變量、元件變量、頁(yè)面變量、窗口變量、光標(biāo)位置變量、Number變量、字符串變量、運(yùn)算變量、日期變量。這些變量是一種特殊的變量,是不能被重新賦值的,系統(tǒng)提供默認(rèn)值,在我們需要的時(shí)候直接引用就可以了變量3.變量值在頁(yè)面間傳遞在制作原型的過(guò)程中,經(jīng)常會(huì)碰到一個(gè)頁(yè)面的信息需要傳遞到另一個(gè)頁(yè)面,例如在注冊(cè)的時(shí)候,輸入用戶名和密碼,在登錄進(jìn)去之后,會(huì)發(fā)現(xiàn)網(wǎng)站的頂部會(huì)有“xxx歡迎您”這樣友好的提示,而“xxx”經(jīng)常會(huì)是所注冊(cè)的用戶名。在制作原型的過(guò)程中,達(dá)到這樣的交互效果,會(huì)提高原型的真實(shí)度,同時(shí)能帶入用戶進(jìn)入真實(shí)場(chǎng)景,大大減少溝通成本。變量4.變量的使用場(chǎng)景(1)變量之間的運(yùn)算,例如制作計(jì)算器過(guò)程的使用。(2)頁(yè)面間變量值傳遞,例如登錄后顯示用戶名等信息。(3)Tab表格的選中狀態(tài)和未選中狀態(tài)的切換。(4)統(tǒng)計(jì)文本輸入字符串的長(zhǎng)度。(5)下拉列表的聯(lián)動(dòng)使用。動(dòng)手:加減乘除運(yùn)算1.拖拽兩個(gè)文本框(單行)組件,拖拽兩個(gè)標(biāo)簽組件,分別命名為“+”和“=”,再拖拽一個(gè)矩形組件,作為結(jié)果的輸出動(dòng)手:加減乘除運(yùn)算2.利用快捷鍵Ctrl+A,再利用快捷鍵Ctrl+D,復(fù)制同樣的組件三次,并修改運(yùn)算符動(dòng)手:加減乘除運(yùn)算3.給組件進(jìn)行命名,相加的輸入框組件命名為jia1和jia2,相加的結(jié)果組件命名為jieguo1,。相減的輸入框組件命名為jian1和jian2,相減的結(jié)果組件命名為jieguo2,。相乘的輸入框組件命名為cheng1和cheng2,相乘的結(jié)果組件命名為jieguo3。相除的輸入框組件命名為chu1和chu2,相除的結(jié)果組件命名為jieguo4動(dòng)手:加減乘除運(yùn)算4.拖拽一個(gè)HTML按鈕到工作區(qū)域,重命名為開始計(jì)算,組件命名為jisuan動(dòng)手:加減乘除運(yùn)算5.最終函數(shù)1.元件函數(shù)函數(shù)2.窗口函數(shù)和鼠標(biāo)函數(shù)函數(shù)3.數(shù)字函數(shù)和字符串函數(shù)函數(shù)4.數(shù)學(xué)函數(shù)和日期函數(shù)Axure標(biāo)準(zhǔn)教程第9章課程安排項(xiàng)目如何共享協(xié)作創(chuàng)建共享項(xiàng)目獲取共享項(xiàng)目編輯共享項(xiàng)目團(tuán)隊(duì)項(xiàng)目環(huán)境和本地副本項(xiàng)目如何共享協(xié)作

Axure原型制作過(guò)程中,需要多人協(xié)同制作時(shí),這時(shí)需要建立一個(gè)共享項(xiàng)目,大家對(duì)這一個(gè)項(xiàng)目進(jìn)行協(xié)同開發(fā)。就像軟件開發(fā)過(guò)程中常用到SVN、VSS等版本控制軟件一樣,同樣支持多人協(xié)作共同開發(fā)。創(chuàng)建共享項(xiàng)目1.單擊“團(tuán)隊(duì)”菜單,在彈出聯(lián)級(jí)菜單中單擊“從當(dāng)前文件創(chuàng)建團(tuán)隊(duì)項(xiàng)目”命令,輸入團(tuán)隊(duì)項(xiàng)目的名稱“Axure共享項(xiàng)目”創(chuàng)建共享項(xiàng)目2.擇團(tuán)隊(duì)項(xiàng)目目錄,選擇的文件夾必須是共享文件夾,否則其他團(tuán)隊(duì)成員無(wú)法獲取到共享項(xiàng)目。選擇共享文件夾“MyProjects”創(chuàng)建共享項(xiàng)目3.選擇本地存放的Axure項(xiàng)目副本的本地路徑,默認(rèn)會(huì)加載一個(gè)本地目錄,可以重新選擇本地目錄存放創(chuàng)建共享項(xiàng)目4.單擊“創(chuàng)建”按鈕,完成Axure共享項(xiàng)目創(chuàng)建,創(chuàng)建完成的共享項(xiàng)目,在站點(diǎn)地圖的頁(yè)面上,會(huì)有藍(lán)色菱形標(biāo)記,代表共享項(xiàng)目下的頁(yè)面編輯共享項(xiàng)目Axure原型項(xiàng)目建立完共享項(xiàng)目后,可以進(jìn)行共享項(xiàng)目編輯。團(tuán)隊(duì)項(xiàng)目環(huán)境和本地副本當(dāng)創(chuàng)建完團(tuán)隊(duì)項(xiàng)目后,Axure會(huì)打開本地副本,會(huì)發(fā)現(xiàn)Axure的工作環(huán)境發(fā)生了一些變化。Axure標(biāo)準(zhǔn)教程第10章課程安排需求描述設(shè)計(jì)思路準(zhǔn)備工作實(shí)現(xiàn)用戶界面功能關(guān)鍵技術(shù)講解需求描述系統(tǒng)包含:登錄、首頁(yè)、用戶管理、借書管理、圖書管理、圖書統(tǒng)計(jì)六大模塊 登錄模塊:用戶登錄、賬戶注冊(cè)。 首頁(yè)模塊:圖書搜索。 用戶管理模塊:新增用戶、刪除用戶、修改用戶、查看用戶。 借書管理模塊:圖書預(yù)約、圖書借閱、圖書歸還、圖書續(xù)借、圖書遺失記錄查詢。 圖書管理模塊:新增圖書、修改圖書、刪除圖書、查看圖書。 圖書統(tǒng)計(jì)模塊:按月統(tǒng)計(jì)借書情況;按月統(tǒng)計(jì)借書人數(shù)趨勢(shì);圖書類別統(tǒng)計(jì)。XX公司的圖書借閱管理主要是通過(guò)電話聯(lián)系圖書管理員來(lái)進(jìn)行借書,同時(shí)管理員標(biāo)記Excel圖書表中的圖書狀態(tài)信息,包括借出、遺失等狀態(tài)。設(shè)計(jì)思路“圖書管理系統(tǒng)”原型設(shè)計(jì),首先分析系統(tǒng)的可以分為幾個(gè)大的功能模塊,接著繼續(xù)分析大的功能模塊里再可以劃分為小的功能模塊或者功能菜單;之后根據(jù)原型設(shè)計(jì)經(jīng)驗(yàn)設(shè)計(jì)原型的架構(gòu)以及頁(yè)面的布局,把功能模塊組合起來(lái),實(shí)現(xiàn)頁(yè)面的整體布局;最后把共用的功能做成母版,例如導(dǎo)航菜單功能,制作一次,其他頁(yè)面可以直接引用。準(zhǔn)備工作制作“圖書管理系統(tǒng)”低真原型設(shè)計(jì),需要準(zhǔn)備幾張圖片和三個(gè)HTML頁(yè)面,存放在第13章里的圖書管理系統(tǒng)圖片文件夾。(1)圖書管理系統(tǒng)的系統(tǒng)名稱圖片。(2)登錄頁(yè)面需要使用的圖書館圖片。(3)在進(jìn)行制作統(tǒng)計(jì)分析模塊時(shí),需要使用Highcharts統(tǒng)計(jì)報(bào)表,把Highcharts-3.0.0、js兩個(gè)文件夾拷貝到生成原型的文件夾里。實(shí)現(xiàn)用戶界面功能1.建立站點(diǎn)地圖欄目結(jié)構(gòu)實(shí)現(xiàn)用戶界面功能2.登錄界面設(shè)計(jì)實(shí)現(xiàn)用戶界面功能3.制作導(dǎo)航菜單母版實(shí)現(xiàn)用戶界面功能4.首頁(yè)模塊設(shè)計(jì)實(shí)現(xiàn)用戶界面功能5.用戶管理模塊設(shè)計(jì)用戶管理主要包括用戶注冊(cè)審核、用戶賬號(hào)凍結(jié)、用戶注冊(cè)未通過(guò)列表、用戶信息維護(hù)、個(gè)人信息維護(hù)五個(gè)功能模塊。實(shí)現(xiàn)用戶界面功能6.借書管理模塊設(shè)計(jì)借書管理主要包括借書登記、還書登記、續(xù)借登記、借閱記錄查詢四個(gè)功能模塊。實(shí)現(xiàn)用戶界面功能7.圖書管理模塊設(shè)計(jì)圖書管理主要包括圖書維護(hù)、圖書遺失列表兩個(gè)功能模塊,提供給圖書管理員管理圖書信息的平臺(tái),支持對(duì)圖書的增加、刪除、修改、查詢,詳細(xì)信息查詢、預(yù)約等操作。實(shí)現(xiàn)用戶界面功能8.統(tǒng)計(jì)分析模塊設(shè)計(jì)統(tǒng)計(jì)分析主要包括借書情況統(tǒng)計(jì)、借書人數(shù)趨勢(shì)、圖書列表統(tǒng)計(jì)四個(gè)功能模塊。關(guān)鍵技術(shù)講解本章的難點(diǎn)在于要充分理解客戶的需求,對(duì)需求進(jìn)行分析,在理解需求的基礎(chǔ)上劃分出系統(tǒng)的功能模塊;依據(jù)功能模塊接著對(duì)頁(yè)面布局進(jìn)行設(shè)計(jì),把功能模塊組合起來(lái),實(shí)現(xiàn)頁(yè)面的整體布局;之后把共用的功能做成母版,例如導(dǎo)航菜單功能,制作一次,其他頁(yè)面可以直接引用。最后學(xué)會(huì)制作動(dòng)態(tài)面板來(lái)制作菜單選中背景,進(jìn)一步拓展動(dòng)態(tài)面板組件的使用。要充分對(duì)母版、內(nèi)部框架、動(dòng)態(tài)面板、全局變量的深入使用,也是制作原型高級(jí)交互的基礎(chǔ)。Axure標(biāo)準(zhǔn)教程第11章課程安排需求描述設(shè)計(jì)思路準(zhǔn)備工作實(shí)現(xiàn)原型制作關(guān)鍵技術(shù)講解需求描述“微信”原型設(shè)計(jì)需要完成如下需求:(1)“微信”登錄功能,當(dāng)手機(jī)號(hào)未輸入時(shí),提示“請(qǐng)輸入手機(jī)號(hào)”;當(dāng)密碼未輸入時(shí),提示“請(qǐng)輸入密碼”;當(dāng)手機(jī)號(hào)和密碼都輸入時(shí),登錄到“微信”。(2)“微信”進(jìn)入到首頁(yè)之前的軟件動(dòng)畫效果,向左側(cè)滑動(dòng)效果。(3)導(dǎo)航菜單微信、通訊錄、發(fā)現(xiàn)、我之間可以相互切換,顯示相應(yīng)的內(nèi)容。(4)實(shí)現(xiàn)可以給好友發(fā)送聊天內(nèi)容。(5)實(shí)現(xiàn)可以上下拖拽微信頁(yè)面內(nèi)容效果。(6)單擊“+”時(shí)顯示下拉菜單,再次單擊時(shí)隱藏下拉菜單。設(shè)計(jì)思路完成“微信”原型設(shè)計(jì)的需求,需要使用如下知識(shí)點(diǎn):(1)“微信”的登錄功能,需要設(shè)置不同的條件顯示不同的提示信息,需要用到動(dòng)態(tài)面板組件;(2)軟件進(jìn)入動(dòng)畫效果的實(shí)現(xiàn),可以在一個(gè)動(dòng)態(tài)面板里添加進(jìn)入動(dòng)畫效果的狀態(tài),依次展示動(dòng)態(tài)面板的狀態(tài),就可以實(shí)現(xiàn)軟件進(jìn)入動(dòng)畫的效果。(3)導(dǎo)航菜單切換效果同樣需要在一個(gè)動(dòng)態(tài)面板里設(shè)置幾種狀態(tài),實(shí)現(xiàn)狀態(tài)之間的切換效果。(4)給好友發(fā)送聊天內(nèi)容,需要新建兩個(gè)全局變量,一個(gè)用來(lái)保存以往的聊天的內(nèi)容,一個(gè)用來(lái)保存剛發(fā)出去的聊天內(nèi)容,以達(dá)到一種聊天的效果。(5)上下拖拽微信頁(yè)面內(nèi)容,需要添加拖動(dòng)動(dòng)態(tài)面板時(shí)、結(jié)束拖動(dòng)動(dòng)態(tài)面板時(shí)用例。(6)顯示或者隱藏下拉菜單,采用全局變量進(jìn)行控制。準(zhǔn)備工作制作“微信”高保真原型設(shè)計(jì),需要從微信軟件上截取如下圖片,圖片存放在第11章里的微信圖片文件夾。(1)登錄時(shí)需要用到的圖片:登錄、登錄按鈕、登錄與注冊(cè)圖片。(2)進(jìn)入動(dòng)畫效果需要用到的圖片:進(jìn)入微信動(dòng)畫1、進(jìn)入微信動(dòng)畫2、進(jìn)入微信動(dòng)畫3、進(jìn)入微信動(dòng)畫4圖片。(3)導(dǎo)航菜單需要用到的圖片:微信導(dǎo)航、通訊錄導(dǎo)航、發(fā)現(xiàn)導(dǎo)航、我導(dǎo)航圖片。(4)頂部?jī)?nèi)容和頁(yè)面內(nèi)容需要用到的圖片:頂部信息、微信內(nèi)容、通訊錄內(nèi)容、發(fā)現(xiàn)內(nèi)容、我內(nèi)容圖片。(5)通訊錄聯(lián)系人需要用到的圖片:通訊錄之白天賜、通訊錄之白小花、通訊錄之陳賀、微信之白小花、頭像圖片。(6)會(huì)話聊天頁(yè)面需要用到的圖片:會(huì)話界面圖片。(7)下拉菜單效果需要用到的圖片:下拉菜單圖片。實(shí)現(xiàn)原型制作1.微信登錄功能實(shí)現(xiàn)原型制作2.軟件進(jìn)入動(dòng)畫效果實(shí)現(xiàn)原型制作3.導(dǎo)航菜單切換效果實(shí)現(xiàn)原型制作4.給好友發(fā)送聊天內(nèi)容實(shí)現(xiàn)原型制作5.給好友發(fā)送聊天內(nèi)容實(shí)現(xiàn)原型制作6.上下拖拽微信頁(yè)面內(nèi)容實(shí)現(xiàn)原型制作7.顯示、隱藏“+”下拉菜單關(guān)鍵技術(shù)講解在制作“微信”原型過(guò)程中,使用如下關(guān)鍵技術(shù):(1)“微信”原型設(shè)計(jì)的難點(diǎn)在于所有的設(shè)計(jì)在一個(gè)頁(yè)面完成,這樣我們會(huì)使用大量的動(dòng)態(tài)面

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論