簡(jiǎn)介這是一份圍繞人機(jī)界面設(shè)計(jì)課程的PPT學(xué)習(xí)教案面向計(jì)算機(jī)、設(shè)計(jì)類及相關(guān)專業(yè)師生也適合對(duì)用戶體驗(yàn)與人機(jī)交互感興趣的自學(xué)者。內(nèi)容從人機(jī)界面定義、起源與發(fā)展講起系統(tǒng)梳理廣義與狹義人機(jī)界面的區(qū)別并重點(diǎn)展開硬件界面中的輸入輸出裝置鍵盤、鼠標(biāo)、觸摸屏、視覺顯示器、語音合成等與常見顯示技術(shù)比較同時(shí)涵蓋軟件界面的發(fā)展演進(jìn)、設(shè)計(jì)原則、用戶心理模型與測(cè)試評(píng)價(jià)方法結(jié)合無障礙設(shè)計(jì)理念幫助學(xué)習(xí)者建立從理論到實(shí)踐的整體認(rèn)知。整份資源為1個(gè)pptx文件壓縮包大小約665KB內(nèi)容組織以章節(jié)推進(jìn)共50頁配有系統(tǒng)化知識(shí)框架和具體案例便于課堂講解、自學(xué)復(fù)習(xí)或作為課程設(shè)計(jì)參考。目前已有95人瀏覽/學(xué)習(xí)是一份精簡(jiǎn)實(shí)用的入門級(jí)教學(xué)材料。 人機(jī)界面設(shè)計(jì)這門課說難不難說簡(jiǎn)單也絕不容易。它不像操作系統(tǒng)那樣全是硬核機(jī)制也不像網(wǎng)頁開發(fā)那樣一行代碼跑出個(gè)效果就完事它卡在技術(shù)與用戶之間要求你同時(shí)理解人的認(rèn)知習(xí)慣和機(jī)器的呈現(xiàn)邏輯。正因如此這門課的教學(xué)資源里PPT教案反而成了最常用也最好用的載體——一份好的人機(jī)界面設(shè)計(jì)PPT不只是知識(shí)點(diǎn)的羅列它本身就應(yīng)該是人機(jī)界面設(shè)計(jì)的一次實(shí)踐。我相信很多老師備課、學(xué)生自學(xué)時(shí)都遇到過類似的問題教材太厚知識(shí)點(diǎn)散落在各個(gè)章節(jié)交互原則講完又跳去講輸入設(shè)備剛看完可用性評(píng)估下一頁又成了菜單設(shè)計(jì)。整套內(nèi)容如果沒有一條清晰的線索串起來學(xué)起來很容易產(chǎn)生每個(gè)字都認(rèn)識(shí)但整體不知道在講什么的挫敗感。而這套《人機(jī)界面設(shè)計(jì)PPT學(xué)習(xí)教案.pptx》要解決的正是這種知識(shí)碎片化的問題。接下來這篇內(nèi)容我會(huì)按一個(gè)比較實(shí)用的路徑來拆解這套PPT教案先說說人機(jī)界面設(shè)計(jì)被組織進(jìn)教學(xué)課件時(shí)通常采用怎么樣的知識(shí)邏輯再挑核心章節(jié)把概念背后的為什么講透然后給出一套能直接抄作業(yè)的講課與自學(xué)流程最后聊聊做這類課件容易踩的坑以及我的一些實(shí)操心得。1. 這套PPT教案背后的知識(shí)組織邏輯拿到一份名為人機(jī)界面設(shè)計(jì)PPT學(xué)習(xí)教案的資源先別急著翻頁看內(nèi)容而是要想清楚一件事這門課的核心知識(shí)結(jié)構(gòu)是什么因?yàn)镻PT教案的質(zhì)量高低本質(zhì)上取決于作者對(duì)知識(shí)結(jié)構(gòu)的理解深度。如果只是把教材章節(jié)標(biāo)題謄抄一遍到幻燈片上那這份教案就只能用于應(yīng)付檢查談不上教學(xué)價(jià)值。人機(jī)界面設(shè)計(jì)這門學(xué)科發(fā)展到現(xiàn)在已經(jīng)形成了幾個(gè)相對(duì)固定的知識(shí)板塊大多數(shù)高校教材和培訓(xùn)課程都是圍繞這樣四條線展開的用戶與認(rèn)知研究人怎么感知、怎么思考、怎么記憶這是界面設(shè)計(jì)的底層依據(jù)。包括感覺通道特性、知覺組織原則、注意的分配與局限、記憶的編碼與提取等。交互設(shè)備與交互技術(shù)輸入輸出設(shè)備如何影響交互方式。從最早的鍵盤鼠標(biāo)、觸摸屏到語音交互、眼動(dòng)追蹤、手勢(shì)識(shí)別每一種設(shè)備的引入都會(huì)帶來交互范式的改變。交互界面設(shè)計(jì)原則這是最好考試也最好講的部分如一致性、反饋、可逆性、容錯(cuò)性等。原則背后其實(shí)都有認(rèn)知心理學(xué)和工程經(jīng)驗(yàn)的支撐?？捎眯栽u(píng)估與設(shè)計(jì)流程可用性是什么、怎么測(cè)、什么時(shí)候測(cè)加上以用戶為中心的設(shè)計(jì)流程UCD。一個(gè)優(yōu)秀的教案不會(huì)把這四塊內(nèi)容平鋪直敘地堆在一起而是會(huì)用一條設(shè)計(jì)主線把它們串起來。以我接觸過的幾份高口碑課件為例它們幾乎都遵循同一個(gè)敘事邏輯先講清楚人機(jī)界面到底在解決什么問題再指出人的限制條件有哪些然后在此基礎(chǔ)上推導(dǎo)出所以設(shè)計(jì)應(yīng)該遵循什么原則最后落到怎么驗(yàn)證設(shè)計(jì)是否達(dá)標(biāo)。這條邏輯鏈的價(jià)值在于它不是讓學(xué)死記硬背原則條目而是讓讀者理解每一條設(shè)計(jì)原則都是從哪里來的。比如為什么要強(qiáng)調(diào)一致性因?yàn)槿说膶W(xué)習(xí)依賴遷移用戶一旦習(xí)慣了某個(gè)操作邏輯就會(huì)期望它在別的地方同樣適用為什么要強(qiáng)調(diào)反饋因?yàn)槿说牟僮餍枰粋€(gè)確認(rèn)閉環(huán)沒有反饋的操作會(huì)讓人產(chǎn)生強(qiáng)烈的不安全感。當(dāng)你理解了機(jī)制原則就不再是需要死記的考點(diǎn)而變成了自然而然的設(shè)計(jì)常識(shí)。而這套PPT教案里比較難得的一點(diǎn)是它把這一邏輯落實(shí)到了頁面組織上每一章開頭有本章要解決什么問題的導(dǎo)入頁中間穿插案例圖片和對(duì)比示意每章結(jié)束有小結(jié)和思考題。這樣處理的好處非常明顯教師可以直接按頁面順序推進(jìn)教學(xué)學(xué)生課后回看課件時(shí)也能根據(jù)標(biāo)題層級(jí)快速找回課堂邏輯而不是在一堆堆滿文字的幻燈片里翻找重點(diǎn)。2. 把核心概念講透交互原則、可用性評(píng)估與設(shè)計(jì)流程很多初學(xué)者對(duì)人機(jī)界面設(shè)計(jì)的第一印象是界面美化覺得這門課就是教人怎么把按鈕畫好看、顏色配協(xié)調(diào)。這個(gè)誤解很容易讓學(xué)習(xí)者走偏方向把大量精力花在視覺包裝上卻忽視了界面背后真正的邏輯。這份教案在編排上花了很大篇幅糾正這種認(rèn)知我挑了三個(gè)最容易理解偏、也最重要的板塊展開說說。2.1 交互設(shè)計(jì)原則不是正確的廢話教案里講交互設(shè)計(jì)原則時(shí)不會(huì)只說設(shè)計(jì)要有一致性操作要可逆這樣的口號(hào)而是會(huì)把每條原則放到典型場(chǎng)景里去解釋。以一致性為例它的完整解釋至少包含三個(gè)層次視覺一致性、行為一致性和隱喻一致性。視覺一致性指的是同類元素長得一樣行為一致性指的是同類操作產(chǎn)生同類結(jié)果隱喻一致性則是指界面元素要符合用戶在物理世界中的既有認(rèn)知比如垃圾桶圖標(biāo)代表刪除、放大鏡代表搜索。我一直覺得隱喻一致性是初學(xué)者最容易忽略、但實(shí)際影響最大的一條。原因在于人的認(rèn)知習(xí)慣是先調(diào)用已有經(jīng)驗(yàn)再處理新信息。如果界面中的符號(hào)與用戶腦中的既有概念發(fā)生沖突比如用一個(gè)不太常見的圖形表示保存用戶第一反應(yīng)一定是猶豫而不是點(diǎn)擊。教案里如果能把這三層一致性講清楚再配幾個(gè)反例學(xué)生基本就能立刻理解原則和口號(hào)的區(qū)別。再比如反饋原則教案里會(huì)引用一個(gè)很經(jīng)典的例子提交表單時(shí)如果用戶點(diǎn)擊按鈕后頁面沒有任何反應(yīng)多數(shù)人的第一動(dòng)作是再次點(diǎn)擊有些用戶甚至?xí)B續(xù)點(diǎn)擊五六次。這本質(zhì)上是因?yàn)橄到y(tǒng)沒有給出已收到操作的反饋用戶只能通過重復(fù)操作來確認(rèn)。放到實(shí)際場(chǎng)景中這就是按鈕防重復(fù)提交、加載動(dòng)畫、Toast提示這些設(shè)計(jì)存在的合理性來源。把原則講成為什么之后學(xué)生在做課程設(shè)計(jì)時(shí)才會(huì)主動(dòng)去考慮我的界面里哪些地方缺少反饋而不是在答辯時(shí)被老師問一句這里用戶怎么知道操作成功了就卡住。2.2 可用性評(píng)估五個(gè)維度和一套可操作的打分標(biāo)準(zhǔn)可用性評(píng)估是這份教案里實(shí)操性最強(qiáng)的一塊。如果你去翻市面上的主流教材可用性基本都會(huì)引用國際標(biāo)準(zhǔn)ISO 9241-11的定義特定用戶在特定使用場(chǎng)景下達(dá)到特定目標(biāo)的有效性、效率和滿意度。這個(gè)定義很嚴(yán)謹(jǐn)?shù)珜?duì)學(xué)生來說不夠好用——考完試就忘了做項(xiàng)目時(shí)也用不上。所以教案在講可用性時(shí)會(huì)進(jìn)一步拆成五個(gè)可感知的維度可學(xué)習(xí)性、使用效率、可記憶性、錯(cuò)誤率和主觀滿意度。這五個(gè)維度分別回答了五個(gè)問題新手第一次用能不能快速上手熟練用戶操作快不快隔了一段時(shí)間不用還能不能想起來怎么用用戶操作時(shí)容不容易出錯(cuò)、出錯(cuò)后能不能輕松恢復(fù)用戶用完之后愿不愿意繼續(xù)用為了讓這五個(gè)維度變得可測(cè)量教案里通常會(huì)引入一個(gè)經(jīng)典的評(píng)估方法——啟發(fā)式評(píng)估也就是讓評(píng)估者對(duì)照一組可用性啟發(fā)規(guī)則逐項(xiàng)檢查界面找出違反規(guī)則的地方。我自己的經(jīng)驗(yàn)是直接讓初學(xué)者對(duì)照十條啟發(fā)規(guī)則去評(píng)估一個(gè)App界面效果奇好。因?yàn)樗麄儾恍枰莆崭呱畹慕y(tǒng)計(jì)方法只要會(huì)逐條比對(duì)就能發(fā)現(xiàn)大量問題比如系統(tǒng)狀態(tài)的可見性這一條往往能挑出很多操作后沒有反饋的界面問題。再往下走便是可用性測(cè)試的具體流程招募代表性用戶、設(shè)計(jì)典型任務(wù)、讓用戶邊操作邊出聲思考、記錄任務(wù)完成時(shí)間與出錯(cuò)次數(shù)、最后用系統(tǒng)可用性量表做量化打分。這里要特別說明一點(diǎn)可用性測(cè)試的重點(diǎn)不是證明設(shè)計(jì)沒有問題而是發(fā)現(xiàn)哪里有問題。我在帶課程設(shè)計(jì)時(shí)經(jīng)?？吹綄W(xué)生自己測(cè)自己做的界面全程順暢交上來卻經(jīng)不起別人用原因就在于自己太熟悉系統(tǒng)已經(jīng)無法模擬第一次使用的用戶的視角。所以教案里會(huì)反復(fù)強(qiáng)調(diào)測(cè)試用戶一定要找目標(biāo)用戶中但不熟悉你系統(tǒng)的人哪怕只是同班同學(xué)只要沒參與過項(xiàng)目開發(fā)反饋價(jià)值都會(huì)非常高。2.3 設(shè)計(jì)流程從需求到原型的完整鏈路人機(jī)界面設(shè)計(jì)流程這一章是整套教案里最能體現(xiàn)工程思維的部分。現(xiàn)在比較通行的流程框架是以用戶為中心的設(shè)計(jì)流程大致包含四個(gè)反復(fù)迭代的階段需求分析、設(shè)計(jì)建模、原型構(gòu)建、可用性評(píng)估。需求分析階段的核心是搞清楚目標(biāo)用戶是誰、他們要在什么場(chǎng)景下完成什么任務(wù)。教案里會(huì)給出幾種常用的需求獲取手段比如用戶訪談、問卷調(diào)查、現(xiàn)場(chǎng)觀察、日志分析。做這一階段時(shí)我有一個(gè)比較深的體會(huì)初學(xué)者很容易把功能清單當(dāng)成用戶需求比如做一個(gè)能登錄、能發(fā)帖、能評(píng)論的App這其實(shí)是功能描述不是需求分析。真正的需求分析應(yīng)該回答用戶為什么需要登錄、登錄過程中會(huì)遇到什么困難、登錄失敗時(shí)用戶期望得到什么幫助。只有當(dāng)需求細(xì)化到這個(gè)程度后面的設(shè)計(jì)才有依據(jù)。設(shè)計(jì)建模階段的輸出是任務(wù)流程圖、用戶畫像、場(chǎng)景劇本等文檔。其中用戶畫像是我認(rèn)為性價(jià)比最高的產(chǎn)出物因?yàn)樗馨涯：哪繕?biāo)用戶變成一個(gè)具體可感的人。比如你要設(shè)計(jì)一個(gè)面向老年人的健康管理App你的用戶畫像就應(yīng)該是張阿姨65歲剛退休眼睛有點(diǎn)老花熟悉微信聊天但不會(huì)用手機(jī)支付希望用App記錄每天血壓變化。有了這個(gè)畫像你在做字體大小、按鈕面積、導(dǎo)航層級(jí)等設(shè)計(jì)決策時(shí)就不容易跑偏。原型構(gòu)建階段分為低保真原型和高保真原型。低保真原型可以是紙面草圖或者線框圖核心目的是驗(yàn)證布局和信息架構(gòu)而不是視覺美觀度。很多學(xué)生喜歡一上來就打開設(shè)計(jì)工具做高保真界面結(jié)果把大量時(shí)間花在調(diào)顏色、調(diào)圓角上等要改動(dòng)布局時(shí)痛不欲生。正確做法是先用手繪線框圖快速試錯(cuò)確定大框架之后再進(jìn)入高保真階段。高保真原型主要用于可用性測(cè)試和向利益相關(guān)方展示效果它更接近最終產(chǎn)品但如果交互邏輯沒理順高保真只會(huì)放大問題而不會(huì)解決問題。3. 教案如何變成自學(xué)路徑一份可以直接照搬的學(xué)習(xí)流程圖上面講的是教案的內(nèi)容維度現(xiàn)在聊一個(gè)更現(xiàn)實(shí)的問題如果我不是老師只是需要自學(xué)這套內(nèi)容應(yīng)該怎么用這份PPT很多自學(xué)者拿到課件后的第一反應(yīng)是從頭翻到尾結(jié)果翻到中間發(fā)現(xiàn)前面的概念已經(jīng)模糊了。這是因?yàn)镻PT本質(zhì)上是一種支持講解的媒介它犧牲了一部分文字的連貫性換取了信息呈現(xiàn)的模塊化。直接逐頁閱讀相當(dāng)于把一份演講稿當(dāng)論文看信息吸收率自然低。正確的自學(xué)方式是把PPT教案當(dāng)作學(xué)習(xí)地圖再配套教材或參考書籍做深化。我建議按下面這個(gè)流程來走每一步都在教案中能找到對(duì)應(yīng)模塊通讀章節(jié)目錄和導(dǎo)入頁建立知識(shí)框架。這個(gè)階段不需要精讀目標(biāo)是回答這個(gè)領(lǐng)域有哪些核心問題。針對(duì)每一章先看小結(jié)和思考題再帶著問題返回去讀正文頁面。這個(gè)過程叫問題前置式閱讀能顯著提高注意力的聚焦度。用教案中的設(shè)計(jì)原則部分做對(duì)照練習(xí)隨便找一個(gè)日常使用的App逐條檢查它的界面設(shè)計(jì)是否符合教案中提到的原則每找到一條違反項(xiàng)就用自己的話寫一段分析。按教案中的設(shè)計(jì)流程章節(jié)獨(dú)立完成一個(gè)小型項(xiàng)目的界面原型。不需要寫代碼用紙筆或設(shè)計(jì)工具畫線框圖即可重點(diǎn)是走完需求分析—用戶畫像—低保真原型—啟發(fā)式評(píng)估這條完整鏈路。最后用教案中的可用性評(píng)估模塊給自己做的原型打分記錄下來然后迭代改進(jìn)一輪。這套流程對(duì)我來說最有效的一點(diǎn)是把看課件變成了做項(xiàng)目。人機(jī)界面設(shè)計(jì)是一門實(shí)踐性極強(qiáng)的學(xué)科只看不做知識(shí)點(diǎn)永遠(yuǎn)停留在知道的層面只有親手走完一遍設(shè)計(jì)閉環(huán)那些原則和流程才會(huì)內(nèi)化成自己的判斷力。如果自學(xué)過程中有條件強(qiáng)烈建議找一位同學(xué)或同事配合做一次完整的可用性測(cè)試你設(shè)計(jì)任務(wù)他操作界面你在旁邊觀察并記錄。這個(gè)體驗(yàn)比讀十遍教材都管用因?yàn)樗鼤?huì)讓你直觀地看到我認(rèn)為很清晰的界面別人操作起來是怎么卡住的。4. 課堂教學(xué)與自學(xué)自測(cè)的兩套可復(fù)用素材講完了自學(xué)路徑再分享兩份可以直接拿去用的模板。一份是給教師的課堂可用性評(píng)估演示模板另一份是給學(xué)生的可用性測(cè)試記錄表。這兩份東西在教案里都有雛形我這里基于自己的教學(xué)和實(shí)操經(jīng)驗(yàn)把它們補(bǔ)全成了更可以直接使用的版本。4.1 課堂演示模板如何帶學(xué)生在15分鐘內(nèi)完成一次啟發(fā)式評(píng)估啟發(fā)式評(píng)估是課堂互動(dòng)效果最好的教學(xué)環(huán)節(jié)之一操作起來也不復(fù)雜。我的做法是提前準(zhǔn)備3到4個(gè)待評(píng)估的界面截圖統(tǒng)一打印或投屏然后按下面這個(gè)流程帶著學(xué)生走步驟時(shí)長具體操作明確評(píng)估對(duì)象2分鐘選擇一個(gè)大家熟悉的界面比如校園App的登錄頁、外賣軟件的結(jié)算頁不要選太冷門的工具回顧啟發(fā)式規(guī)則3分鐘投影展示十條啟發(fā)式規(guī)則先做一次快速解釋確保每名學(xué)生知道每條規(guī)則大致在說什么獨(dú)立評(píng)估5分鐘學(xué)生獨(dú)自對(duì)照規(guī)則寫下自己發(fā)現(xiàn)的界面問題每條問題標(biāo)注對(duì)應(yīng)的規(guī)則編號(hào)小組討論3分鐘4人一組交換問題清單合并重復(fù)項(xiàng)統(tǒng)計(jì)出現(xiàn)頻率最高的問題集中匯報(bào)2分鐘每組說出本組發(fā)現(xiàn)的Top 3問題教師匯總到黑板上形成全班共識(shí)這個(gè)15分鐘小練習(xí)的價(jià)值在于它能讓學(xué)生直觀地意識(shí)到界面設(shè)計(jì)好不好是可以被系統(tǒng)化地分析出來的而不是憑感覺說好看不好看。我?guī)н^的班級(jí)里幾乎每次都會(huì)有學(xué)生在這個(gè)過程中發(fā)出原來這個(gè)設(shè)計(jì)是錯(cuò)的式的感嘆課堂效果的反饋比單純講原則好得多。4.2 自學(xué)自測(cè)表五維可用性評(píng)估模板如果是自學(xué)你需要一套更結(jié)構(gòu)化的自測(cè)工具。我自己用過多輪、覺得比較順手的是一個(gè)五維評(píng)估表每個(gè)維度有對(duì)應(yīng)的觀察指標(biāo)每個(gè)指標(biāo)按1到5打分。這里給出一個(gè)簡(jiǎn)化版可用性維度評(píng)估問題打分1-5可學(xué)習(xí)性第一次使用時(shí)用戶能否不借助幫助就完成核心任務(wù)__使用效率熟練用戶完成典型任務(wù)需要幾步操作是否存在多余步驟__可記憶性用戶隔一周回來還能記住主要功能的入口和操作方式嗎__錯(cuò)誤率操作中是否經(jīng)常出現(xiàn)誤觸、輸錯(cuò)、點(diǎn)擊無效出錯(cuò)后能否清晰知道如何恢復(fù)__主觀滿意度用戶完成體驗(yàn)后是否愿意繼續(xù)使用界面整體感受是否舒適__每項(xiàng)打分低于3分的維度就是你需要重點(diǎn)修改的方向。這個(gè)表看起來簡(jiǎn)單但實(shí)際用起來非常能暴露問題。比如很多課程設(shè)計(jì)項(xiàng)目都會(huì)在可記憶性上栽跟頭設(shè)計(jì)者自己天天用覺得一切理所當(dāng)然但換一個(gè)不熟悉系統(tǒng)的用戶來操作光找發(fā)布按鈕就要花上大半分鐘。這種情況幾乎都是因?yàn)閷?dǎo)航結(jié)構(gòu)不符合用戶的既有預(yù)期又不提供足夠的視覺指引。5. 做這類教案課件時(shí)最容易踩的四個(gè)坑最后聊一個(gè)比較實(shí)用的話題如果你自己需要?jiǎng)邮肿鲆环萑藱C(jī)界面設(shè)計(jì)相關(guān)的教學(xué)PPT有哪些坑是必須避開的這幾年我見過不少質(zhì)量參差不齊的課件也參與過幾輪課件評(píng)審總結(jié)下來高頻問題主要集中在四個(gè)方面。第一個(gè)坑是文字堆砌。很多人做PPT有個(gè)習(xí)慣就是把教材段落復(fù)制粘貼到幻燈片上一頁放三四百字讀者打開后根本不知道先看哪里。這種人機(jī)界面設(shè)計(jì)課件尤其要命因?yàn)槟阕约褐v的就是如何降低用戶的認(rèn)知負(fù)荷結(jié)果課件本身就成了高認(rèn)知負(fù)荷的典型案例。我建議每一頁核心內(nèi)容控制在60字以內(nèi)能用圖說明的絕不用長句遇到必須給出完整定義的內(nèi)容就拆成一句話定義一個(gè)例子一條圖示三段式。第二個(gè)坑是例子陳舊。人機(jī)界面設(shè)計(jì)是一個(gè)更新速度極快的領(lǐng)域十年前的設(shè)計(jì)案例放在今天講學(xué)生的第一反應(yīng)是這是什么古董界面。我在翻看一些老課件時(shí)經(jīng)?？吹接肳indows 98的對(duì)話框講模態(tài)反饋的不能說錯(cuò)但學(xué)生的代入感確實(shí)大打折扣。建議大家在保留經(jīng)典案例的同時(shí)每年至少更新一批貼近當(dāng)下產(chǎn)品的案例比如今天講手勢(shì)交互與其反復(fù)用十年前的翻頁效果不如直接用現(xiàn)在大家手機(jī)上每天都在用的滑動(dòng)返回、長按彈出菜單來做拆解。第三個(gè)坑是沒有對(duì)比。人機(jī)界面設(shè)計(jì)中有大量概念需要借助對(duì)比才能講清楚比如好設(shè)計(jì)與壞設(shè)計(jì)的對(duì)比、遵從原則與違反原則的對(duì)比、低可用性方案與高可用性方案的對(duì)比。沒有對(duì)比學(xué)生就只能從文字描述里去腦補(bǔ)什么叫做反饋不清晰有了并排對(duì)比圖一眼就能看出差距。我自己的習(xí)慣是同一頁放兩張截圖左邊是問題版本右邊是優(yōu)化版本讓學(xué)生先自己找不同再給出解釋這種方式的記憶留存率遠(yuǎn)高于直接給結(jié)論。第四個(gè)坑是缺少互動(dòng)環(huán)節(jié)。PPT教案如果只是單向輸出學(xué)生很容易走神尤其是講到設(shè)計(jì)原則這種偏理論的內(nèi)容時(shí)。好的教案會(huì)在每講完一個(gè)知識(shí)點(diǎn)后插入一個(gè)1分鐘的思考題比如剛才提到反饋的重要性現(xiàn)在請(qǐng)大家看看自己手機(jī)里最常用的App有沒有哪個(gè)按鈕點(diǎn)擊后是沒有反饋的這類問題不需要學(xué)生真的當(dāng)場(chǎng)回答但因?yàn)楹退麄兊娜粘ｓw驗(yàn)強(qiáng)相關(guān)會(huì)在潛意識(shí)里留下一個(gè)待處理的信息鉤子后面的講解就能更好地掛接上去。6. 一點(diǎn)關(guān)于人機(jī)界面設(shè)計(jì)教學(xué)資源演進(jìn)的觀察如果往前看一步人機(jī)界面設(shè)計(jì)的教學(xué)資源正在經(jīng)歷一個(gè)比較明顯的變化從靜態(tài)的內(nèi)容展示逐步走向動(dòng)態(tài)的、可交互的學(xué)習(xí)體驗(yàn)。這一點(diǎn)在PPT教案里也已經(jīng)有了苗頭一些做得比較新的課件開始嵌入可點(diǎn)擊的交互原型演示、可拖拽的組件示例、甚至直接在幻燈片內(nèi)嵌HTML小demo讓學(xué)習(xí)者不只是看界面設(shè)計(jì)而是直接在課件里操作界面設(shè)計(jì)。我個(gè)人覺得這種演進(jìn)方向?qū)W(xué)習(xí)者來說是個(gè)好事。人機(jī)界面設(shè)計(jì)的學(xué)習(xí)本質(zhì)上需要大量的界面直覺積累而這種直覺只能通過大量觀察和操作來培養(yǎng)。靜態(tài)的截圖能告訴你界面長什么樣但只有親自點(diǎn)擊、滑動(dòng)、感受反饋節(jié)奏才能真正理解反饋延遲200毫秒比500毫秒舒服得多這種微妙體驗(yàn)意味著什么。不過不管載體怎么變這套教案里蘊(yùn)含的核心邏輯仍然是穩(wěn)定的先理解用戶再推導(dǎo)原則最后用方法去驗(yàn)證。只要這條主線不丟無論你是在讀一門課、做一份PPT還是在設(shè)計(jì)一個(gè)真實(shí)產(chǎn)品都能走出一條比較清晰的路。我自己當(dāng)年學(xué)這門課時(shí)就是因?yàn)橄日莆樟藦挠脩舫霭l(fā)這個(gè)底層視角后來做產(chǎn)品設(shè)計(jì)時(shí)才少走了很多彎路。希望這份拆解對(duì)你也有同樣的幫助。本文還有配套的精品資源點(diǎn)擊獲取