首页

7大色彩技巧让你界面更吸睛

杰睿

在视觉设计的世界里,色彩不仅仅是一种装饰,它是传达情感、影响情绪和吸引用户的关键。本文深入探讨了色彩在界面设计中的重要性,揭示了如何通过色彩的定义、属性、模型以及在不同场景下的应用来增强设计的吸引力。

色彩在我们日常设计中起着定生死的作用,它是设计的灵魂,舒适的色彩搭配可以让设计师一遍定稿,感觉在自己的设计生涯中,大部分都是在与色彩的博弈中度过的,虽然客户可能不懂色彩原理,可是客户天生都是色彩的感受家,什么样的色彩搭配美,通常他们瞄一眼就会有定论,不用你去辩解太多,不好的搭配,纵使有千万种理由,也说服不了客户,所以好好研究色彩以及每一种色彩传递的情感对我们做好设计至关重要。

目录

一、 色彩的定义

二、 色彩的三属性

三、 色彩的三种常见模型

四、 色彩的语意及它的应用

五、 不同场景下的色彩应用

六、 色彩在B端设计中的作用

七、 B端色彩设计使用的原则

一、色彩的定义?

1、物理学角度

色彩是光的属性,当光波通过物体时,物体会吸收某些波长的光,而反射或透射其他波长的光,这些被反射或透射的光波长度决定了我们看到的颜色。

2、心理学角度

色彩是人脑对光波长的视觉感知,不同的波长刺激视网膜上不同类型的感光细胞,进而产生不同的色彩感觉。

3、 艺术学角度

色彩是艺术创作的重要元素,它不仅关乎视觉感受,还与情感、文化、象征意义相关联。

4、 设计学角度

在设计领域,色彩是传达信息、影响情绪和创造美感的关键工具。

5、 计算机科学角度

在数字图像处理中,色彩通常通过颜色模型(如RGB、CMYK等)来定义,这些模型通过不同比例的原色或色料混合来表示各种颜色。

二、色彩的三属性

1、色相

色相是指不同颜色之间的差别,即不同颜色的表象和名称,每个颜色都有自己的专属ID,如红、橙、黄、绿、青、蓝、紫等。不同的色别都可用光谱中的波长来表示,人的眼睛可分辨出的色别有180种左右。

2、明度

明度是指色彩的明暗程度。一般在反光率相同的情况下,不同色别的明暗程度不同。如黄色光比红色光更明亮,而红色光则比青色光要明亮。

同时,同一色相在受光强弱或者物体对光的吸收、反射性能不同的情况下,会呈现不同的明暗变化和差异。

3、饱和度(纯度)

饱和度(纯度)是指同一色别的纯净度和鲜明度的变化。从色光的角度而言,光的波长单一程度越高,饱和度就会越高;不同色别所达到的饱和度不同,一般情况下,红色的纯度可达到最高,绿色的则相对较低;同一色相深浅不同的颜色有不同的饱和度;黑白色光的渗入会导致饱和度和明度发生变化;通常,照明光线的性质、物体表面结构对光线吸收与反射的性能等因素影响饱和度。

三、色彩三种常见模型

1、HSB模型

HSB模型也叫HSV模型,其中H代表色相,即颜色的种类;S代表饱和度,即颜色的纯度;B(V)代表亮度,即颜色的明亮程度。

这种色彩模型是我日常在的设计工作中用的最多的一种色彩模型,如果在同色系中如果只想让他们有细微的变化,我通常会通过调节S和B的百分比数值来达到自己想要的目的。

以上就是我在设计项目中,运用该色彩模型做的一个实战,项目中用到了一个图形,需要用同色系来表达,我保持了H色值的不变,让S值和B值都发生着微妙的不同,于是就产生了四五种同色系的绿色,该色彩模型特别的好使,也鼓励大家多在实战中运用这样的色彩模型,简单实用。

  • H色相: Hue,以角度(0°-360°)表示
  • S饱和度: Saturation,以百分比值(0%-100%)表示
  • B/V 亮度: Brightness 或 Value,以百分比值(0%-100%)表示

2、RGB模型

RGB是从颜色发光的原理来设计定的,通俗点说它的颜色混合方式就好像有红、绿、蓝三盏灯,当它们的光相互叠合的时候,色彩相混,而亮度却等于三者亮度之总和,越混合亮度越高,即加法混合。

红、绿、蓝三个颜色通道每种色各分为256阶亮度,在0时“灯”最弱——是关掉的,而在255时“灯”最亮。当三色灰度数值相同时,产生不同灰度值的灰色调,即三色灰度都为0时,是最暗的黑色调;三色灰度都为255时,是最亮的白色调。

  • R红:Red,以数值(0-255)表示
  • G绿:Green,以数值(0-255)表示
  • B蓝:Blue,以数值(0-255)表示

3、CMYK模型

虽然RGB模型色彩更加的丰富,但是很多颜色不能完全打印出来,于是CMYK模型就成了打印、印刷的不二选择。C是青、M是品红、Y是黄、K是黑,通过颜料反射和吸收光线来显色。

记得之前自己从事平面工作的时候,就经常要用到CMYK模式,因为印出来的效果偏差是最小的,是最靠近设计效果图的。

通过对比,我们发现RGB色彩模型颜色显示上确实更加的绚丽丰富些,而CMYK的色彩模型颜色显示上就黯淡了不少,但是要印刷的话,就必须转化为成CMYK的色彩模式。

  • R青:Cyan,以百分比值(0%-100%)表示
  • M品红:Magenta,以百分比值(0%-100%)表示
  • Y黄:Yellow,以百分比值(0%-100%)表示
  • B黑:Black,以百分比值(0%-100%)表示

四、色彩的语意及应用

1、红色的语意及应用

红色代表热情、活力、强烈的情感和爱。它可以象征着激情、勇气和行动力,也常与兴奋、热烈的情绪相关。

著名的快餐品牌肯德基,在自己的网页及店铺装修中都运用了红色,因为红色是所有颜色中最容易引起人们注意的颜色,也是很容易刺激人们食欲和购买的颜色。

2、橙色的语意及应用

橙色传达温暖、欢快和积极向上的情感;它常与乐观、友好、创造力联系在一起,给人以活力充沛和充满希望的感觉。

百度网盘的这个登录界面就运用了橙色,给人阳光、向上、热情的感觉,通过色彩的运用一下让界面有了温度。

3、黄色的语意及应用

黄色象征快乐、开朗和乐观;它能带来明亮、愉悦的情绪,代表着阳光、温暖和智慧。

叫叫阅读是一款非常著名的儿童阅读软件,整个色调采用的是非常有活力的黄色,这与儿童处于好奇与活力的阶段相符合,这种高亮的黄色,饱和度和明度都非常的高,特别容易抓住儿童的目光,同时它是一种快乐的颜色,也是一种能激发孩子创造力和想象力的颜色,特别符合儿童成长的需求。

4、绿色的语意及应用

绿色代表平静、和谐与生机。绿色常与大自然相关,给人带来安宁、放松的感觉,也象征着成长、希望和新生。

青椒云的目标用户是吸引年轻用户和创意工作者,绿色这种富有活力和创意的颜色更容易吸引他们的关注,同时绿色也代表着健康、可持续发展的企业形象。

5、青色的语意及应用

青色寓意清新、宁静和沉稳,它给人一种冷静、理智的印象,同时也带有一丝清新的活力。

青色是一种带有蓝色和绿色的颜色,因此青色既有蓝色的专业感、信任感,也有绿色的生机感、希望感。

以下是日本某牙医品牌的官网首页,病人希望在这里带来健康与复苏,也希望获得专业、可靠的治疗,而青色就成了很好传递这种情感的品牌色。

6、蓝色的语意及应用

蓝色代表冷静、忠诚和信任;它常与沉稳、深邃的情感相关,能带来宁静、平和的心境,也象征着智慧和理性。

123云盘使用了蓝色,蓝色符合社会的普遍审美认知,接受度比较高;其次,蓝色给人安全的感觉,也符合云盘的初衷,给用户安全的存储服务。

7、紫色的语意及应用

紫色象征神秘、高贵和浪漫;它常给人一种优雅、奢华的感觉,同时也带有神秘莫测的氛围,与梦幻、创造力等情感相关。

美柚的主要用户是女性,紫色在色彩心理学中常被认为具有优雅、神秘、浪漫的特质,这些特质与女性的审美和情感需求相契合,能够吸引女性的关注。

8、白色的语意及应用

白色代表着纯洁、神圣、信任、安静、朴素和雅致,是一种充满纯洁的颜色,它可以跟任何颜色和谐的共生。

以下是熊掌ID的登录界面,颜色用了大量的白与灰,简洁又不失大气,传递出了一种质朴、雅致的感觉。

五、不同场景下的色彩应用

1、商场色彩多彩的原因?

❶ 吸引顾客注意力

在众多商业场所中脱颖而出,色彩鲜艳的商场外观和内部装饰更容易在人们的视线中凸显出来,吸引过往行人的目光,激发他们的好奇心和探索欲。

确实多彩的颜色更加容易引起我的关注,这不看到商场的美图,都忍不住拍照留念了,成功的吸引了我的目光。

❷ 增强可见性

即使在较远的距离或在繁忙的街道上,多彩热烈的配色也能让商场更容易被发现,提高商场的知名度和曝光度。

多彩的配色,让我很远就被商场美轮美奂的插画吸引,大大增加了商场的可见性。

❸ 营造愉悦氛围

色彩可以激发积极情绪,明亮、鲜艳的色彩往往与快乐、活力和兴奋等积极情绪相关联。当顾客进入一个色彩丰富的商场时,会感受到一种愉悦和轻松的氛围,从而更愿意在商场中停留和购物。

星沙永旺城的美陈设计很好,墙面采用极具诱惑力的颜色与美食,把小小实物十倍放大,增加了视觉看点,让人忍不住过去拍照晒一下,大大增加了愉悦性。

❹ 缓解压力

在现代生活中,人们常常面临各种压力。走进一个多彩热烈的商场,可以暂时摆脱日常的烦恼和压力,享受购物的乐趣。

特别可爱夸张的插图设计,引发了丝丝童趣和欢乐,让人短暂忘记压力,远离烦恼。

❺ 引导消费行为

商场通常会使用不同的颜色来区分不同的区域,如购物区、餐饮区、娱乐区等。这样可以帮助顾客更快速地找到自己感兴趣的区域,提高购物效率。

突出重点商品,对于一些重点推荐的商品或促销活动,商场可以使用鲜艳的色彩来突出展示,吸引顾客的注意力,引导他们进行购买。

❻ 塑造品牌形象

6.1 传达个性和风格

不同的商场可能有不同的品牌定位和目标客户群体。通过选择特定的色彩组合,商场可以传达出自己的个性和风格,吸引与之相符的顾客。

6.2 增强品牌记忆度

独特而鲜明的色彩搭配可以让商场在顾客的心中留下深刻的印象,提高品牌的记忆度和辨识度。

芙蓉区的龙湖天街主要面向中等收入新兴家庭,是一个区域型的购物中心,集购物、餐饮、休闲、娱乐等多业态于一体,为消费者提供一站式商业综合体,它在餐饮区采用了大量的吃喝玩乐的插画来引导用户消费。

2、为什么蓝色在B端设计中广泛应用?

❶ 视觉特性方面

1.1 稳定性

蓝色给人一种沉稳、可靠的感觉。在B端产品中,用户往往需要处理重要的业务数据和进行复杂的操作,蓝色的稳定性可以让用户感到安心,增强对产品的信任感。

1.2 专业性

蓝色通常与科技、专业领域相关联。B端产品通常面向企业用户,需要传达出专业、高效的形象,蓝色正好符合这一需求。

❷ 心理影响方面

2.1 减少焦虑

相比鲜艳、刺激的颜色,蓝色较为柔和,不容易引起用户焦虑和紧张的情绪;在B端使用场景中,用户可能需要长时间使用产品,蓝色的舒缓效果有助于提高用户的使用体验。

2.2 提高专注度

蓝色具有一定的沉静作用,能够帮助用户集中注意力,专注于工作任务。对于B端用户来说,高效完成工作是首要目标,蓝色的这一特性有助于提高工作效率。

B端产品在心理上追求的是类似如下图的这种宁静式的体验,跟教育有着异曲同工之处,就像这个易贝乐少儿英语一样,用大面积的蓝色,希望孩子在这里能很快的安静下来学习、专注自己的事情。

❸ 行业习惯方面

3.1 科技行业引领

许多知名的科技企业和软件产品在 B 端市场中广泛使用蓝色,逐渐形成了一种行业习惯。其他企业在设计B端产品时,也会倾向于选择蓝色以符合用户的认知和期望。

3.2 传统与延续

在过去的设计中,蓝色在 B 端领域的成功应用使得它成为了一种传统选择。设计师们在延续这一传统的同时,也不断优化和创新蓝色的运用方式,使其更符合现代设计趋势和用户需求。

嘉为科技是一个有着20多年技术沉淀的科技公司,它的官网和产品风格一直是沿用着科技蓝的风格,应该也是基于传统的沉淀吧。

❹蓝色可以提高产品的复用率

很多用户都能接受蓝色的B端界面,当面对有差不多需求客户时,同一套UI,可以多次复用,可以减少开发成本和设计成本,这也是自己通过长期实战观察发现的。

一个UI风格,用在了两个项目中,不同的用户,趋向同样的风格,说明蓝色在大家心目中的接受度是非常的高,用蓝色可以促进设计的多次复用。

在日常的项目中,我看到的B端UI界面是千篇一律的稳重,不追求过于刺激的颜色搭配,通常都比较的干净简洁,不像商场里面的美陈背景设计,色彩对比非常的强烈,比较的吸引人眼球。

有一次我厌烦了常规的稳重风,探索一种大胆的色彩风格时,虽然风格比较新颖,可是发出去客户的接受度不高,觉得太不稳重了,然后重新按照以往习惯进行设计时,就很好,客户一致认同。

可见每个领域都有自己的色彩运用习惯,商场需要吸引人眼球、刺激消费,越大胆越好,可是B端设计需要提供一个让人平静去处理工作事项的环境,它需要安静,不需要过于刺激的颜色搭配。

六、色彩在B端设计中的作用?

1、通过色彩向用户反馈操作结果及当前状况

比方在日常设计当中,红色代表流程失败,绿色代表流程成功,橙色代表信息有告警,蓝色代表着链接,同时不同的按钮颜色也可以很好的区分按钮状态,在反馈结果和状况方面,色彩起着非常重要的作用。

下面这个IDC运营的监测平台,它就是通过颜色来区分不同的告警级别的,可见颜色在B端产品中的重要性。(备注:图中数据都不是真实数据,仅做展示)

2、可以助力品牌传达

B端设计中大面积使用品牌色,可以强化品牌形象,使用与品牌标志风格相近的色彩,可以帮助用户快速识别和记住品牌,在不同的B端产品界面中使用统一的色彩方案,有助于建立品牌的连贯性和一致性,增强用户对品牌的信任。

例如我给湖南高速设计的一套B端界面设计,用户强烈要求改变传统的蓝色风格,要求整套界面设计要用湖南高速品牌色-绿色,说明在追求大流和品牌色之间,客户更加倾向品牌的传达。(备注:图中数据都不是真实数据,仅做展示)

3、颜色可以很好的进行信息区分

在B端界面设计中,颜色在帮助信息区分起着非常重要的作用,通常可以通过不同的色彩来区分功能区域,可以让用户更清晰地了解界面的结构和布局,例如,导航栏使用一种特定的颜色,而内容区域则使用另一种颜色。

我设计的天翼写作,就是这样的设计思路,导航栏和内容区的颜色完全不一样,这里颜色起到了很好的区分作用。

4、舒适的色彩搭配可以提升用户体验

选择合适的色彩对比度可以增强文本的可读性,减少用户的视觉疲劳。例如,黑色文字在白色背景上通常比较容易阅读。

选择适当的色彩可以营造出专业、高效、舒适的工作氛围,从而影响用户的情绪和感受,提高用户的使用体验。

我参与的这个后台界面,就是通过合理的色彩搭配来引导用户使用的,当用户已经完成的环节都是用绿色表示,没有走完的流程就会是灰色的,寓意指示非常的鲜明,很好的解决了用户不知道清晰进程的卡点,提升了用户体验。

5、色彩可以传递性格

人的性格有活泼的、文静的、沉稳的、深邃的,其实色彩也是有性格的,不同的色彩也有不同的性格,当我们对色彩的性格有足够多的了解,在面对不同的客户时,我们对色彩的拿捏以及设计需求的把握时,会更加的游刃有余。

我们平常确实是在做设计,但是我们更多的是在与人打交道,我们更好的聆听,会帮助我们更快的抓取到客户的喜好,快速做出满足客户需求的设计,少受加班之苦。

比方说我之前给云门户设计的一套UI,客户的决策层是男性,且年龄偏大,他们就偏爱深沉的UI风格;而我负责的天翼云电脑专家,客户的决策层是女性,且年龄偏年轻,她每次就喜欢轻盈、明快的UI色调,不同的决策层客户,就会带来不同的设计结果。

七、B端色彩设计使用的原则

1、B端设计中,色彩设计应遵循6:3:1原则

在这个登录页面中,我就是运用的6:3:1原则,60%的主色,30%的次要色,10%的点缀色;使用了大面积的蓝色和蓝灰色,最后使用一点点的橙色,这样的配色会显得高级。

2、文字、卡片背景色和边框都使用无彩色

为了保证画面风格的统一、干净整洁,文字颜色、边框颜色、以及边框背景色都需要用到无彩色,通常通过颜色的深浅来区分信息的层级关系。

比方说我参与的星辰大模型AI文档生成能力的应用,里面无论文字颜色还是底色都是运用的无彩色,只是通过了色彩深浅变化来做了层级区分,因为无彩色可以起到很好的降噪作用,既传达了信息,又不会显得界面凌乱复杂。

3、需要凸显的内容,用明度和纯度比较高的色彩

比方说,日常我们设计的卡片都是用的白色,而底色我们用的是灰色,因为卡片里面的内容都是比较重要的信息,需要用一个亮度比较高的颜色,让内容往前走,而灰色的背景通常就往后走的感觉,这样能跟卡片形成一个一前一后的对比,更好的帮助内容进行传播。

比方说我设计的这个IT运维监控平台的首页,物理主机、网络及安全设备、工单、在途工单这几个指标是非常关键的,所以他们的图片底色用了纯度比较高的有彩色来标识。

4、设计前一定要有定色调的意识

作为设计师,我们的设计工作其实就是在设计一种感觉,一种情绪,设计前定调的意识真的太重要了,感觉对了,什么都就对了。

比方说我前段时间接到了一个B端的大屏可视化需求设计,客户说之前的大屏设计不喜欢,希望重新出一个新的设计,然后公司的需求对接人员在给我下达需求时,真的就只是给我下达了这几个字,让我重新出一个设计试试。

以我的职业直觉,感觉这个需求是不够细化的,于是我就多问了几句,我问客户是想要常规的蓝色调的还是别的?果然一问,客户说不希望再用常规的蓝色的,希望新的设计要用他们的品牌色绿色,刚听到这几个字的时候,我以为这次我把握住需求了,在收集参考图的时候,我发现常见的绿色大屏有深色的和浅色的,根据自己以往的作图习惯,我觉得深色会更加的受欢迎一些,我自以为是的朝着深色的方向去出图,出到了一半的时候,我内心有些许的忐忑,我于是找了一深一浅的参考图,让同事跟客户确认一下,客户是想要深色的感觉,还是要浅色的感觉,这次沟通又给了我深深的一击,客户不按常理出牌,说希望按浅色的风格来出图。

在出稿之前,通过自己反复的沟通确认,发现设计前的定调意识真的太重要了,要不是有出图前一波三折的反复确认以及需求的细化,就不会有后来的一遍过稿。

5.设计的灰色尽量使用带有色彩偏向的灰

不管我们设计什么色系的界面,都避不开用到灰色,在设计中用跟主视觉相符的灰,会使得界面更加的高级、协调与美观,注意好了这个小细节,会给我们的设计加分不少。

下面是我日常体验到的两个界面,上面综合管理平台里面的灰色就没有跟主色调蓝色相呼应,灰色没有向蓝色倾斜,界面看起来就没那么美观;下面通义千问的灰色设计就非常的注重细节,灰色偏紫,整个界面看起来浑然天成,毫无违和,美感、档次瞬间提升好几个等级。

一个微小细节的在意,在无形中拉高了设计的高度,十个细节乃至更多细节的在意,就会带来更多意想不到的结果。

总结:

以上就是我最近对色彩的一些顿悟、感受和学习收获,在不断的复盘总结中,我们总会收获一些新的认知,通过这次色彩的复盘之旅,发现色彩对设计师真的太重要了,希望我的分享对大家有启发,不足之处也欢迎大家留言交流。

本文由 @姝斐suphie 原创发布于人人都是产品经理。未经作者许可,禁止转载

题图来自 Unsplash,基于CC0协议

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

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

如何设计 B 端产品的页面加载功能?

杰睿

“B 端页面加载,关乎用户体验。” 在 B 端产品设计中,页面加载功能不容小觑。如何让用户在等待中减少焦虑?怎样使页面加载逻辑清晰、策略得当?本文将详细阐述,为 B 端产品设计提供指引。

每一个用户都不喜欢进入页面时需要长时间的等待,并且对着一个空白的页面。

因此在 iOS当中会使用大量的动效、情感化设计来引导用户多停留一些时间等待加载;在较多 app 当中,也会通过动效设计,优化页面信息的加载。

那既然页面加载很重要,对于B端产品而言,我们也需要去考虑页面的功能究竟要如何进行设计。

今天我们会聊聊 页面加载 功能的具体逻辑,以及B端产品的常见页面加载策略,希望能够对各位同学有所帮助~

一、页面加载的逻辑

在系统当中,页面加载其实是用户对系统界面进行交互后,系统会将对应的数据传给服务器,而服务器又会将内容反馈给用户的整个过程。

比如在按钮组件中,我们就需要去设定「当用户点击了按钮过后它需要长时间加载的 Loading 状态」

通过这样的做法,其实就是缓解用户等待所花费的时间,减少焦虑。

在很多C端产品中,页面加载是非常常见的。比如会有懒加载、预加载、异步加载等。

同时会使用非常多的 插画设计、动效设计 去降低用户所使用的焦虑。但是在桌面端中,它的思考方式会有些许不同,我们将其分为四种不同的方式。

二、骨架图/skeleton

骨架屏是较为常规的页面模块加载方式。

它主要适用于模块当中,加载内容需要提供占位信息时进行使用。通常会在 列表、卡片类 图文信息较多的页面当中进行呈现 。

在用户预期上,骨架图能够帮助我们展示当中页面的大体结构,以避免在页面加载信息的过程当中出现随意跳动、乱展示的情况。

特别是在很多页面第一次加载时,由于数据内容较多,因此使用骨架图填充会更为合理。比如在有赞当中, 就会使用骨架图的方式来进行页面信息的加载。而在B端后台中也更多的适用于工作台信息的加载,特别是在工作台中有数据部分的内容呈现的时候,需要格外去注意。

三、加载中/Spin

Spin 主要要于页面和区块当中的信息加载,通过适当的动效,能够保证页面加载时缓解用户的焦虑。

在 Spin 当中,会有许多不同的类型:基础Loading、动画Loading、进度Loading

基础Loading 更适用于页面当中的组件类级别的加载,像是在输入框内、按钮中、下拉选择… 的内容加载。

动画Loading 则偏向于区块、页面级别的加载,比如在表格页面中,就会经常使用加载的方式展示目前正在相应。

进度Loading 则更像是进度条的外露,想要更凸显目前的真实进度情况。目前在 Ant Design 5.18.0 版本当中即可支持

四、长时间加载

当然,在系统当中还会出现一些特殊的加载状态。比如在针对数据量较大的情况下时,我们会采取什么样的加载策略?

比如在神策数据当中,当我们在去分析后台的行为数据时,需要进行大量的计算,因此在分析完一次过后所等待的时间也会更为长久。这时候神策会给出一套更为复杂的加载策略。

首先在加载层面上,它会优先告知用户目前整体的加载进度,这对于用户的等待是非常有益的。

其次,如果你对于整体加载的时间进度不够满意,那我可以给你相应的解决策略,像是分批加载等等。

最后如果你在加载过程当中有其他的分析任务,也可以通过异步加载的方式,进行后台计算,等结果出来后会通过通知的方式进行提示。当然,在此过程中,你可以中断、退出。

五、异步加载

异步加载也是针对长时间加载的一种策略,比如我需要去上传较大信息的时候,我需要耗费特别多的时间。那这时候就可以采用异步加载的方式,满足用户的正常使用。

在飞书当中,我要上传飞书妙记,我要导入飞书成员,那都可以通过异步加载的方式来进行呈现。

那在设计的时候需要去考虑异步加载整体的入口以及功能之间是如何实现的。

像是在飞书妙记中,它会将其作为一个上传入口,进行快速的展现。而在导入飞书成员的时候,则会展现是将其放在后台进行加载,等完成过后通过通知的方式来告知用户(与神策相同)

关于加载,其实在设计上还会有很多细节,我们也会在课程当中,通过 功能设计 的方式给大家进行梳理设计要点(肯定会比现在更为系统),后续有时间,再和大家分享~

本文由人人都是产品经理作者【CE青年】,原创/授权 发布于人人都是产品经理,未经许可,禁止转载。

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

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

2025 B端设计趋势之风格和质感

杰睿

从拟物风格到扁平化,再到如今的多变色彩与微妙质感,设计风格的演变不仅反映了技术的进步,也折射出用户需求的转变。本文结合钉钉近10年的B端设计经验,深入探讨2025年B端设计的三大趋势:多变丰富的色彩、微妙克制的质感以及清晰明了的图形。揭示了如何在满足企业高效、专业需求的同时,为用户带来更具情感价值和科技感的视觉体验。

回溯互联网的发展进程,从桌面端的拨号上网,到5G移动互联网,再至人工智能的助力,科技领域正在经历着翻天覆地的变革。未来的数字世界,在沉浸感、参与度、个性化等维度对体验会提出更进阶的要求;与此同时,B端企业对于高效、简便、用户友好的界面需求与日俱增。在2025年的当下,B端设计师唯有持续学习,适应新技术与新趋势,紧密围绕客户的业务价值展开设计,进一步注重实用性、包容性以及可定制化,方可为企业客户塑造出卓越的产品与服务。

因此,我们结合钉钉近10年的B端产品设计经验,鉴于未来B端设计趋势将展现出多元化、智能化和人性化的特质,从B端产品个性化、风格与质感、界面版式、图标、动态交互等多维度设计展开深度研究,与大家一道探讨B端设计的本质和趋势,期望在真正驾驭B端产品设计的这条道路上,带来些许有益的启迪。

上篇文章我们讲述了B端产品的个性化趋势,如何利用个性化帮助个体提升用户价值,打造个体形象、满足个体情绪以及增强个体自信。

今天,我们要给大家分享的是B端产品风格&质感,为企业塑造品牌形象、为个人用户提供情感价值。

一、从技术发展看UI设计风格的演变

设计作为科技和艺术的结合,UI设计风格的演变不仅与技术的发展密不可分,而且与艺术创作风格的发展有着异曲同工之妙,都经历了抽象—具象—抽象的过程。

第一阶段:萌芽风格

20世纪70-80年代是计算机图形界面的萌芽阶段,就像绘画艺术起源之时的那个茹毛饮血的年代,当时的原始人所能利用的工具只有火堆熄灭后留下的木炭,图像呈现的载体也只有山洞内的墙壁和岩石。就像刚刚进入计算机时代的设计师们,不仅缺少专业的绘图软件,而且当时计算机本身的显示能力也尚且不足。这个阶段的UI设计,能够在显示器上清晰地显示并传达明确的含义,比画出风格更加重要。观察当时的操作界面,不难猜测当时的设计师,努力以具象的表现风格来减少人们对计算机界面的陌生感,但由于工具和载体的限制无法完美实现,虽然这种风格无法被称为拟物风格,但为后来真正的拟物风格的出现和发展奠定了基础。

第二阶段:拟物风格

1995年,家用计算机的显示能力迎来了质的飞跃,Windows95发布、对真色彩的支持、PhotoShop5.0的发布……技术进步和专业软件的加持让设计师突破了过去创作工具和呈现载体的限制,就好像在山洞里用木炭绘画的原始人,拥有了画笔、颜料和画布。设计师的创作空间和写实能力得到极大提升。

与此同时,个人计算机和手机开始普及,图形化的操作界面不再是科研人员和专业人士的专属,而是普通人工作学习中的一部分。为了让没有接触过图形化操作界面的用户快速识别图标代表的功能,最好的方式就是在界面中对现实世界中的物体进行还原,这便推动了拟物风格的发展。

拟物风格的设计作品,通过模拟现实物品的造型和质感,通过叠加、高光、纹理、材质、阴影等效果对实物进行再现,让用户以极低的学习成本快速熟悉图形化的操作界面和产品功能,并以符合日常习惯和直觉的方式引导用户进行交互。

例如在ios6中的相机icon,对镜头部分细节刻画非常细致,用户很容易联想到使用真实相机时能够做到的事情,这对用户理解和熟悉某一个产品功能的帮助无疑是巨大的;再比如同样在ios6中的书架icon设计也十分精彩,不仅对真实报刊架的结构和质感极度还原,而且对书架内的杂志也进行了展示,用户甚至能像真的面对一个书架一样看到书架中的内容,小小的icon中信息含量极高。

第三阶段:扁平化风格

到2013年左右,智能手机在全球主要国家和地区的普及率大幅提高。根据统计数据,许多发达国家的智能手机普及率超过了50%,发展中国家的智能手机普及率也在快速上升。大部分用户已经对图形化的操作界面非常熟悉,无需那些极致写实的风格也能快速理解图形背后的含义和功能。同时,越来越多的信息和应用涌入智能设备,拟物风格所推崇的肌理、质感、光影……带来精致效果的同时,也让细节变得冗余,如何处理爆炸的信息成为UI设计的首要问题。就像19世纪摄影技术对传统写实绘画艺术的冲击,让艺术家们重新思考绘画艺术的发展方向一样,拟物风格的极致具象化在达到巅峰之时也渐渐到达了转折点。

2013年9月ios7发布,并且首次在UI设计中采用了扁平化的设计风格。这种风格摒弃了拟物设计风格中的写实光影、肌理、冗余的细节、甚至放弃了体积的塑造以及一切可能会对识别产生干扰的元素,只保留对用户最关键的信息,呈现出十分干净整洁的视觉效果。

然而物极必反,扁平化设计的极致简洁,容易让长期使用的用户感到冷淡和无趣,于是新拟物风格应运而生。

新拟物融合了拟物和扁平两种风格的特点,在光影和立体效果方面较为写实,元素通常是凸起或凹陷于界面之上,视觉上错落有致,但是在色彩和造型方面则更偏向于扁平化风格,图形往往经过一定的简化和抽象,并搭配少量简洁的主观颜色。但是新拟物风格过于依赖投影和立体效果对界面元素的区分,很难呈现复杂的信息层级,而且微妙的对比度也不利于无障碍识别,所以这种风格并未真正大面积流行和使用。

二、AI时代的B端设计风格趋势

2022年,ChatGPT发布,AI在自然语言处理方面达到了前所未有的高度,同年Midjourney和stablediffusion的出圈让每个人看到了AI生图的魅力。不仅各种AI应用和网站如同雨后春笋般出现,而且各行各业的APP都在争前恐后的升级自己的AI能力。这样的时代背景,为UI设计提出了一个新的命题:如何用设计展现应用的AI能力以及企业的智能化心智。

趋势1:多变丰富的色彩

色彩在B端设计风格中占据着至关重要的地位,能够带给用户非常强烈的直观感受,是用户对产品和品牌的第一印象。例如蓝色就是过去对To B或科技产品的色彩印象,诸如英特尔、微软、联想、戴尔、IBM…这些品牌通过蓝色来传达简洁、未来感和高科技等视觉感受。但是这个标准并非是一成不变的,越来越多的B端设计,选择使用丰富的色彩来表达智能化千变万化的特点,科技感的表达不再是千篇一律的冷色,而有了更多的变化。

弥散渐变

弥散渐变是一种借助模糊效果将多种颜色进行混合的特殊渐变形式,多种颜色的混合以及不规律的渐变走势,让弥散渐变具有很强的氛围烘托效果和表现力。晕开的色彩仿佛在一片虚空之中慢慢弥散开来,细腻、柔和又梦幻,很适合用来提升界面的局部氛围。

优秀的场景适用性

在B端设计中,屏效和识别尤为重要,利用图形或插画的形式烘托氛围,往往需要占用更多的空间,并且在网页端的适配过程中,容易产生图文重叠带来的识别的问题。而弥散渐变由于其模糊和明度均匀的特点,可以在为画面贡献丰富度的同时,不产生视觉上的焦点,所以在适配过程中也不会产生图文重叠的问题,具有很普遍的应用场景。

高效的场景拓展

在调整渐变时,通过保留一些相对清晰的轮廓,弥散渐变还能呈现出虚实结合的视觉体验,让画面更具动感和层次变化,就像一面磨砂玻璃后飘浮着一些真实的物体一样,十分具有空间感。虚实的变化让色彩有了具体的造型,可能是一段波浪、一个球体、或是一座山丘……这样的背景配合一些简单的排版,便可以是一张海报、一张banner、一个推送封面……这无疑为高速迭代的B端设计提供了一个高效的解决方案。

动态变化

根据资料显示,手机软件的AI生图时长一般在10秒至120秒之间,AI搜索平均时长大致在2秒到15秒之间,专业的写作AI成文时间大致在3秒到30秒……

AI应用伴随着大量的等待时间。使用动态变化的颜色能够降低用户在等待期间的焦虑感,并且不断变化流动的色彩也能暗示用户,当前仍处在“生成中”的状态下。例如用户在等待钉钉AI助理回答的过程中,聊天气泡会呈现出多彩的流光效果;用户在与AI助理进行语音交互时,整个屏幕边缘会呈现动态的彩色光效,以表示当前的AI激活状态。

除此之外,全屏动态的渐变背景还很适合用在信息不多的功能或应用首页,例如在钉钉的登录页面,屏幕近三分之二的空间中只有简单的文字动画,搭配全氛围的动态渐变背景,不仅清晰地传达品牌的智能化心智,而且为“登录”这一操作增添了满满的仪式感。类似的还有钉钉AI搜索的功能首页,大面积涌动的动态渐变,充分在视觉层面展现了智能化的心智,而且大面积的留白也让钉钉AI企业搜索的功能价值描述显得格外突出。

趋势2:微妙克制的质感

虽然新拟态风格并未大规模的使用和流行,但其衍生和沉寂的背后反映了设计的本质就是一场功能和审美之间的角逐。B端设计更是如此,用户侧需要美的设计来愉悦工作中的心情,但又不想被花哨的色彩和装饰干扰工作效率,企业侧需要摆脱沉闷古板的刻板印象,但同时也需要呈现专业、科技的高大形象保持可信度。微妙克制的质感表达为这种“平衡”的实现提供了解决思路。

玻璃拟态

玻璃拟态是2020年末开始流行的设计风格,顾名思义就是对玻璃这种材质的一种拟物化设计,玻璃拟态风格相较于新拟物风格最明显的进步在于,它巧妙地利用玻璃这种材质解决了新拟物风格中元素边界不清晰、难以体现复杂层级等问题。其风格特点可以总结为以下特点:

通透:

由于磨砂玻璃的通透性,在界面中存在多个层级时,会呈现出一种虚实结合的美感。并且其透明的属性,能够很好的暗示用户目前所处的位置,利用此特性,不仅能更沉浸的展现用户当前关注的信息,而且“叠加”而非“跳转”的交互逻辑也极大减轻了用户操作时的心理负担。

悬浮:

传统的拟物风格往往会塑造一个地面,再将图标“放置”在上面。而玻璃拟态风格则更像是构建了一个“无重力”的虚拟空间,界面中的元素有明显的悬浮感,显得十分轻盈,同时也非常适用于B端场景下对于科技感的体现。配合投影、虚实对比,用户能够清晰地感受到元素在空间上的高度差异,不仅保障了信息的可读性,而且让可交互元素更具点击感。

微妙:

由于磨砂玻璃的物理特性,页面背景在经过“玻璃层”的模糊处理后会变得十分柔和,类似上文所述的“弥散渐变”,呈现出一种明度均匀,没有视觉焦点的状态,无论是动态还是静态都能很好的保障前景文字、UI控件等元素的可识别性。并且在玻璃拟态风格中,常常使用轻薄微妙的边框来强化物理质感,这种既作为描边,又作为“玻璃”的厚度的处理方式,让卡片能够以一个恰到好处的对比度呈现在界面中。

综上所述,玻璃拟态风格在拟物程度上找到了一个很好的平衡点,既为枯燥的B端设计提供了真实感和趣味性,又保障了复杂信息情况下的识别度。并且由于玻璃光滑、透明等物理特性,也为“科技感”的视觉呈现提供了新的方向。

柔和光影+微质感材质

与C端设计中常用强烈的光影效果吸引用户不同,b端设计相对更加沉稳。对比阿里云、WPS、钉钉、腾讯云的官网首页,都不约而同地使用了非常柔和的环境光,这种光影设计,在保障整体亮度的基础上,不会产生明确的光照方向和阴影效果,并且在材质选择上,也都使用了高光、反光均不明显的漫反射材质或微质感的毛玻璃材质,整体视觉感受十分沉静和整洁。

趋势3:清晰明了的图形

图形在设计中扮演着两部分角色,一方面图形作为页面的装饰需要保证审美的愉悦性,另一方面图形也作为文字信息的补充,需要传达某些特定的含义。好的图形设计不仅能为整个页面的氛围添光加彩,而且能帮助用户更好的理解文字信息。

规律感的几何图形

在b端场景下,常常需要借助图形表达一些抽象的概念,例如PaaS、服务器、AI、用量、科技、流量……这类含义并不直接对应一个特定的造型,使用有规律的几何图形,似乎是一个不错的选择。这些技术概念的背后来自于二进制中0和1的组合,而将几何元素有机地排列,甚至衍生出不同的形态的过程,不是正如代码的编写吗?

简洁高效的手绘元素

在当下的B端设计领域,越来越重视情感关怀和个人用户的体验。在页面中使用具有手绘感的元素或使用直接使用手绘图案作为配图,不仅能够快速拉近品牌和用户之间的距离,塑造年轻化、有亲和力的品牌形象,也能提升用户在使用产品工作时的愉悦感。这类充满轻松感的图形比起传统的插画或3d建模更加简洁,色彩鲜明,具有很强的表现力,并且设计成本也更低,十分适合作为一些小而美的产品配图。

例如Google推出的Material design的设计语言就大量使用了抽象且配色艳丽的手绘元素作为配图,这类图案更加强调色彩并不过多细化造型,穿插在文字之间,让深色背景的页面一下活跃了起来。与此类似的还有figma的官网,设计师将软件内的部分工具比如线条、线框、锚点、指针等元素抽象出来作为插图,不仅简洁耐看,而且十分具有自身的品牌特色。

除此之外,利用手绘线条来表现hover的交互状态,圈画重要的文字信息,或是进行操作引导,也具有极高的效率。简单的箭头或者波浪线,能够非常直接地将用户的注意力指引到重要信息处,就像学生时期在书本上圈画重点一样,感受上十分自然而亲切。仿佛应用的设计者悄悄在用户耳边说了一句小tips,而不是粗暴地把信息丢到用户眼前。

三、结语

无论是拟物风格时期的极致写实,还是扁平化风格时期的极简,又或是AI时代的多彩绚丽,设计风格的发展始终围绕着技术发展的主线,其发展的目标,始终围绕着如何让当前时代的用户更好更便捷地享受到技术应用带来的便利。一个好的b端设计风格,不仅能够帮助企业展现品牌心智和技术上的先进性;而且能够让个人用户更高效且愉悦地完成工作任务。在未来的B端产品设计中,我们应该始终坚持形式服务于功能和以人为本的原则,探索更适合业务场景的设计风格,为用户带来更加舒适自然的视觉体验。

以上是本期带来的B端设计趋势之个风格篇。

本文由人人都是产品经理作者【钉钉用户体验】,原创/授权 发布于人人都是产品经理,未经许可,禁止转载。

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

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

DeepSeek+交互设计:B端产品退订心理学的设计策略与实践

杰睿

 

在B端产品设计中,退订是用户对产品不满的直接表现,也是我们优化产品的重要信号。作为UI设计师,如何通过交互设计降低退订率,提升用户留存,是一个值得深入探讨的话题。本文将结合 DeepSeek(深度探索) 的设计理念,从用户心理和交互设计的角度,分享B端产品退订心理学的设计策略与实践。

一、DeepSeek+交互设计:理解用户退订的深层原因 DeepSeek

强调通过深度探索用户行为和心理,找到问题的本质。在退订场景中,用户的行为背后往往隐藏着以下心理动因:

  • 价值感知不足 用户未感受到产品的核心价值,认为投入与回报不成正比。
  • 操作体验不佳 复杂的操作流程或低效的功能设计让用户失去耐心。
  • 需求未被满足 产品功能与用户实际需求不匹配,导致用户选择离开。
  • 缺乏情感连接 用户对产品缺乏归属感或信任感,容易被竞品吸引。

二、DeepSeek+交互设计策略:降低退订率的四大关键

1. 深度探索用户行为,优化退订路径

1)设计目标:通过数据分析,找到用户退订的高频节点,优化交互路径。

2)设计策略:

  • 在用户退订前增加“挽回节点”,如弹窗提示“您是否遇到问题?我们可以帮您解决。”
  •  提供“暂停服务”或“降级套餐”选项,而非直接退订。

2. 强化价值感知,让用户看到“收益”

1)设计目标:通过设计手段,让用户直观感受到产品的价值。

2)设计策略: 

  • 在退订页面展示用户使用产品的关键数据(如“您已节省XX小时”)。
  • 提供成功案例或用户评价,增强用户信任感。

3. 简化操作流程,提升用户体验

1)设计目标:降低用户的操作成本,减少因体验不佳导致的退订。

2)设计策略:

  • 提供清晰的操作指引和帮助文档,降低学习成本。
  • 在关键操作节点增加即时反馈(如“操作成功”提示)。

4. 建立情感连接,增强用户归属感

1)设计目标:通过设计让用户感受到被重视,增强对产品的情感依赖。

2)设计策略: 

  • 在退订页面增加个性化挽留信息(如“我们会想念您”)。
  • 提供专属优惠或免费试用机会,让用户感受到被重视。

三、DeepSeek+设计案例:某B端 SaaS 产品的退订优化实践

以某B端 SaaS 产品为例,通过 DeepSeek+交互设计策略,退订率降低了20%。

具体优化包括:

  • 在退订页面增加“您可能错过的功能”模块,强化价值感知。
  • 提供“联系客户经理”按钮,方便用户咨询和解决问题。

四、总结

退订是用户对产品的“最后反馈”,也是我们优化产品的重要机会。通过 DeepSeek+交互设计,我们可以深度探索用户心理,优化交互路径,强化价值感知,简化操作流程,并建立情感连接,从而有效降低退订率。希望本文的设计策略与实践能为B端产品的优化提供启发,让我们的产品更好地服务于用户,提升用户留存与满意度。

本文由 @刘萍 原创发布于人人都是产品经理。未经作者许可,禁止转载

题图来自Unsplash,基于CC0协议

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

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

2025 B端设计趋势:品牌物料系统设计

杰睿

在数字化转型和AI技术的推动下,B端设计正在经历一场深刻的变革。本文从钉钉近10年的B端产品设计经验出发,深入探讨了2025年B端品牌物料系统设计的趋势。

回溯互联网的发展进程,从桌面端的拨号上网,到5G移动互联网,再至人工智能的助力,科技领域正在经历着翻天覆地的变革。未来的数字世界,在沉浸感、参与度、个性化等维度对体验会提出更进阶的要求;与此同时,B端企业对于高效、简便、用户友好的界面需求与日俱增。在2025年的当下,B端设计师唯有持续学习,适应新技术与新趋势,紧密围绕客户的业务价值展开设计,进一步注重实用性、包容性以及可定制化,方可为企业客户塑造出卓越的产品与服务。

因此,我们结合钉钉近10年的B端产品设计经验,鉴于未来B端设计趋势将展现出多元化、智能化和人性化的特质,从B端产品个性化、风格与质感、界面版式、品牌物料、动态、图标等多维度设计展开深度研究,与大家一道探讨B端设计的本质和趋势,期望在真正驾驭B端产品设计的这条道路上,带来些许有益的启迪。

今日,将为大家分享2025 B端品牌物料的设计趋势,深入探讨如何系统的构建和管理品牌物料体系:从精心提炼品牌战略,到积极探索客户触点创新,针对品牌物料的生产、加工和面客宣发等多元场景,聚焦于高效传递品牌一致性、强化专业信赖感、精确传递产品服务及价值,进而吸引目标客户并推动转化。

B端品牌物料:更专业且多维的进化之路

“当企业采购决策者同时收到5份方案书,你的设计怎样才能率先映入眼帘?”引用Forrester报告可知,76%的B端采购决策会受视觉专业度影响。

B端场景下,由于客户具有一些特殊性:比如决策流程漫长、涉及角色众多等,所需往往不只是产品,还涵盖配套安装、培训、维护等整体解决方案,并且更看重稳定性、信任感与长期合作价值。因而,B端产品在面向客户展示品牌服务与物料时,设计上需从品牌策略、视觉体系、场景应用、体验升级及工具支持等多个维度,传递出专业、高效、创新的形象。

从【平面静态】到【多维动态】

随着数字化转型的影响力与日俱增,综合行业变革、技术发展以及客户需求的动态演变,在实现品牌一致性传达、提升专业信赖感以及达成目标客户转化等方面,B端品牌物料设计历经了从基础功能传达迈向多维度体验升级的不断进化:

在传统印刷时代,为我们所熟知的品牌物料核心载体包括信纸、手册、单页、展板等。

这些物料的设计呈现出高度标准化的特征:严格依照CI手册执行,该手册详尽规定了企业在各类场景下正确运用品牌元素的方式,诸如标志(Logo)、标准字体、色彩系统、宣传语等,以此确保所有对外传播信息均契合企业的形象定位与价值观。然而,这种模式也存在一些弊端,例如改版周期长、难以满足客户的定制化需求。

步入互联网时代,B端面客的品牌物料通常覆盖从线上到线下的多元场景,诸如官网、H5产品价值页、文档介绍、PPT模板、活动沙龙物料等等。不仅如此,线上产品一般还借助大量运营推广、市场传播等形式触达客户或用户。

这种方式具备诸多优势:比如制作周期短,更新迭代快,能够针对客户的不同身份与需求,实现更为定制化、精准化的服务。同时,还可通过复盘数据转化情况,持续优化和调整价值内容的呈现方式。

近年来,技术迭代日新月异,诸如Web3、AR、生成式AI等新兴技术重构了物料形态。与此同时,B端决策者的代际更替显著,越来越多年轻的企业管理者对数字叙事的接受度大幅提升。数据可视化的融入,不仅让内容更具说服力,也契合了B端客户对数据的需求。加之产品竞争同质化现象愈发凸显,当技术参数趋于相同时,视觉体验便成为影响客户选择的关键差异点。

当前,B端品牌物料设计的前沿趋势亮点纷呈:实时数据看板可与客户系统API直接相连、动态信息图表借助AE动画演示技术架构、动态数据资产化表现多样:比如阿里云以流体力学动画演绎云计算资源调度,利用粒子系统可视化AI算法运行路径;再比如AR说明书扫描设备可触发三维拆解动画,全息投影方案沙盘等,这些都为客户带来了从“单向传播”到“交互式对话”的沉浸式体验。

从【功能说明书】到【价值放大器】

“在B端领域,视觉设计不是美工,而是产品价值的翻译官与商业信任的构筑者。”

我们不难察觉,B端品牌物料设计在视觉叙事逻辑上已然经历了深刻的进化:

过去

产品介绍大多局限于功能说明书层面。基于精准传递技术参数这一核心目的,形成了以“产品图 + 技术指标 + 对比表格”构成的模块化排版定式,同时采用齿轮寓意工业设备、电路板象征智能化等隐喻图形。然而,这种方式弊病明显,同质化现象极为严重,且严重缺失品牌个性。

现在

产品介绍在两方面实现了显著突破。

其一: 在叙事方式上,实现了从“我们有什么”到“你能实现什么”的理念升级;

其二: 在创新策略上,通过插画生动呈现客户现有工作流程的痛点,将枯燥的数据进行戏剧化处理,例如把“节省30%成本”转化为动态损益曲线,直观且富有冲击力。

从【功能导向】到【情感共鸣】

于B端品牌物料设计的发展进程里,如何在秉持专业性的基础上,传递出饱含情感的温度,已然成为关键所在。

举例而言,当鼠标悬停(hover)在数据图表上,粒子绽放的效果瞬间呈现,为用户带来耳目一新的奇妙体验;借助材质隐喻来传达特定情感,磨砂金属质感犹如无声的语言,诉说着可靠与安心;还有别出心裁的反数字化实践:比如制作触感编码手册,让不同纸张纹理与产品特性一一呼应,磨砂纸寓意安全防护的坚实壁垒,金属箔象征尖端科技的无限探索。

与此同时,可持续物料创新层出不穷,诸多环保实践让人眼前一亮:比如采用大豆油墨印刷,让废弃手册在短短6个月内便可自然降解;电子说明书中巧妙内嵌碳足迹计算器,清晰展示环保贡献数值。像某清洁设备厂商独具匠心,其手册采用种子纸制作,客户将手册种植后,便能收获与企业LOGO形状相关的植物,为环保行动增添一抹别样的诗意。此外,展望未来生态感知期,诸如脑机接口情绪反馈设计等前沿探索,正引领着B端品牌物料设计迈向更多维的天地。

B端品牌物料:更系统的构建“有形”体验

B端品牌物料作为与客户之间的沟通材料,需要兼顾品牌战略穿透力与商业场景适配性,其本质离不开以人为中心的服务和体验,不管是网页还是H5,印刷物还是空间,都大量借助“物理元素”进行可视化呈现,“有形”的体验能够加深客户对服务的记忆,强化客户感知。

接下来,我们从品牌战略层到系统层再到执行层,深入阐述如何更系统地构建B端品牌物料设计。

品牌基因萃取

B端品牌物料系统设计的首要步骤,便是提炼其独特的价值观、差异化竞争优势,以及与客户建立信任的关键标识等要素。这些品牌基因的提取,应重点着眼于行业特性、技术门槛以及品牌服务定位,而非侧重于感性的情感表达。

以钉钉为例,AI时代下,我们的品牌主张聚焦于让组织和个人更敏捷、更有创造力,致力于塑造智能、简约、普惠且开放的企业形象。基于这一品牌战略,我们在设计风格(涵盖色彩、质感、版式以及传播物料等方面)、面客产品介绍,以及文案描述等多个维度,都进行了系统性的焕新升级。

场景化物料矩阵设计

B端品牌物料设计,绝非仅仅着眼于美观,更需具备策略性,以便针对不同客户场景,精准传递相应信息。

在钉钉,我们精心构建了新紫品牌物料库,无论是内部的企服人员、销售、设计师、业务PDSA等,还是外部生态服务商及其他人员,都能开放使用,实现及时共享。

例如,当线下的前线销售团队举办面对面的会销活动或客户沙龙时,为了更直观、规范地展示产品或服务,我们提供一系列契合钉钉调性的基础演示物料,包括PPT、产品介绍文档、手册、企业名片、一&五&十页纸、邀请函以及展厅氛围布置等标准模板。同时,针对各类物料,配备详细的使用说明文档和生产SOP,内容涵盖从文件下载到字体安装,从素材使用到标准输出,再从工艺制作到预算成本等各个环节。即便你是设计小白不懂设计,也能依据自身需求,迅速对接供应商,制作出精美且符合品牌调性的物料。

同时,为扩大新紫品牌物料在前线人员中的知晓度与认知度,提高物料使用频率,并确保物料使用的一致性,我们与前线团队紧密建联,定期开展线上直播培训与答疑活动。通过收集真实客户需求反馈,反哺品牌物料不断完善。

又如,当钉钉员工进行客户共创、拜访时,为保障服务专业度,提升企业品牌形象,我们会准备精美且适宜的伴手礼,并联合市场团队,输出一套完整的钉钉官方品牌介绍、钉钉集团案例介绍等物料供其使用。

值得注意的是,钉钉的生态服务商也是展现钉钉企业服务与形象的关键力量,因此,我们还为其提供统一装修建议,包括门头设计、装修风格、着装要求、解决方案手册等。

再如,在钉钉的线上场景中,钉钉官网、各业务产品H5价值页等都是客户快速了解产品的重要渠道。为提升内部人员协同效率,我们设计开发了钉钉内容运营生产平台——「叮当猫」,其中沉淀并搭建了大量关于钉钉产品功能、价值介绍、企业案例和解决方案等模板,如同精心配置的“预制菜”,使用者可直接便捷取用。

此外,在B端具体业务中,品牌物料需更具灵活性。例如,在钉钉管理套件商业化场景中,针对面客材料繁多、演示组织操作门槛高、及时迭代性差等痛点,我们打造即开即用的产品体验样板间,让客户能够快速、便捷、可视化地体验产品,加速客户决策。

最后,B端场域下,客户除了通过线下一对一或线上触达服务了解产品介绍,各类传播渠道同样是企业品牌与心智塑造的重要阵地。像大型企业发布会、产品公众号、小红书等平台,都是不容忽视的关键场景。在钉钉,我们每年定期举办大型产品升级发布会,并借助各类传播渠道持续宣传推广,不断扩大品牌影响力。

品牌物料一致性管理

品牌物料管理在B端业务中不仅是设计规范问题,更是品牌资产运营、组织协同效能提升的系统工程。

在品牌物料投放与实际使用过程中,我们时常遭遇一些典型痛点场景,比如某会晤物料使用过期Logo、某线下展会采用过时的色彩规范、某产品价值页与白皮书技术参数不一致等。追根溯源,这些问题的核心成因在于上下游协同与一致性管理的缺失。在几十人的小型企业中,此类情况或许尚不严重,通过简单的相互“问一嘴”,便能较快达成信息对焦。然而,一旦企业规模扩张,人数达到几百、上千甚至过万,品牌物料一致性的协同管理便会变得愈发困难。因此,为更高效地解决信息不对齐、不统一的难题,建立一套标准的品牌物料管理范式用以指导物料设计与使用的准入及准出,就显得尤为必要。

在钉钉,随着智能化的全面升级,为提升品牌物料的美观度与专业度,同时提高物料调用效率、确保使用的一致性,我们与销售团队特别成立专项项目组。在企服前线代表和各业务产品代表的关键支持下,形成了 「生产部」-「加工中心」-「面客部」 的品牌物料生产、加工与调用管理机制。「生产部」的人负责做什么,再到「面客部」的人负责卖什么,而处于中间环节负责加工的人员,则如同桥梁一般,确保上下游信息传递的准确性以及品牌物料管理的一致性。比如:有人负责细化到行业或场景的demo设计,有人核心输出标杆客户案例,还有人负责输出一套完整的企业服务面客规范。做好品牌物料的一致性管理,能够极大的提升B端客户决策效率(降低认知成本),同时强化企业专业可信度。

结语

随着行业变迁、客户需求的不断更迭以及技术的日新月异,B端品牌物料设计已悄然蜕变,从传统认知里单纯的宣传材料,逐步发展成为多维且个性化的服务与体验。当下B端品牌物料的设计趋势,聚焦于高效传递品牌一致性、强化专业信赖感,以及系统性管理好物料的生产、加工和面客宣发。从精心提炼品牌战略,到积极探索客户触点创新,每一个环节都旨在降低客户认知成本,助力企业精准传递产品服务及其价值,从而推动客户转化。

以上就是本期为大家带来的B端设计趋势之品牌物料系统设计的全部内容。后续,我们还将从动效、图标等设计趋势深入研究,期待在深耕B端产品设计的道路上,与各位携手前行,共同进步。

作者:冬然 @

本文由人人都是产品经理作者【钉钉用户体验】,原创/授权 发布于人人都是产品经理,未经许可,禁止转载。

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

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

B端设计|卡片设计技巧解析

杰睿

常见的B端卡片组件,应该怎么设计才可以达成更好的传播效果、传递更清晰、更完善的视觉体验?在本篇文章里,作者就结合具体案例,对B端卡片组件设计进行了技巧拆解,一起来看看吧,或许会对你有所启发。

B端设计的过程中,并不是所有元素抄一抄别人的,从组件库里引用下就完事了,而是要经过具体组织并设计。尤其在一些特殊的组件中,是可以去表现设计水平,提升项目整体视觉质量的,而不是让它们看起来非常的枯燥乏味。

这次,我们的改版主要就围绕在B端常见的卡片组件中,通过3个以前提交过的作业,来分享如何设计B端的卡片。

三个改版案例我们都遵循相同的设计方式和顺序:

  • 分析组件包含字段
  • 确认组件内部框架
  • 完成字段权重表现
  • 完成组建视觉样式

一、卡片案例1

B端设计|卡片设计技巧解析

在该案例中,卡片作为页面的核心对象,视觉重心不够突出,且内容的权重没有得到有效的表现,订单标识只有一个的情况反复强调对识别卡片没有任何帮助,且卡片占比过大,没必要的浪费页面空间。

所以,重构它的结构时,重点突出标题弱化标签,将卡片拆分成标题、信息、操作三个栏,让信息的呈现更简洁直观。

B端设计|卡片设计技巧解析

然后再具体优化内容和细节,对重要信息突出,固定的标题字段弱化。

B端设计|卡片设计技巧解析

最后,再根据主色的需要填充色彩进去即可。

B端设计|卡片设计技巧解析

B端设计|卡片设计技巧解析

二、卡片案例2

B端设计|卡片设计技巧解析

这个案例也是设计得比较有问题的,但是忽略掉全局组件的粗糙,卡片部分的设计也是很多作品案例中的常见问题,要素过多,没有主次,在列表化的展示中,根本没办法很好的识别相关的内容和关注到有效的信息,会被淹没在繁复的字段内容中。

所以,我们用相同的方法作下区分,将内容分为上中下三个栏。

B端设计|卡片设计技巧解析

然后再对字段做权重的划分,虽然字段信息很多,但值得被突出的要素不多,企业名和数据是卡片中最重要的信息,一个用于识别卡片,一个用于查看核心的指标。

B端设计|卡片设计技巧解析

最后,再完成样式的补全即可,只在星级和用户职位上增加色彩。

B端设计|卡片设计技巧解析

B端设计|卡片设计技巧解析

三、卡片案例3

问题和前面还是一样,内容很零碎,所有要素都强调,于是就没有重点。所以,下面对它们进行改版,这次因为数据项不再是重点,卡片的目标不是用来查看数据而是用于检索进入到下级页面的,所以只分了两栏。

B端设计|卡片设计技巧解析

然后,再对权重进行强调,查看详情是这里面最重要的元素,图片则没有太大的意义仅仅是点缀所以缩小。

B端设计|卡片设计技巧解析

最后,再完成相应色彩的添加和图片的填充,完成最终的视觉效果。

这三个改版都用了很简单的修改方式,通过理解卡片的作用、字段信息,对它进行信息分区,然后填入相关的字段并做出权重划分,最后再用颜色为不同的要素加权。

只要掌握这样的设计思路,做绝大多数卡片都不会有阻力,只会纠结于应该用哪套样式更合适。

结尾

因为时间关系只做了很简单的调整,没去做多套大跨度的样式变更,同时套进原图环境没做整体的处理,所以还有很多升级优化的空间,理解这个感觉即可。

作者:酸梅干超人;

本文由 @超人的电话亭 原创发布于人人都是产品经理,未经许可,禁止转载。

题图来自Unsplash ,基于 CC0 协议

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

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

千篇一律的B端,看疲劳了,来点不一样的吧(附作品图)

涛涛

这些是一些创新和不同寻常的B端系统界面设计思路,可以根据具体的业务需求和用户群体的特点进行定制和调整。希望这些思路能够为您带来新的灵感和想法!

B端中后台UI设计规范定义 & 实践经验总结

杰睿

在B端产品设计中,中后台UI设计规范的建立对于提升设计效率、保证用户体验一致性以及优化开发流程至关重要。本文从设计规范的意义、原子设计理论、后台设计系统搭建以及Design Token应用实践四个方面,详细总结了B端中后台设计的要点和方法,供大家参考学习。

今天从以下4个方面,结合7年B端设计工作经验,为大家分享原子设计理论和中后台设计系统搭建的应用实践。

01 搭建设计规范的意义

分别站在整个产品设计研发流程中各个角色的不同角度,在工作中可能会有以下“抱怨时刻”:

由此,体现出搭建设计规范的作用和意义:

① 产品侧

⼀个产品不同分⽀多个团队完成的时候,可以保证产品团队使⽤同⼀份设计规范快速完成产品原型设计。保证可复⽤模块的交互体验的⼀致性。

② 设计侧

通过设计规范去解决⼤部分需求,极⼤提⾼效率解放双⼿,让设计师能去做⼀些更发挥创意和想象⼒的设计。

③ 开发侧

形成开发资产,可以提升研发效率,降低维护成本。开发⼯程师⽆需再重复开发同⼀个组件,只需要去组件库⾥调⽤即可,配合业务逻辑,⾼效完成界⾯开发,做到开箱即⽤。

④ 测试侧

标准化的设计规范,是测试⼈员最喜欢看到的。例如,设计规范规定弹窗 footer 区按钮组居右,那么测试⼈员只要测到不居右,就可以给产品提优化建议了。

02 原子设计理论

设计规范中具像化的环节是设计组件化,最早可以追溯到⼯业⾰命时期,福特创造的流⽔线⽣产⽅式。福特将汽⻋分解成零部件,再把零部件模块化组装,这⼀创举极⼤的提⾼了⽣产效率。

根据资料显示,T型⻋是世界第⼀款⼤量使⽤通⽤零部件,并进⾏⼤规模流⽔线装配的汽⻋。这种⽅式极⼤地提⾼了T型⻋⽣产效率,降低了⽣产成本。

1914年,福特已经可以做到93分钟⽣产⼀辆汽⻋,⽽同期其他所有汽⻋⼚商的⽣产能⼒总和也不及于此。

到了1920年代,T型⻋的价格甚⾄降到300美元⼀辆(问世之初T型⻋的售价仅需850美元,⽽同期的竞争对⼿则通常为2000-3000美元⼀辆)。

原子设计理论最初来源于化学领域,这一点从名字可以听出来。在化学中,所有的物体都是由原⼦构成,原⼦组合构成分⼦,分⼦组合构成有机物,最终形成了宇宙万物。

2013年前端⼯程师 Brad Forst将此理论运⽤在界⾯设计中,形成⼀套设计系统,包含 5 个层⾯:原⼦、分⼦、组织、模板、⻚⾯。当公司的业务产品逐渐扩⼤时,我们就需要制定⼀套完整的设计系统,提升设计和开发的协作效率,统⼀所有设计师的输出物。

总之,将设计拆分成⼀些基本元素,例如⼀个按钮、⼀个弹窗,再根据业务需求、产品逻辑重新组装,形成最终的产品,这就是原⼦设计理论(组件化设计),区别于整体设计制造的⼀种新的⼯作流程。

03 后台设计系统搭建

① 设计系统搭建—原子

原⼦是物质的基础组成部分,是构成设计系统的最基础元素。

在界⾯中以「元素」的形式存在,例如:颜⾊、⽂字、图标、分割线、间距、圆⻆、阴影等。

色彩体系

中后台产品的⾊彩体系主要分为3类:品牌⾊、功能⾊、中性⾊。

  • 品牌色:大型公司往往都会有专属色号的品牌色,比如阿里橙色、美团黄色和腾讯蓝色,以体现产品特性、传播理念。在界面中主要体现在关键行动点、选中状态、重要信息和插画元素等。
  • 功能色:旨在表示某种状态提示,这类颜色往往是深入人心的,比如绿色代表成功,红色代表失败等等。
  • 中性色:还有一种是不需要传递颜色代表的特殊含义的,称为中性色,即黑白灰。

B端网站体现理性和效率特性,往往会使中性色占据九成以上,应用在背景、边框、文本和分割线。下图为颜色定义示例(考虑暗色模式)。

文字体系

B端产品的⽂字系统设计⽬标:增强阅读体验、提升信息获取效率,字体是体系化界⾯设计中最基本的构成之⼀。

字体的⼤⼩、字重、⾊彩区分体现界⾯信息的层级关系。

  • 整体思路:在同⼀个系统的 UI 设计中先建⽴体系化的设计思路,对主、次、辅助、标题、展示等类别的字体做统⼀的规划,再落地到具体场景中进⾏微调,最终确定建⽴体系化的设计思路,有助于强化字体落地的⼀致性。
  • 少即是多:在视觉展现上能够⽤尽量少的样式去实现设计⽬的。避免毫⽆意义的使⽤⼤量字阶、颜⾊、字重强调视觉重点或对⽐关系,提⾼字体应⽤的性价⽐,减少不必要的样式浪费。
  • 拉开对⽐:在需要拉开差距的时候可以尝试在字阶表中跳跃地选择字体⼤⼩,会令字阶之间产⽣⼀种微妙的韵律感。

下图为字阶应用规范示意:

阴影、圆角、线条

阴影:在B端界⾯中,有些特殊的元素会使⽤到阴影,从阴影中我们可以看出物体距离平⾯的⾼度,距离平⾯越⾼的物体阴影越⼤;

圆角:从直⻆到圆⻆给⼈带来从严谨冰冷到柔和亲切的⼼理感受,在B端界⾯ 中,常⽤2-8px圆⻆;

线条:分割模块及辅助定位。

② 后台设计系统搭建—分子

在界⾯中,分⼦是按照规律组合起来的元素,如:按钮、搜索框、选择器等。

以按钮为例,⽂字、⾊块、图标和间距这些抽象的原⼦产⽣关联组合成分⼦:图标、⽂字传达含义;颜⾊、圆⻆传递特性;间距、尺⼨定义规范。

③ 后台设计系统搭建—组织

分⼦+原⼦组合成更复杂和可拓展的组织(区块组件),如搜索区、卡⽚列表区、表单区、数据统计区等。

④ 后台设计系统搭建—模板

由原⼦+分⼦+组织构成的更复杂更具拓展性的模块,构成了典型⻚⾯模板,如列表⻚、详情⻚、异常⻚、Dashboard等。模板在设计系统中承载的作⽤就是保证设计⽅案在原型各阶段的⼀致性,专注⻚⾯底层架构,并⾮具体⻚⾯。

⑤ 后台设计系统搭建—页面

带业务逻辑的场景案例,如标注场景、权限管理、详情设置等,将⻚⾯模板填充真实的⽂字、图⽚后形成⻚⾯,即带交互逻辑的⾼保真原型图,真实内容使设计系统有了“⽣命” 。

04 Design Token应用实践

虽然通过设计规范可以对产研流程提效,但在开发还原中还是会经常遇到⼀些棘⼿的问题。

开发还原准确度难以保证,走查几轮还有有细节问题没有修复;

领导要求开发暗色模式,或者客户要求换一套主题色,找到替换的工作量巨大;

设计一处变更,涉及多个页面模块,维护工作量大。

为了解决和优化上述的问题,Design Token 应运⽽⽣。它可以解决产品设计和开发过程中的细节、变更和⻛格⼀致性的问题,有效提⾼产研团队设计质量和协作效率。

① Design Token介绍

“Token”原本的意思是“令牌,指令”,与 Design 连在⼀起指“设计变量”。在⼯程逻辑中⽤于⽤户身份与服务器端进⾏验证,⽽在设计体系中,Design Token 则可以简单理解为封装的视觉样式参数。它通过规定样式参数,并通过⼀套符合设计师、⼯程师理解的统⼀的命名规则,为这些样式参数的定义名称。

Design Token优势

设计语义更易理解:帮助设计师和开发建⽴统⼀语⾔,设计⽅案更加⼀致。从下到上的Design Token命名思路。

主题⽪肤⼀键替换:主题⽪肤的替换可以⽤在两个维度,⼀是浅⾊模式和暗⾊模式的替换,⼆是不同品牌⾊之间的替换。我们可以将不同主题的同⼀个场景下的颜⾊使⽤同⼀个 Token 命名,达到⼀键换肤的效果适配不同客户⽅案。

设计变更⾼效维护:替代传统⼯作流⼀键替换效果。例如修改二级文本的颜色,传统工作流需要先修改设计规范,修改设计稿,然后输出给开发,开发逐一更新代码,完成后提交给设计师进行走查验收。而当使用Token之后,只需要更新Token参数,就可以直接导出JSON给开发,一键自动更新。提高效率不止一点点。

设计效果精准还原:代码编辑器⾃动化提示颜⾊选择,如不正确则产⽣报错。

总结一下使用Token开发的优势:

  • 设计语言 更易理解
  • 主题皮肤 一键替换
  • 设计变更 高效维护
  • 设计成果 精准还原

② Design Token应用流程

第一步:提炼token元素;

第二步:定义命名规则;

第三步:整理Design Token资产表;

第四步:开发与应用。

接下来具体说说如何为Design Token命名,命名方式目前并没有绝对统一的要求,不过有一定的逻辑规则,可以由设计师找前端开发一起商量出一个都能通俗易懂便于理解的命名规则,

举个例子:

1.Token名称由大到小排序,中间用“-”分隔;

2.Token前缀可自定义添加公司简称,如“–el-xx” 、“–ant-xx”、“–td-xx”。

为了更好的统一规范,应用Token,建议成熟的互联网公司设计团队搭建自己的低代码平台。一键更换主题,尽在指尖。

最后

以上就是从四个方面归纳的B端设计规范定义和总结,希望对你有所帮助!

本文由人人都是产品经理作者【Clippp】,原创/授权 发布于人人都是产品经理,未经许可,禁止转载。

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

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

2025 B端设计趋势之动效

杰睿

在数字化时代,B端产品的用户体验设计正变得愈发重要。动效设计作为提升交互体验和效率的关键手段,正在成为B端设计中不可或缺的一部分。本文将深入探讨2025年B端设计中动效的趋势,从动效的历史演变、物理世界中的灵感汲取,到钉钉设计系统中的实践应用,帮助我们理解动效如何从简单的视觉装饰转变为提升产品效率和用户体验的核心工具。

回溯互联网的发展进程,从桌面端的拨号上网,到5G移动互联网,再至人工智能的助力,科技领域正在经历着翻天覆地的变革。

未来的数字世界,在沉浸感、参与度、个性化等维度对体验会提出更进阶的要求;与此同时,B端企业对于高效、简便、用户友好的界面需求与日俱增。

在2025年的当下,B端设计师唯有持续学习,适应新技术与新趋势,紧密围绕客户的业务价值展开设计,进一步注重实用性、包容性以及可定制化,方可为企业客户塑造出卓越的产品与服务。

因此,我们结合钉钉近10年的B端产品设计经验,鉴于未来B端设计趋势将展现出多元化、智能化和人性化的特质,从B端产品个性化、风格与质感、界面版式、品牌物料、图标、动态交互等多维度设计展开深度研究,与大家一道探讨B端设计的本质和趋势,期望在真正驾驭B端产品设计的这条道路上,带来些许有益的启迪。对交互等多维度设计展开深度研究,与大家一道探讨B端设计的本质和趋势,期望在真正驾驭B端产品设计的这条道路上,带来些许有益的启迪。

今天要和大家聊聊 B 端产品的动效设计趋势。我们将回顾动效的发展轨迹,从历史演变到设计哲学,探索如何从物理世界汲取灵感,并分享钉钉在动效设计中的思考与实践。

一、回顾动效设计的演变历程

动效设计在互联网的发展历程中经历了多次变革。从最初简单的过渡动画,到如今复杂而精细的交互体验,动效的演进不仅是技术发展的产物,也映射了用户体验设计理念的不断深化。

1990s-2000s:简单的进度展示

在互联网的早期,受限于带宽和硬件性能,动效的应用较为基础,主要用于加载进度条和页面过渡,核心目的是向用户提供反馈,减少操作过程中的不确定性。典型案例是 Windows 98 时代的加载进度条和网页上的缓冲动画。这些动效虽然简单,却在当时发挥了重要作用——帮助用户理解系统状态,降低等待焦虑。

2005-2012:Flash 技术引领网页动画

进入 2000 年代中期,Flash 技术的普及让网页动画迎来了黄金时代。Flash 赋予了设计师更大的自由度,使得网页可以呈现更丰富的动态效果,动效不再局限于状态反馈,而开始深度参与交互体验。这一时期,动效的作用从提示系统状态进化为增强用户沉浸感,例如按钮悬停时的动态反馈,炫酷的页面切换过渡,以及交互式动画(如鼠标跟随效果、小游戏动画等)。

不过,Flash 的动效过度依赖插件,影响性能,并且在移动端难以兼容。2010 年代,随着 HTML5 和 CSS3 的发展,Flash 逐渐被取代,动效设计进入新阶段。

2012-至今:物理规律的引入与美学平衡

随着移动互联网兴起,尤其是 Material Design,iOS,以及 Fluent Design 等动效规范的推出,动效设计进入了全新的阶段。这个阶段的核心理念是基于物理规律的自然动效,强调动效不仅仅是装饰,而是信息层级传递、引导用户操作的重要工具。

Material Design:强调物理隐喻与流畅性

  • 点击按钮时的波纹扩散,让操作反馈更自然
  • 元素的加速、减速运动,使界面更富有生命感
  • 卡片式界面层级动画,通过渐变、位移等方式构建层级感,使导航更加清晰

Fluent Design:深度融合光影与层次感

  • 通过阴影和模糊等方式,增强界面的深度和透视层次
  • 交互时光效随用户操作产生微妙变化,提升体验的直觉性
  • 内容随焦点流动,利用动效引导用户注意力,使信息呈现更具逻辑性

由此可见,动效不再只是视觉上的炫技,而是成为提升可用性、降低认知负荷的重要工具。合理的动效可以提升用户的操作流畅度,让界面变得更自然、更具生命力。

二、从物理世界中捕捉动效的美感

在自然界里,每一次风吹树叶的摆动、每一滴水滴入湖面的扩散,都遵循着物理规律,展现出流畅且和谐的运动轨迹。这些自然现象不仅带来视觉上的愉悦,也蕴含着深层次的运动逻辑,为数字动效设计提供了源源不断的灵感。动效的流畅性、节奏感、反馈感,本质上都是对物理世界美学的映射。

例如,波纹扩散是我们常见的自然现象。当一颗石子落入湖面,波纹自中心向外扩散,起初迅速,随后逐渐放缓,最终消失。这个过程中的渐进减速特性为数字动效设计提供了极佳的灵感。在数字界面中,我们可以通过缓慢扩散的动画来模拟水面波纹的效果,形成一种温和的反馈感。

再比如,现实世界中的物体在运动时通常会表现出加速与减速的特性。以地球上的自由落体为例,物体从高空下落时,初始速度较慢,但随着重力作用,它不断加速。这种非匀速运动,在动效设计中被转化为缓动曲线(Easing Curves),使得用户在界面交互时感受到更加自然的动态变化。

而弹跳和反弹又是另一个物理世界中常见的运动方式。想象一颗篮球从地面反弹起来,起初速度快,随后逐渐放缓,最终停止。这种逐渐衰减的回弹,正是弹性动效的灵感来源。在界面交互中,弹性动效可以模拟物体的重量和材质,提升操作的真实感。

三、钉钉设计系统里的动效哲学

当牛顿凝视落下的苹果,他发现了万有引力的奥秘;而当钉钉的设计团队观察一张任务卡片的拖拽轨迹时,我们探寻的是数字世界的运动法则。在物理规律与交互逻辑的交汇处,钉钉的动效设计体系逐渐凝练出一套方法论——让每个像素的运动既符合自然规律,又服务于生产效率。

在 B 端产品中,动效远不止是视觉与交互的简单结合,更是提升可用性和降低认知成本的关键手段。它不仅承担着引导用户操作、传递信息层级、降低认知负荷的功能,还通过增强操作确定性,帮助用户更高效地完成任务。换句话说,我们正以理性与直觉,重塑效率美学。

原则:平衡的艺术

钉钉的设计框架始终围绕视觉感官和用户体验两个核心维度展开,追崇理性与感性的精密协作:

1. 视觉感官:流畅

  • 连贯性:组件状态的切换应如同翻动书页般自然,确保界面过渡流畅、节奏统一,让数字世界保持有序
  • 自然性:模仿现实世界的运动方式,使动效遵循惯性、弹性、摩擦等物理规律,减少割裂感,让用户的感知更直觉
  • 不碰撞:就像城市道路的规划,动效的路径需经过精心设计,避免界面元素相撞或相互干扰,确保用户注意力不被分散

2. 用户体验:高效

  • 助交互:在复杂的信息架构中,动效可以作为层级引导,帮助用户理解界面之间的主次关系
  • 不干扰:平衡产品界面中的动效存在感,避免过度装饰或喧宾夺主。最理想的动效,是让用户几乎察觉不到它的存在,却能享受它带来的流畅体验
  • 明确性:每一个动效都有其清晰的目的,或是为了引导用户操作,或是为了强化任务的完成感

时间梯度:数字节拍器

企业级应用中,物体的运动时间需要把控得恰到好处。研究表明,人类对 100ms 以下的变化几乎无感,而超过 1s 的等待则会让用户产生不耐烦的情绪。因此,钉钉的动效体系严格遵循以下节奏,通过顺应人类大脑的认知规律,确保每一次动效都恰到好处,带来舒适的体验:

  • 最短动效时长设定为 100ms,并以 100ms 递增,确保节奏稳定
  • 不同动效的时间设定,取决于物体的大小、路径长短以及动画复杂度

速度:像素的重力场

现实世界中的物体运动受到重力、摩擦力等因素影响,呈现加速与减速的动态变化。钉钉的动效体系也采用缓动曲线(Easing),以模拟真实世界的运动节奏。当数字界面挣脱线性匀速的机械感,便拥有了令人愉悦的「生命感」。

空间:界面的立体语法

在二维屏幕上构建三维认知,需要更精密的「空间修辞学」。钉钉的动效体系确保每一次位移都符合用户的直觉,并运用空间层次感,让信息更易理解。

1. 同级物体

  • 整体运动方向和递进顺序需符合用户预期
  • 确保物体运动顺序符合「左到右、上到下、顺时针」的视觉流

2. 从属物体

  • 核心物体的动效应更突出,而丛属元素的动效需弱化或捆绑运动
  • 确保物体的运动轨迹不发生碰撞

3. 三维空间

  • 物体在 Z 轴上有位移变化时,尺寸应相应调整,以模拟透视效果
  • 近大远小的视差效果,可增强层次感,提升信息的空间可读性

四、无障碍设计思考

在动效设计中,无障碍性不仅关乎技术标准,更关乎用户的体验公平性。一个包容的设计体系,应该让所有用户——无论其身体或认知能力如何——都能平等地理解和使用产品。无障碍动效的核心,在于减少干扰、提供替代方案,并赋予用户选择权,确保每一次交互都是安全、友好的。

避免诱发健康问题:高频闪烁或快速变化的动画可能诱发光敏性癫痫等健康问题。因此,在设计时,我们应避免超过3次/秒的快速闪烁,并尽可能减少过度刺激性的动效

提供替代方案:对于依赖屏幕阅读器的用户,纯视觉动效可能难以感知。我们可以为动效添加文本描述或提供静态替代方案,确保所有用户都能理解动效传达的信息。例如,在钉钉 AI 助理中的加载场景,我们提供「正在为你生成…」的文本标签,方便屏幕阅读器用户理解当前状态

五、总结

动效设计已成为现代数字产品中不可或缺的组成部分。从简单的过渡动画到如今富有交互感和情感触动的设计,动效已经不再是单纯的视觉装饰,而是推动产品发展、提升用户体验的关键力量。

真正的好动效,是那种用户几乎察觉不到的流畅交互,它能够让信息传递变得高效、让操作更加顺畅,同时也让数字产品展现出温暖的人文气息。动效,作为产品与用户之间的一座桥梁,它不仅是界面的点缀,更是效率与体验的催化剂。

未来,钉钉将继续探索动效设计的创新与实践,通过优化交互体验、提升产品效率,不断赋能用户、创造更美好的数字世界。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

讲讲AI在B端设计上的应用方法

鹤鹤

B 端设计领域的 AI 应用
大多数同学目前对 AI 应用的认识只有文生图、对话、驾驶等领域,但 AI 应用的场景远远不止它们。
和头部的明星 AI 产品、模型相比,细分市场的 AI 应用就非常没有存在感了。比如使用 AI 进行财务的审核、饮料配方的调节、工程安全的模拟等等,它可以帮助企业节约大量的人力完成工作。
概括起来,就是一些可以通过计算机完成的(也不止)重复性劳动或标准化流程,都可以引入 AI 的技术进行降本增效。
那在 UI 设计领域中,这些重复性和标准化的工作内容有嘛?
有,但是并不会像外行或者新手想象的那么多。AI 难以覆盖的场景我们过去的分享探讨过,等等也会做进一步的说明,而这里我们先要探讨的,就是能用 AI 实现的 B 端设计场景,具体有哪些。
我们都知道市面上现在有很多开源的 B 端前端框架,各个大厂前赴后继地对它们进行更新和完善,里面包含了非常丰富的组件库。
讲讲AI在B端设计上的应用方法
 
 
这些组件库不不止是 UI 的组件,也包含了前端的对应代码,前端工程师可以快速调用这些代码组件而不用自己去重新写一遍样式和交互。
原则上,使用现成的组件开发就可以快速完成整套项目的前端内容,这可以给前端工程师节省大量时间。所以即使项目中有完整的设计稿,前端在开发过程中也会偷懒直接略过,直接套用框架内的组件实现。
这和设计师直接套用素材完成运营图设计一样,明明有现成的素材在那里,为什么要浪费一大堆时间自己重新画一遍还是用 3D 建模渲染?同理,要是组件足够丰富,满足项目的需要,设计师也可以直接复用官方的组件素材,不用自己设计。
组件化思维的运用,就是项目工作标准化和重复性的根源,不仅应用在设计领域,对于前、后端开发来说同理。
基于这种思路,催生出了一种新的 SaaS 模式 —— 低代码 Low-Code 服务。
即通过少量的代码,或者干脆不用代码,仅通过可视的工具和组件实现软件的开发,并完成相应的配置和部署的工具。
这概念咋一看不就是建站工具?比如有赞、微店之类的,用户可以在里面直接创建并配置店铺,然后以网页、H5 或小程序的形式发布。
但这只是最初级的应用,传统的建站工具属于帮你预制好了主要的参数和功能,用户只能在这个范围内做少量的自定义编辑和设置。但进阶的 Low-Code,会赋予用户更大的编辑范围和自由度,让用户通过可视化的界面创建自己想要的产品和功能。
讲讲AI在B端设计上的应用方法
 
 
这类产品已经衍生出一个规模不小的市场,因为有大量的中小企业不想投入太多的精力和成本进数字化平台的搭建上,
并希望能快速创建不同的管理工具来匹配企业日新月异的发展需要
这里要划重点,对于一部分企业来说,经营模式和业务流程是持续迭代的,如果使用传统的开发模式那么很难跟上这种迭代。
以连锁餐饮品牌举例,前期只在一个城市经营,和后期扩张到全省或全国,采购流程和供应链管理必然会持续进行调整,提交一个采购工单所需填写的字段就会发生变化,同理展示的表格、详情页也要跟着调整。
这类变化往往并没有修改界面的视觉、交互、组件,仅仅是增加和减少字段数据,而用传统的收集需求再输出进行开发的模式效率非常低,所以它们就成为 Low-Code 的最佳应用场景。业务方自己配置、修改直接上线,省掉产品经理、设计师、程序员中间耗差时……
并且对于很多企业来说,只需要应用一些非常基础的功能服务和页面类型。比如我经常提到的 B 端管理系统的四个核心页面类型:
讲讲AI在B端设计上的应用方法
 
 
Low-Code 就是把常规需求标准化,并运用组件化的框架,让用户通过简单的填写和编辑就能生成出想要的页面和功能。
既然需求不复杂,功能、组件、页面、代码都可以标准化,那不用 AI 降本增效还有王法嘛?
所以,使用 AI 生成 B 端页面(不是设计稿)的工具已经在大厂内部开始应用了,开发专属大模型,再把做好的组件喂给模型,用户只要在相应的表单内填入需求,就可以快速生成出落地的页面。
并且各家大厂内部的 B 端组件库,可远远不止对外分享的这些开源框架里包含的数量,还有很多特殊的业务组件,可以让模型得到更好的训练和产出,比普通 Low-Code 模式更简单高效,大幅度提升企业内部B端产品的落地和运用效率。
从已经了解到的信息中,有一部分业务部门已经开始进入实践环节了。且随着技术的迭代,这种工具必然会越来越强大,功能越来越丰富。
所以,了解完这个趋势,设计师和前端工程师迎来大结局了?要被AI技术清洗了?现在该捧起《从0到1学习炒粉》学习了嘛?
这就是下面要讨论的内容。
B 端 AI 和设计的关联
前面做了不少铺垫,就是为了强调,适用于 Low-Code 和 AI 生成的 B 端产品,是有前提条件的,包含下面这些要素:
  •  
    完整成熟的前后端组件库
  •  
    需求使用基础做法就能实现
  •  
    需要经常变动调整的业务需求
  •  
    对设计和交互本身要求不高
而这里面最关键的东西,就是标准化。必须要知道在今天的 AI 的应用发展中,要生成出符合实际工作需要的结果,绝对不是靠输入信息以后它自己 “蒙” 出来的。为了让结果尽可能准确,那么喂给模型的数据也就要越多且越有针对性。
理论上面向 B 端的 AI 工具,只要不断提供给他新的组件、页面,就能拓展它可以实现的范围。但不管你怎么训练它,都要满足标准化的前提。
而标准化,恰恰就是国内 B 端业务的命门……
我们都知道国内 SaaS 行业现在发展非常的混乱,虽然在不同的细分领域有自己的独角兽,比如财务领域的金蝶,OA 领域的钉钉,ERP 领域的用友等等。
但是这些公司就发展状况良好利润丰厚了?24年一季度的 SaaS 头部公司业绩非常萧条,比如网上找到的统计,和国外 SaaS 头部公司的估值和利润形成鲜明的对比:
讲讲AI在B端设计上的应用方法
 
 
为什么国内 SaaS 市场那么惨淡?说到底就是在国内 B 端领域很难实现真正的标准化,而不是国内 B 端市场规模太小。
比如钉钉、飞书这样的 OA 软件已经很成熟了,但它们的实际普及程度一点都不高,而中大型企业又有各种考量,现成的不用就热衷于开发一套自己的系统,简称定制化。这就倒逼 SaaS 工具为了满足更多的企业需求,拼命叠加功能,使得这些 SaaS 工具一个比一个臃肿。
而我们前面提到的 AI 生成,想要普及同样需要面对这种困境,因为模型不管怎么做,它都是基于特定标准化下的产物,它可以满足其中一部分需求,但难以满足其它需求。尤其是国内 B 端定制化需求中,混乱、抽象、联系复杂的问题非常突出。
换句话说,国内 B 端市场的大多数系统,是非标准化的,需要产品团队在面对这些非标准的需求下做出创新和适配,就必须要考虑很多抽象的因素,领导、背景、体验、交互、周期、难度等等。这个过程不可能由业务方自己完成,且最终导出的设计结果,往往会和常规方案有很大的差异。
按常规逻辑考虑的话,那有多少组件我们整理多少组件,早晚有一天不得穷尽设计师思考范围的边界?
且不说获得不同商业项目的业务组件有多困难,如果组件之间没有更底层的思路去规范它们的设计和交互,那么硬凑到一起的项目是非常割裂的,而 AI 在短时间内没办法做到真正理解交互的逻辑并根据使用场景做理性的推理。
所以基于一套团队产出的组件必然是有限的,它们或许可以满足自己项目,但不可能满足市面上所有项目的使用需求。
还有一个很关键的疑问,就是很多人会想,一个项目中的特殊组件往往只是少数,我们用 AI 工具生成多数页面,少数进行定制和独立开发不就行了?
这思路在逻辑上很合理,但实践起来的问题非常多。举个例子比如设计稿直接生成网页这种技术,从20年前我刚了解到网页设计那天说到现在了,这个实现逻辑理应不需要 AI 的参与都能做到,中间也问世了不少产品和工具,但没有一个做成了,反而网页前端工程师都成为一个独立热门职业了(以前是 UI 写)。
原因就是作为商业项目来说,团队需要 “可控性”,机器生成代码虽然容易,但是如果要修改里面的东西怎么办?实际情况就是前端对这些外部代码深恶痛绝,因为改起来太麻烦,而越大的项目改起来难度也越高。而且这个版本的一部分你改了,下个版本工具再生成的代码要不要兼容你前面写的东西?
所以现在即使有设计稿直接生成代码的工具前端也宁愿自己写,但当他们用到第三方框架的时候,能不动框架里面的东西就不动。想要理解这个感受,只要拿这些框架的组件素材用它们的组件、自动布局形式做完一个项目,你们就会产生 —— 还不如自己重做一遍的想法。
讲讲AI在B端设计上的应用方法
 
 
所以生成工具,要不然能一次性完整满足所有需求,要不然就会因为两三成的缺口形成致命的瓶颈。当然,还有远比这些复杂的进一步因素,我就不在这里展开。
标准化无法在定制化的面前获得优势,这是国内 B 端行业面临的直接困局,当然这里有坏的影响也有好的影响。
坏的影响,就是头部 SaaS 企业没办法得到快速的发展,推高整个 B 端软件业的收入水平和吸引力,AI 生成页面这些技术适用范围小,没办法真惠及全体,行业处于反复造轮子但根本没办法停下来。
好的影响,则是头部的 SaaS 企业发展不起来,市占率就低,它们就没办像 C 端市场一样形成非常显著的马太效应,形成事实的垄断。大家重复造轮子,那么提供的就业岗位才多,才能让我国的炒粉行业没有那么卷,竞争没有那么激烈(???)……
讲讲AI在B端设计上的应用方法
 
 
如果你关注过 B 端市场足够多年,你就会明白任何企图用一种标准、方法论直接平铺整个行业的做法,注定是徒劳的,而无序、野蛮、熵增才是不变的主旋律。
但 AI 的作用短时间内完全发挥不了吗?也不是。除了前面提到的一些简单的项目之外,还有一个非常大的可能,就是中小模型的开发会变得越来越容易,而基于项目自研的界面 AI 生成工具很有可能会普及起来。虽然它们不能随心所欲生成任何需求的样式,但可以完全根据业务方的实际需要进行定制,去服务小范围的群体。
这不代表项目里面就不需要设计师,符合这套项目的标准依旧需要设计师去制定,也需要设计师持续输出特殊的页面和组件。
所以,未来很长一段时间内 AI 和 B 端 UI 设计师之间会是互补的关系,而不是替代关系。这也会对岗位要求形成进一步的影响,所以下面是我对 B 端 UI 设计师所需技能的建议:
  1.  
    进一步提升交互能力,尤其是基于业务认知输出交互方案的抽象思维能力
  2.  
    进一步巩固项目设计规范的创建能力,深入了解规范的应用和落地流程
  3.  
    进一步提升全局性设计思维,能提炼核心价值观并在项目中进行应用
  4.  
    进一步了解编程开发逻辑,能更好的配合前后端完成项目的输出提高效率
这些能力的掌握是 B 端 UI 设计师应对未来市场变化的核心竞争力,也是 AI 在短时间内绝对无法替代的东西。
不管是作为已经入行的,还是准备入行的 B 端设计新人,都不用对 AI 技术在 B 端的影响太过担心,自怨自艾,因为
如果 B 端项目的设计都那么简单的话,那么从前端框架普及的那一天起,B 端 UI 设计师就可以集体下岗,而不用等到 AI 应用的那天
换个表述方式,祝大家不会菜到那么轻易就被 AI 给取代了……


作者:酸梅干超人
链接:https://www.zcool.com.cn/article/ZMTYzNzg4MA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
 

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

WechatIMG27.jpg

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

 

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档