首页

同样是切换组件,开关/单选按钮/复选框该用哪个?

之晨 系统UI设计文章及欣赏

做UI/UX设计的同学几乎每天都要和切换类组件打交道,但很多人总会在开关、复选框、单选按钮之间踩坑——要么用错场景,要么给用户造成认知混淆,甚至引发操作失误。

苹果HIG (人机界面指南) 里明确把开关、复选框、单选按钮这三类,都归为「切换开关」组件。它们的核心共性是让用户在对立的状态间做选择,通过差异化的视觉形态清晰区分选中/未选中的状态。

image.png

一、开关(Switch)

开关是用来瞬间切换单个功能/设置的开启/关闭状态的组件,一次只能控制一个设置的开关,工作逻辑和我们家里的物理电灯开关完全一致,能让用户一眼看清当前的生效状态。

1. 开关核心结构

image.png

开关的结构非常简洁,核心分为3个部分:

  1. 轨道(背景):开关的背景区域,也是手柄滑动的路径,通常会用颜色差异区分开/关状态,直观告诉用户当前是否激活
  2. 手柄:用户可以点击、拖动的可交互按钮部分,手柄上可添加对勾、叉号、圆圈等辅助图标
  3. 图标(可选):用来强化状态认知的辅助元素

2. 开关使用规范

如果要添加辅助图标,必须选表意清晰、强二元对立的样式,千万别用含义模糊、没有明确正反属性的图标(比如月亮、编辑图标),用户没法一眼对应开/关状态。

image.png开关的核心交互逻辑是操作后立即生效,不需要用户额外点击确认按钮,切换状态时,可配合手柄尺寸的微动效强化操作反馈。

image.png开关必须和描述控制功能的标签搭配使用,标签要简洁直白,不要把文字放到开关内部。这样会压缩视觉空间,还会破坏组件通用性,增加用户识别成本。

image.png

二、复选框(Checkbox)

复选框的核心定位,是支持用户对一组关联选项,做单项或多项的选中/取消操作。

记住一个核心原则:当用户可以在一个列表里选择多个选项时就用复选框,不用开关或单选按钮。单选按钮的语义是「请选其中一个」,而复选框的语义是「可以选多个,也可以全不选」,二者的底层逻辑不同。

1. 复选框核心结构

复选框的结构清晰,核心就是选择容器+选中状态图标,通过勾选/未勾选的视觉差异,直观传递用户的选择结果。

image.png

2. 复选框使用规范

如果选项列表较长,建议添加「全选父复选框」提升操作效率,它的交互逻辑有明确的行业规范:

  1. 父复选框勾选,所有子复选框自动全部勾选;
  2. 父复选框取消勾选,所有子复选框自动全部取消勾选;
  3. 子复选框仅部分被勾选时,父复选框需显示「半选(不确定)」状态,点击半选的父复选框,会自动全选所有子项。

    image.png

处理一组有关联的多选项时优先用复选框,而非一堆独立的开关。

一方面,复选框能天然传递「选项之间互相关联」的语义,另一方面,它比开关占用的视觉空间更小,页面会更整洁有序。

三、单选按钮(Radio Button)

单选按钮的核心是互斥单选。在一组选项里,用户有且只能选择一个,选中新选项后之前选中的选项会自动取消。

它的语义非常明确:这一组选项里,「你必须、只能选一个」和复选框的「可多选、可全不选」形成了清晰的边界。

1. 单选按钮核心结构

单选按钮的结构核心是选中/未选中的状态图标+对应的选项标签。行业通用的视觉规范是:用实心圆点表示选中,空心圆圈表示未选中,保证用户的视觉识别度。

image.png

2. 单选按钮使用规范

不能打破互斥单选的核心逻辑,更不能让单选按钮出现布局重叠,否则会完全颠覆用户的固有认知,造成操作混乱。

image.png

如果选项数量较多、屏幕空间有限,可用下拉菜单替代单选按钮。

但要注意:下拉菜单需要用户多一步点击展开的操作,会增加交互成本,也没法让用户一眼看到全量选项,降低认知效率。因此选项较少时,优先用单选按钮。

image.png单选按钮优先垂直排列,不建议水平排列。

image.png

垂直排列时每个选项的图标和标签对应关系更清晰,用户不会看错;水平排列不仅容易让页面拥挤、可读性下降,还会破坏布局一致性,在响应式适配中也更容易出问题。

四、一张表搞懂:三者到底怎么选?

前面讲了每个组件的细节,这里给大家整理了最简使用规则,设计时直接对照即可。

image.png

开关、复选框、单选按钮,都是设计里最基础、最常用的组件。设计时要先看场景、定语义,再选对应的组件,而不是凭感觉、看颜值随便乱用。

当然,我们也会看到一些特殊的设计案例,比如iOS在深色模式的选择里,用了圆形复选框,和我们今天说的常规用法不一样。这种情况,要么是为了整个系统的设计语言统一,要么是有特殊的产品考量,不建议盲目照搬。对于设计师来说,先搞懂这些基础组件的用法、可用性底层逻辑,才是做好设计的根基!

转载自 优设网

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

 

image.png

兰亭妙微UI设计公司 关于后台管理系统首页的设计思考

丽洁 系统UI设计文章及欣赏

 

一般用户在登录后台管理系统后,后台首页就成为了用户与产品交互的第一个页面,这某种程度上也凸显了这一页面的重要性。那么,后台管理系统的首页设计可以遵循哪些策略?本文作者结合实战项目发表了他的想法,一起来看看吧。

LJ5qo7k2IYPEKbcXCKMp.jpg

很久没有更新文章了,一方面文章选题困难,公众号的阅读量真是有点惨不忍睹,写作的动力有所下降。另一方面工作确实比较忙,时间精力有限,最近参加了多个工作项目一直在加班。

今天总结下项目过程中,关于后台管理系统首页设计引发的一些思考。

主要的内容包括:

  1. 后台首页的作用;
  2. 首页的设计方向;
  3. 首页内容的思考。

一、后台首页的作用

后台首页是用户登录后,与产品交互的第一个页面,信息内容非常重要,作用也非常明显。一方面可以帮助用户宏观了解系统的整体运行状态,洞察业务问题。另一方面可以帮助用户快速处理业务问题,不需要到专门的功能页面操作,缩短用户的操作路径。

后台首页需要依托整个产品的功能体系,根据用户角色的职能、权限、业务范围,提取关键的用户关心的业务功能点搭建页面内容。所以一般是在业务功能完成之后再进行首页设计。这就要求产品经理能够从全局视角理解用户和场景,才能做出有效的设计方案。

另外首页不属于具体的业务领域,所以一般不会安排固定的产品经理,而是由产品经理兼任。如果产品设计没有整体规划,首页就容易被忽略,成为「三不管」地带。

6wIxdNBsEU5XnUXQKU7e.png

二、首页设计的方向

根据以往的设计经验,我总结了以下四点:

Bn60wUR8Ov1UNcQ55yt9.png

1. 内容与用户角色

首页设计要求产品经理对用户角色的分类、业务职能有比较深入的了解,否则产品设计就可能变成内容堆砌。

通常后台系统需要面向管理层和执行层两类用户,他们对于信息需求存在比较大的差异。管理层更关注宏观层面的统计信息,方便了解业务动态,从而制定工作决策等,所以各类可视化图表就成为首页重要的内容组成。

对于执行层用户,主要是完成具体的工作任务,所以更加关注明细数据。除此之外,适当地增加一些统计数据,可以更全面了解系统状态,也便于对上汇报,减少人工统计的工作量。

B 端产品了解用户和场景并不容易,如果只靠“猜测”做设计,就会发现首页设计有很多种可能,怎么做似乎都对,怎么做似乎都不对。而且参与的人越多,想法也会越多。

所以在项目中,需要尽可能地收集用户场景信息加以分析完成设计,即使存在一部分“猜测”信息,也需要能够自圆其说,才能更好的推进产品设计落地。

2. 场景/主题化

对于小的业务系统,单独的一个页面就可以涵盖所有的业务信息,内容也会比较清晰简单。

对于比较大的业务系统,首页包含的消息会比较多,例如阿里云、腾讯云等产品,一个页面内容无法承载所有的信息。因此需要根据场景/主题拆分首页内容,便于用户有目标地快速查看信息。比如阿里云采用的是资源管理、安全管理、成本管理等主题去划分首页内容。

E25h6F1hYRIde2bsD6PY.png

3. 实用性

1)串联内容,缩短路径

某些场景下,首页要满足用户快速处理业务工作的需求,例如待办事项,审批操作等,通过明细列表的展示,结合抽屉等详情信息展示,用户可以在首页直接处理工作任务,无需进入到功能页面。

「常用功能」也是首页的常见组件,类似操作系统桌面的快捷方式一样。可以将一些二级甚至三级功能作为常用功能放在首页中,用户不需要通过菜单逐级点击,即可进入功能页面,对缩短用户操作路径也有很大帮助。

2)高频常用功能信息聚合

首页的价值在于帮助用户简单、高效的认知系统,是高频常用功能的信息聚合。因此需要尽量减少花哨、不实用、看似高大上的功能,或者改变展示形式,保证重要信息的优先展示。

有些 B 端产品的门槛比较高,为了降低认知成本,于是有人希望在首页中增加系统介绍、系统架构图的形式来展示产品的功能流程,在产品演示是可以更好的让用户理解产品功能。

这些本来应该是在 PPT 中展示的信息,却要放到首页中展示。看似酷炫的一张图,实际上在应用阶段对用户的工作没有任何帮助。因为用户根本不关心你的系统架构是什么,需要的是产品帮助他解决工作中的问题,带来的效率提升。

即使用户需要了解这些信息,也不是每天打开首页就要一眼看到,可以采用其他的呈现方式。比如用户引导,或者与业务信息关联,既可以呈现出业务流程,也可以展示业务信息,又或者首页增加入口、引导在帮助中心查看。

4. 定制化

B 端产品业务功能是面向用户角色的,同一角色的用户具有相同的工作任务。但是首页则有所不同,同一类角色的不同用户,关注点也不完全相同。尤其是业务系统内容较多时,首页内容可定制就成为了满足不同用户信息需求的方式。

当然系统的定制化并不是让用户从零定制,而是在系统初始内容基础上,重新组织页面内容、调整页面布局等。否则定制化反而会带给用户更差的体验。

三、首页内容应该追求简洁还是丰富呢?

在项目设计中,就碰到了这个问题。有同事认为首页应该简单点,避免过多的信息量增加用户的学习成本。

当然这个问题需要根据产品定位具体分析。不过总的来说,我个人认为首页应该丰富一些。

首页是信息聚合页面,天然就会有较多的信息内容,用户需要通过信息传递了解系统的状态和变化,人为的过滤掉内容后会影响信息的全面性。

其次用户有信息选择权,通过一定时间的摸索,可以形成自己的信息查看轨迹,或者个性化定制首页内容过滤掉工作中冗余的信息。

而且B 端产品经过多年的发展,单从布局和表现形式上看,首页已经有比较成熟的设计模式了,大多数企业用户也形成了统一的认知和习惯。卡片风格是首页最常见的展现形式,卡片可以让页面分割更加清晰,方便信息读取,有助于弱化信息量带来的复杂感。即使不采用卡片分割, 可以通过间距、标题等引导用户视线,划分页面内容。

oh3DAXHb3DXZA4UYDqUl.png

四、总结

简单总结下:

  1. 首页考虑的设计因素比较多,每种用户角色可能会有不同的需求,需要针对性的设计,而业务功能的用户角色更加明确;
  2. 首页设计需要对系统有全面了解,业务功能则比较聚焦;
  3. 首页是系统第一个页面,会受到更高的关注度,往往设计分歧也会比较大;产品设计需要做深入的分析,故事性要求也会更高;否则被喷和被 Pass的可能性会非常大;
  4. 首页设计的内容需要注重实用性,避免各种信息的无效堆砌。

转载:人人都是产品经理

8ad61732265770.png

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

e5891719196478.jpg

兰亭妙微带您欣赏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 设计必修课》原创解读

涛涛 系统UI设计文章及欣赏

你是否想系统掌握移动 UI 设计,却苦于知识零散、没有成体系的学习路径?作为专注 UI 与体验设计的兰亭秒微,我们结合站酷经典书籍《术与道:移动应用 UI 设计必修课》核心内容,为你整理出从基础到进阶、从规范到实战的完整移动 UI 设计体系,帮你打通设计逻辑,快速成长为专业移动 UI 设计师。

兰亭妙微:2022 林肯 Zephyr HMI 设计解析

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

作为深耕车载 HMI 设计领域的团队,北京兰亭妙微 UI 设计团队始终以行业优秀作品为标杆,持续学习探索车载交互设计的前沿思路。本次福特内部设计团队操刀的 2022 林肯 Zephyr HMI 设计,凭借品牌基因与前沿设计的深度融合,成为车载 HMI 领域的优秀参考范本,我们也从其中汲取诸多设计灵感,现将核心设计思路与学习感悟解析如下,与行业同仁交流探讨,北京兰亭妙微,与你一起共成长

设计核心定位

 
该设计锚定林肯美式豪华的品牌基底,结合新生代高端用户对智能座舱的使用需求,以「科技赋能优雅,体验回归人本」为设计主线,打破传统豪华车机的刻板设计逻辑,让智能科技成为豪华体验的延伸,而非简单的功能叠加。这一设计逻辑也为北京兰亭妙微在车载 HMI 设计中平衡品牌调性与用户需求,提供了重要的思路参考。

视觉体系设计

 
  1. 星云、星座为核心视觉灵感(nebula/constellation 为设计核心标签),打造沉浸式视觉氛围,深色调基底搭配细腻的动态光影效果,契合林肯「静谧之旅」理念,也让科技感与高级感相融,与豪华车型内饰风格高度统一;
  2. 采用极简现代的界面布局,弱化冗余视觉元素,以清晰的信息层级、简洁的视觉符号构建界面,实现「视觉减负」,让驾驶过程中信息获取更高效,这与我们在 HMI 设计中坚持的「高效视觉表达」原则高度契合。

交互功能设计

 
  1. 适配多联屏硬件布局,打造分屏协同、全屏切换的操作逻辑,支持主驾控车、副驾娱乐 / 导航的独立操作与信息一键流转,最大化发挥多屏硬件优势,这为我们在多屏车载交互场景的设计中,提供了实操性极强的参考方向;
  2. 遵循车载交互的安全性与便捷性原则,简化操作路径,摒弃复杂文字菜单,采用卡片式交互布局,支持常用功能自定义与快捷手势操作,减少驾驶中的操作干扰,这也是北京兰亭妙微在 HMI 设计中始终坚守的核心原则;
  3. 打造场景化交互模式,结合通勤、休闲、运动等不同驾乘场景设计对应界面主题与功能组合,让交互更具针对性,为我们的场景化车载 HMI 设计带来新的灵感启发。

品牌基因融合

 
设计将林肯经典的「地平线设计」语言融入 HMI 视觉体系,通过横向视觉线条拉伸座舱视觉开阔感,与车辆内饰设计语言呼应,强化品牌识别性;同时弱化物理按键视觉占比,以智慧触板实现「数字化操作」,仅在操作时触发视觉反馈,让豪华体验渗透到每一个交互细节。这一将品牌基因深度融入交互设计的思路,也为我们在 HMI 设计中打造专属品牌辨识度提供了重要借鉴。

设计落地工具

 
本次设计综合运用 Photoshop、Illustrator 完成视觉界面与图形符号设计,通过 Cinema 4D 实现座舱与界面的建模渲染,借助 After Effects 完成动态交互效果制作,以 Sketch 进行交互原型搭建,多工具协同实现设计理念的精准落地。北京兰亭妙微在 HMI 设计工作中,也注重多设计工具的协同运用,保障设计效果从概念到落地的完整性与专业性。

兰亭妙微学习感悟

 
深耕车载 HMI 设计领域,北京兰亭妙微始终保持学习与探索的初心,从行业优秀作品中汲取设计养分,同时也在实际项目中不断打磨自身的设计能力,将前沿设计思路与实际项目需求相结合,打造兼具实用性、创新性与品牌适配性的车载 HMI 设计方案。
 
优秀的设计作品始终是行业前行的动力,未来北京兰亭妙微也将继续以优秀标杆为指引,深耕车载 UIUX 设计,持续探索创新,与行业伙伴携手共进,北京兰亭妙微,与你一起共成长
 

 

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

UI 设计中的视觉引导技法深度解析 | 兰亭妙微设计

涛涛 系统UI设计文章及欣赏

视觉引导是 UI 设计的核心技法之一,涵盖色彩引导、动效引导、操作引导、视觉心理等多个维度,而真正优秀的设计,从来都是设计思路先行于设计技法。兰亭妙微设计深耕 UI/UX 设计领域,始终秉持「形式追随功能」的核心设计理念,在实际项目中通过科学的设计思路落地视觉引导技法。本次我们将以一个汽车问答测评 H5 的实战案例,拆解视觉引导的设计逻辑与落地技巧,分享从问题分析到方案优化的全流程设计思路。

高手设计弹窗的12个切入点

清阳

在日常的数字产品设计中,弹窗虽小,却往往承担着转化用户、传递信息、引导行为的关键角色。一个恰到好处的弹窗,能让用户体验如丝般顺滑;而一个设计粗糙的弹窗,则可能成为用户流失的导火索。

基于上百个真实的实战案例深度拆解,兰亭妙微ui设计公司总结出 12 种超实用的弹窗设计切入点。每一种都附有真实案例与核心优点,既好上手又具备延展性。无论你是想介绍产品功能、推送运营活动,还是引导用户互动,都能在这里找到适配方案,助你快速摆脱灵感瓶颈,让小小弹窗既好看又好用。

窗已是产品核心视觉焦点之一,产品整体功能定型后,弹窗会随运营活动持续迭代创新。本文基于上百个实战案例拆解,总结出 12 种易上手、延展性强的弹窗设计切入点,每种均搭配真实应用案例并提炼核心优势,适配产品功能介绍、运营活动推送、用户互动引导等多元场景,助力设计者突破灵感瓶颈,打造颜值与实用性兼具的弹窗设计。
 

01 卡片叠加式设计

image.png

小卡片错落超出大卡片的叠加形式,让弹窗视觉上灵动有层次,同时保证信息传达清晰明了,避免因设计叠加导致的内容混乱。
 

02 相册式产品卡片设计

image.png

将产品卡片与相册样式的图例相结合,视觉呈现贴合内容展示逻辑,尤其适合用于介绍产品功能、展示产品效果的弹窗场景,直观传递核心信息。
 

03 中间图标 + 方形卡片设计

image.png

以方形卡片为基底,搭配居中核心图标,是基础且经典的设计形式。操作简单易上手,同时具备极强的延展性,可适配多种产品风格与使用场景。
 

04 IP 形象 + 方形卡片设计

image.png

将产品专属 IP 形象与方形卡片融合,是创意枯竭时的优质普适性方案。借助 IP 的视觉辨识度,让弹窗兼具美观度与趣味性,强化产品记忆点。
 

05 拟人化表情图标 + 异形卡片设计

image.png

异形卡片打破传统方形弹窗的刻板感,搭配拟人化表情图标,为弹窗增添人情味与趣味性;再结合明快的阳光配色,进一步提升页面的欢乐氛围,拉近与用户的距离。
 

06 图标 + 空气弹框设计

image.png

摒弃传统弹窗的底色与边框,仅保留简约图标与核心文案。无多余视觉元素干扰,让关键信息在页面中更突出、更瞩目,极简设计适配轻量化信息传递需求。
 

07 简约插画组合 + 方形弹框设计

image.png

在方形弹框上方搭配简约插画组合,下方对应核心标题文案,图文结合让弹窗内容更丰富有层次。不仅提升视觉美感,更让信息传达更有力度,打造强记忆点。
 

08 信封式弹框设计

image.png

经典的信封造型弹窗,是跨平台、跨场景的普适性设计形式。虽无新颖创意,但因适配性强、用户接受度高,至今仍被各大平台广泛应用,适配各类基础信息与活动推送。
 

09 IP 配标题文字 + 空气弹框设计

image.png

将俏皮的产品 IP 与简洁的标题文字结合,采用无底色的空气弹框形式,兼顾趣味性与信息传递效率。视觉上轻盈吸睛,能快速让用户捕捉核心内容,高效完成信息触达。
 

10 无定式弹框设计

image.png

跳出异形、方形的传统弹窗框架,以核心内容(如优惠券、福利券)的有序排列形成 “隐形弹窗”。看似无固定形态,实则内容排布有章法,能最大程度突显核心信息,彻底打破常规设计的思维束缚。
 
这一设计也带来重要启示:弹窗设计的核心是精准表达需求,无需被固有样式限制,让设计为内容与场景服务。
 

11 底部弹出式插画弹窗

image.png

从页面底部滑出的弹窗形式,视觉瞩目性适中,不会过度干扰用户对主页面的浏览,底部页面信息仍可清晰查看。搭配简约插画,既丰富视觉层次,又避免弹窗设计过于单调。
 

12 底部弹出式空气插画弹窗

image.png

融合底部弹出的轻干扰形式与空气弹框的无框底特点,搭配插画设计,摆脱传统弹窗的样式束缚。视觉上氛围感与感染力拉满,核心标题更醒目,适配沉浸式体验的产品场景与氛围感营销活动。

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

 

image.png

医疗管理系统 UI 设计案例:Dia Clinic 如何通过专业界面提升诊疗效率

蓝蓝设计的小编

北京兰亭妙微科技有限公司带您欣赏这款 Dia Clinic 医疗管理系统的设计案例,它在医疗类桌面端 UI 设计上兼顾专业与易用性,为医护人员提供高效的患者诊疗管理能力。

  1. 胸腔影像诊疗页(Thoracic Imaging):聚焦患者胸腔部位的影像诊疗场景,是提升医疗影像诊疗效率的实用设计。
     
    • 3D 影像展示区:清晰呈现胸腔骨骼(如 Columna vertebralis thoracica)、膈肌等解剖结构,还支持点击 “Run 3D environment” 开启 3D 交互环境,让医护人员更直观地观察病灶,这正是医疗 3D 影像交互系统的优势体现。
    • 患者信息卡片:同步展示患者 Magnus Stephenson 的基础信息与 “Medical History” 入口,方便医护人员快速调取病史,助力精准诊疗,是优化患者诊疗信息查询流程的关键设计。
    • 健康指标模块:实时更新血压(128/82)、心率(74 bpm)等核心体征数据,让医护人员随时掌握患者状态,为及时调整诊疗方案提供依据,这也是医疗实时体征监控系统的重要功能。
     
  2. 诊疗日程与历史管理区:高效整合预约与诊疗记录,是医疗门诊日程管理系统的典型设计。
     
    • Appointment Schedule:以日历形式呈现 2026 年 1 月的预约安排,标注不同类型的诊疗项目,还能快速查看下一场(1 月 19 日)肺科医生的会诊信息,帮助医护人员合理规划诊疗时间。
    • Appointment History:汇总已完成 / 待安排的诊疗记录,清晰展示医护人员、科室及诊疗类型,便于追溯患者诊疗流程,提升医疗诊疗记录管理效率。
  3. 兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

     

    image.png

  4.  

从 UX 视角拆解加载设计:3 种核心状态与 5 类场景化模式

涛涛

在产品交互中,加载是用户操作与系统反馈之间的关键衔接环节。无论是 App 的启动加载、页面切换时的内容刷新,还是按钮点击后的功能响应,加载体验直接影响用户对产品的感知 —— 流畅的加载能让用户沉浸于功能本身,而糟糕的加载设计则容易引发烦躁与流失。因此,针对不同场景选择适配的加载状态与模式,是提升 UX 设计质感的重要细节。本文将从加载的核心状态分类、场景化模式选择两个维度,结合实际应用场景展开分析,为设计实践提供参考。

干货来了!40个界面设计经典技巧!(下)

清阳

21 让界面平滑显示而不要死板地呈现

用户进行操作过程中,界面上的元素会经常出现,隐藏,打开,关闭,放大缩小移位等。给这些元素增加些自然的动画,淡入淡出效果不但美观,也更符合实际,本来元素尺寸位置的变化就是一个需要时间的动画过程。但要注意动画时间不要设置过长,那样会让想尽快完成操作的用户不耐烦。

image.png

22 循序渐进的引导而不要直接让用户注册

与其让用户马上注册,何不让用户先进行一些体验式的操作呢。这个体验过程可以展示程序的功能,特性等。一旦用户通过简单几步的操作了解了程序的价值所在,那么它会更愿意填写注册表单的。这种循序渐进的引导可以尽量推迟用户注册的时间但又可以让用户在没注册的情况下进行个性化设置等简单操作。

image.png

23 过多边框会让界面四分五裂

过多边框会喧宾夺主。不用说,边框确实在划分区域进行版块设置时有很大的作用,但同时其明显的线条也会吸引走用户的注意力。为了达到划分版块又不转移用户注意力的目的,在排版时可以将界面上不同区域的元素通过空白进行分组,用上不同的背景色,将文字对齐方式进行统一,还有就是为不同区域设置不同的样式。当使用所见即所得的界面设计工具时,我们经常在界面上方便地拖出很多区块来,这些区块多了就会显得杂乱无章。所以我们又会到处放些横线来分界。一个更好的做法是将区块垂直对齐,这样做不会让那些多余的线条来扰乱视觉。

image.png

 

24 展示产品带来的好处而不要罗列产品特性

市场就是这样的,用户永远只关心自身利益而产品特性对他们来说倒不是那么重要。只有利益才更直观地体现出使用产品所带来的价值。Chris Guillebeau在他的著作《100美元起家》中指出,相比压力,冲突,烦心事和未知的未来,人们在乎得更多的是爱,金钱,认同感和自由支配的空闲时间。所以我相信在展示产品特性时回归到利益上是必要的。

image.png

 

25 考虑零数据的情况

界面上经常需要呈现不同数量的数据,从0,1,10,100到10000+等。这里存在个普遍的问题就是:在程序最开始使用的0条数据到过度到有数据之前,该如何进行显示界面。这也是我们经常忽视了的地方。当程序初始没有数据时,用户看到的就是一片空白,此时用户可能不知道该进行哪些操作。利用好没有数据的初始界面可以让用户学习和熟悉如何使用程序,在程序中创建数据。力臻完美永远是我们追求的目标,界面设计也不例外。

image.png

 

26 默认将用户引入

将界面做成默认用户选中想要使用你的产品,意味着如果用户真的需要使用,那么可以直接点击确定而不需要额外点选了。当然,也有另一种做法就是默认不选中服务,用户需要的话可以手动点选。前者这种设计更好的原因有两点。一是用户不需要额外点选,非常省事,因为默认设置为用户需要我们的产品或服务。二是这种做法某种程度上是在向用户推荐产品,暗示了其他人都选择了我们。当然,将界面设计成默认选择的样子多少存在点争议,有点强迫用户的感觉。如果你想道德一点,你可以要么把让用户选择的文字写得模棱两可,要么使用双重否定这样不那么直白的描述,这两种方式都可以让用户觉得没有那么强的感觉是被强迫选择使用产品的。

image.png

 

27 界面设计得一致,不要增加用户的学习成本

自从Donald Norman的一系列著作面世后,界面设计中尽量保持一致性成了一个普遍遵循的准则。在设计中保持一致性可以减少用户的学习成本,用户不需要学习新的操作。当我们点击按钮,或者进行拖拽操作,我们期望这样的操作在整个程序的各个界面都是一致的,会得到相似的结果出来。反之我们需要新情境下重新学习某种操作会产生何种结果。可以在很多方面下功夫来实现一个一致的界面,包括颜色,方向,元素的表现形式,位置,大小,形状等。不过在让界面变得一致之前,记住一点,适当的打破整体的一致性也是可取的。这偶尔的不一致性的设计用在你需要强调的地方可以起到很大的作用。所以世事无绝对,我们应遵从一致的设计准则,但适当地打破这种常规。

image.png

 

28 使用较贴切的默认值会减少操作

适当的默认值和预先填充好的表单字段可以大量减少用户的工作量。在节省用户宝贵的时间上面,这是种非常常见的做法,可以帮助用户快速填完表单或者注册信息。

image.png

 

29 遵从一些约定而不要去重新设计

界面设计中遵从约定的准则跟之前的界面一致性准则很相似。如果我们遵从了界面设计中的一些约定,用户用起来会很方便。相反,不一致和没有遵从约定的设计则会提高学习成本。有了界面设计中这些约定,我们想都不用想就知道界面右上角(大多数情况下)的叉叉是关闭程序用的,或者点击一个按钮后我们能够预测到将会发生什么。当然,约定是会过时的,随着时间的推移,同样的操作也有可能被赋予新的含义。但要记住,当你在界面中打破这些常规时一定要目的明确,并且出发点是好的。

image.png

 

30 让用户觉得可以避免失去而不是获得

我们喜欢成功,没有谁愿意失败。根据心理学得到的可靠结论,人们一般更顷向于避免失去拥有的东西而不是获得新的利益。这一结论也适用于产品的设计和推广中。试着说明你的产品会帮助客户维护他的利益,保持健康,社会地位等要好过告诉客户这个产品会带来一些他未曾拥有的东西。比如保险公司,它是在销售我们出事之后可以得到的大笔赔偿呢还是在强调可以帮助我们避免失去拥有的财产?

image.png

 

31 具有层次的图形化展示优于直白的文字描述

具有层次的设计可以将界面上重要的部分与不次要部分区分开来。要让界面层次分明,可以在这些方面做文章:对齐方式,间距,颜色,缩进,字体大小,元素尺寸等。当所有这些调整运用得适当时,可以提高整个界面的可读性。相比在一个很直白的界面上用户一眼就可以从上瞟到底的设计,这样分明的设计也可以让用户放慢速度来慢慢阅读。这样也使界面更有特色一些。就好比一次旅行,你可以乘坐高铁快速到达景区(从页面顶部瞟到底部),但你也可以慢行以欣赏沿途风光。所以层次分明的设计让眼睛有可以停留的地方,而不是对着空白单调的一个屏幕。

image.png

32 将有关联的功能分组而不是杂乱无章

将各个功能项分组合并起来可以提高程序的可用性。有点常识的人都知道刀子和叉子,或者打开文件和关闭文件是放在一起的。将功能相近的元素放在一起也符合逻辑,符合我们平时的认知。

image.png

 

33 使用内联的验证消息而不是提交后再验证

在处理表单时,最好立即检测出用户所填写内容是否符合要求然后给出验证消息。这样错误一出现能就能得到改正。相反,提交后再检查表单会给出错误消息,会让用户感到乏力又要重复之前的工作。

image.png

34 放宽对用户输入的要求

对用户输入的数据,尽量放宽限制,包括格式,大小写什么的。这样做可以更人性化一点,也使得界面更加友好。一个再恬当不过的例子就是让用户输入电话号码的时候,用户有很多种输入方式,带括号的,带破折号的,带空格的,带区号和不带区号的等等。如果你在代码中来处理这些格式的问题,代价也只是你一个人多写几行代码而以,却可以减少无数用户的工作量。

image.png

35 让用户感觉需要快速做出响应而不是毫无时间观念

适当的紧迫感是个有效的战术可以让用户立即做出决定而不是等上个十天半个月。重要的是这种战术屡试不爽,因为它暗示了资源的紧缺或者活动的时间有限,今天可以买,但明天可能就无法这么低价了。另一方面,这一战术也让用户感到会错失一次大好的机会,再一次,应用了人们害怕失去的本性。当然,这种战术会被一些人嗤之以鼻,认为是不耿直的做法。不过,这只是种战术而以,并且在保持合法性的前提下应用也无伤大雅。所以请不要为了营销而在界面上制造紧迫的假象。

image.png

 

36 使用饥饿营销

物以稀为贵。饥饿营销给出的信息就是东西不多,只剩几件,明天再来,可能没了。你去比较一下批发与限量版的东西他们的价格差距有多大就知道了。回过头来看,那些批发商或者大零售商,他们也使用饥饿营销,以获得更好的销量。但在软件行业,我们经常会忘记有饥饿营销这回事。因为数字产品是可以很容易拷贝复制的,不存在缺货的情况。其实,在界面设计中,也可以将其运用起来与现实中的资源紧缺进行联系。想想一次网上研讨会的门票,想想你一个月可以服务的人数限制,这些信息都可以告知用户是有限的。

image.png

 

37 让用户选择而不是重新填写

这一界面设计中的经典准则是有心理学依据的,相比要让某人回想想某样东西,从一堆东西中认出某样东西会更容易些。辨识出一样东西只需要我们稍微回忆一下,通过一些线索就可以完成。而回想则需要我们全面搜索自己的大脑。也许这也是为什么试卷上选择题会比简答题做得快的原因。所以试着在界面上展示一些用户之前涉及到的信息让他们进行选择,而不是让他们想半天然后自己填写。

image.png

38 让点击更轻松

像链接,表单的输入框还有按钮等,如果尺寸做得大一点则点击起来更方便容易些。根据费特定律,使用像鼠标这样的外设来点击需要一些时间,特别是元素比较小的情况下,时间会更多。鉴于此,最好还是把你的表单输入框,按钮等做大点。抑或者你可以保持原有的设计不变,只是把元素可点击区域(也就是热区)增大。这样的一个典型例子是手机设备上的文本链接和导航菜单,它们文字不一定很大但背景是拉伸的,在很宽范围内点击都有效。

image.png

 

39 优化页面加载速度,不要让用户等太久

速度很重要。页面加载速度和UI对操作的响应速度都直接关系到用户是否有耐心继续等下去。无疑地每多一秒种的等待都会失去一些用户或者项目机会。一个好的解决之道当然就是优化你的页面和图片。除此之外还可以运用心理学让这个等待时间显得不那么长。具体来说有两种技巧。一是显示进度条,二是展示其他相关或有趣的东西来吸引用户的注意力(就好比你沿着传送带走走总比傻站在原地盯着一个位置看要好得多吧)。

image.png

40 除了按扭外,快捷键也必不可少

当你的程序广为流传,应该考虑下高级用户的感受。人们总是试图为一些重复性的操作找到更快捷的方法,快捷键就应运而生了。相比在界面上点来点去,快捷键无疑大大提高工作效率。一个好的例子就是现今流行于各个主流程序中的J(后退)K(前进)快捷键组合,比如在Gmail,Twitter和Tumblr中。按钮固然好,但快捷键会锦上添花。

image.png

转载:微信公众号UI设计

日历

链接

个人资料

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

存档