Web前端开发 第2章:开发工具 耿方方 13937198682/gff@hactcm educn http://web.book.51xueweb.cn 河南中医药大学管理科学与工程学科 2020.2
Web前端开发 第2章：开发工具 耿方方 13937198682 / gff@hactcm.edu.cn http://web.book.51xueweb.cn 河南中医药大学管理科学与工程学科 2020.2 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 技术开发 Adobe dreamweaver Netbeans VS Code Web调试 Fire Fox Google Chrome E Microsoft Edge 代码托管 Github SVN
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 4 开发阶段 使用工具 原型设计 Axure rp Microsoft office Visio 技术开发 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 需求 搜集 Storyboard 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实现百度登录页(或其他页面)的原型设计 软件获取 通过软件官方网站(http://ww.axure.com)
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 9 现场演示： ◼ 在Windows 10系统平台上安装Axure RP Pro 9.0。 ◼ Axure RP软件界面和基本使用方法。 ◼ 使用Axure RP实现百度登录页（或其他页面）的原型设计。 软件获取： 通过软件官方网站（http://www.axure.com）
10 3开发工具 3.开发工具的作用 口开发工具的作用 ■用于对HTM、CSS和 JavaScript程序的编写。 ■将设计好的信息更好地呈现出来。 口目前基本上所有的软件开发IDE工具,均能够较好的支持Web前 端开发的需求
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 3.开发工具 开发工具的作用： ◼ 用于对HTML、CSS和JavaScript程序的编写。 ◼ 将设计好的信息更好地呈现出来。 目前基本上所有的软件开发IDE工具，均能够较好的支持Web前 端开发的需求。 10 3.1开发工具的作用