編號01-01【認識交互設計部分】編號01-01學習任務一、網頁交互設計流程初識（一）一、課程說明與要求1.課程性質與考核方式說明教師首先自我介紹。然后說明本課為考查課，平時成績和期末成績各占總成績的50%，平時成績主要通過平時作業（作品）的形式評定，還要兼顧考核出勤、學習態度、課堂表現等因素；期末考試是在課程的最后兩次課采取限時命題創作的形式，全面考核課程知識的綜合運用。2.課程說明《數字媒體交互設計》共分為網頁交互設計、App交互設計、VR交互設計三方面的內容。本課程是以理論為基礎的實踐導向型課程,所傳達的課程內容圍繞“以人為本”的設計原則，重點講述人機交互的基本概念和重要意義以及發展歷程、軟件系統的人機交互設計原則和方法、網絡系統的人機交互設計原則和方法、移動端應用人機交互技術、人機交互開發工具與環境等理論內容；簡要介紹人機交互的認知心理學、計算機硬件的人機交互設計、人機交互技術的發展趨勢,并培養學生利用交互設計工具制作做實際交互作品原型的能力。3.組織簽到及建立班級課程微信群組織學生使用學習通進行簽到。然后使用微信面對面建群，說明本群作為課程的相關通知發布、知識答疑和作品交流使用，同時歡迎同學們及時在群里反饋對課程教學方面的意見和學習感想，提醒老師及時調整適合同學們的授課方式。4.工具材料準備說明本課的實踐技能訓練階段，需要同學在手機或者是計算機中下載好行業需求分析文檔，教師將所需準備資料發到微信群中。資料類型與名稱備注行業需求分析報告文檔每個小組一份二、學情分析與課程導入1.學情分析本課程授課對象為藝術專業學生，是在藝術專業中設立的一門邏輯思維較強的設計類課程，需要學生在學習過程中，對美術設計與邏輯設計內容進行一定程度上的融通。作為一門實踐性較強的課程，針對學生對當前市場應用需求普遍認知不強，或有較多偏差的情況，強調進行引導教學，融入市場多元化理念。另一方面，學生對未來的市場應用有信心，對所選擇的專業感興趣，獲取知識的主動性較強。編號01-022.課程導入編號01-02在日常生活中，大家會頻繁的面對各種網頁操作或App操作，而這些應用中所體現出來的操作邏輯，動態效果，內容編排方式，則是影響用戶對這些程序應用體驗的全部因素；如何讓用戶感覺到一部應用程序的流暢、方便、清晰、高效、記憶深刻，則是我們這門交互設計課程的根本任務，本節課則是介紹網頁交互設計中的基本流程，并了解一部網頁是如何通過交互設計來滿足大眾的操作需求的。三、理論知識講解（一）交互設計概念講解1.基本概念交互設計可以用簡單的術語來理解：它是用戶和產品之間交互的設計。大多數情況下，當人們談論交互設計時，他們討論的產品往往是應用程序或網站等產品。交互設計的目的是提供給用戶具有可用性的產品，來幫助用戶實現其目標。這個定義聽起來很廣泛，那是因為交互設計囊括了相當多的內容。交互設計通常涉及美學設計，動態設計，聲音設計，空間設計等內容。當然，這些領域會交疊融合，因此我們可以說交互設計是一個跨學科領域的融合。2.生活中的交互能量…………………【思政融入（從疫情防控，感受中國制度優勢）】用戶與產品之間的交互需要在當前更加趨向于多線程，多維度，多情境，實時化這樣的“三多一實”要素。在2020年我國的疫情攻堅戰中，各大綜合信息網站對疫情的防控情況進行了實時的數據發布，方便了廣大群眾的“了解”需要，同時也用多維度的交互設計呈現方式，清晰明了的向大家展現了我們在各個方面的戰疫成果。這種實時性的動態資訊網站，在美術設計，交互心理設計，信息呈現設計等多方面都做了細致的考量。【課后思考：第一，生活中的交互設計中，“便捷”與“全面”的關系；第二，廣義的交互設計的含義。】（二）網頁交互設計流程……………【重點】1.設計流程環節網頁交互設計的工作，需要參與前期的需求分析、后期開發、測試驗收等產品設計與實現的多個環節。我們的工作流程如圖中所示：項目立項后，需要進行產品分析包括需求和架構分析、根據分析做原型設計，通過評審后進行視覺設計；確認后，進入前端與后臺開發，完成后進行測試階段，直至產品最終上線；這是網頁交互設計的一個流程；編號01-03編號01-03產品最終是用戶使用，那么用戶的體驗尤為重要，下面我們從用戶體驗的五個層面來進行重點講解。用戶體驗要素…………………1.層次要素用戶體驗的五個層面分為：戰略層、范圍層、結構層、框架層、表現層。五個層面自上而下地建設，從抽象到具體。2.具體的概念戰略層：也就是“產品目標、用戶需求”，通俗來講，就是經營者想從網站上得到什么，用戶想從網站上得到什么？【在這里，我們仍然可以用抗疫網站的需求來說明這一點，用戶針對網站的需求涉及到：了解數據，周邊情況查詢，最新通告，在線求助等。那么，重點深入某種需求或者全面覆蓋多種需求，則決定了下面的幾個層面的設計考量】范圍層：也就是“功能規格和內容需求”，當我們把用戶需求和產品目標轉變成產品應該提供給用戶什么樣的內容和功能時，戰略就變成了范圍。也就是明確“我們要開發的是什么？結構層：就是“交互設計、信息架構”，它的目的是為了確定各個將要呈現給用戶的元素的“模式”和“順序”。編號01-04框架層：即界面設計、導航設計、信息設計層。用來確定用什么樣的功能和形式來實現。編號01-04表現層：即視覺設計；主要解決“產品框架層的邏輯排布”的感知呈現問題。其中，“結構層”與“框架層”是我們要講述的重點。（四）結構層與信息架構……………………【重點】1.信息架構概念信息架構主要體現在信息型產品的結構層，對于目前市面上的大部分產品，內容是躲不開的，因此信息架構也是我們需要重點理解的部分。在以內容為主的網頁上，信息架構的主要工作是設計組織分類和導航的結構，讓用戶可以高效率、有效地瀏覽網站的內容，使呈現給用戶的信息合理并且具有意義。首先創建分類體系。創建方式可以是從上到下也可以是從下到上。分類中的關系可以是線性關系（如書、文章)、層級關系等2.結構層方法信息架構的基本單位是節點（node）。節點可以對應任意的信息片段或組合，可以是一個數字，一個控件，一個組件，一個頁面，甚至一個功能。節點的抽象性使我們能明確地設定對產品關注點的詳略程度。常見的結構類型有層級結構、矩陣結構、自然結構、線性結構。各種結構層的形象說明層級結構：又叫樹狀結構或中心輻射結構。它的節點與其他相關節點之間存在父級/子級的關系。矩陣結構：允許用戶在節點與節點之間沿著兩個或更多的“維度”移動。

自然結構：不會遵循任何一致的模式。節點是被逐一連接起來的，同時這種結構沒有太強的分類概念。線性結構：連貫的語言流程是最基本的信息結構類型。比如：書、文章、音像和錄像全部都被設計成編號01-05一種線性的體驗。編號01-05【互動討論：這部分的教學會向學生隨機展示一些網頁的交互過程，然后請學生思考其中應用了哪一種結構方式，并且和學生討論為什么應用這種結構】框架層與界面設計……………………【重點】界面設計的首要任務界面設計要做的事情就是選擇正確的界面元素。這些元素的目的是能幫助用戶完成任務，還要通過適當的方式讓它們容易被理解和使用。成功的界面設計是主次分明的，能讓用戶一眼就看到“最重要的東西”。比如某個功能要在哪個界面上完成，是在結構層的交互設計中已經決定的；而這些功能在界面上如何被用戶認知到，則屬于界面設計的范疇。界面設計可以采用各種技巧，使用戶完成任務的過程變得容易。比如：產品可以代替用戶去做一些簡單的輔助操作，在界面第一次呈現給用戶的時候，仔細考慮每一個選項的默認值；比如在用戶填寫豐富內容的過程中，自動保存。交互界面設計的步驟首先進行項目背景分析（界面干擾因素不宜過多；）>視覺風格設計（確定風格）>制作（統一icon、編號01-06界面尺寸規范、）>細節推敲（文字、顏色、icon大小等，統一規范，整體對齊，相應位置等間距等，會使得整體感覺更好；交互細節、交互操作是否符合用戶操作習慣）>初稿編號01-06交互界面設計的方法-線框圖框架層的內容是交互設計師的重點輸出物，根據頁面布局需要輸出一個詳細的文檔，也就是頁面示意圖或線框圖。線框圖是之前所有思考的體現，是對一個頁面中所有組成部分以及它們如何結合到一起的、最直觀的描述。線框圖在正式建立網站的視覺設計的流程中是必要的一步。【這部分內容會采用現實中的交互網頁成品與對應的線框圖進行比較，引導學生現場設計出線框圖，進行反推化教學】（五）開發人員配置.................................................................................【思政融入：團隊協作的本質是共同奉獻】當我們開發一款產品時，通常都是由一個團隊的成員共同完成，而團隊的特點是以目標為導向，以協作為基礎，需要共同的規范和方法，在技術或技能上形成互補。編號01-07團隊協作的本質是共同奉獻，這種共同奉獻需要一個切實可行、具有挑戰意義且讓成員能夠為之信服的目標。只有這樣，才能激發團隊的工作動力和奉獻精神，不分彼此，在一個團隊里面，并不是說每一個成員各方面能力都特別棒，而是能夠很好地借物使力，取團隊其它成員的長處來補自己的短處，也把自己的長處優點分享給大家，互相學習交流，共同進步，遇到問題都及時交流，才能讓團隊的力量發揮得淋漓盡致。編號01-07（1）產品經理開發一個產品，需要對客戶的需求進行分析，同時對市場上同類型或其他產品比較了解，了解用戶習慣、產品的定位、功能、邏輯，在頭腦里要有清晰的邏輯，這就是產品經理的主要職責。產品經理經過專業的市場洞察、客戶分析、用戶體驗等，將客戶的要求形成詳細的功能文檔，然后和團隊成員制作出清晰簡潔的交互產品原型圖，原型圖包括各項功能排布、業務邏輯、頁面交互等等。（2）UI設計師UI設計師主要負責App產品的界面設計和交互設計，根據產品經理的需求進行App頁面及元素的設計。（3）前端工程師前端口工程師主要負責將UI設計師設計完成的頁面是代碼實現出來，是開發團隊中最不可缺少的人員。前端口工程師：主要分為Android或iOS兩個不同系統的客戶端的開發，分別由Android開發工程師及iOS開發工程師完成。（4）后臺程序開發主要完成運營管理后臺的開發，包括數據及服務器的部署等。（5）測試人員測試人員相當于產品開發的質量檢查員，進行功能，性能，兼容性等總體測試，發現bug反饋給對應的開發人員進行修改。另外，當產品上線后，經過多個版本的迭代，用戶數量越來越多，就需要大數據工程師；運維工程師需要將產品的代碼需要部署到一個服務器上，日常的維護都是由運維工程師來負責；在產品剛剛上線時，如果涉及到推廣還需要有運營、市場營銷、售前/售后工程師等。編號01-08（六）產品交互原型的分類編號01-08交互原型根據頁面的保真程度可以劃分為草圖、低保真和高保真。在進行原型設計之前，我們需要根據使用場景、使用人群、或者是項目的不同階段來設計不同保真度的產品原型。1.草圖草圖通常用于產品早期的概念階段。在項目立項的早期，對于產品的功能及業務場景都處于規劃階段，沒有明確成熟的產品方案，團隊成員在項目規劃，進行頭腦風暴的會議時我們需要能夠快速呈現產品雛形的原型，且便于及時修改。草圖繪制階段的原型大部分都是手繪稿，一邊討論產品功能，另一邊直接繪制產品原型，這個階段的原型大部分都是在白板或者在白紙上手繪完成，在討論的過程中發現問題，及時修改。草圖原型能夠表達出基本的界面功能及內容布局即可，利用基本的幾何圖形如方框、圓和一些線段表達產品雛形，只需要參與討論會議的人員明白大概意圖即可。草圖的優勢在于設計成本低，能夠隨時進行修改，在項目早期有很多不確定因素的前提下，盡量使用草圖進行討論評審。2.低保真當我們明確了產品的業務需求及使用場景以后，產品經理和交互設計師們可以使用低保真原型來快速設計產品的概貌。產品經理和交互設計師們通過項目早期階段明確了產品的功能需求及業務范圍，根據業務會議上確定的產品方案，首先需要梳理清楚產品的功能結構和信息結構，根據業務需求推導出詳細的功能點。工作產品的戰略目標、需求范圍、功能結構都清楚以后，就可以開始正式繪制線框圖了，線框圖又稱為低保真原型。編號01-09編號01-09線框圖可以幫助我們準確拆分頁面、以及每個頁面的功能模塊及展示信息，確定每個頁面元素的界面布局。線框圖與草圖相比較而言，視覺顯示及意圖表達上更準確了。線框圖的繪制需要借助于原型設計工具，線框圖中的元素布局以及功能模塊需要無限接近產品上線后的樣子。低保真原型階段可以不考慮界面元素的配色以及各功能的交互跳轉及動畫效果。界面的配色是UI設計師的工作，豐富的交互動作也不適合在這個階段去詳細分析。通常查看低保真原型完成后，需要與需求提出人員、UI設計師、前端工程師、后端工程師以及測試人員進行召開原型設計評審會，根據評審結果，需要對低保真原型進行多輪調整，直至達成一致結果，確保能往下推進。低保真原型確定后，UI設計師及開發工程師們可以據此進行項目實施了。3.高保真高保真原型常用于向高層領導進行產品演示或者向投資人演示產品概念，以尋求項目融資。高保真原型又可以成為產品的Demo，除了沒有真實的后臺數據進行支撐外，幾乎可以模擬前端界面的所有功能，完全是一個高度仿真產品，對于一些非專業的高層領導、老板及投資人，他們希望看到的是一個無線接近線上產品的Demo，能夠盡可能詳細的了解產品的功能及業務需求，從視覺顯示以及交互動作上都和真實產品大致相同。編號01-10編號01-10高保真原型需要在低保真的基礎上進行配色，插入真實的圖片及圖標。充分利用原型工具中每一類元件的樣式及專有的交互屬性為原型增加保真度，為相關的元件及頁面添加交互事件、配置交互動作。這樣從視覺顯示及交互設計來看，就是一個高保真原型。在明確當前的項目階段及使用人群后，再決定什么樣保真度的原型才是最合適的。既不能為了方便而總是使用草圖，也不能一味的追求高保真原型，而是綜合評估使用的場景及用戶因素，在工作當中，我們使用最多的是低保真原型，畢竟項目團隊中最關心產品原型的是項目的實施人員，低保真原型也能較為準確的闡述項目需求，以及一些簡單的交互跳轉及交互效果，可以讓行業內的設計人員一看便知。有些業務規則及交互細節上的效果，還需要配以說明文檔，這樣才能方便開發及測試人員深刻理解產品需求。四、實踐技能訓練（一）布置訓練任務任務1.以實際應用出發整理一篇網頁交互設計需求文字任務2.選擇一個網站，通過用戶體驗要素分析該網站的用戶體驗層級，并以word文檔的方式呈現。（二）實戰項目案例行業網站交互需求構架剖析。………【難點】教師重點指導：典型交互網站的構架分類；嘗試設計命題類的網站構架設計；框架在網站設計中的使用。【學生初次進行設計實踐，教師應多引導，幫助學生形成設計方案，指導學生完成圖案草稿繪制】五、課堂總結今天，我們主要結合網頁交互設計案例學習了設計流程、網頁交互構架和網頁交互界面設計原理（分類，適用范圍，組合）等相關理論，也針對相關理論做了一些練習，想必同學們通過練習對網頁交互設計原理和框架設計基本類型有了一定的了解和掌握。希望同學們課后繼續對你所接觸到的相關作品，用專業編號01-11的眼光，分析交互產品的交互設計法則和交互界面設計基本原則，這樣有助于你們對知識點的更深入的理解。編號01-11六、課后思考前面我們講到了網頁交互設計的基本工作思路，那么我們在日常生活中同時也會接觸更多的APP交互產品，這些產品既是網頁的功能補充，也是獨立的功能應用。請同學們搜集一些有關App交互設計理念的資料，思考一下App交互設計與網頁的共通性與自有的設計特點這兩個問題，下次課請同學們交流一下。另外，請同學們從現實生活中的各類媒體中尋找、收集網頁交互的作品。針對作品嘗試解讀網頁交互幾種結構類型的應用。并且預習和思考下次課所涉及到的App交互設計的流程都有哪些。編號02-01【認識交互設計部分】編號02-01學習任務二、App交互設計流程初識一、課程說明與要求1.課程說明本課主要講解App交互設計流程及相應的幾個重要階段；需求分析階段、原型設計階段、視覺設計階段、開發/測試/驗收階段和搜集用戶反饋階段，App交互設計，不僅僅是輸出設計方案，當拿到一個新的項目需求后，從設計思考開始，產品前期分析，設計產品，設計評審，用戶測試，直至產品上線。在后面的App產品交互設計開發的制作中，會著重培養學生利用交互設計工具制作做實際交互作品原型的能力。二、學情分析與課程導入1.學情分析本課程授課對象為藝術專業學生，是在藝術專業中設立的一門邏輯思維較強的設計類課程，需要學生在學習過程中，對美術設計與邏輯設計內容進行一定程度上的融通。作為一門實踐性較強的課程，針對學生對當前市場應用需求普遍認知不強，或有較多偏差的情況，強調進行引導教學，融入市場多元化理念。另一方面，學生對未來的市場應用有信心，對所選擇的專業感興趣，獲取知識的主動性較強。課程導入上一部分課程，我們介紹了網頁交互設計的基本流程以及所涉及的交互框架類型，對網頁交互設計有了初步的認識，那么我們在日常生活中除卻網站的交互需求，更多的是App的應用，相比較而言，App應用的特點是行業專一性更強，在一個范圍內，對交互的深度有更多的需求。下面我們針對App交互的這一特點，對其設計流程做一個統一的講解三、理論知識講解（一）App交互設計流程總覽1.流程概述App交互設計，不僅僅是輸出設計方案，當拿到一個新的項目需求后，從設計思考開始，產品前期分析，設計產品，設計評審，用戶測試，直至產品上線。如圖中所示：需要前期的需求分析、根據分析做原型設計，直至評審認可后根據設計規范進行視覺設計；經過評審通過后，進入開發與測試階段，最終通過用戶反饋來驗證設計的可用性、合理性和是否需要優化等，直到產品上線；編號02-02編號02-022.流程中所涉及的文檔項目展開的過程中，會產生一些輸出文檔，我們對輸出的內容和個階段參與的人員進行了歸納；比如需求分析階段需要“用戶研究文檔、產品功能列表”，到原型設計階段會輸出“交互原型以及交互文檔”，視覺設計和開發測試階段，會形成“設計的說明以及交互文檔的完善”，用戶反饋階段最終輸出“用戶記錄和用戶分析文檔”等等,下面我們分別對交互設計階段進行詳細講解；（二）App設計各階段剖析…………【重點】1.需求分析階段與調研報告………需求分析是交互設計流程計劃階段的重要環節，也是產品生存周期中的一個重要環節，這個階段是分編號02-03析App在功能上需要「實現什么」，而不是考慮如何去「實現」。編號02-03需求分析的目標是把用戶對待開發App提出的「要求」或「需要」進行分析與整理，確認后形成描述完整、清晰與規范的文檔，確定軟件需要實現哪些功能，完成哪些工作。此外，App移動端的一些非功能性需求（如可靠性、響應時間、可擴展性等），頁面設計的約束條件，運行時與其他頁面的關系等等也是軟件需求分析的目標。越是有經驗的交互設計師，越要有產品思維，越要從全局、源頭去考慮用戶的訴求。（1）用戶研究報告文檔文檔的價值與目的是通過用戶調研，理性了解用戶，根據他們的目的、行為和態度差異，將他們區分不同類型，然后從每種類型中抽取出典型特征，賦予人群畫像，最終挖掘出不同人群對產品的偏好和潛在需求，以及對品牌的認知程度，從而指導市場推廣和產品設計。文檔的目錄結構：調研背景、目的、時間、方法、群體、場景、數據、報告評估（2）產品功能列表當需求分析、篩選和評定優先級之后得出結果，交互設計師需要把產品功能以列表的形式展現出來。這是需求分析之后，提出解決方案的第一步。產品列表的價值功能需求列表的價值，一是幫助產品經理理清思路，二是幫助項目團隊的其它成員了解產品功能需求，好讓他們提前做好相關準備。功能列表的內容：模塊：一般來說，每個模塊下分3~6個子模塊是合理的，否則要考慮重新劃分。子模塊：也就是一級模塊的二級分類功能：要給用戶提供什么功能，給這個功能起個名字。編號02-04功能描述：這個功能具體包含哪些操作，可以描述的具體一些，如支持用戶填寫基本信息、提交。編號02-04需求優先級：這塊是整個功能列表工作中核心的部分，判斷的準確與否直接影響著將來產品的方向；（比如從戰略角度明確現階段的主要目標、從判斷用戶的影響（重要和緊急兩個維度），評估實現的成本等這些方面來判斷一個需求的優先級）。投入產出比：簡單來說，就是商業價值除以開發工作量（或開發難度），每個團隊也可以找出一個合適自己產品需求ROI（投資回報率）的計算方法。備注：覺得需要強調的，比較特殊的東西。(3)場景故事板故事板，起源于動畫行業。在電影電視中，故事板的作用是來安排劇情中的重要鏡頭。他們相當于一個可視化的劇本，故事板展示了各個鏡頭之間的關系，以及他們是如何串聯起來，給觀眾一個完整的體驗。故事板的價值我們在做「產品設計故事板」的目的是讓產品設計師在特定產品使用情境下，全面理解用戶和產品之間的交互關系。編號02-052.原型設計階段編號02-05對產品需求分析定位后，就進入原型設計階段，這個階段交互設計師需要編寫交互文檔；也就是交互設計說明文檔。主要是用來承載設計思路、設計方案、信息架構、原型線框、交互說明等內容。交互設計文檔的目錄結構包括：文檔封面、更新日志、文檔圖例、設計背景/思路（需求分析、項目背景等）、業務流程、頁面交互（信息架構、權限說明、交互原型(線框圖、流程圖)）、全局通用說明（常用控件、復用頁面、缺省頁匯總）、廢紙簍針對整體業務流程、頁面交互等具體內容，我們進行如下講解：流程圖的符號和構成：流程圖由特定的圖形構成，但具體的形式由繪圖的目的和閱讀者的閱讀習慣或者約定來確定。（2）業務流程圖（泳道圖）泳道流程圖簡稱為泳道圖，也可稱為跨職能流程圖，因為它的結構樣式很像泳道，所以行業內習慣稱編號02-06為泳道圖；它的作用是，通過業務流程圖，分析關鍵事件的流程，分析為什么要這么做，探索出更深層次的問題，從而對現有不合理的業務流程進行重組優化，進而制定優化方案，改進現有的流程；來闡述在項目中各個角色是怎么產生相關聯系的。編號02-06（3）功能結構圖功能結構圖就是按照功能的從屬關系畫成的圖表，在該圖表中的每一個框都稱為一個功能模塊。用通俗的話來說，功能結構圖就是以功能模塊為類別，介紹模塊下各個功能組成的圖表。功能結構圖的作用是：梳理需求，以全局的方式對整個產品頁面中的功能結構形成一個直觀的認識；明確產品的功能模塊以及它的功能組成。（4）信息架構圖信息架構屬于用戶體驗的結構層，是產品的骨架。一般是由產品經理或者更高層的管理人員給出大的框架。除非是產品迭代，否則一般不會有大的改動。信息架構圖的作用是：幫助PM（項目經理）梳理復雜內容的信息組成，避免信息內容在展示過程中編號02-07出現遺漏、混亂、重復；作為開發工程師建立數據庫的參考依據。編號02-07（5）任務流程圖任務流程圖就是通過圖形化的表達形式，來闡述產品在功能層面的邏輯和信息。它能夠更清晰、直觀地展示用戶在使用某個功能時，會產生的一系列操作和反饋的圖標。任務流程圖的作用是：基于業務流程，進行任務流程梳理，闡述角色和程序發生交互的流程，我們如何進行操作，系統如何進行反饋。任務流程與需求文檔中的業務流程并不一樣。雖然它們都是流程圖，但業務流程更偏向于業務限制、后臺邏輯等，并不過分注重用戶的操作邏輯。而任務流程則需要關注用戶如何操作、界面如何反饋等，從而引導用戶完成用戶目標。（6）產品結構圖編號02-08產品結構圖是綜合展示產品信息和功能邏輯的圖表，簡單說產品結構圖就是產品原型的簡化表達。編號02-08產品結構圖的作用是：它能夠在前期的需求評審中或者其他類似場景中作為產品原型的替代，因為產品結構圖相對于產品原型，其實現成本低，能夠快速對產品功能結構進行增、刪、改操作，減少PM（項目經理）在這個過程中的實現成本。（7）線框圖頁面線框圖，是通過圖形化的表達形式，闡述產品在頁面層面的信息。頁面線框圖主要由4個要素構成：頁面標題：也就是每一個頁面的對應標題，一般就是導航欄標題。頁面內容：以黑白為主，保證信息規整易讀。交互說明：用標簽將功能對應起來，包括交互邏輯、操作流程及反饋、元素狀態、字符限制、異常/特殊狀態、相關規則等等。主流程線：只需要畫出主流程線即可，千萬不能太多太雜，時刻考慮使用者的感受。編號02-09編號02-09【在這里，可以向學生說明：設計文檔中包含的元素，也就是本課程后續要涉及到的交互設計軟件所對標的制作內容，我們的制作設計文檔的過程，也就是交互軟件的應用過程】3.視覺設計階段…………………【思政融入（感受中國傳統美食文化融入家國情懷）】在視覺設計階段，交互設計師需要向視覺設計師介紹交互原型；對輸出的視覺設計方案，需要從交互角度予以評估，比如與交互設計初衷是否一致、內容的主次是否表達得當、是否有細節遺漏或錯亂等等。另外，“交互設計文檔”中的全局通用說明也將起到了很大的作用。視覺設計師可以通過全局通用說明，了解到整個產品界面中需要用到的控件、可以復用的界面、時間規范、缺省頁匯總，以便視覺設計師整理視覺規范，防止出高保真的時候遺漏界面。編號02-10【這里通過引入傳統美食App的交互視覺設計元素，進行傳統文化的融入】編號02-10產品需求分析確定后，進入了原型設計階段和視覺設計階段，這兩個階段有著承上啟下的作用，并且也是整個交互設計過程中輸出物最多的兩個階段，原型設計階段基本承載設計思路、設計方案、信息架構、原型線框、交互說明等內容。比如我們來看傳統美食App，中國小吃是民間智慧的一種體現，也是中國美食不可缺少的一部分，特色小吃就地取材，通常能夠突出地方的特色及風貌。這些特色經過需求分析之后，在原型設計階段對設計方案、信息架構、交互說明等內容進行評審確定后，由視覺設計人員進行與需求風格相匹配的元素設計，從而對原型設計進行高保真還原。（1）全局通用說明，指整個產品可通用或者復用的元素。一般是邊做文檔邊整理出來的，方便自己或者接手項目的設計師直接調用。（2）常用控件：通常我們將具有高度復用價值的控制整理在一起，方便及時調用。復用界面：就是全局可復用的一些內頁，比如選擇聯系人、獨立搜索頁等。(3)時間規范：在做產品的時候，首先就應該約定一個時間規范。不然各個端開發出來，我們會發現iOS編號02-11是斜杠的，Android是橫杠的，WEB是圓點的。編號02-11(4)缺省頁匯總：缺省頁一般包括加載失敗、加載中、網絡中斷和無數據的空頁面。為空的頁可以按照模塊整理在一起，方便UI設計師最后一起設計缺省頁，保持風格統一。開發/測試/驗收階段完成以上的設計階段后，我們將進入最后的測試與驗收階段，這一階段的工作需要了解以下幾點，才可以做到設計人員與開發人員的無縫結合1、開發實現過程中，若開發遇到一些交互上的疑問，需要實時跟進、討論、確定最終實現方案。2、測試用例編寫時，測試人員可能會在交互說明文檔的基礎上思考的更加全面，提出一些尚未考慮到的特殊操作場景。交互設計師需要思考、補充相應的交互設計說明。3、測試用例評審階段，需要確認所有的用例是否與交互文檔上一致。4、測試驗收階段，需要驗收最終的效果，看與交互原型是否一致，對于有出入的地方也要盡快跟進確認。搜集用戶反饋的方法………【重點】編號02-12在最后的App交互設計階段，對設計的結構需要整理用戶的反饋，以達到最佳的設計結果。編號02-121.搜集用戶反饋基本方式通常采用的方式是用戶調研、可用性測試、各種用戶反饋渠道搜集。交互設計師需要分析用戶反饋問題的合理性、是否需要優化。對于需要重視的反饋，需要思考設計方案、推進實現。2.A/B測試方案將App界面或流程的兩個或多個版本，在同一時間維度，分別讓兩個或多個屬性或組成成分相同（相似）的訪客群組訪問，收集各群組的用戶體驗數據和業務數據，最后分析評估出最好版本正式采用。A/B測試強調的是同一時間維度對相似屬性分組用戶的測試，時間的統一性有效的規避了因為時間、季節等因素帶來的影響，而屬性的相似性則使得地域、性別、年齡等其他因素對效果統計的影響降至最低。四、實踐技能訓練（一）布置訓練任務1.根據課上教師提供的市場素材分析App需求，形成需求分析報告2.嘗試根據需求整理出一份設計流程文本（二）實戰項目案例運用本節課所學習的內容，在沒有交互設計輔助軟件的基礎上，嘗試寫一篇App產品需求文檔，感受設計文檔中各個元素的銜接意義………………………【難點】教師重點指導：原型設計中的通用符號標注；App信息結構圖的三種表現方式（樹形圖，層級圖，魚骨圖）。【學生初次進行設計實踐，教師應多引導，幫助學生形成設計方案，指導學生完成文檔的初步繪制】五、課堂總結今天，我們主要結合App交互設計案例學習了設計流程、App設計文檔和其中的各種元素類型（泳道圖，線框圖，結構流程圖）等相關理論，也針對相關理論做了一些練習，想必同學們通過練習對App交互設計原理和App交互文檔制作有了一定的了解和融通。希望同學們課后繼續對你所接觸到的相關產品，用專業的眼光，分析交互產品的交互設計法則和App整體設計流程的基本原則，這樣有助于你們對知識點的更深入的理解。六、課后思考前面我們講到了App交互設計的基本工作思路，那么后續我們如何實現這些交互設計環節中的設計工作，而更為有效的表達我們的設計意圖呢？請同學們搜集一些有關App交互設計工具的資料，思考一下交互設計工具是如何與設計環節相切合的，下次課請同學們交流一下。另外，請同學們嘗試思考一下什么是交互設計，交互設計的目標體現在哪些層面，它們之間的聯系、收集一些相關的App資料。針對這些資料來給出一個定義與結論。并且預習和思考一下后續所涉及到的產品交互設計開發前期的項目管理等理論知識。編號03編號03-01學習任務一、團隊協作工具Teambition初識一、課程說明與要求1.課程說明Teambition是一款團隊協作工具，以「項目」為協作單元，提供了包括「任務」、「分享」、「文件」、「日程」和「群聊」等基本應用和豐富的插件功能，通過精心設計打造出體驗出色的應用，讓你和團隊成員隨時隨地參與協作。《團隊協作工具Teambition初識》共分為Teambition初識和Teambition的使用規范兩方面的內容。第一部分是對Teambition的功能進行總體介紹，第二部分介紹了Teambition功能的詳細使用規范。后面我們可以在一些設計案例中去實際使用這些功能。通過學習Teambition基礎使用方法，學生可以在后續項目管理搭建中更加得心應手，提高項目管理能力。2.工具材料準備說明本課的作業作品實踐需要同學們提前準備一些工具和材料，教師將提供軟件登錄鏈接。工具材料登錄鏈接備注Teambitionhttps://www.T/每臺電腦聯網登錄二、學情分析與課程導入1.學情分析本課程為軟件使用介紹課程，Teambition項目管理工具需要能更全面的梳理整個項目中所涉及的各個管理流程，需要學生在學習過程中，能通過自己搭建符合實際項目管理的各個流程環節。在學習Teambition工具時，要不斷思考項目管理中各個流程環節是否符合對項目的便捷管理，思考如何做到最完善、便捷的項目流程管理方案。2.課程導入在講之前我要知道我們為什么要用團隊協作軟件，因為工作和學習繞不開一個問題，就是與其他人進行溝通和協調，與上級和下級溝通，甚至于外部門的同事去溝通和協調。大部分人采用的是電話，微信或者郵件去溝通，而在溝通中達成的一些決議或者一些安排，往往都是停留在我們的口中，或者腦袋中，所有確定的事都能做到事事巨細，按時按量完成的人還是比較少的，對于團隊的領導人員，需要保證自己的團隊做到，目標清晰，分工明確、協同高效，獎懲分明。那么團隊協作軟件就會起到很大的作用。它可以實現無紙化，移動辦公，及時溝通，工作標準化的優點。本節課我們講主要講解Teambition團隊協作工具的使用方法規范。三、理論知識講解（一）Teambition初識1.Teambition是什么Teambition的核心是“協作”，它是一個高效的項目協作平臺，相比同類軟件，他的強大之處在于極編號03編號03-022.Teambition產品結構當創建一個項目的時候里面包含了一些應用跟插件，有任務看板、分享墻、文件庫、日程等等，通過這些不同的應用跟界面，可以快速拉通這個項目當中所需要呈現的信息。看板上可以隨時獲知【誰】要【做什么】、在【何時】完成、協同進展很輕松、跨團隊合作項目也可以高效落實到位。任務卡片承載任務相關的信息，減少信息在溝通過程的失真，場景化溝通，更加透明高效文件我們可以上傳自己做好的一些文件在Teambition上進行使用，分享功能可以把需要分享的任務分享給其他人員進行查看，日程功能添加新日程，可以把安排的會議或其他活動，添加參與者即可通知其他成員參加。【思政融入（要落實相關人員主體責任,明確職責分工,形成協同管理體系培養每個成員的團隊精神）】（二）Teambition的使用規范……………………【重點】1.Teambition項目首頁側欄顯示「我的項目」、「全部項目」以及企業內的自定義的項目分組。在項目分組側的「···」按鈕，可設置僅展示「我」參與的分組。Tips：只有企業擁有者、企業管理員和有權限創建項目分組的成員才可以看到項目分組創建的+按鈕。1.側欄收起/展開按鈕：點擊可操作將側欄收起或展開。2.搜索：可進行項目的搜索，也可選擇進入高級搜索。3.選取模板創建項目：可快速選擇常用的模板創建項目，同時也可點擊右上角三個點按鈕操作將此模塊隱藏或者不展示。4.項目展示區：展示星標項目、星標項目分組、我參與的項目。編號03編號03-03全部項目顯示企業內「我」參與的全部的項目、企業內公開的項目、未分組的項目、已歸檔的項目和在回收站中的項目。1.項目查看篩選項：分為「企業全部」、「企業公開」、「未分組項目」、「已歸檔項目」、「回收站」五類，默認以項目卡片視圖展示當前企業下「我」可見非參與的和參與的的所有項目。2.項目視圖設置：支持卡片視圖、列表視圖三種視圖，默認為卡片視圖。3.項目排序設置：按照「項目名稱」和「更新時間」兩種排序方式，默認按照項目名稱排序展示。4.項目分組菜單：點擊可操作遷入自己所在的其他企業空間中的項目到當前企業里面。需要操作者在兩個企業中擁有遷入和遷出項目的權限。導航欄導航欄位于首頁的左側。無論是進入查看項目內容還是查看待辦、任務內容的時均保持在頁面左側。1.T按鈕：在項目或者任務頁面中點擊后可快速回到企業首頁。2.項目：查看當前企業內的所有項目內容，進行團隊協作和項目任務管理。3.待辦：進入待辦應用。編號0編號03-044.網盤：進入網盤應用。5.日歷：打開日歷。通過日歷，你可以在一個界面中一目了然地看到自己在某一周或者一個月內的所有任務和日程。6.聊天：進入聊天應用，與團隊成員進行私信、群聊。7.工作臺：工作臺替換了原有「我的」功能，它以自定義卡片的形式，展現更多與你息息相關信息。8.時間視圖：它形象地呈現出項目的任務順序與持續時間，顯示每個活動的歷時長短，并支持自由調度。對于以項目為核心展開工作的團隊而言，能讓你注重項目過程管理的同時，也通過可視化的工具把控進度，改進工作流。9.更多：查看當前企業安裝和使用的其他應用工具，還可直接進入應用商店安裝更多應用進行使用。10.快速邀請：點擊按鈕后可快速邀請和添加企業成員，與你一起協作.11.全局創建：點擊藍色的加號按鈕，即可快速創建項目、任務、文件、日程和分享。12.通知：可查看所有Teambition內的通知。13.搜索：可以在當前企業組織中查找任務、項目、文件、日程、分享、文件夾或人員。同時也可進行高級搜索，將結果進行細分篩選。14.個人賬號頭像：點擊彈出操作菜單。可查看當前賬號加入或創建的企業，當前企業通訊錄，進行賬號設置、偏好設置、服務器切換以及登出賬號的操作。同時可點擊進入幫助中心、尋求在線支持、查看更新日志等內容。2.項目界面項目界面創建好項目后就進入到了項目界面。項目界面分為5個部分：①項目導航欄：左側展示當前項目已開啟的應用，可直接切換。右側顯示項目成員按鈕以及項目菜單，點擊可查看當前項目成員及角色，進入菜單可進行項目設置。②項目側欄：由搜索框、任務分組和項目視圖組成。搜索框從來查找項目分組或視圖，任務分組可以更好的管理不同類別的任務，視圖除了系統預設外還可自定義。編號0編號03-05③任務看板：項目中的任務會以卡片的形式展示在任務看板中。同時看板中的每一列即為任務列表，可以用來表示任務所處的階段或狀態。④任務看板操作欄：位于任務看板的左上角。可以切換看板視圖、按照條件篩選顯示任務、按照條件對任務排序展示，同時點擊最左邊三個點，可以導入導出項目內任務以及將任務看板切換為演示模式。⑤項目公告：位于左上角項目名稱右側，顯示為一個「i」。點擊可查看當前項目的項目公告，新加入項目或者新創建的項目有公告內容后進入項目即可看到。項目管理員和項目擁有者有權對公告內容進行更新。Tips：1.收起側欄可點擊側欄中間的三角箭頭，或點擊任務看板左上角的圖標按鈕。2.當項目公告被更新過但當前成員還未查看過時，項目成員進入項目時項目公告做藍點提示。3.項目公告更新方式支持markdown，支持更新到項目和項目模板中。項目菜單項目菜單位于項目界面的右上角，點擊即可展開查看。①項目設置：可以修改項目信息，設置項目偏好，進行任務設置，日程設置，分享設置，自動化規則，調整任務權限，或者退出和歸檔、刪除項目。②標簽：可以直觀地看到每個標簽所涉及到的任務、日程、分享或者文件的數量和具體內容。還可在標簽名稱右側的下拉菜單中選擇「編輯標簽」做相應修改。③應用中心：即應用商店。可開啟或關閉當前項目應用，也可以前往應用商店查看更多應用。④查看回收站：里面是當前項里被放入回收站的任務、文件、日程、分享等內容，可在回收站中徹底刪除和恢復。⑤復制項目鏈接：粘貼到其他對象評論框里即可進行快速關聯。⑥復制項目：快速將當前設置調整好的項目進行復制，方便快捷。普通項目還能跨企業復制。⑦保存為項目模板：將當前項目保存為企業級的項目模板，可以在企業內部共享。⑧訂閱項目內容至第三方日歷：將項目內容訂閱到第三方日歷上方便查看。Tips:項目可歸檔，也可放入項目首頁的項目回收站。任務只能放入回收站，無法進行任務的歸檔。工作流項目不支持跨企業復制。編號03編號03-06項目成員一、添加成員點擊右上角藍色按鈕「邀請新成員」。添加成員有三種方式：1.可直接選擇從部門或者群組中選擇需要添加的成員，或添加整個部門進入到項目中。2.如果需要添加的成員不在當前企業內，則可以在邀請彈框中輸入對方的郵箱號進行添加，他/她將收到項目邀請的郵件。3.可以點擊邀請界面右上角的「通過微信邀請」按鈕，對方可以訪問鏈接或掃描二維碼直接加入項目。管理員可以再次點擊重置邀請鏈接，邀請鏈接在48小時內有效。分配成員權限項目擁有者和項目管理員可以在項目成員列表中分配各項目成員所屬的權限組，并通過成員后面的標識作區分。鼠標移到需要修改的成員名字上，右側會出現下拉按鈕，點擊即可打開成員菜單，勾選對應權限組即可完成設置。需要注意的是，新的權限賦予之后請提醒成員及時刷新頁面以使新的權限生效。移除成員在「項目成員」列表中，可以隨時移除成員。移除成員分為兩種：1.該成員是單獨邀請進項目的，則直接在該成員的成員菜單中選擇「移除成員」即可。2.當該成員是通過添加整個部門添加進入項目時，在成員菜單沒有移除成員的選項。需要在成員列表中點擊成員所在的部門，鼠標移到部門點擊右側下拉按鈕進入部門菜單。在這里可以通過移除成員的數量占據部門數量的比例，來選擇：是「移除部門，并將部門成員從項目移除」，再在重新邀請成員；還是選擇「移除部門，但部門成員仍然留在項目內」，找到需要移除的成員在將該成員移出項目。主動退出項目點擊項目右上角「菜單」，進入「項目設置」。在「更多」操作中，除項目擁有者外的其他成員可以進行主動退出項目的操作。Tips:一旦你退出了該項目，你將不能查看任何關于該項目的信息。退出項目后，如果想重新加入，請聯系項目管理員。編號03-07編號03-07創建項目模板企業成員、管理員、擁有者，默認都有權限創建項目模板。企業管理員、擁有者默認擁有管理項目模板（編輯、刪除他人創建的項目模板）的權限，擁有這個權限可以管理企業內所有項目模板。創建項目模板、管理項目模板的權限在管理后臺，企業權限-企業角色-項目管理這里可以找到并配置。點擊創建后，會彈出選擇項目模板的彈窗，選擇右上角的新建模板。在全部模板中找到新建模板選擇之后，會進入模板編輯頁面，可以先在彈窗中設置模板基本信息，上傳模板封面、編輯項目模板名稱和項目模板簡介。模板權限設置默認是全企業可見，點擊后可以進行修改。編號03編號03-08公開性為全企業可見的情況：可以點擊+號添加模板管理員。被添加為模板管理員的賬號默認擁有可管理權限，即使在管理后臺沒有管理項目模板的權限，也可以管理（編輯、刪除等）這一個項目模板。如果不想這個管理員繼續擁有管理權限，可以點擊右側的可管理，并選擇移除。模板管理員默認可以修改其他賬號權限。公開性為僅成員可見的情況：可以點擊+號添加模板成員。被添加為模板成員的賬號默認擁有可見權限，只有在成員列表中的賬號可以看見并使用這個項目模板。如果想要這個賬號擁有管理此項目模板的權限，可以點擊右側的可見，改為可管理。如果想要這個賬號不再看到此模板，可以選擇移除。設置好之后可以點擊右下角的保存更改。之后如果還需要對模板基礎信息進行編輯，可以點擊頂層的編輯按鈕，再次打開這個彈窗。設置項目模板內容和之前設置項目模板時的操作一致，可以在模板中設置好內容，點擊右上角保存模板即可。編輯已有項目模板找到創建項目的入口。點擊后，可以在選擇項目模板的彈窗中找到之前創建的項目模板。如果找不到想要的模板，可以點擊右上角全部模板。在企業模板下，可以看到企業中有權限看到的模板，鼠標移動到項目模板卡片上，會顯示出創建者名稱。如果有管理這個項目模板的權限，模板卡片右上角會出現編輯、刪除的圖標，點擊后可以進行對應操作。任務的創建點擊任務階段下的「添加任務」，輸入任務標題，設置執行者，添加參與者，點擊創建即可。每輸入一項任務按下回車鍵后，你就可以快速添加下一項任務。如果復制包含多段文字的文本，粘貼至任務標題的文本框后，系統會識別換行符，幫助你批量創建多個任務。編號03-09編號03-09任務板在項目默認的看板視圖下，我們為每個任務分組設置了未完成、進行中、已完成三個默認階段。每個任務列表中，任務以卡片的形式顯示，支持鼠標拖拽到下一個列表，普通項目也可以直接上下拖動任務排序。任務詳情頁彈窗式任務詳情頁分為左右兩個區域，左側區域主要呈現的是任務的標題、字段、子任務和關聯等信息，右側區域主要呈現的是任務的參與者、動態和評論等信息。四、實踐技能訓練（一）布置訓練任務任務1：根據所學的Teambition使用規范，進行項目搭建時操作熟系每個功能的用法。任務2：從Teambition項目模板中查看每個項目模板的基礎結構。（二）實戰項目案例根據Teambition使用規范搭建一個簡單的項目。……………【難點】教師重點指導：根據Teambition使用規范的合理使用。【學生初次進行設計實踐，教師應多引導，幫助學生形成根據Teambition使用規范了解，指導學生完成項目搭建】五、課堂總結今天，我們主要學習了Teambition項目協作工具的使用原因以及使用規范，也針對相關操作進行了練編號03編號03-10六、課后思考前面我們講到了Teambition項目協作工具的使用原因以及使用規范，這是以后的團隊協作項目搭建的基礎操作，大家有必要多多聯系。請同學們搜集一些有關Teambition項目案例，思考一下這些項目搭建的特點，下次課請同學們交流一下。另外，請同學們預習和思考一下下次課思維導圖的作用及如何構建思維導圖。編號04編號04-01學習任務二、網頁交互設計規劃-思維導圖工具XMind一、課程說明與要求1.課程說明“思維導圖”是一種應用于記憶、學習、思考等的有效思維模式，利于人腦的擴散思維的展開。思維導圖軟件是一個創造、管理和交流思想的通用標準，其可視化的繪圖軟件有著直觀、友好的用戶界面和豐富的功能，學好思維導圖的應用，可以幫助我們有序地組織思維，在交互設計工作和資源管理、項目進程方面都有很大的幫助。下面我們可以在設計案例中去體會思維導圖的作用。在交互設計實踐方面，培養學生使用思維導圖工具繪制web產品交互設計中的一些架構圖。2.工具材料準備說明本課的實踐需要在同學們計算機中下載并安裝操作軟件，教師將在下面的表格中提供下載鏈接，與使用說明。軟件工具下載鏈接備注XMind/每臺電腦安裝二、學情分析與課程導入1.學情分析本課程授課對象為藝術專業學生，是在藝術專業中設立的一門邏輯思維較強的設計類課程，作為一門實踐性較強的課程，針對學生對當前市場應用需求普遍認知不強，或有較多偏差的情況，強調進行引導教學，融入市場多元化理念。另一方面，學生對新興的事物接受比較快，對所選擇的專業感興趣，獲取知識的主動性較強。2.課程導入我們學習思維導圖，那么什么是思維導圖，使用什么工具來實現，這在設計領域是比較常用的一個術語和應用，比如我們列大綱、寫進度、記筆記，都是思維導圖的一種體現。下面我們針對思維導圖的應用及特性，對其做一個詳細的講解三、理論知識講解（一）思維導圖軟件XMind的介紹1.什么是思維導圖“思維導圖”是一種應用于記憶、學習、思考等的有效思維模式，利于人腦的擴散思維的展開。思維導圖是一種非常有用的思維工具，其創始人是東尼·博贊（TonyBuzan），他因此以“大腦先生”聞名國際，是將思想圖像化的技巧，使用思維導圖的過程，也是將知識結構圖像化的過程。編號04編號04-02

2.思維導圖軟件-xmindXMind是一款非常實用的商業思維導圖軟件，應用全球最先進的軟件架構

，全力打造易用、高效的可視化思維軟件，強調軟件的可擴展、跨平臺、穩定性和性能，致力于使用先進的軟件技術幫助用戶真正意義上提高生產率。XMind不僅可以繪制思維導圖，還能繪制魚骨圖Fishbone、樹形圖Tree、邏輯圖LogicChart、組織結構圖Org；并且，可以方便地從這些展示形式之間進行轉換。可以靈活的定制節點外觀、插入圖標;含有豐富的樣式和主題。可以導出word、excel、HTML、png圖片、PDF等多種格式；并支持Windows/Mac/Linux/iOS/瀏覽器等多平臺。（二）XMind思維導圖的作用和特性………【重點】1.xmind思維導圖的作用（1）思維管理XMind在企業領域有很廣泛的應用。在企業中它可以用來進行會議管理、項目管理、信息管理、計劃和時間管理、企業決策分析等；（2）匯報演示XMind提供了一種結構化的演示模式；在XMind中進行演示，為用戶提供縱向深入和橫向擴展兩個維度的選擇，這樣用戶在進行演示的時候，可以根據現場的反饋及時的調整演示的內容。（3）與辦公軟件協同工作XMind的文件可以導出成Word、PPT、PDF、圖片、TXT等格式，這樣我們就可以和沒有安裝XMIND的其它用戶分享思維圖；可以方便的將XMind繪制的成果與其他人共享。編號04編號04-03編號04編號04-042.思維導圖的特性(1)提高我們的學習速度和效率；(2)激發聯想與創意，將各種零散的智慧、資源等融會貫通成為一個系統；(3)形成系統的學習和思維的習慣，能夠達到我們想達到的目標，包括：快速的記筆記，輕松的表達溝通、演講、寫作、管理等等！3.XMind思維導圖的優勢(1)純中文(2)適合國人的思考方式(3)更易用、零學習曲線編號04編號04-05(4)強大的工作簿(5)個性化窗口布局(6)兼容其他思維導圖軟件(7)降低客戶成本【課后思考：第一，思維導圖的作用；第二，思維導圖的作用；第三，xmind思維導圖的優勢】（三）xmind軟件的操作……………………【重點】1.基礎功能-創建打開軟件，在“選擇風格”對話框尋找合適的樣式---選擇想要的風格樣式，即可創建一個思維導圖編號04編號04-062.基礎功能-界面介紹菜單欄大綱預覽區常用命令區格式設置區分支主題：在中心主題下，按enter鍵，創建分支主題子主題：在分支主題，按下Tab鍵，創建子主題概要：選中選中一個主題或多個主題，點擊上方工具欄的概要即可添加概要編號04-07編號04-07外框：想強調和凸顯某些主題內容，可以用外框將這些主題框在一起，并進行注釋，xmind提供多種樣式調整，包括線條顏色、字號字體等選項。聯系：是任意兩個主題之間用于顯示特殊關系的自定義連接線。筆記：將需要長文解釋說明的內容放入筆記中，需要時再進行查看。畫布概覽：呈現了思維導圖的全貌；3.擴展功能圖片：可插入本地圖片超鏈接：可以將網頁或文件用超鏈接的方式插入主題中，點擊即可直接跳轉至相應的內容。編號04編號04-084.思維導圖的修改在我們繪制思維導圖過程中，會對不合適的內容進行調整，我們可以進行下面的操作1）選擇任意主題（中心主題除外），按下Delete鍵即可刪除該主題及其所屬的所有子主題；2）選擇任意主題拖拽可以調整這個主題及其所屬子主題在思維導圖中的位置；3）選擇任意一個或者多個主題進行拖拽可將其放到其他主題之下。5.思維導圖的導出與保存保存：Ctrl+S直接保存，選擇文件保存地址即可，文件后綴名為.xmind導出：png圖片格式、PDF格式、PPT格式。編號04編號04-09（四）如何繪制信息架構圖……………………【難點】信息架構圖主要適用于產品信息構成比較復雜需要考慮優化的情況，比如內容型產品（web門戶網站、微博等內容比較豐富，功能比較多的網站），產品的信息結構對于用戶體驗就十分重要，需要用信息結構圖作為工具進行分析思考。繪制信息架構圖的要點（1）按照總分結構確定關鍵的一級節點（2）先繪制單個一級節點模塊的信息架構圖，之后再逐個完善（3）若某個頁面在不同的一級節點內出現，建議明確標識編號04編號04-10四、實踐技能訓練（一）布置訓練任務任務1：熟練使用xmind的基本工具操作任務2：嘗試使用xmind繪制web端產品信息架構圖。（二）實戰項目案例運用繪制架構圖的要點及基本工具的操作，進行web端電商平臺的產品信息架構圖的初稿繪制。…………【思政融入（以下內容感受中國電商的發展趨勢，樹立文化自信）】………【難點】中國互聯網絡信息中心發布的第47次《中國互聯網發展狀況統計報告》顯示，截至2020年12月，我國網民規模達9.89億；利用網絡新聞媒體獲取信息，借助網絡購物、網上外賣解決日常生活所需等成為當下社會發展的趨勢。數據顯示，截至2020年12月，我國網絡購物用戶規模達7.82億，占網民整體的79.1%。隨著我國經濟水平不斷提高以及消費者對網購接受程度的日益提升，電商產業市場規模亦持續擴大。編號04編號04-11那么針對電商平臺的應用及交互設計需求也逐漸增多，對我們的專業發展也越來越有利，在原型設計階段的頁面交互環節，我們需要了解產品信息結構，產品的信息結構對于用戶體驗就十分重要，需要用信息結構圖作為工具進行分析思考，信息結構圖主要適用于產品信息構成比較復雜需要考慮優化的情況，如內容型產品（博客、web門戶網站等）或購物型網站，在產品設計階段的概念化過程中，需要在產品功能框架已確定、功能結構已完善好的情況下才對產品信息結構進行分析設計，避免信息內容在展示過程中出現遺漏、混亂、重復；作為開發工程師建立數據庫的參考依據。案例分析：淘寶的信息結構與任務分析淘寶是阿里巴巴推出的一款多模式合一的在線購物應用，涵蓋了阿里巴巴旗下多網站的商戶、商品和生活服務資源，旨在為用戶提供一站式購物體驗。因其承載的內容龐大，因而相對于其他平臺產品，其信息結構更加復雜多元，核心在于通過合理的信息設計和多樣化功能以促成用戶為自己滿意的商品下單這一目標動作的實現。下面，我們從信息結構和任務設計上對淘寶如何促成其目標動作的實現進行分析。1、基本信息結構編號04-1編號04-12（1）首頁首頁的信息結構如上圖所示，分為首屏部分和非首屏部分，依次按照淘寶希望用戶關注的重要程度排序；首屏上，搜索、Banner和業務入口顯然是首屏優先級最高的，此外還有特價信息和特色商品推薦供閑逛用戶打開應用后有地可去；上劃頁面后的非首屏部分，按照用戶查找欲望深度的不斷加深而不斷個性化，直至猜你喜歡模塊。在首頁，大多數用戶購買需求的第一層（“我要什么”，“我大概要什么”）能得到較好的滿足，從整平臺邏輯設計來看，首頁的優先級也高于其他任何頁面，從返回邏輯可以看出（應用內返回的終點是首頁而不是其他一級頁面）。（2）逛逛編號04編號04-13淘寶逛逛用于形成一個類似“好物推薦”的板塊，在初期主要是用于分享好的產品，之后將會與商家合作，推廣商品。其實也就是另外一種宣傳和推廣的方式；淘寶逛逛的推出也是一種非常好的分享方式，達人們可以在這里收獲更多的粉絲群體，并且為大家分享好的商品。另一方面也有利于商家銷售商品，一舉兩得。它的特點是：商品屬性不會那么明顯了，而是更加強調消費者在無聊的時候打開手機淘寶到處“逛逛”的功能。這樣改版的目的自然是為消費者帶來沉浸式購物體驗，獲得消費者更多的停留時間。（3）消息編號04-14編號04-14（4）購物車購物車的存在大多數情況下是滿足用戶購買多件商品或是想購暫存需求，類似于實體超市的購物車。購物車的核心動作是結算，按鈕也格外顯眼；此外，用戶可以通過多選控件管理商品及查看總價格。該頁面仍然服務于用戶的最終下單。（5）我的淘寶編號04-15我的淘寶頁面中核心任務是用戶對訂單的管理，淘寶編號04-15（6）商品詳情頁商品詳情頁信息量也比較大，可以看出很多對買家購買決策影響的因素：在該頁面最顯眼的元素依次是商品圖像、價格、加入購物車和立即購買，它們在該頁首屏形成一個彎曲的視覺線，用戶沿著這條線關注與之相關的信息（諸如：郵費、銷量、評價等等），如果用戶仍然不達成下單意愿，向上滑動可以看到包括評分的商家信息和最新評論，進一步促進用戶產生購買決策。（7）訂單詳情頁編號04編號04-16當用戶進入訂單詳情頁，意味著兩種情況：一是用戶決定下單準備（或暫時放棄）付款，二是用戶付款后查看發貨信息和物流信息。前者情況下，該頁面的核心任務是促成用戶下單，后者情況下在于用戶查看物流和申請售后，在這些核心任務的驅動下，頁面展現出細微的差別，但都加亮提示了這些任務。3、橫向信息分析除了以上對每個頁面的梳理外，我們再從橫向對淘寶的信息進行梳理。（1）信息的聚合方式淘寶中最重要的兩種信息元素是商品和商家，通過以下方式將他們聚合為用戶顯示。a.通過業務屬性的不同對商品和商家進行聚合（例如首頁的天貓、聚劃算）；b.通過相似的類別對商品和商家進行聚合（例如首頁的類目）；c.通過具備某種相同的商品屬性對商品進行聚合（例如首頁的特色市場）；編號04編號04-17e.通過消費者的喜好進行商品聚合（例如首頁的猜你喜歡和店鋪推薦）；（2）信息的查找方式淘寶主要的信息查找方式有文字搜索和相機掃描，前者基于文字語音，后者基于圖像。文字搜索方面支持對三種屬性的元素（寶貝、天貓、店鋪）進行搜索，搜索時遇到細分屬性不同還支持直接點選跳轉，篩選條件根據優先級適當做了隱藏，基本符合用戶需求。拍立淘，利用手機拍照和手機中的圖片通過圖像識別技術識別出對應類別或具體的某件商品，經試用該功能能準確識別商品顏色和類別，至于具體某一件商品來說則和拍攝方式、角度和光源相關。（3）買家的消費引導淘寶在買家消費引導上做了很多嘗試，比如：占據首屏的“淘寶頭條”、“淘搶購”滿足了價格導向型的用戶需求，“有好貨”則滿足了品質導向型用戶的需求，它們都很好地引導了大部分的用戶群；而對于更加細分的需求則需要滑動才能看到，例如達人淘、猜你喜歡等等；同時在收藏店鋪下還列有同類用戶喜愛的店鋪，引導用戶更多地收藏和消費。4、小結綜上所述，淘寶作為一款電商應用，在設計的每個組成部分都致力于希望用戶達成購買期望商品這樣一個目標，雖然體量龐大但具備很強的邏輯性，是電商類應用的經典之作。通過淘寶的分析，我們更加清晰了產品設計時應始終圍繞產品目標展開，其中包括產品的戰略目標和產品的用戶目標，通過目標的分解得到每個界面達成的任務并思考信息結構的設計如何推進任務實現。教師重點指導：基本工具的操作及快捷鍵；繪制信息架構圖的要點。【實訓指導：學生初次接觸軟件進行設計實踐，教師應多引導，幫助學生形成設計初稿，指導學生完成信息架構圖初稿繪制】五、課堂總結今天，我們主要學習了思維導圖的概念、作用、特性，以及常用的思維導圖軟件xmind的操作及優勢、還有如何使用xmind來進行信息架構圖的繪制等相關理論，也結合交互設計案例相關理論做了一些練習，想必同學們通過練習對思維導圖有了一定的了解和掌握。希望同學們課后繼續對你所接觸到的相關作品或產品，用專業的眼光，分析思維導圖在交互設計中的應用，這樣有助于你們對知識點的更深入的理解。六、課后思考編號04編號04-18另外，請同學們從日常生活中收集各類web端產品，針對產品嘗試分析出信息結構，繪制出信息結構圖，預習和思考一下下次課網頁交互設計中原型設計階段的流程圖的介紹。編號05編號05-01學習任務二、Visio的具體應用一、課程說明與要求1.課程說明Visio是一款便于IT和商務人員就復雜信息、系統和流程進行可視化處理、分析和交流的軟件。使用具有專業外觀的OfficeVisio圖表，可以促進對系統和流程的了解，深入了解復雜信息并利用這些知識做出更好的業務決策。本階段課程分為三個部分，第一部分為Visio簡介，了解Visio啟動界面的使用；第二部分為Visio軟件應用，介紹了Visio中制作圖表所需要掌握的相關技術，以及制作常用類型圖表的方法和技巧；內容主要包括繪圖前需要了解的基本概念、繪圖文件和繪圖頁的基本操作與管理、自定義設置Visio繪圖環境、形狀的基本概念和特性、繪制與編輯形狀、選擇文本、輸入與編輯文本、設置文本格式、繪制與連接形狀、選擇形狀、調整形狀的大小和位置、設置形狀的布局和行為、使用容器對形狀分組、使用圖層管理形狀、設置形狀的邊框和填充效果、為形狀添加數據、使用數據圖形顯示數據等。第三部分為Visio流程的使用，介紹了Visio流程圖使用的注意事項以及網頁流程圖的制作案例。通過學習Visio基礎使用方法和項目綜合案例，學生可以全面、深入、透徹地理解Visio流程圖制作工具的使用方法，提高流程圖設計制作能力。2.工具材料準備說明本課的作業作品實踐需要同學們提前準備一些工具和材料，教師提供軟件下載鏈接。工具材料下載鏈接備注Visio/visio/visio-professional-2019每臺電腦安裝二、學情分析與課程導入1.學情分析本課程為軟件使用介紹課程，Visio流程圖制作工具需要能更全面的梳理整個項目中所涉及的各個流程，需要學生在學習過程中，能通過自己思考在網頁設計中一個完整的交互需要的各個流程環節。在學習Visio流程圖工具的時，要不斷思考各個流程環節是否符合交互設計理念，思考如何做到最完善的交互流程圖。2.課程導入我們學習Visio流程圖制作，那么大家肯定會想，為什么要制作交互流程圖，實際上在瀏覽一個網頁時最大的功能就是我們要與網頁進行交互，而網頁交互的整體邏輯思維需要我們在設計網頁之初就要進行交互流程圖的制作，來規劃交互是否完善，是否更符合交互設計理念，這些在進行網頁制作時，都需要使用Visio制作交互流程圖，在整體上進行把控，才能在制作中提前規避一些錯誤的交互方式，提高設計效率。本節課我們講主要講解Visio流程圖的使用方法以及在制作流程圖時需要注意的事項。三、理論知識講解（一）Visio簡介1.Visio繪制的8種圖表類別在工作中經常需要去給很多人進行演講，或者進行培訓和與同事，客戶，以及領導進行討論，通過文字進行討論效率還是比較低的，而通過使用Visio軟件可以把工作中各種各樣的信息通過圖表的形式來展現出來這樣就可以提高和客戶，同事以及領導的交流，并且能方便做出更好的決策。而Visio繪制的圖表大致可以分為8種：商務上遇到的組織架構圖，家具以及辦公領域的平面布置圖；工程專業的設計圖表；常規的形狀可以組合起來繪制出非常強大的圖表；在工作中設計到的項目日程安排和管理；流程圖是在企業或者政府文檔中的流程圖表使用較多的；IT行業的網絡，軟件數據庫和網站的圖像可以使用Visio繪制圖表。2.Visio啟動界面要學習一款軟件需要先了解這個軟件的啟動界面，這樣才能在后續使用時快速定位到我們需要的操作的預訂位置。可以看到Visio的啟動界面上有“開始”、“新建”、“打開”、“賬戶”、“反饋”以及“選項”六個按鈕這幾個菜單可以幫我創建和打開Visio文檔，以及文檔設置等操作。，（二）Visio軟件應用……………【重點】1.Visio軟件界面編號05編號05-03精神、-03頂部的左側自定義快速訪問欄，設定一些對文件的基本操作，保存，新建，打開等等。右側的是登錄和設置功能區顯示隱藏的一個設置。在選項卡下的命令中office把功能相近的命令使用豎線的方式分隔開來。Visio功能區除了文件按鈕特殊是打開之前講過的文件選項卡界面外，其他的功能都是對Visio文檔內容編輯的設置，對于熟系office軟件的人員來說應該都見怪不怪了。Visio繪圖的三要素根據這個連接圖可以看出Visio繪圖的三要素分別是“形狀、文本和連接線”。編號05-04編號05-04選擇形狀,可以通過鼠標框選進行鼠標選中，也可以按住Ctrl鍵可以選中多個形狀，當同時選中多個形狀的話，想要去掉某個形狀就可以按住Ctrl鍵再次點擊不想選中的形狀即可去除該形狀的選中，如果想要一次全部選中可以按住Ctrl+A。第二種在功能區選項卡的開始選項中的編輯中找到選擇可以看到全選按鈕就是把畫布中的所有形狀全部選中另一個就是選擇區域，就是框選進行選擇需要注意的是這時選擇形狀必須全部框選后才能選中，只選擇一部分的話是沒有辦法選中的。還有一個套索選擇，這樣就可以繪制一個區域然后就可以把套索內的形狀進行選中。連接線連接的是形狀，它是基于形狀才會有意義的。.如果想把這兩個形狀連接起來有這么幾種方式，第一種在開始選項卡，在工具這里有一個連接線，和后邊繪圖工具里面的線條首先使用線條連接形狀，選中線條后當鼠標移動到形狀上方的時候，在形狀的上就會出現黑色的連接點，如果沒有黑色連接點的話，可以看看視圖選項界面的視覺幫助的連接點是否勾選上了，連接兩個形狀需要先從一個形狀的連接點，然后把鼠標移動到另一個形狀上這時在另一個形狀上也會出現黑色的連接點，然后把鼠標放到連接點松開鼠標就可以和另一個形狀進行連接了,編號05編號05-05同樣我們也可以使用任意多邊形來進行連接操作。另外一種方式，就是選用連接線的方式進行連接當Visio的兩個形狀進行連接時Visio會自動計算出一個連接路徑，需要注意這個連接線是Visio自己計算出來的，同時也可以看到在連接線上有很多小藍點，當吧鼠標懸停在這些小藍點上時就可以進行移動，也就是說我們可以對Visio自動計算出來的連接線路徑進行調整，同時針對這個連接線我們也可以右鍵，調整連接線的類型，當前的為直角連接線，我們也可以選擇直線連接線、曲線連接線，當我們選擇后可以看到這個連接線的類型就發生了相應的變化，最后我們也可以把連接線重置為Visio默認的連接線路徑。到這里我們應該可以看到這兩種連接方式有一個區別點，我們使用線條直接進行連接時，它是對于我們自己的繪制來進行變化的，而連接線的方式連接的是根據Visio自動計算出來的一個路徑，我們可以通過手動來調整路徑，也可以通過鼠標右鍵來進行連接類型的調整。編號05-06編號05-06另一個區別就是線條連接線沒有箭頭方向，而連接線的連接線可以向第二個形狀進行箭頭指示。線條連接線可以使用鉛筆功能進行形狀的改變而連接線的連接線只能通過連接線的點進行修改路徑文字也是基于形狀來對形狀進行說明和講解的，所以這里的核心點就是形狀。要給畫布中的形狀添加文字有以下這些方法：這樣我們就知道了給形狀添加文