大家好，我是知果，感谢优设的邀请，借着这个机会跟大家分享一些我的经历，聊聊如何学习与成长。往期职场习惯系列回顾：前小红书设计负责人：为什么有人工作才两年，能力远超五年的设计师？2022年职场习惯第4期来了！

大家好，我是知果，感谢优设的邀请，借着这个机会跟大家分享一些我的经历，聊聊如何学习与成长。

往期 职场习惯 系列回顾：

前小红书设计负责人：为什么有人工作才两年，能力远超五年的设计师？ 2022年职场习惯第4期来了！

阅读文章 >

猎聘网总监：为什么有人工作才两年，能力远超五年的设计师？ 大家好，我是闫界，感谢优设程远老师的邀约，能有机会跟大家分享一些我个人的工作习惯。

阅读文章 >

我是知果，公众号“知果日记”主理人，一名 B 端产品人。我本科学的是动画专业，研究生学的是品牌设计专业，因此实习期主要是在淘宝店铺设计与插画设计领域。后来正式工作后做过品牌/插画设计师、体验 设计师 （主岗为团队负责人）、产品经理，不过它们之间并不彼此分离，而是互相融合的。可以说，每次转型，都是我想突破舒适圈的尝试。很幸运，在大家的帮助下，我顺利地开始并进入新征程。未来，我依然会选择去不断突破，我相信，持续感受新事物是推动自己前行的最大动力，也是生命存在的意义。

1. 您有哪些坚持了三年以上的工作和生活习惯？

知果：我坚持了三年以上的工作和生活习惯，其实说来都是很微不足道的点。我选取了我认为对一个人的成长比较重要三个点分享一下，分别是：主动学习、持续思考、自我驱动。

① 主动学习：

我们从学校毕业后，基本就暂停了学习。一方面是由于工作忙，每天应付工作，已经挤不出时间来学习；另一方面是因为离开了学校，不再有老师的安排与督促，我们仿佛失去了学习的方向。

而事实上，学习是一件终身的事情，我们不应该把它仅限于在学校里。特别是在我们进入职场后，比任何时候都更加需要去主动学习；如果不去学习，就无法更好得胜任领导安排下来的工作，更不用说想要创新了。

记得在我刚进入职场不久，我就接到了一个新任务，是设计部门季度杂志。这个挑战对我来说不小，一方面是我没有相应的设计经验，另一方面是我连 indesign 排版软件也不会。于是我先研究了对标杂志的设计风格，学习在设计杂志中要注意哪些核心要素，以及学习排版中 indesign 常用的核心功能，等等。通过主动提前学习，在任务下来时，才不至于手忙脚乱。由于我有插画功底（图 1，日常插画练习），我还将插画运用到了杂志设计中，让我们部门的杂志在客户收到的众多杂志中脱颖而出，受到了客户的好评。主动学习让我获得了更多机会，后来我慢慢有机会接触更大的设计项目，包括会议主 KT、书籍设计（图 2）等。

图 1 日常插画练习

图 2 书籍设计

往后的职业生涯中，也基本都是在学习，学习怎么做产品、怎么带团队、怎么建设企业级 B 端设计体系等，持续地学习使我收益颇多，这也逐渐成了我的一个习惯。

那如何进行有效学习呢？我自己有两个心得，一个是“解决问题”式学习，另一个是“以教代学”式学习。

“解决问题”式学习是指我们学习可以从解决问题的角度出发，避免无意识学习，我的大部分学习都是从实际需要出发去学习的。例如，你今天想知道“什么是 B 端产品”这个问题，因为你要放到你的 PPT 当中，那么你就可以针对性的去找答案。在找答案的过程中或许你会发现有很多人提到“B 端与 C 端的区别”、“B 端产品经理要会哪些技能”等话题，那么你可以继续延伸下去学习，直到把你想搞明白的都搞明白。

“以教代学”式学习是指将一个知识以教会他人为目标去学习。你知道吗，很多知识在你描述给他人的时候，他们很难听懂，有可能是你对该知识了解还不够透彻。以教代学正好能解决此类问题，至少在一定程度上会让你对知识了解相对更深刻。当你要把自己了解的、所学的教给其他人的时候，你就需要去思考如何浓缩要点、如何组织语言、如何进行通俗易懂地表达，这都是会让你的学习更有意义和有价值。

为此，有机会我就在公司内外进行课程分享，以此来锻炼自己。图 3 是我以论坛出品人的身份在 2021LIGHT 开发者云大会进行关于体验设计方面的分享。

图 3 2021LIGHT 开发者云大会分享

给自己的持续学习设定一个目标，是解决问题也好，以教代学也罢，总之不能漫无目的，我相信你会慢慢喜欢上主动学习的感觉。

② 持续思考：

我有一个习惯，就是喜欢思考与自己工作或兴趣有关的事情。我这种思考不是很严谨，也不会说在某个固定时间点专门去思考，与复盘不一样。每当我读到一句话、看到一件事、做到某件事都会促使我思考为什么会这样子，有没有办法改善；如果是好的方面的话，我就会想为什么这件事会做这么好，有什么方法是自己可以学习和借鉴的。

在带领团队建设企业级 B 端设计体系的那些日子，我真正感受到了持续思考带来的力量。那时候我们团队需要面对的问题远比单纯做界面设计来的复杂，而每天又都有新的问题出现，这就需要我和团队小伙伴一起思考与找到解决办法。比如如何处理用户提过来的需求以对于用户和我们来说都会更合适，再比如如何确定需求执行的边界，如何与其他团队展开协作，等等。这些也都会在我的第二本书里面一一去分享（目前在写作中）。

持续思考是持续优化的源泉，没有思考就无法进步。

③ 自我驱动：

每年年初，组织都会层层制定绩效，最终分解到个人身上，也就是 KPI（关键绩效指标）。我带团队的时候，会听到有些小伙伴说，反正这个指标权重不高，那就不管它，这分不要也没事。最终你会发现，他就是因为丢失了这几分，KPI 总分处于团队末尾。因为你不在意的恰恰别人在意与上心，如果大家都在意，只有你不在意，很可能你就是末尾的人。

我是这么考虑的，工作不是为了任何人，最终是为了我们自己好。在职场，我们要有自我驱动意识，假设目标分是 1 分就及格了，那我们能否试着努力做到 1.5 分，或者是 2 分呢。

自我驱动是一个人显现出来的内在能量，是由内而外发散出来的，是自律与进取的表现。李宗厚曾说：“积极的自我驱动能让初入职场的人比其他人更快看清自己的不足和优势，更快提升自己的能力和职业素养，更快适应公司环境融入办公氛围。”

我每年都会给自己制定一个大目标，例如 2020 的目标是写完人生中第一本书（图 4，《B 端思维》）；2021 年的目标是提升团队体验设计综合实力（图 5，带团队做产品拿的奖杯）；2022 年的目标是写完人生中的第二本书（图 6，在星巴克写书的某一天）；2023 年我正在规划着。当然大目标下还有许许多多小目标，正是这些小目标才助力我的大目标得以实现。

最后我想说，我们不要因为外力而往前走，要因为内心的力量向前冲。

图 4《B 端思维》

图 5 带团队做产品拿的奖杯

图 6 在星巴克写书的某一天

2. 对你职业生涯帮助最大的习惯是什么？

知果：如果非要说一个对我职业生涯帮助最大的习惯的话，就是“干好当下”。

在我刚毕业时，做的设计工作比较简单，而且持续了较长时间。我当时的想法就是如果这么简单的工作我都不能做好，不能找到提效提质的方法，那领导以后怎么会把重要的工作交给我呢。

在很多简单的工作里有一项工作就是用 AI 画图表，那时候几乎每隔一些日子就要画好多个图表。可能有同学要问，为啥不用 ppt 或 excel 做图表，其实主要原因还是图表美观性不够，不适合放在某些载体上，比如海报、电子杂志。因此，需要美化。于是我研究别人是怎么画图表的，同时调整自己图表中的各个要素（如线粗细、文字大小、标签位置、标题大小等），再渐渐总结自己的一些方法运用到后续的图表绘制中。

在后来的工作中不论遇到什么任务，我的信念都是“干好当下”，可以说“干好当下”这四个字对我影响很大。每次被一件困难的事情快要击败时，我就对自己说，可能是自己还不够认真去干好它，先努力“干好当下”。

我认为，如果自己都没把当下的事情干好，真的不足以谈其他的。

3. 刚进入职场的设计师，应该培养哪些习惯才能快速成长？

知果：我觉得对于刚进入职场的设计师来说，想要快速成长，胡思乱想是大忌。比如想为什么领导给我的工作那么多，为什么每天做这些重复的工作等等。在摆正心态的前提下，想要快速成长那就是：多问、多学、多练。

多问： 不懂就问，不要担心别人觉得你问的问题太简单。要知道，我们问问题就想要更好的解决问题。基于此前提下，相信同事们都是很乐意帮助自己的。

多学： 学习前辈的经验（书籍、课程、文章都可以），可以帮助我们少走弯路，加速解决难题的进度。

多练： 都说纸上得来终觉浅，绝知此事要躬行。因此我们还需要多练，通过实践来提升我们的能力。

4. 有哪些不注意的小习惯，长此以往对设计师有害？

知果：从我的角度看的话，“不能沉下心来做事情”这个习惯对设计师来说是有害的。

还记得在我的一次晋升答辩宣讲环节，我们的 BU 总对着我们候选人说：“我见到过两种员工，一种是面对工作始终积极，相信通过事情可以锻炼自己；另一种是对工作抱着负面心态，每次拿到任务都是抵触情绪。这两种人后续的发展差别很大。”其实领导说的第一种人，就是可以沉下心来做事情的人，一旦我们做任何事情都沉下来，你就会发现我们懂得越来越多，并且也越来越顺了。

积极面对困难，调整自己而不是抱怨外部那些我们无法改变的客观因素，沉下心来专注做好当下的事情，长此以往我们的能力就会越来越好。

最后再推荐一下我自己的公众号“知果日记”。我会每周更新一篇自己在 B 端产品设计方面的原创文章，不过最近由于写书，更新会稍微慢点。我非常喜欢探思如何打造出一款好的 B 端产品，如果你也恰巧喜欢这个领域，欢迎关注“知果日记”。

欢迎关注作者 微信 公众号：「知果日记」

大家好，我是知果，感谢优设的邀请，借着这个机会跟大家分享一些我的经历，聊聊如何学习与成长。往期职场习惯系列回顾：前小红书设计负责人：为什么有人工作才两年，能力远超五年的设计师？2022年职场习惯第4期来了！

大家好，我是知果，感谢优设的邀请，借着这个机会跟大家分享一些我的经历，聊聊如何学习与成长。

往期 职场习惯 系列回顾：

前小红书设计负责人：为什么有人工作才两年，能力远超五年的设计师？ 2022年职场习惯第4期来了！

阅读文章 >

猎聘网总监：为什么有人工作才两年，能力远超五年的设计师？ 大家好，我是闫界，感谢优设程远老师的邀约，能有机会跟大家分享一些我个人的工作习惯。

阅读文章 >

我是知果，公众号“知果日记”主理人，一名 B 端产品人。我本科学的是动画专业，研究生学的是品牌设计专业，因此实习期主要是在淘宝店铺设计与插画设计领域。后来正式工作后做过品牌/插画设计师、体验 设计师 （主岗为团队负责人）、产品经理，不过它们之间并不彼此分离，而是互相融合的。可以说，每次转型，都是我想突破舒适圈的尝试。很幸运，在大家的帮助下，我顺利地开始并进入新征程。未来，我依然会选择去不断突破，我相信，持续感受新事物是推动自己前行的最大动力，也是生命存在的意义。

1. 您有哪些坚持了三年以上的工作和生活习惯？

知果：我坚持了三年以上的工作和生活习惯，其实说来都是很微不足道的点。我选取了我认为对一个人的成长比较重要三个点分享一下，分别是：主动学习、持续思考、自我驱动。

① 主动学习：

我们从学校毕业后，基本就暂停了学习。一方面是由于工作忙，每天应付工作，已经挤不出时间来学习；另一方面是因为离开了学校，不再有老师的安排与督促，我们仿佛失去了学习的方向。

而事实上，学习是一件终身的事情，我们不应该把它仅限于在学校里。特别是在我们进入职场后，比任何时候都更加需要去主动学习；如果不去学习，就无法更好得胜任领导安排下来的工作，更不用说想要创新了。

记得在我刚进入职场不久，我就接到了一个新任务，是设计部门季度杂志。这个挑战对我来说不小，一方面是我没有相应的设计经验，另一方面是我连 indesign 排版软件也不会。于是我先研究了对标杂志的设计风格，学习在设计杂志中要注意哪些核心要素，以及学习排版中 indesign 常用的核心功能，等等。通过主动提前学习，在任务下来时，才不至于手忙脚乱。由于我有插画功底（图 1，日常插画练习），我还将插画运用到了杂志设计中，让我们部门的杂志在客户收到的众多杂志中脱颖而出，受到了客户的好评。主动学习让我获得了更多机会，后来我慢慢有机会接触更大的设计项目，包括会议主 KT、书籍设计（图 2）等。

图 1 日常插画练习

图 2 书籍设计

往后的职业生涯中，也基本都是在学习，学习怎么做产品、怎么带团队、怎么建设企业级 B 端设计体系等，持续地学习使我收益颇多，这也逐渐成了我的一个习惯。

那如何进行有效学习呢？我自己有两个心得，一个是“解决问题”式学习，另一个是“以教代学”式学习。

“解决问题”式学习是指我们学习可以从解决问题的角度出发，避免无意识学习，我的大部分学习都是从实际需要出发去学习的。例如，你今天想知道“什么是 B 端产品”这个问题，因为你要放到你的 PPT 当中，那么你就可以针对性的去找答案。在找答案的过程中或许你会发现有很多人提到“B 端与 C 端的区别”、“B 端产品经理要会哪些技能”等话题，那么你可以继续延伸下去学习，直到把你想搞明白的都搞明白。

“以教代学”式学习是指将一个知识以教会他人为目标去学习。你知道吗，很多知识在你描述给他人的时候，他们很难听懂，有可能是你对该知识了解还不够透彻。以教代学正好能解决此类问题，至少在一定程度上会让你对知识了解相对更深刻。当你要把自己了解的、所学的教给其他人的时候，你就需要去思考如何浓缩要点、如何组织语言、如何进行通俗易懂地表达，这都是会让你的学习更有意义和有价值。

为此，有机会我就在公司内外进行课程分享，以此来锻炼自己。图 3 是我以论坛出品人的身份在 2021LIGHT 开发者云大会进行关于体验设计方面的分享。

图 3 2021LIGHT 开发者云大会分享

给自己的持续学习设定一个目标，是解决问题也好，以教代学也罢，总之不能漫无目的，我相信你会慢慢喜欢上主动学习的感觉。

② 持续思考：

我有一个习惯，就是喜欢思考与自己工作或兴趣有关的事情。我这种思考不是很严谨，也不会说在某个固定时间点专门去思考，与复盘不一样。每当我读到一句话、看到一件事、做到某件事都会促使我思考为什么会这样子，有没有办法改善；如果是好的方面的话，我就会想为什么这件事会做这么好，有什么方法是自己可以学习和借鉴的。

在带领团队建设企业级 B 端设计体系的那些日子，我真正感受到了持续思考带来的力量。那时候我们团队需要面对的问题远比单纯做界面设计来的复杂，而每天又都有新的问题出现，这就需要我和团队小伙伴一起思考与找到解决办法。比如如何处理用户提过来的需求以对于用户和我们来说都会更合适，再比如如何确定需求执行的边界，如何与其他团队展开协作，等等。这些也都会在我的第二本书里面一一去分享（目前在写作中）。

持续思考是持续优化的源泉，没有思考就无法进步。

③ 自我驱动：

每年年初，组织都会层层制定绩效，最终分解到个人身上，也就是 KPI（关键绩效指标）。我带团队的时候，会听到有些小伙伴说，反正这个指标权重不高，那就不管它，这分不要也没事。最终你会发现，他就是因为丢失了这几分，KPI 总分处于团队末尾。因为你不在意的恰恰别人在意与上心，如果大家都在意，只有你不在意，很可能你就是末尾的人。

我是这么考虑的，工作不是为了任何人，最终是为了我们自己好。在职场，我们要有自我驱动意识，假设目标分是 1 分就及格了，那我们能否试着努力做到 1.5 分，或者是 2 分呢。

自我驱动是一个人显现出来的内在能量，是由内而外发散出来的，是自律与进取的表现。李宗厚曾说：“积极的自我驱动能让初入职场的人比其他人更快看清自己的不足和优势，更快提升自己的能力和职业素养，更快适应公司环境融入办公氛围。”

我每年都会给自己制定一个大目标，例如 2020 的目标是写完人生中第一本书（图 4，《B 端思维》）；2021 年的目标是提升团队体验设计综合实力（图 5，带团队做产品拿的奖杯）；2022 年的目标是写完人生中的第二本书（图 6，在星巴克写书的某一天）；2023 年我正在规划着。当然大目标下还有许许多多小目标，正是这些小目标才助力我的大目标得以实现。

最后我想说，我们不要因为外力而往前走，要因为内心的力量向前冲。

图 4《B 端思维》

图 5 带团队做产品拿的奖杯

图 6 在星巴克写书的某一天

2. 对你职业生涯帮助最大的习惯是什么？

知果：如果非要说一个对我职业生涯帮助最大的习惯的话，就是“干好当下”。

在我刚毕业时，做的设计工作比较简单，而且持续了较长时间。我当时的想法就是如果这么简单的工作我都不能做好，不能找到提效提质的方法，那领导以后怎么会把重要的工作交给我呢。

在很多简单的工作里有一项工作就是用 AI 画图表，那时候几乎每隔一些日子就要画好多个图表。可能有同学要问，为啥不用 ppt 或 excel 做图表，其实主要原因还是图表美观性不够，不适合放在某些载体上，比如海报、电子杂志。因此，需要美化。于是我研究别人是怎么画图表的，同时调整自己图表中的各个要素（如线粗细、文字大小、标签位置、标题大小等），再渐渐总结自己的一些方法运用到后续的图表绘制中。

在后来的工作中不论遇到什么任务，我的信念都是“干好当下”，可以说“干好当下”这四个字对我影响很大。每次被一件困难的事情快要击败时，我就对自己说，可能是自己还不够认真去干好它，先努力“干好当下”。

我认为，如果自己都没把当下的事情干好，真的不足以谈其他的。

3. 刚进入职场的设计师，应该培养哪些习惯才能快速成长？

知果：我觉得对于刚进入职场的设计师来说，想要快速成长，胡思乱想是大忌。比如想为什么领导给我的工作那么多，为什么每天做这些重复的工作等等。在摆正心态的前提下，想要快速成长那就是：多问、多学、多练。

多问： 不懂就问，不要担心别人觉得你问的问题太简单。要知道，我们问问题就想要更好的解决问题。基于此前提下，相信同事们都是很乐意帮助自己的。

多学： 学习前辈的经验（书籍、课程、文章都可以），可以帮助我们少走弯路，加速解决难题的进度。

多练： 都说纸上得来终觉浅，绝知此事要躬行。因此我们还需要多练，通过实践来提升我们的能力。

4. 有哪些不注意的小习惯，长此以往对设计师有害？

知果：从我的角度看的话，“不能沉下心来做事情”这个习惯对设计师来说是有害的。

还记得在我的一次晋升答辩宣讲环节，我们的 BU 总对着我们候选人说：“我见到过两种员工，一种是面对工作始终积极，相信通过事情可以锻炼自己；另一种是对工作抱着负面心态，每次拿到任务都是抵触情绪。这两种人后续的发展差别很大。”其实领导说的第一种人，就是可以沉下心来做事情的人，一旦我们做任何事情都沉下来，你就会发现我们懂得越来越多，并且也越来越顺了。

积极面对困难，调整自己而不是抱怨外部那些我们无法改变的客观因素，沉下心来专注做好当下的事情，长此以往我们的能力就会越来越好。

最后再推荐一下我自己的公众号“知果日记”。我会每周更新一篇自己在 B 端产品设计方面的原创文章，不过最近由于写书，更新会稍微慢点。我非常喜欢探思如何打造出一款好的 B 端产品，如果你也恰巧喜欢这个领域，欢迎关注“知果日记”。

欢迎关注作者 微信 公众号：「知果日记」

大家好，这里是和你们聊设计的花生~不知不觉就到11月底了，大家是不是都开始准备圣诞节的设计物料了？我最近也狂看了一波与圣诞节相关的设计灵感，发现其中出现频率极高的一个元素就是「圣诞树」。虽然很多设计中都选择了这一元素作为主视觉，但呈现方式却各不相同，其中一些设计思路创意十足，令人惊喜。

大家好，这里是和你们聊设计的花生~

不知不觉就到11月底了，大家是不是都开始准备圣诞节的设计物料了？我最近也狂看了一波与圣诞节相关的设计灵感，发现其中出现频率极高的一个元素就是「圣诞树」。虽然很多设计中都选择了这一元素作为主视觉，但呈现方式却各不相同，其中一些设计思路创意十足，令人惊喜。

今天就和大家分享我收集的一些有关圣诞树的创意设计灵感，其呈现方式大体可以分为4类，都是非常经典实用的设计方法，大家了解后就能很快地用到自己设计之中。

1）同构置换 同构是 平面设计 中最常用的创意技巧之一，即将两种或两种以上元素或造型按照一定规律进行系统化地组合、拼接或者置换，产生新的视觉效果和含义。

同构在平面设计中的应用，图片来源于Pinterest

这种创意技法在有关圣诞节的设计中经常被使用，常常是用另外一种的元素替换掉圣诞树原本的枝叶细节，但是整体造型看起来仍然圣诞树。这种方法尤其适用品牌节日借势海报，将自己的产品特征与圣诞树的造型结合起来，形成全新的视角，给用户带来惊喜。比如用各种餐具或化妆品有规律地排列成圣诞树的形状；或者在一块切好的三角形披萨顶部放一颗星星，看起来也是也像一颗圣诞树。

2）巧用负形 如果说同构置换是在圣诞树的正形上探索创意的多样性，那巧用负形就是在思维上的反其道而行——将树形的内部空间留白，利用边缘及周边区域塑造出圣诞的氛围。这种方法在造型上要比同构置换简单一些，创意效果却依然出众，达到了四两拨千斤的效果。

用118张案例，讲透海报设计同构的13种表现形式 平面海报设计创意中的同构设计是什么？

阅读文章 >

3）简化抽象 如果你没有高质量的摄影素材，也不会的手绘，那么将圣诞树的形象简化，用抽象的几何立体或者块面进行概括，也能得到不错的效果。这种方式需要 设计师 掌握一些特效设计技巧，比如利用3D建模设计出效果别致的立体元素，或者用Ai/Ps里的功能营造立体空间感/层次感等。使用这种设计思路，设计整体效果会更加丰富多样，在版式编排中的灵活性也会更高。

超全整理！不会3D软件也能做的8种立体效果（附教程） 大家好，这里是和你聊设计的花生~ 3D 元素在设计中应用广泛，但 3D 软件的学习门槛并不低。

阅读文章 >

4）符号化 放弃对圣诞树真实细节的模拟，大胆使用点、线、面将其“符号化”，依旧能轻松让观者接受到有关圣诞节的信息。这种情况下“圣诞树”代表的概念更广泛，设计效果也偏现代极简。虽然看起来简单，却也非常考验设计师在元素构成和 版式设计 上的功力。

以上就是今天为大家推荐的4种有关圣诞节海报的创意设计方法，其实这些设计方法除了用在圣诞节上，也可以扩展运用到其他设计主题和设计元素上，关键在于大家有没有真的熟练掌握背后的设计思路。喜欢本期推荐的话记得点赞收藏，也可以转发给身边有需要朋友 ~ 如果你有关于本文或者其他设计疑问，可以在评论区提出，我会第一时间为大家解答~

推荐阅读：

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

阅读文章 >

案例超多！15种海报版式设计的创意形式 版式设计是设计师的必修课，研究再多都不为过，今天鱼先生继续与大家分享，关于版式设计的 15 种实用的版式设计创意术，干货系列~ 本文方法适用于所有版式设计的应用，比如常见的海报设计、画册设计、KV 设计等。

阅读文章 >

之前给团队招人面试，发现很多设计师朋友在回答「这里为什么这么设计」时，基本都从好看、美观的角度来解释。这个维度是很重要，但这种主观的决策依据，不仅和用户、业务诉求断层，也很难让我们的设计站稳脚跟，让对方信服。所以，每一处细节背后的设计思路就变得尤为重要。

之前给团队招人面试，发现很多设计师朋友在回答「这里为什么这么设计」时，基本都从好看、美观的角度来解释。

这个维度是很重要，但这种主观的决策依据，不仅和用户、业务诉求断层，也很难让我们的设计站稳脚跟，让对方信服。所以，每一处细节背后的设计思路就变得尤为重要。

我们在做日常需求时，也可以通过不断的自问「为什么」来寻找支撑。比如我之前做的「搜索历史」的需求，看似一个非常简单的功能，但当我自问这么设计的支撑依据时，却很难说出口。

所以，我花了些时间挖掘它背后的逻辑，并将思考过程和成果沉淀成文，希望这些内容能给你带来帮助和启发~

一、关于搜索历史 尼尔森前辈在他的十大可用性原则中明确建议，在设计中需要将用户以往的历史行为呈现给用户，以此来减少用户的记忆负担。

用超多案例，帮你掌握尼尔森十大可用性原则 尼尔森设计原则是人机交互学博士 Jakob Nielsen 于 1995 年发表的“十大可用性原则”。

阅读文章 >

搜索历史功能就是一个典型，它和播放器的历史跳转功能、转账的历史账户功能一样，本质都是为了减少用户的记忆成本而存在。

但搜索历史该如何设计布局呢？

二、搜索历史的三类布局 我搜集了各行业 21 个竞品，发现搜索历史的布局大概可以归纳为以下三类

1. 自适应布局

简单说，就是容器的宽度跟随内容的变化而变化，而 padding（块内间距）保持固定。

所有竞品当中，以下这三类产品的搜索历史，全部使用了自适应布局（考虑到篇幅原因只放部分截图）

① 电商类

淘宝、考拉、京东、闲鱼、天猫、pdd，这些产品的搜索历史普遍使用了自适应布局。

② 生活服务类

美团、饿了么这类生活服务类平台，全部是自适应。

③ 内容类

包含各种短视频类、资讯类、音频类的内容产品。比如网易新闻、腾讯新闻、喜马拉雅、简书、荔枝、小红书。它们的历史记录也全部是自适应。

优点

大幅节省空间提升屏效，同等面积可容纳更多的记录； 全圆角胶囊形式增强了点击感；（关于圆角对点击行为引导的理论依据，可参考以下这篇按钮文章 胶囊聚合的形式让信息层级更明确和聚焦

万字干货！3个维度帮你有理有据做好CTA按钮设计 任何设计师都曾经与 CTA 按钮打过交道。

阅读文章 >

缺点

面积不一致下的布局，在垂直方向无对齐关系，迫使动线水平迁移，查找和区分效率低； 面积不一致，直接导致了点击体验的不一致； 历史词数量较多时，无序混乱感较强 2. 双列布局

使用这种布局的竞品不多，头条、百度、知乎和西瓜，都使用了双列布局。

优点

一家人就得整整齐齐嘛，相比自适应，双列布局视觉秩序感高，在数量较多时也不会产生混乱感； 明确的对齐关系，引导动线垂直扫视，查找和区分效率高； 每个搜索词占据近半屏的空间，面积足够，点击体验爽歪歪； 所有搜索词点击体验一致 缺点

搜索词限定了固定宽度，空间利用率较低、屏效较低，这一问题在搜索词字符宽度很少时尤为明显； 因为容器的缺失，信息聚焦性和层次明确性不如胶囊 3. 单列布局

与我们浏览器产品对标的行业内竞品中，并未出现过单列布局。

但有意思的是，这种布局存在于一些典型的社交型应用中，比如前年 9 月份全量上线搜一搜功能的 微信 、再比如 qq 和微博，都是单列。另外，抖音的搜索历史也是单列布局。

优点

搜索词列表式排开，秩序感高，较多数量时无混乱感； 每个搜索词占据全屏宽度，面积宽阔，点击体验那是相当得爽； 所有搜索词点击体验一致化； 空间足够，删除的操作可直接外显前置，减少删除操作成本 缺点

限定了全屏固定宽度，空间利用率贼低，屏效贼低； 信息聚焦性和层次明确性不如胶囊 到这里，可能你跟我有一样的困惑。一个简单的搜索历史，为什么不同的产品使用了不同的布局？布局和产品本身有哪些关系？到底什么情况下适合自适应？什么情况适合双列？什么情况适合单列？

别忽略它们，把所有困惑列下来，然后尝试各种办法去思考，去解决。多问为什么，是培养设计师洞察力的绝佳手段。

首先，任何表现层的设计手段归根结底都可源自两类诉求：业务诉求和用户诉求。搜索历史偏向用户侧的体验，这里我选择从用户进行切入，也许可以发现一些东西。

三、关于用户分层 体验设计 中有个概念叫用户分层，即便是同一个页面，我们也需要去细分不同的场景对用户做分层，为不同的用户做设计。

比如很多产品的首页，之所以普遍是“搜索+品类+推荐”结构，也是基于用户分层的设计。

用户来到首页后，可以大致分为浏览型和目的型两类。前者没有明确目标，随便逛逛，因此产品可以通过算法进行模块化精准推荐；后者有明确的目的，知道自己想要什么，因此产品可以通过提供搜索和品类入口，帮助这类用户定点查找。

而目的型用户在进行了搜索这个行为后，便生成了搜索历史。因此，我们可以通过挖掘用户搜索行为背后的目的，来分析为什么使用不同的布局。

四、搜索行为背后的目的 我发现用户进行搜索时的目的，大概可以细分为以下三大类：购买决策型、内容消费型和答疑解惑型。

1. 购买决策

这类动机的用户基于自身对某类物品、服务进行购买的动机，产生了搜索的行为。

比如我想去点个外卖、买个衣服。这里的第一步，就是去搜索，筛选出符合我预期的内容。

① 搜索内容

通常是某类具象的名词，比如粥、火锅、串串香、球鞋等，或者店铺名。

② 对应产品

所有的电商类、生活服务类的应用，如淘宝、京东、美团、饿了么等等。

③ 布局分析

我发现这类产品基本全使用了自适应布局，为什么呢？

购买决策型的搜索内容基本对应了具象名词，通常字符数较少。所以采用自适应能够保证极高的空间利用率。如果采用双列或者单列的布局，会存在明显的空间浪费、降低屏效、影响其他内容的曝光。

购买决策型的用户，场景上偏高愉悦场景。高愉悦场景下，我们更倾向于“浪费”时间。

比如我们在点外卖、刷淘宝，猎物酬赏往往会让我们沉浸其中不可自拔，忘记时间的存在，等意识过来时，发现已经过去大半个小时。（这里的猎物酬赏即我们在搜寻过程中接触到的源源不断的有价值的信息，关于上瘾模型可以看这篇文章：

万字读书笔记！产品设计宝典《上瘾》全面解读！（上） 为什么人们每天都会刷朋友圈、刷抖音，而且一刷就是几个小时，根本停不下来？

阅读文章 >

万字读书笔记！产品设计宝典《上瘾》全面解读（下） 《上瘾》这本书从大量的实验案例调研中，总结出那些让用户上瘾的产品设计原则，最后提炼出了一个让用户上瘾的模型，读完以后，真的恍然大悟，原来习惯类的产品需要这么设计。

阅读文章 >

映射到现实生活中，就好像我们平日里去琳琅满目的商场、超市购物，有充足的时间慢慢得精挑细选、货比三家。

所以，购买决策型的搜索场景不会追求高效，用户对历史词快速查找和使用的诉求相对较低。即便自适应布局降低了效率，负面影响偏低。

2. 答疑解惑

这一类内容基于用户对某类问题的解决诉求。

① 搜索内容

通常以 5w1h 的句式呈现，比如「南京公积金怎么提取」、「凡尔赛是什么意思」、「为什么会失眠」等等。

② 对应产品

浏览器产品、知乎

③ 布局分析

这类产品为什么基本都使用了双列布局？

搜索词通常遵循 5w1h 类型，字符往往较长（包含搜索联想词） 答疑解惑型的搜索内容，通常对应着用户背后遭遇的问题，没有人希望自己的生活被问题填充和缠绕，所以绝大多数的问题，背后都裹挟了「我想尽快解决！」的诉求。 因为从场景愉悦度上来看，这类场景对应着低或中愉悦场景。此时，用户对时间的敏感度高，倾向于追求高效、节约时间。（当我们去尝试解决一个现有痛点、难题、困惑时，本能得渴望减少耗时）

并且，如果问题一直无法得到解决，较易出现急切，沮丧，挫败等负面情绪，所以，我们会经常基于之前输入的历史词进行反复的修正和尝试，直至耐心消失殆尽。

而双列这种稳如老狗的布局，以垂直动线加速用户对历史词的的查找使用（数量较多时也不会出现混乱感），足够高效。而且，足够的空间也符合较长的字符宽度。因此双列布局是答疑解惑型搜索的不二之选。

绝大多数的浏览器产品，都采用了双列这一布局。因为浏览器给用户解决问题的属性已经深入心智，根据搜集的一些用研资料，答疑解惑型搜索在浏览器中也占据了最高的比例。知乎虽是内容型产品，但主要功能也给用户是答疑解惑，因此也采用了双列的布局。

看到这里，你可能会问，单列也满足条件啊，为什么很少看到单列的？没错，单列布局虽然也能符合这些要求，但是，它最大的缺陷就是：太特么占空间了。

同等面积下，双列能显示 12 个历史词，单列只能显示一半。最关键的是，产品还需要通过加塞实时热搜、搜索热榜这些玩意儿盈利。所以，商业价值的驱使下，单列布局的场景基本很少。

3. 内容消费

这一类型的动机基于对某类内容的消费动机。

① 搜索内容

通常是某类抽象名词，比如某某话题、某某事件、某某资源等等，它们通常对应着内容创作者。

比如「王思聪土味情话」、「建党一百周年」、「苏州酒店坍塌事故」等等。

② 对应产品

主要为内容、社交型产品，比如各类新闻资讯、短视频类产品、简书、喜马拉雅、微博、微信（搜一搜）等等。

③ 布局分析

这类产品的布局基本会有两类，一类是自适应，另一类是单列。

内容消费和购买决策本质上都属于“消费”范畴，只不过前者是内容、后者是需要付费的实物。它和购买决策一样，都属于高愉悦场景，而且由于内容的即时性和形式的多变性，引起的愉悦感往往要更加强烈。所以，自适应同样是合理的布局。

但是单列布局呢？

前面有说过，单列布局的体验比肩甚至优于双列，但最明显的缺憾就是太占空间，而空间向来是业务的必争之地。因此，单列布局的使用场景和具体业务相关。

比如业务需要确保其他搜索模块（如热搜、个性化搜索推送等）的曝光，那么是否可以允许这些搜索模块前置，让搜索历史作为一个单独页面，触发搜索框的聚焦后，和软键盘同步唤起。比如微信和 qq。

再比如是否允许减少历史词露出数，来达到搜索模块和历史词共处一页的目的，减少跳转，比如微博和抖音。

五、使用场景总结 1. 自适应布局

适用于购买决策型、或者内容消费型的搜索场景，此类场景下搜索词较短，且用户对历史词快速查找和使用的诉求相对较低。常见于电商、生活服务类产品。

2. 双列布局

双列布局，适用于答疑解惑型的搜索场景，此类场景下搜索词较长，且用户对历史词快速查找和使用的诉求较高。常见于浏览器产品，或者知识问答类产品。

3. 单列布局

单列布局，适用于内容消费型的搜索场景，此类场景下搜索词较长，因占据较多空间，需要视具体业务情况使用。

最后 以上，就是「搜索历史」在不同使用场景下的研究。

其实，不论是多小的细节，我们设计师都可以基于用户和产品两类角度，通过不断得自问「为什么？」，来挖掘背后的逻辑，以让我们的设计有理有据。不但帮助我们更顺利得过稿，也可以提升我们的洞察力和专业水准~

希望这篇干货对你有所帮助。

欢迎关注作者微信公众号：「Andrew的设计笔记」

今天从 10 个维度，聊聊 Instagram 这款软件整体的设计与体验那些值得学习的地方。更多关于 Instagram 的干货：Instagram 的视觉美学是如何覆灭的Instagram 如今的注册用户已经超过 10 亿，它创立了一种非常独特的风格：明亮的墙壁，巧妙摆放的拿铁咖啡和牛油果吐司，以及一切带有千禧...

今天从 10 个维度，聊聊 Instagram 这款软件整体的设计与体验那些值得学习的地方。

更多关于 Instagram 的干货：

Instagram 的视觉美学是如何覆灭的 Instagram 如今的注册用户已经超过 10 亿，它创立了一种非常独特的风格：明亮的墙壁，巧妙摆放的拿铁咖啡和牛油果吐司，以及一切带有千禧粉色调的事物，所有这些都是呈现出一种精心设计感，通过滤镜和色彩校正之后，看起来极具视觉美感。

阅读文章 >

一、Logo 的变化 下图是关于 Instagram 的从 2010-2022 整个图标变化的过程，从中能发现：

图标从拟物的风格慢慢变成扁平的风格。 从具象的相机变成更加简约线形的相机图标。 颜色越来越艳丽、明亮，给人年轻、炫彩、简约的设计感受。 从 logo 的变化中能看出页面将从拟物的时代跨进了扁平时代，也能折射 Instagram 界面必将是往极简、炫彩的方向走。

二、图标设计 我重新临摹 Instagram 启动图标，发现里面有许多的设计小知识点值得学习。

例如：图标背景颜色有黄色、红色、紫红色、紫色，相邻的两个颜色互为邻近色，使得绘制出的背景自然而炫彩，非常不错的设计，渐变的融入也很自然。

当我们自己做渐变的图标背景时可以用两两相邻的颜色，让渐变融入的更自然。

三、颜色的规律 明显的发现 Instagram 颜色跟色谱的规律一致，颜色从左到右色相的变化值在 50 度左右，4 种颜色都是用的高饱和度、高明度的色彩，非常艳丽、明亮，利用渐变附在英文上做出英文版的 logo。

iPhone 14 的字体渐变也是用的这种方法，利用两两邻近的颜色来做渐变。连苹果、Instagram 都在用，赶紧学起来吧，你也可以的～～

四、圆角的设计 通过自己仔细的观察发现 Instagram 摄像头图标圆角是带有平滑过度的圆角，和普通的圆角不一样。 平滑圆角给用户的感受会更舒适、平滑、有活力，而普通的圆角显得更加生硬、不自然。 苹果的主题图标都是带有平滑过度的圆角而不是一个普通圆角，使得图标显得更加自然。 可以去看看之前原研哉帮小米设计的 logo，会发现他们的 logo 给人干净会更加有活力、生命力，而不是使用这种普通圆角，而是一种平滑过度的圆角～

关于苹果圆角的详细介绍：

圆角矩形为什么能成为设计趋势？高手给了这篇深度分析！ @Daidai丶呆 ：图形是产品设计中被讨论得最多的元素之一。

阅读文章 >

五、主界面的分析 从 Instagram 的启动页面看出，Instagram 追求的是简约、突出品牌色的方向。 主界面主要以用户发的图片为主而不是文字，往往图片比文字更容易产生阅读与反馈。 整体的界面简约、素白，图标都是统一用黑色线条的描边。 当自己关注的用户，发了一些视频，头像上附带 Instagram 的品牌色的圆形，在白色的界面用品牌色进行了点缀，让单调的界面更具有识别性。

六、界面布局分析 Instagram 的发现页面做的很不错，我重新绘制了这个页面，发现系统想推送给你的图片或者视频会做等比放大 2 倍处理，一屏显示图片或者视频至少有一个最大显示，给用户的感受是有主次。同时开发也能很好实现这种布局，具有一定的规律性。

七、轮播点的设计体验 在 Instagram 界面当用户发的图片超出 5 张时，图片下方的轮播点会出现变化，有大有小。

我重新绘制了一个用户发的 7 张图片的示例，当用户在左右滑动图片时，轮播的点会跟着动，同时会有大小的显示，暗示用户后面或者前面还有多张图片，有近大远小的感觉，非常细节的设计。

八、设计的细节 在 Instagram 的用户界面，视频、多张图片、单张图片和置顶 4 种状态右上角有个图标的标识，让用户清晰知道图片的内容状态，提前给用户有个心理预期与区分。 当用户点击进去类似抖音的布局，可以进行上下滑动切换视频内容，双击可给该视频点赞，整体的体验很丝滑，没有任何的卡顿与拖沓。同时界面图标用线性的形式，布局统一、和谐。

九、图标风格 Instagram 整体的图标设计是线性的图标，线性图标给人的感觉是可点击、可操作的，同时感觉简洁明快的气质。图标的统一让每一个界面的视觉感受都是一致的。

十、经典界面 这个界面放在你面前可能都会知道是 Instagram 这个应用，这个界面框架已经形成品牌意识。

Instagram 一直没有更改这个布局，非常经典的设计，没有太多花里胡哨的图标与信息，只有简约的线性图标与用户发布的图片，克制的设计。也有很多相机应用、户外广告都借鉴了 Instagram 布局，已经在用户的心智里面了～

总结 越来越多的企业的品牌色往鲜艳的方向走，突出品牌形象。 图片的排版不一定是同样大小的，可以有大有小，取决于更想给用户传达什么。 图标的统一性很重要，当整个 App 的图标风格都一致时，给用户的体验的感受也是一致的。 不断重复一个设计框架、设计组件时，会形成品牌意识，让用户记得你的产品。 感谢大家阅读，希望大家喜欢，后面不断输出好的文章与作品。

今天从 10 个维度，聊聊 Instagram 这款软件整体的设计与体验那些值得学习的地方。更多关于 Instagram 的干货：Instagram 的视觉美学是如何覆灭的Instagram 如今的注册用户已经超过 10 亿，它创立了一种非常独特的风格：明亮的墙壁，巧妙摆放的拿铁咖啡和牛油果吐司，以及一切带有千禧...

今天从 10 个维度，聊聊 Instagram 这款软件整体的设计与体验那些值得学习的地方。

更多关于 Instagram 的干货：

Instagram 的视觉美学是如何覆灭的 Instagram 如今的注册用户已经超过 10 亿，它创立了一种非常独特的风格：明亮的墙壁，巧妙摆放的拿铁咖啡和牛油果吐司，以及一切带有千禧粉色调的事物，所有这些都是呈现出一种精心设计感，通过滤镜和色彩校正之后，看起来极具视觉美感。

阅读文章 >

一、Logo 的变化 下图是关于 Instagram 的从 2010-2022 整个图标变化的过程，从中能发现：

图标从拟物的风格慢慢变成扁平的风格。 从具象的相机变成更加简约线形的相机图标。 颜色越来越艳丽、明亮，给人年轻、炫彩、简约的设计感受。 从 logo 的变化中能看出页面将从拟物的时代跨进了扁平时代，也能折射 Instagram 界面必将是往极简、炫彩的方向走。

二、图标设计 我重新临摹 Instagram 启动图标，发现里面有许多的设计小知识点值得学习。

例如：图标背景颜色有黄色、红色、紫红色、紫色，相邻的两个颜色互为邻近色，使得绘制出的背景自然而炫彩，非常不错的设计，渐变的融入也很自然。

当我们自己做渐变的图标背景时可以用两两相邻的颜色，让渐变融入的更自然。

三、颜色的规律 明显的发现 Instagram 颜色跟色谱的规律一致，颜色从左到右色相的变化值在 50 度左右，4 种颜色都是用的高饱和度、高明度的色彩，非常艳丽、明亮，利用渐变附在英文上做出英文版的 logo。

iPhone 14 的字体渐变也是用的这种方法，利用两两邻近的颜色来做渐变。连苹果、Instagram 都在用，赶紧学起来吧，你也可以的～～

四、圆角的设计 通过自己仔细的观察发现 Instagram 摄像头图标圆角是带有平滑过度的圆角，和普通的圆角不一样。 平滑圆角给用户的感受会更舒适、平滑、有活力，而普通的圆角显得更加生硬、不自然。 苹果的主题图标都是带有平滑过度的圆角而不是一个普通圆角，使得图标显得更加自然。 可以去看看之前原研哉帮小米设计的 logo，会发现他们的 logo 给人干净会更加有活力、生命力，而不是使用这种普通圆角，而是一种平滑过度的圆角～

关于苹果圆角的详细介绍：

圆角矩形为什么能成为设计趋势？高手给了这篇深度分析！ @Daidai丶呆 ：图形是产品设计中被讨论得最多的元素之一。

阅读文章 >

五、主界面的分析 从 Instagram 的启动页面看出，Instagram 追求的是简约、突出品牌色的方向。 主界面主要以用户发的图片为主而不是文字，往往图片比文字更容易产生阅读与反馈。 整体的界面简约、素白，图标都是统一用黑色线条的描边。 当自己关注的用户，发了一些视频，头像上附带 Instagram 的品牌色的圆形，在白色的界面用品牌色进行了点缀，让单调的界面更具有识别性。

六、界面布局分析 Instagram 的发现页面做的很不错，我重新绘制了这个页面，发现系统想推送给你的图片或者视频会做等比放大 2 倍处理，一屏显示图片或者视频至少有一个最大显示，给用户的感受是有主次。同时开发也能很好实现这种布局，具有一定的规律性。

七、轮播点的设计体验 在 Instagram 界面当用户发的图片超出 5 张时，图片下方的轮播点会出现变化，有大有小。

我重新绘制了一个用户发的 7 张图片的示例，当用户在左右滑动图片时，轮播的点会跟着动，同时会有大小的显示，暗示用户后面或者前面还有多张图片，有近大远小的感觉，非常细节的设计。

八、设计的细节 在 Instagram 的用户界面，视频、多张图片、单张图片和置顶 4 种状态右上角有个图标的标识，让用户清晰知道图片的内容状态，提前给用户有个心理预期与区分。 当用户点击进去类似抖音的布局，可以进行上下滑动切换视频内容，双击可给该视频点赞，整体的体验很丝滑，没有任何的卡顿与拖沓。同时界面图标用线性的形式，布局统一、和谐。

九、图标风格 Instagram 整体的图标设计是线性的图标，线性图标给人的感觉是可点击、可操作的，同时感觉简洁明快的气质。图标的统一让每一个界面的视觉感受都是一致的。

十、经典界面 这个界面放在你面前可能都会知道是 Instagram 这个应用，这个界面框架已经形成品牌意识。

Instagram 一直没有更改这个布局，非常经典的设计，没有太多花里胡哨的图标与信息，只有简约的线性图标与用户发布的图片，克制的设计。也有很多相机应用、户外广告都借鉴了 Instagram 布局，已经在用户的心智里面了～

总结 越来越多的企业的品牌色往鲜艳的方向走，突出品牌形象。 图片的排版不一定是同样大小的，可以有大有小，取决于更想给用户传达什么。 图标的统一性很重要，当整个 App 的图标风格都一致时，给用户的体验的感受也是一致的。 不断重复一个设计框架、设计组件时，会形成品牌意识，让用户记得你的产品。 感谢大家阅读，希望大家喜欢，后面不断输出好的文章与作品。

最近 AI 绘画有一种越来越火的趋势。近段时间，无论是朋友圈，还是一些社群里，亦或是知乎首页出现的话题，都有不少讨论 AI 绘画的情况。在惊叹于 AI 作品的精美时，还有更多人表达了对 AI 绘画的害怕和焦虑，担心是否会失业。

最近 AI 绘画有一种越来越火的趋势。近段时间，无论是朋友圈，还是一些社群里，亦或是知乎首页出现的话题，都有不少讨论 AI 绘画的情况。

在惊叹于 AI 作品的精美时，还有更多人表达了对 AI 绘画的害怕和焦虑，担心是否会失业。

知乎上有不少相关的话题

最近在用一款 AI 绘画软件——「即时 AI」。一开始是想体验，后来确实是“上瘾”，现在属于几乎每天都会去研究描述词然后去「即时 AI」里反复调试。

所以先说一下结论：放心，AI 绘画不会让你失业，但真的会让你“上瘾”，成就感也相应的很强。我想体验过 AI 绘画的人应该都有过这种状态。

选中「即时 AI」，一开始是冲着免费试用而且没有次数限制这一点去的。上手用了两次发现，这不仅是个操作简单、学习门槛很低的新手友好工具，还兼具强大的功能，让更专业的 设计师 们可以尽情发挥想象，创造更惊艳的作品。

简单是真的简单，输入文字点击「开始创作」按钮，几秒钟出图。上一次这么简单的绘画还是在简笔画的课堂上。给大家看看我的 AI 绘画作品，描述词从简单到复杂的看看效果。

先来个简单的，输入文字：海水

效果如下：

加点环境描述，输入文字：冬天，海边

效果如下：

专业一点，输入更多文字描述，和你希望 AI 学习的艺术家风格：

令人惊叹的海洋艺术作品，鲜艳的色彩，获奖杰作，绚丽夺目的美学八分渲染，8K 高清分辨率，Victo Ngai，Kilian Eng，Jake Parker。

效果如下：

这组图出来的时候是被惊艳到了，这个配色和画面的构图，有点国产动漫大片的既视感了。

只有文字描述，对于想要精确内容的人来说可能不够，所以「即时 AI」另一个比较牛的地方就是，支持使用图文描述生成创作，也就是，先画一个草稿，再用文字描述，让 AI 同时参考草稿和文字生成作品。更精准地将 AI 绘画的想象力和天马行空用于自己的创作中，尤其是设计创作。

如果说文字描述让 AI 与你一起自由的探索想象力，「即时 AI」支持图文描述，更像是“约束” AI 在更限定的范围发挥创造力，对于设计师来说尤其具有吸引力，构建基础图像之后，就可以让 AI 替你完成后续的工作。

用「即时 AI」以图绘图

很多人担心 AI 绘画会让自己失业，取代自己。说实话，我自己使用下来的感觉是：AI 绘画技术很难取代个人，反而会是一个很好用的生产力提效工具。

「即时 AI 」 生成复古海报

首先，AI 绘画并没有我们想象中的强大。很多人都知道有一张 AI 绘制的作品在一场数字艺术创作比赛中获得了金奖，但大家并不知道的是，这张图片经历了高达 100 多次迭代，和后期的数多次调整。AI 绘画离不开人，AI 绘画的创造结果本身是基于人这一主体的“创造力”。

获奖的 AI 绘画作品《太空歌剧院》 (图据网络)

其次，能够将 AI 绘画“驾驭”得非常厉害的人很少，或许将来会有一个工种叫做：职业 AI 绘画手，但这些人很有可能本就是艺术专业的，或者在接触 AI 做图前已经具备了极强的绘画能力和艺术鉴赏力。

最后，决定 AI 绘画作品质量的是人，尽管 AI 绘画可以“生万物”，但是只有你头脑思考过、嘴里说出来的那些“描述词”才能够让 AI 绘画更精准地被生产出来，这对于设计这种需要精准和实用的行业来说尤其关键。毕竟，艺术也许没有定论，但设计总要“实用”才行。

所以，我更希望大家去体验 AI 绘画，而不是恐惧它。对于设计师来说，AI 绘画可以提供素材、灵感、设计风格参考、色彩参考等等，是一个很好的辅助工具。

如果你想 0 麻烦快速体验 AI 绘画，那么推荐你试试这个我一直在用的「即时 AI」，几秒出图操作很简单，而且支持中文语义描述，不需要专门找英文翻译软件写英文描述词。

链接放在这里了，复制到浏览器打开并点击安装插件，就可以免费开玩了！

网站链接： https://js.design/pluginDetail

欢迎关注作者的微信公众号：「应谋鬼计」

最近 AI 绘画有一种越来越火的趋势。近段时间，无论是朋友圈，还是一些社群里，亦或是知乎首页出现的话题，都有不少讨论 AI 绘画的情况。在惊叹于 AI 作品的精美时，还有更多人表达了对 AI 绘画的害怕和焦虑，担心是否会失业。

最近 AI 绘画有一种越来越火的趋势。近段时间，无论是朋友圈，还是一些社群里，亦或是知乎首页出现的话题，都有不少讨论 AI 绘画的情况。

在惊叹于 AI 作品的精美时，还有更多人表达了对 AI 绘画的害怕和焦虑，担心是否会失业。

知乎上有不少相关的话题

最近在用一款 AI 绘画软件——「即时 AI」。一开始是想体验，后来确实是“上瘾”，现在属于几乎每天都会去研究描述词然后去「即时 AI」里反复调试。

所以先说一下结论：放心，AI 绘画不会让你失业，但真的会让你“上瘾”，成就感也相应的很强。我想体验过 AI 绘画的人应该都有过这种状态。

选中「即时 AI」，一开始是冲着免费试用而且没有次数限制这一点去的。上手用了两次发现，这不仅是个操作简单、学习门槛很低的新手友好工具，还兼具强大的功能，让更专业的 设计师 们可以尽情发挥想象，创造更惊艳的作品。

简单是真的简单，输入文字点击「开始创作」按钮，几秒钟出图。上一次这么简单的绘画还是在简笔画的课堂上。给大家看看我的 AI 绘画作品，描述词从简单到复杂的看看效果。

先来个简单的，输入文字：海水

效果如下：

加点环境描述，输入文字：冬天，海边

效果如下：

专业一点，输入更多文字描述，和你希望 AI 学习的艺术家风格：

令人惊叹的海洋艺术作品，鲜艳的色彩，获奖杰作，绚丽夺目的美学八分渲染，8K 高清分辨率，Victo Ngai，Kilian Eng，Jake Parker。

效果如下：

这组图出来的时候是被惊艳到了，这个配色和画面的构图，有点国产动漫大片的既视感了。

只有文字描述，对于想要精确内容的人来说可能不够，所以「即时 AI」另一个比较牛的地方就是，支持使用图文描述生成创作，也就是，先画一个草稿，再用文字描述，让 AI 同时参考草稿和文字生成作品。更精准地将 AI 绘画的想象力和天马行空用于自己的创作中，尤其是设计创作。

如果说文字描述让 AI 与你一起自由的探索想象力，「即时 AI」支持图文描述，更像是“约束” AI 在更限定的范围发挥创造力，对于设计师来说尤其具有吸引力，构建基础图像之后，就可以让 AI 替你完成后续的工作。

用「即时 AI」以图绘图

很多人担心 AI 绘画会让自己失业，取代自己。说实话，我自己使用下来的感觉是：AI 绘画技术很难取代个人，反而会是一个很好用的生产力提效工具。

「即时 AI 」 生成复古海报

首先，AI 绘画并没有我们想象中的强大。很多人都知道有一张 AI 绘制的作品在一场数字艺术创作比赛中获得了金奖，但大家并不知道的是，这张图片经历了高达 100 多次迭代，和后期的数多次调整。AI 绘画离不开人，AI 绘画的创造结果本身是基于人这一主体的“创造力”。

获奖的 AI 绘画作品《太空歌剧院》 (图据网络)

其次，能够将 AI 绘画“驾驭”得非常厉害的人很少，或许将来会有一个工种叫做：职业 AI 绘画手，但这些人很有可能本就是艺术专业的，或者在接触 AI 做图前已经具备了极强的绘画能力和艺术鉴赏力。

最后，决定 AI 绘画作品质量的是人，尽管 AI 绘画可以“生万物”，但是只有你头脑思考过、嘴里说出来的那些“描述词”才能够让 AI 绘画更精准地被生产出来，这对于设计这种需要精准和实用的行业来说尤其关键。毕竟，艺术也许没有定论，但设计总要“实用”才行。

所以，我更希望大家去体验 AI 绘画，而不是恐惧它。对于设计师来说，AI 绘画可以提供素材、灵感、设计风格参考、色彩参考等等，是一个很好的辅助工具。

如果你想 0 麻烦快速体验 AI 绘画，那么推荐你试试这个我一直在用的「即时 AI」，几秒出图操作很简单，而且支持中文语义描述，不需要专门找英文翻译软件写英文描述词。

链接放在这里了，复制到浏览器打开并点击安装插件，就可以免费开玩了！

网站链接： https://js.design/pluginDetail

欢迎关注作者的微信公众号：「应谋鬼计」

点线面在用户界面中的应用貌似很少有人写，我挑业余时间进行了大量案例的翻阅分析，发现其中确有规则。首篇万字长文献给你。平面设计篇：平面设计高手教程！

点线面 在用户界面中的应用貌似很少有人写，我挑业余时间进行了大量案例的翻阅分析，发现其中确有规则。

首篇万字长文献给你。

平面设计篇：

平面设计高手教程！全方位解锁「点线面」的运用方法（附实操案例） 本文从点线面的定义、作用、设计方法帮你全方位科普点线面在版式设计中的运用，附上实操案例，基础差的平面设计师，这篇别错过了！

阅读文章 >

前言

用户界面的本质是资源的互换。

用户为产品提供时间和注意力，产品为用户提供单位时间内最大价值的内容。

当视觉设计师介入其中后，他们的关系可以用这样一幅图表示。

表现层作为用户体验五要素的最具象层面，解决的是产品视觉效果的呈现问题。视觉设计师需要借以合理的版式和视觉手段来保障用户在单位时间内获取最多的内容资源，即实现信息的高效获取。

信息的高效获取来自合理的视觉引导（信息阅读的优先级安排）。我们一直在说的层次清晰、低信噪比、沉浸感等视觉体验在本质上其实都属于合理的视觉引导。

借以实现的手段包括我们熟知的卡片、留白、配色、字体层级、图标等等。这些手段庞杂繁多，体系化的建设必不可少，但是漫长的积累沉淀中很容易被其淹没，而且每种手段背后又是什么样的底层逻辑和依据？

为什么卡片让页面层次清晰？为什么面性图标拥有较高的辨识度？为什么步骤条会有横纵之分？...

而点、线、面解决的就是这些内在逻辑问题，在你熟知它们的特性后，绝大多数的设计手段都可以被其解释和串联起来，并且让你的设计决策和设计推导更加有据可依，而不是简单的“凭感觉”。

如果我们将各种设计手段比喻为各类武学外功招式，那么点线面理论就好像吐纳内功，虽为最基础的入门心法，但其对内息的作用影响着所有招式的发挥。

点、线、面与康定斯基

点、线、面理论最早由瓦西里·康定斯基提出，他所著的《点、线、面》一书最早曾作为包豪斯学院的形式课程进行教学。他将所有艺术的形式都归结于点、线和面三种元素的关系。

康定斯基对于点、线、面的独到思想为设计领域产生了极为深远的影响。我们目前最熟知运用到它的的一个领域就是平面设计领域。通过这个理论，平面中所有的元素都可以看作点、线、面三类形态，并且每类形态的存在、变化和结合，都可以为画面传达出不同的样式和风格。

从法学生到顶尖艺术家：抽象先驱瓦西里·康定斯基 瓦西里·康定斯基（Василий Кандинский，格里历1866年12月4日－1944年12月13日），画家和美术理论家。

阅读文章 >

虽然用户 界面设计 和平面设计分属于两个完全不同的设计行业，但点、线、面理论是相通的。

点、线、面浅谈

点、线、面具有普适性、相对性。前文已经讲过，点、线、面这三种形态存在于所有的元素中。不论是哪种元素都可以用点、线、面来表示。并且，点、线、面之间是相对的，并非对元素的纯粹定义。

比如一个界面中的面性图标，我们可以将其看作一个点，当相对于线性图标时，我们又可以将其看作面。如果这个图标和其他图标一起组成标签栏，那这串图标也可看作线。

下面，我将分为点、线和面三大板块，来讲述每类形态基于自身维度所拥有的特性，并如何通过存在、变化来在界面中发挥着各自的作用，实现合理高效的视觉引导。

正文开始。

一、万物自一点始 正如宇宙大爆炸源自一个引力奇点那样，点是万物之源，也是所有元素的基础。点从维度上来说属于零维，它没有办法像线、面那样延伸，这决定了点本身的向心性和自由性。

康定斯基将点描述为“雄辩与沉默”，这句话的意思就是，当点独立存在于一个画面中时，它便开始“雄辩”自己的存在，让自己成为焦点；而当它的数量增加时，点便倾向于“沉默”，并且根据它的排列方式倾向于对应形态的特性。

1. 向心性

当一个点独立存在时，点的向心性协助它成为视觉焦点。此时点主要起到定位的作用。

以支付宝首页为例。在以往的界面设计中，我们往往在每个模块标题旁添加一个小小的短线，而这个小短线便是作为定位点引导用户迅速注意到标题，实现不同内容的快速定位。并且作品包装中也常会用到它。

不过在 Complexion Reduction 去形式化的浪潮洗礼下，这种方式已成为过去式，现在我们会直接用标题本身作为点进行定位。

但是，在其他更多的场景下，仅靠文字其实并不能很好得发挥点的向心性，尤其是一些信息较多、需要迅速辨识的场景下。这时候，我们通常会引入另一种要素——图标来指代它。

图标本身可以用来表意，而独立、精致的特性让它很适合作为点元素来处理。

比如 app 中的标签栏中的图标就可看作点元素，每个图标以其所具备的向心性帮助我们迅速得聚焦到它所在的位置。列表页的每个字段前也会加入对应含义的图标来帮助用户迅速锚定当前栏目，并且由于图标拥有更高的辨识性，这让阅读变得轻快而富有节奏。

下图所示为 Google 日历中的活动页表单，当我们将字段前的图标去除时，阅读没有了强定位元素将会缺失节奏，信息获取变得困难和缓慢，影响用户表单的填写。

2. 聚集性

点是自由、精致的，它不会像线那样有向两端延伸的特性，这意味着它可以进行各种形式、规则的排列组合以契合版面。

① 点化线

在这种分布形式下，点通常以图标的形式进行横向及纵向的排列，并且倾向于线的引导性进行视线引导。

点的横向排列通常见于标签导航栏、单行的金刚区入口等。点的纵向排列通常见于列表布局中。由于点本身对用户注意力的聚焦，点沿着什么方向进行排列时，用户视线便倾向于朝对应的方向移动。

上面所举的 Google 日历就是这样，单个图标方便定位，而多个线性排布的图标则具备了线的引导性，便于用户的由上至下得快速浏览。iOS 自带的音乐 app 和 QQ 音乐的歌单也同样利用了点化线引导浏览，只是图片和阿拉伯数字的区别而已。

② 点化面

在这种分布形式下，点常常横向排列在界面中（一排内通常不超过 5 个），作为一个个快捷入口存在，形成网格式布局。

比如金刚区业务入口、书籍等类型的布局都属于网格式。这个布局下的点集合倾向于面元素，界面在这个布局下呈现出富有观赏性的视觉张力，吸引用户眼球，而且网格式的布局引导用户视线均匀迁移，便于视觉区分。

3. 网格与列表

既然讲到这了，不得不提下上面两种形态各自所在的版式——网格布局和列表布局。

① 关于列表

通常来说，静态页面中的内容大致可分为图、文两大类。

从形态上看，文本本身具有线那样不断延伸的特点，因此列表的横向版面更适合长文本的展示。而图片、图标通常以固定尺寸的 img 独立存在，可看作点元素，像上一节所讲的，它既可存在于列表又可存在于网格。

从视觉动线上看，列表布局的动线属于尼尔森等老前辈所提出的 F 型浏览模式。即用户首先落点于左侧的定位点，再由左向右进行阅读，接着再垂直扫视，当定位到兴趣点后继续由左至右得阅读。这种动线符合人类自然的阅读模式。

并且在由上至下的视线迁移中，用户的注意力势必随着路径的拉长而逐步递减。

而这种递减效应让列表式布局更适合基于产品及用户习惯以某种规律排序。

邮件讯息以时间进行排序，这是基于用户查看最新消息的习惯；电商商品则默认以相关性、销量等因素综合排序（同时买家可以根据价格、销量等进行自定义排序），这是基于用户的购物喜好习惯；直播平台以热度进行排序，这是基于羊群效应制造引流点，同时也刺激用户发布优质内容。并且在特定的排序规律下可以引导用户带有目的的、更迅速得扫视。

但是如果界面变为网格布局，扫视效率将大打折扣，较高的图版率也导致文字信息被过度弱化。

如下图，健身环大冒险并不属于外观型产品，用户更关心的是价格、好评等文字信息，当其变为网格视图时，一方面用户无法根据排序结果迅速垂直扫视，另一方面文字信息被重量级的图片压制，用户无法迅速获取它们。

② 关于网格

网格布局通过牺牲宽度来将界面等分为一个个格子，从形态上直接限制了长文本的存在，这让它更适合放置一个个独立的点，比如图片、图标。而文本则落于底部沦为一介辅助。

从视觉动线上看，网格布局倾向于 Z 型浏览模式。用户视觉动线通常由左至右、再由上至下得进行，并可以“雨露均沾”得在数个点上均匀迁移，注意力递减效应不会像列表布局那么强烈。因此，网格布局非常适合进行不同信息的辨识和区分。

界面中常见的功能业务入口、专辑或者电影的布局、单独店铺中的商品，它们不需要明显的排序处理，并且用户初始行为都是通过图片、图标进行迅速得辨别区分，继而进行交互决策。如果将其列表化处理，不同信息的辨识区分效率将受到影响。

如下图，服装属于典型的外观型商品，当变为列表视图时，商品之间将难以辨识区分。

由此，我们大致可以梳理出两种布局适用情况：

列表：适用于文本为主要展示，或者按照某种规律排序的信息。

网格：适用于图片为主要展示，或者没有排序规则，需要用户通过图片、图标辨识区分的信息。

当然了，这两种布局并非只能选其一，淘宝、京东这类体量庞大的电商平台便为了方便用户习惯，提供了两种布局视图便于用户随时切换以降低决策成本。

另外，它常被作为一类丰富画面层次的手段。当点不再按照横纵方向排列分布时，便可作为图案被用在特定场景的背景中，以降低背景过平过空的感觉。

比如美食杰封面的加载占位图就以与产品相关的各种食材图标随机得组合为图案，饱满的画面减少了用户等待时的枯燥无味。而 QQ 的群发布功能，在首个卡片背景中便加入了各种学习类的图标随机分布在卡片上，烘托出热闹趣味的氛围，和下面的三个次要功能从卡片背景上迅速拉开层级。

二、线

线条是一种简单、轻盈的存在，可以看作是点受外驱力作用下的运动轨迹。它从维度上来说属于一维，不同的外驱力结合使得线可以沿着任意方向自由得延伸，从而让它拥有了高效的引导性、分割性和造型性。

康定斯基在书中以温度去定义线的情感，他将水平线定义为无限冷能的表现形式，将垂直线定义为无限暖能的表现形式。看似晦涩难懂，但联系到现实生活就相对容易理解一点。

现实生活中的水平线通常存在于地平线中，因此给人的感觉是稳定、平和，类似非启动时的“冷”态；而垂直线常见于那些从基线建造、生长的事物，比如高楼大厦、参天巨木，它们都通过能量来实现垂直方向的高低变化，因此给人的感觉是上升、下落、变化等感觉，类似启动后的“暖”态。

而线具备的冷暖态决定了水平和垂直线发挥各自作用时所传达的感受。

1. 引导性

线可沿任意方向延伸的特点让它具备了很强的引导性。界面中最常见的就是跑步、地图类 app 中的路线显示，就是通过线的引导性来显示起点到终点所行进的轨迹。

如果我们将起点和终点对齐归于一条线上时，便可以通过降维的方式将其缩减至单个维度。

时间维度可以引申到界面中的时间轴、步骤条、加载条和音视频中的进度条等，这类维度通常需要加入点元素，通过点的向心性辅助定位。空间维度则引申到滑动页面时出现的滚动条等。

如上文对温度的解释，“暖”态的垂直线象征变化。当我们希望用户能够感知到时间的变化，或者流程需要花费较长时间时，垂直线相对来说是个更好的选择。

比如外卖、快递的订单进度，火车的停靠站点时间，timeline，到账时间等信息，要么需要传达变化感，要么费时较长，因此适合以象征变化的垂直线来进行引导，给予用户变化感、产生需要等待的心理预期。

“冷”态的水平线象征静止。当我们希望用户能够沉浸在这个流程中，感知不到时间的变化，或者流程时间极短时，那就更适合用水平线。

比如 airbnb 申请成为房东时，会有个需要用户即时填写的分页表单，为了让用户沉浸在填写中，同样以水平线作为它的进度反馈，降低时间变化感。

比如美团买药后的审方页，药师的审方进度是即时性的，通常只需等待十几秒即可。水平的静止感能够让用户产生“当前正在发生”的感觉，避免让用户产生需要等待较长时间的心理预期而离开当前页面。

但是，如果我们将美团审方的进度条改为纵向（去除文案提示），给用户带来的感觉也就大不相同。

下文讲到的分割性也可以以冷暖态来解释。我们希望用户能够专心阅读信息，因此会尽量避免容易带来变化感的垂直分割线。即便迫于信息的划分需要不得不用到，也会尽量降低它的明度和长度。

另外，界面中往往也存在着一条无形的线，它同样也是起着重要的引导作用，只是这类线不仅仅作用于某个特定模块，它还可以作用于整个界面。这条线通常被称作 视觉动线。视觉动线在网格与列表那一节中简单提了下，只是这部分体系太过庞大，后面有时间我会单独写一篇。

2. 分割性

很多时候，界面中仅仅以留白进行分隔时，很容易造成信息无法被明确得划分。这时我们往往需要引入额外的形式进行辅助。比如分割线。

分割线通常运用在模块内部信息的分割，虽简单粗暴，但并不能应付更高层级的模块分割。而模块之间的分割通常以面性（分割条）来进行。留白、分割线和分割条三者的分割层级由低到高，通常需要在页面中结合使用。

需要注意的是，线面的分割形式需要尽可能得轻量化，一旦拥有了视觉重量很容易成为噪音，我们需要尽量避免信噪比过低对用户阅读体验的破坏。

为了增加页面的呼吸感，我们很多时候会用留白这种最为轻量的分割方式代替所有的线、面。

这类大留白的特点往往与 Complexion Reduction 风格相结合，视觉上不仅制造一种舒适的简约感和呼吸感，也减少了页面中线面分割形成的视觉噪音。

Complexion Reduction 最早源自 Airbnb、Instagram、Medium 等产品的页面改版，而后被 UX 设计师 Michael Horton 所总结出的设计趋势。苹果在 17 年所发布的 ios11 同属于这个风格，这类风格最突出的三个特征就是大标题、面性图标和克制用色。

但是，这种去形式化的分割方法并非适用于全部页面，一般只有在页面模块单一、信息单元字段较少、或者以图片本身作为分割方式的页面才适合使用。

比如 ikea 和 airbnb 的首页，它们并不像京东、支付宝有庞大的体量和业务需求，所以很适合全留白的方式。这让它们的首页看上去非常干净清爽，富有呼吸感。

不过，在其他字段信息繁多的界面中，分割线依然是一种高效的分割方式。

我们可以看到，IKEA 和 airbnb 的详情页依旧选择了分割线的分割方式以应对繁多的字段信息，避免全留白带来的层级混乱。

3. 造型性

线本身可以沿任意方向自由延伸，形成一条曲线、折线、螺旋线等等。而当线的首尾相连时，便可以勾画出面。

但是，线的闭合性所形成的面仅仅是一具没有量感的空壳。但同时线条本身轻盈的特性让其更加轻量、通透，因此对于一些辨识要求较低、或者需要被弱化的元素来说往往是个不错的选择。

界面中最常见的运用就是幽灵按钮和线性图标。

相比于面性按钮和图标，量感的缺失让其无法在辨识性上胜出，但是在其它地方也各有所长。

幽灵按钮常用于一些次按钮、未选中态以及 tag，线性图标常被用于一些次要功能、未选中态以及装饰。

当然，线面也可以根据产品自身需求作类别区分。

比如支付宝和美团这些产品，工具型图标全部线性，而业务型图标全部面性。并且线性图标得益于背景主色色块的反白加成让它们并不会被过度弱化。

4. 虚线

虚线是点化线的最简易的表现。

但是因为虚线本身断开的地方太多了，并不适合用于常规信息的分割，它通常适用于一些特定的场景。

比如一些产品中的票券、账单这类特殊场景中，通常会加入虚线进行信息的分割，就是为了映射模拟现实世界中便于撕开的撕票线来增加代入感，减少认知负荷。

虚线另一个特性是不可见性。

这个特性最早可追溯至建筑、机械等行业的制图规范中——以同等点元素所构成的虚线代表对象视觉盲区中的棱边线及轮廓线。

一些漫画或动画作品中当一个东西突然不翼而飞时，往往会留下一个虚线的轮廓。

这种有意思的设定也被设计师引用到了用户界面中。

比如当我们想让用户去上传一个图片时，往往会采取一个虚线的矩形结合按钮进行引导，便是为了告诉用户：嗨这块地还是空的，快来加点料！

比如 Pinterest、dribbble 以及 AntD 的图片类 upload 组件，都采用了这种设定。

另外，这种形式也适用于空状态的表示，比如 dropbox。

三、面

面可以看作是线的运动轨迹，可以由一个闭合的线生成，也可以由点、线强化自身而来。

1. 点线面的临界问题

康定斯基在书中曾讲到，线的强化加粗，与点不断增大面临同样的问题，即与面之间的临界。

这句话的意思就是，当点、线通过强化自身的面积、宽度后，和面的界限开始模糊，从而具备了面本身的性质。

比如 ios11 中让人印象深刻的大标题，便是由通过增加每个点的面积（增加每个字的字号），以及笔画的线宽（增加每个字的字重）来趋向于面，以营造出饱满、冲击的视觉张力。

2. 辨识性

面二维的属性让它可以向四周无限得扩张自己的领土，这个优势让面可以轻松承载各类信息，并且也让它具备了绝佳的视觉张力。

在一个点线面同时存在的画面中，人眼优先注意到的必定是拥有绝对视觉张力的面元素。这意味着面拥有着远胜于前两者的辨识性，或者说，在一部各类元素参演的戏剧里，面更擅长主角。

比如在一个放置了文字的界面中，我们希望其中一段比较重要的文字完全和其他文字区分开，也就意味着这段文字需要进行对比。

我们可以对这段文字加粗、加入颜色等等，这的确能做出一些明显的变化。但是仅仅是对字体本身的强化，一旦界面需要划分层级，就会显得很“平”，造成信息关系的暧昧。

不过，当加入一层淡淡的色块充当文字背景后，便可以制造出极为明朗的层次关系。一方面，这段文字神奇得与其他信息迅速孤立开来，另外，有面作为“靠山”让它变得稍微与众不同，并且相比其他文字能被更快得注意到。

当然，如果你觉得它很重要，那你可以增强文字与背景的颜色对比，给面加入各种各样的颜色。

而当颜色对信息可读性造成影响时，为保证信息的顺利辨识，我们不得不对文字进行反色处理，以此作为视觉落点来强制用户迅速注意到它。这就是我们熟知的反白视觉手段。

面的这种强力属性被用到了界面的方方面面，比如按钮和图标。

① 关于图标

相比前面所讲的线性图标，面的辨识性让面性图标可以更快得被识别。因此，界面中一些重要的业务入口通常都以醒目的面性图标存在，并且常以面性图标代表激活、选中时的状态，线性图标代表未激活、未选中时的状态。

不过线性图标薄弱的辨识性并非完全适合标签栏状态的切换。

用户在选中到当前页时，并不代表其他页面彻底弱化了，用户同样需要关注其他未选中的页面。

正因如此，ios11 中所有未选中的 icon 全部由线性更改为了面性。同样的，国内的简书、天猫等产品也进行了图标的改版以提升其他页面的点击率。

② 关于按钮

对于按钮，面的辨识性为它的层级使用提供了更多可能。

如下图，按钮从样式上来看大致有六种样式，深色、浅色、浅灰色、幽灵、文字和图标按钮，其中面性按钮就占了一半。相比幽灵、文字和图标按钮，三种面性按钮都以面的强辨识性引导用户迅速注意到它。因此面性按钮相对对应更高的层级。

当页面中存在多个功能按钮时，就需要以样式进行主次之分。深色按钮以强烈的颜色对比制造吸引力，因此常以深色表达层级最高的主按钮，而次按钮通常对应层级较低的浅色、浅灰色等样式。

当页面中没有主次功能之分时，按钮的样式通常取决于当前的用户场景及业务需求。

比如知乎的答案详情页面，答主关注按钮是浅灰色样式，就是为了引导用户沉浸在内容中，避免深色样式对阅读造成干扰。而答主个人页的关注变为深色，则是由于用户点击答主头像的行为来自了解更多的动机，即用户对其产生了特定兴趣，在此场景下使用深色样式便是为了引导用户采取社交行为。

另外按钮圆角的转化也是为了强化信息的聚焦。关于圆角的内容可以去我的前一篇文章里面有更详细的讲解。

万字干货！3个维度帮你有理有据做好CTA按钮设计 任何设计师都曾经与 CTA 按钮打过交道。

阅读文章 >

app store 同理。商品列表页的按钮一致以浅灰色样式表达，而详情页使用了深色。

我们在按钮样式的选择上，务必需要考虑到当前的用户场景，避免过低的信噪比而影响信息的传达效率。

比如 app store 列表页中，用户的场景是非特定的浏览行为，如果使用深色按钮将会让其成为视觉焦点，强制用户不断注意到它，致使其成为“噪音”，影响用户对有效信息的获取。

3. 承载性与分割性

面无限延展的属性让它可以承载各类信息。包括文字、图片或视频元素，异或是元素自由组合所形成的信息单元。

并且我们仅加深界面的背景色，就可以基于面的分割性，通过控制模块间距实现区域的划分。（这里的间距即我们熟知的分割条）

但这种文字墙一般平铺式的布局并不能更好得反映当前模块所在的层次，或者从用户认知上说它们倾向于一个层面上。而且直角矩形的四个顶角所形成的四个焦点，也让用户的视线倾向于发散而非聚焦。直到卡片的出现，问题得以顺利解决。

4. 卡片式设计

卡片在我们生活中随处可见，信件、名片、便利贴、甚至是我们的手机屏幕，它们从形态来说都属于面，并且都充分利用了面的承载性来充当一个收纳信息的容器或载体。

信件收纳来信人的寄语，名片收纳对方的个人信息、便利贴收纳事项清单、屏幕收纳用户界面。而且它们方便携带，我们想要知道更多，打开它即可。

2012 年 I/O 开发者大会中，随安卓 4.1 系统一同惊艳亮相的 Google Now 首次将卡片展示在了用户界面中。

这种后拟物时代的设计不仅一改 Google 以往混乱的信息展示问题，而且熟悉的拟物感收获了足量用户的喜爱。初尝甜头之后，Google 将卡片应用到了所有的产品，并且将其作为基础元素列入了一门伟大的设计语言中——material design。

你可以在 material design 中更系统得看到，google 通过为界面添加了 z 轴（海报高度），来拟物映射生活中的一张张卡片。并且通过阴影的浓淡反应卡片所在的高度，通过不同的高度实时反映当前元素的层级关系。

而在 ios11 中，改版后的 app store 也使用了大量的卡片进行排列组合，形成格外的清晰的页面层次引导用户的视觉动线。

相比原本平铺直叙的信息，卡片式设计通过以下优点让其风靡设计界——

① 更高效得获取信息

每张卡片都是一个独立的面。从面的辨识性上说，独立和聚焦的特点让卡片与其他内容形成天然的断层，更易形成视觉焦点。

从面的分割性上说，卡片通过牺牲屏幕空间（四周的块外距）的方式让区域的分割相较分割条更为明确，清晰的层次关系便于用户迅速辨识和获取信息。

比如改版后的支付宝，通过引入圆角卡片来引导用户更好得留意到下方的各类生活服务，以实现向生活服务数字平台的转型。

② 更轻量的入口跳转

每个卡片除了承载信息外，都可以作为单独的入口承载内页的所有信息，并且卡片的属性让内页的展示变为了展开而非跳转。

比如 app store 点击卡片后，便以非线性的展开动画呈现所有内页信息，返回则只需下滑手势即可，轻量而有趣。

③ 更多的交互手势

卡片独立的特点让它可排列也可堆叠，这为页面带来了更多的交互方式。

我们可以通过左右滑动（scroll）解锁横向更多的空间，也可以左右轻划（flick）形成类似 tinder 那样新的产品机制。

比如知乎的书架引入滑动手势展示更多内容，轻划手势切换问题卡片。

④ 更舒适的视觉观感

卡片基于自身独立的特征让它成为网格布局的常用载体，富有观赏性的视觉张力让页面更加吸引眼球。

当然，卡片并不是通用的，原本可以靠留白或分割线分割的信息，如果为了视觉效果硬是卡片化处理，就会导致阅读的低效，而且浪费空间。

比如常见的一些 feed 流，相比卡片，这类同类的信息流更适合以列表来帮助用户迅速得扫视，并节省页面空间。

⑤ 卡片的嵌套和分割

产品的功能并非完全互相剥离的，很多时候存在包含和平行的关系。

这两类关系分别可以以卡片的嵌套和分割进行处理。前者通过卡片堆砌表达信息的包含关系，而后者则通过视觉分割所形成的点击域传达信息的平行关系。

比如天猫点评页中的金香蕉好物推荐，每个卡片承载了商品信息以及点评信息，通过卡片的嵌套表示出两者的包含关系。而单条推选理由及入口的引导属于平行关系，因此采用了视觉分割来进行划分。

并且前者跳转的是点评详情，后者跳转的页面中包含了所有点评、商品推荐以及我要点评，因此在后者所属的面中加入了淡淡的一层业务主色来强化它的地位。

在支付宝改版后的卡包页中同样进行了一次嵌套处理，以更好得容纳不同的业务并传达各自所在的层级，并且以尺寸和颜色对比进行业务区分。

京东金融的付费业务卡片中存在两个平行关系的功能，因此以分割线形式进行了区域的划分。

同时，它利用了颜色进行了有效的视觉及情绪引导：黑色背景进行反白处理将其作为一个单独的视觉落点，强制用户注意到这里，并且又传达了付费用户所尊享的高级感。

四、苹果是如何改头换面的 自从 ios7 转型扁平后，线元素在苹果设计语言中一直占有重要地位，线自身的纤细、轻盈感可以迅速打造 apple 独有的轻量调性，不仅是按钮、图标的样式，字体本身也更加倾向纤细的字重。

但是，这个僵局在 ios11 发布的那天被彻底打破。

2017 年 6 月 6 日，苹果设计师乔纳森仿佛和线有了隔夜仇一般，从解锁页面到原生应用中，原本 ios10 中曾经被大量使用的线元素基本全部被面元素取代。

比如锁屏页面，所有拨号按钮全部由幽灵样式改为了面性样式，而数字字重的变粗也是一种化面的倾向。这使得按钮及文字更易辨识，并且降低了线圈所产生的视觉噪音。

app store 中也同样发生着形态的易主。

你可以在下图中看到，原本的幽灵按钮全部改为了浅灰色面性按钮。用于划分信息的分割线明度也得到了克制。

另外，11 代中众所周知的大标题同样也可以看做化面的倾向（通过增加自身的面积），强烈的视觉张力引导用户迅速得进行辨识。

另外，所有的数字全部提至文字的前方，基于用户由左至右的动线更突出产品自身，以点化线的形式更好得引导用户进行扫视。

追求极致的苹果显然不能容忍 tab 中未选中态下出现的线元素，你可以在 ios13 中看到，线元素得到了彻底的消除，并且颜色一并得到了克制，再次提升了阅读内容的沉浸感。

ios11 中的商品详情页获取按钮也同样使用了面性，深色的强调样式更好得契合了页面所在的用户场景，召唤用户对其感兴趣的商品采取点击行为。

控制中心页面，基于面元素的承载与分割性，所有的信号类功能独立收纳到了卡片中。

亮度和音量的调节则由横向的线性滑竿控制条改为了纵向的面性控制块。一方面增强了两者的辨识力，另一方面，根据菲茨交互定律，面积的增大带来了更好的点击体验。这一点在 miui11 的控件优化中也得到了应用。

所有的未选中态图标也进行了面性处理，大幅提升了 10 代中未选中页标签的辨识性。并且每个图标对应的文字也进行了加粗。

纵观 ios11 中所有形态的变化，我们可以发现这次改版的最终目的是：促进内容的高效获取。

顺从作为苹果历来遵循的设计法则之一，和包豪斯“形式追随功能”设计理念不谋而合。

——设计永远只帮助用户理解内容，但永远不与内容竞争。这一点在ios11的这次“改头换面”中被彻底应用及实现，并且对设计圈影响至今。

最后 点、线、面理论并不像格式塔、尼尔森可用性法则等方法论那样，为设计者提供切实可行的具体指导，它更类似一种内敛的全局观，帮助设计师抛开颜色、质感等额外手段，从宏观的角度以点、线和面的方式将所有的设计元素抽象化处理，让原本杂乱无序的万象有章可循。

最后，以康定斯基的一句话结尾——

此篇完。