面向?qū)ο蠓治雠c設(shè)計(卓越計劃)312-第12課-人機交互部分的設(shè)計-–設(shè)計實例課件

面向?qū)ο蠓治雠c設(shè)計主講教師：孔磊面向?qū)ο蠓治雠c設(shè)計主講教師：孔磊上節(jié)回顧上次課學習了人機交互部分的設(shè)計概念人機界面的設(shè)計準則人機交互部分的分析與設(shè)計方法本次課將繼續(xù)學習人機交互部分的設(shè)計上節(jié)回顧上次課學習了人機交互部分的設(shè)計概念第12課人機交互部分的設(shè)計

–設(shè)計實例設(shè)計模板1界面類設(shè)計2設(shè)計實例

3第12課人機交互部分的設(shè)計–設(shè)計實例設(shè)計模板1界面類設(shè)計1.設(shè)計模板模板是已經(jīng)做好的框架，可用于快速開發(fā)界面，使用時只需將模板原有的圖片、文字等替換成自己的內(nèi)容。我們的實例是網(wǎng)絡(luò)應(yīng)用程序，界面主要是以HTML方式的網(wǎng)頁形式。因此，我們采用的設(shè)計模板是網(wǎng)頁的設(shè)計模板。1.設(shè)計模板模板是已經(jīng)做好的框架，可用于快速開發(fā)界面，使用時1.設(shè)計模板（續(xù)）為什么要先考慮設(shè)計模板再考慮界面設(shè)計類呢？系統(tǒng)包含的用例（功能）很多，如果只有一個用例，則是否采用設(shè)計模板無所謂，但如果有很多用例，對于用戶來說，應(yīng)采用統(tǒng)一的風格呈現(xiàn)于用戶面前。更重要的是，頁面之間的導航。1.設(shè)計模板（續(xù)）為什么要先考慮設(shè)計模板再考慮界面設(shè)計類呢？1.設(shè)計模板（續(xù)）設(shè)計模板需要的技能：1）美工無論是頁面的布局、色彩的搭配、字體的選擇都需要一定的美工功底。2）制圖在紙上或腦海中有了美工效果，下面是將結(jié)果呈現(xiàn)在計算機上，可選擇的工具為PS、Firework、Flash等。3）靜態(tài)網(wǎng)頁設(shè)計圖片做出來后，并不能直接呈現(xiàn)在網(wǎng)頁上，所以需要使用HTML進行相應(yīng)的網(wǎng)頁設(shè)計，動畫效果還需要掌握一定的javascript。4）動態(tài)網(wǎng)頁設(shè)計要實現(xiàn)與用戶的交互，掌握一門動態(tài)語言必不可少，可選擇的有ASP、PHP、JSP、JQuery、Java和ASP.NET。1.設(shè)計模板（續(xù)）設(shè)計模板需要的技能：1.設(shè)計模板（續(xù)）對于沒有經(jīng)驗的學習者，模仿是較理想的學習途徑?？蓞⒖计渌耐惖能浖M行模仿。1.設(shè)計模板（續(xù)）對于沒有經(jīng)驗的學習者，模仿是較理想的學習途1.設(shè)計模板（續(xù)）下面來看一些優(yōu)秀的界面設(shè)計：金蝶1.設(shè)計模板（續(xù)）下面來看一些優(yōu)秀的界面設(shè)計：金蝶1.設(shè)計模板（續(xù)）下面來看一些優(yōu)秀的界面設(shè)計：金蝶1.設(shè)計模板（續(xù)）下面來看一些優(yōu)秀的界面設(shè)計：金蝶1.設(shè)計模板（續(xù)）下面來看一些優(yōu)秀的界面設(shè)計：致遠G61.設(shè)計模板（續(xù)）下面來看一些優(yōu)秀的界面設(shè)計：致遠G61.設(shè)計模板（續(xù)）以下是一些常見的網(wǎng)頁設(shè)計模板：1.設(shè)計模板（續(xù)）以下是一些常見的網(wǎng)頁設(shè)計模板：1.設(shè)計模板（續(xù)）以下是一些常見的網(wǎng)頁設(shè)計模板：1.設(shè)計模板（續(xù)）以下是一些常見的網(wǎng)頁設(shè)計模板：1.設(shè)計模板（續(xù)）以下是一些常見的網(wǎng)頁設(shè)計模板：1.設(shè)計模板（續(xù)）以下是一些常見的網(wǎng)頁設(shè)計模板：1.設(shè)計模板（續(xù)）以下是一些常見的網(wǎng)頁設(shè)計模板：1.設(shè)計模板（續(xù)）以下是一些常見的網(wǎng)頁設(shè)計模板：1.設(shè)計模板（續(xù)）以下是一些常見的網(wǎng)頁設(shè)計模板：1.設(shè)計模板（續(xù)）以下是一些常見的網(wǎng)頁設(shè)計模板：2.界面類設(shè)計1）確定界面類中要描述的是哪些信息2）確定這些信息使用什么界面類元素進行設(shè)計3）使用類圖描述界面類的完整設(shè)計過程2.界面類設(shè)計1）確定界面類中要描述的是哪些信息2.界面類設(shè)計（續(xù)）1）確定界面類中要描述的是哪些信息可以參考用例圖、類圖和順序圖，確定界面類要完成的目標是什么，用類圖中哪些元素可以描述，動態(tài)行為是什么。2.界面類設(shè)計（續(xù)）1）確定界面類中要描述的是哪些信息2.界面類設(shè)計（續(xù)）2）確定這些信息使用什么界面類元素進行設(shè)計根據(jù)程序設(shè)計的經(jīng)驗，確定使用何種元素描述設(shè)計結(jié)果，其過程可能需要反復迭代。主要界面類元素根據(jù)具體的程序設(shè)計語言和環(huán)境確定。比如標簽類、文本框類、按鈕類等。2.界面類設(shè)計（續(xù)）2）確定這些信息使用什么界面類元素進行設(shè)2.界面類設(shè)計（續(xù)）實例分析：2.界面類設(shè)計（續(xù)）實例分析：2.界面類設(shè)計（續(xù)）3）使用類圖描述界面類的完整設(shè)計過程將界面類中各設(shè)計元素用類圖進行描述，完成整個設(shè)計過程2.界面類設(shè)計（續(xù)）3）使用類圖描述界面類的完整設(shè)計過程3.設(shè)計實例以提出用人申請用例為例：1）設(shè)計模板2）設(shè)計界面類3.設(shè)計實例以提出用人申請用例為例：3.設(shè)計實例（續(xù)）1）設(shè)計模板我們的實例是整個系統(tǒng)中的其中一個用例，所有用例都完成后應(yīng)采用統(tǒng)一的模板，便于用戶進行操作執(zhí)行功能。設(shè)計模板是富有創(chuàng)造力的過程對于初次學習的同學，建議模仿學習。3.設(shè)計實例（續(xù)）1）設(shè)計模板3.設(shè)計實例（續(xù)）1）設(shè)計模板的布局標題導航工作區(qū)3.設(shè)計實例（續(xù)）1）設(shè)計模板的布局標題導航工作區(qū)3.設(shè)計實例（續(xù)）1）設(shè)計模板預(yù)想界面3.設(shè)計實例（續(xù)）1）設(shè)計模板預(yù)想界面3.設(shè)計實例（續(xù)）2）設(shè)計界面類確定界面類中要描述的是哪些信息提出用人申請整個過程呈現(xiàn)給用戶的界面，主要是提交招聘需求申報表的內(nèi)容確定這些信息使用什么界面類元素進行設(shè)計提交-按鈕；其他描述招聘需求申報表的信息可使用對應(yīng)的界面類元素實現(xiàn)使用類圖描述界面類的完整設(shè)計過程3.設(shè)計實例（續(xù)）2）設(shè)計界面類3.設(shè)計實例（續(xù)）招聘需求申報表涉及的類：3.設(shè)計實例（續(xù)）招聘需求申報表涉及的類：設(shè)計界面類草圖申請部門Department填報日期SubmissionDate標簽類下拉列表框類標簽類日期選擇類……學歷AcademicQualification標簽類下拉列表框類……專業(yè)素質(zhì)要求ProfessionalRequirement標簽類多行文本框類………………設(shè)計界面類草圖申請部門Department填報日期Submi3.設(shè)計實例（續(xù)）界面類設(shè)計結(jié)果3.設(shè)計實例（續(xù)）界面類設(shè)計結(jié)果課程小結(jié)1設(shè)計模板2界面類設(shè)計3人機交互部分設(shè)計實例課程小結(jié)1設(shè)計模板2界面類設(shè)計3人機交互部分設(shè)計實例面向?qū)ο蟮姆治雠c設(shè)計TryYourBest!面向?qū)ο蟮姆治雠c設(shè)計TryYourBest!www.t面向?qū)ο蠓治雠c設(shè)計主講教師：孔磊面向?qū)ο蠓治雠c設(shè)計主講教師：孔磊上節(jié)回顧上次課學習了人機交互部分的設(shè)計概念人機界面的設(shè)計準則人機交互部分的分析與設(shè)計方法本次課將繼續(xù)學習人機交互部分的設(shè)計上節(jié)回顧上次課學習了人機交互部分的設(shè)計概念第12課人機交互部分的設(shè)計

–設(shè)計實例設(shè)計模板1界面類設(shè)計2設(shè)計實例

3第12課人機交互部分的設(shè)計–設(shè)計實例設(shè)計模板1界面類設(shè)計1.設(shè)計模板模板是已經(jīng)做好的框架，可用于快速開發(fā)界面，使用時只需將模板原有的圖片、文字等替換成自己的內(nèi)容。我們的實例是網(wǎng)絡(luò)應(yīng)用程序，界面主要是以HTML方式的網(wǎng)頁形式。因此，我們采用的設(shè)計模板是網(wǎng)頁的設(shè)計模板。1.設(shè)計模板模板是已經(jīng)做好的框架，可用于快速開發(fā)界面，使用時1.設(shè)計模板（續(xù)）為什么要先考慮設(shè)計模板再考慮界面設(shè)計類呢？系統(tǒng)包含的用例（功能）很多，如果只有一個用例，則是否采用設(shè)計模板無所謂，但如果有很多用例，對于用戶來說，應(yīng)采用統(tǒng)一的風格呈現(xiàn)于用戶面前。更重要的是，頁面之間的導航。1.設(shè)計模板（續(xù)）為什么要先考慮設(shè)計模板再考慮界面設(shè)計類呢？1.設(shè)計模板（續(xù)）設(shè)計模板需要的技能：1）美工無論是頁面的布局、色彩的搭配、字體的選擇都需要一定的美工功底。2）制圖在紙上或腦海中有了美工效果，下面是將結(jié)果呈現(xiàn)在計算機上，可選擇的工具為PS、Firework、Flash等。3）靜態(tài)網(wǎng)頁設(shè)計圖片做出來后，并不能直接呈現(xiàn)在網(wǎng)頁上，所以需要使用HTML進行相應(yīng)的網(wǎng)頁設(shè)計，動畫效果還需要掌握一定的javascript。4）動態(tài)網(wǎng)頁設(shè)計要實現(xiàn)與用戶的交互，掌握一門動態(tài)語言必不可少，可選擇的有ASP、PHP、JSP、JQuery、Java和ASP.NET。1.設(shè)計模板（續(xù)）設(shè)計模板需要的技能：1.設(shè)計模板（續(xù)）對于沒有經(jīng)驗的學習者，模仿是較理想的學習途徑?？蓞⒖计渌耐惖能浖M行模仿。1.設(shè)計模板（續(xù)）對于沒有經(jīng)驗的學習者，模仿是較理想的學習途1.設(shè)計模板（續(xù)）下面來看一些優(yōu)秀的界面設(shè)計：金蝶1.設(shè)計模板（續(xù)）下面來看一些優(yōu)秀的界面設(shè)計：金蝶1.設(shè)計模板（續(xù)）下面來看一些優(yōu)秀的界面設(shè)計：金蝶1.設(shè)計模板（續(xù)）下面來看一些優(yōu)秀的界面設(shè)計：金蝶1.設(shè)計模板（續(xù)）下面來看一些優(yōu)秀的界面設(shè)計：致遠G61.設(shè)計模板（續(xù)）下面來看一些優(yōu)秀的界面設(shè)計：致遠G61.設(shè)計模板（續(xù)）以下是一些常見的網(wǎng)頁設(shè)計模板：1.設(shè)計模板（續(xù)）以下是一些常見的網(wǎng)頁設(shè)計模板：1.設(shè)計模板（續(xù)）以下是一些常見的網(wǎng)頁設(shè)計模板：1.設(shè)計模板（續(xù)）以下是一些常見的網(wǎng)頁設(shè)計模板：1.設(shè)計模板（續(xù)）以下是一些常見的網(wǎng)頁設(shè)計模板：1.設(shè)計模板（續(xù)）以下是一些常見的網(wǎng)頁設(shè)計模板：1.設(shè)計模板（續(xù)）以下是一些常見的網(wǎng)頁設(shè)計模板：1.設(shè)計模板（續(xù)）以下是一些常見的網(wǎng)頁設(shè)計模板：1.設(shè)計模板（續(xù)）以下是一些常見的網(wǎng)頁設(shè)計模板：1.設(shè)計模板（續(xù)）以下是一些常見的網(wǎng)頁設(shè)計模板：2.界面類設(shè)計1）確定界面類中要描述的是哪些信息2）確定這些信息使用什么界面類元素進行設(shè)計3）使用類圖描述界面類的完整設(shè)計過程2.界面類設(shè)計1）確定界面類中要描述的是哪些信息2.界面類設(shè)計（續(xù)）1）確定界面類中要描述的是哪些信息可以參考用例圖、類圖和順序圖，確定界面類要完成的目標是什么，用類圖中哪些元素可以描述，動態(tài)行為是什么。2.界面類設(shè)計（續(xù)）1）確定界面類中要描述的是哪些信息2.界面類設(shè)計（續(xù)）2）確定這些信息使用什么界面類元素進行設(shè)計根據(jù)程序設(shè)計的經(jīng)驗，確定使用何種元素描述設(shè)計結(jié)果，其過程可能需要反復迭代。主要界面類元素根據(jù)具體的程序設(shè)計語言和環(huán)境確定。比如標簽類、文本框類、按鈕類等。2.界面類設(shè)計（續(xù)）2）確定這些信息使用什么界面類元素進行設(shè)2.界面類設(shè)計（續(xù)）實例分析：2.界面類設(shè)計（續(xù)）實例分析：2.界面類設(shè)計（續(xù)）3）使用類圖描述界面類的完整設(shè)計過程將界面類中各設(shè)計元素用類圖進行描述，完成整個設(shè)計過程2.界面類設(shè)計（續(xù)）3）使用類圖描述界面類的完整設(shè)計過程3.設(shè)計實例以提出用人申請用例為例：1）設(shè)計模板2）設(shè)計界面類3.設(shè)計實例以提出用人申請用例為例：3.設(shè)計實例（續(xù)）1）設(shè)計模板我們的實例是整個系統(tǒng)中的其中一個用例，所有用例都完成后應(yīng)采用統(tǒng)一的模板，便于用戶進行操作執(zhí)行功能。設(shè)計模板是富有創(chuàng)造力的過程對于初次學習的同學，建議模仿學習。3.設(shè)計實例（續(xù)）1）設(shè)計模板3.設(shè)計實例（續(xù)）1）設(shè)計模板的布局標題導航工作區(qū)3.設(shè)計實例（續(xù)）1）設(shè)計模板的布局標題導航工作區(qū)3.設(shè)計實例（續(xù)）1）設(shè)計模板預(yù)想界面3.設(shè)計實例（續(xù)）1）設(shè)計模板預(yù)想界面3.設(shè)計實例（續(xù)）2）設(shè)計界面類確定界面類中要描述的是哪些信息提出用人申請整個過程呈現(xiàn)給用戶的界面，主要是提交招聘需求申報表的內(nèi)容確定這些信息使用什么界面類元素進行設(shè)計提交-按鈕；其他描述招聘需求申報表的信息可使用對應(yīng)的界面類元素實現(xiàn)使用類圖描述界面類的完整設(shè)計過程3.設(shè)計實例（續(xù)）2）設(shè)計界面類3.設(shè)計實例（續(xù)）招聘需求申報表涉及的類：3.設(shè)計實例（續(xù)）招聘需求申報表涉及的類：設(shè)計界面類草圖申請部門Department填報日期SubmissionDate標簽類下拉列表框類標簽類日期選擇類……學歷AcademicQu