一、项目背景设计界总是一波未平一波又起，从区块链到元宇宙，这轮风开始吹到 AIGC，什么是 AIGC？AIGC 全称（AI Generated Content）是一种新型的内容创作方式。越来越多数字内容工作过程中，创作者需要不断地学习探索和创新，以满足不断变化的市场需求。

一、项目背景 设计界总是一波未平一波又起，从区块链到元宇宙，这轮风开始吹到 AIGC，什么是 AIGC？ AIGC 全称（AI Generated Content）是一种新型的内容创作方式。越来越多数字内容工作过程中，创作者需要不断地学习探索和创新，以满足不断变化的市场需求。（本篇文章只聚焦设计内容生成方向，不展开 ChatGPT 辅助研究能力）

二、AI 在有赞增长实验室实际设计业务中的应用探索 M2L 增长实验室（Marketing To Leads）包含了公域营销（增长工程、广告投放、渠道拓展）、内容营销（内容策划、内容运营、渠道分发）、社群运营（活动策划、私域营销、人群运营）、商机培育（需求探索、商机培育、线索转出）四个核心领域的工程，利用内容、数据、算法，驱动有赞通过搜索引擎、社交媒体等渠道展开精准营销，获得到有效的商家线索，探索用户需求，培育商机并输出给到各销售团队完成商家付费，带来有赞商家数的增长。

随着技术不断发展为设计领域带来了许多变化和机遇，3 月中旬我们团队开始了有赞经营场景 AI 图的打造，从可行性与推广性的角度出发，尝试 AIGC 在产品、品牌、营销、体验等多个领域应用与探索。

市面上存在大量的 AI 绘画工具，每个工具擅长的画风也各有所长；例如基于 Discord 架构下的 Midjourney，画面注重细节的构建和表达，Open AI 的 stable-Diffusion，画风更偏写实，Google 的 Disco Diffusion 画风比较均衡，同时我们也发现每一类不同的模型也会有不同的风格效果，我们主要是使用当下人气最高的 Midjourney 展开落地。

各类工具详细对比：

AI绘画哪家强？Midjourney、文心一格等 6 大工具出图效果大比拼 大家好，这里是和你们一起探索 AI 绘画的花生~ 3 月份以来 AI 绘画领域又有了不小的变化，Midjourney 更新了 V5 版本、Stable Diffusion 推出了 Clipdrop Reimagine；微软 Bing 也推出了 Image Create （图像生成）功能

阅读文章 >

三、AI 绘图的原理简要分析 说到 AI 绘图，AI 绘图的模型是基于 GAN 生成对抗网络(GenerativeAdversarialNets,GAN)，是一种基于对抗学习的深度生成模型。信息可以是文字、图片、声音等等，编码器会把所有类型的信息都处理成低维度的 Latent，可以理解为开发人员从互联网数以万计的图片中抓取素材，每一张图片素材都会有对应的文字描述，AI 通过识每一张像素点的文案，最终输出专属于你想要的图片。

四、利用 Midjourney 垫图能力辅助设计官网头图 AI 绘图在电商中有多种应用：

图片修饰和美化：通过使用 AI 绘图工具，可以对电商平台上的商品图片进行优化和美化，提升商品的视觉效果，吸引更多的消费者。 3D 渲染和展示：可以利用 3D 技术将商品进行全方位展示，为消费者提供更加真实、直观的商品体验，增加购买决策的可能性。 自动化设计：自动生成商品的设计方案，帮助电商平台快速生成各种风格的设计作品，提高工作效率和创意水平。 图像识别和智能推荐：通过对消费者的行为和偏好进行数据分析，AI 绘图工具可以实现图像识别和智能推荐，向消费者推荐更符合其需求和兴趣的商品，提高销售转化率。 我们计划进行把官网里面的图片，以图生图的形式，让 AI 帮助我们设计符合有赞风格调性的官网首图。

在有赞官网实践案例：首先在创作内容前把你的需求简单描述，在 Discord 中将参考图发给它，并结合意向的风格和 ChatGPT 中生成的关键词，就可以输出初步满足我们预期的图片，加上前提特征分析的描述，例如（主题+环境背景+构图版头+灯光+颜色+风格参考+质量&后缀）

品牌传播与官网首图需要符合品牌特色和调性的图片，以往我们从海量的素材网站找图，往往很难找到和品牌完全匹配的风格，并且 M2L 在营销传播中经常会使用大量图片在 SEM、广点通、小红书进行广告投放。现在我们通过 MJ 生成符合有赞风格调性的图像，可以节省很多拍摄时间和采购成本。

按照以前官网真实照片通过垫底+描述的方式生出了新 AI 版本的三张图片，并落地在有赞官网，分别是："做私域找有赞”、“做新零售找有赞”、“做生意找有赞”

有赞 600 万商家，商家每年需要采购和拍摄大量商用版权图⽚用于营销素材（均价 1500 元/张）。现在使用 MJ ⼯具可无限生成的多样性素材。⼤幅降低图片采购成本，提高生产效率，下面是我们运用 AIGC 生成的图片，收集目前有赞商家高点击的模特，测试生成店铺主图，未来 AI 有着非常多的场景落地。

4 月 10 日有赞门罗春季发布会中，有赞发布了首个 AI 产品加我智能，目前已上线图文推广（为商品和页面生成更高转化率更被喜欢的推广图文）、活动策划（通过对话明确活动目标和方案并完成复杂的系统配置）两个场景，而在未来，加我智能还将会具备店铺设计、报告分析、销售加强、售后客服、商品制作等能力。

五、AI 对于有赞增长实验室的帮助 1. 辅助创意，视觉品质提升

在我们历经一个月的探索中，通过使用 AI 辅助进行相关设计工作。使用 AIGC 辅助可以提升整个设计的品质，帮团队内 设计师 产出更高质量的设计，同时我们也储备了一定 prompt 作为设计资产，可作为图片素材库，为后续快速上线不同经营类目的落地页做准备。

2. 提升效率，快速出图

业务需要做不同行业不同场景的设计图时，通过 AIGC 就可以让图片生出咖啡店、水果店、蛋糕店，能快速替换服饰箱包、蛋糕烘焙、茶饮酒水、鲜花果蔬风格的有赞生意经营场景图，下面是我们生成的一些案例图：

六、展望未来，全新的设计模式已经出现 未来，随着 AI 绘画技术的不断发展和应用，我们将看到更多的艺术作品、设计方案和数字媒体内容将会通过 AI 绘画技术的支持而得以创作。同时，AI 绘画也将会促进艺术设计领域的创新和发展，推动人工智能技术与艺术设计的融合，创造出更多前所未有的艺术形式和体验。我们有理由相信，AI 绘画将会为未来的设计和艺术带来更多的新机遇和无限可能，横放手机，一起来看看 AI 版有赞经营场景图吧！迎接 AI 的到来！

欢迎关注作者微信公众号： 有赞说

表单是设计中很常见且重要的元素。作为收集信息的一环，表单的用户体验非常重要，需要根据触发条件、使用的终端设备、场景等结合，来设计用户不同的输入、选择、编辑行为，以保证顺利且高效地完成表单填写任务。在一款软件设计中，表单控件的统一与运用会提高设计与开发的效率，今天我们就如何设计一款表单编辑器来和大家一起探讨。

表单是设计中很常见且重要的元素。作为收集信息的一环，表单的用户体验非常重要，需要根据触发条件、使用的终端设备、场景等结合，来设计用户不同的输入、选择、编辑行为，以保证顺利且高效地完成表单填写任务。

在一款软件设计中，表单控件的统一与运用会提高设计与开发的效率，今天我们就如何设计一款表单编辑器来和大家一起探讨。

更多B端干货：

4000字干货！手把手带你掌握web中的表单设计 前言 表单是我们生活中常见的信息添加、录入的方式之一，如何进行表单的设计也是 B 端设计师的必修课。

阅读文章 >

一、什么是表单 表单，主要是收集或展示数据信息，由不同的控件组成的信息采集工具。其运用场景非常广泛，但不限于用表单完成常见的调查问卷、个人信息录入，审批业务申请等任务。

二、基本构成与属性 一张表单结构上会有标签，输入区，操作按钮几部分组成。我们将从这几个方面入手分析，去自定义不同场景的表单属性。

1. 字段标签的对齐方式

左对齐、右对齐、顶部对齐

标签是告诉用户需要输入什么内容，让用户更快速的理解。而表单整体里的标签的长短决定着其对齐方式。各种对齐方式都有优缺点，马泰奥·彭佐 根据表单标签对齐方式研究过，从效率角度看，顶对齐标签>右对齐>左对齐，但是布局上页面更长。

2. 标签最大换行字数

当标签文字字数多导致长度过长时，可设置超过一定数值则换行展示，以达到统一的视觉效果。

3. 标签末尾是否展示冒号

由于早期屏幕阅读器必须依赖各种技巧才能理解标记不明的表单，所以才用冒号做标记。但是现在可以用“label”标签做正确的标记，通过标记（markup）把标签（label）和相应的字段对应起来，则无需再借助冒号。

所以用不用冒号并不影响表单的使用效率，交给用户决定即可，但是需要统一。

4. 值对齐方式

左对齐、右对齐、顶部对齐

由于在 pc 端与 web 端都是从左到右的阅读习惯，这里不讨论这两种情况。更多地用于移动端，可以根据场景来选择输入值的展示方式。

5. 必填标识位置

文字右侧，文字左侧

一般用红星*来标记表单中必填标签。在文字左侧还是右侧，可以结合标签值的对齐方式来决定。

还有一些其他的全局属性，比如是否支持表单打印，是否支持保存草稿，是否支持再次申请等等。

三、信息输入控件属性设计 表单的输入区，是整个表单的核心，是与用户发生交互的区域，根据标签内容来输入不同的值与交互方式，一共列举了以下的控件：

对以上控件提供合适的输入格式、合理的输入提示、适当的自动输入、来提升用户完成表单的效率。

可以对其属性进行设置，来达到设计表单的不同任务。

1. 标签值

标签值显示的内容，明确该项应输入或者选择什么内容，也可以没有标签，例如登录页，可以用图标、默认提示来代替文字。

2. 提示文字

用来提示用户标签值填写的说明、注意事项等，帮助用户更好理解该标签值的意思。当光标插入或有内容输入时就消失。并不是所有标签值都需要提示文字，为了视觉的统一，使用“请输入”、“请选择”也可以。

3. 默认值

根据标签内容自动给用户填写或者选择一个预设的值，来减少用户的输入而提高效率。

4. 是否只读

控制该标签是支持输入还是只展示，展示上通常用置灰效果来区别。

5. 文本类型

根据不同标签，文本类型可以限制是纯字母，纯数字等类型。也可以在输入的时候根据文本类型来控制键盘是否需要切换为数字键盘等方式。虽然用户可以系统输入法与第三方输入法之间自由切换，但站在用户体验角度，调出内置的纯数字键盘可减少无关元素（字母/符号）的干扰。 当是纯数字时，还要进一步设置以下几个内容：

6. 字符大小限制

限制输入字符的最小与最大值。对于有规定字数的特殊场景，需要提醒用户可输入字数，做到实时提醒。避免用户在输入之后才发现不合适规则，还要重新组织语言。例如多行输入框、注册账号、设置密码等场景。

7. 是否必填

为了不增加用户填写表单的负担，尽量告知用户必填字段，做好标记。

8. 数据验证

程序上分为前端验证和后端验证，如是前端验证，无须提交验证，在光标离开输入区域时即可验证是否负责规则，例如手机号位数是否正确，内容格式是否合规，密码错误等。且将错误提示及时反馈显示在对应的标签项附近，方便用户及时修改。

而后端验证，需要提交到服务器时，校验判断数据是否合规，通常是用 toast 或者对话弹窗页面来提示用户错误内容。

四、信息输入控件展示 1. 文本输入框

输入框类型根据输入值的格式，有这几种类型：单行输入框、多行输入框、特定值输入框（包括但不限于手机号、身份证、邮箱）。

其中，多行输入框可以增加是否显示字数统计属性，实时提醒用户当前的输入进度。

手机号可增加是否展示空格分隔属性，即用 344 的分割法来展示手机位数，方便用户一眼查看输入位数是否正确。

2. 金额输入框

金额作为一个比较特殊的字段，往往在表单的展示中，需要有强调作用，放大，且有安全提示等效果。

由此可见，金额输入框应增加特有的属性：

币种展示￥符号或者“元”文字 当币种为人民币时，可设置是否显示大写 是否显示计数单位，即用户输入金额时，实时显示“个十百千万”等计数单位 可设置金额范围区间，最小值与最大值 3. 选择框组

当输入的表单内容由系统设定并超过一条时，可以用选项的方式供用户选择，根据是否支持多选简单分成单选与多选。

单选选择：使用传统的单选框时，可以选择选中的样式是圆点还是打钩，横向平铺或者纵向平铺。且要考虑有选中、未选中、不可选状态。

多选框：有一个或多选项供用户选择，可在同一选项上重复点击进行选中/未选中操作。可以设置是否支持全选设置。

无论单选还是多选，都可以根据选项数量的多少及单项的长短，来选择不同的展示方式。 展示方式通常有以下几种：

弹窗选择：当选项较多时且不便中断当前操作，可使用半模态弹窗给用户选择。 标签式选择：当选项较少且单条字数在 3-5 个字时，可以做成标签式给用户选择。 跳转页面：当选项很多且内容字数不可控时，使用跳转新页面更好，不会增加当前页面的负担。 下拉选择：多在 PC 端应用，有效帮助用户缩小选择范围

除此之外，当选项过多时，还要考虑是否增加搜索功能；

4. 日期选择

表单中经常需要用到日期选择，可根据不同场景设计日期控件。日期细分可分成年、月、周、日、时段（上午/下午）、时、分。

根据这些单位可组合成各种展示格式。

年/月/日 年/月/日 上午/下午 年/月/日 时分 年/月/日 星期 年/月/日 星期 时分

其他基本属性：

可提供预设值：默认当前时间、选择固定日期，以减少用户操作。 日期选择范围：不限时间、过去时间、当前时间之后。（如果不控制日期，可选择的范围太多，增加用户负担） 如果是选择 2 个日期区间，则可以增加计算区间时长属性。例如常用的请假申请。

5. 附件

常见的附件有图片，文件，电子发票等类型，由于附件的类型众多，文件大小不一，在上传文件时增加用户效率显得尤为重要。且尽量对文件上传的状态给出即时反馈，以告知用户当前操作的进度。

其特殊属性有：

最大上传数量：一次性支持上传几个附件 最大上传内存：单个附件最大内存 支持上传文件类型：常见的有 img、word、PDF、txt、excel、PPT、video、music 等。 不同的状态有不同的操作：

正在上传时：暂停、取消上传 上传失败：重新上传，取消上传 上传完成：删除，继续上传

图片类型的上传，可以在展示形式上稍加变化，更加贴近图片样式，让用户一眼就知道需要上传图片类型。

6. 明细组

当表单内容需要增加多个相同项目时，可以用一个明细组将其组装起来，可保证每一个明细组里的表单控制都是一致的。

7. 地点

表单中经常会遇到要填写地址信息的情况，而地址信息涉及省市区与详细地址都比较长，在选择过程中会有很多个步骤需要交互，在适当的场景中增加一些小技巧会提高用户填写效率。比如自动定位、用自动识别面板等，直接将用户复制的地址信息填入表单中。地址表现格式有：

省市 省市区 省市区-街道 省市区-街道-详细地址

8. 分组

若表单填写的内容过多，需要用户花费较多时间完成，会造成用户产生厌恶情绪甚至放弃填写。则可以将相近内容，相同逻辑的表单项进行分组，支持折叠展开分组，尽量不要将内容一次性展示给用户。会让用户觉得更容易填写，对表单有清晰的完成预期。

9. 其他模块

在表单中还有其他小但有用的控件，来构建更加完善的表单。

开关：作为选择组，只存在 2 个选项且选项具有判断性质，触发之后能够立即生效，即可使用波动开关，有开启、关闭两种样式。

步进器：一般用于输入数量较小的场景，例如，购物车修改数量。可以设置是否允许直接编辑，每次递增递减的倍数数字，步进器值的范围等。

说明文字：用户可能产生的疑问，而提示文字不足以说明清楚时，可作为一个补充信息再次展示。对于一些专业词汇或较难理解的概念，要给予明确的解释。例如：温馨提示，注意事项。

分割线：跟分组的作用差不多，但是视觉分量上比分组小，且不需要增加标题时可使用分割线来对表单项目进行分类。

后缀图标/文字：在输入区的右边可以用图标展示，来代替一些操作。比如，选择常用账号，选择通讯录，下拉展开与收起等。

四、表单的交互反馈 表单控件不仅仅要考虑展示方式，也要考虑交互前的初始状态、交互中的操作、交互后状态等。

初始状态：进入表单当用户未触发任何操作时，表单的默认页面。部分输入区中有提示文字，或者有预设值。 聚焦状态：光标插入输入区，提示文字消失，当前输入框应展示不同交互； 只读状态：无法输入，一般置灰展示 完成状态：输入完成光标离开，数据填写完成，若有验证规则则立即反馈，数据无误则回到正常输入后的状态。

五、总结 通过以上一系列的设置，则可以构建一款自定义的表单，去适配不同的场景下不同的交互规则，而不用死板的为了统一而统一。每一种设置都没有绝对的好坏，只有适不适合当下场景，能否解决问题，改善用户体验，真正的提高用户填写表单的效率，最终完成表单的填写。

欢迎关注团队 微信 公众号：兆日 UCD

一、AI 绘画在工作中的流程在 UI 设计工作中，我们都会用到相同的工作流程，首先接到产品给到的需求，然后我们会进行需求的分析，根据分析去找合适的参考，之后进行我们的初稿设计。同样，在使用 AI 工具时，我们的工作流程并没有发生改变，改变的只是我们出图的效率以及效果，比如我们在经过分析和找到参考后，我们进行设计时...

一、AI 绘画在工作中的流程 在 UI 设计工作中，我们都会用到相同的工作流程，首先接到产品给到的需求，然后我们会进行需求的分析，根据分析去找合适的参考，之后进行我们的初稿设计。

同样，在使用 AI 工具时，我们的工作流程并没有发生改变，改变的只是我们出图的效率以及效果，比如我们在经过分析和找到参考后，我们进行设计时，会花费大量的时间进行设计。而现在，AI 绘画完全可以帮助我们进行设计，我们只需要进行关键词的调试，即可短时间做出不错的设计，我预计可以提升大概 60%-70%的设计时间（这里还只是保守估计）。

往期教程：

两万字干货！可能是全网最详细的Midjourney基础教程 进阶篇： 一、前言篇 1. AI 绘图是什么？

阅读文章 >

AI绘画进阶！爷爷都能看懂的 Midjourney 教学（附超多实战案例） 近期，职场设计师们应该能看到不少与 AIGC 相关的新闻。

阅读文章 >

而且，我们进行初稿设计后，会经历令设计师感到非常痛苦的设计评审，公司的大佬们都会指点江山般的给你提出设计意见（我就是！！），然后你可能经历 1 稿、2 稿、3 稿.....

我们可以利用 AI 绘画来辅助设计工作。例如，在评审之前，我们可以使用 AI 生成五种设计方案（可以更多，嘿嘿），供评审大佬们选择.......（狗头保命）

废话不多说，接下来为大家展示用 AI 创作一些可落地的工作参考：

二、引导页设计 医疗 app——扁平插画风格

这里我们以一个“医疗 app”为例子，我们接到的需求是做一组医疗 app 的引导页设计，需要使用扁平插画的设计风格，然后我们去找到合适的参考，根据参考出的特性进行关键词的描述，提炼关键词并进行 prompt 组合。

1. 需求分析

医疗 app 引导页设计，风格：扁平插画风格

2. 参考借鉴

去花瓣、站酷、behance 上找到合适的参考，我们根据参考的图片来描述关键词，比如画面人物之间的动作描述。

3. 关键词描述

我们按照 midjourney 的词组顺序来描述，这里我按照第一张参考图的动作来进行描述

4. Midjourney 生成的图片

可以看到，midjourney 生成的图片颜色并不能保持统一，不过这个问题不大，我们只需要选取合适的图片，然后后期用 PS 等工具稍微修饰一下即可了。

5. 应用项目中的效果

三、勋章设计 成就勋章设计

这里我得到的需求是做一个娱乐 app 的勋章设计，元素需要丰富、质感华丽、情感传达热烈、体型饱满、勋章精致。得到需求后我们去拆解相关信息，然后根据整理的信息去找到类似的参考，这里我根据找到的风格直接用 Midjourney 的“喂图”功能，然后输入需求相关的关键词并组合，如下：

1. 需求分析

娱乐 app 的勋章设计，元素需要丰富、质感华丽、情感传达热烈、体型饱满、勋章精致。

2. 参考借鉴

参考来自花瓣，这种风格就是比较适合我们需求的设计，所以我们这里借鉴一下，把图片喂给 Midjourney。

3. 关键词描述

喂图之后还需要输入我们根据需求整理的关键词，把这些关键词和图片链接一起发送给 midjourney。

完整关键词：A shining badge with wings, Star, Badge logo, UI Design, Front view, Stereo, Bright. Black background, Digital illustration, Popular on Dribbble, noword, hyper detail, 4k --v 4

4. Midjourney 生成的图片

这里生成的细节并不好，主要是中间标志区域，会出现变形的问题，不过问题不大，我们是设计师，后期调整一下，调整吃力的我们就多跑几组图片即可。

5. 应用项目中的效果

四、闪屏页设计 淘宝闪屏页设计

这里我得到的需求是做一个淘宝 app 的闪屏页：设计一个具有亲和力和活力的大男孩形象，站在露营场景中弹吉他，搭配舒适、美观、吸引人的色彩和文案设计，以展示休闲娱乐和自然风光的美好。

1. 需求分析

我们分析需求的确定相应的元素，如露营场地，大男孩，弹吉他。

2. 参考借鉴

去素材网上参考一下，然后整理出素材图片，根据参考的图片得出相应的关键词。

3. 关键词描述

我们按照 midjourney 的词组顺序来描述，这里我按照第一张参考图的动作来进行描述

完整关键词：laughing child, symmetrical portrait, clear features, wearing a hat, rural summer, picnic, playing guitar, camping, tent, grass, flying a kite, hills, green, nature, poster, masterpiece, best quality, Pixar style 3d character, octane rendering, Hayao Miyazaki --ar 9:16 --niji

4. Midjourney 生成的图片

有些图片比较夸张了，不过问题不大，我们经过多跑图，进行筛选就好啦，这是个体力活....

5. 应用项目中的效果

五、直播礼物元素 3D 小元素设计

这里我得到的需求是做一个直播礼物的小元素，元素需要丰富、质感华丽、情感传达热烈、体型饱满。得到需求后我们去拆解相关信息，然后根据整理的信息去找到类似的参考，这里我根据找到的风格直接用 Midjourney 的“喂图”功能，然后输入需求相关的关键词并组合，如下：

1. 需求分析

娱乐 app 的勋章设计，元素需要丰富、质感华丽、情感传达热烈、体型饱满、勋章精致。

2. 参考借鉴

参考来自花瓣，这种风格就是比较适合我们需求的设计，所以我们这里借鉴一下，把图片喂给 Midjourney。

3. 关键词描述

喂图之后还需要输入我们根据需求整理的关键词，把这些关键词和图片链接一起发送给 midjourney。

4. Midjourney 生成的图片

同样我们需要多跑几组关键词，才会有相对满意的图片，这里的风格主要受到喂图片的影响，多试试几次，然后找到合适的，后期处理一下吧。

5. 应用项目中的效果

六、B 端网页设计 b 端图标设计

这里我得到的需求是做一个 B 端网页设计：设计一个符合 UI 规范和标准、能够清晰传达出现代科技感并与产品整体视觉风格相符的网页图标，提升用户品牌认知和体验。

1. 需求分析

这类需求在 b 端中很常见，科技风的图标，符合品牌调性。

2. 参考借鉴

参考来自花瓣，这种风格就是比较适合我们需求的设计，所以我们这里借鉴一下，这里需要喂图控制下色调和视角，然后把图片喂给 Midjourney。

3. 关键词描述

喂图之后输入细节关键词，让关键词控制主体样式，这类图标的渲染器用 oc 渲染器，参考国外网站的风格就没啥问题了。

完整关键词：B2B 3D scenes, an operation center icon, white and blue, frosted glass, transparent technology sense, industrial design, isometric view, light gray background with simple linear detail, studio lighting, 3d, c4d, blender, OCrenderer, pinterest, dribbble, high detail, 8k --v 4

4. Midjourney 生成的图片

这类图标生成的图大部分没啥问题，细节稍微修修改就能用了，重要是细节是不是我们需要的，改细节的方式还是通过关键词控制即可。

5. 应用项目中的效果

写在最后 以上就是本期为大家分享的商业案例，我们可以将 AI 视作一个工具，为自己的工作带来增效，而无需感到恐慌和被替代的担忧。祝大家生活愉快！

本次教学分享到此结束，如果您有任何问题，可以与我私信联系：

表单是设计中很常见且重要的元素。作为收集信息的一环，表单的用户体验非常重要，需要根据触发条件、使用的终端设备、场景等结合，来设计用户不同的输入、选择、编辑行为，以保证顺利且高效地完成表单填写任务。在一款软件设计中，表单控件的统一与运用会提高设计与开发的效率，今天我们就如何设计一款表单编辑器来和大家一起探讨。

表单是设计中很常见且重要的元素。作为收集信息的一环，表单的用户体验非常重要，需要根据触发条件、使用的终端设备、场景等结合，来设计用户不同的输入、选择、编辑行为，以保证顺利且高效地完成表单填写任务。

在一款软件设计中，表单控件的统一与运用会提高设计与开发的效率，今天我们就如何设计一款表单编辑器来和大家一起探讨。

更多B端干货：

4000字干货！手把手带你掌握web中的表单设计 前言 表单是我们生活中常见的信息添加、录入的方式之一，如何进行表单的设计也是 B 端设计师的必修课。

阅读文章 >

一、什么是表单 表单，主要是收集或展示数据信息，由不同的控件组成的信息采集工具。其运用场景非常广泛，但不限于用表单完成常见的调查问卷、个人信息录入，审批业务申请等任务。

二、基本构成与属性 一张表单结构上会有标签，输入区，操作按钮几部分组成。我们将从这几个方面入手分析，去自定义不同场景的表单属性。

1. 字段标签的对齐方式

左对齐、右对齐、顶部对齐

标签是告诉用户需要输入什么内容，让用户更快速的理解。而表单整体里的标签的长短决定着其对齐方式。各种对齐方式都有优缺点，马泰奥·彭佐 根据表单标签对齐方式研究过，从效率角度看，顶对齐标签>右对齐>左对齐，但是布局上页面更长。

2. 标签最大换行字数

当标签文字字数多导致长度过长时，可设置超过一定数值则换行展示，以达到统一的视觉效果。

3. 标签末尾是否展示冒号

由于早期屏幕阅读器必须依赖各种技巧才能理解标记不明的表单，所以才用冒号做标记。但是现在可以用“label”标签做正确的标记，通过标记（markup）把标签（label）和相应的字段对应起来，则无需再借助冒号。

所以用不用冒号并不影响表单的使用效率，交给用户决定即可，但是需要统一。

4. 值对齐方式

左对齐、右对齐、顶部对齐

由于在 pc 端与 web 端都是从左到右的阅读习惯，这里不讨论这两种情况。更多地用于移动端，可以根据场景来选择输入值的展示方式。

5. 必填标识位置

文字右侧，文字左侧

一般用红星*来标记表单中必填标签。在文字左侧还是右侧，可以结合标签值的对齐方式来决定。

还有一些其他的全局属性，比如是否支持表单打印，是否支持保存草稿，是否支持再次申请等等。

三、信息输入控件属性设计 表单的输入区，是整个表单的核心，是与用户发生交互的区域，根据标签内容来输入不同的值与交互方式，一共列举了以下的控件：

对以上控件提供合适的输入格式、合理的输入提示、适当的自动输入、来提升用户完成表单的效率。

可以对其属性进行设置，来达到设计表单的不同任务。

1. 标签值

标签值显示的内容，明确该项应输入或者选择什么内容，也可以没有标签，例如登录页，可以用图标、默认提示来代替文字。

2. 提示文字

用来提示用户标签值填写的说明、注意事项等，帮助用户更好理解该标签值的意思。当光标插入或有内容输入时就消失。并不是所有标签值都需要提示文字，为了视觉的统一，使用“请输入”、“请选择”也可以。

3. 默认值

根据标签内容自动给用户填写或者选择一个预设的值，来减少用户的输入而提高效率。

4. 是否只读

控制该标签是支持输入还是只展示，展示上通常用置灰效果来区别。

5. 文本类型

根据不同标签，文本类型可以限制是纯字母，纯数字等类型。也可以在输入的时候根据文本类型来控制键盘是否需要切换为数字键盘等方式。虽然用户可以系统输入法与第三方输入法之间自由切换，但站在用户体验角度，调出内置的纯数字键盘可减少无关元素（字母/符号）的干扰。 当是纯数字时，还要进一步设置以下几个内容：

6. 字符大小限制

限制输入字符的最小与最大值。对于有规定字数的特殊场景，需要提醒用户可输入字数，做到实时提醒。避免用户在输入之后才发现不合适规则，还要重新组织语言。例如多行输入框、注册账号、设置密码等场景。

7. 是否必填

为了不增加用户填写表单的负担，尽量告知用户必填字段，做好标记。

8. 数据验证

程序上分为前端验证和后端验证，如是前端验证，无须提交验证，在光标离开输入区域时即可验证是否负责规则，例如手机号位数是否正确，内容格式是否合规，密码错误等。且将错误提示及时反馈显示在对应的标签项附近，方便用户及时修改。

而后端验证，需要提交到服务器时，校验判断数据是否合规，通常是用 toast 或者对话弹窗页面来提示用户错误内容。

四、信息输入控件展示 1. 文本输入框

输入框类型根据输入值的格式，有这几种类型：单行输入框、多行输入框、特定值输入框（包括但不限于手机号、身份证、邮箱）。

其中，多行输入框可以增加是否显示字数统计属性，实时提醒用户当前的输入进度。

手机号可增加是否展示空格分隔属性，即用 344 的分割法来展示手机位数，方便用户一眼查看输入位数是否正确。

2. 金额输入框

金额作为一个比较特殊的字段，往往在表单的展示中，需要有强调作用，放大，且有安全提示等效果。

由此可见，金额输入框应增加特有的属性：

币种展示￥符号或者“元”文字 当币种为人民币时，可设置是否显示大写 是否显示计数单位，即用户输入金额时，实时显示“个十百千万”等计数单位 可设置金额范围区间，最小值与最大值 3. 选择框组

当输入的表单内容由系统设定并超过一条时，可以用选项的方式供用户选择，根据是否支持多选简单分成单选与多选。

单选选择：使用传统的单选框时，可以选择选中的样式是圆点还是打钩，横向平铺或者纵向平铺。且要考虑有选中、未选中、不可选状态。

多选框：有一个或多选项供用户选择，可在同一选项上重复点击进行选中/未选中操作。可以设置是否支持全选设置。

无论单选还是多选，都可以根据选项数量的多少及单项的长短，来选择不同的展示方式。 展示方式通常有以下几种：

弹窗选择：当选项较多时且不便中断当前操作，可使用半模态弹窗给用户选择。 标签式选择：当选项较少且单条字数在 3-5 个字时，可以做成标签式给用户选择。 跳转页面：当选项很多且内容字数不可控时，使用跳转新页面更好，不会增加当前页面的负担。 下拉选择：多在 PC 端应用，有效帮助用户缩小选择范围

除此之外，当选项过多时，还要考虑是否增加搜索功能；

4. 日期选择

表单中经常需要用到日期选择，可根据不同场景设计日期控件。日期细分可分成年、月、周、日、时段（上午/下午）、时、分。

根据这些单位可组合成各种展示格式。

年/月/日 年/月/日 上午/下午 年/月/日 时分 年/月/日 星期 年/月/日 星期 时分

其他基本属性：

可提供预设值：默认当前时间、选择固定日期，以减少用户操作。 日期选择范围：不限时间、过去时间、当前时间之后。（如果不控制日期，可选择的范围太多，增加用户负担） 如果是选择 2 个日期区间，则可以增加计算区间时长属性。例如常用的请假申请。

5. 附件

常见的附件有图片，文件，电子发票等类型，由于附件的类型众多，文件大小不一，在上传文件时增加用户效率显得尤为重要。且尽量对文件上传的状态给出即时反馈，以告知用户当前操作的进度。

其特殊属性有：

最大上传数量：一次性支持上传几个附件 最大上传内存：单个附件最大内存 支持上传文件类型：常见的有 img、word、PDF、txt、excel、PPT、video、music 等。 不同的状态有不同的操作：

正在上传时：暂停、取消上传 上传失败：重新上传，取消上传 上传完成：删除，继续上传

图片类型的上传，可以在展示形式上稍加变化，更加贴近图片样式，让用户一眼就知道需要上传图片类型。

6. 明细组

当表单内容需要增加多个相同项目时，可以用一个明细组将其组装起来，可保证每一个明细组里的表单控制都是一致的。

7. 地点

表单中经常会遇到要填写地址信息的情况，而地址信息涉及省市区与详细地址都比较长，在选择过程中会有很多个步骤需要交互，在适当的场景中增加一些小技巧会提高用户填写效率。比如自动定位、用自动识别面板等，直接将用户复制的地址信息填入表单中。地址表现格式有：

省市 省市区 省市区-街道 省市区-街道-详细地址

8. 分组

若表单填写的内容过多，需要用户花费较多时间完成，会造成用户产生厌恶情绪甚至放弃填写。则可以将相近内容，相同逻辑的表单项进行分组，支持折叠展开分组，尽量不要将内容一次性展示给用户。会让用户觉得更容易填写，对表单有清晰的完成预期。

9. 其他模块

在表单中还有其他小但有用的控件，来构建更加完善的表单。

开关：作为选择组，只存在 2 个选项且选项具有判断性质，触发之后能够立即生效，即可使用波动开关，有开启、关闭两种样式。

步进器：一般用于输入数量较小的场景，例如，购物车修改数量。可以设置是否允许直接编辑，每次递增递减的倍数数字，步进器值的范围等。

说明文字：用户可能产生的疑问，而提示文字不足以说明清楚时，可作为一个补充信息再次展示。对于一些专业词汇或较难理解的概念，要给予明确的解释。例如：温馨提示，注意事项。

分割线：跟分组的作用差不多，但是视觉分量上比分组小，且不需要增加标题时可使用分割线来对表单项目进行分类。

后缀图标/文字：在输入区的右边可以用图标展示，来代替一些操作。比如，选择常用账号，选择通讯录，下拉展开与收起等。

四、表单的交互反馈 表单控件不仅仅要考虑展示方式，也要考虑交互前的初始状态、交互中的操作、交互后状态等。

初始状态：进入表单当用户未触发任何操作时，表单的默认页面。部分输入区中有提示文字，或者有预设值。 聚焦状态：光标插入输入区，提示文字消失，当前输入框应展示不同交互； 只读状态：无法输入，一般置灰展示 完成状态：输入完成光标离开，数据填写完成，若有验证规则则立即反馈，数据无误则回到正常输入后的状态。

五、总结 通过以上一系列的设置，则可以构建一款自定义的表单，去适配不同的场景下不同的交互规则，而不用死板的为了统一而统一。每一种设置都没有绝对的好坏，只有适不适合当下场景，能否解决问题，改善用户体验，真正的提高用户填写表单的效率，最终完成表单的填写。

欢迎关注团队 微信 公众号：兆日 UCD

一、AI 绘画在工作中的流程在 UI 设计工作中，我们都会用到相同的工作流程，首先接到产品给到的需求，然后我们会进行需求的分析，根据分析去找合适的参考，之后进行我们的初稿设计。同样，在使用 AI 工具时，我们的工作流程并没有发生改变，改变的只是我们出图的效率以及效果，比如我们在经过分析和找到参考后，我们进行设计时...

一、AI 绘画在工作中的流程 在 UI 设计工作中，我们都会用到相同的工作流程，首先接到产品给到的需求，然后我们会进行需求的分析，根据分析去找合适的参考，之后进行我们的初稿设计。

同样，在使用 AI 工具时，我们的工作流程并没有发生改变，改变的只是我们出图的效率以及效果，比如我们在经过分析和找到参考后，我们进行设计时，会花费大量的时间进行设计。而现在，AI 绘画完全可以帮助我们进行设计，我们只需要进行关键词的调试，即可短时间做出不错的设计，我预计可以提升大概 60%-70%的设计时间（这里还只是保守估计）。

往期教程：

两万字干货！可能是全网最详细的Midjourney基础教程 进阶篇： 一、前言篇 1. AI 绘图是什么？

阅读文章 >

AI绘画进阶！爷爷都能看懂的 Midjourney 教学（附超多实战案例） 近期，职场设计师们应该能看到不少与 AIGC 相关的新闻。

阅读文章 >

而且，我们进行初稿设计后，会经历令设计师感到非常痛苦的设计评审，公司的大佬们都会指点江山般的给你提出设计意见（我就是！！），然后你可能经历 1 稿、2 稿、3 稿.....

我们可以利用 AI 绘画来辅助设计工作。例如，在评审之前，我们可以使用 AI 生成五种设计方案（可以更多，嘿嘿），供评审大佬们选择.......（狗头保命）

废话不多说，接下来为大家展示用 AI 创作一些可落地的工作参考：

二、引导页设计 医疗 app——扁平插画风格

这里我们以一个“医疗 app”为例子，我们接到的需求是做一组医疗 app 的引导页设计，需要使用扁平插画的设计风格，然后我们去找到合适的参考，根据参考出的特性进行关键词的描述，提炼关键词并进行 prompt 组合。

1. 需求分析

医疗 app 引导页设计，风格：扁平插画风格

2. 参考借鉴

去花瓣、站酷、behance 上找到合适的参考，我们根据参考的图片来描述关键词，比如画面人物之间的动作描述。

3. 关键词描述

我们按照 midjourney 的词组顺序来描述，这里我按照第一张参考图的动作来进行描述

4. Midjourney 生成的图片

可以看到，midjourney 生成的图片颜色并不能保持统一，不过这个问题不大，我们只需要选取合适的图片，然后后期用 PS 等工具稍微修饰一下即可了。

5. 应用项目中的效果

三、勋章设计 成就勋章设计

这里我得到的需求是做一个娱乐 app 的勋章设计，元素需要丰富、质感华丽、情感传达热烈、体型饱满、勋章精致。得到需求后我们去拆解相关信息，然后根据整理的信息去找到类似的参考，这里我根据找到的风格直接用 Midjourney 的“喂图”功能，然后输入需求相关的关键词并组合，如下：

1. 需求分析

娱乐 app 的勋章设计，元素需要丰富、质感华丽、情感传达热烈、体型饱满、勋章精致。

2. 参考借鉴

参考来自花瓣，这种风格就是比较适合我们需求的设计，所以我们这里借鉴一下，把图片喂给 Midjourney。

3. 关键词描述

喂图之后还需要输入我们根据需求整理的关键词，把这些关键词和图片链接一起发送给 midjourney。

完整关键词：A shining badge with wings, Star, Badge logo, UI Design, Front view, Stereo, Bright. Black background, Digital illustration, Popular on Dribbble, noword, hyper detail, 4k --v 4

4. Midjourney 生成的图片

这里生成的细节并不好，主要是中间标志区域，会出现变形的问题，不过问题不大，我们是设计师，后期调整一下，调整吃力的我们就多跑几组图片即可。

5. 应用项目中的效果

四、闪屏页设计 淘宝闪屏页设计

这里我得到的需求是做一个淘宝 app 的闪屏页：设计一个具有亲和力和活力的大男孩形象，站在露营场景中弹吉他，搭配舒适、美观、吸引人的色彩和文案设计，以展示休闲娱乐和自然风光的美好。

1. 需求分析

我们分析需求的确定相应的元素，如露营场地，大男孩，弹吉他。

2. 参考借鉴

去素材网上参考一下，然后整理出素材图片，根据参考的图片得出相应的关键词。

3. 关键词描述

我们按照 midjourney 的词组顺序来描述，这里我按照第一张参考图的动作来进行描述

完整关键词：laughing child, symmetrical portrait, clear features, wearing a hat, rural summer, picnic, playing guitar, camping, tent, grass, flying a kite, hills, green, nature, poster, masterpiece, best quality, Pixar style 3d character, octane rendering, Hayao Miyazaki --ar 9:16 --niji

4. Midjourney 生成的图片

有些图片比较夸张了，不过问题不大，我们经过多跑图，进行筛选就好啦，这是个体力活....

5. 应用项目中的效果

五、直播礼物元素 3D 小元素设计

这里我得到的需求是做一个直播礼物的小元素，元素需要丰富、质感华丽、情感传达热烈、体型饱满。得到需求后我们去拆解相关信息，然后根据整理的信息去找到类似的参考，这里我根据找到的风格直接用 Midjourney 的“喂图”功能，然后输入需求相关的关键词并组合，如下：

1. 需求分析

娱乐 app 的勋章设计，元素需要丰富、质感华丽、情感传达热烈、体型饱满、勋章精致。

2. 参考借鉴

参考来自花瓣，这种风格就是比较适合我们需求的设计，所以我们这里借鉴一下，把图片喂给 Midjourney。

3. 关键词描述

喂图之后还需要输入我们根据需求整理的关键词，把这些关键词和图片链接一起发送给 midjourney。

4. Midjourney 生成的图片

同样我们需要多跑几组关键词，才会有相对满意的图片，这里的风格主要受到喂图片的影响，多试试几次，然后找到合适的，后期处理一下吧。

5. 应用项目中的效果

六、B 端网页设计 b 端图标设计

这里我得到的需求是做一个 B 端网页设计：设计一个符合 UI 规范和标准、能够清晰传达出现代科技感并与产品整体视觉风格相符的网页图标，提升用户品牌认知和体验。

1. 需求分析

这类需求在 b 端中很常见，科技风的图标，符合品牌调性。

2. 参考借鉴

参考来自花瓣，这种风格就是比较适合我们需求的设计，所以我们这里借鉴一下，这里需要喂图控制下色调和视角，然后把图片喂给 Midjourney。

3. 关键词描述

喂图之后输入细节关键词，让关键词控制主体样式，这类图标的渲染器用 oc 渲染器，参考国外网站的风格就没啥问题了。

完整关键词：B2B 3D scenes, an operation center icon, white and blue, frosted glass, transparent technology sense, industrial design, isometric view, light gray background with simple linear detail, studio lighting, 3d, c4d, blender, OCrenderer, pinterest, dribbble, high detail, 8k --v 4

4. Midjourney 生成的图片

这类图标生成的图大部分没啥问题，细节稍微修修改就能用了，重要是细节是不是我们需要的，改细节的方式还是通过关键词控制即可。

5. 应用项目中的效果

写在最后 以上就是本期为大家分享的商业案例，我们可以将 AI 视作一个工具，为自己的工作带来增效，而无需感到恐慌和被替代的担忧。祝大家生活愉快！

本次教学分享到此结束，如果您有任何问题，可以与我私信联系：

对于产品设计师来说，在同质化的环境中我们需要具备突破创意的思维，这样才能输出差异化的设计方案。而创意离不开优秀作品的灵感启发，发现有意思的设计细节也能提高我们的设计思维。今天黑马哥将会继续为大家带来一些优秀的设计细节，我们一起来反思一下，这样的设计想法为啥自己没有想到呢？

对于产品 设计师 来说，在同质化的环境中我们需要具备突破创意的思维，这样才能输出差异化的设计方案。而创意离不开优秀作品的灵感启发，发现有意思的 设计细节 也能提高我们的设计思维。

今天黑马哥将会继续为大家带来一些优秀的设计细节，我们一起来反思一下，这样的设计想法为啥自己没有想到呢？

往期回顾：

10个产品细节剖析，看看高手是如何做设计的！ 设计做到极致注重的就是对于细节的把控力，大厂的设计师之所以比较优秀，就是他们具备很好的细节把控力。

阅读文章 >

一、营造顶部区域视觉感与情感化 产品顶部区域的视觉感是吸引用户的关键，在一些功能单一的产品中，强化视觉表现力也是提升产品丰富度的有效形式。

比如麦当劳 App 首页的设计中，顶部区域结合温馨的场景插画进行表达，让你早上打开麦当劳就有种心情愉悦感。动态的太阳微笑画面给你一天好心情，情感化的设计不仅增强了视觉感，也带给用户美好的产品使用体验。

二、主题化配图增强视觉感 封面图在产品规范中相对比较难约束，通过构图、比例、固定元素和配图质量等，在一定程度上可以提高感官体验。如果是在重点突出的内容上面，结合主题化配图也可以增强视觉感。

之前在使用优酷 App 时，当时在重点突出热剧的设计中，就将主题化的内容融入到宫格的配图中。以统一的画面风格和设计表现形式填充封面，增强了视觉表现力，以此突出热剧的吸引力。

三、弹幕式标签提高关注度 在固定的结构布局中如何提高局部内容的关注度，我们需要在不改变结构的前提下进行创意融入。比如动态画面、突出视觉感、内容特异化等等，而最近发现弹幕式标签也是一个不错的选择。

在体验优酷 App 时，在动漫栏目中针对推荐的热播新番，想要突出的动漫结合了弹幕式标签进行强化。动感的节奏会提高用户的关注度，在不改变当前结构的基础上，不失为一种有效的解决方案。

四、IP 强化底部标签栏图标设计 底部标签栏图标是产品设计师经常发挥的场景，在一些节庆主题或者活动中都会定制设计。

优酷 App 在元旦促销活动期间，就将底部标签栏图标设计与 IP 形象结合，默认以促销主题文字展示，点击状态以 IP 形象显示。图标与活动相结合，不仅突出图标视觉表现，也营造了活动氛围感。

五、强化动态发布的引导设计 对于靠内容吸引用户参与度的产品来说，提高用户发布动态的意愿度至关重要，突出动态发布的吸引力也能起到促进作用。

会玩 App 在动态发布的引导设计中给出了不错的思路，未发布动态时会以形象化的空状态设计进行引导。动态发布的按钮旁以俏皮可爱的形象进行引导设计，提高了按钮的吸引力，让用户有种参与的冲动。情感化设计的引导不仅可以增强感官体验，也更容易攻破用户的防备心理。

六、连贯性的插画突出卡片特色 卡片式设计已经成为主流的产品设计趋势，信息的归纳感可以提高识别效率。探索卡片设计的表现特色尤为重要，重点在于卡片造型和内部视觉表现力的发挥层面。

麦当劳 App 在主内容的卡片设计上运用了配送场景插画，连贯性的插画突出了卡片特色。插画场景结合了品牌图形，增强了麦当劳的品牌曝光度；白天和晚上还以不同配色风格和细节进行差异表现，无论是想法还是设计细节都非常不错，是一个挺有创意的案例表现。

七、动态表情化的评价设计 用户评价可以反馈服务的质量，进而做出产品迭代或者服务调整的思路。如何提高用户参与评价的积极性，需要产品设计师多多探索啦！

最近在使用顺丰速运小程序时，完成快递业务之后进行评价，表情化的星级评价非常有意思。不同等级以不同的表情呈现，动态表达非常形象生动，让人不由的挨个体验。动态表情的形式提高了评价的关注度，情感化的表达让用户更愿意参与评价，提高了评价的体验度。

八、场景化的推荐设计 针对电商类产品来说，商品/店铺推荐模块出现频次较高，吸引用户关注度自然成为了设计的首要目标。

在体验 Mars App 时，在生活超市推荐的设计中，模拟了便利店的场景形象。真实感的场景表达带给用户亲切自然的购物体验，同时也提高了用户对于该模块的关注度。

九、上下轮播的 Banner 设计 轮播 Banner 图算是产品设计中最常见的模块，在移动端的设计中通常左右轮播为主，最近体验到上下轮播的案例，打破常规也不失为一种新的设计思路。

在 Mars App 的首页 Banner 图以上下轮播进行交互，左侧固定展示定位城市的天气等信息，提高了 Banner 位置的利用率。Banner 与金刚区悬浮在特定的背景上，带给用户沉浸式的感官体验。

十、情感化的氛围营造 情感化的设计可以让产品更有温度，增加用户对产品的好感度。配合传统节日或者节气主题进行表达是相对比较普遍的形式，会在产品主题和视觉区域进行氛围营造。

在清明节期间体验飞猪旅行 App 时，顶部区域以踏春的场景营造氛围感，还在搜索区域以青团（青团是江南人家在清明节吃的一道传统点心）替代搜索按钮。情感化的设计营造不仅体现了产品的温度，也带给用户对于节日的场景体验。

小结 禁锢我们思维的不是我们的技术，而是我们的眼界和设计感知。发现优秀的设计并总结和转化，才能让我们打开禁锢的思维，在优秀的基础上输出更好的设计解决方案。

本文对于设计的理解阐述属于个人见解，不足之处欢迎大家留言补充，我们互相进步。

欢迎关注作者的微信公众号：「黑马家族」

大家好，这里是和你们一起探索 AI 绘画的花生~功能超强大的 Midjourney 最近又更新了一些新的功能，比如接连推出的 Describe、Repeat 和 Permutations 三项指令，可以帮助用户更准确快速地获取创意，而且最近还有消息称 Midjourney 已经在进行网页端的内测，新的界面会比目前...

大家好，这里是和你们一起探索 AI 绘画的花生~

功能超强大的 Midjourney 最近又更新了一些新的功能，比如接连推出的 Describe、Repeat 和 Permutations 三项指令，可以帮助用户更准确快速地获取创意，而且最近还有消息称 Midjourney 已经在进行网页端的内测，新的界面会比目前的 Discord 界面更加好用，今天就为大家详细介绍一下这些更新~

往期回顾：

AI绘画必学！5种 Midjourney 进阶提示用法 大家好，这里是和你们一起探索 AI 绘画的花生 ~ 上一期为大家介绍了 9 种在 Midjourney 绘画中常用的后缀参数，可以帮助我们生成更符合自己需要的图像。

阅读文章 >

一、Describe 从图像提前提示词 Describe 命令可以帮我们从图片中提取 Prompt （关键词），然后生与之类似的图像。具体操作步骤如下：

我尝试了几个不同类型的图片，发现对大多数类型的图片来说 describe 提取的提示词并不能做到精准还原，但是它在识别画面的主体、构图、材质、风格、特效等方面的效果不错。当我们不知道如何用专业术语去形容画面中某个内容时，describe 能提供有效的关键词，然后我们可以根据关键词再次完善提示词。另外上传的图像最好不要有文字内容，以免影响提示词生成。

在测试梵高的经典油画《向日葵》的时， 我还发现一个很有意思的现象，就是用 describe 提取的提示词中并没有出现任何与“梵高”或“后印象派”有关的词语，但是生成图像在构图、主体内容上都与原图十分相似，不知道不是数据集经过特殊标记的原因。

用 describe 功能提取梵高《向日葵》得到的提示词：

The painting shows several sunflowers in a vase, in the style of golden age aesthetics, pop - culture - infused, light yellow and light maroon, grandiose color schemes, whistlerian, 8k resolution, picassoesque, vibrant color scheme --ar 2:3 --v 5

这幅画展示了花瓶中的几朵向日葵，具有黄金时代美学的风格，流行文化的注入，浅黄色和浅栗色，宏伟的色彩方案，惠斯勒风格 ，8K 分辨率，毕加索式，充满活力的色彩方案 --ar 2:3 --v 5

二、Repeat 重复 使用 Midjourney 生成图像时会默认生成一张四宫格，最新推出的 repeat 功能可以让 Bot 生成多张四宫格，满足用户想一次性探索多种生成效果的需要。

三、NijiJourney v5 风格更强的动漫风模型 Nijijourney 是 Midjourney 专门生成动漫风图像的模型，最近新推出了 V5 版本 -- niji 5，比默认的 --niji 模型的风格性更强。

四、Permutations 排列组合 Permutations 功能允许我们在一组提示内放入多个性质相同的词语或后缀参数，然后系统会自动对这些内容进行排列组合，生成多组对应的图像。该功能目前只允许开通了 Basic 和 Pro 订阅的会员在 fast 模式下使用，消耗 GPU 分钟数极快，使用的时候需要注意。

使用 Permutations 功能需要注意以下内容：

① Permutations 在后缀参数中也可以使用

除了基础的文本提示词，Permutations 同样可以对模型版本、后缀参数、图像提示中使用。

② Permutations 可应用于权重符号

用于权重符号时，{}可以帮我们快速弄清楚多大的数值可以让画面刚好产生/消除某个元素。 示例：

A blue-skinned elf warrior leans against a tree, in the style of D8D fantasy art::, {blue-skinned::0.1, blue-skinned::0.3, blue-skinned::0.5}

也可以简写为：

A blue-skinned elf warrior leans against a tree, in the style of D8D fantasy art::, blue-skinned::{0.1, 0.3, 0.5}

最后的呈现效果为：

A blue-skinned elf warrior leans against a tree, in the style of D8D fantasy art::, blue-skinned::0.1 A blue-skinned elf warrior leans against a tree, in the style of D8D fantasy art::, blue-skinned::0.3 A blue-skinned elf warrior leans against a tree, in the style of D8D fantasy art::, blue-skinned::0.5

③ Permutations 可以多次使用

一组提示词内可以有多个 {} 联合使用，比如：

A {crying, laughing} person stands in a {parking lot, forest}. {--s 1000, --s 0} --v 5

最终会生成 8 张四宫格图像，分别为：

A crying person stands in a parking lot. --s 1000 --v 5 A crying person stands in a parking lot. --s 0 --v 5 A crying person stands in a forest. --s 1000 --v 5 A crying person stands in a forest. --s 0 --v 5 A laughing person stands in a parking lot. --s 1000 --v 5 A laughing person stands in a parking lot. --s 0 --v 5 A laughing person stands in a forest. --s 1000 --v 5 A laughing person stands in a forest. --s 0 --v 5

一个 {} 内也可以放置多个参数，例如：

A painting of a cat {--c 100 --ar 3:2 --v 5, --c 0 --ar 3:2 --v 4, --c 50 --ar 9:16 --v 3}

最终会 3 张四宫格图像，分别为：

A painting of a cat --c 100 --ar 3:2 --v 5 A painting of a cat --c 0 --ar 3:2 --v 4 A painting of a cat --c 50 --ar 9:16 --v 3

④ Permutations 可以嵌套使用

我们可以在一个 {} 中嵌入多个 {} 符号，比如：

A {sculpture, painting} of a {dog {on a pier, þn a beach}, cat {on a sofa, on a tree}}. --v 5

最终会生成 8 张图像，分别为：

A sculpture of a dog on a pier. --v 5 A sculpture of a dog on a beach. --v 5 A sculpture of a cat on a sofa. --v 5 A sculpture of a cat on a tree. --v 5 A painting of a dog on a pier.--v 5 A painting of a dog on a beach. --v 5 A painting of a cat on a sofa. --v 5 A painting of a cat on a tree. --v 5

⑥ 反斜杠 \ 的使用

如果我们想让 {} 内的多个词语成为一组，而不是每个都被单独理解，可以使用 \ 进行语义串联。比如：

A {red, pastel, yellow} bird

将生成 3 张四宫格图像，分别为：

a red bird a pastel bird a yellow bird

如果在 pastel 后加上 \ 符号，

A {red, pastel\, yellow} bird

就可只得到 2 张图像，因为 \ 使 pastel 和 yellow 变为一体了。

a red bird a pastel, yellow bird

五、Midjourney 网页端 最近在 Twitter 上看到有网友已经在参加 Midjourney 网页端的内测了，从放出的网页截图可以看出，新版界面相对于现在 discord 要简洁清爽很多，原本的设置命令和后缀参数，也统一汇总在右侧面板，更加直观便于调节；看左侧的图标应该是将社区、用户个人主页、使用指南等功能放在一起了，总体来说使用更加方便了。

不过的目前的图片都是内测用户自己曝光出来的，官网对网页端并没有任何介绍，估计这个界面也可能还会有改动，期待最终的开放版本。

图片来源：Twitter@AuramancerAi， https://twitter.com/AuramancerAi/status/

以上就是本期为大家推荐的 4 个 Midjourney 新功能，喜欢本期推荐的话可以多多点赞收藏，之后会继续为大家推荐更多实用的 AI 绘画知识技巧。

推荐阅读：

AI绘画哪家强？Midjourney、文心一格等 6 大工具出图效果大比拼 大家好，这里是和你们一起探索 AI 绘画的花生~ 3 月份以来 AI 绘画领域又有了不小的变化，Midjourney 更新了 V5 版本、Stable Diffusion 推出了 Clipdrop Reimagine；微软 Bing 也推出了 Image Create （图像生成）功能

阅读文章 >

8大实战案例！AIGC在网易落地项目中的运用 AIGC 全称 AI Generated Content，是利用人工智能技术来生成内容，AIGC 绘画属于 AIGC 的分支。

阅读文章 >

对于产品设计师来说，在同质化的环境中我们需要具备突破创意的思维，这样才能输出差异化的设计方案。而创意离不开优秀作品的灵感启发，发现有意思的设计细节也能提高我们的设计思维。今天黑马哥将会继续为大家带来一些优秀的设计细节，我们一起来反思一下，这样的设计想法为啥自己没有想到呢？

对于产品 设计师 来说，在同质化的环境中我们需要具备突破创意的思维，这样才能输出差异化的设计方案。而创意离不开优秀作品的灵感启发，发现有意思的 设计细节 也能提高我们的设计思维。

今天黑马哥将会继续为大家带来一些优秀的设计细节，我们一起来反思一下，这样的设计想法为啥自己没有想到呢？

往期回顾：

10个产品细节剖析，看看高手是如何做设计的！ 设计做到极致注重的就是对于细节的把控力，大厂的设计师之所以比较优秀，就是他们具备很好的细节把控力。

阅读文章 >

一、营造顶部区域视觉感与情感化 产品顶部区域的视觉感是吸引用户的关键，在一些功能单一的产品中，强化视觉表现力也是提升产品丰富度的有效形式。

比如麦当劳 App 首页的设计中，顶部区域结合温馨的场景插画进行表达，让你早上打开麦当劳就有种心情愉悦感。动态的太阳微笑画面给你一天好心情，情感化的设计不仅增强了视觉感，也带给用户美好的产品使用体验。

二、主题化配图增强视觉感 封面图在产品规范中相对比较难约束，通过构图、比例、固定元素和配图质量等，在一定程度上可以提高感官体验。如果是在重点突出的内容上面，结合主题化配图也可以增强视觉感。

之前在使用优酷 App 时，当时在重点突出热剧的设计中，就将主题化的内容融入到宫格的配图中。以统一的画面风格和设计表现形式填充封面，增强了视觉表现力，以此突出热剧的吸引力。

三、弹幕式标签提高关注度 在固定的结构布局中如何提高局部内容的关注度，我们需要在不改变结构的前提下进行创意融入。比如动态画面、突出视觉感、内容特异化等等，而最近发现弹幕式标签也是一个不错的选择。

在体验优酷 App 时，在动漫栏目中针对推荐的热播新番，想要突出的动漫结合了弹幕式标签进行强化。动感的节奏会提高用户的关注度，在不改变当前结构的基础上，不失为一种有效的解决方案。

四、IP 强化底部标签栏图标设计 底部标签栏图标是产品设计师经常发挥的场景，在一些节庆主题或者活动中都会定制设计。

优酷 App 在元旦促销活动期间，就将底部标签栏图标设计与 IP 形象结合，默认以促销主题文字展示，点击状态以 IP 形象显示。图标与活动相结合，不仅突出图标视觉表现，也营造了活动氛围感。

五、强化动态发布的引导设计 对于靠内容吸引用户参与度的产品来说，提高用户发布动态的意愿度至关重要，突出动态发布的吸引力也能起到促进作用。

会玩 App 在动态发布的引导设计中给出了不错的思路，未发布动态时会以形象化的空状态设计进行引导。动态发布的按钮旁以俏皮可爱的形象进行引导设计，提高了按钮的吸引力，让用户有种参与的冲动。情感化设计的引导不仅可以增强感官体验，也更容易攻破用户的防备心理。

六、连贯性的插画突出卡片特色 卡片式设计已经成为主流的产品设计趋势，信息的归纳感可以提高识别效率。探索卡片设计的表现特色尤为重要，重点在于卡片造型和内部视觉表现力的发挥层面。

麦当劳 App 在主内容的卡片设计上运用了配送场景插画，连贯性的插画突出了卡片特色。插画场景结合了品牌图形，增强了麦当劳的品牌曝光度；白天和晚上还以不同配色风格和细节进行差异表现，无论是想法还是设计细节都非常不错，是一个挺有创意的案例表现。

七、动态表情化的评价设计 用户评价可以反馈服务的质量，进而做出产品迭代或者服务调整的思路。如何提高用户参与评价的积极性，需要产品设计师多多探索啦！

最近在使用顺丰速运小程序时，完成快递业务之后进行评价，表情化的星级评价非常有意思。不同等级以不同的表情呈现，动态表达非常形象生动，让人不由的挨个体验。动态表情的形式提高了评价的关注度，情感化的表达让用户更愿意参与评价，提高了评价的体验度。

八、场景化的推荐设计 针对电商类产品来说，商品/店铺推荐模块出现频次较高，吸引用户关注度自然成为了设计的首要目标。

在体验 Mars App 时，在生活超市推荐的设计中，模拟了便利店的场景形象。真实感的场景表达带给用户亲切自然的购物体验，同时也提高了用户对于该模块的关注度。

九、上下轮播的 Banner 设计 轮播 Banner 图算是产品设计中最常见的模块，在移动端的设计中通常左右轮播为主，最近体验到上下轮播的案例，打破常规也不失为一种新的设计思路。

在 Mars App 的首页 Banner 图以上下轮播进行交互，左侧固定展示定位城市的天气等信息，提高了 Banner 位置的利用率。Banner 与金刚区悬浮在特定的背景上，带给用户沉浸式的感官体验。

十、情感化的氛围营造 情感化的设计可以让产品更有温度，增加用户对产品的好感度。配合传统节日或者节气主题进行表达是相对比较普遍的形式，会在产品主题和视觉区域进行氛围营造。

在清明节期间体验飞猪旅行 App 时，顶部区域以踏春的场景营造氛围感，还在搜索区域以青团（青团是江南人家在清明节吃的一道传统点心）替代搜索按钮。情感化的设计营造不仅体现了产品的温度，也带给用户对于节日的场景体验。

小结 禁锢我们思维的不是我们的技术，而是我们的眼界和设计感知。发现优秀的设计并总结和转化，才能让我们打开禁锢的思维，在优秀的基础上输出更好的设计解决方案。

本文对于设计的理解阐述属于个人见解，不足之处欢迎大家留言补充，我们互相进步。

欢迎关注作者的微信公众号：「黑马家族」

大家好，这里是和你们一起探索 AI 绘画的花生~功能超强大的 Midjourney 最近又更新了一些新的功能，比如接连推出的 Describe、Repeat 和 Permutations 三项指令，可以帮助用户更准确快速地获取创意，而且最近还有消息称 Midjourney 已经在进行网页端的内测，新的界面会比目前...

大家好，这里是和你们一起探索 AI 绘画的花生~

功能超强大的 Midjourney 最近又更新了一些新的功能，比如接连推出的 Describe、Repeat 和 Permutations 三项指令，可以帮助用户更准确快速地获取创意，而且最近还有消息称 Midjourney 已经在进行网页端的内测，新的界面会比目前的 Discord 界面更加好用，今天就为大家详细介绍一下这些更新~

往期回顾：

AI绘画必学！5种 Midjourney 进阶提示用法 大家好，这里是和你们一起探索 AI 绘画的花生 ~ 上一期为大家介绍了 9 种在 Midjourney 绘画中常用的后缀参数，可以帮助我们生成更符合自己需要的图像。

阅读文章 >

一、Describe 从图像提前提示词 Describe 命令可以帮我们从图片中提取 Prompt （关键词），然后生与之类似的图像。具体操作步骤如下：

我尝试了几个不同类型的图片，发现对大多数类型的图片来说 describe 提取的提示词并不能做到精准还原，但是它在识别画面的主体、构图、材质、风格、特效等方面的效果不错。当我们不知道如何用专业术语去形容画面中某个内容时，describe 能提供有效的关键词，然后我们可以根据关键词再次完善提示词。另外上传的图像最好不要有文字内容，以免影响提示词生成。

在测试梵高的经典油画《向日葵》的时， 我还发现一个很有意思的现象，就是用 describe 提取的提示词中并没有出现任何与“梵高”或“后印象派”有关的词语，但是生成图像在构图、主体内容上都与原图十分相似，不知道不是数据集经过特殊标记的原因。

用 describe 功能提取梵高《向日葵》得到的提示词：

The painting shows several sunflowers in a vase, in the style of golden age aesthetics, pop - culture - infused, light yellow and light maroon, grandiose color schemes, whistlerian, 8k resolution, picassoesque, vibrant color scheme --ar 2:3 --v 5

这幅画展示了花瓶中的几朵向日葵，具有黄金时代美学的风格，流行文化的注入，浅黄色和浅栗色，宏伟的色彩方案，惠斯勒风格 ，8K 分辨率，毕加索式，充满活力的色彩方案 --ar 2:3 --v 5

二、Repeat 重复 使用 Midjourney 生成图像时会默认生成一张四宫格，最新推出的 repeat 功能可以让 Bot 生成多张四宫格，满足用户想一次性探索多种生成效果的需要。

三、NijiJourney v5 风格更强的动漫风模型 Nijijourney 是 Midjourney 专门生成动漫风图像的模型，最近新推出了 V5 版本 -- niji 5，比默认的 --niji 模型的风格性更强。

四、Permutations 排列组合 Permutations 功能允许我们在一组提示内放入多个性质相同的词语或后缀参数，然后系统会自动对这些内容进行排列组合，生成多组对应的图像。该功能目前只允许开通了 Basic 和 Pro 订阅的会员在 fast 模式下使用，消耗 GPU 分钟数极快，使用的时候需要注意。

使用 Permutations 功能需要注意以下内容：

① Permutations 在后缀参数中也可以使用

除了基础的文本提示词，Permutations 同样可以对模型版本、后缀参数、图像提示中使用。

② Permutations 可应用于权重符号

用于权重符号时，{}可以帮我们快速弄清楚多大的数值可以让画面刚好产生/消除某个元素。 示例：

A blue-skinned elf warrior leans against a tree, in the style of D8D fantasy art::, {blue-skinned::0.1, blue-skinned::0.3, blue-skinned::0.5}

也可以简写为：

A blue-skinned elf warrior leans against a tree, in the style of D8D fantasy art::, blue-skinned::{0.1, 0.3, 0.5}

最后的呈现效果为：

A blue-skinned elf warrior leans against a tree, in the style of D8D fantasy art::, blue-skinned::0.1 A blue-skinned elf warrior leans against a tree, in the style of D8D fantasy art::, blue-skinned::0.3 A blue-skinned elf warrior leans against a tree, in the style of D8D fantasy art::, blue-skinned::0.5

③ Permutations 可以多次使用

一组提示词内可以有多个 {} 联合使用，比如：

A {crying, laughing} person stands in a {parking lot, forest}. {--s 1000, --s 0} --v 5

最终会生成 8 张四宫格图像，分别为：

A crying person stands in a parking lot. --s 1000 --v 5 A crying person stands in a parking lot. --s 0 --v 5 A crying person stands in a forest. --s 1000 --v 5 A crying person stands in a forest. --s 0 --v 5 A laughing person stands in a parking lot. --s 1000 --v 5 A laughing person stands in a parking lot. --s 0 --v 5 A laughing person stands in a forest. --s 1000 --v 5 A laughing person stands in a forest. --s 0 --v 5

一个 {} 内也可以放置多个参数，例如：

A painting of a cat {--c 100 --ar 3:2 --v 5, --c 0 --ar 3:2 --v 4, --c 50 --ar 9:16 --v 3}

最终会 3 张四宫格图像，分别为：

A painting of a cat --c 100 --ar 3:2 --v 5 A painting of a cat --c 0 --ar 3:2 --v 4 A painting of a cat --c 50 --ar 9:16 --v 3

④ Permutations 可以嵌套使用

我们可以在一个 {} 中嵌入多个 {} 符号，比如：

A {sculpture, painting} of a {dog {on a pier, þn a beach}, cat {on a sofa, on a tree}}. --v 5

最终会生成 8 张图像，分别为：

A sculpture of a dog on a pier. --v 5 A sculpture of a dog on a beach. --v 5 A sculpture of a cat on a sofa. --v 5 A sculpture of a cat on a tree. --v 5 A painting of a dog on a pier.--v 5 A painting of a dog on a beach. --v 5 A painting of a cat on a sofa. --v 5 A painting of a cat on a tree. --v 5

⑥ 反斜杠 \ 的使用

如果我们想让 {} 内的多个词语成为一组，而不是每个都被单独理解，可以使用 \ 进行语义串联。比如：

A {red, pastel, yellow} bird

将生成 3 张四宫格图像，分别为：

a red bird a pastel bird a yellow bird

如果在 pastel 后加上 \ 符号，

A {red, pastel\, yellow} bird

就可只得到 2 张图像，因为 \ 使 pastel 和 yellow 变为一体了。

a red bird a pastel, yellow bird

五、Midjourney 网页端 最近在 Twitter 上看到有网友已经在参加 Midjourney 网页端的内测了，从放出的网页截图可以看出，新版界面相对于现在 discord 要简洁清爽很多，原本的设置命令和后缀参数，也统一汇总在右侧面板，更加直观便于调节；看左侧的图标应该是将社区、用户个人主页、使用指南等功能放在一起了，总体来说使用更加方便了。

不过的目前的图片都是内测用户自己曝光出来的，官网对网页端并没有任何介绍，估计这个界面也可能还会有改动，期待最终的开放版本。

图片来源：Twitter@AuramancerAi， https://twitter.com/AuramancerAi/status/

以上就是本期为大家推荐的 4 个 Midjourney 新功能，喜欢本期推荐的话可以多多点赞收藏，之后会继续为大家推荐更多实用的 AI 绘画知识技巧。

推荐阅读：

AI绘画哪家强？Midjourney、文心一格等 6 大工具出图效果大比拼 大家好，这里是和你们一起探索 AI 绘画的花生~ 3 月份以来 AI 绘画领域又有了不小的变化，Midjourney 更新了 V5 版本、Stable Diffusion 推出了 Clipdrop Reimagine；微软 Bing 也推出了 Image Create （图像生成）功能

阅读文章 >

8大实战案例！AIGC在网易落地项目中的运用 AIGC 全称 AI Generated Content，是利用人工智能技术来生成内容，AIGC 绘画属于 AIGC 的分支。

阅读文章 >