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

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

首篇万字长文献给你。

平面设计篇：

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

阅读文章 >

前言

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

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

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

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

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

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

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

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

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

点、线、面与康定斯基

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

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

从法学生到顶尖艺术家：抽象先驱瓦西里·康定斯基 瓦西里·康定斯基（Василий Кандинский，格里历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的这次“改头换面”中被彻底应用及实现，并且对设计圈影响至今。

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

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

此篇完。

今天这篇文章比较偏基础，但胜在讲的很全面，自己做项目的时候也可以拿来自检。关于字体排版的方方面面都讲到了一些，尤其有一点是关于字体和字型的定义让我学到不少新知识，之前我在翻译的过程中没太在意这 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 标准。

阅读文章 >

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

今天这篇文章比较偏基础，但胜在讲的很全面，自己做项目的时候也可以拿来自检。关于字体排版的方方面面都讲到了一些，尤其有一点是关于字体和字型的定义让我学到不少新知识，之前我在翻译的过程中没太在意这 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 标准。

阅读文章 >

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

编者按：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，页面是一个二维的有限的画布，盯着这个画布容易受到思维限制，妄图在这个有限的平面里解决所有问题是不切实际的。因为也有可能真正对的解决方案并不需要这个页面。

以上。

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