兰亭妙微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。

导读

ParkFlow 通过极简现代的数据可视化与直观的3D空间映射，将复杂的停车与EV充电管理转化为清晰、高效的运营决策体验。 

一、产品定位：先回答系统替谁解决什么问题

ParkFlow 的核心用户群体是停车场运营方、车队管理者以及EV充电网络运营商。对于这类B端用户而言，他们面临的痛点并非缺乏数据，而是海量实时数据难以被快速消化并转化为行动。传统的停车管理系统往往充斥着密密麻麻的表格与状态灯，导致运营人员在高峰期难以迅速定位异常或空闲资源。

ParkFlow 的设计初衷正是为了解决这一"认知过载"问题。它不仅仅是一个记录工具，更是一个实时的资源调度中枢。通过覆盖实时停车状态监控、EV充电桩管理、车位预约及充电会话追踪等核心功能，该平台旨在帮助管理者在桌面端与移动端无缝切换，以最低的认知成本掌握全局，从而提升车位周转率与充电设施的利用率。

二、信息架构：把功能转译为用户的工作顺序

在信息架构层面，ParkFlow 摒弃了传统SaaS平台按"功能模块"平铺罗列的做法，转而采用以"空间与状态"为核心的逻辑结构。

导航系统采用了左侧垂直侧边栏配合顶部胶囊标签的复合结构。侧边栏使用线性图标配合选中项白色高亮，确保了在浅灰白背景下的视觉层级清晰，同时保持了界面的呼吸感。这种布局将高频操作（如实时监控、充电管理）与低频设置进行了合理的物理隔离。

更为巧妙的是，ParkFlow 将3D停车场透视地图作为Dashboard的核心载体，而非单纯的数据列表。3D地图不仅是视觉展示，更是信息架构的骨架。彩色地面高亮直接映射车位状态，蓝色虚线路径可视化连接入口与目标车位。这种设计将抽象的数据库状态转译为符合人类直觉的空间关系，让用户在浏览信息时，大脑无需进行"列表-位置"的二次转换，直接完成了从"看数据"到"看现场"的认知跨越。

三、关键交互：从浏览信息走向完成任务

优秀的B端设计不仅要"好看"，更要"好用"。ParkFlow 在交互细节上体现了对运营工作流的深刻理解。

在数据可视化交互上，平台采用了多维度的图表组合。折线图配合渐变填充展示趋势变化，弧形仪表盘直观呈现百分比进度，柱状图反映能耗趋势。这些图表并非静态展示，而是与3D地图形成联动。当用户在地图上点击某个充电区域时，右侧或悬浮面板会即时刷新该区域的详细能耗与占用数据，实现了"宏观概览"到"微观钻取"的流畅体验。

针对EV充电这一核心场景，ParkFlow 引入了3D渲染的白色电动车模型置于淡蓝色光晕底座上。这一设计不仅提升了界面的科技感，更承担了状态指示的语义功能。结合电光蓝（充电状态）与荧光绿（可用/活跃状态）的动态反馈，用户无需阅读文字即可通过颜色与光效判断设备状态。此外，地图悬浮控件的设计减少了页面跳转，让用户在不离开主视图的情况下即可完成缩放、筛选与详情查看，极大缩短了任务完成路径。

四、视觉系统：品牌表达必须承担信息语义

ParkFlow 的视觉系统严格遵循"形式追随功能"的原则，其极简现代的风格并非为了单纯的审美，而是为了降低视觉噪音。

在配色方案上，黑白灰的主色调构建了稳定的信息容器，而强调色的使用则具有严格的语义规范。电光蓝专用于充电状态与核心数据曲线，荧光绿代表可用与活跃，橙黄色则用于警示或次要趋势对比。这种色彩编码系统（Color Coding）确保了在复杂的Dashboard中，用户的视线能被自动引导至关键信息，避免了色彩滥用导致的注意力分散。

卡片样式采用圆角矩形配合轻微阴影与边框，这种悬浮式设计在浅灰白背景上建立了清晰的Z轴层级。它模拟了真实办公环境中的纸张或屏幕叠加感，既区分了信息模块，又保持了整体的通透性。背景采用的柔和浅蓝渐变，模拟了明亮办公环境的光照感，有效缓解了B端用户长时间面对屏幕产生的视觉疲劳。

五、面向产品与设计团队的可复用价值

ParkFlow 为同类B端SaaS产品提供了一套可复用的设计范式。

首先是"空间化数据"的设计思路。对于涉及物理资产管理的系统，将数据锚定在空间地图上远比纯列表高效。ParkFlow 证明了3D渲染与2D UI的融合是可行的，关键在于克制——3D仅用于状态映射，而非炫技。

其次是"语义化色彩系统"。在设计规范中，颜色不应仅由品牌色决定，更应由业务状态决定。ParkFlow 的电光蓝与荧光绿不仅是品牌资产，更是交互反馈的一部分，这种将UI组件与业务逻辑深度绑定的做法，值得所有工具类产品借鉴。

最后是"渐进式披露"的交互策略。通过胶囊标签与悬浮控件，ParkFlow 避免了将所有功能一次性堆砌在用户面前。这种设计降低了Onboarding的学习成本，让新手用户能快速上手，同时为专家用户保留了深度操作的入口。 

跨行业经验复用：本项目的UI 交互设计方法论并非孤立存在。我们作为一站式 UI设计服务公司，同时也是专业的软件界面设计公司，在银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计等多个垂直领域积累了深厚的经验。作为 UI交互设计公司，我们深知不同行业对界面交互的特殊要求；作为数据可视化设计公司的复杂仪表盘方案，以及高端网站设计公司的品牌级视觉呈现，这套"以用户任务为中心"的信息架构逻辑均可复用。同时，我们在软件qt开发、软件wpf开发、软件vue开发等技术栈上均有成熟落地能力，确保设计稿能够被高保真还原。

六、专业审视：仍需补齐的体验边界

尽管ParkFlow 在视觉与核心交互上表现优异，但在实际落地中仍需审视以下体验边界：

• 3D地图的性能与无障碍性：3D渲染对设备性能有一定要求，在低配终端或弱网环境下，需考虑提供2D平面地图的降级方案。同时，纯视觉的状态映射需辅以文字标签或屏幕阅读器支持，以满足无障碍访问标准。

• 复杂任务的批量处理：当前设计侧重于单点状态的监控与查看。对于车队管理者而言，批量预约、批量下发充电指令等高频任务，可能需要更高效的表格视图或快捷键支持，纯图形化界面在处理大规模并发操作时可能存在效率瓶颈。

• 暗色模式的支持：考虑到监控中心或夜间运营场景，浅灰白基调可能产生眩光。增加一套高对比度的暗色模式，不仅是视觉需求，更是B端产品的必备体验保障。

结语：设计的最终判断标准是业务与使用价值

设计的最终判断标准是业务与使用价值。ParkFlow 智能停车与EV充电管理平台通过精准的视觉语义、空间化的信息架构以及克制的交互细节，成功地将复杂的物联网数据转化为直观的运营洞察。它证明了在B端SaaS领域，极简现代的设计语言不仅能提升品牌质感，更能切实解决效率与认知问题。

未来，随着EV充电网络的进一步扩张，ParkFlow 若能在保持视觉一致性的基础上，持续优化大规模数据下的交互性能与多端协同体验，将有望成为该垂直领域的体验标杆。对于设计团队而言，ParkFlow 最大的启示在于：不要为了设计而设计，每一个像素、每一处光效，都应是业务逻辑的视觉翻译。

兰亭妙微作为作为专业的用户体验公司，我们始终坚持：好的界面设计公司不仅要交付好看的画面，更要交付可执行、可追溯、可修正的产品体验。无论是UI咨询还是完整的UI设计公司项目交付，核心始终不变——让技术真正服务于人的需求。

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

《About Face 4：交互设计精髓》被很多设计师奉为 "交互圣经"，兰亭妙微团队也反复研读。上一篇我们聊了目标导向设计中的用户研究和人物模型，今天继续往下走 —— 从研究到设计，中间的鸿沟怎么弥合？设计框架怎么搭？团队怎么协作？

做设计久了，你会发现一个规律：80% 的设计是标准化的，只有 20% 是真正需要创新的。 但很多团队把精力花在了那 80% 的重复劳动上，反而没时间打磨那 20% 的核心创新。兰亭妙微在多个项目中摸索出一套解决方案 —— 建立可重用的交互设计框架和模式体系。今天把这套方法系统分享出来。

对于参与该项目数月的设计师和开发人员来说，很多背景信息早已耳熟能详。我们知道哪些屏幕代表初始状态，哪些操作会导致每次变化，哪些状态是备选方案，以及哪些细节仍在讨论中。

面对这份文件，编码代理完全不了解这些背景信息。单个屏幕提供的上下文不足以解释完整的行为，而整个画布又引入了太多无关信息。我们需要一种方法，围绕单个交互组织相关的框架、状态和决策，以便在人工智能辅助开发中更有效地理解和使用它们。正是这种需求催生了我们的 Box 设计系统。

网站的诞生始于有人坦白自己害怕购买的东西。它始于他们在午夜输入的搜索词，他们在论坛上反复抱怨的内容，他们几乎信任的竞争对手，以及他们在填写表格前需要的证据。

这就是为什么我不把心理细分视为研究的附录，而是首要的增长要素。如果运用得当，它能为品牌、搜索引擎优化 (SEO)、内容、界面、付费媒体和效果衡量指明方向。而网站正是这些决策最终得以体现的地方。

兰亭妙微ui设计公司分享：栅格系统的基础概念网上已有大量详尽讲解，本文不再赘述。主要结合我实际工作中踩过的坑，聊聊很多 B 端设计师都会纠结的核心问题：B 端后台，究竟该选用什么尺寸做设计稿？

一、先理清页面基础布局

确定设计尺寸的前提，是先选定页面布局模式。B 端后台最常用三类布局，其余大多是这三类的变体与延伸：

1. 上下布局：顶部导航固定，主体内容向下滚动，和普通网页逻辑接近。常见于帮助中心、消息通知、业务申请页等辅助页面。
2. 左右布局：左侧侧边栏固定，右侧内容区域自适应缩放，是中后台最主流的形式。
3. T 字布局：顶部全局导航 + 左侧二级菜单，同样属于固定侧边 + 内容自适应的逻辑。

二、结合业务场景，敲定设计尺寸范围

从设备统计数据来看，如今低分辨率电脑占比持续走低，但这不代表我们直接选用市场占比最高的 1920 分辨率作为设计基准。

上下布局的 B 端页面，和普通网页逻辑一致，若无特殊需求，有效内容区域优先遵循 1200px。网上流传的 960px、990px、1024px、1156px 等数值，没有硬性对错，业务无特殊约束时均可使用。

日常工作里，多数 B 端设计师会选用 1440px、1920px 两个基准尺寸出稿。 上下布局更多属于 B 端的补充页面，尺寸基准建议和核心的左右布局页面保持统一，整套产品设计稿口径一致。

早些年不少大厂文章会推荐 1280px 作为基准，出发点是规避浏览器窗口缩小后出现内容挤压、遮挡问题。但随着前端技术迭代，如今 1280px 已经不再是最优选择。

• 1440px：中后台通用首选（参考 Ant Design） 兼容性更强，用户设备复杂、SaaS 多客户场景优先选它，可以更好向下兼容低配办公电脑。
• 1920px：同样可行 我自己的项目中也实际使用过，线上并未出现用户反馈异常。但向下适配小屏幕会存在一定压力。
• 企业私有化定制项目 如果是给单一企业做内部系统，直接调研客户办公电脑的实际分辨率，按客户设备尺寸设计即可。

小结：面向多用户的通用 B 端产品，优先以 1440px 作为设计基准；私有化定制项目，以客户实际设备为准。

三、B 端栅格系统实战搭建

市面上诸多设计插件都可以快速生成栅格，工具只是手段，核心是理解栅格参数逻辑，下面分享我在 Sketch 中搭建 1440 规格 B 端栅格的实操经验。

参考栅格参数（1440 设计稿）

• 顶部导航栏高度：建议控制在 60‑80px，尽量不超过 100px；
• 左侧侧边栏：根据菜单文字多少灵活设置，常规 200px 上下；
• 页面边距：20px / 24px；
• 剩余内容区域划分栅格列，列宽优先使用偶数。

栅格宽度：1192px，列宽 42px，间距 8px，边距 24px，左侧菜单栏 200px。

实际制作时，偶尔会出现部分列宽 42px、部分 43px 的情况，不必过度纠结像素绝对均等。 栅格系统的核心目标不是像素严丝合缝，而是实现视觉秩序、排版统一协调。

没有绝对标准、永远正确的栅格，只有适配自身业务的栅格。

希望本文可以帮到还在纠结 B 端尺寸与栅格的设计师，欢迎一起交流探讨。

转载：优设

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

一、表单基础构成

兰亭妙微ui设计公司分享：标准 B 端表单主要由表单标签、表单域、提示信息、操作按钮四大模块组成，每个模块各司其职，共同保障表单信息录入、提交的完整流程。

• 表单标签：对输入项进行说明，告知用户需要填写什么内容；

• 表单域：用户实际操作输入的控件，输入框、下拉选择、单选复选、日期选择器等都属于表单域；

• 提示信息：包含占位提示、填写规则、校验报错、说明备注，用来引导用户正确输入；

• 操作按钮：完成表单提交、重置、取消、保存草稿等行为的交互入口。

二、表单常见呈现方式

根据业务场景、表单字段数量，B 端表单一般有弹窗、抽屉、独立页面三种承载形式：

1. 弹窗：适合字段少、轻量操作，不希望页面跳转打断当前工作流；字段过多时不建议使用，容易出现滚动嵌套，体验变差。
2. 抽屉：兼顾上下文保留与中等长度表单，从侧边滑出，用户可以隐约看到背后主页面，适合编辑详情类业务。
3. 独立页面：用于字段繁多、流程复杂的表单，拥有完整页面空间，适合新建、复杂数据录入场景。

三、表单排版布局方案

合理的布局可以降低用户填写负担，提升填写效率，常用布局分为以下 5 种形式：

1. 平铺布局

将全部表单项顺序平铺展示，结构简单直观，适合字段数量不多的简单表单。

2. 分组布局

按照业务逻辑对字段做模块分组，设置分组标题，把关联性强的信息归类，降低用户认知负担，是 B 端最常用的方案，适合字段较多的表单。

3. 步骤表单

把复杂业务拆分为多步骤，分步填写，每一步只展示对应模块内容，适合流程化、多阶段提交的业务，例如申请、审批类表单。

4. 锚点定位

针对超长单页表单，设置侧边锚点导航，点击锚点可快速跳转到对应表单区块，方便用户快速定位、修改填写内容。

5. 排列方式：单列布局 & 多列布局

• 单列布局：所有输入项纵向单列排布，阅读视线流顺畅，容错率高，绝大多数 B 端表单优先选用；
• 多列布局：同一行放置多个输入控件，节省页面横向空间，适合短字段；注意不要滥用，字段过长容易造成阅读混乱。

转载：优设

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

导读｜从实时ECG录制、心率效率分析到多设备无缝协同，构建“监测-分析-干预”的心脏健康闭环。本文不止评价画面风格，而是从产品目标、信息组织、行为路径、视觉语义和落地风险五个层面拆解这套方案。

— — —

一、产品定位：先回答系统替谁解决什么问题

Rythea 并没有把自己限制为一款普通的心率记录工具或简单的健康数据看板，而是试图建立一个覆盖心电图录制、心率效率分析、生物电阻抗评估与多设备协同的医疗级心脏健康操作系统。桌面端承担全局洞察与长期趋势，移动端承接高频执行，AI则被安排在心律判断、异常预警与健康管理建议等关键决策点。

图1：Rythea 用户注册流程与个人健康仪表盘——从账号创建到心脏健康概览的一站式入口

从用户首次打开 App 的“Create an Account”注册页开始，Rythea 就传递出明确的信号：这不是一个娱乐化的健身 App，而是一个严肃的健康管理平台。左侧深色背景搭配红色点阵心脏视觉，右侧简洁的白色表单，建立了科技感+医疗专业的第一印象。注册完成后，用户直接进入以姓名、年龄、ECG结果为核心的个人仪表盘，无需额外配置即可获取关键健康信息。

二、信息架构：把功能转译为用户的工作顺序

信息架构围绕“当前心脏状态—历史趋势—设备管理”展开。首页以当日心率、ECG结果、心脏效率为优先层级；心电图录制、生物电阻抗和设备管理被组织为可进入的任务模块；长期数据则沉淀到进度看板。这样的分层既照顾即时行动，也保留专业用户对趋势和细节的需求。

图2：桌面端健康仪表盘——心率对比、运动平均心率、心脏效率与设备状态的集中展示

桌面端仪表盘是信息架构的典型代表。以用户 Ryan Walker 的视图为例，页面顶部展示基础个人信息，中部以醒目的大字号呈现当前周平均心率（72 bpm）与上周对比（78 bpm），并通过“Down 6 bpm”的箭头指示变化方向。下方的运动平均心率区间（79-127 bpm）和心脏效率（87%）以卡片形式并列展示，既独立又关联。底部的设备连接状态（Apple Watch Series X，80%电量）和ECG录制入口则构成了操作层的快捷通道。

图3：移动端仪表盘——ECG与Bio Impedance双卡片布局，支持滑动切换

移动端设计延续了桌面端的信息层级逻辑，但针对小屏进行了适配优化。首页采用“ECG卡片+生物电阻抗卡片”的双卡片布局，每张卡片清晰展示检测日期、核心数值和状态标签。关键健康指标通过简单的滑动即可切换，降低了用户在移动端的信息获取成本。底部导航栏采用胶囊式设计，“Dashboard”作为核心入口始终居中突出，其余功能图标环绕分布，符合单手操作习惯。

三、关键交互：从浏览信息走向完成任务

交互亮点是把复杂的心血管数据转译为可执行反馈。ECG波形、心率区间、录制进度不是装饰，而是把心脏状态直接显性化。ECG录制采用开始—录制—结果的三段式流程，减少用户在关键健康操作中的认知负担。

图4：ECG录制交互流程——左侧浅色模式展示录制结果（窦性心律/正常ECG），右侧深色模式展示录制进行中的沉浸式体验

ECG录制界面是 Rythea 最具差异化的交互设计。左侧浅色模式展示录制完成后的结果页：顶部显示“Sinus Rhythm”（窦性心律）诊断结论，中部以红色点阵波形图呈现心电图，右侧标注心率数值（94 bpm）和“Normal ECG”状态标签。右侧深色模式则展示录制进行中的状态：巨大的心率数字悬浮于红色粒子球体之上，底部进度条实时反馈录制进度，“Touch the watch”提示用户完成操作。两种模式的并置展示了 Rythea 对深色/浅色双主题的完整覆盖。

设备管理页面则展示了多设备协同的交互逻辑。用户可以看到已连接设备（Watch）的持续时间（1m 30s）、状态（Normal）、信号质量（Good）和实时心率（83 bpm），所有关键参数以卡片列表形式排列，一目了然。

四、视觉系统：品牌表达必须承担信息语义

图5：设备管理与实时监测页面——智能手表心率监测与底部数据卡片阵列

深色背景建立专注、专业与医疗级信任感，红色作为核心操作色和强调色，在大面积黑白灰中保持清晰焦点；点阵式数据可视化让医疗级数据不至于显得冰冷，同时保持跨设备视觉一致。

Rythea 的视觉系统有以下几个显著特征：

· 色彩策略：主色调采用纯黑白灰构建专业医疗基调，红色作为唯一的强调色，用于心电图波形、心率数字、关键按钮和加载进度条。这种“一色点睛”的策略确保了视觉焦点的绝对清晰——在健康类应用中，用户需要瞬间识别的是“正常”还是“异常”。

· 点阵可视化语言：Rythea 最具辨识度的视觉资产是点阵式数据呈现。无论是心电图波形还是心率数字，都采用红色圆点矩阵构成，既呼应了医疗监测中“像素化读取”的专业意象，又赋予了数据一种数字艺术的美感。

· 卡片与留白：所有功能模块以圆角卡片承载，卡片之间留有充足的呼吸空间。白色背景（浅色模式）与纯黑背景（深色模式）的切换不是简单的颜色反转，而是针对内容类型精心调校的——数据概览偏好浅色背景以保证可读性，实时录制偏好深色背景以营造沉浸感并减少视觉疲劳。

· 跨设备一致性：从桌面端浏览器到移动端 App，从浅色到深色主题，Rythea 保持了统一的点阵视觉语言、圆角卡片规范和红色强调色体系，确保用户在任何设备上都能获得一致的品牌体验。

五、面向产品与设计团队的可复用价值

对产品经理而言，最值得借鉴的是“医疗级数据的轻量化表达”：心电图不是波形图的简单罗列，而是通过点阵艺术化呈现，让专业数据变得可感知。Rythea 证明了即使是高度专业的医疗指标，也可以通过精心设计的视觉转译，让非专业用户理解并关注自己的健康状况。

对设计团队而言，要重点维护“深色/浅色双模式”的一致性：Rythea 的浅色模式和深色模式不是简单的颜色反转，而是针对不同使用场景的精心调校。数据概览页面偏好浅色背景以保证长时间阅读的可读性，实时录制页面偏好深色背景以营造沉浸感并减少视觉疲劳。这种场景驱动配色的思路，值得在各类数据密集型产品中复用。

此外，Rythea 的多设备协同设计也值得借鉴：从 Apple Watch 的心率采集到手机 App 的数据展示，再到桌面端的趋势分析，形成了一个完整的数据流转闭环。设计团队需要关注的是不同设备间的数据同步状态可视化和操作延续性。

六、专业审视：仍需补齐的体验边界

现有方案的主要风险是医疗数据的隐私安全与AI判断的容错性。

结语：设计的最终判断标准是业务与使用价值

Rythea 展示了 AI 健康产品从工具走向陪伴式系统的路径：以数据建立理解，以即时反馈维持行动，以设备协同扩展服务边界。红色点阵心脏从注册页的装饰元素，逐步转化为 ECG 录制中的实时波形、仪表盘中的效率指标、设备管理中的状态指示——同一个视觉符号在不同场景中被赋予了不同的信息语义，这正是优秀设计系统的核心价值。

真正决定产品可信度的，不是界面有多炫酷，而是每条健康建议是否透明、可执行、可被用户理解。当用户看到心脏效率 87%时，他不仅需要知道这个数字是怎么来的，更需要知道87%意味着什么以及我该如何改善。Rythea 迈出了重要的一步，而如何在专业医疗严谨性与用户体验友好性之间找到最佳平衡点，将是这套设计持续演进的核心命题。

兰亭妙微作为作为专业的用户体验公司，我们始终坚持：好的界面设计公司不仅要交付好看的画面，更要交付可执行、可追溯、可修正的产品体验。无论是UI咨询还是完整的UI设计公司项目交付，核心始终不变——让技术真正服务于人的需求。

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