第四章Web端“电商平台”产品交互设计开发-.pptxVIP

网页交互原型工具Axure的应用规范

知识要点01Web端“电商平台”产品交互设计开发项目背景分析02Web端“电商平台”产品交互设计开发项目需求分析03AxurePR9工具介绍04Axure常用元件05查看原型06项目实施-Web端“电商平台”产品交互设计开发

Web端“电商平台”产品交互设计开发项目背景分析第一部分

Web端“电商平台”产品交互设计开发项目背景分析Web端“电商平台”产品交互设计开发项目背景分析重点从市场发展以及国家产业规划来进行分析。1.电商平台项目市场迅速发展随着互联网的发展电商平台项目所属行业是在最近几年间迅速发展。行业在繁荣国内市场、扩大出口创汇、吸纳社会就业、促进经济增长等方面发挥的作用越来越明显。2.国家产业规划或地方产业规划我国非常重视电子商务系统领域的发展，国家和地方在最近几年有关该领域的政策力度明显加强，突出表现在如下几个方面：稳定国内外市场；提高自主创新能力；加快实施技术改造；淘汰落后产能；优化区域布局；完善服务体系；加快自主品牌建设；提升企业竞争实力

Web端“电商平台”产品交互设计开发项目需求分析第二部分

Web端“电商平台”产品交互设计开发项目需求分析Web端“电商平台”产品交互设计开发项目主要从目标顾客、功能规划、业务流程等方面进行需求分析。1.目标顾客适用于各种对数码电子产品感兴趣且有需求的人士，还有学生、上班族、商务人士。2.提供的功能与服务用户可以直接在网站上对比各种产品之间的功能、结构、性能，十分方便快捷的进行商品之间的比较，很快的选出自己感兴趣的商品，对用户来说，节省了大量的时间。3.运行环境:Windows操作系统4.功能规划(1)网站前台部分模块功能介绍(2)后台功能模块介绍5、业务流程图

AxurePR9工具介绍第三部分

1界面介绍1、菜单栏2、工作区域3、页面栏4、概要视图5、元件库6、母版7、样式窗格8、交互9、注释

菜单栏介绍复制、剪切及粘贴区域CtrlX为剪切CtrlC为复制CtrlV为粘贴选择模式第一个相交选中第二个包含选中第三个连接在Axure中，可以选中一段交互进行复制粘贴，值得注意的是，选择某个元件，按下复制按钮或快捷键，然后选中另一个元件按下CtrlAltV即可将前一个元件的格式及公共交互部分复制并粘贴到后一个元件上插入按钮：绘画矩形圆形线段文本图片其他形状拖动方块可以任意改变元件的形状

菜单栏介绍将选中的元件置于最下层或最上层选中多个元件点击组合将元件打组实现放大和缩小屏快捷键按住Ctrl键，滑动鼠标滚轮8种对齐方式，左对齐居中对齐右对齐顶部对齐居中底部对齐横向均与分布垂直均匀分布

预览和共享预览就是预览原型

预览和共享12缺点是不可展示动态交互?使用axure直接预览??文件-导出所有页面为图片使用Chrome浏览器预览时添加插件

预览和共享34发布到Axure_shared上，生成链接?生成原型页面到本地文件夹

自定义界面

自定义界面

黑夜模式01

Axure元件库DefaultFlowIconsAxure自带基础元件库库的切换在元件库的下拉菜单中可以看到所有的元件库，也可以查看加载好的本地图片文件夹（需要导入图片文件夹）。也可以通过AxureCloud来加载/切换库。

Axure元件库库的添加查看元件库存储位置以及删除库的删除：在下拉菜单中选择好该元件库后，直接单击选项Option按钮（在右上角）然后选择RemoveLibrary移除元件库按钮(图片见上图)

Axure元件库创建自己的元件库

Axure元件库元件库中元件的图标与提示

元件的使用

元件的使用031元件添加直接单击选择某一个元件将其拖至画布(中间区域)中,也可以通过左上角的插入菜单选择其他形状的部件。

元件的使用元件的移动操作元件的移动：拖住元件并在画布上松开鼠标即可；也可以直接在X和Y中直接输入坐标。

元件的使用同时定位多个元件进行操作按住CTRL使用鼠标单击每个元件可同时选中多个元件，可以看到坐标X?或者Y（W?与?H、即宽和高）不尽相同。提示：X,Y,W,H?这些参数中只有当多个元件的这些值相同时才会展示，否则在选中时不会展示。

元件的使用元件的其他操作旋转。元件的命名元件的组合元件的锁定与隐藏

元件的样式不透明度排版

元件的样式填充边框

元件的样式阴影、圆角、边距

元件的样式元件样式及样式管理器

元件的样式更新和创建样式快速更新快速创建

元件的组合元件的组合与取消

元件的组合组合的交互

元件选中状态

页面及其样式1.添加页面：直接在左侧页面样式栏中的右上角点击添加按钮，此时即可以添加一个空白的页面，你也可以在某一个页面上右击，然后添加页面或子页面。2.页面的删除：直接右键单击该页面，选择删除，或者选中某一个页面，然