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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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