“整体不等于部分之和，意识不等于感觉元素的集合，行为不等于反射弧的循环。”一、格式塔的起源

格式塔的德文为“Gestalt”，意思为「形状」和「图形」，在心理学中可以看作是任何一种被分离的整体。格式塔心理学的研究源于视知觉，是现代认知主义学习理论的先驱，为后来的社会心理学的发展打下了坚实的基础，其创始人是韦特海墨、考夫卡和苛勒。

“如无必要，勿增实体”
“Make everything as simple as possible，but not simpler”

你听过用户心智模型这个名词吗？设计方案时有考虑过匹配用户心智模型吗？如何匹配？下文将梳理智模型到底是什么以及如何运用。

先问你一个问题。拼多多、淘宝、京东这三家购物平台，你认为它们的区别是什么？或者换个方式问你。买电器你去哪个平台？买衣服你去哪个平台？ 买垃圾袋你去哪个平台？是不是有了答案了？没猜错的话， 大部分人的答案是：买电器去京东、买衣服去淘宝、买垃圾袋去拼多多。你看，这就是一个购物心智模型，你的心里对这三家平台已经产生了固有的心智，如果让你去京东买衣服，你会不会觉得，有些别扭？没错，这就是心智模型。
百度百科对心智模型的定义是：“深植我们心中关于我们自己、别人、组织及周围世界每个层面的假设、形象和故事。并深受习惯思维、定势思维、已有知识的局限。”关键词是：故事、习惯、局限。

淘宝一开始就我们讲了一个故事，一个万能的集市，我们习惯在上面买衣服，但是也产生了局限性，那就是，当我们想买大额电器的时候，还是会选择京东。我个人对心智模型的理解是：我们内心深处对一个事物的看法。空口聊天多没意思，下面举个例子。这是一尊陶俑，第一眼你觉得她像什么？

是不是觉得像米老鼠？
为什么？
因为陶俑的头上的发髻和米老鼠标志性的耳朵很像。
如果你从没见过米老鼠，你还会觉得她像米老鼠吗？
一定不会。
这就是心智模型，你对头顶的大圆形的心智是“米老鼠”，所以一旦你看到类似的形状，米老鼠的形象就会浮现出来，这个发髻的形状和你心里对米老鼠的形象产生了匹配。

对心智模型有没有一点印象了？下面我们接着聊。

我不想用具体的界面来聊，那样的话太散，我认为要想理解一个概念，最好还是从“面”的角度来说，所以下面我会举一些商业上的案例来辅助理解。心智模型有哪三种运用方式？
第一种：创建新的心智模型
第二种：改变旧的心智模型
第三种：匹配现有的心智模型
可以理解成一件事情的新生、改变和延续。

下面咱们一个个来。第一种：创建新的心智模型
难度指数：难啊。
记得《盗梦空间》里最难的是什么吗？
最难的不是盗梦，而是植入一个想法。

创建新的心智模型有异曲同工之妙，都是让别人内心接收一个事物，需要刻意培养。
举几个例子。
当年外卖刚开始的时候，家家搞补贴，很多时候几乎不花钱就可以点外卖，后来这些福利没有了，为啥？
因为点外卖的心智已经培养好了，你离不开它了，所以平台可以“不惯着你了”。
还有唯品会的正品低价、瑞幸一开始的星巴克平替，这些都是他们想要植入到用户大脑中的心智。
为什么要费劲植入一个新的想法？
因为一旦植入了，就很难改变。
现在我身边的很多朋友想买一些低价的品牌都会上唯品会，买咖啡会喝瑞幸，一旦用户的习惯养成就很难改变，意味着什么？

意味着留存和转化的成本更低了。
第二种：改变旧的心智模型
难度指数：也难。
《盗梦空间》里小李子的妻子被他植入了一个想法“你不在现实世界里”，当他和他妻子回到现实世界后，他妻子仍旧认为自己不在现实世界里，这个被植入的想法已经根深蒂固，很难改变。
所以改变旧的心智也不简单。
例如小米最初主打极致性价比，后来想往高端路线走，很难，大家心里已经认准了小米就是“性价比之王”，也就是你的产品不仅要好还要便宜。
这就导致小米一涨价，大家就骂他们忘了初心……所以小米拆分出了红米主攻性价比，小米往高端发展，但是仍旧很难。

拼多多的百亿补贴也是一样的道理，一开始的砍一刀深入人心，大家对拼多多的心智已经成型：便宜，质量一般。拼多多想改变这个心智，推出百亿补贴，并承诺假一赔十，就是想告诉大家，我拼多多，也是有正品好货的。不过，效果嘛，见仁见智。第三种：匹配现有的心智模型
难度指数：相对简单。
其实匹配现有的心智模型，是相对最简单的方法，市场已经帮你把用户习惯培养好了，你直接使用，那肯定事半功倍，省时省力啊。
举个例子，大家最近有关注小米的 13 Ultra 吗？
小米和徕卡联合研发的，主打徕卡调色的相机。
我有一个同事就直接把手里的微单换成了 13 Ultra ，因为拍照足够好看而且便携。
这里不是要推销手机啊，是想让你们了解 13 Ultra 是个什么东西。
然后给大家看看它的手柄（一个配角，可以拆卸）。
是不是有些熟悉？和相机像不像？
这个手柄就是沿用了相机的心智模式。小结一下：
心智模型有3种用法：
新建：创建新的心智模型
改变：改变旧的心智模型
延续：匹配现有的心智模型下面聊聊，咱们怎么做才能更加匹配用户的心智模型？
同样的，我不会拿具体页面来举例，还是希望把思考方式分享给大家，而不是某一个页面的设计。

要想匹配用户的心智模型其实就三步：

了解业务、了解用户、竞品调研。
或者可以这么说， 在懂业务、懂用户的基础上，还要了解行业内的通用做法。

1）了解业务
一定要了解业务，为什么？
因为好的设计方案千千万，但是匹配你的业务的方案才是好方案，如果不了解业务，可能设计出来的方案就是自嗨，例如网上很多的dribble风设计。

又比如说手机浏览器一般都把搜索框放到屏幕顶部，而夸克浏览器却把搜索框放到了下面。
为什么？

因为夸克想推翻传统的浏览器，想打造一款更年轻更好用的浏览器，把搜索框放到下面也是满足他们的业务诉求，现在手机屏幕越来越大，搜索框放在下面手指操作更加方便。所以，一定要先去了解业务。
拼多多和淘宝同样都是电商平台，可它们的用户心智相差甚大，因为最后方案设计是服务于最初的业务目标的，业务不同，呈现的方案也不一样，最后让用户形成的心智也不同。

2）了解用户为啥？给老人和小孩设计的界面能一样吗？
就拿颜色和文字来说。
小孩喜欢高饱和、丰富的颜色，而老人则需要考虑在各种场景下都能看得清楚信息的颜色。
小孩喜欢圆润的卡通字体，而老人需要识别度更高的字体，更大的字号。

不同的用户，采用的设计一定是不同的，只有了解了他们的喜好和痛点，才能做出符合他们心智模型的设计。3）竞品调研为啥要竞品调研呢？
因为竞品和我们的产品类似，那么意味着用户大概率重合度也高，甚至业务上都有一定相似度，那么意味着，竞品的方案，大概率是经过市场验证的符合用户心智模型的方案。
你看，既然竞品已经给咱们打了个样，为何还要自己闷头造轮子呢？

咱们目的是解决问题，又不是为了证明自己很厉害。
但是，不要误解，我不是说照着竞品抄，而是取长补短，所以不仅要调研，还要分析，分析就是把竞品的优劣势找出来，好的地方咱们可以酌情借鉴，不好的地方，咱们也要避个雷嘛。
好了，小结一下，要想匹配用户的心智模型，一定要了解业务、了解用户，还要做竞品调研了解市场的通识性做法。

作者：馊面包
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

不知道你会不会经常经历这个情况：

1.自己设计的交互稿，不知道能不能再优化。
2.审别人稿的时候，不知道提的意见是不是全面和更有价值的。
3.看别人作品，不知道怎么分析别人的作品，挖出有价值的点。

这些情况的出现我想是因为我们是通过回忆以前的经验来记起知识，然后去设计或者审查设计稿。所以很考验我们过去的经验和记忆力，一旦设计的是一个不是很熟悉的需求，我们能回忆的知识点很少，那我们会去借助大量的参考去完成交互设计。

设计工具类产品需要综合考虑用户需求、产品功能和用户体验。以下是大厂高手总结的5个设计要点：

1. 简洁而直观的界面设计：工具类产品应该拥有直观的界面设计，减少用户的认知负担和操作复杂度。关键功能应该明确可见，界面元素的排列应该合乎逻辑，并遵循常见的设计模式和交互规范。

2. 强大而高效的功能：工具类产品应该满足用户的实际需求，提供强大而高效的功能。产品应该具备核心功能，并结合用户反馈不断优化和升级，以提供更加丰富的功能和更好的用户体验。

3. 清晰而详尽的文档和教程：工具类产品应该提供清晰、详细的文档和教程，帮助用户了解产品的特性和功能。文档和教程应该包含逐步指导、示例代码和常见问题解答，以减少用户在使用过程中的困惑和迷失。

4. 友好而高效的技术支持：工具类产品的技术支持应该友好、高效。产品开发团队应该设立专门的技术支持渠道，快速响应用户的问题和需求，并及时提供解决方案。技术支持人员应具备专业知识和良好的沟通能力，能够帮助用户解决问题和提供专业建议。

5. 持续的更新和优化：工具类产品应该持续进行更新和优化，以适应用户的不断变化的需求和技术环境。通过用户反馈和市场调研，及时修复bug、改善性能，并增加新功能和改进既有功能，提高产品的竞争力和用户满意度。

总之，设计工具类产品需要从用户的角度出发，以用户为中心，注重界面设计、功能、文档、技术支持和持续更新等方面的要点，以提供优质的用户体验和满足用户的需求。

今日分享这篇文章是蓝蓝设计的原创文章，未来将会持续在平台上分享关于设计行业的文章。此外蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，添加vx蓝小助ben_lanlan，报下信息，蓝小助会请您入群。同时添加蓝小助我们将会为您提供优秀的设计案例和设计素材等，欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

深度解析交互设计师是否会被取代？

交互设计师是数字产品设计领域中的重要角色，他们负责设计用户界面、用户体验和用户互动等方面。随着人工智能技术的发展和普及，有些人担心交互设计师的工作会被机器替代。本文将从以下几个方面探讨交互设计师是否会被取代。

一、交互设计师的作用

交互设计师的工作涉及到用户的心理、行为和需求等方面，需要对用户进行深入的研究和分析。通过了解用户的需求和行为，交互设计师可以设计出符合用户习惯和心理的用户界面和用户体验。交互设计师还需要不断地进行测试和优化，以确保数字产品能够符合用户的需求和期望。因此，交互设计师的作用是不可替代的。

二、人工智能技术的应用

人工智能技术可以通过机器学习和自然语言处理等技术来模拟人类的思维和行为，从而辅助交互设计师完成一些简单的设计任务。例如，人工智能技术可以根据用户的行为和反馈，自动优化用户界面和用户体验。但是，人工智能技术还无法完全替代交互设计师的工作。

三、交互设计师的创造力和设计思维

交互设计师需要根据用户的需求和行为，设计出符合用户习惯和心理的用户界面和用户体验。这需要交互设计师具备创造力和设计思维。交互设计师需要不断地创新和尝试，以满足用户的需求和期望。这是人工智能技术无法替代的。

四、交互设计师的智慧和经验

交互设计师需要不断地进行测试和优化，以确保数字产品能够符合用户的需求和期望。这需要交互设计师具备丰富的经验和智慧。交互设计师需要不断地学习和研究，以提高自己的专业水平。这也是人工智能技术无法替代的。

五、结论

交互设计师的作用是不可替代的。虽然人工智能技术可以辅助交互设计师完成一些简单的设计任务，但是交互设计师的创造力、设计思维、智慧和经验是人工智能技术无法替代的。在数字产品的设计和开发过程中，交互设计师的作用将会越来越重要，因为他们能够为用户提供更好的用户体验和用户互动，从而提高数字产品的质量和用户满意度。

今日分享这篇文章是蓝蓝设计的原创文章，未来将会持续在平台上分享关于设计行业的文章。此外蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，添加vx蓝小助ben_lanlan，报下信息，蓝小助会请您入群。同时添加蓝小助我们将会为您提供优秀的设计案例和设计素材等，欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

一、用户心智模型是什么

先问你一个问题。

拼多多、淘宝、京东这三家购物平台，你认为它们的区别是什么？

或者换个方式问你。

买电器你去哪个平台？买衣服你去哪个平台？ 买垃圾袋你去哪个平台？

是不是有了答案了？

没猜错的话， 大部分人的答案是：买电器去京东、买衣服去淘宝、买垃圾袋去拼多多。

你看，这就是一个购物心智模型，你的心里对这三家平台已经产生了固有的心智，如果让你去京东买衣服，你会不会觉得，有些别扭？没错，这就是心智模型。

百度百科对心智模型的定义是：

“深植我们心中关于我们自己、别人、组织及周围世界每个层面的假设、形象和故事。并深受习惯思维、定势思维、已有知识的局限。”

关键词是：故事、习惯、局限。

淘宝一开始就我们讲了一个故事，一个万能的集市，我们习惯在上面买衣服，但是也产生了局限性，那就是，当我们想买大额电器的时候，还是会选择京东。

我个人对心智模型的理解是：

我们内心深处对一个事物的看法。

空口聊天多没意思，下面举个例子。

这是一尊陶俑，第一眼你觉得她像什么？

是不是觉得像米老鼠？

为什么？

因为陶俑的头上的发髻和米老鼠标志性的耳朵很像。

如果你从没见过米老鼠，你还会觉得她像米老鼠吗？

一定不会。

这就是心智模型，你对头顶的大圆形的心智是“米老鼠”，所以一旦你看到类似的形状，米老鼠的形象就会浮现出来，这个发髻的形状和你心里对米老鼠的形象产生了匹配。

对心智模型有没有一点印象了？下面我们接着聊。

二、心智模型的3运用

我不想用具体的界面来聊，那样的话太散，我认为要想理解一个概念，最好还是从“面”的角度来说，所以下面我会举一些商业上的案例来辅助理解。

心智模型有哪三种运用方式？

第一种：创建新的心智模型

第二种：改变旧的心智模型

第三种：匹配现有的心智模型

可以理解成一件事情的新生、改变和延续。

下面咱们一个个来。

第一种：创建新的心智模型

难度指数：难啊。

记得《盗梦空间》里最难的是什么吗？

最难的不是盗梦，而是植入一个想法。

创建新的心智模型有异曲同工之妙，都是让别人内心接收一个事物，需要刻意培养。

举几个例子。

当年外卖刚开始的时候，家家搞补贴，很多时候几乎不花钱就可以点外卖，后来这些福利没有了，为啥？

因为点外卖的心智已经培养好了，你离不开它了，所以平台可以“不惯着你了”。

还有唯品会的正品低价、瑞幸一开始的星巴克平替，这些都是他们想要植入到用户大脑中的心智。

为什么要费劲植入一个新的想法？

因为一旦植入了，就很难改变。

现在我身边的很多朋友想买一些低价的品牌都会上唯品会，买咖啡会喝瑞幸，一旦用户的习惯养成就很难改变，意味着什么？

意味着留存和转化的成本更低了。

第二种：改变旧的心智模型

难度指数：也难。

《盗梦空间》里小李子的妻子被他植入了一个想法“你不在现实世界里”，当他和他妻子回到现实世界后，他妻子仍旧认为自己不在现实世界里，这个被植入的想法已经根深蒂固，很难改变。

所以改变旧的心智也不简单。

例如小米最初主打极致性价比，后来想往高端路线走，很难，大家心里已经认准了小米就是“性价比之王”，也就是你的产品不仅要好还要便宜。

这就导致小米一涨价，大家就骂他们忘了初心……所以小米拆分出了红米主攻性价比，小米往高端发展，但是仍旧很难。

拼多多的百亿补贴也是一样的道理，一开始的砍一刀深入人心，大家对拼多多的心智已经成型：便宜，质量一般。拼多多想改变这个心智，推出百亿补贴，并承诺假一赔十，就是想告诉大家，我拼多多，也是有正品好货的。不过，效果嘛，见仁见智。

第三种：匹配现有的心智模型

难度指数：相对简单。

其实匹配现有的心智模型，是相对最简单的方法，市场已经帮你把用户习惯培养好了，你直接使用，那肯定事半功倍，省时省力啊。

举个例子，大家最近有关注小米的 13 Ultra 吗？

小米和徕卡联合研发的，主打徕卡调色的相机。

我有一个同事就直接把手里的微单换成了 13 Ultra，因为拍照足够好看而且便携。

这里不是要推销手机啊，是想让你们了解 13 Ultra 是个什么东西。

然后给大家看看它的手柄（一个配角，可以拆卸）。

是不是有些熟悉？和相机像不像？

这个手柄就是沿用了相机的心智模式。

小结一下：

心智模型有 3 种用法：

1. 新建：创建新的心智模型
2. 改变：改变旧的心智模型
3. 延续：匹配现有的心智模型

下面聊聊，咱们怎么做才能更加匹配用户的心智模型？

同样的，我不会拿具体页面来举例，还是希望把思考方式分享给大家，而不是某一个页面的设计。

三、心智模型的3匹配

要想匹配用户的心智模型其实就三步：

了解业务、了解用户、竞品调研。

或者可以这么说， 在懂业务、懂用户的基础上，还要了解行业内的通用做法。

1. 了解业务

一定要了解业务，为什么？

因为好的设计方案千千万，但是匹配你的业务的方案才是好方案，如果不了解业务，可能设计出来的方案就是自嗨，例如网上很多的 dribble 风设计。

又比如说手机浏览器一般都把搜索框放到屏幕顶部，而夸克浏览器却把搜索框放到了下面。

为什么？

因为夸克想推翻传统的浏览器，想打造一款更年轻更好用的浏览器，把搜索框放到下面也是满足他们的业务诉求，现在手机屏幕越来越大，搜索框放在下面手指操作更加方便。

所以，一定要先去了解业务。

拼多多和淘宝同样都是电商平台，可它们的用户心智相差甚大，因为最后方案设计是服务于最初的业务目标的，业务不同，呈现的方案也不一样，最后让用户形成的心智也不同。

2. 了解用户

为啥？给老人和小孩设计的界面能一样吗？

就拿颜色和文字来说。

小孩喜欢高饱和、丰富的颜色，而老人则需要考虑在各种场景下都能看得清楚信息的颜色。

小孩喜欢圆润的卡通字体，而老人需要识别度更高的字体，更大的字号。

不同的用户，采用的设计一定是不同的，只有了解了他们的喜好和痛点，才能做出符合他们心智模型的设计。

3. 竞品调研

为啥要竞品调研呢？

因为竞品和我们的产品类似，那么意味着用户大概率重合度也高，甚至业务上都有一定相似度，那么意味着，竞品的方案，大概率是经过市场验证的符合用户心智模型的方案。

你看，既然竞品已经给咱们打了个样，为何还要自己闷头造轮子呢？

咱们目的是解决问题，又不是为了证明自己很厉害。

但是，不要误解，我不是说照着竞品抄，而是取长补短，所以不仅要调研，还要分析，分析就是把竞品的优劣势找出来，好的地方咱们可以酌情借鉴，不好的地方，咱们也要避个雷嘛。

好了，小结一下，要想匹配用户的心智模型，一定要了解业务、了解用户，还要做竞品调研了解市场的通识性做法。

以上。

文章来源：优设网    作者：馊面包

一、竞品调研的结构

首先说明，竞品调研的方法有很多，本文只提供一种方法供参考，建议大家活学活用。建议从下面 4 个方面入手：

1. 调研背景

主要说一些为什么要调研，希望通过调研答达到什么样的目的？是视觉升级、体验升级还是为了提升转化率？只有了解为什么做调研这件事情，才能知道从哪几个维度调研。

2. 调研样本

建议选几个直接竞品，再选几个优秀的次要竞品也是可以的，可以帮助补齐盲点。

3. 调研维度

调研维度要根据调研目的来确定，例如如果是为了视觉升级，那么调研维度主要就集中在视觉效果上，如果是体验升级，那么调研维度主要集中在交互体验层面。所以维度的选择一定是和此次调研的目的紧密相关的，不过，倒也不是说如果是视觉升级就只调研视觉方面的内容，而是咱们要有一个主要的调研方向，啥都想要，最后啥都做不好。

4. 结论

结论是最重要的，毕竟，做这次的调研不就是为了这份结论吗？所以最后一定要有结论，也就是咱们通过调研得到了什么结论。

二、实例拆解

1. 调研背景

我公司这个项目是做一个官网的改版，官网主要就改版主要目标有两个：

第一个目标是视觉体验升级，拆解下来就是界面更好看，内容更好找。

第二个目标是提升用户转化率，更细致的拆解一下就是让更多的用户点击「咨询」按钮。

可以得到关键词：界面更好看、内容更好找、咨询客服的人数更多。

好，咱们继续，下一步是找样本。

2. 调研样本

前面提到过，样本最好是直接竞品+间接竞品（主要是一线大厂竞品）。所以这次调研我选择了几个直接竞品的官网，以及华为、飞书等这样的做的比较优秀的产品进行辅助分析。

3. 选取调研维度

调研维度又可以分为两大部分：整体结构、内容拆解。

了解整体架构是每个竞品调研都离不开的步骤，可以帮助我们快速了解行业内的通识性做法，毕竟站在巨人的肩膀上才能看得更远嘛。

①整体架构

我当时的做法是把主要竞品的官网都截图下来，然后一个模块一个模块的去分析，其实看下来你会发现，大家的做法都是有迹可循的。

看下面的图片，我把他们类似的模块用同样的颜色框出来，框出来后就会发现，哦，原来，这就是行业内的通识性做法。

然后我把这种通识性做法归纳总结出来，发现，其实官网首页可以划分为四大板块：

1. 常规内容：head、foot
2. 建立认知：banner、产品介绍、解决方案、产品优势
3. 增加信任：客户评价、客户案例、新闻资讯、行业认可
4. 转化：免费试用、在线咨询、电话咨询

你看，看似有很多复杂内容的官网， 其实也就这几个模块，这样看是不是就清晰多了。

既然咱们通过架构梳理来了官网的内容，下一步就进行内容的拆解了，拆解什么内容？就是拆解上面总结出来的规律呀。

②内容拆解

为啥要拆解内容呢？因为咱们竞品分析的目的不就是要做到“人有我优”嘛，咱们竞品分析是为了青出于蓝而胜于蓝呀，所以咱们不能直接抄人家的内容，这是无效设计，咱们要做的是分析他们的优点，然后借鉴，然后超越。

进行内容拆解的时候，建议先定几个拆解维度，不然会没有方向，这里我分了三个维度来进行拆解：

1. 用户诉求：用户的需求、疑问或者想达到的目标
2. 业务策略：针对用户诉求，网站做出的一系列解决方案
3. 表达形式：完成业务策略的交互/视觉展现方式

我就拿「建立认知」板块来举例。

官网首页的建立认知是什么？

是让进来的用户对整个网站有一个基础的认知，顾客来了，对店铺总要有一个第一印象吧。

通过前面的架构拆解我们发现，首页一般使用 4 种方法来对用户建立认知，哪四种？banner、产品介绍、解决方案、产品优势

一个用户看了 banner，浏览了产品介绍和解决方案，看了产品优势，是不是对咱们的产品有了一个认知了，这就是建立认知的过程。

那么咱们如何去分析呢？

我的做法是一个个板块分析，有些麻烦啊，但是相信我，值得。

下面我就拿建立认知里面的“产品介绍”来举例子，看看如何去分析产品介绍这个板块。

使用 3 个维度来分析：

维度 1：用户诉求（用户进来之后的诉求）

产品介绍内容是否有我需要的产品和功能？是否满足我的需求？

维度 2：业务策略（针对用户诉求，业务是怎么解决的）

讲清楚三个问题，即“我们的产品是什么”、“我们能做什么”、“我们有什么优势“

维度 3：常用表达形式（用什么样的表达方式来实现策略）

分点描述：减少大段落文字，分点描述，增强阅读性，降低理解成本

提炼卖点：将核心功能提炼出来，吸引用户注意力，精准打击，结合图标提升可读性

试用入口：视觉上强化按钮，引导转化

图文结合：图＞文，可视化表达降低理解成本，增强临场感

拆解下来，是不是对产品介绍板块很了解了，产品介绍板块主要的目的就是为了讲清楚咱们是谁，咱们的优势啊。王婆卖瓜，瓜虽好，但是咱们得让来的人知道咱们的瓜好呀，所以表达方式也是至关重要的，用什么形式去表达这个板块呢？其实竞品已经有了很好的解决方案，那就是上面描述的。

你看，这样一通分析，其实你的方案就自然而出来了，你知道往哪个方向去使劲了，而不是看别人有啥咱们就做啥。

文章来源：优设网    作者：馊面包

如果想知道某个网站配色方式，除了打开开发人员工具或是检视源码，也有第三方服务可以使用，即使无法完整复制别人的配色，也能快速得知网站使用的颜色代码或配色模式，取得颜色的色码或色彩名称。有没有任何更直觉、简单的方式来完成这些工作呢？若你有类似的需求，接下来要介绍的服务或许可以满足，这项服务会提取特定网页使用的颜色，让颜色相关信息更一目了然。

本文要介绍的「Alwane」是一个网页色彩提取工具，可以在使用者输入特定的网址后取得该网站使用的颜色代码或描述，产生为调色盘链接，重新分类、编排各种颜色，最简单的使用方式是输入网站网址就能提取，也能显示其他相关色彩，如果想分析、保存某个网站或品牌使用的颜色，Alwane 是个非常方便而且好用的工具。

除了将提取的颜色代码以可视化方式呈现，还能够以调色盘或是程序代码方式呈现，包括 CSS 和 SASS 两种显示程序代码，对于要取得特定的网站颜色来说很有用，若有类似需求的话不妨打开 Alwane 网站试试看。

Alwane

网站链接：https://alwane.io/

使用教学

开启 Alwane 网站后直接在左上角「Extract CSS Colors」输入要提取颜色的网址，预设情况下会从 HTML 和 CSS 样式表单取得颜色，如果某些情境下需要从 JavaScript 获取颜色可在「Advanced」设定选项找到。

从提取后的色彩结果可以看到各种颜色分布，包括颜色的预览、变量名称和色码（hex code），从左侧可选择为颜色重新分组、排序或是切换 CSS、SASS 色码。

从上方选项切换调色盘或程序代码模式，也能快速将所有 CSS 代码复制到剪贴簿。

如果想要保存或分享网站的配色、调色盘、CSS 等信息，点选右上角「Generate」就能产生链接咯！

值得一试的三个理由：

1. Alwane 网页色彩分析工具，输入网址就能提取网页出现的颜色
2. 从 HTML、CSS 和 JavaScript 获取色彩信息
3. 查询结果会有颜色预览、变量名称和色码，也能切换为程序代码模式

栅格一直都是很多同学非常疑惑的地方，无论是栅格的日常使用，又或者是栅格在整个产品当中的作用，一直以来都有非常多的疑惑，今天就来聊聊栅格在实际工作如何使用，以及产品之间究竟有何区别。

上期回顾：

其实在说栅格的使用，我们就在讨论网页当中的布局方式，以及他们之间的不同点。

网页的布局方式：

布局方式，本质上就是去处理窗口宽度与网页内容的关系

用户会使用浏览器打开不同尺寸的窗口宽度，而网页内容究竟应该如何去适应这些窗口尺寸？

通常会分为：固定布局、流式布局、自适应布局、响应式布局

1. 固定布局（Static Layout）

固定布局是一种最为简单的方式，它的设计逻辑是将页面当中的内容 “写死固定” 在屏幕上，内容不会随着本身窗口宽度进行改变，所有元素都使用 px 作为基础单位

当然在固定布局当中，窗口大小与页面内容会存在两种基本关系：窗口过大则将页面元素进行居中，窗口过小则展示横向滚动条

固定布局的好处是这种方式相对简单，只需将页面设计好即可，不会存在太多兼容性的问题（因为也压根没有考虑兼容性的相关问题）

固定布局通常出现在 老旧的政府项目、网页的登录注册中

2. 流式布局（Liquid Layout）

流式布局是最基础的变化布局，它的设计逻辑是将页面当中的元素设计成可以流动的 “水” ，通过在页面，设计不同的“杯子”容器来装下页面内容

这里的“水”一般指的是 文字、图标、以及一些页面重复出现的元素。而杯子通常是我们设计的容器，它高度固定，只会变化其宽度，比如卡片、外层容器控制宽度 等等...

因为“杯子”的限制，也就导致水会根据杯子的宽度进行延展流动，进而形成流式布局

使用流式布局可以通过较低的开发成本，来实现一个页面当中多尺寸的小范围适配，如果屏幕尺寸跨度较大，则会比较困难

而流式布局最常使用的方式就是通过栅格系统，来确定整个“杯子”的宽度，进而让“水”能够在页面当中实时滚动展示

这里有两个需要注意的点：

在研发层面，杯子的大小是需要进行限制的，通常会去设定它的最大值与最小值，当它超过最大值则居中对齐，当他

在流式布局当中，窗口超过其最大值则固定左侧，右侧空白补充；窗口小于其最小值则展示横向滚动条

比如与上方同样的案例，将页面当中内容的文字实现成流式布局，并且将其流体布局的宽度限制为 200px - 120px，这时则会形成页面的宽度变化，会导致内容发生直接的变化

流动的“水” 需要去考虑它漫出的情况，即在“水杯”高度固定的情况下，整个宽度无法装下如此多“水”的情况，通常我们可以使用 “...” 进行标注。这个思路后续在响应式布局当中也会体现

3. 自适应布局（Adaptive Layout）

自适应布局是将差别较大的屏幕尺寸，去创建多个不同的设计稿，每一个设计稿去对应 一个用户实际的尺寸范围。改变屏幕分辨率就可以去切换不同的设计方案

通俗一点来说，自适应就是去单独设计桌面端、平板端、移动端的页面，并且将它们三者进行独立，而系统通过不同尺寸间的 屏幕断点/浏览器 UA 等...（实际前端判断远比这个更加复杂，但是为了方便理解可以暂且这么认为），进而适应出不同的设计页面

而通俗一点来说，自适应是使用多套代码去对应多个页面，并且都是在业务非常复杂的情况下进行使用，在国内当中最常使用便是 桌面端与移动端 的产品

比如 语雀 当中的 桌面端与移动端就是一个典型案例，他通过判断用户的使用设备，将页面拆分为了，桌面端、移动设备端、小程序（单独设计适配的）。因此只需要将每种设备的设计思路分析清楚即可

自适应布局与栅格

自适应主要是表达多个设备尺寸下进行切换的 布局方式，在不同的设备之间，也是需要去使用流式布局以及其他布局方式

而不同的设备之间，屏幕分辨率的差异就会涉及到一个关键点，屏幕断点

屏幕断点

屏幕断点，又叫媒体查询 @media，因为在整个设计当中，屏幕尺寸是极其复杂的，除了我们常见的尺寸：1920、1080、1440、1366

用户还可以通过调整窗口的大小，进而改变网页尺寸。而屏幕断点，最主要是判断屏幕的宽度，来确定目前的尺寸究竟应该采取什么设计方案

比如在设计一款成熟的 B 端产品时，因为商业的缘故我们作为各大平台（钉钉、企微、飞书）的 ISV（合作上架），产品上架到不同平台时，需要对不同平台尺寸进行调整，比如钉钉为 1024px、企微为 980px、飞书为 1280px，这时为了满足用户的实际场景，会将这几类特殊的尺寸作为屏幕断点进行对应的布局设计，以满足不同产品当中的最佳实践

关于屏幕断点的媒体查询，是在前端 CSS3 代码当中，提供给用户校验整个屏幕的宽度，比如在下图前端代码当中，则代表在屏幕尺寸小于 480px 时，使用 字体大小为 16px

而确定断点才是这其核心，这里给大家提供两个思路，实际设计当中还会更为复杂：

物理断点：也就是屏幕当中，已经划分好的断点方式，比如显示器的全宽大小、不同设备之间的屏幕分辨率差异

设计断点：在设计过程当中，一些必要的屏幕尺寸。比如上方讲到不同平台的设计问题

其实屏幕断点不是最终目的，最终还是想通过屏幕断点，将页面当中不同的不同元素的处理方式实现在设计稿中，如果不需要，完全可以不考虑增加屏幕断点。

4. 响应式布局（Responsive Layout）

这里先多聊一句，其实响应式的大规模普及，是源自 2015 年 Google 的倡导（可以看到 Google 旗下的很多产品都采取的响应式布局，例如 YouTube），它最初的目的非常简单，就是为了提高响应式在移动终端上的运行效率。因为在 2015 年时，安卓 生态下的屏幕尺寸多到可怕，以至于需要有一套解决办法来让用户运行并使用。

响应式布局是确保一个页面当中所有的设备（桌面端、平板端、移动端）都能够展示出非常满意的效果，进行产生的一种技术方案。它更像是 流式布局与自适应布局 的结合，它能够通过对屏幕尺寸的快速响应，进而对页面的内容进行更为细致的变化。

通俗一点来说就是通过一套代码去实现多个页面，并且将多个页面的内容进行细化，进而能够快速适配多个设备。

对于多个设备，最主要是调整页面栅格数量、水槽宽度、页面距进行适应，比如在 YouTube 当中，就是通过响应式布局，让页面实时响应进行处理。

响应式布局与栅格

比如以 Ant Design Pro 的页面进行拆解，你会发现它在 575、767、991 的尺寸中，页面布局发生变化，然后根据屏幕断点之间的页面布局，采用向下兼容的适配方式，Ant design Pro 屏幕断点可以划分为 320、576、768、992、1200，响应策略如下图：

布局与栅格的关系

你会发现布局其实是依赖于栅格，而栅格的使用，正是由于不同的布局所导致。只有通过栅格，才能够确定流式布局的比例、响应式布局的变化方式，但是在 B 端产品当中，并不是所有页面都需要使用栅格，经常看到一些作品集其实是为了栅格而栅格

在 B 端产品当中在，真正使用栅格的地方更多是工作台、官网，而其他相对复杂的页面是没办法使用栅格，而对我们每一个产品而言，可以优化的点就是在屏幕尺寸较小的情况下，默认让整个产品导航菜单收起，以提供给用户更多展示内容。

文章来源：优设网    作者：CE青年