Axure需求说明书
单元9旅游景点网站—Axure低保真原型设计与CSS模型结构的标准流WEB前端开发实用案例教程
掌握网页设置元素边框、边界、填充和宽度等控制大小和间距的CSS属性
目录页/Contents
01
任务 1 旅游页面页头部分——盒子模型
02
任务 2 制作旅游网正文——标准文档流概念
01 知识储备
任务 1 旅游页面页头部分——盒子模型
【知识储备】
ቤተ መጻሕፍቲ ባይዱ
盒子模型是CSS中较为重要的核心概念之一，使用CSS控制页面元素外观和 位置的基础。只有充分理解盒子模型概念，才能进一步掌握CSS的正确使用方法 。那么，什么是盒子模型呢？
《WEB 前端开发实用案例教程》
第九单元 旅游景点网站
——Axure 低保真原型设计与CSS模型结构的标准流
通过Axure 制作低保真原型，确定需求功能，避免因客户需求变动返工，制 作效果是没有设计好的界面和功能模块，有的只是一份需求，理解这份需求的原 型设计，分析网页的各个功能模块，来进行原型设计。在现实情况下，通常拿到 的也只有一份需求说明书，从而根据原型设计的经验以及对说明书的理解来进行 设计。
网页布局CSS的核心，利用CSS来控制HTML 元素的位置，显示方法和大小等 。网页布局中最基本的布局方式是标准流布局，决定了网页元素的默认位置和显 示方式。通过旅游网站的网页布局，学习网页布局的基础知识，理解盒子模型和 标准流的概念。
教学目标：
掌握利用Axure软件制作低保真原型页面
掌握Axure软件设计页面中鼠标点击触发事件
图9-1 标准盒子模型示意图
HTML中的大多数元素都可以看做是一个盒子，网页元素的定位实际是大大 小小的盒子在页面中的定位。网页布局就是如何在页面中摆放、嵌套这些盒子 的问题。盒子尺寸计算、是否流动等要素。
软件需求分析说明书模板
软件需求分析说明书模板篇一：软件需求分析说明书模板保密级别：S资料编号：SRS-[产品代号] -[序列号] 版本：V[*].[*] [产品型号名称（二号字体）][部件型号名称（可选、小二号字体）]软件需求分析说明书共 11 页编制：审核：审定：会签：批准：XXXXXXXXXX公司[****]年[**]月[**]日文档修改记录目录1引言.................................................... ................. 2 1.1 编写目的 ................................................... ........ 2 1.2 范围 ................................................... ............ 2 1.3 定义、首字母缩写词和缩略语 ......................................... 2 1.4 参考资料 ................................................... ........ 2 项目概述 ................................................... .............. 3 2.1 产品描述 ................................................... ........ 3 2.2 产品需求 ................................................... .. (3)2.2.1 功能需求 ................................................... .. 3 2.2.2 性能需求 ................................................... .. 4 2.2.3 可服务性需求 (4)2.3 用户及用户特点 ................................................... .. 4 2.4 一般约束 ................................................... ........ 5 2.5 假设和依据 ................................................... ...... 5 用例描述 ................................................... .............. 5 3.1 用例1 .................................................... ......... 5 3.2 用例2 ............................................................. 6 3.3 用例n .................................................... ......... 6 外部接口需求 ................................................... .......... 7 4.1 用户接口 ................................................... ........ 7 4.2 硬件接口 ................................................... ........ 7 4.3 软件接口 ................................................... ........ 7 4.4 通信接口 ................................................... ........ 8 设计约束 ................................................... .............. 8 5.1 其他标准的约束 ................................................... .. 8 5.2 硬件的限制 ................................................... ...... 8 属性.................................................... ................. 8 6.1 可用性 ................................................... .......... 8 6.2 安全性 ................................................... .......... 9 6.3 可维护性 ................................................... ........ 9 6.4 可转移＼转换性 ....................................................9 6.5 警告 ................................................... ............ 9 其他需求 ................................................... .............. 9 7.1 数据库 ................................................... .......... 9 7.2 操作 ................................................... ........... 10 7.3 场合适应性需求 ....................................................10 附录.................................................... . (10)2345678[说明：本模板中的蓝色字体与橙色字体为说明性文字，在最终提交的文档中请删除这些说明性的文字。
需求分析说明书(模板)
需求分析说明书(模板) XXX系统需求分析说明书XXX系统需求分析说明书编号：XXXXXXX版本：1.0作者：审批：日期：日期：XXX系统需求分析说明书状态修订人修改日期版本备注XXX系统需求分析说明书目录11.11.21.31.44.14.24.34.44.54.655.1XXX体系需求阐发说明书5.2 5.31.1目的1.2范围1.3读者对象1.4术语与缩写解释缩写、术语解释XXX系统需求分析说明书系统管理员对人员信息进行统一管理，主要负责人员信息管理，包括人员的用户分配，人员的增加，帐户冻结，另外负责体系的优化和日常维护。
表12产品介绍与开发背景3产品意义4产品的功能性需求4.1系统划分系统功能划分如下：4.2用户脚色划分XXX系统需求分析说明书4.3登录登录体系管理员图3用户登录用例编号UC001说明用户输入登录信息，如用户名和暗码，以体系承认脚色身份进入本体系。
角色登录的信息。
信息用户名密码类型不少于6位，最多20位的字符不少于6位，最多20位的字符表2描绘用于登录系统的用户名用于登录身份考证的暗码登录确认用户通过在浏览器中输入用户的用户名和暗码，由背景体系收集输入的信息，并进行核实比较确认。
对应的事件流内容用例编号用例名称用例说明参与者前置条件后置条件UC001用户登录用户登录系统系统用户系统有效用户用户所输入的信息与后台系统数据库表中所保存的信息一致1.用户输入用户名、暗码，点击提交2.系统验证用户名和密码3.验证成功，系统跳转到主页说明基本路径XXX系统需求分析说明书扩展路径1.用户输入的登录信息的用户名无效2.体系提示输入正确格式的用户名信息3.用户输入的密码无效4.系统提示输入正确的密码信息表3活动图输入用户名和密码点击登录否登录信息考证是否通过是登录成功图4用户登录活动图4.4注销注销登录系统管理员图5注销用例图U003说明已登录用户，点击“注销”按钮安全退出系统。
对应的事件流XXX系统需求分析说明书内容用例编号用例名称用例说明介入者前置条件后置条件基本路径UC003用户注销说明用户在体系中注销已登录用户用户已经成功登录系统系统注销掉当前登录状态下的用户1.用户点击注销功能按钮2.系统注销掉当前登录的用户3.注销成功，系统跳转到系统登录页面扩展路径无表4用例图点击注销按钮注销成功，调至登录页图6注销活动图4.5点窜暗码修改密码系统管理员图7点窜暗码用例编号UC004说明用户输入密码信息，如旧密码和两次密码一致的新密码，系统验证旧密码正确之后，再根据新密码进行密码的修改。
软件需求说明书模版(2020年整理).pptx
学海无涯 的目的，描述所 //需要的服务及内部组件通信的性质，确定将在组 件之间 共享的数据。如果 //必须用一种特殊的方法来实现数据共享 机制，那么就 必须把它定义为一种 //实现上的限制 4.4 通信接口
//描述与产品所使用的通信功能相关的需求，包括电子邮件、WEB 浏 览器、//网络通信标准或协议及电子表格等，定义相关的信息格式、 规定通信 安全 //或加密问题、数据传输速率和同步通信机制
8
学海无 涯
9
学海无 涯
4. 第四章是外部接口需求。包含四个部分： 4.1 用户界面 //陈述所需要的用户界面。描述每个用户界面的逻辑特征。以下是可 能 要 // 包 括 的 一 些 特 征 ： //◆将要采用的用户界面标准或产品系列的风格 //◆屏幕布局或解决方案的限制 //◆将出现在每个屏幕的标准按钮、功能或导航链接 //◆快捷键 的用 //户//界◆面错规误格信说息明显中示，标不准要写入软件需求规格说明书中 4.2 硬件接口 ////描对述于系用统户中界硬面件的每细个节接，例口如的特特定征对。可话能框包的括布支局持，建的议硬写件入类一型个、软独硬立 件之间 //交流的数据和控制信息的性质以及所使用的通信协议 4.3 软件接 口 //描述产品与其它外部组件的连接，包括数据库，操作系统，工具库 和集成 //的商业组件。明确并描述在软件组件之间交换数据或信息
//对产品(项目)进行定义，在该文档中详尽说明这个产品的软件需 求，包 //括修正或发行版本号。如果这个软件需求规格说 明书只与整个系 统的一 //部分有关，那么只定义文档中说 明的部分或子系统。 2. 文档约定
//描述编写文档时所采用的标准或排版约定，包括正文风格，提示 区或重 //要符号。例如，说明高层需求的优先级是否可以 被所有细化分需 求所继 //承，或者每个需求陈述是否都有 优先级。 3. 读者对象和阅读建议
目前最全面的需求规格说明书模板样本
文献编号：受控状态：■受控□非受控保密级别：■公司级□部门级□项目级□普通级记录编号：分发编号：中华人民共和国智慧旅游平台需求规格阐明书Version 1.0.07.23需求规格阐明书模板目录1前言................................................................................................................... 错误!未定义书签。
1.1编写目 ...................................................................................................... 错误!未定义书签。
1.2文档商定 .................................................................................................. 错误!未定义书签。
1.3读者对象 .................................................................................................. 错误!未定义书签。
1.4术语和缩略词 .......................................................................................... 错误!未定义书签。
1.5参照文档 .................................................................................................. 错误!未定义书签。
2项目概述........................................................................................................... 错误!未定义书签。
原型设计说明书模板
控制文档
修订历史
目录
1项目(系统)概述 (3)
1.1目的 (3)
1.2参考文档 (3)
2原型设计界面 (3)
2.1************需求/功能/流程 (3)
2.1.1原型设计界面 (3)
2.1.2界面/页面布局 (3)
2.1.3界面/页面说明 (4)
1项目(系统)概述
1.1目的
说明本文档的目的,例如用于帮助系统分析人员获取需求,与用户交流并澄清需求,用于指导软件系统界面设计
1.2参考文档
《详细设计》、《蓝图设计》、《需求定义书》等项目文件
2原型设计界面
2.1************需求/功能/流程
2.1.1原型设计界面
将结构化的需求进行框架化，因此原型也被称为线框图，具体的表现手法有很多种，相关的辅助软件也有很多，例如：Axure RP、Balsamiq Mockups、UIDesigner等等
2.1.2界面/页面布局
示例：
2.1.3界面/页面说明
这个页面完整的需求说明应该包括：
功能名称：功能（页面）的名称是什么
功能概述：该功能（页面）的主要作用是什么，满足用户什么需求，解决什么问题优先级：在整个项目的所有功能模块中优先级如何（P0、P1、P2…P0优先级最高）使用者：功能使用者，谁有权限使用前置条件：从哪里进入这个页面后置条件：操作后去到哪里
流程描述：以流程图的形式描述从前置条件到后置条件过程中所有主干、分支以及异常流程。
原型描述：产品原型图
功能规则：针对原型图的详细说明（如上的原型说明）其它：特殊需求的备注和说明。
软件需求说明书（需求设计说明文档）
软件需求说明书（需求设计说明文档）软件需求说明书1．引言1.1 项目名称1.2 项目背景和内容概要（项目的委托单位、开发单位、主管部门、与其它项目的关系，与其他机构的关系等）1.3 相关资料、缩略语、定义（相关项目计划、合同及上级机关批文，引用的文件、采用的标准等）（缩写词和名词定义）2. 任务概述2.1 目标（项目的开发目标和应用目标。
如果是其他系统的一部分，则说明其关系）2.2 范围（包含的业务，不包含的业务）2.3 假定条件与约束限制（尽量列出开展本项目的假定和约束，例如：经费限制，开发期限，设备条件，用户现场环境准备等）3．业务流程4．数据描述4.1 原始数据描述a. 静态数据b. 动态数据4.2 数据流向图4.3 数据概念模型和描述5．功能需求5.1 功能描述6．界面要求6．1报表格式6．2图形要求6．3输入输出要求7．接口要求(描述与本系统相连的系统的接口的数据格式，数据交换协议，接口功能等)8．性能需求8．1数据精确度（例如，数据内部精度，外部显示精度）8． 2数据量8． 3时间特性要求（根据所开发系统的特点，规定系统对时间的特性的要求。
例如：系统响应时间、界面更新处理时间、数据转换与传输时间）9．运行环境需求9．1网络和硬件设备平台（网络拓扑图及设备类型描述）操作系统平台数据库系统平台10.1编程工具10.2其它支撑软件11．其它专门需求11.1安装和操作11.2安全保密11.3维护服务。
详细需求说明书模板
需求说明书模板修改状态 生效日期 拟 制审 核审 批模板版本记录日期修改位置修改类型 修改描述修改人 审核人 审批人 版本变更说明：分为创建，增加，修改，删除。
使用说明：使用本模板时，将本页删除。
以下蓝色斜体字是模板说明文字，使用时请删除。
裁减说明：使用本模板时，可根据实际情况对模板内容进行裁减。
Xx 系统文档编号版本 A1 密级 秘密项目名称 Xx 系统项目来源需求规格说明书(内部资料请勿外传)编写：日期：检查：日期：审核：日期：批准：日期：XXXX科技有限公司版权所有不得复制XX系统 (1)需求规格说明书 (2)1. 前言 (3)1.1.产品背景 (3)1.2.用户背景 (4)1.3.术语、定义、缩略语 (4)1.4.参考资料 (4)2. 需求综述 (4)3. 详细功能需求 (4)3.1用户登录[示例] (4)3.1.1. 需求点描述 (4)3.1.2. 背景 (4)3.1.3. 业务分析图 (5)3.1.4. 功能描述 (5)3.1.5. 数据需求 (5)3.1.6. 界面 (5)3.1.7. 升级要求 (6)3.1.8. 性能要求 (6)3.1.9. 易用性 (6)3.1.10. 开发注意事项 (6)3.1.11. 相关性需求 (6)3.1.12. 测试注意事项 (6)1.前言1.1. 产品背景描述为什么要做这个系统，市场、行业、政策，或者版本升级等等相关背景信息。
根据《产品规划文档》中的信息，对产品进行总体的概述。
使系统软件分析设计人员、软件开发人员和软件测试人员，对该版本的运行环境、功能和性能需求有一个共同的了解，使之成为项目组工作的基础。
他们到底要实现什么产品，这个产品的整体情况是什么样子的，产品的主要功能是什么等等。
1.2. 用户背景描述本系统的用户背景、能力信息。
用户的能力也是一种潜在需求，对于能力强的用户，系统可以做的更专业点，对于能力弱的用户，系统要做的更简单点。
1.3. 术语、定义、缩略语定义系统或产品中涉及的重要术语，为读者在阅读文档时提供必要的参考信息。
产品需求说明书(PRD)模板-精简版
Confidential(公司内部文档)XXXX需求规格说明书需求规格说明书目录1 前言 (3)1.1编写目的 (3)1.2文档约定 (4)1.3术语和缩略词 (4)1.4参考资料 (5)2 项目概述 (5)2.1项目背景 (5)2.2项目目标 (5)2.3需求范围 (6)2.4总体框架 (6)2.5组织机构 (7)2.6用户特点 (8)2.7设计约束 (8)3 功能性需求 (9)3.1总体流程 (9)3.2角色定义 (9)3.3系统功能 (10)3.4功能描述 (10)4 非功能性需求 (14)4.1软件需求 (14)4.2硬件需求 (15)5 风险分析 (16)6 其他说明 (16)1 前言1.1 编写目的[说明编写这份需求规格说明书的目的，指出预期的读者（一般包括评审人员、软件设计人员、软件开发人员，针对具体情况，还可能包括客户），它是软件开发的基础。
]示例：1.准确全面定义、阐述xx业务需求，明确xx系统的目标和功能。
2.为有关业务部门和技术部门提供对这个系统的统一的文字的理解。
为业务部门判断系统是否满足其业务需要提供文字依据，为技术部门监督项目功能提供统一标准。
3.在xx系统之前尽可能周密考虑全部需求及设计要求，减少以后可能的重新设计、重新编码、重新测试等工作。
4.为设计项目方案、编制计划进度提供文字依据。
5.为对项目的完成进行确认和验证提供基准。
本需求规格说明书合法读者对象为：软件开发项目管理者、设计师、测试工程师、技术人员、业务人员。
1.2 文档约定[描述编写文档时所采用的字体标准或排版约定，包括标题和正文的字体和字号约定。
完成文档编写后，文档编写完成后本部分须裁剪]字体大小约定：标题1 宋体三号加粗标题2 宋体小三号加粗标题3 宋体四号加粗标题4 宋体小四号加粗标题5 宋体小四号正文宋体五号段落约定：文章中每段落需抬头，即段落开头需有两字元的缩排，单倍行距。
表与图编号约定：文中所有表、图须按章节编号，如：第四章节第二个表，编号为：表4-2。
需求分析说明书
需求分析说明书引言本需求分析说明书旨在对项目进行全面的需求分析，明确项目的目标和功能，为项目的开发和实施提供指导。
本文档将介绍项目的背景和目标，详细描述项目的需求，并提供相应的解决方案。
背景随着技术的发展和应用领域的不断拓宽，各行各业对信息化的需求也越来越高。
本项目旨在开发一个符合用户需求的信息管理系统，提供高效的信息处理和查询功能。
目标本项目的目标是建立一个能够满足用户需求的信息管理系统。
具体目标包括：1.实现用户对信息的录入、查询和删除功能；2.提供友好的用户界面，方便用户操作；3.支持多用户同时操作，实现信息的共享和协作；4.提供稳定可靠的数据存储和备份机制，保证信息的安全性。
需求分析功能需求基于项目的目标和用户需求，我们对系统的功能需求进行了详细的分析。
主要功能如下：1.用户管理：系统需要提供用户注册、登录和权限管理的功能。
2.信息录入：用户可以通过系统界面录入各类信息，并对信息进行编辑和保存。
3.信息查询：用户可以根据设定的条件对已录入的信息进行查询，并支持结果的排序和分页显示。
4.信息删除：用户可以选择删除不需要的信息，删除后需要提供数据的备份和恢复功能。
5.信息共享：系统需要支持多用户同时操作，实现信息的共享和协作。
非功能需求除了功能需求，我们还对系统的非功能需求进行了分析。
主要的非功能需求如下：1.可靠性：系统需要保证数据的准确性和完整性，能够正确处理各类异常情况。
2.用户界面：系统需要提供简洁、直观的用户界面，方便用户操作。
3.性能：系统需要能够支持大量用户同时操作，并保证系统的响应速度和稳定性。
4.安全性：系统需要保证用户信息的安全性，提供用户身份验证和数据加密的功能。
解决方案为了满足项目的需求，我们可以采用以下解决方案：1.技术选择：选择成熟稳定的开发框架和数据库技术，保证系统的稳定性和可靠性。
2.模块划分：将系统划分为用户管理模块、信息管理模块和用户界面模块，实现功能的分离和扩展性的提高。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
页面
页面树
首页
援护中心
援护案例
The Specification
Page 2
首页
用户界面
The Specification
Page 3
菜单对象
部件表
标注 标签 交互
1
OnMouseEnter(鼠标移入时):
用例 1:
设置横向导航状态查疾病
2
OnMouseEnter(鼠标移入时):
用例 1:
设置横向导航状态检查项目
3
OnMouseEnter(鼠标移入时):
用例 1:
设置横向导航状态找医生
4
OnMouseEnter(鼠标移入时):
用例 1:
设置横向导航状态找医院
5
OnMouseEnter(鼠标移入时):
用例 1:
设置横向导航状态找药品
6
OnMouseEnter(鼠标移入时):
用例 1:
设置横向导航状态找科室
7
OnMouseEnter(鼠标移入时):
用例 1:
设置横向导航状态找药企
8
OnMouseEnter(鼠标移入时):
用例 1:
设置横向导航状态找药店
9
OnMouseEnter(鼠标移入时):
用例 1:
设置横向导航状态整形项目
10
OnMouseEnter(鼠标移入时):
用例 1:
设置横向导航状态健康食品
11
OnMouseEnter(鼠标移入时):
用例 1:
设置菜单栏状态查病症状态
12
OnMouseEnter(鼠标移入时):
用例 1:
设置菜单栏状态查疾病状态
13
OnMouseEnter(鼠标移入时):
用例 1:
设置菜单栏状态检查项目
The Specification
Page 4
标注 标签 交互
14
OnMouseEnter(鼠标移入时):
用例 1:
设置菜单栏状态找医院
15
OnMouseEnter(鼠标移入时):
用例 1:
设置菜单栏状态找医生
16
OnMouseOut(鼠标移出时):
用例 1:
隐藏菜单栏
17
查病症 OnMouseEnter(鼠标移入时):
用例 1:
设置横向导航状态查病症
18
OnClick(点击时):
用例 1:
打开援护中心在当前窗口
19
OnClick(点击时):
用例 1:
打开援护中心在当前窗口
菜单栏
查病症状态
用户界面
The Specification
Page 5
查疾病状态
用户界面
检查项目
用户界面
找医院
用户界面
The Specification
Page 6
找医生
用户界面
横向导航
查病症
用户界面
查疾病
用户界面
The Specification
Page 7
检查项目
用户界面
找医院
用户界面
The Specification
Page 8
找科室
用户界面
找医生
用户界面
The Specification
Page 9
找药品
用户界面
找药企
用户界面
The Specification
Page 10
找药店
用户界面
整形项目
用户界面
The Specification
Page 11
健康食品
用户界面
The Specification
Page 12
援护中心
用户界面
部件表
标注 标签 交互
The Specification
Page 13
标注 标签 交互
1
OnMouseEnter(鼠标移入时):
用例 1:
设置援护中心介绍页面状态援护评估
2
OnMouseEnter(鼠标移入时):
用例 1:
设置援护中心介绍页面状态护理案例
3
OnMouseEnter(鼠标移入时):
用例 1:
设置援护中心介绍页面状态援护服务
援护中心介绍页面
援护评估
用户界面
护理案例
用户界面
部件表
标注 交互
The Specification
Page 14
标注 交互
1
OnClick(点击时):
用例 1:
在新窗口/标签页打开援护案例
OnMouseEnter(鼠标移入时):
用例 1:
设置无标签状态状态3
2
OnMouseEnter(鼠标移入时):
用例 1:
设置无标签状态状态2
3
OnMouseEnter(鼠标移入时):
用例 1:
设置无标签状态状态1
4
OnMouseEnter(鼠标移入时):
用例 1:
设置无标签状态状态2
5
OnMouseEnter(鼠标移入时):
用例 1:
设置无标签状态状态1
6
OnMouseEnter(鼠标移入时):
用例 1:
设置无标签状态状态2
7
OnMouseEnter(鼠标移入时):
用例 1:
设置无标签状态状态1
8
OnClick(点击时):
用例 1:
打开援护案例在当前窗口
援护服务
用户界面
The Specification
Page 15
无标签
状态
3
用户界面
状态
1
用户界面
状态
2
用户界面
The Specification
Page 16
援护案例
用户界面