首页

兰亭妙微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 设计与体验优化时,我们一直坚持向大厂学细节、从用户看本质。大厂产品之所以好用、耐看、留得住用户,核心不在于视觉多炫酷,而在于把用户行为、场景需求、商业目标藏在每一个细节里。

兰亭秒微|被忽略的 UI 设计表现技巧:细节决定体验上限

涛涛 交互设计及用户体验

在兰亭秒微的 UI 设计与产品体验优化工作中,我们始终坚信:顶级界面不只靠规范,更靠被忽略的细节技巧。很多设计师专注于布局、色彩、组件搭建,却对手势、动效、引导、空状态等 “隐性体验” 不够重视。

兰亭秒微|探究 UI 设计中形状的创意与应用

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

在兰亭秒微服务企业级产品、移动端 App、品牌视觉界面的全流程设计中,形状是贯穿视觉表达、交互体验与品牌识别的核心语言。形状不只是界面装饰,更是引导用户认知、传递产品气质、强化品牌记忆的关键载体。结合实战案例,我们系统拆解形状在 UI 中的设计原则、应用场景与落地方法。

兰亭妙微带您欣赏ECO 矿山自动驾驶系统 UI/UX 设计

蓝蓝设计的小编 系统UI设计文章及欣赏

 

一、视觉设计:专业感与场景感的极致统一

ECO 系统的视觉体系完全贴合矿山工业场景,以深邃的暗黑为基底,搭配高辨识度的科技绿作为主色调,既凸显了工业系统的严谨性,又通过高对比度让核心数据、车辆状态、区域标识一目了然,完美适配矿山复杂的监控与操作需求。
 
  • 3D 矿山地形可视化,真实还原矿区道路、装载区、限速区等场景,让调度人员直观掌握全局;
  • 用绿、黄、红三色区分车辆健康状态、区域风险等级,用绿色雷达圈标注车辆感知范围,视觉预警清晰直观;
  • 全端视觉风格高度统一,从全局调度、单车监控到地图编辑,保持一致的色彩规范、字体图标与布局逻辑,强化品牌专业感。
 

二、信息架构:全流程覆盖,服务矿山核心场景

系统的信息架构围绕矿山自动驾驶全流程搭建,层级清晰、功能完整,覆盖调度、监控、管理全场景:
 
  • 全局调度页:聚合全矿区车辆位置、运行状态、设备数据,用标签分类运输设备、采矿设备、辅助设备,让调度人员一眼掌握全局;
  • 单车监控页:聚焦单台车辆的实时位置、行驶速度、车辆姿态、周边环境,搭配多视角摄像头画面,实现精准监控;
  • 地图编辑页:提供矿区道路、区域、锚点的可视化编辑功能,支持合规性校验与状态管理,满足矿区动态规划需求;
  • 车辆状态页:用卡片式布局展示每台车辆的健康度、运行状态,搭配快捷操作按钮,实现高效管理。

三、交互体验:高效便捷,适配工业操作需求

交互设计完全服务于矿山调度的专业场景,兼顾安全性与高效性:
 
  • 多视角切换功能,支持全局 3D 视图、单车近景视图、分屏联动视图,满足不同监控需求;
  • 快捷操作栏集成紧急停止、远程接管、限速设置等核心功能,一键触达,保障矿山作业安全;
  • 可视化倒计时、状态进度条、合规性校验提示,让操作状态清晰可感知,降低操作失误风险;
  • 多端适配设计,适配电脑端大屏调度与移动端便携监控,实现全场景操作无缝衔接。

 


 

四、兰亭妙微实践延伸

 
兰亭妙微深耕工业 B 端、企业级产品 UI/UX 设计多年,拥有丰富的全端产品设计、改版、重构经验。近期,兰亭妙微完成了上市公司竞业达教育软件三端(平台端、教室端、移动端)UI/UE 全案重构,实现三端风格高度统一、体验一体化,获得客户高度认可。
 
兰亭妙微始终坚持以用户为中心的设计理念,无论是矿山自动驾驶这类工业 B 端产品,还是教育类 C 端产品,都以贴合场景、提升效率、保障安全为核心,打造专业、易用的界面设计。如果您有工业系统、企业软件的 UI/UE 设计、产品改版需求,欢迎与兰亭妙微对接,我们将以专业设计能力,为您打造贴合场景、体验优质的产品解决方案。
 

 

五、设计总结

 
ECO 矿山自动驾驶系统的设计,完美诠释了工业 B 端产品的核心设计逻辑:视觉贴合场景、架构服务流程、交互保障安全。它不仅是一套功能完善的矿山调度系统,更通过优秀的 UI/UX 设计,让复杂的工业技术变得直观、易用,为同类工业产品提供了优质的设计范本。
 

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

 

image.png

兰亭秒微|UI 设计中的网格系统:让界面秩序与体验双升级

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

在兰亭秒微为企业级软件、移动端 App、数据可视化平台等项目做 UI 设计时,我们始终把网格系统作为界面规范的核心底层框架。很多团队容易把网格当成 “辅助线”,却忽略它是统一视觉节奏、提升协作效率、保障多端还原度的关键工具。结合十六年行业实战经验,我们把网格系统的原理、构成与落地方法,整理成一套可直接复用的设计标准。

一篇讲透!设计师必看的交互基础术语全解,兰亭妙微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

兰亭妙微逐图解析移动端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 设计、改版需求,欢迎与兰亭妙微对接。

日历

链接

个人资料

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

存档