首页

兰亭妙微UI设计公司分享:Fynix AI智能财务管理平台UI/UX设计深度解析

丽洁 B端ui设计文章及欣赏

导读|从AI财务洞察、现金流可视化到智能对话助手,构建“感知—分析—决策”的个人财务管理闭环。本文不止评价画面风格,而是从产品目标、信息组织、行为路径、视觉语义和落地风险五个层面拆解这套方案。

1.png

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

Fynix并没有把自己限制为一款简单的记账工具或银行App的复制品,而是试图建立覆盖资产总览、AI洞察、交易管理与智能咨询的个人财务操作系统。桌面端承担全局洞察与深度分析,移动端承接高频操作与即时查看,AI则被安排在财务诊断、异常检测和理财建议等关键决策点。

对桌面端用户而言,Fynix提供了一个信息密度高但层次分明的仪表盘,将分散在多个银行账户和投资平台的数据聚合为统一的财务全景图;对移动端用户而言,Fynix将核心余额卡片和快捷操作(存款、转账)前置到iOS桌面小组件,用户无需打开App即可掌握资产动态。AI助手“Ask anything...”的入口贯穿两端,确保智能建议随时可得。

 

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

信息架构围绕“我有多少钱—钱去了哪里—接下来怎么做”展开。桌面端首页以总余额卡片、现金流图表、最近交易为优先层级;AI增强模块(收入/支出/储蓄明细)、信用评分和货币兑换被组织为可进入的功能模块;长期数据则沉淀到统计报告看板。这样的分层既照顾即时行动,也保留专业用户对趋势和细节的需求。

移动端采用“小组件+App”的双层架构:桌面小组件承担“一眼掌握”的角色,展示Total Balance和快捷操作按钮(Deposit/Send);App内部则展开完整的Cashflow柱状图、AI Assistant对话入口和详细交易列表。侧边栏导航(Dashboard、AI Fynix、Transactions、My Wallet、Invoices、Reports、Settings)采用折叠式布局,保证主内容区的视觉优先级。

 

三、关键交互:从浏览数据走向财务决策

交互亮点是把复杂的金融数据转译为可执行洞察。总余额卡片、现金流柱状图和AI助手不是装饰,而是把资产状况、收支偏差和优化建议直接显性化。

桌面端交互设计中,Cashflow图表支持“This Year”等时间维度切换,绿色柱体代表收入、深色柱体代表支出,用户可直观对比月度收支趋势;Finance Score进度条以“Excellent 92%”的量化标签呈现信用健康度,将抽象的“信用好坏”转化为可追踪的数值指标。AI Assistant模块采用圆形头像+对话输入框的拟人化设计,用户输入“What Can I help with?”即可获取个性化财务建议,降低了获取专业分析的操作门槛。

移动端则强调“少点一次”的原则:iOS小组件直接在桌面展示余额和Deposit/Send按钮,用户从锁屏到完成转账只需两次点击。App内的交易列表采用状态标签(Completed/Pending)区分交易进度,配合右侧的金额正负色标,实现“扫一眼知盈亏”的交互效率。

 

四、视觉系统:品牌表达必须承担金融语义

浅灰白背景建立专业、洁净与可信赖感,鲜绿色(Lime Green)作为核心操作色,在大面积留白中保持清晰焦点,传达增长、财富与活力的心理暗示;深墨绿色用于支出数据和警示信息,形成具有语义的第二强调色。卡片圆角、柔和阴影和扁平化设计让金融数据不至于显得冰冷,同时保持跨设备视觉一致。

色彩策略上,绿色不仅用于“存款”按钮和收入柱体,还用于Finance Score的“Excellent”状态标签和AI Enhancements模块,形成积极的心理暗示;红色仅在必要警示时使用,避免造成财务焦虑。图标系统采用简洁线性风格,既现代又不失稳重,符合金融科技行业的严谨属性。字体选择上,标题使用几何感强的无衬线字体,正文使用高阅读性的中性字体,确保在展示大量财务参数时界面依然清晰易读。

ScreenShot_2026-09-08_173822_991.png

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

对产品经理而言,最值得借鉴的是AI原生设计思维:AI不是事后添加的功能插件,而是贯穿资产总览、交易分析和用户咨询的核心驱动力。“AI Fynix”作为独立导航项出现在侧边栏最高层级,表明AI能力是产品的第一等公民,而非二级功能。这种设计思路值得所有数据密集型产品借鉴——不要让AI成为藏在设置菜单里的彩蛋,而应让它成为用户每天打开App的第一个理由。

对设计团队而言,要重点维护“数据可视化与操作便捷性”之间的平衡。Fynix在同一个仪表盘内同时呈现总余额、现金流、信用评分、交易列表和AI对话五个信息域,却通过卡片分区、色彩层级和留白控制避免了视觉混乱。其秘诀在于:每个卡片自成一统(独立背景、圆角、阴影),卡片之间用等距网格对齐,核心操作色(绿色)仅用于需要用户行动的元素,其余数据以中性色呈现。这种“卡片联邦”架构是可复用的设计模式,适用于仪表盘、后台管理系统等各类数据产品。

 

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

现有方案的主要风险是信息密度较高,桌面端仪表盘上多个数据卡片同时展示可能造成认知负荷。建议强化“今日财务重点”模块,将次要数据折叠为按需展开;AI财务建议应增加置信度说明和数据来源标注,避免用户对单一数值产生过度依赖;跨境货币兑换需明确汇率更新时间与手续费透明度。

此外,隐私安全感的设计仍需加强:虽然用户访谈中提到“keeping my personal financial information secure is very important”,但在UI上缺乏生物识别(FaceID/TouchID)入口或隐私锁的视觉暗示。建议在进入App或查看敏感交易记录时增加安全验证环节。同时,空状态设计(如“No transactions yet”)和错误状态处理(如API请求失败)也需进一步完善,确保用户在数据缺失时仍能获得清晰的引导而非空白页面。

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

 

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

Fynix展示了AI金融科技产品从“数据展示工具”走向“智能财务顾问”的路径:以数据建立认知,以AI形成洞察,以简洁交互促成行动。真正决定产品可信度的,不是展示了多少数据指标,而是每条AI建议是否透明、可执行、可被用户理解和修正。当用户的财务状况发生变化时,Fynix能否像一位老朋友一样,在合适的时机递上最需要的财务建议——这才是设计最终需要回答的问题。

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

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

 

image.png

兰亭妙微设计手册:UI 设计师必须知道的 19 条交互原理

涛涛 交互设计及用户体验

做交互设计久了,你会发现所有看似 "凭感觉" 的决策背后,都有一套经过验证的心理学和行为学原理在支撑。兰亭妙微在项目中反复参考 Jon Yablonski 整理的 Lawsofux——19 条易于理解、应用广泛的 UX 原则。今天我们把这 19 条原则做一个系统梳理,每条配上一句话的核心解读,方便大家随时查阅。

兰亭妙微设计方法论:交互设计的六大原则

涛涛 交互设计及用户体验

说起 UI 设计,就绕不开交互设计。交互设计定义的是人与系统之间交流的内容和结构,让双方互相配合、共同达成目标。兰亭妙微在多年的设计实践中,把交互设计的底层逻辑归纳为六大原则 —— 可视性、反馈、限制、映射、一致性、启发性。这六条不是空洞的理论,而是我们做每一个项目时的自检清单。

兰亭妙微ui设计公司分享:怎么做才能用字体结构塑造多样表达?

清阳 平面设计

在字体设计当中,合理运用书写逻辑规律,既能依靠笔画势态营造独特的视觉节奏感,也可以精准控制笔画与部件形态。我们还可以借由字形本身开展字与字之间的重组,以合体字的形式传递文字内涵;在保留单字独立属性的前提下,赋予字体意象化的表达能力。

image.png

案例一:「中元节」字体创意实践

image.png

  1. 以 “中元节” 作为创作案例,融合不同书写逻辑搭建字形。先用几何线条确立基础骨架,再借鉴书写笔法改造笔画部件形态,在保障文字识别度的基础上,赋予字形书写的节奏变化。

    image.png

  2. 挖掘两个汉字本身的结构特征,将二者融合为一个合体字,同步调整字面大小,实现整体结构的平衡与稳定。

    image.png

  3. 将主题相关的数字特征融入字体粗细、笔画长短、倾斜角度、笔画间距等参数,搭建一套严谨的基础造型规则,减少后期细节修改的工作量。

    image.png

  4. 路径转曲之后,遵循书写走势调整 “元” 字竖弯钩:起笔承接上一笔的收笔势态,收笔采用急转的处理方式,以此检验局部笔画形态能否带动整个字体的气韵节奏。

     

  5. 迭代收笔形态:把原本急转形成的弧线与拖笔装饰,替换成刀刻般干脆利落的笔触,配合提笔收尾的锐利感,达成视觉语言统一。

    image.png

  6. 顺着书写走势,对 “中” 字封闭部件做开口处理,让循环流动的走势和倾斜竖笔形成落笔节奏;参考篆体写法,给竖笔末端增加装饰延伸。对 “元” 字右侧连笔做倾斜变化,延续竖弯钩的书写动势,调整末端造型与拖尾细节。笔画走势内在连贯统一,视觉上却形成反差矛盾的趣味效果。

    image.png

  7. 运用外圆内方的设计逻辑:锐角位置改为圆角,内部棱角支撑字体结构,外部圆角顺应曲线连笔,烘托整体气质。

    image.png

  8. 给不同笔画部件分配色彩,依靠色彩与部件的对应关系,确立整套字体的情绪调性。

    image.png

  9. 对配套英文进行排版设计,参照中文字体的造型规则,对字母做拉长、倾斜处理;结合阅读语义,调整单词的大小层级。

    image.png

  10. 完成中英文组合排版,严格把控各组文字间距,均衡不同模块的视觉面积。即便英文字符宽度大于中文,也不要强行做等宽对齐,避免产生错误的视觉错觉。

    image.png

  11. 最后做四象限布局调整,所有形态变化,都依托中文本身的形体与动势来完成。

    image.png

关于创意字体的识别度思考 创意字体的识别度是相对概念。很多时候并非字形识别失效,只是它跳出了常规方块汉字的阅读逻辑。高识别度只是字体众多表现可能性中的其中一种。视觉传达目标与内容概念,才是决定识别度取舍的核心。把大众熟悉的汉字范式融入概念化创意,即便适度牺牲部分识别度,也能用陌生化视觉完成概念可视化,承载多层意象,实现多维度的情感解读,这也是字体创意极具魅力的表达方式。

 

转载:站酷

 

 

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

 

image.png

兰亭妙微ui设计公司分享:从零搭建网站设计:3 个核心维度,少走设计弯路

清阳 网站设计文章及欣赏

兰亭妙微ui设计公司分享:很多新手做网页设计,直接上手画页面,却忽略画布尺寸、导航选型、屏幕适配这些底层问题,最终设计稿交付开发后,出现页面错位、首屏信息被遮挡、不同设备体验差异巨大等问题。本文从画布与内容区、导航模式选型、布局与屏幕适配三大模块,拆解 PC 网站设计的关键实操要点。

一、画布与内容区:选对基准尺寸,算准真实首屏

image.png

在完成用户调研之后,正式设计的第一步,就是确定画布大小,画布基准要参考市场主流设备的分辨率分布。

根据 2021 年 PC 分辨率统计数据,1920×1080是市场占有率最高的分辨率,占比 40.75%;1920×1080、1366×768、1440×900 三者合计占比达到 62.75%。

设计选型小提示:遵循小屏适配大屏优于大屏适配小屏的兼容原则,B 端项目可以选用 1440×900作为设计画布,阿里、Material Design 的 B 端规范均采用该尺寸。 如果产品面向特定人群,可直接以用户实际设备为准,例如企业内部办公系统,员工普遍使用 1366×768 笔记本,则直接以此作为画布标准。

首屏高度,不能直接照搬屏幕分辨率

image.png

网页运行在浏览器当中,系统 UI、浏览器控件都会挤占可视区域的高度,直接用屏幕分辨率当做首屏高度,会导致核心内容被遮挡。

  1. 系统占用高度:Windows 任务栏、Mac 程序坞、系统菜单栏,都会消耗屏幕垂直空间。
  2. 浏览器占用高度:页签栏、地址栏、书签栏共同占用可视高度。 主流浏览器控件高度参考:
  • Chrome:页签栏 40px + 地址栏 46px + 书签栏 34px,合计 120px
  • Safari:页签栏 28px + 地址栏 52px,合计 80px

 

image.png

真实可视首屏高度计算公式: 严格版:屏幕分辨率高度 − 浏览器控件高度 − 系统 UI 占用高度 简易版:屏幕分辨率高度 − 浏览器控件高度

image.png

设计时以此划定首屏线,把最重要的业务信息放置在首屏可视范围内。

二、导航模式选型:左导航 VS 顶导航,任务场景决定方案

PC 网页最主流的两种导航形式:左侧导航、顶部导航。

image.png

早在 2004 年,学者 JR Kingsburg 就针对三级菜单导航做可用性实验,对比 8 种导航组合,在完成明确任务的场景下,一级导航放置在侧边,用户操作效率更高,选择错误、操作犹豫的情况更少。

两种导航优劣势解析

image.png

左侧导航(侧导航) 优势:

  • 垂直排布,换行 + 缩进可以清晰展示多层级菜单;
  • 二级菜单常驻展示,不需要 hover 触发,用户对整体菜单结构一目了然,完成指定任务效率高。 劣势:会占用页面横向空间,压缩内容展示区域。 适用场景:任务驱动型网站,后台管理系统、邮箱、票务预订系统,代表产品:QQ 邮箱、公众号后台、携程后台模块。

顶部导航 优势:横向排布,几乎不占用横向空间,最大化释放内容展示区域。 劣势:二级菜单依赖 hover 悬浮唤起,鼠标移开菜单就消失,多层级导航的阅读、理解成本更高。 适用场景:内容消费型网站,资讯、图片、视频平台,代表产品:花瓣、知乎、爱奇艺。

同一个网站不同模块,也会混合使用两种导航:以百度为例,搜索浏览页面使用顶导航,给内容让出空间;进入个人中心,需要修改资料、管理收藏等明确操作,切换为左侧导航,提升功能查找效率。 很多综合网站会采用混合方案:顶导航承载登录、全局搜索这类通用能力,左侧导航承载细分业务菜单。

image.png

image.png

三、布局与适配:看懂 3 种适配方案,对齐开发预期

基础参数参考:

  • 侧导航宽度:常用200+8n的数值区间,208‑272px 都属于行业常见范围;
  • 顶部导航高度浮动较大,36‑80px,根据业务、视觉风格自由选择。

不同分辨率对应有安全内容宽度区间,设计时需要参考安全宽度,再结合栅格系统、适配策略确定最终内容区大小。

PC 网页一共 3 种主流适配实现方案,设计阶段就需要和前端对齐方案,避免后期返工:

1. 固定宽度布局

image.png

页面整体设定固定 px 宽度,无论大屏小屏,页面尺寸不会变化。 优点:设计还原简单,开发成本低; 缺点:兼容性差。小屏幕下会出现横向滚动条,大屏幕两侧留出大量空白。

2. 自适应布局(Responsive layout)

image.png

不改变页面整体模块排布结构,将 px 单位替换为百分比、rem,页面元素会跟随屏幕等比缩放,布局结构保持不变。 大多基于栅格系统实现,栅格由列(Column)、间距(gutter)、外边距(margin)组成,移动端设计规范,很多也是栅格体系的简化版本。

3. 响应式布局(Adaptive layout)image.png

依靠 CSS 媒体查询@media,针对不同屏幕断点编写多套样式,屏幕尺寸变化时,不仅元素大小改变,模块排布结构也会发生变化,大屏、小屏呈现不一样的页面结构。 优点:各尺寸体验最优; 缺点:需要维护多套代码,开发工作量大。 实操中,通常结合栅格系统 + 屏幕断点共同实现。

协作建议:设计输出前,提前与开发确认适配方案,约定最大、最小适配屏幕边界,搭建统一的栅格规范,大幅降低沟通成本,减少还原偏差。


总结

从零设计 PC 网站,不要直接陷入视觉细节:

  1. 画布先定基准,结合市场分辨率,计算真实可视首屏,保证核心信息可见;
  2. 导航看业务场景:任务型优先左侧导航,内容消费优先顶部导航;
  3. 适配提前对齐开发,分清固定宽度、自适应、响应式的差异,用栅格规范约束内容区。

转载:优设

 

 

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

 

image.png

兰亭妙微ui设计公司分享:GlowPath AI 智能护肤管理应用 UI/UX 设计深度解析

丽洁 B端ui设计文章及欣赏

导读|从个性化护肤流程、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"的设计愿景,解决了用户在护肤过程中缺乏系统性和持续性的痛点,让护肤从"凭感觉随便涂"变为"有计划、可追踪、能看到效果"的科学护理。

1.png 

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

信息架构围绕"今天该做什么—正在做得怎样—下一步如何调整"展开,打破了传统护肤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驱动的成分分析,将"成分表"这一专业内容转化为可操作的护肤决策依据。

2.png 

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

交互亮点是把复杂的护肤管理转译为低门槛的勾选与记录动作。

· 日常打卡流:每日打卡流程是核心交互。用户打开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)、已用产品等多维度过滤,帮助用户快速定位特定时间段或特定产品相关的皮肤变化记录,让数据真正服务于护肤决策。

3.png4.png 

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

GlowPath 的视觉设计在"医疗专业感"与"生活方式亲和力"之间找到了精准的平衡点。

· 色彩策略:大面积纯白背景建立洁净、通透的基调,传递护肤产品应有的"纯净"心理暗示。柔和的草绿色/薄荷绿(#a3d9a5、#95ec69、#c8e6c9)作为核心操作色,在大面积白色中保持清晰焦点,象征自然、健康与生命力。深灰/黑色用于主要文字,浅灰色用于次要信息和分割线,形成清晰的视觉层级。

· 卡片与空间:所有卡片采用大圆角矩形设计,边缘平滑柔和,避免尖锐棱角带来的生硬感。卡片内部通过充足的留白区分内容块,无复杂分割线。极轻微的弥散阴影使列表项从白色背景中轻微浮起,增加了界面的层次感和悬浮感,但不过分厚重,保持了整体的轻盈度。

· 字体与图标:标题使用无衬线字体(Sans-serif),字重对比明显(标题加粗,正文常规),显得现代且友好。图标采用线性与面性结合的风格,线条纤细流畅,配合绿色点缀,风格统一且精致。底部导航栏采用五段式布局,中间突出的"+"号引导用户进行核心操作(记录/拍照),符合拇指热区的使用习惯。

5.png 

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

· 对产品经理而言:最值得借鉴的是"习惯养成闭环"设计:数据采集(皮肤照片+产品记录)并非终点,而是必须进入个性化建议生成、行为执行追踪、效果反馈展示和再次调整的完整闭环。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开发等技术栈上均有成熟落地能力,确保设计稿能够被高保真还原。

6.png 

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

现有方案的主要风险是功能密度与认知负荷的平衡问题。

· 可读性适配:虽然浅色清新风格很讨喜,但在户外强光下白色背景+浅色文字的组合可能影响可读性。建议增加自动亮度适配或提供深色模式选项,特别是在护肤场景可能发生在浴室等潮湿环境时,屏幕可视性尤为重要。

· AI 可信度:AI成分分析功能虽然亮点突出,但需要明确标注分析的置信度和数据来源。如果AI对某成分给出"有害"或"推荐"的判断,应增加"仅供参考,请咨询皮肤科医生"等非诊断性提示,避免用户过度依赖算法做出错误的护肤决策。

· 隐私安全:皮肤照片涉及高度个人隐私。用户上传的面部照片应提供本地加密存储选项,并在隐私政策中明确照片的使用范围和删除机制。同时,社交分享功能(如有)应允许用户选择是否隐藏面部识别特征。

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

GlowPath 展示了AI护肤产品从"产品目录工具"走向"个性化护肤伴侣"的路径:以打卡机制建立习惯,以照片日记形成承诺,以即时反馈维持行动。真正决定产品可信度的,不是AI分析了多少成分,而是每条护肤建议是否透明、可执行、可被用户修正,以及用户是否真的能在30天后看到皮肤变得更好。

在护肤这个充满"智商税"和"幸存者偏差"的领域,一个能诚实面对数据局限、尊重用户隐私、用科学态度替代营销话术的产品,才能获得真正的长期用户信任。GlowPath 迈出了这一步,但距离"值得信赖的护肤AI伙伴"还有相当长的路要走。

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

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

 

image.png

兰亭妙微ui设计公司分享:Spora AI 智能植物伴侣 UI/UX 设计深度解析

丽洁 移动端UI设计文章及欣赏

导读
从 AI 拍照诊断、个性化养护日历到自然对话式问答,构建“识别-诊断-养护”的植物生命周期管理闭环。本文基于提供的视觉方案,从产品定位、信息架构、关键交互、视觉语义及体验边界五个层面,拆解这套将硬核园艺知识转化为极简数字体验的设计方案。

1.png

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

Spora 并没有把自己仅仅定位为一款植物百科全书或简单的浇水提醒工具,而是试图建立一个覆盖精准诊断、个性化护理计划与即时专家咨询的智能园艺操作系统。

● 核心痛点解决:针对“70% 的室内植物在第一年死亡”以及用户“看不懂植物求救信号(如黄叶、枯萎)”的焦虑,Spora 提出了“Grow healthier plants with AI”的核心价值。它解决了新手养花“不知为何死”和老手养花“精力顾不过来”的双重难题。

● AI 赋能:AI 不仅仅是后台的图像识别引擎,更是前台的“私人园艺师”。它被安排在“Camera Screen”(拍照诊断)、“Diagnosis Result”(健康评分与处方)以及“AI Plant Assistant”(自然语言问答)等关键决策点,让复杂的植物病理学变得触手可及。

● 核心价值:通过“Care Made Simple”的理念,将模糊的园艺经验转化为精确的数据(如“200ml water”),让用户从凭感觉养花走向科学养花。

2.png

二、信息架构:把功能转译为植物的生命节律

信息架构围绕“我的植物现状—接下来做什么—遇到问题怎么办”展开,打破了传统工具类 App 枯燥的列表结构。

● 首页层级(My Plants):以“植物卡片流”为核心,每张卡片不仅展示照片,更直观呈现“Health Score”(健康分)和“Next Task”(下一步任务)。这种设计让用户打开 App 就能掌握全局健康状况,而非陷入复杂的分类筛选中。

● 详情页深度(Plant Detail):采用仪表盘式布局。顶部是实时的环境数据(光照、湿度)和健康趋势图;中部是具体的行动指南(What you can do),将抽象的“缺氮”转化为“使用平衡液体肥料”的具体指令。

● 任务系统(Care Calendar):将分散的养护动作(浇水、施肥、换盆)聚合为时间轴视图。通过“Needs Attention”(需关注)和“Healthy”(健康)的状态标签,帮助用户快速区分轻重缓急。

3.png

三、关键交互:从被动查询走向主动关怀

交互亮点在于把复杂的园艺知识转译为低门槛的互动反馈。

● 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”提供完成任务的爽快感。

4.png

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

视觉风格在“科技感”与“自然感”之间找到了完美的平衡点。

● 色彩策略:摒弃了传统园艺 App 滥用的高饱和度绿色,转而使用深苔藓绿(Moss Green)搭配大面积留白和深黑背景。这种配色既保留了植物的生命力,又营造出一种高端、静谧的实验室质感,暗示了产品的科学性。

● 字体选择:标题使用 Gilroy(几何感强,现代有力),正文使用 Manrope(阅读性极佳,中性干净)。这种组合确保了在展示大量养护参数时,界面依然清晰易读,不会产生视觉疲劳。

● 图像质感:UI 中的植物摄影采用了微距和高对比度处理,叶片纹理清晰可见。配合圆角卡片和柔和的阴影,让数字界面仿佛有了呼吸感,消除了医疗诊断类界面的冰冷感。

5.png

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

对产品经理而言,最值得借鉴的是 “诊断即服务” 的闭环设计:拍照不仅仅是为了识别名字,更是为了生成后续的养护计划和触发 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。

 

image.png

兰亭妙微UI设计公司分享:Medical Resource 智能医疗档案伴侣 UI/UX 设计深度解析

丽洁 移动端UI设计文章及欣赏

导读 从 AI 处方识别、家庭账户管理到就诊清单,构建“诊前-诊中-诊后”的全周期健康管理闭环。本文从产品定位、信息架构、关键交互、视觉语义及体验边界五个层面,拆解这套以“家庭”为核心的医疗档案解决方案。

1.png

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

Medical Resource 并没有把自己仅仅定位为一款挂号工具或简单的电子病历存储盘,而是试图建立一个覆盖多成员档案管理、就诊准备辅助与医疗数据智能化的家庭健康操作系统。

● 核心痛点解决:针对用户(特别是家庭照护者)面临的“纸质处方易丢失”、“老人小孩病历分散”、“复诊时忘记带关键报告”等混乱现状,App 提出了“Your Health, Our Priority”的服务理念。

● AI 赋能:AI 不仅仅是后台的 OCR 识别工具,更是前台的“健康秘书”。它被安排在“Smart AI extracts what matters”(智能提取关键信息)和就诊前的“What to bring”(携带清单生成)等关键决策点,将非结构化的纸质单据转化为结构化的数字资产。

● 核心价值:通过“One Place for Every Family Member”的设计,解决了多人口家庭健康管理割裂的痛点,让就医过程从“慌乱寻找”变为“从容应对”。

2.png

二、信息架构:把功能转译为家庭的关怀流

信息架构围绕“当前状态—家庭成员—历史记录”展开,打破了传统医疗 App 仅针对个人的单一视角。

● 首页层级(Home):采用“时间轴+卡片”布局。最优先展示的是“Upcoming visit”(即将到来的就诊),并直接关联到具体的家庭成员(如 Father, Mother)。下方则是“Health Summary”概览,让用户一眼掌握全家人的就诊频次和报告数量。

● 档案层(Records):这是 App 的核心资产库。顶部设置了显著的成员切换器(All, Me, Father, Mother, Wife),支持一键过滤。列表项不仅显示医生姓名,还通过标签(Prescription, Test Report)和日期清晰分类,解决了“找不到某次特定检查报告”的难题。

● 就诊层(Visit):将抽象的“看病”具象化为任务流。在就诊详情页,系统自动列出“What to bring”(需携带物品),如处方、心电图等,将信息架构从“存储”转向了“行动指引”。

3.png

三、关键交互:从被动存储走向主动辅助

交互亮点在于把复杂的医疗管理转译为简单的勾选与扫描动作。

● 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”(紧急信息)模块,如血型、过敏史、紧急联系人,以便在突发状况下供急救人员快速获取。

5.png

结语:设计的最终判断标准是业务与使用价值 Medical Resource 展示了医疗工具类 App 从“数字化存储”走向“智能化陪伴”的路径:以 AI 降低录入门槛,以家庭视图拓宽服务边界,以就诊清单延伸服务场景。真正决定产品温度的,不是存储了多少张处方照片,而是它能否在用户最无助的就医时刻,递上一份清晰的指引和安心的保障。

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

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

 

image.png

兰亭妙微UI设计公司分享:VOXA 奢侈品腕表电商体验 UI/UX 设计深度解析

丽洁 网站设计文章及欣赏

北京兰亭妙微 UI 设计公司,成立 16 年来,始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势,从中提炼可落地的设计方法论,分享给同样热爱设计的你。

c688e4251209061.6a314ea9685d3.png

导读
从沉浸式色彩交互、响应式布局到数据驱动的体验验证,构建高端腕表的数字化展示闭环。本文不止评价画面风格,而是从产品目标、信息组织、行为路径、视觉语义和落地风险五个层面拆解这套方案。
6f6b7f251209061.6a314ea96c461.png

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

VOXA 并没有把自己仅仅定位为一款传统的腕表电商目录或简单的在线商店,而是试图建立一个覆盖品牌沉浸、精密工艺展示与无缝购买的数字化奢侈品展厅。
  • 桌面端/大屏端:承担极致的视觉冲击与细节展示,通过全屏的 Hero Section 和高清渲染图,还原腕表的机械美感,主要面向追求品质的高净值用户。
  • 移动端:承接碎片化的浏览与即时转化,强调“Royal Responsive”(皇家级响应式)体验,确保在竖屏滑动中依然保持高端质感。
  • 核心价值:通过“Explore Luxury Wrist Watch”的品牌主张,解决线上购买奢侈品时“质感缺失”和“信任感不足”的痛点,利用视觉语言传递“Precision, Sophistication”(精准、精致)的品牌基因。

 

二、信息架构:把功能转译为探索的欲望

信息架构围绕“视觉吸引—细节确认—信任建立—行动转化”展开。
  • 首屏层级(Hero):摒弃了传统的电商Banner轮播,采用巨大的产品渲染图配合动态背景色(如蓝色款对应深蓝背景),文案“Explore Luxury...”直接引导探索欲望。导航栏简洁克制(New, Products, Collection),减少干扰。
  • 内容流(Body):向下滚动进入“Discover premium watches”板块,采用卡片式布局展示不同系列。紧接着是 FAQ 模块和“Online Exclusive”专区,通过解决疑虑和提供稀缺性来推动决策。
  • 验证层(Data):设计中巧妙融入了“Browsing Insights”和“User Engagement”等数据可视化模块(如 +42% 参与度),这不仅是给设计师看的,更是向用户暗示产品的受欢迎程度,利用社会认同感增强转化。

aa576f251209061.6a314ea96d34f.png

三、关键交互:从静态浏览走向情绪共鸣

交互亮点在于把色彩心理学融入界面逻辑,以及跨设备的无缝衔接。
  • 动态色彩系统:这是最引人注目的交互细节。当用户在 Hero 区域切换不同配色的腕表(如从蓝色切换到橙色、绿色)时,整个页面的背景色、按钮色甚至辅助图形都会随之平滑过渡。这种“所见即所得”的反馈极大地增强了代入感。
  • 视频与静态的结合:在主图旁嵌入带有播放按钮的小窗口,允许用户在不离开当前页面的情况下预览腕表佩戴效果或机械运转细节,降低了获取信息的门槛。
  • 响应式适配:从宽屏显示器到手机竖屏,布局从左右分栏自然流转为上下堆叠,但核心的“大图+大标题”视觉张力始终未减,保证了品牌调性的一致性。

bd169a251209061.6a314ea96bd59.png

四、视觉系统:品牌表达必须承担溢价能力

视觉风格极度强调“高级感”与“科技感”的融合。
  • 字体排印:选用 Clash Display 字体家族,这种具有现代几何感且略带锐角的无衬线体,完美契合了精密机械表的工业属性,Bold 字重用于标题,极具张力。
  • 色彩语义:高饱和度的电光蓝(#0169FE)作为主色,传递科技与未来感;辅以橙色(#FF5000)作为强调色,用于促销或关键行动点。深色模式下的黑灰背景则有效衬托了金属材质的光泽。
  • 网格系统:采用了严格的 12 列网格(桌面端)和 4 列网格(移动端),留白(Margin/Gutter)宽敞,这种“奢侈的留白”是高端设计的典型特征,避免了拥挤感。

 

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

对产品经理而言,最值得借鉴的是“情绪化电商”的思路:卖高价商品不仅仅是卖参数,更是卖氛围。通过背景色的动态变化,让用户在潜意识里对商品产生情感连接。
对设计团队而言,要重点维护跨端体验的一致性。VOXA 展示了如何在移动端保留桌面端的复杂视觉效果(如光影、质感),而不是简单地做减法。同时,将“用户体验数据”(如 +75% 转化率)直接作为设计展示的一部分,证明了设计对业务的直接贡献。
 
跨行业经验复用:本项目的UI 交互设计方法论并非孤立存在。我们作为一站式 UI设计服务公司,同时也是专业的软件界面设计公司,在银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计等多个垂直领域积累了深厚的经验。作为 UI交互设计公司,我们深知不同行业对界面交互的特殊要求;作为数据可视化设计公司的复杂仪表盘方案,以及高端网站设计公司的品牌级视觉呈现,这套"以用户任务为中心"的信息架构逻辑均可复用。同时,我们在软件qt开发、软件wpf开发、软件vue开发等技术栈上均有成熟落地能力,确保设计稿能够被高保真还原。
 

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

现有方案的主要风险是视觉过载与性能负担。
  • 色彩干扰:虽然动态背景很酷,但在高频切换时可能会造成视觉疲劳,甚至影响文字的可读性(尤其是浅色文字在亮色背景上)。建议增加过渡动画的时长控制,或提供“减弱动态效果”的选项。
  • 内容深度:目前的页面更多停留在“展示”层面,对于奢侈品用户关心的“材质细节”、“机芯参数”、“售后保养”等深度信息入口不够明显。建议在卡片交互中增加“快速预览”功能,避免频繁跳转详情页打断心流。
  • 无障碍设计:高对比度的霓虹配色虽然时尚,但对于视力障碍用户可能不够友好,需确保文本与背景的对比度符合 WCAG 标准。

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

VOXA 展示了奢侈品电商从“货架陈列”走向“品牌体验”的路径:以视觉建立渴望,以交互传递质感,以数据验证价值。真正决定高端产品转化率的不只是图片的清晰度,而是整个浏览过程是否让用户感受到了与价格相匹配的尊贵与专业。

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

 

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

 

image.png

兰亭妙微ui设计公司分享:AI 时代如何突围?Facebook 前设计副总裁:人人都要成为「构建者」

清阳 交互设计及用户体验

兰亭妙微ui设计公司分享:近年已有不少完整落地项目由 AI 辅助完成,部分网站甚至可以实现产品 360° 交互预览,细节放大查看,技术的迭代正在重塑互联网行业的工作模式。

过去二十年间,互联网行业有着清晰分工:产品、研发、设计、用户研究各司其职,组成团队协作产出产品。 这套模式成立的底层逻辑,是落地实现的门槛很高,高度依赖专项技能。行业为此搭建了成熟的晋升路径,从初级、高级到专家,大家沿着专业赛道稳步向上成长。

但 AI 大幅降低了落地执行的成本。当 1‑2 个人,借助工具就能完成过去 6 个人的工作量,传统岗位分工正在遭遇拷问。 Julie 提出核心观点:AI 浪潮之下,无论身处哪个岗位,我们都要完成身份转变,成为一名「构建者(builder)」。

跳出岗位局限:学会调动资源,推动结果落地

image.png

成为构建者,不等于要求你精通全部技能,而是重塑做事思维。

旧模式里,我们习惯边界化工作:“我只负责自己模块,其余交由他人处理”。 如今 AI 可以写代码、生成文案、完成数据分析,个体完全有机会把一个想法,完整推进至落地。你的身份,不再是流水线当中的一环,而是整件事的主导者。

转变包含两个层面: 第一,心态转变 过去遇到职责外工作,第一反应是 “这不归我管”。而构建者的思考逻辑是:想要达成目标,目前还欠缺什么?我能否借助 AI,或是联动伙伴补齐缺口? 关注点从「我的岗位要做什么」切换为「这件事如何才能做成」。

第二,能力定位转变 不要被岗位标签定义自我,聚焦你的真实能力:有的人拥有顶尖视觉能力,有的人擅长梳理复杂系统,有的人擅长从 0 到 1 开拓新项目。 认清自己的核心长板,以优势为根基,借助 AI 与他人协作补足短板。

简言之,过去比拼的是单一专业的深度;而当下,更考验整合全部资源,交付完整成果的能力。专业功底依旧是立身之本,但仅有手艺,已经不足以应对时代变化。

执行交给 AI,判断力才是核心竞争力

image.png

如今 AI 足以输出大量中等偏上水平的成果,方案的执行门槛被抹平。但甄别优劣、洞察问题、指明优化方向的判断力,成为人的核心价值。

该怎样打磨这份专业判断力?

  1. 找到一线实战高手:锁定那些深耕 AI 实践、熟用各类工具,并且产出优质作品的从业者。
  2. 深度拆解作品:不只是浅层浏览效果,要深挖背后的设计逻辑、完整工作流,理清创作者的思考重心。
  3. 主动寻求专业反馈(最关键):在内心建立一套好坏评判标准,带着自己的作品向高手请教,借由外部反馈迭代认知。

就好比请毕加索点评画作,不是远远仰望,而是拿出自己的作品,在反馈中实现自我成长。

拒绝纸上谈兵,一定要亲自下场实践

image.png

Julie 反复强调一个认知:不亲手实操工具,就不可能真正理解 AI。

她的观点十分直白:如果连当下技术的能力边界都不了解,很难称得上是 AI 时代优秀的设计师、产品人。行业认知无法靠读文章、听播客获得,必须亲身实操。

她本人便是如此:写代码会逐一测试 Cursor、Claude Code、v0、Lovable;会议记录依靠 Granola;数据分析使用自家产品 Sundial。 对待工具,她像面试候选人一般,逐一测评,不为追逐新潮,只为摸清每个工具的优势、短板,清楚什么任务适合交给哪款工具。

有一个很值得反思的细节:即便本身写作能力很强,Julie 依旧强迫自己切换到 AI 协作的写作模式。

人天然会依赖顺手的旧流程,越是自己擅长的领域,越抗拒改变。但恰恰是这些熟门熟路的工作方式,最容易让人停滞不前。固守旧有习惯,就很容易被善用新工具的同行超越。

道理简单朴素:不要只停留在围观讨论,把 AI 嵌入日常工作流,哪怕初期体验别扭。实操越多,越懂 AI 的能与不能,也更明白个人努力该投向何方。

管理不再是管理者专属,而是每个人的基础能力

image.png

这是一个容易被忽略的洞察:管理,正在从少数人的岗位职能,变成全员必备基本功。

经典管理模型包含三大要素:目标、人、流程。这套框架在 AI 时代依旧成立,只是资源对象发生变化。

过去,我们主要的协作资源是团队同事;现如今,AI 模型已经成为重要的 “团队成员”。 不同模型各有所长:部分擅长代码编写,部分擅长文案创作,部分擅长处理复杂数据。我们需要像管理团队一样用好 AI。

工作逻辑就变成管理者思维:明确项目目标;将合适的任务分配给适配的 AI 模型;理顺整体协作流程,让人与 AI 协同完成任务。

过去专属于领导力的各项能力,不会被 AI 替代,反而成为每个职场人的必修课。

结语

看完这些思考,未必能完全消解焦虑,但可以理清方向。 AI 替代的是重复执行工作,却夺不走人的判断力,以及从构思到落地的完整闭环思考能力,而这正是设计、产品工作最内核的价值。

不必过度纠结被 AI 取代的风险,做好两件事即可:持续打磨辨别好坏的专业眼光;跳出口头谈论,实实在在把 AI 运用到工作当中。

 

转载:优设

 

 

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

 

image.png

日历

链接

个人资料

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

存档