Axure

RP

10互聯(lián)網(wǎng)產(chǎn)品原型設(shè)計(微課版)目錄Contents了解互聯(lián)網(wǎng)產(chǎn)品原型設(shè)計1了解AxureRP102頁面管理與自適應(yīng)視圖3使用元件和元件庫4元件的樣式和交互5使用母版和動態(tài)面板6變量與表達式7函數(shù)的使用8使用中繼器9團隊合作與輸出設(shè)計制作網(wǎng)頁原型設(shè)計制作App原型10111201了解互聯(lián)網(wǎng)產(chǎn)品原型設(shè)計1.1什么是原型設(shè)計產(chǎn)品原型是通過線條、圖形注釋和標(biāo)注等方式描繪出的產(chǎn)品初步框架；原型設(shè)計是綜合考慮產(chǎn)品目標(biāo)、功能需求場景、用戶體驗等因素后，對產(chǎn)品的各板塊、界面和元素進行合理排序和布局的過程。對互聯(lián)網(wǎng)行業(yè)來說，原型設(shè)計就是將頁面模塊、各種元素進行排版和布局，以獲得頁面的草圖效果，如圖所示。為了使頁面效果更加具體、形象和生動，還可以加入一些交互性元素，模擬頁面的交互效果，如圖所示。提示：隨著互聯(lián)網(wǎng)技術(shù)的普及，為了獲得更好的原型效果，很多產(chǎn)品經(jīng)理都采用高保真原型，以確保策劃效果與最終的展示效果一致。1.2原型設(shè)計的參與者

一個項目的設(shè)計開發(fā)通常需要多人的共同努力。很多人認為產(chǎn)品原型設(shè)計是整個項目的早期過程，只需要產(chǎn)品經(jīng)理參與即可。但實際上產(chǎn)品經(jīng)理只了解產(chǎn)品特性、用戶和市場需求，對頁面設(shè)計和用戶體驗設(shè)計則通常不太了解。而設(shè)計師獨立創(chuàng)作的產(chǎn)品，會使得產(chǎn)品經(jīng)理和設(shè)計師在后期反復(fù)商討、反復(fù)修改。為了避免產(chǎn)品設(shè)計開發(fā)過程中反復(fù)修改的情況發(fā)生，在開始進行原型設(shè)計時，產(chǎn)品經(jīng)理應(yīng)邀請用戶界面（UI）設(shè)計師和用戶體驗（UE）設(shè)計師一起參與產(chǎn)品原型的設(shè)計制作，如圖所示。這樣才能設(shè)計出既符合產(chǎn)品經(jīng)理預(yù)期，又能帶來良好用戶體驗且頁面精美的產(chǎn)品原型。提示：互聯(lián)網(wǎng)產(chǎn)品經(jīng)理在互聯(lián)網(wǎng)公司中處于核心位置，需要有非常強的溝通能力、協(xié)調(diào)能力、市場洞察力和非常高的商業(yè)敏感度。其不但要了解消費者、了解市場，還要能與各種風(fēng)格的團隊配合?？梢哉f互聯(lián)網(wǎng)產(chǎn)品經(jīng)理能力的高低決定了一款互聯(lián)網(wǎng)產(chǎn)品的成敗。紙質(zhì)Word和Visio原型設(shè)計軟件1.3如何創(chuàng)建產(chǎn)品原型設(shè)計師可以使用筆直接在紙上繪制產(chǎn)品原型，設(shè)計大致的產(chǎn)品效果。這種方式通常是產(chǎn)品經(jīng)理在進行原型構(gòu)思的階段使用。由于Word和Visio在原型設(shè)計方面還有一些局限性，通常只使用它們繪制原型的線框圖。如圖1-8所示為AxureRP10的啟動圖標(biāo)和工作界面。高保真產(chǎn)品原型真實地模擬了產(chǎn)品最終的視覺效果、交互效果和用戶體驗，非常接近真實的產(chǎn)品，甚至包含產(chǎn)品的細節(jié)、真實的交互和UI等。如圖所示為使用AxureRP10完成的高保真App產(chǎn)品界面。原型設(shè)計是設(shè)計師實現(xiàn)產(chǎn)品最終標(biāo)準(zhǔn)化和系統(tǒng)化的有效且重要手段。它最大的好處在于，可以有效地避免重要元素被忽略，也可以防止設(shè)計師做出不準(zhǔn)確、不合理的假設(shè)。1.4原型設(shè)計的必要性和作用1.4.1原型設(shè)計的必要性提示：無論是對于移動端的UI設(shè)計還是PC端的網(wǎng)頁設(shè)計，原型設(shè)計的重要性都是顯而易見的。原型設(shè)計讓設(shè)計師和開發(fā)者將產(chǎn)品的基本概念和構(gòu)想形象化地呈現(xiàn)出來，讓參與進來的每個人都可以查看、使用，并給予反饋。而且，在產(chǎn)品最終版本確定之前可以隨時進行必要的調(diào)整。在項目開始之初，對每個元素進行調(diào)試以確保它們能夠如同預(yù)期一樣運作是相當(dāng)重要的步驟。當(dāng)完成可交互的高保真產(chǎn)品原型設(shè)計之后，設(shè)計師可以將它作為一個成型的界面來使用，測試模型中所有的功能，確認其能否解決規(guī)劃階段所計劃解決的問題。如果沒有使用產(chǎn)品原型，而是在完成項目整體的設(shè)計和開發(fā)之后進行測試，那么修改和調(diào)整的成本就相當(dāng)高昂了。1.4原型設(shè)計的必要性和作用1.4.1原型設(shè)計的必要性提示：一個可用、可交互的產(chǎn)品原型所帶來的好處并不是一星半點的，它還可以幫助開發(fā)和設(shè)計人員從不同的維度規(guī)劃和設(shè)計產(chǎn)品。產(chǎn)品原型可以使產(chǎn)品的開發(fā)變得更加容易。當(dāng)在一個項目中設(shè)計出滿意的產(chǎn)品原型之后，參與者能夠清楚項目發(fā)布之后的運作流程，開發(fā)人員也能夠在此基礎(chǔ)上開發(fā)出更加完善的代碼方案。1.讓開發(fā)變得輕松當(dāng)一個公司想要推出一款新的App或者發(fā)布一個新的網(wǎng)站時，總會集合一批專業(yè)的人士來完成這個項目。隨著時間的推移，花銷會不斷地增加，項目上的投入自然也越來越多。有了產(chǎn)品原型之后，團隊成員能夠圍繞產(chǎn)品原型進行快速且高效的溝通，從而明確哪些地方要增刪、哪些細節(jié)要修改，這樣能夠更加快速地推進項目進度。2.節(jié)省時間和金錢有了產(chǎn)品原型之后，團隊成員在溝通的時候就不需要彼此發(fā)送大量的圖片和PDF文檔了。取而代之的是添加評論和鏈接，或者使用原型工具內(nèi)置的反饋工具進行溝通，這樣溝通的效率提高了，產(chǎn)品原型的修訂速度也更快了。3.更易溝通于反饋1.4.2原型設(shè)計的作用自己喜歡的東西并不一定別人也喜歡，例如網(wǎng)頁的色彩應(yīng)用，設(shè)計師可能喜歡大紅大綠，并且其設(shè)計的作品中充斥著這樣的顏色，那么網(wǎng)站可能會丟失很多潛在用戶。原因很簡單，即跳躍的色彩會讓部分用戶失去對網(wǎng)站的信任。現(xiàn)在大部分的用戶都喜歡簡單的顏色。設(shè)計師可以先瀏覽其他設(shè)計師的作品，再進行設(shè)計，以制定出更符合大眾審美的設(shè)計方案。1.設(shè)計時規(guī)避自己的個人喜好設(shè)計師需要讓不同類型的用戶在網(wǎng)頁上達成一致的意見，也就是常說的“老少皆宜”。只有抓住了不同類型用戶共同的心理特征，吸引了更多新的用戶，才能說明設(shè)計是成功的。想要了解人們的瀏覽習(xí)慣其實很簡單，只要想想周圍的人共同關(guān)注的東西就明白了。2.考慮不同類型的用戶設(shè)計師平時應(yīng)多了解競爭對手的網(wǎng)站項目，總結(jié)出競爭對手項目的優(yōu)缺點，并避開競爭對手的優(yōu)勢項目，以他們的不足為突破口，這樣才會吸引更多用戶的注意。也就是說，要把競爭對手的劣勢轉(zhuǎn)換為自己的優(yōu)勢，然后突出展現(xiàn)給用戶。這一點更易在網(wǎng)站項目中實現(xiàn)。3.充分分析競爭對手1.4.3原型設(shè)計的要點“1.5原型設(shè)計中的用戶體驗1.5.1用戶體驗包含的內(nèi)容01品牌品牌對于任何一件展示在大眾面前的事物都有很強的影響力，沒有品牌的產(chǎn)品很難受到歡迎。同樣，對于一個網(wǎng)站來說，良好的品牌也是其成功的決定性因素。樹立網(wǎng)站品牌有兩個要素：類型獨一無二和內(nèi)容豐富、更新及時，如圖所示?！?.5原型設(shè)計中的用戶體驗1.5.1用戶體驗包含的內(nèi)容01品牌

網(wǎng)頁設(shè)計的優(yōu)劣對于人們是否能記住網(wǎng)站有著非常重要的作用，適當(dāng)?shù)厥褂脠D片、動畫等對于改善網(wǎng)頁效果是很有幫助的?！?.5原型設(shè)計中的用戶體驗1.5.1用戶體驗包含的內(nèi)容02實用性

用戶在瀏覽網(wǎng)頁時，偶爾會遇到瀏覽器狀態(tài)欄中顯示網(wǎng)頁上有錯誤的提示。這種情況一般不會影響用戶正常瀏覽網(wǎng)頁。但如果錯誤太明顯，則可能直接影響到網(wǎng)頁的重要功能的使用。這會直接對網(wǎng)站的品牌造成影響。網(wǎng)站可以在最短的時間內(nèi)獲取到用戶所查詢的信息，并反饋給用戶。程序開發(fā)過程中的用戶反饋。例如經(jīng)?？梢钥吹降木W(wǎng)頁上的“提交成功”信息或者收到其他網(wǎng)站的更新情況的郵件等。網(wǎng)站對用戶個人信息的隱私保護策略。隱私保護策略對提高用戶對網(wǎng)站的信任度很有幫助。線上線下結(jié)合。最簡單的例子就是團購、眾籌。好的網(wǎng)站后臺管理程序。好的網(wǎng)站后臺管理程序可以幫助網(wǎng)站管理員更快地完成對網(wǎng)站內(nèi)容的修改與更新。網(wǎng)站的功能性包含以下內(nèi)容。03功能性1.5.1用戶體驗包含的內(nèi)容“1.5原型設(shè)計中的用戶體驗1.5.1用戶體驗包含的內(nèi)容04內(nèi)容

如果說網(wǎng)站的技術(shù)構(gòu)成是一個網(wǎng)站的“骨架”，那么內(nèi)容就是網(wǎng)站的“血肉”了。內(nèi)容不僅包括網(wǎng)站中的可讀性內(nèi)容，還包括鏈接組織和導(dǎo)航組織等方面。這也是一個網(wǎng)站用戶體驗的關(guān)鍵部分。也就是說，網(wǎng)站中除了要有豐富的內(nèi)容外，還要有方便、快捷和合理的鏈接和導(dǎo)航。綜上所述，如果能從用戶體驗的角度優(yōu)化網(wǎng)站，就可以讓網(wǎng)站更受大眾的歡迎。1.5原型設(shè)計中的用戶體驗

從用戶體驗的過程來說，設(shè)計師總期望體驗是一個循環(huán)的、長期的過程，而不是直線的、一次性的過程。好的用戶體驗?zāi)軌蛭脩?，讓用戶再次使用網(wǎng)站，并逐步提高對網(wǎng)站的忠誠度，最后告知并影響他們的朋友；而不好的用戶體驗則會使網(wǎng)站逐漸失去用戶，甚至?xí)捎诓涣伎诒畟鞑ナヒ慌鷿撛诘挠脩?。提示：具有良好用戶體驗的網(wǎng)站，即使頁面中存在一些交互問題，也不會影響用戶繼續(xù)支持該網(wǎng)站。1.5.2用戶體驗的生命周期用戶體驗的生命周期分為吸引、熟悉、交互、保持和擁護5個階段。吸引用戶體驗的生命周期網(wǎng)站吸引人是用戶體驗的第1步，網(wǎng)站靠什么吸引人是用戶體驗設(shè)計首先要考慮的問題。吸引用戶是否對網(wǎng)站產(chǎn)生忠誠度并向身邊的人推薦該網(wǎng)站，也是用戶體驗設(shè)計的關(guān)鍵點。擁抱通過明喻和隱喻等設(shè)計語義，讓用戶在不看說明書的前提下可以輕松訪問網(wǎng)站，并進一步熟悉網(wǎng)站。熟悉在用戶與網(wǎng)站的交互過程中，用戶的感覺如何、是否滿足了用戶的生理和心理需要，充分驗證了網(wǎng)站的可用性。交互熟悉交互保持擁護保持用戶訪問網(wǎng)站后，是繼續(xù)使用網(wǎng)站還是放棄使用？01感覺需求指的是用戶對于產(chǎn)品在感官方面的需求，包括視覺、聽覺、觸覺、嗅覺和味覺方面的需求，是對產(chǎn)品或系統(tǒng)的第一感覺。對于網(wǎng)站來說，用戶通常只有視覺、聽覺兩方面的需求。感覺需求02交互需求指的是人與網(wǎng)站系統(tǒng)進行交互的過程中的需求，包括完成任務(wù)的時間和效率、過程是否順暢、是否報錯等。網(wǎng)站的可用性關(guān)注的是用戶的交互需求，包括操作時的學(xué)習(xí)性、效率性、記憶性、容錯率和滿意度等。交互需求關(guān)注的是交互過程是否順暢，用戶是否可以簡單、快捷地完成任務(wù)。交互需求1.5.3用戶體驗的需求層次用戶體驗可以分為5個需求層次：感覺需求→交互需求→情感需求→社會需求→自我需求，這5個需求層次是逐層遞進的。03情感需求情感需求指的是用戶在操作瀏覽的過程中產(chǎn)生的情感，例如在瀏覽的過程中感受到的互動性和樂趣。情感需求的關(guān)鍵在于頁面的設(shè)計感、故事感、交互感、娛樂感和意義感，頁面要對用戶有足夠的吸引力。04在滿足基本的感覺需求、交互需求和情感需求后，用戶通常會有更高層次的需求，希望得到社會對自己的認可。例如越來越多的人選擇開通個人微博、拍攝短視頻，希望以此獲得社會的關(guān)注。社會需求05自我需求1.5.3用戶體驗的需求層次用戶體驗可以分為5個需求層次：感覺需求→交互需求→情感需求→社會需求→自我需求，這5個需求層次是逐層遞進的。自我需求指的是網(wǎng)站滿足用戶自我個性的需求，包括追求新奇、個性和自我實現(xiàn)等。對于網(wǎng)頁設(shè)計來說，需要考慮允許用戶進行個性化定制設(shè)計或者自適應(yīng)設(shè)計，以滿足不同用戶多樣化、個性化的需求。例如網(wǎng)站允許用戶更改網(wǎng)頁背景顏色、背景圖片和文字大小等，這些都屬于頁面定制。1.

優(yōu)化大腦，提高溝通效率2．防止記憶或溝通方面的遺漏3．讓思路變得有條理1.6思維導(dǎo)圖與原型設(shè)計1.6.1思維導(dǎo)圖的作用圓圈圖由不同大小的圓圈組合而成，位于中間部分的圓圈是中心主題，一般會大一點，四周的圓圈是分支主題，稍微小一點，使用圓圈圖可以培養(yǎng)想象力以及聯(lián)想力。1.圓圈圖1.6思維導(dǎo)圖與原型設(shè)計1.6.2思維導(dǎo)圖的基本類型氣泡圖包括單氣泡圖和雙氣泡圖。單氣泡圖由很多圓圈圍繞中心主題所建立；雙氣泡圖由兩個氣泡思維導(dǎo)圖組合而成，中間的部分是兩個思維導(dǎo)圖重合的部分，也就是總結(jié)內(nèi)容時兩個關(guān)鍵詞都具備的特性。2.氣泡圖樹狀圖就如同一棵大樹，該類型的思維導(dǎo)圖主要適用于對知識點進行歸納，可以在后期使用的時候清晰地展現(xiàn)要點。3.樹狀圖1.6思維導(dǎo)圖與原型設(shè)計1.6.2思維導(dǎo)圖的基本類型橋形圖是一種類比圖，其整體造型和橋梁很像，水平與凸起部分具有相關(guān)性。4.橋型圖5.括號圖1.6思維導(dǎo)圖與原型設(shè)計1.6.2思維導(dǎo)圖的基本類型魚骨圖也是思維導(dǎo)圖的一種，只是魚骨圖多用于講解某件事情或者是解決問題的方法。不同于其他思維導(dǎo)圖圍繞中心主題進行搭建，魚骨圖主要按照先后順序分析事物的發(fā)展?fàn)顩r以及內(nèi)在邏輯。6.魚骨圖括號圖與樹狀圖的功能相似，也常用于對知識點進行歸納，利用花括號可以對不同的主題進行詳細講解。1.7思維導(dǎo)圖軟件介紹

MindMeister是一款典型的思維導(dǎo)圖軟件，功能非常完善。作為一款在線頭腦風(fēng)暴應(yīng)用軟件，MindMeister以協(xié)作為設(shè)計理念，能實時更新，可跨地點、多設(shè)備共享思維，在團隊共創(chuàng)方面表現(xiàn)突出。用戶可以打開MindMeister的官方網(wǎng)站，如圖所示。用戶注冊并登錄后，即可開始繪制思維導(dǎo)圖。1.7.1MindMeister1.7思維導(dǎo)圖軟件介紹

XMind是一款非常易用的軟件，用戶通過XMind可以隨時開展頭腦風(fēng)暴，它能幫助用戶快速厘清思路。XMind繪制的思維導(dǎo)圖、魚骨圖、二維圖、樹狀圖、邏輯圖、組織結(jié)構(gòu)圖等以結(jié)構(gòu)化的方式展示具體的內(nèi)容。用戶在用XMind繪制圖形的時候，可以時刻保持頭腦清醒，隨時把握計劃或任務(wù)的全局。XMind可以幫助用戶在學(xué)習(xí)和工作中提高效率。

1.7.2XMind用戶可以在XMind和XMindZEN兩個版本中選擇，兩者沒有本質(zhì)的區(qū)別，XMindZEN是在XMind基礎(chǔ)上重新設(shè)計的版本，不但具備XMind全面的思維導(dǎo)圖功能，還有重新設(shè)計的界面和交互方式。課堂操作安裝并使用XmindZEN01.打開瀏覽器，在瀏覽器地址欄中輸入XMind官方網(wǎng)址，單擊頁面中的“免費下載Windows版”按鈕，如圖所示。下載完成后，雙Xmind-ZEN.exe文件，彈出“XmindZEN安裝”對話框，如圖所示。課堂操作安裝并使用XmindZEN02.稍等片刻即可完成軟件的安裝，在彈出如圖所示的新建文件界面中，選擇一種樣式后單擊“創(chuàng)建”按鈕，進入XmindZEN工作界面，如圖所示。課堂操作安裝并使用XmindZEN03.選中主題并修改文本，如圖所示。選中子主題并修改文本，如圖所示。課堂操作安裝并使用XmindZEN04.選中“會員系統(tǒng)”子主題，向左側(cè)拖曳，效果如圖所示。單擊選中主題，單擊軟件頂部的“子主題”按鈕，添加子主題，效果如圖所示。1.7思維導(dǎo)圖軟件介紹

MindManager是一款國際化的商業(yè)思維導(dǎo)圖軟件，是創(chuàng)造、管理和交流思想的工具，利用該軟件可添加圖像、視頻、超鏈接和附件。MindManager提供了友好、直觀的用戶界面，可協(xié)助用戶快速記錄靈感和想法，能有序地把用戶的思維、資源、管理項目和項目進程組織為一個整體，極大地提高用戶的工作效率。如圖所示為MindManager的工作界面。MindManager與同類思維導(dǎo)圖軟件相比最大的優(yōu)勢是能同MicrosoftOffice無縫集成，能夠快速將數(shù)據(jù)導(dǎo)入或?qū)С龅絎ord、PowerPoint、Excel、Outlook、Project和Visio等軟件中，因此其受到越來越多的職場人士的青睞。1.7.3MindManager1.8總結(jié)擴展1.8.1本章小結(jié)本章主要講解了互聯(lián)網(wǎng)產(chǎn)品原型設(shè)計的相關(guān)知識，對原型設(shè)計的概念和原型的創(chuàng)建方式進行了詳細的介紹，同時講解了原型設(shè)計與用戶體驗的關(guān)系，幫助讀者理解用戶體驗設(shè)計的重要性和設(shè)計要點，并對原型設(shè)計中思維導(dǎo)圖的使用進行了剖析，為制作符合用戶要求的產(chǎn)品原型打下基礎(chǔ)。1.8總結(jié)擴展1.8.2素養(yǎng)拓展通過本章內(nèi)容，讓讀者了解互聯(lián)網(wǎng)產(chǎn)品原型設(shè)計的相關(guān)知識，通過實際互聯(lián)網(wǎng)產(chǎn)品設(shè)計案例，培養(yǎng)讀者的動手能力和創(chuàng)新思維，提高讀者的合作競爭意識。同時，讓讀者了解我國互聯(lián)網(wǎng)產(chǎn)品的發(fā)展過程與現(xiàn)狀，增強讀者的民族自信、文化自信、職業(yè)道德和個人修養(yǎng)。1.8總結(jié)擴展1.8.3課后練習(xí)—完成創(chuàng)意家居App的思維導(dǎo)圖

01.啟動XMindZEN軟件并完成項目的二級功能，如圖所示。02.根據(jù)項目的需求，完成“購物系統(tǒng)”功能的思維導(dǎo)圖，如圖所示。1.8總結(jié)擴展1.8.3課后練習(xí)—完成創(chuàng)意家居App的思維導(dǎo)圖

03.根據(jù)項目的需求，完成“會員系統(tǒng)”功能的思維導(dǎo)圖，如圖所示。

04.根據(jù)項目的需求，完成“設(shè)計師系統(tǒng)”功能的思維導(dǎo)圖，如圖所示。12431.9課后測試1.9.1選擇題1．下列選項中不能用于產(chǎn)品原型設(shè)計的是（）。A．WordB．VisioC．AxureD．Excel2．下列選項中不屬于原型設(shè)計作用的是（）。A．讓開發(fā)變得輕松B．節(jié)省時間和金錢C．更易溝通與反饋D．能完成產(chǎn)品的上傳3．可以把用戶體驗分為（）個需求層次，用來幫助設(shè)計師更好地解決問題。A．5B．4C．3D．64．對于一個剛剛打開網(wǎng)站的用戶，要確保其能夠找到自己感興趣的內(nèi)容，通常不需要了解的內(nèi)容是（）。A．身在何處B．要尋找的內(nèi)容在哪里C．怎樣才能得到這些內(nèi)容D．怎樣進入網(wǎng)站1.9課后測試1.9.2填空題1．在設(shè)計原型的時候，為了更好地表現(xiàn)網(wǎng)站內(nèi)容并吸引更多的用戶，設(shè)計師需要注意

、

和

。2．用戶體驗一般包含

、

、

和

4個方面。3．用戶體驗的生命周期分為

、

、

、

和

5個階段。4．用戶體驗可以分為5個需求層次：

→

→

→

→

，這5個需求層次是逐層遞進的。5．思維導(dǎo)圖是一種圖像式思考的輔助工具，使用起來較為簡單但很有效，可將思維形象化，通過

的發(fā)散形式將思路變得更有條理和更深入。1.9課后測試1.9.2操作題使用XMindZEN繪制一款體育社交App的思維導(dǎo)圖。謝謝觀賞Axure

RP

10匯報人：互聯(lián)網(wǎng)產(chǎn)品原型設(shè)計(微課版)目錄Contents了解互聯(lián)網(wǎng)產(chǎn)品原型設(shè)計1了解AxureRP102頁面管理與自適應(yīng)視圖3使用元件和元件庫4元件的樣式和交互5使用母版和動態(tài)面板6變量與表達式7函數(shù)的使用8使用中繼器9團隊合作與輸出設(shè)計制作網(wǎng)頁原型設(shè)計制作App原型10111202了解AxureRP102.1AxureRP10簡介作為專門的產(chǎn)品原型設(shè)計工具，AxureRP比一般的創(chuàng)建靜態(tài)產(chǎn)品原型的工具，如Visio、OmniGraffle、Illustrator、Photoshop、Dreamweaver、VisualStudio、Fireworks更便捷、高效。AxureRP10的工作界面如圖所示。AxureRP10為用戶提供了淺色和深色兩種工作界面外觀模式，用戶可以根據(jù)個人的喜好選擇。提示：深色模式的工作界面外觀更有利于將用戶的注意力集中在原型制作上。但是為了獲得更好的印刷效果、便于讀者閱讀，本書截圖將采用淺色模式的工作界面外觀。2.1AxureRP10簡介默認情況下，AxureRP10使用淺色模式作為工作界面外觀，執(zhí)行“文件＞備份設(shè)置”命令，彈出“偏好設(shè)置”對話框，如圖所示。在“畫布”選項卡中的“外觀”下拉列表中選擇“深色模式”選項，如圖所示。2.1AxureRP10簡介

此時“偏好設(shè)置”對話框的效果如圖所示，單擊“完成”按鈕，完成更改工作界面外觀為深色模式的操作，工作界面外觀效果如圖所示。

在開始使用AxureRP10之前，需要先將AxureRP10軟件安裝到本地計算機中，用戶可以通過官方網(wǎng)站下載所需版本的軟件，如圖所示。2.2軟件的下載、安裝、漢化與啟動2.2.1下載并安裝AxureRP10提示：不建議用戶從第三方下載軟件，因為除了有可能會被捆綁下載很多垃圾軟件外，還有可能使計算機感染病毒。AxureRP10沒有發(fā)布中文版本，用戶可以下載漢化包實現(xiàn)對軟件的漢化。課堂操作安裝Axure

RP

1001.在下載的文件夾中雙擊AxureRP-Setup.exe文件，彈出“AxureRP10Setup”對話框，如圖所示。單擊“Next”（下一步）按鈕，進入圖所示對話框，認真閱讀協(xié)議后，勾選“IacceptthetermsintheLicenseAgreement”（我接受許可協(xié)議的條款）復(fù)選框。課堂操作安裝Axure

RP

1002.單擊“Next”（下一步）按鈕，進入如圖所示對話框，設(shè)置安裝地址。單擊“Change...”（改變）按鈕可以更改軟件的安裝地址。單擊“Next”（下一步）按鈕，進入如圖所示對話框，準(zhǔn)備開始安裝軟件。課堂操作安裝Axure

RP

1003.單擊“Install”（安裝）按鈕，開始安裝軟件，如圖所示。稍等片刻，單擊“Finish”（完成）按鈕，即可完成軟件的安裝，如圖所示。如果勾選“LaunchAxureRP10”（打開AxureRP10）復(fù)選框，則在完成軟件安裝后將立即啟動軟件。課堂操作安裝Axure

RP

1004.軟件安裝完成后，用戶可在桌面上找到AxureRP10的啟動圖標(biāo)，如圖所示。用戶也可以在“開始”菜單中找到AxureRP10的啟動選項，如圖所示。

用戶可以通過互聯(lián)網(wǎng)獲得AxureRP10的漢化包，下載的漢化包通常包含1個lang文件夾和1個說明文件，解壓后如圖所示。將該文件夾直接復(fù)制到AxureRP10的安裝目錄下，重新啟動軟件，即可完成軟件的漢化。2.2軟件的下載、安裝、漢化與啟動2.2.2漢化與啟動AxureRP10提示：用戶如果在軟件啟動時沒有完成授權(quán)操作，可以執(zhí)行“幫助＞管理授權(quán)”命令，打開“管理授權(quán)”對話框，完成軟件的授權(quán)操作。漢化完成后，用戶可以雙擊桌面上的啟動圖標(biāo)或單擊“開始”菜單中的啟動選項啟動軟件，軟件啟動后的工作界面如圖所示。通常在第1次啟動AxureRP10時，系統(tǒng)會自動彈出“創(chuàng)建賬號”對話框，如圖所示，要求用戶輸入賬號和密碼。用戶登錄賬號后可以通過訂閱付費的方式獲得使用權(quán)限，取消了終身授權(quán)模式，支持按月購買或者按年購買。如果用戶沒有訂閱軟件，則只能試用30天，30天后將無法正常使用。2.2軟件的下載、安裝、漢化與啟動2.2.2漢化與啟動AxureRP10

使用AxureRP10可以快速繪制樹狀的網(wǎng)站構(gòu)架圖，而且可以讓網(wǎng)站構(gòu)架圖中的每一個頁面節(jié)點直接鏈接到對應(yīng)網(wǎng)頁，如圖所示。2.3AxureRP10的主要功能2.3.1繪制網(wǎng)站構(gòu)架圖AxureRP10中有許多會經(jīng)常使用的元件，例如按鈕、圖片、文本、水平線和下拉列表等，使用這些元件可以輕松地繪制各種示意圖，如圖所示。2.3AxureRP10的主要功能2.3.2繪制示意圖

AxureRP10提供了豐富的流程圖元件，用戶可以使用AxureRP10很容易地繪制出流程圖，并可以輕松地在流程圖元件之間加入連接線并設(shè)定連接的格式，如圖

所示。2.3AxureRP10的主要功能2.3.3繪制流程圖

AxureRP10可以模擬實際操作中的交互效果。通過“交互編輯器”對話框中的各項動作，可以快速地為元件添加一個或多個事件并產(chǎn)生動作，包括單擊、滾動到元件等，如圖所示。2.3AxureRP10的主要功能2.3.4實現(xiàn)交互設(shè)計

AxureRP10可以將線框圖直接輸出成適合IE或火狐等不同瀏覽器的HTML項目。2.3AxureRP10的主要功能2.3.5輸出網(wǎng)站原型2.3.5輸出Word格式的規(guī)格文件

AxureRP10可以輸出Word格式的規(guī)格文件，文件包含目錄，網(wǎng)頁清單，網(wǎng)頁，附有注解的原版、注釋、交互和元件特定的信息，以及結(jié)尾文件（如附錄）。規(guī)格文件的內(nèi)容與格式也可以依據(jù)不同的閱讀對象進行變更。2.4熟悉AxureRP10的工作界面

相對于AxureRP9來說，AxureRP10的工作界面發(fā)生了較大的變化，精簡了很多區(qū)域，操作起來更簡單、更直接，方便用戶使用。AxureRP10工作界面中的各區(qū)域如圖所示。文件菜單編輯菜單視圖菜單2.4.1菜單欄菜單欄位于工作界面的上方，按照功能劃分為9個菜單，每個菜單中包含相應(yīng)的操作命令，如圖所示。用戶可以根據(jù)要執(zhí)行的操作的類型在對應(yīng)的菜單下選擇操作命令。該菜單下的命令可以實現(xiàn)對文件的基本操作，例如新建、打開、保存和打印等。該菜單下包含軟件操作過程中的一些編輯命令，例如復(fù)制、粘貼、全選和刪除等。該菜單下包含與軟件視圖顯示相關(guān)的所有命令，例如工具欄、面板和顯示背景等。項目菜單布局菜單發(fā)布菜單2.4.1菜單欄菜單欄位于工作界面的上方，按照功能劃分為9個菜單，每個菜單中包含相應(yīng)的操作命令，如圖所示。用戶可以根據(jù)要執(zhí)行的操作的類型在對應(yīng)的菜單下選擇操作命令。該菜單下主要包含與項目有關(guān)的命令，例如元件樣式管理器、全局變量和自適應(yīng)視圖預(yù)設(shè)等。該菜單下主要包含與頁面布局有關(guān)的命令，例如對齊、組合、分布和鎖定等。該菜單下主要包含與原型發(fā)布有關(guān)的命令，例如預(yù)覽、預(yù)覽選項和生成HTML文件等。團隊菜單賬號菜單幫助菜單2.4.1菜單欄菜單欄位于工作界面的上方，按照功能劃分為9個菜單，每個菜單中包含相應(yīng)的操作命令，如圖所示。用戶可以根據(jù)要執(zhí)行的操作的類型在對應(yīng)的菜單下選擇操作命令。該菜單下主要包含與團隊協(xié)作相關(guān)的命令，例如從當(dāng)前文件創(chuàng)建團隊項目等。該菜單下的命令可以幫助用戶登錄其Axure的個人賬號，并獲得Axure的專業(yè)服務(wù)。該菜單下主要包含與幫助有關(guān)的命令，例如在線培訓(xùn)、查找在線幫助等?！?.4.2工具欄AxureRP10中的工具欄由主工具欄和樣式工具欄兩部分組成，如圖所示。下面對每個主工具進行簡單介紹，關(guān)于每個主工具的具體使用方法，將在本書后文詳細講解。選擇：用戶可以使用“選擇相交”和“選擇包含”兩種選擇模式選擇對象。在“選擇相交”模式下，只要選取框與對象交叉，對象即可被選中。在“選擇包含”模式下，只有選取框?qū)ο笕堪瑫r，對象才能被選中。2.4.2工具欄連接：使用該工具可以將各流程圖元件連接起來，形成完整的流程圖，如圖所示。插入：該工具組包括基本形狀、文本、表單文件、動態(tài)元件和鋼筆5個欄目圖標(biāo)，圖標(biāo)右側(cè)有向下箭頭時，表示該圖標(biāo)下還有其他工具。單擊向下箭頭，即可彈出如圖所示的下拉列表。選擇任意選項，即可將其插入原型中。使用“文本”工具可以在原型中輸入文本；使用“鋼筆”工具可以在原型中繪制自定義圖形。控制點：使用“鋼筆”工具繪制圖形或?qū)⒃D(zhuǎn)換為自定義形狀后，使用該工具可以調(diào)整圖形的錨點，以獲得更多的圖形效果。2.4.2工具欄置頂：當(dāng)頁面中有兩個以上的元件時，可以單擊該按鈕，將選中的元件移動到其他元件頂部。置底：當(dāng)頁面中有兩個以上的元件時，可以單擊該按鈕，將選中的元件移動到其他元件底部。組合：同時選中多個元件后，單擊該按鈕，可以將多個元件組合成一個元件。取消組合：單擊該按鈕可以取消組合操作，組合對象中的每一個元件將變回單個對象。縮放：在此下拉列表中，用戶可以選擇視圖的縮放比例，以查看不同尺寸的文件效果，縮放比例范圍為10%～400%。對齊：同時選中兩個以上的元件后，可以在該選項組中選擇不同的對齊方式對齊元件，如圖所示。分布：同時選中3個以上的元件后，可以在該選項組中選擇水平分布或垂直分布的方式分布元件，如圖所示。2.4.2工具欄預(yù)覽：單擊該按鈕，將自動生成HTML預(yù)覽文件。共享：單擊該按鈕，將彈出“發(fā)布項目”對話框，在該對話框中輸入信息后單擊“發(fā)布”按鈕，會自動將項目發(fā)布到AxureCloud上，并且用戶會獲得一個Axure提供的地址，以方便用戶在不同設(shè)備上測試效果，如圖所示。登錄：如果用戶已經(jīng)登錄，單擊該按鈕將彈出“管理賬號”面板，如圖所示。如果用戶未登錄，單擊該按鈕將彈出“創(chuàng)建賬號”對話框，用戶可以選擇（輸入）郵箱和密碼登錄或者注冊一個新賬號。登錄后能獲得更多官方的制作素材和技術(shù)支持?！?.4.2工具欄

在AxureRP10工作界面的左上角，除了AxureRP10的圖標(biāo)外，還有“保存”“撤銷”“重做”3個常用操作按鈕，如圖所示。保存：單擊該按鈕即可保存當(dāng)前文檔。撤銷：單擊該按鈕將撤銷上一步操作。重做：單擊該按鈕將再次執(zhí)行上一次操作?！?.4.3面板AxureRP10一共為用戶提供了7個功能面板，分別是頁面、大綱、元件庫、母版、樣式、交互和注釋。默認情況下，這7個面板分為兩組，分別排列于工作區(qū)的兩側(cè)，如圖所示。2.4.3面板頁面：在該面板中可以完成有關(guān)頁面的所有操作，例如新建頁面、刪除頁面和查找頁面等，如圖所示。大綱：該面板中主要顯示當(dāng)前文件中的所有元件，如圖所示。用戶可以很方便地在該面板中找到元件并對其進行各種操作。元件庫：該面板中包含AxureRP10的所有元件，如圖所示。用戶還可以在該面板中完成元件庫的創(chuàng)建、下載和載入。母版：該面板用來顯示頁面中所有的母版文件，如圖所示。用戶可以在該面板中完成有關(guān)母版的各種操作。2.4.3面板樣式：大部分元件的效果樣式設(shè)置都在該面板中完成，如圖所示，該面板中的內(nèi)容會根據(jù)當(dāng)前所選內(nèi)容發(fā)生改變。交互：用戶可以在該面板中為元件添加各種交互效果，如圖所示。注釋：在該面板中可以為元件添加說明，能幫助用戶理解原型的功能，如圖所示。2.4.3面板“在面板名稱上雙擊或者單擊面板右上角的“折疊”按鈕，即可實現(xiàn)面板的展開和收縮，如圖所示。這樣便于用戶在不同情況下最大化地顯示某個面板。用戶可以拖曳面板組的邊界，任意調(diào)整面板的寬度，以獲得滿意的視圖效果，如圖所示。2.4.3面板“將鼠標(biāo)指針移動到面板名稱處，按住鼠標(biāo)左鍵拖曳，即可將面板轉(zhuǎn)換為浮動狀態(tài)，如圖所示。拖曳一個浮動面板到另一個浮動面板上，即可將兩個面板合并為一個面板組，如圖所示。用戶可以根據(jù)個人的操作習(xí)慣自由組合面板，以獲得更易于操作的工作界面。單擊浮動面板或面板組右上角的“關(guān)閉”按鈕，可關(guān)閉當(dāng)前面板或面板組。拖曳面板或面板組頂部的灰色區(qū)域到工作界面的兩側(cè)，可將該面板或面板組轉(zhuǎn)換為固定狀態(tài)。關(guān)閉后的面板如果想要再次顯示，可以執(zhí)行“視圖＞面板”命令，在子菜單中選擇想要顯示的面板即可，如圖所示。2.4.4工作區(qū)“

工作區(qū)是AxureRP10創(chuàng)建產(chǎn)品原型的地方。當(dāng)用戶新建一個頁面后，在工作區(qū)的左上角將顯示頁面的名稱，如圖所示。如果用戶同時打開多個頁面，則工作區(qū)將以選項卡的形式將所有頁面排列在一起，如圖所示。提示：單擊頁面名稱即可快速切換到當(dāng)前頁面。通過拖曳的方式，可以調(diào)整頁面顯示的順序。單擊頁面名稱右側(cè)的“關(guān)閉”按鈕，將關(guān)閉當(dāng)前頁面。2.4.4工作區(qū)“

當(dāng)頁面過多時，用戶可以單擊工作區(qū)右上角的“選擇和管理標(biāo)簽頁”下拉按鈕，如圖所示，在彈出的下拉列表中選擇所需的命令，執(zhí)行關(guān)閉當(dāng)前標(biāo)簽、關(guān)閉全部標(biāo)簽、關(guān)閉其他標(biāo)簽或跳轉(zhuǎn)到其他頁面的操作，如圖所示。

工具欄由主工具欄和樣式工具欄兩部分組成。執(zhí)行“視圖＞工具欄”命令，取消勾選對應(yīng)的子命令，即可將對應(yīng)工具欄隱藏，如圖所示。2.5自定義工作界面2.5.1自定義工具欄課堂操作自定義基本工具列表01.

執(zhí)行“視圖＞工具欄＞自定義主工具欄”命令，如圖所示，彈出如圖所示對話框。課堂操作自定義基本工具列表02.對話框中顯示在工具欄上的工具前面都有一個“√”圖標(biāo)，如圖所示。用戶可以根據(jù)個人的操作習(xí)慣取消或者添加工具選項，從而自定義工具欄，如圖所示。課堂操作自定義基本工具列表03.取消勾選對話框底部的“在圖標(biāo)下顯示功能名稱”復(fù)選框，如圖所示。將隱藏工具欄上圖標(biāo)對應(yīng)的功能名稱，單擊“DONE”（完成）按鈕，自定義工具欄效果如圖所示。提示：單擊對話框右上角的“RestoreDefaults”(恢復(fù)默認)選項，即可將工具欄恢復(fù)到默認的顯示狀態(tài)。

用戶可以執(zhí)行“視圖＞面板”命令，選擇需要顯示的面板，如圖所示。具體的操作方法已經(jīng)在前文講過，此處不再敘述。用戶可以執(zhí)行“視圖＞重置視圖”命令，將操作造成的混亂視圖重置為最初的界面布局視圖，如圖所示。重置后的視圖將恢復(fù)到默認視圖狀態(tài)。2.5自定義工作界面2.5.2自定義工具畫板

在AxureRP10中，用戶可以使用單鍵快捷鍵更快地完成產(chǎn)品原型的設(shè)計與制作。先按鍵盤上的一個字母鍵，然后在工作區(qū)單擊或拖曳，即可生成相應(yīng)類型的小部件。AxureRP10中支持的單鍵快捷鍵如圖所示。先按【T】鍵，然后在工作區(qū)中單擊，直接輸入文本即可，效果如圖所示。2.5自定義工作界面2.5.3使用單鍵快捷鍵

執(zhí)行“文件＞備份設(shè)置”命令，彈出“偏好設(shè)置”對話框，如圖所示。切換到“畫布”選項卡，可以選擇取消勾選“啟用單鍵快捷方式”復(fù)選框，如圖所示。關(guān)閉該功能后，選中元件時輸入文本，即可在該元件上快速添加文本。2.5自定義工作界面2.5.3使用單鍵快捷鍵2.6使用AxureRP10的幫助資源