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

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