首页

如何为 AI 设计和代码生成器编写更好的提示

杰睿

由于 AI 设计和代码生成器在设计过程中迅速发挥积极作用,因此了解如何充分利用这些工具至关重要。如果您使用过 Cursor、Bolt、Lovable 或 v0,您就会知道,输出的好坏取决于输入。

以下是我用来引导 AI 实现实用、可用且美观的 UI 的结构化提示格式。它包含 5 个部分:

  1. 上下文(你想要构建什么)
  2. 描述(AI 应该考虑的事情;设计优先级)
  3. 平台(您的目标平台)
  4. 视觉风格(你希望在 AI 生成的设计中看到的视觉属性)
  5. 要包含的 UI 组件(您希望在页面/屏幕上看到的特定组件列表)

快速提示:如果您想了解如何使用此提示格式生成真实的 UI,请查看本教程:

1. 背景

首先用一句话清晰地定义你的设计内容。这有助于 AI 在深入视觉效果之前理解页面/屏幕的目的和范围。

定义 context 时执行以下操作

  • 为现代投资应用程序设计一个时尚、信息丰富的主屏幕。 ”
  • 为食品配送应用程序创建一个最小的结账屏幕。 ”
  • 生成用于跟踪健身进度的移动仪表板 UI。 ”

定义上下文时应避免这种情况

  • 为医疗保健应用程序制作漂亮的 UI 屏幕。 ”
  • 为儿童玩具创建一个很酷的主页。 ”

2. 描述

描述应该简短扼要地阐述此设计最重要的方面。解释最重要的方面:用户目标、内容优先级和交互细节。这将引导 AI 朝着正确的方向发展,使其专注于功能,而不仅仅是美观。

撰写描述时请执行以下操作:

  • 用户应该立即看到关键投资组合统计数据、最近的变化,并通过清晰度和数据层次结构获得信心。 ”
  • 突出显示每日变化和见解,同时保持‘查看投资组合’等操作易于访问。 ”

快速提示:在解释 AI 在设计屏幕/页面时应该考虑哪些因素时,请尝试将重点从输出转移到结果。“帮助用户了解当前的市场趋势,并提供快速操作,以便他们能够根据看到的信息快速采取行动。”

3.平台

指定设备和操作系统以帮助符合平台指南和限制,例如屏幕尺寸、布局行为和该平台上可用的本机组件。

这样做

  • iOS 17 / iPhone 14(390 x 844),使用人机界面指南
  • “Android Material 3 / Pixel 6 Pro (360 x 800)”
  • “桌面分辨率(1440x1024)的 Web 应用程序,响应式布局”

避免这种情况

  • 移动” (太模糊)

4.视觉风格

定义基调和感觉。你希望你的设计如何被用户感知?它应该平静吗?企业风格?还是年轻?添加可访问性需求(例如对比度或可读性)和样式方向(例如,模块化、卡片式、微妙的渐变)。

在描述视觉风格时这样做:

  • 专业、冷静、值得信赖。使用海军蓝、森林绿和柔和的灰色。
  • “模块化卡片布局,带有微妙的阴影和渐变。”
  • “字体在小尺寸下也应该优雅且清晰。”

描述视觉风格时应避免这种情况

  • 使它美丽”(美丽是主观的;描述属性)

快速提示:为 AI 提供对比度和可访问性指导:“确保文本对比度为 4.5:1。支持暗模式和亮模式。 ”

5. 需要包含的 UI 组件

分解屏幕上需要显示的内容。思考结构(顶部导航、正文、页脚)和叙事(用户首先看到的内容以及他们应该采取的操作)。使用占位符和示例来支持描述,以便 AI 准确呈现细节。

描述组件时请执行以下操作:

  • 从上到下开始。思考一下在页眉、正文和页脚中添加哪些组件。
  • 在描述 UI 组件时,请提及它应该具有的具体内容,例如视觉属性或功能行为。
  • 提供内容和交互示例——例如容器的内容(即 UI 中卡片的内容)、表单输入字段的占位符文本等。这将使您的设计与您正在解决的任务更加相关

从优秀到卓越的 UI 动画技巧 改善 UI 微交互的实用建议。

杰睿

使标签中的内容滑动。

将显示缩放图像
左侧的内容淡入淡出。右侧的内容随标签滑动。

连接卡片的共享元素。

将显示缩放图像
左侧的内容会打开一个新的屏幕并向上滑动。右侧的卡片会展开并填满整个屏幕。

在您的内容中使用级联效果。

将显示缩放图像
左边的卡片通过滑动和淡入出现。右边的卡片具有相同的动画,但每张卡片都有短暂的延迟。

使内容将其他元素推开。

将显示缩放图像
左侧的动画在其他内容之上进行动画处理。右侧的动画随着内容的扩展而将其推出。

使菜单在上下文中显示。

将显示缩放图像
左侧菜单从下方飞入。右侧菜单从创建它的操作展开。

使用按钮来显示不同的状态。

将显示缩放图像
左侧的按钮显示指示状态的文本。右侧的按钮使用容器来显示不同的事件。

引起对重要事物的关注。

将显示缩放图像
左侧的示例使用颜色和位置来突出元素。右侧的示例使用微妙的动画来吸引用户的注意力。

结论

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

打造高影响力产品的 5 步 AI UX 策略

杰睿

在打造推动客户实质性改进的 AI 体验时需要考虑的战略因素。

图文并茂:AI UX 手册 — 5 步打造卓越用户影响力

每个人都在争相打造 AI 体验,但产品真的能达到预期效果吗?作为用户体验领导者,掌控产品方向是我们的荣幸。这意味着我们要思考 AI 如何在用户体验中呈现,以及它对用户的实际意义。

启动变革性人工智能的秘诀

仅仅拥有AI功能已经远远不够了。AI成本高昂,如果执行不力,还会给用户带来更多不便。其他设计师和技术人员之前也曾抱怨过这个问题,所以我就不再赘述了。那么,作为一名用户体验领导者,你该如何才能更好地定位你的公司和团队,从而有效地推出AI技术呢?

  1. 出于正当理由
  2. 组建你的 AI A 团队
  3. 了解你的工作内容
  4. 奠定基础
  5. 共同塑造未来

第一步:出于正确的理由

回归本源

不要仅仅为了 AI 而构建。要识别用户最紧迫、最普遍的问题。需要注意的危险信号:

  • 产品主题或计划应以“为我们酷炫的产品线打造生成式人工智能聊天机器人”之类的形式呈现,而不是“利用人工智能简化我们酷炫产品线的客户工作流程”
  • 该组织正在寻找将 AI 添加到产品中的方法,而不是识别可以通过 AI 提高 10 倍或 100 倍的体验缺陷或手动交互

与产品负责人、业务利益相关者和客户拥护者进行交流,探讨如何推动变革。与客户沟通,了解他们的工作方式,并提供可靠的数据来验证你的假设。

人工智能是正确的选择吗?

好了,你确定了主要问题,但人工智能真的是正确的方法吗?数字公共服务中心的评估报告《人工智能是否是正确解决方案》提供了一些指导,可以帮助你入门:

  • 所需的数据充足且使用安全合乎道德
  • 任务规模较大重复性较强
  • 有助于在现实世界中取得成果

来到耶稣面前的时刻

如果人工智能很合适,答案不应该总是聊天机器人,但很多公司却这么认为。如果你的公司也这么认为,那么你还有很多工作要做。首要考虑因素应该是价值,而秘诀在于组织对价值的认同。

定义贵组织的AI 愿景和目标——参考 Thrive 文章《如何创建 AI 愿景声明》中的建议,共同制定愿景和目标。运用 AI 技术,增强用户体验 (UX) 或产品团队的目标声明。

第 2 步:组建你的 AI A 团队

确定可以支持您的团队及其 AI 计划的联系人。

  • 客户拥护者——找到与客户有直接联系的人
  • 最终决策者——了解批准计划并签署支票的领导者,正如他们所说
  • 关键影响者——找出对人工智能充满热情或组织内值得信赖的顾问
  • 主题专家——了解您的团队需要咨询哪些专家
  • 执行功能——找到拥有合适技能的团队成员来实现你的愿景
AI A 团队矩阵(客户拥护者、最终决策者、关键影响者、主题专家和执行职能),详细说明每个人的重要性、示例角色或头衔、他们如何提供帮助等
与你的 AI A 团队建立关系对于你的 AI 之旅至关重要

虽然您可能没有能力动员这些同事或工作伙伴,但建立联系并寻求建议仍然有助于进一步推动您的计划。

在整个组织内培养关系对于让你被看到并建立信任非常重要。

获得认可并引起轰动

在这个部分,您需要进行认真的、有时可能令人不快的对话,以通知、协作、获得批准或召集 AI A 团队的各个成员。

  • 在整个组织内传播愿景
  • 验证发现、决策等
  • 协调行动项目和后续步骤
  • 让人们对愿景和人工智能之旅感到兴奋

步骤 3:了解您正在处理的内容

引导您和您的团队更好地了解您正在建设的环境。

衡量产品智能成熟度

您的组织或产品在智能化道路上处于什么阶段?您是从零开始,还是只实现了少量自动化,还是已经拥有许多 AI 功能?这里需要考虑的重点是当前状态,而不是路线图或理想的未来。

产品智能成熟度规模:手动工作流程、业务逻辑自动化、机器学习和狭义人工智能
简化的产品智能成熟度量表
  • 手动工作流程——完全没有自动化
  • 业务逻辑自动化——特定功能的静态业务规则
  • 机器学习和狭义人工智能——仅限于特定任务的卓越能力
  • 通用人工智能和超级人工智能——未纳入该范围,因为它们仍处于理论阶段

通过大致了解您的组织所处的状况,您可以确定您的组织为了实现愿景必须达到的成熟度级别。

评估平台技术准备情况

UI 的底层隐藏着什么?它是否采用了合适的技术架构来支持 AI 开发?在真正投入 AI 工作之前,你需要解决多少技术债务?

在架构师和开发人员的帮助下,您的团队可以全面评估您的平台的定位。虽然我不推荐 Domo,但他们有一篇很棒的文章《AI 就绪性:评估您的业务的完整指南和免费清单》,您可以参考。

  • 基础准备——包括基础设施平台、数据源和软件包
  • 运营准备——包括指导方针、人员配备、治理、合规性和风险

了解这一点可以告诉你,你的努力是否会实现、是否会被推迟,或者是否会徒劳无功。

第四步:奠定基础

指导工作的是什么

定义AI 设计原则,打造富有影响力的用户体验。您可以从 VUX 的AI 设计原则中找到灵感。通过补充和完善概念的原则,强化既定的 AI 愿景和目标。

设计师的驱动力

不断提升您的 UX 实践以提供完善的 AI非常重要。

  • 确保您的团队掌握最新的设计最佳实践,例如Maria Margarida 撰写的《使用 AI 进行设计:用户体验和最佳实践》这篇文章
  • 在自己的设计工作流程中积极使用人工智能,亲身体验人工智能,并通过实践获得见解
  • 定期互相分享提示、资源和学习成果
  • 做好你每天要做的事情——磨练用户体验专业知识,改进研究和设计实践,并定期与客户互动

是什么让团队继续前进

与工作伙伴保持定期沟通并遵循最佳实践。

  • 知道何时让参与
  • 建立异步渠道和会议节奏

经验告诉我们什么

您的团队是否渴望开始深入研究数据?对于注重工程设计的组织,或者为了实现并行方法,您的团队也可以专注于数据准备。您可以先清理和准备一些基础数据集,以及一些您认为能够带来价值的专业数据集:

  • 帐户和用户数据
  • 记录应用程序和传感器数据
  • 所需第三方的 API
  • 元数据和标签

通过清理信息并将数据输入 AI 模型,您仍然可以在现有路线图上开展工作,同时为 AI 计划取得一些进展。这样,您就可以在对现有数据集执行深度学习关联时让数据为您提供指导,从而进一步研究特定经验用例。

第五步:共同塑造未来

AI交互模式

要利用 AI 解决客户问题,团队必须仔细思考 AI 如何在系统中运行,以及它将如何影响用户体验。请使用下方矩阵来指导讨论和决策。

  • 参与——要求与人工智能进行主动、明确的互动
  • 嵌入式——精心策划的集成 AI 体验
  • 隐形——用户无法与人工智能直接互动
AI 交互模式矩阵,突出显示参与、嵌入和隐形模式的属性
用于战略讨论的人工智能交互模式矩阵
Microsoft Copilot 参与式 AI 交互模式示例的 GIF
参与式 AI 交互模式示例——Copilot 的语义索引
Microsoft Copilot 嵌入式 AI 交互模式示例的 GIF
嵌入式 AI 交互模式示例 - 使用 Copilot for PowerPoint 重写

真正的用户倡导者提出的问题

  • 这会增加用户的交互需求吗?会增加多少?付出的努力是否值得?
  • 这将对我们的客户的生活质量产生哪些具体的影响?他们是否有能力或意愿付费来实现这些收益?
  • 实施这一举措是否需要客户采取额外的措施?扩大规模后,还需要付出多少努力才能保持这种模式?

通过令人信服的研究综合做出决策

确保不错过任何机会,分享在探索过程中、通过用户反馈或分析所获得的经验。及时向业务和产品利益相关者汇报研究结果,确保路线图的优先事项得到数据支持。

可视化路线图里程碑

用户体验团队还可以通过有效的可视化,在帮助利益相关者更好地确定工作优先级方面发挥关键作用。与产品经理合作,模拟代表最终愿景、第一步以及最终实现之前的几个中间阶段的英雄体验,这些体验可以映射到交付时间表和阶段。

衡量影响

确保你能定量和定性地衡量结果。包括领导层的投资回报率 (ROI) 和产品团队的关键绩效指标 (KPI)。虽然我不推荐这些方法,但Arounda 的《人工智能用户体验:完善人工智能产品指标的 10 个技巧》提供了很好的例子:

  • 用户参与度、用户保留率
  • 转化率、采用率和使用率
  • 效率和生产力

底线

如果您已经为客户提供了良好的服务,那么打造高影响力的 AI 体验应该轻而易举。但陷阱在于,组织对 AI 愿景或目标的看法不一致,以及您的产品技术能力尚未为 AI 做好准备。作为一名设计领导者,您拥有独特的优势,只需稍加挖掘、拓展人脉,并打破常规思维,就能引领变革。

步骤:1. 出于正确的理由去做 2. 组建你的 AI A 团队 3. 了解你的工作内容 4. 奠定基础 5. 共同塑造未来
TLDR:打造高影响力产品的 5 步 AI UX 策略手册

进一步阅读

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

✨ 审美积累 | Misso 工作平台设计赏析

杰睿

信息密度高,也可以呼吸感十足。
今天分享一组我非常喜欢的 Web UI 作品——Misso 工作效率平台设计。项目来自 BEHANCE 上的 Dotcode Studio,主打 B 端 SaaS 场景,设计在视觉和信息组织之间达成了很好的平衡。
这组设计最吸引我的是**「信息密度与视觉节奏的平衡」**。它大量使用网格和卡片进行内容分区,同时通过圆角、灰阶配色和轻量图标,削弱了B端界面的压迫感。
核心亮点:
  • 主色冷静理性,大量留白让复杂信息不拥挤
  • 字体层级明确,搭配简洁图标强化指向性
  • 模组化卡片设计,兼容多种信息类型、适配响应式场景
  • 微交互动效自然,增强可用性但不喧宾夺主
使用感受:
这类视觉风格在“效率类”工具平台中非常常见,但 Misso 的版本尤其**“亲切”**,不像传统 B 端那么冷峻。可以作为 CRM、任务管理、数据看板等平台的风格参考。
适用场景建议:
适合 B 端 Web 产品、数据仪表盘、工作流工具等高信息密度的页面,特别适合希望在「专业感」与「友好性」之间找到平衡的产品团队。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

表盘设计分享【一】

杰睿

0bea951f32f9ca9d51675197c681577c.jpg

8cd1d0f8382224270c1eff7b82da4b4c.jpg

633f3d9c9f83e736d861afe2d428c110.jpg

859b302bd0daa2efe3a2dbfc6b69497f.jpg

44320e08d38b3268bd8b5b0c8975ee46.jpg

 

在数字产品设计中,响应式设计早已成为连接功能与体验的关键路径。智能手表的表盘,作为最核心的信息承载区,正在向“可感知、可适配、可延展”的方向不断演进。而我们将其类比为“数字卡片”,正是因为二者在设计逻辑上的高度契合:都追求信息层级的清晰展现、内容与场景的灵活适配,以及操作的直观反馈。

卡片设计以模块化、结构清晰、响应灵活著称,能在不同屏幕与使用场景中自如调度内容展示方式。而智能手表的表盘设计同样需要在极小的显示空间内,精准传递时间、健康、通知等多维度信息。通过响应式设计的引入,表盘可以根据环境光线、使用者习惯、交互状态等动态变化,自动调整元素的排布与表现形式,实现“信息即所需,界面即交互”。

例如,在运动状态下表盘可自动突出心率与步数;而在夜间,它又能切换为更具护眼性的低亮模式。这种“感知上下文”的能力,让表盘从一个静态的界面,变为一个贴近用户、主动适应的智能卡片。

响应式的表盘设计,不仅提高了使用效率,更拓展了产品体验的边界。它像一张随时变化的数字卡片,安静却聪明地陪伴在你腕间,把复杂的系统逻辑转化为可感知的温柔细节。

 

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

如何通过单个视觉组件将信息可视化

杰睿

WechatIMG25.jpg

WechatIMG26.jpg

WechatIMG27.jpg

WechatIMG28.jpg

 

单个视觉组件实现信息可视化,并非简单的图形替代文字,而是通过视觉语法构建信息的传递路径,让接收者以最低认知成本获取核心内容。
以最基础的柱状图为例,若仅展示单一数据维度,确实显得单薄。但通过优化设计,它能承载更丰富的信息:柱体高度对应数值大小(基础信息),柱体颜色饱和度区分数据可信度(附加维度),柱体顶部的小三角标记同比增长率是否为正(关联指标)。这三个设计元素共同作用,使一个柱状图既能呈现具体数值,又能说明数据质量与增长态势,信息密度提升却未增加理解难度。
视觉组件的有效性,取决于信息层级的清晰划分。像仪表盘的设计,指针指向的刻度是核心信息(当前值),表盘颜色分区(绿色、黄色、红色)界定正常、预警、危险区间(判断标准),指针末端的细微抖动表示数据采集的实时性(动态属性)。这种设计让观者先捕获核心数值,再通过辅助视觉元素理解数值所处的语境,符合人类认知的递进规律。
关键在于找到数据间的内在关联性,并转化为可感知的视觉关联。例如用树状图展示公司组织架构时,方块面积对应部门人数(数量关系),方块间的距离表示协作频率(关联强度),方块颜色表示绩效等级(评价维度)。三个视觉变量相互配合,一个组件就能说清 “有多少人”“协作如何”“表现怎样” 三个层面的信息,且这些信息通过空间布局形成有机整体,而非孤立存在。
优质的单个视觉组件,是在有限视觉空间内建立信息的有序结构,让每个视觉元素都承担明确的信息传递功能,既不冗余也不缺失,实现 “一图抵千言” 的精准传达。
 
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

如何用ChatGPT的新图像生成器创建UI(4o)

杰睿

ChatGPT 是否有可能生成 UI?

我之前测试过几次,但结果却令人失望。

下面是我两个月前在一份时事通讯中分享的一个例子。

升级前通过 ChatGPT 生成

它看上去太卡通了,不太实用。

然而,上周,OpenAI 推出了一个重大更新,所以我决定再次尝试。

根据我的提示,我能够生成更好的UI模型。我甚至可以根据自己的需求创建多个设计选项:

通过 ChatGPT 生成

今天,我将向你们展示我进行的实验、我使用的提示以及过程中的一些惊喜和收获。

让我们开始吧。

背景

OpenAI 宣布,现在可以使用 GPT-4o 在 ChatGPT 中生成高质量图像,而不是使用较旧的 DALL·E 模型。

它更擅长遵循指令,并且可以更好地呈现图像中的文本。

上周,许多人尝试将照片转换成人工智能艺术作品——这就是吉卜力风格艺术潮流流行的原因。

我也尝试过:

通过 ChatGPT 生成

但在网上看到很多有趣的艺术作品后,我想:

如果我可以使用 ChatGPT 生成对产品设计师真正有用的 UI 会怎么样?

实验就是从这里开始的。

实验

1. 创建详细的提示

我使用 ChatGPT 来帮助我生成我想要的 UI 的详细提示。

# 为名为“SkillVerse - 热门微课程”的应用设计一个简洁、现代的移动 UI 界面(iOS 风格)。布局应遵循以下结构化部分。## 1. 状态栏(顶部)- **样式**:标准 iOS 布局(顶部安全区域)---## 2. 标题部分- **居中标志**:“SkillVerse”  - **字体**:中等粗细,小尺寸  - **颜色**:蓝色文本  ---## 3. 特色课程轮播(水平滚动)- **风格**:具有圆角和柔和阴影的可滑动卡片  - **卡片**:    -**卡 1**      - 标题:**动态设计简介**      - 字幕:*4 月 2 日开始*      - 视觉:动画缩略图    -**卡 2**      - 标题:《自由职业者精通 Excel》      - 字幕:*3 月 31 日开始*      - 视觉:生产力图标  ---## 4. 导航标签-**标签**:    - **趋势**(活跃,**粗体标签**带有**蓝色下划线**)    - 受到推崇的    - 已注册    - 已保存  ---## 5. 过滤行- **过滤器(下拉菜单)**:    - **过去 7 天**(基于时间)    - **所有主题**(类别)    - **所有级别**(难度)  ---## 6. 热门课程列表- **布局**:可重复课程项目的垂直堆叠:  - **左**:圆形缩略图    - **中心**:      - 课程名称      - 级别(例如,初学者、中级等)    - **右**:保存图标  - **底部**:入学人数 + 趋势(例如,入学人数 2.4k,+12%)   ---## 7. 底部导航栏-**标签**:  - **主页**(活动,突出显示颜色)    - 搜索    - 活动    - 轮廓  - **风格**:    - 下方有标签

然后我将其粘贴到 ChatGPT 中的新聊天窗口中,然后单击“生成”图标。

2. 生成代码支持的 UI

令人惊讶的是,ChatGPT 在右侧打开了一个额外的面板,触发了它的 Canvas 功能。然后它开始生成代码。

这立刻让我想起了克劳德的神器功能。

ChatGPT 的屏幕截图

然后我点击了右上角的“预览”按钮。

生成了响应式、代码支持的 UI。

ChatGPT 的屏幕截图

看起来很有趣,但似乎不如克劳德那么精确/精致。

3. 要求提供视觉模型

由于我的目的只是生成一个图像(一个可视化模型)而不是一个代码支持的 UI,因此我请求后续提示来纠正它:

创建一个可视化模型。而是一个视觉模型。

结果如下:

通过 ChatGPT 生成

结果出乎意料地好,尤其是与 ChatGPT (DALL·E) 之前生成的版本相比。这是一个巨大的提升。

测验:你能在上述 AI 生成的 UI 中找到多少个拼写错误?:)

4. 要求缩小用户界面

尽管用户界面看起来不错,但我仍然对图像截断感到有点困扰,所以我问了:

顶部和底部看起来有点截断。您能将 UI 缩小 20% 左右,让它整体更小一些吗?顶部底部看起来有点截断。您能将 UI 缩小20%左右, 让它整体更小一些吗?

结果如下:

通过 ChatGPT 生成

看起来不错!

5. 要求生成设计选项

然后我开始更有创意了……我想,如果我让它生成多个设计方案供我参考会怎么样?那会更有帮助!

所以我写了这个:

创建三个设计选项。使用相同的核心内容,但根据以下描述改变布局、UI 元素和视觉重点:选项 1. 大胆且引人入胜- 优先考虑视觉冲击力和品牌表达选项 2. 功能强大且快速- 优先考虑速度、清晰度和生产力- 紧凑的用户界面,卡片更小,信息层次更密集选项3.个性化和温暖- 优先考虑联系、信任和个性化- “为你推荐”轮播,包含人工智能策划的课程建议- 社会证明(头像、徽章、朋友活动)- 添加“社区”选项卡,用于同行共享内容

结果如下:

通过 ChatGPT 生成

再次,我对 GPT-4o 图像生成能力的提升感到震惊。

虽然这三个选项看起来仍然非常相似,但如果仔细观察,就会发现一些小细节 - 例如“搜索”图标、社交证明和副本 - 试图使每个版本都与其他版本区分开来。

不过,结果肯定还有改进的空间。例如,由于一张图片中包含了大量信息,ChatGPT 的精度开始下降。你可能会注意到,部分文本变得无法识别/扭曲。

6. 将设计转换为 Figma 文件

接下来,作为一个有趣的测试,我使用Codia AI 的插件根据 ChatGPT 生成的视觉模型生成 Figma 设计。

Figma 中的屏幕截图

所有组件(包括文本)都可以在 Figma 中编辑。

它使用的字体系列是 Intel。

好得可怕。

如果我想进行更改,这使我能够自定义 UI 模型。

最后的想法

ChatGPT 生成 UI 视觉模型的能力是一个巨大的提升。与之前版本相比,它提供了更高的精度和对提示的遵循性。

话虽如此,速度还是有点慢,准确率还有待提高。有时图像生成到一半就停止了;有时结果很随机,而且与指令不完全一致。

当我要求 ChatGPT 根据设计选项创建 3D 模型时,事情变得有点扭曲和奇怪——但还不算太糟。

通过 ChatGPT 生成

不管怎样,这已经是一次很棒的升级了。我现在能生成以前无法生成的东西了。

这一切都在 ChatGPT 聊天窗口内完成。多么方便啊?

我非常兴奋并希望未来会有更好的升级。

审美积累 | UI设计中的“刻度”设计【一】

杰睿

刻度设计在复杂与模糊之间,它提供了一种可感知的秩序,建立人与界面之间的信任锚点
 
 
刻度设计是界面里的“呼吸感”
你有没有注意过那些不动声色却让界面莫名安心的设计?
比如一个滑块的刻度,或者仪表盘上细微的分隔线——
它们不说话,但你总觉得:“嗯,这个界面有逻辑。”
 

2a4b2036-0a43-48d3-af0b-056b37310c5a.jpeg

3f5fa7f8-353c-4149-8ee0-0ec46f6609d6.jpeg

32d7a208-0ccc-4b43-8bcf-be5ac49a5b9d.jpeg

1280X1280 (1).JPEG

1280X1280.JPEG

ba7a63e2-3dd1-451a-bfb5-568c32e85264.jpeg

d771f67f-a6f1-446d-8ec1-e9ae9e911b91.jpeg

eab201ff-36a2-422b-96e6-71684a7412cc.jpeg

output.jpg

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

UI 设计|提高审美|极简扁平过时吗?

杰睿

在做UI界面时,极简扁平一直是个稳妥又高适配的选择。它没有复杂的质感和装饰,更强调清晰、直接和功能导向,能快速搭建出干净、有秩序的界面,适合大多数场景落地。
但是也确实有太多太相似的极简导致确实辨识度,这中间要怎么平衡?平淡的极简扁平风格已经过时了吗?

999817119037557.61deac4aa9171 (2).jpg

DM_20250527234137_001 (1).JPG

DM_20250527234137_001 (2).JPG

DM_20250527234137_001 (3).JPG

DM_20250527234137_001 (4).JPG

DM_20250527234137_001 (5).JPG

original-5cb00744f2589b4d9ea4fc8e5b355f26.png

original-6c39ea5c4b1001b13b0bad964c266a26.JPG

original-9e2e1af05af9a1337d76981d6fa961c0.JPG

original-1681ab12ce8ed1787e5836b2fbc06e92.JPG

original-4820af566a0239fa574d7ae876bc7178.gif

original-96947351752ea6576802c130a69393d1.JPG

original-b1c5d1370e23c8c5f5a76a36add69d28.png

核心特点:
无阴影、无渐变,色彩纯净,强调色块区分信息
图标和控件极简化,风格统一,识别度高
多用系统字体或无衬线字体,方便信息阅读
布局以网格为基础,留白充足,逻辑清晰
适合场景:
工具类 / B端后台 / 数据展示类产品
教育、资讯类平台,注重信息承载与阅读体验
想快速搭建产品雏形、做组件库规范的项目
使用体验: 对设计师来说,扁平风是效率高、容错率低的一种经典实用风格。它能帮助我们聚焦在信息结构、交互流程和排版逻辑上,适合组件复用、团队协作、甚至快速出图。 而对用户来说,扁平风界面看起来更“轻”,更容易理解和操作,没有过多干扰。
你在工作中还会用扁平风吗?有没有遇到难把控“简约不等于简单”的情况?欢迎一起讨论~

 
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

为了一次性掌握这些UI/UX设计准则,我准备了20张设计图解!

杰睿

大脑在处理和组织看到的信息时会使用一套快捷方法,了解这些方法是设计成功的关键要素。本文介绍了十一条有效的设计准则,用形象的图解帮助读者更好地理解设计准则在设计工作中的运用,帮助你利用这些方法更快捷地开展设计。适合关注产品设计的小伙伴阅读。

感知力是大脑将不同的信息连接和组织成一个连贯整体的机制。例如我们将相似的对象分组并连接起来,能够轻松地区分出不属于该组的对象。

大脑在处理和组织看到的信息时会使用一套快捷方法,了解这些方法是设计成功的关键要素。

在UI设计时,我们应该有意识地运用感知力,用足够的事实来验证设计,有依有据地解释为什么这个图形元素要这样设计?背后的原因是什么?

提升感知力有助于清晰地解释设计方案,避免常见的设计错误,引导我们将设计做得更好、更容易理解!

一、邻近原则

彼此靠近的元素会被自动理解为一组。把它们的位置放得更远,会给人一种这些元素是完全独立的个体的印象。

为了一次性掌握这些UI/UX设计准则,我准备了20张设计图解!

在UI设计中,可以利用邻近原则将相似的界面元素组合在一起,把控总体布局。

邻近规则适用于主导航、卡片、按钮、内容和图标等。我们还可以使用适当的留白将不同的元素进一步分开,创建一个层级更清晰的界面结构,以此来帮助用户浏览和理解不同类型的信息。

为了一次性掌握这些UI/UX设计准则,我准备了20张设计图解!

邻近原则是直接影响界面可用性的基本规则之一。如果随意控制元素的位置和间距,有可能会让整个产品变得混乱和难以理解。

二、相似原则

视觉上相似的元素会被视为同一组,视觉上不同的元素,大脑会下意识将其视为单独的元素。

为了一次性掌握这些UI/UX设计准则,我准备了20张设计图解!

利用相似性可以来定义界面的特征,例如颜色、形状、尺寸、纹理或空间位置等。最容易区分的是颜色相似,其次是尺寸和形状相似。

为了一次性掌握这些UI/UX设计准则,我准备了20张设计图解!

如果一个元素和界面中其他的元素都不同,无法融入到其他元素组中,那么这个元素就会变得非常显眼。

我们可以利用这种差异化的效果来突出一些具有引导性或者功能性的元素,例如登录按钮或者加入购物车按钮等。

三、闭合原则

一组不相连的元素组合在一起,我们会下意识地自动补充这些元素之间的空白,得到一个完整的、可识别的形状。

为了一次性掌握这些UI/UX设计准则,我准备了20张设计图解!

闭合原则有多种不同的用法。例如一个虚线箭头,我们会填补空白并把这些点连接在一起,得到一条完整的线段。

为了一次性掌握这些UI/UX设计准则,我准备了20张设计图解!

闭合原则还有助于识别抽象的图标形状并赋予更多的含义。在图标设计中,为了避免信息过载,大多数图标的设计都很简洁,更方便用户理解。

为了一次性掌握这些UI/UX设计准则,我准备了20张设计图解!

运用闭合原则的经典案例包括用不同虚线构成的IBM标志、利用正负形空间组合而成的WWF熊猫标志。

为了一次性掌握这些UI/UX设计准则,我准备了20张设计图解!

四、对称原则

UI界面中的元素一旦有对称性,就会产生秩序感,我们很快就能看到并理解这种形式。

为了一次性掌握这些UI/UX设计准则,我准备了20张设计图解!

我们天生喜欢对称的物体。对称排列的元素在视觉上更令人舒服,也更美观。

可能有人觉得对称设计过于呆板,这种想法在平面广告或视觉设计中可能正确,但在UI设计中对称布局是相当重要且实用的界面排版形式。

为了一次性掌握这些UI/UX设计准则,我准备了20张设计图解!

对称布局让设计更容易理解,也更友好,缺乏对称会导致界面混乱,不知道该关注哪个元素。当然,如果想让某个模块突出展示,也可以尝试打破对称性,这样不对称的元素就能在界面中脱颖而出。

五、连续性原则

界面中沿着同一条线对齐的元素会被认为属于同一组。

在浏览界面时,视线会第一时间寻找最顺畅的视觉动线。这也解释了为什么在使用连续性原则时,需要确保直线(或曲线)是均匀和可预测的。

线条越均匀,生成的形状越容易被用户正确识别。

为了一次性掌握这些UI/UX设计准则,我准备了20张设计图解!

连续性有助于界面保持上下垂直滚动时的节奏,相似的内容应始终保持对齐。如果某个元素打破了这种连续性,我们的浏览节奏会被打乱,浏览速度也会变慢。

为了一次性掌握这些UI/UX设计准则,我准备了20张设计图解!

当下的UI设计中,流行带有圆角的卡片和按钮效果。其中的一个原因是我们对于直角的处理速度稍慢,视线需要停顿并旋转90度,而更圆滑的导角效果能帮助我们的视线更快地转换。

六、共同命运原则

按相同方向、以相同速度运动的元素被认为是一组。

为了一次性掌握这些UI/UX设计准则,我准备了20张设计图解!

在设计轮播、下拉列表、过渡动画等场景时,共同命运原则会很有帮助。例如我们的视线既跟随轮播图水平移动,还跟随下拉列表向下展开。

为了一次性掌握这些UI/UX设计准则,我准备了20张设计图解!

七、希克定律/米勒定律

  • 希克定律:可供选择的选项越多越复杂,就越难做出选择。
  • 米勒定律:我们的大脑在同一时间只能处理大约7±2个对象。

为了一次性掌握这些UI/UX设计准则,我准备了20张设计图解!

根据希克定律,可供的选择数量应该有限制。有太多东西可供选择可能会导致用户迷失方向,做出判断的时间加长,甚至会感到压力。

米勒定律提到,大脑处理信息的能力与认知负荷有直接的关系。我们大脑一次能处理的信息量大约是7个对象。对象数量越多,处理它们所需的时间就越长。

在设计时,尽量不要超过七个选项,为了获得最好的体验,应尽量将选项保持在4-5个。这意味着需要控制主导航数量、按钮数量、下拉选项和轮播图数量等。

当需要用户做选择时,最好能突出显示最受欢迎或最推荐的选项,帮助用户更快做出决策。

八、前景/背景

我们能够本能地区分界面中的图形元素和背景。

为了一次性掌握这些UI/UX设计准则,我准备了20张设计图解!

界面由不同类型和样式的图层组成,每个图层都有不同的层次结构。

为了避免层次结构混淆,我们需要清楚地定义界面的所有元素。背景不需要设计设计的太花哨,有可能会抢夺用户对主要内容的注意力。

辅助内容和功能不需要太明显,并且需要与主要内容在设计上做出区分。

为了一次性掌握这些UI/UX设计准则,我准备了20张设计图解!

可以使用对比关系、位置关系和阴影等方法帮助用户区分内容和背景。

九、审美可用性效应

用户通常认为具有视觉吸引力(美观)的产品更实用。

为了一次性掌握这些UI/UX设计准则,我准备了20张设计图解!

根据这个原则,流行、对称、美观的界面会对用户产生更积极的影响。如果视觉效果给人足够好的第一印象,用户可能会忽略一些可用性问题。

审美可用性的基础在于具有一定的可用性,之后才会起作用。如果产品本身的功能就很糟糕,那么再美观的界面也无济于事。

高质量、美观的界面有助于建立用户信任。相反一个看起来混乱的设计会让用户感到不靠谱。即使用户不能确切说出界面视觉的问题,但他们也会觉得这个产品有风险或者不正规。

高质量的UI设计对于银行类、金融类和医疗类产品来说尤为重要,尤其是在需要用户提供个人信息或涉及交易的使用场景中。

十、串行位置效应

我们最容易记住一组当中的第一个和最后一个元素。

为了一次性掌握这些UI/UX设计准则,我准备了20张设计图解!

将最重要的内容或元素放在每组的第一个或最后一个,吸引用户注意力,方便高频操作。而次要的内容操作频率相对较低,则放到中间位置。

例如在构建导航、下拉列表等场景中,将重要的操作放到首位。

十一、隔离效应

在一组看起来相似的元素中,我们总是会记住与其余元素不匹配的那个元素。

为了一次性掌握这些UI/UX设计准则,我准备了20张设计图解!

在UI设计中,隔离效应意味着将界面中重要的内容或关键的操作在视觉上与众不同。

最典型案例是界面中的CTA(号召性用语)按钮。通过改变CTA按钮的颜色、尺寸等,与界面中的其他按钮区分开来,第一时间引起用户的注意。

专栏作家

作者:Clippp,每周精选设计文章,专注分享关于产品、交互、UI视觉上的设计思考。

本文原创发布于人人都是产品经理,未经作者许可,禁止转载。

题图来自 Unsplash,基于CC0协议。

该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。

 

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

日历

链接

个人资料

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

存档