編號15-01【web產(chǎn)品交互設(shè)計開發(fā)制作】編號15-01學(xué)習(xí)任務(wù)九、網(wǎng)頁高保真設(shè)計原則一、課程說明與要求1.課程說明本次課程由交互設(shè)計理念、高保真的定義、以及高保真交互設(shè)計的原則三方面構(gòu)成，高保真原型從前期的需求、設(shè)計，到后期的開發(fā)、測試階段貫穿始終，對產(chǎn)品經(jīng)理、目標(biāo)用戶、設(shè)計師、開發(fā)和測試都起到了很大的促進作用。對與設(shè)計師來說，設(shè)計原型的過程也是梳理思路的過程，能更加了解產(chǎn)品，快速驗證與迭代，不斷提升產(chǎn)品的易用性。二、學(xué)情分析與課程導(dǎo)入1.學(xué)情分析本課程授課對象為藝術(shù)專業(yè)學(xué)生，很多同學(xué)是沒有接觸過原型交互設(shè)計，并不了解它的一些基礎(chǔ)知識和理論，普遍認知不強，另一方面，學(xué)生對新興的事物接受比較快，對所選擇的專業(yè)感興趣，獲取知識的主動性較強。2.課程導(dǎo)入我們學(xué)習(xí)高保真交互設(shè)計，首先要了解什么是高保真，以及高保真在交互設(shè)計方面有哪些原則，為什么要做高保真原型；對目標(biāo)用戶來說，比起長篇的說明文檔，更喜歡看直觀生動的高保真原型，一切從用戶體驗出發(fā)，如此一來才能設(shè)計出最符合用戶體驗的產(chǎn)品。三、理論知識講解（一）交互設(shè)計理念………【難點】互設(shè)計理念本身沒有移動端（app）或者web（網(wǎng)頁）端之分；交互設(shè)計的意義是能理解并分析最終用戶的需求，通過專業(yè)的設(shè)計手段、方法去實現(xiàn)企業(yè)要達到的目標(biāo)，并解決相關(guān)問題?！舅颊?工匠精神內(nèi)涵-精益求精】過程中，交互設(shè)計師對每個產(chǎn)品、每個設(shè)計流程都凝神聚力、精益求精、正如老子所說，“天下大事，必作于細”。能基業(yè)長青的企業(yè)，無不是精益求精才獲得成功的。不斷改進自己的產(chǎn)品，不斷改善交互體驗的方法，享受著產(chǎn)品在設(shè)計中不斷升華的過程，在工作中逐漸形成對產(chǎn)品有著執(zhí)著的堅持和追求的職業(yè)品質(zhì)。編號15-02那么以什么作為設(shè)計的依據(jù)，就是我們下面要講的：編號15-021.以業(yè)務(wù)需求為基礎(chǔ)的設(shè)計（1）業(yè)務(wù)設(shè)計：主要是對客戶的工作現(xiàn)狀按照信息化標(biāo)準的要求進行梳理、優(yōu)化、完善只有充分地理解業(yè)務(wù)、并對既有的工作現(xiàn)狀按照信息化的標(biāo)準進行優(yōu)化、完善設(shè)計，在業(yè)務(wù)優(yōu)化設(shè)計的基礎(chǔ)上，才能確定需要什么功能、并依據(jù)業(yè)務(wù)設(shè)計結(jié)果判斷客戶提出的需求是否正確。業(yè)務(wù)設(shè)計主要包括三個層面的內(nèi)容，即：架構(gòu)層、功能層和數(shù)據(jù)層（2）需求設(shè)計：關(guān)注的是系統(tǒng)功能該怎么實現(xiàn)。只有將“需求”放在“業(yè)務(wù)”的背景中去思考、設(shè)計，才能做出優(yōu)秀、實用、客戶價值高的系統(tǒng)功能。設(shè)計脫離業(yè)務(wù)就失去了設(shè)計存在的意義，設(shè)計本身就應(yīng)該將“業(yè)務(wù)思維”轉(zhuǎn)化為“設(shè)計思維”。2.思考解決方案的延伸面在設(shè)計滿足業(yè)務(wù)的需求基礎(chǔ)上，去思考用戶完成這個基礎(chǔ)場景后的下一步或者再下一步應(yīng)該是什么，編號15-03思考解決方案的延伸面。編號15-033.以用戶為中心的設(shè)計.....................................................【思政-工匠精神內(nèi)涵：用戶至上的服務(wù)精神】產(chǎn)品設(shè)計是從用戶需求和用戶的感受出發(fā)，圍繞用戶為中心設(shè)計產(chǎn)品，而不是讓用戶去適應(yīng)產(chǎn)品。無論產(chǎn)品的使用流程、產(chǎn)品的信息架構(gòu)、人機交互方式等等，都需要考慮用戶的使用習(xí)慣、預(yù)期的交互方式、以及視覺感受等方面。4.不同對象的設(shè)計理念C端（用戶端）產(chǎn)品一般考慮絕大部分用戶使用場景和訴求，高級、復(fù)雜功能會相對少些。重點突出易學(xué)性；B端（商家）產(chǎn)品一般架構(gòu)復(fù)雜且偏定制化，以業(yè)務(wù)為主?？赡苡泻芏喔呒壒δ?，突出高效、易用；編號15-04同時也加大了學(xué)習(xí)的難度。編號15-045.設(shè)計思想和體系交互設(shè)計思想和體系在制定設(shè)計規(guī)范過程中會形成設(shè)計理念、設(shè)計原則、組件控件、界面交互、輸出文檔等。專業(yè)的交互文檔主要包含以下幾點內(nèi)容：項目簡介、需求分析、新增修改紀錄、信息架構(gòu)、交互設(shè)計的方案闡述、頁面交互流程圖（包含界面布局，操作手勢，反饋效果，元素的規(guī)則定義等等）、異常頁面和異常情況的說明。作為視覺設(shè)計師來說，輸出物的是視覺設(shè)計稿、切圖和標(biāo)注（二）什么是高保真編號15-051.低保真編號15-05使用線條、色塊、占位符、方框來展示產(chǎn)品的主要頁面信息、結(jié)構(gòu)和布局。優(yōu)點：制作速度快；修改成本低；有時間深入思考產(chǎn)品的邏輯；不影響UI設(shè)計師的發(fā)揮。缺點：不夠精美2.高保真接近最終效果圖，與低保真原型相比，包含更多細節(jié)、交互和UI等等。（高保真原型=線框圖+交互邏輯+視覺+用戶體驗）為什么要做高保真原型圖？原因有以下幾點：編號15-061.研發(fā)人員更加直觀理解產(chǎn)品，在開發(fā)過程可減少和產(chǎn)品經(jīng)理確定需求的時間成本；編號15-062.測試人員更加方便進行測試，對測試結(jié)果有個依據(jù)；3.上級主管能提前知道最終產(chǎn)品的成型，減少焦慮感；4.運營、銷售都清楚最終產(chǎn)品的成果，知道該如何事先為這款新推出的產(chǎn)品去開展工作。優(yōu)點：視覺效果好，容易傳播并且評判；缺點：耗費時間比較多；修改成本很高；沒有時間深入思考產(chǎn)品的邏輯；影響交互設(shè)計師的發(fā)揮。（三）高保真交互設(shè)計的原則………【重點】1.界面簡潔、清晰（1）頁面不要做的繁瑣、元素很多，會影響到用戶的瀏覽及操作（2）按組塊分類把產(chǎn)品按照類型、圖形、功能、特點進行分類，相同類型或功能的進行一個分組編號15-07（3）歸納不常用功能編號15-07把不經(jīng)常使用的功能，歸納到某一功能下，也可以讓我們的界面看起來簡潔，沒有過多的內(nèi)容影響用戶的操作。2.界面保持一致性（1）界面風(fēng)格一致不同頁面的相同元素、按鈕、顏色以及層級字號等都要保持一致（2）交互一致點擊、跳轉(zhuǎn)頁面等操作，web網(wǎng)頁端的交互操作基本是點擊跳轉(zhuǎn)、移動端基本是點擊、左右、上下滑動等，不同頁面的跳轉(zhuǎn)操作要保持一致，否則會影響用戶的操作體驗編號15-08編號15-083.別讓用戶思考別讓用戶思考是網(wǎng)頁可用性設(shè)計的首要原則，從全局的視角來做交互,讓用戶通過我們設(shè)計的交互步驟或方式來進行交互。比如我們來看疫情實時大數(shù)據(jù)報告這個網(wǎng)頁，當(dāng)前，境外疫情暴發(fā)增長態(tài)勢仍在持續(xù)，我國外防輸入壓力持續(xù)加大。同時，在抗擊新冠肺炎這場戰(zhàn)役中，我們發(fā)揮集中力量辦大事的制度優(yōu)勢，堅持全國一盤棋，動員全社會力量、調(diào)動各方面資源，迅速形成了抗擊疫情強大合力，展現(xiàn)了中國力量、中國精神、中國效率。網(wǎng)頁中有著我們最關(guān)注的幾個信息，比如：我們關(guān)注的某個地區(qū)的疫情，現(xiàn)有確診的數(shù)量，所在的城市有無疫情等等，從全局的角度發(fā)布了一些人們最關(guān)注的信息點，免去了我們的一些查詢操作，也是“別讓用戶思考”的一個體現(xiàn)編號15-09（1）基于用戶的心理模型編號15-09設(shè)計圖標(biāo)的時候，要考慮現(xiàn)實的因素，如果脫離了現(xiàn)實那么就違反了用戶的認知或者想象（2）減輕記憶負擔(dān)不必要的內(nèi)容盡量不出現(xiàn)，或用簡潔的方式【互動討論，引導(dǎo)學(xué)生感受高保真交互設(shè)計應(yīng)用原則在不同網(wǎng)頁間的應(yīng)用，教師做分類總結(jié)】四、實踐技能訓(xùn)練（一）布置訓(xùn)練任務(wù)任務(wù)1：分析不同用戶端的設(shè)計理念在網(wǎng)頁中的應(yīng)用任務(wù)2：利用手機、電腦等工具，搜集高保真交互設(shè)計原則在網(wǎng)頁中的應(yīng)用。（二）實戰(zhàn)項目案例運用講解的高保真交互設(shè)計原則，根據(jù)基于用戶的心理模型設(shè)計出符合用戶認知的圖標(biāo)。教師重點指導(dǎo)：網(wǎng)頁可用性設(shè)計的首要原則。編號15-10【實訓(xùn)指導(dǎo)：學(xué)生初次接觸高保真交互設(shè)計理念進行設(shè)計實踐，教師應(yīng)多引導(dǎo)，幫助學(xué)生根據(jù)交互需求完成符合用戶心理模型的圖標(biāo)設(shè)計?！烤幪?5-10五、課堂總結(jié)今天，我們主要學(xué)習(xí)了交互設(shè)計理念、高保真交互設(shè)計原則等相關(guān)理論，也結(jié)合交互設(shè)計案例相關(guān)理論做了一些練習(xí)，想必同學(xué)們通過練習(xí)對交互設(shè)計理念有了一定的了解和掌握。希望同學(xué)們課后繼續(xù)對你所接觸到的相關(guān)作品或產(chǎn)品，用專業(yè)的眼光，分析高保真交互設(shè)計原則的應(yīng)用場景以及不同用戶端交互設(shè)計理念的差別，這樣有助于你們對知識點的更深入的理解。六、課后思考前面我們講到了交互設(shè)計理念，認識并掌握這些理論對網(wǎng)頁