论坛 › 江苏 › 一段话，20秒，AI直接生成2版UI设计稿！

l14107cb 发表于 2024-9-28 06:40:51

一段话，20秒，AI直接生成2版UI设计稿！

    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">用户只需要输入一段话，20秒<span style="color: black;">上下</span>，就能生成两版UI设计稿......9月20日，在云栖大会现场，Motiff妙多<span style="color: black;">开发</span>负责人樊锴演讲分享了AI生成UI功能的最新<span style="color: black;">发展</span>及<span style="color: black;">研发</span>历程，强调尽快找到TPF（技术<span style="color: black;">制品</span>契合度）、<span style="color: black;">注重</span>数据<span style="color: black;">累积</span>、完善后台<span style="color: black;">研发</span>体系，都是AI功能落地的关键<span style="color: black;">原因</span>。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-axegupay5k/19026e72d70642d9bfacb77a6cf8fe08~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1727515610&amp;x-signature=xHVfesun0dmkq6xFnqw3rYzBmMI%3D" style="width: 50%; margin-bottom: 20px;">
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Motiff妙多<span style="color: black;">开发</span>负责人樊锴演讲现场</p>
    </div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">生成式AI是2024年云栖大会最受关注的议题之一，Motiff妙多AI生成UI功能的落地，标志着设计工具从效率工具向生产力工具的转变。“<span style="color: black;">咱们</span><span style="color: black;">期盼</span> Motiff妙多不止于设计<span style="color: black;">行业</span>的 Copilot， 更能<span style="color: black;">作为</span> Autopilot，能直接完成<span style="color: black;">平常</span>设计任务，<span style="color: black;">乃至</span>生成完整的设计稿。”樊锴<span style="color: black;">暗示</span>。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Motiff妙多于今年6月面向<span style="color: black;">全世界</span>发布，开创了界面设计<span style="color: black;">行业</span>的多个AI功能。<span style="color: black;">研发</span><span style="color: black;">全世界</span>领先的AI功能面临<span style="color: black;">许多</span>技术挑战：<span style="color: black;">怎样</span>让AI<span style="color: black;">作为</span>真正可用的生产力、创作兼具<span style="color: black;">规律</span>性和艺术性的UI设计稿？大模型的能力边界在哪、<span style="color: black;">怎样</span>扬长避短？樊锴在演讲中<span style="color: black;">仔细</span>分享了<span style="color: black;">背面</span>的工程难点和经验。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/cd10ea875a334d5d9fde030cf174ff41~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1727515610&amp;x-signature=g8g%2Bd5592m1ZiQKuohfXs9RaPow%3D" style="width: 50%; margin-bottom: 20px;">
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Motiff妙多能生成用户所需的各式各样的界面，生成的设计稿还可在Motiff妙多的编辑器中<span style="color: black;">持续</span><span style="color: black;">调节</span>优化。</p>
    </div>
    <h1 style="color: black; text-align: left; margin-bottom: 10px;">锁定应用场景，加速达成技术<span style="color: black;">制品</span>契合度</h1>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在AIGC<span style="color: black;">行业</span>，<span style="color: black;">区别</span>于<span style="color: black;">平常</span>的文本生成或<span style="color: black;">照片</span>生成任务，UI 生成非常独特。这是<span style="color: black;">由于</span>UI设计既需要<span style="color: black;">保准</span>严谨的<span style="color: black;">制品</span><span style="color: black;">规律</span>，又要具备像素级的精确程度，还要兼具美观的视觉效果。这对技术能力提出了相当高的<span style="color: black;">需求</span>。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">AI生成UI可由AI从零<span style="color: black;">起始</span>创建所有页面内容，这<span style="color: black;">背面</span>有多种技术路径，但生成效果均<span style="color: black;">不睬</span>想。樊锴举例<span style="color: black;">叫作</span>，基于扩散模型的文生图技术<span style="color: black;">能够</span>生成设计<span style="color: black;">照片</span>，但在像素级别的布局<span style="color: black;">掌控</span>和内容生成能力上相对欠缺。另<span style="color: black;">有些</span><span style="color: black;">办法</span>，如生成HTML网页代码再转为设计稿，<span style="color: black;">一样</span>面临细节处理能力不足的问题。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">针对</span>AI应用<span style="color: black;">来讲</span>，尽快找到TPF（技术<span style="color: black;">制品</span>契合度）尤为关键。“相比于传统软件<span style="color: black;">研发</span>，AI应用的底层技术不确定性高，战略上用户<span style="color: black;">需要</span>驱动，但在战术上<span style="color: black;">制品</span>设计严重依赖于技术可行性。”樊锴在会上<span style="color: black;">暗示</span>，关键在于尽快找到最有可能被<span style="color: black;">实质</span><span style="color: black;">运用</span>的场景，更早得到用户反馈。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">生成一张设计稿，需要兼顾整体结构、页面内容和UI细节三大方面。设计稿需要<span style="color: black;">包括</span>导航栏、搜索框、内容列表等模块，并匹<span style="color: black;">协同</span>适的文字、<span style="color: black;">照片</span>、图标等内容，<span style="color: black;">同期</span>呈现良好的视觉效果。通用大模型<span style="color: black;">广泛</span><span style="color: black;">善于</span>生成整体结构和页面内容，但<span style="color: black;">针对</span> UI 细节<span style="color: black;">掌控</span>还有所不足。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">因此呢</span>，为大模型寻找合适的任务<span style="color: black;">作为</span><span style="color: black;">处理</span>问题的关键。“让大模型专注于其<span style="color: black;">善于</span>的<span style="color: black;">行业</span>，即生成页面的整体结构和内容。在细节把控上，<span style="color: black;">经过</span>预定义的组件库来<span style="color: black;">保准</span>美观。”樊锴<span style="color: black;">暗示</span>。组件库是<span style="color: black;">海量</span>组件和设计规范的集合，基于组件库的生成<span style="color: black;">方法</span><span style="color: black;">亦</span><span style="color: black;">更易</span>支持自定义组件。这不仅能够覆盖大部分UI设计场景，还能满足用户对个性化和灵活性的<span style="color: black;">需要</span>。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">这<span style="color: black;">亦</span>是面向<span style="color: black;">将来</span>的技术<span style="color: black;">方法</span>。“随着软件<span style="color: black;">研发</span>的成本降低，<span style="color: black;">将来</span>应用场景会更个性化，<span style="color: black;">亦</span>需要更灵活的交互设计，信息庞杂的交互设计页面反而会减少。”樊锴判断。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">筑成数据护城河，率先实现设计Autopilot</strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">即使是基于组件库的<span style="color: black;">方法</span>，现有通用大模型仍难以生成高质量的UI设计稿。这是<span style="color: black;">由于</span>通用大模型并不<span style="color: black;">善于</span>UI设计，<span style="color: black;">亦</span>难以理解组件库。为了呈现多样化的效果，组件库<span style="color: black;">包括</span><span style="color: black;">海量</span><span style="color: black;">区别</span>类型的组件。以列表为例，就有上百种<span style="color: black;">类似</span>的样式，通用大模型难以分辨其细微差别。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">“核心还是在于让大模型充分理解UI设计，需要有专门的<span style="color: black;">行业</span>大模型。“樊锴<span style="color: black;">暗示</span>。Motiff妙多近期正式发布了其自研的国内首个UI多模态大模型，经过<span style="color: black;">海量</span>UI<span style="color: black;">行业</span>的<span style="color: black;">优秀</span>数据训练，该模型在多个UI任务表现上<span style="color: black;">明显</span>超越GPT-4o等通用大模型，能灵活地<span style="color: black;">按照</span>上下文理解界面元素，达到“设计专家”水平，最接近人类对UI界面的理解和表述结果。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在自研大模型加持下，Motiff妙多有效结合了自研大模型的生成能力和组件库的表现力，在多轮行业盲评中取得了<span style="color: black;">第1</span>的生成效果，优于此前业内领先的AI生成UI工具Galileo AI、设计工具Uizard和文生图工具Ideogram。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p26-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/6e1d1a5b5eaa4627b97ce59e1f605a7e~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1727515610&amp;x-signature=e7zqdqCniidZVXDRQubimC%2FxsmE%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Motiff在AI生成UI功能中取得的成功，还得益于<span style="color: black;">长时间</span>的专业数据<span style="color: black;">累积</span>。“<span style="color: black;">将来</span>，数据是最重要的护城河。“樊锴<span style="color: black;">暗示</span>，“随着大模型能力<span style="color: black;">持续</span><span style="color: black;">加强</span>、成本<span style="color: black;">持续</span>降低，专业数据将<span style="color: black;">作为</span>更稀缺的资源，为AI应用的质量<span style="color: black;">供给</span>坚实<span style="color: black;">保证</span>。”</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在<span style="color: black;">研发</span>AI功能的工程实施中，Motiff妙多<span style="color: black;">累积</span>了宝贵的经验。<span style="color: black;">针对</span>大部分<span style="color: black;">繁杂</span>任务，Motiff妙多<span style="color: black;">发掘</span>Flow Engineering（流程工程）比Prompt Engineering（提示工程）更为有效。相比于单次模型调用的黑箱运行，FLow Engineering将任务分解为多个<span style="color: black;">过程</span>，实现整体功能的协同，对团队协作和工程化更为友好。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">为了更好地应对AI应用<span style="color: black;">研发</span>中的不确定性，Motiff妙多搭建了一个<span style="color: black;">有效</span>的实验平台。平台不仅支持便捷地定制流程和参数，还能<span style="color: black;">仔细</span>记录实验的中间结果，从而<span style="color: black;">帮忙</span>团队快速尝试和迭代。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">日前</span>，Motiff妙多AI生成UI功能在指令遵循和设计美观性上均<span style="color: black;">处在</span>行业领先水平，并在海外社交<span style="color: black;">媒介</span><span style="color: black;">导致</span><span style="color: black;">海量</span>讨论。樊锴在会上透露，Motiff妙多还将<span style="color: black;">连续</span>迭代技术<span style="color: black;">方法</span>，有望于年内发布新的AI功能。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">— 完 —</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">量子位 QbitAI · 头条号签约</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">关注<span style="color: black;">咱们</span>，<span style="color: black;">第1</span>时间获知前沿科技动态</p>

wrjc1hod 发表于 2024-10-6 08:23:12

感谢你的精彩评论，带给我新的思考角度。

b1gc8v 发表于 2024-10-16 05:34:37

外贸网站建设方法 http://www.fok120.com/

nqkk58 发表于 2024-11-13 12:22:39

楼主的文章深得我心，表示由衷的感谢！

4zhvml8 发表于 前天 12:50

认真阅读了楼主的帖子，非常有益。

查看完整版本: 一段话，20秒，AI直接生成2版UI设计稿！