首页

兰亭妙微UI设计公司：超全面的B端设计指南：树形选择

清阳 设计思维

在 B 端系统的选择录入场景里，树形选择是承载层级化数据的核心组件，常用于组织架构、权限分配、分类筛选等场景。这篇指南从基础概念、结构组成、类型差异、设计要点到常见误区，完整梳理树形选择的设计逻辑，兰亭妙微ui设计公司帮你高效落地合规、易用的树形组件。
 

一、先搞懂：树状结构的核心概念

 
树状结构是倒置的层级化数据表达形式，顶端为根、向下延伸分支与叶子，清晰呈现数据的从属、并列关系，是 B 端结构化信息展示的最优解之一。

image.png

1. 核心节点定义

 
  • 根节点：树的唯一起点，树形选择中常隐藏，以标题 / 选项文本替代，避免视觉冗余。
  • 子节点：根节点以下的所有节点，无数量限制，是树形选择的核心展示内容。
  • 叶节点：无下级子节点的末端节点，是传统单选树的唯一可选对象。
  • 分支：节点间的连接关系，可通过线条显隐强化层级感知。
 

2. 关键属性

image.png

  • 节点层级：根节点为 1 级，向下依次递增，直观区分数据隶属关系。
  • 节点高度：当前节点到最底层叶节点的层级数量。
  • 节点深度：当前节点到根节点的路径长度，与层级概念相近。
 
日常场景中，字典检索、省市县地址、公司组织架构、课程分类，都是典型的树状结构应用，核心价值是快速定位、结构化管理、高效增删改查。
 

二、树形选择的基础组成

 
树形选择的结构设计直接影响操作效率，核心由 4 部分构成，每部分都有明确的设计规范：
 

1. 层级缩进

 
统一用8px作为下级节点的缩进基准，清晰区分层级；
 
数据量大、层级复杂时，搭配分支线条强化结构，避免视觉混乱。
 

2. 折叠图标

 
分为两种样式，适配不同层级场景：
 
  • 三角折叠：适合层级≤3 级的简单场景，轻量化、易理解。
  • 方形折叠：搭配分支线条使用，适合 4 级及以上的多层级场景，层级辨识度更高。

image.png

3. 选择控件

 
分单选、多选两类，遵循「简化操作、明确状态」原则：
 
  • 单选：默认隐藏控件，以整个选项文本为热区，点击即选中。
  • 多选：必显复选框，置于折叠图标左侧，预留后续功能拓展空间（新增、删除、拖拽等），同时降低前端开发成本、减少 BUG。
 

4. 选项文本

 
控制字符长度，超长文本用省略号截断，hover 时展示完整内容，保证界面整洁。
 

三、树形选择的三大类型（核心差异）

 
树形选择按交互逻辑分为三类，单选节点树、多选节点树为主流，传统单选树已极少使用。
 

1. 单选树（淘汰型）

 
仅支持选择叶节点，需逐层展开才能操作，选择热区小、理解成本高、效率低，仅适用于极特殊的定制场景，不推荐通用设计使用。
 

2. 单选节点树（主流）

 
支持选择任意子节点，选中即代表该节点及下级所有数据，大幅提升效率；
 
交互拆分为两个独立热区：

image.png

  • 左侧：折叠图标，仅控制展开 / 收起。
  • 右侧：整个选项区域，点击即选中当前节点。
     
    ⚠️ 必须添加 hover 状态，通过光标变化提示可点击，降低操作认知成本。
 

3. 多选节点树（最常用）

 
在单选节点树基础上增加复选框，支持批量选择多个节点 / 分支；
 
理论上的「多选树」（仅选叶节点）无实际业务价值，完全可被多选节点树替代；
 
⚠️ 动态数据场景慎用：如「部门权限自动同步新员工」这类动态关联需求，树形选择无法清晰传递逻辑，需单独做关联配置，避免用户误解。
 

四、树形选择的核心优势

 
  1. 易理解：树状结构认知成本低，用户无需学习即可快速上手。
  2. 快浏览：大数据量下，可按层级快速筛选，比普通下拉选择效率更高。
  3. 显结构：清晰呈现数据层级关系，帮助用户快速理解业务框架。
 

五、设计必避：3 大常见误区

 

1. 忽视数据量承载

 
数据量过大时，必须做异步加载、分页、搜索筛选，避免一次性渲染导致卡顿，同时优化滚动体验。
 

2. 全选功能设计草率

 
大数据量场景下，全选需增加 **「半选」状态 **（仅选中部分子节点），并明确提示选中数量，避免用户误操作。
 

3. 缺失键盘交互映射

 
B 端高效操作需支持键盘快捷键，规范如下：
 
  • ↑：切换上一同级节点，从子节点返回父节点。
  • ↓：切换下一同级节点，进入已展开的首个子节点。
  • ←：关闭当前节点，返回父节点。
  • →：展开子节点，进入首个子节点。
  • 回车：确认选中当前聚焦节点。
 

六、总结

 
树形选择是 B 端层级数据选择的最优组件，设计核心是简化层级认知、拆分操作热区、适配业务场景：优先用单选 / 多选节点树，放弃传统单选树；多层级加分支线条，大数据量加异步加载，同时补齐键盘交互，最终实现「易看、易点、易懂、高效」的使用体验。
 

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

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

我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。

 

image.png

评论(0) 浏览(43)

兰亭妙微逐图解析移动端APP多场景 UI/UX 设计案例

蓝蓝设计的小编 移动端UI设计文章及欣赏

这组图片覆盖了区块链工具、心理健康、B 端营销、项目管理、销售数据、健康饮食六大不同赛道的产品界面，我们逐一拆解设计亮点与核心逻辑：

图 1：区块链域名注册流程界面

这是 Web3 领域的域名注册操作流界面，核心亮点是流程可视化 + 风险提示清晰：
  • 用步骤条（Commit → 等待 60 秒 → 二次交易）完整展示注册全流程，每一步都标注操作说明，让用户清晰掌握进度；
  • 用绿色对勾、进度条实时反馈操作状态，同时明确展示 Gas 费、注册费用等关键数据，避免用户踩坑；
  • 倒计时设计既符合区块链防抢注的技术逻辑，又通过可视化倒计时让用户直观感知等待时长，降低操作焦虑。

图 2：Mindro 心理健康 App 界面

这是面向 C 端用户的心理健康管理工具，设计核心是情绪可视化 + 陪伴感营造：
  • 以柔和的淡紫渐变为底色，搭配 3D 大脑视觉元素，弱化工具的冰冷感，传递温暖、舒缓的情绪氛围；
  • 核心数据（目标进度 65%、压力水平 70%）以卡片形式突出展示，用直观的数字让用户快速掌握自身状态；
  • 问候语 Hello, Sara How are you feeling today? 强化陪伴感，贴合心理健康产品 情绪关怀 的核心定位。

图 3：AdvisorWorld 金融营销 B 端平台界面

这是面向金融顾问的获客营销平台，设计核心是转化导向 + 信息高效传递：
  • 用高饱和蓝、绿为主色调，强化专业感与信任感，同时用大尺寸 CTA 按钮（Start Getting Leads、Book a Call）引导转化；
  • 模块化布局清晰划分客户证言、核心价值、数据指标、资源入口等模块，让金融顾问快速获取核心信息；
  • 用数据（转化率 + 35%、客单价 + 25%）强化产品价值，搭配真实客户案例，提升 B 端用户的信任度，促进转化。

图 4：RelationHub 项目管理 App 界面

这是面向团队的项目协作工具，设计核心是数据聚合 + 高效管理：
  • 首页聚合活跃项目数、待处理项目、团队成员、客户线索等核心数据，让管理者一眼掌握项目全局；
  • 用标签筛选（Branding、Website、UI/UX）快速分类线索，搭配客户信息、金额、时间等明细，提升管理效率；
  • 用正负百分比展示项目环比变化，直观呈现业务增长 下滑趋势，帮助团队快速决策。

图 5：销售数据管理 App 界面

这是面向销售团队的业绩管理工具，设计核心是数据可视化 + 多端协同：
  • 用深色模式 + 高对比度图表，清晰展示销售额、收入、订单等核心数据，折线图、柱状图直观呈现业绩趋势；
  • 分屏展示个人业绩与团队业绩，满足销售个人复盘与团队管理的双重需求；
  • 底部导航栏（Home、Orders、Analytics、Profile）简化操作路径，让销售随时查看业绩，适配移动办公场景。

图 6：FitBite 健康饮食 App 界面

这是面向 C 端用户的饮食健康管理工具，设计核心是场景化引导 + 数据激励：
  • 启动页用新鲜食材视觉元素，搭配 Your Daily Guide to Smarter Eating 的 slogan，传递健康饮食的产品定位；
  • 首页聚合周进度、步数、饮水量、三餐热量等核心数据，用环形进度条直观展示完成情况，强化正向激励；
  • 底部导航栏（Home、Progress、Rewards、Menu）清晰划分功能，用绿色主色调传递健康、活力的氛围，贴合产品属性。

补充：兰亭妙微实践延伸

兰亭妙微深耕全赛道 UI/UX 设计，无论是区块链、心理健康等 C 端产品，还是金融营销、项目管理等 B 端工具，都能基于用户场景打造专业、易用的界面设计。如果您有各类产品的 UI/UX 设计、改版需求，欢迎与兰亭妙微对接。
评论(0) 浏览(39)

设计如何为用户「节省时间」？兰亭妙微UI设计公司总结了这 5 个高效方法

清阳 设计思维

在交互设计里，帮用户省时间是提升体验与留存的核心逻辑。好的设计不是让用户多操作，而是用最少步骤、最低成本完成目标。结合主流产品实战案例，兰亭妙微ui设计公司，整理出 5 个最实用的省时设计方法，直接可落地。

一、高效信息抓取：让系统替用户 “读” 与 “填”

 

主动抓取关键信息，减少用户手动查找、输入、核对的成本。
 
  • 钉钉代办：自动识别文本中的时间，一键完成日程设置

    image.png

  • 微信图片文字识别：指尖滑动即可选中、复制、转发，告别手动打字

    image.png

  • 闲鱼 × 淘宝：订单数据互通，一键同步已购商品，自动给出估价

    image.png

  • 支付宝绑卡：拍照识别卡号与开户行，免去逐位输入

    image.png

 
核心思路：把信息提取权交给系统，用户只做确认。
 
 

二、避免重复阅读与操作：跳过无效流程

 
用户最烦重复看、重复点，设计要记住用户状态，直接定位到 “未完成”。
 
  • 爱奇艺剧集：一键跳过片头，支持整剧默认跳过

    image.png

  • 微信朋友圈：重返时一键 “跳到未看位置”，不重复浏览

    image.png

  • 微信群未读：标记未读条数，点击直达最新消息位置

    image.png

 
核心思路：记住用户进度，砍掉重复路径。
 
 

三、降低出错概率：提前预判，减少返工

 
错误会大幅浪费时间，设计要前置规避，而不是事后补救。
 
  • 美团配送：恶劣天气先派单给骑手，再通知商家，避免无人配送

    image.png

  • 高德地图：提前预警拥堵路段，给用户决策时间

    image.png

  • 微信红包 / 转账：超时提醒，一键定位对应聊天，防止遗漏

    image.png

  • 美团单车：App 内关锁，杜绝忘锁、折返锁车

    image.png

     

 
核心思路：把问题消灭在发生前，降低用户试错成本。
 
 

四、用选择代替输入：少打字、多点选

 
输入成本远高于选择，用预设、标签、快捷选项替代手动输入。
 
  • 饿了么备注：历史备注一键选用，不用重复编辑image.png
  • 携程拼音：姓名一键转拼音，多音字自动提供选项

    image.png

  • 京东评价：预设评价标签，快速完成评分

    image.png

  • 微信零钱通：“全部转入” 快捷按钮，不用输入金额

    image.png

 
核心思路：能选就不填，能默认就不手动。
 
 

五、提供下一步路径：连贯操作，不用折返

 
完成当前动作后，直接给出下一场景入口，形成闭环体验。
 
  • 高德地图：查路线后，直接显示单车 / 地铁扫码入口
  • 支付宝出行：地铁支付成功，一键唤起网约车

    image.png

  • 蚂蚁森林：“找能量” 直达可收取好友界面，高效偷取

    image.png

  • 得到 / 大众点评：截屏自动弹出分享按钮，一步分享image.png
 
核心思路：预判用户下一步，把入口前置。
 
转载：优设
 

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

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

我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。

 

image.png

评论(0) 浏览(38)

兰亭妙微ui设计公司：6个产品细节剖析，看看高手是如何做设计的！

清阳 移动端UI设计文章及欣赏

UI设计的精髓在细节，兰亭妙微（蓝蓝设计）作为深耕UI/UE领域16余年的专业团队，以专业实力成为行业标杆。本文聚焦其6个产品设计细节，拆解高手设计逻辑与实操方法，为UI从业者、产品人提供可借鉴的设计参考，解锁顶尖UI设计密码。
兰亭妙微ui设计公司：6个产品细节剖析，看看高手是如何做设计的！

一、闲鱼：AI发布提效

闲鱼发闲置功能接入AI，只需上传商品图片就可以直接生成描述文案，极大帮助用户简化发布流程

1. 零门槛发布，降低发布时间成本

解决非专业用户 “不会写文案、不懂专业术语” 的痛点，自动提取商品特征，组合成规范文案；相比传统发布流程的耗时编辑文案、核对信息，更高效快捷。

2. 优化内容，提升交易转化

自动生成符合当前市场热点的文案表述，更能多文风转换，一键转为趣味的 “抽象文学”“黛玉文学”等，提升内容点击率。

image.png

 

二、支付宝：广告位游戏化包装

支付宝的首页Banner通过游戏化的包装，快速吸引注意力，驱动用户主动点击探索，高效地为活动页面引流。

1. 互动机制强化用户参与感

采用悬念式互动设计，button以 “猜猜是什么” 这类问答形式，激发用户好奇心，通过游戏化场景的营造，降低参与门槛，驱动用户主动点击探索。

2. 场景氛围营造提升吸引力

在以功能入口为主的首页，该模块具有游戏化趣味性的氛围营造，从视觉上差异化的呈现，相比传统的静态广告位，更能有效抓住用户眼球，高效地为活动页面引流。

image.png

 

三、去哪儿：退票时挽留场景设计

当有中转单的用户在点击退票时，用挽留浮层及时给用户弹出更优的解决方案，并在方案中量化利益点，同时保证原有票的安全感。整体通过 “先抓痛点→再给解决方案→最后引导操作” 的路径，优化了用户出行体验。

1. 量化利益点

除了直达更方便之外，直达还有更省时间、金钱，保底票免费退等更多的利益点

2. 有兜底有安全感

用当前的中转作为保底，先抢票，抢到了还能再退票。让用户安心下单，在未抢到心仪票的时候能有中转的替补票，可以缓解用户的焦虑情绪，有兜底的保障安全感

image.png

 

四、疗愈类App Endel：引导充值会员的动画

通过一个巧妙的互动行为“摇动手机”，降低用户对会员充值广告的反感。

1. 提升用户参与感与趣味性

“摇一摇”互动将被动观看广告转变为主动参与，用户通过简单的物理动作即可触发折扣，这种即时反馈机制增强了趣味性，降低了传统广告的侵入感。

2. 降低付费决策的心理门槛

通过互动行为展示折扣，巧妙地将付费流程包装成一种“奖励”而非强制推销。用户感受到的是“主动获取优惠”的成就感，而非被广告打扰的抵触情绪，从而更愿意接受付费选项。

image.png

五、小宇宙：创新列表设计

通过拟物化的卡牌堆叠形态，将传统的平面信息流转变为具有空间纵深感和探索趣味的交互式叙事焦点

1. 视觉层次突破传统束缚

通过卡片堆叠、倾斜，在二维屏幕上创造出三维空间感。不对称的布局打破了传统设计的呆板，赋予界面动感与活力，能有效抓住用户视线，对抗“横幅盲视效应”

2. 建立拟物化的趣味交互

模拟物理世界卡牌的操作体验，配合流畅的滑动动画，让用户产生"翻阅卡片"的愉悦感，这种情感化设计能显著提升用户的操作满足感和停留时长

3. 内容暗示激发探索行为

堆叠效果露出部分内容作为预览，能有效刺激用户的好奇心，主动进行滑动探索，提升内容消费深度

image.png

 

六、QQ音乐：个人中心下拉触发金币中心

该设计通过 “贴合用户习惯的交互 + 强引导 + 积分激励” 的组合策略，实现签到转化与用户留存

1. 交互设计贴合用户固有习惯

采用下拉触发模式，无需额外学习成本，降低用户参与签到的操作门槛，提升即时转化效率

2. 视觉设计强化引导与目标感知

以金币掉落清晰的视觉元素突出金币中心入口，让用户快速捕捉核心功能，减少寻找成本，缩短 “看到 - 参与” 的路径

3. 激励设计构建留存闭环

用 “金币” 作为即时激励，满足用户即时反馈的心理需求，驱动次日复访，同时联动积分体系，将单次签到转化为长期行为

image.png

最后要说的话

本期的设计分享就到这里啦。

文章中的案例与思考来自于UED同学的日常分享。

后续我们将持续深度体验产品，挖掘更多值得分享、学习的设计案例。努力将其中的方法理论应用到后续的产品设计中。

愿我们的努力为你带来更好的体验。下次见。

转载：优设

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

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

我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。

 

image.png

评论(0) 浏览(34)

兰亭妙微ui设计公司带您了解筛选功能设计

清阳 移动端UI设计文章及欣赏

前言

 
“少即是多” 是设计的常用理念，但产品简化到一定程度，必然会出现不可简化的复杂性。
 
诺曼曾说：复杂是世界的一部分，但它不应该令人困惑。
 
筛选控件，就是让用户自主管理复杂信息的核心工具 —— 只要符合用户行为，合理的复杂反而会被用户接受。
 
兰亭妙微UI设计公司从类型、场景、维度、准则五个维度，完整拆解移动端筛选设计，帮你快速选对、用好筛选控件。
 
 

一、先搞懂：筛选是什么？为什么要用？

 

1. 筛选的定义

 
筛选 = 用户通过一个 / 多个条件，在海量内容里快速缩小范围，隐藏不匹配信息，高效找到目标。
 
筛选是过滤器，属于搜索框架的一部分。
 

2. 筛选 vs 搜索（核心区别）

image.png

 
  • 筛选：系统提供条件，用户被动选择 → 缩小范围
  • 搜索：用户主动输入明确关键词 → 精准查找

image.png

 

image.png

简单记：搜索找结果，筛选缩范围。
 

3. 什么时候必须加筛选？

 
  1. 系统定义筛选（一级筛选）
     

    image.png

    大方向快速切换，如：订单（待支付 / 待发货）、优惠券（未使用 / 已过期）。
  2. 用户自定义筛选（二级 / 精细化筛选）
     
    在一级结果里进一步精准，如：价格、品牌、发货地、评分等。
 
最佳组合：一级分类 + 二级精细化 + 排序。
 
 

二、5 种最常用筛选样式（直接对应场景）

 

1. Tab 筛选

 

image.png

  • 形态：横向 / 纵向常驻展示
  • 优点：一目了然、随时切换、无学习成本
  • 场景：内容大类划分（新闻频道、视频分类、商品一级类目）
  • 缺点：结果偏模糊，需搭配二次筛选
 

2. 弹窗式筛选

image.png

 
  • 形态：入口隐藏，点击蒙层弹出
  • 优点：省空间、多维度平铺、不占页面
  • 场景：电商列表、外卖、出行等高频精细化筛选
  • 适用：条件不多、操作快
 

3. 折叠式筛选

  • 形态：入口隐藏，点击展开、常驻页面
  • 优点：比 Tab 省空间，比弹窗更可控
  • 场景：中度筛选需求，需反复调整条件
 

4. 高级筛选（新页面）

image.png

 
  • 形态：跳转到独立页面
  • 优点：无干扰、可放大量细颗粒条件
  • 场景：汽车、房产、招聘、复杂 B 端筛选
  • 适用：条件多、层级深、需专注操作
 

5. 筛选 + 排序组合（移动端标配）

image.png

 
  • 形态：筛选按钮 + 综合 / 价格 / 销量等排序
  • 优点：一步完成 “缩小范围 + 重新排列”
  • 场景：几乎所有商品 / 内容列表
  • 代表：美团、饿了么、淘宝、京东
 
 

三、3 个筛选维度（决定怎么布局）

 

1. 单维度筛选

 

image.png

  • 一次只选一个条件，触发即生效
  • 标签简短（≤5 字）、语义清晰
  • 场景：订单状态、内容分类
 

2. 多维度筛选

image.png

 
  • 支持单选 / 多选 / 区间 / 滑块
  • 需配：确定 + 重置按钮
  • 移动端建议：一级维度≤9 个，多余整合到二级
 

3. 多等级筛选

 

image.png

  • 层级：一级分类 → 二级属性 → 三级参数
  • 移动端最多 3 级，避免迷路
  • 适合：类目复杂的电商、后台系统
 
 

四、筛选设计 3 大核心准则（必遵守）

 

1. 以用户效率为目标

image.png

 
筛选的本质不是 “好看”，而是帮用户更快找到。
 
  • 不知道要什么的用户：靠分类 + 筛选引导
  • 知道要什么的用户：靠精准条件快速锁定
  • 最终目标：降低时间成本，提升转化与留存
 

2. 按产品类型定制条件

 

image.png

不要抄通用模板：
 
  • 电商：品牌、价格、销量、评分、服务
  • 新闻 / 内容：热度、时间、偏好、标签
  • 工具 / B 端：状态、时间区间、负责人、关键字
 

3. 按使用频率排优先级

 

image.png

高频条件前置，低频条件隐藏 / 后置。
 
  • 买手机：品牌→内存→容量→价格
  • 买日用品：价格→销量→（品牌放高级）
 
 

五、总结（一句话记住）

 
筛选的核心价值：用最简单的交互，帮用户最高效缩小信息范围。
 
选型只看两点：用户需求 + 使用场景。
  • 简单分类 → Tab
  • 常规精筛 → 弹窗
  • 复杂深筛 → 高级页面
  • 列表标配 → 筛选 + 排序

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

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

我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。

 

image.png

评论(0) 浏览(44)

兰亭秒微｜UI 设计进阶：用好留白，让界面更有表现力

涛涛 设计思维

在兰亭秒微的 UI/UX 设计体系里，留白不是 “空着”，而是提升质感、聚焦信息、优化体验的核心手段。优秀的留白设计，能在简约风格与功能可用性之间达到完美平衡，需要长期实践与经验沉淀。

评论(0) 浏览(47)

兰亭秒微 UI 设计进阶：以用户为中心的设计 —— 两本经典方法论解析

涛涛 交互设计及用户体验

作为专注 UI/UE 设计与用户体验优化的专业团队，兰亭秒微在工业软件、医疗设备、能源监控、企业信息化等领域长期实践，始终以以用户为中心为设计核心。本文将结合兰亭秒微项目经验，提炼《用户体验要素》《简约至上》两本经典书籍的核心观点，为产品设计与体验升级提供系统化理论支撑。

评论(0) 浏览(45)

UI 设计中的用户体验设计｜兰亭妙微设计实战全解

涛涛 交互设计及用户体验

设计师遇到瓶颈，最好的破局方式，是跳出纯视觉审美，回到用户体验本质，重新审视需求、场景、行为与感受，用科学方法做有依据、可落地、能产生价值的设计。

评论(0) 浏览(56)

拓宽设计之路，成为炙手可热的跨行业大牛的进阶武器 —— 知识管理（下）

涛涛 设计管理与成长

上一篇的知识管理分享，我们围绕设计行业的知识管理核心，阐述了如何在合作中建立信任的底层逻辑，本篇分享将继续完善上篇观点，结合兰亭妙微十五年的设计实战经验，为大家拆解设计行业知识管理的落地方法与核心价值。

评论(0) 浏览(44)

兰亭妙微带您赏析Aurora AI 智能助手 App UI/UX 设计

蓝蓝设计的小编 移动端UI设计文章及欣赏

在 AI 工具与教育场景深度融合的当下，优质的 UI/UX 设计是让技术真正服务于教学、赋能学习的核心。以下结合 Aurora AI 这一网络优质 AI 工具设计案例，搭配兰亭妙微的专业设计经验，重点呈现 AI 教育产品设计成果，为 AI 产品设计提供参考。
 
 

一、Aurora AI 设计亮点：AI 工具的体验标杆

 
Aurora AI 作为 AI 助手类产品的优质设计范本，其设计逻辑精准贴合用户对 AI 工具的核心需求，为 AI 教育产品提供了可借鉴的设计思路：
 

1. 视觉设计：科技感与温度感的平衡

以深邃纯黑为底色，搭配高饱和科技蓝为主色调，用流体状动态 AI 图标贯穿全端，既凸显 AI 的技术属性，又通过柔和光影弱化工具的冰冷感，让 AI 更具 “数字伙伴” 的陪伴感；界面采用圆角卡片、高对比度按钮，信息层级清晰，核心功能突出，完美平衡科技感与易用性。
 

2. 信息架构：极简高效，全流程闭环

 
围绕用户 “便捷使用 AI” 的核心需求，搭建从模型选择、语音配置，到对话交互、功能创作的全流程闭环；首页聚合高频功能，合理分区多模型、会员等模块，避免信息过载，操作路径极简，大幅降低使用门槛。

3. 交互体验：多模态适配，个性化赋能

 
支持文字、语音、图片多模态交互，语音页用动态声波可视化反馈，强化陪伴感；提供丰富的语音类型、语调、语速自定义选项，支持多 AI 模型一键切换，满足不同场景需求，同时自然引导付费转化，兼顾体验与商业价值。

在实际项目中，兰亭妙微近期完成了上市公司竞业达教育软件事业部重点产品的整体 UI/UE 重构。项目覆盖平台端、教室端、移动端三大核心端口，针对教师、学生、课堂管理等不同使用场景进行全面优化升级。
 
设计过程中，兰亭妙微坚持三端风格高度统一的原则：视觉体系统一、色彩规范统一、字体图标统一、布局逻辑统一、交互体验统一。无论用户在 PC 平台端、课堂大屏端，还是手机移动端，都能感受到一致的视觉风格与操作习惯，不会因设备切换产生体验断层，真正实现多设备、全场景的体验一体化。
 
同时，项目围绕教学实际场景重构信息架构：教师端突出备课、授课、管理与数据查看；学生端强化学习、作业、互动与进度展示；教室端侧重展示清晰、操作便捷、适配课堂环境。三端功能各有侧重，但整体风格统一、体验连贯，大幅提升了产品的专业性、易用性与品牌质感，获得客户高度认可。
 
教育类产品的设计，不仅是界面美观，更在于场景适配、逻辑合理、体验统一。兰亭妙微深耕教育软件 UI/UX 设计多年，具备完整的多端产品重构、界面升级、体验优化能力。如果您有教育平台、教学系统、学习类 App 的 UI/UE 设计或改版需求，欢迎与兰亭妙微交流合作，我们以专业设计助力产品价值提升。
 

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

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

我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。

 

image.png

 
评论(0) 浏览(46)

分类

日历

链接

个人资料

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

存档