Axure-RP-9互聯(lián)網(wǎng)產(chǎn)品原型設(shè)計(jì)(慕課版)全書電子教案完整版課件

1、Axure RP 9互聯(lián)網(wǎng)產(chǎn)品原型設(shè)計(jì)（慕課版）了解互聯(lián)網(wǎng)產(chǎn)品原型設(shè)計(jì) 什么是原型設(shè)計(jì) 產(chǎn)品原型是用線條、圖形描繪出的產(chǎn)品框架；原型設(shè)計(jì)是綜合考慮產(chǎn)品目標(biāo)、功能需求場(chǎng)景、用戶體驗(yàn)等因素，對(duì)產(chǎn)品的各板塊、界面和元素進(jìn)行合理排序和布局的過程。 對(duì)互聯(lián)網(wǎng)行業(yè)來說，原型設(shè)計(jì)就是將頁面模塊、各種元素進(jìn)行排版和布局，獲得一個(gè)頁面的草圖效果。為了使效果更加具體、形象和生動(dòng)，還可以加入一些交互性的元素，模擬頁面的交互效果。 原型設(shè)計(jì)的參與者 一個(gè)項(xiàng)目的設(shè)計(jì)開發(fā)通常需要多個(gè)人員的共同努力。很多人認(rèn)為產(chǎn)品原型設(shè)計(jì)是整個(gè)項(xiàng)目的早期過程， 只需要產(chǎn)品經(jīng)理參與即可。但實(shí)際上產(chǎn)品經(jīng)理只是了解產(chǎn)品特性、用戶和市場(chǎng)需求，對(duì)于

2、頁面設(shè)計(jì)和用戶體驗(yàn)設(shè)計(jì)則通常只是停留在初級(jí)水平。而設(shè)計(jì)師獨(dú)立進(jìn)行創(chuàng)作，會(huì)使得產(chǎn)品經(jīng)理和設(shè)計(jì)師反復(fù)商討、反復(fù)修改。原型設(shè)計(jì)的參與者 為了避免產(chǎn)品設(shè)計(jì)開發(fā)過程中反復(fù)修改的情況發(fā)生， 在開始進(jìn)行原型設(shè)計(jì)時(shí)，產(chǎn)品經(jīng)理應(yīng)邀請(qǐng)用戶界面（UI） 設(shè)計(jì)師和用戶體驗(yàn)（UE）設(shè)計(jì)師一起參與產(chǎn)品原型的設(shè)計(jì)制作。這樣才可以設(shè)計(jì)出既符合產(chǎn)品經(jīng)理預(yù)期又具有良好用戶體驗(yàn)且頁面精美的產(chǎn)品原型。產(chǎn)品原型UI設(shè)計(jì)師產(chǎn)品經(jīng)理UE設(shè)計(jì)師如何體現(xiàn)原型設(shè)計(jì) 紙質(zhì) 設(shè)計(jì)師可以使用筆直接在紙上描繪產(chǎn)品原型，設(shè)計(jì)大致的產(chǎn)品效果。這種方式通常是在產(chǎn)品經(jīng)理進(jìn)行原型構(gòu)思的階段使用。通過這種方式可以將原型產(chǎn)品的框架基本確定，然后通過專業(yè)的軟件將原型更

3、形象、更直觀地轉(zhuǎn)移到電子文檔中，以便后續(xù)的研討、設(shè)計(jì)、開發(fā)和備案。如何體現(xiàn)原型設(shè)計(jì) Word 和Visio 用戶也可以使用Word進(jìn)行原型設(shè)計(jì)。在Word文檔中建立一塊畫布，使用文本框、圖片、控件等制作一個(gè)原型設(shè)計(jì)方案，Word軟件啟動(dòng)界面如下圖所示。使用Visio設(shè)計(jì)原型比使用Word更方便?？梢钥焖龠M(jìn)行原型設(shè)計(jì)，Visio軟件啟動(dòng)界面如下圖所示。如何體現(xiàn)原型設(shè)計(jì) Word 和Visio 由于軟件的局限性，通常只使用Word或Visio繪制原型的線框圖。相比手繪原型，線框圖更加清晰和整潔，適用正式場(chǎng)合的PPT形式的宣講的場(chǎng)景。線框圖還可以是功能頁面結(jié)構(gòu)的視覺呈現(xiàn)形式，能傳達(dá)頁面的布局結(jié)構(gòu)及定

4、義功能元素，并能將產(chǎn)品需求以線框結(jié)構(gòu)的方式展示出來，讓產(chǎn)品需求以更加規(guī)整的方式直觀展現(xiàn)，一般以黑白灰的形式來表示。原型設(shè)計(jì)軟件 原型設(shè)計(jì)軟件 目前原型設(shè)計(jì)軟件有很多，比較常見的有Axure RP、Adobe XD 和MockupScreens 等。這些工具軟件不僅具有豐富的Web 控件，而且交互性很好。Axure RP 是其中的佼佼者，下圖所示為Axure RP 9 的啟動(dòng)圖標(biāo)和工作界面。原型設(shè)計(jì)軟件 原型設(shè)計(jì)軟件 使用這些專業(yè)的原型設(shè)計(jì)軟件除了能夠完成產(chǎn)品原型線框圖繪制以外，還能完成高保真產(chǎn)品原型的繪制。高保真產(chǎn)品原型是真實(shí)地模擬產(chǎn)品最終的視覺效果、交互效果和用戶體驗(yàn)感受，在視覺、交互和用戶

5、體驗(yàn)上非常接近真實(shí)的產(chǎn)品，甚至包含產(chǎn)品的細(xì)節(jié)、真實(shí)的交互和UI 等。下圖所示為使用Axure RP 9 完成的高保真App 產(chǎn)品界面。原型設(shè)計(jì)的必要性和作用 原型設(shè)計(jì)的必要性 原型設(shè)計(jì)是幫助網(wǎng)站設(shè)計(jì)完成最終標(biāo)準(zhǔn)化和系統(tǒng)化的較好手段。它最大的好處在于，可以有效地避免重要元素被忽略，也能夠阻止做出不準(zhǔn)確、不合理的假設(shè)。 在項(xiàng)目開始之初，對(duì)每個(gè)元素進(jìn)行調(diào)試并確保它們能夠如同預(yù)期一樣運(yùn)作是相當(dāng)重要的步驟。當(dāng)設(shè)計(jì)完成可交互的高保真產(chǎn)品原型之后，設(shè)計(jì)師可以將它作為一個(gè)成型的界面來使用。通過測(cè)試模型中所有的功能，確認(rèn)其能否解決規(guī)劃階段所計(jì)劃解決的問題。 如果沒有使用產(chǎn)品原型，而是在完成項(xiàng)目整體的設(shè)計(jì)和開發(fā)之

6、后進(jìn)行測(cè)試，那么修改和調(diào)整的成本就相當(dāng)高昂了。原型設(shè)計(jì)的必要性和作用 原型設(shè)計(jì)的作用讓開發(fā)變得輕松節(jié)省時(shí)間和金錢更易溝通與反饋原型設(shè)計(jì)的必要性和作用 原型設(shè)計(jì)的要點(diǎn)設(shè)計(jì)時(shí)規(guī)避自己的個(gè)人喜好考慮不同類型的用戶充分分析競(jìng)爭對(duì)手原型設(shè)計(jì)中的用戶體驗(yàn) 用戶體驗(yàn)包含的內(nèi)容品牌 品牌對(duì)于任何一件展示在大眾面前的事物都有很強(qiáng)的影響力。沒有品牌的東西很難受到歡迎。同樣對(duì)于一個(gè)網(wǎng)站來說，良好的品牌也是其成功的決定性因素。 網(wǎng)站是不是有品牌取決于兩個(gè)要素：是不是獨(dú)一無二的類型和是不是內(nèi)容豐富、更新及時(shí)的。網(wǎng)站品牌獨(dú)一無二的類型+內(nèi)容豐富、更新及時(shí)原型設(shè)計(jì)中的用戶體驗(yàn) 用戶體驗(yàn)包含的內(nèi)容品牌 網(wǎng)站的獨(dú)一無二很好解釋

7、，假如某個(gè)行業(yè)只有一個(gè)網(wǎng)站，那么就算選擇的關(guān)鍵詞非常冷門或用戶較少， 但對(duì)于這個(gè)行業(yè)來說也是品牌。假如某網(wǎng)站相對(duì)其他同類網(wǎng)站來說內(nèi)容豐富、信息更新速度快，那么就是成功的。這兩點(diǎn)對(duì)于樹立網(wǎng)站品牌是非常重要的，歸根結(jié)底就是網(wǎng)站是不是可以給用戶帶來吸引力。 此外好的視覺體驗(yàn)對(duì)于品牌的提升也是很有影響的，例如，某公司有一款平民化的數(shù)碼單反相機(jī)“300”，這款相機(jī)雖然價(jià)格相對(duì)低廉，但是該公司卻將這款相機(jī)的官方網(wǎng)站設(shè)計(jì)得高貴典雅，讓人一眼就覺得這樣的一款相機(jī)一定是價(jià)格昂貴的好相機(jī)，但實(shí)際這款相機(jī)售價(jià)并不高，這就是好的視覺體驗(yàn)對(duì)于品牌提升的影響。原型設(shè)計(jì)中的用戶體驗(yàn) 用戶體驗(yàn)包含的內(nèi)容品牌 網(wǎng)頁設(shè)計(jì)的優(yōu)劣對(duì)

8、于人們是不是能記住網(wǎng)站有非常重要的作用，適當(dāng)?shù)厥褂脠D片、多媒體對(duì)于改善網(wǎng)頁效果也是很有幫助的，下圖所示為淘寶的PC 端網(wǎng)頁和移動(dòng)端網(wǎng)頁。原型設(shè)計(jì)中的用戶體驗(yàn) 用戶體驗(yàn)包含的內(nèi)容使用性 用戶在瀏覽網(wǎng)頁時(shí)，偶爾會(huì)遇到瀏覽器狀態(tài)欄下顯示網(wǎng)頁上有錯(cuò)誤的提示。這種情況一般不會(huì)影響用戶正常瀏覽網(wǎng)頁。但如果錯(cuò)誤太大，可能直接會(huì)影響到網(wǎng)頁的重要功能的使用。這會(huì)直接對(duì)網(wǎng)站的品牌造成影響。原型設(shè)計(jì)中的用戶體驗(yàn) 用戶體驗(yàn)包含的內(nèi)容使用性 這些錯(cuò)誤有的可能是網(wǎng)站后臺(tái)程序造成的，程序員應(yīng)該迅速解決，避免影響網(wǎng)站的用戶體驗(yàn)。有些錯(cuò)誤則是由于用戶的錯(cuò)誤操作引起的，如果沒有相關(guān)的瀏覽引導(dǎo)方案，會(huì)給很多接觸計(jì)算機(jī)不多的用戶一種

9、“這個(gè)網(wǎng)站太難操作”的錯(cuò)覺，會(huì)嚴(yán)重影響用戶體驗(yàn)。所以在進(jìn)行網(wǎng)頁設(shè)計(jì)時(shí)，一定要有用戶操作錯(cuò)誤的預(yù)設(shè)方案，這樣才能更好地提高用戶體驗(yàn)。原型設(shè)計(jì)中的用戶體驗(yàn) 用戶體驗(yàn)包含的內(nèi)容功能性 網(wǎng)站可以在最短的時(shí)間內(nèi)獲取到用戶所查詢的信息，并反饋給用戶。 程序功能過程對(duì)用戶的反饋。例如經(jīng)常可以看到的網(wǎng)頁上的“提交成功”或者收到的其他網(wǎng)站的更新情況的郵件等。 網(wǎng)站對(duì)于用戶個(gè)人信息的隱私保護(hù)策略，這對(duì)增加用戶對(duì)網(wǎng)站的信任度有很好的幫助。 線上線下結(jié)合。最簡單的例子就是網(wǎng)友聚會(huì)。 好的網(wǎng)站后臺(tái)管理程序。好的網(wǎng)站后臺(tái)管理程序可以幫助網(wǎng)站管理員更快地完成對(duì)網(wǎng)站內(nèi)容的修改與更新。原型設(shè)計(jì)中的用戶體驗(yàn) 用戶體驗(yàn)包含的內(nèi)容內(nèi)

10、容 如果說網(wǎng)站的技術(shù)構(gòu)成是一個(gè)網(wǎng)站的“骨架”，那么內(nèi)容就是網(wǎng)站的“血肉”了。內(nèi)容不單包含網(wǎng)站中的可讀性內(nèi)容，還包括連接組織和導(dǎo)航組織等方面。這也是一個(gè)網(wǎng)站用戶體驗(yàn)的關(guān)鍵部分。也就是說網(wǎng)站中除了要有豐富的內(nèi)容外，還要有方便、快捷和合理的鏈接和導(dǎo)航。 綜上所述，只要按照用戶體驗(yàn)的角度優(yōu)化網(wǎng)站，就可以讓網(wǎng)站受到大眾的歡迎。原型設(shè)計(jì)中的用戶體驗(yàn) 用戶體驗(yàn)的生命周期吸引熟悉交互保持擁護(hù)原型設(shè)計(jì)中的用戶體驗(yàn) 用戶體驗(yàn)的生命周期原型設(shè)計(jì)中的用戶體驗(yàn) 用戶體驗(yàn)的需求層次感覺需求交互需求情感需求社會(huì)需求自我需求思維導(dǎo)圖與原型設(shè)計(jì) 思維導(dǎo)圖的作用優(yōu)化大腦，提高溝通效率防止記憶或溝通方面的遺漏讓思路變得有條理思維導(dǎo)

11、圖與原型設(shè)計(jì) 思維導(dǎo)圖的基本類型圓圈圖 圓圈圖是由不同大小的圓圈組合而成的，位于中間部分的自然是中心主題一般會(huì)偏大一點(diǎn)，四周的圓圈是分支主題，大小稍微小點(diǎn)，使用圓圈圖可以培養(yǎng)想象力以及聯(lián)想力。思維導(dǎo)圖與原型設(shè)計(jì) 思維導(dǎo)圖的基本類型氣泡圖 氣泡圖包括單氣泡圖和雙氣泡圖。單氣泡圖由很多圓圈圍繞中心主題所建立；雙氣泡圖由兩個(gè)氣泡思維導(dǎo)圖組建而成，中間的部分是兩個(gè)思維導(dǎo)圖所重合的部位，也就是總結(jié)內(nèi)容時(shí)兩個(gè)關(guān)鍵詞都具備的特性。思維導(dǎo)圖與原型設(shè)計(jì) 思維導(dǎo)圖的基本類型樹狀圖 樹狀圖就如同一棵大樹，該類型的思維導(dǎo)圖主要適用于對(duì)知識(shí)點(diǎn)進(jìn)行歸納，這樣在后期使用的時(shí)候可以一目了然地清晰展現(xiàn)。思維導(dǎo)圖與原型設(shè)計(jì) 思維

12、導(dǎo)圖的基本類型橋形圖 橋形圖是一種類比圖，整個(gè)造型和橋梁的水平地方與凸起地方很像，但是兩者又是具有相關(guān)性的。思維導(dǎo)圖與原型設(shè)計(jì) 思維導(dǎo)圖的基本類型括號(hào)圖 括號(hào)圖與樹狀圖的功能相似，也常用于對(duì)知識(shí)點(diǎn)進(jìn)行歸納，利用花括號(hào)對(duì)不同的主題進(jìn)行詳細(xì)講解。思維導(dǎo)圖與原型設(shè)計(jì) 思維導(dǎo)圖的基本類型魚骨圖 魚骨圖也是思維導(dǎo)圖的一種，只是魚骨圖是講述的某件事情或者是解決問題的方法。不同于思維導(dǎo)圖是圍繞中心主題進(jìn)行搭建的，魚骨圖主要按照先后順序分析事物的發(fā)展?fàn)顩r以及內(nèi)在邏輯。思維導(dǎo)圖軟件設(shè)計(jì) MindMeister MindMeister 是一款典型的思維導(dǎo)圖軟件，功能非常完善。作為一款在線頭腦風(fēng)暴應(yīng)用軟件， Min

13、dMeister 以協(xié)作為設(shè)計(jì)理念，能實(shí)時(shí)更新?？煽绲攸c(diǎn)、多設(shè)備共享思維，在團(tuán)隊(duì)共創(chuàng)方面表現(xiàn)突出。 用戶可以打開MindMeister 的官方網(wǎng)站。注冊(cè)并登錄后，即可開始思維導(dǎo)圖的繪制。思維導(dǎo)圖軟件設(shè)計(jì) XMind XMind 是一款易用性很強(qiáng)的軟件，通過XMind 可以隨時(shí)開展頭腦風(fēng)暴，它能幫助用戶快速理清思路。XMind 繪制的思維導(dǎo)圖、魚骨圖、二維圖、樹狀圖、邏輯圖、組織結(jié)構(gòu)圖等可以結(jié)構(gòu)化的方式展示具體的內(nèi)容，設(shè)計(jì)師在用XMind 繪制圖形的時(shí)候，可以時(shí)刻保持頭腦清醒，隨時(shí)把握計(jì)劃或任務(wù)的全局，它可以幫助用戶在學(xué)習(xí)和工作中提高效率。思維導(dǎo)圖軟件設(shè)計(jì) XMind 用戶可以在XMind 和X

14、Mind ZEN 兩個(gè)版本中選擇，兩者沒有本質(zhì)的區(qū)別，XMind ZEN 是在XMind 基礎(chǔ)上重新設(shè)計(jì)的版本，不但具備XMind 全面的思維導(dǎo)圖功能，還有重新設(shè)計(jì)的界面和交互方式。下圖所示為XMind ZEN 的工作界面。課堂操作 安裝并使用Xmind ZEN 打開瀏覽器，在瀏覽器地址欄中輸入XMind官方網(wǎng)址，單擊頁面中的“免費(fèi)下載”按鈕，如圖1-22所示。下載完成后，雙擊XMind-ZEN.exe文件，彈出“XMind ZEN安裝”窗口。課堂操作 安裝并使用Xmind ZEN 稍等片刻即可完成軟件的安裝，彈出下圖所示的新建文件界面。選擇一種樣式后單擊“創(chuàng)建” 按鈕，即可進(jìn)入XMind Z

15、EN工作界面。課堂操作 安裝并使用Xmind ZEN選中主題并修改文本。選中子主題并修改文本。課堂操作 安裝并使用Xmind ZEN 選中“會(huì)員系統(tǒng)”子主題，向左側(cè)拖曳，效果如下圖所示。單擊選中主題，單擊軟件頂部的“子主題”按鈕，添加子主題，效果如下圖所示。思維導(dǎo)圖軟件設(shè)計(jì) MindManager MindManager 是一款國際化的商業(yè)思維導(dǎo)圖軟件，是創(chuàng)造、管理和交流思想的工具，可添加圖像、視頻、超鏈接和附件，是專業(yè)的思維導(dǎo)圖軟件。 思維導(dǎo)圖軟件設(shè)計(jì) MindManager MindManager 提供了友好、直觀的用戶界面，可協(xié)助用戶快速記錄靈感和想法，能有序地把用戶的思維、資源、管理項(xiàng)

16、目和項(xiàng)目進(jìn)程組織為一個(gè)整體，極大地提高用戶的工作效率。下圖所示為MindManager 的工作界面。思維導(dǎo)圖軟件設(shè)計(jì) MindManager MindManager 與同類思維導(dǎo)圖軟件相比最大的優(yōu)勢(shì)是能同Microsoft Office 無縫集成，能夠快速將數(shù)據(jù)導(dǎo)入或?qū)С龅絎ord、PowerPoint、Excel、Outlook、Project 和Visio 中，因此其越來越多地受到職場(chǎng)人士的青睞。本章小結(jié) 本章主要講解了互聯(lián)網(wǎng)產(chǎn)品原型設(shè)計(jì)的相關(guān)知識(shí)。針對(duì)原型設(shè)計(jì)的概念和原型設(shè)計(jì)的體現(xiàn)方式進(jìn)行了詳細(xì)的介紹。同時(shí)講解了原型設(shè)計(jì)與用戶體驗(yàn)的關(guān)系，幫助讀者理解用戶體驗(yàn)設(shè)計(jì)的重要性和設(shè)計(jì)要點(diǎn)。并對(duì)原

17、型設(shè)計(jì)中思維導(dǎo)圖的使用進(jìn)行了剖析，為制作符合用戶要求的產(chǎn)品原型打下基礎(chǔ)。課后練習(xí) 完成創(chuàng)意家居App項(xiàng)目的思維導(dǎo)圖啟動(dòng)XMind ZEN軟件并完成項(xiàng)目的二級(jí)功能。根據(jù)項(xiàng)目的需求，完成“購物系統(tǒng)”功能的思維導(dǎo)圖。課后練習(xí) 完成創(chuàng)意家居App項(xiàng)目的思維導(dǎo)圖根據(jù)項(xiàng)目的需求，完成“會(huì)員系統(tǒng)”功能的思維導(dǎo)圖。根據(jù)項(xiàng)目的需求，完成“設(shè)計(jì)師系統(tǒng)”功能的思維導(dǎo)圖。課后測(cè)試 選擇題1下列選項(xiàng)中不屬于產(chǎn)品原型的體現(xiàn)方法的是（）。AWord BVisio CAxure DExcel 課后測(cè)試 選擇題2下列選項(xiàng)中不屬于原型設(shè)計(jì)作用的是（）。A讓開發(fā)變得輕松B節(jié)省時(shí)間和金錢C更易溝通與反饋D能完成產(chǎn)品的上傳課后測(cè)試 選

18、擇題3可以把用戶體驗(yàn)的需求層次分為（）個(gè)層面，用來幫助設(shè)計(jì)師更好地解決問題。A5 B4 C3 D6 課后測(cè)試 選擇題4對(duì)于一個(gè)剛剛打開網(wǎng)站的用戶，為了確保能夠找到自己感興趣的內(nèi)容，通常不需要了解的內(nèi)容 是（）。A身在何處B要尋找的內(nèi)容在哪里C怎樣才能得到這些內(nèi)容D怎樣進(jìn)入網(wǎng)站課后測(cè)試 填空題在設(shè)計(jì)原型的時(shí)候，為了更好地表現(xiàn)網(wǎng)站內(nèi)容并留住更多的瀏覽者，設(shè)計(jì)師需要注意規(guī)避設(shè)計(jì)時(shí)自己個(gè)人的喜好、考慮不同層次的瀏覽者和充分分析競(jìng)爭對(duì)手。用戶體驗(yàn)一般包含品牌、使用性、功能性和內(nèi)容四個(gè)方面。用戶體驗(yàn)的生命期分為吸引、熟悉、交互、保持和擁護(hù)5個(gè)步驟。用戶體驗(yàn)可以分為五個(gè)需求層次：感覺需求交互需求情感需求社會(huì)

19、需求自我需求，這五個(gè)需求層次是逐層增高的。思維導(dǎo)圖是一種圖像式思考的輔助工具，它簡單卻又很有效，是一種將思維形象化的方法，通過放射狀的發(fā)散形式，將思路變得更為條理和深入。課后測(cè)試 操作題使用XMind ZEN 繪制一款體育社交App 的思維導(dǎo)圖。謝謝觀賞Axure RP 9互聯(lián)網(wǎng)產(chǎn)品原型設(shè)計(jì)（慕課版）了解Axure RP 9 Axure RP 9簡介 Axure RP是美國Axure Software Solution公司的旗艦產(chǎn)品，是一個(gè)專業(yè)的可快速進(jìn)行產(chǎn)品原型設(shè)計(jì)的工具。它能幫助負(fù)責(zé)定義需求和規(guī)格、設(shè)計(jì)功能和界面的專家快速創(chuàng)建應(yīng)用軟件或Web網(wǎng)站的線框圖、流程圖、原型和規(guī)格說明文檔。 Ax

20、ure RP 9簡介 作為專門的產(chǎn)品原型設(shè)計(jì)工具，它比一般的創(chuàng)建靜態(tài)產(chǎn)品原型的工具，如Visio、OmniGraffle、Illustrator、Photoshop、Dreamweaver、Visual Studio、Fireworks要便捷、高效。Axure RP 9的工作界面如下圖所示。 Axure RP 9為用戶提供了明亮和黑暗兩種工作界面外觀模式，用戶可以根據(jù)個(gè)人的喜好選擇不同的界面外觀模式。 Axure RP 9簡介 默認(rèn)情況下，Axure RP 9 使用明亮模式作為工作界面外觀，執(zhí)行“文件偏好設(shè)置”命令，彈出“偏好設(shè)置”對(duì)話框。在“常規(guī)”選項(xiàng)卡中的“外觀”選項(xiàng)下選擇“黑暗模式”選項(xiàng)

21、。 Axure RP 9簡介 此時(shí)“偏好設(shè)置”對(duì)話框效果如下圖所示。單擊“完成”按鈕，完成更改工作界面外觀為黑暗模式的操作，工作界面外觀效果。 軟件的下載、安裝、漢化與啟動(dòng) 下載并安裝Axure RP 9 在開始使用Axure RP 9 之前，需要先將Axure RP 9 軟件安裝到本地計(jì)算機(jī)中，用戶可以通過官方網(wǎng)站下載需要版本的軟件。 課堂操作 安裝Axure RP 9 在下載文件夾中雙擊AxureRP-Setup.exe文件，彈出“Axure RP 9 Setup”對(duì)話框。單擊“Next”（下一步）按鈕，進(jìn)入下圖所示對(duì)話框，認(rèn)真閱讀協(xié)議后，勾選“I accept the terms in

22、the License Agreement”（我接受許可協(xié)議的條款）復(fù)選框。 課堂操作 安裝Axure RP 9 單擊“Next”（下一步）按鈕，進(jìn)入下圖所示對(duì)話框，設(shè)置安裝地址。單擊“Change”（改變）按鈕可以更改軟件的安裝地址。單擊“Next”（下一步）按鈕，進(jìn)入下圖所示對(duì)話框，準(zhǔn)備開始安裝軟件。 課堂操作 安裝Axure RP 9 單擊“Install”（安裝）按鈕，開始安裝軟件。稍等片刻，單擊“Finish”（完成）按鈕，即可完成軟件的安裝。如果勾選“Launch Axure RP 9”（打開Axure RP 9）復(fù)選框，在完成軟件安裝后將立即啟動(dòng)軟件。 課堂操作 安裝Axure

23、RP 9 軟件安裝完成后，用戶可在桌面上找到Axure RP 9 的啟動(dòng)圖標(biāo)。用戶也可以在“開始”菜單中找到啟動(dòng)選項(xiàng)。 軟件的下載、安裝、漢化與啟動(dòng) 漢化與啟動(dòng)Axure RP 9 用戶可以通過互聯(lián)網(wǎng)獲得Axure RP 9 的漢化包，下載的漢化包解壓后通常包含1 個(gè)lang 的文件夾和3 個(gè)dll 文件。將該文件夾及dll 文件直接復(fù)制到Axure RP 9 的安裝目錄下，重新啟動(dòng)軟件，即可完成軟件的漢化。 漢化完成后，用戶可以通過雙擊桌面上的啟動(dòng)圖標(biāo)或單擊“開始”菜單中的啟動(dòng)選項(xiàng)啟動(dòng)軟件，啟動(dòng)后的工作界面如下圖所示。 軟件的下載、安裝、漢化與啟動(dòng) 漢化與啟動(dòng)Axure RP 9 通常在第1

24、 次啟動(dòng)Axure RP 9 時(shí)，系統(tǒng)會(huì)自動(dòng)彈出“管理授權(quán)”對(duì)話框。要求用戶輸入被授權(quán)人和授權(quán)密鑰，授權(quán)密鑰通常在用戶購買正版軟件后獲得。如果用戶沒有輸入授權(quán)密鑰，則軟件只能使用30 天，30 天后將無法正常使用。 Axure RP 9的主要功能 繪制網(wǎng)站構(gòu)架圖 使用Axure RP 9 可以快速繪制樹狀的網(wǎng)站構(gòu)架圖，而且可以讓網(wǎng)站構(gòu)架圖中的每一個(gè)頁面節(jié)點(diǎn)直接鏈接到對(duì)應(yīng)網(wǎng)頁。 Axure RP 9的主要功能 繪制示意圖 Axure RP 9 內(nèi)建了許多會(huì)經(jīng)常使用的元件，例如，按鈕、圖片、文本、水平線和下拉列表等。使用這些元件可以輕松地繪制各種示意圖。 Axure RP 9的主要功能 繪制流程圖

25、 Axure RP 9 中提供了豐富的流程圖元件，使用Axure RP 9 用戶可以很容易地繪制出流程圖， 并可以輕松地在流程圖元件之間加入連接線并設(shè)定連接的格式。 Axure RP 9的主要功能 實(shí)現(xiàn)交互設(shè)計(jì) Axure RP 9 可以模擬實(shí)際操作中的交互效果。通過使用“交互編輯器”對(duì)話框中的各項(xiàng)動(dòng)作， 快速地為元件添加一個(gè)或多個(gè)事件并產(chǎn)生動(dòng)作， 包括單擊時(shí)、滾動(dòng)到元件等。 Axure RP 9的主要功能 輸出網(wǎng)站原型 Axure RP 9 可以將線框圖直接輸出成符合IE 或火狐等不同瀏覽器的HTML 項(xiàng)目。 Axure RP 9的主要功能 輸出Word格式的規(guī)格文件 Axure RP 9

26、可以輸出Word 格式的文件，文件包含了目錄，網(wǎng)頁清單，網(wǎng)頁，附有注解的原版、注釋、交互和元件特定的信息，以及結(jié)尾文件（例如附錄），規(guī)格文件的內(nèi)容與格式也可以依據(jù)不同的閱讀對(duì)象進(jìn)行變更。 熟悉Axure RP 9的工作界面 相對(duì)于Axure RP 8 來說，Axure RP 9 的工作界面發(fā)生了較大的變化，精簡了很多區(qū)域，操作起來更簡單、更直接，方便用戶使用。Axure RP 9 工作界面中各區(qū)域如下圖所示。工具欄面板 熟悉Axure RP 9的工作界面 菜單欄文件菜單編輯菜單視圖菜單項(xiàng)目菜單布局菜單發(fā)布菜單 熟悉Axure RP 9的工作界面 菜單欄團(tuán)隊(duì)菜單賬號(hào)菜單幫助菜單 熟悉Axure

27、RP 9的工作界面 工具欄Cut（剪切）：單擊將剪切當(dāng)前所選對(duì)象Copy（拷貝）：單擊將復(fù)制當(dāng)前所選對(duì)象到剪貼板中Paste（粘貼）：單擊將剪貼板中的復(fù)制對(duì)象粘貼到頁面中 熟悉Axure RP 9的工作界面 工具欄選擇模式：有兩種選擇模式，分別是相交選中和包含選中。相交選中情況下，只要選取框與對(duì)象交叉即可被選中。包含選中情況下，只有選取框?qū)?duì)象全部包含時(shí)，才能被選中。 熟悉Axure RP 9的工作界面 工具欄連接：使用該工具可以將流程圖元件連接起來，形成完整的流程圖。插入：單擊該圖標(biāo)右側(cè)的向下三角形，可以打開如下圖所示的下拉菜單。用戶可以選擇在原型中插入繪畫、矩形、圓形、線段、文本、圖片和形

28、狀。 熟悉Axure RP 9的工作界面 工具欄點(diǎn)：使用繪畫工具繪制圖形，或?qū)⒃D(zhuǎn)為自定義形狀后，使用該工具可以調(diào)整圖形錨點(diǎn)，獲得更多的圖形效果。頂層：當(dāng)頁面中同時(shí)有兩個(gè)以上的元件時(shí)，可以通過單擊該按鈕，將選中的元件移動(dòng)到其他元件頂部。底層：當(dāng)頁面中同時(shí)有兩個(gè)以上的元件時(shí)，可以通過單擊該按鈕，將選中的元件移動(dòng)到其他元件底部。組合：同時(shí)選中多個(gè)元件，單擊該按鈕，可以將多個(gè)元件組合成一個(gè)元件。取消組合：單擊該按鈕可以取消組合操作，組合對(duì)象中的每一個(gè)元件將變回單個(gè)對(duì)象。縮放：在此下拉列表中，用戶可以選擇視圖的縮放比例，縮放比例范圍為10% 400%，以查看不同尺寸的文件效果。 熟悉Axure RP

29、 9的工作界面 工具欄對(duì)齊：同時(shí)選中2個(gè)以上元件，可以在該選項(xiàng)中選擇不同的對(duì)齊方式對(duì)齊元件。分布：同時(shí)選中3個(gè)以上元件，可以在該選項(xiàng)中選擇水平分布或垂直分布。 熟悉Axure RP 9的工作界面 工具欄預(yù)覽：單擊該按鈕，將自動(dòng)生成HTML 預(yù)覽文件。共享：單擊該按鈕，將彈出“發(fā)布項(xiàng)目”對(duì)話框，輸入信息后單擊“發(fā)布”按鈕，會(huì)自動(dòng)將項(xiàng)目發(fā)布到Axure 云上，并會(huì)獲得一個(gè)Axure 提供的地址，以在不同設(shè)備上測(cè)試效果。 熟悉Axure RP 9的工作界面 工具欄登錄：單擊該按鈕，將彈出“登錄”對(duì)話框，如圖2-41 所示。用戶可以選擇輸入郵箱和密碼登錄或者注冊(cè)一個(gè)新賬號(hào)。登錄后能獲得更多官方的制作素

30、材和技術(shù)支持。在Axure RP 9 的工作界面左上角，除了Axure RP 9 的圖標(biāo)外，還有保存、撤銷和重做3 個(gè)常用操作按鈕。 熟悉Axure RP 9的工作界面 工具欄保存：單擊該按鈕即可保存當(dāng)前文檔撤銷：單擊該按鈕將撤銷一步操作重做：單擊該按鈕將再次執(zhí)行前面的操作 熟悉Axure RP 9的工作界面 面板 Axure RP 9 一共為用戶提供了7 個(gè)功能面板，分別是頁面、概要、元件、母版、檢視、樣式、交互和說明。默認(rèn)情況下，這7 個(gè)面板分為2 組，分別排列于工作區(qū)的兩側(cè)。 熟悉Axure RP 9的工作界面 面板頁面：在該面板中可以完成有關(guān)頁面的所有操作。例如新建頁面、刪除頁面和查找

31、頁面等。概要：該面板中主要顯示當(dāng)前面板中的所有元件。用戶可以很方便地在該面板中找到元件并對(duì)其進(jìn)行各種操作。 熟悉Axure RP 9的工作界面 面板元件：在該面板中包含Axure RP 9 的所有元件。用戶還可以在該面板中完成元件庫的創(chuàng)建、下載和載入。母版：該面板用來顯示頁面中所有的母版文件。用戶可以在該面板中完成各種有關(guān)母版的操作。 熟悉Axure RP 9的工作界面 面板樣式：該面板的內(nèi)容會(huì)根據(jù)當(dāng)前所選內(nèi)容發(fā)生改變。大部分元件的效果樣式設(shè)置都在該面板中完成。交互：用戶可以在該面板中為元件添加各種交互效果。說明：在該面板中可以為元件添加說明，能幫助用戶理解原型的功能。 熟悉Axure RP

32、9的工作界面 面板說明 在面板名稱上雙擊，即可實(shí)現(xiàn)面板的展開和收縮。這樣便于在不同情況下最大化地顯示某個(gè)面板，便于用戶操作。拖動(dòng)面板組的邊界，用戶可以任意調(diào)整面板的寬度，獲得個(gè)人滿意的視圖效果。 熟悉Axure RP 9的工作界面 面板說明 將鼠標(biāo)指針移動(dòng)到面板名稱處，按住鼠標(biāo)左鍵拖曳，即可將面板轉(zhuǎn)換為浮動(dòng)狀態(tài)。拖動(dòng)一個(gè)浮動(dòng)面板到另一個(gè)浮動(dòng)面板上，即可將兩個(gè)面板合并為一個(gè)面板組。用戶可以根據(jù)個(gè)人的操作習(xí)慣自由組合面板，以獲得更易于操作的工作界面。 熟悉Axure RP 9的工作界面 面板說明 單擊浮動(dòng)面板或面板組右上角的圖標(biāo)，可關(guān)閉當(dāng)前面板或面板組。拖動(dòng)面板或面板組頂部的灰色位置到工作界面的兩

33、側(cè)，可將該面板或面板組轉(zhuǎn)換為固定狀態(tài)。關(guān)閉后的面板如果想要再次顯示，用戶通過執(zhí)行“視圖功能區(qū)”命令，在菜單中選擇想要顯示的面板即可。 熟悉Axure RP 9的工作界面 面板說明 用戶有時(shí)會(huì)需要更大的空間顯示產(chǎn)品原型，可以通過執(zhí)行“視圖功能區(qū)開關(guān)左側(cè)功能欄”或“視圖功能區(qū)開關(guān)右側(cè)功能欄”命令，隱藏左右兩側(cè)的面板，效果如下圖所示。再次執(zhí)行相同的命令， 則會(huì)將隱藏面板顯示出來。 熟悉Axure RP 9的工作界面 工作區(qū) 工作區(qū)是Axure RP 9 創(chuàng)建產(chǎn)品原型的地方。當(dāng)用戶新建一個(gè)頁面后，在工作區(qū)的左上角將顯示頁面的名稱。如果用戶同時(shí)打開多個(gè)頁面，則工作區(qū)將以卡片的形式將所有頁面排列在一起。

34、熟悉Axure RP 9的工作界面 工作區(qū) 當(dāng)頁面過多時(shí)，用戶可以單擊工作區(qū)右上角的“選擇與管理標(biāo)簽”按鈕。在彈出的下拉列表中選擇命令，執(zhí)行關(guān)閉當(dāng)前標(biāo)簽、關(guān)閉全部標(biāo)簽、關(guān)閉其他標(biāo)簽或跳轉(zhuǎn)到其他頁面的操作。 自定義工作界面 自定義工具欄 工具欄由基本工具和樣式工具兩部分組成。執(zhí)行“視圖工具欄”命令，取消對(duì)應(yīng)選項(xiàng)的選擇，即可將該工具隱藏。 課堂操作 自定義基本工具列表 執(zhí)行“視圖工具欄自定義基本工具列表”命令。彈出下圖所示對(duì)話框。 課堂操作 自定義基本工具列表 對(duì)話框中顯示在工具欄上的工具前面都有一個(gè) 圖標(biāo)。用戶可以根據(jù)個(gè)人的操作習(xí)慣，單擊取消或者添加工具選項(xiàng)，從而自定義工具欄。 課堂操作 自定義

35、基本工具列表 取消勾選對(duì)話框底部的“顯示圖標(biāo)下方的文本”復(fù)選框。將隱藏工具欄上圖標(biāo)對(duì)應(yīng)的文本，單擊“完成”按鈕，自定義工具欄效果如下圖所示。 自定義工作界面 自定義工作面板 用戶可以通過執(zhí)行“視圖功能區(qū)”命令，選擇需要顯示的面板。用戶可以選擇執(zhí)行“視圖重置視圖”命令。將操作造成的混亂視圖重置為最初的界面布局視圖。重置后的視圖將恢復(fù)到默認(rèn)視圖狀態(tài)。 自定義工作界面 使用單鍵快捷鍵 在Axure RP 9 中，用戶可以使用新增的單鍵快捷鍵更快地完成產(chǎn)品原型的設(shè)計(jì)與制作。首先按鍵盤上的一個(gè)字母鍵，然后在工作區(qū)單擊并拖動(dòng)即可生成相應(yīng)類型的小部件。 Axure RP 9 中支持的單鍵快捷鍵如下圖所示。按

36、【T】鍵，在工作區(qū)中單擊，直接輸入文本，效果如下圖所示。 自定義工作界面 使用單鍵快捷鍵 執(zhí)行“文件偏好設(shè)置”命令，彈出“偏好設(shè)置”對(duì)話框。切換到“畫布”選項(xiàng)卡， 可以選擇取消勾選“啟用單鍵快捷鍵”復(fù)選框。關(guān)閉該功能后，選中元件時(shí)輸入文本， 即可在該元件上快速添加文本。 使用Axure RP 9的幫助資源 用戶在使用Axure RP 9 軟件的過程中，如果遇到問題，可以通過“幫助”菜單尋求解答。 使用Axure RP 9的幫助資源 初學(xué)者可以執(zhí)行“幫助在線培訓(xùn)”命令，進(jìn)入Axure RP 9 的教學(xué)頻道，跟著網(wǎng)站視頻學(xué)習(xí)軟件的使用方法，在線培訓(xùn)頁面如下圖所示。 執(zhí)行“幫助在線幫助”命令可解決一

37、些操作中遇到的問題，在線幫助頁面如下圖所示。執(zhí)行“幫助官方論壇”命令可以快速加入Axure 大家庭，與世界各地的Axure 用戶分享軟件使用的心得。 使用Axure RP 9的幫助資源 用戶在使用軟件的過程中如果遇到一些軟件錯(cuò)誤，或者想提出一些建議，可以執(zhí)行“幫助提交反饋” 命令，在“提交反饋”對(duì)話框中輸入相關(guān)信息。將意見和錯(cuò)誤發(fā)送給軟件開發(fā)者，以共同提高軟件的穩(wěn)定性和安全性。 執(zhí)行“幫助歡迎界面”命令，可以再次打開“歡迎使用Axure RP 9”對(duì)話框，方便用戶快速創(chuàng)建和打開文件。 本章小結(jié) 本章帶領(lǐng)讀者了解了Axure RP 9 的基礎(chǔ)知識(shí)。主要講解了軟件的下載、安裝方法及其主要功能，還針

38、對(duì)Axure RP 9 的工作界面進(jìn)行了深度的剖析。在幫助讀者了解和熟悉工作界面的同時(shí)，也針對(duì)優(yōu)化和自定義工作界面進(jìn)行了詳細(xì)的介紹，為后面內(nèi)容的學(xué)習(xí)打下基礎(chǔ)。 課后練習(xí) 自定義草圖工作區(qū)啟動(dòng)Axure RP 9軟件。執(zhí)行“視圖功能區(qū)”命令。 課后練習(xí) 自定義草圖工作區(qū)根據(jù)設(shè)計(jì)制作草圖的需求，取消“母版”“交互”“說明”選項(xiàng)的選擇。完成自定義工作區(qū)的操作。將沒有使用的面板隱藏，更有利于草圖的設(shè)計(jì)制作。 課后測(cè)試 選擇題1下列選項(xiàng)中不屬于Axure RP 9 內(nèi)建元件的是（）。A按鈕B圖片C導(dǎo)航D下拉列表 課后測(cè)試 選擇題2Axure RP 9 的菜單欄按照功能劃分為（）個(gè)菜單。A5 B9 C3

39、D6 課后測(cè)試 選擇題3下列選項(xiàng)中能夠進(jìn)入Axure RP 9 的教學(xué)頻道，跟著網(wǎng)站視頻學(xué)習(xí)軟件的使用方法的是（）。A官方論壇B檢查更新C在線幫助D在線培訓(xùn) 課后測(cè)試 填空題Axure RP 9中的工具欄由上半部的基本工具和下半部的樣式工具兩部分組成。Axure RP 9有兩種選擇模式，分別是相交選中和包含選中。在Axure RP 9中一共為用戶提供了8個(gè)功能面板，分別是頁面、概要、元件、母版、樣式、交互和說明。用戶同時(shí)打開多個(gè)頁面文件，則工作區(qū)將以卡片的形式將所有頁面排列在一起。用戶可以選擇執(zhí)行“視圖重置視圖”命令，將操作造成的混亂視圖重置為最初的界面布局。 課后測(cè)試 操作題 下載安裝并啟動(dòng)

40、Axure RP 9 軟件，完成工作界面工具欄和面板的自定義操作。謝謝觀賞Axure RP 9互聯(lián)網(wǎng)產(chǎn)品原型設(shè)計(jì)（慕課版）頁面管理與自適應(yīng)視圖 使用歡迎界面 在啟動(dòng)Axure RP 9時(shí)，會(huì)自動(dòng)彈出“歡迎使用Axure RP 9”對(duì)話框。用戶可以通過單擊該對(duì)話框右下角的“新建文件”按鈕，新建一個(gè)Axure文件；單擊“打開文件”按鈕，打開.rp格式的文件，在Axure RP 9中編輯修改。 使用歡迎界面 用戶單擊“Whats New in Axure RP 9”鏈接可以進(jìn)入官網(wǎng)關(guān)于Axure RP 9 新增功能的頁面；單擊“Forum”鏈接可以訪問Axure 的論壇，與全世界的Axure 用戶交

41、流、學(xué)習(xí)制作心得；單擊“Learn and Support”鏈接可以進(jìn)入Axure 官網(wǎng)獲得學(xué)習(xí)資料和資源。 使用歡迎界面 漢化后的Axure RP 9 歡迎界面將左下角的3 個(gè)鏈接更改為“新的功能”“漢化下載”“中文教材”。用戶可以根據(jù)個(gè)人的需求單擊鏈接訪問對(duì)應(yīng)的內(nèi)容。 使用歡迎界面 單擊界面右側(cè)頂部“打開導(dǎo)覽文件”選項(xiàng)。即可打開Axure 官方提供的使用說明文件。界面右側(cè)中部顯示了最近編輯的10 個(gè)文件，用戶單擊即可快速打開最近編輯的文件。 新建和設(shè)置Axure文件 在開始設(shè)計(jì)制作產(chǎn)品原型之前，要新建一個(gè)Axure 文件，確定原型的內(nèi)容和應(yīng)用領(lǐng)域，以保證最終完成內(nèi)容的準(zhǔn)確性。不了解清楚產(chǎn)品

42、原型用途就貿(mào)然開始制作，既浪費(fèi)時(shí)間又會(huì)造成不可預(yù)估的損失。 除了通過歡迎界面新建文件外，用戶也可以通過執(zhí)行“文件新建” 命令新建文件。 新建和設(shè)置Axure文件 執(zhí)行“文件紙張尺寸與設(shè)置”命令，打開“紙張尺寸與設(shè)置”對(duì)話框。用戶可以在該對(duì)話框中方便、快捷地設(shè)置文件的尺寸和屬性。紙張尺寸與設(shè)置 新建和設(shè)置Axure文件 紙張尺寸與設(shè)置單位：選擇英寸或毫米等作為寬、高和頁邊距使用的測(cè)量單位。方向：選擇縱向或橫向的紙張朝向。尺寸：顯示新建文件的尺寸，可輸入自定義的紙張寬度和高度數(shù)值。像素尺寸：指定每個(gè)打印紙張像素尺寸。頁邊距：指定紙張上、下、左、右方向上的外邊距值。保存為默認(rèn)設(shè)置：將當(dāng)前尺寸設(shè)置為默

43、認(rèn)尺寸，下次新建文件時(shí)自動(dòng)顯示。 新建和設(shè)置Axure文件 文件存儲(chǔ) 執(zhí)行“文件保存”命令，彈出“另存為”對(duì)話框，輸入文件名、選擇保存類型后，單擊“保存”按鈕， 即可保存文件。 新建和設(shè)置Axure文件 文件存儲(chǔ) 當(dāng)前文件保存后，再次執(zhí)行“文件另存為”命令，也會(huì)彈出“另存為”對(duì)話框。執(zhí)行此命令通常是為了獲得文件的副本，或者打開一個(gè)新的文件。 新建和設(shè)置Axure文件 文件存儲(chǔ)RP文件格式RPPRJ文件格式RPLIB文件格式UBX文件格式 課堂操作 設(shè)置自動(dòng)備份 執(zhí)行“文件自動(dòng)備份設(shè)置”命令，彈出“偏好設(shè)置”對(duì)話框。勾選“啟用備份”復(fù)選框，即可啟動(dòng)自動(dòng)備份功能。在“備份間隔”的文本框中輸入希望間

44、隔保存的時(shí)間即可。 課堂操作 設(shè)置自動(dòng)備份 如果出現(xiàn)意外，需要恢復(fù)自動(dòng)備份時(shí)的數(shù)據(jù)，可以執(zhí)行“文件從備份中恢復(fù)”命令。在彈出的“從備份中恢復(fù)文件”對(duì)話框中設(shè)置文件恢復(fù)的時(shí)間點(diǎn)。選擇自動(dòng)備份日期后，單擊“恢復(fù)”按鈕，即可完成文件的恢復(fù)操作。 頁面管理 新建Axure RP 9 文件后，用戶可以在“頁面”面板中查看和管理新建的頁面。 每個(gè)頁面都有一個(gè)名字，為了便于管理，用戶可以對(duì)頁面進(jìn)行重命名操作。在頁面選中狀態(tài)下單擊頁面名稱處，即可重命名頁面。 在想要重命名的頁面上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“重命名”命令，也可以完成對(duì)頁面重新設(shè)置名稱的操作。 頁面管理 如果用戶需要添加頁面，可以單擊“

45、頁面”面板右上角的“添加頁面”按鈕，完成頁面的添加。添加頁面的效果如下圖所示。添加和刪除頁面 頁面管理 為了方便進(jìn)行頁面管理，通常將同類型的頁面放在一個(gè)文件夾下。單擊“頁面”面板右上角的“添加文件夾”按鈕，即可完成文件夾的添加。添加文件夾的效果如下圖所示。添加和刪除頁面 頁面管理 用戶如果希望在特定的位置添加頁面或文件夾，首先在“頁面”面板中選擇一個(gè)頁面，然后單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“添加”命令，即可完成添加。添加和刪除頁面 頁面管理 “添加”下包含“文件夾”“上方添加頁面”“下方添加頁面”“子頁面”4 個(gè)命令。添加和刪除頁面文件夾：將在當(dāng)前文件下創(chuàng)建一個(gè)文件夾。上方添加頁面：將在

46、當(dāng)前頁面之前創(chuàng)建一個(gè)頁面。下方添加頁面：將在當(dāng)前頁面之后創(chuàng)建一個(gè)頁面。子頁面：將為當(dāng)前頁面創(chuàng)建一個(gè)子頁面。 頁面管理 添加和刪除頁面 用戶如果想要?jiǎng)h除某個(gè)頁面，可以首先選擇想要?jiǎng)h除的頁面，然后按【Delete】鍵完成刪除操作；也可以在頁面上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“刪除”命令，完成刪除操作。 頁面管理 添加和刪除頁面 如果當(dāng)前刪除頁面中包含子頁面，則在刪除該頁面時(shí)， 系統(tǒng)會(huì)自動(dòng)彈出“警告”對(duì)話框，以確定是否刪除當(dāng)前頁面及其子頁面。單擊“是”按鈕則刪除當(dāng)前頁面及其所有子頁面，單擊“否”則取消刪除操作。 頁面管理 移動(dòng)頁面 用戶如果想移動(dòng)頁面的順序或更改頁面的級(jí)別，可以首先在“頁面”面

47、板上選擇需要更改的頁面，然后單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“移動(dòng)”命令下的移動(dòng)命令。 頁面管理 移動(dòng)頁面上移：將當(dāng)前頁面向上移動(dòng)一層下移：將當(dāng)前頁面向下移動(dòng)一層降級(jí)：將當(dāng)前頁面轉(zhuǎn)換為子頁面升級(jí)：將當(dāng)前子頁面轉(zhuǎn)換為獨(dú)立頁面 頁面管理 搜索頁面 一個(gè)產(chǎn)品原型項(xiàng)目的頁面少則幾個(gè)，多則幾十個(gè)，為了方便用戶在眾多頁面中查找某一個(gè)頁面， Axure RP 9 為用戶提供了搜索功能。 單擊“頁面”面板左上角的“搜索”按鈕，在頁面頂部出現(xiàn)搜索文本框。輸入要搜索的頁面名稱后，即可顯示搜索到的頁面。 頁面管理 剪切、復(fù)制和粘貼頁面 用戶可以在頁面上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“剪切”命令，即可將頁面

48、剪切至內(nèi)存中。選擇“復(fù)制”命令，即可將頁面復(fù)制至內(nèi)存中。 頁面管理 剪切、復(fù)制和粘貼頁面 選擇想要將頁面放置的位置，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“粘貼”命令， 即可將剪切或復(fù)制的內(nèi)容粘貼到此位置。粘貼頁面效果如下圖所示。 頁面管理 重復(fù)頁面 原型項(xiàng)目中有一些頁面結(jié)構(gòu)基本一致，只是圖片或文字內(nèi)容不同，用戶可以通過復(fù)制頁面并修改內(nèi)容完成制作。在需要復(fù)制的頁面上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“重復(fù)頁面”命令，即可為當(dāng)前頁面創(chuàng)建一個(gè)副本。 如果想要將頁面及其子頁面一起復(fù)制，則需要選擇“重復(fù)分支”命令，效果如下圖所示。 頁面設(shè)置 新建頁面后，用戶在“頁面”面板中雙擊想要編輯的頁面，即可進(jìn)入

49、頁面編輯狀態(tài)。默認(rèn)狀態(tài)下，頁面顯示為背景色為白色的空白頁面。用戶可以通過“樣式”面板完成頁面的設(shè)置工作。用戶可以在“樣式”面板中對(duì)頁面尺寸、頁面排列、填充和低保真度等屬性進(jìn)行設(shè)置 。 頁面設(shè)置 默認(rèn)情況下，“頁面尺寸”設(shè)置為“Auto”（自動(dòng)），單擊右側(cè)的圖標(biāo)， 用戶可以在彈出的下拉列表中選擇預(yù)設(shè)的移動(dòng)設(shè)備頁面尺寸。選擇“Web”（網(wǎng)頁）選項(xiàng)，用戶可以在文本框中手動(dòng)設(shè)置頁面的寬度，如圖3-38 所示。選擇“自定義設(shè)備”選項(xiàng)，用戶可以在文本框中手動(dòng)設(shè)置頁面的寬度和高度。頁面尺寸 頁面設(shè)置 在選擇“Auto”（自動(dòng)）和“Web”（網(wǎng)頁）選項(xiàng)時(shí)，用戶可以在“樣式”面板中設(shè)置“頁面排列” 的方式，有左

50、側(cè)對(duì)齊和居中對(duì)齊兩種方式。 頁面制作完成后，單擊工作界面右上角的“預(yù)覽”按鈕，對(duì)比兩種對(duì)齊方式的效果。頁面排列 頁面設(shè)置 為了實(shí)現(xiàn)更豐富的頁面效果，用戶可以為頁面設(shè)置“顏色”填充和“圖片”填充。單擊“顏色”圖標(biāo)，彈出拾色器面板。用戶可以選擇任意一種顏色作為頁面的背景色。頁面填充 頁面設(shè)置 單擊“圖片”圖標(biāo)，彈出下圖所示的面板。單擊“選擇”按鈕，選擇一張圖片作為頁面的背景。單擊圖片縮略圖右上角 的圖標(biāo)，即可清除頁面中的圖片背景。頁面填充 頁面設(shè)置 默認(rèn)情況下，圖片填充的范圍為Axure RP 9 的整個(gè)工作區(qū)。填充方式為“不重復(fù)”， 單擊右側(cè)的重復(fù)背景圖片圖標(biāo)，可以在彈出的下拉列表中選擇其他的填

51、充方式。頁面填充 頁面設(shè)置 不重復(fù)：圖片將作為背景顯示在工作區(qū)內(nèi)。重復(fù)圖片：圖片在水平和垂直兩個(gè)方向上重復(fù)，覆蓋整個(gè)工作區(qū)。水平重復(fù)：圖片在水平方向上重復(fù)。頁面填充 頁面設(shè)置 垂直重復(fù)：圖片在垂直方向上重復(fù)。填充：圖片等比例縮放填充整個(gè)頁面。頁面填充 頁面設(shè)置 適應(yīng)：圖片等比例縮放置于工作區(qū)。拉伸：圖片自動(dòng)縮放填充整個(gè)工作區(qū)。頁面填充 頁面設(shè)置 用戶通過單擊“對(duì)齊”選項(xiàng)的9個(gè)方框，可以將背景圖片顯示在頁面的左上、頂部、右上、左側(cè)、居中、右側(cè)、左下、底部和右下等位置，下圖所示為將背景圖片放置在右下位置。頁面填充 頁面設(shè)置 一個(gè)完整的項(xiàng)目原型，通常包含很多的圖片和文本素材。為了獲得好的預(yù)覽效果，很

52、多圖片采用了較高分辨率的圖片素材，而過多的素材會(huì)影響整個(gè)項(xiàng)目原型的制作流暢度。Axure RP 9 為用戶提供了低保真度模式，以解決由于制作內(nèi)容過多造成的制作過程中出現(xiàn)卡頓的問題。單擊“樣式”面板中“低保真度”選項(xiàng)后面的圖標(biāo)，即可進(jìn)入低保真度模式。頁面中的圖片素材將以灰度模式顯示，英文文本將替換為手寫字體形式。低保真度 課堂操作 啟動(dòng)Axure RP 9，單擊選擇“樣式”面板“頁面尺寸”下拉列表中的“iPhone 8（375667）”選項(xiàng)。新建頁面效果如下圖所示。新建iOS系統(tǒng)頁面 課堂操作 單擊“樣式”面板“填充”選項(xiàng)右側(cè)的“顏色”圖標(biāo)，在彈出的拾色器面板中選擇下圖所示的顏色。填充背景顏色效

53、果。新建iOS系統(tǒng)頁面 課堂操作 單擊“圖片”圖標(biāo)，在彈出的面板中單擊“選擇”按鈕，選擇“素材第3章301.png”文件，選擇填充方式為“適應(yīng)” 。填充背景圖片效果如下圖所示。新建iOS系統(tǒng)頁面 課堂操作 用戶可以在“樣式”面板中創(chuàng)建并應(yīng)用樣式。單擊“默認(rèn)”選項(xiàng)后面的“管理頁面樣式”按鈕，彈出“頁面樣式管理”對(duì)話框。創(chuàng)建并應(yīng)用頁面樣式 課堂操作 用戶可以根據(jù)項(xiàng)目中頁面的類型創(chuàng)建不同的樣式。單擊“頁面樣式管理”對(duì)話框頂部的“添加” 選項(xiàng)，即可創(chuàng)建一個(gè)頁面樣式。用戶可以在“頁面樣式管理”對(duì)話框右側(cè)選擇設(shè)置頁面的不同樣式。創(chuàng)建并應(yīng)用頁面樣式 課堂操作 單擊“確定”按鈕，即可完成頁面樣式的創(chuàng)建。在“頁

54、面”面板中新建一個(gè)頁面，單擊“樣式” 面板上的“默認(rèn)”選項(xiàng)，在彈出的下拉列表中選擇剛剛創(chuàng)建的樣式。樣式應(yīng)用頁面效果如下圖所示。創(chuàng)建并應(yīng)用頁面樣式 頁面設(shè)置 用戶可以在“頁面樣式管理”對(duì)話框中對(duì)頁面樣式進(jìn)行復(fù)制、上移、下移和刪除操作。頁面樣式 頁面設(shè)置 用戶可以在“說明”面板中為頁面或頁面中的元件添加說明，方便其他用戶理解和修改。 用戶可以直接在“頁面概述”下方的文本框中輸入說明內(nèi)容。單擊右側(cè)的圖標(biāo)， 彈出格式化文本參數(shù)，用戶可以設(shè)置說明文字的字體、加粗、斜體、下畫線、文本顏色和項(xiàng)目符號(hào)等參數(shù)。頁面說明 頁面設(shè)置 如果需要有多個(gè)說明，可以單擊頁面名稱右側(cè)的圖標(biāo)，彈出“說明字段設(shè)置”對(duì)話框。單擊“

55、添加”選項(xiàng)即可添加一個(gè)頁面說明。頁面說明 頁面設(shè)置 單擊“完成”按鈕，即可在“說明”面板上添加頁面說明。當(dāng)頁面同時(shí)有多個(gè)說明時(shí)， 用戶可以在“說明字段設(shè)置”對(duì)話框中完成對(duì)說明的上移、下移和刪除操作。頁面說明 頁面設(shè)置 單擊“說明”面板中的“指定元件”選項(xiàng)，在彈出的下拉列表中選擇要添加說明的元件，即可在下面的文本框中為元件添加說明。添加說明后的元件的右上角將顯示序列數(shù)字，該數(shù)字與“說明”面板中顯示的數(shù)字一致。頁面說明 頁面設(shè)置 單擊圖標(biāo)，彈出下圖所示的下拉列表。用戶可以根據(jù)元件的使用情況，選擇是否顯示元件文字和交互內(nèi)容。 為元件添加說明后，單擊該元件，將自動(dòng)在“說明”面板中顯示說明內(nèi)容。頁面說明

56、 設(shè)置自適應(yīng)視圖 早期的輸出終端只有顯示器，而且顯示器屏幕的分辨率基本是一種或者兩種，用戶只需基于某個(gè)特定的尺寸進(jìn)行設(shè)計(jì)就可以了。 隨著移動(dòng)技術(shù)的快速發(fā)展，越來越多的移動(dòng)終端設(shè)備出現(xiàn)了，例如智能手機(jī)、平板電腦等。這些設(shè)備的屏幕尺寸多種多樣，而且由于品牌不同，其顯示屏幕的尺寸也不相同，這給移動(dòng)設(shè)計(jì)師的設(shè)計(jì)工作帶來了更多的難題。 為了使一個(gè)為特定屏幕尺寸設(shè)計(jì)的頁面能夠適合所有屏幕尺寸的終端，則需要對(duì)之前所有的頁面進(jìn)行重新設(shè)計(jì)，還要顧及兼容性的問題和投入大量的人力、物力，而且后續(xù)要對(duì)所有不同屏幕的多個(gè)頁面進(jìn)行同步維護(hù)，這是極大的挑戰(zhàn)。 設(shè)置自適應(yīng)視圖 下圖所示為蘋果手機(jī)和華為手機(jī)的屏幕尺寸對(duì)比。為了

57、滿足頁面原型在不同尺寸終端屏幕上都能正常顯示的需要，Axure RP 9 為用戶提供了自適應(yīng)視圖功能。用戶可以在自適應(yīng)視圖中定義多個(gè)屏幕尺寸，當(dāng)在不同屏幕尺寸上瀏覽時(shí)，頁面的樣式或布局會(huì)自動(dòng)發(fā)生變化。 設(shè)置自適應(yīng)視圖 自適應(yīng)視圖中的元件會(huì)從父視圖中集成樣式（如位置、大?。?。如果修改了父視圖中的按鈕顏色，所有的子視圖中的按鈕顏色會(huì)隨之改變。但如果改變了子視圖中的按鈕顏色，父視圖中的按鈕顏色不會(huì)改變。 單擊“樣式”面板中的“添加自適應(yīng)視圖”選項(xiàng)。彈出“自適應(yīng)視圖”對(duì)話框。 設(shè)置自適應(yīng)視圖 “自適應(yīng)視圖”對(duì)話框中默認(rèn)包含一個(gè)基本的適配選項(xiàng)，通過它可以設(shè)置最基礎(chǔ)的適配尺寸。 單擊“預(yù)設(shè)”選項(xiàng)后面的圖標(biāo)

58、，用戶可以在彈出的下拉列表中選擇系統(tǒng)提供的預(yù)設(shè)尺寸。選擇“iPhone 8（375667）”選項(xiàng)，“自適應(yīng)視圖”對(duì)話框如下圖所示。 設(shè)置自適應(yīng)視圖 單擊“自適應(yīng)視圖”對(duì)話框左上角的“添加”選項(xiàng)，即可添加一種新視圖，新視圖的各項(xiàng)參數(shù)可以在“自適應(yīng)視圖”對(duì)話框的右側(cè)添加。在設(shè)置相似視圖時(shí)，可以先單擊“復(fù)制”選項(xiàng)復(fù)制選中的選項(xiàng)，然后通過修改數(shù)值得到想要的項(xiàng)目，“繼承”文本框?qū)@示當(dāng)前適配選項(xiàng)的來源。 課堂操作 使用各種元件創(chuàng)建下圖所示的頁面效果。單擊“樣式”面板中的“添加自適應(yīng)視圖”選項(xiàng)，單擊彈出的“自適應(yīng)視圖”對(duì)話框中的“添加”，在“預(yù)設(shè)”下拉列表中選擇“iPhone 11 Pro/XR/XS M

59、ax （414896）” 。設(shè)置自適應(yīng)視圖 課堂操作 再次單擊“添加”，在“預(yù)設(shè)”下拉列表中選擇“iPad 4（7681024）”。單擊“確定”按鈕，頁面效果如下圖所示。設(shè)置自適應(yīng)視圖 課堂操作 單擊工作區(qū)頂部的“iPhone 11 Pro/XR/XS Max（414896）”，頁面效果如下圖所示。取消勾選“影響所有視圖”復(fù)選框，調(diào)整元件的大小和分布，頁面效果如下圖所示。設(shè)置自適應(yīng)視圖 課堂操作 單擊工作區(qū)頂部的“iPad 4（7681024）”，調(diào)整元件的大小和分布，頁面效果如下圖所示。 單擊工具欄上的“預(yù)覽”按鈕，在瀏覽器中瀏覽頁面。單擊瀏覽器左上角的“iPad4（768 1024）”選項(xiàng)

60、，在下拉列表中選擇不同的頁面設(shè)置選項(xiàng)，預(yù)覽頁面效果。設(shè)置自適應(yīng)視圖 使用輔助線和網(wǎng)格 為了方便用戶設(shè)計(jì)制作產(chǎn)品原型，Axure RP 9 為用戶提供了標(biāo)尺、輔助線和網(wǎng)格等輔助工具。合理使用這些工具，用戶可以及時(shí)、準(zhǔn)確地完成產(chǎn)品原型設(shè)計(jì)工作。 執(zhí)行“視圖標(biāo)尺 網(wǎng)格 輔助線輔助線設(shè)置”命令或在頁面中單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“標(biāo)尺 網(wǎng)格 輔助線輔助線設(shè)置”命令，彈出“偏好設(shè)置”對(duì)話框。 默認(rèn)情況下，輔助線顯示在頁面的頂層，勾選“底層顯示輔助線”復(fù)選框，輔助線將顯示在頁面的底層 。 使用輔助線和網(wǎng)格 勾選“始終在標(biāo)尺中顯示位置”復(fù)選框，工作界面的標(biāo)尺上將自動(dòng)顯示輔助線的坐標(biāo)。用戶可以根據(jù)需