《web-UI設計》典型工作任務描述表

1、模塊功能目的描述模塊名稱WEB UI設計教學安排第2，3學期課時時間建議 260學時典型工作任務描述在網(wǎng)站設計公司中，根據(jù)網(wǎng)站設計項目的策劃要求，需要網(wǎng)頁設計師設計網(wǎng)頁界面，包括文字、圖片、動畫、聲音等內(nèi)容的可以在網(wǎng)上傳輸?shù)慕缑妫瑢⒉邉澃钢械膬?nèi)容、網(wǎng)站的主題模式，以及結合自己的認識通過藝術的手法表現(xiàn)出來，并根據(jù)設計需要或客戶需求修改網(wǎng)頁界面。所修改的網(wǎng)頁界面用于網(wǎng)頁排版、測試及發(fā)布。此項工作完成的過程是：網(wǎng)頁設計師從公司項目主管處接網(wǎng)站設計策劃任務后，進行用戶調(diào)研，確定網(wǎng)頁的內(nèi)容，包括確定網(wǎng)站的名稱、表現(xiàn)的主要內(nèi)容、用戶的意圖；設計網(wǎng)頁欄目及組織結構；準備素材：收集與整理相關資料；界面設計：根

2、據(jù)網(wǎng)站的訪問者對象、要提供的信息以及制作目標設計出一個最適合的網(wǎng)頁架構進行美化網(wǎng)頁界面，交付用戶審核，用于網(wǎng)頁排版、測試及發(fā)布。必要時根據(jù)設計需要或用戶需求修改網(wǎng)頁界面。網(wǎng)頁界面設計制作或修改完畢后，簽字并交付項目主管驗收。完成工作后將資料整理、歸類與存檔，并提供給項目主管備檔。 模塊學習目標學生學習完本課程后，應當：1、能在接到網(wǎng)頁設計的任務后，與客戶（教師）進行有效溝通，寫出該項目的用戶需求、設計網(wǎng)頁欄目及組織結構。2、能按照用戶要求確定網(wǎng)站的名稱、表現(xiàn)的主要內(nèi)容、用戶的意圖來設計網(wǎng)頁界面。3、能根據(jù)任務要求，收集與整理相關資料。4、能熟練應用網(wǎng)頁美化工具制作網(wǎng)頁界面。5、能合理運用網(wǎng)頁設

3、計色彩搭配，能表現(xiàn)主題，特色鮮明。6、能根據(jù)網(wǎng)站的訪問者對象、要提供的信息以及制作目標設計出一個最適合的網(wǎng)頁架構進行美化網(wǎng)頁界面，交付給老師。7、能根據(jù)老師審核后的意見和建議，進行網(wǎng)頁界面修改，最終符合用戶要求。8、能將最終網(wǎng)頁設計資料整理、歸類與存檔，并提交老師評價。工作與學習內(nèi)容工作對象：1、網(wǎng)頁設計師從公司項目主管處接網(wǎng)站設計策劃任務后，進行用戶調(diào)研，確定網(wǎng)頁的內(nèi)容。2、設計網(wǎng)頁欄目及組織結構。3、準備素材：收集與整理相關資料4、界面設計：根據(jù)網(wǎng)站的訪問者對象、要提供的信息以及制作目標設計出一個最適合的網(wǎng)頁架構進行美化網(wǎng)頁界面，交付用戶審核。5、必要時根據(jù)設計需要或用戶需求修改網(wǎng)頁界面。

4、6、網(wǎng)頁界面設計或修改完畢后，簽字并交付項目主管驗收。7、完成工作后將資料整理、歸類與存檔，并提供給項目主管備檔。工具、材料、設備及資料：工具：計算機繪圖軟件材料：草稿紙、筆設備：電腦、打印機等資料：任務單、公司規(guī)章制度等工作方法：查閱資料的方法使用工具的方法設計思路的方法界面布局的方法資料整理歸類的方法勞動組織方式：1.一般以個人形式設計制作網(wǎng)頁界面2.從項目主管處領取工作任務單。3.與用戶有效溝通，完成工作任務。4.與同事溝通，有效完成工作任務。5.從物料庫領取所需用的材料。工作要求：1、網(wǎng)頁設計師接到網(wǎng)站設計的任務后，進行用戶調(diào)研，確定網(wǎng)頁的內(nèi)容。2、設計網(wǎng)頁欄目及組織結構。3、能根據(jù)用

5、戶要求收集結與整理資料。4、能應用網(wǎng)頁美化工具制作網(wǎng)頁架構并進行美化網(wǎng)頁界面。5、能讀懂網(wǎng)頁設計中的術語。6、能按照用戶要求設計制作網(wǎng)頁界面，并按時、按質(zhì)、按量完成設計制作任務。7、能按公司管理制度將完成后的網(wǎng)頁設計界面交付主管部門審核。8、必要時根據(jù)設計需要或用戶需求修改網(wǎng)頁界面。9、能將最終圖紙資料整理、歸類與存檔，并提供給項目主管備檔。10、能嚴格執(zhí)行輔助設備的操作規(guī)范，并做好設備的保養(yǎng)工作。11、能按照公司管理規(guī)定節(jié)約使用各類耗材。學習任務的工作過程描述、學習目標與學習內(nèi)容匯總表模塊名稱： WEB UI設計課程負責人： 開發(fā)團隊： 序號學習任務工作過程描述學習目標學習內(nèi)容1企業(yè)網(wǎng)頁界面

6、設計網(wǎng)頁設計師從公司項目主管處接到個人網(wǎng)站設計策劃任務后，1.進行用戶調(diào)研，確定個人網(wǎng)頁的內(nèi)容，包括確定個人網(wǎng)站的名稱、表現(xiàn)的主要內(nèi)容、用戶的意圖；2.設計個人網(wǎng)頁欄目及組織結構；3.準備素材：收集與整理相關資料；4.界面設計：根據(jù)個人網(wǎng)站的訪問者對象、要提供的信息以及制作目標設計出一個最適合的個人網(wǎng)頁架構并進行美化網(wǎng)頁界面，交付用戶審核，用于網(wǎng)頁排版、測試及發(fā)布。5.必要時根據(jù)設計需要或用戶需求修改個人網(wǎng)頁界面。6.網(wǎng)頁界面設計制作或修改完畢后，簽字并交付項目主管驗收。7.完成工作后將資料整理、歸類與存檔，并提供給項目主管備檔。1能在接到企業(yè)網(wǎng)頁站設計的任務后，與教師進行有效溝通，寫出該項目

7、的用戶需求、設計網(wǎng)頁欄目及組織結構。2能按照用戶要求確定個人網(wǎng)站的名稱、表現(xiàn)的主要內(nèi)容、用戶的意圖來設計網(wǎng)頁界面。3能根據(jù)任務要求，收集與整理相關資料。4能基本熟悉網(wǎng)頁美化工具制作網(wǎng)頁界面。5能合理運用網(wǎng)頁設計色彩搭配，表現(xiàn)主題，特色鮮明。6能根據(jù)個人網(wǎng)站的訪問者對象、要提供的信息以及制作目標設計出一個最適合的網(wǎng)頁架構并進行美化網(wǎng)頁界面，交付給老師。7能根據(jù)老師審核后的意見和建議，進行網(wǎng)頁界面修改，最終符合用戶要求。8能將最終網(wǎng)頁設計資料整理、歸類與存檔，并提交老師評價。9.能設計比較復雜的網(wǎng)頁界面。1網(wǎng)頁界面設計的方法及流程2.對于個人網(wǎng)頁的設計如何進行用戶調(diào)研的方法與技巧，確定網(wǎng)頁的內(nèi)容。

8、3個人網(wǎng)頁設計網(wǎng)頁欄目及組織結構的方法與技巧。4收集與整理個人網(wǎng)頁界面設計資料的方法5網(wǎng)頁設計常用工具的使用方法6根據(jù)個人網(wǎng)站的訪問者對象、要提供的信息以及制作目標設計出一個最適合的網(wǎng)頁架構進行美化網(wǎng)頁界面的制作過程，交付用戶審核的技巧。7必要時根據(jù)設計需要或用戶需求修改網(wǎng)頁界面的方法。8網(wǎng)頁界面設計修改完畢后，簽字并交付項目主管驗收。9完成工作后將資料整理、歸類與存檔，并提供給項目主管備檔。2電商網(wǎng)頁界面設計網(wǎng)頁設計師從公司項目主管處接到某旅游網(wǎng)站設計策劃任務后，1.進行用戶調(diào)研，確定網(wǎng)頁的內(nèi)容，包括確定網(wǎng)站的名稱、表現(xiàn)的主要內(nèi)容、用戶的意圖；2.設計某旅游網(wǎng)頁設計欄目及組織結構；3.準備素

9、材：收集與整理旅游網(wǎng)頁設計資料；4.界面設計：根據(jù)旅游網(wǎng)站的訪問者對象、要提供的信息以及制作目標設計出一個最適合的網(wǎng)頁架構進行美化網(wǎng)頁界面，交付用戶審核，用于網(wǎng)頁排版、測試及發(fā)布。5.必要時根據(jù)設計需要或用戶需求修改網(wǎng)頁界面。6.網(wǎng)頁界面設計制作或修改完畢后，簽字并交付項目主管驗收。7.完成工作后將資料整理、歸類與存檔，并提供給項目主管備檔。1能在接到網(wǎng)頁設計的任務后，與教師進行有效溝通，寫出該項目的用戶需求、設計網(wǎng)頁欄目及組織結構。2能按照用戶要求確定網(wǎng)站的名稱、表現(xiàn)的主要內(nèi)容、用戶的意圖來設計網(wǎng)頁界面。3能根據(jù)任務要求，收集與整理相關資料。4能熟練應用網(wǎng)頁美化工具制作網(wǎng)頁界面。5能更合理運

10、用網(wǎng)頁設計色彩搭配，能表現(xiàn)主題，特色鮮明。6能根據(jù)網(wǎng)站的訪問者對象、要提供的信息以及制作目標設計出一個最適合的網(wǎng)頁架構進行美化網(wǎng)頁界面，交付給老師。7能根據(jù)老師審核后的意見和建議，進行網(wǎng)頁界面修改，最終符合用戶要求。8能將最終網(wǎng)頁設計資料整理、歸類與存檔，并提交老師評價。9.能設計更為復雜的網(wǎng)頁界面（例如：門戶界面設計等）。1網(wǎng)頁設計中的述語2.進行用戶調(diào)研方法與技巧，確定網(wǎng)頁的內(nèi)容。3設計旅游網(wǎng)頁欄目及組織結構的技巧。4收集與整理旅游網(wǎng)頁設計資料的方法5網(wǎng)頁設計常用工具（圖像）6根據(jù)旅游網(wǎng)站的訪問者對象、要提供的信息以及制作目標設計出一個最適合的網(wǎng)頁架構進行美化網(wǎng)頁界面的制作過程，交付用戶審

11、核的技巧。7必要時根據(jù)設計需要或用戶需求修改網(wǎng)頁界面的方法。8網(wǎng)頁界面設計修改完畢后，簽字并交付項目主管驗收。9完成工作后將資料整理、歸類與存檔，并提供給項目主管備檔。3門戶網(wǎng)頁界面設計網(wǎng)頁設計師從公司項目主管處接到政府類的網(wǎng)站設計策劃任務后，1.進行用戶調(diào)研，確定網(wǎng)頁的內(nèi)容，包括確定網(wǎng)站的名稱、表現(xiàn)的主要內(nèi)容、用戶的意圖；2.設計網(wǎng)頁欄目及組織結構；3.準備素材：收集與整理相關資料；4.界面設計：根據(jù)網(wǎng)站的訪問者對象、要提供的信息以及制作目標設計出一個最適合的網(wǎng)頁架構進行美化網(wǎng)頁界面，交付用戶審核，用于網(wǎng)頁排版、測試及發(fā)布。5.必要時根據(jù)設計需要或用戶需求修改網(wǎng)頁界面。6.網(wǎng)頁界面設計制作或

12、修改完畢后，簽字并交付項目主管驗收。7.完成工作后將資料整理、歸類與存檔，并提供給項目主管備檔。1能在接到網(wǎng)頁設計的任務后，與教師進行有效溝通，寫出該項目的用戶需求、設計網(wǎng)頁欄目及組織結構。2能按照用戶要求確定網(wǎng)站的名稱、表現(xiàn)的主要內(nèi)容、用戶的意圖來設計網(wǎng)頁界面。3能根據(jù)任務要求，收集與整理相關資料。4能靈活運用網(wǎng)頁美化工具制作網(wǎng)頁界面。5能合理運用網(wǎng)頁設計色彩搭配，表現(xiàn)主題，特色鮮明。6能根據(jù)網(wǎng)站的訪問者對象、要提供的信息以及制作目標設計出一個最適合的網(wǎng)頁架構進行美化網(wǎng)頁界面，交付給老師。7能根據(jù)老師審核后的意見和建議，進行網(wǎng)頁界面修改，最終符合用戶要求。8能將最終網(wǎng)頁設計資料整理、歸類與存

13、檔，并提交老師評價。1進行用戶調(diào)研的技巧，確定網(wǎng)頁的內(nèi)容。2設計網(wǎng)頁欄目及組織結構的技巧。3收集與整理相關資料的方法與技巧。4網(wǎng)頁設計常用工具的應用方法與技巧。5根據(jù)網(wǎng)站的訪問者對象、要提供的信息以及制作目標設計出一個最適合的網(wǎng)頁架構進行美化網(wǎng)頁界面的制作過程，交付用戶審核的技巧。6必要時根據(jù)設計需要或用戶需求修改網(wǎng)頁界面的方法。7網(wǎng)頁界面設計修改完畢后，簽字并交付項目主管驗收。8完成工作后將資料整理、歸類與存檔，并提供給項目主管備檔。18 / 18文檔可自由編輯學習任務設計方案舉例（以企業(yè)網(wǎng)站舉例）專業(yè)名稱計算機應用模塊名稱WEB UI設計學習任務1企業(yè)網(wǎng)站界面設計學時60工作情境描述某公司

14、現(xiàn)需要設計企業(yè)網(wǎng)站主頁，完成網(wǎng)頁設計后要發(fā)布到Web服務器上，讓其他用戶瀏覽，現(xiàn)請你為某企業(yè)設計網(wǎng)頁主頁。學習任務描述學生以個人獨立工作的形式，接受網(wǎng)頁界面設計任務，通過教師指導或借助參考書、網(wǎng)絡信息等資料，對企業(yè)網(wǎng)站界面設計項目的策劃和設計，使用網(wǎng)頁設計工具制作根據(jù)網(wǎng)站的訪問者對象、要提供的信息以及制作目標設計出一個最適合的網(wǎng)頁架構進行美化網(wǎng)頁界面，交付給老師。發(fā)現(xiàn)問題、分析問題，根據(jù)建議和再次自審改進，并對已完成的任務進行記錄，存檔。與其他學習任務的關系使學生了解網(wǎng)頁界面設計的方法，為以后的項目設計打下一定的基礎 學生基礎1學生要有一定計算機軟件操作基礎2對PHOTOSHOP等計算機設計軟

15、件操作有初步的認識。3有較強的自學能力。4有一定的審美能力。學習目標1能在接到企業(yè)網(wǎng)站設計的任務后，與教師進行有效溝通，寫出該項目的用戶需求，設計網(wǎng)頁欄目及組織結構。2能按照用戶要求確定個人網(wǎng)站的名稱、表現(xiàn)的主要內(nèi)容、用戶的意圖來設計網(wǎng)頁界面。3能根據(jù)任務要求，收集與整理相關資料。4能基本熟悉網(wǎng)頁美化工具制作網(wǎng)頁界面。5能合理運用網(wǎng)頁設計色彩搭配，表現(xiàn)主題，特色鮮明。6能根據(jù)個人網(wǎng)站的訪問者對象、要提供的信息以及制作目標設計出一個最適合的網(wǎng)頁架構并進行美化網(wǎng)頁界面，交付給老師。7能根據(jù)老師審核后的意見和建議，進行網(wǎng)頁界面修改，最終符合用戶要求。8能將最終網(wǎng)頁設計資料整理、歸類與存檔，并提交老師

16、評價。9能設計比較復雜的網(wǎng)頁界面。（例如：企業(yè)類的其他網(wǎng)頁界面設計等）學習內(nèi)容1網(wǎng)頁界面設計的方法及流程2對于企業(yè)網(wǎng)站網(wǎng)頁的設計如何進行用戶調(diào)研的方法與技巧，確定網(wǎng)頁的內(nèi)容。3企業(yè)網(wǎng)站網(wǎng)頁設計網(wǎng)頁欄目及組織結構的方法與技巧。4收集與整理個人網(wǎng)頁界面設計資料的方法5網(wǎng)頁設計常用工具的使用方法6根據(jù)企業(yè)網(wǎng)站網(wǎng)站的訪問者對象、要提供的信息以及制作目標設計出一個最適合的網(wǎng)頁架構進行美化網(wǎng)頁界面的制作過程，交付用戶審核的技巧。7必要時根據(jù)設計需要或用戶需求修改網(wǎng)頁界面的方法。8網(wǎng)頁界面設計修改完畢后，簽字并交付項目主管驗收。9完成工作后將資料整理、歸類與存檔，并提供給項目主管備檔。教學條件工具、材料、設

17、備及資料：工具：計算機繪圖軟件材料：草稿紙、筆設備：電腦、投影儀等資料：任務單、參考書、網(wǎng)絡等教學組織形式1學生以個人獨立工作的形式，接受個人網(wǎng)頁界面設計任務。2從項目主管處（老師）領取工作任務。3分組形式采集信息資料4各項目組與用戶（老師）有效溝通，有效完成工作任務。5與同事（同學）相互學習、溝通，有效完成工作任務。6從資料庫領取材料。教學流程與活動(詳細見下表)一、明確工作任務某公司現(xiàn)需要設計企業(yè)網(wǎng)站主頁，完成網(wǎng)頁設計后要發(fā)布到Web服務器上，讓其他用戶瀏覽，現(xiàn)請你為某企業(yè)設計網(wǎng)頁主頁。二、項目信息采集各項目組與用戶進行溝通，收集企業(yè)網(wǎng)站網(wǎng)頁設計的相關信息及用戶要求，并做好記錄，對企業(yè)網(wǎng)站

18、網(wǎng)頁設計進行分析，編寫網(wǎng)頁欄目及組織結構的規(guī)劃草圖。三、項目方案的策劃1按照企業(yè)網(wǎng)站網(wǎng)頁設計分析具體需求，與用戶的進一步溝通，填補缺失信息。2合理的安排企業(yè)網(wǎng)站網(wǎng)頁的欄目及組織結構。3根據(jù)收集的資料，進行初步設計。四、項目方案設計與制作1在初步設計草圖的基礎上，將設計網(wǎng)頁架構用PS工具表現(xiàn)出來，并利用口頭和文字兩種方式表述方案設計思路。2合理運用網(wǎng)頁設計色彩搭配，表現(xiàn)主題，特色鮮明。3根據(jù)企業(yè)網(wǎng)站網(wǎng)站的訪問者對象、要提供的信息以及制作目標設計出一個最適合的網(wǎng)頁架構并進行實現(xiàn)美化網(wǎng)頁界面五、方案演示與評價1開展介紹網(wǎng)頁設計整體思路和展示網(wǎng)頁界面設計效果，進行角色扮演。2利用評價表格進行自評或互評

19、。3評價過程和成果展示。評價內(nèi)容與標準1與用戶交流。2工作態(tài)度情況3信息收集及記錄情況；4需求分析情況5項目策劃情況；6項目內(nèi)容及框架結構的合理性。7欄目設置合理、功能完善情況8網(wǎng)頁美化工具應用情況9完成網(wǎng)頁界面設計效果情況；10整理資料工作情況；11展示與匯報情況；12認知工作過程中各環(huán)節(jié)的工作方法。教學活動策劃表教學活動關鍵能力學生學習活動教師活動學習內(nèi)容資源評價點學時地點項目信息采集資料查閱軟件使用相互溝通1查閱網(wǎng)頁設計的程序及設計主意事項和網(wǎng)頁設計概念。2與用戶進行交流溝通，根據(jù)用戶提供的信息，進行需求分析。3收集設計的相關信息及用戶要求的資料。1下達項目任務書2講解項目信息采集的注意事項3指導學生收集設計相關信息及用戶要求4講解網(wǎng)頁美化工具的應用5組織扮演用戶溝通活動1網(wǎng)頁界面設計的方法及流程2對于網(wǎng)頁的設計如何進行用戶調(diào)研的方法與技巧，確定網(wǎng)頁的內(nèi)容。3收集與整理網(wǎng)頁界面設