• 移动端弹框关闭的七种交互方式!

    产品设计 2023-08-22

    移动端弹框什么时候需要设计关闭按钮?弹框关闭时的交互设计,又需注意哪些方面?关于这些问题,或许不少人都会感到疑惑。在这篇文章里,作者就总结梳理了移动端弹框关闭的七种交互方式,或许会帮助屏幕前的你更好地理解移动端弹框关闭交互。

    本文系统地总结了移动端弹框关闭常见的7种交互方式,梳理弹框关闭的使用场景、交互用法和交互注意事项,帮助交互设计师理解并正确设计移动端弹框的关闭交互。

    在日常设计工作中,设计师可能会面临以下设计问题:

    • 移动端弹框什么时候需要关闭按钮?什么时候不需要关闭按钮?
    • 界面中间的确认取消警示弹框,是否需要在右上角添加“关闭”icon按钮?
    • 手势关闭弹框需要注意什么?
    • iOS和安卓两端关闭弹框有什么区别?
    • 点击弹框中的任务按钮,弹框是关闭还是不收起?

    针对上述种种问题,笔者通过系统梳理移动端弹框关闭的交互,以解决以上问题。

    一、设计原则

    移动端弹框关闭设计,笔者建议遵循以下底层设计原则,以用户为中心设计。

    1. 提供给用户控制权,用户可以主动关闭;
    2. 弹框至少要有一种关闭交互方式;
    3. 遵循iOS和Android手机设备关闭操作的用户习惯;
    4. 长内容弹框要易关闭;
    5. 关闭icon“x”和取消按钮避免同时存在。

    二、关闭交互

    弹框有两种触发方式。

    一种是系统主动触发,系统等异常场景,会产生不符合用户预期的后果。必须要明确告知用户,通常以阻断式警示对话框出现,需要用户确认弹框内信息,并做出确认或取消等交互动作。另外一种完全是由用户主动触发的。

    无论是移动端还是PC端,或者是用户主动或系统触发,弹框都必须要给用户一个出口,能够关闭弹框。而关闭弹框,不一定必须提供“关闭”按钮,也可以是通过点击弹框的选项动作按钮来关闭弹框。

    常见以下7种弹框关闭方式,具体为:点击关闭按钮、点击遮罩层、下拉关闭、下滑关闭、向右轻扫关闭、物理返回按键关闭、点击执行功能按钮后立即执行并关闭。

    1. 点击关闭按钮

    统一使用图标按钮,以icon“x”的形式,显示在底部弹框的右上角,用户通过点击“关闭icon”图标按钮来关闭弹框。

    1)使用场景

    当弹框中包含内容和功能操作时,应提供一个关闭icon“x”的图标按钮,以让用户能够主动关闭弹框并进行相应的操作。

    2)何时不需要关闭按钮icon“x”?

    • 操作型弹框,需要用户确认或选择操作项,不需要显示关闭按钮,需统一使用文字主按钮,以文本“取消”的按钮形式,显示在弹框面板底部,用户通过点击“取消”按钮来关闭弹框。例如当用户进行删除或提交操作时,弹出的确认框通常只需要“确定”和“取消”按钮,而不需要显示关闭按钮。
    • 全局提示toast(自动关闭)。
    • 功能入口类型弹框,为了保持界面简洁,不需要“关闭icon”,如智能文档编辑模式的底部悬浮工具栏。
    • 警示或通知类型的弹框,不要关闭icon。

    3)关闭按钮位置

    关闭按钮需统一显示在弹框右上角。遵循iOS和Android系统规范、用户使用习惯、阅读习惯「Z字型」、避免误操作「关闭之前需要先确认信息和操作项」。

    4)关闭按钮icon“x”何时需要展示在左上角?

    • 页面级:当页面层级超过3级时,为了便于用户能快速回到一级页面,无需原路返回,可以将关闭按钮“x” 置于左上角,位于「返回」按钮右侧。
    • 多语言和国际化用户习惯:特定语言和文化习惯,从右向左阅读顺序,遵循用户阅读习惯。例如台湾、日本等。

    2. 点击遮罩层

    用户点击弹框外部区域,即遮罩层,可关闭弹框。

    1)遮罩层不可点击场景

    • 模态弹框,即“阻断式”,必须要用户确认弹框内操作。例如删除等需要用户确认的警示弹框。
    • 弹框的内容区域,包含表单输入框等需要用户提交数据,为了防止误操作导致用户输入的数据丢失,遮罩层不可点击。
    • 有前置限制条件,需要用户完成特定操作或满足特定条件才可关闭弹框。例如用户隐私协议场景,必须要用户主动勾选同意协议选项。

    2)遮罩层展示逻辑

    • 非模态弹框,不加遮罩层;模态弹框,加遮罩层;
    • 遮罩层统一使用半透明黑色蒙层,色值和不透明度的数值由UI定义;
    • 遮罩层可视高度,遵循移动端最小点击区域48dp*48dp高度的交互热区,保证用户可点击。

    根据 Material Design 准则,Google 建议将最最小点击区域的高度设置为大约 48 个设备像素(dp)。

    3)遮罩层的覆盖范围

    遮罩层需覆盖标题栏,需遵循iOS、Android、微信小程序平台规范。其中微信小程序端,遮罩层覆盖标题栏,但不可覆盖标题栏右侧胶囊按钮。

    若是内嵌H5页面,因客观条件限制,则弹框之下的遮罩层无需覆盖标题栏。

    以上提到模态弹框和非模态弹框两种弹框模式,要想更清晰理解两种模式弹框的关闭交互方式,需要理解两者之间的交互区别。‍‍‍‍‍‍‍‍‍‍‍‍‍

    4)模态弹框和非模态弹框的交互区别

    • 模态弹框:用户只能操作弹框内的交互元素,弹框外部区域不可操作,需要加半透明遮罩层。例如底部操作型弹框。
    • 非模态弹框:用户可以并行操作弹框内和弹框外部区域的交互元素,不要加半透明遮罩层。例如苹果地图App。

    3. 下拉关闭

    用户在底部弹框区域向下滑动手指,弹框会随之向下移动,当到达当前弹框高度的1/2位置后,会触发关闭交互,用户继续向下滑动松手则关闭弹框。

    1)交互逻辑

    • 支持下拉关闭的弹框,头部区域需统一展示水平条icon,样式由UI定义;
    • 交互热区:底部弹框全部区域;
    • 手势方向:手指只能向下移动;
    • 下拉触发关闭弹框阈值:当前底部弹框高度的1/2位置。

    2)使用场景

    长内容类型弹框,需使用下拉关闭交互手势,关闭弹框。

    3)不可用下拉手势关闭弹框的场景

    • 模态弹框,即“阻断式”,必须要用户确认弹框内操作。例如删除等需要用户确认的警示弹框。
    • 弹框的内容区域,包含表单输入框等需要用户提交数据,为了防止误操作导致用户输入的数据丢失,不可下拉关闭弹框。
    • 有前置限制条件,需要用户完成特定操作或满足特定条件才可关闭弹框。例如用户隐私协议场景,必须要用户主动勾选同意协议选项。

    4. 下滑关闭

    用户在屏幕上向下滑动(包括左下或右下滑动方向)至任意位置后松手释放,可关闭弹框;当用户手指下滑未松手,继续向上滑动到任意位置后松手释放,则可取消关闭弹框。

    使用场景:

    仅图片大图模式场景使用。用户向下滑动屏幕,图片随之向下移动,松手后触发关闭图片查看器,关闭图片弹框。

    5. 向右轻扫关闭

    用户从弹框区域左边缘向右轻扫,即快速向右滑动后松手,则触发关闭弹框操作,关闭弹框。

    1)不可从界面左边缘向右轻扫场景

    • 模态弹框,即“阻断式”,必须要用户确认弹框内操作。例如删除等需要用户确认的警示弹框。
    • 弹框的内容区域,包含表单输入框等需要用户提交数据,为了防止误操作导致用户输入的数据丢失,不支持向右轻扫关闭弹框。
    • 有前置限制条件,需要用户完成特定操作或满足特定条件才可关闭弹框。例如用户隐私协议场景,必须要用户主动勾选同意协议选项。

    除以上场景外,均需要支持弹框左边缘向右轻扫手势关闭弹框,包括Android、iOS、小程序。

    2)特殊场景

    • 当同时存在页面向右滑和弹框向右轻扫手势时,在弹框区域向右轻扫,先关闭弹框,再次沿着屏幕左边缘向右滑动,则返回上级页面。
    • 键盘展开场景,iOS端不支持左边缘向右轻扫收起键盘,遵循iOS平台规范。

    6. 物理返回按键(Android端)

    对于安卓设备,用户可以使用设备上的物理返回按钮来关闭弹框。当用户按下返回按钮时,可关闭弹框。

    1)交互用法

    • 点击物理按键,需原路逐级返回,不允许跳级返回。
    • 模态弹框,遮罩层覆盖物理返回按键,不支持左边缘向右轻扫关闭弹框。
    • 安卓手机将系统导航方式切换到全面屏手势,则不存在物理返回按键。

    7. 点击执行功能按钮后立即执行并关闭弹框

    点击弹框中的功能按钮,通常需要立即执行并关闭弹框。一定是先执行再关闭弹框,而不是先关闭弹框再执行。用户执行某功能按钮后,遵循即时响应原则,系统必须要反馈用户在执行用户操作。

    为什么点击执行功能按钮需要关闭弹框?因为弹框是否关闭,和用户目标有关。用户主动触发某操作唤起弹框,首先是有用户目标的,其次,用户通过点击弹框内某功能按钮,执行任务来实现用户目标。

    此外,也存在点击执行功能按钮立即执行不关闭弹框的场景,比如开关选择器,但本质还是围绕当前用户目标来进行决策是否关闭弹框。

    三、写在最后

    本文主要阐述七种移动端弹框关闭的交互方式和交互用法,包括:点击关闭按钮、点击遮罩层、下拉关闭、下滑关闭、向右轻扫关闭、物理返回按键关闭、点击执行功能按钮后立即执行并关闭。

  • 苹果 VisionOS 交互的近 10 年研究总结

    产品设计 2023-08-22

    在今年六月初,苹果发布了MR头显Apple Vision Pro,向我们展示了一种相对新颖的交互方式,实现了眼动追踪和手势追踪这两种交互方式的结合。那么,如何理解这种交互方式及背后的发展?这篇文章里,作者就对近十年的眼手协同交互研究进行了分析总结,一起来看。

    一、visionOS 眼手协同交互

    Apple Vision Pro 展示了一种「半全新」的交互方式:以眼睛注视点(Gzae)作为交互方位引导,通过简单的捏合(Pinch)、拖动✊(Drag)手势触发交互指令。

    眼动追踪(Eye-Tracking)和手势追踪(Hand-Tracking)在很多其它消费级头戴显示设备上都有应用,例如 Hololens 2 、 PSVR 2 和 Meta Quest Pro 等,苹果的「微创新」在于将两种交互方式结合起来,并依靠其强大的运算能力实现更高的追踪精度和更大的识别范围。

    微软 HoloLens 2 手势交互

    Meta Quest 手势直接 & 间接交互

    在 VR/AR 场景下的人机交互领域,也有大量关于眼动、语音、手势、触觉甚至是味觉嗅觉等交互方式的研究,丹麦Aarhus University 的 Ken Pfeuffer从 2014 年开始,持续开展了近十年的眼手协同(Eye-Hand Symbiosis)人机交互研究,从最开始的触屏平板眼手交互一直到后来 VR/AR 场景下的眼手协同,早在 2017 年开始就开展了一系列关于 Gaze + Pinch 的交互研究。

    以下是对其近十年眼手协同交互研究的总结,共包含 10 篇学术论文和 1 篇博士毕业论文。

    二、近十年眼手协同交互研究总结

    不论是在现实世界中使用纸笔这样的工具,还是在电脑或手机平板上通过鼠标/触控屏进行交互,手和眼睛的协调可以完成大多数工作。

    为了系统地分类这些交互方式,作者借鉴了人机交互领域中的一个理论和设计方法——工具式交互(Instrumental Interaction)。其核心思想是:交互设计应关注如何助力用户完成任务,而不仅仅追求改善用户体验;设计者首先应了解用户想完成的任务,然后设计出一系列相互衔接的交互步骤,从而使系统成为用户有效完成工作的工具。

    这一理论从时间和空间维度上的间接性程度(degree of indirection)对不同的交互方式进行分类,这里的间接性程度可以定义为完成某项交互任务在时间或空间上所需的偏移/距离

    • 鼠标与电脑进行交互时,在空间上手和电脑窗口的交互是间接的(需要从真实桌面的 2D 空间转换到电脑屏幕的垂直 2D 空间),在时间上鼠标交互也是间接的,并不是说鼠标指针存在采样延迟(主流鼠标的系统性延迟基本在 10ms 量级),而是指通过鼠标完成交互时,在时间上多了一个先把鼠标指针拖动到目标物体上的步骤。
    • 手机或平板的触摸屏交互,就是一种在时间和空间上的直接交互(direct interaction),不存在时间和空间上的中间步骤。

    值得注意的是,直接交互并非总是优于间接交互,这取决于任务类型和具体的交互设计。例如有研究发现,在平板上完成简单的指向任务时,鼠标指针操作比直接触屏操作效率更高。这也体现在 iPad 的鼠标交互设计上:在有限的屏幕尺寸和图标大小情况下,配合扩大的不可见交互区域和自动吸附效果,鼠标可以实现比手指更精确的点选操作。

    However, our results also indicate that mouse input may be more appropriate for a single user working on tabletop tasks requiring only single-point interaction. (Forlines 等,2020)

    回到眼手协同的交互类型上来,作者依据空间、时间上交互的间接性将以下交互方式进行了系统性归类:

    Apple Vision Pro 的眼手交互形式在时间上是直接的,这有别于常见的 VR 手势射线交互,用户无需把手移动到目标对象上,可以在任意位置直接点选;但是在空间上用户的手和目标物体在空间上仍然存在一定偏移。

    在直接交互中,目标与手眼是 1:1 的关系,而间接交互中,目标与手眼可能是 N:N 的关系。

    作者在 2014 年的研究中探索了基于平板触摸屏和眼动追踪的 Gaze + Touch 交互,这种交互设计已经非常接近 Apple Vision Pro 的设计,只是手的追踪是通过触屏而非头显。

    a) 直接操作图片;b) 注视选择+任意区域触屏操作;c)更精细的双手操作

    后续研究中,作者将手写笔与手势交互结合,通过手指实现内容缩放,手写笔进行更精细操作。这也是对于面向生产力场景非常重要的交互问题,首先用户需要在不同的交互对象之间高频切换,其次对整个操作空间的缩放、拖动等操作需要与目标对象进行有效区分。

    实验设备演示:d)眼动追踪

    Apple Vision Pro 简单演示了通过手势的捏和进行简单的绘画操作,看起来并不适合复杂操作。

    Apple Vision Pro 绘画应用演示

    作者 2017 年之后的研究开始转向 VR/AR 领域,仍然关注手眼协同交互。在前期研究中,作者提出了各种不同的交互方案和应用场景(包括菜单选择、文本输入、 3D 物体操作等),都是通过 Gaze 完成选中再配合不同的手部动作实现确认操作

    但比较无奈的是,无论基于 HoloLens 还是 HTC Pro Eye + 外置 Leapmotion(手势追踪)作为实验设备,都无法覆盖足够的手势追踪范围。为了避免用户长时间手悬空导致的疲劳,Apple Vision Pro 专门设计了 4 颗朝下的摄像头用于捕捉用户手势。

    用户手自然放在腿上确实可以减少手臂疲劳,但这并不适用于所有场景。比如发布会上演示的虚拟键盘输入,这种无支撑的悬空交互肯定不能满足长时间输入的需求,如果仔细看演示的效果图,有可能手指的识别精度只能支持食指☝️单指操作。

    Apple Vision Pro 演示虚拟键盘输入

    作者在 2022 年的研究中,基于 HoloLens 设计并对比了不同眼动追踪介入的输入方案,实验结果显示,通过视线与手指对齐的方式(瞄准)键盘输入,可以在保证输入效率的情况下,减少手臂的移动从而降低胳膊疲劳,当然,不可避免的也会引起一定的眼睛疲劳。

    三、总结

    本文总结了眼手协同一系列人机交互研究成果,Apple Vision Pro 所采用的并非完全创新但却有可能是在某些 VR/AR 任务场景下兼顾用户直觉效率和体验的最佳方案。苹果眼镜无疑极大扩展了用户直观获取信息的边界,让数字信息不再局限于一块 2D 的电脑/平板/手机屏幕,从 2D 升维到 3D。

    这其实是来到了人类最熟悉、最自然的领域,只是受限于当前光学、显示、电池等技术的发展,人类无法在把数字世界拉高一个维度的同时提供如同物理世界一样的交互体验。

    但是,找到现有技术极限和用户体验之间最佳的平衡点,正是苹果一直以来最擅长的。

    所以从苹果的视角看,XR 是什么?

    站在科技与人文的十字路口,不是把人类推向虚拟的「元宇宙」,而是把人类的心智连同沉迷其中的数字世界,一同拉回现实。

    图文无关,只是很酷 : )

    参考文献

    • https://kenpfeuffer.com/eye-hand-symbiosis-what-guide/
    • https://en.wikipedia.org/wiki/Eye_tracking
    • Beaudouin-Lafon, M. (2000, April).Instrumental interaction: an interaction model for designing post-WIMP user interfaces.InProceedings of the SIGCHI conference on Human factors in computing systems(pp. 446-453).
    • Forlines, C., Wigdor, D., Shen, C., & Balakrishnan, R. (2007, April).Direct-touch vs. mouse input for tabletop displays. InProceedings of the SIGCHI conference on Human factors in computing systems(pp. 647-656).
    • Wagner, U., Lystbæk, M. N., Manakhov, P., Grønbæk, J. E. S., Pfeuffer, K., & Gellersen, H. (2023, April).A Fitts’ Law Study of Gaze-Hand Alignment for Selection in 3D User Interfaces. InProceedings of the 2023 CHI Conference on Human Factors in Computing Systems(pp. 1-15).
    • Lystbæk, M. N., Rosenberg, P., Pfeuffer, K., Grønbæk, J. E., & Gellersen, H. (2022).Gaze-hand alignment: Combining eye gaze and mid-air pointing for interacting with menus in augmented reality.Proceedings of the ACM on Human-Computer Interaction,6(ETRA), 1-18.
    • Lystbæk, M. N., Pfeuffer, K., Grønbæk, J. E. S., & Gellersen, H. (2022).Exploring gaze for assisting freehand selection-based text entry in ar.Proceedings of the ACM on Human-Computer Interaction,6(ETRA), 1-16.
    • Pfeuffer, K., Mayer, B., Mardanbegi, D., & Gellersen, H. (2017, October).Gaze+pinch interaction in virtual reality.InProceedings of the 5th symposium on spatial user interaction(pp. 99-108).
    • Pfeuffer, K. (2017).Extending touch with eye gaze input. Lancaster University (United Kingdom).
    • Pfeuffer, K., Alexander, J., Chong, M. K., Zhang, Y., & Gellersen, H. (2015, November).Gaze-shifting: Direct-indirect input with pen and touch modulated by gaze. InProceedings of the 28th Annual ACM Symposium on User Interface Software & Technology(pp. 373-383).
    • Pfeuffer, K., Alexander, J., Chong, M. K., & Gellersen, H. (2014, October).Gaze-touch: combining gaze with multi-touch for interaction on the same surface.InProceedings of the 27th annual ACM symposium on User interface software and technology(pp. 509-518).
  • 新茶饮“顶流”蜜雪冰城,如何用雪王IP打造品牌热度?

    产品设计 2023-08-20

    提到蜜雪冰城,或许大家首先想到的会是“雪王”,而不是它的产品,雪王早已深入人心,雪王IP与蜜雪冰城的营销紧密相关。蜜雪冰城为什么能够精准拿捏用户的兴趣长红那么多年?雪王IP对品牌营销的作用有哪些?一起来看看本文分析吧。

    提到蜜雪冰城,或许你瞬间想到的不是产品,而是一个头戴王冠、手握冰激凌权杖、身体圆滚滚的“雪王”,行走在大街小巷的“雪王”早已使蜜雪冰城的品牌形象深入人心,雪王IP与蜜雪冰城的营销紧密相关。

    近日,蜜雪冰城官方宣布,将推出自己的首部动画作品《雪王驾到》,并公布了动画的海报和先导PV,这一消息引起了网友们的热议和期待。

    蜜雪冰城为什么能够精准拿捏用户的兴趣长红那么多年?雪王IP对品牌营销的作用有哪些?

    一、以动漫形象为IP核心,做人格化表达

    大卫·奥格威的品牌形象论提到“每一品牌、每一产品都应发展和投射一个形象。形象经由各种不同推广技术、特别是广告传达给顾客及潜在顾客”。

    而蜜雪冰城深谙此道,2018年蜜雪冰城正式启用新的品牌形象—雪王。蜜雪冰城可以说将“雪王”这一IP用到了极致,从品牌Logo到门店设计再到物料周边等,雪王形象无处不在,甚至有的门店卷闸门上都是“雪王”的形象。在这个阶段,“雪王”只是品牌形象的具象化,社交属性并不明显。

    2021年夏天,一句魔性歌词“你爱我,我爱你,蜜雪冰城甜蜜蜜”让蜜雪冰城彻底出圈,同时也带火了品牌形象“雪王”。迅速上升的热度带来了二次创作热潮,B站各大UP主纷纷展示创作才能,推出外语版、电音版、鬼畜版、方言版等多个版本的蜜雪冰城广告主题曲,为蜜雪冰城带来了指数级增长的讨论和流量。

    图源B站截图

    蜜雪冰城借势线上热度,在线下各个门店循环播放广告主题曲,同时部分门店还设有“雪王”玩偶,它们随着音乐的鼓点跳舞,引来大量消费者围观。通过联动线下门店,蜜雪冰城轻松让年轻消费者牢牢记住了“雪王”形象,而“雪王”与消费者之间的互动也为这一IP注入了人格化的灵魂,“雪王”的社牛性格增加了用户对品牌的好感,也拉近用户与品牌之间的距离。

    如今,蜜雪冰城不断丰富“雪王”IP形象,使其更加立体饱满。在官方的描述中,“雪王”不仅有生日、性格、爱好、口头禅,还是蜜雪冰城首席品控官兼品牌终身代言人。

    而蜜雪冰城的营销也围绕“雪王”展开,雪王活泼可爱、搞怪贱萌的性格让蜜雪冰城收获大量的粉丝,通过雪王IP,蜜雪冰城持续活跃在消费者视野,热度居高不下。

    二、借势社交平台,与年轻人“玩”在一起

    蜜雪冰城之所以一直有着较高品牌声量,与其品牌营销策略息息相关。

    克劳锐《年轻人生活消费观察系列研究—茶·咖生活篇》报告显示,小红书、抖音、微博是年轻人浏览咖啡、茶饮内容的首选平台。微博平台的用户年龄段占比更均匀,80后、85后更容易在短视频平台被种草,90后、95后更加偏爱小红书平台的内容。

    蜜雪冰城在B站、微博、小红书、抖音、快手等多个平台设立品牌账号,深入年轻用户群体,了解他们的习惯与爱好,与年轻人玩在一起。

    目前,蜜雪冰城的新媒体矩阵逐渐成熟。具体来看,蜜雪冰城在各个平台设立两个主品牌号,分别是“蜜雪冰城”和“蜜雪冰城雪王”,各个平台的主品牌号都已经积累了一定量的粉丝。

    比如,小红书平台的@蜜雪冰城 账号粉丝81万,@蜜雪冰城雪王 粉丝160万,而在B站,@蜜雪冰城 官方站粉丝109万,@蜜雪冰城雪王 粉丝37万。值得一提的是,蜜雪冰城在抖音设立了账号矩阵,除了主品牌号,还有@蜜雪冰城(官方团购) 、@蜜雪冰城雪王直播间 等多个相关账号。而两个主品牌号的粉丝量都在百万级别,其中@蜜雪冰城 粉丝量391万,粉丝量级在众多平台中排名第一。

    图源抖音截图

    克劳锐观察到,蜜雪冰城两个主品牌号的营销侧重点不同,“蜜雪冰城”主要发布品牌动态,包括节日、新品上市等节点举办的各类线上营销活动。“雪王”主要是以人偶服的形式出现在视频中,宣传场景聚焦在线下。而“蜜雪冰城雪王”以雪王的动漫形象为核心,通过图文和视频的形式讲述雪王日常趣事,没有刻意的品牌宣传,“雪王”这一人格化品牌IP却在无形中强化了蜜雪冰城的市场影响力,同时并不会引起用户反感,可以说这一打法十分巧妙。

    “雪王”虽然是动漫形象,但行为举止却是当代年轻人的缩影,这使品牌自然融入年轻用户圈层,与年轻人同频共振。

    就比如“蜜雪冰城雪王”发布的“你的假期是这样的吗”这期视频,雪王将一天时间分为游戏、干饭、睡觉、学习这四个模块,通过一步步移动组合,雪王却将学习板块移出一天的安排中。这样的生活方式引起不少用户的共鸣,“什么今天的任务,是每天的任务了”,“不愧是雪王,真了解我们”,“雪王懂我!马上下单蜜雪冰城”……

    图源小红书截图

    此外,蜜雪冰城精准把握年轻人强烈的造梗欲和分享欲,通过一系列玩梗造梗内容与用户互动。

    比如网友发现雪王形象变黑,便调侃“雪王黑化了”,最后官方表示是因为夏季推出桑葚产品,雪王去采摘结果晒黑了;再比如线下雪王喜欢在竞品门店闲逛,肆无忌惮地在门口蹦迪,唯独不去自家门店,街溜子形象日渐深入人心,给网友们提供了密集笑点;还有与中国邮政联名,蜜雪冰城以“雪雪我啊,瞒不住喽”官宣文案,又引导网友们玩起了“雪王入编”梗。

    最近,蜜雪冰城阴阳怪气瑞幸一事更是激发了网友的参与感,起因是一位顾客不满瑞幸咖啡中的冰块太多,而蜜雪冰城在这个新闻的评论区表示“小瑞怎么回事啊,应该不是故意的吧”,这一发言引起众多网友围观,不少网友冒充蜜雪冰城官方账号发表“绿茶”评论,有网友调侃瑞幸可以推出新品“绿茶蜜雪”进行反击。

    图源抖音、微博截图而在@蜜雪冰城雪王

    官宣首部动画《雪王驾到》定档时,@瑞幸咖啡(成都店)在发表评论“反派大BOSS不会是我吧”,再次制造了品牌话题。

    蜜雪冰城通过雪王这一IP与年轻人打成一片,不断拉近彼此间的距离。也正是通过年轻人喜闻乐见的方式,蜜雪冰城一直保持着较高的市场声量。

    三、营销风格与产品定位一致

    作为一家专注于下沉市场的茶饮品牌,蜜雪冰城将性价比发挥到了极致。相较于同类品牌动辄20元以上的价格,蜜雪冰城4-10元的定价极为友好亲民,消费者只需用一份瓶装饮料钱就能买到一杯现制茶饮,这对于追求性价比的消费者来说很难不为所动。即便在一线城市,蜜雪冰城也因为亲民价格的优势占领了一席之地。

    蜜雪冰城的营销风格与产品定位高度一致。为了扩大品牌影响力,不少品牌都会出周边产品,蜜雪冰城也不例外。蜜雪冰城的周边,延续品牌朴素的气质,够接地气,够实用,甚至还有点魔性。

    就比如雪王不倒翁全套13个,售价不到20元,黑雪王更是给了网友惊喜。保温杯、吨吨桶、杯套、钥匙扣这些日常生活用品同样售价不高,并且实用性也非常强。

    图源淘宝截图

    而在蜜雪冰城音乐节上,蜜雪冰城依旧主打低价策略,现场不仅有雪王活跃气氛,还请来了汪苏泷、许飞等多个知名歌手和独立乐队。有着诸多明星出演,却没有常见的早鸟票、预售票和正式票之分,也没有划分VIP区和普通区,依旧是十分符合蜜雪调性的低价。

    总的来看,蜜雪冰城以雪王IP为营销核心,通过洞察年轻用户群体的生活方式,为雪王注入人格化的灵魂,在一次次互动中不断拉近与用户之间的距离,而这正是蜜雪冰城能够成为新茶饮“顶流”的关键。

    而在当下,品牌的内容营销、联名、社交种草等等营销玩法层出不穷,品牌要学会洞察年轻人的消费趋势,把握年轻人的消费偏好与产品的使用场景,这才是品牌抢占市场氛围的基础和关键。

  • 需求激发三件套,内容、场景、KOL

    产品设计 2023-08-20

    本文先提出品牌不是在贩卖商品而是激发需求,再进一步详细讲述需求激发的三件套。适合品牌商进行观看,来进一步明确品牌宣传的定位与方向。

    一、不是贩卖产品,而是激发需求

    当看到下面这幅图片的时候,你会想起什么?

    从左到右6种产品形式,代表了同一需求下的6种满足方式:

    1. 白瓶水波纹(大众绿棒子型)
    2. 左二异形瓶(夜店型)
    3. 易拉罐(便利店型)
    4. 橡木桶(酒窖自酿型)
    5. 鲜/扎啤桶(口感保鲜型)
    6. 马口铁(礼品纪念型)

    是的,不是贩卖啤酒,而是理解需求本身这件事。

    需求是概念的、抽象的,产品是具象的、多维的。营销首先不是销售产品,而要激发需求——明确,消费者未满足状态。

    例:一款高度白酒,如何卖?

    背景信息:这是一家两代人经营的白酒厂,以生产高度白酒在当地很有名,度数68°-72°。

    需求分析:清晰目标人群,完成消费者自画像。是让越来越多喝低度酒的人群喝高度酒,还是找到更多喝高度酒的人。

    • 喝高度酒的人具有哪些群体特征
    • 酒厂现有消费者是否具有特殊性
    • 经销商(烟酒店)如何描述此类消费者
    • 区域市场高度酒的市场价格情况
    • 如果没有我们,消费者选择谁

    让喝低度酒的尝试喝高度酒,听起来是个不错的想法。既:通过改变认知的方式促发行为,这显然需要更广泛的资源、更权威的媒体、更多的资金、甚至需要等待更长的时间。

    但是,很多时候等是等不起的,本质上是因为投入不起。知己知彼,关键在知己,财大气粗这话听起来特别霸道、特别讲理。

    作为一个区域酒厂,显然这不是他现在该做的。你的顾客从哪里来,最高效,从现有人群中来,从竞争对手那里来最高效。百事可乐,需要重新发现一群喝可乐的人吗?不需要,百事需要做的是让喝可口可乐的人喝百事。

    找到更多喝高度酒的人,是第一步。

    方向确定了,接下来就是回答2-6的问题。核心是完成消费者自画像,物以类聚人以群分,你要圈住谁,就要重新定义群体特征。一次大排档,朋友说:老高看,典型的骨灰级酒友、老炮儿,这够接地气吧,看他们喝,就过瘾。旁边一桌3个看上去50多的老男人,喝的有滋有味。

    对!就是这两个字,过瘾。

    重度消费,要的就是过瘾!辣的过瘾;麻的过瘾,过了瘾需求就释放了,就满足了。有了过瘾这两个字接下来就势如破竹、渐入佳境。

    • 产品名:8848 中国白酒新高度
    • 品相:打破高度酒散装化、白瓶化低端印象
    • 广告语:过酒瘾,就喝8848
    • 公关:代表中国白酒申请高度白酒吉尼斯纪录
    • 软文:《还喝低度白酒?要过酒瘾,就喝8848》
    • 事件:老炮儿酒友会,喝8848一起过酒瘾

    过了瘾的状态是爽、不过瘾的状态是不爽。消费者未被满足的状态,就是不爽。总感觉哪里差了点什么,既意中有而语中无的需求。在生活中表现为:不方便、怕麻烦——对于这类需求,要深刻理解。

    二、如何描述需求

    大家一定都知道荒岛卖鞋的故事,面对同样的情景,两个人得出来截然不同的判断——对需求的判断不同,看到的市场就不同。

    因为没有穿鞋所以没有需求;因为没有穿鞋所以有开发需求的可能,A的结论是无需求、B的结论是有潜在需求。(八种需求状态:负需求、无需求、潜在需求、下降需求、不规则需求、充分需求、过度需求、有害需求)。

    以试穿的推广方式,完成了需求调研(反映良好),找到意见领袖(酋长)通过问题引导需求,将原本的潜在需求转化为现实需求——A做的是销售工作、B做的是市场工作。

    于企业而言,首要的工作是完成清晰、可理解的需求描述。

    并以该需求为判断(一个中心),组织企业内外部资源,完成四项基本点落地(产品开发、价格制定、渠道政策、推广策略)。既:一个中心(需求)四项基本点(产品、价格、渠道、推广)。

    如何正确的描述需求?对于需求的描述就是对目标市场的描述,需求描述要能够指导产品、价格、渠道、推广的工作。如果用OKR理解,既需求是O,产品、价格、渠道、推广是KR。

    描述-1:我们要做中高端女装市场。对于这样一个需求描述能否指导产品、价格、渠道、推广的工作吗?产品:女装、价格:中高端、渠道,不清楚、推广,不清晰。这样的需求描述显然是不合格的。因为这个O,无法分解为KR,一个中心,无法指导四项基本点。

    为此,我们判断一个市场部是否清晰的描述了需求这件事,只需要判断其需求的描述是否可以指导产品、价格、渠道、推广四项的精进。

    需求描述范式:以什么样的产品功能、形式、满足消费者在什么具体场景下的需求。进而为市场调研、产品开发、定价、渠道、推广提供关键性判断依据。

    描述-2:满足职场女性代表公司出席会议、发表演讲、签署合同等正式场合着装需求。当听完这样的描述之后:清晰了基本调研对象、需求场景,进而可以展开市场调研工作。

    包括:购买预算、现有需求满足方式、竞品情况、痛点分析等需求自画像工作。整个市场部的工作就是围绕着需求自画像而展开的,进而为以后的判断决策提供原始依据。

    • 需求=市场,对需求的发现、满足就是对市场机会的洞察、占据
    • 清晰的描述需求,完成需求自画像。为产品、价格、渠道、推广提供基础判断依据。既:一个中心,四项基本点
    • 可描述、可分解、可指导:需求描述要能够指导产品、价格、渠道、推广的工作。如果用OKR理解,既需求是O,产品、价格、渠道、推广是KR
    • 需求描述范式:以什么样的产品功能、形式、满足消费者在什么具体场景下的需求。进而为市场调研、产品开发、定价、渠道、推广提供关键性判断依据

    三、激发需求三件套:内容、场景、KOL

    1. 内容

    什么是内容,围绕产品卖点而组织的图文。比如:在各家牛奶品牌都在打天然牧场的背景下,认养一头牛从奶牛开始,以什么样样的牛,孕育什么样的奶为产品卖点,通过围绕奶牛的饮食起居来做内容衬托卖点。

    比如:

    • 品牌层:奶牛养的好、牛奶才会好
    • 企业层:我们不生产牛奶,我们只是替用户饲养奶牛
    • 推广层面:心情好、吃得好、住的好、工作好、出身好

    • 心情好,每头牛都会听音乐、做SPA、享药浴
    • 吃的好,每头牛每天伙食费约80元
    • 住的好,每头牛都配有“保孕院”、“产房”、“幼儿园”
    • 工作好,每头牛都有“带薪”年假和定期体检
    • 出身好,每头牛都是澳洲血统,均可查到系谱档案

    2. 场景

    场景:有关人、时间、地点、事件的集合。比如:困了、累了是一个场景、小饿小困也是一个场景,吃火锅怕上火是个场景,同样过年送礼更是一个场景。

    场景:人在具体的时间、地点下需求被自然的唤醒,由此带来的消费事件。比如:八月十五少不了月饼、端午节少不了粽子、春节少不了亲朋好友热闹的聚会、双11总要屯点东西。

    • 一个场景就是一个完整的消费行为,时间、地点、人物的事件
    • 一个场景就包含了一个自动自发的需求满足

    比如:忙碌的年轻人,白天工作、有咖啡提神、零食解压,晚上除了酒吧、KTV、电影院,似乎就没有第三个选择,为年轻人打造的新酒吧,海伦司小酒馆孕育而生。

    海伦司小酒馆成为了,年轻人的午夜星巴克,是中国目前最大的小酒馆,一个可以消费无压力的酒吧,现在年轻人总有不可名状的压力,都需要一个无压力的空间去安抚情感。

    海伦司,从性价比到环境为年轻人提供了一个差异化的选择。

    3. KOL

    KOL:如今一个不会种草的品牌,就没机会等待被拔草。KOL是新品牌的信任代理,是媒介的活跃分子,更是连接消费者与品牌的最短距离。那些能够快速走红的新消费品牌无疑都找到了与之匹配的KOL。

    选择KOL的逻辑是品牌向潜在消费者发信号的逻辑,信号源要强、信号覆盖要大、信号不能断。

    信号源要强:KOL本身的影响力要强,一个100万粉丝的与一个10万粉丝的不同;一个垂直类的KOL与一个非垂直类的KOL不同。选择时要先垂直后泛垂直,越垂直信息源就越强。

    比如:小仙炖就选择了,张雨绮、章子怡、景甜等自带“贵妇”与“精致”标签的明星种草,在为品牌带来高曝光的同时,也为小仙炖在潜移默化中建立了潜在消费者的可信度。

    信号覆盖要大:覆盖是量级度,覆盖要大就是尽量要提高量级。这个量级最好是阶段性的在同一关键词下的量级。

    比如:完美日记在覆盖上几乎做到了极致。最多的时候自己一个月里接到10条广告,其中4条是完美日记,“跟完美日记合作,话少、爽快,二话不说直接给钱,非常省心——一位小红书博主表示。

    早期,完美日记将资源all in 小红书。构建金字塔式的投放布局:包括头部、腰部网红,以及路人、素人大范围投放(头部做产品背书、腰部做大面积种草、路人、素人做客户见证)。越是底部的投放频率、频次,预算就越多。

    信号不能断:长期主义的本质不是跨越大周期,而是不断的穿透小周期;是一种能穿越小周期,看透大周期的能力、行动。一个个的小“山峰”代表着新消费品牌通过不断的向消费者传递信号,穿越从产品、品牌、竞品、品类、跨品类、场景,最终建立品牌的独有心智。

    比如:成熟品牌飞鹤奶粉,长期以来都在传递一个核心概念,更适合中国宝宝体质。当然,这话其实经不起思考,难道国外的奶粉就不适合中国宝宝体质了,显然事实不是这样的。但是认知大于事实,信号不能断,重复是可以建立认知进而影响认知的。

  • 消息提醒,除了弹窗还有什么?

    产品设计 2023-08-20

    在产品设计中,作为系统与用户之间交流的窗口,消息提醒是非常重要的功能。在不同的产品形态下,消息通知和提醒都会有不同形式的变化。这篇文章,作者和我们分析了移动端的消息提醒如何设计,希望能对大家有所帮助。

    消息通知和提醒作为系统与用户之间交流的窗口,在不同事件下用户都能感知与操作场景和紧急程度匹配的结果反馈或消息提示,做到合理有效的信息传达。

    一个能让用户快速上手的APP,除了设计符合产品逻辑、符合用户操作习惯、足够简洁之外,层次分明不失趣味性的消息提醒设计,也是非常重要的。

    在这篇文章中,将重点介绍移动端消息提醒如何在页面中运用的。

    一、概念简述

    消息通知:通知是产品中极其重要的一部分,它能快速将内容的状态及变化通过不同的方式传达给用户,以便用户在收到信息后根据所传递的内容及时做出应对策略。

    提醒:顾名思义,提醒方式,是指用户需要提醒的时候,出现的一些提醒机制,且尽可能的减少对用户的打扰。

    二、消息提醒的方式都有哪些?

    结合工作中常见的消息通知设计,分类如下:

    三、模态弹窗

    用户在完成任务的过程中,界面会出现弹窗打断用户的操作行为,用户必须通过主动点击才可以进行下一步操作。

    模态弹窗与非模态的视觉区分:模态一般有黑色半透明蒙版,强调弹窗的内容,优点是可以很好的获取用户的视觉焦点。缺点是会打断用户当前的操作流程。

    1. 弹窗/对话框提示

    对话框用于提供关键信息或要求用户作出决定,信息或要求的优先级很高,必须及时处理。主要在打断用户后并提供选项操作,对用户的干扰较大,通常会配备1~3个操作按钮,而且会把用户最期待的或产品最期待用户操作的按钮突出显示。对话框包含:广告弹窗、活动推广弹窗、新手指引、改版/新功能指引、确认提示弹窗、升级提示弹窗、APP授权弹窗(定位、通话、通讯录等)

    对话框要遵循以下原则:

    • 聚焦:对话框使用户聚焦在提醒内容上,确保信息被看到、任务被处理;
    • 直接:直接传达信息,帮助用户处理任务;
    • 有帮助:对话框的出现是为了响应用户的操作,带有上下文的信息;

    2. 操作栏/底部弹窗

    底部弹窗与对话框的特点是一样的(打断式、干扰大),主要的区别在位置上,操作栏/底部弹窗在视觉重心上稍弱;操作层面来讲更便捷,尤其是对大屏单手操作而言;底部弹窗可以承载更多的简单操作,如时间选择器、打星评价、快捷操作等。

    四、非模态弹窗

    相比模态弹窗,非模态弹窗属较为轻量,触发后以一种非阻碍的的方式呈现,不会打断用户的当前操作,主要是给予用户即时反馈,让用户清楚应用当前的交互后状态。非模态弹窗不强制用户操作,根据反馈信息的重要程度及意愿,可在一定的时间内自动消失,也可等待用户操作后消失,常见的有以下几种:

    1. Toast

    放在Toast中的文字要简短、精炼。Toast出现后,过几秒自动消失,用于无需用户反馈且可通过用户重复点击出现的消息类型。

    2. 快捷提示

    用于内容推广、操作引导、用户消息。快捷提示可根据需要选择自动消失逻辑、或添加关闭按钮,也可以在用户滑动页面的过程中设计收起态或通过调整透明度来消除对页面内容的遮挡。通过这些内容在首屏得以曝光,并为用户提供快捷入口。

    3. 进度条提示

    进度条是一种用于表示任务完成进度的图形界面元素,它可以帮助用户更好地理解任务的进度和剩余时间。提供用户一个直观的反馈,让用户能够更好地掌握任务的进度,从而提高用户体验。总之,进度条可以帮助用户更好地了解任务的进度,提高用户体验。常见于文件上传、下载、处理进度,也可以用于显示游戏进度、任务完成进度、问卷填写进度等。

    4. 小红点(徽标)

    徽标的形式不仅只有小红点,也有红圈里加数字,表示新消息数量。也有直接小红圈+文字,来更好的传达信息

    5. 空状态提示

    由于网络环境原因、设备原因、数据正常且为空、数据异常等等造成内容为空时,给到用户的反馈提示,主要作用为以下几点:

    1. 解释说明:告诉用户当前页面的信息状态出现了什么问题
    2. 安抚用户情绪:缓解用户焦虑、挫败、疑惑等负面情绪
    3. 引导用户操作:告诉用户解决方案并引导用户进行操作
    4. 强化品牌:传达品牌定位、格调和气氛,与用户建立情感连接

    6. 文字轮播提示

    用于宣传类banner轮播,通知类滚动提示,点击后跳转到消息详情或消息列表。用于信息数量较多,但用户不需要一一了解的动态信息。

    7. 校验提示

    校验触发条件的不同和报错方式的不同,可以组成三种:

    1. 输入校验即时报错:实时验证,显示错误提示,影响较小。
    2. 失去焦点即时报错:减少后台数据传送压力,避免频繁错误提示。
    3. 操作保存/提交/下一步时全部报错:减少用户反馈时间。

    五、如何选择合适的消息提醒?

    针对不同的需求类型和提醒目的,如何选择最合适的提醒呢?大家可对照下表再结合自己的经验来判断:

    六、结语

    消息通知设计用于在必要时向用户反馈操作结果或传达消息,在不同事件下,用户都能感知与操作场景和紧急程度匹配的结果反馈或消息提示,做到合理有效的信息传达。

  • 5500字纯干货丨深度拆解腾讯视频app的细节设计

    产品设计 2023-08-20

    视频APP中也存在着很多产品设计细节,作者对腾讯视频的产品设计进行研究与思考,希望能够让大家更加了解视频行业与背后的产品设计逻辑,一起来看看吧。

    最近由于爱奇艺《说唱巅峰对决2》的结束,和腾讯视频《长相思》与《心动的信号6》等热剧的更新,小编也从爱奇艺会员成功转向腾讯视频,由于很久没有体验过腾讯视频,这次在使用过程中发现腾讯视频有很多细节设计十分的有创意,作为一个体验设计师和视频/直播领域的产品方向工作者,突发灵感希望对腾讯视频的产品设计进行研究与思考~让大家更加了解视频行业与背后的产品设计逻辑,希望对大家有所帮助。

    注:本期设计空间站,分析不仅只有小编自己,还有强大的百度文心一言AI大力支持~

    1. 观点阐述

    本文所有观点不代表公司,仅个人观点;

    本文中的所有观点没有任何偏向,仅站在一个用户的角度来分析产品;

    2. 适合人群

    第一类:UI/UX体验设计师:跳出设计执行层,去思考视频类产品背后的设计策略,提升产品设计分析能力;

    第二类:产品/运营经理:通过全面的产品设计拆解、用户逻辑分析,获取产品设计参考;

    第三类:泛娱乐(视频/直播)相关行业从业者:通过腾讯视频产品分析与拆解,获取竞品的逻辑参考。

    一、行业介绍

    1. 腾讯视频介绍

    腾讯视频是中国最大的在线视频平台之一,由腾讯公司运营。它提供了丰富多样的影视内容,包括电影、电视剧、综艺、动漫、纪录片等各类视频资源。 腾讯视频拥有庞大的内容库,用户可以随时随地通过手机、平板或电脑观看高清流畅的视频。用户可以在腾讯视频上观看热门的国内外电影大片,追剧最新的电视剧集,欣赏精彩的综艺节目,还可以发现各种类型的原创内容。

    腾讯视频提供了多种收费和非收费的会员服务,会员可以享受无广告观看、高清播放、独家内容等特权。此外,腾讯视频还为用户提供了个性化推荐和智能搜索功能,帮助用户发现符合自己口味的影视作品。

    腾讯视频致力于与国内外的制片公司、电视台、明星签约合作,以及自主制作原创内容,为用户提供优质的视频体验。它也积极探索新的技术和商业模式,与音乐、游戏、社交等领域进行深度融合,为用户创造更多的娱乐选择。

    总之,腾讯视频是一个丰富多样、高质量的在线视频平台,为用户提供了便捷、优质的观影体验,成为了中国广大网友追剧、观影、下饭神器的首选之一。

    2. 平台优势

    1. 腾讯视频具有巨大的用户基础,拥有多平台优势。截至2022年底,腾讯视频的月活用户总数已经达到3.9亿,平台有效播放综艺、电视剧、动漫、纪录片等长视频内容超210亿次,播放次数居全球在线视频平台首位。

    2. 腾讯视频在内容制作方面具有强大的优势。腾讯视频以“内容为王”作为平台战略,将“头部内容”作为重点,致力于打造优质内容。腾讯视频通过引进国内外优质影视作品,以及与国内外知名影视公司合作,实现了影视剧、综艺、微电影、纪录片等内容的全覆盖,如近期的《长相思》《心动的信号6》《舞台2023》等独播内容。

    3. 腾讯视频在技术创新方面也具有优势。腾讯视频将AI技术应用于内容推荐、智能剪辑、人脸识别、舆情监测等方面,为用户提供更加个性化的服务。同时,腾讯视频还积极探索VR、AR等新技术,为用户提供更加丰富的视觉体验。

    4. 腾讯视频还具有强大的品牌影响力。腾讯视频作为国内领先的在线视频平台之一,在行业内具有较高的知名度和影响力。腾讯视频还积极参与公益活动和社会事件,展现出了良好的社会形象。

    3. 盈利模式

    腾讯视频的盈利模式主要包括以下几种:

    (1)会员收入:腾讯视频吸引大量会员,截至2022年9月,腾讯视频的会员总数已经达到1.2亿,他们所交的会员费是一部分收入来源。

    (2)广告收入:在腾讯视频网站上投放广告将会给腾讯视频公司一部分多的广告费,这也是腾讯视频网站主要的收入来源。

    (3)其他收入:在腾讯视频站内的一些其他收入,如超前点映、影视周边等其他收入。

    4. 产品更新频次与平台slogon

    (1)产品更新频次:更新频次越高,说明产品更新换代速度越快,适应市场变化的能力越强,企业的发展就越有保障。根据点点数据提供的app更新频次数据的显示,腾讯视频的更新频次为:1周/次。从数据可看出腾讯视频的更新频率还是非常不错的。

    (2)平台slogon:对于一个企业、一个产品和一个网站来说,slogan都非常重要。广告口号是一种较长时期内反复使用的特定的商业用语,它所强调的是一家公司和它的产品最为突出的特点,以下为腾讯视频的slogon。

    腾讯视频:不负好时光

    (强调是一种场景体验。秉承“内容为王,用户为本”的价值观,以更加年轻化、更能引起用户情感共鸣的定位亮相,着力凸显优质内容的差异化竞争优势,深化与消费者的情感沟通。)

    二、界面拆解

    1. 内容结构

    作为视频内容平台,通过对腾讯视频APP的结构梳理,发现产品内大部分的内容都是围绕视频来进行拓展,整体框架分为:首页、短视频、VIP会员、热议、我的这几个模块。本次我们主要针对于首页与播放器这两个场景进行重点分析。

    2. 首页

    首页作为腾讯视频的首个场景,主要以视频内容推广为主,主要内容有如下:顶部操作区、内容推荐区、各分区推荐页等。

    2.1 顶部操作区

    顶部操作区一般集合着大量的操作入口,主要功能如下:

    • 加追与预约:其中包含用户添加的追剧列表、热门预约、历史观看记录等功能
    • 搜索:点击进入搜索结果页,其中包含热门榜单、历史记录,用户也可以快速搜索自己需要查找的视频内容
    • 游戏中心:游戏中心主要是推广腾讯自家的游戏内容,通过游戏中心对游戏进行引流与拉新
    • 周边商城:周边商城里面为视频的周边产品,用户可以在周边商城中进行商品购买

    2.1.1 产品亮点:加追与预约功能

    在首页左上角增加最近再追功能,此功能让用户在首页就可以更快速的找到自己在追的内容,而且在页面中还包含新片预约和历史浏览记录功能,让用户在了解更多预约内容与历史记录。此功能放在首页很好的降低用户操作成本,提升产品体验。

    2.1.2 设计误区:加追功能关闭交互

    加追功能在关闭时有一个缩放交互,此交互场景可以很好的让用户感知当前是从哪里进行跳转,出发点是好的,但由于在点开时没有缩放动画与缩放的样式不太理想反而导致此交互效果并不好,所以可以适当优化下。

    2.1.3 设计亮点:滑动屏幕顶导隐藏与出现交互

    当用户滑动屏幕时,顶部操作区会跟随手势进行向上隐藏,这样可以在用户向上滑动浏览信息时给界面带来更多的展示空间,当用户向下滑动一定距离时顶导出现,方便用户对顶导进行相关操作。这里的交互细节很舒适,大家可以多多学习。

    2.1.4 设计亮点:顶部背景跟随banner颜色进行变化

    顶部背景跟随banner进行变化,当用户滑动banner时顶部背景会跟随banner的颜色进行变化,这样可以让界面的配色看起来更加和谐,提升界面视觉一致性。同时赋予用户体验惊喜感。

    2.1.5 设计亮点:下拉刷新新玩法

    大多数产品下拉都为刷新界面操作,但腾讯视频对下拉进行两部交互操作,用户下拉到第一个阶段会出现提示”下拉发现更多好玩”当前这时用户松手可以进行常规刷新操作, 但用户看到这样的提示会更想知道在向下拉到会带来怎么的内容,当用户再次下拉后会出现对应的内容推荐,类似于游戏推广与热播剧推广,赋予用户惊喜感的同时还能增加广告收入。

    2.2 内容推荐区

    内容推荐区主要以推荐视频内容为主,主要功能分为:

    • Banner:banner主要推荐站内的热门内容与广告,支持滑动切换与自动切换展示
    • 双瀑布流推荐位与大卡片推荐:卡片形式采用“封面/视频+标题+标签”的形式,推荐一些站内的热门内容与广告内容
    • 定制内容页:热门的视频会定制内容页,为视频定制界面样式与布局

    2.2.1 设计亮点:Banner切换的创新交互方式

    腾讯视频的Banner 切换动画是十分有特点的,整体是logo的剪影效果,并且在右下角的数量指示点也是logo的形状,很好的突出品牌形象,设计创新的同时强化品牌在用户心中的位置。

    2.2.2 产品亮点:双瀑布流推荐机制

    banner下方共6个双瀑布流推荐位,这种排列方式可以在一屏中展示更多的信息,但不足就是如果界面全部都是这种排列方式会导致用户浏览成本提高,降低用户的浏览欲望,所以腾讯视频把内容控制在6个,不会给用户增加浏览负担,其次在推荐机制上对前两个卡片进行“最近在看”标签,和视频预览,相比其他静态卡片可以让用户更加快速的发现自己想看的内容。

    2.2.3 产品亮点:视频大卡片推荐

    这种样式的推荐形式虽然同屏下相比双瀑布流的可推荐内容少,但可以让用户更注重内容视频本身,推荐的视频内容都为该作品的热门片段,小编经常看着看着就安利了一个新剧,很适合作为长视频推荐列表使用

    2.2.4 设计亮点:不一样的定制化分区内容页

    腾讯视频会根据站内的热门内容进行定制化分区内容页,虽然这种形式在各个视频平台都有设计,但腾讯视频的似乎更加与众不同,它相比其他竞品不仅增加了开屏动画,加强界面氛围感,同时在功能上增加了一级标题,如在长相思专题中的“独家花絮、有声书、看微综、相思榜”等入口,可以让用户在页面中发现更多剧情本身以外的衍生内容,一级标题的形式也可以让用户直达视频播放页,快速了解想要看到的视频内容。

    2.2.5 设计误区:分区中的入口icon设计

    电视剧作为腾讯视频的高频点击分区,在头部的icon确实有失大厂风范,图标过大、视觉比例不一致、风格不统一等问题,很影响界面的视觉美感,但入口的点击转化是否有影响未知。

    3. 播放器相关

    播放器作为视频产品的核心使用场景,其中的功能非常庞大,腾讯视频的播放器内容主要分为:竖屏播放页与横屏播放器。

    3.1 竖屏播放页

    竖屏播放页为用户点击进入视频的第一个场景,主要功能为:

    • 顶部播放器:顶部为视频播放区域
    • 详情:详情中包含视频标题、选集、讨论、周边、视频推荐等功能
    • 底部快捷操作区:包含再追、下载、投屏、一起看、分享等功能

    3.1.1 设计亮点:定制化的视频播放器

    对于热门的内容,腾讯视频依然会定制化页面,给予专属的配色与标题,给用户提供更加沉浸的氛围感。

    3.1.2 产品亮点:底部操作区功能

    相比其他产品,腾讯视频在进入竖屏播放页后不会再顶部的视频中默认展示操作内容,给用户带来更好的观看体验,并且把视频相关的操作内容放置底部做成一个底部操作区,用户可以在底部快速的对视频进行操作如:下载、投屏、一起看、分享等。而不是把功能分散在界面中,这样不仅可以降低用户的寻找这些高频操作的成本,同时提升视频的观看体验。

    3.2 横屏播放器

    横屏播放器是大家在使用产品中最高频的操作,这里腾讯视频也是下了很大的成本,也有不少的细节,界面的主要功能有:

    • 顶部操作区:标题、一起看、臻彩视听、投屏等功能
    • 左右侧操作区:锁屏、讨论、拍照、录像等功能
    • 底部操作区:进度条、暂停、弹幕、倍速、发电、选集等功能
    • 其他场景:弹幕播放、特效、音量控制、快进等功能

    3.2.1 设计亮点:定制化进度条与标记糖点

    对应热门视频内容,腾讯视频会定制化进度条样式与进度点样式,(如《长相思》中定制红色木槿花)让用户更加沉浸的观看体验,同时在进度条上方有标记样式,用户点击会触发标记动效与糖点,所有标记的糖点数据也会以波动图的形式显示在进度条上方,提高互动玩法。

    3.2.2 产品亮点:发电功能为自己支持的CP上分

    在底部操作区增加发电功能,用户可以点击为自己支持的cp送出礼物,不仅可以满足用户的“嗑CP”心理,同时对直播场景中的核心送礼功能很好的结合到视频产品中,给视频内容提供了商业价值,提高产品收入。

    3.2.3 产品亮点:讨论功能-边看热议边追剧

    腾讯视频在横版播放器增加讨论入口,点击会在右侧弹出讨论功能,并不会遮挡视频内容,用户可以在右侧观看用户发布的热议,一起边讨论视频内容,一起追剧两不误。

    3.2.4 产品亮点:振动彩蛋与高能弹幕

    在播放器设置中有振动彩蛋与高能进度条功能,当用户观看到视频高能部分时就会触发振动操作与高能动画,并且弹幕会进行颜色变化,通过不一样的交互方式给用户带来惊喜感,当然用户也可以在设置中关闭此功能。

    3.2.5 设计亮点:定制表情与动态表情

    腾讯视频在发弹幕场景时点击表情,用户可以选择发送定制内容的表情,如恋综表情“般配、甜、上车、上分”等热门语言,除了定制表情外,对通用表情也增加了动态表情,让表情更加趣味,加强互动玩法与提升弹幕量。

    3.2.6 设计亮点:渐变色音量条

    腾讯视频在调节音量时,音量条是一个从蓝色到红色的渐变,配色正好与品牌色进行呼应,但其实还有一个其他的小细节,当音量低时采用蓝绿色给人舒适的感受,当音量变高时变为红色给用户警示的效果,让用户更直观的感受音量变化,通过细节来提升用户体验。

    3.2.7 产品思考:长按快进功能

    随时快时代节奏生活,用户对倍速播放越来越依赖,此前版本的腾讯视频左半屏长按为快退功能,右半屏长按为快进功能,但对应平时左手拿手机的小编,每次长按播放就需要用右手来操作,这样就会让我用两个手去查看,但在新版本中腾讯视频优化了此功能让用户点击左侧也为快进功能,但还是以前的样式,有时会给用户一种还是快退的错觉,所以这里可以统一下长按样式,降低用户疑虑。

    3.2.8 设计亮点:倒流弹幕玩法

    最近在观看电视剧时,发现当视频处于回忆片段时,弹幕就会变为从左到右的逆向出现,当剧情变为现实世界时弹幕又会回归正常的出现场景,这样的交互形式跟剧情进行了很好的融合,给用户带来沉浸的观影体验。

    此次主要分析了腾讯视频的首页、播放器功能,当然产品中还有很多其他模块,如果大家感兴趣的话,小编也会抓紧整理,给大家带来第二期分析与研究~

    三、总结

    通过对腾讯视频的首页、播放器等功能的设计分析,相信大家体验下来也发现了非常多产品设计细节,一开始我一直在想为什么腾讯视频会有这么大的用户群体,但当我分析完后发现他不仅在内容上有非常优质,在体验设计上也有非常多创意的想法,希望此次分享可以对各位产品大大们更加深入的了解腾讯视频这款产品,发现其中的产品亮点。也希望对各位设计大大们从中发现更多的设计创意,从而提升设计视野与弥补自身产品的用户体验不足。给产品带来更多设计亮点,做出打动人心的好产品。

    以上分析的场景不一定全面,有些观点也只是站在设计师的角度的个人观点。

  • 出行行业订单调度系统V1.0版本产品说明

    产品设计 2023-08-20

    网约车行业中的订单调度系统应该如何设计呢?这篇文章里,作者尝试围绕调度方式、匹配系统设计、派单流程等方面进行了说明解答,一起来看一下吧,或许会对想了解网约车行业订单调度的同学们有所帮助。

    一、背景介绍

    网约车行业订单调度通常来讲有抢单、派单两种方式,根据平台所处阶段、平台运营模式、业务情况、市场供需关系等,决定采取抢单或派单方式。

    1. 抢单场景

    • 让更多的车主听到单,增加参与感。
    • 在乘客能够接受的范围内(不能等太久)。
    • 自由选择,减少因派单不合理车主对平台的负面情绪。

    2. 派单场景

    • 让乘客能坐到车。
    • 让乘客更快的坐到满意的车(近、服务好、不能取消or取消自动改派)。
    • 让车主行车过程中更安全,能接到单(自动接单)。
    • 最合理的调度、匹配运力。

    3. 平台所属阶段

    • 初期:抢单,单少、车辆少,抢单可以增加车主参与度。
    • 发展期:引入派单,采用混合模式,随着车辆的增加,对人、车需要做一定的筛选,按供需关系需要做一定的运力调度,同时也能防止刷单。
    • 成熟期:混合模式,采用类似“滴米”机制,按订单品质决定派单或抢单。

    4. 平台运营模式(业务性质)

    • 公司车辆:适合派单,用最合适的车辆接乘客。
    • 社会车辆:适合抢单,增加参与度,减少派单不合理的负面情绪。
    • 专车:优先乘客体验,适合派单。

    5. 市场供需关系

    当乘客需求 多于 司机服务能力时,适合用抢单。

    当乘客需求 少于 司机服务能力时,适合用派单。

    二、订单调度

    订单调度需要注意以下几个方面:

    • 是否允许异地车接单
    • 订单调度方式

    城市限行规则,不能发给被限行的车主。

    1. 调度方式

    结合行业目前的业务场景,可以使用抢单、派单结合的方式,根据订单品质决定派单or抢单。

    订单品质分析算法:

    一个订单品质的好坏跟里程、路况、地段、乘客信用都有一定的关系,系统需要从这四个维度进行计算,最终得出一个分数值决定这个单的品质。

    后台支持配置每个因子的分数值,总价值100分,超过60分视为好单,默认:

    1. 里程30分;
    2. 路况30分;
    3. 地段25分;
    4. 信用15分;

    订单分数值 = 里程分 + 路况分 + 地段分 + 信用分 > 60分,视为好单。

    里程:支持按城市配置里程超过多少公里算好单,里程换算分数值(多少分/公里)。

    默认配置里程 = 建议远途公里数*60%

    默认里程换算 = 1分/公里

    算法:

    订单路程 = 取地图起点 – 终点驾车路径规划策略5第1条的行驶距离/1000

    计算分值 = (订单路程 – 配置里程) * 里程换算xx分/公里 + 里程分*60%

    里程分值 = 计算分值小于0则取0,计算分值大于里程分则取里程分。

    路况:地图路况分未知、畅通、缓行、拥堵,通过计算畅通路程占订单路程的百分比,得出路况分。

    算法:

    畅通路程 = 取地图起点–终点驾车路径规划策略5第1条,导航路段信息交通情况未畅通的路段距离和/1000 (技术可以调研是否能通过返回结果的条数进行分析)

    路况分值 = 畅通路程/订单路程 * 路况分

    地段:

    分析订单终点的价值,以订单终点所在位置为中心点,计算一段时间内周围发出的历史订单数量。支持统一配置计算周期、计算范围,按城市配置历史订单超过多少算好单、订单换算分数值(多少分/单)

    默认计算周期 = 7天 (统一)

    默认计算范围 = 直线2公里(统一)

    默认配置订单数 = 50单

    默认订单换算 = 0.1分/单

    算法:

    历史订单数 = 配置周期内,配置范围发出的订单数(起点在范围内)

    地段分值 = (历史订单数 – 配置订单数) * 订单换算xx分/单 + 地段分*60%

    乘客信用:根据付款及时率、评论情况分析。

    目前信用体系的乘客信用分默认为100分。

    算法:

    信用分值 = 乘客信用分/100 * 信用分

    2. 匹配系统设计

    怎么评判车主是否适合乘客?

    乘客叫车时,系统给周围可能接单的车主计算一个与当前订单的综合匹配值,从静态、动态两个维度进行评判,每个维度包含多个因子,计算所有因子分值之和得出每一个车主与订单的综合匹配值。

    综合匹配值 = 基础分 + 静态分值 + 动态分值

    基础分:计算匹配值的基础因子,系统可配置,默认1000分。

    静态信息:静态信息包括注册时长、历史服务分(最近100单)、车主类型等。V1.0阶段只考虑车主类型。

    默认车主类型分 = 普通车主0分;共享合伙人+10分;高级合伙人+15分;

    算法:

    静态分值 = 车主类型分

    动态信息:动态信息包含车型偏好、直线距离、规划距离、路况熟悉度、是否限行等等。V1.0阶段只考虑距离、是否限行,支持配置起点规划距离换算分值。

    默认距离换算 = 50分/公里

    算法:

    距离 = 取地图车主位置–订单起点驾车路径规划策略5第1条的行驶距离/1000

    限行 = 取地图起点–终点驾车路径规划策略2的限行结果,1需要减去基础分

    (PS:根据城市是否限行决定是否调用地图判断)

    动态分值 = 0 – (距离 * 距离换算xx分/公里) + (限行=1 ? -1000 : 0 )

    3. 派单流程

    派单需要让乘客更快的坐到满意的车,最终目标是派给最可能接单、最应当接单的车主,这样既能保证接单率(用户体验),也能保证服务者的利益。

    后台支持配置:

    • 每次筛选车主数,区间[1-10],默认6位
    • 乘客等待时长,区间[30-90],默认60s
    • 系统等待周期,区间[5-15],默认10s
    • 是否自动接单,默认 否(系统给车主自动接单)
    • 车主接单时长,区间[10-30],默认15s
    • 几位车主不接单转抢单模式,默认3位
    • 是否支持车主取消,默认 不允许

    静态筛选条件:

    • 空闲且非听单状态
    • 接受派单
    • 根据是否允许异地车接单条件筛选
    • 取城市派单范围内,直线距离从近到远
    • 静态信息分从高到低的6位车主

    4. 抢单流程

    抢单属于自由选择模式,可以增加车主参与感,需要结合场景考虑乘客是否可接受,系统设计支持多人同时抢单。

    后台支持配置:

    • 筛选数量、乘客等待时长、系统等待周期设置同派单
    • 车主接单时长,区间[10-30],默认18s
    • 匹配等待时长,区间[2-10],默认5s
    • 车主听单次数,区间[1-3],默认2次
    • 是否支持车主取消,默认 不允许

    静态筛选条件:

    • 空闲且非听单状态
    • 根据是否允许异地车接单条件筛选
    • 取城市派单范围内,直线距离从近到远
    • 静态信息分从高到低的6位车主
  • 汽车金融渠道模式化抽取,做到不变的服务多样的支持

    产品设计 2023-08-20

    汽车金融的数字化,涵盖的内容有很多,其中包括支持多样的销售渠道。面对不同的渠道,汽车金融公司可以如何应对,完成数字化?本文对不同渠道的应对方式进行总结,希望对你有所启发。

    汽车金融的数字化,会包含很多内容,其中包括支持多样的销售渠道。汽车金融的销售渠道很多样,我们不能忽略的是,当直销兴起,以及各种数字化的尝试,各种渠道都有蓬勃发展的可能。

    汽车金融公司可以通过挑选渠道的方式去完成我们的数字化,针对每一条渠道的特征去做数字化支持。而这样的方式会让我们疲于应付。

    而当我们建立了自己的应对方式,选择渠道的某一种特征入手,就可以让我们更好的去迎接每一次渠道的变动。

    一、汽车金融主要渠道的情况

    在我们说应对之前,先看一下都有什么样的汽车金融主要渠道,但是我们不做过多展开。

    1. 经销商渠道

    已有的经销商渠道,客户到店购车开展业务。

    2. 厂家直销渠道

    厂家直接或者间接接触客户,通过线上等方式开展业务。

    3. 汽车电商渠道

    三方电商线上选购,开展业务。

    4. 三方代理

    传统的SP模式,通过代理商开展金融业务。

    5. C2C模式

    二手车平台C2C模式下,直接开展业务。

    二、不同渠道汽车金融如何支持

    上面描述的这些方式,我们可以每一个去做数字化支持,同时,我们可以通过不同渠道的特征,根据特征归类去做支持。

    每个渠道都有着多样的特征,我们只选取其中的一个来做,这里我们选择,是否直接面对终端消费者。

    对于经销商渠道,三方代理渠道来讲,汽车金融公司将要面对的是代理人和中间人。

    对于厂家直销渠道,汽车电商渠道,二手车的C2C渠道,汽车金融公司将要直接面对客户,也就是终端消费者。

    按照我们所定义的规则,根据汽车金融公司面向的不同对象,区分为直接模式和间接模式,当然也可以两者混合,我们称之为混合模式。

    1. 间接模式

    金融公司不直接接触客户,通过中间代理接触客户,我们需要做的是帮助 代理更好的服务客户。

    2. 直接模式

    金融公司需要直接接触客户,我们需要做的是读懂客户的同时,让客户读懂我们。

    3. 混合模式

    金融公司需要直接接触客户的同时也要支持代理接触客户,同时,在同一个流程下客户可能从直接流向间接或者从间接流向直接。因此,需要我们能够支持间接模式+直接模式。

    三、不同模式的特征

    在不同的模式下,需要根据不同模式下面对的用户对象,进行分析,从而更加了解模式进行数字化支持。

    1. 间接模式

    间接模式,2B(中间人)2C(客户),重点在B上,目标在C上。因此间接渠道模式下,需要更多的关注B的特点和C的需求。

    • B(中间人)的特点:专业,灵活,人工服务
    • C(客户)的需求:服务专业,省心

    2. 直接模式

    直接模式,2C(客户),重点和目标都在C上,因此直接渠道模式下,需要关注C的特点和需求。

    • C(客户)的特点:缺少专业知识
    • C(客户)的需求:快速,便捷,透明

    3. 混合模式

    兼备间接模式的专业和直接模式的快速便捷。

    在不同模式下,该如何为客户提供服务呢?我们的知道客户是多样的,每个渠道模式都会有自己适合的客户,当我们充分了解客户诉求和匹配诉求之后,就能更充分的为客户提供服务。

    四、模式差异化建立专业服务

    我们提到不同的渠道模式,需要鲜明化渠道特征,让客户在选择的时候更加清晰。这里我们先简要的概括不同模式的特征,在后续的文章中,会一一介绍不同模式的特征以及数字化提供的支持。

    1. 间接模式 — 提供VIP服务

    间接模式,展开来讲就是专人专业服务,需要我们对于专业人员提供更好的帮助,从而间接的为客户提供服务。在这个过程中,我们需要更好的了解这类客户,也更好的了解专业人员需要什么样的帮助,综合考虑,建立我们的间接模式的专业服务。

    2. 直接模式 — 提供自助服务

    直接模式,没有中间人,是客户自己为自己服务,在这个过程中,没有专业知识的客户更期待的是,简单易懂的贷款流程,申请过程提供辅助。在这个过程中,我们只需要更好的了解这类客户,同时降低金融贷款流程理解的门槛,让没有专业知识的人也可以读懂过程,为自己服务。

    3. 混合模式 — 提供自由服务

    混合模式结合两种模式的优势:专人的专业服务和便捷易懂的流程,帮助客户完成金融流程。

    金融不是目的而是手段,汽车金融目标是让客户撬动未来资产获取近期的诉求,汽车金融本这个过程越便捷,就越能让客户尽快达到最终最终目的。而渠道则是客户达成目标的通路。因此,根据不同模式特征服务客户,同时助力金融业务,达到双赢。

  • 我的产品方法论分享:产品需求方案中要包含哪些核心要素?

    产品设计 2023-08-20

    虽然大家做的项目都是类似的,但在需求评审阶段总会因人而异。本文总结了需求方案讲解的几种情况,希望能让大家既输出好的产品方案,同时也把自己的方案讲解好,不留遗憾。

    写作背景

    我发现虽然大家做的项目是类似的,但是实际上在讲解自己的产品需求方案(原型/需求文档)的时候就有很明显的不同,这里会有这么几个情况:

    1. 产品方案做得很好、很全,文档详实,流程图清晰,原型干净整洁等,但是在讲解需求的时候却不尽人意,可以立即为做得很好,但是讲得不好;
    2. 产品方案做得一般,文档没有写很细节,流程图和原型等也没有很齐全,然后在讲解需求的时候也会表现出丢三落四,逻辑不清楚的问题。属于是,做得不太好,讲得也不太好;
    3. 产品方案做得好,文档、流程图、原型图等内容齐全,讲解需求的时候细腻,考虑周全,而且有层次感,可以让听的人get到他的想法等;这种做得好,讲得也好的,就比较少了;

    而通过这么几次的评审后,我观察到情况3的学员比较少,而情况1和情况2的比较多。其中情况1是最让人可惜的,因为都花了很多时间做得那么好了,但是却讲得不好,让人感觉“差一点点”就成了,这种遗憾我觉得完全是可以避免的。

    所以,我想通过这篇文章来帮助大家解决以上这些问题,希望能让大家既输出好的产品方案,同时也把自己的方案讲解好,不留遗憾

    一、需求评审中常见的一些问题

    在讲产品需求方案中需要包含什么内容模块之前,我觉得可以先和大家分享一下需求评审中常见的一些问题,这些问题既是我过往工作中发生过的,也是我在私享课的评审会上记录的,都比较有典型代表性。大家可以在日常的工作中以一个“旁听者”的视角来审视一下,自己是否也遇到过这些问题,有哪些问题可能是自己意识到了但是没有改,有哪些问题是自己都没意识到的。

    1. 产品方案既是看的,也是讲的

    在实际的工作中,产品经理输出的产品方案一般会包含各种图,文档,原型,还有附件资料等,其中需求文档和产品原型应该是最常见,也是最花时间输出的。

    有一些产品的需求文档和原型都非常详实,甚至也会有一些产品经理认为需求文档的字数越多越好,感觉文档没写到几千几万字就总是会漏掉什么一样。

    而另一个极端则是文档和原型都没什么内容,很多时候可能就截个图表示一下意思,或者是直接在需求评审的会议上对着竞品的内容直接讲解,然后需求就是做成和竞品差不多的样子……

    无论是第一种,还是第二种,我都见过,而且我感觉都有很多的优化空间,基于我了解的大多数的公司的研发机制和流程规范,我都会建议:

    产品方案既是看的,也是讲的。也就是说,不要写得太多,因为有一些内容你是可以通过讲解去表达的;也不要写得太少,因为有些时候错过了当面评审的会议或者是时间一长,就容易遗忘一些细节内容。

    在下文中,我会重点提到一个产品方案中最好要包含哪些内容,如果不知道自己应该拿捏在什么度的朋友,请记得看完后续的内容。

    2. 结构化的表达是需要持续提升的能力

    在产品需求评审会议上,很多产品经理可能都会遇到一个尴尬的场景:评审到后面的时候大家几乎没认真听了,玩手机的玩手机,看电脑的看电脑,甚至有一些人都在打瞌睡了。

    抛开一些外界因素(团队制度规范、个人素质和专业性、团队凝聚力等),我发现评审效果不太好的很核心的一个原因是:

    产品经理在表达输出自己方案的时候,很容易陷入“不自知”的一种状态。例如自己一直持续地在讲,压根没留气口给其他旁听的人提问或者思考;自己讲解的时候各种切换页面、素材,整个脉络混乱,让人跟不上节奏;还有就是缺乏图例,表格,还有一些画面感的东西讲解,基本上就是对着文字在念,让听众很乏味。

    对于产品经理来说,自己可能花了很多时间去了解需求的背景,然后做了足够的调研、会议讨论、业务设计、最后整体方案设计等,这些东西对自己来说可能已经滚瓜烂熟了。但是对于听众来说,他们可能是第一次听说这个东西,而且也没有详细的背景铺垫,没有足够的业务知识积累,就会导致每次听需求评审的时候都被临时丢了一个新的东西,都需要花很多时间和精力去专注理解和吸收。

    如果此时产品经理在评审自己的方案的时候,没有一些结构化,脉络化,画面感的东西,那么必然就会导致听众没有听懂,也跟不上节奏,然后就演变成了走神、发呆、各玩各的东西了……

    产品经理的结构化表达能力是需要持续锻炼的,怎么把自己熟悉的一个事情向新人讲清楚,讲明白,还要把自己的观点和方案传达清楚,这不是一件容易的事情,需要我们提前准备足够的资料,也需要我们有适当的练习,持续地去迭代和完善。

    3. 文不如表,表不如图,图不如当面沟通

    我的每一节私享课,我基本上都会花很多时间去画图和做表,同时在需求文档和产品原型输出的时候,我也会一直强调一个理念:

    文不如表,表不如图,图不如当面沟通。

    过往我接触过很多产品经理都非常喜欢写文档,无论是简单的逻辑还复杂的逻辑,都是用文档的形式去阐述,然后用各种序号,表格,分段落等方式去阐述一些概念和方案。看似写了很多东西,但是读起来就非常的拗口,例如说我经常吐槽金蝶的说明文档,他们就有这样的问题,大段的文字说明,但是看完了并不知道他要表达什么意思。

    “所有权归属方即货主(组织结构勾选业务组织即为货主),存储地即仓库,仓库所属组织即“库存组织”(组织机构勾选业务组织,还得勾选“库存组织”职能)。从组织机构的设置来看,业务组织一定可以作为货主,但不一定是库存组织,但库存组织一定是业务组织。这点是与K/3WISE的最大区别,K/3WISE没有组织的概念,没有货主的概念,货主与库存组织是同一个。”

    这段话就是摘自金蝶的官方社区,读起来非常拗口,如果能画两个示意图,我觉得这个概念可能一下子就能让读者明白了。

    例如我需要表达一下OMS的入库单和出库单的一些操作会导致库存如何变化,那么我就可以采用表格的形式去说明,这些库存是怎么变化的。

    如果说通过这个表格,还是有一些研发和测试人员不太懂,那么我可以通过图的方式再跟他们说明一下,让他们结合一个表和一个图来进行理解。

    如果用表格和图片还是不能让大家理解其中的含义,那么这个时候就可以去当面沟通了,直接拉会议或者走到对方的面前,然后对着表格和图片去讲解,讲到大家懂了为止。

    4. “用户满意度”才是核心的指标,而不是“规范和标准”

    在产品经理群里时不时会看到一些提问,大概意思是就是“有没有需求文档模板可以参考学习的”,“有没有原型模板借鉴”,“有没有XXX模板或者规范可以抄作业的”。

    无论是需求文档,产品原型,还是需求评审,规范和标准只是用来提升效率,同时规避一些已知的风险,并不意味着一定不符合“规范和标准”就不能做出好产品,或者说就会被定义为是“野路子产品经理”。很多初中级的产品经理在这个问题上都会纠结一段时间,尤其是之前的公司团队规模比较小,然后也没有见过什么好的案例,就很容易有这种“自我怀疑”和“矫枉过正”的问题出现。

    我曾经也有过一段时间的纠结,也很担心自己被定义为“野路子产品经理”。但是作为一个过来人,回过头来看的话,我希望大家能够尽早地意识到:“用户满意度”才是核心的指标,而不是“规范和标准”。

    谁是你的用户呢?如果是需求评审,那么在座的研发、测试、UI、甚至是你的产品同事都是你的用户,你应该在评审了之后去向他们获取反馈,自己是评审讲解的好还是不好,是否有什么值得改进的。

    如果是需求文档或者原型,也是同样的道理,去问使用你“产品”的人,去倾听他们的反馈,而不是去“XX产品交流群”问广大群友们。

    二、要包含的核心要素

    前面分析了需求评审中常见的一些问题,实际上除了这些问题之外还有很多具有代表性的问题,但是碍于篇幅和时间的关系我就不展开去讲了,我直接分享一下我认为的一个好的产品方案(需求文档或者原型)应该要包含哪些核心要素。

    这里我是以B端产品的日常工作为参考的,所以有一些内容不太适用于C端的产品或者其他领域的产品;除此之外,文中提到的是“核心要素”而不是“大而全的模板”,意味着这些是我认为特别重要的内容模块,但是并不代表说我没提到的就不重要,如果你需要“大而全的模板”,那么市面上有很多类似的文章可以参考学习。

    1. 业务流程图

    B端产品往往会涉及到多个组织,多个部门,多个角色(用户),多种场景和业务,所以当接受到了某个需求之后,肯定是要先对业务进行梳理和分析,然后要输出对应的业务流程图。在讲解产品方案的时候,先铺垫需求的背景和价值,然后接下来大概就要讲解相关的业务流程图了,一般来说如果涉及到多部门、多系统等场景,建议使用泳道图来表达。

    业务流程图重点是表达清楚相关的业务逻辑即可,其中有一些细节或者描述可能不太符合流程图的规范也没关系,重点是传达清楚意思即可。

    2. 系统流程图

    上面提到了“业务流程图”,那么什么是“系统流程图”呢?其实系统流程图就是指多系统之间的流程交互,通俗意义上可以理解为在多个系统之间的单据/模块的流程交互。

    系统流程图可以简单地用单据来表示之间的流转关系,也可以在单据的基础上增加单据的状态及其相关的详细说明,让这个图更加丰富,能承载和表达更多的信息。

    业务流程图和系统流程图在一些不太复杂的业务场景下,基本上可以合并为一个,我一般都称之为“业务流程图”多一些。

    如果是更复杂一些的业务场景,需要业务设计和应用设计解耦的时候,那么业务流程图就要和系统流程图拆分开。业务流程图只是表达业务之间的关系,此时还不知道有什么系统,有什么模块,所以就梳理的时候就不要带入“技术思维”。完成了业务流程图的设计之后,接下来就是应用设计的内容,那么就梳理的就是系统流程图了,而系统流程图就需要用到“技术思维”,需要考虑有什么系统,有什么模块,有什么单据,甚至是有什么具体的单据状态等,因为定义清楚了这些才知道具体的系统功能模块有哪些,产品方案是怎么样的……

    3. ER图(实体关系图)

    在完成了系统流程图的梳理之后,作为产品经理,也就是作为方案的设计者,我们知道该需求的满足会涉及到多少系统,多少模块,多少页面等,但是为了让研发和测试更好地了解其中的逻辑关系,我们需要输出实体关系图,也就是ER图,来帮助他们完成相关的业务建模和数据库表设计。

    实体关系图也被称为 ERD、ER 图、实体联系模型、实体联系模式图或 ER 模型,是一种用于数据库设计的结构图。一幅 ERD 包含不同的符号和连接符,用于显示两个重要的信息:系统范围内的主要实体以及这些实体之间的相互关系。当我们谈论 ERD 中的实体时,我们经常提到诸如人员/角色(例如学生),有形商业对象(例如产品),无形商业对象(例如日志)等业务对象。“关系”则是这些实体在系统内的相互关联。

    ER图听起来好像很专业,是一个很技术性质的名词,但是理解了其含义之后其实并没有想象中的那么复杂,也没有必要恐惧它而不去使用。产品经理输出ER图的时候,只需要表达出2个核心点即可:

    1. 实体有哪些?
    2. 它们的关系是什么?

    我们只需要通过输出简单的实体关系图就能让开发明白不同单据之间的关系是什么,是怎么流转的,如下图所示。

    采购业务中的实体关系图

    上面的实体关系图虽然简单,但是清晰易懂,不需要过多的文字描述就可以让阅读者Get以下这些信息:

    1. 采购流程中一共有4个核心的单据(有一些内容省略了,实际可能会更多);
    2. 可以多个采购计划单汇总生成一个采购单;
    3. 一个采购单可以生成对个收货单;
    4. 一个收货单可以生成多个上架单,例如多批次收货或者是正次品上架单区分;

    4. 状态机说明(状态流转图)

    完成了ER图的输出之后,我们会发现一条业务会串联多个单据,例如采购计划单,采购单,收货单,上架单等,这些单据一般来说都是“执行类+结果类”的综合单据,也就是意味着这些单据一般来说会有多个状态。

    例如说采购计划单可能会有以下几个状态:

    1. 待审批
    2. 待采购
    3. 已完成
    4. 已驳回
    5. 已作废

    而采购单可能又有另外的状态,例如:

    1. 待提交
    2. 待审批
    3. 待下单
    4. 待到货
    5. 已完成
    6. 已作废

    产品的方案中必然要对这些状态进行说明和定义,所以就需要输出对应的状态机说明,我一般称之为“状态流转图”,具体如下。

    海外仓OMS的入库单状态流转图

    如果是涉及到一些单据有比较紧密的联系时,可以采用“多单据状态流转图”的方式,也就是结合版,如下所示。

    盘点单和盘点任务单的状态流转图

    5. 不同状态下的操作说明(列表展示)

    完成了状态流转图的梳理之后,我们知道了某个单据有多少状态,状态的流转条件是什么,甚至也可以知道多单据之间状态的流转关系,接下来要做的就是整理不同状态的对应的操作说明,一般来说会用列表的方式来展示。

    海运头程计划单的状态说明

    海运头程计划单的状态说明

    6. 核心业务逻辑说明(数据推演,逻辑计算,条件判断)

    前面的几个核心要素基本上都是图或者表,而且是按从大到小的结构化思路去输出和讲解的,但是一个具体的产品方案中肯定是少不了核心的业务逻辑说明,还有一些相关的条件判断等。关于这一块的内容每个产品经理都有自己的输出和表达风格,不用刻意去追求所谓的“标准和规范”,只需要能表达清楚,同时效率也不会受到影响即可。

    例如我就很喜欢用画图、画表的形式来表达其中的业务逻辑,然后将这一块的内容贴在文档或者原型即可。

    操作费的业务公式分析

    WMS不同维度的库存查询逻辑说明

    上面也提到过一个口诀“文不如表,表不如图,图不如当面沟通”,所以切记不要长篇大论地去用文字表达相关的逻辑,看起来动辄几万字的PRD实在是让人看的头痛,而且自己输出的效率也不会很高。

    上面分别讲解了6个我个人认为B端产品方案中很核心的要素,几乎可以理解为是“必做项”,但是实际的产品工作中需求的多元化的,解决方案也是多元化的,所以可能最后要输出的内容远不止于这6个要素,可能会更多,也可能会更少。

    读者朋友们需要自己去甄别,以“用户满意度”为核心指标,去审视自己输出的产品方案还有哪些遗漏的点,还有哪些可以改进的点,而不是盲目地抄模板。

    三、怎么讲解好自己的需求?

    最前面开篇的时候讲到,在组织私享课的需求评审的时候,我发现有一些学员朋友可能方案很详细,但是却讲解的不好,其中最大的问题就是“缺少结构化”,也可以理解为“缺少清晰的脉络”。

    其实上面提到的6个核心要素,既是我们输出产品需求方案的顺序,也是我们讲解产品需求方案的顺序,它遵循的是“从大到小,从宏观到微观”的逻辑。

    在讲解产品需求方案的时候,我们会先铺垫业务背景,告诉在座的各位为什么要做这个需求,它解决了谁的问题,带来了什么价值,谁会使用它,会涉及到哪些部门,哪些业务流程等。这些既是产品的需求背景,也是业务流程图的一部分,通过讲解业务流程图让大家先从宏观层面了解该需求的背景。

    对于大多数的产研团队来说,他们不太关注这些“上价值”的东西,而是更加关注自己的“体感”,也就是:我是什么岗位?有哪些是我的活?我做的模块要怎么搞?

    所以第二个部分我们就可以开始讲系统流程图了,告诉大家涉及到了哪些系统,哪些模块,哪些功能,和谁有关系,谁需要干活等。系统流程图的讲解可以结合业务流程图来讲,也可以结合ER图来讲,但是我个人会建议还是先铺垫业务的部分,然后再去讲解系统的部分会更好。

    讲完了前面的三块内容之后,接下来的状态流转图,状态说明列表,核心业务逻辑等就可以按具体的业务线和具体的模块划分去讲解了,只需要遵循从大到小的逻辑即可。

    例如WMS的入库业务,前面铺垫完了业务背景,业务流程,系统流程,ER图等之后,接下来就可以分别去讲解预到货通知单,质检单,上架单的状态流转图,各个状态的说明,各个单据下的核心业务逻辑等。如果是一些比较复杂的需求,产品方案的内容也比较多的情况,最后还是需要把各个模块的内容再串一下,做到首尾呼应,让大家能更好地理解和消化这一大块的内容。


让你的品牌快速脱颖而出,抢占市场份额,提升销量
免费获取方案及报价
*我们会尽快和您联系,请保持手机畅通