空状态页面是设计中一个非常常见的页面设计，但不少产品的空状态设计做得非常差。这篇文章，作者分享了飞书的页面设计，从设计和情感方面来说，都比其他产品强很多。
空状态的页面是一个非常常见的东西。在任何产品中，当用户刚开始使用时都非常有可能遇到页面中没有内容、没有数据的场景。
如果页面显示为一片空白的话，那用户用户有可能认为是网络出现了问题，或者是产品本身存在bug，就很有可能给用户造成误解。
所以在UI设计相对成熟之后，各个产品中都会对页面的空状态做出一些美化处理。比如像下面这样。
这样的页面在视觉上更加美观。并且也给予了对于异常状态的处理入口。相对于一片空白的页面，当然是有一些优化的。
我们似乎也习惯了这种放一个插画和一个按钮的空页面形式。但是作者今天在看到飞书的设计之后，才意识到即使是一个非常简单的静态空页面，也可以有更多的体验提升，而不仅仅局限在美观这一方面。
首先我们来还原一下当时的场景，今天作者在上班的时候，本来因为一个设计问题讨论的比较烦躁。和同事的沟通也有一些激烈。
然后再打开飞书查看消息时，偶然遇到了一个这样的空页面，如下图。
直接说主题：这个页面就是作者觉得飞书的设计领先了全部产品。
我们可以想象一下。如果这个页面按照常规做法放一个没有新消息的插画。那么结果就是一个中性的设计。没有给用户带来新的体验增量。也没有给用户造成困扰。只是一个中性的设计。
但是如果像上图中这样做，就达到了让空页面的作用不局限在空页面的效果。
详细解释一下这句话的意思：我们这些打工人在使用沟通工具时，最主要的使用场景当然是和同事进行沟通。所以最主要的体验来源自然也是沟通过程中的体验。
那么即使在这个页面里放一个精美度max的插画，会对我的沟通体验会产生一丁点儿影响吗？当然不会。因为这是两个完全没有关系的事情。
那么如果像飞书这样放一个对点赞的行为的引导呢？就有可能引导出一些用户的使用习惯。
比如说在进行飞书会议时，当我们正在发言或会议即将结束、当我们讲完了设计方案时，可能会有一些同事因为这个点赞的行为引导，就在那个场景下给我们点了一个赞。
这个行为才是我们在使用工作沟通产品的过程中能够影响到最主要体验来源的行为，而这个行为是受一个空页面的内容的引导产生的。
所以作者上面才说这个空页面内容的作用，不仅仅体现在空页面而是影响到了产品中其他场景的体验。
如果再进一步分析的话，其实还可以从人类记忆的特点展开一下。例如现在某个用户已经使用了飞书这款产品一段时间。在他使用的过程中，与他协作的一些用户偶尔会有为他点赞的行为，包括他自己也会给其他的用户点赞。
那么在这一批用户的体验感知中，会形成两方面的感知。一方面是会对给他点赞的其他同事有一定好感。
另一方面是这种正面的情绪会产生一定的泛化迁移。当时间略微变长之后，由于人的记忆并不会记录所有细节，而是像一个压缩文件那样只记忆最牢固的信息，再根据明显信息去联想到细节信息。
这个结果就是在用户的潜意识中会认为使用飞书的体验也是正面的。也就是说用户会把对其他同事的好感有一部分迁移到飞书这个产品中。好处不言而喻。
除了上面的图片外，还有几张其他的也可以用同样的思维理解一下：
作者测试了十几次，一共遇到了这四种内容，如果说一种内容只是巧合的话，那么这四种情况全部都是对产品整体体验的增强，而不仅仅局限在对空页面状态的处理。这也能进一步佐证我们的分析过程。
我们再来看一些负面的案例（为了避免得罪人，就不提具体的产品名称了。）
在这个空状态的页面中有一行文字叫做信号可能跑到外星球了。我实在是不理解，就算他跑到火星了又和用户有什么关系。看起来有点幽默可爱的文案真的有意义吗？充其量也只是一个中性的设计。
还有一些更过分的案例我们来看一下。
这张图中是某个产品里六个空状态页面的。使用的不同插画。如果作者不解释每个插画代表什么含义的话，有多少人能完全看懂？至少其中有三个作者是看不懂的。
这种设计。就是为了追求视觉上的差异性。和不同场景下的视觉区分。而影响到了更重要的易辨识的体验指标。可能也是。由于在某个内卷的环境里自己为自己找了一些可做的事情。但作者只能说这种产品对用户体验的理解还仅仅停留在很表层的阶段。
在以前作者也曾经写过空状态页面的设计应该遵循哪些原则，大致如下：
1. 传达清晰：确保页面上的文案简洁明了，直接告诉用户当前页面为什么是空的，比如“您还没有添加任何收藏”或“搜索未找到结果”。文案应具有指导性和友好性。
2. 行动召唤：给用户提供一个明确的下一步操作提示，如“立即添加第一个收藏”、“尝试其他关键词搜索”或“创建您的第一条笔记”。这有助于用户了解如何开始填充内容或解决问题。
3. 情感化设计：使用插图、动画或色彩来提升页面的情感吸引力，使空状态页面看起来不那么冰冷。设计应与品牌的整体视觉风格保持一致，增加用户的亲切感。
4. 教育与引导：利用空状态页面作为教育用户的机会，展示产品功能或提供使用小贴士，帮助用户更好地了解产品并鼓励他们采取行动。
5. 反馈与错误处理：如果空状态是由于错误或加载失败造成的，提供具体的错误信息，并给予解决建议，比如检查网络连接或刷新页面。
6. 适应不同场景：根据不同的空状态场景（如初次使用、内容被清空、搜索无结果等）设计相应的页面，每个场景都应有其特定的引导策略。
但是现在看来以前的这些设计原则在当下来衡量，也仅仅是及格的做法了。
因为用户对产品的性能要求会越来越高，对于产品体验的期待也会越来越高。
在过去看起来非常好的设计，当用户习惯了之后，会逐渐变为一个比较普通的设计方案。
这种现象就像卡诺模型中的魅力需求会逐渐降级一样。
简单解释一下：比方说十年前我们去一家饭店，如果能提供免费的WiFi，那用户会觉得非常惊喜。
因为这种免费WiFi服务是很少有饭店能够提供的。能帮用户节省很多流量的费用。
但是如果是今天我们到一家饭店发现他们能提供免费WiFi。这就变成了一个很普通的事情，很多饭店都会提供这种服务，有什么好惊讶的。
有当然好没有也无所谓，自己每个月的套餐流量都不一定用得完。我们并不会为此感到惊喜。这就是一个魅力需求转变为无差异需求的例子。
当用户习惯了我们曾经做出的优秀方案。就要求设计师们去做更多的创新。
只有再次将设计方案带来的体验做的超出用户的预期。才能让用户产生整个产品体验都偏正面的强烈感知。
飞书这个设计案例其实就是一个非常简单的静态页面，但是作者想到的这些设计思路如果真的是设计者的思路，那真的很让人佩服。
大家可以尝试把这篇文章转发到一些群里，看看我们能不能收到。飞书官方设计师的回应。看一看到底是过度解读了，还是事实如此。
杜昭，微信公众号：AI与用户体验，人人都是产品经理专栏作者，实战派设计师，目前在某手机公司负责手机OS交互设计，所负责产品覆盖用户数亿，主要研究AI与人机交互设计的融合及人因学对用户体验的影响。
本文原创发布于人人都是产品经理，未经许可，禁止转载。
题图来自 Unsplash，基于 CC0 协议。
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
发现最好的登陆页面构建器，可以帮助您创建获胜的登陆页面并将访问者转化为潜在客户。
询问任何营销人员，他们都会告诉您：第一印象就是一切，尤其是在登陆页面设计中。
然而，创建一个精心设计、SEO 优化且高转化率的登陆页面杰作并非易事。它需要设计、艺术、销售和营销的微妙结合。
聪明的营销人员知道秘诀：使用登陆页面创建器。使用此工具，您可以创建专业的登陆页面，而无需编码知识或大量预算。
如果您需要最好的登陆页面构建器，本指南将探讨您的选择。
1. ConvertKit：最佳免费登陆页面构建器
2.Carrd：最适合简单的登陆页面
3. Unbounce：最佳人工智能驱动的登陆页面构建器
4. Webflow：最佳登陆页面模板
5. Elementor：最适合 WordPress 用户
6. Leadpages：最适合速度优化的登陆页面
7. Mailchimp：最适合受众细分
8. GetResponse：最适合登陆页面优化
9. Instapage：最适合个性化
10. 滑动页面：最佳 AMP 登陆页面
将您的网站访问者转化为潜在客户。
怎样才是一个好的登陆页面？
在制作令人愉悦且有效的登陆页面设计时，您拥有大量的创作自由。但您需要知道一个出色的登陆页面包含哪些内容，才能将您的网络流量转化为稳定的潜在客户流。
所有高转化率着陆页都具有以下共同的关键元素：
引人注目的标题：清晰、相关、相关且令人难忘的标题可以向访问者传达信息，并阻止他们点击离开着陆页。它应该清楚地阐明您独特的价值主张（UVP），说明您与竞争对手不同的原因以及您提供的产品的优势。
好处和功能：如果人们通过点击您的号召性用语了解对他们有什么好处（好处），那么他们更有可能进行转化。使用简短的文字和一致的消息来描述您的产品如何使访问者受益或您提供的价值。
吸引人的副标题：在标题下方添加副标题，其中包含简洁但具体的信息，以说服访问者继续阅读。
易于理解的文案：使用可操作、引人注目的文案，简要描述您独特的销售主张 (USP)。详细说明好处并给予指导，以便访客能够感到有权做出明智的决定。
引人注目的 CTA：CTA 按钮可提交包含访客信息的潜在客户开发表单。使其单一（一件事）、重点突出且明显（以不同方式突出显示），以便访问者知道该做什么。
潜在客户捕获元素：如果您必须向目标网页添加表单，请使其简短而甜美，仅捕获基本细节。将其放置在首屏上方，访问者无需滚动即可立即看到它。这样，您就可以获取访客信息并最大限度地提高转化率。
强大的背景英雄镜头：人们比文本更快更好地处理和保留图像。这就是为什么您的目标网页应该有一个迷人的英雄形象，给人留下良好的第一印象。使用独特的摄影（最好是品牌拥有的）来代表您的产品，并帮助他们想象自己正在享受其好处。
信任信号：在人们转变之前，他们必须信任你。因此，请使用照片、社交小部件、客户评论、奖项、信任印章和社交媒体推荐等信任指标来建立信任。
相关问答
如今是互联网时代,对于专业UI设计师的需求是越来越大,做出来的UI作品能不能收获用户的心,很大情况下还是要看UI设计师对色彩这一块的运用。而参加一家水平过硬...
飞鹰的认识,与你分享:一、对网页设计的认识网页设计(webdesign,又称为WebUIdesign,WUIdesign,WUI),是根据企业希望向浏览者传递的信息(包括产品、...设计...
网页设计需要学习东西还是比较多。第一阶段:设计软件学习:例如PS、AI、Dreamweaver、等等。Photoshop简称PS,是由Adobe公司开发和发行的图像处理软件,Pho...
在web2.0之前,由于技术问题以及硬件设备问题,网页大都是由HTML+css等实现的简单静态页面,网页的浏览效果和体验很单一。这时候的web页面开发人员被称之为网页...
国内1.Fotor懒设计www.fotor.com.cnFotor懒设计是一个在线快速平面设计工具,它为用户提供海量模板,用户通过修改模板就能快速完成设计。作为设计师的你,也...
其实设计并没有哪个要好一点,哪一个不好这也一说,主要是看你是喜欢做哪方面的设计?你会做哪方面的设计?你做哪方面的设计能最终达到你想要展现的价值?你做哪...
1/5打开“Word”,点击工具栏中“布局”。2/5点击页边距下边“倒三角”。3/5在弹出来的下级菜单中点击“自定义边距”。4/5可以设置“页边距、纸张方向、页...
网页设计主要两大块,看是学习网页设计哪一块。设计或是开发。设计方向,主要是页面界面设计,可往UI、交互方向发展。成为一个设计师,做设计工作。开发方向将...
页面是指网站或应用程序中的一个单独的屏幕或窗口,通常包含文本、图像、视频等内容。它是用户与网站或应用程序交互的主要方式之一,也是展示网站或应用程序信...
我们在浏览网站的时候经常会遇到一些404页面,为什么要出现404页面呢?404其实是一种http状态码,服务器无法提供正确信息或是原因不明导致不能正常反悔信息,就...
