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