首页

交互设计思维的流程

资深UI设计者 设计管理与成长

在设计一个优秀的互联网产品时,设计流程往往分为几个阶段,每个阶段都有清晰的目标和方法。这不仅帮助我们找到真正的用户需求,也确保设计思路清晰、可执行。下面,我们用简单易懂的方式来讲解整个设计流程。

ui设计的真需求

ui设计分享达人 设计管理与成长

设计的真需求
 
 
 
一、引言
 
设计的终极目标是什么?是解决用户问题,满足商业需求,还是超越功能与形式,为用户和社会创造更深远的价值?这些问题一直在设计师的职业生涯中反复思考与探索。
在《真需求》一书中,梁宁提出了一个核心观点:商业的本质在于满足“真需求”。她通过“价值、共识、模式”的商业闭环模型,帮助我们从用户真实需求出发,创造持久的价值。这一框架不仅为商业创新提供了指导,也为设计师提供了深刻的启发,尤其是在技术快速发展、设计不断迭代的今天。设计师如何在用户、产品与社会之间找到自己的定位,这本书给出了重要的思考方向。
设计的真需求
 
 
从设计师的角度来看,用户需求是设计的出发点,但更重要的是如何透过显性需求挖掘出更深层次的情感和价值诉求。通过建立价值共识、推动设计共创,进而探索设计模式的创新,设计师不仅能够交付优质的作品,还能重新定义设计的意义和角色。
本文将结合《真需求》的核心理念,从设计师的视角出发,探讨设计如何通过满足用户需求,创造卓越的体验并实现商业价值。同时,反思设计师在职业发展中如何通过设计为社会、用户和自身带来更多可能性。设计的本质不仅是一种解决问题的能力,更是一种塑造未来的创造力。
 
二、设计的核心:从真需求到价值创造
 
1. 真需求:设计的出发点
在设计领域,理解用户需求是所有工作的起点。然而,许多设计师在实际工作中容易陷入“假需求”的误区,比如过分关注表面功能或迎合主观美感,而忽略了用户真正需要解决的问题。梁宁在《真需求》中提到,真正的商业价值在于“满足用户的真需求”——即用户愿意为之付费或持续使用的核心价值。
设计的真需求
 
 
对于设计师而言,理解真需求需要从三个方面入手:
剖析用户痛点
:通过用户调研和数据分析,找出用户行为背后的深层原因,避免仅根据显性需求作设计决策。
构建需求网络
:分析设计在更大的使用场景中的作用,找到“需求空洞”,填补用户体验链中的缺失环节。
移情式思考
:站在用户的角度,体验设计的每一步,确保设计是易用、有效且能让用户满意的。
设计的真需求
 
 
举个例子:
医疗产品的设计不仅需要满足功能上的精确和高效,还应从患者的角度关注操作是否友好、是否能缓解焦虑情绪。这种双向思考帮助设计师更全面地定义价值。
设计的真需求
 
 
2. 价值的三重维度:功能、情绪与资产
梁宁将价值分为功能价值、情绪价值和资产价值,为设计师提供了系统化评估设计价值的框架:
设计的真需求
 
 
功能价值:解决用户的问题
功能价值是设计的基础,它回答了“这个设计能帮用户完成什么”的问题。功能价值要求设计师精确理解用户任务,并提供清晰、高效的解决方案。界面中的简洁布局、直观的操作引导,都是实现功能价值的关键。
设计的真需求
 
 
举个例子
Google搜索的首页设计以其简洁著称,仅提供搜索框和按钮。这种极简设计最大化了功能价值,让用户专注于搜索任务本身。
设计的真需求
 
 
情绪价值:带给用户的感受
功能之外,设计还能通过情绪价值与用户建立情感连接。情绪价值可以是让人愉悦的视觉设计、友好的提示语,或是让用户感到被理解的交互体验。通过配色、字体、微交互动效等手段,设计师可以在细节中增强情绪价值,让用户不仅“用得好”,还“用得开心”。 用户在操作困难时,贴心的引导和轻松的提示语可以有效缓解负面情绪。
设计的真需求
 
 
举个例子
Airbnb的设计注重用户情绪体验,从柔和的色彩到温暖的语言,都让用户感受到一种“家”的氛围,增强了品牌的情感连接力。
设计的真需求
 
 
资产价值:长期积累的品牌效应
资产价值体现在设计能否为品牌建立独特的身份和记忆点。资产价值要求设计师通过一致的视觉风格和体验逻辑,帮助品牌在用户心中建立清晰的形象。
设计的真需求
 
 
举个例子
苹果的产品设计通过极简风格、一致的界面语言和高辨识度的工业设计,建立了强大的品牌资产价值,使得用户一提到“极简创新”就联想到苹果。 苹果产品的设计语言不仅传递了科技感,还树立了“创新、简约”的品牌形象,使用户在购买产品时会优先想到它。
设计的真需求
 
 
3. 设计师的挑战:如何平衡不同的价值
在设计过程中,功能、情绪和资产三种价值往往是相互交织的,但它们的实现需要不同的资源投入,有时甚至会相互冲突。设计师的挑战在于如何在这三者之间找到平衡点,以最大化设计的效果。
功能至上
——可能会导致设计显得冷冰冰、缺乏情感,无法与用户建立情感连接。
情绪至上
——可能忽视设计的实用性,最终影响用户体验,甚至导致用户流失。
资产至上
——可能让设计在短期内表现良好,但缺乏长期的用户粘性和实际使用价值。
设计的真需求
 
 
在设计初期,明确优先级非常重要。例如,初创产品可以更多聚焦于
功能价值
,确保产品能够有效解决用户的核心问题;而对于成熟品牌,则可以侧重于
情绪价值
资产价值
的提升,强化品牌形象和用户忠诚度。在设计迭代过程中,持续校验这三种价值,确保它们在不同使用场景中的有效性与平衡性。
设计的真需求
 
 
根据商业目标合理分配设计资源,确保将精力集中在最关键的价值上,避免在非核心价值上投入过多资源,导致设计失衡或资源浪费。通过精确的优先排序,确保每个阶段的设计都能最大化其价值贡献。
在了解了如何通过设计满足用户的真需求,并为产品带来价值后,接下来的关键问题是:用户如何感知并接受这些设计价值?这就是我们接下来要讨论的‘用户共识’。设计不仅需要解决问题,更需要与用户建立共识,确保他们能够充分理解设计的意义,并在实际使用中感受到其价值。
 
三、用户共识:构建设计与用户的深层连接
 
1. 共识构建:如何让设计被用户理解与接受
梁宁在《真需求》中指出,共识是连接价值与交易的桥梁,解决了“有价值却未成交”的问题。对于设计师来说,共识构建的关键在于帮助用户“明确感知设计价值”,并在设计与用户心理之间建立深度连接。她提出了三个核心共识维度,带来了重要启示:
感知共识:让设计价值直观可见
用户对设计的第一印象来自感知。如果用户无法在短时间内明确设计的功能和意义,设计就无法达成感知共识。
设计的真需求
 
 
举个例子:
Instagram 的点赞按钮采用简单明了的“心形”图标,放置在显眼位置,并通过颜色变化(从空心到实心)和动画反馈清晰传递交互结果。用户无需说明便能直观理解其功能,这种设计通过直观的视觉符号和互动效果,让用户迅速建立对功能的感知共识,同时增强了使用体验的愉悦感。
设计的真需求
 
 
场景共识:设计融入用户使用场景
梁宁强调,设计要嵌入特定的使用场景,才能让用户自然而然地接受它。场景的具体化能缩短用户认知路径,增加设计的贴近感。深入研究用户行为,挖掘高频或未被满足的使用场景。 针对具体场景定制设计解决方案,确保功能契合使用情境。
设计的真需求
 
 
举个例子
一个为学生设计的在线教育应用,应强化“课后复习”或“考试准备”的场景细分,而不是泛泛地解决所有教育需求。这样的明确定位有助于设计在特定场景中建立联系,提高用户接受度。Kindle 的设计充分考虑了“碎片化阅读”这一场景。通过轻便设备、简化交互和护眼模式,完美契合了用户在旅途中或睡前的阅读需求。
设计的真需求
 
 
想象共识:与用户人设相契合
在现代消费环境中,用户不再仅仅关心产品能做什么,还关心它是否符合自己的身份、价值观或生活方式。梁宁提出“用户人设”的概念,鼓励设计师关注用户的自我认知和期许。将目标用户的自我期许融入设计语言,如视觉风格或品牌调性。 通过个性化设计增强用户与产品的情感连接,例如提供可定制选项或创造属于用户的独特体验。
设计的真需求
 
 
举个例子
Nike 通过“Just Do It”这一品牌口号,精准触达了用户内心深处的奋斗精神与自我突破的愿望。这一策略不仅为运动爱好者提供功能性的运动装备,还赋予其品牌一种超越功能的象征意义,激励用户将运动视为一种表达自我的方式。无论是专业运动员还是普通健身爱好者,都能在 Nike 的设计中找到与自己“挑战极限”人设相契合的情感共鸣。
设计的真需求
 
 
2. 用户共创:设计如何通过用户反馈提升价值
梁宁提到,共识的最终结果是“建立关系”,这种关系不仅是一种商业纽带,更是一种用户与设计共创的可能性。在设计中,用户的参与不仅提升了产品的体验,也让用户成为了设计价值的共同创造者。
用户反馈驱动设计迭代
用户共创的核心是从反馈中不断优化设计。无论是通过用户访谈还是可用性测试,设计师都需要打开设计与用户的双向互动通道,深入理解用户的真实感受。将用户测试和数据分析融入设计流程,形成“反馈—迭代”的闭环。在设计中提供“惊喜点”,让用户感受到他们的建议被转化为实际成果。
设计的真需求
 
 
举个例子
Airbnb通过邀请用户测试新功能,不断优化平台界面和流程,同时让用户感受到自己的意见被重视。这种“共创感”增加了用户对产品的信任和忠诚度。
设计的真需求
 
 
设计师与用户的长期关系
超越一次性的交互设计,成功的设计师更关注如何通过持续的体验优化,建立与用户的深层次关系。例如,为老用户提供专属功能或优待,强化用户的归属感与参与感。为用户提供自定义或扩展空间,让他们能够个性化调整设计。 借助社区运营或功能升级,与用户共同打造产品生态系统。
设计的真需求
 
 
举个例子
Spotify 不仅提供流畅的音乐播放功能,还通过年度回顾功能(Spotify Wrapped)与用户建立深度连接。用户在感受个性化服务的同时,也增强了对平台的忠诚度。
设计的真需求
 
 
一旦设计能够建立与用户的共识,它就能够在实际应用中产生更深的影响。那么,如何让这些设计实现持久的价值并持续创新呢?这就引出了我们接下来要讨论的设计模式。
 
四、设计的模式:创新与可持续发展
在商业中,模式是企业在市场中持续生存的能力。而在设计领域,模式同样意味着设计师和团队在快速变化的环境中,通过系统化方法实现创新与可持续发展的能力。梁宁在《真需求》中提出的三大模式要素——“能力系统、变现逻辑、分配机制”,为设计的长期成功提供了明确的框架。
 
1. 设计的能力系统:创新与实施的平衡
梁宁提出的“认知是顶,安全是底”这一理念,强调了创新与可行性的平衡。这一思想对设计团队尤其重要,因为设计本质上既是创造性工作,又需要落地执行。
认知是顶:设计师如何站在前沿创新
创新需要设计师保持对趋势、技术和用户行为的敏锐洞察。例如,随着AI技术(如AIGC)在设计中的广泛应用,设计师需要主动学习如何将这些新技术与设计工作流相结合,以提升效率和创造力。定期关注行业趋势,例如UI/UX设计中语音交互、动态设计等领域的最新发展。为团队搭建学习机制,通过分享会、培训课程保持知识更新。
设计的真需求
 
 
举个例子
Canva 引入了 AI 支持的设计功能,帮助用户通过简单的操作快速生成高质量的设计内容。设计师团队通过分析用户在社交媒体和品牌设计中的常见需求,将 AI 技术无缝集成到工具中,让非专业用户也能高效完成复杂的设计任务。这一功能不仅降低了设计门槛,也为专业设计师提供了更灵活的创作方式。
设计的真需求
 
 
安全是底:构建设计的可行性与稳定性
在追求创新的同时,设计师需要考虑现实限制(如技术、预算、法律合规性等)。只有在可行性与风险可控的基础上,设计才能真正落地。与开发团队紧密协作,确保设计方案技术上可实现。在项目中设定约束条件(例如时间与资源),优先完成最关键的功能设计。
设计的真需求
 
 
举个例子:
产品出海设计中,考虑不同市场的文化和法规限制(如隐私保护或内容展示),能够避免后期的不可控风险,让设计更稳定、合规。
设计的真需求
 
 
2. 变现逻辑:从用户体验到商业价值
设计不仅是美学和交互的表达,还直接影响商业目标的实现。梁宁指出,变现的核心在于找到“套利空间”,而设计的作用就是通过提升效率和体验,优化商业转化路径。
提高商业转化率:设计如何推动用户行为
高效的设计能够缩短用户完成目标的路径,从而提升产品的商业转化率。优化用户体验流程,减少操作步骤,让用户更快速地完成核心任务。通过微交互和视觉提示,吸引用户注意,推动行为转化。
设计的真需求
 
 
举个例子:
亚马逊的“一键下单”功能通过简化支付步骤,大幅提升了购买转化率。这种通过设计直接提升效率的方式,充分体现了变现逻辑的核心。
设计的真需求
 
 
长期价值:设计如何助力品牌忠诚度
除了短期的转化提升,设计还能够通过建立品牌认同,提升用户的长期忠诚度。通过一致的视觉语言和情感化设计,增强用户对品牌的记忆点。在用户生命周期中持续提供附加价值,如专属功能或个性化推荐。
设计的真需求
 
 
举个例子
星巴克通过会员体系和移动应用设计提升用户忠诚度。界面保持一致的品牌风格(如绿色主题和简洁布局),同时通过个性化推荐、积分奖励机制和专属优惠强化用户体验。此外,定期推出的限量活动和节日主题设计进一步拉近了品牌与用户的情感连接。这种设计策略将品牌价值与用户体验深度融合,不仅提供贴心服务,还通过一致性和个性化增强用户的长期信任与归属感。
设计的真需求
 
 
3. 资源分配:如何聚焦核心优势以实现长期价值
分配机制是资源调配的策略。梁宁强调,资源应优先流向能够增强生存优势的领域。在设计中,这意味着设计师和团队应集中精力在能够带来最大价值的关键点上,而不是平均分配资源或盲目追求全面覆盖。
聚焦核心设计能力
每个设计团队都有自己的核心优势,例如擅长用户界面、交互设计或品牌塑造。资源分配应优先支持这些优势领域。明确团队优势,分配更多时间和预算用于强化核心能力。 在能力边界内合理试验创新,避免资源分散带来的执行风险。
设计的真需求
 
 
举个例子
小米的设计团队专注于打造智能硬件与软件的深度整合,通过其独特的生态链战略,将资源集中于优化用户在多个设备间的无缝体验。这种聚焦于智能生态系统的设计策略,不仅提升了各个产品之间的协同效应,还加深了用户对小米品牌的忠诚度,最大化了其在智能硬件领域的核心竞争力。
设计的真需求
 
 
优化设计资源分配
资源分配不仅要聚焦于优势,还需避免对非核心需求的过度投入。例如,过度追求复杂视觉效果而忽略功能体验,可能导致资源浪费。在项目启动前明确设计优先级,将资源集中在高价值任务上。定期复盘项目中的资源使用情况,找到优化空间。
设计的真需求
 
 
举个例子:
知乎在初期发展时,专注于优化用户的核心需求——精准的信息获取和高效的问答功能。尽管其界面设计简洁,但团队将大量资源投入到交互体验和信息流的优化上,而非追求复杂的视觉效果。这一策略确保了平台的易用性和功能性,同时避免了不必要的设计过度,从而提升了用户粘性。随着用户需求的变化,知乎又根据反馈逐步改进设计,确保资源分配与产品目标始终对齐。
设计的真需求
 
 
在建立了设计的创新能力与可持续性后,我们需要将其与设计师的个人成长与职业使命结合起来。设计不仅仅是解决问题,更关乎设计师如何通过设计找到个人的归属感与意义。
 
五、设计师的自我反思:真需求与生命的意义
梁宁在《真需求》中提出,商业问题归根到底是哲学问题:“人生到底需要什么?市场到底需要什么?”对于设计师而言,这一问题可以转换为“用户到底需要什么?我自己到底需要什么?”设计师不仅需要关注用户的真需求,还应诚实面对自己的需求和价值,以找到设计与个人成长的平衡点。这种反思能够让设计从单纯的职业实践,升华为生命的自我表达。
 
1. 避免伪创新:如何专注于用户的真实需求
许多设计师在工作中容易陷入“自嗨式设计”的陷阱,例如为了炫技追求复杂的视觉效果,或过分迎合流行趋势而忽略用户实际需求。这种设计表面上光鲜亮丽,实际上却脱离了用户场景,难以创造真正的价值。
拒绝伪创新,回归用户本质需求
梁宁提到,商业价值来自于满足用户的真需求。同样,设计的成功在于能否为用户解决实际问题,而非制造无意义的花哨。定期开展用户调研,与用户直接对话,避免假设驱动设计。在设计流程中设置校验机制(如可用性测试),确保设计方案符合用户的实际需求和期望。
设计的真需求
 
 
举个例子
Dropbox 在初期专注于简化文件存储和共享的功能,而非追求复杂的设计或炫酷的视觉效果。团队通过与用户的持续沟通,了解他们的核心需求:高效、安全、便捷地管理文件。通过一系列用户调研和可用性测试,Dropbox 将其界面设计简化,确保操作直观易懂,避免了无意义的复杂功能。
设计的真需求
 
 
透过表面需求,挖掘深层次的情感与价值
用户往往不知道自己真正需要什么,这就需要设计师具备洞察力,找到需求背后的痛点或欲望。从用户行为和场景中寻找隐藏需求,例如他们未被满足的情感诉求。提升设计的情感价值,通过视觉、语言和交互细节拉近与用户的距离。
设计的真需求
 
 
举个例子
网易云音乐通过其个性化推荐系统和社交功能,成功满足了用户在听音乐时的情感需求。除了基本的音乐播放功能外,网易云音乐通过精准的算法分析用户的听歌习惯,为用户推荐符合其情感需求的歌曲,同时允许用户创建歌单并与朋友分享,从而创造了一种情感共鸣和社交连接。
设计的真需求
 
 
2. 设计师的成长:面对个人与职业需求的挑战
在不断追求创新和成果的过程中,设计师也需要反思自己的目标和价值。梁宁指出,真正的安全感并非来自完美无缺,而是源于诚实面对自己与他人的需求,这对设计师的个人成长有深刻启发。
理解自己的角色:从解决问题到创造可能
设计师常被视为“问题解决者”,但更重要的是成为“可能性创造者”。通过设计,激发用户的想象力,让他们看到更多选择和更美好的未来。在项目中寻找能提升用户生活质量的机会,推动设计从功能解决扩展到体验优化。 保持对多学科领域的兴趣,例如心理学、行为经济学,为设计注入更多可能性。
设计的真需求
 
 
与设计和解:接受有限性,专注长期价值
很多设计师在职业生涯中容易陷入“无限追求完美”的焦虑状态。事实上,完美设计并不存在,每个项目都有时间、预算和技术限制。学会接受设计的有限性,专注于长期价值的积累,才能在职业道路上走得更远。在每个项目中明确最核心的目标,优先解决关键问题,避免过度设计。 记录自己的设计成果和成长点,总结经验,逐步积累长期设计资产。
设计的真需求
 
 
3. 设计师的社会责任:超越商业,创造社会价值
梁宁在书中提到,“商业只是社会的一个局部,生命才是全局”。设计师不仅是为商业目标服务的工具人,更是社会创新的重要力量。通过设计,解决用户问题、传递价值观,甚至影响文化和社会结构,这是设计师在更大框架中的角色所在。
设计作为改变世界的工具
设计的意义不仅在于优化现有产品,还在于推动社会问题的解决。例如,环保包装、无障碍设计和公益产品,这些设计不仅实现了功能目标,还为社会带来了积极影响。在设计中融入社会责任感,例如使用可持续材料、优化资源利用。 主动参与公益项目,将设计能力用于支持弱势群体或解决社会问题。
设计的真需求
 
 
让设计为生命赋能
梁宁指出,美好的商业应该让人们的生命绽放。同样,美好的设计不仅服务于用户的基本需求,更能激发他们的潜能,帮助他们实现更高层次的价值。设计关注用户的成长和进步,例如帮助用户学习新技能或提高效率。 通过情感化设计,构建更有温度的产品体验,给用户带来启发和感动。
设计的真需求
 
 
 
六、结语
 
设计不仅是解决问题的工具,更是一种改变生活的力量。《真需求》让我们深刻意识到,设计师的工作不仅仅是完成任务,它应致力于满足用户的真需求,通过创造价值、构建共识和优化设计模式,推动产品、用户与社会之间更深层次的连接。
对于设计师而言,梁宁的“价值、共识、模式”模型提供了系统化的实践框架:
在价值层面
,从功能、情绪和资产三个维度出发,创造打动用户的作品。
在共识层面
,通过感知、场景和想象的共识构建,让设计与用户的心理、情境和期望紧密结合。
在模式层面
,不断提升自己的能力系统,探索设计的商业价值和资源分配策略,推动设计的长期可持续发展。
设计的真需求
 
 
设计的价值远不止于商业范畴,它应从更广阔的社会和生命角度进行探索。设计师的使命不仅是完成项目或满足客户需求,更是通过设计改善世界,让人们的生活更加丰富和有意义。关注“真需求”不仅能为用户带来更好的生活体验,也能为设计师自身提供从容与笃定的成长方向。这才是设计的真正力量,也是设计师应不断追求的目标。
设计的真需求
 
 
设计的真需求
 
 
设计师的成长离不开对自身需求的深刻反思。只有坦诚面对自身的局限,专注于长期的积累与价值创造,我们才能在职业道路上走得更远,在设计中找到真正的意义与从容。这不仅是《真需求》理念的实践,更是设计师的生活态度。设计的未来,除了技术创新和形式变化,更在于设计师如何通过真需求的思考,让设计为社会和个人创造更加美好的可能性。
 

作者:西子小宇宙
链接:https://www.zcool.com.cn/article/ZMTY0MTk3Ng==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

一个小弹窗引发的28个建议

资深UI设计者 设计管理与成长

这套高颜值的质感弹窗设计方法,看了一定学会!

UI设计师是怎么做多维度竞品分析的?

资深UI设计者 设计管理与成长

本文为设计师提供全流程指导,深入探讨多维度竞品分析的方法。文章分享了如何拆解多维度,以及6种实用的分析技巧。

AI创作工具的「可控性」与「用户体验」博弈

ui设计分享达人 设计管理与成长

这两年生成式ai爆发性增长并且重塑数字创作的工具生态。从文本生成、图像视频生成以及模型训练,可以说无法离开ai,ai的介入让创意生产变得前所未有的高效简单,但同时也带来了体验上的困境,例如我们在使用自动化生成便利的同时,还能保持对创作过程的深层控制?比如在进行文生图或者线稿转3D的流程中,我们如果要控制某个部分的设计表现,需要利用多个方法才能完成,仅仅通过提示词的修改并无法完成,这个矛盾在之前的SD等开源模型中非常明显;
AI创作工具的「可控性」与「用户体验」博弈
 
 
 
算法模型的开放让设计达到了无限的可能,但更多设计师却被迫在控制权和易用性之间做出了妥协,当重复一个流程无法生成满意的图象时,大多情况都是基于一个“不满意”的图像进行优化,我把这个理解为用户心理上的妥协;
AI创作工具的「可控性」与「用户体验」博弈
 
 
以节点式工作流工具ComfyUI为例,其通过可视化编程赋予用户对Stable Diffusion生成流程的精细控制权,允许自由组合模型、调节参数、插入预处理模块,成为专业创作者的首选工具。然而,这种高度自由的设计也带来了显著的认知负担:错综复杂的节点连线、晦涩的参数术语、缺乏引导的开放式画布,让0基础设计望而止步;数据显示,超过67%的新用户在首次使用ComfyUI时因“界面混乱”而放弃进一步探索(来源:ComfyUI社区调研)。这一现象揭示了生成式AI工具设计的核心矛盾——系统的灵活性与用户的心智模型之间如何实现平衡?
AI创作工具的「可控性」与「用户体验」博弈
 
 
一、核心问题与矛盾
1、设计师对“控制权”的需求本质
安全感需求:
用户希望理解生成过程(分布控制、seed数值、CFG),避免黑箱带来的不可预测性;
注:大多数AI工具(如Midjourney)像一台自动售货机——输入提示词,随机吐出一张图片。用户无法知晓AI为何生成一只三头六臂的猫,只能反复“抽卡”直到满意。
 
创造性需求:
通过精细化的控制实现独特的风格,例如分布提示,基于大模型训练出来的lora,不同lora模型融合后的混合模型,这些需要付出很大的学习成本和时间才能满足,我个人理解ai给设计师通往目标的过程中搭建了不同的道路,但设计师如果在没有导航的情况下要达到这个目标,中间可能会辗转反侧,也可能一条道路就能到达目的地;
AI创作工具的「可控性」与「用户体验」博弈
 
 
效率需求:
自动化设计(如MJ和国内其他一键生图的ai产品)可以降低设计的操作成本,但同时牺牲了可控性;
AI创作工具的「可控性」与「用户体验」博弈
 
 
2、comfyUI的设计矛盾
过度控制悖论:
ComfyUI试图打破黑箱,将AI拆解成可调节的“齿轮组”(如调节“采样器”改变画质、用“ControlNet”控制构图)。但当用户面对50多个参数和上百种节点时,反而因信息过载陷入“该调哪个参数?连错节点会爆炸吗?”的决策瘫痪。
AI创作工具的「可控性」与「用户体验」博弈
 
 
过高的配置要求:
comfyUI解决了MJ带来的黑箱效应,但同时也带来了物质上的门槛,设计师需要配备更高的配置或者使用第三方租用云电脑等才能运行,否则前者就会造成漫长的等待,后者则需要花费大量的财力,对于设计师而言反而是造成了时间上的负荷;
AI创作工具的「可控性」与「用户体验」博弈
 
 
功能维度:
节点系统支持无限组合,但缺乏对用户意图的主动理解,如自动推荐节点;
AI创作工具的「可控性」与「用户体验」博弈
 
 
认知维度:
参数暴露(如CFG Scale、Sampler)提供控制感,但引发“选择过载”实际使用过程中,如果是普通玩家,无法短时间内通过这些参数来控制结果,核心还是在于认知门槛过高;
AI创作工具的「可控性」与「用户体验」博弈
 
 
交互维度:
自由连接节点导致逻辑混乱(如错误连线无及时提示),增加调试成本。
AI创作工具的「可控性」与「用户体验」博弈
 
 
我把ControlNet的“负面条件”打乱连接到“正面clip文本框”上,而采样器的“负面条件”直接连接到“负面clip文本框”内,整个过程是不会出现任何报错提示,但是当运行调试的时候就会运行失败,提示ControlNet缺少负面条件,ControlNet(应用)缺少负面条件输出等问题,众所周知对于一些低配玩家,运行一次需要等很久,等到最后发现生产出来一个“报错”!!!
AI创作工具的「可控性」与「用户体验」博弈
 
 
二、对比分析:comfyUI和midjourney
AI创作工具的「可控性」与「用户体验」博弈
 
 
当设计师想生成“一只穿宇航服的柴犬”,Midjourney可能输出卡通风格或超现实照片,设计师只能通过追加提示词(如“3D、黏土”)逼近目标,不停的抽卡;
(实在不想用mj了,下面的图本地跑的,大概的意思一样就是不停的抽卡抽卡)
AI创作工具的「可控性」与「用户体验」博弈
在ComfyUI中,设计师可以强制指定:用FLUX模型生成基础图像,然后加载相关LoRA模型,在添加个视觉风格迁移的模型,添加宇航服,在添加个视觉风格模型,连接OpenPose节点调整柴犬姿势,最后用放大模型,放大画质;但我就想说:我只是想画只猫,为什么要弄这么复杂。。。
AI创作工具的「可控性」与「用户体验」博弈
 
 
关键结论:
ComfyUI的“高可控性”吸引专家设计师,但普通设计师或者0基础设计师因认知负荷大多放弃使用。Midjourney通过“限制控制权”降低门槛,但设计师可能因无法干预细节感到焦虑。
三、comfyui冲突点和机会点
为什么说这个呢,因为comfyui目前是趋势ai,核心的生成逻辑包括实际应用都已经大于mj了,所以接下来的内容也是围绕comfyui拆解的;
1、参数暴露vs认知负荷
问题:
ComfyUI将所有参数(如LoRA权重、VAE选择、采样器、各种模型加载器)暴露给用户,导致界面信息过载。
例如:
设计师需要同时调整“提示词权重”“采样器类型”“ControlNet强度”时,易混淆参数优先级,对于这个结果的影响,是采样器类型问题呢还是ControlNet的数值不对呢,最后我猜大多人过程都是一个个试一遍,最后哪个效果好用哪个;
思考点:
动态参数分组,根据生成的目标隐藏无关的参数,比如当输入完成“提示词”后,可以识别出输入的提示词类型,生成一个3d风格海报,那么基于这个提示词,就可以提前预判出跟3d风格海报相关的参数都可以隐藏;参数依赖的可视化,通过逻辑线的方式标记他们之间的关系,例如CFG与采样步数,通常来讲CFG数值越高生成的图越接近提示词,但是图像质量会下降,采样步数越高生成的图质量就越高,那么问题来了,当设计师调整CFG数值时,是不是可以标记或者提示设计师采样步数的变化,以此来达到最优解;
下方示例
AI创作工具的「可控性」与「用户体验」博弈
 
 
2、自由连接vs逻辑错误
问题:
节点可任意连接,但缺乏逻辑校验目前comfyUI中只是告诉设计师如果两个节点本身没有前后关系的情况下不可以连接(没有节点对应的收入口)另一种情况是两个节点在一个工作流中都能起到作用,但是节点是多功能化的,连线的时候可以正常连接,最后运行的时候就会出现某某节点不匹配。
例如:
设计师错误连接ControlNet预处理器与VAE节点,导致生成失败且无报错提示。
思考点:
实时逻辑校验,在设计师连线时提示冲突(如“该节点仅接受潜空间输入”)。
工作流自检模式,一键检测缺失节点(如缺少“提示词编码器”时提醒用户)。
AI创作工具的「可控性」与「用户体验」博弈
 
 
四、设计师心理与工具的“错位战争”
生成式AI工具的设计矛盾,本质上是人类认知模式与技术逻辑的冲突。以ComfyUI为例,其设计暴露了以下深层问题:
1、“技术透明化”的认知陷阱
ComfyUI将AI生成过程拆解为节点,试图通过“透明化”提升用户信任,但普通人并不需要(也无法理解)技术细节;不知道你们有没有,当我第一次看到“VAE解码器”“潜在空间降噪”等节点时,大脑会触发“意义建构焦虑”——“这些词和我想要的图片有什么关系?”
AI创作工具的「可控性」与「用户体验」博弈
 
 
2、控制权的“虚假承诺”
ComfyUI看似赋予用户完全控制权,但多数参数的实际影响难以预测(如CFG值从7到8可能导致画风突变)这类似于让设计师驾驶一辆方向盘与轮胎无机械连接的汽车,转动方向盘时,轮胎可能随机偏转。设计师误以为“控制节点=控制结果”,实则是“在黑暗中调整未知旋钮”;
AI创作工具的「可控性」与「用户体验」博弈
 
 
3. 技术极客与大众的“认知断层”
开源社区的理想:“人人可 Hack”的民主化工具;现实问题是开发者设计节点时默认用户理解SD原理(如Latent Space、扩散模型、euler_ancestralcai、dpmpp_2m),但普通用户只关心“如何让图片更逼真”;这种断层导致ComfyUI的文档充满技术术语,而非用户目标导向的指南(如“修复模糊人脸”对应哪些节点组合),这也是技术工具与用户体验的博弈;
AI创作工具的「可控性」与「用户体验」博弈
 
 
五、对于comfyUI的畅想
1、适配不同能力的设计师
专家模式:保留完整的节点和参数,让这类设计师自由编辑;
精简模式:隐藏底层参数,仅仅提供目标导向的选项;
自动化操作:根据提示词推荐采样器、cfg数值等组合,例如提示词是自然语言,那就匹配关于flux模型的专属采样器;
AI创作工具的「可控性」与「用户体验」博弈
 
 
2、智能节点推荐引擎
目标推荐:输入“生成赛博朋克城市”后,自动推荐“SDXL模型+ControlNet边缘检测+色调调整节点”;行为预测:分析历史工作流,推荐高频使用的节点组合(如“LoRA模型+分层提示词”);
3、可解释性反馈面板
参数与结果的实时性:实时显示调整CFG值对图像细节、对比度的量化影响。节点的贡献度分析:生成后标记关键节点(如“ControlNet贡献度72%”),帮助用户理解流程。
六、总结:控制的幻觉与设计的谦卑
ComfyUI揭示了生成式AI时代的核心矛盾——技术的能力越强大,人类越需要承认自身认知的局限性。工具设计不应追求“上帝模式”,而需寻找“刚刚好的控制权”给用户“扳手”而非“零件库”:提供高层级调节维度(如“画面精细度”“风格偏离度”),隐藏底层技术参数,并不是每个设计师都是工程师的角色;大多设计师的角色只是维修工;拥抱“不完美的人性”:允许用户保留“我不知道为什么要调这个,但调了就有用”的玄学操作,而非强迫所有人成为AI工程师。重新定义“控制”:从“绝对掌控流程”转向“有效影响结果”,让AI的不可预测性成为创意催化剂而非焦虑来源。


作者:爱吃猫的鱼___
链接:https://www.zcool.com.cn/article/ZMTY1MDQ2OA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
 

关于设计组件库,一些新思考

ui设计分享达人 设计管理与成长

关于设计组件库,我们有一些新思考
 
 
 
从网上搜索设计组件,我们能找到各种对外公开的设计组件库,同样还有不少或概括或详细的文章,手把手教你“如何搭建一个好的设计组件库”,但这些方法论很少探讨面对C端组件频繁增改、设计规范动态调整,如何高效赋能业务设计交付的相关内容,但这恰恰是搜索业务面临的关键问题。
 
搜索是一个“牵一发而动全身”的业务,每一个微小的设计细节都有可能影响各个业务的数据指标,一个“好的设计组件库”需要以一种潜移默化的方式让设计师掌握设计规范,完成合规的设计,从这个角度而言它应该比较
「好懂」
 
而作为服务于整个设计团队的公用设计组件库,面对每月数以万计的调用次数,它必须保障最基本的易用性,应该非常
「好用」
 
同时,面对频繁迭代,“好的设计组件”还需要保持最快的更新速度,为各个横向团队提供正确的样式,从这个角度来说它还要
「好维护」
 
因此,
「好懂、好用、好维护」
是搜索设计语境下,对一个“好的设计组件”的定义。
 
关于设计组件库,我们有一些新思考
 
 
 
接下来,我们将从这三个「好」入手,分享搜索设计组件库在升级过程中的一些思考,希望能和大家共同探讨。
 
关于设计组件库,我们有一些新思考
 
 
 
 
关于设计组件库,我们有一些新思考
 
 
 
“万丈高楼平地起”,我们先来说说如何从零开始构建一个既符合设计规范又易于理解的设计组件。
 
首先,在搭建组件时,我们可以考虑采用
多层嵌套
的方式,即组件(Component)内部嵌套变体(Instance)。这种方式不仅能省去组件搭建和修改过程中的重复操作,甚至还能在解绑组件时,通过选中内部的子组件图层进行解绑,大大简化了搭建和使用双方的操作流程。
 
在多层嵌套的思路下,我们可以进一步用
“底层灵活、上层收敛”
来指导组件的搭建。这意味着底层变体的形式足够多样,能够支持大部分的状态切换,而在上层组件搭建的过程中显性地加强规范的指引(如规范中不允许使用的样式不对外展示),以降低超出规范设计的可能。
 
具体的搭建流程可以大致分为三步:
场景收集和分析、搭建基本变体组、拓展高阶变体组
 
我们将通过视频组件搭建的生动案例,具体介绍如何依据“底层灵活、上层收敛”原则来搭建组件库,使得组件本身既足够灵活,又能起到足够的约束作用。
 
关于设计组件库,我们有一些新思考
 
 
 
在着手搭建某类组件时,我们首先通过规范确认和场景遍历,广泛收集各类变体。随后,从我们能想到的所有维度出发,对这些变体进行细致定义。这样,我们就能得到一张详尽描述组件变体性质的表格。表格的第一列依次列出变体1、变体2、变体3等,而第一行则罗列出各种维度,如宽度、比例等。通过这种方法,我们可以将原本零散、杂乱的组件变体描述,系统地归纳整理成一张清晰明了的表格。
 
关于设计组件库,我们有一些新思考
 
 
 
表格通过不同维度来唯一确定一个变体,这些维度可大致分为两个特性和一个共性。共性指的是所有变体在这一维度上均保持一致,常见特性则涵盖了最常见的分类性质,如宽度、高度、数量和优先级等,而业务特性则与具体业务紧密相关。
 
在搭建组件时,我们可以遵循
「共性-常见特性-业务特性」
顺序,这样的顺序有助于降低理解成本,因为最符合心智的分类被置于外层,同时底层的组件又保持了足够的灵活性,便于切换各种变量。对于业务特性,我们可以根据实际情况灵活处理,既可以将其作为基本组件的延展,也可以不将其纳入组件范畴。
 
以视频组件为例,我们从表格中获取的信息如下:
 
  •  
    视频尺寸及其组合是最符合用户心智的变体选择;
  •  
    播放状态是所有变体的共有性质;
  •  
    自动播放情况与业务相关,但不一定需要在组件库中呈现;
  •  
    高阶组件仅涉及少部分尺寸的组件,应在完成基本组件搭建后再进行。
 
据此,我们可以轻松梳理出视频组件搭建流程的优先级:
 
  1.  
    播放状态作为共性,应首先搭建;
  2.  
    基本组件尺寸和组合是最符合用户心智的变体选择,应紧随其后;
  3.  
    高阶组件在完成基本组件搭建后再进行。
 
值得注意的是,“封面槽位”是“播放状态”中的一个图层。根据“底层灵活、上层收敛”的原则,我们将其插入到搭建播放状态之前。因此,视频组件的最终搭建流程为:
 
  1.  
    封面槽位;
  2.  
    播放状态;
  3.  
    基本组件尺寸和组合;
  4.  
    高阶组件。
 
关于设计组件库,我们有一些新思考
 
 
 
完成对视频组件搭建的分析,我们就可以有条不紊地开始搭建组件了。先搭建基本组件视频组件,再用基本组件搭建高阶组件。这一步骤虽然为大家所熟知,但仍需格外注意,如配置项的设置要力求合理,也可以融入设计规范和使用规范,同时还应将一些搭建过程中的零散组件集中收纳避免被调用。关于这些具体的注意事项,我们将在后续部分进行详细阐述。
 
至此我们完成了组件搭建的基本流程,一个达到及格线的视频组件就诞生了。据统计,优化后每次调用视频组件将节省至少10步的点击操作!
 
 
关于设计组件库,我们有一些新思考
 
 
 
完成了一个基本组件的搭建后,我们可以转换视角,从使用的角度来审视并检查这个组件。
 
我们期望,从插入组件变体、切换组件配置,再到最后的解绑组件,整个流程都能纵享丝滑且稳定可靠,确保业务设计师在使用过程中获得最佳体验。
 
关于设计组件库,我们有一些新思考
 
 
 
我们可以一步步来审视组件的使用过程。首先是插入组件,据观察,通常有三种方式,①在左侧的资产面板(Assets)中直接找到对应组件并插入;②通过查阅设计规范,锁定所需的变体后复制粘贴;③选中一个不需要的组件,通过右侧的“切换变体”面板(Swap instance)切换成所需的变体。很明显,在这个过程中依赖的是组件的精准搜索和快速定位。
 
关于设计组件库,我们有一些新思考
 
 
 
为了提升搜索精度,我们可以从组件命名入手,采用中、英、数字结合的方式,实现模糊匹配;也可以在发布时隐藏不希望被调用的组件,以减少无用的搜索结果。如果组件是采用前文提到的“多层嵌套”方式搭建的,我们可以添加“Preferred”子组件,这样在切换时会优先展示这些子组件,这个功能在切换图标时尤为实用。
 
对于习惯边查阅设计规范边使用组件的设计师,我们增加了更多实际使用的正误案例,这些案例直观展示了组件变体的正确选择和使用方式,进一步降低了规范的理解成本,有效辅助设计决策。同时,我们专门维护了一个固定区域,用于平铺展示所有组件变体。为了确保能够轻松点选,我们将变体放在最外层展示(即不在任何Frame、Group或Section中)。这样能让设计师一目了然地看到所有变体,从而快速选择所需的组件。
 
关于设计组件库,我们有一些新思考
 
 
 
在组件配置阶段,有三项注意点能让组件更加易用,即“重视组件的可视化效果、设置高效易用的配置项、贴心地保存修改”。
 
关于设计组件库,我们有一些新思考
 
 
 
考虑到C端组件的多样性和用户的使用习惯,我们应避免使用过于复杂的分组方式。相反,应更注重组件的样式展示,并尽量简化组件的层级结构。这样,设计师在使用时能够更直观地看到组件的外观,而无需深入复杂的层级去查找。
 
另外值得注意的是,Figma会默认用组件集合中最左上角的组件生成预览样式,因此应当把视觉上最有代表性的变体放在左上角,这个效果在切换变体(Swap instance)时很重要,因为目前在该面板中没法查看组件细节,只能靠缩略图和名称来推测是哪个组件。
 
关于设计组件库,我们有一些新思考
 
 
 
其次对于配置项的设置也大有讲究,业界有组件库为了实现C2D2C,从源头上将设计组件和前端组件的配置项打平,这是不错的思路,但有可能会提升设计侧的理解成本。针对搜索业务的特殊语境,我们还是选择了从「规范理解」角度去设置组件的配置项,将所有允许自定义的配置尽可能外露,并清晰地说明修改限制,如字数限定、选项个数等,这样能够在使用的过程中强化业务设计师对规范的掌握。
 
另一个常常被忽视的关键点是选项和配置的排序问题。为了提高浏览和选择的效率,建议对选项和选项之间,以及外层的不同配置项,都按照一定的逻辑顺序进行排序。
 
关于设计组件库,我们有一些新思考
 
 
 
最后一点,我们称之为
“贴心地保存修改”
机制,这个针对的是文字修改的场景。
 
在实际操作中,使用一个组件可能需要对多个配置项进行修改。有时在修改完文字内容后再去调整其他配置时,已修改的文字会被重置。这时文本属性(text property)的设置就显得尤为重要,它能够记忆并保存修改过的文字内容,从而免于重复输入。
 
还有一些情况是,某个组件变体实际上并没有与某个值相对应的组件(尽管Figma机制允许选择该值),用户切换后就会发现组件完全变了,只能撤回。为了避免这类情况,建议使用另外的标记来表明组件某个设置项是不可切换的。
 
关于设计组件库,我们有一些新思考
 
 
 
 
关于设计组件库,我们有一些新思考
 
 
 
完成了组件的搭建和检查,接下来让我们聚焦于组件的日常维护。
 
这一环节可以从两个维度展开,一是依托中台的日常数据监控进行维护,二是通过团队内部的紧密协同机制来保障。后者更多侧重协作流程和机制上的建设,在本文中我们不做更多展开,重点讨论前者。
 
数据监控的方式主要依托Figma中的组件数据看板(查看路径:View libraries-Analytics),看板中展示了各个组件的调用数和解绑数数据,这些数据不直接反映组件的优劣,但如果我们观测到某个组件解绑率偏高,我们会考虑直接把它
作为模板
而不是创建成组件。
 
关于设计组件库,我们有一些新思考
 
 
 
 
总结
 
以上是百度搜索设计团队在设计组件库升级过程中的心得分享,包括搜索业务对于“好的设计组件”的诉求,以及一些搭建和优化组件的实用思路,核心是探讨如何从组件库建设的角度入手,成功助力团队提升设计资产消费效率。
 
关于设计组件库,我们有一些新思考
 
 
 
 


作者:百度MEUX
链接:https://www.zcool.com.cn/article/ZMTY1MTYwOA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
 

界面设计中【浮标】的思考与探索

ui设计分享达人 设计管理与成长

界面设计中【浮标】的思考与探索
结合设计原则与“智能伴学助手”项目应用浮标实践展开
-------------
 
目录:
背景
浮标的本质与价值
浮标设计
一、功能定位与场景适配
二、视觉与交互设计
三、技术实现优化
四、无障碍与伦理考量
五、创新方向探索
结语
 
-------------
背景:
在教育类移动端中接入了大模型AI智能应用,为保证这个应用入口可长期保持并随时可见,提高使用率,为用户提供便利。笔者通过“智能伴学助手”浮标实践应用,对后续制作浮标在界面设计中思考与探索。
 
浮标的本质与价值
1)空间维度突破  
作为界面中的「第三层空间」,浮标通过视觉悬浮感打破平面限制(如iOS 的3D视差效果); 在信息过载时代,提供「随时在场」的核心功能入口(如美团外卖的悬浮购物车,左右动效:进缩)。
「第三层空间」并「随时在场」,也是很好的广告位和优惠营销,一些浮标的“小巧思”。
「第三层空间」并「随时在场」,也是很好的广告位和优惠营销,一些浮标的“小巧思”。
 
2) 认知心理学应用
利用格式塔原则中的「闭合性」设计半透明遮罩,暗示可交互区域;通过菲茨定律优化点击热区,圆形浮标直径建议≥48dp(Android 规范)。
 
 ---------------------
浮标设计
就项目中“智能伴学助手”为例,一个教育类的应用入口,结合功能定位、用户体验与技术实现浮标在界面中的作用。通常浮标是一个悬浮的按钮或图标,用于快速访问某些功能,从多个维度探索其在移动端界面中的合理呈现方式:
 
 
一、功能定位与场景适配
 
浮标的设计规范:
比如尺寸、颜色、位置。通用的设计规范,教学工具类App的界面设计,可能涉及图标和布局。
1)尺寸与网格系统
 ◇ 图标尺寸需适配不同屏幕分辨率,常见规范包括128x128px、96x96px、64x64px等,需根据界面层级选择合适尺寸。
◇ 尺寸一般用1:1比较好或者成倍数,先做大再导出所需要的不同大小比例。
◇ 使用网格系统(如微软Fluent的24px基础网格)确保视觉一致性,留出安全边距(如2px内边距)避免元素溢出。
2)造型与风格
◇ 遵循简约易懂原则,优先采用象形图或表意符号增强识别性。
◇ 保持系列图标风格统一,包括线条粗细(建议1.5px)、圆角弧度(微软Fluent定义大/中/小三级圆角)及视觉平衡。
3)适配性
◇ 导出格式需与开发协作,推荐PNG序列或SVGA文件以兼顾清晰度与性能。
◇自适应考虑不同平台的显示情况。
 
核心功能聚合:
语言学习工具类界面将高频功能(如首页入口、作业评论、学习提问)通过浮标动态整合,支持长按展开二级菜单或滑动切换功能模式,吸附于屏幕边缘。
根据学习阶段智能变化:
课前(预习):浮标展示课程试学入口或学习目标设定;
课中(口语输出):提供实时笔记悬浮窗或标记工具;
课后(点评):将课后作业及巩固语言习得情况的评价和自我精进。
(外语语言口语学习一般模式:盲听,然后根据自己的话复述,理解语言并有效使用语言)
  
首页入口、作业评论、学习提问通过浮标智能解答点评,通过二级页面展开细则
首页入口、作业评论、学习提问通过浮标智能解答点评,通过二级页面展开细则
 
二、视觉与交互设计
 
以”智能伴学助手“为例,浮标主色是蓝色,企业主题色也是蓝色,而”智能伴学助手“浮标使用背景一般也以蓝色为主,App主题色也是蓝色,多场景使用适配蓝色背景的静态浮标,又要使浮标可以在背景中脱颖而出,在其过程中尝试蓝+蓝搭配的存在局限性,本身蓝色系较统一。
在同为蓝色后,产生不同「空间」,通过将界面元素分层(如前景图标与背景图像),营造深度感。在浮标进行描边隔层,现在很多表情包就是这种模式操作。
微信小程序的移动学习平台设计,强调了用户需求分析、界面简洁和交互设计,这可能对浮标的功能定位有帮助。智能伴学助手来浮标快速访问。在不同背景下的浮标呈现视觉形式,只要点击即可进入应用。
微信小程序的移动学习平台设计,强调了用户需求分析、界面简洁和交互设计,这可能对浮标的功能定位有帮助。智能伴学助手来浮标快速访问。在不同背景下的浮标呈现视觉形式,只要点击即可进入应用。
 
思考与探索:
浮标需要特色,用户在使用过程中视觉明显,提高交互。
浮标既显眼又不干扰学习,所以需要平衡可见性和沉浸感。
浮标可以移动,用户可以根据需要调整位置,避免遮挡内容。
现浮标是静态的,如何尝试动态浮标,与用户有更好的交互体验,参与感。
颜色和动效方面,冷色调营造学习氛围,浮标可以用品牌色,如蓝色或绿色,加上微动效吸引注意。样式用了蓝色圆形浮标,可能适合教育类应用,赋予科技感设计。
不同状态或者不同页面下的浮标呈现方式不同,但成一系列,增加趣味性。
 
白色背景或者透明背景下的浮标呈现,在不同页面呈现一“系列”
白色背景或者透明背景下的浮标呈现,在不同页面呈现一“系列”
 
蓝色背景下或者在统一色系下浮标视觉”糊“,可用白边的形式将背景和浮标的”空间“区分开
蓝色背景下或者在统一色系下浮标视觉”糊“,可用白边的形式将背景和浮标的”空间“区分开
 
思考与探索:
配色方案
1)主色选择
明亮色系:如红色、橙色、黄色等,能快速吸引用户注意,适用于促销活动入口。
品牌色融合:在特殊场景中融入品牌LOGO或主色,代表企业形象和IP,增强品牌认知。
2)色彩心理学应用
蓝色:传递信任感,适合金融或工具类应用。
黑金/黑黄组合:营造神秘或高端感,常见于娱乐或奢侈品领域。
紫色+粉红:适用于美容、女性向产品,传递温柔与创意。
控制色彩平衡,用户色彩感官可适应。
3)对比与背景
使用中性色(如米色、白色)作为背景,提升信息可读性。
避免冲突色搭配(如蓝色用于食品类浮标易抑制食欲)。
 
思考与探索:
个性化推荐和交互设计,可以结合AI预测用户行为,动态调整浮标的出现时机,比如在需要提醒作业时显示。主色选用品牌色(如教育蓝/科技紫)强化识别性。
 
如何设计浮标会更好?
如何设计浮标会更好?
 
 
创新交互模式思考探索:
1)压力感知交互  
▸安卓压感屏实现「轻按预览/重按触发」分层交互(如华为悬浮球压感菜单);配合触觉反馈(Haptic Engine)增强操作确认感。
2)动态语义变形
-生物拟态动画:
▸呼吸感悬浮:模拟水母游动节奏(振幅0.5-1.2px,频率0.8Hz)  ;
▸点击时触发粒子扩散动画(模拟知识传递意象);
▸拖拽时产生弹性形变(阻尼系数0.6-0.8),边缘碰撞后回弹。
- 根据场景智能改变形态:  
▸ 阅读类App中展开为「书签浮标+进度条」复合控件  ;
▸ 音乐播放器浮标可拉伸成波形可视化界面。
 通过多模态反馈,听觉,视觉,触觉多种情感交互。
3) 空间布局策略:
▸默认位置:置于屏幕右下侧(符合右手持机习惯),预留10%边距防止误触;
▸智能避让:通过内容识别算法,在视频播放或文本输入时自动偏移避开核心内容区域;
▸AR场景中的空间投影浮标(如IKEA Place家具预览浮窗)。
位置多为屏幕右下侧
位置多为屏幕右下侧
 
 三、技术实现优化
 
1)跨端一致性
  •  
    使用React等框架封装可复用浮标组件,通过响应式设计适配不同设备尺寸(如折叠屏展开态需重新计算定位锚点);
  •  
    采用SVGA格式实现高性能动效,控制帧率在30fps以内以降低功耗。
2)AI驱动个性化
  •  
     基于LSTM模型预测用户行为: 检测到长时间未操作时,浮标缩小并展示激励标语; 识别到错题高峰时段,主动弹出知识点讲解入口;
  •  
     支持语音指令交互(如“浮标移到左上角”)。
 
四、无障碍与伦理考量
 
1)包容性设计
◇为色弱用户提供高对比度模式(浮标轮廓增加动态描边,对比度≥4.5:1);
◇支持头部追踪控制浮标移动(iOS Switch Control技术适配)。
2)防沉迷机制(适合未成年类App)
◇连续使用1小时后,浮标渐变灰色并触发休息提醒;
◇家长端可远程设置浮标功能禁用时段。(未成年学习类工具考虑优化)
 
五、创新方向探索
 
1)多模态融合:
◇AR场景中浮标投射为3D虚拟助手,支持手势交互与空间定位;
◇结合眼动追踪技术,实现注视区域自动呼出上下文菜单。
2)情感化表达:
◇根据学习成就解锁浮标皮肤(如连续打卡7天变为奖杯形态);
◇错误率过高时,浮标呈现“鼓励模式”(配色变暖+微震动反馈)。
学习类智能伴学助手的浮标既能作为高效的功能枢纽,又可成为情感化学习伴侣。实际落地时建议结合A/B测试持续优化,例如对比分析「固定浮标」与「场景自适应浮标」的点击转化率差异。
 
----------------
 
结语:
浮标不应仅是功能载体,更应成为:  
- 空间叙事者:通过动态变化讲述产品故事;
- 情感连接器:建立用户与数字世界的温度触点;
- 场景预言家:预判需求并提供恰到好处的服务。
 
设计师需在「显性价值」与「隐形干扰」间找到精妙平衡,让浮标成为提升体验的优雅解决方案而非视觉负担。未来可探索脑机接口的意念控制浮标、量子动画渲染等突破性方向。
技术实现上,探究代码示例展示了如何控制浮标的移动,确保不超出屏幕,这可以作为技术参考应用实际案例中。同时,性能优化方面,使用SVGA格式或减少帧数,可能对动效设计有帮助。
浮标设计需要结合功能定位、用户行为、视觉设计、交互体验和技术实现,可多进行参考不同案例,搜索现有项目,对比借鉴然后对新型B端界面有所创新,确保既实用又不干扰用户。
还可以利用Ai创新思维,设计师可以更快速、高效地生成多种设计方案,结合项目开发满足消费者对个性化、时尚化的需求。
 


作者:啊海包船打鱼
链接:https://www.zcool.com.cn/article/ZMTY1MjgzNg==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
 

软件产品中,如何减少页面跳转?

资深UI设计者 设计管理与成长

这就是信息的无限性和手机屏幕的有限性之间的矛盾,如何把信息合理的展示给用户,需要我们重新对信息进行组织分类,使信息能更高效有序地被用户认知。在进行信息设计的时候,我们会经常遇到“扁平化设计”这个词,在我的理解看来,扁平化设计可以理解为:“精简交互步骤,用户用最少的步骤就完成任务”。层级太多了用户就会看不懂;即使看得懂,层级多了用起来也麻烦,因此:手机上能不跳转就不跳转。那我们就来看看有没有办法减少跳转…

日历

链接

个人资料

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

存档