3.1 備課筆記-網(wǎng)頁(yè)交互原型工具Axure初識(shí)

編號(hào)07-01【web產(chǎn)品交互設(shè)計(jì)開(kāi)發(fā)制作】編號(hào)07-01學(xué)習(xí)任務(wù)一、網(wǎng)頁(yè)交互原型工具Axure初識(shí)一、課程說(shuō)明與要求1.課程說(shuō)明本階段課程分為四個(gè)部分，第一部分為為何要進(jìn)行原型設(shè)計(jì)，進(jìn)行原型設(shè)計(jì)的意義；第二部分為什么是交互設(shè)計(jì)，介紹了交互的原理；第三部分為Axure原型設(shè)計(jì)應(yīng)用，介紹了Axure的工作界面，以及交互原型的設(shè)計(jì)流程，第四部分為如何制定Axure設(shè)計(jì)體系，講解了Axure設(shè)計(jì)原型的步驟，通過(guò)學(xué)習(xí)網(wǎng)頁(yè)交互原型工具Axure初識(shí)，學(xué)生可以全面地理解原型交互設(shè)計(jì)的制作步驟，提高原型設(shè)計(jì)制作能力。2.工具材料準(zhǔn)備說(shuō)明本課的作業(yè)作品實(shí)踐需要同學(xué)們提前準(zhǔn)備一些工具和材料，教師提供軟件下載鏈接。工具材料下載鏈接備注Axure/downloadthanks每臺(tái)電腦安裝二、學(xué)情分析與課程導(dǎo)入1.學(xué)情分析本課程為原型設(shè)計(jì)理論介紹課程，原型交互設(shè)計(jì)需要有一個(gè)完整的原型設(shè)計(jì)流程，需要學(xué)生在學(xué)習(xí)過(guò)程中，能通過(guò)自己思考在原型交互設(shè)計(jì)中各個(gè)步驟。在學(xué)習(xí)原型交互設(shè)計(jì)理論初識(shí)時(shí)，要不斷思考交互設(shè)計(jì)各個(gè)流程環(huán)節(jié)是否符合交互設(shè)計(jì)理念，思考如何設(shè)計(jì)最完善的交互設(shè)計(jì)原型。2.課程導(dǎo)入在學(xué)習(xí)本節(jié)課之前，想必大家會(huì)問(wèn)會(huì)什么要進(jìn)行交互原型制作，這時(shí)因?yàn)橛捎谠谌伺c人的溝通中普遍存在問(wèn)題，一是溝通的時(shí)間成本，二是溝通的有效性，而原型的制作成本和演示成本都是比較低，除非比較復(fù)雜或者保真度要求比較高的原型，平時(shí)在描述一個(gè)功能的時(shí)候，可能花了很多時(shí)間仍不能完全描述清楚，且每個(gè)人理解能力上的差異，無(wú)法讓每個(gè)人都完全理解自己的想法，有原型的演示的話，一目了然，用戶可以根據(jù)自身的判斷，再結(jié)合演示者的描述，理解起來(lái)就不那么費(fèi)勁了。三、理論知識(shí)講解（一）為何要進(jìn)行原型設(shè)計(jì)1.溝通中存在的問(wèn)題隨著原型應(yīng)用的普及，越來(lái)越多的產(chǎn)品會(huì)采用原型設(shè)計(jì)來(lái)表述、完善整體需求，這樣做自然有其原因，但為何要進(jìn)行原型設(shè)計(jì)呢？在回答這個(gè)問(wèn)題前，首先要說(shuō)一下溝通中普遍存在的問(wèn)題。那么溝通的成本通常包含兩部分，一是溝通的時(shí)間成本，一個(gè)項(xiàng)目的開(kāi)發(fā)制作團(tuán)隊(duì)大致有一下人員分工，因此需要與各自分工的人員進(jìn)行產(chǎn)品溝通，有這個(gè)圖片可以看出如果只是靠口述各個(gè)需求和方案的話需要大量的時(shí)間，且不一定能描述清楚自己想要標(biāo)的意思，有可能需要反復(fù)去描述自己的想法。而導(dǎo)致時(shí)間成本的增加。另一個(gè)溝通成本是溝通的有效性，比如需要向用戶說(shuō)明設(shè)計(jì)方案的時(shí)候，單純的口頭溝通，肯定沒(méi)有有實(shí)質(zhì)交付物的溝通來(lái)的順暢，這里的實(shí)質(zhì)交付物可以是文檔、草圖、原型，而原型則比前兩者要好。2.原型在溝通的好處編號(hào)07-02編號(hào)07-02原型的制作成本和演示成本都是比較低，除非比較復(fù)雜或者保真度要求比較高的原型，在描述一個(gè)功能的時(shí)候，可能花了很多時(shí)間仍不能完全描述清楚，且用戶理解能力上的差異，必然效果不會(huì)好，有原型的演示的話，一目了然，用戶可以根據(jù)自身的判斷，再結(jié)合演示者的描述，理解起來(lái)就不那么費(fèi)勁了。3.原型的價(jià)值與目的原型的價(jià)值就是可以被不斷的修改、推翻、打磨、錘煉，直至達(dá)成最終的結(jié)果，產(chǎn)品可以利用原型來(lái)確定最終是否投入開(kāi)發(fā)等人力物力來(lái)實(shí)現(xiàn)，也即原型的價(jià)值就是產(chǎn)品的替身。原型設(shè)計(jì)的最終目的是為了準(zhǔn)確、方便、快捷的表達(dá)產(chǎn)品設(shè)計(jì)人員的產(chǎn)品設(shè)計(jì)意圖，并可以達(dá)成與溝通對(duì)象的溝通輔助。我們一般都從目的看做某件事的價(jià)值，原型設(shè)計(jì)的目的表明在通常的軟件或者系統(tǒng)研發(fā)過(guò)程當(dāng)中，原型設(shè)計(jì)是比較重要的，因?yàn)楫a(chǎn)品設(shè)計(jì)思想決定產(chǎn)品的后續(xù)成敗。什么是交互設(shè)計(jì)【思政融入（交互設(shè)計(jì)努力去創(chuàng)造和建立的是人與產(chǎn)品及服務(wù)之間有意義的關(guān)系，以“在充滿社會(huì)復(fù)雜性的物質(zhì)世界中嵌入信息技術(shù)”為中心。交互系統(tǒng)設(shè)計(jì)的目標(biāo)可以從“可用性”和“用戶體驗(yàn)”兩個(gè)層面上進(jìn)行分析，關(guān)注以人為本的用戶需求。）】1.什么是交互交互：及溝通交流，發(fā)生互動(dòng)關(guān)系編號(hào)07-03編號(hào)07-03人和人之間的交互最經(jīng)典的一幕可以用孫悟空智斗金角大王、銀角大王。金角大王說(shuō)：孫行者，我叫你一聲你敢答應(yīng)嗎？然后，金角大王就叫：孫行者。孫悟空回答：爺爺在此。就這樣，孫悟空就被收進(jìn)去了。這就是一個(gè)簡(jiǎn)單的交互。再比如，我們每天上班，到公司和同事打招呼。你說(shuō)：“早上好呀”，同事回答“早”。這也是一個(gè)常見(jiàn)的交流互動(dòng)。人和機(jī)器之間的交互人和人之間的交互比較好理解，那人和機(jī)器之間也存在交互。比如我們使用手機(jī)中的語(yǔ)音功能，會(huì)提示我們說(shuō)話，當(dāng)語(yǔ)音助手識(shí)別后，就會(huì)執(zhí)行相應(yīng)的操作，這就是人和機(jī)器之間的交互。智能時(shí)代的交互我們和任何機(jī)器之間的發(fā)生互動(dòng)關(guān)系，都是屬于交互。往更廣的意義上說(shuō)，如果失去了交互，地球?qū)⒉辉龠\(yùn)轉(zhuǎn)，將毫無(wú)生機(jī)?，F(xiàn)在，智能時(shí)代已經(jīng)到來(lái)，我們除了研究人和人、機(jī)器、產(chǎn)品、環(huán)境、服務(wù)、系統(tǒng)等之間的關(guān)系，還要研究機(jī)器和人、機(jī)器、產(chǎn)品、環(huán)境、服務(wù)、系統(tǒng)之間的關(guān)系。當(dāng)人（或機(jī)器）和事物（無(wú)論是人、機(jī)器、產(chǎn)品、服務(wù)、系統(tǒng)、環(huán)境等等）發(fā)生雙向的信息交流和互動(dòng)，就是一種交互行為。編號(hào)07-04編號(hào)07-042.什么是設(shè)計(jì)設(shè)計(jì)，它源于社會(huì)。設(shè)計(jì)的實(shí)質(zhì)在于發(fā)現(xiàn)一個(gè)很多人都遇到的問(wèn)題，然后試著去解決的過(guò)程。設(shè)計(jì)主要表現(xiàn)在“發(fā)現(xiàn)問(wèn)題–解決問(wèn)題”。而交互設(shè)計(jì)就是發(fā)現(xiàn)和解決人（或機(jī)器）和事物（包括人、機(jī)器、產(chǎn)品、服務(wù)、系統(tǒng)、環(huán)境等等）之間的互動(dòng)關(guān)系問(wèn)題。3.交互設(shè)計(jì)的工作內(nèi)容交互設(shè)計(jì)的工作內(nèi)容從用戶體驗(yàn)要素來(lái)說(shuō)分五個(gè)層級(jí)：戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層表示著你的不同能力，引用一張圖，比較形象的描繪了交互設(shè)計(jì)的能力范疇和價(jià)值。各個(gè)級(jí)別的類(lèi)型交互設(shè)計(jì)師負(fù)責(zé)結(jié)構(gòu)層和框架層，高級(jí)交互則涵蓋范圍層，體驗(yàn)顧問(wèn)則全部涵蓋，涵蓋范疇越大，價(jià)值越大，級(jí)別越高。編號(hào)07-05編號(hào)07-05（三）應(yīng)用Axure做原型設(shè)計(jì)……………………【重點(diǎn)】1.什么是原型呢？原型是產(chǎn)品的最初形態(tài)，確認(rèn)用戶對(duì)產(chǎn)品界面和操作功能可用性的需求，高保真的原型接近于產(chǎn)品的最終形態(tài)，但仍只是原型。產(chǎn)品原型簡(jiǎn)單的說(shuō)就是產(chǎn)品設(shè)計(jì)成形之前的一個(gè)大體框架，對(duì)網(wǎng)站來(lái)講，就是將頁(yè)面模塊、元素進(jìn)行粗放式的排版和布局，深入一些，還會(huì)加入一些交互性的元素，使其更加具體、形象和生動(dòng)。編號(hào)07-06編號(hào)07-062.Axure初始Axure與其他原型工具對(duì)比優(yōu)點(diǎn)1.有強(qiáng)大的編輯功能,使得制作素材庫(kù)會(huì)更便捷一點(diǎn)。2.更快的復(fù)制粘貼，素材庫(kù)和原型庫(kù)會(huì)多一些。3.可以項(xiàng)目共享，使得同事間可以同步工作，并保留所有工作歷史，并可以隨時(shí)導(dǎo)出歷史版本的項(xiàng)目文檔Axure工具分為以下幾個(gè)部分1為菜單欄和部分樣式工具欄；2為工作區(qū)域3為頁(yè)面欄，可以顯示當(dāng)前工作的頁(yè)面及其他的頁(yè)面，可以添加，重命名，重新組織頁(yè)面4為某一個(gè)頁(yè)面的概要視圖，從中你可以看到某一個(gè)頁(yè)面所有的元件，母版，動(dòng)態(tài)面板等等，可以對(duì)其的順序進(jìn)行排序，篩選等等；5元件庫(kù)。用來(lái)裝載元件的庫(kù)，可以從庫(kù)向畫(huà)布中拖入元件，也可以從這里加載庫(kù)，在這里，你可以在不同的庫(kù)之間進(jìn)行切換，也可以創(chuàng)建屬于自己的庫(kù)。6母版。這里可以添加，重命名，重新組織母版，可以集中對(duì)母版進(jìn)行管理。（此處的管理對(duì)所有頁(yè)面中被包含的母版均適用）7樣式窗格。對(duì)元件進(jìn)行編輯8交互。對(duì)元件或頁(yè)面的交互進(jìn)行定義9注釋。添加或編輯注釋。編號(hào)07-07編號(hào)07-073.完整的交互設(shè)計(jì)流程交互設(shè)計(jì)流程分為以下幾個(gè)步驟定性研究：針對(duì)可能使用你的產(chǎn)品的人，可以是問(wèn)卷、訪談等；方式進(jìn)行研究【思政融入（定性研究是指通過(guò)發(fā)掘問(wèn)題、理解事件現(xiàn)象、分析人類(lèi)的行為與觀點(diǎn)以及回答提問(wèn)來(lái)獲取敏銳的洞察力，洞察力是一種有目的、有計(jì)劃、比較持久的知覺(jué)過(guò)程，是知覺(jué)的高級(jí)形式。是個(gè)體分辨事物細(xì)節(jié)的能力）】二、確定人物角色：即產(chǎn)品的典型用戶，可以有一種或幾種。三、寫(xiě)問(wèn)題腳本：羅列人物角色在使用產(chǎn)品時(shí)可能遇到的問(wèn)題，可以整理成一個(gè)故事便于別人理解；四、寫(xiě)動(dòng)作腳本：像寫(xiě)故事一樣，寫(xiě)人物角色在使用你設(shè)計(jì)好的產(chǎn)品時(shí)，發(fā)生的細(xì)節(jié)。注意，這個(gè)時(shí)候你的交互方案的概念模型已經(jīng)基本成型了，這個(gè)概念模型是通過(guò)解決問(wèn)題腳本里的問(wèn)題而得出的；五、畫(huà)線框圖：這個(gè)線框圖是通過(guò)把動(dòng)作腳本里的概念模型轉(zhuǎn)化成視覺(jué)模型得到的；六、制作原型：做出來(lái)好像已經(jīng)可以使用的東西，這我們就有很多原型工具可以利用；七、專(zhuān)家評(píng)測(cè)：至少兩名設(shè)計(jì)師或?qū)换ピO(shè)計(jì)比較了解的人通過(guò)反復(fù)測(cè)試原型。找到問(wèn)題后修改線框圖并更新原型；八、用戶評(píng)測(cè)：讓用戶使用原型，可以給他們一些任務(wù)去完成。根據(jù)用戶在使用過(guò)程中的問(wèn)題和建議進(jìn)行進(jìn)一步修改。（四）如何制定Axure設(shè)計(jì)體系確定信息架構(gòu)信息架構(gòu)對(duì)于一個(gè)整體產(chǎn)品而言是非常重要的，猶如現(xiàn)在蓋房子時(shí)的地基和框架結(jié)構(gòu)，整個(gè)結(jié)構(gòu)決定了將來(lái)的房型樣子，及房子是否穩(wěn)固。而WEB產(chǎn)品的信息架構(gòu)則決定了產(chǎn)品未來(lái)的功能導(dǎo)航結(jié)構(gòu)，是一個(gè)底層框架的作用，因此非常重要。編號(hào)07-08編號(hào)07-08一般來(lái)講，我們?cè)谧鲂枨蠓治龅臅r(shí)候，都會(huì)把幾個(gè)主要的功能點(diǎn)抓出來(lái)，這幾個(gè)功能點(diǎn)就可以濃縮一下形成產(chǎn)品的初步信息架構(gòu)。比如要做一個(gè)合同管理的功能，要求實(shí)現(xiàn)合同信息管理，合同履約管理，合同統(tǒng)計(jì)報(bào)表等功能，這里列出來(lái)的功能點(diǎn)就可以拿來(lái)做信息架構(gòu)。再比如我們要做一個(gè)會(huì)員管理的功能，注冊(cè)和登錄是必不可少的功能點(diǎn)，那么就可以將其列為會(huì)員管理下的兩個(gè)基本信息架構(gòu)。接著確定頁(yè)面布局在用Axure做布局設(shè)計(jì)的時(shí)候，可以用默認(rèn)組件庫(kù)里面的占位符組件來(lái)設(shè)計(jì)（關(guān)于占位符組件的使用，參照這里），先將需要設(shè)計(jì)的區(qū)塊用占位符布局，然后標(biāo)上文字標(biāo)示，以此來(lái)表示這里將來(lái)需要設(shè)計(jì)放置的內(nèi)容。這個(gè)步驟基本決定了一個(gè)頁(yè)面的布局。編號(hào)07-09編號(hào)07-09完善設(shè)計(jì)內(nèi)容：1.定UI風(fēng)格，對(duì)常用的組件進(jìn)行視覺(jué)封裝定交互規(guī)則，基本操作的走向和反饋等布局和排版規(guī)則制定設(shè)計(jì)規(guī)則四、實(shí)踐技能訓(xùn)練（一）布置訓(xùn)練任務(wù)任務(wù)1：搜索并思考智能時(shí)代下的網(wǎng)頁(yè)原型中需要哪些交互行為。任務(wù)2：從網(wǎng)絡(luò)中查找Axure原型交互設(shè)計(jì)案例，分析其設(shè)計(jì)流程。（二）實(shí)戰(zhàn)項(xiàng)目案例根據(jù)原型設(shè)計(jì)體系使用Axure簡(jiǎn)單制作原型。……………【難點(diǎn)】教師重點(diǎn)指導(dǎo)：交互設(shè)計(jì)流程以及原型設(shè)計(jì)體系的使用。【學(xué)生初次進(jìn)行設(shè)計(jì)實(shí)踐，教師應(yīng)多引導(dǎo)，幫助學(xué)生形成設(shè)計(jì)體系，指導(dǎo)學(xué)生完成原型設(shè)計(jì)】五、課堂總結(jié)今天，我們主要結(jié)合網(wǎng)頁(yè)交互原型工具Axure初識(shí)，學(xué)習(xí)了什么是交互設(shè)計(jì)、Axure原型交互設(shè)計(jì)流程以及Axure交互設(shè)計(jì)體系，想必同學(xué)們通過(guò)講解對(duì)制作Axure交互設(shè)計(jì)原型有了一定了解和掌握。希望同學(xué)們課后繼續(xù)對(duì)你所接觸到的相關(guān)原型案例，用專(zhuān)業(yè)的眼光，分析Axure交互設(shè)計(jì)