首页

兰亭妙微:Web 表单设计的 5 个冷门设计技巧,让体验与效率双提升

涛涛

作为深耕 UI/UE 设计的专业团队,兰亭妙微在企业信息化、互联网产品、大数据软件的表单设计实践中,始终坚信细节决定体验。Web 表单作为产品与用户数据交互的核心载体,看似只是标签、输入框的简单组合,却藏着诸多易被忽视的设计细节 —— 标签末尾是否加冒号、标签与输入框如何对齐、必填字段该如何标记…… 这些看似 “无关紧要” 的冷知识,实则直接影响用户的填写效率与体验感受。

未来感与专业度并存|Kima Network 区块链 WebUI/UX 设计赏析

蓝蓝设计的小编

这组来自网络的 Kima Network 区块链项目设计案例,覆盖桌面端与移动端全场景,我们结合北京兰亭妙微(蓝蓝设计)在科技金融、B 端产品的 UI/UX 设计经验,拆解其设计亮点与可借鉴思路。

 

一、视觉语言:科技感与品牌符号的高度统一

 
  • 暗黑模式基底:以深黑为底色,搭配渐变霓虹色(紫 / 蓝 / 绿),既契合区块链行业的未来感调性,又让核心信息(文字、3D 图标)更突出,符合北京兰亭妙微 “专业场景下的视觉聚焦” 设计理念。
  • 品牌符号复用:将 “gooey blobs(流体气泡)” 作为核心视觉符号,既象征区块链资产的流动性,又贯穿于 Logo、图标、背景装饰中,形成强烈的品牌记忆点,与北京兰亭妙微擅长的 “品牌化视觉系统” 思路高度一致。
  • 3D 视觉表达:用 Spline 制作的渐变 3D 图标(如原子交换、支付、钱包),将抽象的区块链概念具象化,同时通过渐变光泽强化科技质感,降低用户对复杂技术的理解门槛。
 

二、信息架构:专业严谨与高效浏览的平衡

 
  • 层级清晰:桌面端页面以大标题统领核心价值(“Unifying all financial ecosystems”),下方用模块化卡片展示 Use Cases 与技术优势,移动端则简化为核心标题 + 关键模块,保证跨端信息传递的一致性。
  • 数据可视化:将 “10+ Blockchains”“40+ Partners” 等关键数据以大号字体突出,用流程图展示技术架构,让专业用户快速感知项目实力,同时保持界面清爽,避免信息过载。
  • 转化引导:全场景固定 “Get Started”“Start Building” 按钮,在专业信息传递中自然植入行动入口,符合科技金融类产品 “先建立信任,再引导转化” 的逻辑。
 

三、交互与技术:流畅体验与跨端适配

 
  • 微交互设计:卡片切换、图标悬浮等动效细腻克制,既提升页面活力,又不干扰核心信息阅读,体现 “交互服务于功能” 的原则。
  • 跨端适配:桌面端侧重信息深度,移动端侧重操作便捷,同时保留品牌视觉与核心功能,实现 “大屏专业复盘 + 小屏快速访问” 的体验闭环,这与北京兰亭妙微在跨端产品设计中强调的 “体验连贯性” 理念不谋而合。
  • 技术落地:通过 Spline API+three.js 实现 3D 效果,同时为低端设备提供视频替代方案,兼顾视觉效果与性能兼容,体现了专业设计的工程思维。
 

 

四、设计总结与专业视角

 
Kima Network 的设计完美诠释了科技类产品的设计核心:用视觉语言传递专业感,用信息架构降低理解成本,用品牌符号建立用户认知。
 
从北京兰亭妙微的专业设计视角来看,该案例为区块链 / 金融科技类产品提供了优质范本:它既满足了专业用户对严谨性的需求,又通过未来感的视觉设计吸引新用户,最终实现 “品牌传递 + 功能体验 + 商业转化” 的三重目标,非常值得同类项目借鉴。

 

 

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

兰亭妙微:B 端产品步骤条表单的取舍逻辑与设计落地策略

涛涛

在 B 端产品设计中,步骤条表单曾是处理长流程、多节点信息录入的经典组件,凭借清晰的流程指引,成为商家入驻、资质认证、订单创建等场景的常规选择。但在兰亭妙微为各行业企业做 B 端产品升级的实战中发现,步骤条表单的使用场景正大幅收缩,甚至在高频数据录入、常规业务操作中逐渐被 “长表单 + 锚点导航” 替代。这并非步骤条组件本身的设计缺陷,而是 B 端产品的设计核心从 “流程标准化” 转向了 “业务效率化”,当步骤条的强流程约束与 B 端用户的实际业务操作逻辑相悖时,其体验短板便被无限放大。

兰亭妙微:B 端表单标签对齐的专业设计准则与场景落地

涛涛

表单是 B 端系统的核心交互组件,而表单标签的对齐方式,看似是设计细节,实则直接影响用户的填写效率、视觉体验与操作连贯性。兰亭妙微在多年 B 端设计实战中,为金融、制造、电商、政务等多行业打造过千余套表单设计方案,深知标签对齐的设计选择并非 “凭喜好”,而是需要结合使用场景、终端设备、业务需求、用户操作目标综合判断。

兰亭妙微:B 端交互设计的六维思考框架

涛涛

在兰亭妙微 15 年的 B 端设计深耕历程中,我们始终认为:B 端交互设计的核心从来不是单纯的界面绘制,而是以业务赋能为核心的全链路思考。初级设计师做 B 端设计,常陷入 “就需求做设计” 的误区,看似快速交付,却让产品在后续迭代中出现流程割裂、权限混乱、适配性差等问题;而兰亭妙微的资深 B 端交互设计团队,始终遵循一套成熟的六维思考框架,从需求接收到方案落地,层层拆解、多维验证,让设计既贴合当下业务需求,又能支撑产品长期发展,真正实现 “效率优先、数据显性、协同顺畅” 的 B 端设计核心目标。

从体验设计视角解析 B 端产品设计逻辑

涛涛

初入设计行业时,B 端与 C 端产品的概念仅停留在字面,面对实际设计工作时,常常不知该从何切入才能打造贴合需求的产品方案。经过多年的实战积累,对 B 端产品的体验设计有了更具象的理解,也逐渐梳理出一套适配其特性的设计思路,在此与行业同仁分享

B端邮件营销 SaaS UI设计案例:Emaily 如何用 UI 设计赋能全流程营销管理

蓝蓝设计的小编

北京兰亭妙微科技有限公司带您欣赏这款 Emaily 电子邮件营销 SaaS 产品的设计案例,它在桌面端 UI 设计与移动端 UI 设计上都独具匠心,为营销人员提供全方位邮件营销活动管理能力。
 
  1. 活动详情页(Campaign Overview):聚焦 “Winter Sale Launch” 活动数据分析,深度复盘单次营销活动效果,帮助营销人员找到提升邮件营销活动转化率的策略。
    • 核心指标卡片:清晰展示发送量(12,430)、打开率(38.2%)等关键数据,通过与往期对比的箭头和百分比,让营销效果一目了然,体现数据可视化设计的精妙,有助于理解电子邮件营销 SaaS 产品优势。
    • 实时趋势图表:以折线图呈现近

       

      7 天点击率、退订率和收入动态变化,便于快速定位活动表现的起伏点,为营销决策提供有力依据,是分析邮件营销活动效果的重要方
    • 用户行为分析:
      • Top Link Clicked:依据点击数据找出最受欢迎链接,助力内容优化,展现精准的用户洞察设计,对提升邮件内容吸引力有重要作用。
      • Device Breakdown:揭示不同设备打开邮件的比例,52% 用户通过桌面端打开,移动端占 27%,平板端占 21%,为响应式 UI 设计提供重要参考,保障各设备用户的良好体验。
      • Top Locations:直观呈现美国、摩洛哥和贝宁等主要受众来源地,方便针对性布局市场,是制定邮件营销策略的关键依据。
       
     
  2. 活动列表页(Campaigns List):作为营销活动的中央管理控制台,在页面布局设计上尽显高效,提升营销活动管理效率。
    • 状态分类:利用 “All/Drafts/Scheduled/Sending/Complete” 标签,清晰划分不同生命周期活动,实现流程化管理,这是电子邮件营销流程优化的重要体现。
    • 活动概览表:以表格形式整合活动名称、状态等核心信息,方便快速筛选对比,轻松掌握不同活动表现。
     
  3. 移动端界面(Mobile App):精心设计的移动端 UI,功能完备,随时随地管理营销活动,满足移动办公对邮件营销的需求。
    • 数据仪表盘:在手机端即可查看发送量等关键指标及活动趋势,帮助营销人员及时掌握动态,不错过提升邮件打开率的时机。
    • 自动化管理:查看自动化流程及完成度,提升营销自动化水平,是现代邮件营销的重要发展方向。
    • 排程与送达评分:便捷管理排程活动并监控送达评分,确保邮件有效触达,是保障邮件营销效果的关键环节。
     
  4. 桌面端仪表盘(Dashboard):桌面端 UI 设计简洁高效,为用户提供邮件营销业务宏观视角,助力全面把控邮件营销业务。

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

涛涛

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

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

涛涛

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

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

鹤鹤

一、项目背景与核心目标

 
随着 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

日历

链接

个人资料

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

存档