《互联网产品开发（案例指导版微课版）》课件项目六

项目六产品设计工具

的使用互联网产品开发

（案例指导版微课版）1认识AxureRP112原型设计3综合案例分析目录CONTENTSAxureRP是美国AxureSoftwareSolution公司的旗舰产品，是一款专业的快速原型设计软件。它专为UI（用户界面）和UX（用户体验）设计领域打造，能够帮助创作者和产品经理快速将创意转化为实际可操作的产品原型。任务一认识AxureRP11一、新版AxureRP11的功能在AxureRP11中，按【/】键即可激活操作搜索框，快速地搜索和插入所需的元件、元件库、工具和母版，也可以快速应用样式或跳转到其他页面和母版，让操作更加便捷、高效，减少了设计过程中的烦琐步骤，能够提升设计效率。快速操作激活操作搜索框一、新版AxureRP11的功能AxureRP11在已打开页面的最前面增加了Gallery（画廊视图）功能，以缩略图形式显示已添加的页面和母版，双击可直达对应页面或母版。它提供了文件中所有页面和组件的概况，使用户能够快速查看和管理所有内容。画廊视图Gallery（画廊视图）功能一、新版AxureRP11的功能按网格分布和等距布局元件间距调整和位置交换布局功能按网格布局一、新版AxureRP11的功能调整元件的间距按网格分布和等距布局元件间距调整和位置交换布局功能一、新版AxureRP11的功能AxureRP11在“样式”面板中增加了“元件模糊”和“背景模糊”的样式属性，可以为元件添加模糊效果，或者使元件的背景产生模糊效果。这种模糊效果能够突出重要元素，营造独特的视觉氛围，增强设计的层次感和聚焦效果。样式属性缓动选项和缩放动画过渡和变换动画与过渡应用样式操作禁用交互目标组件为组件添加交互事件变量改变事件交互设计二、AxureRP11的基本操作AxureRP11的工作界面布局清晰，主要分为菜单栏、工具栏、功能区以及工作区4个区域。工作界面AxureRP11的工作界面菜单栏功能区工具栏功能区工作区二、AxureRP11的基本操作在开始设计、制作原型之前，创作者首先要创建一个Axure文件，确定原型的内容和应用领域，以保证最终完成内容的准确性。打开AxureRP11软件后，通过“文件”|“新建”命令或者使用【Ctrl+N】组合键即可新建一个空白文件。新建文件单击“文件”|“导入RP文件”命令，可以将RP文件中的页面、母版、视图设置、生成设置、页面说明字段、元件字段与设置、页面样式、元件样式和变量等内容直接导入新建文件中，供用户再次使用。导入资源完成后，创作者可以在新建文件中设计、制作产品原型。导入RP文件创建新页面为新页面命名调整页面顺序在特定的位置添加页面或文件夹页面操作选择“新增”命令二、AxureRP11的基本操作“元件库”面板提供了各种类型的元件，如矩形、椭圆、按钮、标签、图像热区等。添加元件选择元件组合元件元件操作“元件库”面板二、AxureRP11的基本操作“元件库”面板提供了各种类型的元件，如按钮、标签、矩形、椭圆、图像热区等。添加元件选择元件组合元件元件操作选择单个元件单击“组合”按钮二、AxureRP11的基本操作使用工具栏中的对齐按钮可以对元件进行对齐操作。当有多个元件需要均匀分布时，可以使用分布功能。布局操作居中对齐单击“横向分布”按钮二、AxureRP11的基本操作在“样式”面板中，可以设置元件的各种样式属性。创作者可以创建自定义样式，将一组样式属性保存起来，以便在其他元件上重复使用。样式操作设置元件的样式属性二、AxureRP11的基本操作在“样式”面板中，可以设置元件的各种样式属性。创作者可以创建自定义样式，将一组样式属性保存起来，以便在其他元件上重复使用。样式操作“元件样式管理”对话框三、AxureRP11产品原型设计流程创建文件与

设置页面2明确产品

目标与需求1搭建框架

与布局3搭建框架与布局三、AxureRP11产品原型设计流程填充内容4创建文件与

设置页面2明确产品

目标与需求1搭建框架

与布局3填充内容三、AxureRP11产品原型设计流程填充内容4创建交互与

动态行为5为元件重命名创建文件与

设置页面2明确产品

目标与需求1搭建框架

与布局3三、AxureRP11产品原型设计流程创建交互与

动态行为5填充内容4创建文件与

设置页面2明确产品

目标与需求1搭建框架

与布局3“交互编辑器”对话框填充内容4创建文件与

设置页面2明确产品

目标与需求1搭建框架

与布局3常用的交互按钮制作元件交互选择触发事件三、AxureRP11产品原型设计流程创建交互与

动态行为5三、AxureRP11产品原型设计流程测试与优化

调整7保存与发布

原型8构建导航

链接关系6创建交互与

动态行为5填充内容4创建文件与

设置页面2明确产品

目标与需求1搭建框架

与布局3在数字化产品开发的早期阶段，原型设计扮演着至关重要的角色。它不仅是产品概念的具体展现，更是后续开发、测试和推广的基础。因此，制定一套详尽、科学的原型设计规范，对于确保产品设计的连贯性、用户体验的流畅性以及开发效率的提升具有不可估量的价值。任务二原型设计一、原型设计规范页面尺寸01常见的页面宽度有多种选择。页面高度一般没有固定标准，若内容较多，通常设计为多屏滚动形式，尽量控制在3屏以内。字体规范02中文最小字号建议为12号。字号尽量控制在3种以内，可选用14、16、18、20等偶数字号。行间距通常为字号的1.5～2倍。图标尺寸03由于网页主要通过鼠标进行交互操作，图标尺寸相对有一定灵活性，但最小建议使用16像素×16像素的图标。在一些特定场景或对视觉效果有特殊要求的情况下，可根据实际设计需求适当增大图标尺寸。Web页面规范一、原型设计规范页面尺寸01目前，行业内常以1倍页面尺寸为基础开展设计工作。页面顶部状态栏高度一般为20像素，导航栏高度为44像素，底部标签栏高度为49像素。若团队有特殊要求，设计2倍、3倍等倍数尺寸的页面，则以1倍大小为基准进行相应倍数放大即可。字体规范02通常最小字号为10号，这种字号一般仅适用于日期、时间等辅助性文字。对于其他主要文字内容，建议选择12、14、16、18等偶数字号。同一个页面中尽量不超过3种字号。行间距通常建议为字号的1.5～2倍。图标尺寸03图标尺寸不能过小，尽量不要低于22像素×22像素。图文间距通常是5的倍数，如10像素、15像素、20像素、30像素等。App原型规范二、设计服务平台Web登录页面在使用AxureRP11设计数智管理一体化服务平台Web登录页面时，应减少不必要的视觉元素，避免信息堆砌，使界面清晰易懂。为每个交互事件设置合理的交互动作，并依据预设条件和逻辑执行相应操作，如根据密码正确性决定登录后的页面跳转。三、设计旅游App首页旅游App首页的主要目标是吸引用户，展示热门旅游目的地，提供便捷的导航入口以及传达旅游品牌的特色。本案例将使用元件和图片素材制作一个旅游App首页，通过样式设置和简单交互，将所有页面结合在一起，形成高保真原型。下面选取了两个案例分别进行App端和Web端的产品设计分析。任务三综合案例分析一、抖音商城App一、抖音商城App界面布局抖音商城App“瀑布流+交错式”信息流展示标签交错式：营造活跃氛围，可以缓解用户疲劳感一、抖音商城App色彩搭配抖音商城App色彩搭配一、抖音商城App图形与图标设计抖音商城App图标设计一、抖音商城App图片与视频展示抖音商城App图片与视频展示一、抖音商城App动效设计抖音商城App动效设计此处有动效一、抖音商城App主要业务流程功能首页顶部：设置明显的搜索框，用户输入关键词后，系统能根据关键词实时联想并展示相关商品、品牌及热门搜索词，搜索结果页面精准展示与关键词匹配的商品，并按照相关性、销量等因素排序抖音商城App主要业务流程功能——首页信息流：分多种类别，以“瀑布式+交错式”展示产品信息，根据产品情况配以相应标签金刚区：用户可点击的各种业务服务板块瓷片区：展示促销活动信息，识别度高，引导用户点击活动区：根据运营计划和当前热点，更新并展示相应活动信息一、抖音商城App主要业务流程功能抖音商城App主要业务流程功能——视频功能流程与抖音App基本一致，方便用户在购物之余“刷视频”折叠功能：用户点击即可展开，满足用户在视频模块中的功能需求一、抖音商城App主要业务流程功能抖音商城App主要业务流程功能——赚钱“赚钱”模块主要用于增强用户黏性，用户完成任务后可以获取相应收益折叠功能：用户点击即可展开，用于补充说明并满足用户使用App时的需求在该版本中，“赚钱”模块占据了“购物车”模块的位置，后者移至首页右上角信息流：与“赚钱”相关任务对应，便于用户快速完成任务，同时增加商品曝光率一、抖音商城App主要业务流程功能抖音商城App主要业务流程功能——消息折叠功能：在“消息”模块中用户可以使用的常用社交功能订单通知和消息通知：用户点击后即可进入相应界面查看详细

信息聊天：用户可以接收到各种消息，包括互动消息、好友消息等店铺客服消息：用户点击后即可进入详情界面信息流：这里采用固定式瀑布流，使整个界面看起来比较整齐，与首页相区分一、抖音商城App主要业务流程功能抖音商城App主要业务流程功能——消息（订单通知和通知消息）各种类型通知消息：用户点击后即可查看同类别的卡片流通知消息信息流：卡片式信息流具有聚焦效果。同样，用户点击相应区域可以进入相应界面一、抖音商城App主要业务流程功能抖音商城App主要业务流程功能——我账号基本信息：推荐使用抖音账号登录，与抖音账号信息一致，便于用户迁移用户享有的各种权益，点击后即可查看详情信息流：这里同样采用了固定式的瀑布流，再次增加商品曝光度折叠功能：用户点击即可展开金刚区：用户可点击查看的多种服务和信息板块用户点击即可跳转到“天天来赚钱”界面一、抖音商城App主要业务流程功能抖音商城App主要业务流程功能——我（折叠功能）更多功能：包含生活服务和拓展功能，用户点击即可查看详情功能列表：多种功能，用户点击即可查看详情用户点击后即可显现出右图所示页面，点击“返回”可以回到左图所示页面一、抖音商城App案例分析微博App的产品信息结构分析微博是一个基于用户关系分享、传播以及获取信息的社交媒体平台，用户可以通过计算机、手机等多种终端接入，以文字、图片、视频等多媒体形式，实现信息的即时分享、传播互动。微博以“随时随地发现新鲜事”为标语，致力于打造一个功能完善、界面简洁的社交平台。微博的产品信息结构如下。（1）首页微博首页的核心功能是信息聚合与展示，其内容包括“关注”“推荐”以及折叠功能。（2）发现页发现页的核心功能是内容探索与发现，其内容包括搜索、发现、趋势、问题、榜单。（3）消息页消息页的核心功能是社交互动与沟通，其内容包括动态、消息、发现群及其折叠功能。（4）我“我”的核心功能是用户管理与设置，其内容包括个人信息、内容管理、设置、任务中心、每日签到、主页访客、为你推荐等。（5）自定义导航栏这个位置在微博底部第二个导航栏，默认为“视频”，但用户可以进行自定义设置，还可以将其设置为“超话”“精选”。要求：请同学们思考并讨论以下问题。（1）微博的产品设计有何优势？这主要体现在哪些方面？（2）根据你自己的使用体验和网络上的反馈，你觉得微博App的产品设计还需要在哪些方面做出改进？二、PetInnHere宠物网店二、PetInnHere宠物网店界面布局以“固定式瀑布流”形式展示的信息流二、PetInnHere宠物网店色彩搭配导航栏区域采用黄色作为背景色商品展示区域字体颜色设计二、PetInnHere宠物网店图形设计商品图片中的图形设计二、PetInnHere宠物网店主要业务流程功能导航栏和轮播图二、PetInnHere宠物网店主要业务流程功能PetInnHere宠物网店的特价专区二、PetInnHere宠物网店主要业务流程功能“首页”模块中的商品信息流表单二、PetInnHere宠物网店主要业务流程功能“犬猫营养保健”模块中商品的列表显示方式二、PetInnHere宠物网店主要业务流程功能“犬