一、AI 绘图背景与趋势随着互联网行业发展和技术的进步，设计师也有越来越丰富的手段来应对多种类型的产品需求；比如说 3D 渲染、各种自定义的插件已经成为设计师的工作日常，在不断的提高大家的工作效率；包括最近火热的 AI 绘图，也时常出现在设计师的讨论话题当中。AI工具大盘点：2023年，让这20款AI工具帮你更高...

一、AI 绘图背景与趋势 随着互联网行业发展和技术的进步，设计师也有越来越丰富的手段来应对多种类型的产品需求；比如说 3D 渲染、各种自定义的插件已经成为设计师的工作日常，在不断的提高大家的工作效率；包括最近火热的 AI 绘图，也时常出现在设计师的讨论话题当中。

AI工具大盘点：

2023年，让这20款AI工具帮你更高效地完成工作~ 2023年，让这20款AI工具帮你更高效的完成工作~ 大家好，这里是和你们聊设计的花生~ 2022年是AI技术大发展的一年，我都快记不清为大家推荐多少种AI工具了。

阅读文章 >

AI 绘图模型令人叹为观止的画作

1. 模型的种类与画风

目前市面上，AI 绘图在商业设计领域，目前还鲜有人尝试。我们团队通过网上大量的资料和学习，针对 AI 的先有几个工具进行了研究和试验，看看高阶的 AI 模型能否满足我们的诉求。

由于市面上存在大量的 AI 绘画工具，每个工具擅长的画风也各有所长；例如 MidJourney；画面注重细节的构建和表达；

Stable Diffusion，画风更偏写实；

Disco Diffusion；笔触较明显，适合油画风格；

包括每一类型里不同的模型也会有不同的效果，例如基于 Stable-Diffusion 开发的 NovelAI Diffusion Models，风格更偏二次元；

基于 AI 绘图具有「低成本、批量输出」的特征，而商业化运营需求也带有「日常、高频」的属性，例如日常大促、节日促销活动的 H5 页面、电商 banner 等；所以我们想将 AI 绘图应用在商业化设计流程之中。尝试打破效率边界，利用低投入高产出的方式为团队提效。

二、商业设计如何拥抱 AI 在进行具体的 AI 绘图实验之前，我们先把商业化运营设计需求分类，以活动类型、周期、对应设计复杂程度，可将其分为为 S、A、B 三个级别。其中 S 级别以专题大促为主，页面以为 banner 和 H5 为代表；A 级别以平台活动为主，同样是 banner 和 H5 需求并存；B 级别为日常促销，以 banner 需求居多；

由于以上几类日常运营图的需求频次较高且生命周期不长，在极快的项目节奏中会较多占用设计人力及项目时间；同时因为 AI 绘图模型具有低成本、批量产出的特征，所以我们尝试用 AI 绘图工具来辅助完成日常的运营设计工作。另外值得一提的是，每类模型的擅长风格不同，我们选用的是时下最火热，也是学习资料较多的 MidJourney 来做尝试。

三、B 类商业运营设计需求：轻量手段快速达成

面对常规运营 banner 需求，之前团队合作流程是由产品、运营同学按固定周期提需求到设计部门，按需求排期，定量投入设计人力逐步交付。

既然工作流程上已是最短路径，那么我们尝试把目光聚焦在需求本质上，将 banner 的结构拆散，可以发现绝大部分的 banner 都由这五类元素构成；那么是否能够利用现有成熟的 AI 类技术平台，直接生成商业运营设计 banner 成品（或半成品）呢？我们接下来就尝试一下。

1. 对比和尝试

我们首先横向对比了国内外智能出图平台的各项能力，以关键功能类型作为衡量指标，得到了一张能力图表；

那么横向来看，各平台的能力可以划分为两大类模版绘制、AI 绘制结合模版设计；

第一类在线模版绘制；大量模版可以供挑选并调整，支持线上编辑并输出；第二类 AI 绘制；优势是速度极快快、批量出图，但图像的质量没有保障，需结合模版能力一起使用才能质量可靠的设计图；综合效率和结果两方面来考虑，我们选择第二类方法，如上图所示网上有多种平台可供选择，大家可以根据需求自行选择恰当的平台来进行实验。

2. 方法总结

在具体操作流程上，跟我们常规的设计作图略有不同；大概分为 2 个阶段；

首先我们需要选择配图主题类型、活动类型、人群，这决定了图片风格和商品素材的表现；并输入对应的文案标题，即 banner 图的文案显示；

随后可得到批量生成的初稿；

点击任一初稿，进入线上编辑环节，利用丰富的在线编辑能力对 banner 图做调整，例如图层查找，替换商品素材、装饰素材，更改字体等等；在智能编辑模块中简单处理后即可得到可用的设计图；经过大量实验后发现，这类方式更适合于电商类型的 banner 图；同时在经过对产品、运营同学的简单培训后，大家也可以非常迅速的做到上手并产出 banner 图；这也与我们的预期判断是匹配的；

四、A 类商业运营设计需求：AI 辅助生成

除了 B 类的日常促销活动外，我们也会经常遇到类似上图的 H5 头图的运营设计，面对这类需求通常需要在探索风格，绘制画面细节上花费较长时间，我们尝试通过 AI 模型辅助出图解决这个难题。

1. 工作流程介绍

在正式开始作图之前，我们需要对 MidJourney 的能力区间、工作模式建立基本的认知。

MidJourney 允许用户以对话的形式，通过以输入描述词的方式，经过 AI 模型运算后得到其返回的图片。

2. 利用 MidJourney 垫图能力辅助设计头图；

针对 A 类平台活动类运营需求的绘制工作共分为四个步骤，分别是风格定义，垫图描述，调整与输出；

首先先通过参考图，明确出我们倾向的风格和特征；

第二步我们需要用到「以图生图」，在 discord 中将参考图发给 MidJourney，并结合意向风格，构图和其他特征添加上恰当的描述，可以得到初稿；

不断调整图像与描述词，最终逐步接近目标效果；

头图生成好之后，搭配上文案的字体设计与装饰元素，可以看到最终的效果如上。利用 AI 模型辅助生图，可以使繁琐的工作量可以得到有效压缩，从而把大家从繁杂的工作中解放出来。

五、S 类商业运营设计需求：AI 智能生成 除了较为基础的 A 类运营设计需求外，面对专题大促的运营需求需求，其展示周期更长，且对于设计质量要求更高，常常会涉及到 3D 场景的搭建和渲染工作，相对于 A 类需求，S 类需求通常排期时间更长，同时对设计师的能力提出更高要求；

那么针对画面设计要求更高阶的运营需求，除依靠设计师个人能力来应对之外，会否有更高效、便捷的办法呢，我们同样可以通过 AI 模型绘制的办法来尝试解决这个问题。

1. 工作流程介绍

基于前面对于 MidJourney 的基础了解，我们接下来看下利用 MidJourney 辅助输出运营设计图的工作流，分别是风格定义、撰写描述、二次调整、输出 4 个步骤；

① 风格定义

首先是风格定义，由于 AI 绘图具有高度的随机性和风格化的特质，而运营设计更注重理性的构图版式。所以在正式进入绘图步骤之前，我们需要提前明确画面大致的风格调性，这样才能保证后续 AI 产出的方向不跑偏，并更准确的获取我们想要的图像；

我们以电商运营广告中最常见的美妆类别举例，通过观察可以发现，美妆类的图像具有明显的风格化特征，比如居中或对称构图、明亮的环境光等。所以这些特质就将成为我们输入的词汇，同时也是输出筛选步骤里的重要依据。

② 撰写描述

MidJourney 模型出图有两种模式，最常见的是 text to img 文本生图；以及 img to img 以图生图；文本生图即通过一段文本描述告诉 AI 模型你想要的画面，由它帮你绘制出来；以图生图是通过一份原始图片，配合文本描述，来绘制跟原始图片类似风格但又不尽相同的图片素材；无论哪种方式，都需要明确一个关键的概念「Prompt」，也就是「关键词描述」。

Prompt 关键词描述可以理解为与 AI 创作沟通的媒介，我们需要将脑海中构想的画面用恰当的提示词（语句）描述出来，并通过它来缩小 AI 想象的空间，它才能听懂、理解并产出令人满意的画面。另外值得注意的是，相同的描述文本内容，词语的顺序、前后词汇的关系对于内容的产出影响差异也会非常的大。所以关键词描述的写法至关重要；

Prompt 的大致写法由几个部分构成，主体部分，环境氛围，构图，风格化，以及其他设定。我们接下来通过 Prompt 描述公式，一步步完成一张美妆运营图的设计。

首先是主体内容的描述，通常可以拆解为，存在几个「什么样的」的主体，在做什么动作，并附带了其他的什么动作。例如：There was a pink lipstick and a glass bottle of perfume；可以得到如上的主体内容，香水口红的图像。

其次是为主体内容添加场景或环境，例如给定某些地点或物件。比如案例中，我们指定背景花朵、自然植物，以及倒影等词汇。通过观察以上四张图，可以发现模型中「Nature Plants」这个词汇对画面有较大的影响，决定了不同风格的背景以及复杂程度。同时也能发现，尽管只相差了一个描述词，但前后结果仍存在较大的差异，所以大家在调试画面的过程中可以从词汇逐个调整，以尽量减少画面的随机跳变；

然后是构图与镜头，比如左侧两张图强调景深，右侧两张图强调了构图位置等；

接下来是风格化与参考方向，可以添加上艺术家名字或平台名字，或直接将图像风格写出来；比如说 3D 渲染还是 2D 画风，可以从上图的结果中明显感觉到两者的区别。

最后是图像的设定，例如--q 5，代表最高图像质量；同时你也可以通过类似「8k, ultra realistic」这样的词汇来对画质做强调。第二点是画幅，--ar 3:2 表示横纵比为 3 比 2 的横幅图像，--ar 9:16 表示横纵比为 9 比 16 的纵向图像；-- v4 代表最新的第四代计算模型；

最终通过以上五个小步骤，我们可以得出一大批风格各异的草图：

再通过第一步的风格调性做筛选，可以初步得出不同类型的初稿，以满足不同的品类需求。

③ 二次修正，进阶调整

当取得满足需求的初稿之后，我们可以使用 MidJourney 的进阶功能，来提升图像质量或对图像画面做调整；以下是几个使用频率最高的的调整功能；

首先是通过点击成图下方的 U 按钮，可以放大对应序号的图片的比例，来提高其分辨率；

第二种，通过点击图片下方的 V 按钮，可以基于原描述词，生成对应序号图片的变体，画面对比母版，图片的细节会出现随机变化，例如上图的花蕊、香水瓶的外轮廓；

第三种是 Light Upscale Redo & Beta Upscale Redo，这两个功能都可以提升画质并细化效果；

最后一种也是变体生成方法，值得注意的是，需在「/setting」中开启「Remix mode」功能后，再次点 V 功能，此时可以二次编辑关键词；例如上图就通过「Remix mode」重置了图像的尺寸比例。

④ 调整输出

将二次修正后的图像，经过设计师轻量化的调整工作，例如修正细节，添加文案后，即可看到最后的效果。

以上就是利用 AI 绘图技术辅助生成 S 类商业运营设计图；可以看到其优势是短时间、大批量生成可供选择的风格背景图；同时能配合需求本身，通过 AI 模型的变体加二次描述词编辑，来满足我们的个性化要求。

结语 以上则是本文的全部内容，如果你也想通过 AI 绘图的形式来辅助提高自己的工作效率，以下几点值得仔细阅读，首先 MidJourney 前期有免费的体验额度，当额度用完后需要付费使用。其次免费用户生成的作品不能商用，只有付费用户才拥有该图片的所有权。由于 AI 绘图的版权政策时常存在变动，所以也请大家关注 Midjourney 官方信息，以免带来困扰。

随着 AI 模型能力的飞速迭代升级，现有的短板能力也会不断补齐，因此我们可以相信在不远的将来，设计师利用 AI 模型来开脑洞并辅助出图是趋势所向，但并不是说我们需要完全依赖 AI，因为设计本身是理性而浪漫的工作，仅靠随机性做设计是完全不可取且不靠谱的。更合适的思路应该是，设计师首先定义好规则与框架，从 AI 模型提供的成百上千个结果中寻找到最匹配我们诉求的结果，从而辅助我们更快更好的达成目标。另外面对日新月异的的智能工具，我们应该保持终生学习的心态，做好时刻接受新事物的挑战，才能在越来越激烈的竞争中立于不败之地。

欢迎关注作者微信公众号：「腾讯ISUX」

一、AI 绘图背景与趋势随着互联网行业发展和技术的进步，设计师也有越来越丰富的手段来应对多种类型的产品需求；比如说 3D 渲染、各种自定义的插件已经成为设计师的工作日常，在不断的提高大家的工作效率；包括最近火热的 AI 绘图，也时常出现在设计师的讨论话题当中。AI工具大盘点：2023年，让这20款AI工具帮你更高...

一、AI 绘图背景与趋势 随着互联网行业发展和技术的进步，设计师也有越来越丰富的手段来应对多种类型的产品需求；比如说 3D 渲染、各种自定义的插件已经成为设计师的工作日常，在不断的提高大家的工作效率；包括最近火热的 AI 绘图，也时常出现在设计师的讨论话题当中。

AI工具大盘点：

2023年，让这20款AI工具帮你更高效地完成工作~ 2023年，让这20款AI工具帮你更高效的完成工作~ 大家好，这里是和你们聊设计的花生~ 2022年是AI技术大发展的一年，我都快记不清为大家推荐多少种AI工具了。

阅读文章 >

AI 绘图模型令人叹为观止的画作

1. 模型的种类与画风

目前市面上，AI 绘图在商业设计领域，目前还鲜有人尝试。我们团队通过网上大量的资料和学习，针对 AI 的先有几个工具进行了研究和试验，看看高阶的 AI 模型能否满足我们的诉求。

由于市面上存在大量的 AI 绘画工具，每个工具擅长的画风也各有所长；例如 MidJourney；画面注重细节的构建和表达；

Stable Diffusion，画风更偏写实；

Disco Diffusion；笔触较明显，适合油画风格；

包括每一类型里不同的模型也会有不同的效果，例如基于 Stable-Diffusion 开发的 NovelAI Diffusion Models，风格更偏二次元；

基于 AI 绘图具有「低成本、批量输出」的特征，而商业化运营需求也带有「日常、高频」的属性，例如日常大促、节日促销活动的 H5 页面、电商 banner 等；所以我们想将 AI 绘图应用在商业化设计流程之中。尝试打破效率边界，利用低投入高产出的方式为团队提效。

二、商业设计如何拥抱 AI 在进行具体的 AI 绘图实验之前，我们先把商业化运营设计需求分类，以活动类型、周期、对应设计复杂程度，可将其分为为 S、A、B 三个级别。其中 S 级别以专题大促为主，页面以为 banner 和 H5 为代表；A 级别以平台活动为主，同样是 banner 和 H5 需求并存；B 级别为日常促销，以 banner 需求居多；

由于以上几类日常运营图的需求频次较高且生命周期不长，在极快的项目节奏中会较多占用设计人力及项目时间；同时因为 AI 绘图模型具有低成本、批量产出的特征，所以我们尝试用 AI 绘图工具来辅助完成日常的运营设计工作。另外值得一提的是，每类模型的擅长风格不同，我们选用的是时下最火热，也是学习资料较多的 MidJourney 来做尝试。

三、B 类商业运营设计需求：轻量手段快速达成

面对常规运营 banner 需求，之前团队合作流程是由产品、运营同学按固定周期提需求到设计部门，按需求排期，定量投入设计人力逐步交付。

既然工作流程上已是最短路径，那么我们尝试把目光聚焦在需求本质上，将 banner 的结构拆散，可以发现绝大部分的 banner 都由这五类元素构成；那么是否能够利用现有成熟的 AI 类技术平台，直接生成商业运营设计 banner 成品（或半成品）呢？我们接下来就尝试一下。

1. 对比和尝试

我们首先横向对比了国内外智能出图平台的各项能力，以关键功能类型作为衡量指标，得到了一张能力图表；

那么横向来看，各平台的能力可以划分为两大类模版绘制、AI 绘制结合模版设计；

第一类在线模版绘制；大量模版可以供挑选并调整，支持线上编辑并输出；第二类 AI 绘制；优势是速度极快快、批量出图，但图像的质量没有保障，需结合模版能力一起使用才能质量可靠的设计图；综合效率和结果两方面来考虑，我们选择第二类方法，如上图所示网上有多种平台可供选择，大家可以根据需求自行选择恰当的平台来进行实验。

2. 方法总结

在具体操作流程上，跟我们常规的设计作图略有不同；大概分为 2 个阶段；

首先我们需要选择配图主题类型、活动类型、人群，这决定了图片风格和商品素材的表现；并输入对应的文案标题，即 banner 图的文案显示；

随后可得到批量生成的初稿；

点击任一初稿，进入线上编辑环节，利用丰富的在线编辑能力对 banner 图做调整，例如图层查找，替换商品素材、装饰素材，更改字体等等；在智能编辑模块中简单处理后即可得到可用的设计图；经过大量实验后发现，这类方式更适合于电商类型的 banner 图；同时在经过对产品、运营同学的简单培训后，大家也可以非常迅速的做到上手并产出 banner 图；这也与我们的预期判断是匹配的；

四、A 类商业运营设计需求：AI 辅助生成

除了 B 类的日常促销活动外，我们也会经常遇到类似上图的 H5 头图的运营设计，面对这类需求通常需要在探索风格，绘制画面细节上花费较长时间，我们尝试通过 AI 模型辅助出图解决这个难题。

1. 工作流程介绍

在正式开始作图之前，我们需要对 MidJourney 的能力区间、工作模式建立基本的认知。

MidJourney 允许用户以对话的形式，通过以输入描述词的方式，经过 AI 模型运算后得到其返回的图片。

2. 利用 MidJourney 垫图能力辅助设计头图；

针对 A 类平台活动类运营需求的绘制工作共分为四个步骤，分别是风格定义，垫图描述，调整与输出；

首先先通过参考图，明确出我们倾向的风格和特征；

第二步我们需要用到「以图生图」，在 discord 中将参考图发给 MidJourney，并结合意向风格，构图和其他特征添加上恰当的描述，可以得到初稿；

不断调整图像与描述词，最终逐步接近目标效果；

头图生成好之后，搭配上文案的字体设计与装饰元素，可以看到最终的效果如上。利用 AI 模型辅助生图，可以使繁琐的工作量可以得到有效压缩，从而把大家从繁杂的工作中解放出来。

五、S 类商业运营设计需求：AI 智能生成 除了较为基础的 A 类运营设计需求外，面对专题大促的运营需求需求，其展示周期更长，且对于设计质量要求更高，常常会涉及到 3D 场景的搭建和渲染工作，相对于 A 类需求，S 类需求通常排期时间更长，同时对设计师的能力提出更高要求；

那么针对画面设计要求更高阶的运营需求，除依靠设计师个人能力来应对之外，会否有更高效、便捷的办法呢，我们同样可以通过 AI 模型绘制的办法来尝试解决这个问题。

1. 工作流程介绍

基于前面对于 MidJourney 的基础了解，我们接下来看下利用 MidJourney 辅助输出运营设计图的工作流，分别是风格定义、撰写描述、二次调整、输出 4 个步骤；

① 风格定义

首先是风格定义，由于 AI 绘图具有高度的随机性和风格化的特质，而运营设计更注重理性的构图版式。所以在正式进入绘图步骤之前，我们需要提前明确画面大致的风格调性，这样才能保证后续 AI 产出的方向不跑偏，并更准确的获取我们想要的图像；

我们以电商运营广告中最常见的美妆类别举例，通过观察可以发现，美妆类的图像具有明显的风格化特征，比如居中或对称构图、明亮的环境光等。所以这些特质就将成为我们输入的词汇，同时也是输出筛选步骤里的重要依据。

② 撰写描述

MidJourney 模型出图有两种模式，最常见的是 text to img 文本生图；以及 img to img 以图生图；文本生图即通过一段文本描述告诉 AI 模型你想要的画面，由它帮你绘制出来；以图生图是通过一份原始图片，配合文本描述，来绘制跟原始图片类似风格但又不尽相同的图片素材；无论哪种方式，都需要明确一个关键的概念「Prompt」，也就是「关键词描述」。

Prompt 关键词描述可以理解为与 AI 创作沟通的媒介，我们需要将脑海中构想的画面用恰当的提示词（语句）描述出来，并通过它来缩小 AI 想象的空间，它才能听懂、理解并产出令人满意的画面。另外值得注意的是，相同的描述文本内容，词语的顺序、前后词汇的关系对于内容的产出影响差异也会非常的大。所以关键词描述的写法至关重要；

Prompt 的大致写法由几个部分构成，主体部分，环境氛围，构图，风格化，以及其他设定。我们接下来通过 Prompt 描述公式，一步步完成一张美妆运营图的设计。

首先是主体内容的描述，通常可以拆解为，存在几个「什么样的」的主体，在做什么动作，并附带了其他的什么动作。例如：There was a pink lipstick and a glass bottle of perfume；可以得到如上的主体内容，香水口红的图像。

其次是为主体内容添加场景或环境，例如给定某些地点或物件。比如案例中，我们指定背景花朵、自然植物，以及倒影等词汇。通过观察以上四张图，可以发现模型中「Nature Plants」这个词汇对画面有较大的影响，决定了不同风格的背景以及复杂程度。同时也能发现，尽管只相差了一个描述词，但前后结果仍存在较大的差异，所以大家在调试画面的过程中可以从词汇逐个调整，以尽量减少画面的随机跳变；

然后是构图与镜头，比如左侧两张图强调景深，右侧两张图强调了构图位置等；

接下来是风格化与参考方向，可以添加上艺术家名字或平台名字，或直接将图像风格写出来；比如说 3D 渲染还是 2D 画风，可以从上图的结果中明显感觉到两者的区别。

最后是图像的设定，例如--q 5，代表最高图像质量；同时你也可以通过类似「8k, ultra realistic」这样的词汇来对画质做强调。第二点是画幅，--ar 3:2 表示横纵比为 3 比 2 的横幅图像，--ar 9:16 表示横纵比为 9 比 16 的纵向图像；-- v4 代表最新的第四代计算模型；

最终通过以上五个小步骤，我们可以得出一大批风格各异的草图：

再通过第一步的风格调性做筛选，可以初步得出不同类型的初稿，以满足不同的品类需求。

③ 二次修正，进阶调整

当取得满足需求的初稿之后，我们可以使用 MidJourney 的进阶功能，来提升图像质量或对图像画面做调整；以下是几个使用频率最高的的调整功能；

首先是通过点击成图下方的 U 按钮，可以放大对应序号的图片的比例，来提高其分辨率；

第二种，通过点击图片下方的 V 按钮，可以基于原描述词，生成对应序号图片的变体，画面对比母版，图片的细节会出现随机变化，例如上图的花蕊、香水瓶的外轮廓；

第三种是 Light Upscale Redo & Beta Upscale Redo，这两个功能都可以提升画质并细化效果；

最后一种也是变体生成方法，值得注意的是，需在「/setting」中开启「Remix mode」功能后，再次点 V 功能，此时可以二次编辑关键词；例如上图就通过「Remix mode」重置了图像的尺寸比例。

④ 调整输出

将二次修正后的图像，经过设计师轻量化的调整工作，例如修正细节，添加文案后，即可看到最后的效果。

以上就是利用 AI 绘图技术辅助生成 S 类商业运营设计图；可以看到其优势是短时间、大批量生成可供选择的风格背景图；同时能配合需求本身，通过 AI 模型的变体加二次描述词编辑，来满足我们的个性化要求。

结语 以上则是本文的全部内容，如果你也想通过 AI 绘图的形式来辅助提高自己的工作效率，以下几点值得仔细阅读，首先 MidJourney 前期有免费的体验额度，当额度用完后需要付费使用。其次免费用户生成的作品不能商用，只有付费用户才拥有该图片的所有权。由于 AI 绘图的版权政策时常存在变动，所以也请大家关注 Midjourney 官方信息，以免带来困扰。

随着 AI 模型能力的飞速迭代升级，现有的短板能力也会不断补齐，因此我们可以相信在不远的将来，设计师利用 AI 模型来开脑洞并辅助出图是趋势所向，但并不是说我们需要完全依赖 AI，因为设计本身是理性而浪漫的工作，仅靠随机性做设计是完全不可取且不靠谱的。更合适的思路应该是，设计师首先定义好规则与框架，从 AI 模型提供的成百上千个结果中寻找到最匹配我们诉求的结果，从而辅助我们更快更好的达成目标。另外面对日新月异的的智能工具，我们应该保持终生学习的心态，做好时刻接受新事物的挑战，才能在越来越激烈的竞争中立于不败之地。

欢迎关注作者微信公众号：「腾讯ISUX」

我知道很多人其实都有参考的习惯，但是经常进入参考的两大误区，最大误区就是从参考变成抄袭，这个是很多人的问题，经常性的抄袭会抹杀自己的创造能力，什么是创意？就是老东西和老东西的新组合，我们可以参考别人组合的思路，但是不能直接用他们的组合。还有一块误区就是我不知道参考什么，看它的画面挺好但是不知道好在哪里，也就是有心...

我知道很多人其实都有参考的习惯，但是经常进入参考的两大误区，最大误区就是从参考变成抄袭，这个是很多人的问题，经常性的抄袭会抹杀自己的创造能力，什么是创意？就是老东西和老东西的新组合，我们可以参考别人组合的思路，但是不能直接用他们的组合。还有一块误区就是我不知道参考什么，看它的画面挺好但是不知道好在哪里，也就是有心无力，或者私下想自行学习却不知道如何解析。如果你有以上的问题一定要认真的看完本文，并积极按照文章的思路进行练习尝试，本文会一次性给你说清楚如何进行合理的参考学习。

更多平面干货：

用好这5个简单实用的海报技巧，特别容易出效果！ 今天给大家分享五种针对海报的小技巧，都是不需要有什么技法基础就可以做到且效果还不错的。

阅读文章 >

欢迎关注作者微信公众号：「视研设」

虚拟直播作为腾讯云渲染的一款新产品解决方案，提供一站式的云端多样化的虚拟空间互动玩法与直播玩法；基于云渲染的 PaaS 技术，结合腾讯云超低延迟音视频技术以及 VGPU 实时渲染，实现在 web 端、小程序端、H5 端进入虚拟世界进行多样化活动的新型音视频直播解决方案。在进行多端体验设计与内容场景模型设计时，我们...

虚拟直播作为腾讯云渲染的一款新产品解决方案，提供一站式的云端多样化的虚拟空间互动玩法与直播玩法；基于云渲染的 PaaS 技术，结合腾讯云超低延迟音视频技术以及 VGPU 实时渲染，实现在 web 端、小程序端、H5 端进入虚拟世界进行多样化活动的新型音视频直播解决方案。在进行多端 体验设计 与内容场景模型设计时，我们进行了相关探索性的研究，本篇文章将介绍此项目设计探索的内容。

更多 直播设计 干货：

直播间怎么设计？细聊直播交互的17年发展史 直播长久以来一直是互联网行业最快速且强大的变现方式，在中国，直播行业起源于 2005 年，爆发于 2016 年，迄今为止尚不足 20 年，但期间已经经历语音到视频、多人交友转向个人秀场、PC 端到移动端 、网红秀场转向垂直精细化的生活领域等多个重大转变。

阅读文章 >

一、设计背景 1. 什么是虚拟直播？

虚拟直播（Virtual Space Live，VSL）是腾讯云自有的一款新的音视频技术产品，基于腾讯云音视频能力和云端渲染技术，搭配合作伙伴内容，网页开启虚拟空间直播间，仅用简单配置即可一键云上开播。

2. 项目难点

虚拟直播产品属于音视频云渲染和云直播结合的技术类 PaaS 新产品，对于客户来说云渲染以及云直播技术能力是比较抽象难懂的，在设计上如何快速展示腾讯自有的技术能力以及优势是难点之一。在客户进入官网和产品的时候如何能够更清晰的了解这款全新产品的功能以及场景也是设计需要考虑的重点。

在视觉方面，我们需要通过可视化的方式，让客户了解我们的技术类产品；并通过体验 Demo 的方式帮助客户更直观的了解到我们技术型产品的特性及优点。那么如何通过可视化的方式和体验 Demo 帮助客户理解呢？我们进行了一系列的设计探索，下面介绍一下我们是如何克服项目中的这类难点的。

二、设计策略 1. 虚拟直播产品的视觉该如何考虑呢？

在了解项目情况后，我们针对性的做了以下设计方向。

产品曝光方面，打造新产品页视觉；配合产品对外进行产品及创新设计的 PR 产品功能方面，建立与打磨 Web 和移动端的虚拟直播间 Demo 基础体验 对客方面，搭建标准化场景内容，跟进大客户设计需求服务，打造标杆案例 归纳为三个层面进行针对性设计：识别-体验-服务

设计策略是：识别层面，对于新产品，我们要树立产品在客户眼中的第一印象，打造虚拟场景互动的科技与技术力感受；体验层面，满足虚拟直播客户与间接用户的用户体验需求，打磨产品的功能体验；服务层面，也是价值核心，是做好虚拟直播间的标准化场景内容的设计。

另外，项目初期通过 PPT 和产品介绍对云渲染的 PaaS 业务做初步了解，与产品沟通了解产品的规划与商业化玩法也是很有必要的。技术产品的理解门槛要搞很多，所以前期需要进行充足的技术储备的学习，以便在技术范围内促进对产品的创新设计。

三、识别层设计 下面介绍如何让客户快速识别并生成良好的第一印象，也就是识别层的内容。

1. 客户识别路径

首先是分析客户的识别路径，以制定不同阶段的设计目标；在视觉方面，影响客户感官的主要是应用场景的图文识别，以及体验 Demo 时候的视觉识别，最终要使客户对虚拟直播产品形成“专业”“前沿”的第一印象。第一印象也是能深远影响客户对于产品使用购买的决策。

2. 认知递进

虚拟直播的客户一般是传统直播行业的客户，为了使客户能逐步了解产品，我们对于客户的感知进行了区分设计。在虚拟场景类型上，我们采用更加抽象通用的场景帮助客户快速识别了解产品内容。在产品 Demo 登录阶段，给予客户更深的虚拟直播“虚拟前沿”感受。

3. 风格象限分析

通过风格参考划出不同象限，确定风格所在象限的位置，定位视觉风格的把控。在视觉风格进行前参考是很重要的灵感来源，而风格象限帮助我们更准确的找到相应的风格的参考方向。

4. 通用抽象场景

腾讯云官网的应用场景延续腾讯蓝配色与科技质感结合，搭建抽象人物与场景。人物制作上使用成熟青年年龄段的人物，助于体现虚拟直播的专业感。

5. 加深虚拟直播风格

考虑产品 Demo 登录页风格时，我们也使用风格象限的方式，并根据“前沿”的关键词进行定位，风格上更靠近宇宙科幻与硬科幻的表现形式。

6. 风格草案

在确立了风格方向后，进行了初步的场景概念设想。由于登录界面涉及观众端和主播端，所以针对两端的用户进行了区分设计。用户侧以用户“传送”的概念搭建场景；主播端侧重展示空间“入口”的功能概念。

7. 模型视觉语言加深

场景模型在基础概念上调整了细节表现，例如硬表面的几何纹理，硬墙体的结构布局，虚拟元素的深入、加入辅助元素与场景模块等模型细化。

8. 材质质感提升

材质质感上也采用了玻璃质感、发光质感、金属反射质感、太空元素等。

9. 登录界面

登录背景视觉确立后，登录的主要操作流程中登录框、loading 等元素也延续风格进行设计，形成完整的视觉效果。

四、体验层设计 我们在体验层主要进行了基础 Demo 的体验搭建以及体验提升的规划。针对 1.0 版本搭建核心功能的体验，在保证了核心流程通畅的基础上，并根据产品的迭代进行了设计的迭代。长期规划是实现标准化的 UIKIT，客户可以使用低代码方案快速接入。

其中直播功能主要涉及基础直播推流拉流设置与开播设置等基础功能，互动功能 UI 涉及轮盘、动作、礼物、表情、视角、设置等虚拟空间内的互动玩法。

1. 主播端&观众端界面效果

积累基础框架与规范组件，产品功能交互目前正在进行更全面的梳理， 视觉设计 后续也会进行迭代。

积累基础框架与规范组件，视觉设计后续也会进行迭代。

五、服务层设计 在虚拟直播产品之前，云渲染相关的场景服务是由合作伙伴来提供的，质量难免会参差不齐，很难满足大客户对质量的要求。因为客户不同的诉求每次都是从零定制开发，客户接入到项目的上线需要 1-2 个月的开发流程，并且没有积累的腾讯自有的数字资产进行使用。这是前期业务遇到的困境，也是我们着力尝试去解决的重点问题。

我们思考通过建立标准化场景服务的方式来解决这个问题。通过核心场景的搭建及组合就可以生产适配主要应用场景的方案 ，降低了成本与定制场景和开发时间，形成较为稳定的高质量场景。相对于竞品来说，低门槛的接入也更具竞争优势。同时，通过腾讯自有的标准化场景服务也可以积累标准案例与客户，达到双赢的局面。

1. 产品结构

要建立标准化的场景服务，我们先对虚拟直播间的产品结构我们也先进行了分析，以此为切入点来挖掘具体可实现的场景类型。虚拟直播间按照不同的内容类型来提供相应的客户场景的服务，划分为虚拟会议、多人娱乐互动、虚拟人、MR、多人虚拟场馆。我们是从应用比较广泛的虚拟场馆入手来搭建场景的。

在对虚拟场馆标准化内容设计过程中，我们进行了以下内容的设计思考。

2. 应用场景类型

类似于现实中的场馆，多人虚拟场馆不仅可以满足虚拟赛事这类竞技类的虚拟直播，也可以满足综艺、会务、活动等多元化的场景需求，并且腾讯云主要直播类型的大客户斗鱼（直播平台）、B 站（综合视频直播平台）也是对于这类场景项目需求比较大。

3. 提炼场景内容

虚拟场景也是参照现实而来的，主要是需要满足用户身临其境和新奇好玩的体验与视觉感受。我们首先提炼出虚拟场景中需要参照现实场景的内容。场景的承载载体-场馆；场景的视觉焦点核心-舞台屏幕（虚拟屏幕可以播放视频或者直播画面）；用户的参与空间-观众席；场景氛围的烘托-场景道具，包括场景装饰还有礼物特效与场景特效等动态视觉呈现效果等。

4. 设定场馆参数

就像体育馆有大有小，我们在做虚拟场馆的时候也根据不同场景设计了不同的规格尺寸，例如大型赛事适合四面屏（四面观众都能看到屏幕内容）超 2000 名虚拟观众的椭圆形虚拟场馆；小型辩论赛适合中小场景的单面屏扇形场馆。

5. 设定场馆结构

场馆的结构外形和内部结构的设计使用流线型设计，使整体场馆的科技感更突出，在看台方面参照现实场馆的设定，增加了多层空间的设计。此外也增加了虚拟浮空的看台，凸显虚拟场景特点。

6. 虚拟场景内容

根据现实场景，制作相应的虚拟场景内容，大的场馆外形确定后进行内部虚拟屏幕、虚拟观众席、虚拟场景道具的设定。屏幕方面使用主屏幕和辅助屏的方式，采用斜角几何形体构建模型的科技感形体。虚拟道具方面使用点阵、魔方等内容丰富场景的虚拟科技感受。

7. 虚拟场景元素

设计场景中的主要内容划分后并继续拆分，进行元素的设定，氛围灯光，广告牌等辅助元素丰富场馆的可扩展性。由此，对整个场馆的主要内容元素构成解构。

8. 场景角度预设

通过不同角度的场景感受调整设计的内容细节，使场景在不同感官角度中可以展现其特点。在虚拟直播中，通过互动玩法也能感受到不同角度的视觉感受。由此，场景角度预设可以提前预览场景优质的角度效果，为观众带来全面的视觉感受。

9. 场景风格

以”潮流“”赛博“的虚拟感受切入，打造场景的科技虚拟视觉风格。基于虚拟场景的的应用场景特点以及考虑通用性，以科幻赛博的氛围烘托整个场馆的气氛，达到最终虚拟直播活动展示的效果。

10. 材质质感

深色的场景主基调和地面墙面的纹理表现，体现场景的真实感，发光材质突出屏幕区域的炫彩屏幕，反射与薄膜材质应用于地面映射出环境的光线氛围。

11. 场馆效果

场馆全景的视觉效果，通过导播镜头可以看到场景全景氛围。

12. 近景效果

在发光材质、科技元素等视觉元素叠加下，展现屏幕近景的酷炫效果，屏幕中央示意播放的视频素材。

13. 模型优化

对接开发的过程中，还需要对设计的 3D 模型进行面优化与拓扑。优化后的面数减少 60%以上，可以减少开发渲染的内存与流量。模型、材质贴图一起打包后交付开发，导入引擎。

14. 场景适配

针对 B 端的客户服务，定制化需求一直以来是其中的难点之一；我们建立标准场景后就快速帮助斗鱼上线了 CS GO 大师赛项目，并取得了不错的虚拟直播效果。那么不同客户对于场景的需求的差异便是我们下一步思考的内容。针对日益增长的客户场景需求，我们的策略是建立标准化场景体系，根据标准组件内容组合适配不同场景。

在完成基础场景内容后，开始考虑如何满足客户的需求进行场景适配。主要是通过扩展组件与扩展样式进行。

在完成基础场景内容后开始考虑如何满足客户的需求进行场景适配。主要是通过扩展组件与扩展样式进行。

15. 扩展组件组合

扩展的组件进行分类整理，分为氛围道具、屏幕组合、场馆设施、氛围灯光等关键影响因素。对于相应类型的具体模型进行扩展，例如氛围道具中道具扩展有魔方模型，光环模型，突刺模型等。同样，在屏幕组合的时候也是可以将多块屏幕进行组合形成组合效果。

16. 组件组合场景

根据不同的屏幕，氛围道具，灯光等模型的变换，组合场景。形成下图中不同的场景效果。

17. 控制灯光颜色

场景灯光颜色氛围的不同也是渲染不同场景格调的主要元素。除了相应的客户的品牌色之外，同样场景下不同的配色可以用于不同活动的氛围，例如”热闹“”静谧“”科技“”对抗“等颜色情绪的表达。

18. 材质质感扩展

基础材质之外也扩展了其他常用主题的材质质感，例如金融方向的金属与黄金的贵重质感；科技方向的轻透与硬朗的智能感受。

19. 适配主题

通过不同的颜色、质感、组件搭配出适合场景主题的最终效果。

所以满足客户多样化的需求，主要是通过丰富场景组件，设定灯光材质，来生成不同的需求场景效果。

总结来说，场景标准化是需要对场景内容进行解构与标准内容的来设定的，例如基础场馆大小，屏幕组合，道具组件等；通过扩展的方式，对不同的内容进行组合搭配，最终生产不同需求的虚拟应场景，以用于虚拟年会、虚拟演唱会、虚拟赛事等客户的虚拟活动。

目前腾讯云设计中心为虚拟直播间生产的虚拟场景已被 3 家大客户应用，包括央视、斗鱼直播平台、成都电视台。其中央视大客户对于场景设计没有提出修改，也间接印证了客户在场景方面的满意度。我们也为场景的推广进行了图片宣传的设计与 PR 稿部分内容的编写。当然在内部合作上我们也和虚拟人项目进行合作。

六、设计总结 虚拟直播作为一款新场景，新技术，新体验的云产品，腾讯云设计中心进行了从零开始的设计探索，并取得了初步的成效。

通过虚拟直播项目我们也进行了总结，以归此类技术产品售前售后的视觉体验设计探索方法：

1. 识别层

在识别层使客户形成专业、前沿的良好感受；通过主视觉场景快速了解产品应用场景，帮助客户形成虚拟直播产品专业高品质印象。

2. 体验层

在体验层搭建虚拟直播互动体验、建立视觉规范、版本迭代，并规划后续进行 UIKIT 的搭建。

3. 服务层

在服务层帮助客户快速高效高质量接入，形成了标准化高质量的虚拟场景体验，满足客户不同应用场景的需求。助力央视、斗鱼、成都电视台等大客户相应活动的上线，为虚拟直播产品树立了标杆案例，也帮助客户实现了收入与流量的提升，实现设计最终价值。

欢迎关注作者微信公众号：「腾讯设计族」

我知道很多人其实都有参考的习惯，但是经常进入参考的两大误区，最大误区就是从参考变成抄袭，这个是很多人的问题，经常性的抄袭会抹杀自己的创造能力，什么是创意？就是老东西和老东西的新组合，我们可以参考别人组合的思路，但是不能直接用他们的组合。还有一块误区就是我不知道参考什么，看它的画面挺好但是不知道好在哪里，也就是有心...

我知道很多人其实都有参考的习惯，但是经常进入参考的两大误区，最大误区就是从参考变成抄袭，这个是很多人的问题，经常性的抄袭会抹杀自己的创造能力，什么是创意？就是老东西和老东西的新组合，我们可以参考别人组合的思路，但是不能直接用他们的组合。还有一块误区就是我不知道参考什么，看它的画面挺好但是不知道好在哪里，也就是有心无力，或者私下想自行学习却不知道如何解析。如果你有以上的问题一定要认真的看完本文，并积极按照文章的思路进行练习尝试，本文会一次性给你说清楚如何进行合理的参考学习。

更多平面干货：

用好这5个简单实用的海报技巧，特别容易出效果！ 今天给大家分享五种针对海报的小技巧，都是不需要有什么技法基础就可以做到且效果还不错的。

阅读文章 >

欢迎关注作者微信公众号：「视研设」

互联网产品往往都有自身的生命周期，处在不同阶段的产品，对应的产品目标也有所不同。那么在不同阶段，应该如何对产品进行功能体验升级呢？本文作者结合自身的工作经验分享了他的看法，一起来看一下吧。

互联网产品往往都有自身的生命周期，处在不同阶段的产品，对应的产品目标也有所不同。那么在不同阶段，应该如何对产品进行功能 体验升级 呢？本文作者结合自身的工作经验分享了他的看法，一起来看一下吧。

互联网产品往往都有自身的生命周期，处在不同阶段的产品，对应的产品目标也有所不同。产品刚刚诞生之初往往以核心功能优先，用来满足一类人的共性需求，此时产品主要满足“可用”的目的。而成熟期的产品，由于用户量上升，功能也比较完善，产品目标就变为保证这群用户的留存与转化，此时产品就需要满足“好用”跟“易用”的目的。而这个时候，也就是交互 设计师 发力的时候。

笔者目前负责的产品就是处于较成熟的阶段，有一定的用户群体，功能也比较完善。但是由于前期都是满足产品的功能架构，导致功能的操作流程冗余，且体验不佳。所以当前主要就是对现有产品的各个功能与流程进行走查（产品体检），然后根据产品的排期，做后续的功能体验升级，那该如何去做？本篇文章笔者就结合自身的工作经验来跟大家聊聊。

更多体验升级案例：

大厂如何做改版设计？京东云官网视觉升级实战复盘！ 大厂的设计改版流程是怎样的？

阅读文章 >

一、了解业务与使用场景 产品功能是基于业务属性及用户使用场景设计的，如果不深入了解就意味着设计出来的功能可能会跟预期发生偏离。由于之前没有参与相关行业的设计，以及刚来公司不久，所以在进行功能优化之前，我都会去主动熟悉当前的业务目标跟场景痛点，确保产出方案的合理性。

举个例子：

电商产品中，待付款订单是指用户在提交订单以后，由于某种原因取消支付或支付失败后，订单所呈现的状态，用户可在待付款列表中查看待付款的订单，以便发起继续付款等操作。

以下是公司产品当前版本的待付款列表：

在了解功能的业务场景以后，针对用户的使用场景产生了疑问，用户是基于什么原因没有完成支付的呢？根据团队成员的脑暴及前期的用户调研，主要总结出了两点原因：第一、对应支付账户余额不足，返回待支付页面选择新的支付方式；第二、暂时不想买了或者部分不想买了，从而退出支付。根据用户在该场景下的痛点出发，来看看当前功能的合理性。

针对第一点，如果用户是为了更换付款方式，那么在返回待付款页面时，第一操作应是选择新的支付方式。而当前流程是让用户提交订单到选择支付方式页面，再进行选择，无疑是不符合用户的操作预期且操作链路变长，所以我们可以考虑将付款方式前置，放在待付款页面供用户重新选择。

针对第二点，如果用户是不想买了，那返回后就没有其他操作了，但是如果仅仅是部分不想买了而退出支付，那就需要考虑用户如何去支付部分商品。目前公司的业务是待付款状态会将用户提交的不同商家的商品进行拆分，所以当用户想买其中的某几样时只能单独分次购买，比较麻烦，而为了让用户便捷支付，考虑加入“批量支付”功能与流程来解决当前的用户痛点。

二、走查功能流程与体验 所谓“知己知彼、百战不殆”，走查功能流程就是知彼的过程。走查也不是仅仅就截几张图这么简单，根据我平时走查的流程，我把走查分为了前、中、后三个阶段。

1. 走查前：明确走查目标，提前做好准备工作

走查是带有明确目的性的，在开始前明确此次的目标，能减少在走查的过程中减少弯路。比如我们此次的目标是“优化用户下单的链路”，那我们就应该在用户下单中的流程进行走查并定位问题，找到影响用户流程的因子，而下单后的陪伴由于不在此次目标中，就可以弱化。

那么走查前要做哪些准备呢？我们知道一个完整的功能与流程除了正常流程外，还有很多“非正常”的存在，比如各缺省状态、各弹窗等等。所以为了能覆盖该功能所有的流程与页面，我们需要与测试同事合作，除了申请测试账号用来查看完善的流程，还需要根据不同的情况为账号赋予不同的权限与属性。

2. 走查中：根据页面的信息架构与操作流程定位问题

如何开展走查工作？一般我都会分成两部分进行：

第一，明确页面信息结构合理性。主要包括页面的信息层级以及功能按钮的位置等内容。根据页面当前信息呈现，来判断是否存在问题，比如信息过于分散或者重要信息不明显等，以及根据页面的功能特点，来判断按钮是否有优化的空间，比如按钮 文案 是否有歧义，主要操作按钮位置是否难以点击等。

第二，梳理各触点操作流程。主要是对页面中所有可点击区域，如卡片、按钮等进行逐一点击，来判断当前流程是否有问题。比如跳转的页面是否符合用户的心理预期，用户完成一次任务的跳转次数是否过多等等。

那么我们又如何判断页面是否有问题呢？虽然问题的产生大多时候都是设计师的主观感受，但是绝不是说仅代表设计师的个人观点。交互设计师往往在设计流程的时候是站在用户的角度，所以在走查功能的时候也是通过用户的视角来看流程的合理性。同时为了提出问题的专业性，我们还需要丰富自己的专业知识，比如通过尼尔森十大原则、设计心理学等相关用户研究结论，来辅助与验证我们提出问题的合理性。

3. 走查后：输出相关功能体验文档

所谓“好记性不如烂笔头”，在走查的时候我们需要对定位的问题进行记录，从而为后面能提出体验升级需求与迭代做依据。那该如何制作功能体验文档呢？

一般我会先将本次走查定位到的问题做个数量的汇总；然后根据“是否严重影响操作流程与体验”做个程度划分；接着将所有有问题的页面与流程进行展示，并记录问题内容；最后根据这些问题，梳理后续的优化方向。

三、竞品分析 通过前两步，已经知道了该功能的业务目标、用户使用场景与痛点以及当前存在的问题，接下来就需要针对当前问题去寻找合适的解决方案了。竞品分析是一种很好的帮助我们形成方案的办法，也就是“知彼”的过程。目前市面上对竞品分析的方法介绍已经很多很全，这里就不再赘述了。但是我想通过一个案例，来聊聊我在做功能的时候是如何利用竞品来完善自身方案的。

在做公司搜索功能的体验升级时，发现当前版本的搜索框，采用的是默认关键词填充，即“输入关键词搜索”，走查时发现该方式主要存在三个问题：第一、占位符文案并没有明确告知用户能用什么方式搜索；第二、该形式占位符文案无法形成有效的点击率转化。带着这些问题，我进行了竞品分析。

通过对不同类型竞品进行分析后发现，目前大部分的搜索框占位都采取“关键词推荐”的形式，即动态轮播搜索关键词。而选择什么关键词一般基于两点：用户行为数据以及后台配置。那是不是意味着当前产品就要加入这个功能呢？这要基于当前的业务属性来进行考量。

首先，根据用户行为展示关键词，就需要对用户的操作行为进行埋点与分析，如果直接复用竞品内容而不考虑当前技术成本与难度，就会使这次的体验升级陷入困境。

其次，当前公司业务是不是需要关键词推荐。目前公司商品还不够完善，所以经常有用户搜不到的情况，加上经常有折扣商品或者希望用户下单的商品存在，所以从业务出发，是可以将这些商品配置成搜索关键词，增加用户“被动搜索”的权重，减少因用户主动搜索为空带来的挫败感以及增加目标商品的转化。

所以，竞品分析不是单纯的“抄一个功能”，而是通过对当前市面上产品的分析，了解该功能市面上的常规玩法，再结合目前的产品与业务属性，来权衡是否有必要引用该玩法，或者做定制化的优化与升级。

四、方案产出 通过上述的步骤与流程，就差不多已经完成了产出方案前的准备工作，接下来就是针对本次的升级改版输出交互方案，而为了让方案能紧跟产品开发节奏以及适应不同的场景，我一般都会把整个方案的产出分为以下四步：

1. 主要功能页面原型制作

这个阶段主要是针对功能的主要页面进行信息布局以及功能入口的完善，来展示改版后的功能能完成用户什么操作，并通过对比原有页面，组织产品及相关人员对方案进行评审，来判断方案的可行性（技术可行性、业务可行性等）

2. 二级页面及异常状态页面补充

这个阶段是在确定了主要功能页面后，进行的次级页面以及不同状态页面的补充，主要是将该功能所有页面进行设计与呈现，主要目的是便于 UI 设计师根据当前原型页面数量评估时间。

3. 所有页面串联

这个阶段是将所有的原型页面产出完成后，对所有的页面分场景、分功能串联流程，主要目的是组织技术等人员在进行交互方案宣讲时，能便于知道各触点、各页面的跳转流程与逻辑。

4. 交互文档补充

这个阶段是在进行交互评审后，此时已经确定了此次迭代的整个交互方案，根据前期的设计想法以及评审中反馈的建议，进行所有页面的交互文档的输出与补充，主要目的是为了留存方案的交互逻辑，便于技术测试人员在开发以及编写测试用例时查看。

五、验证与反馈 交互设计师的工作不是在产出方案以后就结束了。功能体验升级往往是用户体验设计师驱动的，而如何才能证明此次迭代的价值，除了前期定位的当前版本存在的问题说明外，最主要的还是要验证此次迭代版本的效果，而如何验证？一般我都通过如下两个方式进行：

1. 跟进用户反馈

由于公司属性，产品的用户都有对应的客户运营人员，这样就便于收集用户使用产品及功能的意见反馈，而一般的体验升级的需求也往往是基于用户的“吐嘈声”中诞生的，所以迭代上线后，持续跟进用户的使用反馈，能很好的验证此次方案的效果，以及寻找新的突破口为产品的后续迭代做准备。

2. 收集相关数据

一般在进行功能迭代升级时，为了能后续验证方案的效果，会进行相关的数据埋点。以上述提到的搜索为例，在设计“轮播关键词填充”的功能时，就需要对用户搜索对应推荐关键词的数量以及最终的购买转化率做个跟踪统计，从而来辅助判断此次功能升级的效果。

六、总结 以上，就是笔者根据过往的工作经验，分享的一篇关于如何做体验升级的文章，后续也会继续分享自己在实际工作中的一些产品与交互心得与感想，经验有限，欢迎大家批评指正与交流。

互联网产品往往都有自身的生命周期，处在不同阶段的产品，对应的产品目标也有所不同。那么在不同阶段，应该如何对产品进行功能体验升级呢？本文作者结合自身的工作经验分享了他的看法，一起来看一下吧。

互联网产品往往都有自身的生命周期，处在不同阶段的产品，对应的产品目标也有所不同。那么在不同阶段，应该如何对产品进行功能 体验升级 呢？本文作者结合自身的工作经验分享了他的看法，一起来看一下吧。

互联网产品往往都有自身的生命周期，处在不同阶段的产品，对应的产品目标也有所不同。产品刚刚诞生之初往往以核心功能优先，用来满足一类人的共性需求，此时产品主要满足“可用”的目的。而成熟期的产品，由于用户量上升，功能也比较完善，产品目标就变为保证这群用户的留存与转化，此时产品就需要满足“好用”跟“易用”的目的。而这个时候，也就是交互 设计师 发力的时候。

笔者目前负责的产品就是处于较成熟的阶段，有一定的用户群体，功能也比较完善。但是由于前期都是满足产品的功能架构，导致功能的操作流程冗余，且体验不佳。所以当前主要就是对现有产品的各个功能与流程进行走查（产品体检），然后根据产品的排期，做后续的功能体验升级，那该如何去做？本篇文章笔者就结合自身的工作经验来跟大家聊聊。

更多体验升级案例：

大厂如何做改版设计？京东云官网视觉升级实战复盘！ 大厂的设计改版流程是怎样的？

阅读文章 >

一、了解业务与使用场景 产品功能是基于业务属性及用户使用场景设计的，如果不深入了解就意味着设计出来的功能可能会跟预期发生偏离。由于之前没有参与相关行业的设计，以及刚来公司不久，所以在进行功能优化之前，我都会去主动熟悉当前的业务目标跟场景痛点，确保产出方案的合理性。

举个例子：

电商产品中，待付款订单是指用户在提交订单以后，由于某种原因取消支付或支付失败后，订单所呈现的状态，用户可在待付款列表中查看待付款的订单，以便发起继续付款等操作。

以下是公司产品当前版本的待付款列表：

在了解功能的业务场景以后，针对用户的使用场景产生了疑问，用户是基于什么原因没有完成支付的呢？根据团队成员的脑暴及前期的用户调研，主要总结出了两点原因：第一、对应支付账户余额不足，返回待支付页面选择新的支付方式；第二、暂时不想买了或者部分不想买了，从而退出支付。根据用户在该场景下的痛点出发，来看看当前功能的合理性。

针对第一点，如果用户是为了更换付款方式，那么在返回待付款页面时，第一操作应是选择新的支付方式。而当前流程是让用户提交订单到选择支付方式页面，再进行选择，无疑是不符合用户的操作预期且操作链路变长，所以我们可以考虑将付款方式前置，放在待付款页面供用户重新选择。

针对第二点，如果用户是不想买了，那返回后就没有其他操作了，但是如果仅仅是部分不想买了而退出支付，那就需要考虑用户如何去支付部分商品。目前公司的业务是待付款状态会将用户提交的不同商家的商品进行拆分，所以当用户想买其中的某几样时只能单独分次购买，比较麻烦，而为了让用户便捷支付，考虑加入“批量支付”功能与流程来解决当前的用户痛点。

二、走查功能流程与体验 所谓“知己知彼、百战不殆”，走查功能流程就是知彼的过程。走查也不是仅仅就截几张图这么简单，根据我平时走查的流程，我把走查分为了前、中、后三个阶段。

1. 走查前：明确走查目标，提前做好准备工作

走查是带有明确目的性的，在开始前明确此次的目标，能减少在走查的过程中减少弯路。比如我们此次的目标是“优化用户下单的链路”，那我们就应该在用户下单中的流程进行走查并定位问题，找到影响用户流程的因子，而下单后的陪伴由于不在此次目标中，就可以弱化。

那么走查前要做哪些准备呢？我们知道一个完整的功能与流程除了正常流程外，还有很多“非正常”的存在，比如各缺省状态、各弹窗等等。所以为了能覆盖该功能所有的流程与页面，我们需要与测试同事合作，除了申请测试账号用来查看完善的流程，还需要根据不同的情况为账号赋予不同的权限与属性。

2. 走查中：根据页面的信息架构与操作流程定位问题

如何开展走查工作？一般我都会分成两部分进行：

第一，明确页面信息结构合理性。主要包括页面的信息层级以及功能按钮的位置等内容。根据页面当前信息呈现，来判断是否存在问题，比如信息过于分散或者重要信息不明显等，以及根据页面的功能特点，来判断按钮是否有优化的空间，比如按钮 文案 是否有歧义，主要操作按钮位置是否难以点击等。

第二，梳理各触点操作流程。主要是对页面中所有可点击区域，如卡片、按钮等进行逐一点击，来判断当前流程是否有问题。比如跳转的页面是否符合用户的心理预期，用户完成一次任务的跳转次数是否过多等等。

那么我们又如何判断页面是否有问题呢？虽然问题的产生大多时候都是设计师的主观感受，但是绝不是说仅代表设计师的个人观点。交互设计师往往在设计流程的时候是站在用户的角度，所以在走查功能的时候也是通过用户的视角来看流程的合理性。同时为了提出问题的专业性，我们还需要丰富自己的专业知识，比如通过尼尔森十大原则、设计心理学等相关用户研究结论，来辅助与验证我们提出问题的合理性。

3. 走查后：输出相关功能体验文档

所谓“好记性不如烂笔头”，在走查的时候我们需要对定位的问题进行记录，从而为后面能提出体验升级需求与迭代做依据。那该如何制作功能体验文档呢？

一般我会先将本次走查定位到的问题做个数量的汇总；然后根据“是否严重影响操作流程与体验”做个程度划分；接着将所有有问题的页面与流程进行展示，并记录问题内容；最后根据这些问题，梳理后续的优化方向。

三、竞品分析 通过前两步，已经知道了该功能的业务目标、用户使用场景与痛点以及当前存在的问题，接下来就需要针对当前问题去寻找合适的解决方案了。竞品分析是一种很好的帮助我们形成方案的办法，也就是“知彼”的过程。目前市面上对竞品分析的方法介绍已经很多很全，这里就不再赘述了。但是我想通过一个案例，来聊聊我在做功能的时候是如何利用竞品来完善自身方案的。

在做公司搜索功能的体验升级时，发现当前版本的搜索框，采用的是默认关键词填充，即“输入关键词搜索”，走查时发现该方式主要存在三个问题：第一、占位符文案并没有明确告知用户能用什么方式搜索；第二、该形式占位符文案无法形成有效的点击率转化。带着这些问题，我进行了竞品分析。

通过对不同类型竞品进行分析后发现，目前大部分的搜索框占位都采取“关键词推荐”的形式，即动态轮播搜索关键词。而选择什么关键词一般基于两点：用户行为数据以及后台配置。那是不是意味着当前产品就要加入这个功能呢？这要基于当前的业务属性来进行考量。

首先，根据用户行为展示关键词，就需要对用户的操作行为进行埋点与分析，如果直接复用竞品内容而不考虑当前技术成本与难度，就会使这次的体验升级陷入困境。

其次，当前公司业务是不是需要关键词推荐。目前公司商品还不够完善，所以经常有用户搜不到的情况，加上经常有折扣商品或者希望用户下单的商品存在，所以从业务出发，是可以将这些商品配置成搜索关键词，增加用户“被动搜索”的权重，减少因用户主动搜索为空带来的挫败感以及增加目标商品的转化。

所以，竞品分析不是单纯的“抄一个功能”，而是通过对当前市面上产品的分析，了解该功能市面上的常规玩法，再结合目前的产品与业务属性，来权衡是否有必要引用该玩法，或者做定制化的优化与升级。

四、方案产出 通过上述的步骤与流程，就差不多已经完成了产出方案前的准备工作，接下来就是针对本次的升级改版输出交互方案，而为了让方案能紧跟产品开发节奏以及适应不同的场景，我一般都会把整个方案的产出分为以下四步：

1. 主要功能页面原型制作

这个阶段主要是针对功能的主要页面进行信息布局以及功能入口的完善，来展示改版后的功能能完成用户什么操作，并通过对比原有页面，组织产品及相关人员对方案进行评审，来判断方案的可行性（技术可行性、业务可行性等）

2. 二级页面及异常状态页面补充

这个阶段是在确定了主要功能页面后，进行的次级页面以及不同状态页面的补充，主要是将该功能所有页面进行设计与呈现，主要目的是便于 UI 设计师根据当前原型页面数量评估时间。

3. 所有页面串联

这个阶段是将所有的原型页面产出完成后，对所有的页面分场景、分功能串联流程，主要目的是组织技术等人员在进行交互方案宣讲时，能便于知道各触点、各页面的跳转流程与逻辑。

4. 交互文档补充

这个阶段是在进行交互评审后，此时已经确定了此次迭代的整个交互方案，根据前期的设计想法以及评审中反馈的建议，进行所有页面的交互文档的输出与补充，主要目的是为了留存方案的交互逻辑，便于技术测试人员在开发以及编写测试用例时查看。

五、验证与反馈 交互设计师的工作不是在产出方案以后就结束了。功能体验升级往往是用户体验设计师驱动的，而如何才能证明此次迭代的价值，除了前期定位的当前版本存在的问题说明外，最主要的还是要验证此次迭代版本的效果，而如何验证？一般我都通过如下两个方式进行：

1. 跟进用户反馈

由于公司属性，产品的用户都有对应的客户运营人员，这样就便于收集用户使用产品及功能的意见反馈，而一般的体验升级的需求也往往是基于用户的“吐嘈声”中诞生的，所以迭代上线后，持续跟进用户的使用反馈，能很好的验证此次方案的效果，以及寻找新的突破口为产品的后续迭代做准备。

2. 收集相关数据

一般在进行功能迭代升级时，为了能后续验证方案的效果，会进行相关的数据埋点。以上述提到的搜索为例，在设计“轮播关键词填充”的功能时，就需要对用户搜索对应推荐关键词的数量以及最终的购买转化率做个跟踪统计，从而来辅助判断此次功能升级的效果。

六、总结 以上，就是笔者根据过往的工作经验，分享的一篇关于如何做体验升级的文章，后续也会继续分享自己在实际工作中的一些产品与交互心得与感想，经验有限，欢迎大家批评指正与交流。

物联网产品的色彩运用，一般分为主色、辅助色、功能色和中性色。主色与企业品牌色相关；辅助色主要用于区别分类；功能色就是成功提示、警告提示和错误提示；中性色主要是背景、文字、线条和线框。系统的色彩规范制定能提升设计师的工作效率。

物联网产品的色彩运用，一般分为主色、辅助色、功能色和中性色。主色与企业品牌色相关；辅助色主要用于区别分类；功能色就是成功提示、警告提示和错误提示；中性色主要是背景、文字、线条和线框。系统的色彩规范制定能提升设计师的工作效率。

更多 色彩规范 制定干货：

案例实操！从零开始教你构建产品颜色规范 前言 这一次的北农商银行的项目，是在企业版手机银行 App 上加入企业 OA 的功能。

阅读文章 >

IBMS 是建筑智能管理系统，整个系统的运行中，辅助色和功能色运用较多。系统中时常需要运用颜色区分分类的情况，但是需要保持众多颜色的整体性。

一、认识 HSB 我们日常使用的软件调色盘，一般用 HEX、RGB 或是 HSB 三种进行调色。我个人比较喜欢用 HSB 进行调色，可以通过数值判断颜色的大致情况。

1. 色相（hues）

色相就是色相环的展开图。如图所示的色相环展开成平面的色相条，表达方式依然根据色相环的度数一样来呈现。

2. 饱和度（saturation）

以红色为例，饱和度越多，则红色越多；饱和度越少，则红色越少，趋近白色。

3. B：亮度（brightness）

以红色为例，亮度越高，则红色越纯；亮度越低，则红色越混，趋近黑色。

HSB 的色值就是根据色相、饱和度和亮度组成，只要记得色相的大概方位，搭配饱和度和亮度，基本能判定颜色。

二、选择色彩 明白 HSB 的原理后，可以根据其原理选择具有系统性的色彩。

首先，保持饱和度和亮度为 100%的情况下，改变色相的数值。理论上是数值和颜色一一对应，但是并不是每个数值都能正常显示出相应的颜色，我们需要确定安全数值的颜色，即该数值能正常显示出来的颜色。

1. 如图所示，以 10°为基本间隔数值，依次呈现相对应的 36 个饱和度和亮度为 100%的色相。

2. 由于部分颜色较为相似，所以进行筛选后，选定 12 个色相。

接着开始调整饱和度和亮度。上图的饱和度和明度均为 100%，由于系统会经常展示在大屏中，过于艳丽的色彩显得刺眼。所以接下来的任务是将饱和度和明度降到一个视觉舒适的状态。

3. 首先把饱和度降到 90%得到下面的色卡。

4. 其次在色卡上叠加一层纯黑色（#000000），并把叠加模式改成色相，得到下面的色卡。

中性色系可以看到标号的颜色明显有些跳跃，所以接下来要调整这些相对比较跳跃的颜色的饱和度和明度。

5. 除了较为明显的颜色可以用叠加黑色的方法来修改，其他颜色也要进行视觉修正。最好是以 2 为单位进行微调，直到达到较为完善的效果。

6. 最后我们得到下图较为系统的色卡。

三、制作颜色梯度 IBMS 后台管理系统中，时常有同一个颜色需要用不同级别的情况。我们可以按照以上的步骤把所有的颜色的层级都列出来，用的时候直接从中选取就可以。但是，这样修改颜色的时候会有较大的工作量，所以为了工作的便利，以下运用改变透明度的方法形成颜色梯度。

1.  一般情况下，把一个色相分为 10 个梯度。当前的颜色为第五梯度，需要加深 4 个，减淡 5 个。以红色为例。

以红色为中心，前面四个梯度是叠加黑色，并从小到大依次增加透明度形成红色的从浅到深。后面五个梯度是叠加白色，并从小到大依次增加透明度形成红色的从深到浅。由此以后更改颜色的只要调整红色就可以调整红色的 10 个梯度。

2. 运用这样的办法，做好整个色彩的梯度。

四、功能色

IBMS 后台管理系统中，经常会涉及到功能的区分，例如成功、警告和错误。我们用绿色代表成功；橙色代表警告；红色代表错误。一般运用第五梯度的颜色。

五、中性色

中性色的制作与有彩色的方法一样，通过更改叠加色的透明度来形成最后的梯度色彩。如图所示，在白底上，叠加黑色，依次改变黑色的透明度，实现中性色的梯度。在此需要注意的是，叠加的黑色为冷色调。背景、线条、线框和文字用冷色系与其他有彩色有相互平衡的作用。左侧第一个为纯黑色，接下来的中性色是依次改变黑色透明度的方法得到。

六、色彩命名 在颜色调整完毕之后，接下来非常重要的是命名，如果公司有完善的命名规范，则可按照公司的规则来命名，如果没有，那么设计师一定要制定好命名的规则。颜色作为通用组件之一，一般按照“颜色-色相-编号”去命名，例如“color-red-red01”。颜色相关的功能性组件可以额外设定。

七、WCAG 标准验证颜色

为了能够让视觉障碍人群正常的阅读信息，所以我们都会用 WCAG 标准验证所选的颜色是否合适。其中适用性原则就是文本颜色与背景颜色的比值不能低于 4.5:1。测试的网站很多，只要输入色彩的 HEX 值即可。以下是我自己常用的测试网站： https://contrastchecker.com/

方法如图所示，上图为标准的用色，下图为不标准的用色。

总结 运用 HSB 的方法选定色彩，再根据饱和度和明度制作色彩梯度。同理制作中性色的色彩梯度。功能色需要提前定制好，不要与其他颜色混用造成不必要的麻烦，并在项目中做好命名。在使用的过程中，需要运用 WCAG 标准检验字体和背景的色彩是否符合标准。这就是个人工作中制定完整的 IBMS 后台管理系统色彩规范的方法。

工作中一直保持学习的状态，很多个人认为好用的方法取自别人的分享，非常感谢前辈们倾囊相授。做好分享，希望大神们多多指教，也希望能为其他人提供一些灵感，最重要的是作为自己工作学习的总结。

物联网产品的色彩运用，一般分为主色、辅助色、功能色和中性色。主色与企业品牌色相关；辅助色主要用于区别分类；功能色就是成功提示、警告提示和错误提示；中性色主要是背景、文字、线条和线框。系统的色彩规范制定能提升设计师的工作效率。

物联网产品的色彩运用，一般分为主色、辅助色、功能色和中性色。主色与企业品牌色相关；辅助色主要用于区别分类；功能色就是成功提示、警告提示和错误提示；中性色主要是背景、文字、线条和线框。系统的色彩规范制定能提升设计师的工作效率。

更多 色彩规范 制定干货：

案例实操！从零开始教你构建产品颜色规范 前言 这一次的北农商银行的项目，是在企业版手机银行 App 上加入企业 OA 的功能。

阅读文章 >

IBMS 是建筑智能管理系统，整个系统的运行中，辅助色和功能色运用较多。系统中时常需要运用颜色区分分类的情况，但是需要保持众多颜色的整体性。

一、认识 HSB 我们日常使用的软件调色盘，一般用 HEX、RGB 或是 HSB 三种进行调色。我个人比较喜欢用 HSB 进行调色，可以通过数值判断颜色的大致情况。

1. 色相（hues）

色相就是色相环的展开图。如图所示的色相环展开成平面的色相条，表达方式依然根据色相环的度数一样来呈现。

2. 饱和度（saturation）

以红色为例，饱和度越多，则红色越多；饱和度越少，则红色越少，趋近白色。

3. B：亮度（brightness）

以红色为例，亮度越高，则红色越纯；亮度越低，则红色越混，趋近黑色。

HSB 的色值就是根据色相、饱和度和亮度组成，只要记得色相的大概方位，搭配饱和度和亮度，基本能判定颜色。

二、选择色彩 明白 HSB 的原理后，可以根据其原理选择具有系统性的色彩。

首先，保持饱和度和亮度为 100%的情况下，改变色相的数值。理论上是数值和颜色一一对应，但是并不是每个数值都能正常显示出相应的颜色，我们需要确定安全数值的颜色，即该数值能正常显示出来的颜色。

1. 如图所示，以 10°为基本间隔数值，依次呈现相对应的 36 个饱和度和亮度为 100%的色相。

2. 由于部分颜色较为相似，所以进行筛选后，选定 12 个色相。

接着开始调整饱和度和亮度。上图的饱和度和明度均为 100%，由于系统会经常展示在大屏中，过于艳丽的色彩显得刺眼。所以接下来的任务是将饱和度和明度降到一个视觉舒适的状态。

3. 首先把饱和度降到 90%得到下面的色卡。

4. 其次在色卡上叠加一层纯黑色（#000000），并把叠加模式改成色相，得到下面的色卡。

中性色系可以看到标号的颜色明显有些跳跃，所以接下来要调整这些相对比较跳跃的颜色的饱和度和明度。

5. 除了较为明显的颜色可以用叠加黑色的方法来修改，其他颜色也要进行视觉修正。最好是以 2 为单位进行微调，直到达到较为完善的效果。

6. 最后我们得到下图较为系统的色卡。

三、制作颜色梯度 IBMS 后台管理系统中，时常有同一个颜色需要用不同级别的情况。我们可以按照以上的步骤把所有的颜色的层级都列出来，用的时候直接从中选取就可以。但是，这样修改颜色的时候会有较大的工作量，所以为了工作的便利，以下运用改变透明度的方法形成颜色梯度。

1.  一般情况下，把一个色相分为 10 个梯度。当前的颜色为第五梯度，需要加深 4 个，减淡 5 个。以红色为例。

以红色为中心，前面四个梯度是叠加黑色，并从小到大依次增加透明度形成红色的从浅到深。后面五个梯度是叠加白色，并从小到大依次增加透明度形成红色的从深到浅。由此以后更改颜色的只要调整红色就可以调整红色的 10 个梯度。

2. 运用这样的办法，做好整个色彩的梯度。

四、功能色

IBMS 后台管理系统中，经常会涉及到功能的区分，例如成功、警告和错误。我们用绿色代表成功；橙色代表警告；红色代表错误。一般运用第五梯度的颜色。

五、中性色

中性色的制作与有彩色的方法一样，通过更改叠加色的透明度来形成最后的梯度色彩。如图所示，在白底上，叠加黑色，依次改变黑色的透明度，实现中性色的梯度。在此需要注意的是，叠加的黑色为冷色调。背景、线条、线框和文字用冷色系与其他有彩色有相互平衡的作用。左侧第一个为纯黑色，接下来的中性色是依次改变黑色透明度的方法得到。

六、色彩命名 在颜色调整完毕之后，接下来非常重要的是命名，如果公司有完善的命名规范，则可按照公司的规则来命名，如果没有，那么设计师一定要制定好命名的规则。颜色作为通用组件之一，一般按照“颜色-色相-编号”去命名，例如“color-red-red01”。颜色相关的功能性组件可以额外设定。

七、WCAG 标准验证颜色

为了能够让视觉障碍人群正常的阅读信息，所以我们都会用 WCAG 标准验证所选的颜色是否合适。其中适用性原则就是文本颜色与背景颜色的比值不能低于 4.5:1。测试的网站很多，只要输入色彩的 HEX 值即可。以下是我自己常用的测试网站： https://contrastchecker.com/

方法如图所示，上图为标准的用色，下图为不标准的用色。

总结 运用 HSB 的方法选定色彩，再根据饱和度和明度制作色彩梯度。同理制作中性色的色彩梯度。功能色需要提前定制好，不要与其他颜色混用造成不必要的麻烦，并在项目中做好命名。在使用的过程中，需要运用 WCAG 标准检验字体和背景的色彩是否符合标准。这就是个人工作中制定完整的 IBMS 后台管理系统色彩规范的方法。

工作中一直保持学习的状态，很多个人认为好用的方法取自别人的分享，非常感谢前辈们倾囊相授。做好分享，希望大神们多多指教，也希望能为其他人提供一些灵感，最重要的是作为自己工作学习的总结。