全栈设计师已然不是一个新的概念，然而全栈设计师到底是怎么样的？如何进行他们的工作？我们是否可以简单地认为一名全栈设计师是一名多才多艺的设计师？

全栈设计师已然不是一个新的概念，然而全栈设计师到底是怎么样的？如何进行他们的工作？我们是否可以简单地认为一名全栈设计师是一名多才多艺的设计师？可能大多数从业者仍不甚了解。UXD 团队内对全栈设计师的培养正如火如荼地进行着，我们本次采访了 4 位不同资历的设计师，从不同角度为你解答如何做一名 全栈设计师 。

更多职场干货：

如何面对职业未来？腾讯资深设计师的6个职场思考！ 最近我学到了一些经验，也想清楚了一些事情。

阅读文章 >

一、采访对象：大晟 视觉设计师

Q：你觉得什么是全栈设计师？

A：全栈设计师往大了说，是拥有完成一个项目的所有能力的角色。是从机会点的挖掘，到对策略概念的制定，到设计的产出，到最后的开发执行的一个全能角色。

我们刚开始培养全栈设计师，对“全栈”的认知可能暂时局限在设计或开发这些我们熟悉的互联网领域里。打开了说，我觉得很多艺术家也可以说是“全栈”，比如说大地艺术家克里斯托夫妇，他们在做“包裹德国国会大厦”项目时，花费二十四年去游说政府，同时花费大量的时间解决复杂的技术，资金，人力，工程等事项上。这些在外人看来，可能都不是艺术家要做的事，但是他们其实要花大量的时间在这些方面上，要去做很多艺术之外的事情。

Q：你现在的主要工作是什么？

A：我的工作内容是比较丰富的，有品牌方面的设计，有运营视觉的设计，有 IP 运营的探索，再到通过视频完成不同项目的包装推广等。有很多项目都需要从概念设定开始做，然后设计执行，再到推广等环节。

一开始做设计其实也只专注于“画图”这一件事儿上，少有关心为什么要做，设计稿如何落地。其实我觉得只要是有追求的设计师后来一定会关注到整个流程、整个项目的方方面面，会做很多“画图”以外的工作，才有机会去包裹国会大厦。不想包裹国会大厦的设计师，不是好的设计师。哈哈哈哈。

Q：经过这么久的沉淀，你想继续丰富自己的设计深度还是设计广度？

A: 作为一个设计师，肯定有你最擅长的地方，有的人可能特别擅长于沟通，特别擅长于去协调；有的人他可能非常他的天赋可能在于整个概念的构建，有能力讲好整个故事；有的人可能在视觉语言的表达能力上特别强。

我觉得首先应该抓住自己最为擅长的部分，会继续去挖掘自己擅长的地方。在这个基础上，再去对整个流程进行了解和拓展。

Q：对于年轻的设计师你有什么建议？

A：需要先去发现自己擅长的是什么，建议从兴趣出发，当你想包裹国会大厦的时候，你其实自然而然就会去了解整个流程上的所有东西。

二、采访对象：迪迪 交互设计师

Q：你觉得什么是全栈设计师？

A: 我觉得全栈设计师不光要在职能上覆盖各个流程环节，在能力上也能胜任每个环节的工作，甚至可以在某 1~2 个环节上特别擅长，在整个链路上发挥自己的能力。

Q：为什么会选择转型全栈设计师？

A：其实我不是为了提升能力而去转型，而是为了更好的了解我的合作方的工作的内容，更多的站在对方的角度去考虑我的设计。比如说我之前做交互的时候会画低保真的稿子，因为我最后只要截出一张图来就可以。包括画布尺寸之类的我都没有特别关注，布局、比例等很多细节也没有考虑。所以经常出现稿子做出来以后，UI 同学的产出会跟设计的界面不太一样的情况。

之后我就在思考为什么我不能在这个环节就把它做好，在做交互图时就解决这些问题，减少 UI 同学的工作量或者交互的二次调整和设计。

然后再比如说可以多了解一下 UI 方面的工作，还能提升一些视觉上的能力，换一下视角对我来说还挺好的。我本身视觉能力不是非常强，我觉得也可以跳出舒适区，去感受一下相对来说不太擅长的东西，我觉得也挺好的。

Q：你现在的主要工作是什么？

A：我现在的主要工作就是挑选一些比较适合做全栈设计的项目，从跟产品沟通、交互设计、UI 设计，最后跟进产品和技术同学去做 UI 界面细节的调整。

Q：经过这么久的沉淀，你想继续丰富自己的设计深度还是设计广度？

A: 我觉得在我现在这个阶段可能深度比较重要，因为我觉得能力很平均的人有很多，大家每一个方面都可以去尝试，但是如果想要让自己有突出的表现，还是要靠自己对某一个维度有深入的了解或者有特别强的一项能力。

想要专精我认为是特别难的一件事，因为你要很坚持，你要一直努力的去围绕这个维度找各种不同的方向持续深入。我觉得其实对我来说其实还是挺难的，所以我觉得对我来说深度可能还比较重要一点。

Q：对于设计和工作你未来目标是什么？

A：我的未来目标就是先成为有广度的设计师，然后再成为有深度的设计师。也希望能够体验非交互设计师的一些岗位，比如体验设计师，会跟现在的工作内容有一些不一样，也能逼着自己去弥补一些短板。

三、采访对象：李洋 UI 设计师

Q：你觉得什么是全栈设计师？

A：全栈设计师不能把它单纯的理解为全能的设计师，比如对 UI 设计师来说单单解决了一个交互的问题、解决一个设计问题、解决一个运营问题，就是全栈设计师了。

全栈最早是阿里提出来的，定义全栈是跨界的，脱离了设计本身去做事情，比如产品研发，甚至说这种 PMO 的项目管理了。

全栈设计师，其实是跨界能力的体现，你可以把它定义为用更广的视角来看待同一件事情，然后通过你不同的能力去解决和输出不同的问题，提供不同的解决方案和思路。

Q：你现在的主要工作是什么？

A：目前负责斑马的项目，以及二手车的基础体验。

Q：经过这么久的沉淀，你想继续丰富自己的设计深度还是设计广度？

A：如果是面向咱们整个团队的设计师来说，我主张的是先有深度再有广度。

举个简单的例子，我们现在正在做某项设计需求，需求的本身你都做不好，那如何向上或向下的评断我的这个产品整体是怎么样的，我的业务是怎么样的，我的底层的架构是什么样子的呢？

看不到，当你不了解这个业务的时候，你横向更看不到我业务的发展是什么，后续的迭代方向是什么。这时候你说我去培养一个全栈，理解我的研发能力，理解我的测试能力，理解我的产品能力等，是不太现实的。等于是一个很瘦弱的躯体外面包裹一个很大的空壳，它支撑不了你整个概念，所以说我主张是先有深度再有广度。

Q：对于设计和工作你未来目标是什么？

A：我的感觉是目标可以分两个：一个是业务支持方面，如何让业务变得更好；二是依托这部分的能力，怎么样能覆盖到更多的人，影响到更多的人。

咱们现在团队都是在互联网平台的设计师，可能大家都会站在现有的角度去想我要做成一件什么事。但是就像第一个问题所说的，大家对全栈设计师的理解，可能是认为就是全能的，但其实全栈的底层还是综合解决问题的能力。所以说我想说以我的一些思路和方法能够覆盖到更多的同学，然后让他们真正的意识到说我怎么样去做这个事情。

Q：对于年轻的设计师你有什么建议？

A：不要浮躁，也不要摆烂。首先浮躁会让你在选择方向的时候选择不定。也不要盲目跟风，之前有一段时间 C4D 和 Blender 火了，大家都开始学。学习本身是没问题的，但是你首先要明白你自己为什么学，不要让浮躁和盲目影响到你的一些判断。选择自己需要的，这个是最重要的。

四、采访对象：大哥 视觉设计师

Q：你觉得什么是全栈设计师？

A：其实刚刚知道全栈设计师这个话题的时候，发现它可能是设计师在设计的本职工作以外向前向后的延伸，比如设计前期的产品策略以及活动策略能力和设计流程后的前端代码能力。

我理解其实在各个设计领域都可以把全栈称为全链路，我觉得全链路在全栈基础上的一种表达，全链路它可能指的不光是解决设计本身的问题，而是用一种全局思维去思考和解决在产品设计流程中所有点，用之前的一个观点来说是：“设计一件事情，而不只是设计一个画面。”

Q：你现在的主要工作是什么？

A：主要在做运营设计和偏品牌向的视觉设计。

Q：经过这么久的沉淀，你想继续丰富自己的设计深度还是设计广度？

A:可能更多的是想丰富广度，在视觉表现的维度有了一些沉淀了以后，想在此基础上继续做一些边界的外延。去更多的了解一些跨界的领域，比如说像广告和营销的领域。能对互联网设计产生一些影响或者开阔设计思路的一些方向进行探索。

Q：对于年轻的设计师你有什么建议？

A：说不上是什么建议，不过有一个小点。一个是我感觉可能是在视觉上面可以保持专注，往深里去挖掘，让视觉呈现更加的讲究和精致。

另外一个就是横向的，可能除了设计以外要看更多的东西和跨界的领域。这些可能会对设计有一些积极的帮助和正向的影响。

欢迎关注「58UXD」的微信公众号：

编者按：人工智能的时代已经来临，设计的方式正在发生改变，而曾经让设计师取得成功的要素也悄然变化。这篇文章将会探讨人工智能当前的状况，所产生的影响，未来可能发生的变化，以及设计师所需要应对的问题，和需要做好的准备。本文由设计师 Irina Nik 在 ChatGPT 和 Grammarly 的 AI 辅助下完成撰写。

编者按：人工智能的时代已经来临，设计的方式正在发生改变，而曾经让设计师取得成功的要素也悄然变化。这篇文章将会探讨 人工智能 当前的状况，所产生的影响，未来可能发生的变化，以及设计师所需要应对的问题，和需要做好的准备。 本文由设计师 Irina Nik 在 ChatGPT 和 Grammarly 的 AI 辅助下完成撰写 。Irina 在完成文章之后，要求 ChatGPT 重写了部分段落让它们看起来更好。

客观现实，而非炒作 人工智能革命并非未来，它是当下正在发生的客观事实。根据 Morning Consult 做过一个全球人工智能调查 ，美国、欧洲和中国 34%的企业都已经用上了人工智能。

包括世界经济论坛和 IBM 在内的许多组织都将人工智能视作为第四次工业革命的主要技术，它将从根本上改变我们的生活、工作和两者之间的关系。

当然，人工智能可能有偏见，存在道德风险，生成错误的结果，传递误导性信息。但即便如此，它依然以惊人的速读发展，这些问题可能会随着时间的推移逐步得到解决。

生成式人工智能如何改变世界 2022 年，生成式 AI 所输出的结果是颠覆性的：AI 可以生成新事物，而不是分析已经存在的东西。

Sequoia 梳理的 AI 应用前景

能够给出类似人类的答案 随着来自 OpenAI 的 ChatGPT 逐渐流行， Google 也拉响了「红色警报」 。用户开始青睐向 AI 提问，而不是在 Google 搜索结果。

目前，人工智能给的答案并不可靠。但是在未来，它们或许可以和专业的咨询顾问竞争。 根据麦肯锡的说法，人工智能有可能被用于保险和法律行业，回答复杂的问题，审核法律文件，起草年度报告。 比如摩根士丹利已经在研究人工智能 ，这项AI服务可以给客户提供财富管理的建议。

客户服务也将从人工智能当中受益，目前的聊天机器人还无法满足用户的期望，但是它在未来可以取代更多的人工客服。

Midjourney 基于语言生成的图片概念设计

内容生成能力 如今这种生成式人工智能已经被用于营销和搜索引擎优化，它加快了内容创建，并且提供必要的插图内容。

比如， Jasper 就是一个以营销为卖点的 GPT-3 的分支版本 ，可以用来撰写博客文章，社交媒体帖子，网络文案，营销电子邮件，甚至广告等面向客户的内容。

图像生成能力 Microsoft Designer 、 Runway 、 DALL-E 和 Midjourney 等工具让设计更方便，并且更容易为大众用户所接受，加速可视化内容的生成。

这类服务在营销和设计当中已经广泛运用了。雀巢在营销活动当中使用了 Vermeer 的人工智能加钱版， Stitch Fix 使用 DALL-E2 进行实验，根据客户对于配色、面料、款式的偏好来可视化地呈现服装设计。 Nutella 使用一种算法来结合人工智能创建了 700万种独特的包装，广告公司 BBDO 则正在测试使用 Stable Difffusion 来创建设计物料。

这也意味着可以在没有设计师的情况下，普通用户可以创建出好看的演示文稿和社交媒体帖子。

下面是红杉资本所制作的图表，其中包含了根据当前的状态，对未来人工智能在不同领域当中，生成式人工智能的前景和可能性。

UI 界面设计 人工智能已经可以创建出 Dribbble 级别的 UI了，以下界面是 Midjourney 所创建的：

同一个 AI 在不同的图片内容训练之下的结果，能够生成的作品是截然不同的。如果我们专门针对 UI 设计来创建训练集会怎样？

比如，我们在未经作者同意的前提之下，将整个 Artstation 的图片拿来训练，那么可能会有人拿 Dribbble、Mobbin、PageFlow 或者 Pttrns 上被完美标记的作品来训练自己的模型。

那么有了这样的训练出来的模型，是不是可以在 Figma 上直接生成 UI ？现在第一个实验已经开始了：

Airbnb 现在就在拿这些优秀的作品来训练 ，从基本的线框图一路到可用的代码。

那么有没有 AI 可以根据描述生成整个程序？ Builder.ai 已经在探索这个领域了，创建了人工智能直接生成 APP 的基础版本。

紧随其后，我们处理设计系统的方法也可能发生变化。随着 Figma 对无头设计系统的引入，训练 AI 生成标准的组件已经可行了，咱们现在每天头疼不已的工作可能很快就要外包给 AI 了。

想法探索 生成式 AI 是强大的绘图工具，它可以加快探索的过程。设计师和非设计师都可以在很短的时间内，快速探索大量的替代方案。

用户研究 如今，生成式 AI 在用研领域也有一些进展。比如我们想象人工智能能够协助创建调研的准备材料和各种相关报告。

但是其实其他的人工智能磨ixng，可以通过分析研究数据，将用研提升到一个更高的层次。

比如 UserTesting 已经在借助机器学习，来识别用户在调研视频中的情绪。我们目前还不确定，未来越来越成熟的大型语言识别模型，能够从这些测试视频当中挖掘出多少信息，可以生成多少报告。

UserTesting 识别视频中的用户情绪

人工智能还能帮助分析不同来源的大量客户数据，比如对讲机、社交媒体、APP 评论、电子邮件等等，因此，用户体验设计师能够用更少的时间来获取更加可靠的用户行为分析。

随着这些领域中机器学习的引入，增长模式也可能发生变化。 Facebook 正在广告模型当中使用人工智能 ，他们会在众多广告变体当中，挑选出最好的一个，并且了解什么时候向什么类型的用户推送，会有最好的结果。未来，设计师可能会有类似的工具，来进行自动化测试，并且加速增长。

设计师要做哪些准备 在设计过程中引入 AI 的尝试已经开始了。室内设计师征才测试 InteriorAI 来创建模型。服务设计师开始使用 AI 作为草图绘制工具，而产品设计师也在头脑风暴当中使用 DALL-E2。

设计师 Isabella Orsi 使用 InteriorAI 制作的室内设计模型

生产力 人工智能确实是会显著提高设计师的生产力。它将加快分析用户数据，并提升制作原型的过程。

如今设计师可以使用这些 AI 生成图标、文案和图像，并且使用 AI 进行视觉探索。

如果你需要了解相关的服务，你可以看看这些： Phraser 、 Dallelist 、 Midjourney Prompt Generator 、 PromptHero 、 dallery.gallery 手册 。

更高层次的设计 生产力的提升，意味着 AI 将会承担更多的重复工作和体力活儿，而设计师可以拥有更多的时间和资源，来关注更高层级的设计问题，比如设计研究，产品策略和增长实验。

Midjourney 生成的设计思维主题图片

以人为本的设计 随着人工智能承担越来越多的硬技能向的工作，设计师将会有更多的精力深入到社会认知相关的活动，比如什么样的设计能够带来社会价值，能够给人带来愉悦感，人和社会体系之间的交互逻辑，这些深层的研究和洞察很难外包给 AI 。

AI 则可能会 给以人为本的设计和无障碍的工作提供更多关注、资源和机会。

设计师的新挑战 随着 AI 技术的发展，设计师将会面对新的挑战。

当我们开始广泛的应用和使用面向客户的 AI 的时候，设计师需要确保 AI 生成的结果是不带偏见、合乎道德规范并且有价值的。

另外，元宇宙将会带来前所未有的交互挑战，和 UI 设计不同，虚拟现实目前还没有既定的交互模式，有许多问题尚未解决。

Midjourney 生成的元宇宙的概念设计

人工智能将会改变设计师的哦概念工作方式，而市场对于设计师技能组合的要求会随之发生变化。显而易见的趋势是，大部分常规的设计工作将会彻底的自动化和 AI 化，只是目前这个变化周期不确定，接下来会被 AI 取代的工作内容还不确定。

但是设计师需要适应使用 AI 来进行设计。

如今仅仅只是 AI 化的第一步，但是如今 AI 所引领的技术突破在过去历史当中，速度也是史无前例的，甚至可以替代人类执行人物的 「通用智能」 ，可能也不会太过遥远。

如果对于人工智能设计感兴趣，可以关注 「夏花生」 ，你可以在她的文章中看到各种热门流行的最新的 AI 设计工具。

我们的作品信息的传递效率高吗？什么样的设计是清晰有效的？想要搞清楚这些问题，首先你得了解视觉动线这个概念。

我们的作品信息的传递效率高吗？什么样的设计是清晰有效的？想要搞清楚这些问题，首先你得了解 视觉动线 这个概念。

往期回顾：

平面设计构图法！6招快速提升版式水平！ 任何类型的设计都离不开版式构图，但产物的不同构图方式也会有所差异，本文将探讨运营活动设计中的构图方式和技巧~ 往期干货：

阅读文章 >

一、什么是视觉动线 1. 动线

动线一词最早是源自建筑与室内设计领域。指的是人在某个空间内的移动轨迹。例如住宅空间的动线设计，我们会经常听到动静分离的概念，讲的就是动线的设计。住宅动线的设计目的是提高居住体验，减少在室内的重复行走轨迹。

例如家务动线的设计，从进门到厨房再到生活阳台，是家务劳动中最经常行走的路线。通过设计动线，减少家务劳动的行走，就能提高家务劳动的效率。在这里动线越短，效率越高。

在商业建筑领域，动线的设计也被频繁的运用。例如店铺的顾客动线设计，通过兴趣区吸引顾客，引导顾客尽量多的浏览店铺的商品，从而提高销售额。商业空间的动线设计讲究的是坪效（每平米的销售额）,动线的设计更侧重迂回。

还有比如动物园、游乐场的路线设计，就涉及到游玩顺序的体验，以及缓解拥堵等问题。因此动线设计的目的在于提高效率，在家居和商业空间领域已广泛应用。而在 视觉设计 领域，也存在动线的概念。

2. 视觉动线

大家在生活中有没有遇到这样的情况，你要找的东西就在眼前，但是找了好久仍然没有找到。

人眼之所以能看清物体，是因为视网膜中央有个很小的区域叫做中央凹，这个区域集中了大多数的视锥细胞，专门负责视力的高清成像。

但是中央凹的面积极小，高清区域有限。人眼只有在 10 度视角范围内才最为敏感，30 度范围内可以分辨出颜色。这就导致人眼可视范围有限，一次只能产生一个视觉焦点。因此人眼在观察物体时，没办法一下子看到所有信息，需要逐个地移动搜寻，这种视线的移动过程，就构成了视觉动线。

例如我们在阅读文章时，一般是从左到右逐行地阅读，这个阅读顺序就构成了视觉动线。如果文字的排版过于跳跃，没有规律，就会造成视觉焦点过多动线混乱的情况，容易出现阅读障碍，大大影响了阅读体验。

在视觉设计中动线的设计尤为重要，例如下图的 banner，左图动线混乱主次不清。右图则能清晰地引导观众从左到右阅读信息，降低无效的阅读成本。因此构建合理有效的视觉动线，将有助于打造良好的阅读体验，能更高效地让用户获取到信息，避免用户的流失。

二、有哪些动线类型 我们以运营设计为例，来讨论一下常见的动线类型。在 运营设计 中，banner 和活动专题是最为常见的，这类型的设计，画面往往很有感染力，内容丰富。这里介绍的动线，是指某张 banner 或者活动头部同屏类的动线轨迹。一般我们可以将常见的动线分为这几个类型：直线型、汇聚型、发散型、扇型、以及 Z 型。

1. 直线型 直线型动线顾名思义，就是在一条路径上依次展示信息元素。我们以 banner 为例来看看如何应用。

在分析动线轨迹的时候，我们应该逐一地寻找视觉焦点。这个案例中我们第一眼看到的是左侧的标题，我们称第一眼看到的焦点为视觉入口点；紧接着视线转移到了右侧的龙身上。这就构成了一条清晰的从左到右的视线轨迹。

banner 中只在标题和火焰上使用了色彩，其他背景使用较灰的色系，这使得视觉焦点突出，动线清晰。

① 动线角度

直线型动线在运用的时候，不一定都是从左到右的横向角度。常见的有对角线以及竖线的形式。

例如左图这张 banner 就是对角线式的动线轨迹。对角线具有倾斜的角度，容易塑造出速度感。因此这样的动线轨迹往往画面更加的有动感。而竖向的动线一般用在窄长比例的画面中，例如手机端的运营活动。右图的活动页面就构成了从上到下，从标题到主体人物的动线浏览轨迹。

② 视觉焦点个数

直线型动线中，人们的浏览轨迹是根据视觉焦点的位置进行的。在直线上依次排列视觉焦点，但并不是焦点越多越好，一般 2-3 个视觉焦点较为合理。较多的视觉焦点反而影响阅读效率。

2. 汇聚型 汇聚型动线是将用户的视线聚焦到中心的一种动线轨迹。一般有多个视觉入口点来引导用户的视线。

例如下面这张 banner，我们的视线会先被左右两侧英雄所吸引，延着他们冲刺的方向视线转移到了中间的标题，这就构成了汇聚型的视觉动线。汇聚型动线在元素摆放上一般具有引导性，最终目的是让观众的视线聚焦到中心，以突出中心的标题或者主体信息。

汇聚型动线的视觉入口点一般在 2 个以上，例如下面这张活动头部，通过两侧的烟雾塑造视觉入口点，引导观众视线汇聚到中心。是一种侧重突出中心内容的动线类型。

3. 发散型 汇聚型动线是由四周向中心聚集的动线轨迹，而发散型动线则相反，它是由中心向四周转移的动线轨迹。视觉入口点在中心，并逐步向四周扩散的动线类型。

例如下面这个暑假活动页面，就是视线由中心往四周转移的发散型动线。我们第一眼会被醒目的标题所吸引，这就是视觉入口点。之后视线逐步地往两侧移动，依次看到人物、书本、台灯以及两侧的云朵。构成了渐进式的视觉浏览轨迹。

而下面这个四周年的活动，最醒目的也是标题，它将观众的视线聚焦到了中心，之后逐步向四周发散。按照放射的方向，依次浏览了人物、按钮、奖励、圆球等信息。

可以看到发散型动线一般运用在有较多信息元素的画面中，浏览顺序层层递进，比较适合对信息元素进行归类阅读。

入口点位置

发散型动线一般是由中心往四周发散，视觉入口点一般在中心线位置。不过入口点也有位于边缘的情况。例如下面这张 banner，作为视觉入口点的人物位于右下角，通过手势逐步引导观众阅读标题和玩具。是一种单边发散的动线类型。

4. 扇型 扇型动线一般会在中心线上塑造一个视觉入口点，之后保持着至上而下、从左到右的视线轨迹，这种轨迹就好比一把扇子。

例如下面这个手机端活动，我们第一眼会被可爱的小狗头部所吸引，之后视线往下，看到主标题和副标题，并按从左到右的视线轨迹阅读了标题。这就构成了扇型的动线轨迹。

可以看到扇型的动线轨迹保持了从上到下的结构关系，一般用在画面较长的版式中。容易塑造至上而下、内容由少及多的阅读关系。

5. Z 型 Z 型动线是最为常见的类型，它遵循了人们从左到右的阅读顺序习惯。并且在长页面中可以一直做反复的延续。

例如下图的活动页面，我们的阅读顺序就是从左到右逐行地扫视关系。先是主标题，再是副标题，最后是木牌上的信息。这构成了循环的 Z 型动线轨迹。此类动线比较适合应用于文字类信息较多的画面中。

三、如何制造动线 在动线的设计过程中，比较难的是如何去引导信息之间的先后关系。这里介绍几种便捷的技巧，如何更有效的来设计动线。

1. 阅读顺序

第一种就是根据人们的阅读习惯来设计，也就是从左到右，至上而下的顺序。因为人的眼睛，左右转动所看到的角度和区域，要比上下转动所看到的要广阔的多。从左到右也是人们通用的阅读习惯和标准，横向阅读也更为舒适。在设计中我们只需要按照从左至右自上而下的规律来摆放信息元素，就能保证有良好的阅读体验。

2. 元素指向性

第二种是利用元素本身的指向性来进行引导，特别是主体人物的肢体动作、手势等。例如下图中的 banner 就分别通过人物的眼神和手势进行引导，让观众的视线转移到标题上，构成了很强的关联性。让动线的引导更为自然紧密。

3. 引导线的设计

第三种是引导线的设计，我们可以通过设计一些引导性的线条来引导观众的视线。常见的有放射线，或者虚拟的线条。

例如下图 1 的 banner，就是通过左右两侧放射性的线条来增强引导，让观众的视线汇聚到中心，构成了汇聚型的动线。图 2 除了蜘蛛的视线引导外，标题文字的透视处理也构建出一条无形的引导线，让整个视线的引导更加紧密自然。在元素本身指向性不强的时候，引导线的设计能让视线的引导更加紧密，有规律。

3. 层级的设计

第四种是通过层级关系的设计来构建动线，也是经常要用到的方法，构建层级关系的方式有很多，这里只做简单介绍，有机会再跟大家交流。

例如下面这个活动头部，我们的阅读轨迹是从左到右的关系，先看到左边的人物然后是标题，最后是右边的人物，构成了直线型的动线轨迹。如果我们拉开人物之间的空间关系，我们首先会注意到离我们近的物体，依据远近关系，形成了一条视觉引导轨迹。这就是层级对于视线引导的作用。

通过层级的塑造，可以更有效的来制造动线，引导观众的阅读。

小结 综上，只要我们能够理解动线的概念和目的，在排列元素时就能有更清晰的目的性，设计更有方向感。信息的传递是我们构建作品和观众之间交流的桥梁，也是设计中首要考虑的因素。有效的信息传递才能发挥设计最大的价值。以上仅是个人的观感与体会，希望对大家有帮助。

编者按：人工智能的时代已经来临，设计的方式正在发生改变，而曾经让设计师取得成功的要素也悄然变化。这篇文章将会探讨人工智能当前的状况，所产生的影响，未来可能发生的变化，以及设计师所需要应对的问题，和需要做好的准备。本文由设计师 Irina Nik 在 ChatGPT 和 Grammarly 的 AI 辅助下完成撰写。

编者按：人工智能的时代已经来临，设计的方式正在发生改变，而曾经让设计师取得成功的要素也悄然变化。这篇文章将会探讨 人工智能 当前的状况，所产生的影响，未来可能发生的变化，以及设计师所需要应对的问题，和需要做好的准备。 本文由设计师 Irina Nik 在 ChatGPT 和 Grammarly 的 AI 辅助下完成撰写 。Irina 在完成文章之后，要求 ChatGPT 重写了部分段落让它们看起来更好。

客观现实，而非炒作 人工智能革命并非未来，它是当下正在发生的客观事实。根据 Morning Consult 做过一个全球人工智能调查 ，美国、欧洲和中国 34%的企业都已经用上了人工智能。

包括世界经济论坛和 IBM 在内的许多组织都将人工智能视作为第四次工业革命的主要技术，它将从根本上改变我们的生活、工作和两者之间的关系。

当然，人工智能可能有偏见，存在道德风险，生成错误的结果，传递误导性信息。但即便如此，它依然以惊人的速读发展，这些问题可能会随着时间的推移逐步得到解决。

生成式人工智能如何改变世界 2022 年，生成式 AI 所输出的结果是颠覆性的：AI 可以生成新事物，而不是分析已经存在的东西。

Sequoia 梳理的 AI 应用前景

能够给出类似人类的答案 随着来自 OpenAI 的 ChatGPT 逐渐流行， Google 也拉响了「红色警报」 。用户开始青睐向 AI 提问，而不是在 Google 搜索结果。

目前，人工智能给的答案并不可靠。但是在未来，它们或许可以和专业的咨询顾问竞争。 根据麦肯锡的说法，人工智能有可能被用于保险和法律行业，回答复杂的问题，审核法律文件，起草年度报告。 比如摩根士丹利已经在研究人工智能 ，这项AI服务可以给客户提供财富管理的建议。

客户服务也将从人工智能当中受益，目前的聊天机器人还无法满足用户的期望，但是它在未来可以取代更多的人工客服。

Midjourney 基于语言生成的图片概念设计

内容生成能力 如今这种生成式人工智能已经被用于营销和搜索引擎优化，它加快了内容创建，并且提供必要的插图内容。

比如， Jasper 就是一个以营销为卖点的 GPT-3 的分支版本 ，可以用来撰写博客文章，社交媒体帖子，网络文案，营销电子邮件，甚至广告等面向客户的内容。

图像生成能力 Microsoft Designer 、 Runway 、 DALL-E 和 Midjourney 等工具让设计更方便，并且更容易为大众用户所接受，加速可视化内容的生成。

这类服务在营销和设计当中已经广泛运用了。雀巢在营销活动当中使用了 Vermeer 的人工智能加钱版， Stitch Fix 使用 DALL-E2 进行实验，根据客户对于配色、面料、款式的偏好来可视化地呈现服装设计。 Nutella 使用一种算法来结合人工智能创建了 700万种独特的包装，广告公司 BBDO 则正在测试使用 Stable Difffusion 来创建设计物料。

这也意味着可以在没有设计师的情况下，普通用户可以创建出好看的演示文稿和社交媒体帖子。

下面是红杉资本所制作的图表，其中包含了根据当前的状态，对未来人工智能在不同领域当中，生成式人工智能的前景和可能性。

UI 界面设计 人工智能已经可以创建出 Dribbble 级别的 UI了，以下界面是 Midjourney 所创建的：

同一个 AI 在不同的图片内容训练之下的结果，能够生成的作品是截然不同的。如果我们专门针对 UI 设计来创建训练集会怎样？

比如，我们在未经作者同意的前提之下，将整个 Artstation 的图片拿来训练，那么可能会有人拿 Dribbble、Mobbin、PageFlow 或者 Pttrns 上被完美标记的作品来训练自己的模型。

那么有了这样的训练出来的模型，是不是可以在 Figma 上直接生成 UI ？现在第一个实验已经开始了：

Airbnb 现在就在拿这些优秀的作品来训练 ，从基本的线框图一路到可用的代码。

那么有没有 AI 可以根据描述生成整个程序？ Builder.ai 已经在探索这个领域了，创建了人工智能直接生成 APP 的基础版本。

紧随其后，我们处理设计系统的方法也可能发生变化。随着 Figma 对无头设计系统的引入，训练 AI 生成标准的组件已经可行了，咱们现在每天头疼不已的工作可能很快就要外包给 AI 了。

想法探索 生成式 AI 是强大的绘图工具，它可以加快探索的过程。设计师和非设计师都可以在很短的时间内，快速探索大量的替代方案。

用户研究 如今，生成式 AI 在用研领域也有一些进展。比如我们想象人工智能能够协助创建调研的准备材料和各种相关报告。

但是其实其他的人工智能磨ixng，可以通过分析研究数据，将用研提升到一个更高的层次。

比如 UserTesting 已经在借助机器学习，来识别用户在调研视频中的情绪。我们目前还不确定，未来越来越成熟的大型语言识别模型，能够从这些测试视频当中挖掘出多少信息，可以生成多少报告。

UserTesting 识别视频中的用户情绪

人工智能还能帮助分析不同来源的大量客户数据，比如对讲机、社交媒体、APP 评论、电子邮件等等，因此，用户体验设计师能够用更少的时间来获取更加可靠的用户行为分析。

随着这些领域中机器学习的引入，增长模式也可能发生变化。 Facebook 正在广告模型当中使用人工智能 ，他们会在众多广告变体当中，挑选出最好的一个，并且了解什么时候向什么类型的用户推送，会有最好的结果。未来，设计师可能会有类似的工具，来进行自动化测试，并且加速增长。

设计师要做哪些准备 在设计过程中引入 AI 的尝试已经开始了。室内设计师征才测试 InteriorAI 来创建模型。服务设计师开始使用 AI 作为草图绘制工具，而产品设计师也在头脑风暴当中使用 DALL-E2。

设计师 Isabella Orsi 使用 InteriorAI 制作的室内设计模型

生产力 人工智能确实是会显著提高设计师的生产力。它将加快分析用户数据，并提升制作原型的过程。

如今设计师可以使用这些 AI 生成图标、文案和图像，并且使用 AI 进行视觉探索。

如果你需要了解相关的服务，你可以看看这些： Phraser 、 Dallelist 、 Midjourney Prompt Generator 、 PromptHero 、 dallery.gallery 手册 。

更高层次的设计 生产力的提升，意味着 AI 将会承担更多的重复工作和体力活儿，而设计师可以拥有更多的时间和资源，来关注更高层级的设计问题，比如设计研究，产品策略和增长实验。

Midjourney 生成的设计思维主题图片

以人为本的设计 随着人工智能承担越来越多的硬技能向的工作，设计师将会有更多的精力深入到社会认知相关的活动，比如什么样的设计能够带来社会价值，能够给人带来愉悦感，人和社会体系之间的交互逻辑，这些深层的研究和洞察很难外包给 AI 。

AI 则可能会 给以人为本的设计和无障碍的工作提供更多关注、资源和机会。

设计师的新挑战 随着 AI 技术的发展，设计师将会面对新的挑战。

当我们开始广泛的应用和使用面向客户的 AI 的时候，设计师需要确保 AI 生成的结果是不带偏见、合乎道德规范并且有价值的。

另外，元宇宙将会带来前所未有的交互挑战，和 UI 设计不同，虚拟现实目前还没有既定的交互模式，有许多问题尚未解决。

Midjourney 生成的元宇宙的概念设计

人工智能将会改变设计师的哦概念工作方式，而市场对于设计师技能组合的要求会随之发生变化。显而易见的趋势是，大部分常规的设计工作将会彻底的自动化和 AI 化，只是目前这个变化周期不确定，接下来会被 AI 取代的工作内容还不确定。

但是设计师需要适应使用 AI 来进行设计。

如今仅仅只是 AI 化的第一步，但是如今 AI 所引领的技术突破在过去历史当中，速度也是史无前例的，甚至可以替代人类执行人物的 「通用智能」 ，可能也不会太过遥远。

如果对于人工智能设计感兴趣，可以关注 「夏花生」 ，你可以在她的文章中看到各种热门流行的最新的 AI 设计工具。

最近突然想起要买一个东西，刚好手就放在键盘上，刚好手机又有点远，我就用浏览器打开了淘宝。当我在搜索结果页点击商品时，突然被告知要登录：着急想要了解商品的我……没有登录而是新开标签页进入了京东。

最近突然想起要买一个东西，刚好手就放在键盘上，刚好手机又有点远，我就用浏览器打开了淘宝。

当我在搜索结果页点击商品时，突然被告知要登录：

着急想要了解商品的我……没有登录而是新开标签页进入了京东。

找到想要的商品后，我登录下单了。

事后我仔细对比了一下，发现淘宝的网页处处显得「敷衍」。反衬之下，京东显得专业多了。

这就让我有点惊奇了。

2021 年阿里巴巴旗下以淘宝为代表的淘系零售电商占据过半市场份额（52%），是京东（20%）的两倍不止。

在使用手机端网购时，我也是向来更喜欢淘宝而不是京东的。

而且在互联网从业人员眼中，阿里属于一线大厂，京东一般认为是二线大厂，前者更能吸引顶尖人才。

为啥淘宝的网页端还明显不如京东呢？

如果只是稍逊一点也就算了，关键淘宝网页端有很多迷惑的设计点。

更多 网页设计 干货：

只会黑白灰？7大要点帮你做好悼念缅怀的网页设计！ 如何设计悼念缅怀相关的网页？

阅读文章 >

我们就以首页为例分析一下：

一、大片无效模块 首先，现在应该没那么多人有耐心愿意先登录再使用吧，登录模块占用那么大的位置挺没必要的。

而且还没登录，就展示那么大的宝贝收藏、买过的店、收藏的店……感觉没啥意义。

然后 banner 下的第一个模块居然是猜你喜欢（个性推荐）？

我还没登录，显然猜不准，这个模块基本也废了。

然后那个 banner，我翻了一下，都是什么贵就卖什么……切中普通用户需求的几率也是相当之低

也就是说，这整个首页，大半的空间都是无效的。

作为业内人士，我猜，设计成这样，可能是因为设计师压根没想到大部分访客可能没登录？

对比一下，京东的登录模块小很多，banner 内容更有吸引力，而且第一个模块是秒杀活动（虽然露出不多）。

二、双重悬停态 Banner 左侧的这个分类导航很奇怪，鼠标移上去是整行高亮，而且每行一个图标。

刚开始，我还以为每行的 3 个链接点过去都往一个地方跳转，结果发现不是。

仔细一看，每个链接有单独的下划线悬停样式！

不但如此，商品卡片也有 2 个悬停态！

鼠标放在卡片上时，背景色和边框变一下；然后鼠标放到商品名称上时，商品名称单独高亮了。

点击这两块区域跳转到不同的地方吗？

不，没有差别。

对比一下，京东就正常很多：

三、粗糙的细节 首先，很明显的是淘宝这个 banner 的箭头不但上下没对齐，而且里面的图标也没居中，强迫症看着闹心。

然后淘宝大量使用灰色卡片，却不把间距统一一下。

虽然一般用户看不出来，但这应该是基本的设计规范吧？

对比一下，京东的边距就整齐多了：

四、梦回上个世纪的消息通知 淘宝首页这个消息通知我很想吐槽，等了好几条，几乎没有一条能引起普通消费者的兴趣。

京东也做了消息通知，虽然字显示不全也不滚动，但好歹内容稍微有用了一点：

五、不登录看不了商品 前面也说过了，虽然淘宝能够直接搜索，但是即便搜到了，也必须登录后才能查看。 刚有点兴趣，还没确认要买就把人拦下，这显然不明智：

对比一下，京东会等到用户决定要买的事后，再提醒登录：

六、内容太少 往下一翻，淘宝 banner 下面只有一个模块，还都是猜不准的猜你喜欢：

京东的模块就丰富多了：

七、为啥淘宝在网页端摆烂？ 以我自己在大厂工作过的经验来说，造成这个现象的原因，十有八九是网页端数据占比太低，团队不重视。

就算以目前这个状态，淘宝网页端的访问量都未必比京东网页端低。

淘宝如果愿意把网页端稍微捯饬一下，数据量肯定能明显超过京东网页端。

但淘宝手机端太赚钱了，所有资源都倾斜过去，其它端的资源还不如二线厂商。

大厂的资源分配的马太效应比很多人以为的更加严重。

凡有的，还要加倍给他，叫他多余；没有的，连他所有的也要夺过来

圣经《新约·马太福音》

可让网页端这样摆烂多少也是个隐患不是？

这么看还是拼多多聪明，既然懒得管网页端，就干脆不做了：

欢迎关注作者的微信公众号：「体验进阶」

我们的作品信息的传递效率高吗？什么样的设计是清晰有效的？想要搞清楚这些问题，首先你得了解视觉动线这个概念。

我们的作品信息的传递效率高吗？什么样的设计是清晰有效的？想要搞清楚这些问题，首先你得了解 视觉动线 这个概念。

往期回顾：

平面设计构图法！6招快速提升版式水平！ 任何类型的设计都离不开版式构图，但产物的不同构图方式也会有所差异，本文将探讨运营活动设计中的构图方式和技巧~ 往期干货：

阅读文章 >

一、什么是视觉动线 1. 动线

动线一词最早是源自建筑与室内设计领域。指的是人在某个空间内的移动轨迹。例如住宅空间的动线设计，我们会经常听到动静分离的概念，讲的就是动线的设计。住宅动线的设计目的是提高居住体验，减少在室内的重复行走轨迹。

例如家务动线的设计，从进门到厨房再到生活阳台，是家务劳动中最经常行走的路线。通过设计动线，减少家务劳动的行走，就能提高家务劳动的效率。在这里动线越短，效率越高。

在商业建筑领域，动线的设计也被频繁的运用。例如店铺的顾客动线设计，通过兴趣区吸引顾客，引导顾客尽量多的浏览店铺的商品，从而提高销售额。商业空间的动线设计讲究的是坪效（每平米的销售额）,动线的设计更侧重迂回。

还有比如动物园、游乐场的路线设计，就涉及到游玩顺序的体验，以及缓解拥堵等问题。因此动线设计的目的在于提高效率，在家居和商业空间领域已广泛应用。而在 视觉设计 领域，也存在动线的概念。

2. 视觉动线

大家在生活中有没有遇到这样的情况，你要找的东西就在眼前，但是找了好久仍然没有找到。

人眼之所以能看清物体，是因为视网膜中央有个很小的区域叫做中央凹，这个区域集中了大多数的视锥细胞，专门负责视力的高清成像。

但是中央凹的面积极小，高清区域有限。人眼只有在 10 度视角范围内才最为敏感，30 度范围内可以分辨出颜色。这就导致人眼可视范围有限，一次只能产生一个视觉焦点。因此人眼在观察物体时，没办法一下子看到所有信息，需要逐个地移动搜寻，这种视线的移动过程，就构成了视觉动线。

例如我们在阅读文章时，一般是从左到右逐行地阅读，这个阅读顺序就构成了视觉动线。如果文字的排版过于跳跃，没有规律，就会造成视觉焦点过多动线混乱的情况，容易出现阅读障碍，大大影响了阅读体验。

在视觉设计中动线的设计尤为重要，例如下图的 banner，左图动线混乱主次不清。右图则能清晰地引导观众从左到右阅读信息，降低无效的阅读成本。因此构建合理有效的视觉动线，将有助于打造良好的阅读体验，能更高效地让用户获取到信息，避免用户的流失。

二、有哪些动线类型 我们以运营设计为例，来讨论一下常见的动线类型。在 运营设计 中，banner 和活动专题是最为常见的，这类型的设计，画面往往很有感染力，内容丰富。这里介绍的动线，是指某张 banner 或者活动头部同屏类的动线轨迹。一般我们可以将常见的动线分为这几个类型：直线型、汇聚型、发散型、扇型、以及 Z 型。

1. 直线型 直线型动线顾名思义，就是在一条路径上依次展示信息元素。我们以 banner 为例来看看如何应用。

在分析动线轨迹的时候，我们应该逐一地寻找视觉焦点。这个案例中我们第一眼看到的是左侧的标题，我们称第一眼看到的焦点为视觉入口点；紧接着视线转移到了右侧的龙身上。这就构成了一条清晰的从左到右的视线轨迹。

banner 中只在标题和火焰上使用了色彩，其他背景使用较灰的色系，这使得视觉焦点突出，动线清晰。

① 动线角度

直线型动线在运用的时候，不一定都是从左到右的横向角度。常见的有对角线以及竖线的形式。

例如左图这张 banner 就是对角线式的动线轨迹。对角线具有倾斜的角度，容易塑造出速度感。因此这样的动线轨迹往往画面更加的有动感。而竖向的动线一般用在窄长比例的画面中，例如手机端的运营活动。右图的活动页面就构成了从上到下，从标题到主体人物的动线浏览轨迹。

② 视觉焦点个数

直线型动线中，人们的浏览轨迹是根据视觉焦点的位置进行的。在直线上依次排列视觉焦点，但并不是焦点越多越好，一般 2-3 个视觉焦点较为合理。较多的视觉焦点反而影响阅读效率。

2. 汇聚型 汇聚型动线是将用户的视线聚焦到中心的一种动线轨迹。一般有多个视觉入口点来引导用户的视线。

例如下面这张 banner，我们的视线会先被左右两侧英雄所吸引，延着他们冲刺的方向视线转移到了中间的标题，这就构成了汇聚型的视觉动线。汇聚型动线在元素摆放上一般具有引导性，最终目的是让观众的视线聚焦到中心，以突出中心的标题或者主体信息。

汇聚型动线的视觉入口点一般在 2 个以上，例如下面这张活动头部，通过两侧的烟雾塑造视觉入口点，引导观众视线汇聚到中心。是一种侧重突出中心内容的动线类型。

3. 发散型 汇聚型动线是由四周向中心聚集的动线轨迹，而发散型动线则相反，它是由中心向四周转移的动线轨迹。视觉入口点在中心，并逐步向四周扩散的动线类型。

例如下面这个暑假活动页面，就是视线由中心往四周转移的发散型动线。我们第一眼会被醒目的标题所吸引，这就是视觉入口点。之后视线逐步地往两侧移动，依次看到人物、书本、台灯以及两侧的云朵。构成了渐进式的视觉浏览轨迹。

而下面这个四周年的活动，最醒目的也是标题，它将观众的视线聚焦到了中心，之后逐步向四周发散。按照放射的方向，依次浏览了人物、按钮、奖励、圆球等信息。

可以看到发散型动线一般运用在有较多信息元素的画面中，浏览顺序层层递进，比较适合对信息元素进行归类阅读。

入口点位置

发散型动线一般是由中心往四周发散，视觉入口点一般在中心线位置。不过入口点也有位于边缘的情况。例如下面这张 banner，作为视觉入口点的人物位于右下角，通过手势逐步引导观众阅读标题和玩具。是一种单边发散的动线类型。

4. 扇型 扇型动线一般会在中心线上塑造一个视觉入口点，之后保持着至上而下、从左到右的视线轨迹，这种轨迹就好比一把扇子。

例如下面这个手机端活动，我们第一眼会被可爱的小狗头部所吸引，之后视线往下，看到主标题和副标题，并按从左到右的视线轨迹阅读了标题。这就构成了扇型的动线轨迹。

可以看到扇型的动线轨迹保持了从上到下的结构关系，一般用在画面较长的版式中。容易塑造至上而下、内容由少及多的阅读关系。

5. Z 型 Z 型动线是最为常见的类型，它遵循了人们从左到右的阅读顺序习惯。并且在长页面中可以一直做反复的延续。

例如下图的活动页面，我们的阅读顺序就是从左到右逐行地扫视关系。先是主标题，再是副标题，最后是木牌上的信息。这构成了循环的 Z 型动线轨迹。此类动线比较适合应用于文字类信息较多的画面中。

三、如何制造动线 在动线的设计过程中，比较难的是如何去引导信息之间的先后关系。这里介绍几种便捷的技巧，如何更有效的来设计动线。

1. 阅读顺序

第一种就是根据人们的阅读习惯来设计，也就是从左到右，至上而下的顺序。因为人的眼睛，左右转动所看到的角度和区域，要比上下转动所看到的要广阔的多。从左到右也是人们通用的阅读习惯和标准，横向阅读也更为舒适。在设计中我们只需要按照从左至右自上而下的规律来摆放信息元素，就能保证有良好的阅读体验。

2. 元素指向性

第二种是利用元素本身的指向性来进行引导，特别是主体人物的肢体动作、手势等。例如下图中的 banner 就分别通过人物的眼神和手势进行引导，让观众的视线转移到标题上，构成了很强的关联性。让动线的引导更为自然紧密。

3. 引导线的设计

第三种是引导线的设计，我们可以通过设计一些引导性的线条来引导观众的视线。常见的有放射线，或者虚拟的线条。

例如下图 1 的 banner，就是通过左右两侧放射性的线条来增强引导，让观众的视线汇聚到中心，构成了汇聚型的动线。图 2 除了蜘蛛的视线引导外，标题文字的透视处理也构建出一条无形的引导线，让整个视线的引导更加紧密自然。在元素本身指向性不强的时候，引导线的设计能让视线的引导更加紧密，有规律。

3. 层级的设计

第四种是通过层级关系的设计来构建动线，也是经常要用到的方法，构建层级关系的方式有很多，这里只做简单介绍，有机会再跟大家交流。

例如下面这个活动头部，我们的阅读轨迹是从左到右的关系，先看到左边的人物然后是标题，最后是右边的人物，构成了直线型的动线轨迹。如果我们拉开人物之间的空间关系，我们首先会注意到离我们近的物体，依据远近关系，形成了一条视觉引导轨迹。这就是层级对于视线引导的作用。

通过层级的塑造，可以更有效的来制造动线，引导观众的阅读。

小结 综上，只要我们能够理解动线的概念和目的，在排列元素时就能有更清晰的目的性，设计更有方向感。信息的传递是我们构建作品和观众之间交流的桥梁，也是设计中首要考虑的因素。有效的信息传递才能发挥设计最大的价值。以上仅是个人的观感与体会，希望对大家有帮助。

全栈设计师已然不是一个新的概念，然而全栈设计师到底是怎么样的？如何进行他们的工作？我们是否可以简单地认为一名全栈设计师是一名多才多艺的设计师？

全栈设计师已然不是一个新的概念，然而全栈设计师到底是怎么样的？如何进行他们的工作？我们是否可以简单地认为一名全栈设计师是一名多才多艺的设计师？可能大多数从业者仍不甚了解。UXD 团队内对全栈设计师的培养正如火如荼地进行着，我们本次采访了 4 位不同资历的设计师，从不同角度为你解答如何做一名 全栈设计师 。

更多职场干货：

如何面对职业未来？腾讯资深设计师的6个职场思考！ 最近我学到了一些经验，也想清楚了一些事情。

阅读文章 >

一、采访对象：大晟 视觉设计师

Q：你觉得什么是全栈设计师？

A：全栈设计师往大了说，是拥有完成一个项目的所有能力的角色。是从机会点的挖掘，到对策略概念的制定，到设计的产出，到最后的开发执行的一个全能角色。

我们刚开始培养全栈设计师，对“全栈”的认知可能暂时局限在设计或开发这些我们熟悉的互联网领域里。打开了说，我觉得很多艺术家也可以说是“全栈”，比如说大地艺术家克里斯托夫妇，他们在做“包裹德国国会大厦”项目时，花费二十四年去游说政府，同时花费大量的时间解决复杂的技术，资金，人力，工程等事项上。这些在外人看来，可能都不是艺术家要做的事，但是他们其实要花大量的时间在这些方面上，要去做很多艺术之外的事情。

Q：你现在的主要工作是什么？

A：我的工作内容是比较丰富的，有品牌方面的设计，有运营视觉的设计，有 IP 运营的探索，再到通过视频完成不同项目的包装推广等。有很多项目都需要从概念设定开始做，然后设计执行，再到推广等环节。

一开始做设计其实也只专注于“画图”这一件事儿上，少有关心为什么要做，设计稿如何落地。其实我觉得只要是有追求的设计师后来一定会关注到整个流程、整个项目的方方面面，会做很多“画图”以外的工作，才有机会去包裹国会大厦。不想包裹国会大厦的设计师，不是好的设计师。哈哈哈哈。

Q：经过这么久的沉淀，你想继续丰富自己的设计深度还是设计广度？

A: 作为一个设计师，肯定有你最擅长的地方，有的人可能特别擅长于沟通，特别擅长于去协调；有的人他可能非常他的天赋可能在于整个概念的构建，有能力讲好整个故事；有的人可能在视觉语言的表达能力上特别强。

我觉得首先应该抓住自己最为擅长的部分，会继续去挖掘自己擅长的地方。在这个基础上，再去对整个流程进行了解和拓展。

Q：对于年轻的设计师你有什么建议？

A：需要先去发现自己擅长的是什么，建议从兴趣出发，当你想包裹国会大厦的时候，你其实自然而然就会去了解整个流程上的所有东西。

二、采访对象：迪迪 交互设计师

Q：你觉得什么是全栈设计师？

A: 我觉得全栈设计师不光要在职能上覆盖各个流程环节，在能力上也能胜任每个环节的工作，甚至可以在某 1~2 个环节上特别擅长，在整个链路上发挥自己的能力。

Q：为什么会选择转型全栈设计师？

A：其实我不是为了提升能力而去转型，而是为了更好的了解我的合作方的工作的内容，更多的站在对方的角度去考虑我的设计。比如说我之前做交互的时候会画低保真的稿子，因为我最后只要截出一张图来就可以。包括画布尺寸之类的我都没有特别关注，布局、比例等很多细节也没有考虑。所以经常出现稿子做出来以后，UI 同学的产出会跟设计的界面不太一样的情况。

之后我就在思考为什么我不能在这个环节就把它做好，在做交互图时就解决这些问题，减少 UI 同学的工作量或者交互的二次调整和设计。

然后再比如说可以多了解一下 UI 方面的工作，还能提升一些视觉上的能力，换一下视角对我来说还挺好的。我本身视觉能力不是非常强，我觉得也可以跳出舒适区，去感受一下相对来说不太擅长的东西，我觉得也挺好的。

Q：你现在的主要工作是什么？

A：我现在的主要工作就是挑选一些比较适合做全栈设计的项目，从跟产品沟通、交互设计、UI 设计，最后跟进产品和技术同学去做 UI 界面细节的调整。

Q：经过这么久的沉淀，你想继续丰富自己的设计深度还是设计广度？

A: 我觉得在我现在这个阶段可能深度比较重要，因为我觉得能力很平均的人有很多，大家每一个方面都可以去尝试，但是如果想要让自己有突出的表现，还是要靠自己对某一个维度有深入的了解或者有特别强的一项能力。

想要专精我认为是特别难的一件事，因为你要很坚持，你要一直努力的去围绕这个维度找各种不同的方向持续深入。我觉得其实对我来说其实还是挺难的，所以我觉得对我来说深度可能还比较重要一点。

Q：对于设计和工作你未来目标是什么？

A：我的未来目标就是先成为有广度的设计师，然后再成为有深度的设计师。也希望能够体验非交互设计师的一些岗位，比如体验设计师，会跟现在的工作内容有一些不一样，也能逼着自己去弥补一些短板。

三、采访对象：李洋 UI 设计师

Q：你觉得什么是全栈设计师？

A：全栈设计师不能把它单纯的理解为全能的设计师，比如对 UI 设计师来说单单解决了一个交互的问题、解决一个设计问题、解决一个运营问题，就是全栈设计师了。

全栈最早是阿里提出来的，定义全栈是跨界的，脱离了设计本身去做事情，比如产品研发，甚至说这种 PMO 的项目管理了。

全栈设计师，其实是跨界能力的体现，你可以把它定义为用更广的视角来看待同一件事情，然后通过你不同的能力去解决和输出不同的问题，提供不同的解决方案和思路。

Q：你现在的主要工作是什么？

A：目前负责斑马的项目，以及二手车的基础体验。

Q：经过这么久的沉淀，你想继续丰富自己的设计深度还是设计广度？

A：如果是面向咱们整个团队的设计师来说，我主张的是先有深度再有广度。

举个简单的例子，我们现在正在做某项设计需求，需求的本身你都做不好，那如何向上或向下的评断我的这个产品整体是怎么样的，我的业务是怎么样的，我的底层的架构是什么样子的呢？

看不到，当你不了解这个业务的时候，你横向更看不到我业务的发展是什么，后续的迭代方向是什么。这时候你说我去培养一个全栈，理解我的研发能力，理解我的测试能力，理解我的产品能力等，是不太现实的。等于是一个很瘦弱的躯体外面包裹一个很大的空壳，它支撑不了你整个概念，所以说我主张是先有深度再有广度。

Q：对于设计和工作你未来目标是什么？

A：我的感觉是目标可以分两个：一个是业务支持方面，如何让业务变得更好；二是依托这部分的能力，怎么样能覆盖到更多的人，影响到更多的人。

咱们现在团队都是在互联网平台的设计师，可能大家都会站在现有的角度去想我要做成一件什么事。但是就像第一个问题所说的，大家对全栈设计师的理解，可能是认为就是全能的，但其实全栈的底层还是综合解决问题的能力。所以说我想说以我的一些思路和方法能够覆盖到更多的同学，然后让他们真正的意识到说我怎么样去做这个事情。

Q：对于年轻的设计师你有什么建议？

A：不要浮躁，也不要摆烂。首先浮躁会让你在选择方向的时候选择不定。也不要盲目跟风，之前有一段时间 C4D 和 Blender 火了，大家都开始学。学习本身是没问题的，但是你首先要明白你自己为什么学，不要让浮躁和盲目影响到你的一些判断。选择自己需要的，这个是最重要的。

四、采访对象：大哥 视觉设计师

Q：你觉得什么是全栈设计师？

A：其实刚刚知道全栈设计师这个话题的时候，发现它可能是设计师在设计的本职工作以外向前向后的延伸，比如设计前期的产品策略以及活动策略能力和设计流程后的前端代码能力。

我理解其实在各个设计领域都可以把全栈称为全链路，我觉得全链路在全栈基础上的一种表达，全链路它可能指的不光是解决设计本身的问题，而是用一种全局思维去思考和解决在产品设计流程中所有点，用之前的一个观点来说是：“设计一件事情，而不只是设计一个画面。”

Q：你现在的主要工作是什么？

A：主要在做运营设计和偏品牌向的视觉设计。

Q：经过这么久的沉淀，你想继续丰富自己的设计深度还是设计广度？

A:可能更多的是想丰富广度，在视觉表现的维度有了一些沉淀了以后，想在此基础上继续做一些边界的外延。去更多的了解一些跨界的领域，比如说像广告和营销的领域。能对互联网设计产生一些影响或者开阔设计思路的一些方向进行探索。

Q：对于年轻的设计师你有什么建议？

A：说不上是什么建议，不过有一个小点。一个是我感觉可能是在视觉上面可以保持专注，往深里去挖掘，让视觉呈现更加的讲究和精致。

另外一个就是横向的，可能除了设计以外要看更多的东西和跨界的领域。这些可能会对设计有一些积极的帮助和正向的影响。

欢迎关注「58UXD」的微信公众号：

潮流是个圈。那些曾经流行过的设计风格，视觉元素，总会以各种各样的方式重新回来，只是视觉风格的每一次回归，都多少会带有属于当下的设计基因。这种情况在设计领域，尤其是视觉和平面设计领域，特别明显。

潮流是个圈。那些曾经流行过的设计风格，视觉元素，总会以各种各样的方式重新回来，只是视觉风格的每一次回归，都多少会带有属于当下的设计基因。

这种情况在设计领域，尤其是视觉和平面设计领域，特别明显。

全世界在疫情反复中煎熬了 3 年，怀旧情绪也在设计领域中开始蔓延也就不足为奇了。有氛围直接拉满、抓人眼球的的 70 和 80 年代风情：

还有 90 年代风情的界面和物品：

千禧年 Y2K 式的趣味和怪诞：

装饰性十足的复古小贴纸里藏着的诗和远方，恰恰是对抗隔离和疫情的倔强：

而带有一丝迷幻色彩、又特色十足的角色和视觉元素，又是当下让平面设计作品脱颖而出的不二法宝：

那么，这类潮流平面设计作品，都是怎么设计出来，又需要掌握哪些技法呢？从元素的搭配，布局的选择，色彩的勾兑到内容元素的梳理，甚至物料的输出，内容的包装，这里有一站式的解决方案：

课程原价 499 元， 新课特惠价仅需 399 元，直减100元！

移动端扫码报名，PC端右戳报名： https://pro.uisdc.com

超全内容 + 潮流复古 + 插画加持 这是一套带你重新夯实平面设计基础的课程，从高频使用的字体、构成、配色、排版入手，带你打牢平面和视觉设计的基础。结合讲师 AC 炒碗面 的大量实战经验，带你解决日常设计中最常见的问题，增加视觉表现力，提升视觉张力，强化排版丰富度和自由度。

同时，这也是一套结合经验带你重塑视觉设计的课程，老师会教你从装饰性小贴纸入手，带你熟悉使用矢量设计软件绘制小元素、贴纸，到绘制贴合主题的角色和灵活机变的小场景，带你彻底提升平面设计的视觉表现力。

最后，这还是一个带你自由应对各种类型设计物料的课程，从 Banner 到海报、H5 等常见的设计物料都涵盖在其中，灵活的物料拓展技巧还能帮你丰富作品集。

下面的大纲，最能说明问题：

课程原价 499 元， 新课特惠价仅需 399 元，直减100元！

移动端扫码报名，PC端右戳报名： https://pro.uisdc.com

大厂人气潮流 设计师 ：AC 炒碗面 Ac 炒碗面一直都服务于充满活力的企业和平台，无论是在知乎、快手还是在陌陌，她都能让平凡的主题焕发出丰富的色彩，在日常的选题中搭建出有趣的脑洞，用灵动的色彩和灵活的排版来承载内容，借助潮酷插画来呈现丰沛的情感，靠形体和视觉抓住用户和甲方的眼球：

活在潮流前线的 Ac 炒碗面 ，不仅有着她自己摸索出来的一套平面设计和插画设计方法论，而且在实战中还总结出一整套应对不同情况、不同设计物料的完整技巧和解决方案，而这也正是这套课程的底气！

下面是 Ac 炒碗面 的设计作品：

 

以下为往期学员的作业：

如果你也打算将平面设计技能全方位升级一下，顺便掌握一些强化视觉的插画技能，同时强化设计运营能力、提升应聘求职时的竞争力，就不要错过今晚的秒杀：

课程原价 499 元， 新课特惠价仅需 399 元，直减100元！

移动端扫码报名，PC端右戳报名： https://pro.uisdc.com

什么是设计中的解构思维，解构思维怎么产生价值？本章结合 B 端场景进行了应用解读，通过对组件深入的解构理解以及对业务需求的解构设计，示意解构思维如何来解决 B 端业务需求和组件运用的问题，反映了解构思维的运作模型与价值体现。往期干货：遇到设计瓶颈无法脱身？

什么是设计中的解构思维，解构思维怎么产生价值？本章结合 B 端场景进行了应用解读，通过对组件深入的解构理解以及对业务需求的解构设计，示意解构思维如何来解决 B 端业务需求和组件运用的问题，反映了 解构思维 的运作模型与价值体现。

往期干货：

遇到设计瓶颈无法脱身？五大章节帮你正确应对！ 前言：每个设计师都会遇到瓶颈，至于瓶颈期挣扎了多久各有不同。

阅读文章 >

一、设计中的解构思维（解释解构） 1. 广义的解构思维是什么

“解构”一词富有哲学色彩，早期的出现是哲学家雅克·德里达不满西方几千年来的传统哲学思想，而提出的一种批判方法，是指对一切存在事物或现象的原因及本源研究，得出的稳定结构及其中心进行消解，每一次解构都表现为结构的中断、分裂或解体，但是每一次解构的结果又都是产生新的结构。解构具有消除二元对立、打破固有传统、去中心化、多元开放、包容差异等特点，对当下世界的多元化包容性都带来不小影响。

而其思想内涵也在不同行业中生根发芽，在服装、建筑、平面、影视行业中处处可见解构，以此为根源，20 世纪 80 年代“解构主义”作为一种设计风格的探索开始兴起，解构主义用分解的观念，强调打碎，叠加，重组，重视个体，不见本身，反对中心化或总体统一而带来的支离破碎和不确定性（例如肤色阶级的种族歧视、早期重男轻女封建思想等）。

如何理解呢？“解”有分解、拆解、理解的意思，而“构”具有结构、构造的意思，字面意思就是对事物的内容结构进行剖析。通常解构被认为是对传统认知里的结构进行质疑和破碎重组，并建立具有新意义的结构。例如你一天放了 7 个不同声音的屁，通过解构，我听到的不再是屁，而是音符，经过谱曲，我成就了一首<别致的 Beat>。好的翻译也可以视为解构，这个过程就是译者对本质含义进行理解并使用新的语言结构释义，其表达的本质没有变，却拥有了更为生动明了的译文。

2. 体验设计中的解构思维

一般结构形成表象，表象反应本质，但需求的构成是由其他本质推动的，这些本质既能形成 A 结构，就必定能造就 B 结构，所以解构主义不认为结构与表象能代表本质，设计中解构思维可以帮助我们跳出传统的条条框框，就好像在说时代变了，你那套不行了。

体验设计的范畴中，我将解构思维简单概括为：不停留于结构表象，敢于质疑、深入本质，再创结构，是一种打破设计相关秩序然后再创造更为合理秩序的思维主义，是对本质的深入与多元化的理解，而体验设计中的本质常常是以需求作为出发点，以用户和场景作为合理性的准则，以解构出具有体验或商业价值的方案。

一把舒适的椅子如何设计，从人体工学椅子到懒人沙发，依旧是一个不错的解构案例，原来舒适的椅子可以这样。

3. 解构与拆解、原子理论的区别

拆解是对某个事物按照一定逻辑或结构进行分解拆除，目的是获取更全面或更深入的信息与理解，从而加深对本质的理解，拆解并不影响事物本身的结构或中心，而解构主义则是出于对结构或中心的质疑展开的，并试图找到新的侧重点或视角来理解本质，目的就是建立具有意义的新结构，同时在建构的过程中，还会用到更替、融入、结合、间离等手法，而并非是线性的拆解组合，在体验设计的应用中，我认为解构有益于深入研究，以及跳脱竞品或传统结构设计的思维局限。

原子理论在 B 端组件系统中有深入的应用，像搭积木一样，重心是找到可以复用的最小单元，然后利用这些单元组装出更复杂更庞大的结构体，并且对这些单元的资源进行重复性利用，以减少生产过程中带来的资产冗余、不一致、低效率等核心问题。侧重点是交互层与功能逻辑，是一种工具化、模块化的思维，主要是业务解构后进行 B 端交互页面搭建的工具。

但是在传统 B 端业务设计的背景下，解构思维可以配合业务情况对组件传统的“组织”及以上的结构进行破坏重组，以诞生新的结构并更好契合业务。

二、再说说 B 端组件系统（解构对象） 1. 组件系统的诞生背景

B 端向来是以业务操作为主，而在繁琐的操作过程中，尽管界面或场景不同，但是有很多操作行为或操作内容具备较高的一致性，为了减少对应资源的反复设计与开发带来的时间浪费与资源冗余，这些对应常见的交互组件被系统化了，同时在不断探索更基础或高频率通用的组件单元，以便后续的研发设计中可以随时调用，于是组件系统诞生了。

2. 组件系统的核心价值

从内部研发视角来看，已经提到的减少资源冗余与效率问题便是核心价值了，从界面设计与品牌调性来看，使得产品样貌与操作更为统一规范，便于资源管控。

而从外部视角来看，一套开源的设计系统还能赋予生态上的改变，一套基础完善的 B 端组件系统可以支撑内部庞大的业务的同时，也可以赋予友商或帮助其他小微企业研发中后台，对于业务生态、研发生态都有好处，收获口碑的同时，是一种文化价值传递，也是影响力的渗透。

3. 什么时候搭 B 端组件系统

从技术难度工作量以及研发周期来看，显然不能短期获取回报，往往只能在业务生态需求量大、涉猎业务复杂或是发展迅速才有较好的价值体现，当然了不差钱为行业生态做贡献也可以啊，尽管如此但也不是说不建议设计组件系统，具体也要看研发背景与组件系统搭建程度；

① 研发背景参考要素

大部分中小型企业，业务不是特别复杂，研发资源很有限，那就直接考虑开源组件系统好了，用现成的真的便捷太多，并且也不会涉及到到数据安全的问题。如果要搭建组件系统，那就需要考虑自身研发资源(时间、人力、成本)硬不硬，然后就是业务复杂程度是否大多开源的不能轻易满足，这两点很重要。

② 组件搭建程度情况

第一层实现设计产出加工件：

借助 Sketch、Figma 等主流 UI 设计软件搭建界面常用的组件库，用于内部设计资源流通，快速搭建 UI 界面，保证界面组件统一性和效率保障，搭建起步不要考虑全面，先从最基础最常用的开始搭建。

第二层沉淀对应代码库：

设计师 有了可复用的设计组件还是比较初步的，重要的是研发工程师对可复用的组件开始沉淀，并建立资源库，研发过程中可能会伴随业务需求一起完善，对于已研发的组件可以同步记载完善交互，然后规划版本逐步完善。

第三层设计代码一体化：

设计与研发的组件完成版本一致，实现组件从视觉效果到交互效果反馈完整，状态齐全，引入即用，实现真正意义上的组件系统。

③ 进行系统二开维护

基于业务情况与开源组件系统进行二次开发，来建立沉淀自家的组件系统，如果这么做首先考虑的还是研发背景情况，进行二开可以节省不少时间，并且可以有更多差异化定制化的空间，需要注意的是目标二开系统的灵活性、扩展性等核心问题。

三、用解构思维深度理解组件（开始表演） 1. 从表象到数据背后

我们通过 B 端中后台的表象开始解构，映入眼帘的往往是各种功能的导航、操作入口、信息反馈，很清晰很明了，各种操作都被组件结构所包揽并示意。

似乎已经看到了组件的作用，但又好像看见的还不够，我们再次深入，组件的背后是便于操作，而操作的背后是什么，似乎很接近了，我们结合界面交互的构成结构换个视角看问题，如果没有这些组件，任务还能进行吗？显然具备代码能力是可以的（毕竟有些开发天天就是对数据 CRUD，不理解就问研发 [手动狗头]），那么现在看来组件的作用就清晰明了呢，“组件是提供间接的代码操作工具，便于我们通过界面交互来控制代码数据的交互，帮助减少操作的门槛与理解成本”，我把这理解为组件的底层价值。

2. 解构组件的功能逻辑

组件本身注重的是行为逻辑，即交互逻辑，非业务逻辑，是业务逻辑构件的工具。从交互视角切入，基本的交互原则是组件本身必备的，要易于理解、易于操作、及时反馈，而组件运作的本质逻辑我理解为对数据的约束、反馈与数据交互，什么意思呢？你听我说人话：

① 约束作用

看看以下图片中的举例，直观感受一下组件约束能力的价值。第一组是没有注重组件约束功能的，而第二组是采用了合适的组件约束能力后的效果；

通过以上对比，不难看出输入输出的信息都得以约束和规范化，从数据、从业务、从浏览都产生了极佳的效果。而在不同场景下这些约束会有差异，为的是更好满足业务需求，因此就诞生了具有不同约束能力的各种组件，这里再枚举一些例子；

② 反馈作用

反馈即通过数据加工产生更容易理解的表象，以及在操作后的提示反馈。反馈可以告诉我们有什么是什么、帮助理解这些信息有多少类目、理解这些信息有什么特征、理解这些信息量情况、理解此处有何操作等，尽管相同作用的反馈可能有不一样的样式，但这并不影响统一性，差异化只是满足不同场景或不同容器特征而已，例如会话窗口通知与文本 tips 同样是信息反馈，那么显然会话窗口更加重视信息接收程度，出现场景更加正式醒目；

而这整个过程的反馈基本上围绕“映射”原理进行，从代码层获取信息框架再通过界面释义，就像是一段巧妙而精准的翻译一般，业务是否吃透、组件用的是否得当、体验是否良好，都要看这“映射”的功夫下足了没有；

③ 数据交互

具备数据交互能力，即可以通过组件对界面上的数据发生变化以达成任务操作的目的，说人话就是可以直接帮助我们控制界面元素和数据增删改查，例如搜索就是利用组件输入查询的关键词，并通过按钮或键盘发起数据索引，最终获取反馈信息帮助我们完成任务。

B 端数据交互的类型相对是比较简单的，主要包含了富文本、图片、动图、音频、视频为主，复杂的地方在于特殊格式的兼容和深入编辑的需要，因为要有指定的解码器支持文件的显示以及操作存储，这也就意味着可能需要制作新的配套组件，或是引入其他的组件进行二开，例如代码编辑器大多 B 端公开系统是没有提供的，这就需要新开发或新引入。

3. B 端组件的同质化现象

在第一台携带操作界面的计算机诞生时组件就有了，时过境迁，计算机界面的交互组件也配套设备输入输出的特征逐步定型，对比当下主流的开源 B 端组件库，不难发现基础的组件只存在细微交互动画与视觉差异，功能逻辑基本一致，这是源于多年来计算机的快速发展沉淀下来的人机交互认知与共识，一切看似有标准但又没有绝对的标准，约定成俗一般。

尽管 B 端组件还有一定个性化或差异化的空间，但大多也只是视觉表现层的一些调整，并且面对市场大众化的组件认知与趋势，很难做出别致的差异化了；

也许在 B 端组件发展的道路上，只会同质化越来越严重吧，没有新型业务需求驱动，可能现有的基本组件就定型了，而市场上的组件系统也会被广泛的应用与习惯，当广大用户养成了认知与操作习惯后，就更没办法对组件做出差异化了，这会违背大多用户的认知与操作习惯，所以对组件本身进行解构创新的价值不大，解构的重点是功能用途的深入理解与应用。

4. 组件对设计师的价值

B 端重业务、重效率、少个性，而 B 端组件同质化正在加剧，那么设计师也就没有必要去过分考虑组件的差异化或个性化，聚焦新型业务的交互组件或是业务 需求设计 才应该是众望所归，而组件系统的概念与组件的理解应用也应该成为设计师的标配能力，“组件”一定是 B 端设计师的重要价值，却一定不能是核心价值，所以了也不要老是说 B 端的设计师们就是在搬组件了，这墙砌的不好吗？

四、解构思维让组件得心应手 1. 用好组件，先从需求解构开始

不同组件的功能用途首先要理解，至于使用什么组件取决于需求的数据交互以及约束条件和反馈需要，而这些条件均来源于需求，这个过程中，要发挥好解构思维的精髓，那么第一件事就是说“这是个伪需求”，一定不是思考如何执行需求，而是从质疑需求开始，接着就会开始对需求拆解厘清，当需求的结构被你摸清时，你就能感知到需求是否合理，是否有更优方案。然后就可以跟需求方说说你的观点，我早些时候也是得益于这种思维模式，能够加深对需求的理解，同时跟产品有来有往，对方也更愿意主动来探讨，当然呢，需求方是不是傻*心里也就更有数了。

要开始需求解构呢，就要先清晰需求的结构，一般来讲即构成需求的背景、场景、人群、流程、目标、模式等问题，然后拆解分析找到关键因素攻破。

当我们完成需求解构后，就需要进一步通过对需求的流程、信息、关键词进行提炼，以匹配需求实现所需要的组件，匹配的本质是依据信息特征和功能要求，即信息的图文视频音频类型、格式兼容属性、数量单位、映射反馈、逻辑含义、约束条件等关键词，整个解构过程可以用以下这个模型来概括；

案例一：组件区块解构

案例中，在这套传统数据表格里，我们需要添加部分微型数据图表信息，提供给部分角色查看和比较前后行的数据差异，那么是你会如何进行解决呢？

传统选手使用添加“查看图表”操作，通过点击后利用抽屉或弹窗承载图表数据；

并在图表显示面板上补充了切换上下条数据用作比较；

解构选手把传统表格给改了，采用了可扩展表格，并将数据图表以卡片的形式嵌入了表格，通过点击展开查询图表数据，可以随时展开和收起数据的图表信息。

两者间有何差异：传统往往是做加法，解构则是对现有结构做改变。这个过程中解构的是表格扩展数据的各种可能性，以及需求本身的目的是什么，而结合起来找到一种新的表格方式来实现需求。尽管后者方案表格代码需要做更多调整，但是优势显而易见的，在保障能够实现的情况下，约束了表格横向的宽度延伸、展开数据支持二次加载减少了请求并发、支持多行数据展开图表对比，尽可能减少了操作步骤。

案例二：解构树状列表需求

需求简述；要做一个树状结构的表格，用于呈现控制节点的基本信息和关系示意，主要是提供给节点管理角色使用，构成的主要信息框架如下：

传统设计中，提供设计的关键信息与关键词基本已取得，我们可以根据需求开始构建页面了，第一步搭建支持展开收起的表格，用于反馈节点的层级关系，表格 Title 主要由节点名称、描述、Owner 名称、工号、部门抬头、分布域、节点开关构成即可，开关进行操作时进行二次确认弹窗确认即可，大致原型图如下：

解构思维怎么设计呢？

第一步质疑结构：为什么是树状，为什么是表格，这个结构主要包含了什么，重点是什么？表象反映出了什么样的本质？这样带来了什么问题？

第二步破碎拆解：带着问题对结构拆解，对构成的各方面深入理解，找出新的发力点以及更全面的信息。

——需求结构特征：树状结构、信息显示、开关操作

——需求本身的问题：信息优先级、节点数量规模、默认显示节点、是否支持过滤、关联数据或功能情况

——需求结构化：需求对应的场景、参与和使用的角色、服务的作用影响、底层逻辑与流程、交互的信息框架

当然了，需求结构化的方法并不是固定的，可以如上将构成的因素厘清，也可以通过服务蓝图或运作模式来将不同阶段进行拆分和理解。

——拆解结构深入理解：对结构构成的多方面进行思考，找到关键因素或核心价值，并重新审视结构，来帮助构思新的需求方案。以上需求通过对需求服务对象和需求方进一步沟通，了解到节点管理者更关注树状结构的关系、节点的名称、描述、分布域信息，然后才是负责人跟开关操作，并且节点分为三大类型，有时候会先注意是什么类型，然后办公时会根据名称路径去找想要指定操作的节点，其实节点数量一般在10-30个之间，并且一般都是从第二级开始操作，后续数量上也不会怎么变化，节点与节点之间的互通则由开关直接影响...

第三步重塑结构：经过解构我们将构成聚焦放在节点管理员身上，并获取了更为全面和有价值的信息，接着我们进入建构阶段，思考如何更好的满足节点的层级与流通性，当前现有的数据支撑和遗漏可用数据有哪些，数据的显示并不是难点，我们开始思考哪些组件区块具备层级关系与流通状态示意能力，在呈现时，如何更好服务节点管理者的使用场景，带着这些问题我们开始重新对需求进行设计，以及匹配合适的组件搭建原型。

第四步匹配资源：放弃了树状表格，但是延续了树状结构特征，对于节点的类型重新补充了进来，而信息也重新调整了优先级，使得整个需求结构更加完善合理，原型阶段，我们通过拓扑结构来取代了表格，支持子集展开收起，并且以卡片来承载节点信息与操作，节点之间的卡片也用不同颜色的线条示意流通性，在有限节点中，也更好的突出了个体，默认也直接显示完所有二级节点，大致原型图如下：

案例小结

对于解构思维应当施加一定的灵活性，要识别是否具有深入和颠覆的解构价值，没必要过度的解构，解构以后的建构也很具有挑战性，你要思考优化结构赋予价值。另外有时候经过解构思考后，结论与原本的需求结构差异不大，甚至你也认同原本的方案，这并不冲突，这说明原本的设计者也是严谨或靠谱的，并且深入理解的过程是宝贵的，在体验设计的范畴，解构思维应该是为我们提供别样的视角，帮助我们深入本质解决问题，并不是为了生成新的结构而解构。

五、解构思维对 B 端的价值 1. 突破对传统结构的思维局限

产品设计中，常常开玩笑说就是互相抄来抄去，要是竞品毙光了，都不知道接下去怎么设计了，很多时候我们看问题常常凭借经验或直觉看表象，未能深入或大胆的批判人家的不好，对权威提出质疑，而解构思维正好反其道行之，以使得我们对竞品分析或用户研究后不会拿出一个显而易见的结果，却没有深入的结论做业务抓手。解构思维可以去中心化去权威化，帮助我们深入并注意到构成个体的价值，以为业务带来更多的可能性。

2. 业务优化或改版的得力助手

看起来没什么问题，或是对方案没有底气，那就试着解构一下，先把页面里的业务拆出来，在把业务之间的关系和逻辑才拆出来，当你解的足够清晰明了时，面对不同场景或角色特征，需求优化的方向就开始清晰了，解构思维能让你变得游刃有余，是业务分析和理解的一把好手。

3. 深度理解组件原理与应用

以前总是问这个组件怎么用，其实应用解构思维后，才发现原来是自己太懒了，没有进一步的对组件进行思考和理解，其实运用解构思维想想人家组件为什么这么做、还能怎么做、什么场景下用，马上就通透了，并且对于组件的模块化改造也是有着相当的作用。

六、结语 早些时候，我以为的解构，就是对某个结构进行拆解加深理解，而之后又意识到还要用一些颠倒、反转、重组、叠加等一些列手段进行建构，目的是形成一个不同于以往的结构，再后来才发现解构也没那么简单，解构主义更注重的是对传统观念中的结构发起的质疑，从而引发新的深思，将本质不再停留在结构与表象本身，并试图找到新的或其他合理的点进行重新建构，最终带来不一样的结构或价值体现，这种例子也在当今多元化的世界处处可见，稍加灵活的应用，解构也会是不错的工具。

当然了解构已经在各行各业开出了不一样的花，怎么理解怎么运用会有所不同，这里主要也是分享了在体验设计领域中我对解构思维的理解与运用，算是抛砖引玉吧，你有看见什么好例子吗？评论里告诉我，我们一起解构解构