今天这篇文章比较偏基础，但胜在讲的很全面，自己做项目的时候也可以拿来自检。关于字体排版的方方面面都讲到了一些，尤其有一点是关于字体和字型的定义让我学到不少新知识，之前我在翻译的过程中没太在意这 2 个词的区别，今天因这篇文章专门去研究了一波，原来还是有不少讲究的，一起来学习下吧。排版在设计过程中扮演着非常重要的角...

今天这篇文章比较偏基础，但胜在讲的很全面，自己做项目的时候也可以拿来自检。关于 字体排版 的方方面面都讲到了一些，尤其有一点是关于字体和字型的定义让我学到不少新知识，之前我在翻译的过程中没太在意这 2 个词的区别，今天因这篇文章专门去研究了一波，原来还是有不少讲究的，一起来学习下吧。

排版在设计过程中扮演着非常重要的角色：好的版式可以让阅读变得毫不费力，而差的直接劝退用户。

一、字体和字型有什么样的区别？ 这里我们回顾下基础知识。有时字体（typeface）和字型（font）好像在使用上是可以互换的，这让人产生困惑（彩云注：实际上我也经常没注意这个细节，所以还专门去查了相关的知识，确实是大有学问，在翻译这篇文章时收获很大）。字型是字体的一个子集，字型（font）是指字体（typeface）中特定的样式和字重。

（彩云注：typeface 是一个抽象的总体概念，而 font 是这个概念的具象物体。如果是可以互换的、现代的、数字艺术中的意义，就都翻译成“字体”；如果原文在强调二者的区别，“typeface”理解为“字体”，而“font”可以理解“字型”。这样来区分）

举个例子，Helvetica 是一个字体，但 Helvetica Bold 是 Helvetica 字体家族中的一个具体的字型。下面这张图，你就能理解字体和字型的区别了。

二、选择正确的字体风格 下面是三种比较常见的字体分类

1. 衬线体

衬线体会在构成字母和符号的笔画末端增加小装饰性笔画。

2. 无衬线体

无衬线体在笔画的末端和转折处都比较干脆，没有装饰。

3. 装饰性字体

用来突出某些内容的短文本。（彩云注：一般不会大面积使用，用来作为装饰样式挺不错的，比如放在内容的底部作为底纹之类的。）

4. 保持字体种类尽量少

同时使用三种以上的字体会使网站看起来不美观而且显得非常拥挤。保持尽量少的字体种类，两种挺好，但其实一种字体通常就足够了。

5. 使用一种字体的不同字重

在项目中，我习惯用一款免费字体“Inter”，看起来效果非常棒。

使用 Inter 字体在界面中的实际效果

6. 使用衬线字体和无衬线字体

在下面这个网页设计中，我会用到衬线字体“Kepler”作为标题，用无衬线字体“Futura”作为其他不同的文本内容。

2 种不同字体在界面中的实际效果

7. 使用装饰性字体作为高亮内容

在下面这个案例中，我期望高亮文本内容“skincare routine”。我在这里就用到一个装饰性字体“Northwell”，看起来效果挺不错的。

免费就意味着不好吗？

让我们看看下面两个相同的字体。左边是免费的字型“Inter”，右边是一个要花钱的字型“Söhne”（60 美元授权）。

你觉得怎样？

就我个人而言，我并没有觉得左边的看起来比右边的更糟糕，我觉得 2 个都非常好看。

因此，如果预算有限，可以到 Google 字体库中选择一款你喜欢的免费字体。

注意，如果你在网上发现一个字体，能下载和使用并不代表这就是免费的。你必须仔细阅读这个字体的许可然后再决定在哪里使用它。多数情况下，当你看到一个好看的字体但却发现它并非免费的。

此外，如果你决定使用一种字体（例如 Helvetica）并且会用到它的三种字重（粗体、中体、细体），你需要同时付费 3 次 $180 (3x$60)。

在这个网站 https://www.myfonts.com 你可以查到某个字体具体要花多少钱。

更多优质英文字体推荐：

5个经典的付费英文字体，我们都帮你找到了免费可商用替代款！（二） 大家好，我是和你们聊设计的花生。

阅读文章 >

三、使用默认的样式 当你设计一个网页时，你只能使用 6 种类型的标题。

你可以看到下一个标题的字号会比前一个更小。它能帮助在页面上更好的组织信息和提高信息的可读性。

在标题中通常会有这种限制，在正文中却没有，但根据我的经验，4 种类型足够了：

不仅仅在 PC 端需要考虑标题和正文的文本风格，在移动端同样需要。

四、选择合适的字体大小 我知道对于每个项目来说都会有其独立的风格体系，字号也取决于所使用的字体，但让我们尝试去找到一些相对平均的字号和样式尽可能的满足更多的项目。

标题字号对照表（左边是 PC，右边是移动端）

正文字号对照表（左边是 PC，右边是移动端）

五、在 Figma 设置字体样式 当你已经在 Figma 中建立了文本样式时，创建文本块会更容易。下面就是在 Figma 中的样子。

① 要创建一个文本样式，在页面上选择一个文本>点击字体右边的“4 个点”的图标>点击“+”图标

② 输入你要创建的字体组件名称

如果你想对文本样式进行结构化管理，分到不同文件夹中，你可以在创建名称的时候加上斜杠：文件夹名/样式名

注意一点，你可以在任何时候修改字体样式，它将会自动在页面中修改任何你之前用过这些样式的字体。

1. 对齐 左对齐

绝大多数人习惯从左往右阅读，这也是为什么设计师通常都会采用左对齐的原因。

居中对齐

当你觉得居中对齐在视觉上更美观时，就可以尝试使用居中对齐，此时其他内容也最好都居中对齐，保持统一。

当文本内容超过 3 行时，就不建议使用居中对齐，因为这会让内容变得难以阅读。

右对齐

我发现有 2 种文本需要右对齐的情况：

出于语言的需要，比如说希伯来语和阿拉伯语; 在表格和 UI 中，当字段名有不同的长度时，使用右对齐可以让它更接近所引用的数据。（彩云注：亲密性原则的使用）

2. 行高 每款字体依据它的字号都会有一个默认的行高。有时默认的行高看起来就还不错，那么这个行高就让它自动而不需要做特别的改动。

但如果这个字块看起来非常拥挤那就需要手动调整它的行高。

（彩云注：在 15px 字号时，我通常会给到 1.3 到 1.6 倍的行高会比较舒服，当然也要看具体的字号大小和字体）

3. 文本块宽度 你必须考虑到字块的最大宽度，尽量避免字块过长造成的阅读困难。

我发现 660-760px 是一个比较好的字块宽度范围。当使用这个宽度时，你的眼睛不需要来回移动，阅读起来就会非常舒服。

六、如何使用大写字母 在短的标题和文本块中适合用大写字母，不要在一段很长的文本中都用大写。

不要忘记字母间距

七、检查颜色对比度 你在设计的时候能看清文本内容，不代表所有人都能看清楚。

彩云注：保持文字足够的对比度，具体怎么去走查：

从3个方面，帮你从零开始掌握WCAG色彩对比度 最近在学习大厂设计系统时，发现了 WCAG 标准。

阅读文章 >

欢迎关注作者的微信公众号：「彩云译设计」

朋友们有没有发现，最近在社交平台上，出现了很多关于“上门做饭”的帖子。 我大致看了看，这类服务都需要提前预约，顾客可以定制菜谱（只要厨师会做），食材则是自备或代买，厨师只收人工费。各个厨师的定价不一，多以做了几道菜来计算，比如四道菜的市场价格在60元~90元之

上门做饭、上门喂宠、上门美容，近年来出现了各种上门服务，引发网友热议。上门服务为什么会兴起？它满足了消费者的哪些需求？未来该如何发展？快来看看天天问的小伙伴们给出了怎样的答案吧。

朋友们有没有发现，最近在社交平台上，出现了很多关于“上门做饭”的帖子。

我大致看了看，这类服务都需要提前预约，顾客可以定制菜谱（只要厨师会做），食材则是自备或代买，厨师只收人工费。各个厨师的定价不一，多以做了几道菜来计算，比如四道菜的市场价格在60元~90元之间，而洗碗、清洁厨房这些服务需要另外收费。

（小红书截图）

除了专业厨师，还有很多90后、95后的年轻人都以此为兼职，还有人组建起团队，很多媒体也关注起了“上门做饭”这个话题。

（百度截图）

其实除了上门做饭，近年来还兴起了“上门喂宠”、“上门按摩”、“上门美容”等上门服务，“上门”这个概念，成为了服务界的一种新趋势。

（小红书上各种上门服务的笔记）

我们也和天天问的小伙伴们一起探讨了上门服务这个话题，本篇文章就来聊聊，上门服务为什么会火，它满足了消费者的什么需求，未来的发展又会怎样？

天天问每周精选第212期： 上门按摩、理发、做饭，为什么“上门服务”火了？

文章内容部分来源于@大鱼炖海棠 @洛悠人LYR @三川 @阙 的精彩回答。

一、互联网使上门服务进入更多人的视野 其实上门服务并不是一件新鲜事，这种形式早就存在。像上门做饭，很多农村举办宴席就是请厨师上门做的，而上门按摩、理发等服务在家政平台也早有上架。以前，这些上门服务多是靠人传人的口碑来宣传，而近年来频繁进入大众视野，主要有两方面原因：

一是受疫情影响，本来可以到门店使用的服务项目被限制，所以很多人不得不选择上门服务。对于商家（或者个体户）来说，这也是继续营业和扩大服务范围的方式。

二是互联网平台的推波助澜。现在随着网络的发展，资讯传播也越来越快和丰富，个人也能掌握更多的平台渠道做宣传，提供上门服务也越来越容易，越来越普及，为人们所谈及。

而且，近年来小红书的种草、抖音的短视频推广越来越红火，各大社交媒体也扩大了人际交往的范围，让用户和商家的距离越来越近。

很多用户，原本并没有意识到会有人提供上门服务，但日常刷小红书、抖音这些互联网平台的过程中，就有可能接收到关于上门服务的推送信息，然后就发现：原来还有这种方式，能满足自己在家就能享受各种服务的需求！

而商家也可以利用各种互联网平台发布自家业务信息、比如打折优惠、上门服务等，有针对性地去吸引用户；而对于没有太多预算的个体户来说，也可以在小红书、抖音等平台发布自己工作的笔记或视频，用内容来积累粉丝、得到更多曝光，进而获得更多顾客。

对于平台来说，推送上门服务的信息可以获得用户的关注、转发、浏览时长；对于用户来说，则是丰富了信息渠道（开始意识到可以在平台上搜索相应的服务），自己的需求也得到满足。

对于商家/个体户来说，这些互联网平台是非常好的宣传渠道，还能拓展自己的私域流量，发展更多、更精准的客户。三方都能获得利益，上门服务自然也就传播开来，进入了更多人的视野。

二、懒人、大忙人与特殊群体 当然，单单是进入了人们的视野还不够，上门服务能兴起，最重要的是它满足了当代人的消费需求。

而经过我们和天天问小伙伴们的讨论，总结出上门服务主要满足了这三类消费者的需求：懒人、大忙人与特殊情况下不好出门的人。接下来，就让我们来看看，他们为什么需要上门服务吧。

1. 懒得动又想享受 现在很多人会调侃，“懒惰是人类的第一生产力”、“为了能偷懒，人类发明了各种机械来代替人力”，从某个角度来说这些话也不算错。懒人经济就是抓住了人们想“偷懒”的心理，上门服务也属于其中一种。让“懒人们”足不出户就可以享受服务，节省了自己的时间和精力，何乐而不为呢？

（小红书对上门做菜的评论截图）

就比如，最近很火的上门做饭，就是抓住了人们懒得动又想享受的心理。特别是在需要宴客的场景，如果做菜和招待客人全都自己包了，未免有点辛苦；而请人上门做菜，自己去招待客人们，就省时省力多了。

而且，在卫生和健康方面，比起外卖的饭菜，由厨师上门、在家里做的饭菜，显然会更让人放心。而在价格方面，上门做饭又会比很多大饭店的饭菜价格便宜。所以，对于想吃得好的懒人们来说，请人上门做饭，是个不错的选择。

2. 没时间又不想将就 还有很多人不是懒得动，而是平时工作太忙，挤不出时间，也没有精力出门。特别是在一线城市生活的人，他们工作强度比较大，私人时间较少，但消费能力尚可，还不想将就着过，所以他们更愿意花钱节省出门的时间和精力，来换取更高效率的服务。

比如上门按摩、上门美容等，让工作人员上门，自己则有了更多时间可以在家里休息。而且家里的环境也比公共场合让人放松，按摩按痛了也可以放声大叫。一些美容用品、比如面膜、精油等也可以不用美容院的通用产品，改成用自己更熟悉、更喜欢的类型。

3. 不方便出门的特殊情况 除了主观的不想动、没时间等原因，还有一些客观因素会导致人们不便出门。

比如近年来发生的新冠疫情，为了安全考虑，人们会尽量避免长时间呆在人员密集的公共场所，像是上门剪发这种服务，就是在疫情期间火起来的；又比如下雨天或特别炎热的天气，不想出门受大自然的摧残，就可以选择让商家上门服务；

还有一些腿脚不便的老人家、病患这些特殊人群，不是很方便独自出门，家里人又不能时刻陪护在他们身边。针对这类人群，将他们所需的服务送上门，就是最好的解决方法。

还有一种特殊情况，就是主人要上班或要回老家，但他们的宠物又不能跟随主人一起离开，这种情况下，宠物的喂养就成为了一个问题。

以前，人们会把宠物寄养在宠物店，但这样一来，宠物的活动范围会缩小；如今，爱宠人士有了另一个选择，那就是将宠物留在家里，请人上门喂养、陪玩。在今年国庆假期，就有人凭借上门喂宠，一周赚5000元。

（微博截图）

三、上门服务的前景 1. 隐患 有需求就有商机，上门服务满足了消费者的众多需求，也正在成为服务行业的一种趋势，但是，我们也需要注意其中暗藏的危机：

服务标准不一，难以保证质量 难以保证上门服务的安全 以上门做饭为例，每个厨师的水平不一，也不像饭店可以参考点评平台的星级评价。如果参考个别顾客的评论呢，每个人的口味又不一样，即使上一个顾客夸好，也并不能保证那个厨师做的菜适合自己的口味，也就不能保证最终服务的质量。

（小红书吐槽上门做饭的截图）

而且上门做饭的从业人员大多是女性，还有很多人没有组织团队，纯粹是自己在单干，在上门服务的过程中无法保证自身的安全。顾客方面也会对陌生人上门有所疑虑，甚至是抗拒，会担心家中的老人小孩的人身安全、财产安全等。

（小红书上对于上门做饭的安全担忧）

其他的上门服务也有这些问题，特别像上门喂宠这种主人基本不在场的情况，安全问题就很令人担心，小红书上搜上门喂宠除了自荐的帖子就是各种安全注意事项和避雷贴。

（小红书截图）

如果这些问题能得到有效解决，上门服务应该会被更多人接受和认可。

2. 发展前景 我们在前面提到过，上门服务非常适合老人不便出行的场景，而“上门”这个概念也与银发经济非常匹配，近年来热门的上门养老服务就是典型的例子。

在中国，老人们更倾向于在家里养老，但是子女又忙于工作，无法照看好老人。而上门养老模式就非常有效的解决这一问题，将各种养老服务送入社区、送进家门，为老人们的居家养老生活送去便利。

各地政府也非常支持上门养老这种模式，还有人以上门养老为创业项目，3个月收入87万，可见上门服务与银发经济是非常匹配，且极具发展潜力的。

（百度截图）

（知乎截图）

上门服务也为很多的人提供了自由方便的就业岗位。像上门做饭，除了适合专业厨师，还很适合年纪稍大一些的叔叔阿姨，在家政服务领域就有很多这类群体。还有很多年轻人也以上门做饭、上门喂宠为兼职，从而衍生出了上门代厨、宠物托管师等新兴职业。

总的来说，“上门”这个场景作为服务界的新赛道，可以说是我国服务业精细化发展的体现，其中蕴含着巨大的发展潜力，但能不能发掘出这股潜力，做大做强，还要看未来的发展。

 

关于“上门按摩、理发、做饭，为什么“上门服务”火了？”，你有什么看法？点击下面的链接，一起来聊聊吧~

戳： https://996.pm/7dBdy

#天天问神回复# 「天天神回复」是天天问的一个新栏目，致力于发现天天问小伙伴的精彩语录。抖机灵，大伙儿也是认真的！如果喜欢，记得点击问题链接，和TA一起互动吧，我们也在这里期待你的发言哟~

APP的“防沉迷”提醒功能有必要做吗？

@Mark-ZXL：这和酒桌上，一边劝你别喝了，一边又把你酒杯加满的操作，有什么区别。

关于“抄袭”，作为产品经理，你觉得可耻吗？

@小布：抄的不好叫抄袭，抄的好那叫借鉴。

当面试官问你：为什么选择我们公司？该怎么回答？

@营销圣手：我举个很简单例子，如果你问老婆或者老公，你为什么跟我结婚啊？你老公或者老婆回答，因为我不想娶外地或者嫁外地人，这样离我老家远，不能经常回家看望家人，或者说是外地人文化差异大，不适合我。另外呢，我不喜欢做饭，你做饭挺好的，可以给我做饭。还有，你带孩子也有一套，这样的话我以后不用经常为孩子日常事烦了，这就是我嫁或者娶你原因。

这时你会怎么想？想离婚，对吧，为什么吗，因为居然你的另一半跟你结婚的原因不是爱你。懂了吗，你希望你的另一半跟你结婚的唯一理由是因为爱你，为什么爱你，各种原因。

#相关阅读# 【天天问每周精选】第211期：直播的风口，微信和京东却没有大主播

【天天问每周精选】第210期：用户评价，售后环节的大难题

【天天问每周精选】第209期：识区“垮了”？邀请码不背锅，内容才是关键！

【天天问每周精选】第208期：企业购买服务为什么没有“大众点评”

【天天问每周精选】第207期：我觉得业务方80%的需求都是没必要做的，怎么办？

素材来源：天天问话题精选

「天天问」为人人都是产品经理社区旗下的互助问答模块，致力产品、运营、营销等领域知识的学习交流。

本栏目由 @张小莉 整理编辑发布，欢迎大家踊跃提问，一起交流。

题图来自Unsplash，基于CC0协议

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。

编者按：B端设计常见的风格和配色方案有哪些？本文总结了6种B端设计风格和多个色彩搭配组合。往期回顾：5000字干货！

编者按：B端设计常见的风格和配色方案有哪些？本文总结了6种 B端设计 风格和多个色彩搭配组合。

往期回顾：

5000字干货！超全面的B端设计指南：消息通知 消息通知在我们设计的过程当中非常重要，因为它作为系统与用户之间沟通的桥梁，能够帮助我们提示用户：“目前的操作状态、系统的公告、用户之间的互动内容”，而不同的消息内容，我们需要使用不同的消息通知组件来进行反馈，比如用户与用户之间的互动应该采取什么互动方式？

阅读文章 >

“你的这个页面，一看就不是实际的工作当中的页面”

“你的这个 设计风格 未免也太过于夸张”

“为什么你设计的页面会长这样？”

这是看到很多设计师私聊发给我作品集过后，我的回答。而这种现象，现在越来越多了。很多设计师都拿着做 C 端产品的方式来去设计 B 端的页面，也就导致你做出来的页面始终缺乏 B 端产品的调性。

比如最近改版 薪人薪事，看到很多人在评论区里吐槽做得很丑，虽然确实做得不好看，但尝试让吐槽的人去做设计，没想到给到我的竟然是类似 Dribbble 的这种风格，So...

因此我们今天来说一说，关于 B 端产品，究竟需要什么样的设计风格？什么样的风格能够被大众所接受。

一、视觉重要性 关于视觉风格对整体设计的影响

1. 颜值漂亮即正义

关于 B 端的视觉风格，我一直都秉承着这样一个态度：业务、交互我们先可以不聊，如果你的视觉非常厉害，能够做出风格十分干净的产品页面的话，那 业务、交互 我们都可以先放一放。

因为页面设计的好坏，我们能够一眼分辨，这其实就决定了你的设计下限。即使你不懂业务、不懂交互，至少页面画得好看，那已经超越市面上 80% 的设计师。

那些和我自称资深的设计师，感觉自己视觉还不错，结果把自己的设计页面发出来，我通常都是这个表情

所以设计页面不要你以为好看，要尝试和市面上大多数 B 端产品进行对比才行~

2. 页面复用的程度高

视觉风格，在整个 B 端页面当中一定是高度复用的。

它与移动端设计不太一样：移动端确定了风格过后，我们在不同的页面当中还是会存在风格上的变化。

而在 B 端页面当中，本身就是一个高度复用的页面设计，比如你的表格页、表单页、详情页、配置页、工作台页，它们之间的风格差距非常的小。

因此只要我们能够确定了视觉风格，并验证这个风格本身与我们产品设定基本相同时，那你的视觉风格就不会太差。

2. 高密度的信息展示

信息密度，在视觉风格当中同样非常重要，因为我们在很多网站上看到的视觉风格都是以 「大间距」 的方式来进行展示，但是在实际的工作当中你会发现，这样的大间距的页面只会受到来自同事审批时的“霸凌”。

而出现这个现象的原因是我们在实际的工作当中，信息的密度是非常之高（产品经理恨不得在每一个空白的地方都放上 按钮、文字）因此当我们看到这种风格的页面你是，首先得感觉就是这是一个概念方案，不具备任何的落地效果。因此视觉风格一定是要满足高密度的信息展示。

二、风格类型 常见的视觉风格有哪些

说了那么多，我们来分析一下常见的视觉风格有哪些？

首先说明，以下的视觉风格名称都是 CE 平时沟通时所使用的词汇，切勿较真。

1. 白+灰风格

纯白风格在我们看来就是以：白、灰、分割线 为主的一种视觉风格。

在整个页面当中，首先会通过固定的灰色，去区分不同模块之间的关系，进而划分页面区域。同时通过 主题色 在页面当中进行点缀，进而让整个页面的视线受到引导，从而形成重要信息的页面呈现。

白+灰的设计风格是非常难把握的，因为如果颜色的设定稍稍偏差，就很容易形成 页面发灰、页面没区分 的情况，这里其实就会涉及到字体颜色的设定。

4000+干货！超全面的B端设计指南：字体 在 B 端设计当中，字体往往是出现频率最高的一个“原子”。

阅读文章 >

而关于 白+灰 的风格，其实目前在很多产品当中都能够看到它们的身影，比如：氚云、简道云、Coding、悟空 CRM 等等...

2. 深色导航

如果不想犯错，那你使用深色导航的方式就一定没有问题。

深色导航作为 B 端风格最明显的一种风格，其主要的设计就是将导航菜单部分的设计为深色，进而去区分页面之间的信息关系。

这种方式无论你是顶部导航、侧边导航、还是混合导航，它的风格都是非常固定，并且设计起来难度也相对较低。

而在深色导航的设计过程中，我们要注意不同层级下的深色使用，比如在一个侧边导航当中，我有两个层级的深色，这时候颜色的设定一定要有深浅的区分，这样才能够让用户知道导航的分割。

又比如，在一个混合导航当中，我究竟应该如何设计顶部导航、侧边导航、三级导航之间的关系，通常就会去考虑深浅变化+投影变化。

深色导航能够在很多产品上看到他的身影，比如：ONES、京东云、微盟、有赞、i 人事、小鹅通，因此深色导航也非常的普遍。

3. 飞书风格

其实最近飞书管理后台的改版，将原本的深色导航改版为了一种全新的设计风格。因为在网上对于这种风格的描述还相对较少，因此将其成为 飞书风格。

飞书风格的特点是 将页面当中内容部分的设计突出，其余的导航菜单部分变灰，进而形成一种聚焦于内容的设计形式，它和 白+灰 的风格很像，但是不同的是缺少了分割线与投影等方式进行的大面积分割，这样能够让整体看上去更干净、更整洁。

而关于飞书风格的设计方案， 现在了解到的产品制作成这样的风格还相对较少，不过在我们 3 群的知名群友 沙丁鱼 的花瓣当中，还是能够寻找到一些蛛丝马迹，它用这种风格落地了一整套的页面，看上去效果还不错。我放了一些截图，感兴趣的同学可以放大过后进行查看。

4. 客户端风格

客户端的风格相对来说还是较为少见，因为想要使用这种风格，大概率是要将目前的网页端的产品进行客户端化。客户端风格的特点就是以左侧导航为主，并且将左侧导航的图标进行夸张的呈现。

对于客户端风格，需要了解的是它通常只有一级导航菜单，因此在设计时，我们需要考虑自己的页面是否适合。

客户端的风格，大家可以参考：飞书、钉钉等产品，它们的风格都是以这种页面为主

5. 政企严肃风

政企风格相对来说是一种较难处理的风格，一方面政的要求完全由关键决策领导人的喜好来决定，因此我们在去做设计时，往往不要做得太前沿，考虑更多的是严肃 同时又要 整洁 炫酷 （是的，你没有听错）

因此 ToG 的风格我们没有办法总结，只能说跟着领导喜好走。案例图片也办法放，太敏感大家理解一下。

也可以看看这篇：

如何给政府/国企做设计？收下这份G端产品的设计方法 编者按：政府和国有企业的产品设计和C端、B端有哪些区别？

阅读文章 >

6. 酷炫后台风格

我也见过很多系统是在大屏设计之上的，因此很多业务系统从大众设计师理解的互联网、干净，变为现在的科技、炫酷。

这种风格考验的完完全全就是你是否会用光效、素材

光效：在页面当中，需要有很多光效来进行页面的点缀，比如同一个页面当中，有无光效会存在明显的差异，这就需要你学会在页面当中各个地方考虑光效的使用。比如页面的标题、视觉分割、图标 这些地方的使用后提升整体的视觉效果。

素材：在很多酷炫的风格当中，我们都需要去考虑炫酷素材的使用。因为这是一种能够直接提升视觉风格的最有效的办法。

在整个页面当中，我们可以把页面分为 四个层级，分别是：背景层、素材层、组件层、提示层，在这个四个层级里面素材的使用无疑是能够快速加分的一个选项，比如一个页面当中两张完全不同风格的素材，在使用上的效果可以说的天差地别

虽然酷炫的风格我本身在做设计师并不太喜欢，但是 客户的需求、业务的压力，才是我们做设计的最大动力，而自己是否喜欢则显得并不是那么重要。

类似的3D地图素材生成器：

数据可视化神器！帮你一秒生成三维地图的免费工具NB Maps 大家好，我是灰色执照。

阅读文章 >

三、颜色差异 不同主题颜色如何搭配页面

在整个页面当中我们会将不同的主题色进行区分，而主题色的不同会影响到我们设计思路，因此这里给大家提供一些设计思路。

1. 颜色的整体风格

首先关于颜色，我们主要有：蓝色、红色、绿色、橙色。其中大多数颜色我们都可以通过 白色 + 颜色风格 去做设计

比如橙色，其实就是 橙色+白色 就能去解决，我们可以看纷享销客 它的设计页面

同样，绿色其实就是 绿色+白色 去解决，我们可以去看 神策数据

大家发现他们的页面都是 主题色只占其实一小部分，大多数情况都是以白色页面为主，这样就不会出现颜色冲突的尴尬。

而这里，最复杂的便是红色。

2. 红色

红色是我被问到次数最多的颜色问题。因为在整个页面当中，红色是与我们常使用的 警告、危险 等提示信息，所以这个颜色在我们设计当中是非常难处理的。

无论是页面当中红色与其他颜色的搭配，又或者是要将整体页面呈现出来，都需要你有过处理的经验才行。这里给大家分享两个处理红色主题色的小方法：

① 管理后台品牌独立：因为很多时候，我们 管理后台/B 端业务，可以独立为一个新的品牌颜色，这样首先能够快速传达给用户产品线的变化，其次就能够巧妙化解红色所带来的尴尬。比如淘宝与千牛、京东与京麦。

② 红白搭配：如果第一种方法不能解决，那也就意味着红色确实没办法避免掉，那这时候我们考虑的就是在现有的基础上进行相应的优化。因此我们能选择的，可能就是红白配色，将页面进行绘制。

比如以百度爱番番为例，在品牌上已经确定是一个以红色为主的视觉形象，作为设计师，我们能够去优化的就是红色在整个页面的出现比例和出现位置。

而爱番番考虑的是将页面当中最主要的颜色进行呈现，其他的页面信息弱化，进行首先让用户知道，我们强调的主要操作信息究竟在哪？其次通过蓝色的穿插，能够保证页面当中除了红色为主之外，还会有其他的颜色作为补充（比如页面当中的蓝色）

四、常见误区 在 B 端页面设计时，哪些误区容易犯？

当然在我们设计当中，同样会存在对应误区，每一个误区大家都要竟可能避免

1. 圆角大小

圆角大小在我们设计时，千万不要过大，因为过大的圆角会导致整体的页面非常的“哇塞”。

因为我们在设计时，通常大小锁定在 2px-6px 之间，没有特殊要求一般在 4px 即可，这样能够保证 整体的品牌调性，同时也不会有太多直楞楞的卡片分割

当然在去说圆角的时候，并不是我确定了一个圆角过后所有的页面都要保持一致，你可以在一些需要突出区分的地方，使用不同的圆角大小。

2. 字体大小

之前收到一个同学说，将字体大小设定为：16px、18px、20px，其实我们在实际的工作当中，字体的大小都是有严格限制的，通常为 12、13、14、16、18

除非你的承载设备、使用人群（年龄偏大）发生变化，否者这个字体大小不需要任何调整

3. 少看Dribbble

Dribbble 说实话，一定要少看，并不是说追波的内容不好，其实你能够在 Dribbble 当中学习到很多，比如一些元素的排版、样式上的微创新。

但是在 Dribbble 当中，出现的更多还是夸张的视觉风格，因此建议同学们平时在工作当中尽量少看Dribbble，这样能够让你的产出更偏向实际的工作风格

我平常使用Dribbble都是以了解最新趋势，然后 emmmm，（摊牌了，其实做了 B 端过后，很少再去看 Dribbble 的设计稿了 频率应该是一个月看一次，仅此而已）

其实有时候 Behance 的页面真的要比 Dribbble 好很多，至少能落地一些。

结尾 B 端产品当中的视觉部分，其实对于我们来说就是一个页面的信息排版。排版的规则都已经有了固定的安排，比如：表格页、表单页、详情页、配置页、工作台页，而这些页面只要你能够将页面信息排列清楚，确定一个合理的设计风格，这就是一个非常合格的设计稿。

我们在设计时尽可能控制你的设计欲望，圆角、字体、风格 上进行合理的控制，相信你能做出更好的设计页面。

欢迎关注作者的微信公众号： CE青年Youthce

编者按：B端设计常见的风格和配色方案有哪些？本文总结了6种B端设计风格和多个色彩搭配组合。往期回顾：5000字干货！

编者按：B端设计常见的风格和配色方案有哪些？本文总结了6种 B端设计 风格和多个色彩搭配组合。

往期回顾：

5000字干货！超全面的B端设计指南：消息通知 消息通知在我们设计的过程当中非常重要，因为它作为系统与用户之间沟通的桥梁，能够帮助我们提示用户：“目前的操作状态、系统的公告、用户之间的互动内容”，而不同的消息内容，我们需要使用不同的消息通知组件来进行反馈，比如用户与用户之间的互动应该采取什么互动方式？

阅读文章 >

“你的这个页面，一看就不是实际的工作当中的页面”

“你的这个 设计风格 未免也太过于夸张”

“为什么你设计的页面会长这样？”

这是看到很多设计师私聊发给我作品集过后，我的回答。而这种现象，现在越来越多了。很多设计师都拿着做 C 端产品的方式来去设计 B 端的页面，也就导致你做出来的页面始终缺乏 B 端产品的调性。

比如最近改版 薪人薪事，看到很多人在评论区里吐槽做得很丑，虽然确实做得不好看，但尝试让吐槽的人去做设计，没想到给到我的竟然是类似 Dribbble 的这种风格，So...

因此我们今天来说一说，关于 B 端产品，究竟需要什么样的设计风格？什么样的风格能够被大众所接受。

一、视觉重要性 关于视觉风格对整体设计的影响

1. 颜值漂亮即正义

关于 B 端的视觉风格，我一直都秉承着这样一个态度：业务、交互我们先可以不聊，如果你的视觉非常厉害，能够做出风格十分干净的产品页面的话，那 业务、交互 我们都可以先放一放。

因为页面设计的好坏，我们能够一眼分辨，这其实就决定了你的设计下限。即使你不懂业务、不懂交互，至少页面画得好看，那已经超越市面上 80% 的设计师。

那些和我自称资深的设计师，感觉自己视觉还不错，结果把自己的设计页面发出来，我通常都是这个表情

所以设计页面不要你以为好看，要尝试和市面上大多数 B 端产品进行对比才行~

2. 页面复用的程度高

视觉风格，在整个 B 端页面当中一定是高度复用的。

它与移动端设计不太一样：移动端确定了风格过后，我们在不同的页面当中还是会存在风格上的变化。

而在 B 端页面当中，本身就是一个高度复用的页面设计，比如你的表格页、表单页、详情页、配置页、工作台页，它们之间的风格差距非常的小。

因此只要我们能够确定了视觉风格，并验证这个风格本身与我们产品设定基本相同时，那你的视觉风格就不会太差。

2. 高密度的信息展示

信息密度，在视觉风格当中同样非常重要，因为我们在很多网站上看到的视觉风格都是以 「大间距」 的方式来进行展示，但是在实际的工作当中你会发现，这样的大间距的页面只会受到来自同事审批时的“霸凌”。

而出现这个现象的原因是我们在实际的工作当中，信息的密度是非常之高（产品经理恨不得在每一个空白的地方都放上 按钮、文字）因此当我们看到这种风格的页面你是，首先得感觉就是这是一个概念方案，不具备任何的落地效果。因此视觉风格一定是要满足高密度的信息展示。

二、风格类型 常见的视觉风格有哪些

说了那么多，我们来分析一下常见的视觉风格有哪些？

首先说明，以下的视觉风格名称都是 CE 平时沟通时所使用的词汇，切勿较真。

1. 白+灰风格

纯白风格在我们看来就是以：白、灰、分割线 为主的一种视觉风格。

在整个页面当中，首先会通过固定的灰色，去区分不同模块之间的关系，进而划分页面区域。同时通过 主题色 在页面当中进行点缀，进而让整个页面的视线受到引导，从而形成重要信息的页面呈现。

白+灰的设计风格是非常难把握的，因为如果颜色的设定稍稍偏差，就很容易形成 页面发灰、页面没区分 的情况，这里其实就会涉及到字体颜色的设定。

4000+干货！超全面的B端设计指南：字体 在 B 端设计当中，字体往往是出现频率最高的一个“原子”。

阅读文章 >

而关于 白+灰 的风格，其实目前在很多产品当中都能够看到它们的身影，比如：氚云、简道云、Coding、悟空 CRM 等等...

2. 深色导航

如果不想犯错，那你使用深色导航的方式就一定没有问题。

深色导航作为 B 端风格最明显的一种风格，其主要的设计就是将导航菜单部分的设计为深色，进而去区分页面之间的信息关系。

这种方式无论你是顶部导航、侧边导航、还是混合导航，它的风格都是非常固定，并且设计起来难度也相对较低。

而在深色导航的设计过程中，我们要注意不同层级下的深色使用，比如在一个侧边导航当中，我有两个层级的深色，这时候颜色的设定一定要有深浅的区分，这样才能够让用户知道导航的分割。

又比如，在一个混合导航当中，我究竟应该如何设计顶部导航、侧边导航、三级导航之间的关系，通常就会去考虑深浅变化+投影变化。

深色导航能够在很多产品上看到他的身影，比如：ONES、京东云、微盟、有赞、i 人事、小鹅通，因此深色导航也非常的普遍。

3. 飞书风格

其实最近飞书管理后台的改版，将原本的深色导航改版为了一种全新的设计风格。因为在网上对于这种风格的描述还相对较少，因此将其成为 飞书风格。

飞书风格的特点是 将页面当中内容部分的设计突出，其余的导航菜单部分变灰，进而形成一种聚焦于内容的设计形式，它和 白+灰 的风格很像，但是不同的是缺少了分割线与投影等方式进行的大面积分割，这样能够让整体看上去更干净、更整洁。

而关于飞书风格的设计方案， 现在了解到的产品制作成这样的风格还相对较少，不过在我们 3 群的知名群友 沙丁鱼 的花瓣当中，还是能够寻找到一些蛛丝马迹，它用这种风格落地了一整套的页面，看上去效果还不错。我放了一些截图，感兴趣的同学可以放大过后进行查看。

4. 客户端风格

客户端的风格相对来说还是较为少见，因为想要使用这种风格，大概率是要将目前的网页端的产品进行客户端化。客户端风格的特点就是以左侧导航为主，并且将左侧导航的图标进行夸张的呈现。

对于客户端风格，需要了解的是它通常只有一级导航菜单，因此在设计时，我们需要考虑自己的页面是否适合。

客户端的风格，大家可以参考：飞书、钉钉等产品，它们的风格都是以这种页面为主

5. 政企严肃风

政企风格相对来说是一种较难处理的风格，一方面政的要求完全由关键决策领导人的喜好来决定，因此我们在去做设计时，往往不要做得太前沿，考虑更多的是严肃 同时又要 整洁 炫酷 （是的，你没有听错）

因此 ToG 的风格我们没有办法总结，只能说跟着领导喜好走。案例图片也办法放，太敏感大家理解一下。

也可以看看这篇：

如何给政府/国企做设计？收下这份G端产品的设计方法 编者按：政府和国有企业的产品设计和C端、B端有哪些区别？

阅读文章 >

6. 酷炫后台风格

我也见过很多系统是在大屏设计之上的，因此很多业务系统从大众设计师理解的互联网、干净，变为现在的科技、炫酷。

这种风格考验的完完全全就是你是否会用光效、素材

光效：在页面当中，需要有很多光效来进行页面的点缀，比如同一个页面当中，有无光效会存在明显的差异，这就需要你学会在页面当中各个地方考虑光效的使用。比如页面的标题、视觉分割、图标 这些地方的使用后提升整体的视觉效果。

素材：在很多酷炫的风格当中，我们都需要去考虑炫酷素材的使用。因为这是一种能够直接提升视觉风格的最有效的办法。

在整个页面当中，我们可以把页面分为 四个层级，分别是：背景层、素材层、组件层、提示层，在这个四个层级里面素材的使用无疑是能够快速加分的一个选项，比如一个页面当中两张完全不同风格的素材，在使用上的效果可以说的天差地别

虽然酷炫的风格我本身在做设计师并不太喜欢，但是 客户的需求、业务的压力，才是我们做设计的最大动力，而自己是否喜欢则显得并不是那么重要。

类似的3D地图素材生成器：

数据可视化神器！帮你一秒生成三维地图的免费工具NB Maps 大家好，我是灰色执照。

阅读文章 >

三、颜色差异 不同主题颜色如何搭配页面

在整个页面当中我们会将不同的主题色进行区分，而主题色的不同会影响到我们设计思路，因此这里给大家提供一些设计思路。

1. 颜色的整体风格

首先关于颜色，我们主要有：蓝色、红色、绿色、橙色。其中大多数颜色我们都可以通过 白色 + 颜色风格 去做设计

比如橙色，其实就是 橙色+白色 就能去解决，我们可以看纷享销客 它的设计页面

同样，绿色其实就是 绿色+白色 去解决，我们可以去看 神策数据

大家发现他们的页面都是 主题色只占其实一小部分，大多数情况都是以白色页面为主，这样就不会出现颜色冲突的尴尬。

而这里，最复杂的便是红色。

2. 红色

红色是我被问到次数最多的颜色问题。因为在整个页面当中，红色是与我们常使用的 警告、危险 等提示信息，所以这个颜色在我们设计当中是非常难处理的。

无论是页面当中红色与其他颜色的搭配，又或者是要将整体页面呈现出来，都需要你有过处理的经验才行。这里给大家分享两个处理红色主题色的小方法：

① 管理后台品牌独立：因为很多时候，我们 管理后台/B 端业务，可以独立为一个新的品牌颜色，这样首先能够快速传达给用户产品线的变化，其次就能够巧妙化解红色所带来的尴尬。比如淘宝与千牛、京东与京麦。

② 红白搭配：如果第一种方法不能解决，那也就意味着红色确实没办法避免掉，那这时候我们考虑的就是在现有的基础上进行相应的优化。因此我们能选择的，可能就是红白配色，将页面进行绘制。

比如以百度爱番番为例，在品牌上已经确定是一个以红色为主的视觉形象，作为设计师，我们能够去优化的就是红色在整个页面的出现比例和出现位置。

而爱番番考虑的是将页面当中最主要的颜色进行呈现，其他的页面信息弱化，进行首先让用户知道，我们强调的主要操作信息究竟在哪？其次通过蓝色的穿插，能够保证页面当中除了红色为主之外，还会有其他的颜色作为补充（比如页面当中的蓝色）

四、常见误区 在 B 端页面设计时，哪些误区容易犯？

当然在我们设计当中，同样会存在对应误区，每一个误区大家都要竟可能避免

1. 圆角大小

圆角大小在我们设计时，千万不要过大，因为过大的圆角会导致整体的页面非常的“哇塞”。

因为我们在设计时，通常大小锁定在 2px-6px 之间，没有特殊要求一般在 4px 即可，这样能够保证 整体的品牌调性，同时也不会有太多直楞楞的卡片分割

当然在去说圆角的时候，并不是我确定了一个圆角过后所有的页面都要保持一致，你可以在一些需要突出区分的地方，使用不同的圆角大小。

2. 字体大小

之前收到一个同学说，将字体大小设定为：16px、18px、20px，其实我们在实际的工作当中，字体的大小都是有严格限制的，通常为 12、13、14、16、18

除非你的承载设备、使用人群（年龄偏大）发生变化，否者这个字体大小不需要任何调整

3. 少看Dribbble

Dribbble 说实话，一定要少看，并不是说追波的内容不好，其实你能够在 Dribbble 当中学习到很多，比如一些元素的排版、样式上的微创新。

但是在 Dribbble 当中，出现的更多还是夸张的视觉风格，因此建议同学们平时在工作当中尽量少看Dribbble，这样能够让你的产出更偏向实际的工作风格

我平常使用Dribbble都是以了解最新趋势，然后 emmmm，（摊牌了，其实做了 B 端过后，很少再去看 Dribbble 的设计稿了 频率应该是一个月看一次，仅此而已）

其实有时候 Behance 的页面真的要比 Dribbble 好很多，至少能落地一些。

结尾 B 端产品当中的视觉部分，其实对于我们来说就是一个页面的信息排版。排版的规则都已经有了固定的安排，比如：表格页、表单页、详情页、配置页、工作台页，而这些页面只要你能够将页面信息排列清楚，确定一个合理的设计风格，这就是一个非常合格的设计稿。

我们在设计时尽可能控制你的设计欲望，圆角、字体、风格 上进行合理的控制，相信你能做出更好的设计页面。

欢迎关注作者的微信公众号： CE青年Youthce

双 11 刚刚过去，作为电商设计师的你是不是已经开始准备双 12 的视觉稿了？过了双 12 还有新年主题等一系列设计等着完成，简直令人头大！当然，想要快速完成老板布置的任务，一款趁手的字体是必须的。

双 11 刚刚过去，作为电商设计师的你是不是已经开始准备双 12 的视觉稿了？过了双 12 还有新年主题等一系列设计等着完成，简直令人头大！

当然，想要快速完成老板布置的任务，一款趁手的字体是必须的。

可能每位设计师的字库里都存有很多字体，但是能用到的只有那几个，一是因为字体侵权问题，在设计师交流群里经常可以看到有设计师在询问“XX 字体免费可商用吗？”等问题，尤其作为电商设计师，很多电商产品宣传中使用了版权字体后不得不因为侵权全网下架商品。

二是设计趋势发展太快，虽然如今免费的高素质 中文字体 越来越多了，但老板、客户们的要求也千变万化，使得这些字体已不能再满足大家日益增长的字体需求。

所以，献给设计师们的新年礼物来啦！

由字绘中国发起，新零售健康轻食品牌鲨鱼菲特联合优设与字由，为广大设计师特推出了一款专为健康而生，电商应用场景极强的优质字体—— 优设鲨鱼菲特健康体 。

近两年优设也陆续发布了 4 款 免费字体 ，比如速度感和力量感兼具的「优设标题黑」、电商领域的宠儿「优设好身体」、风格可爱的「优设字由棒棒体」、标题黑的升级版「优设标题圆」，都成为了设计师们字体库中必不可少的宠儿。

「优设标题黑」官网下载！ 「优设标题黑」请从优设官网下载，我们会将最新字体版本更新在此，大家记得收藏本页面。

阅读文章 >

优设好身体开放下载！优设网出品的第二套免费可商用字体 2020年元旦前一天，我们发布了第一套免费可商用字体《优设标题黑》，点此下载： 字体一经发布便收获了无数好评，从人民日报、观察者网等官方媒体，到说唱新时代、青春有你等娱乐综艺，以及快手、网易云、QQ音乐等大众App，应用案例随处可见。

阅读文章 >

优设字由棒棒体开放下载！优设网出品的第3套免费可商用字体 2020 年，优设连续发布了两款备受好评的免费可商用字体：优设标题黑和优设好身体。

阅读文章 >

优设标题圆开放下载！优设网出品的第4套免费可商用字体 从「优设标题黑」发布至今已有两年多，在这款国民级字体发布后，优设马不停蹄，集结了团队的中坚设计师，继续发布了电商领域的宠儿「优设好身体」和另一个风格可爱的「优设字由棒棒体」。

阅读文章 >

在今年即将结束之际，优设及字由共同设计，并联合鲨鱼菲特品牌再次为大家推出的这款鲨鱼菲特健康体，是优设好身体的升级版，造型上要比优设好身体更具有辨识度，设计上更加贴近健康品牌附有的亲和力和现代感，不仅会成为电商设计的又一大助力，更体现了当下追求健康的年轻用户群体特性。

一、字体获取方式 前往字由官网（ www.hellofont.cn ）下载字由客户端 （Mac 版、Win 版自行选择）； 字由安装成功后，开启字由，打开 PS、AI 等设计软件，选择文本所在图层后，在字由客户端搜“ 优设鲨鱼菲特健康体 ”，点击右侧按钮激活，即可免费使用，安全高效。 二、免费商用授权介绍

三、字体设计介绍与应用 字体设计之初是作为健康轻食品牌“鲨鱼菲特”的品牌 logo 去创作设计的。在符合当下追求健康的年轻用户群体调性的同时保持了品牌亲和力。

现整套字体在原有圆体圆润的外观和优美的弧度下，对字形、笔画细节进行再设计，结构纵向拉长，体现健康体态的纤细匀称感；同时在一些笔划转角、弧度控制曲线让细节之处富有一些硬挺的视觉感受。使字体整体风格更轻快时尚又不失精致与稳重感。

应用效果展示：

电商页面应用展示：

文字组展示：

LOGO 字体展示：

鲨鱼菲特品牌是「常温即食鸡胸肉」品类开创者，连续五年全网鸡胸肉销量第一的品牌。目前累计用户已经超过 1200 万人，深受 Z 时代年轻用户喜爱。

正如鲨鱼菲特品牌合伙人，字绘中国主理人徐郑冰一样，一直在中国汉字领域坚持创作，对于字体有自己的深入理解。希望借由这次与优设和字由的合作，再次为新零售领域贡献自己的一份力量，助力健康新消费经济腾飞。

双 11 刚刚过去，作为电商设计师的你是不是已经开始准备双 12 的视觉稿了？过了双 12 还有新年主题等一系列设计等着完成，简直令人头大！当然，想要快速完成老板布置的任务，一款趁手的字体是必须的。

双 11 刚刚过去，作为电商设计师的你是不是已经开始准备双 12 的视觉稿了？过了双 12 还有新年主题等一系列设计等着完成，简直令人头大！

当然，想要快速完成老板布置的任务，一款趁手的字体是必须的。

可能每位设计师的字库里都存有很多字体，但是能用到的只有那几个，一是因为字体侵权问题，在设计师交流群里经常可以看到有设计师在询问“XX 字体免费可商用吗？”等问题，尤其作为电商设计师，很多电商产品宣传中使用了版权字体后不得不因为侵权全网下架商品。

二是设计趋势发展太快，虽然如今免费的高素质 中文字体 越来越多了，但老板、客户们的要求也千变万化，使得这些字体已不能再满足大家日益增长的字体需求。

所以，献给设计师们的新年礼物来啦！

由字绘中国发起，新零售健康轻食品牌鲨鱼菲特联合优设与字由，为广大设计师特推出了一款专为健康而生，电商应用场景极强的优质字体—— 优设鲨鱼菲特健康体 。

近两年优设也陆续发布了 4 款 免费字体 ，比如速度感和力量感兼具的「优设标题黑」、电商领域的宠儿「优设好身体」、风格可爱的「优设字由棒棒体」、标题黑的升级版「优设标题圆」，都成为了设计师们字体库中必不可少的宠儿。

「优设标题黑」官网下载！ 「优设标题黑」请从优设官网下载，我们会将最新字体版本更新在此，大家记得收藏本页面。

阅读文章 >

优设好身体开放下载！优设网出品的第二套免费可商用字体 2020年元旦前一天，我们发布了第一套免费可商用字体《优设标题黑》，点此下载： 字体一经发布便收获了无数好评，从人民日报、观察者网等官方媒体，到说唱新时代、青春有你等娱乐综艺，以及快手、网易云、QQ音乐等大众App，应用案例随处可见。

阅读文章 >

优设字由棒棒体开放下载！优设网出品的第3套免费可商用字体 2020 年，优设连续发布了两款备受好评的免费可商用字体：优设标题黑和优设好身体。

阅读文章 >

优设标题圆开放下载！优设网出品的第4套免费可商用字体 从「优设标题黑」发布至今已有两年多，在这款国民级字体发布后，优设马不停蹄，集结了团队的中坚设计师，继续发布了电商领域的宠儿「优设好身体」和另一个风格可爱的「优设字由棒棒体」。

阅读文章 >

在今年即将结束之际，优设及字由共同设计，并联合鲨鱼菲特品牌再次为大家推出的这款鲨鱼菲特健康体，是优设好身体的升级版，造型上要比优设好身体更具有辨识度，设计上更加贴近健康品牌附有的亲和力和现代感，不仅会成为电商设计的又一大助力，更体现了当下追求健康的年轻用户群体特性。

一、字体获取方式 前往字由官网（ www.hellofont.cn ）下载字由客户端 （Mac 版、Win 版自行选择）； 字由安装成功后，开启字由，打开 PS、AI 等设计软件，选择文本所在图层后，在字由客户端搜“ 优设鲨鱼菲特健康体 ”，点击右侧按钮激活，即可免费使用，安全高效。 二、免费商用授权介绍

三、字体设计介绍与应用 字体设计之初是作为健康轻食品牌“鲨鱼菲特”的品牌 logo 去创作设计的。在符合当下追求健康的年轻用户群体调性的同时保持了品牌亲和力。

现整套字体在原有圆体圆润的外观和优美的弧度下，对字形、笔画细节进行再设计，结构纵向拉长，体现健康体态的纤细匀称感；同时在一些笔划转角、弧度控制曲线让细节之处富有一些硬挺的视觉感受。使字体整体风格更轻快时尚又不失精致与稳重感。

应用效果展示：

电商页面应用展示：

文字组展示：

LOGO 字体展示：

鲨鱼菲特品牌是「常温即食鸡胸肉」品类开创者，连续五年全网鸡胸肉销量第一的品牌。目前累计用户已经超过 1200 万人，深受 Z 时代年轻用户喜爱。

正如鲨鱼菲特品牌合伙人，字绘中国主理人徐郑冰一样，一直在中国汉字领域坚持创作，对于字体有自己的深入理解。希望借由这次与优设和字由的合作，再次为新零售领域贡献自己的一份力量，助力健康新消费经济腾飞。

从页面开始思考确实是很多产品经理和设计师的思维习惯，但那很有可能是一种不良习惯。现在，信息流、大弹窗、半浮层等等这些产品界面形式的发展，在逐渐消解用户的页面跳转体验。所以，如果我们还在单个页面、单个页面地提供设计方案，那很有可能并不是最佳方案。

从页面开始思考确实是很多产品经理和设计师的思维习惯，但那很有可能是一种不良习惯。

现在，信息流、大弹窗、半浮层等等这些产品界面形式的发展，在逐渐消解用户的页面跳转体验。所以，如果我们还在单个页面、单个页面地提供设计方案，那很有可能并不是最佳方案。

页面，是 UX/UI 设计师理解产品，进入设计的方式，但长期用页面来思考设计问题，成就了 UX 设计师的自我束缚的思维盒子。

就像 Ralph Ammer 创作的这个动态图形，我们在相同的框架下思考和学习，这让我们快速入门和成长。但成长到一定阶段，就需要打破这个思维的盒子。但是你如果身处这个盒子之中，想要 Think out of box，是非常困难的。

二维生物无法像三维生物一样思考。很有可能，真正的好的设计方案其实是在你当前苦苦思考的这个页面之外。

更多 设计思维 ：

这 10 位顶尖的日本设计师，有哪些私藏的设计思维？ 优秀的设计师是怎样构思设计方案的？

阅读文章 >

页面，是一个有明确边界的二维平面载体。我们现在之所以还会觉得以页面来思考问题奏效，是因为手机和电脑屏幕是平面的。这个平面的载体，很有可能在可见的未来得到颠覆。

元宇宙可能太远，就在 VR 虚拟现实界面设计中，你觉得“页面”还会存在吗？

1. 设计职位的名称扰乱了设计师的心智，跳出单页思维框架，才能实现能力进阶

有很长一段时间，我总是喜欢思考一些最根本的问题，并试图对这些问题给出一个自己的答案。

比如，人怎样活着才算有意义？设计的价值到底在哪里？上班打工是为了做对的事情还是为了做老板认为对的事情……类似这样的问题中，有几个我很早就有了答案。其中有两个是：

归根结底，交互设计设计的是什么？视觉设计设计的是什么？

这两个问题，我五年前的答案是交互设计设计的是用户行为，视觉设计设计的是信息和情感。现在看起来，这个答案看上去也并没有什么问题。

我不知道各位做设计的朋友怎么看，问上面那样的问题会不会很无聊，可能明摆着的：UI 设计和 UX 设计设计的就是一个个页面，视觉设计设计的就是 banner、海报、开屏、长图。

以媒介的角度来思考设计，会有书籍装帧设计、UI 设计、3D 设计、IP 形象设计、VI 设计等等这样的门类。这种命名方式是以最终的交付节点而命名的，因为最终的交付媒介是 UI 所以我们就叫 UI 设计师。往往以媒介来命名的设计工作比较直接、也更方便入门，所以很多更资深的设计师在设计能力提升之后更愿意换一个其他的名字。比如做 logo 设计的会把自己叫做“品牌设计师”，后者一听，就感觉大了很多，也难了很多，也更接近设计的本质。

那么 UX 设计/用户体验设计呢？我们无法在最终交付节点交付明确的用户体验，因为用户体验不是一个具体的媒介，而是用户的感受，并且非常不可控。

UX 设计/用户体验设计（或品牌设计）更像是一种以设计出发点命名的职业，含义应该是为了塑造好的用户体验（或品牌体验）而进行设计工作的设计师。所以这个讲法本身是可以跨越媒介的，也是跨学科的。理论上，如果你可以做好一个在线就医的服务体验设计，也可以做好一个线下医院的就医服务体验设计。理论上，如果你可以成功地设计出一个打动用户的品牌形象，也应该懂得如何根据业务目标进行品牌营销 campaign 的策划。否则我们懂的就只是皮毛。

现在也有公司在使用“产品设计师”这样的职位，这个职位名称我觉得要比 UI 设计、用户体验设计都要好。因为它既不会让设计师局限在一张张 UI 界面上，也不会让设计师在“用户体验”这个又大又虚的词汇中迷失。

2. 警惕“ 页面思维 ”

UX 设计、UI 设计的前身叫做网页设计，PC 网页设计时代也讲用户体验，User Friendly 这样的理念在 PC 时代就是有的。在 UI 设计起始之时，设计师们习惯以页面为单位来理解需求、展开方案、进行交付。在 PC 时代，很多承接网站设计的设计公司也都是以页面为单位来计费，那时候讲的“页面”背后的含义其实是“网页”（Web Page），很多公司招聘设计师的 title 也是“网页设计师”。

虽然现在设计的名词变化了，但设计师仍然会以“页面”为载体来输出自己的设计交付物，时间一长，工具都会影响思维，所以设计师就自然而然的用“页面”来思考问题。

与此同时，随着智能手机和移动应用（App）的发展，iOS 和安卓迅速迭代自己的设计系统，在这一迭代过程中产品应用的设计与研发方式都得到了快速的发展，在 Apple HIG 和安卓 MD 的设计规范中逐渐取消了页面（page）这一概念（或者从一开始就没有，待考证）。

设计师和产品经理在谈到页面的时候，往往想到的是一个个单独的页面。但平台级的设计系统以及开发工程师们已经不这么思考问题了。

walling

比如我们看 Walling 这样优秀的产品设计，他强调 Folder、Wall、Section、Brick 这样的层级概念，而不强调 Page。当然你也可以把 Wall 理解为 Page，如果一旦这样理解，那就陷入到了“好，我现在要创造一个页面，然后用文件夹把页面归类一下”这样的思维里。

3. 原子设计理论中被忽视的中间步骤

早在 2013 年，前端工程师 Brad Forst 将原子理论运用在界面设计中，形成一套设计系统，包含 5 个层面：原子、分子、组织、模板、页面。原子理论时至今日在国内的 UX 设计领域得到广泛应用，在讲到设计规范的时候，90%以上的 UI 设计师的作品集里，你几乎都可以看到这张图。

原子理论让 UI 设计回到了界面设计的第一性来思考问题，通过颜色、间距、文本、圆角等最最基础的设计元素来逐渐塑造设计调性、建立设计秩序。

但大多数团队基本只做到了原子到分子，跳过了更关键的部分直接去组成页面了。但其实我觉得，原子理论最中间的“组织”，是与产品/业务联系更紧密、更能够发挥设计价值的部分。而在这部分，大部分设计团队投入的普遍较少。从而还是陷入了“原子分子组成页面，页面组成产品”的思维之中。

如果你认为是一张张页面组成了产品，那就说明你一直是在以“页面思维”来思考产品。你可以用页面思维来理解一个网站，但不能以页面思维来理解一个工具类 App、一个平台类产品。

Brad Forst 在 2013 年画这张图的时候还是把设计的落脚点放到了“页面(page)”上，因为他是一个前端工程师，并不负责客户端的开发工作。如果我们放着客户端的规范不管，拿着前端工程师的理论去跟客户端工程师去沟通，是不是有点不妥呢。因为时至今日，我们翻一翻 Apple HIG，根本找不到 Page 这个东西。

所以我们要不要想一想，9 年前提出的原子设计理论，现在是不是已经过时了呢？

上万字干货！设计师必读的原子设计完整指南 「我们不设计页面，我们设计构成元素的系统。

阅读文章 >

4. “页面思维”的弊端

如果我们以习惯以“页面思维”来理解产品结构，以“页面思维”来思考用户任务，我觉得可能会存在几个弊端：

① 对用户任务的关注度降低

如果以单个页面来思考问题，容易忽略页面与页面之间的交互关系。用户完成任务是需要跨页面完成的；

② 对产品架构的理解单一

树状架构是容易理解的，但真实的产品架构是网状的；

③ 思考问题表面化

由内而外的思考没问题，由表及里的思考也没问题。但如果从表面思考，也从表面产出，只看到水面上的冰山一角，认为那就是全部，可能就会有问题；

④ 设计创造性力受限

Think out of box，页面是一个二维的有限的画布，盯着这个画布容易受到思维限制，妄图在这个有限的平面里解决所有问题是不切实际的。因为也有可能真正对的解决方案并不需要这个页面。

以上。

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

从页面开始思考确实是很多产品经理和设计师的思维习惯，但那很有可能是一种不良习惯。现在，信息流、大弹窗、半浮层等等这些产品界面形式的发展，在逐渐消解用户的页面跳转体验。所以，如果我们还在单个页面、单个页面地提供设计方案，那很有可能并不是最佳方案。

从页面开始思考确实是很多产品经理和设计师的思维习惯，但那很有可能是一种不良习惯。

现在，信息流、大弹窗、半浮层等等这些产品界面形式的发展，在逐渐消解用户的页面跳转体验。所以，如果我们还在单个页面、单个页面地提供设计方案，那很有可能并不是最佳方案。

页面，是 UX/UI 设计师理解产品，进入设计的方式，但长期用页面来思考设计问题，成就了 UX 设计师的自我束缚的思维盒子。

就像 Ralph Ammer 创作的这个动态图形，我们在相同的框架下思考和学习，这让我们快速入门和成长。但成长到一定阶段，就需要打破这个思维的盒子。但是你如果身处这个盒子之中，想要 Think out of box，是非常困难的。

二维生物无法像三维生物一样思考。很有可能，真正的好的设计方案其实是在你当前苦苦思考的这个页面之外。

更多 设计思维 ：

这 10 位顶尖的日本设计师，有哪些私藏的设计思维？ 优秀的设计师是怎样构思设计方案的？

阅读文章 >

页面，是一个有明确边界的二维平面载体。我们现在之所以还会觉得以页面来思考问题奏效，是因为手机和电脑屏幕是平面的。这个平面的载体，很有可能在可见的未来得到颠覆。

元宇宙可能太远，就在 VR 虚拟现实界面设计中，你觉得“页面”还会存在吗？

1. 设计职位的名称扰乱了设计师的心智，跳出单页思维框架，才能实现能力进阶

有很长一段时间，我总是喜欢思考一些最根本的问题，并试图对这些问题给出一个自己的答案。

比如，人怎样活着才算有意义？设计的价值到底在哪里？上班打工是为了做对的事情还是为了做老板认为对的事情……类似这样的问题中，有几个我很早就有了答案。其中有两个是：

归根结底，交互设计设计的是什么？视觉设计设计的是什么？

这两个问题，我五年前的答案是交互设计设计的是用户行为，视觉设计设计的是信息和情感。现在看起来，这个答案看上去也并没有什么问题。

我不知道各位做设计的朋友怎么看，问上面那样的问题会不会很无聊，可能明摆着的：UI 设计和 UX 设计设计的就是一个个页面，视觉设计设计的就是 banner、海报、开屏、长图。

以媒介的角度来思考设计，会有书籍装帧设计、UI 设计、3D 设计、IP 形象设计、VI 设计等等这样的门类。这种命名方式是以最终的交付节点而命名的，因为最终的交付媒介是 UI 所以我们就叫 UI 设计师。往往以媒介来命名的设计工作比较直接、也更方便入门，所以很多更资深的设计师在设计能力提升之后更愿意换一个其他的名字。比如做 logo 设计的会把自己叫做“品牌设计师”，后者一听，就感觉大了很多，也难了很多，也更接近设计的本质。

那么 UX 设计/用户体验设计呢？我们无法在最终交付节点交付明确的用户体验，因为用户体验不是一个具体的媒介，而是用户的感受，并且非常不可控。

UX 设计/用户体验设计（或品牌设计）更像是一种以设计出发点命名的职业，含义应该是为了塑造好的用户体验（或品牌体验）而进行设计工作的设计师。所以这个讲法本身是可以跨越媒介的，也是跨学科的。理论上，如果你可以做好一个在线就医的服务体验设计，也可以做好一个线下医院的就医服务体验设计。理论上，如果你可以成功地设计出一个打动用户的品牌形象，也应该懂得如何根据业务目标进行品牌营销 campaign 的策划。否则我们懂的就只是皮毛。

现在也有公司在使用“产品设计师”这样的职位，这个职位名称我觉得要比 UI 设计、用户体验设计都要好。因为它既不会让设计师局限在一张张 UI 界面上，也不会让设计师在“用户体验”这个又大又虚的词汇中迷失。

2. 警惕“ 页面思维 ”

UX 设计、UI 设计的前身叫做网页设计，PC 网页设计时代也讲用户体验，User Friendly 这样的理念在 PC 时代就是有的。在 UI 设计起始之时，设计师们习惯以页面为单位来理解需求、展开方案、进行交付。在 PC 时代，很多承接网站设计的设计公司也都是以页面为单位来计费，那时候讲的“页面”背后的含义其实是“网页”（Web Page），很多公司招聘设计师的 title 也是“网页设计师”。

虽然现在设计的名词变化了，但设计师仍然会以“页面”为载体来输出自己的设计交付物，时间一长，工具都会影响思维，所以设计师就自然而然的用“页面”来思考问题。

与此同时，随着智能手机和移动应用（App）的发展，iOS 和安卓迅速迭代自己的设计系统，在这一迭代过程中产品应用的设计与研发方式都得到了快速的发展，在 Apple HIG 和安卓 MD 的设计规范中逐渐取消了页面（page）这一概念（或者从一开始就没有，待考证）。

设计师和产品经理在谈到页面的时候，往往想到的是一个个单独的页面。但平台级的设计系统以及开发工程师们已经不这么思考问题了。

walling

比如我们看 Walling 这样优秀的产品设计，他强调 Folder、Wall、Section、Brick 这样的层级概念，而不强调 Page。当然你也可以把 Wall 理解为 Page，如果一旦这样理解，那就陷入到了“好，我现在要创造一个页面，然后用文件夹把页面归类一下”这样的思维里。

3. 原子设计理论中被忽视的中间步骤

早在 2013 年，前端工程师 Brad Forst 将原子理论运用在界面设计中，形成一套设计系统，包含 5 个层面：原子、分子、组织、模板、页面。原子理论时至今日在国内的 UX 设计领域得到广泛应用，在讲到设计规范的时候，90%以上的 UI 设计师的作品集里，你几乎都可以看到这张图。

原子理论让 UI 设计回到了界面设计的第一性来思考问题，通过颜色、间距、文本、圆角等最最基础的设计元素来逐渐塑造设计调性、建立设计秩序。

但大多数团队基本只做到了原子到分子，跳过了更关键的部分直接去组成页面了。但其实我觉得，原子理论最中间的“组织”，是与产品/业务联系更紧密、更能够发挥设计价值的部分。而在这部分，大部分设计团队投入的普遍较少。从而还是陷入了“原子分子组成页面，页面组成产品”的思维之中。

如果你认为是一张张页面组成了产品，那就说明你一直是在以“页面思维”来思考产品。你可以用页面思维来理解一个网站，但不能以页面思维来理解一个工具类 App、一个平台类产品。

Brad Forst 在 2013 年画这张图的时候还是把设计的落脚点放到了“页面(page)”上，因为他是一个前端工程师，并不负责客户端的开发工作。如果我们放着客户端的规范不管，拿着前端工程师的理论去跟客户端工程师去沟通，是不是有点不妥呢。因为时至今日，我们翻一翻 Apple HIG，根本找不到 Page 这个东西。

所以我们要不要想一想，9 年前提出的原子设计理论，现在是不是已经过时了呢？

上万字干货！设计师必读的原子设计完整指南 「我们不设计页面，我们设计构成元素的系统。

阅读文章 >

4. “页面思维”的弊端

如果我们以习惯以“页面思维”来理解产品结构，以“页面思维”来思考用户任务，我觉得可能会存在几个弊端：

① 对用户任务的关注度降低

如果以单个页面来思考问题，容易忽略页面与页面之间的交互关系。用户完成任务是需要跨页面完成的；

② 对产品架构的理解单一

树状架构是容易理解的，但真实的产品架构是网状的；

③ 思考问题表面化

由内而外的思考没问题，由表及里的思考也没问题。但如果从表面思考，也从表面产出，只看到水面上的冰山一角，认为那就是全部，可能就会有问题；

④ 设计创造性力受限

Think out of box，页面是一个二维的有限的画布，盯着这个画布容易受到思维限制，妄图在这个有限的平面里解决所有问题是不切实际的。因为也有可能真正对的解决方案并不需要这个页面。

以上。

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

回顾互联网发展历程，从桌面端拨号上网到高速5G的移动互联网，随时随地互联互通对现实生活的影响力也逐步提升，虚拟与现实的距离也逐渐缩小。未来数字世界在沉浸感、参与度、永续性等方面对体验提出了更高的要求。 我们尝试把Roblox在招股书里描述的8个关键词：“身份，

随着互联网的发展，数字设计逐渐在向我靠近，虚拟与现实不再是一道墙，试从虚拟世界的5个视角，对设计挑战和机遇进行总结和预测。本文从体验角度，对数字未来设计趋势进行分析，一起来看看。

回顾互联网发展历程，从桌面端拨号上网到高速5G的移动互联网，随时随地互联互通对现实生活的影响力也逐步提升，虚拟与现实的距离也逐渐缩小。未来数字世界在沉浸感、参与度、永续性等方面对体验提出了更高的要求。

我们尝试把Roblox在招股书里描述的8个关键词：“身份，朋友，沉浸感，多样性，低延迟，随地，经济，文明”进行提炼，从虚拟世界的5个视角，对设计挑战和机遇进行总结和预测。

本文是系列文的第四篇：体验篇。

一、虚拟世界感知体验：更临场和沉浸 在现实世界中，人类通过视觉、听觉、触觉、嗅觉和味觉感知真实的世界。同样在虚拟世界中，要做到沉浸感和临场感需要在感知层面缩小物理世界和虚拟世界之间的差距。五种感官中，视觉、听觉和触觉所占比例最大，虚拟世界的虚拟体验也主要集中在前三种。

人类感知外界信息的途径

1. 视觉：裸眼真实面对面 虚拟世界在感知层面最先要突破的就是视觉层面的极度真实感，毕竟这占据着人类信息感知83%的压倒性比例。谷歌Starline是一个软硬件结合的技术项目，目的是实现远方的人们之间的面对面交流。Starline使用摄像头捕获用户，进行虚拟世界的三维重建。通过实时数据压缩和传输，最后使用一种光场显示系统，让用户可以在裸眼状态下感受面对面的真实感。

2. 听觉：置身空间环绕声场 虚拟世界的临场感仅靠视觉是远远不够的。为了实现更逼真的效果，还原人耳的听觉效果、塑造360度的空间音频体验可以被认为是还原临场的关键。声音的临场感来源于真实世界的听觉环境：我们时刻都被声音笼罩，无论我们是否有意识地倾听。这种无处不在的声音能够提供重要的位置和空间线索，对于声音的感知能够提供给我们在特定情况下的位置信息。

在虚拟世界的架构中，声音能够通过空间音效来呈现，以还原现实的声音效果，声音融入故事情节，并将虚拟空间从平面感扩展到三维的立体感。3D的空间音频创造出比单独的视觉效果更广阔的认知领域，让用户完全沉浸在音效空间之中。

举个例子，当你在雷雨中，传统的游戏音效让你仅仅感受到雷声在你身边，但在虚拟世界世界里，雷声从天上传来，雨声喧嚣不绝，你还能够听到雨滴落在地面和头顶的声音。这样逼真的音效有助于让游戏玩家沉浸在更熟悉的情景中。

3. 触觉：在空气中感受触摸 在PC和手机已经非常普遍的现在，人们感受过游戏中的震动特效，或者手机静音时的嗡嗡声。但这些触觉震动对虚拟世界来说还过于简单，无法复制触摸真实世界对象并与之交互的丰富感觉。因此想要将虚拟空间打造为“现实环境”，触觉也是关键的感官之一。

我们无时无刻不在触摸物品，而虚拟世界里的触觉反馈是一种力的反馈，能够将虚拟接触转换为物理的感知。这是一种特殊的触觉反馈形式，通过技术，简单的穿戴设备就可以让身体感受到不同层次的触觉。

目前，可用于各种应用的薄型触觉手套和热显示器已经逐渐问世。即由硅胶和电极制成的柔软、灵活的人造皮肤，通过自我监控以提供准确的信息，使用微电流技术将逼真的触摸感受反馈给用户。这种手套能够通过上百个力反馈点来感受虚拟物体的形状、纹理和运动、尺寸、重量、冲击力，甚至温度。

专栏作家

晓吾，微信公众号：体验主义，人人都是产品经理专栏作家。腾讯高级交互设计师，前创新工场、新浪微博交互设计师。专注社交创新与娱乐产品设计。

本文由 @晓吾 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议。

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。

给作者打赏，鼓励TA抓紧创作！

{{{path> 赞赏