导读｜从个性化护肤流程、AI成分分析到皮肤日记追踪，构建"记录-执行-反馈"的护肤行为闭环。本文不止评价画面风格，而是从产品目标、信息组织、行为路径、视觉语义和落地风险五个层面拆解这套方案。
GlowPath 并没有把自己限制为一款简单的护肤品清单或定时提醒工具，而是试图建立一个覆盖个性化护肤流程构建、日常习惯追踪、皮肤状态变化监测与产品成分智能解析的个人护肤操作系统。
· 核心痛点解决：针对用户（特别是护肤新手和敏感肌人群）面临的"不知道用什么产品"、"记不住护肤步骤"、"看不到皮肤改善效果"等痛点，App 提出了"Make self-care simple, personal, and easy to stick with"的服务理念。
· AI 赋能：AI 不仅仅是后台的成分识别工具，更是前台的"护肤顾问"。它被安排在产品详情页的"AI Ingredients Analysis"（AI成分分析）、护肤流程的个性化推荐以及皮肤日记的智能标签归类等关键决策点，将复杂的化妆品化学成分转化为用户可理解的护肤语言。
· 核心价值：通过"Build a consistent skincare routine, track daily habits, and understand how your skin changes over time"的设计愿景，解决了用户在护肤过程中缺乏系统性和持续性的痛点，让护肤从"凭感觉随便涂"变为"有计划、可追踪、能看到效果"的科学护理。
信息架构围绕"今天该做什么—正在做得怎样—下一步如何调整"展开，打破了传统护肤App仅按产品分类的静态目录结构。
· 首页层级：首页以当日问候（"Hi, Maria, Day 2"）、日历打卡区、皮肤状态自评（"How is your skin today?"）、UV指数提醒和早/晚护肤流程为优先层级；底部导航栏（Acne、Home、History、+、Routine、Progress）将核心功能组织为可快速进入的任务模块；长期数据则沉淀到Diary History进度看板。这样的分层既照顾即时行动，也保留专业用户对趋势和细节的需求。
· 流程层（Routine）：Routine 页面采用"Morning | Evening"双阶段切换器，将护肤流程按时间场景拆分。每个步骤（Face Cleanser、Toner、Serum、Daily Cream、SPF）以编号列表呈现，支持自定义提醒时间（"Everyday 8:00"）和重复周期设置。这种设计将复杂的护肤知识转译为可执行的每日任务清单。
· 资产层（Products）：Products 模块允许用户管理所有护肤品，内置搜索功能快速定位。每个产品详情页展示适用肤质、使用方法、用户评分和AI驱动的成分分析，将"成分表"这一专业内容转化为可操作的护肤决策依据。
交互亮点是把复杂的护肤管理转译为低门槛的勾选与记录动作。
· 日常打卡流：每日打卡流程是核心交互。用户打开App后，首页直接展示当日护肤流程（Cleanser → Toner → Day Cream → SPF），通过简单的勾选完成打卡。完成度以"7/10"这样的进度指标显性化，配合"Don't forget to use SPF"等温和提醒，减少用户在高动机时刻之外进行额外配置的负担。
· 照片日记与状态标记：在Routine Check-up页面，用户不仅可以标记当天使用的产品（勾选/未勾选状态），还可以通过"Take Photo"或"Photo Library"上传皮肤照片，结合"Acne"、"Redness"、"Sensitivity"、"Texture"等皮肤状态标签，构建带有视觉证据的护肤日记。这种"照片+标签+产品"的三维记录方式，让用户能直观看到产品使用与皮肤改善之间的关联。
· 日记筛选与回溯：Diary History 页面提供了强大的筛选系统——按时间范围（Last 3/7/30 Days）、产品类别（Cleanser/Toner/SPF/Daily Cream）、已用产品等多维度过滤，帮助用户快速定位特定时间段或特定产品相关的皮肤变化记录，让数据真正服务于护肤决策。
GlowPath 的视觉设计在"医疗专业感"与"生活方式亲和力"之间找到了精准的平衡点。
· 色彩策略：大面积纯白背景建立洁净、通透的基调，传递护肤产品应有的"纯净"心理暗示。柔和的草绿色/薄荷绿（#a3d9a5、#95ec69、#c8e6c9）作为核心操作色，在大面积白色中保持清晰焦点，象征自然、健康与生命力。深灰/黑色用于主要文字，浅灰色用于次要信息和分割线，形成清晰的视觉层级。
· 卡片与空间：所有卡片采用大圆角矩形设计，边缘平滑柔和，避免尖锐棱角带来的生硬感。卡片内部通过充足的留白区分内容块，无复杂分割线。极轻微的弥散阴影使列表项从白色背景中轻微浮起，增加了界面的层次感和悬浮感，但不过分厚重，保持了整体的轻盈度。
· 字体与图标：标题使用无衬线字体（Sans-serif），字重对比明显（标题加粗，正文常规），显得现代且友好。图标采用线性与面性结合的风格，线条纤细流畅，配合绿色点缀，风格统一且精致。底部导航栏采用五段式布局，中间突出的"+"号引导用户进行核心操作（记录/拍照），符合拇指热区的使用习惯。
· 对产品经理而言：最值得借鉴的是"习惯养成闭环"设计：数据采集（皮肤照片+产品记录）并非终点，而是必须进入个性化建议生成、行为执行追踪、效果反馈展示和再次调整的完整闭环。GlowPath 通过"Day 2"这样的打卡计数器和"You're doing great — keep going"这样的正向激励文案，巧妙地将游戏化机制融入日常护肤场景，提升了用户留存率。
· 对设计团队而言：要重点维护"医疗专业感"与"生活亲和力"之间的视觉平衡。GlowPath 没有使用传统医疗App的冷蓝色调，而是选择了温暖的草绿色系，配合圆润的卡片设计和鼓励性文案，让护肤这一带有"自我关怀"属性的行为不再显得像"看病"，而是一种愉悦的日常仪式。这种色彩心理学的应用值得在健康类App设计中广泛复用。
跨行业经验复用：本项目的UI 交互设计方法论并非孤立存在。我们作为一站式 UI设计服务公司，同时也是专业的软件界面设计公司，在银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计等多个垂直领域积累了深厚的经验。作为 UI交互设计公司，我们深知不同行业对界面交互的特殊要求；作为数据可视化设计公司的复杂仪表盘方案，以及高端网站设计公司的品牌级视觉呈现，这套"以用户任务为中心"的信息架构逻辑均可复用。同时，我们在软件qt开发、软件wpf开发、软件vue开发等技术栈上均有成熟落地能力，确保设计稿能够被高保真还原。
现有方案的主要风险是功能密度与认知负荷的平衡问题。
· 可读性适配：虽然浅色清新风格很讨喜，但在户外强光下白色背景+浅色文字的组合可能影响可读性。建议增加自动亮度适配或提供深色模式选项，特别是在护肤场景可能发生在浴室等潮湿环境时，屏幕可视性尤为重要。
· AI 可信度：AI成分分析功能虽然亮点突出，但需要明确标注分析的置信度和数据来源。如果AI对某成分给出"有害"或"推荐"的判断，应增加"仅供参考，请咨询皮肤科医生"等非诊断性提示，避免用户过度依赖算法做出错误的护肤决策。
· 隐私安全：皮肤照片涉及高度个人隐私。用户上传的面部照片应提供本地加密存储选项，并在隐私政策中明确照片的使用范围和删除机制。同时，社交分享功能（如有）应允许用户选择是否隐藏面部识别特征。
GlowPath 展示了AI护肤产品从"产品目录工具"走向"个性化护肤伴侣"的路径：以打卡机制建立习惯，以照片日记形成承诺，以即时反馈维持行动。真正决定产品可信度的，不是AI分析了多少成分，而是每条护肤建议是否透明、可执行、可被用户修正，以及用户是否真的能在30天后看到皮肤变得更好。
在护肤这个充满"智商税"和"幸存者偏差"的领域，一个能诚实面对数据局限、尊重用户隐私、用科学态度替代营销话术的产品，才能获得真正的长期用户信任。GlowPath 迈出了这一步，但距离"值得信赖的护肤AI伙伴"还有相当长的路要走。
兰亭妙微作为作为专业的用户体验公司，我们始终坚持：好的界面设计公司不仅要交付好看的画面，更要交付可执行、可追溯、可修正的产品体验。无论是UI咨询还是完整的UI设计公司项目交付，核心始终不变——让技术真正服务于人的需求。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
导读
从 AI 拍照诊断、个性化养护日历到自然对话式问答，构建“识别-诊断-养护”的植物生命周期管理闭环。本文基于提供的视觉方案，从产品定位、信息架构、关键交互、视觉语义及体验边界五个层面，拆解这套将硬核园艺知识转化为极简数字体验的设计方案。
Spora 并没有把自己仅仅定位为一款植物百科全书或简单的浇水提醒工具，而是试图建立一个覆盖精准诊断、个性化护理计划与即时专家咨询的智能园艺操作系统。
● 核心痛点解决：针对“70% 的室内植物在第一年死亡”以及用户“看不懂植物求救信号（如黄叶、枯萎）”的焦虑，Spora 提出了“Grow healthier plants with AI”的核心价值。它解决了新手养花“不知为何死”和老手养花“精力顾不过来”的双重难题。
● AI 赋能：AI 不仅仅是后台的图像识别引擎，更是前台的“私人园艺师”。它被安排在“Camera Screen”（拍照诊断）、“Diagnosis Result”（健康评分与处方）以及“AI Plant Assistant”（自然语言问答）等关键决策点，让复杂的植物病理学变得触手可及。
● 核心价值：通过“Care Made Simple”的理念，将模糊的园艺经验转化为精确的数据（如“200ml water”），让用户从凭感觉养花走向科学养花。
信息架构围绕“我的植物现状—接下来做什么—遇到问题怎么办”展开，打破了传统工具类 App 枯燥的列表结构。
● 首页层级（My Plants）：以“植物卡片流”为核心，每张卡片不仅展示照片，更直观呈现“Health Score”（健康分）和“Next Task”（下一步任务）。这种设计让用户打开 App 就能掌握全局健康状况，而非陷入复杂的分类筛选中。
● 详情页深度（Plant Detail）：采用仪表盘式布局。顶部是实时的环境数据（光照、湿度）和健康趋势图；中部是具体的行动指南（What you can do），将抽象的“缺氮”转化为“使用平衡液体肥料”的具体指令。
● 任务系统（Care Calendar）：将分散的养护动作（浇水、施肥、换盆）聚合为时间轴视图。通过“Needs Attention”（需关注）和“Healthy”（健康）的状态标签，帮助用户快速区分轻重缓急。
交互亮点在于把复杂的园艺知识转译为低门槛的互动反馈。
● Camera Screen（诊断交互）：取景框设计简洁，支持“New plant”与“Diagnose existing”双模式切换。拍摄后并非直接给出冷冰冰的结论，而是通过进度条和匹配度（如 87% match）建立用户对 AI 判断的信任感。
● AI Plant Assistant（对话交互）：这是最具差异化的功能。不同于传统的 FAQ 列表，Spora 提供了类似微信的聊天界面。用户可以问“Should I cut yellow leaf off?”（我该剪掉黄叶吗？），AI 结合该植物的具体病史给出建议。这种交互极大地降低了获取专业知识的门槛。
● 任务执行反馈：在具体的养护任务页（如 Water Alocasia Frydek），不仅告诉用户“做什么”，还解释了“为什么重要”（Why it's important），并通过一键“Mark as done”提供完成任务的爽快感。
视觉风格在“科技感”与“自然感”之间找到了完美的平衡点。
● 色彩策略：摒弃了传统园艺 App 滥用的高饱和度绿色，转而使用深苔藓绿（Moss Green）搭配大面积留白和深黑背景。这种配色既保留了植物的生命力，又营造出一种高端、静谧的实验室质感，暗示了产品的科学性。
● 字体选择：标题使用 Gilroy（几何感强，现代有力），正文使用 Manrope（阅读性极佳，中性干净）。这种组合确保了在展示大量养护参数时，界面依然清晰易读，不会产生视觉疲劳。
● 图像质感：UI 中的植物摄影采用了微距和高对比度处理，叶片纹理清晰可见。配合圆角卡片和柔和的阴影，让数字界面仿佛有了呼吸感，消除了医疗诊断类界面的冰冷感。
对产品经理而言，最值得借鉴的是 “诊断即服务” 的闭环设计：拍照不仅仅是为了识别名字，更是为了生成后续的养护计划和触发 AI 咨询，极大提升了用户留存。
对设计团队而言，要重点学习数据的可视化翻译。Spora 没有直接罗列氮磷钾含量，而是用“88% Health Score”和“Early Stage”severity 标签来展示，这种将专业数据“降维”为用户可感知指标的能力，是工具类产品体验升级的关键。
跨行业经验复用：本项目的UI 交互设计方法论并非孤立存在。我们作为一站式 UI设计服务公司，同时也是专业的软件界面设计公司，在银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计等多个垂直领域积累了深厚的经验。作为 UI交互设计公司，我们深知不同行业对界面交互的特殊要求；作为数据可视化设计公司的复杂仪表盘方案，以及高端网站设计公司的品牌级视觉呈现，这套"以用户任务为中心"的信息架构逻辑均可复用。同时，我们在软件qt开发、软件wpf开发、软件vue开发等技术栈上均有成熟落地能力，确保设计稿能够被高保真还原。
现有方案的主要风险在于AI 诊断的容错性与责任边界。
● 误诊风险：植物病害往往具有相似性（如缺水和水涝都会导致叶片下垂）。建议在 Diagnosis Result 页面增加“置信度”提示，或者提供“二次确认”的引导步骤（如“请再拍一张叶子背面”）。
● 地域与环境差异：同样的植物在不同气候下养护方式不同。AI Chat 的回答需要更严格地结合用户所在的地理位置和季节，避免给出“通用但无效”的建议。
● 离线可用性：考虑到阳台或花园可能信号不佳，核心的“浇水提醒”和“已保存的养护指南”应支持离线查看。
Spora 展示了 AI 垂直领域产品从“信息查询”走向“决策辅助”的路径：以视觉建立审美信任，以诊断切入核心痛点，以陪伴式 AI 维持长期活跃。真正决定这款 App 生死的，不是它能识别多少种植物，而是当用户的爱植生病时，它能否像一位老朋友一样，给出那个最让人安心的解决方案。
兰亭妙微作为作为专业的用户体验公司，我们始终坚持：好的界面设计公司不仅要交付好看的画面，更要交付可执行、可追溯、可修正的产品体验。无论是UI咨询还是完整的UI设计公司项目交付，核心始终不变——让技术真正服务于人的需求。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
导读 从 AI 处方识别、家庭账户管理到就诊清单，构建“诊前-诊中-诊后”的全周期健康管理闭环。本文从产品定位、信息架构、关键交互、视觉语义及体验边界五个层面，拆解这套以“家庭”为核心的医疗档案解决方案。
Medical Resource 并没有把自己仅仅定位为一款挂号工具或简单的电子病历存储盘，而是试图建立一个覆盖多成员档案管理、就诊准备辅助与医疗数据智能化的家庭健康操作系统。
● 核心痛点解决：针对用户（特别是家庭照护者）面临的“纸质处方易丢失”、“老人小孩病历分散”、“复诊时忘记带关键报告”等混乱现状，App 提出了“Your Health, Our Priority”的服务理念。
● AI 赋能：AI 不仅仅是后台的 OCR 识别工具，更是前台的“健康秘书”。它被安排在“Smart AI extracts what matters”（智能提取关键信息）和就诊前的“What to bring”（携带清单生成）等关键决策点，将非结构化的纸质单据转化为结构化的数字资产。
● 核心价值：通过“One Place for Every Family Member”的设计，解决了多人口家庭健康管理割裂的痛点，让就医过程从“慌乱寻找”变为“从容应对”。
信息架构围绕“当前状态—家庭成员—历史记录”展开，打破了传统医疗 App 仅针对个人的单一视角。
● 首页层级（Home）：采用“时间轴+卡片”布局。最优先展示的是“Upcoming visit”（即将到来的就诊），并直接关联到具体的家庭成员（如 Father, Mother）。下方则是“Health Summary”概览，让用户一眼掌握全家人的就诊频次和报告数量。
● 档案层（Records）：这是 App 的核心资产库。顶部设置了显著的成员切换器（All, Me, Father, Mother, Wife），支持一键过滤。列表项不仅显示医生姓名，还通过标签（Prescription, Test Report）和日期清晰分类，解决了“找不到某次特定检查报告”的难题。
● 就诊层（Visit）：将抽象的“看病”具象化为任务流。在就诊详情页，系统自动列出“What to bring”（需携带物品），如处方、心电图等，将信息架构从“存储”转向了“行动指引”。
交互亮点在于把复杂的医疗管理转译为简单的勾选与扫描动作。
● AI 智能录入：Onboarding 阶段即展示核心能力——“Scan your prescriptions and let AI automatically extract”。用户只需拍照，系统即可自动识别医生、日期和药品信息，极大降低了手动输入的门槛和错误率。
● 就诊准备清单：在 Visit 页面，交互不仅仅是查看，更是确认。用户可以通过勾选框确认“Prescription”或“Test Report”是否已带齐。这种微交互有效地缓解了患者就医前的焦虑感。
● 家庭视图切换：顶部的成员胶囊按钮（Pill buttons）支持快速滑动切换。这种高频操作的便捷性，体现了对家庭照护者（通常是子女或配偶）使用场景的深刻洞察——他们需要在不同家人的病历间频繁跳转。
● 色彩心理学：主色调采用高饱和度的“医疗蓝”（Medical Blue），在白色背景上建立专业、洁净且可信赖的视觉基调。蓝色在医疗领域通用性强，能有效降低用户的心理防御。
● 信息可视化：处方单不再是模糊的照片，而是经过 UI 重构的清晰卡片。关键信息（如药名、剂量）被高亮或放大处理，非关键信息弱化，确保在移动端小屏幕上的可读性。
● 情感化摄影：宣传图中使用的医生形象面带微笑、眼神笃定，配合明亮的诊室背景，传递出“专业且亲切”的品牌温度，中和了医疗数据本身的冰冷感。
● 对产品经理：最值得借鉴的是“场景化前置”思维。传统的病历 App 是“用完再查”，而 Medical Resource 是“用前提醒”。将“带什么资料”这一痛点在就诊前主动推送，是提升用户粘性的关键。
● 对设计团队：要重点维护“多角色状态”的视觉一致性。在同一个界面中，如何清晰区分“我的数据”和“父亲的数据”，同时保持整体风格的统一，是此类家庭级应用的设计难点。本方案通过标签颜色和头像关联做得相当出色。
● 跨行业经验复用：本项目的UI 交互设计方法论并非孤立存在。我们作为一站式 UI设计服务公司，同时也是专业的软件界面设计公司，在银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计等多个垂直领域积累了深厚的经验。作为 UI交互设计公司，我们深知不同行业对界面交互的特殊要求；作为数据可视化设计公司的复杂仪表盘方案，以及高端网站设计公司的品牌级视觉呈现，这套"以用户任务为中心"的信息架构逻辑均可复用。同时，我们在软件qt开发、软件wpf开发、软件vue开发等技术栈上均有成熟落地能力，确保设计稿能够被高保真还原。
现有方案的主要风险在于隐私安全感的显性化不足以及AI 识别的容错性。
● 隐私焦虑：虽然用户访谈中提到“keeping my personal health information completely secure is very important”，但在 UI 上缺乏生物识别（FaceID/TouchID）入口或隐私锁的视觉暗示。建议在进入 App 或查看敏感病历时增加安全验证环节。
● AI 置信度：OCR 识别难免出错。在“Smart AI extracts”之后，必须提供便捷的“人工校对”入口，允许用户修改识别错误的医生名或日期，否则错误的档案比没有档案更可怕。
● 紧急场景：目前的首页侧重于“计划内就诊”。建议增加“Emergency Info”（紧急信息）模块，如血型、过敏史、紧急联系人，以便在突发状况下供急救人员快速获取。
结语：设计的最终判断标准是业务与使用价值 Medical Resource 展示了医疗工具类 App 从“数字化存储”走向“智能化陪伴”的路径：以 AI 降低录入门槛，以家庭视图拓宽服务边界，以就诊清单延伸服务场景。真正决定产品温度的，不是存储了多少张处方照片，而是它能否在用户最无助的就医时刻，递上一份清晰的指引和安心的保障。
兰亭妙微作为作为专业的用户体验公司，我们始终坚持：好的界面设计公司不仅要交付好看的画面，更要交付可执行、可追溯、可修正的产品体验。无论是UI咨询还是完整的UI设计公司项目交付，核心始终不变——让技术真正服务于人的需求。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。
兰亭妙微作为作为专业的用户体验公司，我们始终坚持：好的界面设计公司不仅要交付好看的画面，更要交付可执行、可追溯、可修正的产品体验。无论是UI咨询还是完整的UI设计公司项目交付，核心始终不变——让技术真正服务于人的需求。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
兰亭妙微ui设计公司分享：很多新手做网页设计，直接上手画页面，却忽略画布尺寸、导航选型、屏幕适配这些底层问题，最终设计稿交付开发后，出现页面错位、首屏信息被遮挡、不同设备体验差异巨大等问题。本文从画布与内容区、导航模式选型、布局与屏幕适配三大模块，拆解 PC 网站设计的关键实操要点。
在完成用户调研之后，正式设计的第一步，就是确定画布大小，画布基准要参考市场主流设备的分辨率分布。
根据 2021 年 PC 分辨率统计数据，1920×1080是市场占有率最高的分辨率，占比 40.75%；1920×1080、1366×768、1440×900 三者合计占比达到 62.75%。
设计选型小提示：遵循小屏适配大屏优于大屏适配小屏的兼容原则，B 端项目可以选用 1440×900作为设计画布，阿里、Material Design 的 B 端规范均采用该尺寸。 如果产品面向特定人群，可直接以用户实际设备为准，例如企业内部办公系统，员工普遍使用 1366×768 笔记本，则直接以此作为画布标准。
网页运行在浏览器当中，系统 UI、浏览器控件都会挤占可视区域的高度，直接用屏幕分辨率当做首屏高度，会导致核心内容被遮挡。
真实可视首屏高度计算公式： 严格版：屏幕分辨率高度 − 浏览器控件高度 − 系统 UI 占用高度 简易版：屏幕分辨率高度 − 浏览器控件高度
设计时以此划定首屏线，把最重要的业务信息放置在首屏可视范围内。
PC 网页最主流的两种导航形式：左侧导航、顶部导航。
早在 2004 年，学者 JR Kingsburg 就针对三级菜单导航做可用性实验，对比 8 种导航组合，在完成明确任务的场景下，一级导航放置在侧边，用户操作效率更高，选择错误、操作犹豫的情况更少。
左侧导航（侧导航） 优势：
顶部导航 优势：横向排布，几乎不占用横向空间，最大化释放内容展示区域。 劣势：二级菜单依赖 hover 悬浮唤起，鼠标移开菜单就消失，多层级导航的阅读、理解成本更高。 适用场景：内容消费型网站，资讯、图片、视频平台，代表产品：花瓣、知乎、爱奇艺。
同一个网站不同模块，也会混合使用两种导航：以百度为例，搜索浏览页面使用顶导航，给内容让出空间；进入个人中心，需要修改资料、管理收藏等明确操作，切换为左侧导航，提升功能查找效率。 很多综合网站会采用混合方案：顶导航承载登录、全局搜索这类通用能力，左侧导航承载细分业务菜单。
基础参数参考：
200+8n的数值区间，208‑272px 都属于行业常见范围；不同分辨率对应有安全内容宽度区间，设计时需要参考安全宽度，再结合栅格系统、适配策略确定最终内容区大小。
PC 网页一共 3 种主流适配实现方案，设计阶段就需要和前端对齐方案，避免后期返工：
页面整体设定固定 px 宽度，无论大屏小屏，页面尺寸不会变化。 优点：设计还原简单，开发成本低； 缺点：兼容性差。小屏幕下会出现横向滚动条，大屏幕两侧留出大量空白。
不改变页面整体模块排布结构，将 px 单位替换为百分比、rem，页面元素会跟随屏幕等比缩放，布局结构保持不变。 大多基于栅格系统实现，栅格由列（Column）、间距（gutter）、外边距（margin）组成，移动端设计规范，很多也是栅格体系的简化版本。
依靠 CSS 媒体查询@media，针对不同屏幕断点编写多套样式，屏幕尺寸变化时，不仅元素大小改变，模块排布结构也会发生变化，大屏、小屏呈现不一样的页面结构。 优点：各尺寸体验最优； 缺点：需要维护多套代码，开发工作量大。 实操中，通常结合栅格系统 + 屏幕断点共同实现。
协作建议：设计输出前，提前与开发确认适配方案，约定最大、最小适配屏幕边界，搭建统一的栅格规范，大幅降低沟通成本，减少还原偏差。
从零设计 PC 网站，不要直接陷入视觉细节：
兰亭妙微ui设计公司分享：近年已有不少完整落地项目由 AI 辅助完成，部分网站甚至可以实现产品 360° 交互预览，细节放大查看，技术的迭代正在重塑互联网行业的工作模式。
过去二十年间，互联网行业有着清晰分工：产品、研发、设计、用户研究各司其职，组成团队协作产出产品。 这套模式成立的底层逻辑，是落地实现的门槛很高，高度依赖专项技能。行业为此搭建了成熟的晋升路径，从初级、高级到专家，大家沿着专业赛道稳步向上成长。
但 AI 大幅降低了落地执行的成本。当 1‑2 个人，借助工具就能完成过去 6 个人的工作量，传统岗位分工正在遭遇拷问。 Julie 提出核心观点：AI 浪潮之下，无论身处哪个岗位，我们都要完成身份转变，成为一名「构建者（builder）」。
成为构建者，不等于要求你精通全部技能，而是重塑做事思维。
旧模式里，我们习惯边界化工作：“我只负责自己模块，其余交由他人处理”。 如今 AI 可以写代码、生成文案、完成数据分析，个体完全有机会把一个想法，完整推进至落地。你的身份，不再是流水线当中的一环，而是整件事的主导者。
转变包含两个层面： 第一，心态转变 过去遇到职责外工作，第一反应是 “这不归我管”。而构建者的思考逻辑是：想要达成目标，目前还欠缺什么？我能否借助 AI，或是联动伙伴补齐缺口？ 关注点从「我的岗位要做什么」切换为「这件事如何才能做成」。
第二，能力定位转变 不要被岗位标签定义自我，聚焦你的真实能力：有的人拥有顶尖视觉能力，有的人擅长梳理复杂系统，有的人擅长从 0 到 1 开拓新项目。 认清自己的核心长板，以优势为根基，借助 AI 与他人协作补足短板。
简言之，过去比拼的是单一专业的深度；而当下，更考验整合全部资源，交付完整成果的能力。专业功底依旧是立身之本，但仅有手艺，已经不足以应对时代变化。
如今 AI 足以输出大量中等偏上水平的成果，方案的执行门槛被抹平。但甄别优劣、洞察问题、指明优化方向的判断力，成为人的核心价值。
该怎样打磨这份专业判断力？
就好比请毕加索点评画作，不是远远仰望，而是拿出自己的作品，在反馈中实现自我成长。
Julie 反复强调一个认知：不亲手实操工具，就不可能真正理解 AI。
她的观点十分直白：如果连当下技术的能力边界都不了解，很难称得上是 AI 时代优秀的设计师、产品人。行业认知无法靠读文章、听播客获得，必须亲身实操。
她本人便是如此：写代码会逐一测试 Cursor、Claude Code、v0、Lovable；会议记录依靠 Granola；数据分析使用自家产品 Sundial。 对待工具，她像面试候选人一般，逐一测评，不为追逐新潮，只为摸清每个工具的优势、短板，清楚什么任务适合交给哪款工具。
有一个很值得反思的细节：即便本身写作能力很强，Julie 依旧强迫自己切换到 AI 协作的写作模式。
人天然会依赖顺手的旧流程，越是自己擅长的领域，越抗拒改变。但恰恰是这些熟门熟路的工作方式，最容易让人停滞不前。固守旧有习惯，就很容易被善用新工具的同行超越。
道理简单朴素：不要只停留在围观讨论，把 AI 嵌入日常工作流，哪怕初期体验别扭。实操越多，越懂 AI 的能与不能，也更明白个人努力该投向何方。
这是一个容易被忽略的洞察：管理，正在从少数人的岗位职能，变成全员必备基本功。
经典管理模型包含三大要素：目标、人、流程。这套框架在 AI 时代依旧成立，只是资源对象发生变化。
过去，我们主要的协作资源是团队同事；现如今，AI 模型已经成为重要的 “团队成员”。 不同模型各有所长：部分擅长代码编写，部分擅长文案创作，部分擅长处理复杂数据。我们需要像管理团队一样用好 AI。
工作逻辑就变成管理者思维：明确项目目标；将合适的任务分配给适配的 AI 模型；理顺整体协作流程，让人与 AI 协同完成任务。
过去专属于领导力的各项能力，不会被 AI 替代，反而成为每个职场人的必修课。
看完这些思考，未必能完全消解焦虑，但可以理清方向。 AI 替代的是重复执行工作，却夺不走人的判断力，以及从构思到落地的完整闭环思考能力，而这正是设计、产品工作最内核的价值。
不必过度纠结被 AI 取代的风险，做好两件事即可：持续打磨辨别好坏的专业眼光；跳出口头谈论，实实在在把 AI 运用到工作当中。
兰亭妙微ui设计公司分享：AI 设计工程化，核心是从交付静态设计稿，升级为直接交付可落地的工程代码，尤其适配页面结构标准化、组件高度复用的 B 端业务场景。整套工作流有 5 个关键转变：
随着大模型快速普及，很多团队都在尝试用 AI 提升设计产能，但 AI 对不同类型需求的价值截然不同：
以淘宝闪购商家 B 端推广业务为例，业务月均 20 个需求，72% 都属于标准型页面，需求密度高、重复模式多，非常适合落地 AI 设计提效。这也抛出一个行业思考题：AI 浪潮下，设计师的产出是否可以跨过设计稿，参与到代码落地环节？本次实践就是围绕这个命题展开的实战探索。
市面上 AI 赋能 UI 一共有 4 条主流实现路径，彼此核心差异在于最终交付产物：
表格
| 方案 | 代表工具 | 工作流特点 |
|---|---|---|
| AI 设计工具 | DoneAI、FigmaMake | 需求→思考→输出 HTML / 设计稿→工程二次实现→设计走查 |
| IDE+HTML | Qoder、Cursor | 需求→思考→输出 HTML→工程二次实现→设计走查 |
| AI 设计工程化 IDE+Skill+React | Qoder、Cursor | 需求→思考→直接输出 React 工程代码 |
| 自建 Agent 平台 | - | 按需定制方案，整体实现成本极高 |
重点区分：HTML 更偏向模型输出的 “效果图”，而 React 工程代码是可直接参与项目迭代的真实产物。
整套落地分为五大阶段：
传统模式设计师输出效果图，而 AI 工程化模式下，设计师需要触达下游实现环节，完成从 “交付图纸” 到 “交付代码” 的转变。实践中设计师会额外承担约 30% 原属于前端的工作，带来两类痛点：
✅ 解决方案：联动研发沉淀SOP‑Skill，把完整流程固化，实现流程自动化，降低普通设计师上手门槛，提升工程部署效率。
核心思路：用设计师的思考逻辑定义 Skill，搭建高质量生成框架，沉淀可复用经验。
针对 B 端推广标准页面，本次实战拿到明确提效结果：
团队长期目标：标准型页面实现80‑90% 设计提效，持续迭代优化。同时需要客观看待 AI 的局限：受限于模型能力与幻觉问题，现阶段无法完全替代设计师，质量把关依旧必须由人完成。
AI 是强大加速器，而非替代者。设计工程化不是让设计师写前端，而是让设计资产真正以代码形态流入产品生产链路。
做中后台系统的设计师，经常面临一个尴尬：C 端产品拼颜值、拼创意，后台产品拼的却是 "信息密度" 和 "操作效率"。同样的设计手法，用在 C 端是加分，用在后台可能就是灾难。
画原型只是最终的输出手段。交互设计的真正价值，在于把一个模糊的业务需求，一步步转化为用户可以顺畅操作的界面。这个过程有清晰的方法论，不是凭感觉画出来的。
兰亭妙微ui设计公司分享：界面看着粗糙、精致度不足，却找不到优化切入点？首页顶部 Banner（广告大图）往往就是问题的关键。
界面配图除普通素材填充之外，还包含运营广告类素材。二者属性不同，排版逻辑也存在明显差异。如果 Banner 处理草率，会直接拉低整个页面的视觉质感，尤其是 App 首页顶部的大广告位，设计失当带来的负面影响尤为突出。
今天我们聚焦首页顶部 Banner，系统讲解它的设计思路与落地方法。
早年绝大多数 App 首页都会配置顶部 Banner 模块，如今不少产品已经将该组件移除，或是下移至页面中下部（如淘宝、京东）。但依然大量产品在首页或二级页面保留了这类布局逻辑。
按照用途，Banner 可以分为固定广告图与运营活动图两类：
分层渲染的优势在于：文字可后台快速编辑替换；背景与文字分层，能够实现视差等差异化动效。
固定广告图想要做到稳妥耐看，需要守住 4 条基础准则：
正式设计前，需要先选定版式，搭建对应的栅格参考系统，约束元素摆放位置。移动端 App Banner 最常用的就是左右布局、居中布局。左右布局兼容性强、不容易翻车，但相对普通；居中布局视觉冲击力更强，对素材、场景有一定要求。
左右布局需要先定义四周边距参考线，四边内边距无需完全均等：
四边约束完成后，继续细化栅格：增加垂直中线分割画面；绘制水平参考线约束文案垂直位置；设置右侧竖线对齐主体图形中轴线。
栅格搭建完成后落地流程：
注意：修饰效果点到为止。目标是用最少的加工提升完成度，不要按照 H5 大促主视觉的标准做过度复杂的特效。
居中布局分为两种形式：①标题在上，主体在下；②标题与主体全部居中，文字叠加于主体之上。
第一种适合 Banner 高度充足的场景；移动端首页 Banner 高度普遍偏扁，因此文字 + 主体叠加居中是更常用的形式。
栅格搭建要点：
✨视觉小知识：Banner 视觉会向上延伸到状态栏区域，如果标题严格放在画布正中，人眼观感会觉得整体偏下。因此核心标题应当摆放在画布中上位置，实现视觉平衡。
栅格就绪后填入标题、辅助文案与主体图形，再做细节打磨。
⚠️素材避雷：细长型物体（黄瓜、眉笔、香蕉等）不适合居中版式，优先选择轮廓饱满、比例适中的主体素材。
背景简易处理技巧（非实景场景）：不直接使用完整场景图，采用「纯色 + 弥散光斑」。从主体物体取色微调作为底色，叠加半透明模糊圆形光斑，高效做出柔和的层次氛围。
这套方法不会做出惊艳炸裂的效果，但可以有效避免凭感觉设计带来的各种问题，适配 UI 界面的整体调性，做到安全、合格、不出错。
很多新人会追求一步到位做出高表现力 Banner，但复杂视觉效果对平面功底要求很高，仅靠框架模板很难驾驭。新手应当优先夯实基础落地能力，牢记以下禁忌：
重点认知：Banner 只是 UI 界面的其中一个模块，不需要它抢尽风头。不给整体界面拖后腿，就是合格的 Banner。
Banner 设计不能完全依赖 AI 一键生成，AI 痕迹过重的广告图会严重降低界面品质。设计师需要掌握基础栅格与排版逻辑，自主把控文案、素材、层次细节。
蓝蓝设计的小编 http://www.lanlanwork.com