案例研究：谁不喜欢吃小蛋糕呢？关于蛋糕店的电子商务应用程序-Cookiss
编辑导语：对于电子商务应用程序来说，产品详情页是影响产品转化率的重要因素，一个优秀的产品详情页可以吸引用户点进来并且购买产品。在本篇文章中，作者使用设计思维分析蛋糕店的电子商务应用程序，我们一起来看看吧。
在这个挑战中，我的角色是UX研究员和UX设计师 创建研究计划，使用设计思维来帮助我的设计过程，并制作用户角色、用户旅程、信息架构，用户流程，线框，模型和原型。
对于这个挑战，我使用设计思维 来帮助我的设计过程。
一、案例研究背景
在这个一切都被数字化的时代，仍然有很多蛋糕店是手动下单，需要买家到店取餐，有些是在线的，但买家因为没有直接看到目录和价格而感到不确定，还有所有的蛋糕店大多是自己制作网上订购方式 。
所以除了一家商店外，购物者没有太多的蛋糕选择。买家也懒得一个个去店里，尤其是要带着预购结果去店里，要重复两次，并且还要排队。
二、研究计划
创建产品创意创建用户画像创建客户旅程地图制作线流寻找一些情绪板创建设计系统创建高保真创建原型三、定义
在定义过程中，我正在做几件事来确定问题，找到痛点并制定我们应该如何做：
1. 问题
从背景研究中我得到了几个指出用户需求和洞察力的问题，所以我提出这个观点来知道要解决什么问题：
从这个角度来看，我制作了用户画像：
在制作用户角色之后，我正在做的下一步是创建客户旅程地图：
四、设计
定义之后，我有几件事要做，那就是：
1. 优先考虑指标
因为我在定义过程中做得很好，所以我得到了几个优先级的想法：
2. 信息架构
根据这些指标，我可以制作几个 IA，帮助我设计应用程序，让用户知道如何使用应用程序，而无需再次学习：
3. 用户流
做完信息架构（IA）后，我做了用户流的制作过程，此用户流程侧重于用户购买过程，从注册阶段到支付阶段：
4. 线框
这是我根据 IA 和用户流程创建的线框：
5. 线流
有了线框后，我创建了线流以了解用户在使用应用程序时的路径：
当用户定向到主页的应用程序的帐户时：他们选择了他们想要的蛋糕，然后他们阅读了蛋糕的描述。
如果他们不喜欢样品蛋糕，他们可以进行定制。如果他们喜欢样品，他们会转到购物车页面，然后在付款页面中他们选择他们的地址并选择他们支付蛋糕的方式，然后在我们使用第三方快递的这个应用程序中选择快递。
在他们支付蛋糕后，他们可以等待蛋糕交付而无需来到商店。
五、原型与设计
为了制作原型和设计，我做了几件事：
1. 情绪版
情绪版是我们创造产品设计灵感的集合，这些产品设计聚集在一块版面上。
2. 设计系统
我的设计系统包括：
排版颜色输入表格肖像学插图按钮（主要、次要、单选、复选框、切换、徽标、图像）统计栏头部导航栏和卡片对于设计系统，我将其分为 3 类，即原子、分子和有机体。
3. 高保真
创建基于线框图的高保真，来自情绪板的灵感，并使用设计系统将其排列成一页。
4. 原型制作
六、测试
1. 问题
1.1 研究方法
深度访谈&可用性测试
1.2 研究目标
了解用户使用Cookiss做蛋糕电商的需求了解 Cookiss的设计成功率1.3 受访者标准
1.4 工具
1.5 用户任务
注册和登录： 要求用户注册并登录应用程序并观察用户的行为；选择项目和交易： 要求用户购买且停在购物车等待付款页面并观察用户的行为；填写地址： 要求用户填写地址并观察用户在做什么；付款： 要求用户为蛋糕付款并观察用户在做什么；跟踪顺序： 要求用户跟踪订单并观察用户在做什么。2. 结果
第一个任务的结果是用户感觉注册和登录就像他们在使用其他电子商务应用程序时一样，这与他们在注册和登录应用程序时的行为相符。第二个任务的结果是多种多样的，但大多带有负面反馈。用户感觉首页很紧，没有喘息的空间，因为只有物品卡。当他们将商品放入购物车时，他们没有注意到空购物车图标和填充购物车图标之间的区别。第三个任务，反馈比以前少，这只是小问题，但会引起混乱。用户没有注意到切换按钮使地址成为主地址，因为颜色与背景混合。第四个任务，用户对流程没有问题，但他们给我的反馈是：地址框太小，看不清楚和所选卡的颜色太浅所以没有区别第五项任务是最清晰的任务，因为所有用户都没有问题，他们觉得它清晰无瑕。3. 结果总结
七、迭代
任务2迭代：
1. 主页
痛点： 用户觉得首页太紧，只装蛋糕卡，没有变化迭代： 提供一个分类图标，让主页看起来不像只有蛋糕卡2. 将物品放入购物车
痛点： 用户对已经在购物车和尚未在购物车中的蛋糕物品之间的区别感到困惑，因此他们不确定迭代： 提供购物车中物品的动画，购物车图标从轮廓图标变为填充图标任务3迭代：
痛点： 填写地址时用户不注意是否有切换主要地址，用户想快速填写地址，建议用地图填写地址迭代： 提供更深的灰色，以便切换按钮更明显，并提供地图作为快速填写地址的一种方式任务4迭代：
痛点： 用户感觉地址框间距过紧，选中的项目不太显眼迭代： 将间距从 0px 到间距 10px，并为所选项目提供更深的颜色，并将地址框从字体大小 12px 更改为 16px这个电子商务的应用的设计是按照用户的需求和用户在网上购物的习惯进行设计，主要的问题在于视觉设计，没有给用户的足够的空间呼吸。但是，在完成迭代过程后，我可以很好地处理这个问题~感谢你的阅读：）
（部分图文来自网络，若有侵权，请联系删除。）
作者：交互设计小助手；公众号：美国交互设计资讯（ID：gh_deb1a91db646）
原文链接：https://mp.weixin.qq.com/s/ekNtS0c8MZAhVrCPFCBKig
本文由 @美国交互设计资讯 授权发布于人人都是产品经理。未经许可，禁止转载。
题图来自Unsplash，基于CC0协议。
一文看懂「全景视频」在电商设计的应用
编辑导语：在电商场景中，结合全景视频，用户也许可以更加清晰地获取商品信息，进而帮助自身做好消费决策。那么，全景视频具体要如何应用于该场景中？本篇文章里，作者结合实际案例，针对全景视频与电商场景的结合做了详细解答，一起来看一下。
一、洞察全景视频于电商的应用可能
如果把各品类按商品与人的相对尺度来划分，尺度小于人的诸如数码、服饰、快消品等单体类商品可用3D模型、AR等方式让用户在掌间、或贴身把玩互动；那么尺度大于人的诸如汽车、家具样板间、房屋等空间类商品则可用「全景」（Panoramic View）的方式置用户于其中环顾互动以了解此类商品的全方位信息。
同时，后者品类均属于高客单、低购买频次的商品，决策成本高、周期长，往往以线下决策为消费习惯，对应以经销商、门店导购为销售模式。不论是试驾讲解、样板间介绍或是房屋带看，如果销售员的讲解被看作是更生动表达商品信息、影响消费者决策的关键要素，那么「视频」则是捕捉这种讲解和动态演示的合适媒介。
全景视频行业适用性与本地化体系角色作用
全景视频的应用特点
「全景」的空间互动性与「视频」的内容真实性 ，使「全景视频」*（Panoramic Video）能力具备了于用户侧传递空间类商品信息的充分性。
而于商家侧，上述品类由于行业特性仍处于线上低渗透阶段，门店商品及销售导购的数字化可帮助其突破自然流量受制于地理区位的限制，针对每个门店商品只需单次拍摄生成「全景视频」便可获取线上边际递增流量，使该能力具备了提供低成本数字化商品与获客工具的必要性。由此，将「全景视频」作为空间类商品表达能力、重本地化行业的解决方案，应用于家装、汽车、房产、航旅等。
*注：全景视频是一种用3D摄像机进行全方位360度进行实景拍摄的视频，用户在观看视频的时候，可以滑动视频上下左右进行视角转动观看。
二、构建呈现商品的全景视频用户体验
1. 营造「强体感」与「真实感」
有别于传统视频单向传输、用户被动接受信息的视听体感，「全景视频」增加对视频所呈现全景空间的互动，模拟出用户仿佛可以主动影响、控制视频内容的深度交互感，简言之即构建一种“ 用户可以在一个沉浸空间里自由地看商品外观、细节及讲解演示” 的体验。由此，将该体验的构建分为 「强体感」 与 「真实感」 ：
全景视频体验架构
*注：体验始于需求。即便皆同属空间类商品，消费者所关心的信息也会因品类特性而不同，从而影响信息交互方式，以下以家装行业为例。
「强体感」由「自由看」、「主动听」与「互动看」三层感官组成。 底层内容载体是一段多商品（如若干家具组合而成的样板间）或单商品（如定制橱柜空间）的销售讲解视频，视频本身按多商品（Items）、或单商品讲解点（Features）顺序呈线性结构。
「自由看」、「主动听」是此线性结构基础上，使用户可通过滑动视频视角查看全景内各个方位的商品、或跳转至任意一个对象的讲解片段，营造一种可打断、跳跃、主动选择的非线性自由体验。
用户还可与空间内的每个商品对象进行更进一步的交互，通过「所见即所得」的交互方式获取商品辅助信息，而这些信息又可以图文、视频、3D模型（如换材质颜色）、AR（如摆置家具）等形式呈现与用户进行二级交互。此「互动看」是以伪深度交互的方式*增强了体感。
*注：全景视频与虚拟现实视频（Virtual Reality Video）的区别在于，后者除了全视角展示影像之外，还具备深度交互，参与者可以通过行为改变所在影像空间中的对象状态（如挪动椅子、打开橱柜等）。虚拟现实视频目前仍是通过建模、实时渲染的虚拟场景。故为了在全景实景视频中模拟一定的互动性，加入了弱交互或伪深度交互 ：向全景影像输入指令，借由非全景影像本身变化的其他信息进行反馈，来拟真面向对象的控制。
销售讲解声音的「实录」、门店环境、商品、销售员的视频「实拍」、商品辅助信息互动的「拟真」，共同构建了「真实感」。
2. 架构全景视频三层交互
基于体验架构进行用户界面框架与核心交互设计。界面分为视频层、控件层、互动层。
全景视频框架
1） 视频层——自由看全景
根据家装行业线下门店常以分若干小平米样板间或商品空间布置的特征，以及需保证商品清晰的基本体验要求，视频采用固定全景机位拍摄，以2米为可视半径、方圆12平米的圆心位置辐射区域内的商品。用户可“站在固定位置”左右360度、上下180度*滑动视频、在有限的FOV范围内缩放视角大小。
*注：上下设置360度会导致在滑过球体视频的南、北极点时发生视角颠倒。
全景视频用于家装门店的拍摄规范
为最大程度的呈现空间商品及门店的沉浸感、最大程度的提供频发滑动交互的操作空间，视频层占据了整个界面近90%。
视频滑动演示
隐藏控件演示
2）控件层——主动听讲解
控件层分为顶栏、底部导航栏与侧边栏。底部导航栏是除视频层交互外最主要的操作区域，将空间中的商品对象按视频讲解顺序线性地排布于底部，作为商品信息的展示，将最主要的行动引导 –「预约留资」绑定在每个商品导航单元上，通过点击导航单元来切换讲解对象及其对应的商品视角。
*值得注意的是，常见的视频控件（如进度条、时长、播放暂停等）被有意隐去，目的是为同体验架构中所述的「营造一种可打断、跳跃、主动选择的非线性自由体验」对照，强化「空间感」而非「视频感（有头尾的、有限的时间感）」。
侧边栏则设为次要操作区域，以分流功能为主，如门店其他空间视频、上下翻屏其他相似空间商品或门店全景视频（采用点击避免上下翻屏手势与全景视角滑动手势冲突）。
导航切换演示
上下切换演示
3）互动层——互动看商品
针对每个商品对象（或单商品的每个讲解点）在全画幅视频中标记锚点，用户可以在全景视角中一目了然视频所涉及的讲解对象。锚点配以商品信息模块，通过点击操作可唤起二级辅助信息的互动浮层，承载以图文、视频、3D模型、AR等各种内容形式，在讲解音的背景下对商品进行更深入的了解。
正是由于商品坐标的存在，可以实现当点击任意一个非当前讲解商品对象、或切换底部导航商品单元后，讲解片段跳转的同时，视角也会自动转移至对象。
互动图文浮层
更多互动形式（视频、3D等）
3. 全景视频链路设计
1）全景视频入口展示
在公域Feeds流、搜索等链路中，区别于普通视频内容的展示方式，全景视频以所指商品为容器画面中心，视频播放的同时、视角自动左右以特定角度往复转动（或以手机陀螺仪为感应，随手机角度而发生转动）。这段由机器自动生成的封面视频片段可自动适配于所有链路入口尺寸（1:1、3:4、16:9等）。
转动逻辑与链路入口展示效果
2）门店漫游与全景视频串联
用户通过搜索或导购等路径发现某个品类商品的全景视频，对其所属销售或门店产生兴趣后，可通过门店组件进入门店漫游场景，同现已成熟的漫游体验一样，以点位位移、全店模型鸟瞰等方式，在静态全景中浏览门店商品，而对某个商品或样板间产生兴趣后，可通过点击空间锚点再次进入全景视频听销售讲解，形成「找品、逛店、找销售讲解、预约留资、到店」的体验闭环。
门店漫游与全景视频串联
4. 品牌与标识
为向用户传递全景看商品的心智，打造以「360全景」为名的品牌系统。将球形视频的鱼眼扭曲特征（Distortion）与眼睛的自由视角象征（Free View）一同抽象为基础品牌标志。全新设计的「360全景」品牌字体与适用行业形成品牌联名组合：360全景探店×天猫家装、360全景试驾×天猫汽车，并由此展开视觉演绎。
品牌标志基础型
品牌文字
色彩、标志图形与文字组合
Key Vision
由基础品牌标志衍生动态标识，象征空间、视角转动、动态等。结合品牌组合形成标识规范，应用于产品链路中的各个场景（卡片角标、加载页面等）。
动态标识
标识规范与应用
5. 解决全景视频清晰度与体积问题
全景视频可看作是一个球体视频（Spherical Video），常规手机界面的窗口可视区域仅为其所展开全画幅的1/6。通过拍摄规范及技术手段*将原片体积大于常规视频6倍的全景视频、在保有清晰度的前提下缩减了90%以上。
全景视频清晰度与体积测试报告
*注：全景视频清晰度与体积优化四步骤：
素材拍摄：拍摄硬件与环境光的优化；素材预处理：图像剪辑的优化；原始素材交付：格式要求的优化；编解码压缩处理：映射方式的优化。压缩后清晰度对比
三、写在最后
目前全景视频设计解决方案主要应用于家装行业本地化场景，覆盖七座城市核心卖场千家门店、上线累计视频数以千计、覆盖上翻商品数以万计。
后续仍将探索其在汽车行业、航旅行业以及房产行业的应用可能。同时，在用户体验上进一步提升视频清晰度、打破囿于视频体积问题带来的机位限制，让用户可以在动态全景视频下移动位置，实现更自由、沉浸、真实的体验。
作者：360全景；公众号：天猫设计（ID：TmallDesign）
本文由 @天猫设计公众号 原创发布于人人都是产品经理，未经许可，禁止转载。
题图来自Unsplash，基于CC0协议。
相关问答
怎么用 电子商务 平台?首先要多花时间,研究时下流行的各类商务网站的各种用法,如阿里的支付宝,旺铺,论坛,博客,要想尽办法尽可能地在各类网络平台上加大自己及公司的知名度与产品...
奥派 电子商务 实训软件操作步骤?奥派电子商务实训的软件操作步骤分为五个部分。一、实训过程1.组织准备工作组织准备工作是ERP沙盘模拟的首要环节。主要内容包括分组和职能定位。我所在A组...
电子商务应用 知识要求?电子商务专业需的知识和能力主要有以下2点:1.具备良好的职业道德规范和职业素养,能够适应企业文化,符合企业发展需要;2.具备电子商务的基本理论知识,掌握...
电子商务 的定义和 应用 模式是什么..._电子商务_帮考网电子商务是利用互联网和数字技术进行商业活动的过程,包括在线购物、在线支付、电子商务平台、电子商务营销等。电子商务应用模式包括以下几种:1.B2...
电子商务应用 系统由什么组成?电子商务系统主要有:组成部分企业内部网(Intranet)、企业内部网(Intranet)与INTERNET的连接组成;电子商务应用系统:1、广义上讲,是商务活动中各参与...
移动 电子商务 的 应用 层次包括哪些?网络基础层网络基础层是最底层,这一层主要是移动网络基础设施,它是所有移动应用的网络基础,通常由网络运营商负责这层的建设,运营和维护,我们常说的GPRS网络...
电子商务 专业应该掌握哪些基本技能?电子商务专业应该掌握的基本技能:1.一定要会使用photoshop对学生朋友并不要求真正的能用的有多么多好,但基本的切图,改图片大小,调图片的光度,亮...电子商...
电子商务应用 模式?1、企业与消费者之间的电子商务(BusinesstoConsumer,即B2C)。2、企业与企业之间的电子商务(BusinesstoBusiness,即B2B)。3、消费者与消费者之间的电...
电子商务 及法律专业学什么?什么是电子商务及法律 申请方[回答]每当高考结束,特别是各省份的高考分数公布之后,很多高考学生在专业选择上存在很多疑惑,志愿填报想要选择电子商务及法律专业的很多同学都想了解金电...
电商培训主要是教一些什么内容呢?电商运营需要熟练掌握淘系开店的流程。深入理解电商运营的整体思路;掌握淘系选品、主图策划、详情页策划、SEO推广、付费推广、爆款打造、数据分析、内容运营以...
