前言 送礼作为一种增进情感的传统表达方式，送什么样的礼物一直是一个重要的命题，同时，随着人们生活方式日益线上化，线上送礼的需求也逐渐增长，相比与线下送礼，线上方式缺少了面对面的沟通交流，那么如何让远方的 TA 更多的感受到你的用心和诚意，让你送的礼物更有仪式感，也成为了本次「惊喜送达」设计项目中重点思考的主题。

如何让用户感到惊喜？ 在生活中，人们通过互赠礼物增进感情。在精心挑选礼物的同时，用心准备贺卡，写满祝福的话语，并选用考究的包装，提前布置好环境，选择一个重要日子送给对方。看到对方惊喜开心的表情，我们也会同样愉悦。

根据期望效应，积极事件的不确定性比确定性会增加人们更持久的愉悦体验，对未来的联想往往会引发进一步情绪感受变化。

在邮寄场景中，当用户选择“惊喜送达”服务时，可自定义添加动态电子贺卡，并且可以在贺卡上写上要说的话。“不确定性”因素中增加动态电子贺卡和内容，让用户获得超预期的情感愉悦体验。同时在用户查看运单时，就会播放带着对方祝福的动态电子贺卡。整个用户旅程中形成体验闭环，强化仪式感让送礼加分，进一步引发用户联想。

优化目标 因此，我们将通过设计惊喜送达动态贺卡来丰富用户参与感和仪式感，营造出礼物寄递过程中的惊喜感，进而提升用户对顺丰品牌温度的感知。

接下来，我们通过「触点」「仪式感」两个方面的设计进行具体说明。

设计策略 1. 触点设计 「惊喜送达入口」—— 吸引用户注意力

“惊喜送达”功能在设计之初不是所有的托寄物品类型都支持，而是系统判定属于礼品的物品才会对用户展示。对于接触过或使用过该功能的用户操作习惯已经养成，所以新增动态电子贺卡要保留原有操作习惯的基础上突出功能亮点来吸引用户注意。

在功能设计上采用上下结构，突出“惊喜送达”功能，保留滑动开关操作方式并增加行动号召 “限时免费” 引导用户开启；而添加个性贺卡功能置于下方，用户点击即可前往选择贺卡，选择完贺卡右侧会生产预览图。上下结构方便用户操作和信息阅读，用户选不选择贺卡都不影响“惊喜送达”功能的选择。

「选择个性化贺卡」—— 让用户参与定制

在设计个性化贺卡功能时，我们想打造出全新的视觉感官体验，采用了动画电子贺卡的形式，通过左右滑动就能快速预览不同动态主题贺卡。同时可以让用户对贺卡的文案进行自定义编辑，让心意传达的方式与众不同。（由于自定义编辑功能尚未对外开放，请小伙伴们敬请期待哦～）

如果上述场景触点都是为寄件用户考虑的，那么查看电子贺卡最重要的就是触达到收件用户，并且可以让收件用户与寄件用户产生互动反馈。

「查看电子贺卡」—— 体验闭环延长愉悦

“惊喜送达”支持用户选择指定派送时间，当运单进入派送状态时，收件人会收到派送短信或微信消息提醒，用户通过消息进入运单信息。这时候我们在用户打开时播放对方为其定制的动态电子贺卡，配合美丽的图形、趣味性动画，还有一句 TA 对你说的话。用户可以选择将贺卡保存本地，也可以分享至微信好友或朋友圈，延长用户愉悦情绪。考虑到寄、收件人都会有查看运单的场景，对于动画展示我们提供了“下次不再展示”的选项，当用户勾选后，进入运单详情则不再展示，可以通过点击贺卡图标进行查看。

2. 仪式感设计 《小王子》书中有提到，“仪式感能让某一天与其他的日子不同，让某一时刻与其他时刻不同”，它能让平静的生活泛起涟漪。

根据“惊喜送达”功能的定位，主要目标用户为年轻客群，他们注重体验，喜欢生活中的仪式感，想要营造浪漫和惊喜。基于该部分的用户特点，以及过往数据表现，我们从节日、纪念日、表达态度三个维度进行创意主题动画延展设计。

「设计探索」

围绕三个维度提炼关键词，筛选出符合使用场景的主题，并对主题进行关键词联想，从而设定创意思路，创建情绪画板，并进行主题创意绘制。

节日氛围设计 —— 情人节

通过使用年轻人熟悉的弹幕形式展示各国语言的“我爱你”，增加趣味性，并契合表达浪漫基调的主题。主视觉使用玫瑰花束，突出情人节的氛围，色调选择蓝粉色调，营造梦幻感，贴合年轻用户群体的审美喜好。

庆祝日氛围设计——生日快乐

视觉构图以生日蛋糕为主体，搭配四周的礼盒元素，表现生日贺卡的主题。背景紫色与蛋糕的黄色，利用对比色更加突出主体蛋糕，紧扣生日主题。在动画设计上，使用全屏幕气球飞起的循环动画形式，烘托生日的热闹气氛，增加活力与趣味性。

感谢主题氛围设计——感谢有你

主视觉以一双手捧起爱心的构图方式，使用手绘风格，搭配手写风格的字体，给人一种见信如见面的亲切感。光影变化使视觉更集中，整体温馨的暖色调，注重主题性、氛围感，与用户产生情感共鸣，传递正能量。

其他主题

截止目前，“惊喜送达”动态贺卡共上线了 7 个主题，包含了 “新年快乐”、“辛苦了”、“谢谢你” 等众多主题供用户选择。

上线效果 新功能上线以来，“惊喜送达”功能点击率提升 505%，其中点击率排名前三的是「生日快乐」、「感恩有你」、「辛苦了」贺卡。「生日快乐」贺卡点击率是 29.7%，最受用户喜爱；其次，「辛苦了」和「感恩有你」贺卡的点击率分别是 19%和 12.8% ，用户也较为喜爱。

写在最后 在「惊喜送达」功能的设计中，我们从线上寄件场景的送礼诉求入手，分析了用户旅程中的关键触点，以动态贺卡的设计形式，将用户的心意与祝福传递给远方的亲友，让寄件行为变得更有仪式感和惊喜感。 设计师 的任务不仅仅是让使功能流程变得简洁高效，还可以让产品体验变得更加愉悦；让用户在体验产品、享受服务的同时，获得更多的惊喜与感动。

用超多案例，帮你掌握产品设计中惊喜感的塑造方法 问题：设计师怎么样才能在产品中为用户塑造「惊喜感」呢？

阅读文章 >

Clideo 公司提供免费在线音乐剪辑工具「Audio Cutter Online」，让用户透过浏览器即可对音频格式进行剪裁和编辑，完全不用额外下载任何软件或是应用程序，适用于 Windows 和 Mac 操作系统。这个工具拥有非常友善操作界面，在编辑音乐时可以轻松使用不会遇到任何困难，使用者可利用拖曳方式选择保留或是裁切的音乐时间点，也能直接输入时间（以秒为单位）来标记段落。

Audio Cutter Online 不仅支持 MP3 格式，也能使用 OGG、WMA、WAV 和其他常见音乐格式，依照网站说明只需要三个步骤：加入音乐文件、剪辑上传的歌曲，完成后就能下载成果，值得一提的是还能为音频加入淡入、淡出效果，转换为 AAC、AC3、AIFF、APE、CAF、FLAC 和 M4A 格式。

Audio Cutter Online 网站链接： https://clideo.com/cut-audio

使用教学

开启 MP3 Cutter Online 网站后点选「Choose file」找到要编辑的音频文件，也能够从 Google Drive、Dropbox 云端硬盘直接汇入文件，完成后再将文件直接存回云端硬盘。

拖曳黄色框框左右两侧来调整要截取、保留的段落。

右上角可切换：Extract Selected 和 Delete Selected，预设为前者，如果选择后者则删除选择的范围，保留没有被选定的音乐段落（两个算是相反的选项），选择此选项会将前后保留的段落合并。

右侧可设定要裁切的音乐时间（以秒数为单位），要求更精准的剪切直接输入时间会更快速，右下角有淡入、淡出的功能选项，需要的话勾选就能自动套用效果。

左下角会标示最终音乐长度，可以从「Format」选择输出格式，包括 AAC、AC3、AIFF、APE、CAF、FLAC 和 M4A，设定完成点选「Export」就能将音乐剪辑裁切、导出为特定的音频格式。

MP3 Cutter Online 会有一个剪辑后的音频页面，用户可直接在网页播放预览，没问题的话点选右侧的下载按钮就能取得文件，或是直接保存到 Google Drive、Dropbox 云端硬盘。

值得一试的三个理由：

1. Audio Cutter Online 让用户透过浏览器对音乐进行剪裁和编辑

2. 以拖曳方式选择保留或是裁切的音频时间点，直接输入时间标记段落

3. 支持输出为 AAC、AC3、AIFF、APE、CAF、FLAC 和 M4A 格式

在线就能剪辑音频！这个免费网站太酷了！ 本文要介绍的「AudioMass」是一个免费、开放源码的线上音频编辑器，在浏览器中就能编修音乐，可从本机电脑上传、以网址汇入音频或是直接录音，编辑器会呈现像是一般音频编辑软件的波形图，利用鼠标就能进行修剪、裁切、剪贴或是加入更多效果，例如分段压缩、均衡器（Equalizer）、效果器、延

阅读文章 >

大概是出于对 Material 3 和 Matias Duarte 的热爱，我昨晚还是熬夜将 Google I/O 大会的 Keynote 跟了一遍，没有等来谷歌的设计高级副总裁，倒是看到了不少有趣的内容。

值得关注的硬件

AI 系统 LaMDA 2 越发强大了，不过真正让我感到亲切的，是用 PaLM 来命名一个人工智能语言路径模型，这可以说是非常的有情怀了。

Pixel 7 系列的硬件直指 iPhone ，工业设计也越发的惊艳和高级了，而新的 Pixel Buds Pro 不仅带有降噪功能，而且续航也超过了有待更新的 AirPods Pro ：

最令我想拥有的，还是带有圆形表盘的 Pixel Watch，从直觉上来说，它比 Apple Watch 的圆角矩形的外轮廓更加讨人喜欢，屏幕和表盘整体几乎融为一体的设计也颇为自然，知识 Wear OS 的实际表现还有待观望。

而结尾演示的 AR 眼镜，则直接 Call back 了 演示开头的自然语言识别模型，呼应得恰到好处，只是用来演示的眼镜看起来仅仅只是普通的眼镜，不过从使用场景到演示效果，都非常合理和自然。

相比于VR，AR 更加值得期待，我在 2016 年的文章 《AR 可能是距离我们更近的未来》 中就表达过这一点，而 Google 的探索方向也正好印证了这一点。

不过整场发布会，最令我意外的东西，是全新的安卓平板，Pixel Tablet。

疫情之下的产物 和国内的产品策略不同，Google 在很长的一段时间以内，借助兼容了 Android 应用的 ChromeOS 的笔记本和平板类产品，直接拿下了中低端电脑市场和大量的教育硬件的订单。

桌面级的浏览器和 Google 强大的云服务，搭配 Android 的软件生态，Chromebook 和 ChromeTablet 在教育市场上所向披靡，很多对电脑要求并不高的用户，在选择入门级电脑的时候，各色 Chromebook 的性价比简直是炸裂，如果你感兴趣，你甚至可以在「海鲜市场」上以极其低廉的价格买到各种 Chromebook 来尝鲜。

Pixel Tablet

作为平台的搭建者，Google 本身也一直是产品和服务的风向标。Google 自身的 Chromebook 系列的产品线年年更新，从最早的 Chromebook Pixel 2013 开始，一路到最新的 Pixelbook Go 和 PixelSlate，肉眼可见地可以看到 Google 对于 ChromeOS 生态的维护与推崇。

Pixel Slate

Pixelbook Go

而大屏 Android 设备，最后一次更新还是 2018 年所发布的 Pixel C，最有意思的是，这个有着独特磁吸式键盘的 Android 平板，其实是 Pixel 的硬件团队来完成的。

Pixel C 之后，Google 团队开始放任厂商在平板领域野蛮生长，自由探索，直到……2020 年新冠疫情开始肆掠全球。远程工作和线上课程让平板电脑的需求前所未有的旺盛。国内一线手机厂商也在充分吸取了 iPad Pro 等热销排头产品的工业设计之后，纷纷更新或者推出了自家的平板产品线，用上次旗舰级别的芯片（骁龙870 准确来说），键盘触控板手写笔一次到位全给配上：

小米平板 5 系列

Oppo Pad 

Vivo Pad

时隔 5 年， Google 决定在 2023 年再度推出 Andorid 系统的 Pixel Tablet 这一「官方指导产品」，毫无疑问是下定决心，收拢残兵，重新出发了。

Pixel Tablet

Android 大屏设计 我之所以如此之在意 Pixel Tablet 的发布，原因就在于，这是一个关键性的信号，那就是咱们可能要开始关注 Android 平台的大屏设计了。

原因其实很简单。全新的 Material You 或者说 Material Design 3 的 设计规范 比起上一代更加完善，在机器学习和完善的工具的基础上，对于不同尺寸的屏幕和分辨率有了更好的支持，此是其一。

Google 官方在去年发布新的设计规范和 Android 12 之后，还公布了单独针对大屏设备的 Android 12L 系统，并且提供模拟器和可供特定设备安装的系统更新，此是其二。

折叠屏设备的出现，直接成为了普通智能手机（5-6英寸）和平板类设备（8-11 英寸）之间的桥梁。折叠屏手机交互不仅涉及到 APP 在常规手机尺寸和类 Pad 大尺寸屏幕上的呈现效果，而且还牵涉到不同尺寸屏幕切换以及交互状态改变等因素。在越来越多的折叠屏手机上市之后，这类需求会反向推进传统小屏 APP 做好大屏适配，此是其三。

在 Android 折叠屏交互规范出来之前，微软早早地发布了 Surface Duo 的硬件，而且在 Fluent Design 的官方设计指南中，直接加入了双屏设计的规范，具体可以参看我的文章：

重磅！柔性屏和双屏来啦，设计师必学跨屏设计规范 我们总在期待 Next Big Thing，企盼下一次数字革命。

阅读文章 >

5000 字重磅干货！设计师必备跨屏设计规范（交互篇） 在上一篇文章《重磅！

阅读文章 >

如果微软这个翻车前科过多的企业让你觉得不够有信心，那么来看看 2019 年苹果申请的折叠屏专利吧：

iPadOS 和 macOS 在大屏界面上的协调统一，又何尝不是为 Android 的大屏设计提供一个良好的参考呢？微软和苹果在这一领域的探索，对于 Android 大屏界面设计的参考，我认为是第四个影响因素。

而 Google 下定决心，放下 ChromeOS 系统的 Pixel Slate 改用 Android 系统的 Pixel Tablet 更像是官方深思熟虑后认定时机成熟。

大屏设计要点

去年 Google I/O 大会上发布的 Material You 算是第三代 Material Design，现在官方也会称其为 Material Design 3，或者 M3，依然是由著名的设计师 Matias 所主导，在 Google 的整个设计团队协同之下完成落地。

最初的 Android 12 本身仅仅只是应用了一部分 M3 的设计功能要要素，比如说其中特别智能的「动态配色」，酸梅干超人的这篇文章当中有相对详细的介绍：

零基础 UI 入门六：最新安卓规范入门解析 安卓是由谷歌公司开源的，除 iOS 外的另一大手机系统，也是我们要学习规范的对象之一。

阅读文章 >

而面向大屏的 Android 12 L 的发布之后，M3 的设计规范中，可访问性设计这一章节当中，也相应地添加了「大屏幕设计」的相关规范。

关于这一部分的知识点，我将会梳理出相对重要的部分，更细致的内容可以前往 M3 的官网查看：

https://m3.material.io/foundations/adaptive-design/large-screens/overview

1、概述

整套设计需要考虑到横屏和竖屏两种不同的方向，基于响应式设计的精神，采用多列布局，借助网格系统，让内容和元素可以在不同尺寸的设备上显示，并且符合人体工程学的需求

1.1、响应式网格布局

1-边距； 2-分栏；3-列间距

随着界面尺寸和宽度的变化，网格的数量也会相应的发生变化。

1.2、断点

和响应式设计一样，断点定义了适合当前页面的 APP 的响应式布局。考虑到 Material Design 在总体视觉上的平衡，绝大多数的元素都尽量和 8dp 网格对齐，较小的元素，比如图标，则和 4dp 网格对齐。

2、布局 APP 基础布局是交互体验的基础，布局中可以承载较小的元素区域，比如卡片。

1-导航栏；2-应用栏；3-内容主体；

2.1、导航区域

导航栏在展开状态下通常使用 256dp 的统一宽度，折叠状态下为 72dp 。使用竖屏状态下，宽度不足的时候，导航栏可以适当缩窄适配。

1-抽屉式可折叠侧边栏；2-主体内容区域

2.2、容器

将具备关联性的元素打包呈现的方式为容器，容器氛围显式和隐式两种，但是不管哪种容器组件，都记得使用响应式尺寸，确保不同缩放状况下可读。

1-隐式容器；2-显式容器

隐式容器只是边缘不可见，实际设计和开发的时候都要赋予边界参数的。卡片是最常见的显式容器，通常使用显式容器是为了强化其内元素之间的关联。

上面是一个错误的演示。不要在未对整体布局进行调整的前提下，简单地将包含文本的容器进行简单的拉伸。

容器需要借助缩放来适应不同的屏幕尺寸。容器之间会出现嵌套的情况。在上方的案例当中，1 为卡片容器，2为列表容器，在内容主体作为父容器的情况下，内部的子容器需要使用统一的左对齐、右对齐或者左右两边对齐，而侧边导航栏中的子容器则可能是固定位置。

3、组件 组件需要随着屏幕尺寸和方向的变化，在填充方式、大小、对齐等方式上进行适当的变化。

左-折叠纵向视图；右-展开的横向视图

在缩放组件和布局容器的时候，可以根据实际情况，来考虑它们在不同屏幕上的缩放变化。比如底部导航栏变为侧边导航，原本移动端设备上的卡片容器，在大屏幕上变得更趋近于方形，从而更好呈现图片内容等等，按钮内的图标和文本可以锚定居中，横向放大的时候，也可以维持在对的位置上。

3.1、直接呈现

最直接的方式，始终是按照一定的比例来将原本移动端 APP 上的控件进行缩放，以适配大屏幕来使用。不过还有更好的方式。

3.2、组件交换

在不同屏幕尺寸下，不同类型的组件，有着类似的功能。比如之前提到过的移动端 APP 底部的 Tab 导航控件和平板上的侧边栏组件，就是可供互换的功能类似组件。而这种策略，使得 APP 大屏化之后，控件的大范围替换成为可能。

又比如，移动端的列表式表单可以和大屏幕上所用的弹出对话框进行互换。两者在功能上几乎完全一样，而且在不同屏幕尺寸之下，显得足够「本地化」。

下面是一些常见的可互换的组件对比列表：

3.3、响应模式

除了上述的缩放和组件交换的方式，还可以使用重新定位组件位置、呈现隐藏组件的方式来实现 UI 的大屏化。

在涉及到较大断点和大范围额外空间的时候，可以将原本隐藏的组件直接呈现在大屏幕上。比如在移动端上通常折叠起来的菜单，在大屏幕上直接以侧边栏的形式显示出来。

而在移动端上原本简单纵向排列的组件或者容器，可以在大屏幕上重新排版布局，这样更加贴合大屏的使用场景。

4、设备

在大屏的 Android 设备上可能会涉及到触摸板、鼠标、外置键盘、触摸手势 等多种交互模式。

不同的硬件接入 Android 平板所涉及的不同交互能够很大程度提升界面的可访问性。

外部输入设备通常是鼠标、触控板和键盘三种，它们所涉及的主要交互要素如下：

外部输入设备的常规交互，和交互之下的通常大家所预期的行为：

下面针对这些常见的交互进行详细梳理。

4.1、鼠标和光标的交互

当鼠标或者触控板连接 Android 大屏设备的时候，光标都应该出现在屏幕上。

在没有专门针对鼠标进行优化的 Android 设备上，鼠标单击理应和触摸点击的反馈相同。

当触发鼠标和触控板的次级按键（右键）的时候，会触发上下文菜单，也就是常说的右键菜单。

当光标悬停在可交互的组件上的时候，这些组件应当呈现并告知用户它们是可交互的。

当光标悬停于链接和图片上的时候，光标变为手型，用来强调光标下控件的可点击属性。

光标悬停于文本内容之上的时候，呈现出 I 型，强调文本内容可以选中。

用 I 型光标来强调选中文本的边界。

当光标在不可被选中的文本上时，不应该显示为 I 型，以上为错误演示。

在使用鼠标、触控板、触控笔选中文本之后，使用单一颜色突出被选中的文本，并且不要在选中区域周围显示触摸交互的控件。

如果用户直接用手触摸选中文本，则需要显示触摸控件，即使 Android 设备连接了外部设备，也需要显示。

在选中文本上点击右键菜单，能够呼出上下文菜单，即使是在带触摸屏的设备上，也需要如此。

4.2、鼠标滚轮和触控板手势

鼠标滚轮、触控板手势让大屏交互有更多可能性。

当光标位于列表上时，滚轮和触控板两指滑动手势支持上下垂直滚动，注意，只有光标所在的那个列表。

在触摸屏上，向上滑动，页面向下滚动。

使用鼠标时候，可以通过点击拖动来选择文本和图像。

使用鼠标的用户，可以通过鼠标滚动来让横向滚动的组件移动。同理，使用触控板的用户，应该可以通过双指横向滑动来滚动横向滚动的组件。

4.3、键盘交互

即使 Android 平板连接外置键盘的时候，设备的虚拟键盘都应该是可以被调用的。

连接外置键盘之后，虚拟键盘会自动隐藏到一角。

移除外置键盘之后，虚拟键盘会自动呼出。

用户可以通过物理键盘的回车键（Enter），来发送信息，确认操作。

用户可以通过空格（Space）来暂停和播放多媒体内容。

写在最后 Pixel Tablet 的出现更像是新的转折点，Android 大屏 UI 设计的需求在接下来会随着市场变化越来越多，大家又有新的事儿干了。

另外，关于折叠屏设计的规范，可以参考龙爪槐的守望者所翻译的下面的几篇：

Material Design 折叠屏设计指南（1）：概述 折叠屏使用柔性屏幕可以折叠或展开，根据你的需要无缝扩展可用的屏幕空间。

阅读文章 >

如何设计折叠屏？来看这份设计指南！ 最近做了HUAWEI Mate Xs手机折叠屏的相关设计，借此机会「趁热打铁」分享一手界面操作体验、适配技巧分享给大家，希望对各位设计师同学有所帮助和参考。

阅读文章 >

Material Design 折叠屏设计指南：完结篇 本文为 Material Design 折叠屏设计指南中文版译文第三篇，超多干货建议收藏。

阅读文章 >

大概是出于对 Material 3 和 Matias Duarte 的热爱，我昨晚还是熬夜将 Google I/O 大会的 Keynote 跟了一遍，没有等来谷歌的设计高级副总裁，倒是看到了不少有趣的内容。

值得关注的硬件

AI 系统 LaMDA 2 越发强大了，不过真正让我感到亲切的，是用 PaLM 来命名一个人工智能语言路径模型，这可以说是非常的有情怀了。

Pixel 7 系列的硬件直指 iPhone ，工业设计也越发的惊艳和高级了，而新的 Pixel Buds Pro 不仅带有降噪功能，而且续航也超过了有待更新的 AirPods Pro ：

最令我想拥有的，还是带有圆形表盘的 Pixel Watch，从直觉上来说，它比 Apple Watch 的圆角矩形的外轮廓更加讨人喜欢，屏幕和表盘整体几乎融为一体的设计也颇为自然，知识 Wear OS 的实际表现还有待观望。

而结尾演示的 AR 眼镜，则直接 Call back 了 演示开头的自然语言识别模型，呼应得恰到好处，只是用来演示的眼镜看起来仅仅只是普通的眼镜，不过从使用场景到演示效果，都非常合理和自然。

相比于VR，AR 更加值得期待，我在 2016 年的文章 《AR 可能是距离我们更近的未来》 中就表达过这一点，而 Google 的探索方向也正好印证了这一点。

不过整场发布会，最令我意外的东西，是全新的安卓平板，Pixel Tablet。

疫情之下的产物 和国内的产品策略不同，Google 在很长的一段时间以内，借助兼容了 Android 应用的 ChromeOS 的笔记本和平板类产品，直接拿下了中低端电脑市场和大量的教育硬件的订单。

桌面级的浏览器和 Google 强大的云服务，搭配 Android 的软件生态，Chromebook 和 ChromeTablet 在教育市场上所向披靡，很多对电脑要求并不高的用户，在选择入门级电脑的时候，各色 Chromebook 的性价比简直是炸裂，如果你感兴趣，你甚至可以在「海鲜市场」上以极其低廉的价格买到各种 Chromebook 来尝鲜。

Pixel Tablet

作为平台的搭建者，Google 本身也一直是产品和服务的风向标。Google 自身的 Chromebook 系列的产品线年年更新，从最早的 Chromebook Pixel 2013 开始，一路到最新的 Pixelbook Go 和 PixelSlate，肉眼可见地可以看到 Google 对于 ChromeOS 生态的维护与推崇。

Pixel Slate

Pixelbook Go

而大屏 Android 设备，最后一次更新还是 2018 年所发布的 Pixel C，最有意思的是，这个有着独特磁吸式键盘的 Android 平板，其实是 Pixel 的硬件团队来完成的。

Pixel C 之后，Google 团队开始放任厂商在平板领域野蛮生长，自由探索，直到……2020 年新冠疫情开始肆掠全球。远程工作和线上课程让平板电脑的需求前所未有的旺盛。国内一线手机厂商也在充分吸取了 iPad Pro 等热销排头产品的工业设计之后，纷纷更新或者推出了自家的平板产品线，用上次旗舰级别的芯片（骁龙870 准确来说），键盘触控板手写笔一次到位全给配上：

小米平板 5 系列

Oppo Pad 

Vivo Pad

时隔 5 年， Google 决定在 2023 年再度推出 Andorid 系统的 Pixel Tablet 这一「官方指导产品」，毫无疑问是下定决心，收拢残兵，重新出发了。

Pixel Tablet

Android 大屏设计 我之所以如此之在意 Pixel Tablet 的发布，原因就在于，这是一个关键性的信号，那就是咱们可能要开始关注 Android 平台的大屏设计了。

原因其实很简单。全新的 Material You 或者说 Material Design 3 的 设计规范 比起上一代更加完善，在机器学习和完善的工具的基础上，对于不同尺寸的屏幕和分辨率有了更好的支持，此是其一。

Google 官方在去年发布新的设计规范和 Android 12 之后，还公布了单独针对大屏设备的 Android 12L 系统，并且提供模拟器和可供特定设备安装的系统更新，此是其二。

折叠屏设备的出现，直接成为了普通智能手机（5-6英寸）和平板类设备（8-11 英寸）之间的桥梁。折叠屏手机交互不仅涉及到 APP 在常规手机尺寸和类 Pad 大尺寸屏幕上的呈现效果，而且还牵涉到不同尺寸屏幕切换以及交互状态改变等因素。在越来越多的折叠屏手机上市之后，这类需求会反向推进传统小屏 APP 做好大屏适配，此是其三。

在 Android 折叠屏交互规范出来之前，微软早早地发布了 Surface Duo 的硬件，而且在 Fluent Design 的官方设计指南中，直接加入了双屏设计的规范，具体可以参看我的文章：

重磅！柔性屏和双屏来啦，设计师必学跨屏设计规范 我们总在期待 Next Big Thing，企盼下一次数字革命。

阅读文章 >

5000 字重磅干货！设计师必备跨屏设计规范（交互篇） 在上一篇文章《重磅！

阅读文章 >

如果微软这个翻车前科过多的企业让你觉得不够有信心，那么来看看 2019 年苹果申请的折叠屏专利吧：

iPadOS 和 macOS 在大屏界面上的协调统一，又何尝不是为 Android 的大屏设计提供一个良好的参考呢？微软和苹果在这一领域的探索，对于 Android 大屏界面设计的参考，我认为是第四个影响因素。

而 Google 下定决心，放下 ChromeOS 系统的 Pixel Slate 改用 Android 系统的 Pixel Tablet 更像是官方深思熟虑后认定时机成熟。

大屏设计要点

去年 Google I/O 大会上发布的 Material You 算是第三代 Material Design，现在官方也会称其为 Material Design 3，或者 M3，依然是由著名的设计师 Matias 所主导，在 Google 的整个设计团队协同之下完成落地。

最初的 Android 12 本身仅仅只是应用了一部分 M3 的设计功能要要素，比如说其中特别智能的「动态配色」，酸梅干超人的这篇文章当中有相对详细的介绍：

零基础 UI 入门六：最新安卓规范入门解析 安卓是由谷歌公司开源的，除 iOS 外的另一大手机系统，也是我们要学习规范的对象之一。

阅读文章 >

而面向大屏的 Android 12 L 的发布之后，M3 的设计规范中，可访问性设计这一章节当中，也相应地添加了「大屏幕设计」的相关规范。

关于这一部分的知识点，我将会梳理出相对重要的部分，更细致的内容可以前往 M3 的官网查看：

https://m3.material.io/foundations/adaptive-design/large-screens/overview

1、概述

整套设计需要考虑到横屏和竖屏两种不同的方向，基于响应式设计的精神，采用多列布局，借助网格系统，让内容和元素可以在不同尺寸的设备上显示，并且符合人体工程学的需求

1.1、响应式网格布局

1-边距； 2-分栏；3-列间距

随着界面尺寸和宽度的变化，网格的数量也会相应的发生变化。

1.2、断点

和响应式设计一样，断点定义了适合当前页面的 APP 的响应式布局。考虑到 Material Design 在总体视觉上的平衡，绝大多数的元素都尽量和 8dp 网格对齐，较小的元素，比如图标，则和 4dp 网格对齐。

2、布局 APP 基础布局是交互体验的基础，布局中可以承载较小的元素区域，比如卡片。

1-导航栏；2-应用栏；3-内容主体；

2.1、导航区域

导航栏在展开状态下通常使用 256dp 的统一宽度，折叠状态下为 72dp 。使用竖屏状态下，宽度不足的时候，导航栏可以适当缩窄适配。

1-抽屉式可折叠侧边栏；2-主体内容区域

2.2、容器

将具备关联性的元素打包呈现的方式为容器，容器氛围显式和隐式两种，但是不管哪种容器组件，都记得使用响应式尺寸，确保不同缩放状况下可读。

1-隐式容器；2-显式容器

隐式容器只是边缘不可见，实际设计和开发的时候都要赋予边界参数的。卡片是最常见的显式容器，通常使用显式容器是为了强化其内元素之间的关联。

上面是一个错误的演示。不要在未对整体布局进行调整的前提下，简单地将包含文本的容器进行简单的拉伸。

容器需要借助缩放来适应不同的屏幕尺寸。容器之间会出现嵌套的情况。在上方的案例当中，1 为卡片容器，2为列表容器，在内容主体作为父容器的情况下，内部的子容器需要使用统一的左对齐、右对齐或者左右两边对齐，而侧边导航栏中的子容器则可能是固定位置。

3、组件 组件需要随着屏幕尺寸和方向的变化，在填充方式、大小、对齐等方式上进行适当的变化。

左-折叠纵向视图；右-展开的横向视图

在缩放组件和布局容器的时候，可以根据实际情况，来考虑它们在不同屏幕上的缩放变化。比如底部导航栏变为侧边导航，原本移动端设备上的卡片容器，在大屏幕上变得更趋近于方形，从而更好呈现图片内容等等，按钮内的图标和文本可以锚定居中，横向放大的时候，也可以维持在对的位置上。

3.1、直接呈现

最直接的方式，始终是按照一定的比例来将原本移动端 APP 上的控件进行缩放，以适配大屏幕来使用。不过还有更好的方式。

3.2、组件交换

在不同屏幕尺寸下，不同类型的组件，有着类似的功能。比如之前提到过的移动端 APP 底部的 Tab 导航控件和平板上的侧边栏组件，就是可供互换的功能类似组件。而这种策略，使得 APP 大屏化之后，控件的大范围替换成为可能。

又比如，移动端的列表式表单可以和大屏幕上所用的弹出对话框进行互换。两者在功能上几乎完全一样，而且在不同屏幕尺寸之下，显得足够「本地化」。

下面是一些常见的可互换的组件对比列表：

3.3、响应模式

除了上述的缩放和组件交换的方式，还可以使用重新定位组件位置、呈现隐藏组件的方式来实现 UI 的大屏化。

在涉及到较大断点和大范围额外空间的时候，可以将原本隐藏的组件直接呈现在大屏幕上。比如在移动端上通常折叠起来的菜单，在大屏幕上直接以侧边栏的形式显示出来。

而在移动端上原本简单纵向排列的组件或者容器，可以在大屏幕上重新排版布局，这样更加贴合大屏的使用场景。

4、设备

在大屏的 Android 设备上可能会涉及到触摸板、鼠标、外置键盘、触摸手势 等多种交互模式。

不同的硬件接入 Android 平板所涉及的不同交互能够很大程度提升界面的可访问性。

外部输入设备通常是鼠标、触控板和键盘三种，它们所涉及的主要交互要素如下：

外部输入设备的常规交互，和交互之下的通常大家所预期的行为：

下面针对这些常见的交互进行详细梳理。

4.1、鼠标和光标的交互

当鼠标或者触控板连接 Android 大屏设备的时候，光标都应该出现在屏幕上。

在没有专门针对鼠标进行优化的 Android 设备上，鼠标单击理应和触摸点击的反馈相同。

当触发鼠标和触控板的次级按键（右键）的时候，会触发上下文菜单，也就是常说的右键菜单。

当光标悬停在可交互的组件上的时候，这些组件应当呈现并告知用户它们是可交互的。

当光标悬停于链接和图片上的时候，光标变为手型，用来强调光标下控件的可点击属性。

光标悬停于文本内容之上的时候，呈现出 I 型，强调文本内容可以选中。

用 I 型光标来强调选中文本的边界。

当光标在不可被选中的文本上时，不应该显示为 I 型，以上为错误演示。

在使用鼠标、触控板、触控笔选中文本之后，使用单一颜色突出被选中的文本，并且不要在选中区域周围显示触摸交互的控件。

如果用户直接用手触摸选中文本，则需要显示触摸控件，即使 Android 设备连接了外部设备，也需要显示。

在选中文本上点击右键菜单，能够呼出上下文菜单，即使是在带触摸屏的设备上，也需要如此。

4.2、鼠标滚轮和触控板手势

鼠标滚轮、触控板手势让大屏交互有更多可能性。

当光标位于列表上时，滚轮和触控板两指滑动手势支持上下垂直滚动，注意，只有光标所在的那个列表。

在触摸屏上，向上滑动，页面向下滚动。

使用鼠标时候，可以通过点击拖动来选择文本和图像。

使用鼠标的用户，可以通过鼠标滚动来让横向滚动的组件移动。同理，使用触控板的用户，应该可以通过双指横向滑动来滚动横向滚动的组件。

4.3、键盘交互

即使 Android 平板连接外置键盘的时候，设备的虚拟键盘都应该是可以被调用的。

连接外置键盘之后，虚拟键盘会自动隐藏到一角。

移除外置键盘之后，虚拟键盘会自动呼出。

用户可以通过物理键盘的回车键（Enter），来发送信息，确认操作。

用户可以通过空格（Space）来暂停和播放多媒体内容。

写在最后 Pixel Tablet 的出现更像是新的转折点，Android 大屏 UI 设计的需求在接下来会随着市场变化越来越多，大家又有新的事儿干了。

另外，关于折叠屏设计的规范，可以参考龙爪槐的守望者所翻译的下面的几篇：

Material Design 折叠屏设计指南（1）：概述 折叠屏使用柔性屏幕可以折叠或展开，根据你的需要无缝扩展可用的屏幕空间。

阅读文章 >

如何设计折叠屏？来看这份设计指南！ 最近做了HUAWEI Mate Xs手机折叠屏的相关设计，借此机会「趁热打铁」分享一手界面操作体验、适配技巧分享给大家，希望对各位设计师同学有所帮助和参考。

阅读文章 >

Material Design 折叠屏设计指南：完结篇 本文为 Material Design 折叠屏设计指南中文版译文第三篇，超多干货建议收藏。

阅读文章 >

Clideo 公司提供免费在线音乐剪辑工具「Audio Cutter Online」，让用户透过浏览器即可对音频格式进行剪裁和编辑，完全不用额外下载任何软件或是应用程序，适用于 Windows 和 Mac 操作系统。这个工具拥有非常友善操作界面，在编辑音乐时可以轻松使用不会遇到任何困难，使用者可利用拖曳方式选择保留或是裁切的音乐时间点，也能直接输入时间（以秒为单位）来标记段落。

Audio Cutter Online 不仅支持 MP3 格式，也能使用 OGG、WMA、WAV 和其他常见音乐格式，依照网站说明只需要三个步骤：加入音乐文件、剪辑上传的歌曲，完成后就能下载成果，值得一提的是还能为音频加入淡入、淡出效果，转换为 AAC、AC3、AIFF、APE、CAF、FLAC 和 M4A 格式。

Audio Cutter Online 网站链接： https://clideo.com/cut-audio

使用教学

开启 MP3 Cutter Online 网站后点选「Choose file」找到要编辑的音频文件，也能够从 Google Drive、Dropbox 云端硬盘直接汇入文件，完成后再将文件直接存回云端硬盘。

拖曳黄色框框左右两侧来调整要截取、保留的段落。

右上角可切换：Extract Selected 和 Delete Selected，预设为前者，如果选择后者则删除选择的范围，保留没有被选定的音乐段落（两个算是相反的选项），选择此选项会将前后保留的段落合并。

右侧可设定要裁切的音乐时间（以秒数为单位），要求更精准的剪切直接输入时间会更快速，右下角有淡入、淡出的功能选项，需要的话勾选就能自动套用效果。

左下角会标示最终音乐长度，可以从「Format」选择输出格式，包括 AAC、AC3、AIFF、APE、CAF、FLAC 和 M4A，设定完成点选「Export」就能将音乐剪辑裁切、导出为特定的音频格式。

MP3 Cutter Online 会有一个剪辑后的音频页面，用户可直接在网页播放预览，没问题的话点选右侧的下载按钮就能取得文件，或是直接保存到 Google Drive、Dropbox 云端硬盘。

值得一试的三个理由：

1. Audio Cutter Online 让用户透过浏览器对音乐进行剪裁和编辑

2. 以拖曳方式选择保留或是裁切的音频时间点，直接输入时间标记段落

3. 支持输出为 AAC、AC3、AIFF、APE、CAF、FLAC 和 M4A 格式

在线就能剪辑音频！这个免费网站太酷了！ 本文要介绍的「AudioMass」是一个免费、开放源码的线上音频编辑器，在浏览器中就能编修音乐，可从本机电脑上传、以网址汇入音频或是直接录音，编辑器会呈现像是一般音频编辑软件的波形图，利用鼠标就能进行修剪、裁切、剪贴或是加入更多效果，例如分段压缩、均衡器（Equalizer）、效果器、延

阅读文章 >

来自 Caitlin Brisson@Medium 的“How to Expand Your Strategic Impact as a Designer”，关于设计师如何打开格局提升战略 影响力 的若干行动建议。一如既往，个人学习之用，独享翻译之过程而共享其结果，全部内容仅代表原文作者 Caitlin Brisson 之观点。

图片来自 Hassan Pasha on Unsplash

我是一名设计师，不过去年有将近八个月的时间里，我同时还担任着增长团队的产品经理一职。这期间的工作非常辛苦，不过也让我了解了如何在产品管理与设计工作之间寻求平衡。如今我已回归到设计岗位，在此也愿将自己在担任产品经理期间的一些所得所感分享给大家，希望能帮助更多设计师了解如何提升自己在战略层面的影响力。

或许你会觉得这些与你无关，因为未必存在转岗需求。确实，在设计师职业生涯的头几年，大家更多是聚焦于设计能力的提升。但长期道路不止于此。到了某个阶段，你需要去探索如何提升自己在产品、业务和团队方面的影响力，如何花更多时间去思考问题，而不仅是徘徊于像素之间。

以目标优先级作为行动准则

图片来自 Estée Janssens on Unsplash

我在任职产品经理的日子里，同时仍要担负一部分设计师的职责，因此实际工作非常多样，包括向利益相关人进行汇报、产品路线规划、设计展望、设计执行等等。如何在这些工作当中寻求平衡，这对我来说是个重要的挑战。

作为一名曾经的教师，我很喜欢 SMART 目标管理方法（Specific，具体而明确；Measurable，可衡量；Achievable，可实现；Relevant，有相关性；Time-bound，有时限），通常会以季度和年为周期进行追踪。我的目标包含很多方面，涉及业务影响力，个人职业愿景，以及与设计相关的有意思的主题（例如全人群访问、设计文化等等）。为了实现平衡的状态，我借鉴产品经理的思维模式，对所有的目标进行优先级排序，进而确定所需投入的时间。

这一方式让我可以有策略性地关注自己的职能发展及个人成长。我可以更清晰地看到应该何时说不，何时赋权，进而在工作中找到平衡点，让自己的精力得以聚焦于最重要的事务上。具体建议：

每周、每季度都要设定目标。始终依据目标优先级来分配时间。 在大目标的框架下，对新增项目或需求的优先级进行权衡。这使你可以站在业务层面说不——以温和的、友好的、积极的方式。 一路上通常还要做更多舍弃的抉择，特别是在必须调整工作负荷的时候。要预先判断哪些可以妥协，哪些会造成严重影响。 无论你准备聚焦于怎样的 职业发展 路径，随着不断进阶，需要处理的事情总会层出不穷。你必须对优先级有所决策，因为只有你能帮助自己实现聚焦。随着职能范围的扩大及影响力的提升，你将越发需要以优先级决策作为行动准则来提升工作效益。

以正确的基调应对改变

图片来自 Nick Fewings on Unsplash

去年秋天，我们刚刚完成产品增长的路线图规划，即将开展相关工作，却发现 app 当中一个关键功能出现了问题，因此全员调动进行处理。

一周之后，我们的整个路线图都发生了变化，参与解决问题的人员数量扩张了一倍，同时还在处理后续出现的新问题。每个人都压力倍增。虽然大家都在询问接下来的方向，但团队当时真正需要的未必是具体答案，而是镇定、安心、正向的环境氛围，从而使团队重新凝聚。我也有参与创造这样环境的责任。

展现人性化，了解他人在改变曲线（Kubler-Ross change Curve）当中所处的位置，保持和善、耐心、同在，保持交流，并为他人提出的问题或顾虑提供充分的讨论空间。 展现坦诚，但也要注意表达方式。当来自外部的意见和反馈没有实际帮助时，要尽可能维护自己的团队。 你不必知道所有答案，不必假装知道方向，但要能把大家团结起来共同探索。 作为设计师，我们经常需要跨部门开展工作。这使我们都能有机会在团队文化的建设中发挥自己的价值。尽自己的一点所能，让团队在应对挑战时能更好地凝聚，这将有利于提升你的影响力和领导力。

以数据作为探索与评估的工具

图片来自 Isaac Smith on Unsplash

作为设计师，我曾经非常依赖于我的跨职能合作伙伴来帮我回答定量问题。

随着我开始承担产品经理的职责，大家也开始向我询问转化率方面的问题，另外我还需要向利益相关人分享每周的数据趋势。因此我快速补习了数据分析方面的能力，并研究了我们自己的数据模型。这让我能够开始独立解决数据方面的问题，跑一些常规追踪，更深入和量化地探索用户的行为模式。我开始有针对性的在设计当中添加统计事件，并手动制作一些可视化的数据报告；这个方式在团队内逐渐铺开，并成为了改善跨职能沟通合作的有效工具。

所以我会建议大家更好地拥抱数据：

花些时间了解你产品所在领域的数据分析特点，以及支持这些特点的典型分析工具。 通过数据辅助分析用户旅程，抓到最需要投入资源改善体验的点。 设计交付当中要包含相关的统计事件说明，便于其他团队的同事评估和实现。 影响产品设计决策的一个关键能力就是“讲故事”。将量化数据充分融入设计流程，结合定性分析，你便能有理有据地讲出一个具有战略影响力的好故事。

让长期路线成为团队共识

图片来自 Vista Wei on Unsplash

长期愿景非常重要，但也很容易在创造出来之后被大家遗忘。任职产品经理期间，我过于聚焦在设计开发流程当中，而没有很充分地将长期路线作为与利益相关人进行沟通的工具。

当我们的团队准备进入到项目的第二个阶段时，一些利益相关人开始对我们接下来的发展方向感到困惑。这让我意识到我们不能将自己封闭在日常的工作流程当中，否则团队将逐渐失去对长期愿景的感知和共鸣。

花些时间从细节工作中跳出来，退身展望更大的图景。 让自己所在的一线团队始终与长期目标保持对齐，并切实以长期目标作为制定决策和权衡优先级的标尺。 将长期路线规划作为工具与合作伙伴及利益相关人进行沟通，全团队形成共识，保持参与。 设计愿景，设计原则，流程共识——这些都是身为设计师可以去创造的协作与沟通工具，能够有效地帮助团队从战略层面制定决策，保持协同。考虑清楚它们的具体使用方式及沟通对象，让它们切实派上用场。

结语 全职从事设计工作令我感到兴奋，但我仍然对担任增长团队产品经理的经历心存感激，因为我所学到的东西能使我在产品设计师的职业发展上取得更大的进步。我也希望我所分享的这些经验同样能给各位带来参考。

如何辨别自己是有影响力的设计团队，而非作图机器？ 译者简介：贺雪，从软件工程到交互设计，永远感觉世界真奇妙的小设计一枚。

阅读文章 >

欢迎关注作者的微信公众号：「Beforweb」

相信很多同学在上一篇有留意到， 体验设计 中包含了以用户体验为中心增加和修改产品功能的目标，既然都从用户分析到产品原型输出，界面输出一条龙全套完成了，那还要 产品经理 做什么？

上篇回顾：

基础全扫盲！用大白话帮你掌握用户体验设计（一） 今天再来继续一个比较现实的话题 —— 用户体验是什么？

阅读文章 >

在这一篇内容中，我们就来解析这个大家非常感兴趣的话题和疑惑， 体验设计师 和产品经理的关系。

产品经理 PM（Product Manager），是负责规划产品功能和推进它们落地实现的管理岗位。在互联网团队中，产品经理通常就是这个团队的大脑，他们提供想法，而其它岗位负责实施。

产品经理也是一个解释起来比较麻烦的职业，职能既广泛又抽象，这一点和体验设计师非常相似。我一般将它的职能划分成三大部分：

第一，需求分析，就是决定项目下一个版本要开发哪些产品功能的分析阶段。这是产品经理工作中最重要，也最困难的一环。无论做出什么决策，都意味着后续要投入大量的人力和时间成本来实现对应功能。所以为了给出有效的需求，产品需要在这个阶段做大量的分析工作，不仅要分析市场行业，也要考虑用户体验，技术指标，预算成本，甚至还需要综合团队内部的建议。这一点我们会在后面做进一步的解释。

第二，需求输出，则是在确定版本要做什么功能以后，将所有功能的明细、逻辑、要点进行系统地输出，包括需求文档、产品原型、需求会议等。

一个合格的产品经理，一定会通过合理的方法来记录和分发版本的需求内容，确保需求信息可以查看和追溯，在团队内部流通无阻。虽然需求分析是一个产品经理的灵魂，但需求输出就是它的骨架，是这个岗位最基本的职业素养和能力表现之一。我们可以通过查看产品经理输出的文档、原型或 PPT，来评价一个产品的基本功如何。如果在真实项目中，产品经理输出需求只有 “口述”，那无疑是一个不称职且不合格的 PM，这会为设计师的工作带来巨大的挑战。

第三，项目管理，进入项目开发阶段后，分配并推进各岗位按目标展开工作的过程。虽然这看起来像项目经理的工作，但是一般互联网团队是不配备项目经理的，由产品经理负责。项目管理是产品经理综合能力的直接反映，不仅要具备团队管理能力、沟通能力、情商，还需要对涉及到的岗位、职业、行业有深入的了解，只有掌控全局，才能有效的分配任务和预估时间。

以上就是对产品经理基本工作的简单描述，可以肯定的是，这个岗位所需的知识和技能量也是相当可观的，不管是广度还是深度，确实是高于体验设计的。

业内一直流传一句话，产品经理是距离 CEO 最近的一个岗位，就是因为他不仅要做重大的商业决策，还要应对琐碎的项目管理。这种工作经历为更宏观的企业管理提供了良好的开端。

体验设计师和产品经理的主要职能重复，集中在需求的分析上。体验设计师需要花费大量的时间做产品分析、用户研究，然后再给出需求分析结果。既然体验设计师都在做需求了，那产品经理不就可以开始摸鱼，管管项目进度就可以了吗？这里最大的误区来源，就是 —— 以用户体验为中心的设计，并不是产品功能设计的唯一指标。这句话建议大家默写十遍，从今以后不要再对产品设计的认知仅仅局限在用户体验中。

前面说过，产品经理在分析需求的过程，除了用户体验外，还要考虑市场行情、政策指示、技术门槛、投入预算和时间成本。有大量的需求，并不是以用户为中心提出的。比如我以前从事的海淘行业，购物结算模块三天两头有新需求大改，并不是用户觉得不好用，而是海关进口关税政策朝令夕改，针对买家购买保税仓商品的记税、报税模式三天两头调整。

这就导致产品必须先分析解读清楚政策条例和相关法规，再变更购物流程，调整页面显示字段和计算规则。详细过程就不阐述了，每次政策的调整都需要投入海量的精力做分析，而这些变动和用户怎么想没有关系，他们必须接受。当然，包括微博、知乎等平台上，用户评论会带上所在地 IP，你们觉得这是用户想要的功能吗？

还有，商业战略层的考量也是影响产品功能设计的重要因素。比如早前的支付宝强推熟人社交，企图和微信竞争用户黏性。微信强推视频号，希望从抖音手里抢回用户注意力。还有咸鱼上线社区、饿了么上线视频直播、哈罗单车上线本地生活模块……

这些看起来很 “荒诞” 的功能，显然不可能是以用户为中心的维度延展出来的，而是商业战略上的部署和尝试，用户依旧只能被动接受。除此以外，在 C 端类型的产品中，还有一部分功能的设计是完全根据产品经理的 “灵感” 推动的，比如微信的在看、拍一拍，蚂蚁森林偷能量，淘宝二楼等。

前面讲那么多，就是为了说明一款成熟的产品，需求来源是多种多样的。无论用户体验有多重要，它也只是产品设计中的其中一个环节。

当体验设计师承担体验部分的需求分析和制定时，不代表产品就没有事情做，正常情况下他还有一堆和体验不相关的事情需要分析和处理。或者，产品经理给出和用户无关的需求以后，体验设计师就要辅助产品经理进行 “需求善后”。通过产品分析和用户研究，尽可能以符合用户体验的目标对它们进行完善，即使用户可能并不关心它们。

体验设计师的工作是具有辅助性质的，一方面在产品经理已有的需求基础上，提出一些新的符合用户体验的需求，另一方面是在产品经理给出需求后，通过体验分析来检测和优化这些需求。

体验设计师既不能取代产品经理的工作，也不能代替产品经理行使项目管理的职能，所以不要再错误的认为体验设计是把产品工作做了以后让他无事可做。

本篇主要梳理体验设计师和产品经理的工作差异，要想解除误区，就必须理解产品经理的主要工作内容有哪些。因为这不是一篇专门解释产品工作的系列，所以做了大量的简化，之后有机会会专门开一部分干货来分享产品的介绍。

下一篇，我会针对体验设计的局限性和误区进行解读，帮助大家正确认识这个岗位的难点和缺陷在哪里。解除体验设计对新手的神秘感，和帮助大家能真正客观的认识这个职业。

近万字长文！从头梳理B端产品经理和体验设计师的工作职责 近期，一些项目经理、产品团队长、设计师经常问笔者一个问题：“B 端产品经理和体验设计师的工作职责分别是什么？

阅读文章 >

欢迎关注作者的微信公众号：「超人的电话亭」

Rgbstock 是一个 100% 免费图库 ，收录超过 100,000 张相片素材让使用者免费下载！就如同一般在线图库网站，将各种相片主题依照类型分门别类，用户可利用分类页面浏览或是输入关键词搜寻，当然也会有大家熟悉的最新图片、热门图片或随机显示图片等功能，操作上很简单，找到要使用的相片，下载后就能将档案保存、运用在其他想使用的地方。

不过 Rgbstock 限制使用者需要先注册帐户才能下载图片，但是注册完全免费，或是使用 Facebook、Google 账户直接登入，虽然 Rgbstock 分类很多，也能透过搜寻或标签功能来查找相片，但我实际使用的心得是图片质量较参差不齐，也没有一些大型图库来得这么精致（要找找素材还行），而且图片方面并没有提供使用者多种尺寸或格式，必要的话还是要自行编辑。

依照授权说明，Rgbstock 相片可使用于数字用途像是网站、也能用于个人的计算机、手机桌面做为背景，使用在杂志、报纸、书籍、小册子、传单、教科书等印刷材料用于说明目的，但禁止作为销售或重新分发的主要内容。

Rgbstock 网站链接： https://www.rgbstock.com/

使用教学

开启 Rgbstock 图库后从首页搜寻字段输入要查找的相片关键词。

或是前往分类页面，依照相片主题以大分类、小分类进行排序，网站上方选单也能显示最新相片、热门相片和随机显示。

在没有登入 Rgbstock 账号前，相片页面不会有下载按钮，需要先注册账号进行下载。

注册完全免费而且非常简单，注册、回到 Email 收取验证信，点选信中的确认链接即可启用账号。

分类页面预设使用下载次数进行排序，也能切换为新增日期，不过 Rgbstock 没有太多筛选功能，基本上很难将范围缩小、快速找到合适的相片素材，浏览时会显示来自 Shutterstock 付费图库相片，也是赞助商提供的内容，若不想付费购买图片记得只要锁定 Rgbstock 免费相片就好。

进入相片页面后点选「Download」就能将原始图片下载使用，如果没看到下载链接，可能是你还没有注册登入 Rgbstock 账号，需要先登入才能下载图片。

从相片信息页面中还能看到相片被检视的次数、下载次数，右侧会有相片分辨率、新增日期、拍摄使用的相机等参数，用户也能透过关键词来找出更多类似的相片素材。

值得一试的三个理由：

1. Rgbstock 是一个 100% 免费图库，超过 10 万张相片素材免费下载

2. 透过搜寻或标签来查找相片，也有提供大小分类功能

3. 可使用于数字用途，但是禁止销售或重新分发

免费可商用！图标、插画和图库应有尽有的素材站「Reshot」 本文要推荐的「Reshot」是一个整合、收录三大类型素材免费图库，网站提供超过 40000 个 SVG 免费图标、超过 1500 个插图素材和超过 25000 张相片，这个网站最大特色是素材都能实时下载并适用于商业用途，无需付费，使用时也不用标记出处来源。

阅读文章 >

前言 小到生活用品，大到娱乐设施，现代生活，处处都存在着周边产品。若是有个小灵感，想动手尝试做个 周边产品 ，我们又应该从何下手？

这篇文章将给大家介绍一些小思路，纯属个人经验，如有不足之处，还请大家互相留言讨论指正。

什么是周边产品 百度百科给出的解析是：周边产品指利用动画、漫画、游戏等作品中的人物或动物造型，经授权后制成的商品。国内习惯用周边产品来定义动漫相关产品。而在国外，这类商品被统称为 HOBBY（业余爱好，嗜好），有硬周边（CORE HOBBY）与软周边（LIGHT HOBBY）的区分。像扭蛋、挂卡、模型、手办这样没有多少实用价值纯观赏收藏的被称为硬周边，相对价格较高；另外常见的借用某个动漫形象生产的具有一定实用性的如文具、服饰、钥扣、手机链等商品被称为软周边，相对价格便宜。

但随着时间的发展，周边产品已经不局限于上面的形式了，可以是一张图片的衍生品、也可以是品牌宣传物料。但前提制作方拥有该内容的版权。

周边产品规划 周边规划需要考虑：

1. 基本元素：

可以是单个图片、IP 形象、或品牌等。

以微信黄脸为例，我们先介绍下其背景。

2016 年 8 月 29 日上线了微信大黄脸表情后，受到了用户的喜欢，同年 11 月，就把讨论度最高的几个表情搬上了聊天界面。所以这些小黄脸都可以成为基础元素去制作成周边产品。

2. 制定目标：① 定位 ② 受众 ③ 共鸣

① 微信黄脸表情的定位是：

微信官方 IP 品牌，通过黄脸形象映射人们在日常使用微信交流中产生的各种情绪。希望通过对最典型情绪的捕捉，结合当下最流行的网络词汇，创造出趣味、潮流、艺术性的内容和产品。在用户和微信间建立情感连接。

那么其周边的定位应该是能让用户在现实生活中也能触摸到的表情。

② 受众：

根据定位可以拟出用户画像，喜欢发微信黄脸的人群大部分是学生群体以及上班族，这类人群喜欢好玩性价比高且又有点实用的东西。所以产品的售价也不能过高。

③ 共鸣：

在前期，微信黄脸需要引起用户共鸣的话，形象不能有太大的改动，能够一眼就能 get 到是微信界面里面的表情。所以也不能做太个性化的设计。

因此在 2018 年推出了微信黄脸的首批周边产品，基本都是延用了微信黄脸原有的基本型：

微信黄脸冰箱贴

3. 周边选品：

在首批产品获得大家的认可之后、需要尝试更多周边方向，那么可以从以下 4 个方向动手：

选定方向之后，就需要考虑周边选品的原则：

① 全年规划性（有效明确品类把控整体节奏）

② 多档位、丰富性（确保品类满足多种需求）

③ 设计符合品牌调性（让用户有品牌认同感）

随着时间推移，微信黄脸也根据不同的时间定位、目标受众、预期共鸣点去调整产品方向：

微信黄脸日常周边产品（目标人群衣食住行类）

微信黄脸新年周边产品（节日限定类）

微信黄脸生日礼盒（个性化定制类）

制作周边产品注意事项 1. 制作周边的基础元素必须有版权或是外观专利。如果与工厂或通过软件联系的商家合作必须签订协议（确保不会被滥用）。

2. 制作内容 RGB 为电脑显示色，CMYK 为印刷色。一般交给工厂的格式都应该是 CMYK，不然实物会容易偏色，甚至直接变成别的颜色（补色）。

3. DPI 指每英寸的像素，也就是精度。周边不同对应分辨率要求也不同，最好是矢量，如果是位图需要 ≥300dpi，精度不够会让图案变成马赛克影响成品。

4. 预留出血位，印刷时在裁切位加一些延伸图案，这样以避免画面主要内容被裁切。设计时预留 3mm，千万不要把重要的字和图案放在出血位里。

5. 打样：在产品生产之初前做一个校样，根据样品实物调整你想要的效果。符合还原效果可以签样生产，不符合可以根据现有样品与生产方协商调整。

6. 不同材质的产品生产周期不同，还需考虑产品的起订量以及是否需要开模，特殊形状周边需要模具制作，周期相对较长以及成本增加。

体现周边价值 周边产品如果能够在内容上体现一些态度与价值观，会引起更多的共鸣。还是以微信黄脸为例：在 2018 – 2022 年期间，微信聊天面板更新了更多的小黄脸。

其中在 2020 这个特殊的年份，选取了「加油加油」以及「旺柴」这两个表情为基础，在内容设计上做了一些延展，选取了 T 恤作为载体（因为 T 恤上的图案既能表达穿衣者的态度、同时也能够影响迎面而来的人）。

希望通过微信黄脸的周边产品能够鼓励大家，并宣传一种积极乐观、向前看的生活态度。

微信黄脸T恤（加油加油款）

微信黄脸T恤（向qian看款）

2021 年还用了「微笑」和「苦涩」做了另外两款黄脸 T 恤，从中不仅能获得一件周边产品，也是希望通过黄脸周边能引起大家共鸣，共勉！

微信黄脸T恤（微笑款）

总结 以上仅个人在制作周边产品时的一些方法与想法，浅谈如何构思制作周边产品，关于不同周边产品的制作，还是有很多学问的，也欢迎大家讨论交流，或是告诉我们还想看到微信哪些周边？

（除此之外还有一类是可以进行单件定制的，就是日常大家常说的 DIY 定制，如果没有要量产售卖的话，在已经成型的一些产品上印制自己的图案生产，一定意义上也是可以成为自己的周边产品的哦，赶紧动手起来吧。）

自己画的插画、IP 形象、个人品牌如果能从线上变成线下，生活中得多多少乐趣！生活中不缺周边产品，缺的是你开始动手的心！

如何从0到1做出一款潮玩？来看腾讯高手的实战案例！ 小方鹅 Cubie 是企鹅电竞官方的 IP 形象，一个拥有有趣灵魂的的游戏机方盒子。

阅读文章 >

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