导读

从个性化推荐、智能搜索到订单追踪，构建完整的电商购物行为闭环。本文不止评价画面风格，而是从产品目标、信息组织、行为路径、视觉语义和落地风险五个层面拆解这套方案。

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

Banggood并没有把自己限制为一款简单的商品目录或比价工具，而是试图建立覆盖发现、比较、购买、追踪的全链路个人购物操作系统。移动端承担高频浏览与即时购买，AI则被安排在个性化推荐、智能搜索与购物决策辅助等关键决策点。

桌面端展示设计总览与品牌视觉规范，移动端承接高频执行——从首页商品发现到下单支付，AI被安排在智能推荐、搜索联想与订单状态预测等关键节点，形成从"看见"到"买到"的完整闭环。

【配图1：UI Showcase设计总览——品牌视觉规范与界面架构概览】

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

信息架构围绕"我想买什么—正在看得怎样—下一步如何下单"展开。首页以热门趋势、分类导航、个性化推荐为优先层级；搜索、分类浏览和商品详情被组织为可进入的任务模块；订单与账户数据则沉淀到个人中心。这样的分层既照顾即时购物需求，也保留用户对物流追踪和售后管理的需求。

【配图2：移动端首页——商品发现与个性化推荐】

【配图3：多场景界面流程——从注册引导到购物全链路】

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

交互亮点是把复杂的购物流程转译为可执行反馈。商品卡片、评分星级、价格对比和一键加购不是装饰，而是把商品价值、用户评价和购买动作直接显性化。智能搜索将关键词识别与分类筛选连接，购物车采用增减数量和实时价格更新，减少用户在购物过程中的额外操作步骤。

心愿单功能让用户可以跨会话保存感兴趣的商品，订单追踪模块则将物流状态以时间轴形式可视化，使用户随时掌握配送进度。这些设计共同降低了购物决策的认知负荷，让"加入购物车"到"确认下单"的路径尽可能短。

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

活力橙色作为核心操作色，在大面积白灰背景中保持清晰焦点；商品图片与卡片圆角设计让购物界面不至于显得冰冷，同时保持跨页面视觉一致。星级评分、价格标签和促销标识形成具有语义的视觉层级，引导用户快速决策。

卡片圆角、柔和阴影和商品抠图让电商数据不至于显得枯燥，同时保持跨模块视觉一致。顶部导航栏、底部导航栏和弹窗组件采用统一的圆角半径与阴影深度，形成可识别的品牌视觉语言。

【配图4：个人中心与账户管理——用户资产管理】

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

对产品经理而言，最值得借鉴的是跨场景闭环：商品浏览并非终点，而是必须进入搜索筛选、加入购物车、下单支付和物流追踪。对设计团队而言，要重点维护商品信息、价格变化和订单状态之间的可追溯关系，使用户清楚每个操作的结果和下一步。

Banggood的设计方案展示了如何将"发现—比较—购买—追踪"的电商全链路压缩到一个连贯的移动体验中。其可复用价值在于：用统一的卡片语言承载不同业务场景（商品列表、心愿单、购物车），用一致的交互模式（加购、收藏、追踪）降低学习成本。

【配图5：订单追踪与物流可视化——购后体验闭环】 

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

现有方案的主要风险是功能密度较高，商品卡片在列表页容易出现视觉竞争。建议强化"当前操作目标"，将次要信息折叠为按需展开；订单追踪应增加实时位置更新和异常预警；社交分享与评价模块也应允许用户控制个人购物数据的可见范围。

此外，深色模式适配、无障碍设计（如色盲友好的评分展示）和弱网环境下的降级策略也是值得关注的体验边界。AI推荐的可解释性——即告诉用户"为什么给你推荐这个商品"——同样能显著提升信任感。

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

Banggood展示了电商应用从工具走向陪伴式购物系统的路径：以推荐建立发现，以搜索形成意图，以追踪维持信任。真正决定产品可信度的，不是展示了多少商品，而是每条商品信息是否透明、购买流程是否顺畅、每次交付是否可被用户追踪。

当购物不再是一次性的交易行为，而是一段持续的用户关系时，设计的价值才真正开始显现。Banggood的方案为同类电商产品提供了一个可参考的框架：用数据驱动个性化，用交互降低决策成本，用视觉建立品牌信任。

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

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

交互设计到底要做到什么程度才算好？兰亭妙微在团队内部经常讨论这个问题。偶然看到一张思维导图，把软件交互设计分成了五个层次，结合我们的项目经验，发现这个分层模型非常实用 —— 它不仅是一套评价标准，更是一条设计师的成长路径。

很多交互设计师拿到需求就开始画原型、抠细节：这个地方用复选框还是单选框？点按钮后菜单从顶部弹还是底部弹？流程能不能少一步？这些工作当然重要，但兰亭妙微在项目中反复强调：如果方向错了，细节做得再精致也没有意义。

做设计久了，我们越来越意识到一个事实：用户选择一个产品，很多时候不是因为它功能最强，而是因为它 "让人舒服"。这种舒服，来自情感化设计。兰亭妙微团队最近重读了《怦然心动 —— 情感化交互设计指南》，把书中的核心观点结合我们的项目经验做了一次梳理。

任何一款 APP 都少不了提示。当系统需要告知用户某些特殊消息时，弹框就出场了。但提示是一把双刃剑 —— 用得好，用户觉得贴心；用不好，用户在连续操作中突然被打断，体验瞬间崩塌。兰亭妙微在项目中整理了一套完整的提示体系，今天分享给大家。

导读｜从AI植物扫描、智能分析到养护教程，构建连续的植物健康照护闭环。本文不止评价画面风格，而是从产品目标、信息组织、行为路径、视觉语义和落地风险五个层面拆解这套方案。

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

Zolve并没有把自己限制为一款简单的植物识别工具，而是试图建立覆盖扫描诊断、数据分析、养护指导与成长追踪的个人植物健康操作系统。移动端承担高频执行，AI则被安排在植物识别、健康诊断和养护建议等关键决策点。

从Scangrow品牌标识到zolve应用本体，产品通过"扫描—分析—建议"的核心链路，将植物养护从经验驱动转变为数据驱动。桌面端承担全局洞察与长期趋势，移动端承接高频执行，AI则被安排在计划生成、动作反馈和植物变化解释等关键决策点。

图1：Zolve AI植物扫描诊断界面——核心扫描能力展示

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

信息架构围绕"我的植物怎么了—正在做得怎样—下一步如何调整"展开。首页以当日植物扫描入口、实时健康指标为优先层级；养护教程、智能语音分析和成长记录被组织为可进入的任务模块；长期数据则沉淀到生长看板。这样的分层既照顾即时行动，也保留专业用户对趋势和细节的需求。

着陆页以"Plant Scan"为核心入口，将Growth Rate、Leaf Hydration、Soil Moisture等关键指标前置展示，配合"Get Free Trial"和"Download App"的行动号召，形成清晰的信息优先级。72K用户数据的社会证明进一步强化了产品可信度。

图2：Zolve产品着陆页——信息层级与核心入口

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

交互亮点是把复杂植物数据转译为可执行反馈。植物健康指标卡片（Water Level、Humidity、Light、Fertilization）、智能分析语音播报、生长趋势图表和近期更新记录不是装饰，而是把植物状态、偏差和建议直接显性化。

植物扫描将摄像头识别与健康指标连接，Smart Analysis功能采用语音播报形式提供养护要点，减少用户在植物养护方面的额外学习负担。Plant Care Tutorial由专家指导，形成从诊断到执行的完整闭环。

图3：Spathiphyllum植物分析仪表盘——交互式数据面板

图4：植物养护教程详情——专家指导与实时指标

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

浅色背景建立清新、自然与专业感，绿色作为核心操作色，在大面积白灰中保持清晰焦点；橙色仅用于湿度偏低、光照过强等需关注指标，形成具有语义的第二强调色。

卡片圆角、柔和阴影和植物摄影让医疗级数据不至于显得冰冷，同时保持跨设备视觉一致。Smart Analysis的音频播放器控件、Growth Month的趋势折线图和Recent Updates的时间线列表，共同构建了一套既专业又亲和的视觉语言。

图5：植物健康详情面板——视觉设计与数据可视化

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

对产品经理而言，最值得借鉴的是跨场景闭环：数据采集并非终点，而是必须进入诊断生成、养护执行、反馈解释和再次调整。Zolve将植物扫描、健康指标监测、专家教程和成长追踪串联为完整闭环，每个环节的数据都服务于下一个决策点。

对设计团队而言，要重点维护指标口径、植物状态和AI建议之间的可追溯关系，使用户知道系统为何给出某项养护建议，而非只展示漂亮的植物健康分数。Recent Updates时间线设计值得借鉴——它将每一次养护操作（Growth、Watering、Light）都记录在案，形成可回溯的植物照护日志。

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

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

现有方案的主要风险是功能密度较高，卡片在小屏上容易出现同权竞争。建议强化"今日唯一主任务"，将次要指标折叠为按需展开；AI植物诊断应增加置信度与非诊断性提示，避免用户将AI建议当作绝对权威；社交模块也应允许用户控制植物数据的可见范围。

此外，Plant Care Tutorial的专家内容生产机制需要持续投入，若更新频率不足容易形成内容空心化。Smart Analysis的语音播报在嘈杂环境下可用性有限，应考虑提供文字摘要作为备选。

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

Zolve展示了AI植物护理产品从工具走向陪伴式系统的路径：以扫描建立理解，以分析形成认知，以即时反馈维持养护行动。真正决定产品可信度的，不是模型生成了多少建议，而是每条建议是否透明、可执行、可被用户修正。

从Scangrow的扫描入口到zolve的完整养护闭环，这套设计方案展示了AI原生产品设计的成熟思路——让技术隐形，让体验显性，让每一株植物都能获得科学、及时、可追溯的照护。

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

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

写在前面

兰亭妙微ui设计公司分享：一套完整的 Web 设计语言库，由设计价值观、设计法则、布局、视觉、数据可视化、动效六大模块共同搭建。本文聚焦布局模块（后续将覆盖视觉、数据可视化）展开完整解读优设网。

本文参考 Ant Design、Element Design、Google Design 等成熟业界设计体系，结合多类已上线 Web 产品实践沉淀而成，涵盖展示官网、交易商城、后台管理系统、组件工具平台等不同业务场景。 内容基于 2020‑2021 年项目 1.0 版本总结，互联网产品迭代速度快，部分内容仍有待实践验证与迭代更新，欢迎大家交流指正。

Web 布局体系将从四大维度展开：框架布局、页面层级、栅格系统、Web 页面适配。

提示：全文篇幅较长，建议收藏阅读。各章节知识点关联性较强，合并成文更利于建立完整认知。版权归原出处所有。

一、框架布局

框架布局是 Web 页面的骨架基底。只有确定整体页面框架，才可以在此基础上搭建统一视觉样式、定义功能操作、完善交互流程。本章节包含设计原则、基础布局、扩展布局、懒加载四部分。

1. 设计原则

1. 一致性：保证全产品布局结构与视觉表现统一，降低用户认知成本，提升使用舒适度。
2. 逻辑性：页面模块划分、信息排布具备清晰逻辑，模块之间结构关系通顺。
3. 可扩展性：无论业务简单或复杂，布局框架可跟随需求迭代做结构延展，支持功能扩容。
4. 可预测性：选用用户熟悉、可识别的布局范式，贯穿产品全使用场景，合理引导用户行为。

2. 基础布局

基础布局包含上下布局、左右布局、T 型布局，结构简单，是 Web 产品中最高频使用的框架模式。

1. 上下布局 页面上半部分为导航区，下半部分承载主内容。导航栏宽度会限制导航条目数量与文字长度；适合导航条目较少、页面内容篇幅较长的产品，是应用范围最广的布局形式。
2. 左右布局 页面左侧放置全局导航，右侧为内容区。导航常驻可视区域，便于多页面快速切换；适合整体业务结构简单的网站。
3. T 型布局 多用于资讯、社交文章类产品。顶部设置全局导航承接全部一级入口；内容区域继续二次切分，一边为侧边菜单栏，另一边为主内容，侧边栏可置于左侧或右侧。

3. 扩展布局

扩展布局是基础布局的进阶变体，包含C 型布局、口型布局，适合承载大量信息、业务模块复杂的系统。

1. C 型布局：T 型布局的延伸，同时融合水平顶部导航与垂直侧边导航，清晰区分高频业务操作与辅助功能；多用于模块繁多的后台管理系统。
2. 口型布局：C 型布局进一步拓展，双侧均增加侧边栏，最大化利用屏幕版面，能够容纳最多功能与信息。缺点是页面信息密度高，灵活性偏弱，常见于工具类、资讯类平台。

4. 懒加载

懒加载是长页面的图片延迟加载方案：图片仅在滚动进入浏览器可视区域后才触发请求渲染，能够加快页面首屏渲染、减轻服务器压力。骨架屏（灰色占位） 是懒加载过程中的过渡占位效果。

以电商长列表页面举例：如果一次性加载全部商品图片，海量资源请求会造成长时间白屏、页面闪烁，极端情况甚至引发页面崩溃，严重损害用户体验，懒加载可以很好规避该类问题。

二、页面层级

页面层级用于规范页面元素的堆叠顺序、所属层级与组合规则。 从底层到顶层固定顺序：背景层 → 内容层 → 全局控制层 → 蒙版层 → 弹出层。下文以复杂度较高的口型布局为例做分层说明。

1. 背景层

位于整个页面最底层，样式固定。通常使用中性底色，目的是衬托上层的内容层与全局控制层。 分为纯色背景与图片背景：

• 纯色：常用中性色 #ffffff、#fafafa、#f5f5f5；
• 图片背景：由图形、图像、装饰文字构成，多用于页面美化、视觉引导。

2. 内容层

业务关联性最强的核心层级，位于背景层之上。承载用户需要获取的核心业务信息与配套操作，例如表单录入、数据列表、详情弹窗、说明文本等。

3. 全局控制层

堆叠在内容层之上，承载全站级的导航、菜单、侧边栏，负责整个产品的全局跳转与功能切换。

4. 蒙版层

极少单独使用，通常配合弹出层出现；通用样式为半透明黑色遮罩 rgba(0,0,0,0.5)。 作用：锁定下层内容、导航栏的交互，视觉聚焦弹窗，引导用户完成当前任务。

5. 弹出层

页面最高优先级层级，用来承载临时交互任务，典型代表为对话框组件。 以弹窗、侧边滑出等形式唤起；弹窗出现时底层页面被蒙版禁用不可操作，用于需要强聚焦的分支业务流程。

三、栅格系统

栅格系统为页面排版、尺寸定义提供标准化参考，让页面设计具备可遵循的规律。熟练运用栅格，能够降低设计决策成本、提升团队协作效率，同时实现响应式，保障设计稿还原质量。

① 关于栅格

• 轻量简单项目：12 栅格即可满足绝大多数需求；
• 信息量大、模块分组复杂的大型后台项目：推荐24 栅格，拆分粒度更细。

栅格两大基础单元：

• Column（列）：内容容器；
• Gutter（水槽 / 槽）：列与列之间的留白间距，控制页面呼吸感。

计算公式：列宽 + 水槽宽度 + 页面左右边距 (Margin) = 页面总宽度 内容可视区域宽度 = N 个列 + (N‑1) 个水槽。

以上下布局的 24 栅格举例：水槽 Gutter 为固定值；浏览器缩放时，列 Column 会跟随视口伸缩，水槽保持固定不变，12 栅格逻辑同理。

② 模块

模块即页面设计区块，可以是文本、图片、卡片等各类内容。装饰性背景元素不需要严格遵守栅格约束。

以 12 栅格为例，模块可以做均等分割（2/3/4/6/12 等分），也可以做非对称比例划分（1:2、1:3:2、3:5 等），设计师可以结合业务场景自由组合。

③ 间距系统

栅格不仅管控排版，同时规范页面元素对齐与间距，保证整体页面的韵律与一致性。 目前主流桌面设备分辨率大多可被 8 整除，行业普遍采用8n 原子间距规则：模块尺寸、内外间距优先取 8 的倍数。

对比参考：

• 2/4/6：粒度太细碎，容易打乱页面节奏感；
• 10：数值跨度偏大，细分场景灵活性不足；
• 8：兼顾细分能力与整体节奏，适用性更广；极小细节可补充 4px 作为辅助。

④ 关于适配

定义三个基础概念：

• Fixed固定宽度：尺寸写死，不跟随浏览器缩放；
• Auto自适应宽度：随视口大小自动拉伸收缩；
• Min最小宽度：页面允许压缩的下限。

1. 上下布局：分为固定宽度、全屏宽度两种模式
   • 固定宽度：PC 端常用固定值 1200px，两侧 Auto 区域随屏幕自适应；
   • 全屏宽度：内容区设置左右最小边距 Min，防止内容贴边被截断。
2. 左右布局、T 型布局：侧边导航、菜单栏 Fixed 固定，主内容区 Auto 自适应。
3. C 型、口型扩展布局：两侧边栏 / 导航栏为 Fixed 固定，中间内容区域 Auto 自适应。

四、Web 页面适配

本章节覆盖响应式、中断点、布局类型、流动布局模块处理、自适应五大知识点。

① 响应式（Responsive）

一套代码、一套页面同时适配多终端设备。 适用场景：交互简单、迭代频率低的展示类官网。

实现两大必要条件：

1. 页面建立弹性网格，元素尺寸优先百分比，减少大量固定 px；
2. 图片资源支持伸缩，不写死图片宽高。

栅格系统正是实现响应式网页的基础手段。

② 中断点（断点 Breakpoint）

浏览器窗口不断缩放到某一临界值，原有布局已经无法正常展示，必须变更内容排布，这个临界像素值就是中断点。

断点设置需要结合业务内容、主流设备分辨率、用户体量、研发成本综合确定。参考 Material Design、Bootstrap 成熟断点标准。

断点设置越多，适配效果越细腻，但开发成本会上升；资源有限时，选取 3‑4 个核心断点即可满足基础业务。

③ 布局类型

根据视口缩放时网格模块的变化策略，分为固定布局、流动布局、混合布局三类。

1. 固定布局 列宽、水槽全部固定，设置 PC 最小宽度（常用 1200px）。视口大于最小宽度时，内容居中，两侧留白；视口小于最小宽度，页面出现横向滚动条。
2. 流动布局 浏览器缩小时，元素自动变窄、文本自动换行；在未抵达断点前整体布局结构不变，到达断点后触发布局切换。 适合仪表盘、数据可视化、图文编辑页面。视口变化优先改变内容大小，而不是单纯增加 / 减少展示条目。

   

3. 混合布局 固定布局 + 流动布局组合使用。典型案例：后台 Dashboard，侧边栏 Fixed 固定，右侧内容区域流动自适应。不同区域使用独立缩放规则，适合工具系统、B 端后台。

   

④ 流动布局下的模块处理

响应式不等于简单整体等比缩放。需要结合内容优先级灵活调整，共有 5 种处理策略：

1. 挤压‑拉伸：元素跟随视口挤压拉伸；适合文本、按钮、输入框等不怕形变的控件。

   

2. 左右‑上下：多列横向排布转为纵向堆叠；适用于图文列表、主内容 + 侧边推荐等左右结构。

   

3. 删减‑增加：小屏舍弃次要非核心内容（广告、次要入口、附属推荐），保留主线任务流程。移动端屏幕空间有限，需要优先保障核心业务。

   

4. 变换位置：不删除模块，调整模块位置。PC 端侧边次要模块，移动端挪至页面底部；多栏转单栏，模块上下顺序按照业务优先级排序，优先级越高位置越靠上。

   

5. 隐藏‑展开：内容收起，通过弹窗、呼出菜单、独立页面展示；最典型场景：PC 顶部导航，窄屏下收拢成汉堡图标，点击展开菜单。

   

⑤ 自适应（Adaptive）

为不同终端（PC、平板、手机）分别开发独立页面与代码。 适用场景：交互复杂、功能繁多、访问量大的电商等产品；可以针对不同设备深度定制交互与功能，体验上限更高。

转载：优设

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

兰亭妙微ui设计公司分享：不少从业数年的设计师，依旧没能理清小程序画布的创建依据与适配逻辑。今天就针对这个基础问题做一次科普分享，把底层原理一次性讲透。

小程序之所以名为 “小程序”，核心区别于手机、电脑原生应用（Native）：它是运行在微信环境内的应用。也就是说，小程序设计需要遵循微信自身的设计规范，而非 iOS、安卓或 Windows 的原生规范。

这么设计的目的，是让开发者仅维护一套代码，就能在搭载微信的各类终端、系统上正常运行，且视觉表现保持一致。这套逻辑和网页很相似：无论设备与操作系统，只要安装浏览器，就能访问同一套网页，无需为不同平台单独开发多套代码。

虽然小程序主要面向移动端，设计理念尽可能贴近原生 App，大部分控件、组件与交互形式也基本一致，但不同系统间仍存在细节差异，画布适配就是其中最核心的痛点。

微信为小程序自研了一套前端语言：WXML、WXSS、WXS，分别对应网页的 HTML、CSS、JavaScript。其中负责尺寸与样式控制的是 WXSS，它的专属尺寸单位为 rpx。

rpx 不属于厘米、像素这类物理单位，也不是移动端常用的 pt、dp、sp 矢量单位，是微信定制的特殊适配单位。

微信渲染小程序页面时，会固定移动端视口宽度为 750rpx。无论苹果还是安卓设备，不管是小屏无刘海 iPhone SE，还是大屏 iPhone 15 Pro Max，页面统一按照 750rpx 的基准渲染。

简单理解：1rpx = 屏幕宽度的 1/750。

常规移动端矢量单位的设计思路是：屏幕尺寸变大，画布随之拓宽，承载更多内容，依靠自动布局适配空间变化。但小程序的适配逻辑完全不同，微信采用等比缩放方案：在不同尺寸屏幕上，整体缩放页面内容填满视口。

举个例子，同一小程序页面，分别在 iPhone13、iPhone15 Pro Max、电脑端微信截图。将截图统一缩放到相同宽度后叠加对比，可以看到页面元素尺寸保持一致（电脑端字体渲染规则和移动端存在差异，会带来轻微宽度偏差，但字号基准不变）。

而原生移动端 App 采用自动布局而非等比缩放，将不同手机截图叠加后，元素不会完全重合，二者适配逻辑有本质区别。

所以小程序画布规则：基准宽度固定 750rpx，适配所有移动端设备；高度随屏幕长宽比自动变化。

再说说 750 这个基准值的来源：它源自早期 iPhone 设备分辨率，是 375pt 的 2 倍数值。如今移动端设计标准早已从 375 过渡到 390、393，但小程序依旧沿用 375 基准。

原因一句话总结：向大屏幕放大适配简单，向小屏幕压缩适配很难。

目前市面上仍有大量 375 宽度的存量设备，微信作为平台方必须做好向下兼容。以最小兼容画布作为基准向上放大，可以最大程度保障页面兼容性与可用性，不存在内容压缩出错的风险。

你完全可以基于 375 规格设备搭建画布，以 iPhone SE、iPhone Mini 作为设计基准都没问题。

底层渲染用 750rpx，理论上最优画布尺寸是 750×1334 或 750×1624。但现实工作里还有另一个情况：小程序官方组件库基准是 375 宽。

这就涉及工程落地的现实权衡：设计稿和开发实现是两件事。很多场景下，设计师会复用 App 已有素材，不少小程序本身就是 App 的轻量化版本。如果强行使用 750 画布，原有素材几乎要全部重新调整，工作量接近重做；同时和设计师日常习惯不符，极易产生标注错误。

因此，日常设计小程序，直接使用常规 375 宽画布即可。进入开发环节，前端可以在即时设计、Figma、蓝湖等工具中将标注倍率设置为 2 倍，就能直接换算得到对应的 rpx 数值。

这里有个潜在坑点：建议正式开工前，和前端提前沟通，确认对方熟悉 rpx 换算、评估 375 画布落地是否存在阻力。如果团队坚持要求使用 750 画布，再协商统一规范，以最终敲定方案为准。

除移动端标准画布外，还有一个容易被忽略的细节：组件库中的 Half-screen Dialog（半屏弹窗）基准宽度为 414。这个尺寸源自 iPhone 8 Plus / XS Max，并不是为老旧大屏手机准备的。

414 是小程序在 PC 端微信的默认窗口规格，未做响应式改造的小程序，在电脑端固定窗口尺寸为 414×736。

736 的高度同样出于小屏兼容考量，这里不展开细说。PC 端小程序也支持响应式适配，但业务需求较少，感兴趣可以自行查阅官方设计规范。

核心知识点速记

1. 小程序使用 rpx 作为页面尺寸单位
2. 移动端小程序基准渲染宽度为 750rpx
3. 1rpx = 移动端屏幕宽度的 1/750
4. 小程序跨手机适配逻辑：按宽度整体等比缩放
5. 小程序设计画布常用：375×667 / 375×812
6. PC 端小程序默认窗口：414×736
7. PC 端原生组件，和移动端小程序组件存在差异

结尾

本次分享到此结束，希望能帮大家理清小程序画布与适配逻辑。如果一遍没看懂，不妨多看几遍～

转载：站酷

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

导读｜从服务预约、AI宠物健康助手到宠物档案管理，构建"发现—预约—照护—沟通"的宠物护理全链路闭环。本文不止评价画面风格，而是从产品目标、信息组织、行为路径、视觉语义和落地风险五个层面拆解这套方案。

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

Wliö并没有把自己限制为一款简单的宠物服务信息黄页或预约工具，而是试图建立覆盖服务发现、智能匹配、即时沟通与宠物健康追踪的个人宠物护理操作系统。移动端承担高频预约与日常照护，AI则被安排在智能推荐、宠物健康问答等关键决策点。

核心痛点解决：针对宠物主面临的"找不到靠谱服务提供者"、"宠物日常照护缺乏系统管理"、"遇到宠物健康问题不知如何判断"等痛点，Wliö提出了"Get Started with Wliö in just a few taps"的极简服务理念。

AI赋能：AI不仅仅是后台的推荐引擎，更是前台的"宠物健康顾问"。它被安排在"AI Suggestion"（智能服务推荐）、"AI Assistant"（宠物健康问答）等关键决策点，让宠物护理从凭经验走向数据驱动。

核心价值：通过"Everything Your Pet Needs"的一站式设计，解决了多场景宠物管理割裂的痛点——从找服务到管健康，从预约到沟通，全部收敛在一个App中。

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

信息架构围绕"今天该做什么—正在做得怎样—下一步如何调整"展开。首页以当日计划、服务推荐、宠物状态为优先层级；服务分类、AI建议和宠物档案被组织为可进入的任务模块；长期数据则沉淀到宠物档案和预约历史中。这样的分层既照顾即时行动，也保留专业用户对趋势和细节的需求。

首页（Home Screen）：摒弃了传统分类导航的复杂层级，采用"搜索+推荐"的双入口设计。顶部搜索栏支持按服务类型（Pet Grooming、Dog Walking、Pet Sitting）快速筛选，下方"Recommended for you"基于AI算法推送匹配服务，确保用户打开App的第一秒就能找到需要的服务。

今日概览（Today Overview）：将分散的养护动作（服务预约、健康记录、消息沟通）聚合为时间轴视图。通过"Today Overview"展示Activity、Step、Food等日常指标，帮助用户快速区分轻重缓急。

宠物档案（Pet Profile）：采用"宠物卡片"形式呈现核心信息。以Buddy（Golden Retriever）为例，Breed、Age、Location等关键信息一目了然，配合"About Buddy"的性格描述，让服务提供者能快速了解宠物习性。

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

交互亮点是把复杂的宠物护理流程转译为可执行反馈。服务卡片、AI建议和预约确认不是装饰，而是把需求、匹配和执行直接显性化。

渐进式引导（Onboarding）：这是最具差异化的Onboarding设计。系统不强迫用户一步到位，而是通过"Get Started"引导页逐步介绍核心价值（24/7 Pet Care、AI Suggestion等），降低新用户的学习成本。登录环节同时支持Google/Apple快捷登录和手机号验证，兼顾便捷性与安全性。

服务发现与预约：在Services页面，用户可以在Map和List两种视图间切换。服务卡片直接展示提供者评分（4.9）、距离（0.4 mi）和价格（$25.00），配合"Book Now"CTA按钮，将浏览到预约的路径压缩到最少点击次数。

预约确认流程：Booking Details页面采用"信息卡片堆叠"设计，将Pet Owner、Pet信息、Services、Date & Time、Payment Information分块展示，用户在确认前可以逐项核对。底部"Confirm Payment"按钮采用黑色胶囊形设计，形成明确的行动终点。

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

Wliö的视觉系统在"专业感"与"亲和力"之间找到了精妙的平衡点。

色彩策略：大面积留白建立干净、专业与高端质感。纯白背景配合深黑文字，形成高对比度的视觉层级；宠物照片引入自然暖色调（米色/浅棕色），在大面积黑白中形成情感化的视觉锚点，避免界面过于冷峻。

卡片与组件：所有的卡片、按钮和图片容器都采用了大圆角设计（约20px-30px），给人一种圆润、亲和、无攻击性的视觉感受，非常契合宠物主题的温暖调性。

字体与排版：标题使用粗体无衬线字体，字形圆润饱满；正文采用清晰易读的细体无衬线字体，层级分明。整体排版疏朗，元素之间拥有宽敞的间距，避免了信息的拥挤。

质感与细节：采用非常轻微、柔和的弥散阴影（Soft Drop Shadow），使卡片具有轻微的悬浮感，增加了界面的层次深度，但不过分突兀。背景中隐约可见的爪印图案作为品牌装饰元素，增加了趣味性和识别度。

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

对产品经理而言：最值得借鉴的是"服务即体验"的闭环设计。传统的宠物服务App是"用完即走"，而Wliö通过AI Suggestion和AI Assistant将服务发现、健康咨询和预约履约串联成完整闭环，极大提升了用户留存和LTV。

对设计团队而言：要重点学习"情感化极简主义"的视觉策略。Wliö证明了宠物类App不一定需要可爱的插画和鲜艳的色彩——通过高质量宠物摄影+黑白极简排版+大圆角卡片，同样可以传递温暖与关怀，而且显得更高端、更值得信赖。

社交证明与转化：Wliö在Profile页面展示了Provider的Experience、Happy Clients、Positive Reviews等社交证明数据，配合Message和Book A Services的行动按钮，将"信任建立"和"转化行动"放在同一个视图中完成，是服务类App转化优化的经典范例。

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

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

现有方案的主要风险是功能密度较高，黑白极简风格在小屏上容易出现信息层次不够鲜明的竞争。

AI置信度：AI健康建议（如"Max's scratching may be caused by allergies"）缺乏置信度提示和免责声明。建议增加"AI建议仅供参考，请咨询专业兽医"的非诊断性提示，并在建议卡片上标注AI的匹配度或数据来源。

隐私安全：宠物照片、主人联系方式、地理位置等敏感信息在Profile页面完全公开。建议增加隐私设置选项，允许用户控制哪些信息对服务提供者可见，以及是否允许被搜索到。

异常场景覆盖：当前界面主要展示的是理想状态下的流畅流程。建议补充空状态（如无预约时）、加载状态（如AI分析中）、错误状态（如支付失败）的设计方案，以及弱网环境下的降级策略。

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

Wliö展示了AI宠物护理产品从"信息工具"走向"陪伴式系统"的路径：以服务发现建立连接，以智能推荐降低门槛，以AI助手维持长期活跃。真正决定产品粘性的，不是服务品类有多少，而是它能否在用户最需要帮助的那个瞬间——无论是宠物突然生病还是主人临时出差——精准地递上一份靠谱的解决方案。

Wliö的设计哲学值得所有服务类App借鉴：少即是多，但每一个"少"都必须经过深思熟虑。当黑白极简遇上宠物温情，产生的不是冷冰冰的效率工具，而是一位值得信赖的宠物生活管家。

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

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

做设计的人都听过一句话："我觉得用户会喜欢这个。" 但问题是，你不是用户。兰亭妙微在项目中反复强调一个原则：不要替用户做决定，要让用户自己 "站出来" 说话。 而让用户 "站出来" 的工具，就是人物模型（Persona）。