首页

兰亭妙微UI设计公司,用11条总结,聊聊Vision Pro如何彻底改变UX设计行业

清阳

Apple推出的突破性产品 Vision Pro 在科技界引起了轰动,新的设计趋势即将到来。苹果首席执行官蒂姆·库克在 WWDC 2023 上自豪地展示了这款全新设备,展示了增强现实 (AR) 和空间计算的新时代。

 

凭借 Vision Pro,Apple 再次展现了其突破创新界限的能力。本文将探讨 Vision Pro 如何彻底改变 UX 设计行业并改变我们与技术交互的方式。

一、摆脱传统显示器的束缚

Vision Pro 将用户从传统显示器的限制中解放出来,开创了空间计算交互的新时代。

image.png

通过无缝融合增强现实和空间计算,苹果推出了一种独特的输入方法(结合眼动和手势),类似于鼠标或触控板。这一创新让用户体验设计师有条件打造超越屏幕限制、身临其境和直观的用户体验,开辟了无限的可能性。

彩云注:当我们大多数人已经习惯了 2D UI 的设计模式,这种新的交互方式,给了我们很多创新的空间,比如结合眼睛和手势,我们可以给用户带来更自然直觉的新体验。

二、美学与功能的结合

Vision Pro 的设计将美学与功能无缝结合。这款设备采用铝制框架和曲面玻璃,外形类似滑雪护目镜,清楚地表明它的预期用途是在家庭和办公室等受控环境中。

包含用于图像捕获的物理按钮和用于调整的数字表冠确保了直观的控制,而灵活的表带和面罩使用户专注并屏蔽外部干扰。

image.png

彩云注:在考虑未来交互方式和视觉的时候,需要多结合硬件和软件的交互及视觉效果,怎样达到最直观的操作效果。

三、增强现实和空间计算

Vision Pro 主打增强现实,使其有别于以前的混合现实设备。通过将虚拟世界和物理世界无缝融合,用户体验设计师现在可以创造增强用户对现实感知的体验。

image.png

从将信息叠加到真实世界的物体上,到创建交互式 3D 环境,设计引人入胜、情境丰富的新体验。

四、设计新的输入方式

对于 Vision Pro,用户体验设计师将需要考虑传统鼠标和触控板之外的新输入方法。

image.png

用于图像捕获的物理按钮和用于调整的数字表冠为设计师提供了交互设计的新途径。设计直观和无缝的控件对于确保流畅和沉浸式的用户体验至关重要。

五、空间音频和沉浸式声音场景

Vision Pro 的突出特点之一是它的空间音频功能。通过集成内置的“音频 pods”,苹果通过创造丰富而身临其境的声音场景来增强用户体验。

image.png

这种革命性的音频本地化方法使设计师能够从不同的方向模拟音频源,从而与数字环境进行更吸引人、更逼真的交互。

六、顶尖的硬件和技术

在底层,Vision Pro 由苹果的标准 M2 芯片和专用于视频流的新 R1 芯片提供支持。

image.png

微型 OLED 显示屏,每空间提供令人印象深刻的 64 个像素,相当于标准 iPhone 像素,确保呈现清晰、充满活力的视觉效果。此外,与蔡司合作提供定制嵌入玻璃也体现了 Apple 的包容性和可访问性体验标准。

七、EyeSight:协作体验和社交能力

苹果推出了一项名为 EyeSight 的突破性功能,利用前置显示屏向房间内的其他人展示用户的眼睛。

image.png

通过捕获初始面部扫描,Vision Pro 在弯曲的前玻璃上创建用户的“真实眼睛”。这种对个人头像的创新使用促进了更真实和身临其境的社交互动,使用户能够在数字领域进行更深层次的联系。

八、聚焦工作场景

Apple 对电子邮件和桌面等与工作相关的应用的重视表明,Vision Pro 是想主打一种生产力工具。

image.png

通过与 Microsoft Office 等现有应用和流行的线上会议服务无缝集成,这款头戴设备使专业人员能够增强他们的工作流程并更有效地协作。

这种工作第一的方法使 Vision Pro 与其他优先考虑游戏和娱乐的设备区分开来。

九、打开内容的新维度

Vision Pro 开辟了内容消费和创作的新维度。不透明显示屏允许较暗的环境,非常适合展示从 iPhone 拍摄的 2D 照片以及捕捉空间照片和视频。

image.png

影院选项为用户提供了完整大屏幕的错觉,而游戏体验则投射到虚拟大屏幕上,提供身临其境的游戏体验。

十、与内容巨头合作

苹果与迪士尼联手,正在建立令人兴奋的内容合作伙伴关系,这预示着 Vision Pro 的光明未来。

image.png

随着 Disney+ 的推出,用户可以期待一系列身临其境的互动娱乐体验。苹果和迪士尼之间的合作证明了 Vision Pro 在重新定义我们消费媒体方式方面的潜力。

十一、新的设计工具和工作流程

为了适应 Vision Pro 的独特功能,Apple 推出了 VisionOS,这是一款专为空间计算设计的新操作系统。

image.png

这个新平台提供了丰富的教育功能,包括天文学、健康和音乐创作应用。此外,现有 iOS 和 iPadOS 框架的集成确保了开发人员的无缝过渡,并为专门针对 Vision Pro 定制的广泛应用生态系统铺平了道路。

总结

凭借 Vision Pro,Apple 向用户体验设计行业的革命迈出了大胆的一步。通过将增强现实、空间计算和尖端硬件相结合,苹果公司创造了一款开启交互和沉浸新维度的设备。

随着用户体验设计师拥抱 Vision Pro 的功能,我们可以期待超越传统界面的突破性体验,使用户能够以前所未有的方式与数字内容和环境互动。

用户体验设计的未来已经到来,在 Vision Pro 的引领下,它看起来前景无限光明。

转载:优设

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

 

image.png

兰亭妙微UI设计公司,深度拆解组件设计的6种状态类型

清阳

组件状态是用户理解产品交互的核心,虽不直接显示却决定操作逻辑。兰亭妙微UI设计公司基于 Material 3 规范拆解启用、禁用、悬停等 6 种常用状态类型,详解状态层设计及各状态的适用组件与设计规则,助力打造清晰流畅的交互体验。

image.png

一、组件状态:交互体验的核心骨架

 
组件状态,是组件 / 元素在界面中当前可交互性与行为属性的直观表达。它虽不显性呈现,却是用户判断 “能不能点、点没点中、当前选中谁、操作是否生效” 的关键依据,直接影响产品的易用性与专业度。

image.png

基于 Material 3,界面交互组件最常用的6 种基础状态如下:
 
  1. 启用态:可正常接收用户交互
  2. 禁用态:不可交互,明确限制操作
  3. 悬停态:光标悬浮时的提示状态

    image.png

  4. 聚焦态:键盘 / 语音选中时的高亮状态
  5. 点击态:按压 / 轻触时的实时反馈
  6. 拖拽态:按住并移动时的状态提示
 

状态层设计原理

 
状态层是一层半透明叠加层,用于统一、清晰地标识组件当前状态。

image.png

  • 以同色系、固定不透明度实现视觉一致性
  • 可整元素覆盖或局部圆形区域应用
  • 同一时间仅叠加一个状态层,避免视觉混乱
 
层级结构:内容层 → 状态层 → 容器层
 

 

二、6 种状态完整设计拆解

 

1. 启用态(默认可交互)

image.png

定义:组件已就绪,可正常响应点击、输入、选择等所有操作。
 
  • 为交互组件的默认样式,遵循组件预设视觉规范
  • 适用于:按钮、输入框、开关、单选 / 复选、芯片、列表项等几乎所有可交互组件
  • 设计要点:保持高对比度、清晰可识别,传递 “可操作” 信号
 

2. 禁用态(不可交互)

image.png

定义:组件暂时 / 永久无法使用,不响应任何操作。

image.png

  • 视觉特征:低饱和灰色、低对比度、降低视觉权重
  • 核心规则:不可聚焦、不可点击、不可悬停、不可拖拽
  • 适用组件:按钮、卡片、复选框、芯片、列表项、单选、开关、输入框
  • 不适用组件:应用栏、徽章、对话框、导航栏、菜单、浮层、标签页
  • 设计要点:同一布局可同时存在多个禁用组件,不冲突
 

3. 悬停态(光标悬浮)

image.png

定义:PC 端光标停留在可交互元素上触发的提示状态。

image.png

  • 视觉:低透明度叠加层,搭配柔和淡入淡出动画
  • 适用组件:按钮、卡片、复选框、芯片、列表项、滑块、开关、输入框
  • 不适用组件:应用栏、对话框、导航栏、菜单、浮层、标签页
  • 核心规则:同一时间仅一个组件可处于悬停态
 

4. 聚焦态(键盘 / 语音选中)

image.png

定义:通过 Tab 键、语音等方式选中元素时的高亮状态。

image.png

  • 视觉:焦点环 / 高亮叠加层,明确当前操作位置
  • 适用组件:所有可交互组件(按钮、输入框、选择器、列表项等)
  • 不适用组件:应用栏、横幅、对话框、导航栏、浮层
  • 核心规则:同一时间仅一个组件可聚焦,提升键盘操作可访问性
 

5. 点击态(按压 / 轻触反馈)

image.png

定义:用户点击、轻触、键盘确认操作时触发的即时反馈。

image.png

  • 视觉:波纹效果 / 加深叠加,强感知 “操作已生效”
  • 适用组件:按钮、卡片、复选框、芯片、列表项、输入框
  • 不适用组件:应用栏、导航栏、对话框、菜单、浮层、标签页
  • 核心规则:按操作顺序触发,同一时间仅一个组件生效
 

6. 拖拽态(按住移动)

image.png

定义:用户按住组件并拖动时的状态,提示 “正在移动”。
 
  • 视觉:低饱和叠加、轻微抬高阴影,低调不干扰
  • 适用组件:卡片、芯片、列表项、滑块
  • 不适用组件:按钮、应用栏、导航栏、对话框、菜单
  • 核心规则:同一时间仅一个组件可拖拽,避免界面混乱

 

转载:人人都是产品经理

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

 

image.png

兰亭妙微UI设计公司:10 个产品趣味设计细节拆解:高手如何用巧思打动用户

清阳

好奇心是用户探索产品的核心驱动力,有趣、新颖、有温度的设计,能快速抓住注意力、激发互动欲,让产品从同质化中脱颖而出。本文精选 10 个趣味 UI/UX 设计案例,从情绪表达、互动引导、视觉风格等维度拆解,兰亭妙微UI设计公司帮你快速 get 高手的设计思路。
 

 

1. 形象化心情场景:让情绪表达更直观

image.png

日记类产品的核心是记录情绪,Moo 日记 App 打破传统文字 / 单色标签的局限,为每一种心情匹配专属动态场景插画。
 
动态视觉让情绪传递更具象,丰富的标签体系覆盖更多情绪状态,用户无需文字描述,就能精准定格当下感受,提升记录的愉悦感与完成度。
 

2. 萌系 IP 陪练:把健身变成趣味互动

image.png

健康需求崛起让运动类产品竞争加剧,Rumbo 健身 App 以毛茸茸软萌 IP作为健身伙伴,替代冰冷的器械 / 数据展示。
 
软萌形象弱化健身的枯燥感与压力感,用陪伴感建立情感联结,让用户更愿意坚持训练日程,轻松实现产品差异化。
 

3. 童趣动效图标:唤醒情感共鸣

image.png

动态图标是提升模块关注度的利器,孩子王 App 首页金刚区的「儿童馆」图标,采用小孩侧空翻入场动效。
 
灵动的童趣动作贴合产品定位,既突出核心功能入口,又唤醒用户童年记忆,用情感共鸣降低用户抵触心理,提升点击意愿。
 

4. 结构化空状态:告别单调空白

image.png

新用户首次使用时,空状态是极易被忽视的体验触点。Moo 日记个人中心相册入口,摒弃传统文字 + 简单插画的形式,采用照片结构化展示填充空状态。
 
既让界面更饱满、不突兀,又提前暗示相册功能形态,降低用户认知成本,让无数据页面也有设计感。
 

5. 对话式引导:像聊天一样完成操作

image.png

生硬的步骤指引容易让用户放弃,罐头冥想 App 采用朋友式对话交互做操作引导。
 
温和的语气、生活化的表达,消解用户防备心,让引导过程更轻松自然,大幅提升流程完成率,适配冥想类产品的舒缓调性。
 

6. 签到前后差异化:兼顾吸引与体验

image.png

签到是提升用户留存的经典手段,美团外卖会员签到做了精准的视觉分层设计:
 
  • 签到前:红包样式 +摇摆动效,强视觉吸引促使用户点击;
  • 签到后:进度条展示,弱化视觉比重,避免遮挡核心功能。
     
    一强一弱的设计,既保证签到转化率,又不影响整体界面体验。
 

7. 个性个人中心:用 IP 抓住眼球

image.png

image.png

个性化时代,千篇一律的个人中心已无法满足用户。白日梦 App 采用鬼马动态 IP+ 独特视觉风格,打造辨识度极高的个人中心。
 
呆萌有趣的动态效果瞬间抓人眼球,满足用户对独特性的追求,强化产品记忆点。
 

8. 手绘暖系风格:营造温馨氛围

image.png

UI 风格日趋多元,独特画风能深化用户印象。好好养宠物 App 主打手绘风 + 暖色系,手绘图标、治愈插画贯穿界面。
 
温暖柔和的视觉感受,贴合宠物陪伴的产品调性,让用户使用时倍感温馨,提升情感依附。
 

9. 电子相册空状态:触发场景联想

image.png

马蜂窝 App 的空状态设计紧扣旅行属性,采用相框 + 随机风景插画形式,点击可切换不同风景。
 
模拟电子相册的交互,唤醒用户旅行回忆,激发创作 / 分享欲,让空状态从 “无用页面” 变成 “情感触发点”。
 

10. 自定义形象装扮:绑定个性化与转化

image.png

用户追求专属体验,好柿花生 App 在个人中心开放形象自定义功能,装扮道具可通过抽奖获取。
 
既满足用户个性化展示需求,又以抽奖机制提升用户活跃度与商业转化,实现体验与收益双赢。
 
转载:优设

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

 

image.png

一篇讲透!设计师必看的交互基础术语全解,兰亭妙微UI设计公司

清阳

本文聚焦交互设计核心认知,清晰区分UI 设计、交互设计、UX 体验设计,并逐一拆解高频交互术语,兰亭妙微UI设计公司帮你快速建立完整的交互知识体系。

image.png

二、交互设计核心认知:分清 UI / 交互 / UX

 
很多刚入行的设计师,容易混淆 UI、交互、UX 三者的边界,先把核心定义与关系理清楚。

image.png

1. 三者核心定义

 

  • UI 界面设计:聚焦产品最终视觉呈现,负责排版布局、色彩、图标、视觉样式等落地工作,核心是把界面做美观、规整。
  • 交互设计(IXD):制定界面操作规则与功能使用流程,比如外卖下单步骤、提醒设置逻辑、AI 对话交互方式等,核心是让用户会用、好用。
  • UX 体验设计:以提升整体用户体验为目标,覆盖需求分析、交互设计、UI 设计、用户测试等全流程,是包含交互与视觉的顶层设计。
 

2. 最简单的区分方法

image.png
  • 只做视觉落地、满足产品需求 → UI 设计
  • 制定操作流程、定义使用方式 → 交互设计
  • 以体验为目标,统筹视觉与交互 → UX 体验设计
 

3. 三者关系与工作流

 
三者并非孤立,而是高度关联、相互影响:

image.png

  1. UX 包含交互与 UI,先定交互方案,再做 UI 视觉是标准工作流;
  2. 交互逻辑直接影响用户体验与 UI 布局,UI 设计也必须适配交互操作;
  3. 好设计要兼顾操作流畅与视觉协调,不能顾此失彼。
 

4. 交互设计的交付与工作场景

image.png

  • 核心产出:线框图 / 原型图,配合流程连线、逻辑备注说明交互规则;
  • 常见误区:不必死磕高保真可交互原型(Axure/Figma 动效),核心是输出清晰可落地的方案;
  • 职场现状:简单需求可在 UI 设计中同步完成交互;复杂功能 / 逻辑(尤其 B 端)必须独立做交互设计,减少改稿、提升效率。
 

 

三、交互核心术语扫盲(一文看懂)

 

1. 基础概念类

image.png

  • 人机交互(HCI):人与机器 / 软件的所有互动行为总称,开关机、点击、输入、鼠标操作等都属于此,界面交互是其子集。
  • 交互设计(IXD):特指软件界面的操作规则与流程设计。
  • 交互界面(UI):可触发操作、获得反馈的可视界面,纯静态图片 / 视频不属于交互界面。
  • 交互原型:分静态(线框图,表达逻辑)与动态(可操作演示,用于验证)两类。
  • 交互文档:记录项目交互逻辑、规则、细节的团队协作文件,用于信息同步与存档。
 

2. 流程与行为类

 
  • 交互流程(User Flow):用户完成一个目标的完整步骤,如首页→选品→下单→支付的全路径。
  • 交互事件:用户单次操作 + 系统反馈的完整过程,包含触发、行为、反馈、动效,是 Figma 等工具的交互基础单位。
  • 交互方式(Trigger):界面预设的触发规则,移动端以手指操作为主(点击、长按、拖拽、重压),PC 端以鼠标 / 快捷键为主。
  • 交互操作(User Action):用户实际做出的操作行为,与 “交互方式” 匹配才能正常触发功能。
  • 交互反馈(Action):用户操作后系统给出的响应,如页面跳转、弹窗关闭、支付成功提示等。
  • 交互动效(Animation):反馈的视觉动画形式,如页面滑入、弹窗弹出、点击动效等。
 

3. 评价与体验类

  • 交互体验:用户使用功能时的操作感受,仅聚焦产品交互环节,不含定价、客服等外部因素。
  • 交互可用性(Usability):衡量交互是否好用、易上手的核心标准,决定设计方案的优劣。

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

 

image.png

好设计历久弥新!兰亭妙微UI设计公司聊聊那些百年未变的经典产品设计

清阳

一、全文速览图

image.png

“Good design is durable.” 迪特 · 拉姆斯的设计十诫提到,好的设计应该是历久弥新、不会轻易过时的。

在 20 世纪,大多数日常用品都经历过颠覆式的变革、简化或技术迭代,比如电话、笔、黑胶唱片机等。然而有少数物品,它们已问世超过百年,形态与结构却跟设计之初别无二致,且还能较好地满足当下的需要。这些产品是如何诞生的?为什么他们能在时间的长河中维持恒定不变?兰亭妙微UI设计公司与您一起来学习。

 

二、这些百年产品的诞生

1. QWERTY键盘布局  1874年

1941 年,世界上第一台电子计算机诞生;1968 年,第一只鼠标原型问世。然而,与它们共同构成人机交互基础的 QWERTY 键盘,其布局早在 1874 年就已获得大规模应用。

如今我们已有语音、触摸屏、甚至是脑机接口等多种输入方式,却还是高度依赖着与 150 年前首批打字机外观相似的键盘。

QWERTY键盘的发明

1868 年,肖尔斯(Christopher Latham Sholes)和他的同事们将他们的第一台打字机运往芝加哥,首位客户是芝加哥波特电报学院的校长爱德华(Edward Payson Porter)。这台打字机有 28 个琴键式按键,外形似钢琴,与波特学院使用的休斯·菲尔普斯印字电报机相似。其键盘按字母表顺序排列:A 至 N 从左向右排布,O 至 Z 则从右向左延伸。

image.png

 

在会见了多名客户后,根据反馈,肖尔斯与其同事对键盘的构造与布局进行了多次改进。最终在 1872 年,《科学美国人》在头版以大幅版画形式报道了这台打字机,画面中清晰展示了其键帽结构,此时的打字机已配备 42 个按键,包含大写字母、数字 2 至 9,以及连字符、逗号、句号、问号等常用标点符号。

image.png

 

1874 年,肖尔斯发明的打字机由枪械制造商雷明顿公司(E. Remington and Sons)推向市场,并逐渐演变成为键盘的行业标准。其按键布局已与今天我们普遍使用的 QWERTY 键盘几乎完全相同,是当今世界上应用最广泛的键盘布局。尽管不同国家会因语言习惯在键位安排上做些微调,但整体结构仍遵循着这一经典设计。

image.png

 

扑朔迷离的键盘布局起源

这其中耐人寻味的是,肖尔斯是如何想出这种键盘排列方式的。

因其印刷行业的背景及报纸出版商的经历,肖尔斯应当熟悉排字工根据使用频率排列字盘的做法。有一种广为流传的理论认为 QWERTY 键盘的布局是为了限制打字者的速度:其核心原则是将高频使用的字母分隔开(尽管像 E 和 R 仍被放在一起),以此减少打字时连动杆的相互碰撞而导致的故障。换而言之,这是一种以暂时性的输入效率,换取机械运行的长期可靠性的妥协。

然而,京都大学的研究人员³提出,QWERTY 键盘布局的诞生可能与早期核心用户——电报员的工作习惯密切相关。研究中以 E、S 、Z 这三个字母在键盘上的布局为例来阐明这个观点。

当时,美国电报员需要把听到的摩尔斯电码实时转译成字母。在美国使用的电码中,字母 Z 与常用组合 SE 的编码恰好相同,均为“···  ·”(滴滴滴  滴)。当听到这样的电码序列,尤其是在缺乏上下文的单词的开头时,接收者无法立即判断是 Z 还是 SE,只能根据后续听到的电码来综合判断。这种不确定性会严重影响输入效率:在传统的 A-Z 顺序键盘上,若电报员开始输入 Z,之后发现应为 SE,手指就不得不在相距较远的键位之间移动并修改。

而 QWERTY 键盘布局的调整是,把 Z、SE 这两组容易引起混淆的字母安排在了彼此相邻的位置。这样一来,即使电报员在听到“滴滴滴  滴”时无法立刻判断,手指也能在紧邻的区域中快速选择或更正,而不必在全键盘上寻找。或许正是这类针对电报场景的优化,最终塑造了我们今天所熟知的 QWERTY 键盘格局。

image.png

 

虽然原因至今尚无定论,且无论是为了避免机械故障还是适配摩尔斯电码的输入习惯,都跟当下的使用场景有所不同,但至今为止也没有任何一种其他布局方式来取代它。

2. 回形针 1901年

19 世纪,木浆制浆技术与工业造纸厂的出现让廉价纸张得以广泛流通。面对随之产生的大量零散纸张,人们开始使用手边常见的别针来加以固定——这被视为回形针的前身。尽管别针价格低廉、使用方便且用后即弃,但其缺点也十分明显:不仅容易生锈,还会刺穿纸张,留下难看的锈迹与孔洞。

image.png

 

最早的回形针专利记录来自挪威人约翰·瓦勒(Johan Vaaler),他在 1901 年提交了申请。专利摘要中写道,这是一种“由弹簧材料弯曲成矩形、三角形或其他形状的环,金属丝两端形成并排且方向相反的部件或舌片”。相比别针,回形针不需要通过刺穿纸面来固定纸张,并排的金属丝结构也提供了更多的固定方式。

image.png

 

1899 年,威廉·米德尔布鲁克(William D. Middlebrook)获得了回形针制造机械的设计专利,随后他将专利卖给了一家办公用品制造商,该公司将其注册为“宝石回形针”(Gem clip)。其有着标志性的双椭圆形环圈设计,通常采用镀镍或彩色塑料包裹的材质,不仅有效防锈,也兼顾外观的美感。

相比约翰·瓦勒的设计,宝石回形针将纸张与回形针接触的位置处理得更圆润,减少了刺破纸张的风险。螺旋状的钢丝具有一定的柔韧性,可轻松张开以便放入纸张,同时又有足够的弹性来夹紧文件。

image.png

几年后,乔治·W·麦吉尔(George W McGill)对宝石回形针做出了改良,进一步增大了内环的弧度,使其更明显地上翘。相比初代宝石回形针平缓的环圈末端,这种上扬的开口形成了更清晰的“示能”——直观地提示用户“此处可拉开并插入纸张”。在结构上,它也实现了更省力的开合体验。正是这一改良版本,逐渐演变成了今天最常见、最广泛使用的回形针。

image.png

 

回形针作为“固定文件”的工具这一认知,也自然而然地从现实世界延伸到了数字世界。在图形用户界面中,当我们想要将文件添加至邮件或文档时,常常能看到那枚熟悉的回形针图标。

image.png

 

3. 螺旋蚊香 1902年

中国最早的蚊香可追溯至宋代,一本记录民间生产技术的古籍《格物粗谈》中记载:“端午时,收贮浮萍,阴干,加雄黄,作纸缠香,烧之,能祛蚊虫”。这段记载中所述的制品可视为早期形态的“蚊香”,其外形类似于带芯的线香。换而言之,最初的蚊香是直的。

蚊香的螺旋形演变可以追溯到 19 世纪末的日本。当时,人们将除虫菊粉与锯末混合燃烧用于驱蚊。日本企业家上山英一郎(うえやま えいいちろう)生产了一种混合了淀粉和除虫菊的香,虽然驱蚊效果良好,但存在明显缺陷:不仅燃烧时间短,不到四十分钟便燃尽,而且与普通线香一样质地较脆,遇风易折。

image.png

 

1895 年,上山英一郎正致力于寻找延长蚊香燃烧时间的方法。期间,他的妻子在仓库中偶然看见一条盘踞的蛇,由此获得灵感,建议他将蚊香制成螺旋形状。这一设计在工程上极为巧妙:螺旋结构以最小的面积延展了蚊香长度(相比线状蚊香延长约 4 倍),也设置了一个单点、稳定、缓慢的燃烧路径,让蚊香既不会熄灭也不会因为香条过宽而燃烧太快。1902 年,可持续燃烧约七小时的螺旋状蚊香问世,并被命名为“金鸟蚊香”,其有着标志性的深绿色外观与印有红色公鸡头的包装设计。

如今我们使用的螺旋盘香,基本都是采用了这个结构,在保证单盘燃烧时间 7-8 小时的前提下,既能节省包装空间,又能在运输中互相支撑,防止断裂。

image.png

 

4. 拉链  1911年

在拉链发明之前,人们用以拉紧衣物的工具繁多,包括系带、纽扣、别针、搭扣、腰带与松紧带等。纽扣是其中历史最久、使用最广的一种,但其使用效率较低,解开与扣上均需时间,且在耐用性上存在不足,时有脱落之虞。

image.png

 

19 世纪末,在追求“效率”的工业时代背景下,拉链应运而生。发明家惠特科姆(Whitcomb Judson)想解决传统的系带式高帮靴穿脱过于繁琐这个问题,在芝加哥世界博览会上展示了名为钩锁(clasp locker)的装置,它的核心目标很明确:用一次滑动,替代逐个系扣的繁琐过程,节省时间。但当时这种拉链依赖手工制作,成本较高,且质量不够稳定,最终因为结构缺陷及成本问题退出了市场。

image.png

 

1912 年,森贝克(Gideon Sundback)取得了突破性进展,他将惠特科姆发明的易崩开的钩环结构改成了稳定咬合的齿牙结构,实现凹凸完全咬合,使拉链闭合更牢固,开合也更加顺滑流畅。一百多年过去,如今金属拉链仍然在沿用这种工艺制造。

image.png

 

1923 年,百路驰(B.F. Goodrich)公司将森贝克设计的拉链用于一款女式橡胶靴,因其开合时会发出“滋滋”的摩擦声,公司便形象地将其命名为 “ZIPPER”。这个朗朗上口的名字随后逐渐被大众广泛采用,“拉链”也因此得名并沿用至今。

拉链与纽扣的争端

在时尚界,关于在服装上用拉链或是纽扣还引起过一场关乎功能、形式甚至是伦理上的论战。

从效率上而言,拉链无疑更胜一筹,其便利性也更符合我们现代快节奏生活的需要。纽扣的使用需要一定的技巧,而且会增加衣物的厚度,对于如今流行的紧身牛仔裤来说,纽扣可能使面料更容易鼓起或撕裂;而拉链则能通过“收紧并向上拉”的方式来解决这个问题。

但是,拉链更容易损坏和卡住,更难修理。它们也存在一定的安全隐患:在战场上,军服就曾发生过因拉链卡死耽误急救而导致伤亡的事件;反之,纽扣在意外拉扯下更易整体脱落而非卡死。

纽扣的另一个好处在于美观:随着时间的推移,纽扣与衣服的摩擦会形成独特的色落与磨损痕迹,对于牛仔爱好者来说是一个理想的特性。

还有一部分来自复古派的道德质疑,批评者称拉链简化衣物穿脱的特性会助长轻率行为,败坏社会风气。因此,尽管拉链技术早已成熟,直到 1947 年李维斯才将其应用于牛仔裤上。

最终在 1937 年,拉链在这场论战中击败纽扣,巩固了其在服装设计中的地位。如今,这个一百多年前的发明无处不在,被广泛应用于服装、行李箱和无数其他物品中,YKK(全球市场份额第一的拉链制造商)每年生产的拉链足以绕地球 50 圈。

三、何以百年不变

面对技术的百年巨变,为何这些产品能不被淘汰,甚至其基本形态都与百年前最初发明时大体相同?值得肯定的是,他们的设计的确超越了同期其他产品,呈现出一些宝贵的特质。

简单精妙的结构

例如经典的宝石回形针,其双椭圆形结构在同期的其他设计中脱颖而出,以简洁优雅的形态高效实现了“不伤纸”这一核心需求;而螺旋形的蚊香设计,既延长了燃烧时间,又通过严丝合缝的嵌套,兼顾了节省包装空间和运输稳固性。

image.png

 

易用性

拉链和回形针是典型的无意识设计,它们形态与功能高度统一、无需学习曲线。即使是年幼的孩童,也能凭直觉学会使用拉链:20 世纪 30 年代拉链推广初期,拉链款童装就常常以“帮助幼儿学会自己穿衣,培养自理能力”作为卖点。

易工业化、标准化

回形针只需弯曲三次并剪断即可制成,易于自动化生产;螺旋形蚊香可通过钢制模具一次冲压成型,一台机器每分钟可生产数百盘蚊香,整个过程可高度标准化。规模化生产有效降低了成本,使其在市场上更容易取得价格优势,进而推动广泛普及。

然而,历经百年技术发展与社会变迁,新生需求与问题层出不穷。这些经典产品,是否真的一如诞生之初那般,显得全然不过时?或许,让它们保持不变的还有更深层的原因。

四、已是最优解,还是懒于改变?

去年 11 月的香港大埔火灾事故造成了重大人员伤亡,令人痛心。在对这场事故的追责中,首当其冲地便是香港建筑行业的竹棚工程。许多人指出,竹材燃点仅为 265°C,远低于钢材,可能加剧火势蔓延。此外,竹棚的结构强度也相对不足——过去香港曾多次发生棚架坍塌事故。以香港的经济发展水平,完全有能力推动行业向钢材升级。但网络上仍有许多支持者声称:竹棚搭建技艺自清朝便出现在香港,已有上百年历史,具有文化传承价值‌,也是长久以来的行业惯例。

image.png

 

同样的,历史上也有其他证据表明 QWERTY 键盘并非最佳的键盘布局,比如美国心理学家发明的德沃拉克键盘布局(Dvorak keyboard layout):这一布局基于字母使用频率和手的生理结构设计,拥有打字更快、更易学习和降低疲劳的特点。二战时一项研究表明,德沃拉克布局的打字员速度要比 QWERTY 布局打字员快 74%。即使是 QWERTY 键盘的发明人——肖尔斯本人也没那么笃定:尽管他很早就将设计卖给了雷明顿公司,但他终其一生都在不断改进布局,并创造出各种替代方案,在他去世的前一年,他还为自己的 XPMCH 键盘申请了专利。

image.png

 

螺旋蚊香的使用体验也没那么理想:其嵌套结构导致在拆分时比较困难,一不小心可能直接掰断,且必须依赖专用底座才能使用。这本质上是一种便利工业化生产而非优化用户体验的设计。然而,即使有了电蚊香这种更方便、健康、安全的替代品,螺旋蚊香仍凭借低廉的成本、成熟的产业链以及简易的仓储运输要求,在市场中占据着一席之地。

在历史较短的互联网领域也有类似的案例——比如搜索引擎结果页的布局与交互模式。自 2000 年代初谷歌确立“顶部搜索框 + 蓝色链接标题 + 简短摘要”的模式以来,其核心框架在近二十年间保持高度一致,并成为行业标准,不管是在网页端还是移动端。然而在移动端上,固定于屏幕顶部的输入框常位于手指的自然操作范围之外,用户需特意伸展才能触及,体验不够便捷。而“标题用蓝色表示超链接” 这个设计也稍显过时,在用户已基本认知“搜索结果标题可点击”的今天,整屏的蓝色可能带来不必要的视觉干扰,增加阅读负担。

回望这些产品或设计,其“不变”与其说是源于解决问题的完美,不如说是因为它们早早确立了“行业标准”,获得了先发优势,培养了牢固的用户习惯,进而形成了强大的路径依赖。一旦从用户到产业链的“惯性”形成,任何改变都将面临难以估量的转换成本。正因如此,即便它们存在一定的缺陷,市场往往也会接受,毕竟这是性价比相对较高的策略。

总结

一些产品能历经百年而保持不变,固然有其设计上的优越性,但更值得深思的是不变的背后隐藏着的路径依赖与行业惯性的强大力量。百年的不变或许只是暂时的,可能是颠覆性的技术尚未诞生,或是缺少一个推动行业变革的契机。

归根结底,设计无法时刻去寻求那个完美的终极方案,而是在多重约束条件下寻找平衡——既要权衡用户习惯与使用体验,又要兼顾商业成本、行业发展情况与规模化需求,甚至还要回应文化传承与社会伦理的争议。同时,作为设计师也需要保持对行业规范与惯例的审视与批判意识,警惕将“长期不变”等同于“无可优化”,在考虑用户习惯转换成本的前提下,积极探索更适配当下需求的创新方案。

转载:优设

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

 

image.png

兰亭妙微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。

 

image.png

设计如何为用户「节省时间」?兰亭妙微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。

 

image.png

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

清阳

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。

 

image.png

兰亭妙微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。

 

image.png

兰亭妙微带您赏析:移动端列表页设计:3 个核心要素 + 2 种主流布局,一次讲透

清阳

兰亭妙微ui设计公司带您赏析:列表页是移动端最常用的信息承载页面,看似是重复组件的排列,本质是数据表格的可视化转化。想做好列表设计,先抓准核心逻辑,再定布局框架,新手也能快速上手。
 

一、先懂数据:列表设计的 3 个核心要素

 
列表不是单纯做视觉排版,而是清晰传递数据信息,设计前必须吃透数据的 3 个关键维度:
 

1. 属性字段:明确要展示的信息点

image.png

属性字段就是数据的表头,是列表里要呈现的所有独立信息。比如商品列表,包含商品图、名称、标签、销量、价格、好评率等;用户列表则包含头像、昵称、等级、状态等。

image.png

  • 设计前要梳理全字段,不遗漏关键信息
  • 给字段划分权重与分类,优先突出核心信息,次要信息弱化或隐藏

image.png

2. 字段值:确定信息的展示形式

image.png

字段值是每个属性的具体内容,也是数据到视觉的转化关键。开发中字段值仅为文本,设计里可转化为图片、图标、标签等更直观的形式。
 
  • 明确字段值的限制:文本长度、图片尺寸、状态类型
  • 统一转化规则:比如 VIP 等级用金银铜图标替代文字,提升视觉效率
 

3. 字段状态:适配不同场景的显示逻辑

image.png

字段状态决定何时显示、何时隐藏、显示什么内容,复杂列表必须设计多状态变体,避免展示异常。
 
  • 场景示例:外卖列表的配送标签(快送 / 专送 / 自配)、配送时间样式差异
  • 设计全覆盖:正常态、高亮态、禁用态、空态,确保所有场景适配
 
核心结论:优秀的列表是兼容数据的容器规则,不是单一好看的视觉组件。
 

 

二、再定框架:列表页的标准结构 + 2 种布局

 
列表页不是只有列表组件,完整框架固定且清晰,布局选择直接影响浏览效率。

image.png

列表页标准框架

image.png

从上到下依次为:顶部搜索栏 → 运营模块(可选)→ 筛选 / 排序栏 → 列表主体区域
 
  • 运营模块控制篇幅,避免挤压列表首屏展示
  • 可在列表中插入运营广告、内容推荐,平衡信息与转化
 

移动端 2 种核心列表布局

 

1. 单列列表:一行一个数据项

image.png

单列展示空间充足,适合字段多、需引导点击的场景,分两种类型:
 
  • 引导型:核心目的是跳转详情,比如商品、酒店、外卖列表,突出封面与核心信息
  • 展示型:直接呈现完整内容,无需跳转,比如朋友圈、消息列表

image.png

优势:单条信息展示完整,阅读舒适;劣势:单屏数据量少,浏览效率偏低。
 

2. 多列列表:一行多个数据项

image.png

移动端主流为两列,三列极少,分两种展示形式:
 
  • 等高布局:每条数据高度统一、对齐规整,适合字段统一、差异小的场景(如电商商品、图集)
  • 瀑布流布局:数据高度自适应,灵活度高,适合内容长短不一、视觉差异化大的场景(如笔记、穿搭、短视频封面)

image.png

优势:单屏展示数据多,浏览效率高;劣势:单条信息展示空间有限。

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

 

image.png

日历

链接

个人资料

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

存档