首页

兰亭妙微UI设计公司,实时表单设计指南

清阳 设计思维

这篇文章核心讲:实时表单验证不只是技术交互,更是人机心理博弈,从设备适配、场景策略、案例实践三个层面给出完整设计方法。
 

 

一、跨设备与无障碍验证

image.png

  1. 移动端
    • 痛点:屏幕小、软键盘遮挡错误提示,用户反复试错
    • 做法:提示放键盘上方;加大触控区;用颜色 / 动画 / 震动多维度反馈
     
  2. 桌面端
    • 优势:空间充足,可做非打断式细腻反馈
    • 做法:气泡提示、悬停说明、修正后绿色正向反馈,克制不打扰
     
  3. 无障碍
    • 不只用颜色 / 图标提示,需兼容屏幕阅读器
    • 给错误字段加属性、提示做语义标记,让视障用户可 “听” 到错误
     
 

 

二、分场景验证策略

image.png

  1. 注册 / 登录(第一印象)
    • 自动聚焦首字段,默认无警告
    • 密码用强度条 + 鼓励语,重名给替代建议

    image.png

  2. 支付 / 商业(防错止损)
    • 强格式:自动空格、限制非法字符、动态掩码
    • 智能容错:提示错误细节、辅助修正,降低投诉
     
  3. 高风险(实名认证 / 税务 / 公积金)
    • 原则:安抚情绪→解释原因→给方案→告知无影响
    • 显示进度、保存进度,避免用户焦虑
     
 

 

三、国内外案例对比

 
  • 国内(务实安全):支付宝分步验证、京东智能地址、小红书实时推荐
  • 国外(友好共情):Typeform 对话式、Airbnb 国别适配、Dropbox 路径兜底
  • 差异:国内偏失焦验证 + 强规则;国外偏即时验证 + 容错引导
 

 

核心结论

表单验证的目标不是拦错,而是帮用户顺利完成:跨设备保证反馈可见,分场景匹配用户情绪,最终提升提交率、降低放弃率。
 

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

 

image.png

刷视频停不下来?兰亭妙微UI设计公司揭秘背后值得学习的交互设计套路

清阳 用户研究

今天,兰亭妙微UI设计公司分享的是「常见的交互设计套路」。

不知道大家有没有过这种体验,睡前拿起手机刷短视频,原本打算看几条视频就睡觉,结果刷着刷着一两个小时就过去了。

那么我们为什么会忍不住一直“刷刷刷”呢,这种设计背后藏着哪些交互逻辑。今天就来好好聊聊这个话题。

什么睡前刷短视频,原本只想看几条,却不知不觉耗掉一两个小时?这种让人停不下来的体验,并非偶然,而是产品背后一套成熟的交互设计机制在引导行为。本文拆解让用户沉浸的核心套路,分析其利弊,并给出良性设计的原则。
 

一、引导用户沉浸的 4 种典型交互

 
这些无需动脑的操作,用低门槛、强反馈的方式持续抓住注意力,让用户在无意识中持续使用产品。
 

1. 无限滚动

image.png

通过算法消除页面终点,持续推送新内容,用户只要滑动就能看到新信息。
 
它利用人的FOMO(害怕错过)心理,让人总觉得 “下一条更精彩”,进而不停滑动。省去分页操作、隐藏内容终点,是内容平台提升停留时长的经典设计。

image.png

2. 自动播放

image.png

视频结束后自动播放下一条,替用户省去点击与决策成本。
 
看似便捷,实则在用户未做出选择前就替用户决定继续观看,大幅延长使用时长;搭配 “查看更多相似内容” 提示,还能进一步延迟用户退出。
 

3. 下拉刷新

image.png

 
初衷是方便用户快速获取新内容,操作简单顺手。
 
如今已演变成习惯性触发机制,用户会重复下拉,期待不可预测的 “小惊喜”,形成停不下来的刷新行为。
 

4. 红点与消息反馈

image.png

以小红点为代表的角标(Badge),本用于提醒重要信息,但过量的 “99+” 提示会制造心理压力,让用户觉得 “有未处理事项”,忍不住点击查看。
 
部分产品已优化:提供一键清除未读仅显示好友直接互动等功能,减少用户焦虑。
 

 

二、功能的两面性:从好体验到 “操控式设计”

image.png

这些交互最初都是为提升易用性而设计,核心是通过心理引导优化行为。但一旦过度,就会剥夺用户自主权,变成隐性操控,甚至沦为暗黑模式
 
暗黑模式:用界面或交互故意误导、操纵用户决策,看似友好,实则诱导点击、违背用户意愿。上述沉浸型交互,很容易跨过边界变成套路。image.png
 
过度追求点击量、播放量、停留时长等短期数据,会让平台只注重无限推送,而非优质内容。用户刷完后往往感到空虚、浪费时间,长期会降低品牌信任。

 

短期数据好看≠长期用户忠诚,好产品的目标是留住用户,而非 “耗走” 用户。

image.png

 

 

三、良性引导用户的 3 个设计原则

 

1. 提供终点,保留用户决策权

 
对需要深度阅读的高质量内容,建议采用有终点的结构,而非无限滚动。明确的结束点能带来 “完成感” 与成就感,让用户更专注内容本身。
 

2. 适度反馈,拒绝过量刺激

 
控制通知与红点数量,只推送真正重要的信息。避免无意义提醒带来的焦虑与疲惫,让反馈成为正向激励,而非心理负担。
 

3. 少套路,多真诚

 
通知与推荐以传递真实信息为主,减少 “再不看就没了” 等制造焦虑的话术。短期套路或许能提升点击,但长期会引发用户反感。
 

 

结语

 
优秀的用户体验,核心是赋予用户自主权。自动化、便捷化的交互本身没有错,但必须让用户能自主控制:什么时候看、看多少、什么时候停。
 
好设计不是强迫停留,而是让用户愿意停留、愿意再来。以用户为中心的良性交互,才能带来可持续的体验与口碑。
 
转载:优设
 

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

 

image.png

AI 网页设计高级法则

清阳 网站设计文章及欣赏

想要让产品从 Demo 升级为拥有独立灵魂的成熟作品,就需要掌握更具体的设计规则,结合目标人群与品牌调性,做出精准设计决策。
 
兰亭妙微UI设计公司,将分享4 个零出错设计法则,并附上进阶学习资源,帮你把模糊抽象的指令,转化为 AI 可严格执行的色值、字体、间距参数,实现视觉细节的精准把控。
 

一、字体字号:阶梯比例与搭配技巧

 

1. Web 字号阶梯:打造和谐排版

image.png

字号阶梯(Type Scale)是网页排版的核心:选定基础字号,按固定比例递增,生成具备数学美感的字号系统。
 
  • 基础字号:默认 16px(浏览器标准,适配阅读)
  • 常用比例
    • 1.25(Major Third):层级温和,适配 SaaS、工具、博客等绝大多数场景
    • 1.333(Perfect Fourth):对比鲜明,适合标题突出的文章页
    • 1.5/1.618(黄金比例):视觉张力强,适配营销页、落地页

    image.png

 
AI 生成提示词
 
基础字号为 16px,使用 Major Third(1.25)字号阶梯构建排版层级,保证视觉平衡与专业感。
 
可借助Typescale 工具,直观调节字体、字号、字重、颜色,快速选定最优参数。
 

2. 免费可商用字体推荐

 
避免模糊指令「要现代字体」,直接指定字体名称,精准控制效果:

image.png

  • 现代通用:SF Pro、Open Sans、Montserrat、Poppins,适配工具软件、后台、文档
  • 科技极客:Orbitron、Space Grotesk、Fira Code,适配开发者工具、Web3、技术博客
  • 优雅人文:Playfair Display、Lora、Noto Serif,适配知识库、阅读类产品、营销页
  • 温暖友好:Nunito、Lexend、Comfortaa,适配教育、社区、女性向产品
  • 中文字体:思源黑体、阿里普惠体、MiSans、HarmonyOS Sans
  • 数字专用:Outfit、Montserrat、Lexend,突出数据展示
 

3. 字体搭配核心技巧

image.png

  1. 单页字体控制在2-3 种,层级变化用字号、字重、字距实现
  2. 中文字体建议子集化处理,文件大小控制在 200KB 内,提升加载速度
  3. 英文 + 中文混排时,优先定义英文字体,再回退中文字体,保证英文 / 数字展示效果
  4. 优先选择上下间距对称的 UI 友好字体,减少对齐问题
 

 

二、色彩搭配:60-30-10 黄金法则

 

1. 60-30-10 配色原则

image.png

源自室内设计的黄金法则,是网页避免色彩混乱、建立视觉秩序的最优方案:
 
  • 60% 背景色:页面主基调,用中性色或浅品牌色,营造留白与质感
  • 30% 辅助色:卡片、次级按钮、选中态,用品牌色邻近色,构建层级
  • 10% 强调色:CTA 按钮、链接、高亮图标,用主色 / 对比色,聚焦用户注意力
 
AI 优化提示词
 
对页面应用 60-30-10 配色法则,去噪处理,减少色彩滥用,优化视觉层级,突出重点信息。
 

2. 专业色阶生成

image.png

使用Kigen Color Generator,输入品牌色即可自动生成 Tailwind CSS 标准色阶:
 
  • 50-100:大面积背景、浅卡片
  • 200-300:边框、分割线、输入框背景
  • 400-600:核心按钮、图标、Logo
  • 600-800:Hover 态、暗黑模式背景
  • 800-950:标题、正文文字(替代纯黑,提升质感)
 
色阶可直接复制为 CSS Token,一键接入代码。
 

 

三、排版布局:用间距节奏建立呼吸感

image.png

1. 栅格系统:稳定视觉重心

 
栅格是对齐与秩序的基础,AI 生成布局时可按以下标准审查:
 
  • 统一内容宽度与左右边距,避免贴边摆放
  • 关键信息(标题、卡片、页脚)对齐统一轨道
  • 装饰元素(Hero 图、插画)可适度溢出,保持灵活
 

2. 行长控制:提升阅读舒适度

image.png

  • 英文正文:45-75 字符 / 行
  • 中文正文:35-45 汉字 / 行
  • 行高与行长动态平衡:行高≥1.8 倍时,可适当放宽行长
  • 避免专有名词断句、行末单字「孤儿行」,关键场景手动优化
 

3. 间距节奏:格式塔亲密度法则

image.png

元素间距决定视觉层级,遵循4/8px 倍数原则
 
  • 组件内部:8-18px(小间距)
  • 卡片之间:16-84px(中间距)
  • 内容区块:≥264px(大间距)
  • 全程仅用 3 种间距,即可构建清晰层级,避免混乱
 
AI 规范提示词
 
统一页面间距系统,margin/padding 使用 4/8 的倍数,组件内用小间距,卡片间用中间距,区块间用大间距。
 

 

四、Icon 和配图:高品质素材提升质感

 

1. Icon 使用原则

image.png

  • 风格统一:指定单一图标库(Google Material Symbols、Lucide、Remix Icon),固定线条粗细、填充 / 描边
  • 尺寸规范:16px、20px、24px、32px,基于 4px 网格
  • 视觉对齐:图标比文字大 2-4px,与文字间距 4/8px
  • 引入提示词:使用 Google Material Symbols 描边风格,ODN 引入,填充 0、字重 400、字阶 0、尺寸 4px
 

2. 图片使用原则

image.png

  • 视觉标准:高清无模糊、主体清晰、色调匹配品牌调性
  • 技术适配:用 object-cover 防拉伸,srcset 实现响应式,控制尺寸 1500-2500px、体积<500KB
  • 性能优化:非首屏图片懒加载,首屏关键图预加载,优先用 WebP/AVIF 格式
 

3. 优质资源推荐

image.png

  • 图标库:Google Material Symbols、Lucide、Iconify、LobeHub
  • 图库:Unsplash、Lummi(AI 生成免版税)
 

 

五、前端开发工具合集

 
  1. Typescale:字号阶梯可视化调节
  2. Kigen Color Generator:品牌色自动生成完整色阶
  3. WCAG 对比度检查器:网页色彩可读性检测
  4. html.to.design:网页一键逆向 Figma 设计稿
 

 

结语

 
掌握 Coding 工具、学会用提示词定义美感、吃透专业设计法则,你就能从被动点击生成的旁观者,变成掌控审美决策权的产品创造者。
 
AI 的价值,是分担枯燥重复的劳动,让我们专注打磨打动用户的细节。在 AI Coding 浪潮中,对美的感知与规则的掌控,才是核心竞争力。期待每个人都能做出有灵魂、有质感的作品。
 

image.png

 

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

 

image.png

幽灵按钮:大厂高频使用的轻量化按钮设计完全指南

清阳 设计资源

一、什么是幽灵按钮

 
幽灵按钮(Ghost Button)是界面中隐藏背景色与边框的轻量化按钮形式,默认仅显示文字或图标,鼠标悬停 / 触屏按下时,轮廓边框才清晰显现,本质是为文字链接、图标按钮、导航项添加透明热区边框的交互组件。

image.png

该设计概念早在十年前于海外提出,2018 年谷歌 Material Design 2 将其纳入规范,Figma 更是大范围应用;近年在国内大厂设计系统引领下,逐渐成为导航栏、工具栏的主流样式。
 

 

二、幽灵按钮的核心优势

 

  1. 界面轻量化,降低视觉负担

    image.png

    工具栏、导航栏密集排布图标 / 文字时,幽灵按钮无冗余底色与边框,保持界面简洁清爽,避免视觉杂乱。
  2. 扩大操作热区,提升交互准确率

    image.png

     
    解决纯文字 / 图标点击区域过小、易误触的问题,设计阶段明确热区范围,前端可直接落地,适配触摸屏操作习惯。
  3. 清晰视觉反馈,强化操作感知

    image.png

     
    悬停 / 按下时边框显现,直观展示实际可点击范围,比单纯变色更醒目,让用户操作更有安全感。
 

 

三、幽灵按钮的落地痛点

 
  1. 设计成本与感知不对等

    image.png

    视觉效果极简,但需精细化调整边框、间距,付出双倍设计成本,易被误解为 “工作量不足”。
  2. 存量产品改造成本高
     
    替换现有图标 / 文字链接为幽灵按钮,需重构层级、间距结构,易影响页面其他区域,不适合大幅改动框架。
  3. 设计精度要求极高
     
    需单独配置按钮边框,精准把控内边距、组件间距,打破传统对称、对齐的设计逻辑,调试难度大。
 

 

四、幽灵按钮的核心设计难点

 
  1. 视觉对称≠实际边距对称

    image.png

     
    文字 + 图标组合的按钮,若默认边距完全对称,图标侧会显空旷;需微调边距,让视觉平衡优先于数值对称。
  2. 视觉对齐≠实际位置对齐

    image.png

     
    文字与图标看似对齐,悬停显示边框后会出现偏移;需刻意调整位置,保证默认态整洁、交互态规整。
 

 

五、应用现状与大厂案例

 
幽灵按钮在海外产品中已普及,国内虽未全面覆盖,但在AntDesign、ArcoDesign、TDesign等主流设计系统中广泛应用,是轻量化界面的核心组件之一,尤其适合导航、工具栏等高频操作区域。
 

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

 

image.png

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

日历

链接

个人资料

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

存档