各行各业的设计师每天都在和颜色打交道，UI 设计师设计用户界面也不例外。

用户界面是一个设计师用理性思维解决用户感性需求的窗口。如果对色彩的运用不加以克制，界面可能会显得花哨而没有主次；但过于拘谨又容易使界面保守，难以激发用户情绪。所以如何让色彩的搭配平衡，是 UI 设计师需要修炼的一课。

但色彩毕竟是感性的元素，我们总是仰慕一些对色彩天赋异禀的设计师，总能不拘绳墨给作品带来惊艳的视觉效果。我们难以偷习他们的天赋，但或许你有没有想过，干脆我们另辟蹊径，用理性推导来制定一套色彩系统？

那么今天我用我的项目示例，教给大家一个科学推导颜色搭配的方法。也许能够带你发现一些色彩背后的数学秘密。

区分颜色模式

在此之前我们需要先熟悉一下颜色模式。

在 PS 菜单栏的「图像-模式」下可以看到非常多的颜色模式：RGB、CMYK、Lab 等等。那是因为 PS 是一个需要满足设计行业水平领域的软件，要解决各类设计师需求，所以涵盖的颜色模式非常丰富。

但 UI 大多数时候需要关注的是线上场景，成果的展示渠道一般是自发光设备。所以弄明白垂直领域软件 Sketch 中的几种颜色模式，其实就足够了，分别是 RGB、HSB 和 HSL。

RGB 是指通过 R（Red：红）、G（Green：绿）、B（Blue：蓝）三个颜色通道的变化以及它们相互之间的叠加得到各式各样的颜色。三个通道分别有「0-255」这 256 个值，这些值分别代表着各通道的亮度层级。

虽然 RGB 在机器表现上很友好，但并不够人性化。因为人们判断颜色，往往是通过「这是什么颜色？是不是太鲜艳了？亮了还是暗了？」这样的感官维度，而很难通过红绿蓝的亮度层级去判断。所以人们后来基于 RGB 衍生出了 HSB 模式和 HSL 模式。

HSB 是指通过 H（Hue：色相）、S（Saturation：饱和度）、B（Brightness：明度）来控制颜色。Hue（色相）的取值范围是色环上 0-360° 的圆心角度；而 Saturation（饱和度）与 Brightness（明度）是在 0-100% 的量占比。

HSL 中的 H、S 与 HSB 相同，都是指 Hue（色相）、Saturation（饱和度）。但 L 所指的则是 Lightness（亮度）。

HSL 和 HSB 稍微有一些不同，我们在两个颜色模式下输入相同的数值，会发现颜色实际是不一样的。虽然 H、S 指代的都是色相和饱和度，但 L（Lightness：亮度）与 B（Brightness：明度）分别被认为是「颜色中白色的量」和「颜色中光线的量」。

Lightness 和 Brightness 的概念要深度研究下去的话其实是计算机算法领域的问题了，感兴趣的朋友可以查阅更多资料，但我个人认为对于 UI 来说没有太大必要。

关于 HSB、HSL 的使用场景，记住以下两点即可：

• 前端 CSS 代码里支持的是 HSL，而不是 HSB。如果和前端对接时，UI 给到的是 HSB 的色值，那么最终落地的颜色效果会与设计稿有出入。
• 我们接下来讲到的配色推导，是基于 HSB 颜色模式的，因为它更容易理解，数值变化在色系坐标中的产生的结果更加直观。

配色推导

支付宝 Alipay Design 团队提出过一个配色原则：

以同色系配色为主导，多色搭配为辅。

同色系为统一的色相，使用中可以加深品牌色的感知，可以让界面更有层次，同时可以让界面保持色彩上的一致性；由于业务的多样化，我们需要多色搭配为辅；多色的辅助颜色，也可称之为功能色，可设定不同的任务属性和情感表达；再搭配中性色黑白灰，赋予更多的变化和层次。两种配色通过主次、使用比例，可灵活运用在业务的各个场景中，具有非常好的延展性。

那么知道了这个原则，我们又该如何科学、合理地得出产品的色彩系统呢？接下来我就用我的一个项目示例给大家做讲解。

步骤一：找到符合产品调性的品牌色

我负责的该项目主要业务与高校支付、缴费相关，所以希望整个产品视觉风格首先要给用户带来安全感。又因为主要用户群体是高校师生居多，新潮、年轻化是主要用户的一大标签，所以我们选择了用饱和度较高的蓝色来作为品牌色。

最终选择品牌色的 Hex 值为 #1585FF ，HSB = （211,92,100）。

步骤二：提取24色

选定了品牌色之后，以品牌色的 H（色相）为基础，不断地递增、递减 15，在 0-360 之间可以得出 24 个颜色，也就是将 360° 色环分割为 24 份，可以得到 24 色。

为什么要提取 24 色，并且以 15 为公差呢？

我们知道，想得到邻近色、类似色、互补色这一系列的颜色，我们就会使用到色环。

• 邻近色：色相差值 15° 以内的颜色为邻近色;
• 类似色：色相差值 30° 以内的颜色为类似色;
• 互补色：色相差值 180° 的颜色为互补色。

而 24 色色板是帮助我们提取辅助色的便捷工具。

步骤三：找到同色系配色

同色系是指与品牌色 H（色相）一致，通过改变 S（饱和度）与 B（明度）变化产生的色组。同色系色组的推导需要借助拾色板坐标。

我们建立一个基于 S（饱和度）与 B（明度）的平面坐标系，设定当前品牌色为色值为（S₀，B₀），连接品牌色色值点与右上纯白点（0，100）、右下纯黑点（100，0），得到两条线段。

我们各在两条线段上均分取得 5 个点坐标（包含首位两点）。这样两条线段一共就会产生 11 个（S，B）坐标值，对应着 11 个同色系色组。

经过上图的计算，我们可以得到基于品牌色的同色系色阶。

步骤四：多色搭配

用于搭配的辅助色应满足以下两个条件：

• 和品牌色有明显区分：尽量避免所选辅助色感官上给用户视觉区别与品牌色差距不大，传递的调性太过一致；
• 不能过于突兀：根据色彩原理来说，互补色是最能与品牌色本色产生视觉感官对比的颜色，但可能会有些突兀。为了让颜色的辅助起到丰富画面的作用，而不是反而让整个版面显得不和谐，所以我们选择互补色的邻近色作为辅助色，而不要直接使用互补色。

于是根据以上条件，基于品牌色可衍生出 3 个辅助色：一个与品牌色传递调性有明显区分的类似色；两个互补色的邻近色。

步骤五：感官明度校准

经过计算后，我们已经得出了品牌色和三个辅助色。

可以看出，虽然我们提取出的辅助色明度色值都一致，但因为颜色本身自带的感官明度属性有所区别。为了让辅助色和品牌色的感官明度尽量一致，我们要对第一次提取出的辅助色进行感官明度校准。

校准方式是：依次在辅助色上叠加一层纯黑图层，将该纯黑图层颜色模式调整为 Hue（色相），就可以通过无彩色系下的明度色值，进行对比。

这样我们终于得到以品牌色为基准的 3 个辅助色了。

步骤六：全色系输出

将得到的辅助色依次进行步骤三的计算，可以得到辅助色的同色系色阶。

但因为明度过低时，颜色已经非常接近于黑色，色相在肉眼上几乎已经趋于一致。所以删除最左边的三种同色系颜色。最后得到基于品牌色推导出的全色系色阶色板。

总结

完成了以上的工作，当然还不算结束。一套标准的色彩系统还会包含中性色规范、颜色的使用规范等等。但相信解决了大部分的需求，剩下的工作也难不倒大家了。毕竟以上的方式只是给大家提供了一个理性科学的方法，色彩的使用最终还是要融合设计师个人的共情能力。

比如许多产品有了一套自己的色彩方案后，设计师还会根据具体的业务场景去赋予 icon、卡片背景等元素不一样的色彩方案。

希望这个方法能够带你发现一些色彩背后的数学秘密。

文章来源：优设    作者：UCD耍家

很多同学投票想看看设计师的草稿本，今天就来满足大家了！我们来看看六位淘宝设计师的草稿本们，有些是纸质派，有些是电子党，Here we go！

草稿本是设计师工作生活必不可少的工具，比起正儿八经的作品集，设计师的草稿本其实也是十分有趣的，它是设计师脑海里千奇百怪想法的随手记录。

Shiyu：本人是被胁迫公开草稿本的卑微设计师

手绘装备：iPad Pro+Procreate

以下是被迫营业现场对话

△ 给「老同学」的公众号形象草稿

老同学：「好久不见~我记得你画画挺好的~帮画个形象呗~我现在在做一个公众号，需要*&%￥#……你明白吧？你就简单画一画就好~谢谢啦」

我：「….」

△ 给「朋友」画的头像草稿

朋友：「好久不见~我记得你之前帮谁谁画的那个头像挺不错的~也帮我画一个呗~我现在在做blablabla，需要*&%￥#……你明白吧？很简单吧~谢谢啦」

我：「….」

Dajing：我的草稿本就是平时画画原型图或者需要做文档整理规范的时候拿出来画画草图，对我来说我的草稿本是帮我理清思路的一个很好的助手。

手绘装备：A4点格草稿本+马克笔

 △ 智能配色草稿

△ 中后台加框草稿

Dajing：里面有当时做中后台框架的时候导航的原型，还有之前做智能配色的时候HSB色环推演的草图，还有些文档维度整理草图，画出来方便查看也便于直观梳理自己的逻辑。

Wanru：画画是我记录生活、寻找灵感的一种方式。

手绘装备：MUJI笔记本、水彩、铅笔、马克笔等等…

△ 冲绳旅行水彩

Wanru：水彩是我最喜欢的绘画形式，非常浪漫，食物也是我擅长画的题材。这是在冲绳旅行时的第一顿晚餐，新鲜的海鲜和爽口的啤酒也具有明亮的颜色，让人忍不住想去表达。烧肉店的杯垫被我带了回来，日本的平面设计做得很好，是很好的素材～

△ 电影小漫画

用小漫画记日记的习惯已经很多年了，我是非常喜欢漫威的，这是13年《钢铁侠3》上映和两个朋友看电影的场景。这个场景必须用美漫的风格了！偶尔会尝试各种画画风格。

△ 随手小速写

偶尔会画些小速写，勾一些人物、小物品、小动物，速写可以很好地练习造型能力。

Zoey：作为一个热爱喝奶茶、追番和打手游的肥胖又无助的设计师，感觉累了就在草稿本上放空自己。

手绘装备：iPad Pro+Procreate & Sketches Pro

△ 记录日常生活的草稿

Zoey：我很喜欢用草稿本记录自己的生活（食物为主），喜欢的电影角色也会简单画下来。

△ 二次元小画

作为半个二次元 ，草稿本当然也被满屏的羞耻占领~ 这两张草稿是我画的Persona 5里面的人物，因为我个人真的特别喜欢P5 ，对于自己喜欢的事情即便996也会熬夜画下去~

Dribbble 经历了资本入驻、创始人出走之后，最大的事情应该就是这次改版吧？这个全球最大、最有影响力的设计师社区的每一个动作都必然会牵扯着每个设计从业者的注意力，新版背后到底有哪些变化？这些变化又是出于什么样的想法来修改的？看看 Dribbble 的官博是怎么说的吧：

在过去的10年当中，Dribbble 已经成长成为一个全球性的社区，成千上万的人从这里获得启发和灵感，助力设计，而我们从最初分享设计作品小样的创意社区，逐步成长为一个全球设计师产品和作品集展示和社交的平台。在此，而我们也第一次开始问自己一个简单的问题：【我们到底是在做些什么？】

今天，我们很高兴宣布，我们在过去的10年当中首次进行了彻底的重设计。

Dribbble 的新时代

在过去十年当中，我们所设计的 Dribbble 页面的特点，是将设计师的作品和内容放在首位，所以叫我们不追随潮流，采用了极简风格的设计，即使潮流来来去去，它们也只是 Dribbble 展示内容的一部分。我们提供了一幅未经修饰的画布，这样就可以和最疯狂最激进的设计探索相辅相成。不过，这么多年来，Dribbble 这种「隐形」的设计，在视觉美学上确实和时代脱节了。这次，我们创建了一套有着一致样式的设计和代码库，用以替代以往不断修改、庞大且不一致的代码。

「我们新的设计系统旨在保持整个视觉和谐的同时，展示你的创造力。」

如今，我们正在改进 Dribbble 的界面，以更加干净的布局、统一的设计系统、更加简化的配色方案、更加轻便的代码库（加载也更加迅速），以及全新配置的文件，来更好地帮你将作品推到最前沿，正确而合理地展示你的创作和个性。

我们新的设计系统旨在保持整个视觉和谐的同时，展示你的创造力。它是你分享设计作品和创造力的理想画布，而新的美学特质也可以更好地反应此刻我们的公司的气质。

全新的设计师个人页面

在进行重设计的时候，我们明确知道，我们要完全重新思考社交化的设计师作品展示，并且将创意更大化地呈现。对于 Dribbble Pro 用户和 Pro Business 订阅者，你现在拥有一个全新的、经过全面修改的设置和配置页面，可以在 Dribbble 上充分展示自己的个性，

你的页面，你的个性

Pro 用户和 Pro Business 用户可以通过上传你自己的首图和定制化的欢迎语，来个性化你的个页面。

你还会注意到，你的个人页面还可以上传更大的照片，这可以让你的作品对于页面的访客、你的客户、招聘设计师的企业人事而言，看起来都是非常出挑的。新的网格布局是可以自定义的，因此你可以充分完美地设置和展示内容。

此外，我们还修改了「关于我们」这个部分，新版当中，这个部分你可以将所有的个人信息汇集到一起，以便完整而充分地展示你的个人经历、展示简历和技能。

寻求工作机会？

如果你正在寻求工作机会，新的信息发送组件，确保了你的客户或者招聘企业可以一键联系到你，他们可以直接从你的个人资料页向你发送信息，非常轻松地和你取得联系。

面向所有人的新个人页面

当然，并非是只有 Pro 和 Pro Business 用户才能拥有高度定制化的个人页面，无论你是普通用户、内容创作者还是内容策划人，Dribbble 上每个普通用户的个人页面也都会升级。尚未订阅 Pro 服务的设计师会注意到，他们的个人页面会更加简洁，而设计作品会以更加聚焦的形式，吸引到每一个访客的目光。

全新的收藏页

我们将以往的带有分享功能的收藏合集页（之前叫 Buckets）给翻新了，你可以精心策划整页内容和案例，从一个情绪板到完整的项目，这意味着，借助这个收藏页功能，你可以更加轻松地在 Dribbble 上寻找和搜集灵感。

给策划人的个人页面

现在，我们可以非常自豪地宣布，即使你并没有将 Dribbble 作品给分享出来，每个人也都会拥有一个策划人页面，你可以在其中搜集和整理自己喜欢的作品，来展示你的个人品味，通过保存别人的作品，来创建新的合集，我们会自动将它添加到你的个人页资料页当中，让全世界的同好因为品位而关注你。

升级发现页

我们在整个改版设计过程中，面临最大的挑战，其实是图片网格，因为这是绝大多数用户每天浏览图片、发现设计灵感的地方，我们有意识地去弱化 Dribbble 本身 UI，避免喧宾夺主，让每个用户的作品成为视觉焦点，减少噪音。

当然，我们还未完成…

2020 年才刚刚开始，我们迫不及待地想要展示我们计划中的一切。从案例研究到更好的视频支持，再到作品集展示，摆在我们眼前的改版路线图足以证明我们的雄心，所有的这一切都是为了让全球的设计师能够从中获益，走向成功。请期待我们进一步的改版升级吧！

文章来源：优设    作者：Dribbble

快速变化的技术每年都在影响着设计趋势。作为设计师，我们需要时刻保持关注，对设计趋势拥有较高的敏感度，不断学习，扩充自己的设计技能，目的是为了跟上的市场环境。基于我的调研，经验和观察，我甄选了在2020年你将会看到的最为关键的8个UI/UX设计趋势。让我们一起来看看吧。

动效插图

插图被应用到APP中已经有很长一段时间了，它们在最近几年的演变令人印象深刻。插图作为一种非常流行的设计元素，为我们产品的整体产品增加了情感化体验。插图非常能抓人眼球，尤其是在融入动效后会显得更加的自然，将产品带入生活的气息，使得产品功能更加突出，同时也增添了更多的细节和个性。

△ Welcome to Swiggy by Saptarshi Prakash

△ Onboarding animations — Virgil Pana

另一个好处是使用动效后，能抓住用户的注意力使其能够更加沉浸在你的产品中。动效同样是讲好品牌故事，产品或者服务最有影响力的途径之一。

微交互

微交互存在与每一个网页或者app界面中。每当打开你最喜欢的那些应用时，都有机会看到它们，比如像Facebook中就有大量不同的微交互，我认为「Like」功能就是一个完美的例子。有时，我们几乎意识不到它的存在，因为它们非常的不显眼，非常自然地融到界面中去了。但是，如果当你把这些微交互移除掉的话，你又会非常快的注意并能感受到一些非常重要的东西丢失了。

△ Menu toggle close animation — Aaron Iker

△ Tab bar active animation — Aaron Iker

一般来说，在UI/UX中即使非常小和细节处的设计都可能会带来巨大的冲击力。微交互就是完美的证明，细节和对它的关注能极大的改善产品的整体体验，并让产品体验上升一个台阶。每年，新设备的发布伴随着新的机会，能给产品塑造新品牌和创造富有创意的微交互。

3D图形

3D图形设计几乎无处不在，比如在电影，游戏或者运营广告里等等。3D图形设计早在10年前就出现了然后一直在不断提升和进化。手机和web技术进展迅猛，新的web浏览器能力打开了3D设计新世界的大门，这给了设计师们在web和手机界面中创造炫酷3D设计的机会。

△ 3D flip menu by Minh Pham

△ Car health report UI by Gleb Kuznetsov

创造并整合这些3D创意设计到web和手机界面中需要特殊的技能和花费大量的工作，但这些付出会得到回报。

△ Apple AirPods Pro landing page

3D设计对于产品和服务来说，具有非常大的吸引力，例如在交互上能够支持用户360度查看产品，从而大大提升整个的产品体验。

在2020年会有更多的品牌利用3D渲染模型的产品和服务去模仿线下购物体验。

VR设计

VR技术在2019年有一个巨大的飞跃。最近的一年我们激动地看到了头戴式设备有了非常大的发展，尤其是在游戏领域。我们需要记住的是，游戏行业经常在引领着新技术的发展并落地到实际的产品设计中。研究表明，VR也不例外，在Oculus Quest于2019年推出后，许多机会为其他行业打开了大门。Facebook CEO 扎克伯格已经测试了激动人心的手部交互功能，并正式宣布将在2020年初为Quest进行更新。

△ Oculus Quest — hand interaction feature

△ PlayStation Virtual Reality Website Design by Kazi Mohammed Erfan

索尼和微软计划在2020年夏季发布他们的新设备，这就给VR技术带来巨大的机会和发展空间。

学习VR 可以阅读优设这个专题：https://www.uisdc.com/zt/vr-design

AR设计

在最近几年，我们能看到在AR（增强现实）这块有了很大的进步和惊喜。世界引领着科技公司在AR开发方面进行了巨大的投入，所以我们应该期待这项技术在2020年有更大的成长和发展。苹果公司也发布了他们自己的AR套件叫AR KIT3来帮助设计师和开发者在他们的产品中打造AR体验。

△ Apple ARKit 3 by Apple

△ Public transit app by Yi Li

△ House of Plants AR Concept by Nathan Riley

在AR空间里会有无限的机会和创意去打造一个新的品牌和激动人心的体验。为AR做UI设计会在2020年成为一大趋势，这就要求设计师们在面对创造AR产品体验前，应该去准备和抓紧学习新的工具，原型之类的知识。

学习AR 可以阅读优设这个专题：https://www.uisdc.com/zt/ar-design

新拟物化设计

一般来说，拟物化设计是指以现实风格/方式创造出来与现实中的物体相匹配的设计元素。不断发展的VR/AR技术以及在各大最流行设计平台（Dribbble,Behance等）上展示的设计作品趋势来看，预示着拟物化的回归，但这次换了个更现代，更酷略微高大上的名字叫「新拟物风」（也叫Neumorphism）。

△ Skeuomorph Mobile Banking | Dark Mode by Alexander Plyuto

△ Simple Music Player by Filip Legierski

△ Sleep Cycle App — Neumorphism Redesign by Devanta Ebison

你可能注意到了：Neumorphism代表了丰富细节和明确的一种设计风格。高光，投影，发光，这些细节非常令人印象深刻。Neumorphism风格已经鼓舞了全世界一大批的设计师创作作品，它也会成为2020年最大的设计趋势。

学习新拟物风可以阅读优设这个专题：https://www.uisdc.com/zt/neumorphism

不对称布局

最近一年我们也注意到一种不对称风格正在快速发展。传统基于「模板」的布局肯定会消失。这种设计趋势给2020年的设计带来了更多的差异化。合适的不对称风格将会在我们的作品中增多一大批不同的性格，火力以及个性，所以设计不再单纯的基于模板。

△ Limnia Fine Jewelry Grid — Zhenya Rynzhuk

△ Carine fashion store — selection screen concept — Dawid Tomczyk

当设计这种不对称风格时，设计师拥有非常多的选项以及巨大的发挥空间。但是，想设计好这种不对称风格需要大量的练习，它绝不是将元素随机的摆放在网格中，而应该小心使用和实现它们，时刻需要把用户的诉求考虑到设计中。我们并不想让用户迷失在我们的产品中，对吗？

用户故事

故事在整个用户体验中扮演着非常重要的角色。你可能经常会在着落页看到它作为品牌介绍，产品或者一个新的服务。讲故事就是利用创意的形式把信息传递给用户。这可以通过强大的视觉元素来呈现（字体，插画，高清图片，颜色，动画，交互元素）。

△ A+WQ / Young Lab Page Story of The Week Animation by Zhenya Rynzhuk

△ Free Sketch Template :: Mimini by Tran Mau Tri Tam

讲故事可以帮助产品创造出品牌和用户之间积极的情感连接。讲故事可以为你的产品创造出非常多的记忆点，让用户感受到自己就是产品或服务的一部分，他们便会更加愿意使用你的产品。话虽如此，讲故事也是一种非常有效的营销手段，它可以极大地提高你的产品/服务的销量。讲故事作为一种非常成功的手段，将在2020年继续发扬光大。

总结在2020年非常值得关注的8个设计趋势

1. 动态插图

通过把动画和插图进行结合，我们可以使得设计变得更加突出，并把它带入用户的日常生活，为产品赋予了的细节和个性化。

2. 微交互

微交互被证明是可以在当用户注意到他们是能够带来非常大的惊喜体验，它能够有效的提升整个产品的用户体验并把产品的品质提升一个等级。

3. 3D图形的应用

新的浏览器技术打开了3D图形应用的大门，能够给设计师带来非常大的创意机会去打造让人惊叹的3D图形设计应用到网页和手机APP中。

4. 虚拟现实

游戏行业将迎来新的变革，新的技术能够应用到产品设计中。

5. 增强现实

在AR空间中拥有无限的机会去创造新的品牌和令人激动的新体验。为AR技术服务的UI设计将在2020年成为主要趋势，设计师需要位为之准备并去学习新的工具，原型，当真的需要你去做一款AR应用时就需要用到。

6. 新拟物风

AR/VR技术不断发展，以及在各大流行设计平台上大量涌现的写实设计作品预示着拟物风的回归，但只是这次换了个新的更加现代化的名字。

7. 不对称布局

运用不对称布局能让设计创意变得拥有更多选项和机会。虽然，设计一个成功的不对称布局需要投入大量的练习和时间。

8. 讲故事

讲故事就是利用创意形式把信息传递给用户。讲故事是一个非常好的营销工具，可能会大大增长产品的销售额或服务。

文章来源：优设    作者：彩云译设计

最近关于新拟物化 Neumorphism 的风太大，简直是传遍大江南北无人不知。对于它的看法大家也都众说纷纭，大部分的观点都集中于：第一看过去非常的高大上，再仔细琢磨一下就感觉只能是飞机稿中的战斗稿。对此我表示非常的理解，毕竟在国内体制下的用户界面设计基本都延续商业设计的命脉──低效能、不实用、不能带来良好转化的东西统统给我丢掉，哪怕是用户体验也是建立在商业目标驱动下的存在。

尽管观点如此，我还是想为新拟物化这位诞生在不平凡 2020 年的新生儿稍稍正个身，它并非空穴来风，也并非完全无法落地使用，相反如果合理加以优化应该能达到意想不到的双赢效果。

新拟物化的由来

一切的开始都源于一个叫 Alexander Plyuto 的设计师在各平台发布了一个他的新作品──「Skeuomorph Mobile Banking（拟物化手机银行）」。

在去年末的时候这名设计师还一直沿用 Skeuomorph（拟物化）这个名词来命名自己的一系列设计作品，直到 HYPE4 的 CEO-Michal Malewicz 写了一篇关于此风格的文章，并赋予了它一个新名词 Neumorphism（New+Skeuomorphism），自此之后大家就都照着这个新名词进行传播了。

在详解新风格之前，先让我们回忆一下这些年移动端用户界面设计风格的演变历程。自 2013 年苹果推出了 iOS7 之后开始刮起的扁平风潮，所有走在设计前沿的大厂都开始不约而同地对自己家的 app 进行了大刀阔斧的改版。

这扁平风一刮就是 7 年，仔细分析一下就能明白为何 ta 如此长寿：内容优先的认知简约，不仅拓展性强且具有能的特性，解放了一大堆「手活」不是那么好的设计师，让他们有更多时间专注在设计解决问题的命题上。

但就算一个风格再适应市场的需求，用户和时代还是会对它逐渐疲惫，审美疲劳和新的市场需求都会催生新的变革。

新拟物化设计语言解析

1. 新拟物化≠轻拟物

第一次看到这个风格介绍的时候险些以为就是曾经的轻拟物重返江湖了，但仔细看看原设计师输出的设计原则，发现确实是完全不同的 2 种定义。

轻拟物从本质上来说是 Y 轴面原质化层级分离的，而新拟物是在 Y 轴面不分离的情况下物理化拟态。

来看一个轻拟物与新拟物卡片的比对：

从上图可以感受到新拟物在保留轻质感的同时，更贴近事物的物理还原，但真实感与舒适度带来的代价就是它的辨识度和对比度明显较其他风格低了很多，这也是它被大家吐槽飞机稿中的战斗稿的重要原因之一。

2. 新拟物化控件示例

原设计师对新拟物化的「浅色版」控件规范如下，基本涵盖了核心的界面设计控件，整体对于控件的定义就在于良好使用投影和渐变来打造物理化界面肌理。

另外还有可以良好适配当前流行黑色模式的「黑色版」。

新拟物化的改良与应用

在了解新拟物化的设计语言特点之后，大家应该都发现这种风格的设计是有一定局限性的，它并不适用于一部分商业产品，大部分时候也不适合全局控件应用。那么如果我们想要把新拟物化应用到我们的落地项目设计中，需要注意哪些地方，并进行什么样的改良呢？

1. 深浅模式叠加解决弱可视难题

新拟物的按钮肌理很多是建立在素色白板上的浅色按钮，如果继续沿用浅色按钮，且不说色弱用户的可视问题，普通用户的操作行为也会大打折扣，所以这里我们建议将新拟物的深浅模式叠加来使用，如下图：

2. 局部高光使用解决层级难辨问题

如果将新拟物化全控制使用，确实容易造成界面层级混乱的问题，因为毕竟它的设计语言就是 Y 轴面不分离的设计定义，但如果我们合理选择它来作为局部高光，应该大部分情况下还是不错的。如下图，我们仅在银行卡部分使用新拟物化（深浅双模式均可用），其他的控件部分保持扁平，使用 2 个风格相融合的方式可以良好保障层级的划分：

3. 拿什么解决开发崩溃的问题？

之前看到很多文章在转发一个生成新拟物化 css 代码的网站：Neumorphism.io，说是用这个就可以轻松解决开发的问题。

然而事实的真相总是令人落泪的，这个网站提供的 css 代码只是网页代码，移动端是完全用不了的。而且就算有对应的 css 代码，对于开发来说也是远不够的，他们还是要写框架来支持这套 css 代码，不然是跑不起来的。所以我们要如何解决开发小哥哥手写新拟物化设计稿崩溃的问题呢？

很简单，就是给他们切图。按钮的软点击切两张状态图，卡片背景只需要切一张，ppduck 压缩走一波，对 app 性能的影响基本可以忽略不计（因为上文我也说过了这种风格不大可能大面积或者全界面应用）。

至于新拟物风不适用的场景大家应该都心知肚明了，信息承载大，层级关系复杂，我就不一一举例了，基本就涵盖了大部分现在市面上主流的产品的大部分场景。但即便如此我们还是需要对新的设计保有一丝激情与希望，不要轻易的去否定，毕竟新生事物总是有它的魅力与独到之处。

文章来源：优设    作者：Nana的设计锦囊

我们总在期待 Next Big Thing，企盼下一次数字革命。喊了这么多年的物联网现在还没有明显起来的迹象，而 VR 也因为头戴设备的大型化和沉浸式场景的泛用性较差的原因，反倒是 AR 和 MR 依托智能手机、浴霸式镜头组和 APP 有一定起色，但是也没有到革命性改变的程度，只能算是一个小趋势。当然，人工智能/深度学习所带来的影响更加深远，但是短时间以内，它所带来的变化趋近于隐形。

而最近2年，各种双屏和柔性屏的发布，则可能是距离我们最近的硬件变革，可能和柔性屏/双屏设备有关。

也许现在说硬件交互设计到了类似 2007 年 iPhone 发布一样拐点有点夸张，但是对于现在几乎纯粹拼配置死水微澜一样的手机电脑市场而言，这种明显区别于以往的硬件设计，将会直接带来交互、设计和体验上的改变。

柔性屏和双屏设备

2019年是否算得上是双屏设备元年，现在下结论为时过早，但是去年三星 Galaxy Fold 和 Moto Razr 的发布，确实给广大硬件厂商好好打了一个样。

尽管Galaxy Fold 去年折戟沉沙了，但是高昂的沉没成本和大势所趋让三星肯定不能就这么算了， 回炉再造一番之后今年又带着船薪版本的 Galaxy Fold 2 杀将回来，顺带还兼顾女性市场整了一个对标 Moto Razr 的化妆盒手机 Galaxy Z flip。

图片来自 TheVerge

当然，华为的 Mate Xs 也是相当优秀的产品，这款明显对标三星 Galaxy Fold 2 的产品，并没有将柔性屏制作成为向内折叠，而是完全翻过来，将它作为外屏来进行设计，反向折叠，展开的时候，屏幕自然延展。

图片来自 TheVerge

不过思路最为清奇的并非是华为，而是 TCL。就在这几天，TCL 带来了两款全新的原型机，一款手机带有两个折叠轴，相当于是将传统手机屏幕延展到以往的3倍，彻底折叠开相当于是一个 10英寸的平板电脑（回过头来想，就像是将一个平板电脑反向折叠到手机的大小，但是重量不变……）。

图片来自 TheVerge

另外一款原型机则选择了抽拉式的设计，机身可以如同抽屉一样拉开，柔软的屏幕会被拉出，延展开来差不多和 iPad Mini 一个大小了。

图片来自 TheVerge

图片来自Engadget

除了这几款之外，在今年年初的 CES 消费电子展上，联想、戴尔、华硕，这些目前世界上最大的消费电子制造商，纷纷带来了各自的折叠屏和双屏设备。

联想带来的 ThinkPad X1 Fold，是一个价格昂贵的柔性折叠屏平板电脑，它额外附带了一个蓝牙键盘。

图片来自 TheVerge

考虑到联想在此之前已经发布过带有LEC+墨水屏的双屏设备 Yoga Book 2，可以说联想是已经具备了制造两种不同类型屏幕设备的能力。

作为对手的戴尔，带来了分别对标联想这两个系列的对应产品：Concept Ori 和 Concept Duet。

Concept Ori 采用的是两块传统硬屏，你既可以让一款屏幕作为屏幕，另一块作为虚拟输入键盘或者手绘板，也可以使用配备的蓝牙键盘，吸附在底下的屏幕上来进行输入，而且当键盘移动到靠近转轴的地方，还能让底下露出的半块屏幕作为触控板来使用：

图片来自 TheVerge

Concept Duet 在概念上则和 联想的 ThinkPad X1 Fold 类似，一块柔性可折叠的屏幕，便于收纳，一体连接。

图片来自 TheVerge

看了这么多硬件，是不是觉得信息量有点大？不过简单来说，所有的这些产品，都在说一件事情：屏幕要延展开，这是一个正在发生的趋势。

同时，我们还注意到一个很明显的特征，就是所有的这些柔性屏设备都非常的……骚，且贵。动辄两三千美元的起步价，如果可靠坚挺也就算了，不仅转轴易损，且屏幕也存在易损的问题。根据 ifanr 的上手评测，即使是在优化了转轴和屏幕折叠角度之后，三星所发布的 Galaxy Z Flip 的屏幕中段依然有着不可忽视的折痕，这一问题可能会是绝大多数折叠柔性屏设备的通病。

图片来自爱范儿

与之相反，采用硬质双屏设计的硬件设备，从生产成本、工艺成熟度、价格上，都更加有优势。

值得注意的是，柔性折叠屏和硬质双屏设备，在基本的使用体验和逻辑上是一致的，除了极少数特殊的设备之外（比如 TCL的双折叠式的概念机），多数情况下，两者是差不多的。

只不过存在一个问题，双屏设备的交互和体验，需要有对应操作系统支持，因为从单屏到双屏，其实交互逻辑已经发生了巨大的改变。

双屏硬件的操作系统

一直在创新且「稳健」地更新软硬件的苹果公司，应该不会在市场未曾成熟的情况下选择发布硬件，这意味着你不会很快看到双屏 iOS 硬件，而面向着大量 OEM 厂商的 Android 和 Windows 则截然不同。着两年厂商已经身体力行证明了一件事情：只要操作系统和设计跟上，硬件马上量产不是问题。

最近泄漏的 Android 11 的新特性已经出现了可折叠屏幕的影子，但是具体情况恐怕要到因为疫情跳票的 Google I/O 大会上会揭晓答案。但是另一边，贼心不死的微软，已经开始布局面向可双屏设备的新一代操作系统 Windows 10X了。

图片来自 TheVerge

去年微软发布的两款双屏设备 Surface Duo 和 Surface Neo 并不都是采用尚未发布的 Windows 10X 操作系统，但是两者都沿用了几乎相同的交互逻辑，较小的 Neo 采用的是 Android 操作系统。这两款硬件和系统交互设计，将会在未来一段时间以内，成为双屏硬件的软件交互的重要参考和主要标杆，联想和戴尔这波 OEM 厂商，无疑是参考着微软的风向标来搞硬件产品的。

图片来自 TheVerge

传统而臃肿的「开始」菜单栏在 Windows 10X 当中，被精简为我们更熟悉的模式，新的 Windows 10X 在原有的 Windows 10 的基础上，应该有对移动端（比如 ARM 架构的CPU）和小屏幕有更好的支持。

但是，更有价值的，是微软为双屏设备所制定的交互设计规范。

下面是基于微软官方文档，精简编译后的规范：

双屏的交互规则

双屏交互概述

双屏设备可以基于不同的工业设计，有多种硬件样式。微软发布的 Surface Neo 和 Surface Duo 可以作为典型的双屏设备作为参考。双屏本身可以借由铰链、转轴来连接，也可以基于柔性屏来实现。

所有的双屏设备都具备有折叠、旋转、翻转的功能，两块屏幕都可以用来作为显示，也可以一个做屏幕一个承载虚拟键盘，当然也可以借由外设，构建、组合成为新的模式。所以，为这样的硬件设计的时候，需要考虑到各种不同的情况，并且适配硬件，帮助用户实现更多的目标。

图片来自 TheVerge

当用户打开应用的时候，它的主要界面窗口应该最大化，占据一块屏幕的全宽和全高。这样用户可以一次打开多个不同的应用，显示在双屏上。

图片来自 TheVerge

当然，你的APP 也可以完整铺满两个屏幕，这个界面布局被称为「跨屏布局」。在默认情况下，它应该像在大屏幕上一样，一个窗口跨屏幕显示。但是你可以修改这种模式，让它可以铺满两个屏幕的同时，还可以兼顾到中间有转轴和铰链的硬件。对于这个问题，我们随后有详细的讨论。

1、拥抱和改进现有的功能

响应式布局

比起传统的响应式布局，对于双屏硬件，我们要讨论的「响应」模式要复杂得多。就像下面这张图中所说的，要为这样多样、复杂的情况进行设计：

我们默认用户在多数时候，是处于双屏展开的状态，当用户打开 APP 的时候，它的主要界面窗口，将会最大化占据一个屏幕，这个时候另一个屏幕处于空置状态，用户可以在这个屏幕上打开另外的应用，并且用户可以通过托拽窗口的方式，来重新整理窗口和APP的排布模式。

同时，单个应用程序也应该可以进行跨屏布局，既可以让单个应用分别在两块屏幕上各呈现一个窗口，也可以作为单个窗口完整铺满两块屏幕。不论是充分利用接缝的存在，还是说尽可能地利用全部屏幕区域来聚焦单个内容，应用程序应该都可以做到。当然，这些情况我们随后会单独说到。

2、拥抱和改进现有的功能

首先，作为一个已有的应用程序，在双屏设备上应该能够继承原有的功能，并且尽可能地兼容双屏的体验。在开始讨论如何为双屏场景进行设计应用之前，我们先应该对双屏交互进行介绍。

双屏的响应式布局

首先，无论屏幕尺寸如何，方向如何，应用程序应该都可以保持良好的外观，善用 UI 平台的现有的布局技术，通过合理地缩放来自适应，填满屏幕。如果你的屏幕元素依赖屏幕长宽比，那么应该善用平台给的 API 来进行灵活的优化。

考虑到你的应用将会在很多不同尺寸、不同长宽比、不同类型的设备上运行，所以你的应用程序应该足以应对各种不同的情况。请记住，你的设计将会遭遇和以往截然不同的屏幕尺寸和长宽比，比如纵向（全景视图）、横向（较宽的全景视图）、纵向双屏分别显示等不同情况。

考虑所有的屏幕方向

用户在很多平台上有习惯的、常见的屏幕方向，比如在 Android 和 iOS 上，通常应用是竖屏显示的，在 Windows 上，多数情况下是横向全屏显示的。而在双屏设备上，这种情况会发生改变。

比如你的应用原本是为竖屏设计的，但是需要经常输入内容，那么你要考虑到双屏设备上，你的应用可能是会被横屏显示，用户会像用笔记本电脑那样来使用应用，也就是说两块屏幕都横向显示，靠下平摊在桌面的屏幕会显示虚拟键盘或者手写区域，作为输入窗口，而显示窗口也是横向的。

双屏为多任务提供更好的显示环境，你不会知道用户会在什么样的场合，以什么样的姿势来握持设备，但是考虑潜在的使用姿态，可以让你更好得对应用进行设计和优化。

根据我们的研究，如果你的应用是注重输入的应用，那么用户在平面上打字和输入将会是最舒服也最常见的姿势。那么在这种情况下，你应该针对横屏显示进行针对性的优化。

支持多种输入模式

对于新的双屏设备，通常都支持多种输入模式，包括打字输入，屏幕触摸和手写笔这样的截至。这意味着用户可以灵活地根据需求，选择不同的姿势和输入模式，并且快速切换，以适应不同的需求。

换句话来说，就是你在设计的时候，需要支持所有的输入方式，以便用户可以自由选择交互模式。

托拽交互

你的应用应该支持屏幕托拽，这不仅是为了兼容双屏设备，而是对于绝大多数的设备的使用情况而进行兼容，确保用户体验的一致和灵活。只不过相比于在屏幕单屏上进行托拽移动，在双屏上托拽移动，将会带来更多的可能性，并且这样也将会在双屏使用场景之下，最为重要的交互模式之一。

为了确保托拽操作的自然，你需要确保诸如文本、图像、视频等常见的交互对象和元素，可以在任何地方进行剪切、复制、粘贴，并且对于共享和放松之类的操作也启用托拽操作，这将最大化地利用双屏的优势。

应用的多屏呈现

用户会希望在两块屏幕上并排显示同一应用中的不同内容，因此你的你用应该支持多实例呈现和运行。

多媒体内容画中画体验

如果你的应用是一个多媒体应用，那么应该支持画中画模式，用户可以边看视频边执行别的操作。

3、双屏用户体验常见注意事项

上面提及的很多功能属于基础应用要求，并不是专门针对双屏设备而做，但是如果你的应用支持上面的功能，那么在双屏上将会明显拥有更好的用户体验。接下来，我们着重聊一下在双屏设备上进行设计的问题。

在双屏设备上，你的应用应当支持在单个屏幕上运行，也可以在双屏上运行，当一个应用在两个屏幕上显示的时候，我们称之为「跨屏」，而跨屏显示这个问题对于双屏设备而言，是至关重要的，如何显示将会带来巨大的影响。这种独特交互模式可能会解锁前所未有的使用方法。比如，有转轴和接缝的双屏设备，因为屏幕的特征而非常适合分隔并行式的生产力解决方案。

1. 在设计双屏设备之前，你需要遵循下面的四个基本原则：
2. 提供持续的价值：能够良好地支持不同的交互模式，充分利用不同交互模式和多屏交互，让用户可以灵活地执行任务。它不应该只有有限的使用方法和模式，与其简单的支持一两种模式，不如多考虑几种不同的交互模式。
   不要只想着「跨屏」：应用不应该只在跨屏状态下才好用，不要将一些基本的功能在非跨屏状态下隐藏，避免用户需要跨屏才能用到基本功能。
3. 用户始终享有掌控力：为了避免给用户带来不可预期的破坏性体验，是否要跨屏，这个应该由用户自己来进行选择，而不是一打开就跨屏。
4. 让跨屏可预测：了解用户使用跨屏模式的场景，并且使用贴合用户预期的设计。确保不同的跨屏模式和呈现结果是用户可预期的。

跨屏是用户的选择

用户有选择如何使用应用的方式的权力，包括何时跨屏显示。某些应用可能在单屏或者跨屏显示的时候，看起来不够好看，但是如何使用的权力，应该交给用户去选择。

尽管本文会针对如何处理多屏布局提供几种不同的方案和想法，但是请选择适合你的用户和应用的呈现方式。

考虑用户意图和设备方向

当你的两个屏幕都被利用起来的时候（横向双屏，纵向双屏），了解用户的意图至关重要。尽管还有更多的调研需要做，但是结合我们目前已有的观察，可以得出如下的趋势：

• 在横向双屏模式下，用户更多希望充分利用屏幕空间，因此量屏幕多是用来扩展展示内容；
• 在纵向双屏模式下，用户通常喜欢执行多任务或者提高生产力的活动。因此这两块屏幕会被分开使用，或者分组使用。
  考虑所有支持的布局

在为双屏设备设计应用的时候，有四种常见的布局方案是你需要考虑的。通常这取决于应用是单屏还是跨屏，是默认视图还是全屏视图：

1、单屏默认模式

• 默认情况下，应用程序应该是最大化状态占据一个屏幕。在双屏分别显示模式下，用户可以单独同两屏的应用界面进行交互和处理，确保可以进行使用、比较甚至交叉引用。
• 这个状态应该是默认的。就像 之前说的，如果你的应用已经支持了不同分辨率、不同长宽比的屏幕，那么你不用做其他更多的事情。

2、跨屏默认模式

• 当设备处于双屏状态下（横屏双屏或者竖屏双屏），用户可以将单个窗口从一个屏幕直接延伸覆盖两个屏幕，为内容呈现提供更多的空间。这应该是用户自己的选择，而不应该作为默认打开的模式固化到程序和设置当中。
• 这一模式应该是可选的。这种跨屏显示单个窗口的模式，应该是双屏设备所独有的。如果你对于你的应用不做 针对性（针对双屏）的修改的话，它会像是在一个完整的大屏幕上显示一样。但是，你也可以针对双屏进行优化，确保你的应用可以兼容双屏设备的独特形态。这些将在后续详细说明。

3、单屏全屏模式

• 这种模式和之前的单屏默认模式是类似的，但是系统的UI（系统的任务栏、菜单栏、程序菜单、顶部标题等）将会隐藏，这样可以给你带来沉浸式的体验，是游戏和视频类应用的理想选择。
• 这种模式应该是可选的。你可以使用系统提供的 API 来实现单屏全屏模式。

4、跨屏全屏模式

• 同样的，你可以通过开发和优化来实现适合双屏的跨屏显示模式。如果用户在跨屏的时候选择的是跨屏全屏显示模式，那么应用在扩展之后，将会覆盖整个屏幕，并隐藏系统UI 元素。
• 这种模式应该是可选的，你需要考虑的因素和跨屏默认模式类似。

4、如何处理接缝

当单个应用以单个窗口运行，并且跨越两个屏幕的时候，跨屏布局就出现了。如果你原有的应用从未针对双屏设备进行优化的话，那么系统会提示你「应用将会扩展并占据所有屏幕」，并且这个时候，应用界面会自行调整大小，适应新的尺寸。

这种情况下，界面中间的接缝会显得非常明显。这是双屏设备先天的副产物。要如何优雅地处理接缝？这就是下面这节内容将会探讨的问题，我们将会提供一些常见的处理方案yi。

是否总是要适应接缝？

如果你的应用不作任何优化就直接在双屏设备上投放使用，接缝并不总会给用户体验带来影响。比如地图类应用，用户可以随意移动地图内容，接缝带来的割裂并不会对使用体验造成实质性的影响。在后面「扩展画布」这一节，将会对这个问题进行深入讨论。

但是对于另外一部分应用，接缝带来的问题就非常严重了。比如在一个表格类应用当中，如果不作修改和调整，有的内容会直接被接缝给割裂开，你必须进行滚动才能正常查看。而对于某些相对更加固定无法移动的元素而言，接缝带来的体验是破坏性的。而这个时候，我们需要使用一些技术方案来处理这个问题。

规避接缝

将元素移到一边

由于两块屏幕之间有明显的接缝，因此当用户在使用应用的时候，某些 UI 元素可能会正好被穿过接缝，逻辑上这不会影响功能，但是如果将这些 UI 元素移动到屏幕的一边来显示，会提供更好的体验。最好避免在接缝处显示文本内容，这会影响可读性。

应用程序对话框应该移到屏幕的一边，尤其是需要点击按钮操作的时候。

底部菜单应该移动到屏幕一侧，而不是延伸到两个屏幕上。

用户调用上下文菜单的时候，应该将接缝视作为屏幕边界处理，尤其是在靠近屏幕边缘的地方触发菜单的时候。

应用内的下拉菜单或者可扩展容器如果可能会跨越接缝的话，应该改变扩展方向。

当整个应用界面扩展开来的时候，应该整个移动到屏幕的上侧，而不是在靠近中心的位置横跨接缝。

贴合接缝

使用偶数列并和接缝对齐

当界面中使用网格布局的时候，垂直或者水平方向尽量使用偶数行或者偶数列，这样可以让接缝和界面间隙正好重合，用户可以更加舒适地查看信息。

在网格中使用偶数列，尤其是对于容器、表单，并且考虑到接缝来控制间距。

除此之外，还有许多应用会考虑充分利用另外一个屏幕来显示弹出菜单或者下级页面的内容。这种使用逻辑确实会让应用更加易用，并且在视觉上会更加干净清爽。但是请记住，如果弹出的界面并不是全屏的，可能会暗示它是可折叠和可关闭的，因此，你需要根据实际的设计需求，来灵活的处理呈现样式。全覆盖另外一屏的弹出界面，更加适合小尺寸屏幕。

重新排列 UI 元素

移动到接缝的任一侧

还有一种用来优化响应式布局的方法是，当屏幕方向或者大小发生变化的时候，重新排列你的内容。这种方式让你可以在两个屏幕上随意扩展你的内容，你可以通过分组来重新排列，以更有目的的方式来适配屏幕和内容。

遮罩和分割

对于一些无法重新排列的元素，比如全屏图片和视频，这个时候只能使用遮罩和分割的方式来处理。

遮罩的思路是，将接缝视作为一个遮罩元素，而图片被它给遮挡了一部分，根据格式塔原理，我们的大脑会自动补足缺少的部分，遮罩遮罩处理方式适合处理多媒体（视频，图片等）这样的画布类型的场景，在这些场景下，保持图像的连续性比显示内容的完整性更加重要。

分割的思路是将内容均匀切割为两个部分，完整呈现，这对于包含有多个控件和元素的普通界面而言，是更加合理的处理方式，包括可能会出现在屏幕中间的按钮。

根据类型的不同，这两种处理方式各有优势，我们将继续跟进不同的用户行为特征，来寻求更优的解决方案。

文章来源：优设   

旅程映射创建了一个完整的体验视图，正是这一过程将不同的数据点聚集在一起并进行可视化处理，以了解产品需求，从而可以吸引各个群体中不感兴趣的利益相关者，并促进协作性对话和变革。可通过揭示一系列交互过程中沮丧和愉悦的时刻来帮助了解客户体验，揭示了满足客户痛点，减轻分散性的机会，并最终通过暴露新机会提供附加价值而最终使产品脱颖而出。

如何使用旅程映射来了解与公司互动过程中的客户行为，思维方式和情感动机。旅程映射在理解和优化客户体验方面的实际应用，以及收集研究和从该研究中得出真实叙述的方法。

了解旅程图何时是有用的设计工具，以及如何向拥有预算批准的客户或团队成员阐明该工具的优点。如何使用成品传达见解，与跨部门团队成员互动以及如何通过发现激发变化。

旅程映射分为4条泳道：阶段，动作，思想，心态/情绪。省略大多数流程细节，反映了用户的思想，思考和情感。

旅程映射的价值：

• 查明引起痛苦或愉悦的特定客户旅程接触点
• 打破孤岛，以在组织范围内对客户旅程建立一种共享的理解
• 在前往内部部门的旅途中分配关键接触点的所有权

• A区：镜头通过分配（1）角色（「谁」）和（2）要检查的场景（「 what」）来为地图提供约束。
• B区：地图的核心是可视化的体验，通常跨旅程的（3）个大块阶段对齐。用户在整个旅程中的（4）动作，（5）想法和（6）情感体验可以用研究的引文或视频加以补充。
• C区：输出应根据地图支持的业务目标而有所不同，但是它可以描述发现的见解和痛点，以及（7）着眼于前进的机会以及（8）内部所有权。

客户旅程图的目标

• 建立同理心
• 推动对话和参与
• 建立共识
• 揭示机会

旅程地图与服务蓝图

将服务蓝图视为客户旅程图的第二部分。它们是旅程地图的扩展，但它们不是专注于用户（并从用户的角度出发），而是专注于业务（并以其视角）。他们可以在特定客户旅程中的各个接触点上可视化不同服务组件（例如人员或流程）之间的关系。客户旅程图之后，在进行组织或流程更改之前，内部查明漏斗或断点时使用服务蓝图。

客户旅程地图的目的是更好地了解最终用户的旅程。这段旅程包括他们的思想和情感。相反，服务蓝图反映了组织的观点，因此包括前期行动，后台行动和支持流程。客户旅程地图的主要重点是了解有关最终用户的更多信息，而服务蓝图的重点是记录组织如何创建这种体验。

如何构建旅程映射？

制定有效旅程图的五个步骤

1. 确定关键的前期约束

界限

对于要创建多少个旅程图没有严格的规定。旅程映射作为一个过程是有益的，因为它在团队成员之间建立了共同的愿景。通常，客户旅程图越集中，越好。在一种情况下，专注于一个角色的旅程图讲述了一个清晰的故事。

宽度与深度

确定旅程映射的范围广度，过程和范围的不一致和含糊不清会导致失败。

要素的平衡和重点

要素：角色，情境，动作，心态，情绪，接触点，渠道，发现。渗透各个要素及以接触点为重点从而发现机会点。

使用环境

明确使用环境，在如何的环境下使用，物理环境以及数字环境等。

接触点和渠道

接触点代表客户与组织之间的特定交互。包括正在使用的设备，用于交互的通道及已完成的特定任务。客户旅程由一系列接触点组成，每个接触点定义了特定交互的细节。地图应使接触点（地图中的参与者实际与公司互动的时间）和渠道（通信或服务提供方法，例如网站或实体商店）与用户目标和行动对齐。这些元素值得特别强调，因为它们经常是发现品牌不一致和脱节的体验的地方。

2. 收集研究

语境查询

观察用户执行任务时，您可以提出问题，从而可以澄清您的观察并引发开放式对话。

任务分析

任务分析最常见的产出物就是那些对用户为达成目标所采取步骤/行为的描绘。当我们把所有这些步骤都解析清楚了，就很容易发现用户在哪些步骤中付出了额外的努力，哪些步骤是能够直接去除以缩短操作流程的。

日记研究

由于客户旅程会随着时间的流逝并通过许多不同的渠道发生，因此日记研究是了解用户随时间推移的想法，感觉和动作的一种特别有用的方法。日记研究是一项长期研究：要求用户记录与特定目标相关的每项操作，以及他们在互动过程中的感受很多天，几周或几个月。由于参与者的行为，感受和想法尽可能接近实时地捕获，因此消除了访谈所依赖的（容易出错的）记忆。还在旅程的所有阶段（而不是一个阶段）从参与者那里获取数据。日记研究的建立成本低廉，可以在进行其他类型的研究时在后台运行。

定量支持

旅程地图应该产生真实的叙述，而不是童话故事。从收集任何现有研究开始，需要其他基于旅程的研究来填补现有研究无法涵盖的空白。这是一个定性研究过程。虽然定量数据可以帮助支持或验证（或帮助说服可能将定性数据视为「模糊」的利益相关者），但仅凭定量数据无法建立故事。

3. 综合发现

• 建立行动者价值链
• 记录角色
• 确定方案
• 调整行动，思维方式和情绪

4. 评估体验

• 过渡性波动
• 差距与机遇
• 关键时刻
• 价值交换

5. 制作视觉叙述

• 识别关键组件
• 将见解与细节分开
• 突出机会领域
• 确认您的关键要点已传达

旅程映射过程的整个重点是发现用户体验中的差距（这在全渠道旅程中尤为常见），然后采取行动来优化体验。洞察力和所有权是经常被忽略的关键要素。从旅程映射中得出的任何见解都应明确列出。可以为旅程地图的不同部分分配所有权，以便清楚地知道谁负责客户旅程的哪个方面。没有所有权，没有人有责任或权力去改变任何东西。

文章来源：优设    作者：Design Thinker

在这之前我得先提及一本书──《简约至上：交互式设计四策略》。这本书基本算得上是交互设计的入门必读书籍了，非常适合身处项目环节中上游的人员阅读与学习。

作者 Giles Colborne 在书中提出了四个令交互设计成果最大化的简易策略：合理删除、分层组织、适时隐藏和巧妙转移。这四个策略几乎成为我设计与优化每一个页面时的自我指导方针。

我参阅了大量的应用，想总结出它们是如何运用导航栏来给产品赋能的。竟然很巧地发现，再花式的导航栏设计也难逃「四策略」手法。

首先，导航栏作为一个独立控件，它本身就已经是「分层组织」策略的一种表现形式。接下来我们来看看，优秀的产品设计是如何运用另外三种策略来设计好导航栏的。

合理删除

导航栏不能轻易删除，但凡事没有绝对。什么时候我们可以合理地删除导航栏呢？

Nike Run Club（下文简称NRC）是耐克官方出品的一款跑步记录 APP。既然做产品要站在用户角度出发，那我们就来复原一下主要功能的用户使用场景。

当你的老板要求你一天出 150 个界面设计的时候，你怕了，准备跑路，同时又不想浪费一天中任何一次记录运动的机会。于是你打开 NRC，你的目的很明确：认真地跑路，并记录运动。

点击「开始」按钮，当你一旦开始跑步，手机基本就不再使用了，直到跑步结束。

△ NRC在运动状态下的界面删除了导航栏

在用户记录跑步这样一个单一事件中，NRC 知道你会专注运动，很少存在关注其他功能、浏览其他页面的可能性。于是 NRC 可以很干脆地删掉导航栏，而返回按钮用了界面中的「结束」按钮代替。

滴滴出行在呼叫快车时也做了删除导航栏的处理。用户一旦发单，开始呼叫司机时，呼叫页面内的所有操作都只聚集在界面下方的一个视觉区域内。

△ 滴滴出行在呼叫过程中删除了导航栏

上面两个删除导航栏的示例有什么共通点呢？

第一，用户在当前页面的事件状态明确，不需要导航标题提醒用户当前在什么位置，用户也极少可能在当前页面发生其他事件操作，于是完全可以去除导航标题与内容控件。

第二，虽然删除了返回按钮，但都采用了很典型的「费茨定律」，就算用户误操作，也能便捷地撤销正在发生的事件。反而这比循规蹈矩地运用导航栏来承载返回按钮合理了许多。

△ 费茨定律简易图解

既然导航栏内所有的规范元素都有可取代方案，为什么不删除它呢？正如 Giles Colborne 在书中告诉我们的：大胆地删除，但也不要极端到盲目删除。

适时隐藏

隐藏和删除看起来十分相似，但其实不然。我们如何区分这两个技巧呢？

隐藏最常见的情况是，当导航栏的出现会成为打扰用户沉浸体验的障碍时，我们会选择隐藏，例如看视频、浏览图片等显示全屏媒体的场景，有导航栏反而会分散用户的注意力。

△ 显示全屏媒体时需要隐藏导航栏

不知道你有没有发现到一个细节，在大多数情况下，需要沉浸体验的页面不但会隐藏导航栏，同时也会隐藏状态栏，导航栏中载有当前页面的标题、导航按钮和内容控件；状态栏中会载有时间、Wi-Fi 等系统设备信息。

iOS 在人机交互指南中提醒我们，显示全屏媒体时，请考虑暂时隐藏状态栏，但请避免永久隐藏。如果没有状态栏，当用户需要查看时间或其他设备信息时必须离开应用。设计师应该让用户可以使用简单的手势重新显示隐藏的状态栏。

△ 用户可以方便地查看时间或其他设备信息

另一种情况是当前页面非常注重一屏内容展现时，我们会隐藏导航栏。

京东在用户搜索了商品之后，头部有三个信息栏，非常冗长。分别是：

• 导航栏：放置搜索框和页面内容控件；
• 全局筛选栏：针对全局的筛选组件，主要用于商品排序筛选；
• 垂直内容筛选栏：当前所搜索的商品品类的垂直筛选标签。

△ 京东搜索商品后屏幕头部的信息栏

用户在搜索了商品之后，向上滑动页面，京东会隐藏导航栏和全局筛选栏。

一是因为用户搜索关键词后，滑动页面大概率表示已经开始在挑选商品，这时候可以大胆地猜测用户行为，认为搜索与排序的重要级下降了，搜索结果垂直内容筛选的重要级上升了，便可以只保留下重要的操作。

二是可以让内容区域高度增加，隐藏顶部两个栏目区域可以大致增加一个商品位的提前露出，增大了商品触达用户的可能性。这不就是 UI 设计为商业目标赋能的一个案例吗？

△ 隐藏导航栏，增加了屏幕利用率

巧妙转移

基于导航栏层级始终高于页面内容的特性，随着用户划出第一屏，许多 APP 做了重要内容或重要控件转移到导航栏的设计。

豆瓣在影评讨论区，用户上滑页面时，会将当前影片的信息转移到导航栏。其实这种转移很常见，许多内容社区 APP 都有这样的交互设计，比如浏览的公众号文章，再回到顶部试试。方便用户时刻知道自己当前所浏览的内容是关于哪一个主题的。这一类转移是单纯站在用户体验角度的考量。

△ 豆瓣在屏幕滚动后转移影片信息到导航栏

但如果你仔细观察，有一类转移却是综合了用户体验与产品目标的共同抉择。如果你再稍微了解一点该产品背后的故事，甚至可以让你洞悉到，为了巩固产品的调性和目标，PM 和 UI 们在页面设计时做了多少细枝末节的引导。

知乎在用户浏览当前问题时向上滑动页面，也会像豆瓣一样，将当前问题标题转移到导航栏上，但与此同时会将「写回答」的操作也转移到导航栏。标题转移是出于用户体验，和大多数内容社区的做法大同小异；而「写回答」的按钮转移，正符合知乎想要打造一个内容交流社区的产品调性，他们希望刺激用户进行问答互动，多输出 UGC 内容，希望用「写回答」的按钮转移进一步激发用户创作内容的可能性。

△ 知乎转移「写回答」让用户更方便地进行问答互动

京东在店铺首页上滑页面时，会将「关注」按钮转移到导航栏，方便用户在浏览的过程中可以随时收藏店铺，增加了用户对品牌店铺的关注度和复购的可能性。京东靠自营模式发家，近几年来开始慢慢重视 B2C 市场，在这个小小的关注按钮上，是不是可以算略显端倪呢？虽然我不能非常肯定，可能提高用户收藏操作只是为了辅助京东更好地进行营销权重划分，不过「关注」按钮的转移，确实能为 B2C 业务的渗透提供一份助力。

△ 京东转移「关注」让用户更方便地收藏店铺

所以我这里说到的「转移」的目的，其实和 Giles Colborne 在书中讲到的并不十分一致，Giles Colborne 是希望设计师将当前页面低频、冗杂的操作转移到另一个页面中去，而我提到的「转移」反而是产品越注重什么功能，越可以利用导航栏层级的先天优势来实现转移。

总结

合理删除、分层组织、适时隐藏和巧妙转移已经是我做设计和分析界面常用的一个手法，它并不一定是万能的，但是它多多少少可以辅助我们做出更合理的设计。

这篇文章想要告诉大家的是，在平台规范里的导航栏是死板又相对静态的，但在四个策略的辅助下，结合用户的操作手势，也可以将它变得十分灵活，帮助页面实现更好的用户体验。不要被规范限制的太死，转换设计师的角色变成用户，你可以研究出更多好玩的操作。随便打开一个应用，去研究研究，你可能会乐在其中的。

文章来源：优设    作者：UCD耍家

知名的免费图标网站 Iconfinder 要和大家一起对抗新冠病毒，和图标设计师联手推出一系列「防疫免费图标集」（Coronavirus awareness icons），超过 200 个与公共卫生、病毒传播相关图标，这些图案包括常见的 PNG 和 SVG 格式，可以将它们加入标志、海报、传单或类似的内容使用。

如果你想要制作广告牌，提醒在这个区域要洗手或戴口罩，这里有免费图标可让信息更容易被阅读。

依照 Iconfinder 网站说明，这些图标可用于洗手说明、卫生建议或是其他预防病毒传染散播的提醒信息，所有图标采用 Creative Commons BY-SA 3.0 授权释出，使用时需要标示出处，并以相同方式分享。

Coronavirus awareness icons

网站链接：https://www.iconfinder.com/p/coronavirus-awareness-icons

值得一试的三个理由：

• Iconfinder 和设计师合作推出「防疫免费图标集」下载；
• 提供超过 200 个公共卫生、病毒传播相关图案；
• 可使用于标志、海报、传单或类似的内容。

前往 Iconfider 的「Coronavirus awareness icons」网站，就能看到这套专为对抗新冠病毒提供的免费图标集，点选 Download all icons 下载打包好的完整图标。

在网站中展示一些收录在这套图标集的防疫相关图案，每套图案都有不同风格，例如以单纯线条为主的设计，或是采用平面化设计的彩色图标，可以依照自己的需求选择。当然你也可以按下右上角的按钮前往 Iconfinder 找到这套图标的完整版本。

下载后就能取得完整的图标集，依照不同名称分类，有些是 SVG 格式，有些则包括 SVG 和不同大小的 PNG 文件，其中有个 iconfider_freebies.zip 在解压缩后还能取得一些和防疫相关的图标。

值得一试的三个理由：

• Iconfinder 和设计师合作推出「防疫免费图标集」下载；
• 提供超过 200 个公共卫生、病毒传播相关图案；

• 可使用于标志、海报、传单或类似的内容。

文章来源：优设    作者：Pseric

Persona，在国内通常被称为「用户画像」，其概念最初由 Alan Cooper 在 1999 年提出。由于用户画像具备帮助人们在设计过程中聚焦于目标用户的需求，促进团队中不同利益相关者的沟通等作用，而逐渐成为被广泛使用的经典设计工具。也正是由于其经典地位，我们往往对用户画像在各类设计场景中的出现习以为常，却很少去对这一工具进行反思。本文将基于用户画像的研究现状，对其存在的问题与局限进行综述和归纳。

用户画像本身

Matthews 等学者为了探究设计师以及经验丰富的用户体验专家对用户画像的实际看法，从北美一家科技公司招募了 14 名设计师作为参与者。值得一提的是，这家公司拥有庞大且富有影响力的设计团队，另外这 14 名参与者中，在设计领域有 10 年以上工作经验的人数过半。通过访谈的方式，Matthews 发现，大多数参与者在实际工作中都不会使用到用户画像，并分析了为何不用的 4 类原因。我将 Matthews 等原文中的 4 类原因归纳为以下 3 条。（下文中出现的 D1、M3、B1 等序号是参与者的编号）

1. 太过抽象

D1：如果你只向他们（指开发团队）展示用户画像，他们是不会相信的。只有当他们看到用户画像背后有足够的数据支撑，他们才可能相信。

其实，不止是设计师有这样的看法，Basecamp（原37signals）的创始人 Jason Fried 在他的一篇博文里曾这样说：它们（指用户画像）是模拟的、抽象的、虚构的，我不认为你能为一个压根不存在的人创造出优秀的产品。

2. 缺少人情味

M3：我认为，有很多细节和微妙之处是无法通过对用户画像的描述而传达的，我也不认为有人能像用户画像那样思考或行事。坦白地说，我一直对用户画像以及它的用途充满怀疑，我觉得它更像一个沟通工具。

缺少人情味的另一点在于：用户画像太过理想化。

B1：他们（指用户画像）描述了最为完美的用户（对所设计的系统有着超乎寻常的热情），以及最为匹配的情节。而真实的用户并不像这样，因此，用户画像并没有很多作用。

3. 属性无用，甚至有误导作用

我们知道，一个用户画像在被创建的过程中，往往会被赋予若干个属性，常见的基本属性包括：年龄、职业、居住地等等。在访谈中，有些参与者表示，那些被赋予在用户画像身上的属性没什么用处。

A1：用户画像的数据完全没有用。如果它是一个真实的人，我可能还会关注，但它本身不是一个真实的人，是那些添加在它身上的装饰让其看起来像真实的人，我觉得这是无用的。

还有一些参与者认为，用户画像身上的属性和细节太过分散，导致偏离了本应关注的重点。

L1：在创建用户画像的过程中，我常常发现，那些原本次要的方面反而变得更加突出了。你会发现，那些与关键维度并非真正相关的细节，像技能、工作职责、对软件和工具的熟悉程度，这些细节很容易提出，因为它们也同样容易去沟通和理解。然而，随之而来的代价是，把更为重要的细节给丢掉了。

用户画像与其代表的真实用户

1. 代表多少

Chapman 等学者指出，任何一个用户画像都仅仅只能代表潜在用户群体中的某一小部分。那创建多个用户画像是否可行呢？可行是可行，但这又引出了一个新的问题：当用户画像的数量增多时，它的可记忆性是降低的，相应也降低了它在设计中起到的作用。多个用户画像往往存在着信息冗余的问题，过多的用户画像还会大大增加设计决策的成本。对于通过大数据自动生成的用户画像，数量过多这一问题尤为明显：有时会产出成千上百个用户画像。

2. 属性越多，涵盖面越窄

既然用户画像所代表的是真实用户，那么，它涵盖的真实用户数量能否通过某种方法预估出来呢？上文中我们提到的属性（如年龄、职业、居住地等），为用户数量的预估提供了可能。基于以上问题，Chapman 等展开了定量分析的研究。他们一共选取了 8 个数据库，其中 6 个是通过市场调研得出的真实用户细分与特征数据库，另外 2 个则通过多元数据模拟出来。然后，逐一地去增加用户画像的属性数量，并依次与数据库进行匹配。实验的结果如下图所示。不难发现：当用户画像被赋予的属性增加时，它涵盖的真实用户比例是降低的；而属性数量增加至 9 个以上后，各个数据库的匹配率都很低。对此，Chapman 等的建议是在创建用户画像时，最好能对其涵盖的用户数量进行大致的评估，而不是简单的假设。

△ 属性越多，涵盖面越窄

用户画像的运用

1. 偏低的投入产出比

前文中有提到，Matthews 等通过访谈去了解设计师对用户画像的看法，但这项研究还不足以观察到设计师是如何将用户画像运用到实际工作中的。基于这块研究的缺失，学者 Friess 另辟蹊径，从民族学的角度出发进行了探索。她采用的方法是：选取了一家位于美国的设计公司，对它其中一个团队的设计决策过程进行全程地观察与录音。该设计团队由 4 名核心成员组成，在设计决策开始前，其中 2 名团队成员已经花费了数周时间，通过调研创建了 8 个用户画像，并输出了长达 20 页的用户画像文档，供团队其他成员阅读。Friess 对收集到的录音片段进行话语分析后发现：在整个设计决策过程的话轮中，用户画像被提及的比例仅为 3% 左右。而且，在这为数不多的 3% 中，85.3% 的比例又是由那 2 名创建用户画像的成员提出。长达数周时间所创建的用户画像，换来设计决策过程中约为 3% 的提及率，这个投入产出比或许值得我们对用户画像的运用重新进行思考。

2. 过于主观的代入

有这样一种用户画像，它完全源于设计师对问题的主观看法与偏见。更为通俗地讲，是设计师先主观地提出了设计概念，然后创建用户画像去支撑其概念，美其名曰「以用户为中心」的设计。这种类型的用户画像由 Jones 等学者提出，他们称其为「promotional personas」。Jones 等在伊利诺伊大学香槟分校教授设计类的课程，在长达 5 年的时间里，通过对学生们在课程所创建的用户画像进行观察，他们对用户画像的几种模式进行了归类，而「promotional personas」就被归在了「bad personas」这一类别中。Jones 等还举出了一个他们在课程中观察到的例子：有学生设计了一款闹钟，这款闹钟可以让用户以天为单位自定义规划一整个月的闹铃时间。然后她做了一些调研，调研后发现身边朋友们的作息都很规律，在时间管理工具上的使用频次也较低，因此不太可能去用她所设计的那款闹钟。然而，她之后却提出了一个与调研结果完全相反的用户画像，该用户画像每天醒来的时间都很不同，而且经常由于睡过头而错过重要的事情。

设计师凭借自己的直觉与经验去创建用户画像这种方式，尽管也能在设计中起到一定作用，但如果将用户画像完全当做支撑主观设计概念的工具，甚至不惜背离调研结果，用户画像就彻底地沦为一种形式了。这样的用户画像，对整个设计过程都是有害无益的。

3. 无法取代真实用户的参与

既然用户画像能作为真实用户的代表，那么，对于参与式设计（participatory design）这种需要真实用户直接参与的方式，用户画像是否能替代真实用户呢？Bodker 等学者基于电子政务的项目，探究了用户画像对参与式设计是否有支撑作用。通过 4 个案例进行观察，Bodker 等发现：尽管用户画像能促进设计师在实际的参与式设计开始之前去更多地聚焦于用户，但在参与式设计的过程中，并不能让设计师更贴近真实用户的处境，反而可能分散设计师的注意力，让其偏离对真实用户参与情况的关注。这样一来，也无法说明用户画像本身对参与式设计具有支撑作用。因此，如果要采用参与式设计，在条件允许的情况下，建议还是让真实用户参与其中，用户画像可能并不能取代真实用户。

总结

尽管上文总结和归纳了用户画像的种种问题与局限，但这些并不能否认用户画像作为一种工具，对设计过程所起到的帮助。问题和局限的提出，旨在帮助我们更多地去理解这一工具，细分它适合的设计场景，探索能否结合其他工具以弥补它的短板和不足，从而达到更好的使用效果。

文章来源：优设    作者：陈梦蝶 驴妈妈UED