一、组件的核心功能是什么

我们先来看看组件的核心功能是什么。组件的作用有很多，其中有两点最为突出：

1、降本提效

组件的初衷不是为了替代设计师。组件的本质是一种降本提效的工具。在工作内容上，可以将不必要的、重复性劳动的时间节省出来；在工作流程上，便于设计师与开发做交接和协作，减少沟通成本。

2、质量保障

不论是设计还是开发，使用组件后都可以在一定程度上保证工作质量。组件规范了前端和设计师的工作方法，建立了底层的合作机制，设定了设计和开发的质量底线。基于组件完成的产品通常具备：

• 一致性：相对一致的表现样式，设计风格和交互体验上都可保持统一；

• 可用性：对于用户来说具备最基本可操作性和可识别性；

• 标准化：符合基本审美标准，虽不会很亮眼，但也不会很难看。

但对于一款好产品来说，仅达到基础合格线是远远不够的。组件能替代的仅仅是大部分重复性的页面。面对变化多样的业务需求，设计师还是需要做很多非基础性、非重复性的设计工作。

我们也要建立起一个重要的认知，那就是：

做组件不是设计目标，

而是一种为业务赋能的手段和方法。

能够为业务带来正向影响、助力业务发展的组件才是有效的。

二、设计师的工作重心有哪些

设计工作很注重专业与实践相结合，大多数情况下，能为业务赋能的设计行为，才能体现设计价值。在此过程中设计师的工作内容和重心可以分为以下几点（每一点我们也都在之前的文章中有过详细介绍，推荐你阅读完本文再做查看）：

1、深挖业务诉求，优化体验

一款好的产品，质量不会仅停留在合格线。设计师可以把更多的时间和精力放到更有价值的工作上去，关注业务目标和用户需求，对业务逻辑做深度理解和剖析。不仅仅是在界面细节的表现手法上下功夫，还要用系统性思维为整个产品做全方位的体验优化。

* 我们曾在  完成设计需求的三个层次！ 一文中为大家介绍过承接产品需求的几种方式，读完本文之后欢迎继续阅读。

2、提升组件专业性，赋能业务

很多业务领域有其独特性，比如金融类组件和政务类的产品页面列表内容就有很大区别。这就使得单一的组件在应用的过程中可以被再次组合、拼装和沉淀。

针对不同的业务领域，将高频使用的组件结合业务特性，进行更为专业的沉淀也很重要。这类组件使用起来也会更加得心应手、加倍提效。

* 我们曾在  基础组件与高级组件的区别  一文中，为大家介绍过两者的定义和使用场景，在公众号后台回复 “列表”  ，也可以看到更加完整的内容分享，读完本文之后欢迎继续阅读。

3、提升组件易用性，规范使用

组件并不是一劳永逸的设计工具，它需要紧跟业务的步伐迭代更新。只有当组件的质量达标，具备了一定的稳定性和易用性，才能被设计师和开发高效、高质地使用，更好地支持业务需求。

因此，除了建立组件的设计规范，组件如何被更新、怎样被同步给相关方、怎样才能被正确地使用，也是影响产品最终质量的关键因素。

* 我们曾在  组件的规范怎样才能更好用？ 一文中为大家介绍过一些提升组件易用性的经验，读完本文之后欢迎继续阅读。

4、优化检验流程，排查问题

这里所说的「检验」包括两方面工作内容：

一是对于研发质量的检验；

二是对于产品体验的监测。

先来看看对于研发质量的检验，我们可以分为两部分内容：

1）设计还原度走查：即对于开发完成设计稿后的质量检查；

2）组件应用质量走查：即排查组件的使用问题，判断设计和开发的使用方式是否正确。

对于这两类走查，发现问题时不仅要及时纠正，还要思考问题产生的原因，从根本上解决和杜绝类似问题。

* 我们曾在  开发的设计还原度低该怎么办？ 一文中为大家介绍过一些提升设计走查效率的经验，读完本文之后欢迎继续阅读。

再来看看对于产品体验的监测。其实很多大厂都提出过关于检测产品体验和设计质量的方法及模型，我们熟知的有 Google 的 HEART 模型和 GSM 模型、蚂蚁集团的 PTECH 模型和「两章一分」模型等等。

因为产品的评估方式本就是多维度的，不同的产品又有不同的评价标准，所以大家各自沉淀、百花齐放。不过参考和使用这些方法的原则只有一条：适合自己需求的工具，才是好用的。

* 在公众号后台回复 “体验”  ，可以看到更加完整、多维度的产品质量和用户体验检测内容。

设计自身的价值是全链路的、端到端的、内循环的。设计师不光用手，更应该用心和脑去思考和解决问题。可以说，组件就是帮助设计师解放双手的不二法门。

设计师的思维和方法不一定会决定产品的生死，但足以帮助产品实现质量和体验的升级。也正因如此，产品才能在市场竞争中走得更为长远。

作者：元尧

转载请注明：学UI网》工作经验｜使用组件做B端产品，设计师的工作价值还有哪些？

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

前言

先来看这段话，大家猜猜这说的是一件什么事情？

我联合硬件排查部门、采购部门、电力工程部门等等，结合这些资源。我快速找到了问题根结，推动各个部门协同合作，在各部门共同努力之下，最后成功和圆满的解决了问题。最后，我也总结出了一套流程，打造出了一个新系统，该系统可用于自动检测类似问题。一旦被系统发现问题，系统将自动下发指令给最精准的业务部分，自动完成整个工程，解决问题。该系统不但节省了资源，还节省了人力。以前需要多人才能解决的问题，现在只需要1个人即可完成失去光明的时间，由以前的一个月，缩短到了1小时，在线时间达到99.99%。

如果用通俗的语言来说，就是：买了个灯泡，问了一圈同事，最后自己换了。以后灯泡再坏，也自己换了就好。

明明一句话就能说明做的事情，为什么非通过黑话去进行转译？

因为在日常工作中，大部分同事做的事情大同小异，很多都是很小的事情，如何能拉开差距，体现自己做的事情有价值，那么这时候，通过黑话可以很好的拉开和大家的差距，虽然本质上大家做的事情都大同小异。

黑话的流行，个人认为有以下两种原因：

1、同事间相互内卷的结果，通过黑话的包装，去拉开和同事间的差距。

2、更加高效地沟通。一个黑化名词，是一两句话极度简化的结果。如果每次大家沟通都大篇幅的白话去沟通，效率就会降低。

例如：消费者对品牌和产品形成固有看法和观念，这句话用“消费认知”这个词代替，就很高效了。

随着时代的进步，上面换灯泡的黑话来自于2019年，现在看来，已经显得很朴素。不够更黑话，步入2022年，黑话的维度也迎来升维增幅。

我进行一波修改，大家感受下这样是不是感觉更高级呢？

拉通多部门角色倒逼流程迭代，建立模型化、标准化、流程化范式。通过对建立范式的流程化复用，实现核心业务价值转化。通过新范式的迭代，形成不同业务标准分层，人效提升高达2000bp。

一个小小的换灯泡，都能说地如此高深莫测。那么在实际工作中，即使是对文案进行小修改，那文字会变得更加高深莫测。干的活立马就显得高级了。

接下来让我们来看看如何将黑话整进项目里面。

一、项目背景

以下这段是常见的项目背景的白话文：

目前购买流程用户流失率高，通过优化该流程，提升整体转化效率。

如何将这句话包装的高大上呢，显示的有格局呢？那么可以这么说:

通过数据分析发现整个购买转化漏斗，用户流失率高。通过设计手段重塑用户动线和购买心智，加固消费购买场，以此提升整体转化率和整体GMV。

通过上面可以看出，要将具体的细节手段写出来，具体的手段通过一些对应的高端词汇去替换，这样一整段话，就有比较深度和格局的样子。

最后通过具体的核心指标去验证项目背景的设计优化的意义。

二、设计目标

以下这段是常见的设计目标的白话文：

1、统一设计风格，提升整个购买流程统一性。

2、减少操作层级，降低多层级导致的流失率。

3、简化视觉元素，强化重要信息。

上述的这个设计目标通常来说没毛病，说的也比较清晰，但是不够黑话。接下来看看下面这个升级版，感觉如何：

1、通过平台IP统一植入到购买链路，深度绑定购买心智场景，全面占领用户心智。

2、通过设计策略透传平台的信任价值。

3、信息降噪，通过重构用户动线和视觉布局，简化用户认知与操作负荷。

4、重建购买链路的优惠服务承载力。

三、设计策略

以下这段是常见的设计策略的白话文：

1、统一性：通过优化图标，文字和视觉布局，提升整个流程的统一性。

2、简化层级：通过简化用户操作次数，提升转化率。

上述的这个设计策略，比较好懂，主要通过两方面提升整体转化率。如果给其他高纬度的大佬看的话，显得小白好懂，接下来看看下面这个升级版。

1、深挖品牌价值、提炼ip、强化信任，形成多矩阵购买心智，通过平台ip反哺购买链路。

2、透传信任，通过官方、第三方保险、用户评价等多维度组合拳深化用户信任感知。

3、通过对用户调研，重构用户购买动线，简化操作流程和信息降噪等方式提升转化率。

4、通过视觉表现和交互布局全方位展示优惠服务卖点，提升操作能效。

四、设计方案

常见的设计方案，都是直接放主界面和交互流程。但是这会显得不够高级。项目方案显得普普通通。

如果按照升维思路的话，那么就应该先展示以下四部分:

1、深挖品牌价值、提炼ip、强化信任，形成多矩阵购买心智，通过平台ip反哺购买链路。

2、透传信任，通过官方、第三方保险、用户评价等多维度组合拳深化用户信任感知。

3、通过对用户调研，重构用户购买动线，简化操作流程和信息降噪等方式提升转化率。

4、通过视觉表现和交互布局全方位展示优惠服务卖点，以此提升购买效率。

首先单独建一个画板，将上述的四个方面全方位展示。

然后做一个整体的方案汇报，展示全局性、局部性以及异常等。

最后才展示具体的设计方案。

最重要的是展示的角度要让阅读者眼前一亮，富有创意和高格局。

五、设计验证

以下这段是常见的设计验证的白话文：

本次优化，用户反馈良好。设计感官有一个整体的质量提升。上线之后，收到了业务方的好评。

上述的描述，只能说明上线效果良好，缺乏更细节的东西，例如可以这样说:

定量方面：

1、核心指标：GMV提升360bp，月人均订单数从5.1提升至6.2

2、大幅度降低用户操作时长，降低用户跳出率。用户操作时长从45s降低到了30s

3、整个购买链路，用户完成率提升550bp。

定性方面：

1、进一步完善购买场景操作链路，强化用户对平台消费心智。

2、通过对用户问卷数据回收，购买链路整体好感完成了一个新的升维定位。

作者：Echo

转载请注明：学UI网》如何高级的说话？设计师项目汇报之黑话指南

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

1、表单排列

表单承载的主要功能是向用户清楚地传达信息，单列表单形式更利于用户浏览动线，帮助用户识别和填写内容。而多列表单形式用户的视觉横向移动范围更大，浏览和填写效率更低。

例如QQ邮箱设置页面中，选项都是采用了纵向布局的方式。当然这种布局方式是比较理想化的，是与场景相匹配的。首先作为设置界面，并非高频操作业务，用户只会调整部分内容，而不是全业务的操作。所以更强调信息的查看，纵向布局更有利于浏览。

其次，表单项内容应并不复杂，即使采用纵向布局，对整体的表单长度影响也比较有限。另外配合底部常驻按钮，对用户的操作效率影响不大。

而在B端输入型表单中，本身内容填写的任务就比较重，所以需要适当控制表单的整体长度，因此一味地追求浏览动线也是不可取的。

2、输入框长度

1）输入框排版

如下图所示，右图采用的是错落有致的排版，左图更加整齐划一。但是相比较而言，似乎右图的诗句舒适度更高。因为在视觉上我们更容易将右图的空间和内容视为一个和谐的整体，但左图过度的对齐导致暗示隐性的截断，我们会感觉表单列右侧空间缺了一大块。

所以表单中要注意整体的协调性，不要为了对齐而对齐。

2）输入框长度的暗示

输入框的长度具有一定的暗示作用，因为用户会认为它是与输入的内容是相对应的。尤其是邮政编码、电话号码和银行卡号等长度固定的字段。在设计这类输入框的时候，可以采用与内容相互匹配的长度，避免过长引起用户对输入内容正确性的疑虑。

下图即一典型案例。在上图中，不需要花多少钱的金额输入框进行等宽处理，容易误导用户对所需输入金额的判断，造成用户的不安全感。

3、必填与选填

必填和选填是表单的基本信息，用来引导用户识别关键信息，做出行为决策。

通常必填字段较少时，优先采用星号（*）标注显示，更好地提高信息识别效率。当必填字段较多时，则可以标注选填项的方式，避免出现满屏星号，增加额外信息量。

但是同一个系统中建议还是采用统一的标记方式。我个人更倾向于星号（*）方式，用户成本低，对内容干扰性更小。

4、识别好过记忆

这是尼尔森十大可用性原则之一，要求能够通过各种方式给予用户足够的信息，减少用户的记忆成本。在表单设计中，主要是各种提示信息辅助用户完成表单填写。

1）主动性提示

对于开放性、复杂的、超出用户认知的输入信息，需要做出主动性提示。例如在阿里云、腾讯云中，很多名称字段都是需要以字母开头的。而普通用户为了便于信息的识别和记忆，更习惯于中文命名。这种情况下，表单中就需要默认给出填写说明，减少用户的记忆和出错概率。

另外一些具有限制性的规则，对用户的操作会产生直接影响的，也需要显性地告知用户，尽量避免出现理解偏差，带来用户投诉。

主动性提示可以通过输入框中的「占位标签」告知用户；不过过长的提示信息通常放置在输入框下方，便于用户查看。

2）交互性提示

还有一种提示增加了信息交互。例如密码设置时，光标停留会触发密码规则提示。既保证了默认界面信息的精简，又可以保证提示的有效性。用户输入时，还会进行内容校验反馈，交互性更强。

3）被动性提示

对用户而言，解释说明、帮助信息更偏向于业务属性。随着用户深入使用产品，这些信息会变得不再重要，用户查看的频率也会越来越低。所以这类信息通常被默认收起，减少界面的信息量，用户在需要时主动触发查看。

5、主任务与分支任务的协同

有些展示型表单，主要是为用户提供信息服务的。但是为了保证操作链路的流畅，会加入一些分支任务。例如任务预览时，会增加「发布」或者「编辑」功能，便于用户直接完成二次操作；或者智能报告表单中会增加人工「修正建议」，对内容进行纠偏。这些操作只是可选项，并不是用户必需的操作行为。

如果按照顺序将信息罗列展示，这些内容会被放在页面底部。长表单场景下，这些信息会无法直观展示，用户难以感知。所以需要为这些支线任务增加额外曝光。

例如顶部的引导文字按钮，借助定位锚点，实现路径直达，提高操作效率；或者采用底部浮层弹窗的形式，方便信息的填写及表单内容的查看。

具体的设计方案有很多种方式，需要根据场景和用户确定。但是设计师需要能够将主任务和分支任务进行有机的协同，保证用户对页面内容的全感知和操作效率。

6、数量级的影响

有些时候我们不得不面对很大的数据量，这对设计师和用户都是一个挑战。设计时，我们需要根据信息量做出合适的设计方案。

信息量比较大时，首先要进行内容拆解，按照用户的认知习惯完成信息分层，让用户不要直接面对大量数据。例如通过树表结合，或者双层关联下拉选择，逐步缩小用户的目标范围。

某些场景下，还要增加辅助搜索功能，让信息筛选更加简单。

表单设计除了静态展示效果外，还有大量的交互操作。主要的设计目标就是「效率」和「防错」。

1、操作效率

1）减少用户输入

虽然PC端输入比移动端更加便捷，但是输入型操作对用户而言成本仍然较高。一方面用户需要思考应该填写什么内容，另一方面需要准确地完成内容输入。而选择的成本相对更低，因此在表单设计时，尽可能让用户以选择的方式完成任务。

例如邮箱在上传附件时，如果邮件没有填写过标题，会将附件名称直接填入邮件标题中，减少用户输入。

2）合理预设

表单信息可以通过信息的抓取、内容关联度分析，预设合理内容值，减少用户的操作。例如QQ邮箱设置时，系统提供了默认话术，用户只要快速启用即可。

对于如证件类型、手机区号、国籍等较为通用的选项，为用户提供默认选择，同样可以有效简化操作步骤，减轻用户输入，帮助用户更快地完成表单填写。

2、业务流程顺畅

当我们在填写A任务时，需要关联选择B任务。而B任务并没有创建，该怎么办呢？

通常情况下，需要在A任务中完成创建B任务。例如弹窗、抽屉、甚至是新开页面的形式，保证主流程的畅通。否则对于高频操作的任务，会严重影响用户的操作效率。

如果由于各种因素，在流程中无法直接创建分支任务，或者由于各种限制条件阻断用户操作时，该怎么办呢？

此时需要在任务开始前，给用户足够的信息提示。避免用户已经填写了部分内容后，发现缺少相关的内容，导致任务无法完成。这会带给用户非常糟糕的体验，尤其是会消耗用户较大精力的工作。

3、保存机制

表单填写时，可能会遇到各种异常场景，需要有防错机制和保存功能，避免用户误操作时造成信息丢失。

4、即时反馈

表单填写是为了向用户收集正确有效的信息，所以需要在用户填写完成或者提交表单时增加校验机制。

校验机制分为前端校验和后端校验。

前端校验无需服务器传输数据，前端页面会根据校验规则，对输入完成的内容进行验证。例如邮箱格式、手机号长度、密码是否符合规则等。

后端校验需要将表单内容传入后台数据库进行匹配，不匹配则会将信息反馈至前端页面。通常用在点击提交按钮后，例如账号不存在、密码错误等。

前端检验可以帮助用户及时发现问题并修改，纠错的效率更高。后端校验相对滞后，出错后用户需要自行定位错误项。

无论采用哪种方式都要告知用户错误原因，帮助用户快速解决问题。

写在最后

表单设计是设计师绕不开的内容，无论用什么方法论也无法穷尽其中的可能性，也没有一套覆盖所有场景的设计模板。设计师需要根据实际的业务场景，去完成合适的设计方案，并在不断的实践中积累经验，总结得失。

作者：子牧先生

转载请注明：学UI网》设计基础(8): 表单设计中的认知与交互

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

一、数量非常多

我翻了好一会儿一直没有翻到底~O(∩_∩)O~，只能用数量众多来形容啦！各种小场景的插画无论是独立使用，还是组合使用，肯定可以满足很多场景需求了。

二、颜色可以任意调节

这绝对是一个非常优秀且人性化的功能，里面提供的插画作品不像一些平台属于图片格式，只能下载固定配色的版本。这里提供的作品可以在平台自定义颜色，展开拾色器随便发挥，简直是要逆天啦！！！

三、人性化的格式选择

该平台提供了 SVG 格式，方便下载之后进行二次编辑。如果你觉得已经很完美了，也可以选择下载 PNG 格式，也是非常人性化的。

四、免费使用

这里提供的资源是可以免费使用到个人或者商业场景中，关于这一点也是值得推荐的理由。大家可以在平台的相关规则说明中了解到，注意时刻关注规则说明的变动。

五、其他优势

平台还提供了一些别的风格，如果感兴趣的同学可以自行体验一下，也可以指定内容搜索，整体使用下来还是蛮不错的。

六、欣赏一些插画作品

黑马哥为大家复制了一些插画作品，大家可以感受一下作品的风格和质量，如果感兴趣的话可以访问体验一下。

七、获取网站链接

关注黑马家族微信公众号，后台回复关键词“插画库”即可获取链接。

unDraw 插画素材库网址：https://undraw.co/illustrations

八、创作一下吧！

黑马哥也运用这个插画素材库的资源完成了一组作品，以此给大家做一个案例示范，感兴趣的同学也可以尝试一下。

九、布置一个作业

根据黑马哥完成的案例，大家可以举一反三。根据以下提供的高保真原型，完成一组小作业，

作者：黑马青年

转载请注明：学UI网》有了这个插画库，作品亮点暴涨呀！

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

马赛克像素风格的诞生源于早期 8 位/16 位计算机有限的存储空间和图像表达能力。都说时尚是一个轮回，现在我们能看到很多海报设计采用马赛克的形式，以营造更强的趣味感的形式来吸引人的注意力。

这次就给大家演示简单容易上手的这 4 种马赛克形式的海报案例展示：

夏天到了，大家一起来吃瓜吧！先画一个简单的西瓜图标，在 Ai 里执行【对象】→【栅格化】。

继续在 Ai 里选择【对象】→【创建对象马赛克】，就可以得到下面这个马赛克西瓜，是不是灰常简单！拼贴数量这里跟本身图的大小有关，大家可以多尝试~

这个马赛克西瓜现在都是一个个方块组成，把边缘的色块规整一下，就可以啦！

用同样的方法再画一个笑脸跟对话框增强趣味：

然后我们再来做一下背景，一组夏天的清凉配色送给大家，这里我用的是 Ai 里的网格工具用锚点来添加渐变色。

最后环绕图形排文字，这张图形马赛克海报就完成啦！

我这里选用粗细笔画变化比较大的一款宋体，后面马赛克的效果处理会更明显些。

打开 PS 建一个新的画板【1200×1600】，背景色改黑色，文字白色，然后把文字图层转换成→【智能对象】，选择【滤镜】→【像素化】→【马赛克】，数值如下。

新建一个【阈值】图层，数值如下：

就可以得到这个马赛克字体的效果啦！

在 PS 里盖印一个图层然后把图拉进 Ai 里进行【图像描摹】，然后【扩展】，就可以得到矢量的马赛克字啦！然后可以更改颜色，这次我想做一个更潮流电子的感觉，所以选用了绿色，然后再加入一些装饰线条增强画面感。

这里我还选了一个像素的英文字体来增强画面形式感，再加入其他文字信息跟装饰图案。

然后再加入一些渐变色块，增强颜色层级，丰富画面。

本来这里也只打算做一张案例的，萌萌心血来潮说，要不再试试？这不就又多做了一张，真是欢（要）天（了）喜（老）地（命）了。

第一张把人物拉进 PS 里处理，选择→【图像】→【模式】→【灰度】处理成黑白的，然后再选择→【图像】→【模式】→【位图】数值如下（半调网屏数值越大，方块就越小，反之亦然）。

然后再选择→【图像】→【模式】→【灰度】，在灰度的模式下再选择【RGB】模式即可，把人物抠出来，我是提前在有颜色的情况下先扣了图，半调效果做了之后，按之前扣好图的人物轮廓再取一个半调的人物轮廓即可。

接着我们再来做背景半调的处理，我直接用的 PS 透明背景截图然后用处理人物的方法同样处理了一个半调背景，再叠加颜色即可（偷了个小懒）。

继续丰富画面，选一个高挑的英文，在 Ai 里先扩展一下，然后再选择【对象】→【封套扭曲】→【用网格建立】。

用选择工具，分别选中上中下三行的锚点，进行移动，中间的往右移动，上下两边往左边移动，即可得到：

最后环绕人物摆上文字信息就可以啦！

不要停，继续做第二个案例，其实第二个案例用到的方法会更简单，一秒出图不夸张，第二个想做复古一些乐队的的感觉，于是找了一张人比较多的图，拉进 PS 里，新建一个阈值图层，这不，效果就出来了！

跟上面一样的方法，我先在有底色的那张上把人物扣好，然后再用这个轮廓把阈值图层的人物抠出来，好像差点什么？哦，乐队的吉他！然后我赶紧找了把吉他放上去！

我觉得还可以再丰富一下画面，于是我用 Ai 填充图案的方法，加了点马赛克的纹理，再找了张斑驳的纹理叠在上面，这样复古感就更强烈了！

最近疫情又反复了，这不今天下着雨也收到了社区让我们去做核酸的通知，于是我随手拍了张图，不得不说，拍出了我的辛酸，于是我决定，这次的案例就用它了！谁手机里还没有几张街拍呢！

熟悉的套路，在 PS 里做效果,选择→【图像】→【模式】→【灰度】处理成黑白的，然后再选择→【图像】→【模式】→【位图】→【图案仿色】。

得到这个画面后，再选择→【图像】→【模式】→【灰度】，在灰度模式上再选择【RGB】模式，再选择→【图像】→【调整】→【渐变映射】，这个背景就处理好啦~

最后配上我辛酸的文案，最后这张海报就做好啦！大家可以试试这种简单方法拯救一下你相册里的照片哦。

本次教程就结束啦！快带我去你的收藏夹吃灰吧！

作者：大熊

转载请注明：学UI网》那些要打马赛克的设计…

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

• 需求文档不规范怎么办？
• 承担了很多与产品相关的工作，是好还是不好？
• 需求量大，如何推动需求排期合理化？
• 经常插入或变更需求怎么办？
• 如何更有效的解决问题？
• 需求是否有价值？
• 如何做好体验优化？
• 怎样做好设计，并提升设计的说服力？
• 应该具备怎么样的知识才能更好的应对日常需求？
• 我应该掌握哪些专业知识与能力？
• …

上述问题看起来比较杂乱，但是通过一定的分类整理，可以概括为两个方面，即：「专业能力」与「职业能力」。

图1 专业能力与职业能力

专业能力：

与设计直接相关的能力，是完成设计工作不可或缺的组成部分，比如 需求挖掘、需求分析、方案设计、用户研究等内容。

职业能力：

岗位要求需具备的一些能力，可以帮助设计师更好地处理工作过程中遇到的问题，比如沟通能力、规划能力、驱动能力、执行能力等，可概括为“发现问题-解决问题”的效率与能力。

随着设计师项目经验和工作经验的增加，其所具备的专业能力和职业能力也会不同程度的成长与提升。下面会首先对新人设计师所应具备的专业能力进行总结和说明；其次对与职业能力常见的问题进行一定的解答与建议，希望能够帮助到各位设计师同学。

一、专业能力

设计师首先要明确设计工作的主要内容，从需求分析、用户分析到将抽象的需求转化为具象的设计方案输出，再到跟进设计方案上线；通过定性定量的方式跟进用户反馈，持续推动用户体验优化及挖掘更多用户场景和诉求均是设计师日常工作过程中的核心工作内容，接下来我们初步分析：

图2 设计师主要工作内容

1、需求分析与用户分析

当设计师拿到需求后，切记要多去追问为什么。因为产品经理给到设计师的需求更多情况下是具体的功能，而对于为什么要做该功能是需要设计师去深入洞察和挖掘的。此阶段，设计师要明确「业务目标」「业务指标」「设计目标」和「设计指标」的概念，参照下图所示。

图3 需求分析与用户分析

以“某客服平台改版”的需求为例进行简略介绍，其业务目标是：解决客服人员工作过程中遇到的痛点，提升客服使用体验，同时期望缩减客服人力成本投入，并明确具体的业务指标。设计侧接手项目后，通过 用户观察、用户访谈等用户研究手段，了解平台痛点，并从「业务层面」和「设计层面」总结归纳。

图4 客服系统分析

对于业务层面的突出问题，通过与产品多次沟通形成相应的产品策略，并落实到具体方案中。而对于设计层面的问题，为了更系统准确的了解客服人员的痛点，设计侧又进行了二次调研。首先整理访谈提纲对客服人员进行访谈；其次整理了问卷提纲，通过发放问卷进一步验证调研结论的准确性，并全面收集客服人员的建议。并且沉淀各角色人员的用户画像，了解各角色人员的主要工作事项、关注点及痛点。调研发现，客服人员的主要工作内容聚焦在以下事项，并且客服人员对系统的整体满意度较低。

图5 用户分析-客服主要工作内容

结合业务目标及对业务和用户的分析，设计侧将“提升用户核心工作流程的工作效率及平台整体的用户满意度”作为设计目标。由此设计的重点也放在核心操作路径优化和整体体验提升上面。通过对调研结果进行系统梳理，整理出高优先级优化内容，并推动埋点功能上线。最终，设计侧拿到核心操作路径优化前后的数据对比，达成设计目标。

建议各位设计师拿到需求后不要急于产出设计方案，多去进行需求分析与用户分析，它可以帮助设计师更深入的理解业务，挖掘业务本身的问题，了解用户的使用场景、关注点、痛点、期望与建议，为后续开展方案设计提供设计依据。在设计评审时呈现自己的思考与分析内容，也会大大提升设计方案的说服力。

2、需求转化为设计

关于设计目标的重要性在上述部分已有讲解，因此本部分重点讲解「设计系统」与「设计原则」。在日常工作中，除了上述提到的平台改版等较为复杂的需求，绝大部分情况是产品经理梳理清楚具体的需求或功能点，经需求评审后将其给到设计师，由设计师在敏捷迭代有限的时间内快速产出最优的设计方案。而对设计系统的充分了解和应用是B端设计过程中不可缺少且非常重要的一部分。

设计系统的构成

《Design System》一书中对设计系统的构成进行了详细的解读，笔者将其中与工作关联性最强的部分进行了整理，并且结合工作经验简要谈谈自己的理解。

图6 设计系统的构成

• 设计原则：

设计过程中需要遵循的指导原则与依据，有利于保障系统的易用性，提升用户满意度。由于设计原则的重要性，笔者会在下文中进行详细描述。

• 设计组件：

通常包含基础组件、复杂组件和业务组件。基础组件即原子组件，例如按钮、输入框、下拉框等，可用于构成复杂组件或业务组件。复杂组件通常由基础的原子组件构成，但仍然在多条业务中具有通用性，例如 表单。业务组件通常用在特定业务场景下使用，具备复用性的同时可保证设计统一性。由于各公司通常具备成熟的组件库或使用ant design和iview组件。因此设计师在业务支撑过程中更多是从业务组件入手，本着“标准、统一、复用”的理念，沉淀丰富的业务组件以提升设计统一性、以及设计与开发效率。

• 设计模式：

同类场景下用户行为的统一模式，从而避免多种设计问题出现，有利于形成统一的用户心智，符合系统设计的一致性原则，例如上传、搜索、批量操作等。需要通过详细的设计规范，对模式的使用场景、解决的问题、遵循的原则以及模式具体如何应用进行详尽细致的说明。某些设计模式可以沉淀为组件来达成模式的统一应用，而对于不方便沉淀为组件的模式，需要整理详细的规范文档，方便设计师查阅与使用。

• 控件库：

将设计资产（组件、模式、图标、插图等）整理为symbol控件，在axure、sketch等设计软件中可快速使用控件搭建页面，提升设计效率。

• 视觉样式：

通常包含颜色、布局、字体、图标、动效、插图等，是保持全局样式视觉统一性的重要基础。

• 设计规范：

对视觉样式、组件、模式等如何应用进行详细的设计说明，包含设计原则、使用场景、使用流程与反馈等，产出通常为设计规范文档，对于新人设计师，一定要熟记、掌握和学会如何应用。

设计原则

关于B端设计原则，设计师对“高效、清晰、可视化”等原则一定不会感到陌生，但是笔者一直在想设计原则的得来是否能够更加有依据。由此上网看了很多文章，也结合自己支持的业务去思考，基于个人经验将设计原则总结概括为三个部分：「设计指导原则」「事实性原则」「可用性原则」。 

图7 设计原则

设计指导原则：

B端设计原则的顶层指导原则，是整个平台设计的全局性原则，通常由 业务定位、行业属性、客户标准、用户特征等因素综合得出。

比如公司内部的客服系统和面向房地产行业的设计管理系统，客服系统从业务定位出发是希望客服人员工作更加高效，而客服人员从自身动机出发也期望更加高效的完成目标，以取得不错的绩效。一般在设计时，设计师考虑到信息密度的问题，会将部分信息折叠收起，但是对于客服人员来说，他们更希望将全部信息铺开展示，通过瀑布流的形式他们可以快速检索信息，提升工作效率。而对于房产的设计管理系统，业务定位是提供全链路的解决方案，让客户满意是非常重要的业务目标。

由此，满足客户的标准和使用人员的诉求对于系统设计来说非常重要。客户会基于行业属性的特点提出要求，比如更加注重科技感，用户希望页面更直观，信息密度小等，设计师要综合多种考虑去制定全局的设计指导原则。

• 事实性原则：

基于业界的定律去设计，为最优设计方案提供更多依据。比如希克定律、菲茨定律等。除此之外，设计师更要懂心理学，了解用户在观察、阅读、记忆等方面的影响因素，并且将其应用在方案设计中。如此，设计方案便有理有据，经得起推敲。

• 可用性原则：

比如尼尔森十大可用性原则和设计界其他的一些可用性原则，设计师相对来说都比较熟悉，需要结合业务特征进行灵活的运用。

基于设计目标、设计系统、设计原则进行具体的方案设计，会帮助设计师从“完成方案”到“完成最优方案”进阶，同时也有利于：保障设计统一性，提升设计与开发效率；形成统一的用户心智模型，提升用户体验；平衡设计与技术，降低技术开发成本，保障功能按时上线。

3、需求挖掘与反馈收集

通常可使用定性、定量的用户研究手段去挖掘用户诉求以及收集用户反馈。定性调研通常包含：用户观察、用户访谈、焦点小组、启发式评估、可用性测试等。定量调研通常包含：问卷调研、数据埋点、后端数据拉取、AB测试等，新人设计师可以选择适合当前业务发展阶段的调研方法。与用户研究相关的资料较多，大家可以自行搜索学习，此处不再赘述。

这里笔者强调一点，即使用“体系化的设计思维”去整理用户反馈的体验问题。通常来说，调研后收集到的用户反馈是相对零散的，即便按功能模块分类整理，并且对优化带来的价值进行描述，业务人员也很难理解优化某一个体验问题带来的价值，从而导致设计师在推动体验优化需求排期时遇到阻力，且由于roi的投入产出比低体验优化被无限延后。此时设计师需要进行体系化的梳理，重点在核心工作人员的核心工作路径优化，预估优化后带来的数据价值，以此去PK其他需求证明体验优化带来的价值。在上线后也需要及时跟进真实的使用数据，拿到量化的数据结果及时同步相关人员。

图8 体系化整理体验问题

二、职业能力

新人设计师需要逐步培养自己“发现问题和推动问题解决”的能力，多交流，多思考，多总结。这里有几个小建议给到大家：

• 建立规范意识，通过标准化规范化的流程解决问题

在产品的敏捷迭代过程中，产品—设计—研发—测试等各环节必须保持规范化的运行节奏，一旦某环节出现异常，则会影响敏捷迭代的整个流程。比如需求变更的问题，可以在敏捷迭代复盘会上提出，并且跟大家一起分析背后的原因，找到行之有效的解决方案。若是因为客户提出临时加需求，可以考虑需求置换，但是如果是产品经理个人的原因，说明需求优先级排序出现问题，可能需要建立一套标准的优先级评估规范来避免或减少此类问题。

再举个例子，关于“需求量大，如何推动需求排期合理化的问题”。可以先去梳理当前存在的问题，以及带来的影响，同时提出解决方案，跟业务人员一起探索，达成一致后运行解决机制就能解决该问题。

图9 需求排期机制

• 找准设计边界，学会衡量利弊

作为设计新人，一定要学会明辨职责范围内的事项，找准设计边界。比如产品经理离职了，在短时间内设计师承担了部分产品经理的职责，统筹需求收集，给出设计方案，把控敏捷流程，保证产品迭代正常进行，且符合设计师职业和专业能力范围内时，设计师是可以承接的。但同时我们需要不断跟进业务招聘新人，让专业的人来做专业的事情，避免将个人精力全部花费在与产品相关的事项上面。

日常工作中设计师一定要学会明确边界，切忌将工作重点转移到非设计相关的事项而偏离了设计本身，可以多用系统性的思维去思考和分析利弊，相信此时设计师就会有自己的答案。

• 学会借力，必要时学会依靠团队

设计师，尤其是新人设计师，在工作中遇到的问题很可能是凭一己之力无法解决的。这时候可以考虑借力，向领导借力，向团队借力，可以说出自己的想法，寻求大家的建议。不仅可以收获到经验，还可以提高解决问题的效率。举个例子，笔者刚刚毕业入职后，要去整理所负责的移动端产品的体验优化，采取了“群策群力”的方式，邀请团队的设计师一起进行体验走查，在2个小时的会议时间完成了整个产品的走查，并且收集到非常多的有效建议，依靠团队的力量达到事半功倍的效果。

总结

作为一名“过来人”，回想起自己还是设计新人的时候遇到的问题，踩过的坑…内心很感慨。因此，一直都想写一篇文章，将自己的经验和心得总结下来，希望本篇文章能够帮助设计师少走弯路，快速成长。

最后，借用在《腾讯产品法》一书中看到的一段话送给大家，我想设计也大抵如此。

阶段一：以片面、固化的眼光看问题，只看到零散的表象和静止的格局。解决方案呈点状随机分布。

阶段二：以宏观、系统的眼光看问题，能看到产品与产业、产品与其他产品的关系和位置。解决方案开始具有系统性特征。

阶段三：以动态、演进的眼光看问题；能看到时间长河中问题变化的趋势。解决方案能够助推产品顺势成长。

设计者修炼产品设计能力的过程本质上就是一个思考力进阶的过程。

参考书籍

《在腾讯产品法》

参考文章

尼尔森的十大可用性原则与场景案例

《Design System》相关文章

《Pin Design》年刊文章

作者：瑶一

转载请注明：学UI网》B端设计经验总结-帮助新人快速上手

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

一、持续时长和速度

动效设计中的持续时长和速度是两个密切相关的因素。在动效设计中，需要确保动效不要移动得太快或太慢，从而影响可用性，破坏使用体验。

那么，动画的最佳时长是多少呢？

一般来说，标准的UI动画时长应该在200毫秒-500毫秒之间——这组数字是基于我们大脑的处理能力而得到的时长区间。

小于100毫秒的动画是瞬时的，不会被用户注意到；如果时长大于1000毫秒(1s)，会让用户感到动画很缓慢，带来一种拖沓的感觉。

同时，我们也要考虑其他可能影响动画速度的因素：

屏幕尺寸：由于手机和电脑有着不同物理尺寸的屏幕，尺寸的不同会影响动效的速度，屏幕越小，运动路径越短。对于移动屏幕，动效速度应保持在200-300ms之间，平板电脑应该保持在400-450ms之间；

web动画：在浏览网页时，我们更习惯于网站的即时响应效果，因此网站的动画速度也更快。因此对于网站来说，转场动画的时长保持在150-200毫秒之间，更符合用户的浏览习惯。

以上提到的区间是相对保准的动效时长，并不是一成不变，具体的动效时长和速度需要根据具体的需求、场景，灵活分析。

二、缓动

现实中的物体由于受到重力、阻力等因素的影响，速度并不是恒定不变的。换句话说，物体都会有加速、减速、平滑等不同的运动状态。

为了使动画更真实，我们需通过缓动来模拟出这些因素，让界面中的元素运动的更自然，避免过于死板。

缓动决定了元素在运动过程中速度的变化，常用的类型包括：线性匀速、缓入、缓出、缓入缓出。

1、线性匀速

当元素没有受到物理力的影响，速度保持恒定，就会发生线性匀速运动的效果。

线性匀速在改变元素位置的设计中使用相对较少，更多是用在改变元素的状态、属性（透明度变化）等不涉及元素位置改变的设计中。

2、缓入

缓入对应于元素的加速曲线，通常用于当对象从静止到加速离开用户视线的过程。例如一辆汽车驶出时，速度从0开始逐渐增加，然后在驶出时达到最大值。

3、缓出

缓出是缓入的对立面，用于屏幕上的对象从高峰值进入，逐渐减速直到到达特定位置的过程。例如一个人从屏幕外全速进入屏幕内时，进入画面时的速度最高，然后逐渐减速到零。

4、缓入缓出

缓入缓出也称为标准曲线，指对象从画面的一个部分移动到另一个部分，整个移动过程中始终保持在帧中，通常用于为在同一界面中改变位置的元素创建动画。例如一个钟摆，它的速度从峰值开始，缓慢减速到0，然后再次加速，不断在一个固定的位置区域循环。

需要注意的是，不对称标准曲线会使物体的运动变得更加自然。

在使用缓入缓出时，要强调减速而不是加速，因此减速的时间要比加速时间要长。在这种情况下，用户会更关注物体的后半段，从而更容易关注物体的新状态。

三、动效编排

动效编排是指对界面中不同的元素进行统一、有序的编排，让元素间更协调，通过更流畅的动效来引导用户的注意力。动效编排包括平等互动和从属互动。

1、平等互动

平等互动指对象根据相同的规则移动。

在这种情况下，界面中的元素会变得整齐有序。以界面中的卡片列表为例，平等的互动编排保证卡片一个接一个，从上到下以一种协调的方式出现，能够从上到下引导用户的注意力。

如果不按照这种编排规则，界面中元素的出现顺序会产生混乱，从而影响用户的浏览。

在表格类页面中，元素的运动情况会更复杂。

在表格视图中，应该按照对角线的方式来引导用户的关注点。如果使用水平方向的运动让元素一个一个展示，会造成元素的加载时间过长，用户的浏览路线来回曲折，体验不流畅。

2、从属互动

从属互动指界面中有一个主体对象，用来吸引用户的注意力，界面中的其他元素都从属于这个主体对象。这样的编排方式让用户的注意力更聚焦到界面中重要的元素上，保持元素的运动主次更清晰。

还需要注意元素的运动曲线。如果一个元素不成比例地改变大小，例如从一个正方形变成一个矩形，那么元素应该沿着弧线移动。

如果元素的大小按比例变化，元素应该沿着直线运动。

此外，我们可以将曲线运动分为两类：垂直向外（水平开始，垂直结束）、水平向外（垂直开始，水平结束）。

例如如果页面上下垂直滚动，页面中的元素应该以垂直向外的方式展开，先移动到右侧，然后向下运动。如果页面是水平滑动，元素则以水平向外的方式展开。

另一个问题是元素的运动路径相交时，元素间应该遵循物理定律，不能互相穿越。或者在元素移动前将元素提升到最上层，让动效看起来更自然。

四、UI动效设计常用到的软件

当看到一个好看的动效时，常常会有小伙伴问到使用什么软件做的。

目前有很多软件可以进行UI动效设计，借着这次讲解动效的机会，我简单列举三个自己用过并感觉还不错的软件，仅供参考，建议大家可以去亲自体验一下每款软件。

1、ProtoPie

ProtoPie是一款轻量级的动效软件，将页面原型、交互和动画整合到了一起，既可以直接在里面设计高保真的UI页面，还能让这些页面快速动起来。

ProtoPie操作页面设计简洁，上手相对简单，没用过的新手也能快速开始。ProtoPie通常和Sketch搭配起来使用，先在Sketch里设计UI页面，之后导入到ProtoPie中进行动效设计，效率贼高。

2、Principle

Principle也算轻量的动效软件，相对更成熟。Principle通常是和Axure搭配使用，产品经理或者交互设计师在设计界面原型和交互时用的比较多。需要注意的是，Principle只能在MAC系统中使用，可能对于不熟悉它的人来说，刚上手使用可能会有一点点困难。

3、After Effects

AE作为一个老牌的设计工具，大家应该都或多或少接触过。AE功能非常强大，可以实现很多复杂的动效效果，但操作起来相对复杂，学习成本也相对较高。

目前大部分的动效都可以通过这三款软件做出来，小伙伴们可以根据自己的需求，选择适合自己的动效软件，从而提升设计效率。

五、最后

以上就是UI动效设计需要考虑的三要素，希望通过这些内容能帮助你对动效设计有更多的认识和思考。

 
作者：Clippp

转载请注明：学UI网》UI动效设计指南！三个要素打造流畅的动效体验

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

我们在去做这种类型的风格时，要学会总结，机能风的海报版面虽然整体呈现较为复杂的效果，但如果仔细观察，基础的元素都比较简单。

大家在做之前可以去先总结，通过观察这类作品可以得到以下元素，比如：

01. 电子元件/芯片

02. 机械感元素

03. 不规则标签

04. 警告符号，装饰性符号等

05. 黑白灰及荧光色的搭配使用 

然后我在准备教程案例就开始画呀画，画了蛮多适合应用在机能风格海报中的元素，最后干脆想了一下，那就索性把所有的画完，源文件都送给大家吧…

教程突然就变成了素材分享…

下面我们来先看一下本期分享的素材，总共分为四个部分，每个部分的形状细节都有不同的差别。

但是下载素材只是第一步，很多同学平时电脑里也攒了不少素材了，误以为收藏等于学会，下载等于精通…

设计毕竟是个手艺活，还是要动手试试才知道怎么使用。

01、首先我们从我给的素材里面挑选几个元素，我这里选择了三个，大中小。

02、人物抠图后，先观察一下，人物本身自带了黄色的轮廓光，那么主色我们就尽量要选择黄色了，画面才会有合理性。

03、这一步就是将图形按照较为平衡的构图方式进行放置，可以和人物有适当的叠压穿插关系。

为了避免图形太过零碎，强烈建议大家可以先以一个大色块为主，可以避免主体散乱。

04、接下来将文字信息进行空白处放置，注意这里比较主要的信息就三块，人名，活动名称，时间地点，编排上主要突出这三个部分即可。

多余的装饰性英文信息适当缩小，起到一个点缀的作用就可以了。

05、最后添加一个纸张褶皱的效果，因为我元素及色彩处理的比较简单，所以加深质感的处理，可以让海报更有层次感。

接下我们看第二个案例，这个案例我打算使用元素拼接的方式让画面更整体，细节可以适当处理多一些。

01、老规矩，开始挑选图形元素…

挑元素的过程确实是…太爽了，怪不得大家这么喜欢素材，尽管素材是我一个一个画的，但是我挑的时候也感觉…太方便了…

这里我顺便将元素组合了一下并且加了个颜色。

02、如果只是在画面中间这样放置的话，四周缺乏呼应的元素，所以大家可以根据已经选好的图形特征自己简单画一些。

效果如下，是不是感觉完整性好多了。

03、然后图片放置进图形中，图片整体也是呈现红色调的，所以整体的色彩和元素我已经用了红色，那么建议重点的信息在这里都用白色，可以简单做一个色彩突出的作用。

无论装饰元素和文字有多少，最终还是要想办法突出重点信息，这两者本身并不冲突。

看第三个案例，先选元素。

01、顺便选一些简单的图形装饰元素，比如箭头条形码等。

02、这个图片本身已经蛮好了，底色也很简单，所以我不打算抠图了。

03、接下来注意观察图片，底部有大量的黑色，所以我们的标签部分可以直接放图片下方就可以了。

其余文字环绕人物进行编排即可。

04、正在这个案例中，我想添加一下类似毛玻璃和磨砂的效果，增强图形的质感。

05、按照这个方法，我为其他地方也添加了这样的磨砂效果，下图为最终效果。

01、看第四个案例，先选元素。

其实我个人还是更喜欢这种带圆角的感觉，感觉有点高端的样子…

02、将元素和人物图片进行合理构图，其实就是控制每个元素的大小和位置，放置他们的错落感，保证人脸不要被色块遮挡，文字信息顺便也放置进元素中即可。

03、还是按照上个案例做磨砂效果的步骤，我们再加几处磨砂效果。

下图为最终效果。

04、注意这里的磨砂效果除了加描边，我还加了投影，让整个画面的色块错落有点纵深感。

01、第五个案例我们换一下人物…一个题目做了四个案例,估计大家已经看腻了…挑几个图形元素。

02、我们将图片和元素做一下结合处理，人物的部分我做了错位的处理，有点视觉迷幻的效果。

人物名字放置图片顶部即可。装饰性文字可以适当的跟元素做一个整体排版处理。

03、最后，老方法，再加几个磨砂效果，你别说…这个效果确实有点上头，普通人受不了这种诱惑…

不要怪我非要做的花里胡哨，花天酒地也不是我想要的方式…

01、第六个案例，还是…

挑几个图形元素…

02、人物图片本来是这个样子，背景是白色，不好处理整体的色彩变化，而我…也不想抠图…

所以在ps里加了一个渐变映射效果。

03、图片用一个元素，标题用一个元素，这样就做好了构图排版处理。

04、但是到这一步，画面还是会有点空空荡荡，填充一些呼应的元素即可。

最后，再加入纹理的效果叠上去就可以了。

01、第七个案例，挑几个细节较为复杂的元素，这次我们是单独拿来做背景使用。

02、为了做出层次感，可以给色块适当添加渐变色和投影，有点立体的效果会更好，因为本来就都是偏白色的，没有投影和渐变的话效果不明显。

03、重点信息我们就用以复本来的颜色就好，可以多一点装饰性元素作为点缀，不然白色的背景还是有点空，有一些点线面的变化版面会舒服一些。

04、最后…

再加几个磨砂玻璃效果…

这次我是真的腻了腻了…

01、第八个案例，元素选好之后，我这里直接处理了渐变的效果，作为背景，有了一点质感。

02、黑白的人物放上去就很适合，这一步我们就搞定了背景和人物的画面整体处理。

03、然后将文字编排进画面中，但是整体除了黑就是白…

颜色有点太单调了，所以我们要换换颜色。

04、这个颜色…

就…

挺好…夜店风的感觉…

最后来放一下合集

原文地址：胡晓波工作室（公众号）

作者：王猛奇

转载请注明：学UI网》科幻机甲风格海报怎么做？

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司