兰亭妙微ui设计公司分享：在用户体验流程里，错误问题的应对思路可以概括为双管齐下：一方面做好事前预防，尽可能规避错误发生；另一方面做好事后补救，当错误已经出现，让用户可以轻松修正问题。

此前已经分享过 8 条预防错误发生的设计方法，本篇聚焦错误发生之后，聊聊如何通过设计化解问题，降低用户受挫感。

5 个化解错误的 UX 设计技巧

1. 提供撤销操作，降低用户损失 允许用户撤回误操作，不用为无意的失误付出高昂代价，直接减少出错带来的负面影响。

   

2. 清晰说明错误根源 报错不要只抛出笼统提示，直白告诉用户到底哪里出了问题，让用户理解失败的原因，而不是陷入困惑。

   

3. 给出明确的下一步行动指引 不只告知 “出错了”，还要告诉用户该做什么，提供可行的解决路径，引导用户完成修正。

   

4. 自动定位、聚焦错误项 表单等场景下，页面自动滚动并高亮出错的输入位置，省去用户自己排查问题的时间成本。

   

5. 借助视觉设计安抚用户情绪 报错界面避免生硬冰冷的表达，利用图形、色彩、文案缓和用户烦躁、挫败的负面感受。

   

再完善的产品设计，也没办法做到完全杜绝用户错误。打磨这些细节，正是体验设计的价值所在，也是产品给予用户的信任。 如果你也有处理用户错误的设计思路，欢迎一起交流探讨。

转载：优设

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

兰亭妙微ui设计公司分享：在制作品牌手册的周边延展板块时，不少设计师还在沿用传统方式，四处搜集、购买样机素材再进行合成。本文分享三套实用 AI 生图工作流，借助垫图大法、文字反推法、内容替换，快速产出 IP 周边视觉，大幅提升设计效率。

一、垫图大法

仅靠文字描述，很难精准还原脑海中的 IP 周边创意，生成效果往往偏差较大。垫图即上传参考素材，把参考图 + IP 形象一同交给 AI 生成，可以显著提升出图准确率，减少反复调试提示词的 “抽卡” 成本，分为三类应用场景：

1. 单体创意周边

把 IP 形象落地为实体周边（挂件、水杯、潮玩等），先找风格、形态接近预期效果的参考样机，上传 IP 原图 + 参考样机，再补充文字约束：IP 造型不能改动、产品配色、包装样式、背景、构图比例。 AI 生成多版方案后，挑选最优结果，手动修正细节 bug，得到完整的 IP 周边 + 配套包装效果图。

注意：垫图会继承参考图的部分元素，商业项目务必清除残留参考素材的 logo、文字，规避版权风险。

2. 单体平铺阵列场景

适合制作大量周边整齐排布的陈列效果图。 仅用文字很难精准控制盒子摆放角度、疏密、透视关系，容易出现大小错乱、排布混乱。 操作方法：上传陈列布局参考图 + IP 产品图，限定阵列疏密、视角、摆放规则，迭代多次垫图抽卡，就能获得氛围感很强的产品陈列场景。

3. 多视角影棚展示场景

普通的正 / 侧 / 背面平铺展示比较单调。想要模拟专业影棚多角度展示效果，优先选用自带光影、投影的摄影参考图做垫图，让 AI 继承布光、景深虚化、镜头透视，在单张画面内呈现 IP 周边不同角度，质感远高于简单平铺。

核心经验：垫入的参考图质量，直接决定最终画面的效果上限。

二、文字反推法

适用于手提袋、礼盒等通用型品牌样机，解决垫图容易照搬参考图元素的问题，实现 “洗图”。

1. 将目标样机参考图交给 AI，让 AI 拆解图片，提取完整提示词：包含材质、工艺、光影、版式、场景、渲染器风格等细节，不只是简单写 “手提袋样机”；
2. 筛选优化提示词，导入自家品牌平面设计稿；
3. AI 结合文字描述 + 平面稿生成样机。

产出画面保留参考样机的氛围质感，但不会直接照搬原图内容，完美适配自有品牌视觉。

三、内容替换

当遇到非常合适的场景样机，但画面内的图案、标识不是自己的设计，就可以使用内容替换。

1. 准备现成的场景参考图（例如导视牌空间环境）；
2. 上传自己的平面设计文件；
3. 写提示词指令 AI：保留原场景的透视、光照、材质，仅替换物体表面图案为我方设计，限定厚度、发光、金属等材质属性。

AI 完成替换后，微调色彩，即可得到适配真实环境的全新效果图。

写在最后

AI 不是用来完全替代设计师，而是高效的辅助工具。掌握以上方法，学会借助 AI 赋能设计，把精力更多留给创意本身。

转载：优设

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

兰亭妙微ui设计公司分享：网页设计同质化越来越严重，很多网站空有精致的视觉外壳，却缺少打动用户的交互灵魂。优秀的网页交互创意，可以唤醒页面活力，引导用户主动探索，甚至带来沉浸式的心流体验。本文不会讲解具体动效制作教程，也不聚焦 B 端功能产品，主要梳理 Web 端交互创意思路、表现形式与落地方法论，帮设计师拓展创意灵感，做出更有记忆点的网页作品。

一、先搞懂：Web 端可支持哪些交互能力

网页交互以电脑设备为载体，核心输入设备为鼠标、键盘，拓展能力可接入麦克风、摄像头实现声音、图像采集交互。

1. 鼠标交互能力

受浏览器兼容性与用户操作习惯约束，实际项目优先使用高频手势，不建议滥用右键、快速连击等小众操作：

• 光标悬浮（hover）、左键单击、双击、长按、拖拽
• 滚轮上下滑动

不推荐：右键双击 / 长按 / 拖拽、高频连击，违背大众操作习惯，会提升用户学习成本。

2. 键盘交互能力

除系统全局快捷键外，网页常用键盘交互：

• 文字、数字、符号输入；指定按键单击 / 长按
• Tab 切换选项、空格翻屏、方向键移动视角、ESC 退出全屏 / 弹窗

自定义按键交互，必须在界面增加操作提示，避免用户无从感知。

3. 组合交互动作

复杂场景可采用多动作组合，但尽量精简，务必配套操作指引，避免操作门槛过高：

• 鼠标：横向拖拽、纵向拖拽、任意方向拖拽、绕中心点拖拽
• 键鼠协同：方向键 + 点击、自定义按键 + 点击、按键 + 长按拖拽、多按键组合

二、交互可以改变页面的哪些元素

交互触发后，页面输出分为视觉元素与听觉音效两大类。

1. 可被交互影响的视觉元素

颜色、文字、图形、动画、按钮、控件、三维模型。

2. 元素常见变化方式

位置移动、透明度改变、角度旋转、大小缩放、形态变形、色彩切换、翻转、特效滤镜。

三、网页交互底层逻辑

Web 交互本质是：用户触发事件 → 页面对应输出内容。 交互事件分为三大模块：元素交互、功能交互、转场切换； 触发源分为鼠标事件、键盘事件、键鼠混合事件。

页面内容需要覆盖三种完整状态：

1. 默认态：未进行任何操作
2. 选择态：鼠标点击、悬浮的瞬时状态
3. 运行态：长按、拖拽等持续操作状态

设计时需要完整覆盖三类状态，搭配动效给到清晰反馈，网页交互的本质，就是对页面内容的呈现进行可控调度。

四、Web 网页 6 大类内容呈现结构

得益于桌面端大屏优势，网页布局结构远比移动端灵活，同时需要兼顾响应式适配需求：

1. 上下长屏滚动：常规长页面，滚动浏览全部内容，最通用的形式
2. 全屏上下切换：一屏一内容，滚轮 / 按钮实现垂直切屏，适合品牌专题页
3. 全屏左右切换：横向分页切换，适合展示画册、作品集
4. 全屏页面覆盖：新页面以覆盖、叠层的形式完成切换，支持滚轮实现页面深入 / 退出
5. 自适应平铺：模块平铺排布，空间不足自动换行，适合简单轻量化页面
6. 三维场景结构：3D 化页面场景，搭配固定 UI 导航；支持镜头缩放、环绕、自由漫游查看内容

网页基础区块划分为：导航栏、面包屑、背景容器、内容主体、弹出框；导航又分为顶部、侧边、底部、弹窗式组合导航。

五、14 种视觉层创意表现形式

视觉创意是网页的第一印象，可根据品牌定位自由组合搭配：

1. 几何色块 + 文案 无需复杂图片插画，依靠色块与文字对比打造简约冲击力，适合文字占比高的页面。
2. 高清大图背景 + 内容 将高质量图片作为页面背景，叠加标题与控件，氛围感强，广泛用于游戏官网、营销专题页。

   

3. 主题插画 / 图标搭配文案 使用统一风格插画、图标诠释产品服务，多用于业务介绍、优势说明模块。

   

4. 留白大图 + 文案 放大产品主体，大面积留白降噪，让用户视线聚焦产品，常见产品官网首页。

   

5. 动态背景 / 装饰微动效 视频、循环动效作为背景，渲染页面氛围；注意把控素材质量，避免动效杂乱抢夺内容焦点。

   

6. 点线面装饰 + 版式排版 依靠简单几何元素装饰页面，搭配对比强烈的文字排版，打造极简干净的页面。

   

7. 栅格系统 + 版式跳跃率 依托栅格规范布局，通过字号、图文大小制造节奏，日式网页大量使用该手法。

   

8. 强风格化视觉包装 卡通手绘、故障风、毛玻璃、赛博朋克、复古怀旧等风格，强化品牌调性，加深用户记忆。

   

9. 3D 视觉装饰 3D 图标、3D 场景、产品 3D 渲染图，立体感强，是当下主流的网页视觉趋势。

   

10. 品牌元素弱化填充背景 提取品牌图形、标识做低透明度背景，可叠加微动效丰富画面。
11. 矩形 / 卡片陈列布局 模块化卡片整齐排布，模块边界清晰，适合同类条目较多的页面极致简约风格 少即是多，仅保留核心图文，去除多余装饰，突出信息本身。
12. 神秘感交互视觉 部分内容默认隐藏，需要鼠标悬浮、点击才会显现，趣味性强，慎用避免用户找不到信息。

    

转载：优设

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

让财务信息的专业感，来自清晰的阅读顺序。

兰亭妙微专注 UI 与用户体验设计，持续关注国内外优秀作品，分享界面设计与交互思路，进行设计审美积累。今天分享 Finora 财务管理 App 设计。余额、收支、储蓄与交易明细都需要被看见，手机屏幕却只有有限空间。
一、项目背景：把复杂数字整理成可读的日常
这类产品需要同时回答“我有多少资金”“最近如何变化”“下一步可以做什么”。Finora 围绕这些问题组织首页，让数据与行动形成连续的阅读路径。

图 1  品牌色与首页整体展示

品牌展示把深浅蓝色与手机首页并置，白色空间让金融信息显得轻快。按钮、图表和品牌物料沿用同一色彩体系，能看到视觉识别如何进入日常使用的界面。

图 2  同作者的首页展示

同作者的另一张展示放大了首页细节：余额、收支摘要、目标进度与近期活动层层展开。它与后两张局部图对应同一首页，可以从整体布局一路读到具体组件。

二、设计策略：建立明亮、有秩序的金融界面
①信息架构：总余额先出现，收支摘要、储蓄进度与近期活动依次展开。②视觉语言：白底配合深浅蓝色，数字字号拉开主次；品牌色延续到按钮、图表和展示物料，整体清爽而统一。

Finora | 界面细节与设计启发

图 3  余额与储蓄操作 局部放大

这张局部放大聚焦首页上半部。总余额拥有最鲜明的字号，收入与支出退到下一层，添加资金和储蓄按钮则用色彩拉开差异，金额与操作的关系一眼可见。

图 4  活动列表与底部导航 局部放大

这张局部放大展示首页下半部。商户图标、名称、时间与金额形成有节奏的列表，金额对齐保持整洁，底部导航接住高频功能。细节克制，日常查阅的秩序却很完整。

③场景化交互：添加资金与储蓄动作紧邻资产摘要，活动明细承接日常查阅，底部导航提供稳定入口。页面把资金状态与相关操作放在相近位置，阅读之后便能找到下一步。

三、设计启发：金融界面的质感，藏在数字之间的关系里
大金额、辅助变化值、列表明细各有自己的权重，蓝色也承担了不同层级的提示。做数据类 App 时，可以从这组设计中积累一条思路：先建立阅读顺序，再用色彩与组件强化它。

如有财务管理、记账类 App的 UI/UX 设计需求，欢迎联系兰亭妙微，交流产品场景与设计需求。

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

任务流程是交互设计的核心，但很多设计师拿到需求就开始画页面，很少停下来想：这个任务到底是怎么来的？应该分几步？每一步放什么？兰亭妙微在项目中总结了一套任务流程设计的方法，今天用买电影票的例子把它讲透。

做设计的人都听过 "对齐、对比、亲密性、重复" 这些基础原则，但在产品设计领域，有一套更系统、更实用的评价标准 ——尼尔森十大交互原则。这套原则由人机交互学博士 Jakob Nielsen 提出，专门用来评价用户体验的好坏。兰亭妙微在大量 B 端项目中反复用这十条原则做设计走查，今天把我们的实战理解分享出来。

AI工具能快速生成一张好看的页面，但从创意到可讨论、可验证的产品方案，还需要多轮探索。Google Labs在2026年3月介绍了Stitch的新设计画布：设计者可以用自然语言描述业务目标、用户感受和视觉参考，再把想法逐步发展为高保真界面与可交互原型。下面结合原文配图，看看这种工作方式对UI和交互设计有什么启发。

面对工业设备界面，企业选择交互设计公司时，除了看视觉效果，更应关注第一次接触产品的人能否理解任务、判断状态并完成操作。今天以 Peerigon 为 Yaskawa 设计的机器人展会交互项目为引子，讨论可以在方案评审中使用的判断方法。

兰亭妙微ui设计公司分享：苹果终于交出了首款折叠 iPhone：iPhone Duo。在直板手机陷入创新瓶颈、AI Agent 开始接管多任务工作流的当下，折叠机早已不是单纯追赶竞品的形态补位。苹果没有堆砌花哨硬件，而是围绕 AI 时代的生产力需求，重新定义折叠屏的设计逻辑。

透过 iPhone Duo 这台产品，我们能读出整个消费硬件行业接下来的走向。本文将从 iPhone Duo 为你拆解 AI 时代硬件产品的 5 个核心趋势，帮助你更好地定义在 AI 时代如何为用户设计产品和创造体验。

趋势 1 多任务并行成为可能

AI 时代不一定需要折叠屏，但折叠屏可能是目前最适合承载 AI Agent 的手机形态之一。AI 时代需要的不是“更大的手机”，而是一个能同时容纳以下四个角色的信息界面：

1. 用户的意图
2. AI 的执行过程
3. 当前操作对象
4. 可确认、修改和撤销的控制权

折叠屏恰好能提供这块动态画布，把手机从“打开一个 App 完成一个任务”，变成“人与 AI 同时共同处理多个信息、多个工具和多个步骤”。传统直板手机的单一小屏，会逐渐成为这个过程的瓶颈。未来很多任务不会一次生成结束，而是一场人与 AI 的持续协作，比如：

• 左边查看原始资料，右边调整生成结果；
• 一边开视频会议，一边让 AI 整理重点；
• 对照多个商品，让 AI 解释推荐理由；
• 查看旅行地图，同时命令 AI 生成或修改行程。

以目前的技术形态来看，这类任务通常需要“对话区＋对象区”，或者“资料区＋生成区＋操作区”等多区融合。折叠屏展开后的多栏结构，比在多个 App 间跳转更符合共同编辑的心智模型：

趋势 2 操作方式成为情景输入

折叠屏不只是多一块面积，它还有姿态变化。而这种折叠动作本身就可以成为 AI 的情境信号，设备可以根据开合状态推断用户意图，并给出相应的反馈，比如：

• 合上：快速询问、通知摘要、语音助手；
• 半折：视频通话、实时翻译、拍摄辅助；
• 展开：深度研究、比较、编辑、多任务；
• 反向展示：把 AI 生成内容展示给对面的人等等

苹果给出的演示效果中，当用户用 Netflix 看视频时突然半折屏幕，视频的内容会自动呈现在上半部分，下半部分可以展现其他用户对于视频的评论，或者呈现其他应用的事实信息：

另一个例子是当你在晚上把 iPhone Duo 半折、支成帐篷形态，稳稳立在桌面，手机保持锁屏，系统姿态传感器就会识别到自立角度，本身就会自动出现小夜灯和闹钟模式：

这让界面根据用户投入程度逐级展开并适配情景，理想的体验是：屏幕展开多少，AI 的能力和信息密度就展开多少，设备形态本身和交互呈现更紧密的结合到了一起。

趋势 3 连续性，带来更优体验

iPhone Duo 的展开瞬间带来的连续性，无疑是设计上的亮点之一。体现在两个方面：

一是展开的瞬间是“顺延”，不是“重排”。5.4 英寸外屏与 7.6 英寸内屏使用相同宽高比，内容展开时按比例放大，而不是重新排版。

这是一个看似工程、实则体验的决策：折叠最危险的体验断点是“展开后我找不到刚才的东西”，苹果用比例统一把这个断点抹平了，同时也把 dock 栏、软件顶栏和工具栏，甚至是状态列图标全部竖过来放在屏幕右边，这样做既有利于 App 的适配，也更便于单手操作：

形态变化处，连续性优先于布局最优。

二是开合屏幕瞬间的的半透明磨砂效果。不是单纯的外观特效，是内外屏无缝过渡的视觉闭环：闭合时外屏转为半透磨砂质感，打开瞬间外屏画面渐隐、内屏平滑亮起，消除两块独立屏幕的割裂感，把“两块屏幕”做成“一整块连续玻璃”的视觉体验：

趋势 4 把控制权分层处理

iPhone Duo 相机的可变光圈是适合给 Agent 产品做参照的交互设计之一。苹果把控制权分成了三层：

1. 日常由系统按场景智能决策（暗光扩光圈、合影收景深）；
2. 用户可在相机 App 内用四档手动光圈接管；
3. 第三方开发者通过 API 在自己的拍摄流程里调度它。

智能默认、手动回收、能力开放，同一项能力，三种介入深度。

相机 App 的 Pro 控件延续同一思路：快门速度、白平衡、光圈、直方图可以自定义排布，专业能力被放进专业用户够得到、普通用户看不见的地方。这是专业能力的民主化，降低门槛，又不抬高默认界面的复杂度。

Smart Take 则是边界的另一侧：端侧模型实时分析场景，检测到人物摆好姿势就自动按下快门。它确实解决了“拍照的人永远不在照片里”的老问题，但也第一次让何时按下快门这个创作决策交给了 AI。这类功能的长期信任考题是：用户需要知道 AI 凭什么判断“此刻值得拍”，以及如何控制和关掉它：

趋势 5 新、旧交互方式并存

苹果很善于把所有的多余功能都隐藏起来，以简洁著称，但是这次却让侧边 Touch ID 回归。

受折叠机身空间限制，TrueDepth 深感摄像头无法塞进外屏，苹果选择了集成在电源键上的指纹方案。这是一个功能加体验主义的决定：一个可靠、无感、不学习的旧方案，胜过一个需要妥协的新方案。

很多时候我们容易陷入误区，认为新产品必须搭载更新的交互。而这个案例则提醒我们交互创新不等于技术堆砌。交互的价值在于可靠、低负担，当硬件存在刚性约束时，优先选用经过验证的成熟方案，守住基础体验，远比追求概念上的先进性更重要。

对设计师而言，这是抵抗新技术必须新交互执念的好例子。

从执着追求新交互，到优先落地务实的功能主义；从单纯做大屏幕，到为 AI 多任务打造一整块连续信息画布。iPhone Duo 给出的启示十分明确，AI 时代的硬件竞争，早已脱离单纯的参数竞赛。

形态创新要服务于真实任务，硬件取舍要守住用户体验，软硬件一体，才是高端硬件长久的竞争力。

转载：人人都是产品经理

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

兰亭妙微ui设计公司分享：本周除 Figma、Photoshop 两大主力工具迎来重要迭代，还有不少值得关注的行业动态：苹果推出具备人体感知能力的家庭智能屏幕；Bluesky 开放普通用户小游戏创作能力；浏览器端也诞生了沉浸式交互短片。

同时整理了实用设计插件、动效案例与用户研究洞察，一共 15 条内容，分享给各位设计师。

业界动态

1. Figma 重大更新：打通设计、文档与代码链路

Figma 在 10 月 15 日 Config India 大会发布多项新能力：支持真实代码渲染的 Code Layers、可将 Markdown 文档嵌入画布的 Specs 功能，还完成与 Payload 的对接，拓展内容管理与数据驱动能力。

区别于过去仅聚焦设计稿交付，本次更新意在搭建一套从创意构思到产品落地的完整工作空间，部分功能尚处于测试阶段。

官方地址：https://www.figma.com/blog/build-by-design/

2. Apple HomeView：可识别用户与距离感知的智能家庭屏幕

苹果正式发布 7 英寸智能硬件 HomeView，搭载人脸识别、个性化界面与 Siri AI。

它的一大亮点是会根据用户和屏幕的距离动态调整信息密度：远距离展示核心信息，靠近后加载更多细节。对于多用户场景、空间交互设计，是非常优质的参考案例。该设备首发暂不包含中国大陆地区。

官方地址：https://www.apple.com/newsroom/2026/10

3. Photoshop 界面现代化改版：兼顾老用户习惯的体验升级

Adobe 在 Photoshop Beta 版本上线全新界面体系，重新优化工具栏图标、控件间距、选中反馈以及面板布局，同时优化隐藏工具的查找逻辑。

这次改版的核心看点并非视觉风格，而是如何在不破坏老用户操作习惯的前提下完成体验革新，对复杂 B 端产品的迭代改版极具借鉴意义。

官方地址：https://community.adobe.com/announcements-698

4. Cinema 4D 2027 更新：复杂场景与流体特效制作效率提升

Maxon 推出 2026 秋季版本 Cinema 4D 2027，新增程序化散布系统与 Liquid FX 流体特效。设计师可以高效搭建植被、大型复杂场景，快速实现水花、泡沫、喷雾等流体效果。

针对品牌视觉、三维产品渲染、动态设计，能够大幅减少重复的场景搭建工作。

官方地址：https://www.maxon.net/zh/cinema-4d/new

AI 行业资讯

5. Bluesky Attie：普通用户也能自主制作小游戏与交互网页

Bluesky 升级实验 AI 产品 Attie，普通用户无需专业代码，即可制作网站、小游戏、投票问卷等交互式内容，成果可依托 AT Protocol 生态分发分享。

不再局限于图文生成，普通用户直接创造交互体验，或许会成为下一代内容平台的发展方向。

官方地址：https://techcrunch.com/2026/10/15

6. ChatGPT 流量暴跌 47%？实为统计参数异常导致

Webflow 观测到，10 月 8‑15 日期间，旗下客户网站来自 ChatGPT 的访问流量平均下滑 47%。

后续排查确认，是 ChatGPT 临时移除链接 UTM 追踪参数，大量流量被归类为直接访问；10 月 15 日该参数已经恢复。 这是很典型的数据陷阱：指标剧烈波动，未必代表用户真实行为发生改变，做产品分析时，要优先核查数据采集逻辑。

官方地址：https://webflow.com/blog/chatgpt-traffic-drop-october-2026

工具产品推荐

7. Skisso：网页直接修改 UI，一键同步给 AI 与开发者

免费 Chrome 扩展 Skisso，可以直接选中线上网页元素做视觉调整，把改动以代码差异、MCP 协议的形式同步给开发人员与 AI 智能体。

不用再靠截图描述按钮尺寸、像素间距，对于使用 AI 编码工具的设计师，是高效的沟通利器。

官方地址：https://skisso.app/

8. TinyImage：Figma 本地完成抠图、图片放大

TinyImage 新增本地图片处理能力，支持一键抠除背景、2‑4 倍图片放大。

全部运算在本地设备完成，素材无需上传外部服务器，经常在 Figma 处理图片素材的设计师可以体验。

官方地址：https://www.hypermatic.com/tinyimage/

9. Framer Gallery 改版：按视觉氛围筛选设计灵感

10 月 15 日 Framer 更新 Gallery 灵感库，扩充网站作品分类，新增视觉氛围筛选，同时优化作品排序算法。

找参考不局限于行业、页面类型，按整体视觉风格检索，能挖掘更多创意方向。

官方地址：https://www.framer.com/updates/community/

设计素材资源

10. Canva × Mattel：230 套免费 IP 可编辑模板

Canva 联合美泰上线 230 套商用模板，覆盖芭比、风火轮、企鹅 Pingu 等知名 IP，适配海报、社交配图、邀请函、壁纸等多种场景。

除直接复用素材，也可以学习成熟 IP 如何把品牌资产开放给普通用户二次创作。

官方地址：https://www.canva.com/newsroom/news/mattel-collection/

11. GSAP 文字残影动效：滚动触发的层次感字体动画

Codrops 分享一套极具冲击力的滚动文字动效：页面滚动时文字生成连续轮廓残影，基于 Canvas+GSAP 实现，附带完整实现教程。

适合品牌官网首屏、活动页、个人作品集做创意字体动效。

官方地址：https://tympanus.net/codrops/2026/10/13/scroll-driven-ghost-trails/

设计思考与案例

12. NN/g 研究：AI 模拟用户，依然缺少真实的多样性

NN/g 对比 120 份 AI 模拟用户调研、604 份真人问卷结果：整体结论大体趋同，但 AI 生成的回答多样性严重不足。

AI 可以快速产出研究假设，但会丢失小众用户的真实声音。用户研究中那些反常、意料之外的反馈，恰恰最有价值。

官方地址：https://www.nngroup.com/articles/synthetic-users-vs-human-respondents/

13. Noho 网站案例：优秀交互，懂得做减法

Codrops 解析 Noho 改版案例：团队没有堆砌大量动画，而是结合产品特质，区分哪些环节需要动态反馈，哪些应当保持安静克制。

交互不是动效越多越好，合适的动画应当服务内容，而不是抢夺内容本身的关注度。

官方地址：https://tympanus.net/codrops/2026/10/15/noho-redesign/

拓展阅读

14. Formula E 全新品牌视觉：把 “速度” 写进整套设计系统

Mox 为电动方程式打造全新赛季品牌体系，倾斜标识、高对比配色，搭配一套能够通过字形变化传递速度感的定制字体。

非常值得参考运动品类，如何把抽象的 “速度感” 落地到完整视觉系统，而不只是停留在宣传文案。

官方地址：https://www.itsnicethat.com/articles/mox-formula-e-graphic-design-project-011026

15. Chasing the Moment：浏览器里就能体验的沉浸式交互短片

基于 Three.js 与 GLSL 打造的网页交互短片，奔跑人物、延展城市、屏幕碎裂效果共同构建沉浸式叙事。

网页不只是信息展示载体，同样可以成为交互艺术、网页电影的创作媒介，文章附带项目实现思路解析。

官方地址：https://tympanus.net/codrops/2026/10/12/chasing-the-moment/

写在最后

如今生成界面、快速搭建网站的门槛已经大幅降低。但如何做到好用、耐看，留住用户注意力，依旧需要设计师深度思考。

技术堆叠不等于更好的体验，设计师的判断力，在当下变得愈发重要。

以上就是本期 15 条设计资讯，我们下期再会。

转载：优设

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