hello，大家好，我是小肥肥，又和大家见面了。上篇文章和大家聊了聊，怎么使用制作立体字效海报。这次我们换个角度聊一聊。

hello，大家好，我是小肥肥，又和大家见面了。

上篇文章和大家聊了聊，怎么使用制作立体字效海报。这次我们换个角度聊一聊。

没看过上篇的朋友可以戳这里?

字效海报设计怎么做？3个案例教会你！ 说到海报设计中的字效视觉，最好表现的就是立体感了，那我们今天就来分享以下 3 种不同的字效案例做法。

阅读文章 >

那么如何不使用 3D 软件就设计出立体效果？不知道大家是否有同样的疑问呢？

这篇文章，我们就借以下 3 个案例来了解下，如何不用 3D 软件，也能做出效果非常不错的 立体海报 。

首先第一个方法，就是增加画面的层次，做出多个层次之间的空间和距离感。比如下面这个折纸海报，相对于普通的文字海报来说，以剪纸的效果翻卷开，漏出底下第二层，再以投影凸出两层之间的距离感。立体效果就自然出来了。

相同的方法，学会后还能做出以下效果。

视频版教程

当视频无法加载时请刷新页面， 或前往PC获得最佳体验。

第二个方式，就是使用图层样式，给字体增加体积。比如以下这些海报，都是使用图层样式制作。

我们以下面的透明玻璃海报为例，来学习一下制作方法。

视频版教程

当视频无法加载时请刷新页面， 或前往PC获得最佳体验。

第三个方式，就是将文字形体化。意思就是将文字作为基础元素，拼合成一个有体积的物体。比如以下这些海报，都是相同的手法。

我们以下面的国庆海报为例，来学习一下制作方法。（方法并不唯一，大家选择最方便的即可）。以下是具体的制作教程。

视频版教程

当视频无法加载时请刷新页面， 或前往PC获得最佳体验。

这次的分享就到这里，大家有什么想学的可以给我留言~点赞越多，更新越快，下次再见拜拜

快速出效果！8 个简单易上手的 PS 字效教程 Hello 朋友们，我又来教大家一些非常实用的小技巧啦~ 上期文章： 上一期我分享了些稀奇古怪（但有用）的小技巧，这次我来分享 8 个字效小技巧，简单易学，每个技巧都能帮你快速做一张字效海报出来，快学起来叭！

阅读文章 >

hello，大家好，我是小肥肥，又和大家见面了。上篇文章和大家聊了聊，怎么使用制作立体字效海报。这次我们换个角度聊一聊。

hello，大家好，我是小肥肥，又和大家见面了。

上篇文章和大家聊了聊，怎么使用制作立体字效海报。这次我们换个角度聊一聊。

没看过上篇的朋友可以戳这里?

字效海报设计怎么做？3个案例教会你！ 说到海报设计中的字效视觉，最好表现的就是立体感了，那我们今天就来分享以下 3 种不同的字效案例做法。

阅读文章 >

那么如何不使用 3D 软件就设计出立体效果？不知道大家是否有同样的疑问呢？

这篇文章，我们就借以下 3 个案例来了解下，如何不用 3D 软件，也能做出效果非常不错的 立体海报 。

首先第一个方法，就是增加画面的层次，做出多个层次之间的空间和距离感。比如下面这个折纸海报，相对于普通的文字海报来说，以剪纸的效果翻卷开，漏出底下第二层，再以投影凸出两层之间的距离感。立体效果就自然出来了。

相同的方法，学会后还能做出以下效果。

视频版教程

当视频无法加载时请刷新页面， 或前往PC获得最佳体验。

第二个方式，就是使用图层样式，给字体增加体积。比如以下这些海报，都是使用图层样式制作。

我们以下面的透明玻璃海报为例，来学习一下制作方法。

视频版教程

当视频无法加载时请刷新页面， 或前往PC获得最佳体验。

第三个方式，就是将文字形体化。意思就是将文字作为基础元素，拼合成一个有体积的物体。比如以下这些海报，都是相同的手法。

我们以下面的国庆海报为例，来学习一下制作方法。（方法并不唯一，大家选择最方便的即可）。以下是具体的制作教程。

视频版教程

当视频无法加载时请刷新页面， 或前往PC获得最佳体验。

这次的分享就到这里，大家有什么想学的可以给我留言~点赞越多，更新越快，下次再见拜拜

快速出效果！8 个简单易上手的 PS 字效教程 Hello 朋友们，我又来教大家一些非常实用的小技巧啦~ 上期文章： 上一期我分享了些稀奇古怪（但有用）的小技巧，这次我来分享 8 个字效小技巧，简单易学，每个技巧都能帮你快速做一张字效海报出来，快学起来叭！

阅读文章 >

编者按：B端产品只用用组件就可以做，那设计师的价值是什么呢？作者总结了4个方面，帮B端设计师找到自己的工作重点。相关文章：如何体现B端产品的设计价值？

编者按： B端产品 只用用组件就可以做，那设计师的价值是什么呢？作者总结了4个方面，帮B端 设计师 找到自己的工作重点。

相关文章：

如何体现B端产品的设计价值？我总结了3个方面！ B端设计师如何体现自己的价值？

阅读文章 >

有同学问过我一个很有代表性的问题：

“我所在的公司已经开始用组件来做产品了。对于简单的产品，设计师把组件和页面框架做完后，前端就直接用组件库按照规则去搭建页面了。文案也可以由产品和开发直接对接。

设计师已经不需要每个页面都出图了。在这种工作流程中，设计师是不是就不那么重要了？我们 B 端设计师的工作任务和价值又是什么呢？”

这其实是一个很好的问题，值得每一位 B 端设计师都去思考。现在很多公司都已经开始使用组件库来为产品的研发过程降本提效了。那使用组件就真的可以替代设计师的大部分工作了么？

一、组件的核心功能是什么 我们先来看看组件的核心功能是什么。组件的作用有很多，其中有两点最为突出：

1. 降本提效

组件的初衷不是为了替代设计师。组件的本质是一种降本提效的工具。在工作内容上，可以将不必要的、重复性劳动的时间节省出来；在工作流程上，便于设计师与开发做交接和协作，减少沟通成本。

2. 质量保障

不论是设计还是开发，使用组件后都可以在一定程度上保证工作质量。组件规范了前端和设计师的工作方法，建立了底层的合作机制，设定了设计和开发的质量底线。基于组件完成的产品通常具备：

一致性：相对一致的表现样式，设计风格和交互体验上都可保持统一； 可用性：对于用户来说具备最基本可操作性和可识别性； 标准化：符合基本审美标准，虽不会很亮眼，但也不会很难看。 但对于一款好产品来说，仅达到基础合格线是远远不够的。组件能替代的仅仅是大部分重复性的页面。面对变化多样的业务需求，设计师还是需要做很多非基础性、非重复性的设计工作。

我们也要建立起一个重要的认知，那就是：

做组件不是设计目标，而是一种为业务赋能的手段和方法。

能够为业务带来正向影响、助力业务发展的组件才是有效的。

二、设计师的工作重心有哪些 设计工作很注重专业与实践相结合，大多数情况下，能为业务赋能的设计行为，才能体现 设计价值 。在此过程中设计师的工作内容和重心可以分为以下几点：

1. 深挖业务诉求，优化体验

一款好的产品，质量不会仅停留在合格线。设计师可以把更多的时间和精力放到更有价值的工作上去，关注业务目标和用户需求，对业务逻辑做深度理解和剖析。不仅仅是在界面细节的表现手法上下功夫，还要用系统性思维为整个产品做全方位的体验优化。

2. 提升组件专业性，赋能业务

很多业务领域有其独特性，比如金融类组件和政务类的产品页面列表内容就有很大区别。这就使得单一的组件在应用的过程中可以被再次组合、拼装和沉淀。

针对不同的业务领域，将高频使用的组件结合业务特性，进行更为专业的沉淀也很重要。这类组件使用起来也会更加得心应手、加倍提效。

3. 提升组件易用性，规范使用

组件并不是一劳永逸的设计工具，它需要紧跟业务的步伐迭代更新。只有当组件的质量达标，具备了一定的稳定性和易用性，才能被设计师和开发高效、高质地使用，更好地支持业务需求。

因此，除了建立组件的设计规范，组件如何被更新、怎样被同步给相关方、怎样才能被正确地使用，也是影响产品最终质量的关键因素。

4. 优化检验流程，排查问题

这里所说的「检验」包括两方面工作内容：

对于研发质量的检验； 对于产品体验的监测。 先来看看对于研发质量的检验，我们可以分为两部分内容：

设计还原度走查：即对于开发完成设计稿后的质量检查； 组件应用质量走查：即排查组件的使用问题，判断设计和开发的使用方式是否正确。 对于这两类走查，发现问题时不仅要及时纠正，还要思考问题产生的原因，从根本上解决和杜绝类似问题。

再来看看对于产品体验的监测。其实很多大厂都提出过关于检测产品体验和设计质量的方法及模型，我们熟知的有 Google 的 HEART 模型和 GSM 模型、蚂蚁集团的 PTECH 模型和「两章一分」模型等等。

产品体验度量设计指南（一）：谷歌HEART模型 随着互联网流量红利的消失，互联网进入了以产业互联网为代表的下半场，各大企业的关注点聚焦到了如何获取企业及行业利润上来。

阅读文章 >

设计师和产品想法不一致怎么办？试试谷歌的GSM模型！ 我们为什么要使用 GSM 模型 常规工作中，需求往往由 PM 发起，UE 团队到底如何跟 PM、FE 等团队成员协同，达成目标共识，是我们值得讨论的。

阅读文章 >

如何量化用户体验？试试阿里这个新出的「两章一分法」！ 互联网下半场，所有的比拼都在产品体验；然而“体验”是一个非常抽象的词，我们怎么把一个抽象的概念拆解成可落地执行的策略，作用到企业中后台产品上，怎么衡量策略的有效性，这一直是我们团队面临的重大课题。

阅读文章 >

因为产品的评估方式本就是多维度的，不同的产品又有不同的评价标准，所以大家各自沉淀、百花齐放。不过参考和使用这些方法的原则只有一条：适合自己需求的工具，才是好用的。

设计自身的价值是全链路的、端到端的、内循环的。设计师不光用手，更应该用心和脑去思考和解决问题。可以说，组件就是帮助设计师解放双手的不二法门。

设计师的思维和方法不一定会决定产品的生死，但足以帮助产品实现质量和体验的升级。也正因如此，产品才能在市场竞争中走得更为长远。

设计师如何描述 B 端业务的核心价值（上） 编辑导语：在很多互联网人的印象里，B 端设计师就是拖拽组件进行拼接，这导致 B 端 UI 设计师在项目流程之中处于被动的位置。

阅读文章 >

6000字干货！设计师如何描述B端业务核心价值（下） 编辑导语：B 端设计师在大多数互联网眼中就是拖拽组件，进行组装的一个岗位，但其实他有着自己的价值。

阅读文章 >

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

10 月 12 日晚间微软的新品发布会上，Surface Pro 9、Surface Laptop 和 Studio 2+ 显然是大众期待的拳头产品。其中 Surface Pro 9 干脆整合了原来的 Surface Pro 8 和 Surface Pro X 两个系列，在 CPU 平台上可以选购 12 代处理器...

10 月 12 日晚间微软的新品发布会上，Surface Pro 9、Surface Laptop 和 Studio 2+ 显然是大众期待的拳头产品。其中 Surface Pro 9 干脆整合了原来的 Surface Pro 8 和 Surface Pro X 两个系列，在 CPU 平台上可以选购 12 代处理器和基于 Arm 架构的 Microsoft SQ3 处理器的版本。

但是最吸引我的，是藏在这堆高端硬件里面，面向肢体障碍用户的鼠标无障碍套件。它的英文全名为 Adaptive Accessories Kit ，它主要是为了方便这些用户更好地使用鼠标、方向键访问电脑。

这套鼠标无障碍套件是一个完整的系统，包括一个可以最多连接3个设备的 Hub，一个鼠标核心模块，其中集成了左右键和滚轮，以及一个可编程的按钮模块。鼠标模块可以搭配不同的组件变成不同大小、不同角度的完全体鼠标，而可编程按钮则可以通过替换顶部组件来变成方向键、摇杆等输入设备，所有的这些组件本身都支持蓝牙连接，并且都支持标准的 USB-C 接口来接驳和充电，而 Hub 最多可以接入3个额外的第三方有线设备。

微软的这套无障碍输入套件，在可访问性设计上，简直是令人惊艳的存在。借助日渐普及的 3D 打印技术的加持，核心模块可以方便的兼容各种各样肢体不健全、行为障碍的用户，这种核心+定制化拓展的思路，不仅惠及残障用户，而且也为未来的硬件设计打了一个样。

不过在无障碍硬件交互上，微软很早就开始了尝试。

微软设计负责人专访：我们是如何创造双屏设计的？ 根据新浪数码的消息，微软去年年底公布的双屏手机 Surface Duo ，最终确定将于 9 月 10 日在美国上市发货，定价 1399 美元（约合 9700 元）。

阅读文章 >

起点：体感输入设备 Kinect

Xbox one Kinect 控制器

作为一种体感输入设备，Kinect 在最早的 Xbox 360 系列上取得了巨大的成功，和任天堂的 Wii Remote 不同，Kinect 借助以色列公司 PrimeSense 的结构光和红外投影仪技术，直接捕捉用户动作，而无需手持控制器，最初面世的时候，为从未接触 Xbox 的新用户带来了新颖的体验。

不过这一策略在 Xbox One 系列上市时并未发挥作用，没有得到市场的认可，并导致 Kinect 设备最终在 2017 年彻底停产。但有意思的地方在于，微软在大量的用户负面反馈当中，捕捉到了一个有趣的信息：

「……很多有肢体以及精神障碍的残疾儿童父母反馈，Kinect 让他们的孩子最终有机会享受到游戏的乐趣。」

这让一直在审视 Xbox 和游戏对微软存在价值的高层，开始认真为有肢体障碍的用户研发可访问性更好的游戏设备。

虽然 Kinect 的这套光学技术最终没有被延续下来，但是在可访问性设计上的探索倒是由此起步。

进化：Xbox 无障碍游戏控制器

肢体健全的用户可以轻松操控手柄或者键盘鼠标完成游戏操作，但是有肢体障碍的用户想要玩游戏，要能「掌控」游戏设备本身，就得灵活借助身边的素材来魔改才有可能，而不同程度、不同类型的残障用户所面临的情况也千差万别，而为残障用户所设计的已有输入和游戏设备的标准也不尽相同，我们触手可及的网络和游戏，残障用户面对它们的时候举步维艰。

2014 年微软工程师 Matt Hite 在 Twitter 上浏览信息的时候，注意到一个名为 Warfighter Engaged 的非营利组为受伤的退伍军人定制游戏设备的照片，这一操作让他找到了一个不错契机。

看到照片的 Matt 随即联系了 Warfighter Engaged 的负责人 Ken Jones ，并建立了联系。2015年，以此需求为切入点，Matt 拉来一组微软 Xbox 部门的工程师组织了一场 黑客马拉松 ，并尝试设计一款能够满足不同肢体障碍用户的游戏设备，提供给 Warfighter Engaged。

这场活动得到了微软高层的肯首，而这次黑客马拉松所探索的成果也获得了产品化的机会，这就是后来的 Xbox 无障碍游戏控制器。

罹患脊髓性肌肉萎缩症的 Steven Spohn 正在同微软的工程师测试Xbox无障碍控制器

2017 年，脱胎于原始 Xbox 游戏手柄的Xbox无障碍控制器套件正式问世。它的表面上有两个可以完全自定义的巨大按键，并且保留了大尺寸的方向键和菜单键，相当一部分肢体障碍用户可以借助它完成基本的操作。

而它应对类型繁多的肢体残障用户需求的核心，则藏在它的背面，19 个标准 3.5mm 接口，搭配左右两侧的 USB 接口，它可以接驳市面上绝大多数的第三方无障碍控制器，比如 PDP 单手操纵杆、高灵敏度的按键模组、用嘴进行操控的 Quadstick 以及头戴式按键组件。

同时，为了确保这些残障用户有舒适的「开箱体验」，Xbox 无障碍控制器的包装也被设计得非常易于开启，用各种易于拆卸的拉手来替代传统的包装结构：

考虑到产品本身面向的人群还需要额外搭配个人专用的控制器，微软将这款控制器的价格控制在 100 美元以内。2018 年，时代杂志将这款无障碍控制器评为年度最佳发明之一，并且在意大利获得了电子游戏创新奖。

无障碍游戏控制器的成功，也促使微软将 无障碍设计 推动到更多的产品线上。

延伸：Surface 无障碍套件 在鼠标无障碍控制器面世之前，微软还发布过一款低成本但是相当有趣的无障碍套件，专门适配 Surface 系列的平板和笔记本，方便残障用户尤其是视力障碍用户来使用电脑。

这是一套为绕触感来设计的贴纸组件，有专门方便用户识别重要按键功能的贴纸：

有贴在机身和数据线线上的贴纸，搭配不同触感的肌理，方便用户通过摸索快速确定接口和线材之间的「关联」：

有残障用户为了打开 Surface 的支架和屏幕甚至会动用叉子，这个简单的拉绳就可以很好解决这个基础的问题：

当然，Surface 无障碍套件的包装也被设计得易于开启，和 Xbox 无障碍控制器的包装设计一脉相承：

不过不同于在 Surface 上动用的「小心思」，微软的鼠标无障碍套件在 包容性设计 上所投入的心思，明显要多太多。

成熟：鼠标无障碍套件 鼠标是最常见的输入和导航工具。微软这次的鼠标无障碍套件，充分结合了之前在其他无障碍工具上的设计经验，尤其是 Xbox 的无障碍控制器上所积累的技术和方案。

和 Xbox 无障碍套件不同，鼠标无障碍套件使用了更为精简的 Hub 来兼容第三方套件，它自身的鼠标和按键模块支持蓝牙无需占用 Hub 的接口，最重要的是，借助如今成熟的 3D 打印技术，用户可以以极低的成本来打印适合自己的模块。

自定义按键可以替代鼠标来进行导航操作，顶部的按键可以替换成各种不同的样式来应对不同需求：

即使是高位截瘫的用户也依然可以使用面部肌肉来使用它：

Hub 则可以连接第三方的控制器，比如高灵敏度的按键：

结语：硬件个性化

包容性设计、模块化设计、无障碍设计、3D 打印在面对肢体障碍用户极端需求的时候，发挥了巨大的作用。另一方面，这些技术在面对小众需求、个性化和个人需求上，也有着极为巨大的潜力。

我们在标准化的电脑、平板和手机上，可以拥有个性化的 APP 和界面，可是在上述的设计和技术支持之下，硬件的个性化、多样化也同样触手可及。

编者按：本文通过一个交互方案的改版思考，帮你了解交互设计师在产出交互方案时，是如何进行思考与设计的。更多思考案例：资深交互设计师是如何思考的？用3个交互案例为你揭秘！

编者按：本文通过一个 交互方案 的改版思考，帮你了解交互 设计师 在产出交互方案时，是如何进行思考与设计的。

更多思考案例：

资深交互设计师是如何思考的？用3个交互案例为你揭秘！ 交互设计师要通过逻辑推导来产出合理方案，无论是产品、交互还是 UI。

阅读文章 >

有些时候，交互设计师在其他岗位的认知中，仅仅是一个只会产出黑白稿、低保真原型的工种。如何改变这种认知呢？本文通过对实际案例的解析，希望能带大家了解，交互设计师在产出交互方案时，是如何进行思考与设计的，一起来看一下吧。

交互设计师往往在公司中处在一个尴尬的位置，甚至绝大部分公司都没有交互设计师这个岗位，取而代之的是会画原型的产品、会画原型的运营以及会画原型的 UI 设计师。所以交互设计师在其他岗位的认知中，仅仅是一个只会产出黑白稿、低保真原型的工种。如何改变这类认知？相比较去反驳，我认为倒不如通过自己的思考跟产出的方案，来证明自己的价值。

本次带来的案例，是运营产出的一套交互原型。由于身后的视觉设计师在设计的时候一直怨声载道，总是抱怨信息不完整、流程不完整导致的无尽的返工。所以想基于这个案例，带大家一起来看看，作为一个 交互设计 师，在产出交互方案时，是如何进行思考与设计的。

PS：可能本文提到的交互形式与内容并不是最佳方案，思考维度有限，也希望大家指出一起交流进步。

一、项目背景 根据运营同事的介绍，知道本次项目的目标是提升产品信息的透出，最终完成转化。

而用户行为的设计是通过解锁产品相关信息，了解产品相关内容，增加对产品的熟悉度与好感，最终购买产品。

为了便于了解，我们可以把它模拟成一个汽车销售的案例，一般用户的购买行为肯定是基于对汽车各个性能的充分了解的前提下进行的，通过“定位”与“解锁”，让用户可以选择自己感兴趣的性能去了解。而解锁的模块越多，客户对产品的性能越了解，客户购买的可能性就越大。所以为了促进用户解锁，我们设置了积分奖励，通过解锁获取积分的刺激来提升解锁率，最终达到产品销售转化的目的。

以下是运营提供的交互原型（原型做了一些脱敏处理）：

我们分别从信息层级、交互形式、操作链路三个方面来解析当前的原型所存在的问题，同时结合对于运营目标以及用户行为的思考，给出一些优化建议。

二、明确页面信息层级 大部分非交互人员在制作原型时，对于信息的布局是没有过多思考的，往往都是哪里顺眼就放在哪，或者别人怎么放就怎么放，而信息布局对于交互设计师而言，是非常重要的一环，需要考虑信息的结构、信息的关联性、信息的重要程度等。所以针对当前的原型，我们来看看都有哪些信息布局的问题。

1. 信息关联性

《设计师要懂心理学》这本书中有提到一个用户心理，人们往往认为相邻物体必然相关。我们可以看到当前原型中，“您当前获得 0 积分”这个信息在两个按钮中间，按照信息关联性他似乎是跟两个按钮都有关联性，但其实她跟“立即购买”按钮没有任何关系，因此放在这个地方无疑违背了大家对于信息关联性的认知与理解。

2. 信息重要程度

我们一般在对按钮进行布局的时候，会将重要性相当的按钮摆放在一起，同时将直接促成转化的按钮突出显示，如视觉加强，放在右侧方便用户点击等。比如电商平台经常将“加入购物车”跟“购买”按钮并排摆放。当前的原型中，虽然强调了“立即购买”按钮，但是由于“使用积分”的重要程度要弱，所以两个按钮放在一起就显得不是很合适，那该如何来进行布局呢？

在进行布局之前，我们可以分析一下业务跟用户在该页面的动机分别是什么。对于业务而言，无论采取积分刺激或者别的方式，最终的目标肯定是转化，所以转化按钮一定是最重要的触点，重点突出；而对于用户而言，积分所带来的利益点是来到页面的目的之一，所以积分的展示与使用才是重点突出的。

所以用户来到页面的视线应该是先看到积分情况，促使用户解锁内容获得积分，最后才是根据解锁内容的了解完成最终的购买产品的转化。

三、选择页面交互形式 我们将主要页面进行信息层级的梳理与布局后，接下来我们就需要选择合适的交互形式来承载。当前页面主要发生用户交互的地方在解锁内容获取积分上，我们拆分用户行为，分析在解锁前、中、后三个阶段，当前原型存在的问题以及优化的思路。

1. 解锁前

当前原型中，解锁前是通过图形“锁”来标识状态，但是锁也有禁止的意思，所以当用户进入页面时可能会面临两点疑惑：能不能点击以及要不要点击。那么该如何解决用户的疑惑呢？

针对能不能点击，除了告知视觉做出可点击的样式，我们还需要给与引导，一方面告知用户次此处是可以进行交互的，另一方面，也是促进用户点击，从而完成内容对用户的转化。

而关于要不要点击，就需要采取手段刺激用户发生交互。当前仅仅是展示待解锁的内容，显然缺乏刺激点，而原型中把获取积分放到解锁后才透出，可能解锁操作前就流失了一部分用户，那我们就需要把利益点前置，告知用户解锁能获取什么，刺激用户点击，增强用户解锁的意愿。

2. 解锁中

解锁中即用户点击进入次级页面阅读相关内容进行解锁，运营人员设置的业务规则是用户必须滑到最底部阅读全文才能解锁成功，弹出解锁奖励弹窗。但是页面上并没有展示任何跟该规则相关的信息，客户按照过往认知，可能会觉得进入页面返回就会获得积分奖励，但是当用户返回并没有解锁成功时，用户会感到挫败与疑惑，可能会直接退出该页面。那该如何解决呢？

从跟运营的沟通中我们得知其业务目的是希望用户多停留在该页面，让内容尽可能多的展示给用户。那我们是不是可以换种思路，不需要用户滑到最底部，而是设置用户在该页面的停留时间，是不是也能满足？

我们可以进一步优化时间的设置，当前解锁是跳出到新的页面，但是沟通后发现，该页面的内容不会很多，那我们是否可以用弹窗的形式来呈现呢？这样不仅减少用户的频繁跳出，同时也可以增强内容与主页面的关联性。因为用户发生交互的行为是解锁，为了保持跟用户预期一致，是不是可以加一个解锁的操作，这样就能让整个逻辑形成闭环。那么时间的设置就可以结合解锁按钮来进行交互呈现。

那如果业务或者客户就要求用户必须滑到最底部，我们该如何进行交互呢？我们可以通过“显性”跟“隐性”两种方式来展开。

显性，顾名思义就是直白的告诉用户业务规则，比如用户首次进入页面，通过弹窗的形式告诉用户滑到底部即可解锁，但是带来的问题就是过于直白的指引可能导致用户为了获得奖励直接滑到底部而忽略内容本身；

而隐性就是让用户自己明白这个业务规则，我们可以通过定位用户在该页面的位置，结合进度来呈现，用户向上滑动则进度条前进，反之则保持不变，通过这种形式不仅增加了用户在该页面的停留时间，同时也增加了解锁的趣味性，但是需要考量的就是该交互形式的开发成本。

3. 解锁后

解锁后也就是用户返回主页面时候的交互，此时页面发生变化的主要是解锁按钮的状态（已解锁）以及积分数量的变化（增加积分），其中积分的增加可以满足用户的获得感并且激励用户继续完成解锁任务，那么该选择何种交互形式呢？

首先想到的是进度条的形式，通过积分获得进度来告知用户已经获得的积分以及还可以完成的解锁任务，用户解锁成功返回首页，进度条前进一格展示该节点成功解锁状态。但是由于积分跟最终的购买转化并没有强关联，这样的交互形式会过多的突出积分的价值，导致用户将过多的注意力放在解锁获取积分上，所以此种交互形式在该场景下就不是很合适。

那么选择何种形式，既要增强用户的获得感，同时降低积分的权重？我们可以尝试用计数器来展示，用户解锁成功返回首页，积分数字动态增加，由于是过性的交互，所以并没有过多的抢占用户的注意力，同时数字的增长又很好地展示解锁成功所带来的收获，满足此场景下的业务目标。

四、优化用户操作链路 交互设计师的主要职责，就是站在用户的角度优化操作链路，提升用户在产品中的用户体验。在当前的链路中，用户解锁成功获得积分后，如果需要使用积分，需要返回首页进行操作，那么该如何优化这个链路呢？我们可以很容易想到在用户获得积分的弹窗加上使用积分的按钮，这样用户可以“所得即所用”，就不用再返回首页进行操作了。

五、总结 以上，就是笔者根据过往的工作经验，分享的一篇关于日常交互设计思考的文章。后续也会继续分享自己在实际工作中，关于产品交互的心得与感想。经验有限，欢迎大家批评指正与交流。

腾讯案例复盘！B 端教育产品的情感化设计（交互篇） B 端产品设计如何兼顾产品工具属性与情感化体验？

阅读文章 >

编者按：本文通过一个交互方案的改版思考，帮你了解交互设计师在产出交互方案时，是如何进行思考与设计的。更多思考案例：资深交互设计师是如何思考的？用3个交互案例为你揭秘！

编者按：本文通过一个 交互方案 的改版思考，帮你了解交互 设计师 在产出交互方案时，是如何进行思考与设计的。

更多思考案例：

资深交互设计师是如何思考的？用3个交互案例为你揭秘！ 交互设计师要通过逻辑推导来产出合理方案，无论是产品、交互还是 UI。

阅读文章 >

有些时候，交互设计师在其他岗位的认知中，仅仅是一个只会产出黑白稿、低保真原型的工种。如何改变这种认知呢？本文通过对实际案例的解析，希望能带大家了解，交互设计师在产出交互方案时，是如何进行思考与设计的，一起来看一下吧。

交互设计师往往在公司中处在一个尴尬的位置，甚至绝大部分公司都没有交互设计师这个岗位，取而代之的是会画原型的产品、会画原型的运营以及会画原型的 UI 设计师。所以交互设计师在其他岗位的认知中，仅仅是一个只会产出黑白稿、低保真原型的工种。如何改变这类认知？相比较去反驳，我认为倒不如通过自己的思考跟产出的方案，来证明自己的价值。

本次带来的案例，是运营产出的一套交互原型。由于身后的视觉设计师在设计的时候一直怨声载道，总是抱怨信息不完整、流程不完整导致的无尽的返工。所以想基于这个案例，带大家一起来看看，作为一个 交互设计 师，在产出交互方案时，是如何进行思考与设计的。

PS：可能本文提到的交互形式与内容并不是最佳方案，思考维度有限，也希望大家指出一起交流进步。

一、项目背景 根据运营同事的介绍，知道本次项目的目标是提升产品信息的透出，最终完成转化。

而用户行为的设计是通过解锁产品相关信息，了解产品相关内容，增加对产品的熟悉度与好感，最终购买产品。

为了便于了解，我们可以把它模拟成一个汽车销售的案例，一般用户的购买行为肯定是基于对汽车各个性能的充分了解的前提下进行的，通过“定位”与“解锁”，让用户可以选择自己感兴趣的性能去了解。而解锁的模块越多，客户对产品的性能越了解，客户购买的可能性就越大。所以为了促进用户解锁，我们设置了积分奖励，通过解锁获取积分的刺激来提升解锁率，最终达到产品销售转化的目的。

以下是运营提供的交互原型（原型做了一些脱敏处理）：

我们分别从信息层级、交互形式、操作链路三个方面来解析当前的原型所存在的问题，同时结合对于运营目标以及用户行为的思考，给出一些优化建议。

二、明确页面信息层级 大部分非交互人员在制作原型时，对于信息的布局是没有过多思考的，往往都是哪里顺眼就放在哪，或者别人怎么放就怎么放，而信息布局对于交互设计师而言，是非常重要的一环，需要考虑信息的结构、信息的关联性、信息的重要程度等。所以针对当前的原型，我们来看看都有哪些信息布局的问题。

1. 信息关联性

《设计师要懂心理学》这本书中有提到一个用户心理，人们往往认为相邻物体必然相关。我们可以看到当前原型中，“您当前获得 0 积分”这个信息在两个按钮中间，按照信息关联性他似乎是跟两个按钮都有关联性，但其实她跟“立即购买”按钮没有任何关系，因此放在这个地方无疑违背了大家对于信息关联性的认知与理解。

2. 信息重要程度

我们一般在对按钮进行布局的时候，会将重要性相当的按钮摆放在一起，同时将直接促成转化的按钮突出显示，如视觉加强，放在右侧方便用户点击等。比如电商平台经常将“加入购物车”跟“购买”按钮并排摆放。当前的原型中，虽然强调了“立即购买”按钮，但是由于“使用积分”的重要程度要弱，所以两个按钮放在一起就显得不是很合适，那该如何来进行布局呢？

在进行布局之前，我们可以分析一下业务跟用户在该页面的动机分别是什么。对于业务而言，无论采取积分刺激或者别的方式，最终的目标肯定是转化，所以转化按钮一定是最重要的触点，重点突出；而对于用户而言，积分所带来的利益点是来到页面的目的之一，所以积分的展示与使用才是重点突出的。

所以用户来到页面的视线应该是先看到积分情况，促使用户解锁内容获得积分，最后才是根据解锁内容的了解完成最终的购买产品的转化。

三、选择页面交互形式 我们将主要页面进行信息层级的梳理与布局后，接下来我们就需要选择合适的交互形式来承载。当前页面主要发生用户交互的地方在解锁内容获取积分上，我们拆分用户行为，分析在解锁前、中、后三个阶段，当前原型存在的问题以及优化的思路。

1. 解锁前

当前原型中，解锁前是通过图形“锁”来标识状态，但是锁也有禁止的意思，所以当用户进入页面时可能会面临两点疑惑：能不能点击以及要不要点击。那么该如何解决用户的疑惑呢？

针对能不能点击，除了告知视觉做出可点击的样式，我们还需要给与引导，一方面告知用户次此处是可以进行交互的，另一方面，也是促进用户点击，从而完成内容对用户的转化。

而关于要不要点击，就需要采取手段刺激用户发生交互。当前仅仅是展示待解锁的内容，显然缺乏刺激点，而原型中把获取积分放到解锁后才透出，可能解锁操作前就流失了一部分用户，那我们就需要把利益点前置，告知用户解锁能获取什么，刺激用户点击，增强用户解锁的意愿。

2. 解锁中

解锁中即用户点击进入次级页面阅读相关内容进行解锁，运营人员设置的业务规则是用户必须滑到最底部阅读全文才能解锁成功，弹出解锁奖励弹窗。但是页面上并没有展示任何跟该规则相关的信息，客户按照过往认知，可能会觉得进入页面返回就会获得积分奖励，但是当用户返回并没有解锁成功时，用户会感到挫败与疑惑，可能会直接退出该页面。那该如何解决呢？

从跟运营的沟通中我们得知其业务目的是希望用户多停留在该页面，让内容尽可能多的展示给用户。那我们是不是可以换种思路，不需要用户滑到最底部，而是设置用户在该页面的停留时间，是不是也能满足？

我们可以进一步优化时间的设置，当前解锁是跳出到新的页面，但是沟通后发现，该页面的内容不会很多，那我们是否可以用弹窗的形式来呈现呢？这样不仅减少用户的频繁跳出，同时也可以增强内容与主页面的关联性。因为用户发生交互的行为是解锁，为了保持跟用户预期一致，是不是可以加一个解锁的操作，这样就能让整个逻辑形成闭环。那么时间的设置就可以结合解锁按钮来进行交互呈现。

那如果业务或者客户就要求用户必须滑到最底部，我们该如何进行交互呢？我们可以通过“显性”跟“隐性”两种方式来展开。

显性，顾名思义就是直白的告诉用户业务规则，比如用户首次进入页面，通过弹窗的形式告诉用户滑到底部即可解锁，但是带来的问题就是过于直白的指引可能导致用户为了获得奖励直接滑到底部而忽略内容本身；

而隐性就是让用户自己明白这个业务规则，我们可以通过定位用户在该页面的位置，结合进度来呈现，用户向上滑动则进度条前进，反之则保持不变，通过这种形式不仅增加了用户在该页面的停留时间，同时也增加了解锁的趣味性，但是需要考量的就是该交互形式的开发成本。

3. 解锁后

解锁后也就是用户返回主页面时候的交互，此时页面发生变化的主要是解锁按钮的状态（已解锁）以及积分数量的变化（增加积分），其中积分的增加可以满足用户的获得感并且激励用户继续完成解锁任务，那么该选择何种交互形式呢？

首先想到的是进度条的形式，通过积分获得进度来告知用户已经获得的积分以及还可以完成的解锁任务，用户解锁成功返回首页，进度条前进一格展示该节点成功解锁状态。但是由于积分跟最终的购买转化并没有强关联，这样的交互形式会过多的突出积分的价值，导致用户将过多的注意力放在解锁获取积分上，所以此种交互形式在该场景下就不是很合适。

那么选择何种形式，既要增强用户的获得感，同时降低积分的权重？我们可以尝试用计数器来展示，用户解锁成功返回首页，积分数字动态增加，由于是过性的交互，所以并没有过多的抢占用户的注意力，同时数字的增长又很好地展示解锁成功所带来的收获，满足此场景下的业务目标。

四、优化用户操作链路 交互设计师的主要职责，就是站在用户的角度优化操作链路，提升用户在产品中的用户体验。在当前的链路中，用户解锁成功获得积分后，如果需要使用积分，需要返回首页进行操作，那么该如何优化这个链路呢？我们可以很容易想到在用户获得积分的弹窗加上使用积分的按钮，这样用户可以“所得即所用”，就不用再返回首页进行操作了。

五、总结 以上，就是笔者根据过往的工作经验，分享的一篇关于日常交互设计思考的文章。后续也会继续分享自己在实际工作中，关于产品交互的心得与感想。经验有限，欢迎大家批评指正与交流。

腾讯案例复盘！B 端教育产品的情感化设计（交互篇） B 端产品设计如何兼顾产品工具属性与情感化体验？

阅读文章 >

编者按：本文从标题栏的组件介绍、设计要点、使用场景、样式拓展四个方面，帮你掌握UI组件中的标题栏设计。往期回顾：B端素材大放送！7个大厂组件库+图表生成神器+6个常用插件知道有相当大比例的同学一直在等和B端相关的干货和教程，我们会在这个月底开始更新。

编者按：本文从标题栏的组件介绍、设计要点、使用场景、样式拓展四个方面，帮你掌握UI组件中的 标题栏设计 。

往期回顾：

B端素材大放送！7个大厂组件库+图表生成神器+6个常用插件 知道有相当大比例的同学一直在等和B端相关的干货和教程，我们会在这个月底开始更新。

阅读文章 >

一、组件介绍 顶部标题栏，是几乎所有 APP 页面设计中的第一个组件，用来展示页面的名称和放置一些层级较高的操作选项。

iOS 官方组件库提供了一些顶部标题栏的样式，但因为大标题的设计并不符合中文市场，所以只要简单认识它们的构造即可。

而市面上应用的标题栏五花八门，样式各不相同，但它们包含的元素却始终围绕在几个固定的模块中。所以，掌握头部标题栏的设计，只要先熟悉几种常见的样式，就可以在实际项目中根据需要进行自定义组合和创新。

二、设计要点 1. 框架布局

做标题栏第一步要做的，是确定栏的数量。

除去固定的状态栏以外，标题栏还可以另外加入一到两个栏，最多三个。每个栏至少高 44pt，它本身的背景是透明的，它们的背景即是标题栏的背景。

有了栏，接下来需要整理需求中放入标题栏的功能。

我整理了标题栏中频繁出现的功能点，并分成三个展示类型，你们在做自己界面的时候可以考虑从以下内容中选取。

以栏的形式存在的功能：页面标题、产品 logo、搜索、分页器、日期、用户昵称/欢迎语/slogan

这些元素可以占据页面一整行的宽度，不一定要占满，但它可以作为独立的一行；有些长度较长的文字类产品 logo 则可以等同于标题使用。

以图标形式存在的功能：搜索、通知、用户中心、产品 logo、返回、侧边栏、其他……

这些元素以图标的形式与第一类相结合，置于栏的左右；图形形式 logo 则作为图标使用。

以背景形式存在的功能：Banner、插画。

有些 Banner 可以作为整个标题栏的背景。

有了栏，也有了功能，最后我们只需要把功能置入栏中，这样就基本完成了一个标题栏的布局。

2. 分页器排版

分页器在标题栏中如何排版也是一个比较复杂的问题，因为分页器的样式、位置都有极大的自定义空间。我这里不会详细去讲分页器该如何设计，那是分页器组件会专门讲的事情，我这里只归纳分页器在标题栏中的摆法。`

首先我们需要知道，分页器的每一个标签，都有一个透明的背景，当我们考虑分页器该如何排版时，本质是在考虑这些一个个单元格该如何排版。

这些单元格只存在两种排版形式，一种是定宽，一种是等分。

定宽，即固定每个单元格的宽度，将它们肩并肩排布好之后，再在栏中进行做对齐或居中对齐。一般适合少于四个或大于六个标签的情况。

等分，即先确定整个分页器的宽度，再根据分页器的数量对这个宽度进行均分的方法。适合五到六个标签的情况 (太少会显得疏，太多会摆不下)。

三、使用场景 标题栏会应用在几乎所有页面，但根据页面需求会有不同的呈现方式。

首页或者一级页面的标题栏应该是相对最复杂、功能最多的，下级页面则使用较简单的布局。常见的类型有下面几种。

1. 基础样式

只包含一个标题/logo 栏或再加一个搜索栏的样式。

例如，微信的标题栏是一个基础且标准的样式，第一栏页面标题居中，该标题字号为 17pt，苹方中粗体，右侧一枚功能按钮；第二栏就只有一条搜索栏。

如果搜索栏两侧有图标，则搜索栏的宽度可以用 390 减去（两个边距+两个图标宽度+两个间距）。

2. 包含 1 级分页

只包含一个分页器的样式。可以与搜索或其他图标合并成一栏，也可以置于搜索栏的上侧或下侧。

只包含一个分页器的样式。可以与搜索或其他图标合并成一栏，也可以置于搜索栏的上侧或下侧。

字体的大小根据展示内容重要性和页面设计风格相关，如果要切换的选项少，可以和图标混合成一栏，如果切换的选项多，则独立占一栏的位置。

3. 包含 2 级分页

指包含两级分页器的情况，上方切换不同类型的页面，下方切换该页面下的不同分类内容，这种样式往往应用在一些比较复杂的场景中。

4. 包含背景样式

包含背景的设计是在顶栏背后增加主色、渐变、图片的类型，可以和分页控件并存。

这类设计主要目标是强化空间顶部的视觉重心，用于渲染品牌特征或活动氛围。主要的设计要点是确保头部和下方元素的衔接是合理的。

主流的做法包含下方直接截断和渐变过渡两种，为了让过度更顺滑，往往会在过渡区域上方叠加一个卡片元素，用来强化前后景的对比。

5. 混合轮播图

和包含背景的形式类型，只是有的设计会更进一步，直接将背景做成轮播图，更好的利用空间。

该类型的设计主要注意的事项就是要确保顶部的内容可见，不能在颜色上和背景融为一体。

同时，要确保 Banner 本身的布局顶部有留白空间，不会让 Banner 的内容、文字信息和标题栏内容叠加到一起，造成视觉错误。

四、样式拓展 1. 极有家（每平每屋又双叕改名了）

极有家给搜索栏做了一定程度的缩小，缩到不足半宽，与右侧的图标两端对齐地排列到同一个栏内，这也是一种安排元素的思路。其次图片背景采用不规则的形状，尽管我非常不建议你们这么做——因为这非常怪异——但市面上确实有APP是这么头铁的。

2. 去哪儿

上滚的样式可以与第一屏的样式有所不同，把不重要的栏或者元素移出，不过此种变化需要一定程度的动效去表达动向，不能直接消失。例如去哪儿的旅行攻略页面当页面上滚时，搜索栏会逐渐以半栏的形式出现在右上角，而原本的三个功能图标将会右滑移出。

3. 即刻

标题栏也可以根据页面的场景需要，做成卡片化的形式，将四周镂空出来。这种做法可以模糊内容和框架的界线，让场景在观感上更整体。比如即刻的即刻镇页面，它的欢迎语/副文本和头像并没有跳出标题栏的框架，但它一旦将标题栏做成卡片，就会让人觉得它是内容和场景的一部分而非页面框架的一部分。

4. 其他案例展示

更多组件教程：

用一篇文章，帮你认识 B 端交互的页面、浮层、弹窗和抽屉 在 B 端产品操作中，需要高频率地打开各类链接和按钮，如果点击后需要展示新的内容，那么展现形式就包含了很多种类型，标签页、新页面、悬浮层、弹窗、抽屉等等。

阅读文章 >

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

编者按：本文从标题栏的组件介绍、设计要点、使用场景、样式拓展四个方面，帮你掌握UI组件中的标题栏设计。往期回顾：B端素材大放送！7个大厂组件库+图表生成神器+6个常用插件知道有相当大比例的同学一直在等和B端相关的干货和教程，我们会在这个月底开始更新。

编者按：本文从标题栏的组件介绍、设计要点、使用场景、样式拓展四个方面，帮你掌握UI组件中的 标题栏设计 。

往期回顾：

B端素材大放送！7个大厂组件库+图表生成神器+6个常用插件 知道有相当大比例的同学一直在等和B端相关的干货和教程，我们会在这个月底开始更新。

阅读文章 >

一、组件介绍 顶部标题栏，是几乎所有 APP 页面设计中的第一个组件，用来展示页面的名称和放置一些层级较高的操作选项。

iOS 官方组件库提供了一些顶部标题栏的样式，但因为大标题的设计并不符合中文市场，所以只要简单认识它们的构造即可。

而市面上应用的标题栏五花八门，样式各不相同，但它们包含的元素却始终围绕在几个固定的模块中。所以，掌握头部标题栏的设计，只要先熟悉几种常见的样式，就可以在实际项目中根据需要进行自定义组合和创新。

二、设计要点 1. 框架布局

做标题栏第一步要做的，是确定栏的数量。

除去固定的状态栏以外，标题栏还可以另外加入一到两个栏，最多三个。每个栏至少高 44pt，它本身的背景是透明的，它们的背景即是标题栏的背景。

有了栏，接下来需要整理需求中放入标题栏的功能。

我整理了标题栏中频繁出现的功能点，并分成三个展示类型，你们在做自己界面的时候可以考虑从以下内容中选取。

以栏的形式存在的功能：页面标题、产品 logo、搜索、分页器、日期、用户昵称/欢迎语/slogan

这些元素可以占据页面一整行的宽度，不一定要占满，但它可以作为独立的一行；有些长度较长的文字类产品 logo 则可以等同于标题使用。

以图标形式存在的功能：搜索、通知、用户中心、产品 logo、返回、侧边栏、其他……

这些元素以图标的形式与第一类相结合，置于栏的左右；图形形式 logo 则作为图标使用。

以背景形式存在的功能：Banner、插画。

有些 Banner 可以作为整个标题栏的背景。

有了栏，也有了功能，最后我们只需要把功能置入栏中，这样就基本完成了一个标题栏的布局。

2. 分页器排版

分页器在标题栏中如何排版也是一个比较复杂的问题，因为分页器的样式、位置都有极大的自定义空间。我这里不会详细去讲分页器该如何设计，那是分页器组件会专门讲的事情，我这里只归纳分页器在标题栏中的摆法。`

首先我们需要知道，分页器的每一个标签，都有一个透明的背景，当我们考虑分页器该如何排版时，本质是在考虑这些一个个单元格该如何排版。

这些单元格只存在两种排版形式，一种是定宽，一种是等分。

定宽，即固定每个单元格的宽度，将它们肩并肩排布好之后，再在栏中进行做对齐或居中对齐。一般适合少于四个或大于六个标签的情况。

等分，即先确定整个分页器的宽度，再根据分页器的数量对这个宽度进行均分的方法。适合五到六个标签的情况 (太少会显得疏，太多会摆不下)。

三、使用场景 标题栏会应用在几乎所有页面，但根据页面需求会有不同的呈现方式。

首页或者一级页面的标题栏应该是相对最复杂、功能最多的，下级页面则使用较简单的布局。常见的类型有下面几种。

1. 基础样式

只包含一个标题/logo 栏或再加一个搜索栏的样式。

例如，微信的标题栏是一个基础且标准的样式，第一栏页面标题居中，该标题字号为 17pt，苹方中粗体，右侧一枚功能按钮；第二栏就只有一条搜索栏。

如果搜索栏两侧有图标，则搜索栏的宽度可以用 390 减去（两个边距+两个图标宽度+两个间距）。

2. 包含 1 级分页

只包含一个分页器的样式。可以与搜索或其他图标合并成一栏，也可以置于搜索栏的上侧或下侧。

只包含一个分页器的样式。可以与搜索或其他图标合并成一栏，也可以置于搜索栏的上侧或下侧。

字体的大小根据展示内容重要性和页面设计风格相关，如果要切换的选项少，可以和图标混合成一栏，如果切换的选项多，则独立占一栏的位置。

3. 包含 2 级分页

指包含两级分页器的情况，上方切换不同类型的页面，下方切换该页面下的不同分类内容，这种样式往往应用在一些比较复杂的场景中。

4. 包含背景样式

包含背景的设计是在顶栏背后增加主色、渐变、图片的类型，可以和分页控件并存。

这类设计主要目标是强化空间顶部的视觉重心，用于渲染品牌特征或活动氛围。主要的设计要点是确保头部和下方元素的衔接是合理的。

主流的做法包含下方直接截断和渐变过渡两种，为了让过度更顺滑，往往会在过渡区域上方叠加一个卡片元素，用来强化前后景的对比。

5. 混合轮播图

和包含背景的形式类型，只是有的设计会更进一步，直接将背景做成轮播图，更好的利用空间。

该类型的设计主要注意的事项就是要确保顶部的内容可见，不能在颜色上和背景融为一体。

同时，要确保 Banner 本身的布局顶部有留白空间，不会让 Banner 的内容、文字信息和标题栏内容叠加到一起，造成视觉错误。

四、样式拓展 1. 极有家（每平每屋又双叕改名了）

极有家给搜索栏做了一定程度的缩小，缩到不足半宽，与右侧的图标两端对齐地排列到同一个栏内，这也是一种安排元素的思路。其次图片背景采用不规则的形状，尽管我非常不建议你们这么做——因为这非常怪异——但市面上确实有APP是这么头铁的。

2. 去哪儿

上滚的样式可以与第一屏的样式有所不同，把不重要的栏或者元素移出，不过此种变化需要一定程度的动效去表达动向，不能直接消失。例如去哪儿的旅行攻略页面当页面上滚时，搜索栏会逐渐以半栏的形式出现在右上角，而原本的三个功能图标将会右滑移出。

3. 即刻

标题栏也可以根据页面的场景需要，做成卡片化的形式，将四周镂空出来。这种做法可以模糊内容和框架的界线，让场景在观感上更整体。比如即刻的即刻镇页面，它的欢迎语/副文本和头像并没有跳出标题栏的框架，但它一旦将标题栏做成卡片，就会让人觉得它是内容和场景的一部分而非页面框架的一部分。

4. 其他案例展示

更多组件教程：

用一篇文章，帮你认识 B 端交互的页面、浮层、弹窗和抽屉 在 B 端产品操作中，需要高频率地打开各类链接和按钮，如果点击后需要展示新的内容，那么展现形式就包含了很多种类型，标签页、新页面、悬浮层、弹窗、抽屉等等。

阅读文章 >

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

交互设计师要通过逻辑推导来产出合理方案，无论是产品、交互还是 UI。本文通过3个交互案例细节，帮你一窥交互设计的门道。更多交互设计案例：腾讯案例复盘！

交互设计师要通过逻辑推导来产出合理方案，无论是产品、交互还是 UI。本文通过3个交互案例细节，帮你一窥交互设计的门道。

更多 交互设计 案例：

腾讯案例复盘！B 端教育产品的情感化设计（交互篇） B 端产品设计如何兼顾产品工具属性与情感化体验？

阅读文章 >

一、人为推进效应 不知道大家有没有看过这么一个案例，大概是说，有人在洗车店做了个实验，给每个来洗车的顾客弄一张活动卡，这个卡上有八个空格子，顾客每次来洗一次车，就在空格子里盖一个章，洗满八次，也就是盖满八个章，就可以免费洗一次车。

送出去的卡分两类，一类是上面没盖过一个章，八个格子都是空的；还有一类是，上面有十个格子，但是有两个空格已经盖了章的。所以，前面一类卡是 0/8，后面这类卡是 2/10。

经过一段时间的验证，发现，后面这类卡的完成度要比前面这种高出 20%。

于是有人就给这个实验结果定义了一个名字，叫「人为推进效应」。

后来有人就把这样的概念用在了一些产品功能里，比如完善资料，签到，游戏进程等。所以我们经常会在一些产品里完善个人资料时，明明没填写过任何信息，但资料填写的进度就是 20%，原因是它把默认的头像和昵称 id 也算进去了，就会让人觉得还差一些就完成了。而如果进度是 0%，用户完善资料的动力就会下降。

甚至在一些产品里，洗车卡这个案例也被改了个方式，直接拿来用了，比如：

有些游戏任务，要杀死十只怪物，而任务的启动条件是用户在杀死一只怪物时，自动开启，这时候任务的杀怪数量是 1/10，那么用户完成任务的动力也会更强。

后来我找了些资料，来验证这个概念的真伪性，以及支撑依据，发现这么三个理论。

第一个是「蔡格尼克记忆效应」，它是指人们对于尚未处理完的事情，比已处理完成的事情印象更加深刻。 这个现象是由蔡格尼克通过实验得出的结论。

让设计更有说服力的20条经典原则：冯·雷斯托夫效应、蔡格尼克记忆效应 编者按：文章将设计理论运用到实际案例中进行分析，更有助于理解。

阅读文章 >

在读关于蔡格尼克记忆效应的资料时，我想到一些实例，觉得确实是这样。比如我在写一篇文章时，脑袋里总会想着这个论题，甚至框架与内容细节都很清楚；但只要一写完，丢进归档文件夹，很快就会忘记自己写这篇文章时的一些内容。

包括玩游戏时，一旦开始执行任务，就会想着这个任务还需要玩多少次才能完成，而不会去想着，已经完成了什么。

不过想想也觉得是废话，完成了谁还去想呢，这里对比的应该是「未开始」和「执行中」这两种情况，哪种印象会更深刻。当然，从主观情况来考虑，相比起来，执行中的事项一定是印象更深刻的。

这就与两类洗车卡的实验比较相关了。

第二个是「目标梯度效应」，意思是人类或动物具有接近目标时加快行动的效应，比如兔子快要接近食物时会跑得更快。

关于目标梯度效应的干货：

用心理学的知识，告诉你人们为什么喜欢使用「清单」 在二战中，波音公司推出了令人生畏的299型飞机，被称为「飞行要塞」，相比之前的轰炸机，它有4个更先进的引擎和近104英尺的巨大翼展，可以飞得更快、更远，携带的炸弹数量也是之前的5倍，可以说是军事领域的一大进步。

阅读文章 >

类比上面洗车卡的例子，当卡上的盖章数量越多，用户洗车频率就会越高，以为尽快完成洗车卡任务，拿到一次免费洗车的奖励。

比如在一些产品里填写地址，当要开始填写时，GPS 定位会自动获取城市定位，帮用户完成第一步，看起来是理所应当，但其实是传递出一种任务已经开始了的信息，主要是为了提高用户完成任务的动力。

有些注册比较麻烦的产品，也会故意通过这样的拆分方式，提高用户完成注册的转化率。

同时，因为用户在完成洗车卡任务后，任务会随之消失，用户也可能会流失，所以会通过发放二次洗车卡任务，而这个任务奖励会与第一次有所区别，通过这样的方式从而留下用户。

比如上图中的任务，任一模式完成一场，就可完成任务，领取奖励，但是领取完后会在这个任务的基础之上产生新的任务。好比王朝模式 2/2 完成后，就会变成 2/3。告诉你再玩一局，就可以领到更高的奖励。

第三个是「任务可视化效果」，与其通过数字告诉用户任务次数 2/10，不如把任务可视化，呈现出任务进度。

试想一下也是如此，看着卡片上如果写得是数字，譬如洗了 3 次车，还差 5 次，肯定不如一张卡片，上面盖了 3 次章来得更直观。所以在一些产品上，任务进度会通过有进程的进度条来表示目前情况：

二、禁用按钮的逻辑 最近收到的一则问题，大概是：在做设计的时候，经常会遇到一个问题，就是一个按钮，在同一页面的不同情况下，有时可用，有时不可用，我们到底是显示不可用时的禁用状态呢？还是直接隐藏这个按钮呢？

大家还是喜欢提这种通用性问题，希望有一个说法，可以概括所有情况。但我多次说过，不存在这样的好事，一定是具体问题具体分析的。

尤其是这个问题，想要聊透彻，得用不少例子来举证说明，不过也可以通过总结的方式长话短说了。

禁用按钮的使用，可以从两个维度来分析，分别是：「无效的禁用状态」和「有效的禁用状态」。

1. 无效的禁用状态

有一种情况是，在一个页面里，一个按钮，可能会有几种不同的情况存在。那人要问了，既然是一个页面，为什么会有多种状态同时存在的情况呢？

比如，在出行场景中，普通乘客发起订单，司机接单后是可以发送消息的（左图）。但是从第三方渠道来的乘客，司机是无法发送站内消息的，只能通过电话联系乘客（右图）。

不同渠道来的用户，司机端的页面会呈现不同的按钮状态。相同的页面，第三方渠道来的乘客，在司机端就不需要露出消息按钮了，这样可以减少无效信息对司机的干扰，还可以避免司机习惯性操作带来的无效反馈，比如点击消息，显示「无法发送消息」。或者显示禁用，也会影响司机的操作判断。

从这个案例中我们可以看出，当一个按钮在某种情况下始终无法被触发时，就会选择让它直接消失，而不是呈现禁用状态。

很多人在这类设计里会给按钮提供一个禁用状态，以免按钮消失而打乱页面布局。但是要知道，在某种情况下，按钮无用时，无意义的展示反而会产生干扰信息，就像上面说到的那样。

所以这里有一个结论是：禁用按钮需要可触发的时机，如果没有这个时机，禁用状态就没有存在的必要。如果存在，那它也是一个无效的状态。

既然是无效的，最好就不要出现了。

2. 有效的禁用状态

在上面的例子里，有一个前提不可忽略，那就是司机是否可以理解我们不显示的原因。当然，司机会接受相关培训，产品中也会有渠道标识，所以司机能够明白页面中存在的差异。

但在其他产品中，当状态不同，按钮变化无法自洽的时候，又怎么去处理呢？我们就需要通过合理的解释来消除用户潜在的困惑。

对于这点，比较典型的案例是在线上购物时，一件商品会有多个类型供消费者选择，比如不同的尺寸、型号等，当其中一种类型被抢光时，这个商品依然是可见的，只是无法选择，展示出了禁用状态。

在这种场景中，我们不能一下子把其他无法购买的类型隐藏，因为用户需要知道我们所有的商品类别，了解商品的全部属性，尽管当下无法购买，但有上新的可能，用户依然可以选择等待，并将其加入收藏，还是会有机会促成这笔交易。而且当可选类型变多的时候，只是禁用没有库存的类型，可以使其他可选项保持固定的位置，有利于我们二次搜索和加购。这种场景的禁用也是暂时的，直到商品下架或者上新。

但就像我以前说过的，常常我们见多了的东西，就认为是正常的，但它并不一定好的。禁用也是这种情况。

虽然我们现在还是会在各个地方看到禁用操作，但是禁用的原由始终没有给到用户合理的解释，以至于许多人见到类似的操作都是一头雾水。所以在设计过程中，尤其要谨慎对待，尽可能的避免出现无法解释的禁用操作。

好比淘宝的商品选择页面，如今也将原来的商品纯禁用按钮，替换成了「缺货」。选择缺货的商品之后，按钮会变成「提醒掌柜补货」。

从原来的用户单方面接收无法点击的按钮，到现在直观显示缺货，点击后同时提醒到商家，这样的操作从功能角度来说是一个升级。

这就是我说的，有效与无效的禁用按钮之间的区别。禁用不该是真的禁止使用，而是告知用户，它如何可被使用。

3. 小结

如果一个按钮在不同的阶段有禁用和可用的状态显示，那么意图是很明显的。比如一些活动页面，某个按钮的禁用状态是倒计时，就像电影的前期宣传，为电影的上线制造话题和热度，来鼓励更多人的观看一样。

对于按钮来说，显示禁用则代表它在满足一定条件后即可拥有可点击性，让我们明确地了解它就在这里，未来是可操作的。按钮也有很多的设计空间来为未来的使用做好铺垫，特别是营销类的活动，像是「明日 8 点可抢」、「提醒商家补货」的按钮文案，无一不在传达「可用性」的信息，引导用户持续性的关注。

但是还有一类禁用状态只是静默地提示，多出现在表单中，当用户没有完成输入的时候则无法点击，因为看的多了，我们就以为这是正常的。但我们都知道它仍可优化，比如，在它以禁用状态出现时，用更为友好的方式去提醒用户应如何激活，而不是漆黑一片，且完全不知道它所存在的意图。

我们要知道的是，禁用按钮本身不是一个特殊的对象，只是禁用状态在页面中是一个特殊的存在，它是产品设计中的一种规则。为什么按钮不可用，或者说一定场景下为什么功能不可用，当无法依靠用户直觉理解的时候，是需要作出解释的，也就是怎么禁的问题。

但是最开始设计时就应该去想的是，禁用状态对用户和产品的意义在哪里，这和我们设计方案时脑海中涌出的无数目标一样，是一个基础的出发点。而后，一切迎刃而解。

三、领导用控件的方式不对，但说服不了他，怎么办？ 读者提问，他是这样说的：

呆呆，我发现一个比较玄幻的现象。就我公司，不管是产品还是领导都会把开关控件当作是一个内容切换的控件使用，就很容易造成歧义。我有提过这个问题，但是他们就会觉得这个就应该这样用。我该怎么说服他们呢？

这样的事情其实有很多，我们甚至会在许多产品上看到各种错用控件的情况。但就像我之前说过的，人们常常会把习以为常，似作理所应当。这是不对的。

但是，在工作中遇到类似的问题，仅仅只是靠说，是不够的，毕竟领导看的是最终的业务成果，而不是从某个元素去考虑使用的合理性。

好比，在你参与之前，大家对这个问题已经经过多次讨论，定下最终方案，你一句「控件」用的不对，就要改变整个页面的展示内容，那不是打人脸了么，还是一整个团队的脸。

反过来想一下，如果用户给你提反馈，你的态度是怎么样的。

做产品设计的同学肯定知道，我们平时会收到许多用户的反馈，这些反馈来自于各个渠道，比如一些社交平台、应用市场、用户社群，甚至是调研搜集等。这些反馈有的是给产品功能提建议的，有的是直接吐槽功能难用的，还有的，可能是认为产品本身就有问题的。难道我们要对每个用户提出的反馈都去思考合理性？不太可能。

那能怎么办呢？如果真想改变这种情况，你就得根据这个业务出一个比之前好的方案去说服他们，而不是只从某个控件或元素的角度去说事情。

我通过一个小案例来帮大家理解一下。

Raluca Budiu 是产品可用性方面的专家，同时也是卡内基梅隆大学的博士生导师。

她之前在上一场线上直播课的过程中遇到一个问题 —— 始终无法打开产品的麦克风。

刚开始上课的时候，Raluca 无论怎么点击，静音按钮都处于「关闭」状态，直到试了几分钟后，甚至重启了软件几次，才反应过来，原来当前本就已经是非静音状态了，再点击才是静音。

意识到自己的行为后，显得有些尴尬的笑了笑。于是，她开始思考类似的产品设计的问题。

可能许多人看到这种情况，都会觉得这没什么问题，甚至觉得是理解不了的人的问题。但就像我前面说的，常常看到的东西，习以为常，不代表它就是对的。

按钮的设计，有许多可分析的地方，比如当前按钮的显示，是一种状态，还是一种指令；或者，文案标签的显示是对当前状态的提示，还是对按钮的静态说明。

这些东西在设计过程中都是需要去仔细思考的。

譬如，开关控件的显示逻辑，其实是一种显示状态，而不是指令。

你看到的开关状态，就是它当前所处的情况，上面是关闭，下面是开启。我们一般很少在优秀的产品里看到给开关控件加文字的，因为它已经很明显，通过颜色反馈状态。

而我们平常在看视频的时候，画面播放时，底部显示的是暂停键，屏幕暂停时，底部显示的是播放键。

它区别于前面开关的使用逻辑，是以指令的方式呈现的。

这就是一个按钮，状态与指令的差异。

那么文案作为提示与静态说明的差异是什么意思呢？

比如上面静音案例的图里，按钮下面的文案是不会因为是否开启静音而发生变化的，它只是告诉用户，这个按钮的名字叫静音。类似于底部标签栏里，告诉你那个圆圈的名字叫「发现」一样，它本身不会有任何变化。

这就是静态说明。

而提示，是动态的，也就是按钮发生变化，那么文案也就会发生变化，它的作用是提醒用户，可以通过操作改变当前状态。

比如：

题外话。微信的这个锁定界面，虽然显示了已锁定，但是并没有从识别角度告知用户如何解锁。如果是我，我可能会这样改：

不过这不是讨论的重点了，我这里主要想告诉各位，文字的作用，分为动态提醒和静态说明。

于是，理清了这类 按钮设计 逻辑后的 Raluca 教授提出了相应的规则，并发表了文章。如今，再看开头那个分不清是否已静音按钮的产品，改成了如下图所呈现的形式。

无论是图标状态，还是文案处理，都做了相应的改进，看起来就清晰多了。

通过这三个小案例是想告诉各位，虽然，我们在工作中不可能去做这样的研究，但是各位在提出自己的建议时，也要从方案本身出发，而不是仅仅从元素样式上去做无用功。

交互设计师，一定要有自己的思想。大概是这样：-）

交互细节科普！帮你掌握返回、关闭和取消的用法 交互设计细节中，最常见的「返回」、「关闭」和「取消」应该如何运用？

阅读文章 >