用户 提示 微软 编者按:基于 AI 的各种产品越来越多,这些 AI 大都依托提示词来生成内容,那么这些产品和服务当中的提示词要如何安置,如何设计?资深设计师基于微软出品的 Microsoft Designer 产品的设计,梳理出了 6 个设计原则,下面是正文:Microsoft Paint 我一直在接触,当我听到 Microsoft Designer 发布的时候,我就开始为此感到兴奋了。微软这种体量的公司开始认真地使用 AI 技术的时候,它真的会让 AI 惠及用户。不仅仅是 Microsoft Designer,他们还将各种 AI 相关的技术应用到其他产品线当中。比如微软的 Bing 搜索引擎也加入了 Image Creator 的功能。微软正在通过引导用户编写文本提示信息,让用户借此获得视觉内容,开始适应新的计算机运作方式。「编写文本提示词是一门艺术,借此可以从 ChatGPT、Dall-E2 和 Midjourney 获得你想要的视觉内容。」如果你曾经尝试过这类文本转图片的人工智能服务,那么你应该知道这类服务的不可预测性。生成需要正确风格的图像,可能需要很长时间的尝试,而为了让 AI 按照需求运作所进行的反复试验则被称为「提示词设计」和「提示词工程」。手残党也能成为艺术家!4个热门AI绘画平台的创作经验总结AI画画,无疑是当下最火热的话题之一。阅读文章 > AI 产品的提示词设计原则AI 生成服务的不可预测性并非无法优化,有时候对提示词进行调整就能获得不一样的结果。我观察到 Microsoft Designer 会指引用户调整提示词,以获得更加可靠的内容输出,降低时间和算力上的浪费。微软、Dall-E2 和用户首先,了解所涉及到的技术和受众很有必要。Microsoft Designer 在 AI 技术上并不是微软自身的新技术,而是基于 OpenAI 出品的 Dall-E2 的产品:关于Dall-E2的介绍:10秒出图,以假乱真!设计师「用嘴修图」的愿望要成真了?大家好,我是和你们聊设计的花生~之前给大家推荐了 AI 图画生成器 Disco Difussion,它可以根据文本提示自动生成恢弘奇幻的艺术,非常适合作为艺术创作的灵感来源。阅读文章 > Microsoft Designer 本身是一种面向营销和运营人员用来创建社交媒体内容的工具,它更像是拥有人工智能加持的 Canva,和 Figma 或者其他的 UI 设计类工具有着巨大的差别。除了 Microsoft Designer 之外,微软顺道推出的 Bing Image Creator 也采用了类似的技术,它类似 Bing 的图像搜索,但是实际上获得的图片是基于描述使用 AI 生成的。以下是微软引导新用户使用提示词生成 AI 图像的一些设计原则。1、熟悉原则:提供熟悉的上下文环境人们经常将新事物存在的风险和不确定性联系起来,而人工智能图片生成服务就很符合这种特征。「人类天生就喜欢熟悉的事物,无论是文字、产品还是体验。」为了让大家更加熟悉,Microsoft Designer 将 AI 图片生成器生成图片作为一个选项提供出来,和其他的图片上传选项摆放在一起:用户可以选择:从设备直接上传从手机上传打开媒体库用 AI 生成图片AI 和熟悉的上传内容摆放在一起,自然融入到大家熟悉的流程当中,让人感觉 AI 和我们日常操作没有太多区别。「与其一头扎入算法当中,不如想象如今的用户是如何完成日常的操作的。」而在 Bing Image Creator 当中,AI 的运用方式则有所不同,它更接近用户日常使用 Bing 搜索引擎一样,唯一的区别在于,原本搜索栏所需要的填写的是AI 提示词,而 AI 生成图片的呈现方式则类似于 Bing 搜索图片的界面,整个体验无缝地和 Bing 搜索引擎的内容呈现保持一致。2、透明原则:AI 并非魔法有许多工具在用户实际使用过程中,压根没有提到他们生成内容的时候用到了 AI 技术,有时候用户需要通过其他的渠道或者深入挖掘调研才能知道相关的信息。Microsoft Designer 在你创建内容的醒目位置,运用工具提示的方式来告知用户他们所使用的技术细节:尽管对于用户而言,DALL-E2 是一个陌生的专业术语,但是后面紧跟着详细的解释,而不是将 AI 本身模糊化让它听起来像「魔法」一样。这段描述还可以传达出微软对于 AI 技术在道德层面上的理解和关注,并且会尽量清晰地展示背后的内容。「如今,太多人将人工智能(AI)视作为另外一种神奇的技术,对于它的工作原理知之甚少。」最后,将这些信息置于工具提示控件当中,也是尽量让技术术语不妨碍用户的正常使用,但是由于呈现样式会很清晰地同普通控件以及界面其他内容区分开,因此不会对用户造成可访问性上的障碍。3、道德原则:强调 AI 的道德性作为新生事物,AI 的不确定性让它很容易被不道德地使用。怎么使用才是道德的,这当中有很多模糊的地方,因为当下每天都会有新的用例出现,很多艺术创作者仍然会因为风格被盗用而感到愤怒,但是 AI 的艺术图片生成的速度从未放缓。「为了防止 DALL-E2 在 Designer 和 Image Creator 中生成的结果不合理,我们正在和开发 DALL-E2 的 OpenAI 一起采取措施优化,并根据需求改进我们生成图片的方法。」而在用户这一端,Microsoft Designer 的程序会在工具提示当中多次提示用户,如果生成的结果不合理、不符合预期的时候,让用户尽量提供反馈来帮助系统优化结果,以期后续给用户更好的结果:Bing Image Creator 当中,也采用了类似的策略,每个 AI 生成的图片附近都会有说明性的工具提示,其中会包含相关的道德规范,以及常见问题的相关回答:4、解释原则:告知用户结果的来源解决了道德问题之后,根据 AI 用户体验设计原则,AI 程序应该能够让用户追溯到它原始的数据点,或者让用户以某种方式了解图片内容生成的方法,以提高内容的可信度。「如果你是从多个来源聚合数据,那么请将它们分解开来让用户可以重现这个结果。这些信息应该作为用户流程中的一部分,并且通过一致的 UI 界面呈现出来。——《UX of AI》」绝大多数的 AI 汪中,从 OpenAI 的 DALL-E2 到 Prompt Hero 这样的 AI 灵感素材网站,都会在图片内容上公开展示每个图片的原始来源。Microsoft Designer 以相同的方式来解释来源,当你悬停在任何一个 AI 生成的图片上的时候,它会以工具提示的方式展示来源:这些 AI 生成图的原始来源,会呈现在界面的右侧,同时会使用文本「我们使用您的描述内容和 AI 为您设计出这些图片」,借此来陈述设计的来源。不过,Microsoft Designer 并没有展示具体的创建图片的数据点,也没有详细解释 AI 的工作方式,这可能和 DALL-E2 的工作方式有关系,它无法实现。另外,作为一个商业产品,太过细致的内容可能超出了范畴。5、引导原则:为用户提供建议AI 提示词对于很多用户而言可能会比较陌生,因为提示词文本需要符合 AI 处理信息的逻辑。OpenAI 甚至提供了「最佳实践快速指南」,而GPT-3 的经验则是:对所需要的背景、结果、长度、格式、风格尽可能进行具体详细的描述详细阐明所需要输出的格式从 zero-shot 开始,然后尝试 few-shot,如果两者都无效,再进行微调用户第一次撰写 AI 提示词文本的时候,可能会感觉非常陌生,而 Microsoft Designer 选择了最直接的策略,就是使用自动建议来辅助用户:和前面提到的熟悉原则类似,结合我们的搜索习惯,搜索建议文本也是我们所熟悉的东西。另外,这也意味着,后台必然是有着大量的用例来支撑这些自动建议文本。6、掌控原则:让用户掌握主动权尽管引导用户有帮助,但是依然要让用户拥有掌控权,按照他们的方式来进行创建。所以,产品本身不要完全依靠人工智能,允许用户选择跳过一些步骤,让用户选择符合他们需求的流程,让 AI 和用户协作,而不是让 AI 来接管一切。比如,当 AI 不符合用户需求的时候,用户依然可以选择自己事先准备的图像来继续设计。在 Microsoft Designer 当中,AI 生成的图片组当中始终有取消的选项,同时「从空白画布开始创建」的选项始终存在:这意味着用户即使完全不使用 AI 功能,依然可以借助自己准备的素材完整地创建出整套的营销内容和图片。结语尽管我确实想将上述的设计策略视作为一组设计法则,但是实际上它们更像是一套可供遵循的概念和范例,但是它们确实可以帮助你设计 AI 产品,这些案例和方法让你可以无需重新造轮子。人工智能技术确实在快速发展,但是此时的应用类型和场合依然有限,随着各种工具逐步发展,这些设计方法和用例会进一步完善。关于 AI 的 UX 设计,Lennart Ziburski 撰写了精彩的入门技巧,而本文也从中汲取了不少营养。本篇来源:优设网原文地址:https://www.uisdc.com/ai-prompt-design-principles
图像 提示 模型 大家好,这里是和你们聊设计的花生~之前为大家推荐了一款上手非常容易的 AI 图像生成工具 Dream Studio,它操作界面简单易懂,非常适合刚接触 AI 图像生成工具的新手。最近又出现了一个新的同类型的 AI 图像生成神器 Dreamlike.art,操作界面同样好用且图像质量极高,即使是小白也能轻松生成精美的图像,效果可以跟上 Midjourney 的 V4 模型了。最最重要的是目前可以免费,使用一起来看看吧~Dream Studio 介绍:免费开放!人人都能轻松上手的AI绘画工具DreamStudio大家好,我是和你们聊设计的花生~之前为大家介绍了初代 AI 图像生成器 Disco Difussion、Dall·E 2、Midjounery,国产 AI 图像生成器 Tiamat,以及 4 款由谷歌、微软等大厂推出的 AI 图像生成器 Imagen、Parti、Make-A-Sce阅读文章 > Dreamlike.art官网直达: https://dreamlike.art/create (使用梯子速度更快,需注册账号)模型地址: https://huggingface.co/dreamlike-art/dreamlike-diffusion-1.0使用指南: https://dreamlike.art/guidesDreamlike.art 的功能包括根据文本生成图像、根据图像生成新图像和图像变体,以及通过放大和面部优化来增强图像内容。我用 Dreamlike.art 生的人物图像,质量相当不错用户@ScourgeHH 用照片生成的图像,图片来源:官方 Discord 社区除了输入文本提示,Dreamlike.art 的操作界面上有很多可以调节的参数,比如:负面提示:输入后图像可以不包含有关负面提示词内容;指导量表:控制生成图像与文本提示的紧密程度,值越高图像与提示的贴合度越高;注意力控制:在提示中使用 () 会增加 AI 模型对括号内单词/短语的注意力,而 [] 会减少注意力,注意力的增加意味着该单词/短语将更多地影响生成的图像。步骤:控制图像迭代次数, 步骤越多结果就越好,但在大多数情况下 30 步足够了。有了这些可调节的参数,我们就能对画面进行细微的调整并准确控制生成效果。即使对这些概念都不太熟悉也不用担心,官方在指南里对每一个参数的概念和调节方法都做了详细的介绍,甚至还写了一篇文章教我们如何利用最近爆火的 AI 聊天机器人 ChatGPT 生成优质的文本提示,想深入了解 AI 提示词写作技巧的小伙伴可以详细阅读官方指南,当然直接使用系统默认的参数设置也能得到不错的效果。地表最强AI聊天机器人ChatGPT诞生!会给设计师带来哪些影响?大家好,这里是和你们聊设计的花生~前几天刚和大家聊过 AI 绘画工具 Midjourney 的 V4 模型,感叹它图像生成质量之高。阅读文章 > Dreamlike.art 的另一个神奇之处是它有很 5 个不同的风格模型:Dreamlike Diffusion、Dreamlike Photoreal、Stable Diffusion 1.5、Anime Diffusion (Eimis)和 Openjourney Diffusion。其中 Photoreal 可以生成如照片般真实的图像,Anime Diffusion 是二次元画风模型,大家在使用的时候可以多做尝试,找到符合自己需求的模型。Dreamlike.art 内置的的 5 个模型Dreamlike.art 的图像生成速度很快,10 秒左右就能生成 5 张高质量图像。将鼠标悬浮在图像之上可以进行进一步的操作,比如下载、收藏、生成变体、画面升级加强等。Dreamlike.art 官网上说其功能永久免费,但是这个免费并非是无限制的。每个新用户的账户上会有 100 学分,用于免费生成图像。如果余额低于 100 积分且用户在过去 48 小时内在线,官方会每小时在余额中添加 1 个积分。如果有用户在访问你的个人资料或帖子后创建了帐户,你的账户也可以获得 100 个积分。此外参加官方日常举办的日常挑战也可以获得积分奖励,最佳作者可以获得 3000 积分。官方活动举办社区: https://discord.com/invite/QyGR2FxsKU (需搭梯子)官方 discord 社区内的每日主题挑战界面很多想使用 AI 绘画工具的小伙伴刻可能都感觉写英文提示词是比较困难的事情,这里给大家推荐 2 个超好用的提示词网站 PromptHero 和 urania.ai,搭配翻译软件使用可以慢慢掌握如何写出好的文本提示词。PromptHero 里收录了海量 AI 生成的图像及其文本提示词,并分为建筑、3D、二次元、照片风等多个门类,大家可以在其中翻找符合自己要求的图像,复制其提示词并做一些修改,就能得到相似的结果,给你一秒变大神的惊喜感。urania.ai 则收录了多位知名艺术家的风格在 AI 图像生成模型中的效果图,在提示词中加入该艺术家的名字就能形成对应的效果。PromptHero 官网: https://prompthero.com/ ( 使用梯子速度更快)urania.ai: https://www.urania.ai/top-sd-artists (使用梯子速度更快)以上就是今天为大家推荐的 AI 绘画神器 Dreamlike.art,非常适合想了解 AI 绘画工具的小伙伴。喜欢本期推荐的话记得点赞收藏,也可以转发给身边有需要朋友 。如果你有关于本文或者设计的疑问,可以在评论区提出,我会第一时间为大家解答 ~Dreamlike.art 官网直达: https://dreamlike.art/create (使用梯子速度更快,需注册账号)模型地址: https://huggingface.co/dreamlike-art/dreamlike-diffusion-1.0使用指南: https://dreamlike.art/guidesPromptHero 官网: https://prompthero.com/ (使用梯子速度更快)urania.ai: https://www.urania.ai/top-sd-artists (使用梯子速度更快)推荐阅读:字节、腾讯也玩起AI绘画了,效果还非常不错!大家好,这里是和你们聊设计的花生。阅读文章 > 手残党也能成为艺术家!4个热门AI绘画平台的创作经验总结AI画画,无疑是当下最火热的话题之一。阅读文章 > 本篇来源:优设网原文地址:https://www.uisdc.com/dreamlike-art
用户 提示 输入框 前言键盘输入相对于点击选择来说,是一种操作成本很高的动作。输入格式错误、输入内容超出范围、内容删除方式(是否需要一键清空),都是值得探讨的点。本文将分类讨论关于文本框输入超出限制时的一些状况和思考。基础篇:「这个控件叫什么」系列之输入框/文本框/Text fields@龙爪槐守望者 :Text fields(输入框/文本框)是一个历史悠久而经典的控件,当光标位于输入框时,用户可以在其中输入或复制粘贴文本、数字等内容。阅读文章 > 什么场景下需要/不需要设定输入限制?为什么?短文本场景:需要进行输入限制(如常见的账号、密码、标题等)原因分析:认知层面:减少浏览时的认知和记忆负担语义层面:比如商品名,本质是形容词+名词的结构,理应不会太长阅读层面:移动端屏幕空间有限,用户注意力难以集中,不必要的长文本根本不会被读展示层面:简单粗暴,文字太长会放不下长文本场景:需要分类讨论,有限制和无限制都有可能。有输入限制的原因:可能是为了营造一种更轻量的阅读和表达体验。如微博之于博客。避免过度描述,读者的注意力不够支撑,意义不大。无输入限制的原因:无法预测用户将要输入的信息量,因此不设限制,让用户畅所欲言。用户输入的信息与业务密切相关,如商品评价会对商品成交有显著影响,因此不应该限制用户的点评。如果不需要输入限制,有哪些交互方案可选?不论是单行输入或是多行输入,输入框的高度都不发生变化。常见于搜索模块和点评模块。随着输入内容的增加,输入框的高度也相应增加。由于键盘占据一定高度,因此要设定输入框高度的最大值。如果需要输入限制,有哪些交互方案?直接无法继续输入内容,无提示。见于微信的设置备注与设置名字。当输入量濒临极值时,出现高亮的字数提示,在不打断用户的输入流程的情况下,用较为安静的方式提示用户。当输入量超出最大值时,可以考虑用:toast 提示,告知用户已经超出字数(抖音)用高亮文案告知用户,已经超出范围,需要删除部分内容(脉脉)当用户点击行动点后,方才提示用户字数超标(朋友圈)三种方式的强调程度:高亮文字 < toast < 对话框分段提示微博采用了分段的形式进行提示:正常范围,字数弱提示超出 140 字,字数高亮字数来到第二档位,提示转为头条文章超出字数上限,点击发布后,会有对话框提示总结虽是非常细小的交互点,同样需要仔细思考,把场景分析清楚。让设计更加有理有据。感谢阅读。欢迎关注作者微信公众号:Change Design本篇来源:优设网原文地址:https://www.uisdc.com/text-box-input-restriction
用户 提示 操作 用户在使用 APP 过程中,难免会产生各种操作失误。除了用户自身原因外,APP 上的设计提醒也是重要因素。对于可能让用户产生误解、操作失误甚至产生损害的行为、事件没有及时提醒。导致影响使用体验,破坏产品在用户中的心智印象。因此,本次带大家看下有哪些有趣的「预防用户犯错」小案例,给你的工作需求、个人作品提供灵感来源~Part 1:硬件设备上1. 屏幕跌落的防护提示高端的华为手机都拥有「掉落检测」功能,当手机掉落后会及时提醒用户,并提醒进行屏幕保护。减少对手机造成损坏与花钱维修的发生,提升手机使用寿命与品牌好感度,突显表达对用户的关怀之情Mark 一下:对用户潜在的「损失/错误/后果」等需要前置+合理的提示2. 手机无法充电提示在 iOS 12 手机(或者其他高版本)中,插入充电器但无法充电时,系统会检测并提示相关原因。比如接口有液体时,会提醒用户断开连接并烘干液体让用户知道是因为什么事故才无法充电的,并提供解决方案让用户有更多的知情权和可控感。3. 检测人脸与屏幕距离腾讯视频的「儿童模式」有智能护眼功能,当屏幕检测到与孩子的眼睛距离小于 40cm 时,屏幕会自动变模糊并出现「靠太近我就会变模糊请远点看」的提示。只有当孩子远离屏幕至护眼安全距离以外,视频的观看效果才会恢复正常。避免孩子离屏幕太近从而损害视力,助力家长关爱孩子的健康成长,Mark 一下:挖掘「用户行为」上对用户的关怀点,可助力产品口碑与印象的提升Part 2:文案表意上1. 不用心算多少钱在微信发起转账,输入数字时会检测对应的数额(千、万、十万、百万等),用户一眼就能知道输入了多少钱。用户无需「边输入,边计算这是多少钱」的脑力投入(特别是对于年纪大的用户),增加信息输入效率与速度Mark 一下:尽量减少用户需要记忆的事情和行动,提供可选项降低用户的记忆负荷2. 杜绝标题党热搜微博的热搜榜单内容,如果该内容不是现实世界中的真实事件,都会在标题后标注「来源」。让用户知道是真实事件还是标题党,避免用户看完之后总有一种被标题党所“骗”的感觉。避免无良作者夸大其词、制造让人误会、混淆的标题骗取用户的点击量,方便用户判断出对内容是否感兴趣,从而减少用户被“骗”引起反感而导致流失。3. 凌晨时候的关心提示当在晚上 00:00 时在「滴答清单」添加任务时:如果输入「明天」的字眼系统会提示「当前时间+别把今天当做明天」,很贴心。避免用户创建错误时间的清单、错过任务提醒,减少不必要的操作Mark 一下:容易忽略的「临界点」事物需要提示用户,避免犯错Part 3:操作行为上1. 附件检测提示如果在 QQ 邮箱正文中写了「附件」两个字,那么点击发送时 系统就会检测用户「是否添加了附件」。如果没有则弹出提示:邮件内容提到了附件,你可能忘记添加附件避免用户忘记添加附件、发送不完整的邮件,减少重复操作的发生。Mark 一下:根据「用户预期」检测对应条件是否发生2. 重复转账提示当我们在短时间内,重复向微信好友转同一金额的钱时,系统就会弹出“你有一笔金额相同的转账对方未收款,你可以提醒对方收款或继续转账”的提醒。对用户的使用场景进行了预判,避免了用户因重复转账而引起的操作失误。3. 删除二次确认提示微信的一些警告性二次提示(如删除),并非像传统做法直接弹窗提示,而是在原有的内容基础上表达对用户的二次确认。避免用户手误造成操作失误,减少不必要的损失发生Mark 一下:重要信息/操作需要进行有效容错、二次确认你还见过哪些有意思的案例、彩蛋呢?欢迎评论区留言和我们一起分享、讨论~专业干货!防止用户无意识犯错的6个实用方法李田莉:用户经常会从手头上的事情分心,提供建议,利用约束条件以及设计更灵活的方案能够防止无意识的差错产生。阅读文章 > 欢迎关注作者的微信公众号:「和出此严」本篇来源:优设网原文地址:https://www.uisdc.com/mistake-proofing-design