电子商务视觉设计 课件 项目二 电商网站的视觉规划

模块一电商视觉设计认知《电商视觉设计》思维导图网站商城整体设计1目录CONTENTS3电商网站的视觉规划电商视觉营销的规划2项目二

电商网站的视觉规划项目背景

在全渠道数字化运营项目中，电商网站的建立和运营是其中一个重要的环节，为各项运营活动提供平台和载体。随着互联网的快速发展，电商网站也在日新月异中快速发展，同时消费者对电商网站也有了更高的要求，这种要求不仅体现在网站的功能方面，还体现在电商网站的视觉设计方面。

一个网站的视觉规划有利于网站的运营，一方面消费者能够清晰地看到电商网站的布局，可以迅速找到自己目标所在的位置，另一方面网站的色彩搭配也能够吸引到消费者。进行电商网站视觉规划，需要在有效地产品需求分析基础上，清楚地了解产品需求，然后根据具体的产品需求进行产品概念设计，再在产品原型制作的指导下科学、有序地展开产品研发工作。研究内容产品需求分析产品概念设计产品原型制作学习目标1.了解产品需求分析的概念、内容；2.熟悉产品概念设计的内容；3.熟悉产品原型制作的理论知识。知识目标1.能够独立进行产品需求分析，并撰写需求报告；2.能够根据产品需求分析，独立进行产品概念设计；3.能够进行简单的产品原型制作。技能目标1.了解社会主义核心价值观，诚实守信，遵守职业道德；2.具备积极主动的工作态度、较强的视觉审美与设计能力；3.具备较强的沟通能力和良好的解决问题能力。素养目标任务一产品需求分析预备知识一、认识产品需求分析

产品需求分析是进行产品设计的前提,是开发人员经过深入细致的调研和分析，准确理解用户和项目的功能、性能、可靠性等具体要求，将用户非形式的需求表述转化为完整的需求定义，从而确定系统功能的过程。预备知识二、产品分析的内容010203用户画像分析竞品分析用户场景分析预备知识二、产品分析的内容1.用户画像分析

用户画像是指根据用户的属性、用户偏好、生活习惯、用户行为等信息而抽象出来的标签化用户模型，是对现实世界中用户的建模，在电商领域应用广泛。预备知识二、产品分析的内容1.用户画像分析

用户画像分析的中心是绘制用户画像，是指在对用户进行研究的基础上，将他们区分为不同的类型，找出行为变量，抽象出对应的标签，综合各种典型特征形成人物模型类型，对人物模型赋予名字、人口统计学要素、场景等描述，形成了一个人物原型(personas)。预备知识二、产品分析的内容1.用户画像分析

通俗地说，绘制用户画像就是给用户打标签，而标签是通过对用户信息分析得来的高度精炼的特征标识。标签类别标签内容基础属性年龄、性别、身高、地域、星座、教育程度、职业、专业等社会特征婚姻状况、家庭情况、父母、配偶、社交等消费特征收入状况、消费水平、信用卡、房贷、购买渠道偏好、频次等兴趣爱好兴趣、浏览偏好、收藏内容、互动内容、品牌偏好等行为特征团购、加班、迟到、注册时间、流程、习惯等心理特征敏感、选择恐惧症、犹豫、追求高品质等表2-1标签分类预备知识二、产品分析的内容2.竞品分析

竞品分析，是对竞争产品、竞争对手的产品进行分析，得出竞品、自身产品各自的优势、劣势。竞品分析客观分析主观分析从竞争对手或市场相关产品中，圈定一些需要考察的角度，得出基于事实的情况，如市场布局状况、产品数量、销售情况等主观分析是一种接近于用户流程模拟的结论，如用户流程分析、用户体验等预备知识二、产品分析的内容2.竞品分析产品定位产品设计产品策略分析竞品用户分析功能分析数据分析了解竞品功能完全相同的竞品核心功能相似的竞品功能本质相同的竞品选择合适的竞品不同阶段目标不同明确目标竞品分析的步骤预备知识二、产品分析的内容2.用户场景分析

用户场景，即用户+场景，用户（who）携带相应的属性，场景则表示在某个时间（when)、某个地点下(where)，因为某个因素（what）的影响，做什么（do)。这些信息实际上描述了产生需求的环境，从这些环境信息可以分析引起需求的条件和需求产生时的环境条件，知道要帮助用户解决什么痛点问题。表2-2用户场景用户小杨，27岁，女，都市白领，喜欢美食，场景在结束了一周上班之后，周五晚上小杨跟几个同事相约一起去聚餐。这个时候想到MT应用，找一个离公司3km以内的价格实惠并且环境不错的餐厅。经过App的推荐，选择了评分和评价都不错的一家日料餐厅，购买了优惠券进行线下消费。预备知识二、产品分析的内容2.用户场景分析在用户场景分析中，场景可以针对多角色、多任务，描述更有针对性的细节，既要从产品经理的角度去思考产品设计和优化，又要从用户的角度，审视用户体验过程。确定了用户场景之后，可以通过“故事化”+“图形化”的方式，从用户角度出发，记录用户在使用产品时的一系列行为、情绪、感受等，以帮助团队更好地审视产品。预备知识三、需求分析报告1.用户需求报告

用户需求报告一般是针对某个市场或用户群来说的，是通过对调研来的用户需求进行整理，最终形成一个系统完整的文字说明，从内容上来说侧重于用户的需求和期望，是站在用户的角度说明产品的功能，体现出产品的重点、热点。预备知识三、需求分析报告1.用户需求报告一、引言二、项目概述随着信息化时代的到来，图书的信息化管理可以极大地解决图书管在图书管理方面的一些难点、痛点问题，这款图书信息化管理系统应运而生。本系统主要分为两大模块：图书馆管理员模块和读者登录模块……三、需求分析1.系统功能结构（1）管理员端（2）学生用户端2.功能需求描述3.性能需求（1）时间要求（2）适应性……四、运行环境描述1.支持的软件2.接口…………六、其他需求1.系统处理的准确性与及时性2.系统的开放性和可扩充性…………

通常情况下，需求报告包括了项目概述、需求分析、其他等几个模块。项目概述主要描述项目背景、项目总体需求等方面的内容，能够帮助设计人员更好地理解相关需求。需求分析主要是对提出来的需求进行逐个说明解释分析，包括每个需求提出来的原因、要达到的目的等。其他则是用户需求中其他相关的内容，能够帮助设计人员理解需求。预备知识三、需求分析报告2.软件需求规格说明书

软件需求规格说明书，一般是从开发、测试的角度去讲产品功能，侧重于业务规则方面，偏向于软件的需求设计到概要设计，包含原型界面、业务接口等。表2-3软件需求规格说明书概要概要说明文件命名公司名+产品名，产品经理信息修订控制页编号、文档版本、修订内容、修订原因、修订日期、修订人等信息项目背景说明需求的背景，需求的数据支持等需求来源说明需求提出人或者需求反馈团队项目指标及收益评估上线后项目的收益项目方案简要说明该项目涉及的主要模块时间节点期望上线时间相关页面截图产品自身、竞品的相关页面截图、原型需求详述针对具体的模块、页面，详细阐述需求与规格运营方案列出后续运营计划附录历次沟通意见汇总表实施准备无论是新产品的上线还是产品迭代都离不开需求分析。需求分析决定着产品的研发和迭代方向，一旦出现偏差就会和用户的真实需求背道而驰，因此掌握正确的需求分析方法也就特别重要。任务实施与分析

需求分析的工作流程，根据项目的复杂程度有所区别，但是总的来说，分成以下四个环节：获取需求、分析需求、整合需求、形成报告。获取需求分析需求整合需求形成报告任务实施与分析

步骤1.1：确定获取需求的渠道步骤1：获取需求内部渠道包括产品、领导、同事、自己外部渠道包括行业、用户、竞品、合作伙伴任务实施与分析

步骤1.2：确定获取需求的方法步骤1：获取需求产品团队获取需求的方法有很多种，在实践中可根据获取渠道的不同和对象的不同，选择合适的方法。常用的获取需求的方法有：用户研究、问卷调查、访谈法、实地调研、竞品分析和研究资料等。任务实施与分析

步骤1.3：获取需求并记录需求步骤1：获取需求依据获取需求的渠道与方法获得需求后，需要对数据进行初步记录，以便于后面对需求进行分析、管理与实现。通常记录需求包括以下要素：需求类型、需求来源、需求内容、需求场景。表2-4需求记录表需求编号

需求类型

需求来源

需求内容

需求场景

记录时间

记录人员任务实施与分析

步骤1.3：获取需求并记录需求步骤1：获取需求需求类型按产品属性划分可分为idea、新增、优化、Bugfix这四种类型；按产品职能划分可分为功能类需求、运营类需求、数据类需求、设计类需求；按需求性质划分可分为：显性的、隐性的。需求的来源多种多样，每一个提出需求的主体都有自己特定的立场和观点，明确提出需求的主体有利于更好地理解需求。需求内容，就是需求是什么。记录时尽量用“主语+谓语+宾语”语法结构，不要加入主观修饰语句，避免对后面的需求分析做出干扰。需求场景，是对需求产生整个过程的描述，涵盖场景和原因，是利用一些叙事的基本元素对需求产生整个过程的描述。任务实施与分析

分析需求是提炼产品目标的阶段，将前期得到的纷繁的用户需求转化成产品需求，并对其进行梳理、细化成系统的功能，通过抽象角色及角色所需功能，得到系统的模型，明确系统各元素间的联系等。步骤2：分析需求任务实施与分析

步骤2.1：需求筛选步骤2：分析需求真实性一致性价值型可行性需求筛选考察的维度任务实施与分析

步骤2.2：需求透视步骤2：分析需求

需求按认知层面的划分，可分为表面需求和本质需求。需求透视这一步骤，目的就在于从获取的表面需求中提炼出用户的本质需求，理解用户的本质需求，则有利于更好地提出产品需求。表面需求产品需求本质需求任务实施与分析

步骤2.3：需求排序步骤2：分析需求

需求排序，简单来说就是依据需求的重要性给需求排列优先级。需求排序有三个基本考虑因素，分别是战略定位、产品定位、用户需求。战略定位A产品定位B用户需求CB任务实施与分析

步骤2.3：需求排序步骤2：分析需求

相关性01逻辑性0203价值04强度05广度06频率07类型性任务实施与分析

步骤2.3：需求排序步骤2：分析需求

KONO模型是用户认为产品必须提供功能来充分满足的需求基本型需求用户认为产品应该提供更优秀的功能来更好地满足的需求期望型需求是用户自己并没有意识到的隐性需求兴奋型需求任务实施与分析

步骤2.3：需求排序步骤2：分析需求

这三类需求的重要性判断原则是：基本型需求最重要，期望型需求和兴奋型需求在不好判断时通过需求重要性公式确定。期望型需求和兴奋型需求的重要性公式是：重要性=功能使用用户百分比(用户使用率)×功能使用次数百分比(功能使用率)×类别重要性百分比任务实施与分析

步骤2.3：需求排序步骤3：整合需求

经过需求分析的环节，梳理出一系列有效需求，这时就要对需求进行拆分，将需求拆分成产品的各个功能点，初步设计出产品的整体架构、产品形态、核心流程、功能组合等，同时与领导、关键客户等产品关键决策人进行讨论汇报，确保产品（方案）宏观方向的正确性，获取资源支持。任务实施与分析步骤4：撰写需求报告/软件产品规格说明整合需求，将各个需求点与产品设计相对接，设计出初步的产品概貌后，就可以撰写产品需求报告/软件产品规格说明书。需求报告/软件产品规格说明书是为了指导设计、开发人员更好的理解产品，最终开发出能够解决用户痛点问题的产品，因此撰写产品需求报告尤为重要。任务实施与分析步骤4：撰写需求报告/软件产品规格说明撰写需求报告，需求报告包括了项目概述、需求分析、其他等几个模块；软件产品规格说明书包含以下几个部分：文档概述、产品结构、产品说明、业务流程、功能细化说明、非功能说明等。拓展知识一、判断需求优先级的方法-四象限法则重要性是指需求是否符合公司战略发展，是否是产品线上的战略项目、是否和公司的收益挂钩、是否满足产品的基础服务等等，总之，在时间上不具有紧迫性，但是会对未来的发展产生重大的影响。紧急性是指需求是否必须立即解决，如不解决会持续影响产品或将要产生不良影响。这类需求不一定很重要，但在时间上有紧迫性。拓展知识一、判断需求优先级的方法-四象限法则第一象限的需求，必须尽快分配资源，抓紧时间来实现。第二象限的需求，需花时间、精力去精细化处理好。如不及时处理，就堆积到第一象限。第三象限和第四象限相对来说是不重要的事情，但它们也是需求，可以花费一定的时间统一去处理。注意这类需求要和第一、第二象限的需求严格区分开来，不能因为边缘任务影响主线任务进展。思考与总结学员通过以上操作，完成对产品需求分析，请学员在此基础上，进行思考并回答以下问题：在分析需求时，可通过哪些方法进行需求分析？能力提升李胜在淘宝网开通了一家玩具店，主营少儿玩具，如拼图、积木、磁力棒、魔幻陀螺、百变校巴、超级飞侠等，品类十分丰富。现为提升店铺的浏览量与客单价，李胜拟从网店视觉设计的角度对店铺进行优化。请学生搜集资料，结合玩具市场概况，对店铺的产品进行市场需求分析，撰写一份需求分析报告。任务训练扫码进入课程网站，获取对应任务单，阅读任务目标，根据任务步骤，完成拓展任务并提交。模块一电商视觉设计认知《电商视觉设计》思维导图网站商城整体设计1目录CONTENTS3电商网站的视觉规划电商视觉营销的规划2项目二

电商网站的视觉规划项目背景

在全渠道数字化运营项目中，电商网站的建立和运营是其中一个重要的环节，为各项运营活动提供平台和载体。随着互联网的快速发展，电商网站也在日新月异中快速发展，同时消费者对电商网站也有了更高的要求，这种要求不仅体现在网站的功能方面，还体现在电商网站的视觉设计方面。

一个网站的视觉规划有利于网站的运营，一方面消费者能够清晰地看到电商网站的布局，可以迅速找到自己目标所在的位置，另一方面网站的色彩搭配也能够吸引到消费者。进行电商网站视觉规划，需要在有效地产品需求分析基础上，清楚地了解产品需求，然后根据具体的产品需求进行产品概念设计，再在产品原型制作的指导下科学、有序地展开产品研发工作。研究内容产品需求分析产品概念设计产品原型制作学习目标1.了解产品需求分析的概念、内容；2.熟悉产品概念设计的内容；3.熟悉产品原型制作的理论知识。知识目标1.能够独立进行产品需求分析，并撰写需求报告；2.能够根据产品需求分析，独立进行产品概念设计；3.能够进行简单的产品原型制作。技能目标1.了解社会主义核心价值观，诚实守信，遵守职业道德；2.具备积极主动的工作态度、较强的视觉审美与设计能力；3.具备较强的沟通能力和良好的解决问题能力。素养目标任务二产品概念设计预备知识一、认识产品概念设计

产品概念设计是指由分析用户需求到生成概念产品的一系列有序的、可组织的、有目标的设计活动，产品概念设计的最终目的是开发新产品，而新产品必须满足用户需求，这就要求产品概念设计要以用户需求为重要设计依据。预备知识二、产品概念设计的内容010203信息架构图功能流程图页面流程图

预备知识二、产品概念设计的内容1.信息架构图

信息结构图是对信息进行梳理，帮助产品团队梳理信息，理解产品需求，确定基本功能设计和内容，同时也可以梳理页面逻辑关系和层级跳转。预备知识二、产品概念设计的内容1.信息架构图

（1）功能结构的梳理在产品的层次结构（不同的层级模块）中，首先确定产品目标及产品定位，再确定功能需求和功能模块，接下来对产品信息结构进行分析，即信息架构，随后进行界面设计和视觉设计。因此，在确定产品架构图之前，应先对产品的功能结构进行梳理。预备知识二、产品概念设计的内容1.信息架构图

（1）功能结构的梳理

功能结构图是以功能模块为单位绘制的功能从属关系图，功能模块的颗粒度可大可小，分解的最小功能模块可以是一个程序中的每个处理过程，而较大的功能模块则可能是完成某一个任务的一组功能集合。预备知识二、产品概念设计的内容1.信息架构图

（1）功能结构的梳理

在确定功能框架并完善了功能结构之后，需要将核心字段与功能模块进行映射，即可生成信息架构图。预备知识二、产品概念设计的内容1.信息架构图010203进行一级节点的分类逐个细化一级节点中的功能对不同路径的同一功能或页面进行标识（2）绘制信息架构图的步骤

绘制信息架构图可以采用自上而下或自下而上的体系。以自上而下为例，信息架构的步骤为：预备知识二、产品概念设计的内容1.信息架构图

（2）绘制信息架构图的步骤

在信息架构图的展开中，节点的宽度和深度都不宜过多。一级节点增加则宽度增加，信息的整体性不明确界面结构不清晰，深度增加则容易造成功能隐蔽用户体验不佳。因此，寻找一个平衡，设计“窄而浅”的信息树，是信息架构设计的基本原则之一。预备知识二、产品概念设计的内容1.信息架构图（3）信息架构图的绘制工具

信息架构图的绘制工具有很多，如思维导图工具、图形绘制工具、原型设计工具等，常见的绘制软件工具有XMind、Viso、Axure等。预备知识二、产品概念设计的内容2.功能流程图

功能流程图是描述业务逻辑的图表，用来确定产品功能的设计逻辑。以业务流程图为主线，去细化每个环节的功能逻辑以及不同模块之间的数据流向。预备知识二、产品概念设计的内容2.功能流程图天猫退货业务流程预备知识二、产品概念设计的内容2.功能流程图手机验证注册账号功能流程预备知识二、产品概念设计的内容2.功能流程图

绘制功能流程图的工具有很多，常见的有微软的Visio、ProcessOn、drawio、GitMind、AxureRP等。ProcessOn、drawio、GitMind，通过网络即可访问，无需安装本地管理文件。除此之外，还有本地版工具如Edraw、迅捷画图等。预备知识二、产品概念设计的内容2.功能流程图

在功能流程图的绘制中，元件具有严格的规范性，如下图表示了绘制功能流程中常见的元件及含义和用法。预备知识二、产品概念设计的内容3.页面流程图

页面流程图是描述网站页面跳转关系和页面后续操作的流程图，需要在业务流程图之后在原型设计之前进行制作。预备知识二、产品概念设计的内容3.页面流程图（1）页面流程图的内容页面名称ACB核心元素连接线页面流程图的内容预备知识二、产品概念设计的内容3.页面流程图（2）绘制页面的流程04优化调整03补充交互细节说明02明确页面中的核心元素和逻辑关系01明确业务流程预备知识二、产品概念设计的内容3.页面流程图（3）注意事项在绘制页面流程图时，需要注意以下几点：直接进行页面功能流程图的设计，不需要写每个功能的作用。不要忽略异常流程的处理，关于异常流程的处理逻辑，在模型中一般表现为弹层或者提示。加强产品的全局意识，做好引导下游页面的触发点设计。任务实施与分析

在产品概念设计的过程中，需要围绕需求进行，从得到的需求出发，根据现有的互联网设计技术进行产品概念设计。三、设计规范切合实际有中心

设计流程图中的基本要求实施准备在产品概念的设计过程中，需要注意产品功能的概念化、设计概念的可视化和概念设计的商品化。设计一个电商网站，需要能够体现出网站的功能化，不仅是一个产品展示的画面，还是一个可进行网站浏览的动态画面，可供消费者进行商品的浏览和深入了解。任务实施与分析

通常情况下，产品概念设计的流程分为了以下四个步骤：1.研读需求报告，梳理产品框架；2.设计信息架构图；3.设计功能流程图；4.设计页面流程图。梳理产品框架A设计信息架构图B设计功能流程图C设计页面流程图D任务实施与分析步骤1：研读需求报告，梳理产品框架在经过需求分析后形成了需求分析报告，初步设计出了产品的大概框架、基本功能、业务流程，这时还需要团队成员一起开会讨论研究产品需求，细化产品框架、业务流程细节、功能实现方式等。任务实施与分析步骤2：设计信息架构图明确了产品的具体需求后，需要绘制信息架构图直观地描述产品的信息骨架。如设计一个电商网站，它的结构包括哪几个模块，每个模块具体包括哪些元素，要初步确定出网站信息的构成。任务实施与分析步骤3：设计功能流程图信息架构图给出了产品的整体概貌，具体的功能是如何实现的，这就需要将拆解出的一个个功能通过流程图绘制出来，让开发人员能够清楚明了地理解具体功能的实现路径。任务实施与分析步骤3：设计功能流程图某电商网站后台订单管理流程图任务实施与分析步骤4：设计页面流程图

页面流程图是从用户的角度展示页面的逻辑，代表用户所有可能的操作过程，能够检验流程的合理性，快速发现体验问题。在绘制压面流程图的过程中，注意要突出页面元素与逻辑关系，提升原型设计的效率。任务实施与分析步骤4：设计页面流程图（1）在购物车页面进行“提交订单”进行结算；（2）输入优惠码页面突出“什么是优惠码”的辅助内容。输入优惠码后点击“确认订单”，触发相关判断；（3）订单确认页面重点突出金额相关信息，操作“去支付”，支付完成后跳转订单。以某网站优惠券使用的页面为例，给产品增加优惠码功能，即让运营人员通过向用户发放优惠码，用户在下订单时使用优惠码，抵相应折扣（金额）。拓展知识一、产品概念设计的研究发展方向人机协作的概念设计系统研究协作式产品概念设计研究统一产品模型描述方式的研究复杂产品概念设计模型研究思考与总结学员通过以上操作，完成产品概念设计的分析，请学员在此基础上，进行思考并回答以下问题：在设计产品时，需要考虑哪些方面的内容？能力提升

请学生以华为商城为例，梳理该网站的信息架构图以及某功能流程图。任务训练

扫码进入课程网站，获取对应任务单，阅读任务目标，根据任务步骤，完成拓展任务并提交。模块一电商视觉设计认知《电商视觉设计》思维导图网站商城整体设计1目录CONTENTS3电商网站的视觉规划电商视觉营销的规划2项目二

电商网站的视觉规划项目背景

在全渠道数字化运营项目中，电商网站的建立和运营是其中一个重要的环节，为各项运营活动提供平台和载体。随着互联网的快速发展，电商网站也在日新月异中快速发展，同时消费者对电商网站也有了更高的要求，这种要求不仅体现在网站的功能方面，还体现在电商网站的视觉设计方面。

一个网站的视觉规划有利于网站的运营，一方面消费者能够清晰地看到电商网站的布局，可以迅速找到自己目标所在的位置，另一方面网站的色彩搭配也能够吸引到消费者。进行电商网站视觉规划，需要在有效地产品需求分析基础上，清楚地了解产品需求，然后根据具体的产品需求进行产品概念设计，再在产品原型制作的指导下科学、有序地展开产品研发工作。研究内容产品需求分析产品概念设计产品原型制作学习目标1.了解产品需求分析的概念、内容；2.熟悉产品概念设计的内容；3.熟悉产品原型制作的理论知识。知识目标1.能够独立进行产品需求分析，并撰写需求报告；2.能够根据产品需求分析，独立进行产品概念设计；3.能够进行简单的产品原型制作。技能目标1.了解社会主义核心价值观，诚实守信，遵守职业道德；2.具备积极主动的工作态度、较强的视觉审美与设计能力；3.具备较强的沟通能力和良好的解决问题能力。素养目标任务三产品原型制作预备知识一、认识产品原型制作

1.产品原型的定义

产品原型是设计方案的表达，是产品经理、交互设计师的重要产出物之一，可以让用户提前体验产品，供开发团队之间交流设计构想、展示复杂交互的方式。预备知识一、认识产品原型制作2.产品原型的种类

产品设计原型按照精细程度来分，可分为低保真产品原型和高保真产品原型。低保真产品原型：低保真原型是对产品进行较为简单的模拟图，简单地描述产品的外部特征和基本功能构架，只需要用简单的设计工具进行制作，用来表示最初的设计概念和思路。高保真产品原型：相较于低保真产品原型图，高保真产品原型图的设计要求更高，全面展示产品功能、界面元素、功能流程的一种表现手段。原型图中无论是功能模块的大小，还是文案设计甚至所用的图标、图例、交互动作都使用真实素材，用户可直接看到产品的页面组成。预备知识二、产品原型制作工具AxureRP介绍AxureRP是美国AxsureSoftwareSolution公司旗舰产品，一个专业的快速原型设计工具，支持Windows和MacOS,它能够让产品经理等设计人员快速创建应用软件或Web网站的线框图、流程图、原型和规格说明书。预备知识二、产品原型制作工具AxureRP介绍

工具栏区域：是页面编辑的一些快捷键操作区域，主要有字体、字号、颜色、边框样式、尺寸、位置等常规设置，保存、打开、剪切、撤销、粘贴、重做以及Axure本身自带的一些工具，如选择、连接、钢笔、格式刷等。预备知识二、产品原型制作工具AxureRP介绍

页面导航区域：展示了一个项目中所有的页面，原型中所有的页面都会按照层级结构显示在这里，支持创建文件夹，可以将页面分类管理：可以添加同级页面、添加子页面、修改页面级别、修改页面顺序，也可对页面进行重新命名操作、删除操作等。注意页面列表面板中的页面名称就是原型发布后生成的HTML文件名称，如需将这些HTML文件部署到自己的服务器或其他云平台上，最好采用英文命名方式，若是本地浏览可使用中文名称。预备知识二、产品原型制作工具AxureRP介绍

部件区域：也叫组件库或元件库，所有软件自带的元件以及手动导入的元件都在这里，这些元件是设计一个产品原型的“基础”。Axure默认提供三种不同类型的元件库：1.Default元件库，包含基本元件、表单元件、菜单、表格以及标记元件；2.Flow元件库，包含各种流程图元件，通过绘制流程图可以梳理复杂的业务流程；3.Icons元件库，包含各种常用图标，但只是为了方便原型制作，真实产品中一般不直接使用，需根据产品整体风格重新设计。这些元件操作起来很简单，把元件拖入设计区域即可使用，双击设计区域中的元件可修改其文本内容。预备知识二、产品原型制作工具AxureRP介绍

母版区域：当原型中有些元素需要重复使用时，可把重复元件制作成母版，方便随时调用。母版面板与页面导航面板相似，以列表的形式展现，支持创建文件夹以便分类管理。通常用于页面头部、菜单栏等的制作。预备知识二、产品原型制作工具AxureRP介绍

页面编辑区域：绘制产品原型的区域，用于排布元件位置、设置元件样式等。设置区域中有横向标尺、纵向标尺，最大支持20000像素×20000像素的原型，可以加入网格和参考线，进行辅助设计。注意设计区域中的原型样式和发布后的原型样式可能并不完全相同。预备知识二、产品原型制作工具AxureRP介绍

属性以及交互设置区域：在这里可以设置选中元件的样式，添加该元件相关的注释以及设置该元件的一些交互事件，例入鼠标点击时的事件等。实施准备掌握AxureRP操作理论知识，有助于学生顺畅地绘制产品原型图。产品原型图能够清楚地展示产品的基本框架、运作机制，直观地了解产品界面的样式、按钮的功能效果，理解产品的真实意图，因此产品原型制作是电商网站开发中至观重要的一环，可以有效地帮助产品设计、开发人员进行后续的网站视觉规划。任务实施与分析步骤1：利用前面所学知识，梳理出“生活类电商网站”——未来生活网的基本框架任务实施与分析步骤2：根据信息架构图发现需要制作6个Web网站页面，打开AxureRP软件，在“左侧”页面处进行文件夹的创建，如图所示。这里需要注意层级、页面逻辑结构的设置，首先明确网站所包含的模块。任务实施与分析步骤3：网站首页制作步骤3.1：设置原型尺寸

选择要设计的页面，单击菜单中的“布局”——“栅格和辅助线”——“创建辅助线”，打开“创建辅助线”对话框，设置列数为1，列宽为1000（Web产品一般在PC端使用，通常页面宽度设置为1000像素左右），间距宽度为0，边距为0，设置行数为0，行高40，间距宽度为20，边距为0，勾选“创建为全局辅助线”，所有页面均被添加了辅助线。任务实施与分析步骤3：网站首页制作步骤3.2：制作网站名称在左侧的“元件库”中选择“一级标题”，拖拽到操作页面，然后输入网站名称“未来生活”，在右侧的“一级标题”处进行样式设置，如字体、颜色、字号，如图所示。任务实施与分析步骤3：网站首页制作步骤3.3：制作导航栏（1）在左侧的“元件库”中选择“矩形”，通过拖拉到操作区，进行形状大小和颜色的调整。大小设置为X轴坐标0，y轴坐标130,宽度1000，高度39，颜色填充为#00CC66。任务实施与分析步骤3：网站首页制作步骤3.3：制作导航栏（2）在左侧的“元件库”中选择“文本标签”创建标题，设置标题大小并设置行间距。如设置“所有商品分类”，大小设置为X轴坐标71，y轴坐标130,宽度175，高度39，颜色填充为#009900，字体黑体，颜色#FFFFFF，字号28，对齐方式居中。任务实施与分析步骤3：网站首页制作步骤3.3：制作导航栏（3）设置“首页”标签，大小设置为X轴坐标275，y轴坐标130,宽度49，高度39，字体黑体，颜色#FFFFF，字号20，对齐方式居中。同样方式创建“台创园”、“消费帮扶”、“韩国馆”、“充值”“未来礼品”标签。任务实施与分析步骤3：网站首页制作步骤3.3：制作导航栏（4）使用基本元件——动态面板，给“所有商品分类”制作子菜单。在左侧的“元件库”中选择“矩形1”，通过拖拉到操作区，进行形状大小和颜色的调整，依次制作出“水果”、“安心蔬菜”、“肉禽商品”、“海鲜水产”、“粮油调味”等子菜单，并分别命名tab1、tab2、tab3、tab4、tab5。可以设置无颜色填充#FFFFF，字体黑体，字号18号，居中。任务实施与分析步骤3：网站首页制作步骤3.3：制作导航栏（4）使用基本元件——动态面板，给“所有商品分类”制作子菜单。要使鼠标选中或悬浮“水果”、“安心蔬菜”、“肉禽商品”、“海鲜水产”、“粮油调味”后，标签颜色变化且同一时刻这五个标签只能有一个被选中，其操作步骤如下：①设置5个标签页选中时的交互样式：选中tab1、tab2、tab3、tab4、tab5。点击属性面板中的“选中”按钮，打开“交互样式设置”对话框，选择字体黑体，字号18，字体颜色#333333，填充颜色为#CCCCCC。任务实施与分析步骤3：网站首页制作步骤3.3：制作导航栏（4）使用基本元件——动态面板，给“所有商品分类”制作子菜单。②用同样的方法设置5个标签页鼠标悬浮时的交互样式。③选中tab1，勾选属性面板中的“选中”，设置标签1默认为选中状态，如图所示。任务实施与分析步骤3：网站首页制作步骤3.3：制作导航栏（4）使用基本元件——动态面板，给“所有商品分类”制作子菜单。④选中tab1、tab2、tab3、tab4、tab5。在属性面板中设置选项组名称为tab，即在同一时刻这三个标签只能有一个被选中，如图所示。任务实施与分析步骤3：网站首页制作步骤3.3：制作导航栏要使点击“水果”、“安心蔬菜”、“肉禽商品”、“海鲜水产”、“粮油调味”后，分别出现对应的子菜单，需要使用左侧“元件库”中的“动态面板”，以制作“水果”的右侧子菜单为例，操作如下：①将“动态面板”拖拉到操作区合适位置，填充颜色并命名“水果1”，然后拖曳“三级标题”到动态面板中添加文字，设置字体黑体，字号16号，居中。任务实施与分析步骤3：网站首页制作步骤3.3：制作导航栏②设置第一个父菜单“水果”，添加事件，当鼠标右击“水果”时切换到动态面板“水果1”。任务实施与分析步骤3：网站首页制作步骤3.3：制作导航栏③选择动态面板“水果1”，添加事件，使其鼠标离开时隐藏起来。任务实施与分析步骤3：网站首页制作步骤3.3：制作导航栏③选择动态面板“水果1”，添加事件，使其鼠标离开时隐藏起来。同样的方法，设置“安心蔬菜”、“肉禽商品”、“海鲜水产”、“粮油调味”的子菜单，使其鼠标单击时能显示子菜单，当鼠标移开子菜单时子菜单隐藏。任务实施与分析步骤3：网站首页制作步骤3.4：制作单张海报图（1）在左侧“元件库”中选择“图片”，拖拉到操作区，双击该元件可导入外部图片，也可在右侧的属性面板中单击“导入”按钮，如图2-28所示。若导入的图片过大，会询问是否进行优化，若选择“是”Axure会适当压缩图片，若选择“否”则以原图大小导入。任务实施与分析步骤3：网站首页制作

步骤3.4：制作单张海报图（2）对导入的图片进行大小调整。拖曳图片四周和四角的定位点，可以改变图片的大小。按住Shift键同时拖曳可按原比例缩放，双击任何一个定位点可恢复至原来大小。任务实施与分析步骤3：网站首页制作步骤3.4：制作单张海报图（3）裁剪图片。经过等比例缩放后的图片还有些长，需要进行裁剪，如图2-35所示。在图片上单击右键，选择“裁剪图片”，拖