一、前言众所周知，PC 和移动端是当前人机交互的主要互动设备。经过十多年的发展，两者已经产生了成熟的交互范式，前者主要基于键鼠交互，后者以触屏交互为主。而为了适应不同设备的交互方式差异，提供更完善的用户体验，即便是相同的功能/组件也会衍生出细节上的差异。

一、前言 众所周知，PC 和移动端是当前人机交互的主要互动设备。经过十多年的发展，两者已经产生了成熟的交互范式，前者主要基于键鼠交互，后者以触屏交互为主。而为了适应不同设备的交互方式差异，提供更完善的用户体验，即便是相同的功能/组件也会衍生出细节上的差异。

本期将探讨这些隐藏在细微处的交互差异，从而更深入了解用户体验中设备/行为/界面的关系。

更多差异分析：

中西方电商网站设计有哪些差异？我总结了这3个！ 作为一名交互设计师，我经历过国内零售电商产品，后又从进口转战出口。

阅读文章 >

二、五个小案例 1. 输入框的清除按钮

清除按钮（clear button）是用来清除输入框内容的按钮。当输入框中存在内容时，出现在输入框的末端，点击后可清空已输入内容。pc 通过键鼠操作可以快速删除，但基于触屏交互的移动端删除操作较为麻烦。因此清除按钮在移动端中更常见，特别是在登录注册、搜索框等页面。清除按钮可以快速清空内容，提高操作效率，降低输入错误时的负面影响。

虽然在 web 界面中很少使用上述的清除按钮，但“快速清除内容”的需求依然存在。主要出现在多项内容同时清空的场景，例如 b 端筛选中常用的“重置/清除”功能，以及多选框中快速清空选项。

2. Hover 态

光标 hover（悬停）是 PC 端的常用的轻量交互操作，当光标悬停时界面元素会产生状态改变。Hover 可以为用户显示隐藏的信息（展示 tooltips/二级菜单）；或指示按钮状态，提示用户此处可点击触发事件。

但是移动端的光标（手指）不会长期悬停在屏幕上，所以不会有 hover 态。而且指尖轻触即表示“点击”，因此按钮将直接从“normal”变为“pressed”状态。相比于 pc 少了“hover”作为中间状态，因此在界面设计上移动端按钮需要明确的引导性，以传递“此处可点击”的信息。

对于 hover 的二级菜单，移动端需要多点击一步展开，或者 tab 切换进行快速跳转。

3. 按钮 VS 手势

复杂的手势输入是移动端的优势，但 PC 端需要更多按钮来承载功能。下拉刷新是移动端 feed 流常用的操作，将页面刷新和下滑手势丝滑的结合起来。在 PC 中如要实现内容区域的便捷刷新，则需要添加一个[刷新]按钮。在 banner 轮播中，pc 通常会提供准确的“上/下一页”按钮，而移动端中普遍通过滑动查看上/下一张。类似的案例还有图片放大缩小、视频音量调节。

究其原因，鼠标操作一般都有精确的操作/点击对象，因此通过按钮触发事件更为普遍。手势操作可以基于整体对象进行滑动/拖拽，这是符合用户手势操作心智的交互方式。同时手势操作的准确度低，屏幕空间有限，用手势代替按钮的性价比很高。

4. 长按与右键

右键呼出更多菜单是 PC 端的常用操作，移动端中的对应操作则由单击长按完成。而对于针对对象的编辑菜单，在 pc 端需要选中文本对象后需要点击右键，而移动端中选中文本后会立刻弹出菜单。这由于移动端中没有像"ctrl+c""ctrl+v"一样的快捷操作，快速弹出菜单减少用户操作步骤；而且选中后若再次叠加一个长按行为，很容易误判成单击从而取消选中。

5. 弹窗

PC 端信息反馈的样式更加多样，包括 tooltip、toast、message、drawer 等。相比移动端有更多非模态弹窗，应用方式更灵活，用户使用过程流畅。由于屏幕面积小，移动端弹窗面积占比更大，对用户而言打断感受更强，在设计过程中需要谨慎。

同时，移动端和 pc 的弹窗按钮位置也有所区别。目前移动端中强引导按钮普遍在右侧，而 win 系统中强引导按钮在左侧（MacOS 则在右侧）。

三、小结 交互方式差异深刻影响了 PC 和移动端界面形态，这些 设计细节 隐藏在日常交互行为中。虽然使用已有组件库时很容易忽略，在多端系统设计过程中依然需要注意这些差异性细节。

移动端

缺少 hover 输入相对不便 点击准确性低 手势操作便捷 长摁呼出菜单 PC 端

hover 能实现轻量级的交互 输入方式高效快捷 光标点击准确 右键呼出菜单 即使是相同的产品功能也会产生差异化的交互变体，这些变化可能是基于设备限制、程序限制或人机交互行为。在多端产品时，如果忽略了这些交互细节，除了影响产品可用性，还可能违背用户的使用习惯，导致产品体验细节的缺位。

整体来看，交互界面不仅是功能的可视化载体，他还缝合了设备应用和用户行为，是产品使用流程的中枢。往前，界面/ 交互设计 中应该兼容硬件能力，并传递准确的用户输入数据；往后，设计应该向用户传递设备的能供性，将设备能力转换成可感知的界面上的能供性，从而为用户提供完整且细致的产品体验流程。

欢迎关注作者微信公众号：「ASAK设计」

色彩作为设计师的基本功，如何平衡产品的色彩搭配是每位设计师的必修课。如今市面上有种类繁多的配色工具可以一键生成配色方案，也有成套色卡作为色板参考，但是当面对高度自由且需求多变的设计状况时，如果缺少对色彩规范的系统理解，仅跟随设计师自身喜好进行配色，往往会导致产品杂乱不堪，没有章法。本文结合我自身的工作和学习经验，...

色彩作为设计师的基本功，如何平衡产品的 色彩搭配 是每位设计师的必修课。如今市面上有种类繁多的配色工具可以一键生成配色方案，也有成套色卡作为色板参考，但是当面对高度自由且需求多变的设计状况时，如果缺少对色彩规范的系统理解，仅跟随设计师自身喜好进行配色，往往会导致产品杂乱不堪，没有章法。

本文结合我自身的工作和学习经验，从理论基础到 色彩系统 搭建带大家由浅入深学习下 B 端产品中的色彩体系。

更多色彩建立干货：

如何4步建立系统级色彩体系？来看京东高手的方法！ 色彩体系的推导其实有很多文章有详细的介绍了，这一篇主要粗浅的梳理了整体流程经验，补充一下技术方法与色彩模型的差异。

阅读文章 >

一、色彩理论基础 色彩理论基础是搭建色彩系统的基石，接下来我将从色彩本质开始，为大家介绍设计师需要掌握的几种常见色彩模型。

1. 色彩的本质

在小学物理课上我们都学过，色彩是由物体自身发光或反射出的光映射在人眼后所感知的，而光的本质是一种电磁波。自然界中存在不同频率的电磁波，短频的如 AM 收音机、电视信号，长频的如 X 光、伽马射线，我们所熟知的可见光则是电磁波中人眼所能接受波长约为 380~780nm，也就是从紫色到红色范围的这段色彩。

资料来源：网络

反射到人眼中的光，除了光本身的颜色，还会收到物质特性的影响。白色物体在被黄光照射时，反射到人眼中看起来就是黄色的，但蓝色物体在被黄光照射时会呈现黑色，原理是黄色作为蓝色的反色调，黄光本身不包含任何蓝光，因而被蓝色物体完全吸收时并无法反射出其他颜色，导致人眼看起来就是黑色。

资料来源：巫师后期-什么是颜色

此外，我们最终感受到的颜色除了光和物质特性外，还会收到周围环境、时间和历史经验的影响。下面这张网络图很多人都见过，同一张图片在不同人眼中会识别为不同的颜色。

图片来源：巫师后期-什么是颜色

综上所述，色彩的本质是一种复合的物理现象，是人眼感知物体表面反射光的结果。

2. 色温：描述发光体的冷暖关系

通过理解色彩本质可以发现，单纯凭借人的色彩感知来描述颜色具有很强的主观性，要如何保证在实际生产中每个人表述的是同一种颜色呢？这就需要找到可以科学且规范描述颜色的方法，在日常生活中我们接触比较多的是色温法。

色温法的原理是：物体把热量以光的方式辐射出去，当物体处于不同温度时会发出不同颜色的光：温度比较低时呈现黄色，温度高时呈现蓝色或白色。

这里标定的色温和大众认知中的冷暖感受正好相反，通常我们会认为红黄色调偏暖，蓝白色调偏冷，但实际上红色的色温最低，然后逐步增加的是橙色、黄色、白色和蓝色，蓝色是最高的色温。因此色温的高低和给人的色调感受是正好相反的。

资料来源：网络

熟悉摄影的同学都知道，当我们在清晨或黄昏的户外拍摄时照片时常会发黄，这是因为该时间段色温较低，光线呈现为橙黄色。而相机的白平衡模式可以缓解环境光的影响。其原理就是通过切换预设场景的色温值抵消当前实景的色温影响，使拍摄出的照片呈现出白色基准更真实。

资料来源：网络

色温法是建立在物体可以自身发光的基础上，而在自然界的发光体中，红、黄、蓝色会更为常见，但是绿色和洋红色很少。所以单靠色温法描述颜色不够准确，它更适合用来反映环境冷暖和色彩的倾向关系。

资料来源：网络

3. 常见的色彩模型

为了更准确的描述颜色，工程师们引入了色彩模型的概念：将色彩拆分成不同属性并进行量化，通过计算机语言更科学准确的表述颜色，而不同维度的拆分方法便是色彩模型。随着科技发展和生产制造的需要，色彩模型迭代出了多个版本类型，接下来我将挨个介绍常见模型的差异和功能特点：

① HSB 和 HSL 模型

HSB 模型也称 HSV 模型，该模型是建立在人眼识别色彩的基础上，符合人类日常的生活经验，相较其他模型最为直观易理解。该模型主要使应用在图像处理、计算机图形学、色彩管理等领域，用于描述和操作颜色。其属性包括：

H 色相：Hue，以角度（0°-360°）表示 S 饱和度：Saturation，以百分比值（0%-100%）表示 B/V 亮度：Brightness 或 Value，以百分比值（0%-100%）表示 HSL 是和 HSB 原理相同的模型，在工作中很容易会被混淆使用，其区别在于：HSB 中 B 指的是「亮度 Brightness」，而 HSL 中 L 指的是「明度 Lightness」。为方便大家理解，对于这两种模型的详细区别，我整理了出了以下表格：

资料来源：网络

HSB 和 HSL 模型在使用场景上都是用于软件开发应用，在实际工作中我们接触 HSB 模式的场景会更多，但到底哪种模型更适合人类用户使用的界面设计尚未有定论。对于设计师自身而言需要注意的是，在和开发同步设计资料时确保使用的是同一种模型，避免产生颜色误差。

虽然 HSL 模型有诸多好处（HSB、HSL 属于同类模型，后文统一用 HSL 概括），但其缺陷也很明显：HSL 模型无法用于工业制造，因为在自然界中基本很难找到某一属性纯度可以达到标准的物体，也难以控制单一属性变量来改变物体颜色。为了解决以上限制，用于屏幕显示的 RGB 模型和彩色印刷的 CMYK 模型应运而生。

② RGB 模型

RGB 模型是依据颜色发光的原理所搭建的，也被称为光的三原色，工业上用于通过红、绿、蓝三色发光单元产生颜色的电子屏幕。

R 红：Red，以数值（0-255）表示 G 绿：Green，以数值（0-255）表示 B 蓝：Blue，以数值（0-255）表示 通常情况下，RGB 各有 256 级亮度，用数字表示为从 0、1、2...直到 255，虽然数值最高是 255，但 0 也是数值之一，因此共 256 级。将三种颜色叠加并控制其颜色强度，256 级的 RGB 色彩总共能组合出上千万种色彩，而这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。

资料来源：网络

RGB 模型是我们日常工作接触最频繁的模型，但是不知道你是否产生过疑惑：为什么偏偏选择「RGB 红绿蓝」作为光的三原色，而不用其他色彩呢？

首先我们要明确，能作为三原色的基础是必须保证其中任意一色不能通过其他两种颜色混合而成，且这三种颜色混合后能形成足够多的颜色种类。而 RGB 能作为三原色的色彩主要和人眼的生理结构有关：

资料来源：网络

前面我们提到，光的本质是一种电磁波。而视锥细胞共分为三种，分别对长、中、短三种电磁波长最为敏感，而这三种波长的光对应的正是红、绿、蓝三种颜色。当这三种感光细胞收到刺激后，会自动对将感受到的光色进行组合从而形成多种多样的色彩。这也是为什么「RGB 红绿蓝」被作为三原色的客观原因。

资料来源：网络

关于 HEX 色值

这里还有个知识点就是 HEX 色值，听到它大家都不会陌生，在很多拾色器中我们都见到过，工作中也经常将其提供给开发同学作为颜色标识。

虽然看起来结构不同，但 HEX 也是采用 RGB 模型的原理来定义颜色，只是语言上用的是十六进制代码：字节值范围从 0 到 FF，颜色的最低强度为 00，而最高强度为 FF。实际转换时，每位数字范围是 0～15（分为 0～9 和 A～F，其中 A～F 表示 10～15），这样每位数字都能代表 16 个数，而每 2 位数字相乘即可代表 256 级，正好对应一个颜色通道。

相较于长段的 RGB 表示法，HEX 色值表示法只需六位字符，更加紧凑轻量，所以更适合开发人员使用。

十六进制到 RGB 转换器工具： https://purecalculators.com/zh-CN/hex-to-rgb-converter

③ CMYK 模型

以上 RGB 模型是针对可自身发光的物体，CMYK 模型则是针对依靠反光的物体。CMYK 是色料的三原色，也叫印刷的三原色，使用最多的场景是媒介印刷，其原理是基于油墨的光吸收/反射特性，眼睛看到颜色实际上是物体吸收白光中特定频率的光而反射其余光得来。

R 青：Cyan，以百分比值（0%-100%）表示 M 品红：Magenta，以百分比值（0%-100%）表示 Y 黄：Yellow，以百分比值（0%-100%）表示 B 黑：Black，以百分比值（0%-100%）表示

资料来源：网络

通过以上现象我们会发现，将不同颜色的物质不断揉合最终会得到黑色物质，而这正好满足了我们工业印刷品上白纸黑字的需求：选择「红、绿、蓝」的补色「青、品红、黄」，通过调整这三种颜色油墨的比例，就能得到反射不同颜色的油墨。理论来说同比例的这三色油墨可以直接混合出「黑色」，但是现实中由于生产技术的限制，油墨纯度往往不尽人意，混合得到的黑色不够浓郁，只能依靠提纯的黑色加以混合，这种做法同时也可以节省油墨消耗。

资料来源：网络

在显示器等发光体下，RGB 模式的数值越大则光线越强，最终呈现的亮度也会最大。但是在印刷品等反光体下，其纸张本身的白色即是可以呈现的最高亮度， 所以 CMYK 模式的数值越大则油墨越多，最终呈现的亮度会越低。也因此：

RGB 被称作加色模型，即多色叠加最终将得到白色 CMYK 被称作减色模型，即多色叠加最终将得到黑色。

④ Lab 模型

以上三种是最常见的通用模型，还有些色彩模型用于更特定的场景，Lab 模型便是基于生理特征的一种模型。RGB 和 CMYK 受限于载体，同样的颜色可能会因为材质差异影响呈现不同的颜色，Lab 模型则是弥补其不足，摆脱原材料载体对模型的影响。

1）L 明度：Lightness，以数值（0-100）表示

2）a b 是两个颜色通道：

a 通道：从绿色到红色，以数值（-128 至 127）表示 b 通道：从黄色到蓝色，以数值（-128 至 127）表示

资料来源：网络

Lab 模型无法用于实际生产制造，但是其色彩空间比计算机显示器甚至比人类视觉的色域都要大，在转换成其他模型时色彩不会丢失或被替换，所以通常用于图像色彩空间转换、色彩校正、色彩相似度比较等场景。在进行具体的颜色转换时需要复杂的计算公式，作为设计师只需了解其模型用途即可。

关于色彩空间

上面我们提到一个词叫色彩空间，它是图像处理和计算机图形学领域中非常重要的概念，在图像处理、图形学、图像质量评价和广告设计等众多领域都有涉及。很多人会将它与色彩模型弄混，实际上两者是不同的概念：

色彩模型：一种数学模型，用于表示色彩的三维数学空间，通常会用 3 个或者 4 个数值来表示。 色彩空间：一种色彩表示方法，它将色彩模型中的颜色映射到二维或三维空间，以便于显示和比较。 总而言之，色彩模型是用于表示色彩的三维数学模型，色彩空间是对色彩模型的二维或三维映射，方便于显示和比较色彩。色彩空间通常与色彩模型一起使用，并使用特定的数学表示法来定义色彩空间中的颜色。

资料来源：维基百科

⑤ HCL 模型

HCL 模型最早由国际照明协会 CIE 提出，又被称作 CIELch(uv)。该模型是为了解决色彩对比度问题而诞生的模型，对颜色识别有障碍的视障人士更友好。

H 色相：Hue，以角度（0°-360°）表示 C 色度：Chroma，可以理解为颜色的浓度，浓度值越大，颜色就越鲜明。以数值（0-150）表示 L 照度：Luminance，用于量化人眼对光的亮度的感知。以数值（0-100）表示。 注意这里 HCL 模型的「Luminance」与前文 HSL 模型中的「Lightness」是不同的，我们先来看一个例子，分别通过 HSL 和 HCL 推导的色卡在对比度上有何差异？

很明显，虽然都是控制变量但左图在颜色对比度层次不齐。这是因为 HSL 模型是基于电子元件的显示亮度进行计算的，但并非人眼感知光的实际感受。所以在配色时如果采用 HSL 模型，即使「Lightness 明度」值相同，色彩亮度在人眼看来依旧不匹配，需要设计师基于主观意愿进行调整，不仅耗费时间和精力，配色流程不够科学标准化。

HCL 模型则很好的解决了以上问题，其初衷就是基于人眼对亮度对感知而创造的：只要「Luminance 照度」保持一致，不同色相的颜色亮度感受始终会保持均匀，这种情景下取色流程会更加简单高效，应用到产品上对视障人士也更加友好。

资料来源：TDesign

需要注意的是，HCL 模型的色彩空间和其他模型不一定能完全匹配，所以直接转换可能存在颜色丢失或被替换的情况，这里为大家提供了几款以 HCL 色彩模型为基础的色彩转换工具：

HCL 转 RGB HEX： http://hclwizard.org:3000/hclcolorpicker/ MD 主题搭建工具 HCT Color Picker： https://m3.material.io/theme-builder#/custom Colorpicker for data： http://tristen.ca/hcl-picker/#/hlc/12/1.03/182009/A9FC8E Figma 插件： https://www.figma.com/community/plugin 亮度、明度和照度的区别

介于中英文语义的差异，Brightness、Lightness、Luminance 都可以翻译为“亮度”，然而在色彩模型中每个词却有更深层次的解释，为方便大家区分理解区分，将三者整理在一起进行对比：

Brightness 亮度：用于 HSB 模型，客观测量颜色的显示亮度。颜色变化从黑到标准色相，满值为颜色标准色相。 Lightness 明度：用于 HSL 模型，和 HSB 一样客观测量颜色的显示亮度，与人亮度感知没有直接关系。颜色变化从黑到标准色相再到白，半值为颜色标准色相，满值为白色。 Luminance 照度：用于 HCL 模型，主观上衡量发光的强弱和颜色对比度。 可以发现前 2 个都是客观上对颜色亮度的衡量，而「Luminance 照度」才是真正意义上主观感受颜色的标准。

二、B 端产品的色彩系统 近年来，随着企业级产品功能体量不断丰富，产品设计体系逐渐趋向于规范化，如何搭建一套标准易用的色彩系统对于提升团队工作效率和产品体验一致性至关重要。通过系统化的颜色管理方法，可以帮助企业统一品牌颜色，提高品牌识别度和统一性。接下来，我将为大家详细讲解 B 端产品中色彩系统的构成和搭建方法：

1. 色彩系统的概念

简单来说，色彩系统是指从整个设计系统里抽离出的分支，为方便管理而针对色彩语言搭建的管理体系。

完整的设计系统由设计语言和模式库构成，在设计原则的指引下，通过统一的协作语言和科学的管理方法组织起来，创建体验一致的用户界面。完整的 设计系统 可以拆解成三部分：

设计原则：设计要遵循的中心思想，所有的问题和形式都向原则靠拢，减少不确定性 设计语言：包括价值观、品牌、符号、色彩、文字等品自主表达的媒介 模式库：即组件库，通过对控件进行归纳整理形成的可快速复用工具库

色彩系统也是如此，并不仅仅是简单的色彩组件库，结合设计系统的内容，我们可以将设计原则和设计语言归入色彩规范中，而模式组件库即产品色板（调色板）。这里可以将色彩系统定义为：由色彩规范和产品色板组成，可以科学有效管理色彩的应用程序。

2. 什么是好的色彩系统

理解了色彩系统的定义，如何保证搭建的色彩系统科学有效？好的色彩系统应遵循以下三个原则：

有意义：能够体现产品个性，凸显品牌基因，满足用户对产品的认知感受，不同色彩的搭配使用能满足用户的心理预期，提升使用体验。 易上手：色彩系统不仅仅是给设计师自身使用的，在整个产品周期中，从上游的品牌战略到下游的视觉运营，都要使用到产品配色，优秀的色彩系统应方便团队成员上手，即使没有专业背景也可以很快的理解和使用。 无障碍：不同颜色间对比度要匹配 WCAG 的对比度标准，保证内容元素的可识别度。 3. 色彩识别无障碍

资料来源：网络

在色彩系统搭建之初就考虑色彩无障碍识别问题，可以普适更多场景，有效提升产品信息识别度和易用性。WCAG（Web Content Accessibility Guidelines ）内容无障碍指南作为行业广泛使用的无障碍设计标准，是检验文字颜色可读性的有效依据，只要文本颜色与背景色之间的对比度满足以上标准，就能确保被清晰识别。WCAG 2.0 中将颜色对比等级分为 3 种，等级越高意味着颜色的对比度越高，呈现出来的信息可读性越好：

A 级：对比度 3 : 1，是普通观察者可接受的最低对比； AA 级：对比度 4.5 : 1，是普通视力损失的人可接受的最低对比度； AAA 级：对比度 7 : 1，是严重视力损失的人可接受的最低对比度。

这里为大家推荐一款可视化对比度检测工具 Color Review：通过将 3、4.5、7 对比度临界点的颜色通过曲线标识，可清晰直观的看到当前色值的对比度在拾色器中的位置，方便进行调整。

Color Review 对比度可视化检测工具： https://color.review/

资料来源：Color Review

4. 产品色板的组成

依据色彩的类型和功能不同，产品级色板的内容可分为主色、中性色、辅助色和功能色，其中每种颜色都应有相应的色阶拓展供配色使用。

① 主色

产品主色一般是页面中使用最多的颜色，通常被使用在关键行动点、操作状态、重要信息提示、图形化等场合。

很多设计师会直接将主色和品牌色划等号，即直接将品牌色作为产品主色使用，我们日常接触的 C 端产品大多也是直接使用品牌色作为主色使用，但是 B 端产品主色也可以直接使用品牌色吗？这里需要先理解 B 端和 C 端产品的设计差异。

C 端产品设计侧重流量思维，追求尽可能渗透用户的碎片化生活来吸引用户。通过将品牌色作为主色使用可以凸显品牌特征，强化用户心理认知，以此来提高用户粘性和活跃度。

而 B 端设计侧重的是效率思维，强调提升用户的操作效率帮助其达到使用目标。所以 B 端产品主色优先考虑色彩的识别度和视觉感受，尽可能保持用户在使用产品时沉浸感，即使在长时间浏览时也不会感到不适。因此究其根本，B 端产品主色不能对用户的使用操作造成干扰，必要时需要在原有品牌视觉的基础上提取品牌色进行修正，使其更符合用户的使用场景。当然能兼具品牌价值传递和操作体验是产品的最优方案。

② 中性色

中性色又称无彩色，包括黑色、白色及调和后不同深浅的灰色，常被使用在文字、图标、背景、线框等场景。中性色本身不具备颜色属性，没有色相冷暖的区分，因此可以更好的衬托其他有彩色，也能拉开信息的层次差距，对于创造结构、表达边界和建立信息层次十分重要。

一般浅灰色应用在分割线、表单描边、背景色等场景，划分页面布局且避免对主要内容造成干扰。 深灰色主要应用在正文、标题、图标等元素上，通过明度变化突出内容，方便用户浏览。 有些产品会在中性色中加入适度色彩倾向，在保持中性色本身信息区分度的前提下，增加品牌色基因来强化品牌氛围。

资料来源：TDesign

在搭建中性色色板时，对于配置文字颜色市面上有 2 种解决方案：一种是直接控制灰度拓展色阶，另一种是用透明度变化建立色阶，如使用#000 并降低其透明度。

市面上采用透明度方案的并不多，考虑到其根本目的是为了保证文字信息内容可以被正确展示，在此针对两种方案的使用场景提供更清晰的使用建议：

色值变化：内容可以完整的保留色彩信息，不会造成色彩丢失，在组件搭建上维护成本更低。适合大多数场景下使用。 透明度变化：在复杂图片或纹理的背景上依旧可以很好的展示内容信息，且可以更好的适配亮暗模式，更具包容性，但在一定程度上会增加浏览器的渲染负担。适合使用在暗亮模式需求或有复杂背景纹理的页面中。 ③ 辅助色

辅助色是在主色基础上衍生出的其他颜色，主要有 2 个作用：一方面可以平衡色彩系统，缓解用户在使用产品过程中频繁使用单色造成的视觉疲劳，另一方面可以丰富色彩系统的可用性，通过和主色对比增加内容区分度。

资料来源：网络

根据研究来看，人类可命名的有彩色数量仅为 8～9 种，更多的颜色分类会增加使用时的筛选负担，同时色彩区分度也会降低。故通常建议在人类可命名的 8 种颜色中选择 6～8 种作为辅助色即可，如果有更多用色场景需求可以考虑加入拓展的颜色色阶进行交替使用。

④ 功能色

B 端产品中会利用色彩的心理暗示来对用户进行状态反馈，以降低用户认知成本，这部分辅助色通常被独立出来称为功能色：遵循用户心智和行业内默认的色彩语义，选择特定颜色向用户传达成功、失败、告警、链接等状态信息。如用红色传达通知、提醒、错误等，绿色传达确认、成功、正确等，橙色传达警告等。

5. 色彩系统搭建

以上便是色彩系统的主要内容，接下来将详细介绍如何搭建适合自身业务的色彩系统，主要分为以下五步：

第一步：色相环取色。由主色推导出既符合品牌调性又具备区别度的辅助色。

第二步：颜色校正。对选择的颜色进行色彩校正，使其保持感官同频。

第三步：色阶延展。针对选择的颜色搭建层级均匀、层级清晰的色阶梯度。

第四步：色彩语义化。对搭建好的色板进行语义命名，方便团队调用。

第五步：团队推进。将资源同步至团队中使用，并优化迭代。

① 第一步：色相环取色

色相环取色是在主色基础上通过使用色相环来提取辅助色，具体的操作方法为：以主色的「色相 Hue」为起始点，在色相环上以 15°为梯度进行加减，得到 24 色的色板。再根据自身产品场景，选择其中 6～8 种的颜色作为辅助色。

② 第二步：颜色校正

在色相环取色过程中，虽然保持其他变量，只对色相进行了变换，但由于颜色本身在视觉感受上存在亮度差异，故需要进行颜色校正，一方面保证整个色板保持视觉上的感官同频，另一方面保证视障群体的识别度。

③ 第三步：色阶延展

选择合适数量的辅助色后，需要对单个颜色进行色阶拓展以提供更多的色彩搭配空间，色阶拓展是指将同色相下的颜色由浅到深划分为多个色阶梯度。通常色阶拓展采用 8～12 级进行划分，如果层级过少可能会无法满足日常的取色需求，而层级过多又会导致色彩区分度下降，在取色时也会增加选色成本。

市面上有很多种色阶延展的方法，这里为大家整理了几种常见的方法：透明叠色、直线等分、工具生成，各位同学可以基于团队情况自行选用：

透明叠色法

顾名思义，透明叠色法是在原来颜色的基础上叠加不同透明梯度的白色/黑色遮罩，由此得到不同色阶梯度的衍生色，再通过取色器吸取叠加后的色值。该方法实现成本低，无需其他工具配合即可实现，但是操作相对繁琐，当叠加层级较多时可能会导致颜色偏差，有时需要基于实际情况再做微调。

直线等分法

直线等分法是通过在拾色器中建立坐标系，之后采用直线等分打点的方法取色。其中拾色器的坐标系是基于当前选择的色彩模型而定，如 HSB 模型横/纵坐标为饱和度/亮度，HSL 模型则是饱和度/明度。直线等分法的操作较为简单，可以通过公式算法自动取色，但设计师独立推导的计算成本较高，通常需配合公式计算。

具体的操作步骤如下：

1）在拾色器上标明要延展的颜色，将色值点与左上方纯白和右下方纯黑点连接，得到 2 条线段

2）将 2 条线段均匀分为 5 段，所有线段段点合集共 11 个点，计算每个点的色值数，即可得到这 11 个点组成的色板。

3）以现有颜色坐标（X，Y）为基准，采用以下的计算公式即可得到延展色的色值：

左上方点：横坐标(X/5)递减，纵坐标以[(100-Y)/5]递增 右下方点：横坐标以[(100-X)/5]递增，纵坐标以(Y/5) 递减 工具生成

经过多年发展，国内外多家设计系统都开发了直接生成完整色板的开源工具，且经过不断迭代如今算法基本能满足大部分场景下的色板需求，是中小团队的首选方法。但是工具生成也存在一些弊端，其色值生成始终是建立在公式计算的基础上，故在部分极端场景下依旧需要设计师介入调整。

资料来源：Ant Design 色板生成算法演进之路

以下给大家整理了常见的色板生成工具：

在线工具 Chroma.js： https://www.vis4.net/palettes ArcoDesign Palette 色彩工具： https://arco.design/palette/list Ant Design 色板生成工具： https://ant.design/docs/spec/colors-cn#色板生成工具 Material Palettes 色板生成工具： https://www.material.io/design/color HTML Color Codes 颜色选择器： https://htmlcolorcodes.com/ Eva Design System 色彩系统： https://colors.eva.design/ Atmos 色板生成工具： https://atmos.style/

④ 第四步：色彩语义化

色彩语义化是指依据颜色在界面中的作用和使用场景进行重新命名，方便团队后期的维护和使用。这一步看似简单，但是实际操作起来需要设计师对色彩的使用场景和团队取用有深入的理解，很多细节需要推敲和考量。这里推荐参考 Nathan Curtis 的语义模版，作者将设计系统下的命名模版分为了四个部分：命名空间-元素对象-基础样式-修饰备注。

资料来源：Naming Tokens in Design Systems

原文关于设计系统下的语义命名进行了详细介绍，有兴趣的可以直接阅读原文： https://medium.com

Nathan 关于设计系统的命名涵盖了包括色彩、控件、文字等一系列元素命名方式，而色彩系统只需要截取其中部分拼装成符合自身场景的语义模版即可。各位可以基于产品规模和团队情况选择合适的内容进行命名封装，需要注意的是，语义模版的命名需要合理的把控精度：一方面过细颗粒度的命名会导致过于臃肿，维护成本过高，另一方面粒度过粗的命名会导致元素区分度不够，在团队推进使用时容易造成混乱。

关于如何验证色彩语义是否清晰有个很简单的方法，即直接将设计的配色方案提供给开发同学，看能否在不借助颜色进行备注和说明的情况下只通过命名即可理解色彩的语义场景，通过不同角色视角更容易发现色彩命名的问题。

⑤ 第五步：团队推进

到这里色彩系统的基础色板和配色方案基本都搭建完成了，后续就是将其整理到组件库，并输出设计文档同步给团队其他成员使用。这里推荐使用 Figma Tokens 插件来进行管理和维护。此外，在同步前端同学建立开发组件库时，尽量采用语义命名对颜色进行封装，而非直接写死固定色值，以便日后在迭代调整时更加灵活。

设计内协同：在 Figma 中生成颜色变量 与开发代码联动：利用颜色变量表进行信息同步 参考资料

https://www.yuque.com/xiami0101/bq79sy/vtnqb262ag42tt66 https://www.yuque.com/xiami0101/bq79sy/hy3vvi https://www.youtube.com/watch?v=k1rB1Y4isHs&list=PLhnwj_CftHvhwO8P0mytRNZzlgbtOvgf4 https://www.jianshu.com/p/f0e6382dd825 https://zhuanlan.zhihu.com/p/165548359 https://jessieji.com/2020/hcl-instead-of-hsl https://medium.com/@pk.kiselev/designing-colour-system-d9d39f245e01 https://www.jianshu.com/p/facdbab5ac20 https://zhuanlan.zhihu.com/p/32422584 https://www.yuque.com/xiami0101/bq79sy/ntkf60rgs9g3m2h2?singleDoc# https://zhuanlan.zhihu.com/p/102743681?utm_id=0 欢迎关注作者微信公众号：「虾米的体验笔记」

金三银四，很多同学已经提前开始准备作品集，摩拳擦掌打算换个更好的工作！但是一翻以前的作品，感觉能拿得出手的寥寥无几，开始纠结要不要放弃，或者抓紧时间再做一个虚拟项目丰富一下？确实，好的作品只能靠平时多积累，但是好的包装却是可以“临时抱一抱佛脚”的！

金三银四，很多同学已经提前开始准备作品集，摩拳擦掌打算换个更好的工作！

但是一翻以前的作品，感觉能拿得出手的寥寥无几，开始纠结要不要放弃，或者抓紧时间再做一个虚拟项目丰富一下？

确实，好的作品只能靠平时多积累，但是好的包装却是可以“临时抱一抱佛脚”的！

样机用得好，作品集也能快速提升一个段位！今天就来给大家 更新一波儿高质量样机！

看中了单个样机的，可以直接复制对应链接去浏览器打开获取。

话不多说，我们一起看看样机效果！

一、iPhone 14 Pro 必须先来一波儿 满打满算，iPhone 14 上市都已经半年了，新的样机模板得安排上。尤其是很久没更新作品集的同学，仔细看看之前用的样机，能当传家宝的 iPhone 4 千万要换掉。

3 个角度、4 种颜色

免费获取→ https://js.design/community

6 种颜色、可编辑、组件状态

免费获取→ https://js.design/community

二、十三香也得来点儿 样机不是越新越好，适配你的作品、并且更能展现亮点和优势才是最好的。如果没针对灵动岛做特殊设计，那么 13 仍然是你目前的最佳选择之一。

免费获取→ https://js.design/community

三、再来个安卓的 免费获取→ https://js.design/community

四、Apple Watch 也要安排上 智能可穿戴设备是近些年的流行趋势，虽然 Apple Watch 样机的使用场景没有 iPhone 那么丰富，但还是要存一下以备不时之需，免得以后要用的时候慌慌张张到处找。

免费获取→ https://js.design/community

五、再来几个电脑的 这也是必不可少的

iMac 24 寸样机，七种颜色都有，可以一键换图，查看具体再哪一个样机上展示的效果最好。

免费获取→ https://js.design/community

MacBook 样机模型自然也不能少，包含了新款 pro 16 英寸、14 英寸，以及 MacBook Air，存这一套就够用了。

免费获取→ https://js.design/community

六、平面的整完了，最后再来点 3d 的 3D 不同机型样机合集，涵盖手机、电脑、iPad、Apple Watch、绘画板等多种设备，一共 15 个样式，妥妥够用了。

免费获取→ https://js.design/community

用够了单手握持点击？看看这套 3D 样机素材 ，一共十多种姿势可以选。

免费获取→ https://js.design/community

当然，真人手握样机模板也不能少， 有 13 和 13Pro 两种机型，握持的手也有明暗两种模式，可以更好地融入你的作品集当中。

免费获取→ https://js.design/community

实在是太全了！

最后 以上就是今天要和大家分享的全部样机模板，都是非常实用的，用好了可以让你的作品包装效果更上一层楼。

这些样机模板都来自于「即时设计-资源广场」，除了选出来推荐给大家的这些，还有 100+ 样机素材，想要的同学可以直接去查找使用。

资源获取地址： https://js.design/community

近日，阿里巴巴生活服务板块下饿了么到店业务（原“口碑”）将与高德合并，原到店业务负责人张亮将由向阿里本地生活服务公司CEO俞永福汇报，改为向高德CEO刘振飞汇报。 自2008年收购口碑以来，阿里巴巴到店业务经历了口碑与淘宝融合、口碑融资独立运营、支付宝流量扶持

阿里巴巴生活服务板块下饿了么到店业务（原“口碑”）将与高德合并，这次调整，饿了么能够通过高德重振到店业务吗，对于高德来说，也不失能够增加可应用场景和服务项目、完善其服务生态。可以期待饿了么到店业务会与高德的联系将更加紧密，双方也拥有共同的出行场景。

近日，阿里巴巴生活服务板块下饿了么到店业务（原“口碑”）将与高德合并，原到店业务负责人张亮将由向阿里本地生活服务公司CEO俞永福汇报，改为向高德CEO刘振飞汇报。

自2008年收购口碑以来，阿里巴巴到店业务经历了口碑与淘宝融合、口碑融资独立运营、支付宝流量扶持（口碑作为线下支付入口替支付宝养订单）、到家到店联合作战、高德引流等不同阶段，但思路、团队多番转换之下，到店业务的范围仍不断缩小。

36氪此前曾报道，口碑的餐饮业务已经从过去直营的40座城市收缩至不足10城，其余城市也由直营转为服务商模式，2022年上半年阿里本地生活业务由近万人缩减了约3000人。

彼时就有内部人员透露，伴随业务收缩，不排除到店业务并入其他业务线的可能。而伴随口碑并入高德，据知情人士透露，阿里本地生活将进行新一轮裁员。

这一战略布局早有端倪。2021年本地生活公司升级为生活服务板块后，阿里CEO张勇在当季度财报会上就表示，希望用户能在高德地图完成基于目的地周边各种服务的交易，形成以“饿了么为中心的「到家」 和以高德为中心的「到目的地」 业务”相协同，其中，高德升级为“生活服务好平台”，增加美食团购、酒旅、休闲玩乐、周边游等内容。

高德升级为生活服务好平台后，增加“目的地”相关内容

此后，到店业务便与高德在组织和业务上密切关联。之所以选择将两者联动，是因为双方拥有共同的出行场景，而同板块内的飞猪主打旅游，饿了么则是「到家」心智太强。

据36氪了解，在2021年7月并入生活服务板块后，高德开始和口碑（到店业务）共用客服和BD团队（商务拓展），自去年起到店部分业务也开始虚线向高德高层汇报。

俞永福于2022年初提出阿里本地生活组织架构的“541”新阵型，即由 5 个面向消费者的（to C）业务、4 个面向商家的（to B）业务和履约（Delivery）业务组成。最核心的“5C”包括到店业务中心、到家业务中心、市场营销品牌合作业务中心、本地零售和本地零售大商超5个前端业务。除到店业务外，其他几大重要业务都向到家业务中心负责人处端汇报。到店业务中心被单独拎出来，由负责人张亮直接向俞永福汇报。

本地生活组织架构，图片来源：36氪据公开信息整理

在生活服务板块整合后的一年多时间里，高德曾尝试多种手段为到店业务带来流量，比如加大商家供给（吸纳服务商）、完善用户决策信息（从其他平台购买评价体系、优化出行供货榜单）、请于谦等明星代言等等，但多位知情人士都表示，“其效果并不如人意，用户心智建立是个大问题”。

因用户规模（1.2亿DAU）保持行业第一，高德一直被视为本地生活服务板块的引流利器。不过，如今它有了新的使命。

一位接近高德的消息人士向36氪表示，2021年之前高德最重视的财务指标是用户数，从去年开始，在降本增效的大背景下，高德开始大面积探索商业化，将营收视为第一指标，其中打车业务已获得不错的成绩。不过36氪了解到，由于打车业务需要投入较多补贴，高德目前仍在亏损。

在阿里到店业务不断收缩的2022，新的行业战局正在形成。2022年抖音本地生活迅速崛起，其全年的GMV达到770亿，引发美团警惕的同时，也挤压了阿里到店的市占率。据36氪了解，去年阿里巴巴到店的市场份额仅有个位数，美团和抖音的占比则在60%和10%上下。

不过一位饿了么员工也告诉36氪，俞永福对内一直强调，不要把本地生活作为阿里巴巴的边缘业务，要保持战斗性，言外之意阿里巴巴不会放弃本地生活。

过去一年，俞永福一边对业务进行组织上的梳理、全面向美团靠拢。以本地零售板块为例，饿了么在去年上半年就取消了原有的标超业务部、泛零售业务部、便利超市业务部等，转而按照商品品类划分部门，新增专营专卖业务组（休闲零食、美妆、婴宠等）、鲜花业务部、商超日百业务部、商家平台运营部——这与美团闪购划分业务部门的逻辑类似。

另一边积极寻找新的流量来源。去年三季度，饿了么与抖音达成合作，开始为饿了么小程序在自营城市陆续开通POI。36氪了解，饿了么与抖音达成的合作里，第一个月的GMV要达到2000万，第三个月要破亿，小程序日活则要突破3500万，目前短期GMV目标已基本达成。

随着抖音在本地生活领域的崛起，原有的“双雄争霸”开始演变为“三国杀”，美团已于近期加大对视频内容的投入，饿了么则在业务合作与频繁的组织调整中需求变局。

（感谢36氪记者窦轩、杨林对本文的贡献）

作者：彭倩 董洁；编辑：杨轩 乔芊

来源公众号：36氪未来消费（ID：lslb168），在这里看到消费的未来。

原标题：饿了么到店业务将与高德合并

本文由人人都是产品经理合作媒体 @未来消费 授权发布。未经许可，禁止转载。

题图来自 Unsplash，基于CC0协议。

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。

给作者打赏，鼓励TA抓紧创作！

{{{path> 赞赏

烧钱不能解决所有问题。 百亿补贴，又有新战事。 据多家媒体报道，京东计划在3月8日推出100亿元人民币的补贴活动，正式上线“百亿补贴”频道，直接对标拼多多。 百亿补贴堪称是拼多多向五环内开战成功的关键模式，京东的搅局，又会带来怎样的变化呢？ 01 拆解百亿补贴

百亿补贴，又有新战事。近日，有消息披露，京东将于3月初上线百亿补贴频道，直接对标拼多多。在百亿补贴战事下，京东的入局，将会带来什么变化？本文对百亿补贴模式进行拆解，并对比京东以及其他电商平台之间的优劣势，一起来看看吧。

烧钱不能解决所有问题。

百亿补贴，又有新战事。

据多家媒体报道，京东计划在3月8日推出100亿元人民币的补贴活动，正式上线“百亿补贴”频道，直接对标拼多多。

百亿补贴堪称是拼多多向五环内开战成功的关键模式，京东的搅局，又会带来怎样的变化呢？

01 拆解百亿补贴，一场低价高质的阳谋 先亮观点，百亿补贴在果胶商业观察看来，属于一项拼多多运营的“神级策划”。

神在哪里？

首先，直击用户利益点，带来直接简单的低价。同样的苹果手机，拼多多就能做到全网比价更低，多数消费者几乎都会为此心动。

当然，低价从来不是壁垒，令人玩味之处在于拼多多更进一步地为低价给出了一个能够令人信服的官方理由，一字不多一字不少，题眼正在“百亿补贴”之中——

百亿，指的是金额，足够形象也足够震撼；补贴，指的是手段，意指这份产品之所以低价，不是凭空而来的，是由官方补贴的。

其次，带来一种更有保障的“安全感”。

不得不承认，很多用户对拼多多避而远之，大多来自早期在拼多多草莽时代的不佳用户体验。拼多多平台的其他产品同样“便宜”，只是这份便宜没有背书、亦无保障。

在“便宜没好货，好货不便宜”的思维框架中，拼多多平台成了劣质产品的代名词。

但百亿补贴，则以官方身份大大消解了这一顾虑。不仅是更便宜的价格，更重要的是这也是一份来自官方的背书，入选百亿补贴的商品，提前有了一层官方品控把关，售后相对亦有保障。

直白说，百亿补贴，补的其实是“人性”。爱占便宜是人性弱点，重点在于，如何让用户在占了便宜的之后，又有了自身行为合理化的自洽理由。

如此，百亿补贴以价格为武器，不断扩大城市用户圈层。曾经很多不愿体会拼多多的“真香”的朋友，很多都通过百亿补贴入坑了。

百亿补贴已经成为拼多多品牌形象自证的一面镜子。这场补贴之经典，也让后来入局的天猫和京东也都难以割舍“百亿补贴”的四字表达。

02 从上到下的价格焦虑，京东的不得不补 商业世界，没有万金油式的通用解法。但拼多多百亿补贴带来的低价杀伤力，着实令友商们如坐针毡。

事实上，外界普遍认为拼多多与京东之间是“错位竞争”，京东向来聚焦高净值的3C产品、强调电商服务的重要性，而拼多多抓住了被忽视已久的下沉需求，抢夺的是那部分在天猫消费升级中被冷落的用户。

京东为啥也要开始补贴了？

草蛇灰线，一切都有迹可循。2022年底上了热搜的京东的内部管理会，刘强东在痛批众高管之余，重点强调：“低价是我们过去成功最重要的武器，以后也是唯一基础性武器。”

在果胶商业观察看来，刘强东的预判没有错。流量见顶的当下，增长越来越难了。作为4P中消费者做决策时更先考虑的因素，比价仍然是大多数消费者的消费习惯。价格或者说性价比、质价比，依然是消费者做决策时的最重大考量之一。

更何况，通胀仍在进行时，2022年CPI同比上涨2%。层层叠叠传导到消费者的钱包端，一粒尘埃也能变成一座山。不安感仍在，居民储蓄不断攀高，量入为出之中，对商品价格的敏感程度更强了。

如此，虽然有服务、口碑壁垒，但价格对京东来说仍然是同等重要的事。

况且，一日千里的电商领域，又哪里会有绝对强势的定价权？

拼多多的百亿补贴过后，淘宝跟进，对京东而言如今的慢半拍，也是不得不做的选择。

03 天猫“翻车”前车之鉴，京东的低价故事好写吗？ 只是橘生淮南则为橘，橘生淮北则为枳。百亿补贴这项神级策划，与京东的生态协同性又如何呢？

要知道，拼多多大量补贴经销商商品，对自身生态的影响并不算大。但京东就不一定了，用户生态、优势产品截然不同，只凭低价，就可以攻城略地吗？

先看看天猫的前车之鉴。与拼多多百亿补贴强调的“品牌授权，品质保障，买贵必赔”相比，天猫百亿补贴强调的是“假一赔十，买贵必赔，售后无忧”显然更强调力度。

但实操看，一方面天猫百亿补贴与本身聚划算的秒杀生态存在一定冲突，另一方面，早期而言或许为了强化心智，天猫百亿补贴商品只能从首页的百亿补贴入口进入搜索，当在APP搜索商品时，并不会像拼多多那样直接推出百亿补贴商品的提示标。（目前首页搜索已经可以看到百亿补贴商品）。

更重要的是，这边虽然部分品类在价格优势上能抗衡了，但就补贴的产品生态而言，拼多多的百亿补贴目前涵盖的商品品类很广，综合比较之下是天猫力所不逮的，这也是其运营投入的先手优势。

这样的先手优势，还体现在品牌心智上。2019年12月，天猫的聚划算百亿补贴冠名B站跨年晚会。晚会很出圈，但冠名的百亿补贴四个大字，彼时被不少观众误认为是拼多多，多少有些为人作嫁的意味。

不管怎么说，提起百亿补贴，大众脑海里拼多多作为默认的平台定语已经难以抹去。甚至可以说，百亿补贴本身就是为拼多多量身打造的，其“洼地”优势是难以复刻的。

天猫百亿补贴踩过的坑，京东能避免吗？

04 电商的不可能三角，悖论难破 没有天衣无缝的策划。拼多多百亿补贴的狂飙突进，是有代价的。

财务报表会说话。2016年至2021年六年间，拼多多的营销费用从1.69亿元增长至448.0亿元，增长近百倍。真金白银的烧钱，清晰可见。

的确，任何生意都不能既要又要还要，正如金融领域的不可能三角理论，货币政策的独立性、汇率的稳定性、资本的充分流动性不能同时实现。套用到电商领域，营收、GMV高增速、利润三方面也一样如此。

对拼多多而言，百亿补贴活动能拉新、能提升营收，大手笔的营销费用，势必侵吞利润。

不仅如此，拼多多低价的价格问题对商家们的价格调控体系的动摇，以及背后涉及到的渠道问题、价格问题，果胶商业观察也多次叙述（拼多多特斯拉终有一战，背后是渠道博弈之难；特斯拉的「变价游戏」，颠覆认知外的「价格冷思考」），这也让拼多多在品牌关系方面受到不少争议。

不过，虽然价格黑红，但阶段性而言百亿补贴带来的成长红利却是无需赘言的。面对京东的来势汹汹，拼多多的百亿补贴似乎也不太怕。

百亿补贴关卡下，拼多多推出了“多人团”系列，价格更直接，对外的宣称方式是简单粗暴的“加补”。玩法而言，多人团的形式更私域，拼团者不再与陌生用户一起拼，而必须转向熟人共同购买。这一步显然可以帮助拼多多撬动更多增量用户，当然，代价也更大了。

百亿补贴之于电商平台的可持续性究竟如何？也等待时间作答。

05 听听ChatGPT怎么说 最后，果胶商业观察也询问了ChatGPT关于京东入局百亿补贴与拼多多相比较的优劣，它是这样回答的：

如果京东也开展百亿补贴活动，可能会有以下几点优势：

品牌知名度更高：相较于拼多多，京东的品牌知名度更高，能够吸引更多消费者的关注和购买。

服务质量更好：京东在物流、售后服务等方面有较为成熟的体系，能够为消费者提供更好的购物体验，提高用户满意度。

高端用户群体更多：相比于拼多多，京东的用户群体更加注重品质和服务，对高端商品的需求更大。

但是也存在以下一些劣势：

商品定价较高：京东的商品定价相对较高，即使在百亿补贴活动中也可能难以与拼多多相比提供更低的价格，吸引更多的消费者。

促销手段有限：由于京东的渠道和平台规则相对严格，可能难以像拼多多那样提供更多的促销手段，限制了活动的吸引力。

用户黏性相对较低：相比于拼多多的社交化、互动化等特点，京东在用户黏性上相对较低，难以引起消费者的持续关注和参与。

综上所述，京东的百亿补贴活动效果相比于拼多多可能会有所差异，但也有其自身的优势和劣势。

虽然有些泛泛而谈，但ChatGPT显然已经拥有完善的分析师结构框架了，对京东的痛点掌握也非常犀利。

问题是，ChatGPT看待问题是以过去已发生事实的视角，在更发展的眼光下，我们也能看到变化之中问题的更生动答案。这也正是思考的魅力。

京东的百亿补贴又会带来怎样的答卷呢？

专栏作家

于盛梅，微信公众号：果胶商业观察，人人都是产品经理专栏作家。关注营销领域，产品生态观察者，商业模式评论家

本文原创发布于人人都是产品经理，未经许可，禁止转载

题图来自Unsplash，基于 CC0 协议

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。

给作者打赏，鼓励TA抓紧创作！

{{{path> 赞赏

近几个月ChatGPT大火，成了互联网科技圈的当红炸子鸡。微软、谷歌、百度等大厂都入局，ChatGPT让元宇宙变得黯然失色。 而在一年多之前，Facebook改名Meta正式转型元宇宙，元宇宙也曾有与ChatGPT类似的高光时刻。 随后元宇宙风口变弱，以Met

在元宇宙这个概念火起来了之后，与之相关的VR设备销量也一定程度上被带动了起来。不过不少用户却表示VR设备“容易吃灰”，有些人甚至已经在二手平台上甩卖先前购入的VR头显。那么，VR设备为何会成为“吃灰”设备？VR头显是否是一门值得投入的生意？

近几个月ChatGPT大火，成了互联网科技圈的当红炸子鸡。微软、谷歌、百度等大厂都入局，ChatGPT让元宇宙变得黯然失色。

而在一年多之前，Facebook改名Meta正式转型元宇宙，元宇宙也曾有与ChatGPT类似的高光时刻。

随后元宇宙风口变弱，以Meta为代表的巨头开始收缩元宇宙业务，团队也进行了大幅度调整。

在二手平台，也有不少用户售卖VR头显设备，他们很多在文案中有“几乎全新、没用过几次，吃灰”等描述。

另外，一项“最容易吃灰的电子产品”投票活动显示，VR头显排名第三，仅次于跑步机和Switch。

号称元宇宙入口的VR头显设备，成了吃灰神器。

一、二手平台甩卖VR头显，有人仅用过2次 在某二手平台，有大量出售闲置AR/VR头显设备的帖子，涉及的品牌众多，大部分都是头部的一些知名品牌，比如Meta旗下的Oculus、字节旗下的PICO，还有索尼、小米等。

不少二手买家都标注其设备为“全新、几乎全新”这样的字样，价格从三四百到一两千不等。

至于出手的原因，除了个别人是换新设备外，绝大部分都是因为闲置而出售。

有人买了1年就用了几次，试玩过后便闲置了。他们是买来玩游戏的，尝鲜之后也失去了新鲜感。

一位卖家称，他仅仅玩了2小时。他说自己眼睛会不舒服。

另一位出售小米VR一体机的卖家称，自己当时购买产品，是因为看3D电影、打游戏都很爽。

至于出售的原因，该卖家表示是因为自己没时间玩，耽误工作。

还有一位出售PICO 4 VR一体机的卖家表示，出售产品是因为自己买了更高级的。

在另一个二手平台，一位出售Pico Neo3 VR一体机的卖家表示，产品的内容和游戏还行，就是有的内容需要收费。而出售的原因，是因为忙，没时间玩。

还有人买了Oculus quest2后3个月也选择出手，也就用过5次，据卖家解释是因为晕VR。

而事实上，虽然VR头显设备已经有了比较大的进步，但是VR的头晕问题仍然是影响体验一大难题。

二、VR头显成为吃灰神器 去年，新浪科技曾发起一项“最容易吃灰的电子产品”投票活动，共有1095人参与投票。

其中，跑步机排第一，有265人投票；掌上游戏机排第二，有221人投票；而VR头盔，成了第三大吃灰产品，有212人投票。‍‍‍‍‍‍‍‍‍‍‍‍

据称，对于吃灰的原因，多位用户纷纷表示，“不喜欢、使用需求不高、半年多不用了”。

有半年没有碰过自己头显设备的用户表示，“现在市面上的产品佩戴都不是很舒服，标榜自己佩戴舒适的也有很强的存在感。再就是缺少能产生长期黏性的游戏或内容。”

另有人表示，“现在的VR头盔能体验的游戏或音视频内容还是太少了，而且一些相对优质的游戏，往往是英文版的，而且阅读理解的门槛也不低，最终还是放弃了。”

综合来看，导致头显设备闲置的原因大致有以下几种。

1. 缺乏现象级内容 普通的尝鲜者在经历过新鲜期后，很快就会失去动力。其中的重要原因是缺乏现象级应用，与ps、Switch仍然不在一个级别。

用户早期的期盼越大，真正接触后就会落差越大。

而这两年元宇宙拉高了这种预期，而现在元宇宙慢慢降温，VR的想象力被大大削减。

2. 体验不好 首先，我们必须承认VR头显还只是少部分人的玩具，它远没到普及的阶段。

其次，头显设备的硬件还不成熟，在使用体验上还有很多不足。

除了内容上有限，画质不够清晰，缺乏现象级应用。实际体验上的晕VR等不舒适感也劝退了很多人。

3. 更新换代快 一分价钱一分货，对于忠实的VR用户来说，由于硬件设备还不成熟，就需要经常更新换代。

这就导致有更多的闲置的设备流入二手市场。

三、VR销量突减，但仍被看好 据IDC《全球AR/VR头显市场季度跟踪报告，2021年第四季度》数据显示，2021年全球AR/VR头显出货量达1123万台，同比增长92.1%。其中VR头显出货量达1095万台，突破年出货量一千万台的行业重要拐点。

彼时IDC表示，消费市场仍然存在非常大的待开发潜力，预计2022年，全球VR头显出货1573万台，同比增长43.6%。

2022年12月，IDC在一份报告中，下调了AR和VR头显在2022年剩余时间及以后的展望。

IDC表示，AR和VR头显在2022年的全球出货量为970万台，较2021年同比下降12.8%。

不过，IDC认为2023年将恢复增长态势，而出货量将同比增长31.5%。预计AR和VR头显在未来数年将持续增长30%以上，到2026年的出货量将达到3510万台。

从数据可以看出，2021年是VR大爆发，2022年突然销量减少了，但仍被看好。

而造成VR销量突减的原因，一方面可能是因为风口效应减弱，比如Meta、微软等大厂缩减业务。

去年年中，微软宣布重组新的MR（混合现实）团队；Meta也宣布了公司人工智能部门的重组计划。同时，有关微软、Meta高管离职的消息频频传出。

当地时间2022年11月9日，Meta首席执行官马克·扎克伯格在写给员工的信中表示，他已决定将公司团队规模缩减约13%，超过11000名员工将被辞退。

另一方面，VR产品的涨价，或许也是导致其销量下降的原因之一。

比如去年7月，Meta宣布自8月起，Meta Quest 2耳机128GB版售价400美元，256GB版500美元，均上涨约100美元。Meta还提高了配件和翻新设备的价格。Meta表示，涨价原因是因为生产成本的上涨。

四、苹果入局或将改变市场格局 从2010年开始，“苹果要发布AR眼镜”之类的传闻便开始盛行。因为从那时开始，苹果便不断收购VR/AR企业，并发布相关的专利。

但至今苹果仍迟迟没有正式推出VR产品。

美东时间1月23日，有媒体爆料称，苹果的VR/AR设备可能被称为Reality Pro，售价约3000美元，是Meta融合VR与AR头戴设备Quest Pro的两倍。

据最新报道，彭博社的马克·古尔曼修正了此前的爆料，表示苹果的首款AR/VR头显预估发布时间从今年4月推迟到今年6月。

古尔曼推测苹果将会在WWDC大会上发布这款头显。苹果马上就要推出自己的设备，将来能给VR行业带来那些改变?

那么苹果的入局，能不能改变现在格局？

参照苹果的一贯特点，没有颠覆式的创新不会轻易推出新的硬件设备。

所以苹果一直没有推出AR/VR产品，或许是因为上面提到的VR的一些不完善的点，比如解决使用体验上、内容上的缺点和不足。

所以未来，苹果可能成为VR的重要玩家，另外苹果的价格比较贵，可能也改变将VR拉到高端时代。

总体上看，VR行业在苹果入局后，可能发展会更快。

同时也与IDC的报告预测是一致的，市场还会增长，但苹果这种大玩家带来一些变化，可能会改变现在的市场格局。

作者：三言

来源公众号：三言Pro（ID：sycaijing），提供新科技、新消费、新未来的前沿资讯。

本文由人人都是产品经理合作媒体 @三言财经 授权发布，未经许可，禁止转载。

题图来自 Unsplash，基于 CC0 协议

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。

给作者打赏，鼓励TA抓紧创作！

{{{path> 赞赏

几天前，微信的官方账号之一“微信派”换了个方式和大家见面。 它不再是图文交错的长文章模式，而是图片加上了短文字。很多人把这叫做“小绿书”。 显然，这个名字沿袭了小红书，从另一个角度来看，这个名字也说明，小红书已经通过图文模式形成了一定的用户心智。 要不，它怎么

在以往，图文内容曾在小红书内占据大比重，不过随着小红书自身的产品迭代，视频类内容正在不断增多，其业务边界也在拓展和延伸。那么我们如何理解小红书的迭代之路？本文作者便发表了一定分析，一起来看看吧。

几天前，微信的官方账号之一“微信派”换了个方式和大家见面。

它不再是图文交错的长文章模式，而是图片加上了短文字。很多人把这叫做“小绿书”。

显然，这个名字沿袭了小红书，从另一个角度来看，这个名字也说明，小红书已经通过图文模式形成了一定的用户心智。

要不，它怎么能叫书呢？

然而，同样也在不久之前，小红书对自己的APP进行了改版，在它主页的Tab页底部，视频已经成为一个单独的板块，取代了过去“购物”的位置。

更为关键的是， 区别于小红书过去的双列点选页面，视频板块直接复用了抖音的单列信息流模式，完全是初代抖音的模样。

也就是说，图文内容在小红书的比重和重要性正在被弱化，看起来，小红书这本书，就连小红书自己都快要“翻完”了。

尽管在很多人的认知里，图文种草是小红书的优势。正如微博CEO王高飞所言，图文形式的“笔记”创作与互动门槛更低、更适合UGC生产。但从小红书的自我迭代来看，越来越多的视频、夹杂着越来越多的算法，让它也越来越趋同于抖快等流量平台。

信息流模式当然是这次“视频”板块迭代的主题，众所周知，这种模式以中心化流量分发为核心，让平台在与用户之间的权力结构中，处于优势地位，并为之营造更有想象力的商业空间。 也正因如此，过去几年里，快手在不断的权衡之后，终于还是让APP首页变成了单列信息流，尽管这样做会削弱自己的社区特色。

现在来看，小红书正在走上快手的老路。

01 一位抖音的深度用户，向我们吐槽，实在用不习惯小红书。

因为在小红书的推荐页上，视频和图文内容是交错存在的。一旦用户点开的是图文，那么便无法通过下滑来实现切换，他必须返回，然后选择下一条感兴趣的内容。

本质上，这种方式是将选择权留给了用户，但被算法“投喂”太久的用户，则反而会感到麻烦。

现在，随着小红书视频板块的独立，以及在Tab页位置的凸显，以上这些困扰必然会大幅减轻。

单列信息流将内容分发权拿回平台自己手中，这其实也在减少用户的反应时间，它更容易让用户无意识、不过脑，让用户更上瘾。因为，在单列信息流模式的设计中，其本身就是一种沉迷模式，在这里，用户没有选择权，只是被动的去接受刷到的东西，这些东西，基本都是基于算法测算，是用户大概率会感兴趣的东西。

当然，哪怕部分被推荐的内容用户不感兴趣，他也在这种下拉刷新找内容，对下一页未知内容赌徒般的期待中，被锁住了时间。

一个有趣的知识点是，单列信息流其实并不算是一个互联网时代的新奇物种，原则上在电视成为主流媒介的时代，用户在拿着遥控器上下切换频道寻找感兴趣的内容时，就已经被驯化出了这种心智。

而相对比，双列点选模式，内容选择权在用户自己手上，用户其实是要思考的，当这种反应时间足够长，则无法进入沉迷状态，他就很容易跳出界面。

没有哪个平台不愿意用户沉迷，实际上，从近期所有平台的运营动作而言，几乎都在围猎用户的时间。

如果说上一个时代，大家争夺的是用户规模，那么在今天这个流量规模见顶的时代，大家争得其实就是用户的时间。

毕竟，随着消费互联网进入饱和竞争状态，本质上 各家公司之间都在进行零和博弈，无论是网民数量，还是单一网民的上网时长都已经相对饱和，大家争来争去，无非是存量资源，即用户使用时长的再分配。

事实上，围绕这个目标，自今年开年以来，小红书的新动作远不止一个视频。

比如它开始加大对社交的布局，不仅上线了“群聊广场”，探索陌生人兴趣社交，还推出了密友社交功能“咻咻”，主打照片社交。

再比如，在2月初，小红书的网页版，也终于上线了。

当时就有人给出了评论：“又多了一种上班摸鱼的手段”。在办公场景里，当小红书上线了PC版本，其在某种程度上一定会侵蚀掉抖音、微博的时间。毕竟，相对抖音，它更安静，摸鱼更隐蔽；而相对微博，它的丰富性又更强。

而社交功能的上线，则更不用多说。人类常见的社交不外乎三个部分，熟人社交，这块市场已经被微信侵蚀；职场社交，典型企业就是脉脉等；再就是陌生人社交。

熟人社交原则上频率最稳定、用户最离不开，但微信的壁垒足够高，很难再进入；而职场社交是个单独的赛道，有单独的商业运作手段；那留给包括小红书在内的多家公司驰骋的地方，其实也就只剩下陌生人社交了。

从目前各家试水的情况来看，陌生人社交从长期发展来看，或许并不稳定，也没有足够明星的公司出现，但它大概率是会在短期内触发高频使用的场景。而对于小红书这个尚有流量增长空间的公司而言，或许社交能在抢夺用户时长之外，还能吸引到新增量。

而当平台占有了越多的用户时间，也就意味着有了更多商业化的可能性。

02 事实上，小红书做电商这件事儿，本应该是一件非常水到渠成的事情。

不管是抖音、快手、B站等社区，他们对于商业化动作的探索，都还有所保留，以及谨慎。因为过多的商业化内容，一定会对整个内容生态造成一种破坏。

但小红书的情况就不同，因为从最开始这个平台就已经给用户建立了好产品、好餐厅、好景区种草的心智。

“在这个平台上，大家很爱讨论买买买。举个例子，很多母婴的产品，在小红书上的搜索量可能是电商平台的2倍。反观你刷抖音，你刷微信，如果你一直在讨论买这个事情，其实对于用户是一种打扰。”在近日潘乱的视频号直播中，Babycare首席品牌馆Iris如是表示。

但一个矛盾的点就在于，小红书的电商却始终无法实现闭环，它逐渐成为一个前端的线索发现工具，种草中转站，消费者并不直接在上面消费。

这件事情就像一种玄学，横在小红书商业化的主路上。

你能看到，这些年小红书确实做了很多动作，去试图让这个环闭起来。比如，它出台了很多细则去规范达人与品牌的合作流程，规避水下交易；再比如，它也推过号店一体，支持投放商业笔记时挂载跳转链接的功能，去不断完善自己的商业化基建。

但效果总是不尽如人意。

在今年，小红书的一些细节迭代也在开展。个人主页新增了购物车入口；搜索结果中也新增了“可购买”标签，这一标签下的笔记均为带有商品购买链接的“商品笔记”。

而小红书要做的群聊功能，在陌生人社交之外，其实也给商家做私域沉淀，提供了入口。因为目前群聊广场上的大部分群聊笔记，其实都由商家创建。

但有些事情，不断地去加码得不到效果的时候，倒也不妨换个思路。

从某种程度上，抢夺时间就是这个被打开的思路。因为，当你占领了用户足够多的时间时，其实也就意味着拥有了足够的用户使用频率和粘性。

就像我们在讲小红书的视频板块，多少有点初代抖音的样子。而初代抖音其实核心做的就是一件事，让用户沉迷在此，每天耗费可能超过2个小时都在你这个平台上。

只有当足够的用户粘性建立起来，你再在平台上去做一些“小动作”，去呈现购物板块，那用户被迁移的概率就会更高。

事实上， 在抖音2020年大力去推兴趣电商、直播带货的这一年，抖音日活跃用户已经突破到了6亿，月人均使用时长为1709分钟，估算下来日单均使用时长已经做到了近一个小时。

在做到这样一个用户使用时长和粘性的情况下，尽管当时的抖音跟今天小红书面临的情况一样，电商的基建并不完善，但从今天回头去看，抖音去推电商这个动作这一路，整体来看是较为顺畅。

更何况，对于小红书而言，其用户规模和频率本身还未见顶，还有一定的增长空间，将加码商业化的激进动作放慢，重新回到夯实用户活跃度和留存的起点，倒也不排除有“曲线救国”的可能性。

03 对小红书而言，它也确实到了要紧张起来的时候。

在去年下半年，我们曾提出过一个概念，整个消费互联网已经进入到了大混战时代。彼时，几大互联网巨头之间，就出现了业务蔓延，和战略交融。

到今天这个节点，在纷繁复杂的各业务信息充斥中，很明显，这种混战的状态更加焦灼了。

在这其中，带有独特图文种草性质入场的小红书，多次成为了被对标的重点对象。

除了微信的“小绿书”，近日，在抖音的界面中，我们又看到上方Tab页多了一个“静音”的板块，这是一个以双列形式存在、同时又是视频与图文混合排列的板块，你看，其实也有小红书的影子。

这还不是全部。在过去，“大众点评小红书化”、“淘宝小红书化”都曾密集上演。

不论是微信、大众点评背后的美团、抖音，还是淘宝，他们的体量对于小红书而言，都是庞然大物一样的存在。

这种被对标的压力，让目前用户规模还不足够大、商业化路径又没办法闭环的小红书，几乎处于一种赤身肉搏的状态。

小红书在图文种草上的壁垒有吗？是有的。这种壁垒高吗？其实也不见得。

不管是抖音还是淘宝，其目前都已经在施力图文种草，尤其是抖音，其自身的优势就在于用户时长和粘性，如果抖音APP本身增加图文种草，这样的功能属性经过一段时间的“刷脸”，很容易被抖音内的APP用户使用，毕竟谁也不愿意多次反复切换APP。

这其实就是互联网的降维打击逻辑，用高频打低频。这个频率就是时间。

更何况，图文种草的进入门槛本身并不高。

根据点点数据统计，过去一年时间Lemon8全球下载量接近2000万，过去90天全球下载量超过400万次，来自泰国、日本和印尼的下载数量约在总体下载份额的85%；此外，相较于2022年年初，Lemon8的月活跃用户翻了两番。

而点点数据同样显示，早在2022年7月初，Uniik的增长就出现了明显放缓，日下载数量从4位数跌至3位数、2位数，再到最后版本更新也带不来新的下载。这样的信息也被认为，Uniik的日本之旅可以被宣告阶段性失败了。

Lemon8就是字节瞄准海外的种草产品，而Uniik则是小红书瞄准海外的种草产品。这一来自出海端的数据，其实也能折射出小红书国内业务在被屡屡对标后暗藏的危机。

所以，尽可能的占有用户的时间，就成为当下小红书的反击，也是其摆脱赤膊作战的铠甲。

当然，这件事情的实践之路，怕是并不容易。

其中，最需要警惕的是， 当视频信息流改变了平台与用户之间的权力结构，实际上也是平台对算法的一种权力让渡。 而算法是中性的，它可能会加成美，也可能会加剧恶，还有可能让小红书不再是小红书。

作者：孙颖莹，编辑：王芳洁

来源公众号：最话FunTalk（ID：iFuntalker），不写平庸的故事

本文由人人都是产品经理合作媒体 @最话FunTalk 授权发布，未经许可，禁止转载。

题图来自 Unsplash，基于 CC0 协议

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。

给作者打赏，鼓励TA抓紧创作！

{{{path> 赞赏

很多同学问过我关于业务目标、 产品目标和设计目标相关的问题，比如：业务目标和产品目标有什么区别？产品目标与设计目标的关系是什么？设计目标时根据什么制定出来的？

很多同学问过我关于业务目标、 产品目标和设计目标相关的问题，比如：

业务目标 和产品目标有什么区别？ 产品目标与设计目标的关系是什么？ 设计目标 时根据什么制定出来的？ 今天我们就来聊聊这三个目标之间的区别和联系。

更多作者干货：

设计师与 ChatGPT 如何共处？我总结了3个角度！ 最近挺多同学问过我关于 AI 的看法：ChatGPT 以及很多 AI 生成插画和图片的工具和软件，不仅为我们带来了惊喜，也让我们感受到了不少担忧。

阅读文章 >

通常情况下，业务方、产品方和设计方是分开的三组人。一些追求敏捷发展的中、小公司可能不会区分得太清楚。不过这并不影响我们在工作时将业务目标和产品目标进行拆分管理，以保证目标更加清晰、更易落实。

一、业务目标 业务目标是业务人员针对业务领域或产品方向提出来的。业务方的立场是：卖出产品为公司赚钱，因而会兼顾售前、售后获得的用户反馈、公司的发展战略等方面来制定规划和目标。

业务目标通常是公开透明的，它是整个业务产研大团队的共同目标，也是产品目标和设计目标的来源依据。业务目标的写法通常是：

“XX 业务 / 产品今年将以 XX 为重点方向，预计将用户活跃度从去年的 20% 提升至 50%。”

二、产品目标 产品目标是由产品方根据业务目标、产品功能和用户需求制定出来的，产品方的立场是：将产品做得更好从而实现业务目标。

产品会根据业务目标来为产品功能做规划，也即将业务目标转换成具体的功能模块建设需求。因此产品目标也会显得更加接地气和务实一些，它的写法可以是：

“重点建设全新的 A 功能，做到人无我有；优化 B 功能的 XX 环节，增加 XX 服务，做到人有我优，将用户对 B 功能的好评率提升 20%。”

三、设计目标 设计目标是设计师结合业务、产品、用户等多方需求制定的设计工作方向。 设计师 的立场是：在保证用户体验的基础上完成产品功能设计，实现产品目标和业务目标。

设计目标的制定来自于对业务目标和产品目标的拆解和落实，同时也要兼顾用户体验，平衡多方需要后找到最优解。 设计目标会指引你完成设计实操工作。它的写法通常是：

“优化 B 功能的 XX 体验，在保证产品可用性的同时，提升用户在使用产品时的安全感，增强产品与用户的共情心智，提升 20% 好评率。”

四、三者之间的关系 业务目标是产品目标的依据，会被产品方转换成具体的功能建设规划。产品方会在建设产品功能的过程中实现业务目标。

业务目标和产品目标都是设计目标的依据，业务目标会被设计师转换成整体的设计优化规划；产品目标会被设计师拆解成具体的设计执行方向。设计师会在保证用户体验的基础上，实现产品目标和业务目标。

可以看到，越是处于合作的下游，需要考虑的范畴和责任就多。业务目标是相对纯粹的，它来源于公司战略和用户关系；产品目标是相对务实的，它来源于业务需要和用户需求；而设计目标则是相对复杂的，需要设计师站在业务视角、产品视角和用户视角来做全局看待，时刻思考如何取舍和融合，找到平衡点。

在实际的工作过程中，业务目标、产品目标和设计目标三者互相成就，紧密咬合，不可分割。

这也要求我们作为设计师在做设计目标和整体工作规划的过程中，应该从业务和产品的本质需求入手；在从视觉表现、交互体验、操作流程等方面来做设计执行时，不应是以“突出设计工作和设计方法”为出发点，也不应是以“为了增加某个好看的效果”为最终目的，而是“为了赋能产品/业务”，实现产品和业务的目标。

在商业设计中，设计之所以有“价值”，也正是因为它能为业务创造价值。

欢迎关注作者微信公众号：「长弓小子」

一、前言众所周知，PC 和移动端是当前人机交互的主要互动设备。经过十多年的发展，两者已经产生了成熟的交互范式，前者主要基于键鼠交互，后者以触屏交互为主。而为了适应不同设备的交互方式差异，提供更完善的用户体验，即便是相同的功能/组件也会衍生出细节上的差异。

一、前言 众所周知，PC 和移动端是当前人机交互的主要互动设备。经过十多年的发展，两者已经产生了成熟的交互范式，前者主要基于键鼠交互，后者以触屏交互为主。而为了适应不同设备的交互方式差异，提供更完善的用户体验，即便是相同的功能/组件也会衍生出细节上的差异。

本期将探讨这些隐藏在细微处的交互差异，从而更深入了解用户体验中设备/行为/界面的关系。

更多差异分析：

中西方电商网站设计有哪些差异？我总结了这3个！ 作为一名交互设计师，我经历过国内零售电商产品，后又从进口转战出口。

阅读文章 >

二、五个小案例 1. 输入框的清除按钮

清除按钮（clear button）是用来清除输入框内容的按钮。当输入框中存在内容时，出现在输入框的末端，点击后可清空已输入内容。pc 通过键鼠操作可以快速删除，但基于触屏交互的移动端删除操作较为麻烦。因此清除按钮在移动端中更常见，特别是在登录注册、搜索框等页面。清除按钮可以快速清空内容，提高操作效率，降低输入错误时的负面影响。

虽然在 web 界面中很少使用上述的清除按钮，但“快速清除内容”的需求依然存在。主要出现在多项内容同时清空的场景，例如 b 端筛选中常用的“重置/清除”功能，以及多选框中快速清空选项。

2. Hover 态

光标 hover（悬停）是 PC 端的常用的轻量交互操作，当光标悬停时界面元素会产生状态改变。Hover 可以为用户显示隐藏的信息（展示 tooltips/二级菜单）；或指示按钮状态，提示用户此处可点击触发事件。

但是移动端的光标（手指）不会长期悬停在屏幕上，所以不会有 hover 态。而且指尖轻触即表示“点击”，因此按钮将直接从“normal”变为“pressed”状态。相比于 pc 少了“hover”作为中间状态，因此在界面设计上移动端按钮需要明确的引导性，以传递“此处可点击”的信息。

对于 hover 的二级菜单，移动端需要多点击一步展开，或者 tab 切换进行快速跳转。

3. 按钮 VS 手势

复杂的手势输入是移动端的优势，但 PC 端需要更多按钮来承载功能。下拉刷新是移动端 feed 流常用的操作，将页面刷新和下滑手势丝滑的结合起来。在 PC 中如要实现内容区域的便捷刷新，则需要添加一个[刷新]按钮。在 banner 轮播中，pc 通常会提供准确的“上/下一页”按钮，而移动端中普遍通过滑动查看上/下一张。类似的案例还有图片放大缩小、视频音量调节。

究其原因，鼠标操作一般都有精确的操作/点击对象，因此通过按钮触发事件更为普遍。手势操作可以基于整体对象进行滑动/拖拽，这是符合用户手势操作心智的交互方式。同时手势操作的准确度低，屏幕空间有限，用手势代替按钮的性价比很高。

4. 长按与右键

右键呼出更多菜单是 PC 端的常用操作，移动端中的对应操作则由单击长按完成。而对于针对对象的编辑菜单，在 pc 端需要选中文本对象后需要点击右键，而移动端中选中文本后会立刻弹出菜单。这由于移动端中没有像"ctrl+c""ctrl+v"一样的快捷操作，快速弹出菜单减少用户操作步骤；而且选中后若再次叠加一个长按行为，很容易误判成单击从而取消选中。

5. 弹窗

PC 端信息反馈的样式更加多样，包括 tooltip、toast、message、drawer 等。相比移动端有更多非模态弹窗，应用方式更灵活，用户使用过程流畅。由于屏幕面积小，移动端弹窗面积占比更大，对用户而言打断感受更强，在设计过程中需要谨慎。

同时，移动端和 pc 的弹窗按钮位置也有所区别。目前移动端中强引导按钮普遍在右侧，而 win 系统中强引导按钮在左侧（MacOS 则在右侧）。

三、小结 交互方式差异深刻影响了 PC 和移动端界面形态，这些 设计细节 隐藏在日常交互行为中。虽然使用已有组件库时很容易忽略，在多端系统设计过程中依然需要注意这些差异性细节。

移动端

缺少 hover 输入相对不便 点击准确性低 手势操作便捷 长摁呼出菜单 PC 端

hover 能实现轻量级的交互 输入方式高效快捷 光标点击准确 右键呼出菜单 即使是相同的产品功能也会产生差异化的交互变体，这些变化可能是基于设备限制、程序限制或人机交互行为。在多端产品时，如果忽略了这些交互细节，除了影响产品可用性，还可能违背用户的使用习惯，导致产品体验细节的缺位。

整体来看，交互界面不仅是功能的可视化载体，他还缝合了设备应用和用户行为，是产品使用流程的中枢。往前，界面/ 交互设计 中应该兼容硬件能力，并传递准确的用户输入数据；往后，设计应该向用户传递设备的能供性，将设备能力转换成可感知的界面上的能供性，从而为用户提供完整且细致的产品体验流程。

欢迎关注作者微信公众号：「ASAK设计」