數(shù)字媒體交互設(shè)計（張靖瑤 慕課版）教案 備課筆記匯總?cè)?1-32 1.1 網(wǎng)頁交互設(shè)計流程初識-6.2 unity虛擬交互工具介紹

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

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

2.思維導圖軟件-xmindXMind是一款非常實用的商業(yè)思維導圖軟件，應(yīng)用全球最先進的軟件架構(gòu)

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