项目六产品设计工具的使用互联网产品开发案例指导版微课版46.pptxVIP

项目六产品设计工具

的使用互联网产品开发

（案例指导版微课版）

下面选取了两个案例分别进行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宠物网店色彩搭配导航栏区域采用黄色作为背景色商品展示区域字体颜色设计