首页

B 端设计师必备:高效竞品分析实战指南

涛涛 B端ui设计文章及欣赏

对于 B 端设计师而言,竞品分析是解决设计难题、把握行业趋势的核心工具。但实际工作中,很多设计师都会陷入 “难试用、术语多、无结果” 的困境 —— 要么拿不到竞品账号,要么被专业术语绕晕,要么漫无目的地点击浏览,最后只留下 “这个界面不好看” 的浅层评价。其实,B 端竞品分析的核心不是复刻产品功能,而是通过拆解表象、挖掘逻辑,为自身设计提供可落地的思路。本文结合实战经验,从核心价值、竞品分类、分析方法到资源渠道,全方位拆解 B 端设计师该如何做好竞品分析。

  B 端表单页设计:从规范到高效的全维度指南

涛涛 B端ui设计文章及欣赏

在 B 端产品中,表单页是数据录入的核心载体,更是用户与系统交互的关键桥梁。很多设计师往往因表单页视觉设计空间有限而忽视其重要性,导致页面布局混乱、操作繁琐,严重影响用户录入效率。然而,优秀的表单设计能够通过合理的结构、清晰的指引和智能的交互,将 “被迫填写” 转化为 “高效完成”,真正实现为 B 端用户降本增效的核心目标。本文将从设计原则、核心构成、交互设计、布局策略和易用性优化五个维度,拆解 B 端表单页的设计逻辑与实践方法。

商家后台 AI 功能体验升级:以统一认知赋能商家高效经营

鹤鹤 B端ui设计文章及欣赏

一、项目背景与核心目标

 
随着 AI 技术深度融入电商经营全流程,百度优选商家后台已实现 AI 能力在商品创建、经营管理、客服接待等核心场景的全面覆盖。但商家在使用过程中普遍面临 “不会用、不敢信” 的体验难题,经深度拆解经营痛点发现,交互模式不统一、视觉表达混乱是核心诱因,直接抬高了商家对 AI 工具的认知与使用成本。
 
为此,我们以 **“统一 AI 认知,提升商家经营效率”为核心目标,启动 AI 功能体验升级工作。团队立足行业主流的嵌入式、对话式、伴随式三大 AI 交互形态,结合 B 端商家后台的操作习惯展开审慎选型与创新设计:舍弃更适用于自然语言指令推进生产、以沉浸问答为主的对话式交互;同时针对客服、直播互动等需规模化、自动化运行的场景,创新提出“托管式”** 交互范式,适配低人工介入的服务需求。并同步搭建统一的 AI 视觉语言体系,最终打造出一套商家可统一理解、轻松调用、深度信任的智能体验解决方案,全方位助力商家降本提效。

image.png

 

二、三大交互范式的场景化落地应用

 

2.1 嵌入式交互:复杂表单的灵活填写助手

 
嵌入式交互的核心是让 AI 生成结果紧邻用户操作场景,实现轻量便捷的交互体验,核心适配复杂表单填写类场景,以商品创建环节为典型代表 —— 该环节字段繁多、手动填写耗时久,且易因填写不规范被审核驳回,严重拉长发品周期。针对这一问题,我们根据字段特征与 AI 能力类型,设计了两种差异化交互流程:
 
  1. 填充识别类:针对规则明确、AI 可通过识别提取关键信息输出稳定答案的字段(如商品属性),采用系统自动填入模式,搭配 “AI 预填” 标签提示状态。例如 AI 可从商家上传的商品包装图中识别 “风干”“盒装” 等信息,自动填入食品工艺、包装方式模块,同时提示商家检查确认,以自动化替代手动录入,最大化缩短填写时间。
  2. 推荐优化类:针对需依托 AI 优化素材、提升购买吸引力的内容(如商品主图、标题),因存在 AI 创作内容不符商家预期的可能,采用 “主动提供结果但不预先填入” 的模式,支持商家对 AI 结果进行调优,待符合预期后再手动录入。灵活的交互设计既满足不同商家的个性化需求,也有效降低人工审核时长。
 
该模式上线后成效显著,商家平均发品时长缩短 8 分钟,发品成功率提升 0.7%,模块满意度提升 25%,实现了既定流程内的效率突破。

image.png

 

2.2 伴随式交互:全场景的主动诊断助手

 
针对商家多线程经营时需频繁跳转各模块、需自主发现经营问题的痛点,我们打造了深度融入经营动线的伴随式交互方案,聚焦 **“主动触达、连续洞察”** 两大核心,让 AI 助手跳出常规对话机器人的被动响应模式,转变为结合工作流前后场景、提供落地行动指引的经营辅助工具。
 
  1. 主动触达:AI 助手入口设计 “流光呼吸感” 动效,搭配轮播词条实时推送与当前任务相关的关键信息(如 “今日店铺访问量增长 20%”),实现轻量视觉吸引;当商家停留于具体任务页面时,助手可基于页面内容与业务逻辑,主动识别潜在问题并推送轻量提醒(如 “商品主图尺寸可能影响点击率”),在商家未发起提问前即主动触发服务。image.png
  2. 连续洞察:AI 助手在输出建议或数据时,会附带清晰的思考过程与来源摘要,实现 “可解释的 AI”,打消商家疑虑;同时能基于当前对话主动预判后续需求,智能推荐下一步操作(如 “进一步分析体验分下降的原因”),将单点查询转化为系统性的经营问题排查与解决链路,大幅降低商家获取完整决策依据的综合成本。image.png
 
通过以上设计,AI 工具从单纯的被动响应工具,升级为能主动赋能的经营伙伴。
 

2.3 托管式交互:隐式服务的安心管家

 
相较于嵌入式、伴随式交互需商家实时参与、无法解放人力的特点,托管式交互通过 **“预先配置规则,系统自动执行”** 实现最高程度的自动化,核心适配客服接待等需规模化服务的场景。针对商家对 AI 自动化 “黑盒操作回复” 的不信任,以及人工无法实现 24 小时不间断接待、难以覆盖海量咨询需求的问题,我们设计了 “预先配置 + 人机接力” 的托管式交互方案,让 AI 成为可自主运行的安心服务管家。
 
  1. 可视化配置,构建信任基础:为消除商家对 AI “黑盒操作” 的疑虑,将抽象的 AI 能力转化为可预判的具体结果,我们提供直观的策略配置面板与 C 端页面预览图,商家可针对售前咨询(商品咨询、催促下单等)、售后维护(退款申请等)不同场景设置回复规则,并实时查看 AI 执行的示意效果。“配置即所见” 的设计让 AI 能力变得具体可感知,让商家从配置起点建立对自动化系统的可控感。

     

    image.png

  2. 明确状态标识,实现流畅人机接力:为保障人机协同的顺畅性,界面中对接待状态进行全方位清晰标识:全局接待状态置顶实时更新、会话列表按状态动态分组、单人接待状态(接待中 / 暂停接待)强化并自动同步。当 AI 无法解答复杂诉求、用户负面情绪等问题时,会话将自动流转至 “待人工回复” 分组,通过动态高亮 + 声音预警提醒人工快速接管;人工回复后,AI 将自动暂停并更新接待状态,同时生成会话摘要,帮助工作人员快速了解沟通前因后果,将决策焦点从 “梳理问题” 转向 “解决问题”。此外,客服可主动设置 “恢复托管”,AI 也会在识别新会话时自动恢复接待,形成闭环的人机协同机制。image.png
 
在买家视角,该设计也实现了服务主体的明确化:AI 接待时清晰标识消息主体,人工接管后实时告知买家,保障消费者的服务体验连贯可靠。该模式上线后,咨询响应时长缩短 15.8%,商家满意度提升 14%,买家满意度同步提升 7.4%,成功实现 7×24 小时规模化服务覆盖与服务质量的双重提升。
 

三、构建全链路智能化感知体系

 
在三大交互范式的基础上,我们搭建了一套贯穿产品全链路的智能视觉语言体系,沉淀为具有 AI 特色的感知系统,全方位优化 B 端设计体验、提升操作效率。
 
在视觉设计层面,我们继承百度 APP 的 AI 标识与色彩体系,延续用户对 “百度 AI” 专业、可信赖的固有认知,有效降低商家的理解与学习成本。针对 B 端界面信息密集,需兼顾操作效率与视觉清晰度的特点,在百度 APP 高饱和智能感知色彩体系的基础上,结合现有产品组件降低色彩饱和度,实现视觉降噪,打造出适配 B 端操作场景的浅色系列组件。
 
为弥补浅色体系下 AI 视觉感知弱化的问题,我们引入状态动效、声音提醒等多维反馈机制,通过感官协同让商家在复杂界面中,也能清晰、即时地感知 AI 运行状态(如 AI 智能接待中的扫光动画),保障信息传达的效率与可靠性。

image.png

image.png

四、设计核心与价值沉淀

 
本次百度优选商家后台 AI 体验升级,始终以 **“以商家提效为中心”** 为设计核心,通过 “场景筛选适配 + 交互形态创新”,落地嵌入式、伴随式、托管式三大交互范式,精准破解商品创建、多线程经营、客服接待等核心场景的使用痛点;同时构建 “视觉 + 多感” 的智能化感知体系,从根本上解决商家 “不会用、不敢信” 的体验困境。
 
从业务价值来看,本次升级实现了发品效率、经营问题解决率、服务满意度的全方位提升;从设计价值来看,项目沉淀的 **“场景 - 范式 - 视觉”** 设计方法论与标准化组件资产,为直播带货、智能投放等更多电商场景的 AI 赋能提供了可复用的落地模板。
 
未来,我们将持续围绕商家实际经营需求迭代优化产品,推动 AI 技术深度融入电商经营全链路,以设计驱动产品长效升级,助力商家实现降本提效,为百度优选商家生态的高质量发展注入持续动力。
本文为转载
 

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

 

image.png

资深设计的 10 个 UI 技巧

清阳 B端ui设计文章及欣赏

正文

为了帮助大家更轻松地提升设计水平,这里整理了一些简单实用的小贴士。希望这些小技巧不仅能够助力您优化当前的设计项目,还能在未来的设计之旅中为您提供参考价值。

 

 

 

01. 避免卡片上文本信息过多

 

一个卡片内通常会包含图片、标题、详细介绍及行动按钮等元素,这些元素需要以聚焦的形式去呈现,以帮助用户快速扫描内容。当文本内容较长、展示的信息过多时,不利于用户快速扫描,导致用户无法在第一时间快速感知到产品想要展示的、或用户想要知道的信息,很容易被用户过滤。

 

image.png

 

文本内容过多且无法删减时,我们可以从中提取部分更有价值信息,也可以只显示文本内容的前两行,其他将其省略,以点击展开更多、内容弹窗或者跳转页面的方式将其完整展示,都不失为一种不错的解决方式。

 

image.png

 

 

 

02. 减少表单字段的填写数量

 

在设计表单时,让用户填写过多的内容会增加其认知负荷,表单完成率也会随之下降。为了减少用户的操作次数,降低使用难度,但凡能让用户选择的就不要让他输入、能够系统获取的就不让用户去选择,要尽可能的减少字段填写数量,让表单显得更加简单。

 

类似地址、日期这类层级内容,不要将其分成多个字段,最好做成联动选择让用户一气呵成。

 

image.png

 

 

 

03. 不同输入场景下的键盘类型

 

为了简化数据输入,满足不同的类型的文本输入需求,用户在输入不同类型的字段时,应提供对应类型的键盘,便于用户更快完成表单内容,常见的键盘有以下几种:

 

  • 中文键盘:绝大多数表单使用的类型,应对纯中文或综合性文本类型的输入需求;

  • 英文键盘:纯英文类型的字段,例如字母类型的用户名、英文名输入等;

  • 数字键盘:纯数字类型的字段,例如手机号、身份证号、银行卡号等;

  • 数字键盘(乱序):多用于纯数字密码类型的输入需求,对安全系数要求较高,如支付密码等。因出于安全考虑,这类键盘虽然会增加用户的理解成本,但与财产的安全性相比,显然在可接受范围之内。

 

image.png

 

 

 

04. 行高应跟随字号而变化

 

有很多设计师在处理大量的文本内容时,为了遵循设计规范,会设定固定的行高数值,例如常用的1.2、1.5倍等,需知设计规范是为了避免我们在设计中出错,并非为了规范而规范。

 

在应对大量的文本类容时,为了让用户有更好的可读性和易读性,行高因跟随字号的大小而变化,字体越小、行高越大,想要视觉上更加细腻,文字越粗(越黑)、行高越大,我们只需要保证在同一字号、字重的条件下,保持同相同数值的行高即可。

 

image.png

 

如果中文看的不是那么明显,可以试下英文,特别是上一行基线到下一行基线之间的距离尤为明显。笔者因工作中涉及中、英、泰三文切换,在处理行高时不敢有丝毫马虎。

 

 

 

05. 基于拾色器右上方选取颜色

 

在为UI选取主色调时,大多都是根据logo色来建立UI色彩体系,因品牌logo会用户各行各业,尤其是平面印刷用色与电子屏幕用色差异过大,故而logo色并不能直接用于UI设计,我们需要在logo品牌色的基础上做出调整。

 

设定主色调时,可基于品牌logo的色相或往邻近色方向微调,然后在拾色器右上方(介于饱和度和明度最大值附近)选取具体的颜色。这种配色方式能让主色更加鲜明,在电子设备中显示也会更加舒适、和谐。不仅如此,在选取辅助色时也可以使用这种方式。

 

9af363ea15145ad20bfee65eb764bb28.jpg

 

目前市面上那些成熟产品的配色,都会有这种规律,主色都基于拾色器右上角的位置。

 

3b71af18f9df946b67d554008e9026dd.jpg

 

 

 

06. 表单标签的对齐方式

 

常见的表单标签对齐方式有三种,左对齐、右对齐和顶对齐。不同的对齐方式都有各自的优点和缺点,我们需要根据项目实际情况来选择最合适的对齐方式。

 

左对齐:左对齐是最为常见的对齐方式,可充分利用页面的垂直空间,易于扩展。在选用左对齐时,标签字数需在可控范围类,一般不超过4字,否则会降低可输入空间,影响输入内容的长度;

 

c90ce9c315d7458cc764d074e1e91c7e.jpg

 

右对齐:多用于网页表单中,在标签稍长、且字数长度不一的情况下使用。当标签参差不齐时,与左对齐相比,右对齐能拉近标签与输入框的距离,增强内容的关联性;

 

851b0c1831ef929fed5353270ea9d5eb.jpg

 

顶端对齐:会占用较多的纵向空间,通常用于标签长短不可控的场景下,例如常见的英文表单。在中文场景中使用不多,如用户问卷调查、信息搜集等。

 

76ecf71d33b06e37314546a5a9835b75.jpg

 

 

 

07. 大胆使用空间留白

 

为了提高界面利用空间,追求信息的饱和度无可厚非,但过度追求并非是一件好事,当信息过于密集、信息层级较难区分时,会耗费用户更多的时间成本。

 

不要吝啬界面留白,基于亲密性原则,在合理的将信息进行分组之后,请大胆使用留白,应避免元素与元素、与信息组之间过于密集,保持界面的呼吸感,给用户更为舒适通透的体验。

 

973140880d16232629cfe22d9d16370a.jpg

 

 

 

08. 中性色的设定(黑白灰)

 

中性色在UI设计中相当重要,虽然仅次于品牌色,但在我们的设计流程中,定义中性色往往会早于定义品牌色,因为在界面配色之前,我们会通过中性色来表现界面信息的层级。

 

中性色即色彩中的黑白灰,设定中性色是由调整HSB(色相/饱和度/亮度)中的B值高低里形成一个表现视觉强弱的等级阶梯,一般设定4~5个等级即可,例如B值的20%(#333333)、40%(#666666)、60%(#999999)、80%(#CCCCCC)、90%(#E6E6E6)。

 

ce704177f70d217c002cfe3d25d4a9d0.jpg

 

这里需要注意两个问题,一是要避免使用纯黑色,因为纯黑色在电子屏幕中是不发光的,会与其他发光的颜色产生巨大的反差,不易与视觉浏览;而是设定的黑白灰等级数量不宜过多,否则邻近的色值很难拉开视觉层级。

 

 

 

09. 投影的光源保持统一

 

这可以被视为提升用户体验的一个高级技巧。在给组件添加投影时,如果光源方向或强度不一致,即使这种差异很细微,也可能因为不协调而破坏整体视觉效果,使界面看起来不够专业或者缺乏连贯性。

 

为了增强视觉上的和谐与统一,所有UI组件都应遵循相同的光源方向,使各个元素之间更加协调,帮助用户更快地理解和适应界面布局。此外,通过确保光照效果的一致性,还可以有效地突出重点信息。

 

7f3e11a7cf2fe70d973e7db19fe89200.jpg

 

 

10. 避免用占位符替代标签

 

输入框中的占位符可以为用户提供初步的指引,帮助他们在开始输入前有一个短期的记忆提示。理想情况下,占位符应作为标签的补充。然而,如果只有占位符而没有标签,用户可能会感到困惑,尤其是在他们点击输入框后占位符消失时,可能会一时记不起要输入的内容。

 

标签对于明确指示用户在表单字段中输入什么信息至关重要。保持标签的可见性不仅能提升产品的易用性,还能特别照顾到那些认知和记忆力较弱的用户。这样可以确保每个输入字段的用途始终一目了然,减轻用户的认知负担,使表单更加友好、清晰且易于使用。

 

9ea922da8645b4036364c3a0cf84538a.jpg

转载:黑马青年

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

 

image.png

浅色界面设计赏析:多场景下的轻盈与高效

蓝蓝设计的小编 B端ui设计文章及欣赏

 

北京兰亭妙微 UI 设计公司始终保持学习的态度,不断拆解国际上的优秀设计案例,汲取前沿设计思路,以下精选 5 组国外设计师的 UI 设计作品,
 
这组界面设计延续了浅色基调的核心优势,在企业管理、金融工具、教育科技等多场景中,实现了视觉舒适度与功能效率的平衡。
 
为设计创作提供可落地的参考:
 

1. 设备管理后台(图 1)

 
以米黄色为基底,搭配低饱和的灰色与黄色,营造出柔和专业的氛围。
 
  • 核心功能:全球设备分布地图以深浅灰度区分区域,黄色标记设备数量,悬浮卡片可快速查看设备详情;右侧安全状态仪表盘与历史会话列表,让管理员对设备风险和使用记录一目了然。
  • 设计亮点:圆角卡片与细腻的阴影层次,让信息模块清晰易读,避免了传统后台的压抑感。

2. 订阅套餐页(图 2)

 
采用极简浅蓝 + 白色的配色方案,突出套餐价格与核心卖点。
 
  • 核心功能:三个套餐卡片以不同透明度和色彩区分主次,中间 “最受欢迎” 的季度套餐用高饱和蓝色强化视觉焦点,顶部的切换按钮可快速切换个人 / 企业方案。
  • 设计亮点:轻量化的线条与柔和的渐变,让商业转化页面既专业又不生硬。
 

3. 工作流自动化编辑器(图 3)

 
以浅绿 + 白色为背景,搭配低饱和的功能模块色彩,让复杂的流程搭建变得直观。
 
  • 核心功能:拖拽式的节点设计,用不同颜色的线条和箭头区分数据流向,右侧工具列表可快速添加触发条件与动作,适合非技术人员快速搭建自动化场景。
  • 设计亮点:点阵背景与悬浮交互,让界面既有设计感又不干扰功能操作。
 

4. 金融仪表盘(图 4)

 
以白色为基底,用珊瑚红作为辅助色突出关键数据,让财务信息一目了然。
 
  • 核心功能:集成了账户管理、收支统计、股票走势等模块,环形图、波动图等可视化组件让数据直观易懂,AI 助手入口进一步提升了操作效率。
  • 设计亮点:圆角卡片与呼吸感留白,让高密度的金融信息不再压抑。
 

5. 房产风控后台(图 5)

 
以浅绿 + 米白为底色,营造出清新专业的视觉感受。
 
  • 核心功能:左侧房产列表展示关键信息(房龄、温度、地址),右侧地图用彩色热力圈标注风险区域,帮助风控人员快速定位高风险物业。
  • 设计亮点:半透明的热力层与简洁的卡片布局,让空间信息与房产数据联动更清晰。
 

6. 教育学习平台(图 6)

 
以浅粉 + 浅蓝的低饱和配色,契合教育产品的友好感。
 
  • 核心功能:顶部问候语与学习进度图表,搭配课程推荐与好友成绩对比,激发用户学习动力;多维度的数据可视化让学习效果清晰可见。
  • 设计亮点:柔和的色彩过渡与细腻的动效,让学习过程更具愉悦感。

 

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

 

image.png

B 端表单页设计:从核心逻辑到落地实践

涛涛 B端ui设计文章及欣赏

在 B 端产品中,表单页是连接用户与系统的关键桥梁,它承载着信息录入、数据提交、功能配置等核心任务,其设计合理性直接影响用户操作效率与系统数据质量。优质的 B 端表单页不仅能降低用户填写成本,更能助力系统实现精准的数据管理,为产品核心价值赋能。本文将从设计逻辑、核心原则、布局策略到复杂场景解决方案,全面拆解 B 端表单页的设计要点。

B端产品的全局导航怎么设计?

清阳 B端ui设计文章及欣赏

假如你是第一次到大型公司入职,进入陌生且庞大的建筑群中迷失了方向:哪里是1号楼?哪里是A座?哪里刷门禁?餐厅在哪里?这时,你就需要一个准确的导视系统,帮你在空间中定位,并且找到前进的方向。

同理,当我们使用某个软件系统时,也会面临同样的问题。当用户带着问题和目的进入了系统,会自动去寻找目标功能入口,提供这些信息和入口的便是导航。

导航菜单在B端任意一个产品中都是不可缺少的,且每一个导航菜单的位置基本都是固定的。解决了用户“我在哪儿”“到哪儿去”的问题,并且引导用户进行页面间的跳转操作,快速找到目标。

根据导航的触达范围,在B端场景中常用的导航可以分类六个类型:

1、全局导航

2、局部导航

3、页内导航

4、下钻类导航

5、返回类导航

6、联想类导航

其中全局导航可以覆盖整个网站的通路,往往表现为网站的一级分类,它不一定包含全局信息,但是可以让用去渠到目标关键节点上。全局导航对用户体验的影响共有两点:

1、呈现内容和功能的架构。全局导航相当于整个网站的骨架,支撑着内容和功能组成的身体,构建内容和功能的整体认知,扁平化用户的任务路径,帮助用户了解当前位置和目标路径。

2、突出核心功能。将核心功能放在用户最能接触到的位置,适度隐藏次要功能。

并且全局导航和首页内容共同塑造了用户对于网站的第一印象,同时强化品牌形象。

一、全局导航的基础样式

导航菜单是由多个菜单项集合组成的。菜单项由容器+选项内容(图标+文字或文字)组成,交互行为是点击菜单热区后跳转到相应目标页面。

image.png

用户的浏览动线一般是左上到右下,所以全局导航一般被设置在页面左侧或页面顶部。按照导航选项的权重或者优先级一般分为三种样式:

image.png

1、横向导航

横向导航置于页面顶部,横向水平延展,从左到右选项优先级递减。横向导航视觉干扰小,可以将较大的屏幕空间给到内容展示。但拓展性较低,更适合官网等结构简单的产品。

2、纵向(垂直)导航

纵向导航置于页面左侧,垂直延展,选项优先级由上而下递减。用户可以在不同选项中快速切换,操作效率较高;纵向空间可以容纳更多菜单选项,并且可以延展二级分类。拓展性比较高,适合专注操作的后台类产品。

但纵向导航占用面积较大,视觉比较突出,浏览过程中打断感比较强。有些网站为了减小视觉面积,也经常使用折叠模式的纵向导航。

image.png

3、纵横式导航

同时使用横向和纵向导航,通常横向导航是一级导航,用于展示全局类目和功能;纵向导航为二级导航,提供具体的功能和内容。

这种导航可以容纳更多的信息层级,信息密度较高。但菜单面积较大,视觉复杂度较高。适合操作比较复杂的后台类产品,比如云产品。

二、全局导航的拓展能力

全局导航为了容纳更多的信息量,就拥有强大的拓展能力,主要来承接导航菜单的深度和广度。

1、深度指导航的层级数目,层级越多,深度越大。

根据用户需求和使用场景梳理产品架构,当层级过多时,需要对功能进行分组。比如哪些功能需求是互相关联,可以组合在一起的,这时就需要考虑用一个集合页面来承接这些功能。

image.png

当层级大于2个时,可以利用面包屑导航,用户可以根据面包屑导航看到当前操作的位置和轨迹,并且方便返回到任意位置。

image.png

2、广度指导航每一层级包含的菜单数目,数目越多,广度越大。

合理规划导航广度,就可以用到“简约四策略”,分别是删除、组织、隐藏、转移。

1)删除:删除不必要的功能。精简功能,删除多余文字,精简按钮等,让用户集中注意力,避免在冗余的功能中丧失目标感。

2)组织:组织必须提供的功能。在视觉层面上,做到信息分层清晰;在产品层面上,做到根据内容做功能分组,让用户更方便查阅和寻找。分块越少,选择越少,用户负担就越小。

3)隐藏:隐藏非核心功能。不常用但不能少的功能,可以选择隐藏,利用渐进式的展示方式,只要不让用户找太久,就是有效的隐藏。

4)转移:转移非擅长的功能。利用设备转移、软件转移、向用户转移,比如将一些因为屏幕大小影响展示的功能在手机端进行隐藏,只在电脑端做展示。

三、设计要点

1、全局导航需要有足够的视觉权重,如果菜单选项不是特别复杂,尽量不使用全局折叠的形式。一般默认展开,不需要时可以折叠。

image.png

2、保持结构简洁,导航层级如果太深,比如三级导航,影响导航的可见性。

image.png

3、控制一级导航菜单数量,以免视觉溢出过多。保证文本易于辨识,使用已于理解的图标,减少重复文字,精简菜单名称。

image.png

导航如我们前进路上的指示标,指引用户方向并承载产品内容,也是B端产品系统中不可缺少的一环。产品拥有清晰、一致的导航,也要兼顾导航菜单选项的可见性和用户操作效率,让用户有目标感、良好的体验感,做一个与用户心智模型匹配的导航系统。

转载:京东体验设计中心

5个国际优秀 UI 设计案例欣赏:简约实用的跨行业设计灵感

蓝蓝设计的小编 B端ui设计文章及欣赏

北京兰亭妙微 UI 设计公司始终保持学习的态度,不断拆解国际上的优秀设计案例,汲取前沿设计思路,以下精选 5 组国外设计师的 UI 设计作品,覆盖教育、金融、健康、企业协作等领域,聚焦 “简约美学 + 功能适配” 的核心逻辑,为设计创作提供可落地的参考:

案例 1:英语口语学习平台 —— 柔和高效的互动课堂

设计亮点
 
  • 视觉风格:淡粉与浅紫的低饱和配色,搭配圆角卡片与清晰留白,整体风格柔和不刺眼,契合语言学习的轻松场景;
  • 功能布局:以直播授课区为核心,左侧学员连麦列表、底部工具条(转录、字幕、录音)、右侧聊天框分区明确,操作路径简洁;
  • 细节设计:外教形象清晰直观,课程入口标注时间与老师信息,聊天框用简单表情符号丰富互动氛围,无冗余装饰元素。

英语口语学习平台ui设计

案例 2:加密货币交易平台 —— 专业清晰的金融界面

 
设计亮点
 
  • 视觉风格:暗黑底色搭配深绿线条,突出数据可读性,图表采用简洁线条设计,无过度动效,契合金融产品的专业属性;
  • 功能布局:核心区域展示资产趋势图,右侧头寸计算器支持参数输入与风险测算,下方整合行情日历与币种数据,覆盖交易全流程;
  • 细节设计:用红 / 绿明确区分涨跌状态,关键收益数据放大展示,操作按钮样式统一,交互反馈清晰,降低专业操作门槛。

加密货币交易平台ui设计

案例 3:健康管理平台 —— 清爽直观的数据展示

 
设计亮点
 
  • 视觉风格:淡绿为主色调,搭配浅灰底色,传递健康自然的氛围,数据以环形图、进度条等轻量化形式呈现,避免复杂设计;
  • 功能布局:核心区聚合热量、心率、健康指数等高频数据卡片,下方分运动占比、睡眠分析模块,支持时间筛选,左侧导航功能分类清晰;
  • 细节设计:健康数据标注明确,趋势图线条简洁,Pro 版升级入口以小图标点缀,不干扰核心功能使用。

 

案例 4:企业团队协作平台 —— 高效简约的 B 端界面

设计亮点
 
  • 视觉风格:低饱和淡绿 + 灰白配色,界面干净整洁,图表采用简约指针式设计,无多余装饰,适配企业办公场景;
  • 功能布局:顶部标签区分组织、团队、订阅等模块,核心区展示运营数据卡片与统计图表,右侧整合辅助功能入口;
  • 细节设计:数据指标标注清晰,操作按钮位置合理,辅助功能以图标简化呈现,降低企业用户的学习成本。
语言学习仪表盘ui设计

案例 5:语言学习仪表盘 —— 清晰易懂的学习追踪

 
设计亮点
 

组件库设计核心:Tag 标签变体组件的规范化实践

涛涛 B端ui设计文章及欣赏

在数字化产品的界面设计中,Tag 标签作为高频使用的基础组件,承担着分类标记、状态提示、筛选导航等关键功能。从 NFT 平台的资产状态标注,到日常应用的内容分类,Tag 标签的设计直接影响用户的识别效率与操作体验。作为组件库中的重要组成部分,变体组件的规范化设计能大幅提升团队协作效率,保证产品界面的一致性。本文将结合实际设计经验,从设计原则、组件构成、参数规范到应用场景,全面拆解 Tag 标签变体组件的设计逻辑。

B端干货|全链路设计的分析能力

鹤鹤 B端ui设计文章及欣赏

全链路用户体验设计师需要具备的六大能力模型。掌握这六种能力模型,既可以辅助我们进行更好的设计支撑,也可以在业务的工作汇报和部门的述职工作中站稳脚跟!!!
市场分析 | 用户洞察 | 产品规划 | 项目管理 |  数据分析 | 用户运营
下面我会分几篇文章去讲解这六大能力模型~
 
市场分析
B端干货|全链路设计的分析能力
 
 
1. SWOT 分析模型
B端干货|全链路设计的分析能力
 
 
什么是SWOT?
SWOT是一种经典的企业战略规划工具,著名咨询公司麦肯锡经常使用它为企业战略咨询服务,它通过分析对象内外部因素从而得出战略结论的分析方法。核心理念在于通过对影响因素进行分类梳理,再通过聚合考虑来得出结论。
B端干货|全链路设计的分析能力
 
 
如何进行SWOT分析?
大道至简,SWOT分析模型的应用也很简单,分别对各维度因素进行识别和梳理,然后构建出分析矩阵,最后根据矩阵中信息进行综合分析,就能得出结论和战略方向了。
B端干货|全链路设计的分析能力
 
 
 
a. 梳理分析维度
内部因素分析
也就是S(强项)和W(弱项),可以从Q(品质)、C(成本)、D(技术和交付能力)、M(人才设备等)、S(服务)等维度进行梳理。当然也可以根据分析对象的特性进行调整。
外部因素分析
也就是O(机会)和T(威胁),可以借助PEST模型或者波特五力模型上着手(这两个模型后续再详细展开)
 
b. 构建分析矩阵
这个步骤就挺简单,就是把第一步分析的因素,按照这几个类别放到一起
B端干货|全链路设计的分析能力
 
 
 
c. 制定战略计划
B端干货|全链路设计的分析能力
 
 
d. 案例练习
假设你在夜市有一个烤肠摊为基础,来一次思想实验,练习一下SWOT分析。
B端干货|全链路设计的分析能力
 
 
战略方向调整
SO(利用优势抓住机遇):
  •  
    推出新产品
S的地理位置好+已有口碑,结合机遇中的健康饮食,那么可以开发新品/建立宣传点,推出健康烤肠新品,满足市场需求。
  •  
    社交媒体推广
利用已有优势+社交媒体,在工作中进行直播,进一步提升口碑和影响力。
PS:315对淀粉肠进行曝光后,如果这个店一直以健康和口碑立足,是不是恰好又迎来机遇呢?
 
ST(利用优势应对威胁):
  •  
    增强食品安全
现在口碑和味道都很好,但是一旦出现食品安全问题,影响会很大,那么应该确保产品质量,维护小店声誉。
  •  
    强化独特口味
地摊竞争对手众多,利用优势脱颖而出,可以对口味等强化宣传
 
WO(克服劣势抓住机遇):
  •  
    季节性产品
劣势方面,现在产品收到季节性影响,外部机遇有媒体和重视饮食健康,一方面针对淡季,可以研发季节性健康产品,另一方面可以摘淡季加强自媒体宣传。
 
WT(克服劣势避免威胁):
  •  
    竞争对手多,且摊位规模和资金规模有限制:
因此对于扩张规模、占地比较大的新品引入、高投入的变革都不适用于现阶段的策略,这些方向上应该按兵不动,静待时机。
 
2. PEST 分析模型
含义:PEST 是一种用于分析宏观环境的工具,它包括政治(Political)、经济(Economic)、社会(Social)和技术(Technological)四个方面。通过这四个维度来评估这些因素对企业或市场的潜在影响。
B端干货|全链路设计的分析能力
 
 
B端干货|全链路设计的分析能力
 
 
B端干货|全链路设计的分析能力
 
 
应用场景和案例
  •  
    政治因素:政府法规政策对用户体验设计有重要影响。比如数据隐私法规要求产品设计清晰呈现数据收集方式并提供隐私设置选项;无障碍法规促使设计考虑残障人士需求。同时,数字化政务服务和公共服务创新项目为用户体验设计提供应用场景。
  •  
    经济因素:消费能力影响用户需求,经济繁荣时高端市场注重奢华个性化体验,经济不稳定时大众市场追求性价比。市场竞争中,企业通过创新用户体验设计实现差异化,同时需考虑成本效益。
  •  
    社会因素:不同文化背景和社会价值观变化影响用户对产品的期望和偏好。例如,集体主义文化地区更重社交功能,环保意识增强促使产品融入环保元素。此外,社交互动需求和移动生活方式也要求用户体验设计适应这些趋势。
  •  
    技术因素:新兴技术如人工智能、机器学习、虚拟现实和增强现实在用户体验设计中有广泛应用。但要平衡技术复杂性与易用性,同时通过良好的用户教育帮助用户适应技术更新。
 
3. 波特五力模型
B端干货|全链路设计的分析能力
 
 
含义:迈克尔・波特(Michael Porter)提出的五力模型用于分析行业竞争态势。这五种力量包括现有竞争者的威胁、潜在进入者的威胁、替代品的威胁、供应商的议价能力和购买者的议价能力。
 
应用场景和案例:
  •  
    现有竞争者的威胁:在智能手机行业,苹果、华为、三星等品牌之间竞争激烈。它们通过不断推出新产品、进行价格战、提升品牌形象等方式争夺市场份额。企业需要分析竞争对手的产品特点、价格策略、市场份额等因素,来制定自己的竞争策略。例如,某国产手机品牌为了在竞争中脱颖而出,不断加大研发投入,在拍照功能上取得优势,吸引了众多摄影爱好者,从而提高了市场竞争力。
B端干货|全链路设计的分析能力
 
 
  •  
    潜在进入者的威胁:
以网约车市场为例,滴滴在市场占据主导地位,但如果有新的资金雄厚的企业进入这个市场,如一些大型汽车制造商或者科技巨头,就可能改变市场格局。现有企业需要通过构建品牌壁垒、技术壁垒、规模经济等方式来抵御潜在进入者。滴滴通过建立庞大的司机网络和用户基础,以及先进的调度系统,增加了新进入者的进入难度。
B端干货|全链路设计的分析能力
 
 
  •  
    替代品的威胁:
传统纸质书籍面临着电子书的替代威胁。电子书具有便携性、存储量大等优点。传统出版社需要关注电子书市场的发展,通过发展自己的数字出版业务,或者与电子书平台合作等方式来应对这种威胁。同时,也要发挥纸质书的独特优势,如收藏价值、阅读质感等。
B端干货|全链路设计的分析能力
 
 
  •  
    供应商的议价能力
在汽车制造业,汽车制造商对零部件供应商的议价能力会影响成本。如果某汽车品牌是一家大型企业,采购量巨大,它对零部件供应商的议价能力就强,可以压低采购价格,降低生产成本。相反,如果是一家小众汽车品牌,零部件供应商的议价能力相对较强,可能会导致汽车生产成本上升。
B端干货|全链路设计的分析能力
 
 
  •  
    购买者的议价能力:
在一些大宗商品市场,如钢铁市场,大型建筑企业作为购买者,由于采购量大,对钢铁供应商的议价能力就强。它们可以通过招标等方式,让多家供应商竞争,从而获得更优惠的价格。而对于一些小客户,其议价能力较弱,往往只能接受供应商提供的价格。
B端干货|全链路设计的分析能力
 
 
 
总结
SWOT、波特五力分析模型与 PEST 模型相互关联。
PEST 模型聚焦政治、经济、社会、技术等宏观环境,其分析结果能为 SWOT 中的机会和威胁要素提供来源,帮助企业从宏观层面把握外部情况。
波特五力分析模型着重剖析行业内的竞争力量,可细化 SWOT 里的威胁内容,助力明确行业竞争处境。
三者结合,企业能先借 PEST 知晓宏观环境,再用波特五力把握行业态势,最后靠 SWOT 综合分析制定契合自身发展的精准战略。


作者:Charlotte的嘻酱
链接:https://www.zcool.com.cn/article/ZMTY0OTE5Mg==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

日历

链接

个人资料

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

存档