第二章2-網(wǎng)頁交互設(shè)計(jì)規(guī)劃-思維導(dǎo)圖工具XMind-備課筆記

編號04編號04-01學(xué)習(xí)任務(wù)二、網(wǎng)頁交互設(shè)計(jì)規(guī)劃-思維導(dǎo)圖工具XMind一、課程說明與要求1.課程說明“思維導(dǎo)圖”是一種應(yīng)用于記憶、學(xué)習(xí)、思考等的有效思維模式，利于人腦的擴(kuò)散思維的展開。思維導(dǎo)圖軟件是一個(gè)創(chuàng)造、管理和交流思想的通用標(biāo)準(zhǔn)，其可視化的繪圖軟件有著直觀、友好的用戶界面和豐富的功能，學(xué)好思維導(dǎo)圖的應(yīng)用，可以幫助我們有序地組織思維，在交互設(shè)計(jì)工作和資源管理、項(xiàng)目進(jìn)程方面都有很大的幫助。下面我們可以在設(shè)計(jì)案例中去體會思維導(dǎo)圖的作用。在交互設(shè)計(jì)實(shí)踐方面，培養(yǎng)學(xué)生使用思維導(dǎo)圖工具繪制web產(chǎn)品交互設(shè)計(jì)中的一些架構(gòu)圖。2.工具材料準(zhǔn)備說明本課的實(shí)踐需要在同學(xué)們計(jì)算機(jī)中下載并安裝操作軟件，教師將在下面的表格中提供下載鏈接，與使用說明。軟件工具下載鏈接備注XMind/每臺電腦安裝二、學(xué)情分析與課程導(dǎo)入1.學(xué)情分析本課程授課對象為藝術(shù)專業(yè)學(xué)生，是在藝術(shù)專業(yè)中設(shè)立的一門邏輯思維較強(qiáng)的設(shè)計(jì)類課程，作為一門實(shí)踐性較強(qiáng)的課程，針對學(xué)生對當(dāng)前市場應(yīng)用需求普遍認(rèn)知不強(qiáng)，或有較多偏差的情況，強(qiáng)調(diào)進(jìn)行引導(dǎo)教學(xué)，融入市場多元化理念。另一方面，學(xué)生對新興的事物接受比較快，對所選擇的專業(yè)感興趣，獲取知識的主動(dòng)性較強(qiáng)。2.課程導(dǎo)入我們學(xué)習(xí)思維導(dǎo)圖，那么什么是思維導(dǎo)圖，使用什么工具來實(shí)現(xiàn)，這在設(shè)計(jì)領(lǐng)域是比較常用的一個(gè)術(shù)語和應(yīng)用，比如我們列大綱、寫進(jìn)度、記筆記，都是思維導(dǎo)圖的一種體現(xiàn)。下面我們針對思維導(dǎo)圖的應(yīng)用及特性，對其做一個(gè)詳細(xì)的講解三、理論知識講解（一）思維導(dǎo)圖軟件XMind的介紹1.什么是思維導(dǎo)圖“思維導(dǎo)圖”是一種應(yīng)用于記憶、學(xué)習(xí)、思考等的有效思維模式，利于人腦的擴(kuò)散思維的展開。思維導(dǎo)圖是一種非常有用的思維工具，其創(chuàng)始人是東尼·博贊（TonyBuzan），他因此以“大腦先生”聞名國際，是將思想圖像化的技巧，使用思維導(dǎo)圖的過程，也是將知識結(jié)構(gòu)圖像化的過程。編號04編號04-02

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

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