首页

超全梳理!B端产品设计风格的5个阶段

清阳 行业趋势

因此今天兰亭妙微UI设计公司,来讲解 B 端产品界面的视觉风格,聊聊在整个行业当中视觉风格的变化与目前的现状。以及给大家说说未来应该如何选择自己产品的视觉风格~

我们会将整体分为行业初期,萌芽期、成长期、野蛮发展期、新阶段 ,每一个阶段给大家总结一个最为流行的风格,并分析这个风格出现的原因,方便大家进行理解。

一、行业初期-经典传统风

我们把时间拉回到 2012 年。在那时,Ant Design 还没有出现,也没有什么 Element、Semi Design,行业当中最早的 B 端系统都是以客户端的形式进行呈现。

整体风格也非常老旧,像是那会儿的 Office、SAP、Salesforce,你可以看到都是他们青涩的模样。

image.png

image.png

在经典传统的设计风格当中,会使用大面积的白色作为底色,同时在页面中用灰色进行分割,使得整个页面散乱抢眼,导致整体的视觉很难被大众所接受,总体感觉信息较散,难以进行聚焦。

而在早期,出现这些老旧风格主要有三个原因:

  1. 技术框架限制:因为当中成熟的前端框架较少,没有太多技术栈提供给到开发进行使用,因此没有精力将页面做得漂亮
  2. 认知不足:设计师对于客户端、网页端的设计理解认知本身不够,做得较为粗糙,比如当时的 Office 的界面设计也大致是如此的模样
  3. 风格一致:早期 Windows 系统就是这样的风格,与 Windows 一致更容易被大众所接受,因此就很难进行创新

关于这类风格的产品,大家不要觉得这夸张,其实在目前依旧有很多产品会延续这个风格。比如 医疗类产品、工业生产类系统,对于他们而言,能用即可,不必纠结太多。

但随着时间的推移,行业中对于 B 端设计的要求也在逐渐变高。

二、萌芽期-清爽整洁风

我们将时间推移到 2015 年前后,随着行业不断发展,在国外 Fiori、Salesforce 的出现让大家意识到,这类型的 B 端产品也是需要设计的。

因此国内外的很多系统都是在这一时间面世,像是 Ant Design、Element 都相继发布。

image.png

由于这些设计系统的诞生,你会发现大家对于整个 B 端设计有了一点自己的想法。

在设计上,会去考虑使用 区块划分,将整个页面进行规整呈现。

比如 SAP 在使用了 Fiori 过后,就会使整个界面更干净。

image.png

image.png

image.png

同样非常老牌的 Salesforce 在 2015 年的时候。也带来了相当大的视觉变化。整体都能感受到,整个页面会通过不断的分层、颜色的划分、通过黑白灰的方式去呈现页面当中的基本信息。

三、成长期-沉稳侧黑风

我们的时间来到 2018 年前后,在这个时间节点,很多产品都推出了自己的设计系统,对于 B 端设计风格而言,也会提出更高的要求。

比如 Teambition 产品当中,它们提供了自己的设计系统的内容去指导整个产品来进行迭代和优化。同样 Ant Design 它们也推出了自己的 Ant Design Pro 来演示使用设计系统过后,能够搭建出什么样的产品。

image.png

同样,这个时段很多产品也开始进行自己产品的视觉优化,这时候整体的风格是以:黑色侧边导航为主,然后内容形态进行延展。

比如像有赞、Coding、微盟、飞书,之前都是这样的设计风格来进行呈现。

image.png

你会发现它们在整体的设计上都会更加重视页面的分块颜色的区隔,整体页面的识别效率。同时这段时间爆发出来非常多的 B 端产品,随后国内都会按照侧边黑色导航的样式进行进一步设计,这一定程度上提高了国内 B 端设计的下限~

四、野蛮发展期-新拟态风

我们随后将时间推移到 2019 年后,在这时诞生了新拟态设计风格。

它最早是乌克兰设计师 Alexander Plyuto 在追波和 ins 发布的一副系列作品,随后大家发现非常奇特,所以得到广泛的关注。

新拟态的设计风格是以立体效果与浮雕元素,呈现更为三维立体的效果,会给人一种奇特、梦幻的界面体验。

image.png

随后就会有很多产品都开始进行跟进,比如 智能家居的产品、金融类产品都有所涉及,甚至很多 B 端产品也勇敢尝试,但大多数设计师设计完过后,整体评价都不算太高。

image.png

为什么没有大规模的推行,我觉得有 3 点原因:

  1. 因为新拟态风格整体所占面积较大,比较浪费空间。像是一个按钮,都需要使用较大空间才能呈现。
  2. 需要大面积的留白,但是对于 B 端设计来说无法做到,因此很难进行使用。
  3. 同时很多用户刚开始觉得好看,但随着时间的推移,出现审美疲劳,因此就不太喜欢。

现在还会使用新拟态风格的界面设计越来越少,大多数只会在官网设计的局部进行使用,这样可以转换视觉感受,给到用户更好的视觉冲击~

五、新阶段-灰白风

时间来到 2022-2024 年左右,你会发现很多产品都开始在这个时间节点进行更新。

像我们熟知的 飞书、有赞、微盟、ONES、Coding,再到 Ant Design、Salesforce,你会发现非常多的产品都在进行界面风格上的迭代。

对于这个风格,我们愿意叫它为 灰白风。

整体页面是以 灰色和白色 进行的页面划分,在分布上灰色占据弱侧信息,白色占据核心信息,进而形成对页面内容的划分。

聊到这里,可能有部分同学不太理解,这里我们以飞书管理后台的迭代作为示例,给大家进行讲解。

在 2018 年,飞书管理后台的第一个版本,采取的就是沉稳侧黑风,

image.png

在 2022 年,飞书的管理后台开始改变为灰白风格

image.png

由于业务的叠加,2023 年时,在此基础上增加了顶部导航的业务维度,最终形成了现在这样的界面。

image.png

为什么这类型的风格会大受追捧,我觉得有以下几个原因

  1. 减少信息层级,给用户减负:之前沉稳侧黑风格,会发现页面明显进行大面积的分割,导致视觉感受出现较大差异。现在只用灰色作为底,去区分主副信息这样会更简单的突出主要信息内容。
  2. 平台型产品更容易嵌入:因为国内 B 端产品大多需要依附“钉钉、企微、飞书”三大平台,因此使用灰白风能够让自己产品快速嵌入,不需要过多调整。如果你的产品是沉稳侧黑风,那结果想都不敢想...
  3. 更容易进行适配:针对多产品的业务,也能够使用同一套业务完整呈现才会更加合理。比如飞书的灰白风,在飞书的其他很多产品里面也会存在

image.png

关于设计风格,我们这篇只是讲解了过去的风格内容,下篇文章我们讲解当前整个 B 端产品的设计梳理,讲解了更为重要的四种风格。

转载:优设

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

交互设计趋势——技术、伦理与人文的深度融合

清阳

 

基于当前成果与行业动向,交互设计未来将呈现以下核心趋势,推动数字体验向更智能、包容、可持续的方向发展:
趋势一:多模态交互融合迈向“无感化”,打破传统输入边界 现有成果如车载多模态系统、智能家居无界面设计已展示雏形,未来交互将更少依赖显式指令(如点击、语音),转而通过生物信号(脑电波、心率)、环境感知(温度、湿度)、行为模式分析等实现“无意识交互”。例如,设备可自动识别用户情绪变化调整服务,或通过触觉反馈替代视觉提示,降低认知负荷。脑机接口技术(BCI)的突破可能让“意念控制”走入日常生活,但需同步解决隐私与伦理风险。
趋势二:AI驱动的“自适应交互”,从千人一面到千人千面 现有AI无障碍游戏方案与个性化推荐系统证明,AI可动态适配不同用户需求。未来交互系统将基于用户生理数据(如视力、听力)、行为习惯(如左利手偏好)、甚至实时心理状态,实时调整界面布局、交互方式与反馈强度。例如,老年人设备自动简化操作流程,儿童模式增强视觉引导,情绪低落时减少干扰信息——交互设计从“标准化”转向“动态个性化”。
趋势三:伦理与隐私设计成为核心准则,构建“可信交互” 随着AI与传感器渗透生活,数据滥用与算法偏见风险加剧。未来交互设计需嵌入隐私保护机制:如本地化数据处理、用户可控的透明度界面、反歧视算法设计。例如,智能家居默认匿名化数据,用户可随时查看设备决策逻辑;脑机接口设备强制要求用户授权协议,避免思维信息泄露。交互设计需从“功能优先”转向“责任优先”,建立用户与技术间的信任关系。
趋势四:情感化设计深化,技术成为情感共鸣的桥梁 纽约时报的VR新闻与游戏的情感化叙事表明,交互设计正从“工具理性”走向“情感价值”。未来将结合情感计算与生成式AI,创造更具共情力的体验:虚拟助手通过微表情与语调模拟真实情感,医疗设备通过交互缓解患者焦虑,教育工具通过情感反馈增强学习投入感。技术不再仅是效率工具,而是成为情感连接的中介。
趋势五:跨现实交互重构空间边界,虚实融合创造新场景 当前VR/AR技术已在新闻、游戏领域突破,未来将进一步渗透至工作、社交与医疗。例如,远程协作中通过AR实现虚实叠加的团队讨论,虚拟试穿结合触觉反馈提升购物体验,医疗手术训练通过VR+力反馈设备模拟真实操作。交互设计需解决虚实信息无缝切换、空间感知一致性问题,打破物理与数字空间的割裂。
趋势六:包容性设计从“特殊需求”走向“普遍设计” 视障游戏方案与老龄化智能家居的成功启示:为边缘群体设计往往能创造更普适的价值。未来交互设计将默认考虑全人群需求,例如,语音交互同时支持方言与多语言,界面自动适配不同视力与认知能力,公共服务设备集成辅助技术。包容性设计将成为产品创新的起点而非附加选项。
趋势七:可持续交互设计贯穿产品生命周期,推动绿色转型 “绿能管家”APP与节能智能家居体现交互设计在环保中的潜力。未来趋势包括:通过行为引导减少能源浪费;设计可拆卸、模块化的硬件交互组件,延长设备寿命;利用交互界面引导用户参与回收流程;甚至通过碳足迹可视化激发集体环保行动。交互设计将成为可持续生活方式的“催化剂”。
 
技术革新与人文关怀的双轮驱动 交互设计正站在新的转折点:技术能力(如AI、脑机接口)不断突破边界,但核心价值始终回归“人”。未来优秀的设计将平衡效率与人性化,兼顾创新与伦理,让技术真正服务于不同背景、不同需求的人群。设计师需以更广阔的视野,将社会责任、情感连接、可持续理念注入每一次交互决策中,推动数字世界与现实生活的更美好融合。

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

UI设计中为什么插画设计越来越流行 ?

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

在过去几年当中,插画开始以一种坚挺的姿势,站在设计趋势的最前列。不止是原本身处各个领域的画手和插画师开始越来越受追捧,而且连网页、UI和动效设计师都纷纷学习插画设计。当然,更显著的变化,是插画在网页和UI中的使用越来越多,越来越频繁,甚至越来越多样。


多年来,插画被广泛地运用在杂志、图书、报纸、海报、传单等不同的传统载体之上,新的工具和技术使得它更加轻松地植根于数字化媒体当中。


作为设计中,最具有表现力的元素,一张插画所传递的信息比文字更多更丰富。在UI和网页中,使用插画来辅助传达信息,无疑更加直接到位。而插画的可定制性之强,犹在图片之上。



插画在UI界面中的运用,可以说相当广泛了,它更清晰,更时尚,也可以更加精准,甚至更有表现力,为什么不用呢?就适用范畴而言,我们可以观察到,它可以运用到这些地方:


  • 页面主题图

  • 网页首图和Banner

  • 吉祥物和形象插画

  • 博客文章配图

  • 新用户引导教程

  • 工具提示

  • 奖励页面和成就页面

  • 游戏化设计的页面

  • 通知和系统消息

  • 聊天表情

  • 讲故事的辅助配图

  • 信息图

  • 营销和广告图

  • 图标和装饰性内容

  • 社交媒体页面

  • 支持性内容的页面


插画的适用范围之广,这些总结出来的使用场景,并不是全部。插画本身的属性很有意思,它连接了设计,作为内容呈现,还带着明显的艺术化的属性。今天的文章,我们总结一下在设计中使用插画的10个理由和注意事项。



1. 插画是设计的原创性和艺术性的基础


无论是印刷品、品牌设计还是UI界面,更加风格化的插画能够将不同的风格和创意加入其中,在激烈的竞争中更容易因此脱颖而出。留下用户才有转化。



同样的,在博客、新闻和Banner 中使用插画,也是看准了插画可以根据内容进行深度定制的优势,这种微调能让内容更加统一一致,更加符合产品目标,借助色彩、角色、环境甚至暗藏的隐喻,来吸引特定的用户。


2. 插画是视觉触发器,瞬间传达大量信息


我们常说「一图胜千言」不是没有道理的。人的视觉感知能力很强,看到图片的一瞬间,也许还没有来得及进行逻辑思考,但是大脑已经接收到大量的信息和内容。


  • 心理学研究表明,人类只需要大概1/10秒就可以感知到场景中绝大多数的元素和基本视觉信息。

  • 视觉信息可以更快传递到大脑,而重要的信息,人类也通常会被固化为视觉图像,而非文本化的记忆。

  • 文本需要依托可读性设计,而图片和插画则会被直接识别。

  • 图片和插画更容易打破文化和语言隔阂,传递内容含义。

  • 对于视障用户、阅读障碍用户和儿童,图片插画更容易被理解。

 

3. 插画是标题和文本的重要支撑


虽然图片一瞬间传递的信息很多,但是图片在很多时候是无法提供精准而详细的内容。用户依然需要文本来呈现清晰而可以被阅读和记录的内容,所以文本依然是不可或缺的。在另外一方面,文本和标题已经具备的情况下,经过定制的插画能够辅助用户理解,更清晰的记忆。



在很多特定的领域,举个例子比如说金融,插画能够借助色彩、图形和形象来讲述故事,让用户更清晰的理解复杂的金融功能,甚至强化信任感,而这是文本所不具备的。插画能带来强烈的情感连接。


4. 插画更适宜呈现故事

故事是最令人难忘的内容,剧情的走向和起承转合会给人留下深刻的印象。而插画则以清晰的形象将文字和意象勾连起来,无论是在网页、UI设计还是内容和体验上,都有着足够突出的体现。



营造氛围,渲染情绪,描摹环境,呈现角色,插画让故事更加鲜活、易于理解。在内容制造上,有着难以替代的作用。



5. 插画独有的情感吸引力


人是情感动物,看似理性的皮囊之下,几乎每个决定都是在情感和情绪的驱动下完成的。如果某个设计除了能够帮你达成某个目标,还能让你感到愉悦,会心一笑,那么通常下一步就是将它收藏起来并且分享给朋友。而在诸多设计因素当中,插画在撬动用户情绪这一点上,有着无与伦比的效用——从线条、色彩到面部表情和曲线和动效,都在竭尽全力地为你阐述故事,营造氛围,将你拉到故事和场景当中去。



6. 插画赋予设计以美学价值,更容易被接受


即使所有人都在分析和争论产品的可用性和易用性,大家在对美的追求上,始终保持着一致的态度。一个设计是否具备可取性,是否能够通过甲方、客户和实际用户,是每个设计人都需要面对,都力求做到最好的事情。精心设计的插画在美学和风格上更加扎实,风格化的设计不弱于现成设计素材所提供的价值。



7. 插画能让品牌识别度更高


和文本相比,插画的视觉化属性无疑是更强的。图片插画所提供的定制化内容能够从各个方面来贴合品牌的需求,更加到位地表达品牌所需呈现的信息。这也使得插画不仅仅在品牌宣传的时候,运用在广告、海报等显而易见的地方,而且也成了品牌 APP 中新用户引导和教程中必不可少的元素。



就像 Perfect Recipes 这个应用的新用户引导屏中,就借助插画来呈现。而 Toonie 这个可爱的闹钟应用当中,甚至借助游戏化的设计,集成了大量有趣的表情和贴纸,当然,它们都是使用定制化的插画来呈现的。



8. 数字插画还能强化交互,应用在短视频中


数字化的好处就在这里,通过不同的数字软件,合理的处理之后,不仅能够变成动态的,运用于视频当中,还能够作为微交互,强化产品的整体体验。


一旦涉及到的动效和短视频,整个数字插画就开始具备更多的可能性了,不同的动效能带来截然不同的感觉和体验,更不用说这种玩法正贴合时下的流行趋势。


Whizzly 这个动态图标就是基于插画,给一个创意分享社区所准备的。


9. 插画的独特性来自于其中的隐喻和引人入胜的视觉


和艺术一样,设计中同样需要借助隐喻来传达一些相对更有趣、更深刻、更有意思的信息。插画的独特性也是借此来构成,包含的隐喻使得其中的价值更加复合,值得反复咂摸,而不是一眼就可以完全看穿。



在这个约会应用的网页当中,插画无疑传递出了多重的信息,暗含的隐喻告知了用户产品的功能和属性。而下面这幅插画则是为一篇如何找到原创风格的文章所准备的,图中的金鱼指代的则是难以被抓住的灵感和风格。



10. 插画让用户可以更快理解和操作


无论是图标还是大幅的插画,都能帮助用户理解,更加直观地知道要看哪里,要做什么。面对如今的数字界面,用户的注意力持续的时间越来越短,而插画则让用户更快、更直接地获取信息,并且决策下一步要做什么。如果插画或者图标内容不能被用户一眼看出来,那么用户就只能借助文本标签来了解功能是什么。设计师可以通过测试来测试图标和插画的可用性和识别度。

值得思考的问题

当然,插画的设计是没有门槛的,在设计的时候,要求也是比较高的。在使用和设计插画的时候,需要考虑以下的几个方面:

  • 目标受众(身体能力,年龄,文化背景,教育水平等)

  • 产品的使用环境

  • 产品和内容的在全球范围内和当地的传播水平

  • 所选图形的隐喻以及是否容易被识别

  • 插画是否会让人分心

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

iOS 11 设计理念和 3 个设计方向

用心设计

Wayfinding / 寻路 / 空间导引


我们通过「标识系统」在街道,机场,停车场这些场所进行方向和位置的识别,这种导引指示系统被称为「Wayfinding」,词语来自「建筑领域」,由 Kevin Lynch 在 1960 年提出,中文名是「寻路」或「 空间导引」。


iOS 11 设计理念和 3 个设计方向

2017年最值得关注的8个前沿网页设计趋势

用心设计

就过去几年来说,以下4点值得在未来继续关注:

  •  移动设备使用人数逐年增长

  •  移动和家用网络中的带宽增加

  •  WebGL技术的出现,使开发人员能够借助系统显示芯片在浏览器中展示各种3D模型和场景

  •  HTML5,CSS3的广泛应用及JS框架技术的崛起

    2017年最值得关注的8个前沿网页设计趋势

非心灵鸡汤!2017年“设计师”发展趋势指南

之晨

2017年刚刚开始,美丫姐已经在不同的平台看到了不少关于2017年的设计趋势分析了。很多会从设计风格或是应用平台等不同的维度进行分析,看完之后也是大受启发。不过还没有看到从设计师自身的维度来写的文章,所以今天就想要言简意赅的从设计师本身出发,进行所谓的趋势化的归纳总结。

毕竟,我们不断的研究设计技法,也是为了成为更好的设计师。

废话少说,近两年互联网的形式趋于平稳。各类互联网产品不再如雨后春笋一般冒出来,整个行业从风口也慢慢的退下来,趋于规范化。简单来说就是大家都理智起来,投资人理智了,创业公司没办法像以前那么容易拿到风投了;消费者也理智了,即使是行业中垄断的龙头们也没办法爆发式的增长利润了。

设计理念比美感更重要

用心设计

                  设计理念比美感更重要。通过7大设计理念,来展示其重要性。

Image title

十大令人振奋的移动端APP设计趋势

用心设计

从移动端兴起,主流设计风格定型,再到Uber、Vine等现象级APP的崛起,移动端的APP设计直到现在才渐入佳境。促成这一切的影响因素很 多,比如社会发展趋势的变化、共享经济的大热、新技术的积累,等等等等。这些事物的出现需要时间积累,这也是为什么这些应用到现在才火起来。

同样的,今年我们要关注的是定型了的巨屏手机和逐渐沉淀下来的可穿戴设备。

随着日常生活中所涉及到的移动端应用的增加,用户在这些东西上的所耗费的精神和脑力也越来越多。查看邮件、预订酒店、叫外卖都有赖于各种应用,而诸 如Airbnb和GrubHub这样的优质应用则大幅度减少了用户在无关细节上的精力耗散,可以更好地处理其他的任务,专注于更有价值的事情。用户所面对 的任务越多,那些真正能够便捷运用且迎合用户需求的APP所体现的价值就越明显。

日历

链接

个人资料

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

存档