河南中医药大学：《Web前端开发》课程教学课件讲稿（2021）第02章 开发工具

Web前端开发 第2章:开发工具 耿方方 13937198682/gff@hactcm educn http://web.book.51xueweb.cn 河南中医药大学管理科学与工程学科 2021.3

Web前端开发 第2章：开发工具 耿方方 13937198682 / gff@hactcm.edu.cn http://web.book.51xueweb.cn 河南中医药大学管理科学与工程学科 2021.3 1

2 本章主要内容 口开发工具综述 口设计工具 口开发工具 口调试工具 米 口代码托管工具 口项目管理系统

河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 本章主要内容  开发工具综述  设计工具  开发工具  调试工具  代码托管工具  项目管理系统 2

3 1开发工具综述 Web前端开发工具根据开发的阶段和用途不同,可分为: ■Web设计工具 ■Web开发工具 ■Web管理与维护工具 Web调试工具

河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.开发工具综述  Web前端开发工具根据开发的阶段和用途不同，可分为:  Web设计工具  Web开发工具  Web管理与维护工具  Web调试工具 3

开发阶段 使用工具 原型设计 Axure rp Microsoft office visio PhotoShop 技术开发 Adobe dreamweaver Netbeans VS Code Web调试 FireFox Google Chrome E Microsoft Edge 代码托管 Github SVN

河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 4 开发阶段 使用工具 原型设计 Axure rp Microsoft office Visio PhotoShop 技术开发 Adobe Dreamweaver Netbeans VS Code Web调试 FireFox Google Chrome IE Microsoft Edge 代码托管 GitHub SVN

5 2原型设计工具 2.什么是原型设计 口原型是一种让用户提前体验产品、交流设计构想、展示复杂系 统的方式。就本质而言,原型是一种沟通工具。 口原型设计是将页面的模块、元素、人机、交互的形式,利用线 框描述的方法,将功能更加具体、生动的进行表达 口原型划可分为以下3种类型: 纸原型:画在文档纸、白板上的设计原型、示意图,便于修改和绘制,不 便于保存和展示。 ■低保真原型:基于现有的界面或系统,通过电脑进行一些加工后的设计稿, 示意更加明确,能够包含设计的交互和反馈,但在美观、效果等方面欠佳。 高保真原型:包括产品演示Demo或概念设计展示,视觉上与实际产品等效, 体验上也与真实产品接近

河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 2.原型设计工具  原型是一种让用户提前体验产品、交流设计构想、展示复杂系 统的方式。就本质而言，原型是一种沟通工具。  原型设计是将页面的模块、元素、人机、交互的形式，利用线 框描述的方法，将功能更加具体、生动的进行表达。  原型划可分为以下3种类型：  纸原型：画在文档纸、白板上的设计原型、示意图，便于修改和绘制，不 便于保存和展示。  低保真原型：基于现有的界面或系统，通过电脑进行一些加工后的设计稿， 示意更加明确，能够包含设计的交互和反馈，但在美观、效果等方面欠佳。  高保真原型：包括产品演示Demo或概念设计展示，视觉上与实际产品等效， 体验上也与真实产品接近。 5 2.1什么是原型设计

6 高保真 低保真 Fidelity mocks 故事板Lo6 delity mocks 需求 搜集 Needfinding 做原型设计的一个核心原因是要和用户进行项目沟通 整体上考虑软件功能如何实现,并逐渐的填充软件的细节

河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 6 做原型设计的一个核心原因是要和用户进行项目沟通 整体上考虑软件功能如何实现，并逐渐的填充软件的细节

7 2原型设计工具 2.2原型设计工具- Axure rp 口简介 Axure是目前最受关注的原型设计工具,可以通过组件的方式帮助 网站或软件设计师快速建立带有注释的原型,并凭借自定乂的可重 用元件、动态面板以及丰富的脚本建立能够展示基本功能或页面逻 辑的动态演示文件。 Axure借鉴 Office的界面,为用户提供了丰富的组件样式,通过该 工具能够创建低保真、高保真甚至接近于实际效果的界面。 aXUre SEE IT HAPPEN

河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 2.原型设计工具  简介  Axure是目前最受关注的原型设计工具，可以通过组件的方式帮助 网站或软件设计师快速建立带有注释的原型，并凭借自定义的可重 用元件、动态面板以及丰富的脚本建立能够展示基本功能或页面逻 辑的动态演示文件。  Axure借鉴Office的界面，为用户提供了丰富的组件样式，通过该 工具能够创建低保真、高保真甚至接近于实际效果的界面。 7 2.2原型设计工具-Axure RP

8 2原型设计工具 2.2原型设计工具- Axure rp 口主要特点 ■快速建构概念原型 口利用 Axure几何形状、文字物件等可快速建立逼真的网站或APP原型。 ¤建立格线系统,精确实现汇入图片、建立色块、改变物件形状和半透 明填色等各种视觉表现的概念。 ■呈现逼真互动效果 口提供下拉选单、动态内容、状况逻辑设定、计算、动态Hide/Show Layer效果等互动物件与功能。 口模拟AJAX/ Flash动态效果,可以为客户提供一个真实网站的意象

河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 2.原型设计工具  主要特点  快速建构概念原型  利用Axure几何形状、文字物件等可快速建立逼真的网站或APP原型。  建立格线系统，精确实现汇入图片、建立色块、改变物件形状和半透 明填色等各种视觉表现的概念。  呈现逼真互动效果  提供下拉选单、动态内容、状况逻辑设定、计算、动态Hide/Show Layer效果等互动物件与功能。  模拟AJAX/Flash动态效果，可以为客户提供一个真实网站的意象。 8 2.2原型设计工具-Axure RP

9 十 2 现场演示: 在 Windows10系统平台上安装 Axure rp pro9.0。 Axure rpz软件界面和基本使用方法。 ■使用 Axure rP实现百度登录页(或其他页面)的原型设计。 软件获取: 通过软件官方网站(htt!/ w.axure. com)

河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 9 现场演示：  在Windows 10系统平台上安装Axure RP Pro 9.0。  Axure RP软件界面和基本使用方法。  使用Axure RP实现百度登录页（或其他页面）的原型设计。 软件获取： 通过软件官方网站（http://www.axure.com）

10 十 2 现场演示 ■在 Windows10系统平台上安装 Photoshop ■ PhotoShop软件界面和基本使用方法。 新建画布 导入图片 常用工具的使用(选取工具、仿制图章、吸管工具等) 用 PhotoShop制作简单的网页

河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 10 现场演示：  在Windows 10系统平台上安装Photoshop。  PhotoShop软件界面和基本使用方法。 新建画布 导入图片 常用工具的使用（选取工具、仿制图章、吸管工具等） 用PhotoShop制作简单的网页