第3章-(5)教師用書配套課件

AxureRP8.0網(wǎng)站與APP原型設(shè)計從入門到精通第3章

使用并掌握AxureRP的技巧第3章

使用并掌握AxureRP的技巧通用的原型設(shè)計原則作為一名原型設(shè)計師，在開始制作原型之前，通常要遵守一些行業(yè)規(guī)范。下面是一些通用的原型設(shè)計指導原則。對原型和文檔進行評估、計劃而且要保持不斷評估?？焖僭驮O(shè)計不是要立即使用AxureRP畫線框圖，而是先明確方向，才能按照所預期的時間、預算和期望，最終交付原型。精通所使用的原型工具，如AxureRP，設(shè)計師所掌握的工具可以幫助設(shè)計師更好地塑造原型。不要盲目使用AxureRP實現(xiàn)一些不切實際的效果，保持原型的保真度和細節(jié)才是重要的?？紤]多設(shè)備多平臺。要清楚設(shè)計的原型所針對的設(shè)備和平臺，充分考慮多設(shè)備和多平臺。第3章

使用并掌握AxureRP的技巧移動互聯(lián)網(wǎng)原型設(shè)計原則互聯(lián)網(wǎng)時代的好處是可以快速地試錯，產(chǎn)品合不合適，可以先做出來讓用戶使用，再根據(jù)用戶的反饋進行調(diào)整，不斷地優(yōu)化設(shè)計。原型設(shè)計要遵循如下原則。1.設(shè)計師要是原型的重要用戶2.考慮用戶在界面上能得到什么3.使用合法的方式顯示信息4.考慮移動設(shè)備的特殊性5.數(shù)據(jù)分析與用戶分析6.從簡單的產(chǎn)品做起第3章

使用并掌握AxureRP的技巧原型設(shè)計的技巧做好準備工作1.與公司內(nèi)各利益相關(guān)者的戰(zhàn)略會議。2.訪談目標用戶。3.對現(xiàn)有產(chǎn)品進行可用性方面的研究。4.競品分析。5.對現(xiàn)有網(wǎng)站內(nèi)容進行分析和盤點。6.已完成部分信息架構(gòu)，包括高級別的分類和全局導航。7.建立一個重要功能和特性的優(yōu)先級列表。8.建立人物角色和用戶角色矩陣，以及關(guān)鍵人物和流程。9.用于建立高級商業(yè)需求所需要的任務。第3章

使用并掌握AxureRP的技巧原型設(shè)計的技巧元件重命名生活中人們?yōu)榱朔奖闶褂煤筒檎遥芏嗍挛锒歼M行了命名。在原型設(shè)計項目中也是一樣，為元件重命名在整個開發(fā)過程中都非常重要。設(shè)計師反復為頁面、元件和母版等元件重命名可以帶來以下好處。1.減少與利益者之間的溝通風險2.讓Axure文件變得容易理解3.可追溯性第3章

使用并掌握AxureRP的技巧原型設(shè)計的技巧全面考慮用戶需求在實際的工作中，收集來的各種信息最終將匯集到原型設(shè)計師這里。原型設(shè)計師需要根據(jù)這些要求設(shè)計制作產(chǎn)品的原型，把需求轉(zhuǎn)化為實際的用戶體驗方案。設(shè)計時，設(shè)計師要充分考慮所有用戶的需求，要從用戶的性別、年齡、學歷、地域等各方面下手，充分調(diào)研，有針對性的設(shè)計。有時甚至可以為了一個重要角色的需求而特意設(shè)計。這樣才能保證最終設(shè)計制作出來的產(chǎn)品能夠被絕大多數(shù)用戶所接受。第3章

使用并掌握AxureRP的技巧使用流程圖表添加流程圖頁面將結(jié)構(gòu)圖頁面或者流程圖頁面放在前面，可以在人們開始瀏覽原型線框圖和具體交互之前向他們闡述整體項目的概況，如用戶流程。在項目早期的評審會上，這種原型描述是非常有用的。用例圖用例圖是指由參與者、用例以及它們之間的關(guān)系構(gòu)成的用于描述系統(tǒng)功能的靜態(tài)視圖。用例圖是被稱為參與者的外部用戶所能觀察到的系統(tǒng)功能的模型圖，呈現(xiàn)了一些參與者和一些用例，以及它們之間的關(guān)系，主要用于對系統(tǒng)、子系統(tǒng)或類的功能行為進行建模。第3章

使用并掌握AxureRP的技巧使用流程圖表在流程圖中創(chuàng)建用例圖在元件面板中選擇流程圖元件，將角色元件拖曳到頁面編輯區(qū)內(nèi)，將橢圓形元件拖曳到頁面編輯區(qū)內(nèi)，并標注為“創(chuàng)建賬戶”，橢圓形元件可以作為流程圖中的一個用例，根據(jù)需求繼續(xù)創(chuàng)建其他橢圓形用例。優(yōu)化用例圖1.選擇工具2.格式刷工具3.排列與分布4.縮放工具第3章

使用并掌握AxureRP的技巧使用流程圖表使用文件夾管理頁面通過文件夾可以管理頁面管理面板中的頁面，雖然功能很小，作用卻很大，可以將頁面管理面板中的頁面分為流程圖組和線框圖組等更多組。使用文件夾可以保持頁面的獨立，能夠反映項目中的關(guān)鍵內(nèi)容。創(chuàng)建流程圖在設(shè)計制作一個產(chǎn)品原型時，首先要將原型中的各個頁面設(shè)計完成，然后再把原型中的所有頁面生成對應結(jié)構(gòu)的原型結(jié)構(gòu)圖。第3章

使用并掌握AxureRP的技巧拖曳元件在整本書中，用戶會看到很多“將某元件拖曳到頁面編輯區(qū)內(nèi)”這樣的描述，什么意思呢？打開AxureRP，在元件面板中選中一個元件，按住鼠標左鍵不松，將它拖曳到頁面編輯區(qū)后松開鼠標，元件就會出現(xiàn)在頁面編輯區(qū)中，這就是將元件拖曳到頁面編輯區(qū)內(nèi)的操作。第3章

使用并掌握AxureRP的技巧了解元件的坐標每個位于頁面編輯區(qū)的元件都有自己的坐標，用戶可以通過設(shè)置元件的X坐標和Y坐標的數(shù)值，實現(xiàn)對元件位置的精確控制。1.置于頂層：在垂直于屏幕的方向上離用戶最近。置于頂層的元件位于所有元件的上面，所以不會被遮擋。2.置于底層：在垂直于屏幕的方向上離用戶最遠。置于底層的元件位于所有元件的下面，任何其他元件都會遮擋這個元件。3.上移一層：讓元件在垂直屏幕的方向上離用戶再近一點。4.下移一層：讓元件在垂直屏幕的方向上離用戶再遠一點。第3章

使用并掌握AxureRP的技巧設(shè)置元件的尺寸每個添加到頁面編輯區(qū)的元件都有一個尺寸，以便用戶實時了解元件的大小。選中編輯區(qū)中的任一元件，工具欄中將會顯示當前元件的尺寸信息。W是元件的寬度，H是元件的高度，對于大部分元件來說，這些值都是可以修改的。對于某些特殊元件，例如單選按鈕元件和復選框元件，就不能修改高度。當選中這種元件時，高度文本框顯示為灰色狀態(tài)。第3章

使用并掌握AxureRP的技巧隱藏與鎖定元件在原型制作過程中，有時需要暫時隱藏某個元件，以便于其他元件的制作。選擇要隱藏的對象，勾選工具欄右下角的“隱藏”復選框或“屬性”面板上的“隱藏”復選框，即可將當前對象隱藏。再次取消勾選，即可將對象顯示。第3章

使用并掌握AxureRP的技巧背景覆蓋法用戶可以利用別人做好的圖片做背景，然后再在這個背景上利用AxureRP元件添加一些需要的元素和交互事件，這種方法能夠節(jié)省制作高保真原型的時間。用戶可以利用成型的頁面，只制作重要位置的交互效果，其他部分可以以背景的方式存在。接下來通過實例的方式向用戶講解背景覆蓋法的使用。第3章

使用并掌握AxureRP的技巧變量的使用在AxureRP中使用變量，可以在原本簡單的交互中加入復雜的邏輯，通過對變量值的判斷獲得對應的操作。例如，要實現(xiàn)當單擊按鍵一次就自動增加計數(shù)的功能。這種功能有點類似各大社交網(wǎng)站看到的“點贊”功能，為了實現(xiàn)這個功能，就需要使用一個變量來“記錄”當前用戶已經(jīng)單擊過按鈕的次數(shù)，每多單擊一次，就給這個變量的值加1并顯示出來。接下來通過案例操作詳細講解變量的使用。第3章

使用并掌握AxureRP的技巧從Photoshop到AxureRP素材拼接方法在Photoshop中將局部頁面保存為圖片，然后在AxureRP中通過添加圖片元件的方法導入。進行素材拼接，快速方便地制作出產(chǎn)品原型頁面效果。接下來向用戶介紹具體的制作方法。合并拷貝拼圖方法有時Photoshop中的同一個功能的內(nèi)容被分布在不同的圖層，可以通過合并拷貝的方法拷貝圖像。在Photoshop中使用“矩形選框工具”選中如圖3-86所示的內(nèi)容。用戶可以在Photoshop的“信息”面板上看到選框的坐標為X1590、Y107，尺寸為W427、H53。第3章

使用并掌握AxureRP的技巧從Photoshop到AxureRP兩種方法的好處使用素材拼接的方法，可以在AxureRP中得到透明且獨立的元件。但是在制作時需要嚴格的按照坐標尺寸完成。使用圖層合并拼圖的方法是將背景一起拷貝到AxureRP中。由于元件都具有相同顏色的背景，所以尺寸坐標大概一致就可以，第二種方法是一種相對比較容易的制作方法。兩種方法同時使用時要注意以下幾點。1.坐標的統(tǒng)一。2.注意使用合并拷貝。3.在Photoshop中選擇對象時，一定要注意邊界。第3章

使用并掌握AxureRP的技巧在AxureRP中使用Flash在AxureRP中不能直接使用Flash，沒有一個叫Flash的元件可以使用。Flash對象只能通過使用一個唯一的URL表示。在使用AxureRP制作頁面原型時，有時會使用Flash完成一些豐富的頁面效果，例如頁面中嵌入的視頻，播放產(chǎn)品廣告。下面一起學習如何在AxureRP中引用Flash。AxureRP提供了一個非常強大的元件。叫做內(nèi)聯(lián)框架元件。通過這個元件，可以在一個頁面中通過一個URL引用另一個頁面。既然一張圖片、一個Flash都可以用URL來表示，那么在設(shè)計中可以通過內(nèi)聯(lián)框架元件在一個頁面中引用另一個圖片或者Flash。第3章

使用并掌握AxureRP的技巧本章小結(jié)