首页

B端产品的设计风格,原来还有这些讲究!

清阳 行业趋势

今天兰亭妙微UI设计公司,来讲解 B 端产品界面的视觉风格,聊聊在整个行业当中视觉风格的变化与目前的现状。以及给大家说说未来应该如何选择自己产品的视觉风格~

我们会将整体分为行业初期,萌芽期、成长期、野蛮发展期、新阶段 ,每一个阶段给大家总结一个最为流行的风格,并分析这个风格出现的原因,方便大家进行理解。

一、行业初期-经典传统风

我们把时间拉回到 2012 年。在那时,Ant Design 还没有出现,也没有什么 Element、Semi Design,行业当中最早的 B 端系统都是以客户端的形式进行呈现。

整体风格也非常老旧,像是那会儿的 Office、SAP、Salesforce,你可以看到都是他们青涩的模样。

在经典传统的设计风格当中,会使用大面积的白色作为底色,同时在页面中用灰色进行分割,使得整个页面散乱抢眼,导致整体的视觉很难被大众所接受,总体感觉信息较散,难以进行聚焦。

而在早期,出现这些老旧风格主要有三个原因:

1.技术框架限制:因为当中成熟的前端框架较少,没有太多技术栈提供给到开发进行使用,因此没有精力将页面做得漂亮

2.认知不足:设计师对于客户端、网页端的设计理解认知本身不够,做得较为粗糙,比如当时的 Office 的界面设计也大致是如此的模样

3.风格一致:早期 Windows 系统就是这样的风格,与 Windows 一致更容易被大众所接受,因此就很难进行创新

关于这类风格的产品,大家不要觉得这夸张,其实在目前依旧有很多产品会延续这个风格。比如 医疗类产品、工业生产类系统,对于他们而言,能用即可,不必纠结太多。

但随着时间的推移,行业中对于 B 端设计的要求也在逐渐变高。

二、萌芽期-清爽整洁风

我们将时间推移到 2015 年前后,随着行业不断发展,在国外 Fiori、Salesforce 的出现让大家意识到,这类型的 B 端产品也是需要设计的。

因此国内外的很多系统都是在这一时间面世,像是 Ant Design 、Element 都相继发布。

由于这些设计系统的诞生,你会发现大家对于整个 B 端设计有了一点自己的想法。

在设计上,会去考虑使用 区块划分,将整个页面进行规整呈现。

比如 SAP 在使用了 Fiori 过后,就会使整个界面更干净。

同样非常老牌的 Salesforce 在2015年的时候。也带来了相当大的视觉变化。整体都能感受到,整个页面会通过不断的分层颜色的划分通过黑白灰的方式去呈现页面当中的基本信息。

三、成长期-沉稳侧黑风

我们的时间来到 2018 年前后,在这个时间节点,很多产品都推出了自己的设计系统,对于 B 端设计风格而言,也会提出更高的要求。

比如 Teambition 产品当中,它们提供了自己的设计系统的内容去指导整个产品来进行迭代和优化。同样 Ant Design它们也推出了自己的 Ant Design Pro 来演示使用设计系统过后,能够搭建出什么样的产品。

同样,这个时段很多产品也开始进行自己产品的视觉优化,这时候整体的风格是以:黑色侧边导航为主,然后内容形态进行延展。

比如像有赞、Coding、微盟、飞书,之前都是这样的设计风格来进行呈现。

你会发现它们在整体的设计上都会更加重视页面的分块颜色的区隔,整体页面的识别效率。同时这段时间爆发出来非常多的 B 端产品,随后国内都会按照侧边黑色导航的样式进行进一步设计,这一定程度上提高了国内 B 端设计的下限~

四、野蛮发展期-新拟态风

我们随后将时间推移到 2019 年后,在这时诞生了新拟态设计风格。

它最早是乌克兰设计师 Alexander Plyuto 在追波和 ins 发布的一副系列作品,随后大家发现非常奇特,所以得到广泛的关注。

新拟态的设计风格是以立体效果与浮雕元素,呈现更为三维立体的效果,会给人一种奇特、梦幻的界面体验。

随后就会有很多产品都开始进行跟进,比如 智能家居的产品、金融类产品都有所涉及,甚至很多B端产品也勇敢尝试,但大多数设计师设计完过后,整体评价都不算太高。

为什么没有大规模的推行,我觉得有 3 点原因:

1.因为新拟态风格整体所占面积较大,比较浪费空间。像是一个按钮,都需要使用较大空间才能呈现。

2.需要大面积的留白,但是对于 B 端设计来说无法做到,因此很难进行使用。

3.同时很多用户刚开始觉得好看,但随着时间的推移,出现审美疲劳,因此就不太喜欢。

现在还会使用新拟态风格的界面设计越来越少,大多数只会在官网设计的局部进行使用,这样可以转换视觉感受,给到用户更好的视觉冲击~

五、新阶段-灰白风

时间来到 2022-2024 年左右,你会发现很多产品都开始在这个时间节点进行更新。

像我们熟知的 飞书、有赞、微盟、ONES、Coding,再到 Ant Design 、Salesforce,你会发现非常多的产品都在进行界面风格上的迭代。

对于这个风格,我们愿意叫它为 灰白风。

整体页面是以 灰色和白色 进行的页面划分,在分布上灰色占据弱侧信息,白色占据核心信息,进而形成对页面内容的划分。

聊到这里,可能有部分同学不太理解,这里我们以飞书管理后台的迭代作为示例,给大家进行讲解。

在 2018年,飞书管理后台的第一个版本,采取的就是沉稳侧黑风,

在 2022 年,飞书的管理后台开始改变为灰白风格

由于业务的叠加,2023 年时,在此基础上增加了顶部导航的业务维度,最终形成了现在这样的界面。

为什么这类型的风格会大受追捧,我觉得有以下几个原因

1.减少信息层级,给用户减负:之前沉稳侧黑风格,会发现页面明显进行大面积的分割,导致视觉感受出现较大差异。现在只用灰色作为底,去区分主副信息这样会更简单的突出主要信息内容。

2.平台型产品更容易嵌入:因为国内 B 端产品大多需要依附“钉钉、企微、飞书”三大平台,因此使用灰白风能够让自己产品快速嵌入,不需要过多调整。如果你的产品是沉稳侧黑风,那结果想都不敢想…

3.更容易进行适配:针对多产品的业务,也能够使用同一套业务完整呈现才会更加合理。比如飞书的灰白风,在飞书的其他很多产品里面也会存在

转载:人人都是产品经理

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

 

image.png

第二波!2026年4月精选实用设计干货合集

清阳 设计资源

兰亭妙微UI设计公司,本次分享主要的工具也都是 AI 相关,有工业和产品 3D 设计 AI 平台 3flow,语音转社交媒体图片的 AI APP,面向 AI 创作者和开发者的在线社区 B150,专业的 AI 图像生成与编辑平台 APImage,Win95 风格 AI 创作者交流社区,以及荣获黑客松大奖的 AI 编程配置的超强 Skill。

 

一、工业和产品 3D 设计 AI 平台 3flow

链接:https://3flow-ai.com/

image.png

 

3Flow AI 是一个面向产品设计的 AI 工具,可以在浏览器里直接使用。它的核心能力是把「想法」快速变成设计图,甚至直接生成 3D 模型,帮助设计师从灵感到初步原型的过程大幅提速。相比传统设计软件,它更偏向创意阶段,让你几秒钟就能看到一个产品雏形。

在功能方面,3Flow AI 是非常突出的,生成速度非常快(几秒内出图)、支持从 2D 图像一键转成 3D 模型、可以对局部设计做修改(比如换材质、颜色),以及自动生成多种设计变体用于对比。整体上,它把「画图 + 建模 + 修改」的流程整合在一个工具里,减少反复切换软件的成本。

image.png

 

image.png

 

3Flow AI 彻底降低了 3D 和工业设计的门槛,你不需要会复杂的 CAD 或 3D 建模,也能快速把想法变成可视化甚至可打印的模型。对于做产品、内容创作或创业的用户来说,它可以显著缩短从创意到验证的时间,让「想一个东西并做出来」变得更容易、更便宜。

二、语音转社交媒体图片的 AI APP

链接:https://thereframe.app/en

image.png

 

Reframe 能将你的语音笔记转换成专业的 Instagram / LinkedIn / Facebook / X 上展示的轮播图,当然这可以发到微博/小红书/小绿书/朋友圈。你只需说出你的想法——AI 会自动构建框架、设计每个幻灯片,并保留你真实的语气。无需任何设计技能。

简单来说,Reframe 是一款专为创作者设计的 AI 社交媒体排版应用,它的核心理念是将用户的「语音」直接转化为具有专业设计感的轮播图和文字贴文,帮助创作者在没有专业团队和设计师的情况下快速制作内容。

image.png

 

Reframe 核心优势是「语音转图文」与「对话式编辑」。你只需录制几十秒的语音表达想法,内置 AI 就会自动编写出高吸引力的文案,并生成带排版的轮播图草稿。你可以通过与 AI 聊天来微调文字内容,还能自由套用精美的预设模板、修改字体和颜色,最后支持一键导出为图片或 PDF。

Reframe 极大降低了内容创作的门槛与时间成本,无论是在通勤路上还是灵光一现时,只需动动嘴就能把零碎的灵感瞬间变成高质量的社交传播素材。它完美解救了不擅长写文案和做排版的新手,让每个人都能轻松像专业博主一样高效产出爆款图文,提升个人影响力。

三、面向 AI 创作者和开发者的在线社区

链接:https://b150.ai/

 

B150 是一款专为 AI 开发者、创作者和创业者打造的「专业社交网络」与社区平台。它致力于成为那些利用 AI 技术进行编程、设计、影视制作、游戏开发等领域的「实干家」们的聚集地,帮助他们将大胆的想法转化为真实落地的项目。

B150 提供了以项目为驱动的在线社交体验,AI 创作者不仅可以在信息流中展示自己的作品、获取早期种子用户和真实的反馈,还能在这里寻找志同道合的合作者。此外,它集成了 AI 工具及资源探索、AI 人才与工作机会招聘看板,以及专属的工具折扣市场,全方位覆盖从产品构思到发布落地的各种需求。

第二波!2026年4月精选实用设计干货合集

对于普通的 AI 爱好者和创作者而言,B150 提供了一个高浓度的专业学习和互助圈层。它打破了传统社交媒体的杂音,让你能专注于看别人是如何利用最新的 AI 工具来解决实际问题的。不仅能帮你少走弯路,还能让你在发布自己的「副业」或项目时,快速找到第一批支持者,真正将「想法」变成「事业」。

四、专业的 AI 图像生成与编辑平台 APImage

链接:https://apimage.org/

 

APImage 是一款专业的 AI 图像生成与编辑平台,专为电商团队、企业和创作者打造。它能够将简单的文字提示迅速转化为高质量、可直接用于商业生产的视觉素材,如产品展示图、生活方式插图或品牌创意海报,只需几秒钟即可完成。

APImage 的核心优势在于强大的「视觉一致性控制」及全面的编辑工具,不仅具备文本生图、一键抠图和局部重绘功能,最亮眼的是允许用户建立专属资产库。这意味着您可以在不同场景中反复生成拥有完全相同人物面孔、产品细节或特定背景的图片。此外,它还支持 API 接入和各类自动化工作流整合。

image.png

image.png

image.png

 

对普通用户、电商小卖家和自媒体人而言,APImage 彻底打破了专业摄影和设计的门槛。无需租借影棚或聘请专业模特,仅靠打字就能稳定地产出成套的、风格统一的高端商业大片,并且它就是为这样的场景而创造的。APImage 解决了传统 AI 绘图「每次结果都随机、难以连贯」的痛点,让个人也能轻松拥有专业级的视觉生产力。

五、Win95 风格 AI 创作者交流社区

链接:https://www.ideaboard95.com/

image.png

 

IdeaBoard95 是一款主打复古风格的公开创意灵感看板网站。它的界面被精心设计成了经典的 Windows 95 操作系统风格,为独立开发者、创作者和普通用户提供了一个展示产品想法、寻找灵感以及进行社区交流的公共空间。

image.png

 

IdeaBoard95 将复古视觉与极简交互结合,用户可以使用 Google 账号快捷登录,在看板上发布有关 App、网站或 AI 的产品点子,也可以为别人的好主意点赞投票。尽管外表怀旧,但它底层具备优秀的现代用户体验,在电脑和手机端都能清晰浏览,并支持通过标签快速筛选感兴趣的内容。

IdeaBoard95 提供了一个轻量化、充满趣味的「想法展示区」,它避免了零散的灵感在复杂的笔记工具中吃灰,并用这种没有压力的怀旧方式降低了分享的门槛。这让每个人都能轻松地把脑海中的奇思妙想贴在「公屏」上,纯粹地碰撞思维火花并验证点子的可行性。

六、荣获黑客松大奖的 AI 编程配置 Skill

链接:https://github.com/affaan-m/everything-claude-code

image.png

 

Everything Claude Code 是由 Anthropic 黑客松获胜者开源的一款极具人气的 AI 编程配置库。它并非独立软件,而是专为 Claude Code、Cursor 等 AI 智能体打造的「性能增强与工具扩展包」。

这个 Skill 提供了一套开箱即用的精密架构,内置了大量专家级的 Agents、按需加载的 Skills 以及自动化规则。它全面支持多语言环境,并具备记忆持久化、持续学习和安全审查等高级功能。这些配置能有效优化大模型的 Token 消耗,让 AI 像资深工程师一样精准拆解并自主执行复杂任务。

哪怕你是纯粹的新手小白,你也可以轻松使用它,因为它彻底免去了耗时费力的「AI 调教」过程。只需简单引入这套经过实战检验的配置,就能让原本基础的 AI 助手瞬间掌握数百种专业开发技能。它极大地降低了高效开发的门槛,让没有深厚技术积累的人,也能以几倍的速度搭建出高质量的应用程序。

转载:优设

 

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

 

image.png

如何从用户场景中洞察用户需求?兰亭妙微UI设计公司

清阳 用户研究

在用户研究中,不知道你是否会有“不知道该如何获取用户需求”的情况,应该如何提问、如何设计提纲?是直接问用户需要什么吗?是直接问用户对我们的现有方案有什么痛点吗?是直接问用户新方案好不好吗?如何从用户场景中洞察用户需求?将会为大家讲解用户研究中的万能钥匙:用户场景。

如何获取用户场景、如何通过用户场景洞察需求、如何将用户需求应用到产品/服务设计中,希望给大家带来一些启发~

 

一、为什么要到用户场景中去?

首先,链接用户需求和产品/服务设计的关键是“用户价值和产品价值”,即通过准确的”用户希望通过产品/服务实现的价值诉求”建立正确的“产品/服务自身想提供给用户的价值主张”,产品/服务的一系列设计都是基于该价值主张开展,这样的设计才是在各方面都满足用户需求的。

但是,用户希望通过产品/服务实现的价值诉求并不是他能直接告诉我们的,尤其是在比较创新性、系统性的设计中,用户直接表达的想要 XX 不一定是真实需求、而是假想的解决方案,

比如用户常在调研中说“你这个按钮再大一些”,我们可以无限制的放大按钮吗?用户为什么希望更大一些?实际上的点击场景是怎样的?也许当我们进一步还原场景会发现除了放大按钮,给按钮换颜色、挪位置、固定区域都是可以的解决方案。

当我们洞察用户背后更深层次的原因和诉求时,“用户场景”就是最关键的介质:

  1. 用户场景是最容易获取的、承载用户诉求的表象内容,在研究过程中能通过很多研究方法直观获得,通过用户场景我们能获取用户的行为习惯、消费特征、决策偏好等丰富的内容;
  2. 产品方案设计的本质也是重新设计用户的场景,是基于现有场景中的痛点和期待进行场景再造,因此回到用户现有场景中就很关键。

image.png

 

二、什么是用户场景?

先来看一段访谈对话~

Q:您周末的时候一般做什么事情?

A:我一般都在家里陪陪女儿和儿子。

Q:您能帮我们回忆下周末都会陪女儿和儿子做什么事情吗?

A:一般我都会在周末给他们准备早午饭,还会做一些烘焙。

上面是我们要获得的用户场景吗?并不是,我们需要的场景是:有丰富的细节、有生动的画面感、有强烈的代入感的“还原性场景”,需要包括空间、时间 、人物、行为,像下面这种:

Q:您和孩子共享早午饭的时候是什么样子呢?可以具体的描述一下当时的场景、越细致越好。

A:我家的厨房在一楼,一般都是西厨用的比较多,我起来之后会做一些西餐,牛奶、三明治,我喜欢边做饭的时候边听音乐,享受其中。我女儿很喜欢“有仪式感”的早餐,所以每次我都在我家的吧台铺上一条桌布,把食物精致的摆在盘子里,还会放一束花,在楼上呼唤楼上“亲爱的公主,下来用餐啦”,孩子就坐在高脚凳上有说有笑的吃,我还把每次做的饭都拍了照片单独存了相册(随后与我们分享了手机里的照片,网红早餐)

该场景是在地产项目中常见的空间使用场景,在不同的项目类型中我们所关注的场景类型也有所差异,一般可以区分为通用的生活场景和与该产品/服务强相关的场景,其中后者需要重点关注:

  1. 生活场景:一般通过用户《典型的一天》去了解家庭场景、独处场景、社交休闲场景、工作场景、消费场景等;
  2. 产品/服务场景:包括用户购买时的决策场景和操作产品/接受服务的使用场景,具体研究的场景与项目类型有关。

image.png

三、如何获取用户场景?

可以通过深度访谈、陪同访问、观察法等多种方法结合获取用户场景:

1. 深度访谈

通过与受访者一对一面谈的形式,深入了解用户的购买行为及逻辑、产品关注点及需求、产品使用场景等信息。

该方法有充足的时间与用户深入交流,是最常用的方法,但该方法多是用户通过回忆回答问题,会带有一定主观性,这时候就可以结合另外两种方法进行;

2. 陪同访问

在购买或实际使用阶段陪同用户进行,真实还原场景,直接观察用户的行为、情绪、与各触点的接触状态等,结束后及时进行补问,了解其行为动因、消费、使用体验感知等。比如跟随用户前往售楼处参与决策过程、让用户共享手机屏幕参与在电商平台的挑选过程。

该方法能避免用户回忆、在实际场景中了解用户最直观、真实的反应,在用户和产品/服务接触场景中需要尽量减少打扰、观察和记录问题,在该阶段结束后再进行访谈。

3. 观察法

通过在家中看、听、亲身体验等行为找出现象作为确证,深入揭示客户生活场景及产品使用习惯。比如观察用户家中厨房的布局、家电,询问为什么买这些家电、一般哪些场景下用、为什么放在该位置、如何布局的动线等。

该方法更发挥研究员的主动性,需要在观察中抓到关键信息(如此次研究重点关注的、该用户与众不同的信息等)去进行挖掘。

在应用以上方法获取场景时,还需要关注访谈提纲的设计和工具的使用:

访谈提纲是按照一定顺序去获得场景,多采用“总分总”的结构:1)总-先整体回忆,不用描述细节,对整个过程有大致的了解,并记录被访者重点说的内容;2)分-每个环节详细说,重视被访者反复说的内容;3)总-对所有提到的内容进行总结、补充、评价;

其中“分”里的场景顺序,根据项目类型可以:

  1. 以流程为序:有明显先后发生顺序的场景,如购买场景(产生动机-获取信息-筛选信息-现场选择-对比-决定…)、看房场景(售楼处-沙盘讲解-园区介绍-样板间看房-签约…),可结合《顾客旅程图》《决策旅程图》工具使用;
  2. 以空间变换为序:和空间有较强关系的研究,可以空间为序,如地产项目需获取的场景(卧室、厨房、客厅、卫生间、园区、周边),可结合《户型图》《场景卡片》工具使用;
  3. 以时间为序:对于生活形态、日常行为相关的生活场景研究,可以时间为序,如工作日和非工作日一天的轨迹(从起床到睡觉,什么时间去了哪里发生了什么…),可结合《典型的一天》工具使用;

对于较难描述的价值场景,可以通过示卡测试、情景假设、朋友圈探究的方式去激发用户讲述:

①示卡测试:主要包含关键词测试与图片测试两种方法,在撰写提纲时我们针对需要挖掘的价值场景提前准备示卡,在访谈时提出问题、出示卡片,让用户选择、并通过案例或场景描述解释为什么这样选择:

image.png

②情景假设:提出假设性问题,留给受访者畅想的空间,鼓励受访者放飞想象

如用情景假设的方法挖掘客户的理想度假状态:

Q 抛开现实条件的束缚,如果给你两天时间,您最理想的度假地点是哪里?你会怎么度过呢?请您畅想一下。

Q 如果给您两周时间呢?

③朋友圈探究:通过浏览用户朋友圈,观察日常分享行为,以便更深入的了解用户,总结其价值观、在意点、需求取向等。比如是乐于分享的、关注热点的、喜欢未知爱探索的等等。

四、如何洞察场景中的用户需求?

在洞察场景时,首先需要对用户群体进行分类,这里的群体分类要依据用户对产品/服务/功能的使用差异进行区分,比如文旅地产开发项目中,我们结合用户的生命周期和置业目的,可以区分为养老一族、家庭度假、享乐度假、投资客,地产公司实际在开发产品(含户型/配套/服务的产品大概念)时也会考虑针对的主要群体,因此需要把同一类用户的场景放在一起分析。

image.png

接下来的场景洞察也以该文旅地产开发项目为例:

1. 场景分类形成典型场景库

从用户访谈小结中抽取该类用户的所有场景进行整合分类,结合地产维度可以为购房场景、居住场景、物业交流场景、社区交流场景等。

image.png

2. 分解场景关键内容洞察需求,以下图的场景为例

首先标注场景关键内容,对场景中人、时间、地点、行为、互动、情绪感受、喜好偏好等内容标注;

其次分析背后原因,将自己代入角色中,分析这样做的原因是什么,反映了具体什么人物特点;

再是去除具象标签,将与个人相关的具体内容去掉,转化为更高级别的需求;

image.png

3. 需求进一步提炼核心诉求

从场景中洞察的需求有时候会偏零散的,无法一步形成系统化建议,如果说场景是冰面以上的东西、需求是冰面以下的东西,那诉求是深海中的、是比需求更深层次的洞察,更有利于总结用户的共性需要,将其作为设计原则、进行系统化设计和建议的提供。

image.png

看一些具体的需求-诉求的提炼案例,会发现这些诉求都可以作为产品/服务的设计原则,再应用到不同方面的具体设计中,比如户型的、配套的、物业服务的、社区活动的等等:

image.png

写在最后

米兰·昆德拉说过:“无意义是生活的常态,但我们要试着去挖掘它,并且努力爱上它”,对于用户场景的研究也是如此,看似没什么特别的场景,其实隐藏了很多细节、用户诉求的体现,通过对已有场景的洞察和研究,设计出更符合用户需求和期望的新场景,希望我们都能在用户场景中开出花~

转载:优设

 

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

 

image.png

B端表单设计|标题样式细节设计

清阳 设计思维

B端系统软件中表单的应用场景非常多,今天兰亭妙微UI设计公司,就捞点干货,说说B端产品表单如何设计,用户体验会更好。

从标题、输入框、布局排版、数据展示四个方面,详细介绍一下关于表单的体验设计,目录如下:

一、标签是否加冒号

设计师A说:不加冒号,用户不在意,而且占空间…..

设计师B说:要加冒号,加上可以更好的区分上下文,以及标签和输入框的关系…..

以上A/B设计师说的都有一定的道理,那到底加不加冒号呢?

遇到问题咱就先调研一波,看一下Win、Mac系统中是否有无冒号。

Win系统:最新版本不加冒号。

Mac系统:最新版本设计偏向C端化,不加冒号,13.0.1之前版本有冒号。

是不是感觉主流的设计是不加冒号呀?

稍等一下…那在具体B端系统中是有怎样的应用场景呢?

以上场景中左右布局,单选/多选组件、标题加内容组件都不适合去掉冒号展示。

那到底加不加冒号呢?

可以先说一下答案,加不加冒号对用户无影响,《Web 表单设计·创建高可用性的网页表单》中,卡罗琳·贾雷特做过大量测试,最终证明没有一名用户留意表单冒号是否出现。

因此,得出以下建议:

  • 如果你希望系统重表单使用更多的业务场景和对齐方式,请使用冒号
  • 如果你当前已使用有冒号的表单,请保持使用冒号

如果你新建一个系统,使不使用冒号随意一旦决定是否使用冒号,需要全部表单统一规则  

二、表单必填样式

用户填写表单时,有必填项和选填项,如果表单中多数或全部是必填项,那是否还应该对其标记?

答案是肯定的,用户遇到较多表单填写项时,是需要通过必填标记来评估工作量。下面就介绍一下具体标记必填项的三种样式。

① 顶部统一提示

填写表单过长或填写表单被打断(移动端常见),就会增加用户工作记忆和认知负荷,完成任务更加困难,从而降低了用户体验。

② 文字提示“必填”

有部分设计师认为红色“*”会增加视觉噪音,并且重复的红色“*”会带来一些认知恐慌,便采用文字提示方式,但这种方式比较占用空间,文字内容过长,用户压力较大,用户体验降低,不建议使用。

③ 红色星号“*”必填提示

虽然有设计师认为红色“*”会增加视觉噪声,带来一些认知恐慌,但红色“*”在互联网中很常见,用户熟知其意,已形成固定的视觉语言,并且空间较小,能与标签文字足够区分开,相比之下采用红色“*”必填提示是非常值得推荐使用。

但是还有一个问题,就是红色“*”的位置是在字段前还是字段后呢?

红色“*”的具体位置有三种位置,如上图做了详细展示。

  1. 标题左侧:比较常见,用户打眼一看就能区分出必填项,推荐使用;
  2. 标题右侧:比较常见,多配合无号码使用;
  3. 输入框右侧:现有系统较少使用,由于输入框形式、长度不统一,会导致难以浏览和判断,不推荐。是否可标记可选字段?

这不是强制性的,但标记可选字段非必填,确实减轻了用户思考,提升用户体验。  

三、提示样式

用户最理想阅读的标题文字数是7±2,当标题文字过长,或不足对输入项准确说明时,要给出对应的提示文字,帮助用户更好的输入内容,常见样式如下。

这三种样式是递进逻辑,根据不同的文字提示内容和难度,选择不同的提示样式。其中对于第二种样式中,图标提示的位置还有几种方式,如下图说明。

四、小结

本文事无巨细的说了一下表单中标题样式问题,虽然很多是表单设计的一些较冷较小的内容,但也需要设计师沉下心来,打磨细节之处。

转载:人人都是产品经理

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

 

image.png

浅谈透视:从纸面到界面

清阳 设计资源

兰亭妙微UI设计公司与大家一起学习,人类的美术创作经历了从纸面的二维走向三维、从“模仿自然”到遵从主观意识自由表达的历程,人机界面设计也经历了拟物、扁平以及更多的设计风格的迭代演化。是什么推动着艺术家和设计师们不断探索规则、学习规则,进而挑战规则?在拆解手脚架的过程中,我们将愈加贴近创作的本质。

 

从平面到三维:几何透视的建立
人类最早开始美术创作之时,没有“透视”的概念。
在古埃及的绘画作品中,我们看到的通常是和肉眼看到不一样的人体,侧面的头、正面的身体和侧面的脚,这种绘画方式被后世定义为“正面律”。之所以会出现这样统一而怪异的绘画方式,是因为古埃及艺术大多服务于权力和宗教,绘画常用于墓葬之中。那时的人们相信灵魂永生,亡灵在通过冥界的考验之后会重新与身体结合从而转世,这就要求绘画精准记录人体各个部分的样貌。画家为每个部位挑选最能呈现它完整特征的角度,用这个角度将这部分人体完整地呈现在平面上,这有利于转世时的复刻。

image.png

▲ 图 1 : 古埃及《亡灵书》
这时,画家作画不依赖于真实世界的观察,而是画他们脑中“知道”而不是眼睛“看到”的形象。
到了古希腊和古罗马时期,绘画作品开始转向遵从视觉规律。
有一种说法是:透视法的初步探索起源于古希腊的戏剧布景,艺术家们发现在布景中用近大远小的方式可以使平面布景有真实场景的纵深感。
同时,当时的社会思想环境也是滋养透视法探索的肥沃土壤。亚里士多德提出艺术是一种「制作的知识和技能」,于是人们将艺术与制造技术等同,开始了符合实际的数理研究。苏格拉底和柏拉图认为绘画和雕塑之类的艺术是「对自然的模仿」,绘画作品的表现力求于自然一致。
希腊红绘陶瓶《辞行出征的勇者》中出现了人物一正一侧的脚,正面脚的刻画相对侧面脚要缩短了许多。这种在画面中将纵向物体以适当的比例缩短,以符合实际视觉效果的方式,叫做“短缩法”。至此,意味着绘画中空间透视的雏形已经产生。

image.png

▲ 图 2 : 希腊红绘陶瓶《辞行出征的勇者》
然而历史进行到中世纪,绘画的透视技法似乎出现了倒车现象。在中世纪的一些壁画中,存在变形的物品、拉长的身体和不平的地面。
这是因为中世纪的艺术服务于宗教神权,本质上是宗教体验而不是人的真实体验,所以中世纪早期的绘画常常是重要的神最大,其他人物逐渐缩小。与此同时,由于宗教需要广泛而快速的传播,扁平、模版化、忽略细节的绘画就更加快速易得。透视法和现实主义在中世纪是与画家的创作目的相违背的,画家也就没有了继续探索如何还原真实世界的动力,这与古埃及艺术相似。
中世纪后开始文艺复兴,社会开始恢复古希腊人本主义、崇尚自然科学,而艺术则重新开始遵从科学的、真实的世界。
乔托师承中世纪画家契马布埃,却不愿临摹老师的作品,他更喜欢观察身边的世界、描绘真实的自然。宗教画从乔托开始出现对透视的探索,比较 3 幅圣母图可以看出,乔托《宝座上的圣母》明显更具有立体空间效果。画中的人物用重叠关系来表示远近,宝座的线条走向也具有透视的效果。

image.png

▲ 图 3 : 左:契马布埃《圣母》,中:杜乔《圣母》,右:乔托《圣母》
而如今广泛使用的几何透视法,它的正式发明要归功于意大利建筑师布鲁内莱斯基。布鲁内莱斯基一手持洗礼堂的素描稿,一手持镜子,透过小孔比对镜子中自己的素描图与真实建筑,从而确定自己稿中的透视关系是否正确。
布鲁内莱斯基指导他的朋友马萨乔完成的《圣三位一体》教堂壁画。这幅画巧妙运用了一点透视原理,将画面的消失点与站在壁画前观看者的视平线重合,视觉得以向画面更深处拓展。观看者驻足观赏,会感到面前不是一面墙,而是一个逼真深邃的空间。

image.png

▲ 图 4 : 马萨乔《圣三位一体》
从此之后,文艺复兴的画家们开始不断地运用并优化绘画的透视法。达芬奇在几何线性透视的基础上,进而提出了隐没透视和空气透视。隐没透视与物体的清晰度有关,越远的物体,明度和清晰度越低,看上去会越模糊。空气透视与色彩有关,因为有色物体的光线通过空气介质传到人类的眼睛,那么越近的物体色彩的饱和度就越高,对比度也更强烈。相反较远的物体色相就会越来越模糊,饱和度和对比度都会减弱,并且因为天空环境色的影响,色调上会偏向青蓝紫等冷灰色调。达芬奇的画作《岩间圣母》和《蒙娜丽莎》都可以看到,远景轮廓模糊且偏向于蓝灰色调,让观赏者仿佛能感受到画中的空气和环境的纵深。

image.png

▲ 图 5 : 左:达芬奇《岩间圣母》,右:达芬奇《蒙娜丽莎》
文艺复兴时期学院派画家们格外强调透视,精准的透视关系让写实主义达到了巅峰。自此,艺术家们拥有了将三维世界搬运到二维纸面的方法,艺术模仿自然的理想得以实现。
2
从理性到感性:反常规透视的兴起
时间进行到十七世纪,社会的思想开始发生转变。笛卡尔「我思故我在」、黑格尔「美是理念的感性显现」观点的提出开启了人们对客观世界以外的自我意识的关注,艺术家们开始转向表达真实世界的客观存在加上精神世界的感受。
十九世纪工业革命带来了生产方式的巨大变革,文学艺术的革新也应运而生。一批年轻的艺术家开始质疑古典主义单纯复刻自然的千篇一律,尝试以自己的感受出发去描绘世界,例如印象派代表作大多突出对色光和空气氛围的描绘而弱化形象的描绘。
后印象派艺术家塞尚,质疑谨遵透视法的画作并不是人类双眼真实所看见的,被认为是“第一位用双眼作画的艺术家”。
塞尚主张人们观察世界万物时,使用两只眼睛看到的画面是不同的,只是最终人脑将二者合二为一成为了一幅画。另一方面,人们看一个物品通常不会静止不动地观察它,而是左右转转或是伸出头去细细观察,不断变换动作去寻找合适的观察角度。那么,单一静止的视角作画就违背了生活中人们观察世界的真实感受。
塞尚的多幅静物作品都有类似的特征,例如水罐的身体部分是平视的角度,而罐口则是俯视时的样子。塞尚认为,这两个角度分别是观察这两部分最合适的角度。又例如塞尚作品的桌面通常不符合水平面的透视,看起来已经倾斜到桌上的物品快要掉下来。塞尚认为这样更适合于展示桌面上所有物品的全貌,他期望将画中物体的信息最大化传递给观众。这一表达方式也意味着绘画创作由模仿自然转向艺术家主观意识下世界的的样貌。

image.png

▲ 图 6 : 塞尚《有苹果和桃子的静物》
塞尚作为传统透视法的学习者与挑战者,在前人建立的理性透视世界中打破秩序、更加遵从主观视觉感受,倡导多视角和整体视觉信息传达最大化,成为从现实主义、印象派迈向立体主义和抽象派的桥梁。
其后立体主义、抽象主义和超现实主义的艺术家们都受到塞尚主张的深远影响。像是毕加索《三个舞者》中那不成比例的巨大手掌,正是反映了舞者舞动的双手吸引人们目光的真实感受。而达利《十字架上的圣约翰基督》中同时存在“两点透视的人间海滩“和“三点透视的基督”,画家想要传达观者身处人间的平视感受,和超越神明高度去俯视基督独特角度。

image.png

▲ 图 7 : 左:毕加索《三个舞者》,右:达利《十字架上的圣约翰基督》
而后到了抽象主义,最后一点「模仿自然」从历史舞台中退出,绘画变为艺术家用色彩和符号表达意识的自由创作。
有人评价塞尚是“带着枷锁艰难探索着自然、世界和艺术本身”。自他之后,艺术创作从“真实地再现自然”进阶到“无需再现自然,而是代表自然”,艺术家们开始追求更加符合心理观察的视觉效果。
3
从纸面到界面:ui 设计风格的变革
不止在纸面,透视在人机界面中也经历过一系列发展与变革。早期计算机的界面设计受制于当时的屏幕分辨率,只能使用一些扁平化的界面和和图标。
屏幕显示技术快速发展后,留给设计的发挥空间也变大。苹果在 iOS 6 推出拟物风格的界面设计,模拟现实世界物品的纹理、阴影、高光等,致力于复刻现实世界的透视体验。这一设计风格大大降低了使用者的学习成本,精美的视觉表现也风靡一时。
随着电子产品承载信息的需求越来越大、更新速度越来越快,人们对于界面中仿物理世界的装饰元素开始有所质疑。首先是精美繁复的拟物化设计过于吸引眼球,使得用户的视觉焦点变得分散,不能专注于信息的传达。其次是细节满满的拟物化设计风格成本过高,应对高速发展的互联网需要一个更加高效简洁的设计风格。2013 年苹果发布的 iOS 7 系统使用了全新的扁平化设计,去掉了纹理、阴影等 3D 元素,达到信息优先、效率优先的目的。

image.png

▲ 图 8 : 左:iOS 7 界面,右:iOS 6 界面
在不久之后的 2014 年,Google 发布的 Material Design 借鉴了纸张和墨水,在完全抽象扁平的基础上增加了灯光、投影、加速度等隐喻元素,让界面一定程度上模拟物理世界的纸张。Material Design 中最特色的 z 轴设计规范,在扁平化的界面里创造了立体空间,从而将界面分出不同层级。在 z 轴的空间中,主要通过投影来表达不同元素之间的相对位置,通过相对位置拉开平面与卡片、弹窗和不同级别按钮之间的层次,增强了界面的可读性,让用户对内容的划分一目了然。

image.png

▲ 图 9 : Google Material Design
每一种设计风格的诞生和发展常与社会、思潮、技术的发展密不可分。而现下的界面设计更多展现出拟物、扁平以及不同程度融合的方式。
例如现有相机 app 的界面设计,就有极致拟物和极致扁平两种方向。当下流行的一些仿胶片、拍立得等实体相机拍照效果的 app,采用了模拟真实相机的拟物化界面设计。极致仿真纹理、光影,甚至操作的震动反馈和模拟拍立得和胶片机延迟出片的效果,都致力于给用户使用真实相机的体验。这类 app 通常功能比较简单,界面不需要容纳大量的信息和操作,所以采用拟物化的设计并无不妥。而拟物元素的运用也恰好满足了此类用户想要模拟使用机械相机的情感需求。
正与之相反的是我们日常更频繁使用的手机原生相机,这些 app 使用几乎全扁平的界面设计,无任何非必要元素的干扰。这类相机 app 的应用场景通常是日常快速拍照记录,或是相对更依赖参数调整的拍摄黑暗环境、灯光复杂环境等等场景。这时就需要一个能承载更多信息和操作、简洁易懂的界面,那么扁平的设计是这类场景最适合的方式。

image.png

▲ 图 10 : 上:Nomo CAM ,下:iOS 相机
拟物、扁平以及更多的设计风格,应社会、思想、技术的发展而生,各有优劣、各司其职。在追求效率、信息之上的场景,扁平无疑给繁杂的信息腾出了空间和人力成本;而拟物的设计则带给用户更丰富的情感体验。交互界面的边界和可能性,是更加包容和多样化的。如同绘画风格的发展历程,技法和风格在发展成熟后,灵活的组合选用和主观感性的调整让创作和设计更灵动出彩。
4
写在最后
从纸面到界面、再到三维透视的物理世界,古往今来的艺术家和设计师们不断探索规则、学习规则,然后开始挑战规则、变革规则。透视法仅仅是众多绘画技法中的一种,它们是给予帮助的工具而非束住手脚的重重障碍。
如果说绘画技法和设计风格是建筑高楼的手脚架,那么我们在依赖它将基础结构完工后,就应当抛弃手脚架,开始因地制宜的设计或是遵从感官的创作。创作应当是赏心悦目的、信手捏来的,手中的工具越多,施展起来应会更加自信和自由。
转载:WeDesign

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

 

image.png

让打开率翻倍!兰亭妙微UI设计公司,4 个章节掌握通知体验设计

清阳 用户研究

通知的本质是价值传递而非注意力争抢。设计得当的通知能成为高效贴心的工具,滥用则会沦为干扰噪声,引发用户 “通知疲劳”。兰亭妙微UI设计公司从认知、分级、实践、衡量四个维度,系统讲解如何打造高打开率、低反感度的通知体验。

 

一、理解通知的双面性:先分清反馈类型

image.png

通知的核心初衷是主动触达用户,提醒重要且未被察觉的事件,为用户提供便利。但在设计前,必须先明确:并非所有系统状态反馈都属于通知。
 
根据尼尔森诺曼集团的定义,系统状态反馈分为三类,适用场景完全不同:
 
  1. 确认(Validation):关联特定情境,需用户操作后触发,必须处理
  2. 通知(Notifications):全局或关联特定情境,系统触发,可操作或自动消失
  3. 指示 / 提示(Indicators):关联特定情境,自动显示,无需用户干预
 
选择反馈类型的核心依据:信息类型、紧急程度、是否需要用户行动。用强通知承载轻量信息,会浪费用户注意力,稀释重要通知的价值。
 

通知的基础分类

 
  • 按触达范围
    • 应用内通知:弹窗、信息卡片、红点,在界面内展示
    • 应用外通知:推送、短信、邮件、小组件,跨设备触达
     
  • 按内容性质
    • 信息性通知:日程提醒、新闻、状态更新,仅传递信息
    • 行动导向通知:支付确认、好友申请、系统更新,引导用户操作
     
 

 

二、通知的设计依据:按关注度分级

image.png

通知体验的核心是分级匹配,根据用户所需关注度,分为高、中、低三个等级,对应不同呈现形式。
 

1. 高关注度通知(需立即响应)

 
  • 类型:安全警报、错误提示、异常故障、关键操作确认(删除 / 购买 / 覆盖)
  • 特征:紧急、需立即处理、涉及风险或核心功能
  • 呈现:弹窗确认、强提示、阻断式交互
 

2. 中关注度通知(需知晓,无需立即处理)

 
  • 类型:警告提示、操作反馈、成功消息、常规提醒
  • 特征:非紧急、辅助用户了解状态、不阻断操作
  • 呈现:信息条、轻量提示、页面说明
 

3. 低关注度通知(仅需知晓,无行动压力)

image.png

  • 类型:普通信息、红点提示、状态指示、空状态说明
  • 特征:无时效性、不打扰、轻量化展示
  • 呈现:角标、文字提示、静态状态展示
 
核心原则:通知的相关性、重要性、时效性越强,用户响应概率越高,精准分级是实现这一目标的基础。
 

 

三、通知体验设计实践:4 个可落地方法

 

1. 新用户初期:少而稳,避免信息轰炸

image.png
新用户注册后立即推送海量通知,是导致流失的核心原因。
 
  • 策略:新用户默认低频率通知,给用户探索产品的空间
  • 依据:Facebook 研究证实,减少通知量可提升满意度与长期使用率,短期流量下滑后,参与度会反超
  • 做法:允许用户后期自主调整频率,渐进式优化通知数量
 

2. 全用户周期:开放个性化管理,赋予控制权

 
用户抵触通知的核心是被动接收,赋予自主权可大幅降低反感。

image.png

  • 自主设置:允许用户按关系、重要性划分通知优先级
  • 内容脱敏:参考 Android 设计,将锁屏通知分为公开 / 不公开 / 私密,保护隐私
  • 预设模式:提供勿扰、工作、睡眠等快捷模式,降低设置成本
  • 打包推送:将零散通知合并为摘要,按用户指定时间统一发送
  • 智能适配:参考 Slack,根据频道活跃度、用户行为自动调整通知级别
 

3. 新用户引导:把通知设置纳入上手流程

image.png

将通知选择权前置,减少后续用户手动调整成本。
 
  • 示例:Basecamp 提供 “24 小时接收”“仅工作时段接收” 选项
  • 做法:主动询问用户静音时段,支持自定义屏蔽夜间、周末、节假日通知
  • 价值:适配全球化协作场景,避免跨时区打扰
 

4. 核心逻辑:在正确时间,给正确用户发正确内容

 
解决两大核心问题:信息相关、避免过载
 
  • 场景化推送:新用户功能引导、实时状态推送(外卖 / 赛事 / 物流)
  • 分层提示:参考 Grammarly,用红点 + 分步提示降低认知压力
  • 智能适配:用户专注、旅行、低活跃时,自动降低推送频率
  • 渠道切换:高频通知从推送转为邮件摘要,平衡触达与侵入性
 

 

四、衡量通知有效性:4 个核心指标

 
通知策略需数据验证,重点跟踪以下指标:
 
  1. 打开率:反映内容相关性与推送时机
  2. 转化率:衡量行动导向通知的引导效果
  3. 屏蔽 / 退出率:直接体现通知过载或不相关程度
  4. 参与度提升:对比接收与未接收通知用户的产品活跃度
  5. 行动时间:警报类通知需快速响应,体现紧急性匹配度

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

 

image.png

移动端表格设计:5 个实用解法,彻底解决小屏数据展示难题,兰亭妙微UI设计公司

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

在 B 端移动端设计里,表格适配一直是公认的难点:表格天生依赖横向空间,而手机以竖屏为主、以阅读为核心场景,编辑与复杂操作受限,直接照搬 PC 端表格必然水土不服。
先明确核心前提:做移动端表格前,先判断非做不可吗?复杂配置类功能,可直接引导用户跳转 PC 后台处理(如飞书移动端限制表格横屏编辑),避免强行在小屏做冗余功能。
结合销售外出查看 CRM 客户数据、拨号、查地址的真实业务场景,把设计思路分为保守派(保留表格形态)和激进派(重构展示形式),兰亭妙微UI设计公司,分享 5 个落地性极强的解决方案。

image.png


一、保守派:保留表格形态,轻量化适配

1. 横竖屏一键切换

image.png

针对表格横向信息过多的问题,放弃体验差的重力感应切换,在表格区域设置悬浮切换入口,用户点击即可一键横屏,快速总览完整数据。

image.png

  • 优势:实现成本低,可全局复用,适配纯阅读场景
  • 局限:仅支持查看,无法做数据编辑、批量操作

2. 固定表头 + 滚动指示灯

竖屏展示表格,针对性解决三大阅读痛点:

image.png

  1. 数据对应混乱:冻结首列表头,横向滚动时始终可见关键字段
  2. 屏效过低:适度缩小字体,提升信息密度
  3. 滚动无预期:添加滚动指示灯,清晰提示当前查看进度
  • 核心:像给表格加了可视化滚动条,降低阅读认知成本

二、激进派:重构展示形式,贴合移动端习惯

3. 关键字段收折展示

image.png

简化表格,只外露3-4 个核心字段,其余信息折叠隐藏,点击展开查看完整内容。
  • 选字规则:通过「重要度 + 字段长度」十字分析,优先选短文本、高优先级字段
  • 适用场景:字段数量适中,用户需快速识别数据的场景

4. 卡片式列表呈现

image.png

在收折基础上升级,用卡片规整信息,外露高频操作按钮(如客户列表的拨号键),兼顾信息展示与操作效率。
  • 优势:符合移动端视觉习惯,操作路径更短,是 B 端移动端最常用方案
  • 适配场景:外勤人员快速查看、一键操作的业务(如销售、配送)

5. 全信息详情卡片

image.png

强化卡片展示能力,单张卡片完整承载所有数据,无需再跳转二级详情页,一站式完成信息查看与操作。
  • 优势:信息一站式展示,减少页面跳转,大幅提升操作效率
  • 典型场景:配送员订单、外卖详情、销售客户速览等高频轻操作场景

最后:移动端表格的设计边界

设计时要明确功能边界:移动端优先满足阅读、筛选、快捷操作,复杂编辑、配置、批量处理等需求,果断引导至 PC 端完成。
没有完美的方案,只有贴合业务的选择 —— 先抓用户核心诉求,再选适配的展示形式,才是移动端表格设计的核心逻辑。
 

为什么争夺用户注意力是未来设计趋势?

清阳 设计思维

在信息过载的数字时代,用户注意力已成为最稀缺的资源,设计的核心使命不再是单纯追求视觉美观,而是科学管理、尊重并守护用户注意力,这正是未来设计的核心走向。
 
很多人误以为设计依赖直觉与感性,是难以拆解的 “黑匣子”,行业内也充斥着 persona、故事板等基础方法论的重复内容。但优秀的交互设计背后,藏着可被解构的科学逻辑,兰亭妙微UI设计公司将从体验痛点、行业乱象到正向设计,拆解注意力设计的本质。
 

 

一、忽视注意力:糟糕设计引发的致命后果

 
设计失误从来不是小问题,在关键场景中,不良界面会直接引发灾难性后果,根源都是违背基础可用性原则、无视用户注意力分配
 
  1. 航空事故:1989 年波音 737 客机坠机,因界面未明确标识故障引擎,机组误关正常引擎,导致 47 人遇难、74 人受伤。

    image.png

  2. 工业爆炸:2005 年 BP 炼油厂爆炸,控制室 HMI 界面违反可用性原则,操作人员误读反馈,造成 15 人死亡、180 人受伤,经济损失惨重。
  3. 公共预警失误:2018 年夏威夷误发导弹紧急警报,源于操作界面模板设计模糊,官员一键选错,引发全民恐慌。
 
这些极端案例印证:设计的底线是保障安全,而保障安全的核心,是让用户精准获取关键信息、集中注意力做正确决策。日常产品中,忽视注意力的设计同样会造成操作繁琐、认知混乱,持续消耗用户精力。
 

 

二、滥用注意力:数字时代的 “分心陷阱”

 
企业开始重视用户体验后,部分从业者却扭曲设计原则,用心理学手段操纵用户注意力,最大化停留时长而非提升体验,催生了全民分心的现状。

image.png

  • 早在 2012 年,谷歌风投合伙人乔・克劳斯就提出 “分心文化”:数字产品持续刺激大脑,让用户失去长期思考能力,闲置时便陷入焦虑。
  • 前谷歌产品经理 Tristan Harris 发布内部倡议,呼吁科技公司停止利用人性弱点,尊重用户注意力,但这一问题至今未解决。
 
如今,多任务功能(画中画、分屏)看似便捷,却加剧认知负荷;营销部门将 UX 设计师沦为 “提升参与度的工具”,而非优化功能。
 
斯坦福研究数据显示:人类平均专注时长从 2004 年的 2.5 分钟,暴跌至 2023 年的 47 秒,降幅达 66%。频繁切换任务会持续加重认知负担,削弱用户深度专注能力,引发生活与工作的双重焦虑。
 

 

三、正向设计:守护注意力,创造高价值体验

 
唐纳德・诺曼在《为更好的世界而设计》中强调:设计应正向引导行为,而非操纵用户,营销式的行为操纵违背职业道德。
 
典型反例:投资应用 Robinhood 曾用游戏化界面、推送通知、庆祝动画诱导用户频繁交易,而非理性投资,最终因争议被迫改版,回归理性投资体验。
 
而真正优秀的注意力设计,以用户目标为核心,帮用户聚焦关键信息、减少认知消耗,在高风险领域价值尤为突出:
 
  1. 驾驶安全:HUDWAY 平视显示器,让驾驶员专注道路,无需低头查看信息,降低事故风险。

    image.png

  2. 行车预警:特斯拉前方碰撞警告系统,通过视觉 + 声音双重提醒,快速抓取驾驶员注意力,规避碰撞风险。

    image.png

  3. 工业生产:Solomon 科技的 3D 视觉 AR 系统,实时识别组装部件,帮操作员集中注意力,减轻精神压力。

image.png

未来,医疗、安全、制造、军事等高风险领域将成为技术应用核心,能否科学管理用户注意力,直接决定产品价值与社会意义
 

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

 

image.png

兰亭妙微UI设计公司资源分享:资讯/神器/素材全都有!

清阳 设计资源

兰亭妙微 UI 设计公司,为您带来最新行业资讯分享。聚焦 UI 设计趋势、用户体验优化与产品视觉升级,持续输出实用设计干货与行业洞察,助力产品打造更优质的视觉体验与交互感受。

 

 

一、全文速览图

image.png

二、设计资讯

1. 在 Figma 社区推出 Figma Weave 工作流模板

Figma 社区最新推出的资源类型——Figma Weave 工作流——现已上线。Figma Weave 让您能够在可视化画布上构建可重复、可扩展的生成式 AI 工作流。现在,您可以直接在 Figma 社区中探索和复制 Figma Weave 团队构建的工作流。无论您是想生成新图像、将图像转换为视频,还是将品牌指南扩展为插图集,Figma Weave 都能轻松实现。

网址: https://app.weavy.ai/

网址: https://www.figma.com/release-notes/

image.png

三、产品推荐

1. 在线矢量路径工具

在线的轻量级矢量编辑器,作者希望像 Figma 向量网络那种流畅的操作体验,同时又想拥有 Blender 修改器的“魔法”。最终的成果是一个基于 GPU 加速、使用 Go + WASM 构建的图标与字形设计工作室,并且完全运行在浏览器中。

它有一些很酷的功能,比如形状构建器、动态镜像、干净的 SVG 导入导出、等距绘图投影等等,还有很多其他特性。整体设计比较简洁克制,但用起来很顺手。

网址: https://iso.alasdairmonk.com/

网址: https://x.com/almonk/status/2042127913173057659

image.png

2. Liaison - AI 编程定位、网页样式编辑与批注

在任意网页上实现类似 Figma 的设计体验,调整元素样式、添加评论,并导出结构化 Prompt 给 AI 开发与协作。

Liaison 是一款面向设计师、产品经理、前端工程师和高频 AI 用户的浏览器插件。它让你可以直接在真实网页上完成样式调整、界面批注和实现反馈,不再依赖截图标注、文档补充和反复描述。你可以像在设计工具里一样选中页面元素,修改尺寸、间距、字体、颜色、圆角、描边、投影等属性,同时把评论和修改统一整理成结构化结果,方便交给开发或 AI 继续实现。

浏览器插件: https://chromewebstore.google.com/detail/liaison-ai-%E7%BC%96%E7%A8%8B%E5%AE%9A%E4%BD%8D%E3%80%81%E7%BD%91%E9%A1%B5%E6%A0%B7%E5%BC%8F%E7%BC%96%E8%BE%91%E4%B8%8E%E6%89%B9%E6%B3%A8/keeeahbnkkbengbjmmblmpgbccjeoebf

使用介绍: https://gwrdluzl9j9.feishu.cn/wiki/JWRjwF12ZiSQSrkjHbMcMwfbnPu

image.png

3. 免费开源的录屏工具

最贵的缩放录屏软件 Screen Studio,核心功能被 Recordly 复刻,完全免费开源! 同时支持 Mac/Windows/Linux。 测试了下,比 Screen Studio 还轻便顺滑

网址: https://recordly.dev/

网址: https://github.com/webadderall/Recordly

image.png

4. 开源图标库

MingCute 是一套简约精致的开源图标库。无论您是设计师还是开发者,它都非常适合用于 Web 和移动端项目,同时提供了 Figma 插件能够更便捷的在设计过程中使用,以及动画图标库、UI 组件库、天气图标等不同场景的素材

网站: https://www.mingcute.com/

Figma 插件: https://www.figma.com/community/plugin/1306884809438005528/mingcute-icon

image.png

5. 图文混排的长文转小红书图片生成器

作者使用 vibe Coding 了一个支持 Markdown、图文混排的长文转小红书图片生成器,

  1. 支持图文自由拖拽混排
  2. 支持自动切分多图及一些主题风格化
  3. 支持 Markdown 长文

网址: https://reflow.fehey.com/

image.png

6. 标尺小工具

一个微型工具,用于在 localhost 上测量间距并对齐您的 UI

网址: https://x.com/Ibelick/status/2042508446671499405

体验地址: https://mesurer.ibelick.com/

image.png

四、设计素材

1. 西文免费开源字体合集

面向 UI/UX 设计师与开发者,Freefaces Gallery 是一个精选的免费开源字体合集,这意味着您可以在个人和商业项目中使用它们,而无需担心许可问题。

网址: https://www.freefaces.gallery/

网址: https://fontshare.com/

image.png

2. 100+个开源免费的 SVG 加载动画

你可以使用这些基于 SVG 的加载图标来直观地指示内容。 这些动画来自多种来源,均采用 MIT 许可证。因此,它们可以无限制地用于商业用途,且无需署名。

网址: https://magecdn.com/tools/svg-loaders

image.png

3. UI/UX 设计师 Vibe Coding 指南

作者根据自身经验整理了一份「面向 UI/UX 设计师 的 Vibe Coding 完整工作流指南」从用 AI 辅助开发到 可交付、可上线。

网址: https://vibecodingfang.netlify.app/#

image.png

五、随便看看

1. 设计欣赏

作者在 Figma 中 1 小时绘制的小组件,好玩的是发帖后有人回复了在线的地址,将组件实现为了可以使用的音乐播放器,在 AI 时代还是需要审美创造力的,可以通过链接体验

网址: https://x.com/AdityaSur11/status/2038881480898756695

网址: https://audio.snvshal.workers.dev/

image.png

2. 沉浸式阅读探索

作者为自己的博客增加了多种阅读状态,让视觉外观不止是浅色、深色,增加了树影、月色、下雨、下雪等多种自然状态,网站右上角可以切换体验

网址: https://theme-switch.pages.dev/

image.png

 

 

转载:优设

 

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

 

image.png

资讯/灵感全都有!2026年4月设计资讯第二波!

清阳 行业趋势

兰亭妙微 UI 设计公司行业资讯分享,持续解读 UI 设计新风向、拆解优秀设计案例、传递实用设计方法论,与您一同探索设计美学与用户体验的更多可能。

 

 

 

一、全文速览图

image.png

二、安全边界:Anthropic泄露潜藏的暗网危机

Anthropic 内部文件意外流出,揭示了其最强模型 Mythos 的恐怖算力。该模型虽具备重塑行业的潜力,但也因可能被攻击者用于挖掘系统漏洞而引发安全危机。官方声明称,在正式发布前需确保防御者已做好应对这种新型算力冲击的准备。

image.png

 

图源:Anthropic, Getty Images

此次泄露迅速波及资本市场,导致网络安全相关股价剧烈波动。分析师指出,Mythos 揭示了 AI 技术在安全攻防中深度嵌入的现状,反映出利用 AI 进行威胁防御已成常态,同时也暴露出单点泄露可能引发的系统性金融风险。

image.png

 

图源:Anthropic, Getty Images

随着 Mythos 的曝光,OpenAI 等巨头的对标模型也浮出水面,预示着 AI 正从辅助工具进化为攻防核心。未来技术博弈将进入“以 AI 对抗 AI”的新阶段,攻击者与防御者在更高维度上的算力对决,将彻底改写网络安全的竞争格局。

三、技术边界:英伟达仅凭矢量数据渲染

NVIDIA证实DLSS 5并非通过读取游戏引擎的3D几何或材质数据运行,而是仅凭2D渲染帧与运动矢量进行AI推断。这意味着该技术本质上是通过分析图像来“幻化”细节(如皮肤与光照),而非精确重建场景。

image.png

 

图源:NVIDIA

虽然这带来了惊人的视觉增强,但也导致AI会在早期预览中产生原画中不存在的细节“幻觉”,引发了外界对画面真实性与艺术还原度的质疑。

四、设计边界:谷歌 AI 画布的无限可能

Stitch 正在重构 UI 设计范式,推出 AI 原生无限画布并引入“氛围设计”概念。用户不再受限于枯燥的线框图,只需通过自然语言描述业

image.png

务目标或灵感,AI 代理即可理解设计意图并并行处理多模态输入,让创意探索从底层逻辑转向感官体验。

 

图源:Google

平台实现了人机交互的自然化,支持用户通过语音指令进行实时设计对话与方案筛选。同时,Stitch 能将静态画面瞬间转化为交互原型,由 AI 自动推演点击逻辑与用户旅程,并支持通过 URL 提取设计系统,极大简化了从规则制定到原型生成的复杂流程。

image.png

 

图源:Google

五、法律边界:Vogue 与 Dogue 的商标博弈

时尚巨头康泰纳仕正式起诉恶搞杂志《Dogue》,指控其封面设计侵犯《Vogue》商标权。这本由独立创作者创立的实体刊,因让狗狗模仿人类大片而走红。目前,康泰纳仕不仅要求经济赔偿,更强制要求销毁所有库存杂志。

image.png

 

图源:dogue

创始人 Portnaya 坚称《Dogue》是基于对话与重新诠释的艺术创作,旨在为独立创作者争取表达空间。然而,面对销量微薄与高昂法律费用的悬殊对比,这场“大卫与歌利亚”式的博弈陷入僵局,创作者正通过众筹寻求法律援助。

image.png

 

图源:vogue

六、自然边界:皇家植物园的品牌新姿态

Johnson Banks 为爱丁堡皇家植物园(RBGE)打造的品牌重塑旨在整合四个园区的品牌感知,确立了“四处花园,一个植物世界”的品牌愿景,将爱丁堡、本莫尔、道伊克和洛根的花园融为一体。

image.png

 

图源:johnsonbanks

还专门设计了边框,可以用来框住作品,并提醒人们它们始终存在,而不是事后才想起来的。

image.png

 

图源:johnsonbanks

这些标志首次展示了一款全新的定制字体,共有四种字重。它是Nomada Incise的定制版,线条棱角分明,优雅别致。最细的字重中包含一系列连字,呼应了西巴尔迪亚符号及其边框的生动呈现。

image.png

 

图源:johnsonbanks

七、文明边界: 剑桥创新对历史的推动

剑桥地区以其创新和发现而闻名,而这一切始于其世界闻名的大学校园内,如今已发展成为环绕该地区的欧洲领先的知识生态系统——融合了 5000 家创新驱动型公司、60 家跨国公司、5 个医院信托机构、36 个研究园区、2 所大学(剑桥大学和安格利亚鲁斯金大学)以及蓬勃发展的初创企业和投资者群体。

image.png

 

图源:johnsonbanks

以图解为主题,并将其运用到代数、方程式、图表和文字游戏中。这既充分利用了该地区的科学声誉,又为方案增色不少,同时还创造了一种独特的视觉和语言。

image.png

 

图源:johnsonbanks

将自己最喜欢的创意与剑桥郡广袤无垠的天空的静态和动态影像相结合,打造出一套可应用于多种媒体的设计工具包。

image.png

 

图源:johnsonbanks

转载:优设

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

 

image.png

日历

链接

个人资料

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

存档