Axure原型設(shè)計(jì)_第1頁
Axure原型設(shè)計(jì)_第2頁
Axure原型設(shè)計(jì)_第3頁
Axure原型設(shè)計(jì)_第4頁
Axure原型設(shè)計(jì)_第5頁
已閱讀5頁,還剩12頁未讀 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

1、實(shí)驗(yàn)一、Axure快速原型設(shè)計(jì)一、實(shí)驗(yàn)?zāi)康?、掌握軟件開發(fā)原型模型的概念。2、練習(xí)Axure的原型設(shè)計(jì)二、實(shí)驗(yàn)器材1 .計(jì)算機(jī)一臺(tái)。2 . Axure工具軟件。三、Axure RP軟件介紹1 . Axure RPAxure RP可以讓桌面應(yīng)用軟件和Web的設(shè)計(jì)師創(chuàng)建線框圖、流程圖、原型和規(guī)格說明文檔,它比任何當(dāng)前其它創(chuàng)建靜態(tài)原型的工具如Visio, Omnigraffle ,Illustrator、Photoshop>Dreamweaver,Visual Studio、FireWorks、GUI Studio等都要快速、高效,因?yàn)樗攀钦嬲膶iT原型設(shè)計(jì)工具, 并且支持多人協(xié)作設(shè)計(jì)和版本

2、控制管理。設(shè)計(jì)師們渴望有一個(gè)專門的原型設(shè)計(jì)利器,而Axure正是為此目的而精心打造。Axure RP已經(jīng)被一些財(cái)富1000大公司采用,成為創(chuàng)造成功產(chǎn)品的必備工具。國(guó)內(nèi)的淘寶、雅虎、騰訊、當(dāng)當(dāng)?shù)裙镜漠a(chǎn)品經(jīng)理也都在使用。2 .原型的作用和好處制作Prototype是個(gè)有效的簡(jiǎn)化文檔編制、吸引使用者參與、早期識(shí)別需求遺漏、 將外在需求風(fēng)險(xiǎn)降到最低的方法。將大量文字性文檔轉(zhuǎn)變?yōu)閹в凶⑨屌c互動(dòng)性的可視畫面,如此更能抓住利益相關(guān)者與使用者的注意,讓用戶在軟件開始投入編程前就確認(rèn)需求。快速原型法Rapid Prototyping是一種有效且高效的以用戶為中心 User-Centered Design的技

3、術(shù),可以幫助用戶體驗(yàn)專家、設(shè)計(jì)師、工程師創(chuàng)造更加有用、可用的產(chǎn)品。目前全球有財(cái)富1000大的公司和重要機(jī)構(gòu)在使用Axure RP ,國(guó)內(nèi)的淘寶、雅虎、騰訊、當(dāng)當(dāng)?shù)裙镜漠a(chǎn)品經(jīng)理也都在使用。3、Axure的工作環(huán)境Axure的工作環(huán)境可進(jìn)展可視化拖拉操作,可輕松快速的創(chuàng)建帶有注釋的線框圖。無需編程就可以在線框圖中定義簡(jiǎn)單和高級(jí)交互。Axure可一體化生成線框圖、HTML交互原型、規(guī)格說明Word文檔。以下是對(duì) Axure RP工作環(huán)境的簡(jiǎn)要說明:圖1 Axure RP工作環(huán)境1 .主菜單和工具欄 執(zhí)行常用操作,如文件打開、保存文件,格式化控件,自動(dòng)生成原型和規(guī)格說明書等操作。2 . 站點(diǎn)地圖面板

4、 對(duì)所設(shè)計(jì)的頁面包括線框圖和流程圖進(jìn)展添加、刪除、重命名和組織頁面層次,。3 .控件面板 該面板中包含了線框圖控件和流程圖控件,如按鈕、圖片、文本面板、矩形框等,可用這些控件進(jìn)展線框圖和流程圖的設(shè)計(jì)。另外,你還可以載入已有的部件庫*.rplib文件和創(chuàng)建自己的部件庫。4 .模塊面板模塊是一種可以復(fù)用的特殊頁面,在該面板中可進(jìn)展模塊的添加、刪除、重命名和組織模塊分類層次。5 .線框圖工作區(qū)或叫頁面工作區(qū)線框圖工作區(qū)是你進(jìn)展原型設(shè)計(jì)的主要區(qū)域,在該區(qū)域中你可以設(shè)計(jì)線框圖、流程圖、自定義部件、模塊。6 .頁面注釋和交互區(qū)添加和管理頁面級(jí)的注釋和交互。7 .控件交互面板定義控件的交互,如:、彈出、動(dòng)態(tài)

5、顯示和隱藏等。8 .控件注釋面板對(duì)控件的功能進(jìn)展注釋說明。四、登錄界面案例操作1) .案例描述實(shí)現(xiàn)一個(gè)較為簡(jiǎn)單的登錄界面,輸入用戶名、密碼后,點(diǎn)擊登錄按鈕進(jìn)展登錄校驗(yàn):1 .如果未輸入用戶名或密碼,如此提示“請(qǐng)輸入用戶名和密碼',藍(lán)色字體;2 .如果用戶名或密碼錯(cuò)誤,如此提示“用戶名或密碼錯(cuò)誤'',紅色字體;3 .如果用戶名和密碼都匹配,如此提示“您好,【用戶名】",黑色字體2)實(shí)現(xiàn)步驟步驟一、繪制線框圖1、打開Axure軟件,新建一個(gè) R陟件;2、拖動(dòng)控件面板中的控件到線框圖面板中,繪制登錄界面如如下圖:圖2 線框圖所用到的控件清單如下:控件名作用文本內(nèi)容標(biāo)

6、識(shí)符其它屬性Rectangle裝飾底板底色:灰色Text Panel信息提示默認(rèn):登錄窗口logInfoText Panel信息提示用戶名:Text Panel信息提示密碼:Text Field輸入用戶名userNameText Field輸入密碼passWordButton點(diǎn)擊登錄登錄submitButton步驟二、設(shè)計(jì)控件交互1.選中登錄按鈕,在控件交互和注釋面板中鼠標(biāo)雙擊onClick事件:Add cdH, Q草uuk L1-kOnriiekLabel fiLibmitBLittonIntfraicticiinsAnnotations - All Fields T登錄窗口/nnotaLi

7、ons a Interactions 圖3 線框圖2 .在彈出的一交互場(chǎng)景屬性I對(duì)話框中,點(diǎn)擊“添加場(chǎng)景”這個(gè);圖4 添加場(chǎng)景3 .在彈出的一條件創(chuàng)建 取寸話框中,添加條件如下:Condition Builderof th m follow in Clear Alltest on wi dget / us er Mair 巾ttxt g ri ptiIardmi| | equals ralue才 tq.utls- vtlu4EB leseriti。孰£ teKl on widgel merName eQutl! ”or tOKt on wid<«t password&

8、quot;"圖5 創(chuàng)建對(duì)話框4,回到一交互場(chǎng)景屬性 時(shí)話框中,Step 2中選擇動(dòng)作 一Set Variable and Widget value equal to Value II,并點(diǎn)擊 Step 3 中的:Interaction Case PropertiesStep 1 ; Description LaseAdd Conditioti (if neceEsary) J EdiL Ccrntdi 七十口史.Cl,電arPanel (s)000000000Step Z: Select ActionsToggle Visibility for (s)Move Panel (s)S吟

9、t Variable 曲d Widgti (s) equ虹 tu Value (s)Dp tn Link in Psrcikt FrsmtScroll to Ima辛 Map Regi onKnabl* Wid£»Ui)Disable Wi d群t(£)W&i t Time GGOtherStep 3: Edit the Actions description (click an underlined value to edit):If txt on widget QEerNam守 匕quals 1r or tftwt cik widget pAssWor

10、dSet Yariwblc! and Widget value eqiual tsA-aJ口e圖6選擇動(dòng)作5.在彈出的“設(shè)置變量和控件值對(duì)話框中,設(shè)置如下:CIest Alltext on. widget loglufo,電叩社 to f Uue, Ed、pt.Descripti onSet text 力n widget loginfo equal to 登錄窗口"Enter TextEnter and format teKt belww. To insert variables sur * and "|*. For example OnLcuAdVariableL The

11、 c inserted u,£i“ F&geHune.宋體-io - E E (H) J -請(qǐng)輸入用戶名或密碼圖7設(shè)置變量和控件值點(diǎn)擊“Edit text,輸入”請(qǐng)輸入用戶名或密碼,并設(shè)置為藍(lán)色;6、確定和關(guān)閉所有對(duì)話框,這時(shí)控件交互和注釋面板如下:FwtiHitr «nd L»b«l1 EUtHT*®UttonInWraction*Jkii Idi t Ditlelt cmHh>me j區(qū)£林1仙卜I-*g*】 口1 L«»L da. L Ul-iifu-ii mquaIs " df L

12、電&L dd .上看it 0 f 1年”占此的11 "J s*t t*Kt 皿 loclaf® to .請(qǐng)粕入PS 戶名或強(qiáng)型”Annatstkons - All_Fi>elds- TGe缸 011irrt口i r噎EpMfficationStatus圖8注釋面板以上我們實(shí)現(xiàn)了第一個(gè)場(chǎng)景:如果未輸入用戶名或密碼,如此提示“請(qǐng)輸入用戶名和密碼',藍(lán)色字體;接下去,我們實(shí)現(xiàn)第 2、3個(gè)場(chǎng)景,其步驟和實(shí)現(xiàn)場(chǎng)景 1類似,只是要注意各個(gè)場(chǎng)景之間是“If else"關(guān)系。最終控件面板上的場(chǎng)景、條件、動(dòng)作如下:圖9場(chǎng)景、條件、動(dòng)作E包 Variable a

13、nd Widget ValuesSet the following:步驟三、生成原型1、點(diǎn)擊主菜單“Generate->Prototype(F5),選擇要生成的原型地址,確定后就可以在瀏覽器中查看原型了。2、輸入用戶名和密碼,點(diǎn)擊登錄按鈕,進(jìn)展原型體驗(yàn)。- Windows Ertlernet Ejipjorer曲|q CWrsWsgrW的 4flM 、SSP T皿靜網(wǎng)me今* E3 - -圖皿麗圖10 原型體驗(yàn)五、技巧和提示1、解決中文輸入法問題目前Axure對(duì)中文的一些輸入法支持得不好,搜狗拼音輸入法沒有方法使用,用谷歌拼音問題不大,但會(huì)強(qiáng)制轉(zhuǎn)為全角,需要人為點(diǎn)擊一下轉(zhuǎn)為半角。2、超快

14、速移動(dòng)工作區(qū)當(dāng)設(shè)計(jì)的頁面畫面變大時(shí),為了選取不同位置的對(duì)象,必須經(jīng)常使用垂直與水平的滾動(dòng)條,這會(huì)使得選取對(duì)象的動(dòng)作變慢。請(qǐng)?jiān)囋囘@招:鼠標(biāo)光標(biāo)focus在Wireframe中,按住鍵盤的空格鍵,此時(shí)鼠標(biāo)光標(biāo)會(huì)切換成手狀,您可以用來抓著畫面任意滑動(dòng),而且不會(huì)打亂任何對(duì)象的位置,輕松愉快。3、穿透控件選取下層的控件以鼠標(biāo)左鍵在對(duì)象上按住停留1秒鐘以上,放開鼠標(biāo)左鍵再單擊下面的對(duì)象,可以穿透上層對(duì)象,選取到位于下層的對(duì)象。4、引用Microsoft Office 或其他軟件中的對(duì)象:利用復(fù)制、粘貼功能,將其他應(yīng)用程序中如: PowerPoint, Excel, Visio, Photoshop 與 I

15、llustrator 中的物件,粘貼到 Axure RP 中。一般來說,這 些粘貼的對(duì)象會(huì)變成Wireframe中的圖形對(duì)象。反之亦然,也可以復(fù)制Axure中的對(duì)象或畫面,粘貼到其他應(yīng)用程序。5、單項(xiàng)選擇群組Radio Button Group 您可以一次選取多個(gè)Radio Button ,按下鼠標(biāo)右鍵,并選擇"Edit Radio Button->Assign Radio Group "來設(shè)定 Radio Button 的群組關(guān)系。如此一來,當(dāng)這些Radio Button輸出到Prototype時(shí),就會(huì)形成真正的單項(xiàng)選擇用戶接口。6、解除IE中的Active X 警

16、告訊息使用IE打開在自己計(jì)算機(jī)里頭的HTML原型時(shí),瀏覽器中可能會(huì)出現(xiàn) Active X 警告訊息,想要暫時(shí)解除IE中的警告訊息,請(qǐng)點(diǎn)選IE瀏覽器出現(xiàn)的 ActiveX警示訊息,接著選擇“允許被封鎖的內(nèi)容'',這樣就可以在IE瀏覽器上看到自己計(jì)算機(jī)里頭的HTML原型了。7、只要輸出必要的項(xiàng)目到規(guī)格書中規(guī)格文件輸出時(shí)如果選擇輸出的項(xiàng)目太細(xì),很有可能會(huì)產(chǎn)出一份好幾百頁的 Word文件,難以閱讀。因此,輸出之前最好通過格式的設(shè)定將不需要的項(xiàng)目取消勾選,只保存有意義的部份。8、默認(rèn)規(guī)格書標(biāo)題改成中文將Axure設(shè)置格式的文件標(biāo)題改成中文,比如將Pages格式設(shè)定的Section Hea

17、der名稱"Pages"改成"軟件規(guī)劃說明",把" Page Tree"改成"界面列表";或者把Screenshot格式設(shè)定的 Section Header名稱"User Interface "改成"用戶畫面"。如此一來輸出成規(guī)格文件時(shí),會(huì)更方便閱讀這些段落標(biāo)題。9、撤銷操作有時(shí)想對(duì) Axure的某個(gè)面板如站點(diǎn)地圖面板或模塊面板中的操作進(jìn)展恢復(fù),只要在這個(gè)面板中點(diǎn)擊鼠標(biāo)相當(dāng)于讓焦點(diǎn)進(jìn)入這個(gè)面板,然后按鍵盤的 一Ctrl+Z犍,就可以對(duì) 這個(gè)面板中進(jìn)展的操作進(jìn)展恢復(fù)。六、實(shí)驗(yàn)內(nèi)

18、容1. 使用Axure軟件設(shè)計(jì)一個(gè)教學(xué)信息管理系統(tǒng)的原型。原型擁有的根本界面 包括:登錄界面(如圖4-12)、注冊(cè)界面(如圖4-13)、系統(tǒng)主界面(如圖4-14)、 信息查詢界面(如圖4-15)、教學(xué)任務(wù)查詢(如圖4-16),教學(xué)任務(wù)列表(如圖4-17, 在Axure的樹形框架的結(jié)構(gòu)如圖4-11所示。圖11總體樹形結(jié)構(gòu)登錄五面logo圖標(biāo)底部圖標(biāo)log。圖標(biāo)用戶名:enter textenter text,空日確認(rèn):enter text.圖13注冊(cè)界面jmes inrC70i02ftE flwra圖14統(tǒng)主界面花日:Ar Icxl運(yùn).*41:MltH tttttm拓,:orrifr 2精時(shí):4fltW tlKt.T回百益圻布F期行市人等法。有強(qiáng)支若M:|口州打4

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(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)論