这周我们进行下一步讨论：如何对分析结果进行选择。
首先我们需要了解互联网产品研发团队的各个角色分工。
对于初期的产品研发，可能公司没有团队概念，所以从想法到设计到开发，都由一个人搞定；
等到公司发展差不多，自己成了领导，就可以对各个角色和分工有所分组，也就是大多数初创公司的分配情况：
随着公司业务的发展，产品经理需要处理越来越多的业务规划任务，所以从业务视角和用户视角将之前的产品经理岗位职责进行划分：
所以最终的角色分配是：
再大一点的公司，会增加项目经理岗，把之前产品经理负责的职责拆出一部分，这部分职责就是项目管理。所以角色分配最终是：
了解了团队角色分工，只是让产品得到了更专业的技术支持，接下来我们需要切入正题：对交互方案进行评价筛选，筛选的标准可以围绕：有用性、易用性和吸引力展开。
1. 有用性：
方案是否同时满足业务目标与用户体验目标，为了更好理解，大家可以看下如下事例：
如果所有的线上商品都发顺丰快递，对于用户来讲，用户体验当然很好：够快。但是从业务目标来讲，这是不可取的，毕竟快递不能独顺丰一揽。所以这个想法没有顾及到业务目标，是不可行的；
很早之前，有过 Open ID 的概念：用一个 ID 就可以登录多个网站。但是接入了 Open ID 的网站，对于自身产品的登录注册就会有一定影响，所以这个想法不了了之。
后来 Facebook 和 Twitter 开放了自己 ID，可用这两个账号进行其他网站登录。于是国内很多网站也开始支持微博、微信、QQ 账号登录。
这样降低了用户注册成本，而且也获得了一定收益。所以这是个不错的想法，但是对于一些需要获得用户信息的产品可能不太适合，所以视情况而定。
总结来说，有用性就是要满足产品利益与用户利益。毕竟如果只是很好看，最多也就只能被称作一个艺术品。
2. 可用性
所谓可用性就是用户容易理解，使用起来没有障碍，并且感受良好。
关于产品可用性，大家可以去了解下鼎鼎有名的尼尔森十大可用性原则。
3. 吸引力
所谓吸引力就是产品有打动人、超越用户期望值的细节。
关于吸引力设计，大家可以了解一下 KANO 模型，KANO 模型定义了三个层次用户需求：
基本型的需求：用户认为产品必须有的功能属性，如果没有，用户会不满意；如果有，用户会觉得理所当然。这个层次的需求，还谈不上用户满意与否；
期望型的需求：不是产品必须的功能属性，可能用户自己也不清楚一些功能，但是又恰恰是用户希望看到的。如果这种需求实现得越多，用户会越满意；如果没有满足用户这种期望值，用户会不满意；
兴奋型的需求：对于一些无关紧要的功能需求，如果产品满足了这些需求，用户会非常满意，从而提高用户忠诚度，最后把它推荐给好友。
通过以上标准对方案进行分析，最后涉及到决策，不管哪种类型的角色分配，都需要进行决策，这里可分为以下两种：
个人决策：对于最后的方案选择，由一个人进行「拍板」，这种决策方式速度快，容易抓到事情本质；但是缺点是缺少了团队氛围，不太建议这种一人说了算的决策方式；
群体决策：这种决策方式团队氛围会好很多，通过发表每个人的看法，最后得到合理的、正确的、富有创造力的解决方案；但是缺点就是因为参与者多，需要比较长的时间进行决策，即使这样，也建议使用这种决策方式，不过前提是需要事先确定一个明确的负责人，这样可以对决策后果进行负责。
从小的方面来讲，决策也可分为：
内部 review：设计的作品先在团队内部进行过稿，然后修改，切忌全部做完才进行 review，需要做完一步就进行内部讨论；
外部评审：以会议的形式展开，召集大家对作品进行讲解。
确定了最终方案后，我们需要把它推销出去，具体有以下几种方法：
将思考过程可视化：可以采取上一篇文章的表格分析方式，让设计更有说服力；
自己人效应：对自己人说的一些建议方法更加信赖；
准备一份PPT：展示设计思路；
讲一个故事：以用户的某个使用场景开头，一步步讲解用户的使用情况，慢慢过渡到产品功能设计；
掌握必要的演讲技巧和表达能力：包括口头和文字表达能力，通过这两种表达理清思路，也更好让别人进行反馈。
最后想说的一些话：
作为交互（设计）专业人士，我们需要把握好一个尺度：什么该坚持，什么不该坚持，对于一些专业方面的东西，我们需要团队内部人员都坚持，这样目标会更清晰；但是对于一些比较小的设计细节，有时候可以适当妥协。
如何对设计需求分析结果进行选择：
文章来源：优设 作者：Pony欧尼的日常
以下是百度网盘UE团队近期对会员中心体验进行优化，希望对大家做商业化产品有所帮助。
会员中心是承载着产品增值权益展示、购买、管理的「集合地」。自2016年起推出会员和超级会员两项增值服务至今已有4年时间，随着时间推移，用户对网盘会员的诉求越来越多样，会员中心也不仅仅承载着支付能力，更多地是获取福利信息和情感上的尊享感知，同时在产品框架上的拓展性和效率也有待提升，因此有了本次会员中心改版项目。
对于设计师而言，我们发起这个项目所面临的挑战，不仅停留在用户体验的优化还需要兼顾商业转化。接下来将从确定目标、会员中心框架重构、视觉语言升级、沉淀通用组件等方面，跟大家分享下改版背后的设计思考。
在着手推进项目设计前，我们通过定性和定量的分析，并组织多角色对本次升级的目标进行确认，本次升级的目标是：提升用户决策效率；提升用户尊享感；沉淀设计组件库。
1. 为什么要提升用户决策效率？
会员中心是价值与信息的洼地，用户需要在众多特权、优惠信息中做出决策。整个框架清晰、直观、易懂，是提升用户决策效率及满意度的关键所在。
我们通过支付转化漏斗分析并结合用户反馈发现，改版前，会员中心信息架构比较扁平和单一，缺乏关键性信息的直观展示，比如：优惠信息、会员服务信息，导致部分用户无法在付费过程中更好地做决策。
此外，在支付流程上，操作链条较长，容易引起用户厌倦，导致用户流失。基于这些考虑，我们将对现有框架进行升级，以提升用户的决策效率。
2. 为什么要提升用户尊享感？
会员中心也是用户感知身份变化、感知会员尊享的第一步。改版前，不同身份用户（未开通/会员/超级会员）看到的会员页面却是相同的，无法直观感受到不同身份的差异。
通过UER的用户访谈我们也发现，很多用户出现以下场景：
购买会员后用户，产生疑惑「是否购买成功了吗？」；身为超级会员用户，「感受不到任何尊享感受」；快过期的会员用户，「对会员/超级会员快过期的也感知不到，导致特权中断，影响使用体验」…
因此，我们需要对整体身份的感知进行升级，让用户更清晰地感知到自己身份的层级。
3. 为什么要沉淀设计组件库？
对于产品而言，会员中心也是会员类活动的主要运营渠道。
在日常「小步快跑」迭代需求中，为了提升项目组的开发效率以及更好地实现产品侧多场景模块灵活调用的诉求，需要对复用率较高且灵活多变的模块（尤其是支付模块、特权模块）进行组件化。因此我们也对多个模块进行组件沉淀，提升产品迭代效率。不仅于此，组件化也能给用户提供更加统一的认知，做到产品体验上的统一和规范化。
明确了目标后，我们从以下维度进行设计升级，解决现存问题：懂你所想，会员中心框架重构；凸显尊享感知，视觉语言升级；提升迭代效率，通用组件沉淀。
我们本次框架重构的关键词就是「懂你所想」，只有更了解用户，才能提供更符合用户的选择，从而提升用户决策效率。因此，我们在交互框架层面上，做了以下几件事：打造分层布局；强化关键信息；缩短支付步长；智能化推荐。
打造分层布局
进入会员中心的用户，根据会员成长周期可被划分为：历史未付费用户、会员开通中用户、会员即将过期用户、会员已过期用户。
因此，在这次框架设计中，我们根据身份、动机、行为的差异进行分层布局。改变以往的「多人一面」的布局架构，打造出新的「多人多面」的灵活分层页面布局。
当用户是历史未付费用户时，我们更加突出用户的特权介绍和商品支付，便于用户了解会员服务和商品信息；当用户是开通中的用户，我们更加突出用户可尊享的福利信息，突出尊享感；当用户为即将过期用户或已过期用户时，我们展示用户常用特权信息，唤醒用户付费意愿，并为用户提供便捷的续费能力。
下面是改版前后效果对比，从单一身份感知到多元分层处理。
强化关键信息
关键信息也是用户更为「关心」的信息，通过调研发现，网盘用户更加关注会员优惠活动信息、服务到期提醒以及会员之间的差异性，因此在本次升级中，我们对用户所关心的决策信息进行强化，恰如其分地展示便于用户决策，同时提升用户的付费意愿。
新增运营渠道
通过用户访谈，了解到很多用户总是错过网盘的福利活动，不知道在哪里能接受到一手信息。
因此，本次升级我们在会员中心中新增了运营位，增加用户关注的优惠活动的曝光。
服务到期提醒
针对即将过期或已过期的用户，我们会展示用户常用特权功能的即将到期的信息，避免用户特权功能到期后，给用户日常使用带来困扰，比如使用视频原画备份等功能，我们也会提前告知给用户：「3天后即将到期，将不再享有视频原画备份和在线解压等11项特权」，让用户提前做决策。
强化特权的差异对比
此外，我们还强化了特权对比的差异，分别展示了普通用户、会员用户、超级会员用户拥有特权功能的差异性，便于用户根据自身需求选择对应更为合适的会员服务，避免买错等一系列不便或者多花冤枉钱的行为。
缩短支付步长
为了更方便用户进行支付，让用户付费行为更加顺畅丝滑，我们摒弃以往全页面跳转形式，采用了浮层收银台的方式，减少用户在页面间的跳转而带来的迷失感，达到简化支付路径的目的。
也在用户即将过期等状态，保留了原有前置展示商品和支付操作的方式，让用户一键完成续费，方便又快捷。同时，也会在用户选择商品支付时，展示用户帐号信息，避免用户买错的问题。
智能化推荐
与以往不同，我们不局限于通过理性的信息展示，让用户自己搜寻信息、被动匹配，同时我们也在不断尝试采用更加拟人化、对话感的方式触达用户，推送给用户更为关注的信息，更加精细化地探索多样的运营场景。
比如：针对已付费用户，结合用户的使用场景，更多展示特权信息，如：「周末看视频，2倍速、2K、极速加载缺一不可」；
当我们上了会员新特权的时候，也会及时告知用户，让他们享受更加丰富的权益。
本次对会员中心的视觉呈现也做了全新升级，不仅凸显会员的尊享感、情感化，同时兼顾用户的识别效率及后续拓展性，针对这一目标，我们做了以下优化：卡面升级，提升身份感；品牌色优化，确保拓展性；icon重塑，强化识别性；惊喜彩蛋，提升情感化。
卡片升级，提升身份感
会员身份卡片是用户直观感受身份变化的第一步。本次卡片设计中，在卡片比例上，尽可能接近于实物卡片，并在卡面肌理表达上，采用磨砂质地，更贴合用户自然认知，卡片颜色结合会员品牌色进行设计。同时结合网盘品牌基因中的logo的「云」，提升品牌差异化。
当用户进入会员中心时，采用光影动效，同时描绘「云」型，提升视觉层次感，同时加深用户认知。
品牌色优化，确保拓展性
我们还重新定义了会员体系的品牌色，超级会员选用黑金配色来突显最高级别身份。
主题色延续了网盘会员色系，超级会员为金色，会员为红色，在此基础上调整色彩明度。新配色在产品界面和运营活动上，能给用户带来更加直观的身份感知。
辅助色为黑白，因为它是色彩世界中的 「 经典 」 ，给人以简洁、纯粹的审美感受和视觉享受。以黑白色作为会员体系的辅助色，可以衬托出黑金配色的尊享感。
icon重塑，强化识别性
在特权icon设计中，强化识别性是本次优化的重点，因为图标的目的是用来辅助用户识别，帮助用户做决策的。
我们在icon表现手法上，从「线性」改成「面性」，增强视觉比重；去除底部圆形衬底，采用异型图标，强化icon之前的差异化，同时异型的icon在占比较小的区域里使用更加节省空间，提升拓展性。
比如，当用户是未付费时，特权icon仅作为辅助图形，因为在这种场景下，icon远没有文案更能帮助用户清晰理解，避免用户买错。
因此异型、面性、无衬底的icon处理手法，也是在拓展方面较优选择。
以下是icon优化后的整体效果。
惊喜彩蛋，提升情感化
尊享感，不仅体现在功能、视觉层面，还体现在情感化关怀，因此我们通过彩蛋式翻卡的触发形式，采用对话的方式，展示互动文案。
当用户首次进行翻卡时，它会贴心问候：「很高兴你与你相遇，愿美好时光与你相伴。」；当用户日常互动时，它风趣幽默：「据说超级会员，法力无边！」「你喜欢的样子超级会员都有~」；当有用户关注的重要消息时，它会及时预告式通知：「4.11日即将有一大波优惠福利袭来，超级会员最高5折哦」，从而营造一个风趣又贴心的小管家，也让我们的网盘会员服务变得更加贴心。
会员中心包括个人信息展示、身份卡片、商品和支付、尊享特权、尊享福利、成长体系、专属内容、积分兑换等模块。
其中有多种模块会在多场景中进行复用，为了节省开发及设计成本，同时保证体验一致性，我们本次也沉淀出能够灵活调整各个模块的位置的组件，来提升产品及运营效率。
比如：支付模块；特权展示模块。
支付模块
支付模块承载了会员类商品信息的展示，会在多个场景出现，比如：浮层收银台、会员中心页面、全端收银台，以及会员类运营活动。为了保证支付体验的一致性，我们优先对支付模块进行统一和规范，包括其中的商品展示、优惠展示、以及支付按钮的规范化。
为了便于用户感知到会员与超级会员之间的差异，避免错误购买带来的困扰，我们通过品牌色（超级会员的金色，会员的红色）进行区分。
支付模块的统一和差异，既能保持支付体验的一致性，也能避免用户对会员权益产生误解，为用户带来了更规范的支付体验。
特权展示模块
对于特权展示模块进行特权展示的优化，针对以往特权数量多占用空间大，以及特权展示信息过少用户看不懂的问题，不再采用平铺的方式，而是采用利用横向空间的侧滑方式展示，节省更多空间；不再采用原有的特权图标+特权名称的方式，而是同时展示辅助特权信息，便于用户更加了解特权内容。
并将特权展示方式进行组件化，当有新特权上线时，可直接通过后台配置进行上线，无需进行开发，提升效率。
同时，我们还完成了运营位、专享内容、专属推荐等多个模块的组件化，也根据会员商业化的设计规范，形成会员中心的组件库，提升合作效率及用户统一的认知体验。
以上就是本次会员中心改版项目的全过程，从前期用户调研、目标确定（1.提升用户决策效率；2.提升用户尊享感；3.提升迭代效率），到通过多维度地将目标落地（1.懂你所想，会员中心框架重构；2.凸显尊享感知，视觉语言升级；3.提升迭代效率，通用组件沉淀），不仅优化了体验、提高了效率，也对付费转化率有所提升。
本次会员中心改版，是网盘所有同学的共同努力，同时也是会员中心提供给用户更多选择、更率、更多服务的第一步，它不再是机械的信息展示和冰冷的支付平台，而是更懂用户、提供给用户更多元服务的聚集地。
目前还有很多不足和待完善的地方，我们也在尽最大努力为用户提供更好更有价值的服务，感谢大家一致以来的支持与陪伴 。
文章来源：优设 作者：百度UE团队
我最近一直在想自己要写什么，不如这次就来说说我最近在项目中遇到的问题吧~
再给大家看看我的解决方案，如果大家有更好的方案欢迎留言，我们一起探讨啊~
最近一两年我所涉及的项目都是有关于将网页的功能系统改成APP，而针对的用户就是公司的业务经理，是金融公司的业务经理们，我们的甲方爸爸！
当然这就意味着网页的产品，会有大量的数据，而且由于网页产品的信息处理还没有太与时俱进，所以大量的数据都是文字和数字的组合，因此要将这些数据改成APP时，就觉得好难啊。
其实表单在APP上并不好放，最好的解决方法就是设计成图表，而现在市面上图标样式不管是网页的还是APP一搜一大把，Ant Design有专门的数据网站，如下图所示：
什么样的都能找到，那么我为什么会觉得好难呢？因为数据超多der~考虑的内容又有很多，难免忧愁。
一、为什么要设计图表？
因为数据表单在手机上并不好展示，同时从用户体验的角度上来考虑，数据本身都是数据组成，可读性就不太好，因此如果把这些“数字”从商业目的、用户动机进行有机组合、关联或定义就使得数据变得有意义（价值），图表只是最终的表现形式。
二、图表由哪些元素构成？
一张标准样式的图表基本上是如下图所标示的几种元素组成，如下图所示：
当然这只是最基础的一种图标形式，对于别的形式就不多介绍了，大家都有基础知识，本文将尝试从图表设计动机的角度和大家一起探讨如何更好的进行图表设计。
三、图表设计？
1、明确数据指标
首先，我们得先搞明白这些数据是怎么来的、干嘛的，尽可能要求他们给到你的是尽可能精准的数据，否则会导致接下来的工作前功尽弃。就举我前几天的例子来说吧，产品给了我这样一张图，如下图所示：
我没有仔细的去问一些具体的信息，比如数据最多的时候会是什么样、业务想在这个表里看到什么信息、想要解决的问题什么？这些我都没有问！
上来就是一顿设计操作，把表单设计成了这样，如下图所示：
结果在走查的时候，业务很明确的指出数据信息不够多，他们想要在页面上将所有的数据信息都能看到，而数据最多的情况，数据表单是长这样的，如下图所示：
就是因为一开始在拿到表单的时候没有仔细去分析，才会导致这种情况的发生，因此要如何改进呢？
2、明确设计目的
其实图表设计跟产品设计的思路有点类似，一开始要先明确的就是设计目标，但这个很容易被设计师所忽略，因此前期在缺少设计目标支撑的情况下，设计师就会像一个没有指挥的小乐手，闭着眼睛乱弹，没有方向感。
就像我之前设计方案被推翻，就是因为思考不明确导致的，定义设计目标的过程需要站在业务的角度和数据的角度进行综合分析从而进行构建，一方面需要考虑业务如何更简单的分析、理解数据从而提高决策效率；一方面又需要考虑数据本身如何更加精准、一目了然的传达给用户。
3、规划设计方案
我在写这篇文章的时候，看了很多相关的图表文章，很多都是分析哪些不同类型的图表，配色上要怎么处理，或者哪些图标是用在什么地方的，对我都没有太大帮助，因为图表设计并不是普通的只是要好看的图表而已。
4、解决问题
重新设计之前，我去找业务很详细的了解了他们对于数据的需求，想要一目了然的看到所有的数据对比信息，数据在表单中要全部展示出来，数据后台每天都会刷新，针对的场景是来自在去拜访客户路途中查看客户目前的信息，我就将图表改成了下图所示：
由于面对的数据信息比较多，条纹图比较符合多数据的信息，当然这是数据最多的时候出现的情况，每家公司出现的数据是根据业务所提交的信息展现的。
在功能确定了之后，就是我们的细节问题，不是说我们在750*1624的画布上设计好了图表就行了，我们还要考虑到适配的问题，如下图所示：
屏幕较窄的时候，将X轴的标签文字打斜，保证数据正常阅读的同时也不影响美观度。还有一种解决方案就是有连续的数字时，可以有简写。
四、如何选深色底和浅色底
我们可以先来一个对比图，同样的数据在深色背景和浅色背景下的图表可读性做对比，如下图所示：
很显然浅色背景下的图表阅读效率更高，那么面对复杂数据的时候，情况是否一致呢？如下图所示：
很显然，深色更适合展示信息比较多的，突出重点信息的页面，因此我们在找数据页面参考，在选择深色和浅色背景里犹豫的，可以参考一下。
五、划重点
这里讨论的只是我在公司项目中的其中一个图表设计，不能说做的很多，只是分享一下自己在试错的过程中的成长，从web端改到APP，都会说减少一些功能，让产品更好用，但是总有不想砍功能的需求方，如何满足这些需求，是需要我们一直都在思考的事情。
转自：ui中国-潘团子
分享火爆Dribbble和Ins的设计趋势
相信最近很多小伙伴在逛Dribbble时候，发现最近流行一波新的设计风格，和以往不同的是，这次趋势又回到之前拟物化了，但它与纯拟物化还是有区别的，现在它有一个流行词语叫“新拟态”，今天就和大家分享下国外一位设计师对这个趋势的看法！
虽然UI以各种拟态化的形式存在（例如，您的桌面OS垃圾桶），现在这种风格的趋势更加明显。正如卡米尔·法拉纳（Kamil Falana）指出的那样，从无生命的“表达”到现实主义的过渡开始出现。
不久前，我们还观察到，这种变化开始在我们身边发生，苹果（IOS13系统）就是一个很好的例子。向最小化设计和轻拟物化发展，最终带来了无纹理3d视觉感官。受到了大家的喜欢，来看一张高清图。
如下图设计风格，在dribbble上获得认可度比较高！
Dribbble用户alexplyuto的作品获得了四千多次赞，并带动了这一趋势。
备注：可看出目前扁平化设计过于雷同，用户审美疲劳。偶尔出现新设计趋势风格，反而更个给各位设计师们带来新鲜感！
新风格的特征点
-
由于按钮的视觉表现看着变化不大（因为小了一些，不直观），因此我们将重点放在实际的卡片概念上，以使这种视觉表现更能直观感受出来
-
这种风格的主要好处是“新鲜”（至少持续很长时间）。它为界面带来了“新感觉”，并使其脱颖而出。它也可以与其他样式混合使用，这样就避免很呆板整个画面变成这种柔软凸起的效果。
到目前为止，有一些问题需要解决。我们发现了两个主要问题：
1. 可见性
2. 易用性
- 可见性
图形与背景对比度的主要问题是，当它们都是相同的颜色时，就没有可测量的对比度；客观上存在阴影，因此我们可以近似并尝试测量其外部的第一个像素。在上面的示例中，我们得出了这些对比度值。
而且由于几乎没有人会尝试使用如此强烈的阴影，这意味着其余UI元素必须可访问。这种假设得出的结论是，如果我们通过版式，相近度和与重要元素的对比来进行正确的层次划分，那么这些卡片/凸起的塑料卡片并不那么重要。
尚未对此进行测试（我将尝试找到时间做这件事），但现在我们假设下面元素的两个“版本”均为“确定”。即使有些人看不到阴影，也有足够的对比度让他们看到图标并“使用它”。
- 易用性
仅仅是卡片吗？
但是，如果我们决定将组件用作按钮而不是卡片，则会出现可访问性的主要问题。
我们可以像下面的示例一样轻松创建带有内部阴影的按下状态。
对比度测试
此按下状态的对比度太小，不足以表示差异。是否可以通过改变的其余部分来表达按钮的状态，这里有一些想法，例如使用轮廓和填充图标，下划线或甚至用颜色填充按下状态。
开发实现其实它比我们认为的在CSS中实现“软阴影”外观要容易。我们尚未研究Swift和Kotlin，但我认为这不应该成为问题。
https://neumorphism.io/#55b9f3（实现新拟态效果CSS代码）
您可以轻松地将可开发的设计与这些卡片形状组合在一起（新拟态卡片），从而获得很好的效果。
-
尽管这一新趋势影响了许多设计师，但对比以前使用的卡片组件可访问性问题相比，它的问题并不那么严重。
所以去疯狂的顺应这一趋势，并对其进行调整以使其成为您的趋势。UI设计师的工作就是需要不断来回挑战自我，探索潮流，以符合产品审美。如果没有这种不断的探索的精神，所有产品将再次看起来相同，同质化严重。
-
本篇文章，作者通过对新拟态设计趋势分析，在文中提及“新拟态”和以前材料卡片的区别，同时证实了新拟态风格优势！但也存在一定的弊端！如何去权衡与设计的把控，需要设计师们多去研究探索！
如今新拟态才初出茅庐，还未被广泛使用，需要有先驱者引领。毕竟国内的环境大家都不敢冒险去尝试运用到线上！
css 伪类是用于向某些选择器添加特殊的效果，是动态的，指当前元素所处的状态或者特性。只有一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。
这篇文章在一定程度上鼓励你在构建UI时使用更简单的CSS和更少的 JS。熟悉 CSS 所提供的一切是实现这一目标的一种方法，另一种方法是实现最佳实践并尽可能多地重用代码。
接下介绍一些大家可能还不熟悉的一些伪类及其用例，希望对大家日后有所帮助。
::first-line | 选择文本的第一行
::first-line 伪元素在某块级元素的第一行应用样式。第一行的长度取决于很多因素，包括元素宽度，文档宽度和文本的文字大小。
::first-line 伪元素只能在块容器中,所以,::first-line伪元素只能在一个display值为block, inline-block, table-cell 或者 table-caption中有用。在其他的类型中，::first-line 是不起作用的。
用法如下：
p:first-line {
color: lightcoral;
}
::first-letter | 选择这一行的第一字
CSS 伪元素 ::first-letter会选中某块级元素第一行的第一个字母。用法如下：
<style>
p::first-letter{
color: red;
font-size: 2em;
}
</style>
<p>前端小智，不断努，终身学习者！</p>
clipboard.png
::selection| 被用户高亮的部分
::selection 伪元素应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）。
div::selection {
color: #409EFF;
}
clipboard.png
:root | 根元素
:root 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 <html> 元素，除了优先级更高之外，与 html 选择器相同。
在声明全局 CSS 变量时 :root 会很有用：
:root {
--main-color: hotpink;
--pane-padding: 5px 42px;
}
:empty | 仅当子项为空时才有作用
:empty 伪类代表没有子元素的元素。子元素只可以是元素节点或文本（包括空格）,注释或处理指令都不会产生影响。
div:empty {
border: 2px solid orange;
margin-bottom: 10px;
}
<div></div>
<div></div>
<div>
</div>
clipboard.png
只有第一个和第二个div有作用，因为它们确实是空的，第三个 div 没有作用，因为它有一个换行。
:only-child | 只有一个子元素才有作用
:only-child 匹配没有任何兄弟元素的元素.等效的选择器还可以写成 :first-child:last-child或者:nth-child(1):nth-last-child(1),当然,前者的权重会低一点。
p:only-child{
background: #409EFF;
}
<div>
<p>第一个没有任何兄弟元素的元素</p>
</div>
<div>
<p>第二个</p>
<p>第二个</p>
</div>
clipboard.png
:first-of-type | 选择指定类型的第一个子元素
:first-of-type表示一组兄弟元素中其类型的第一个元素。
.innerDiv p:first-of-type {
color: orangered;
}
上面表示将 .innerDiv 内的第一个元素为 p 的颜色设置为橘色。
<div class="innerDiv">
<div>Div1</div>
<p>These are the necessary steps</p>
<p>hiya</p>
<p>
Do <em>not</em> push the brake at the same time as the accelerator.
</p>
<div>Div2</div>
</div>
clipboard.png
:last-of-type | 选择指定类型的最后一个子元素
:last-of-type CSS 伪类 表示了在（它父元素的）子元素列表中，最后一个给定类型的元素。当代码类似Parent tagName:last-of-type的作用区域包含父元素的所有子元素中的最后一个选定元素，也包括子元素的最后一个子元素并以此类推。
.innerDiv p:last-of-type {
color: orangered;
}
上面表示将 .innerDiv 内的的最后一个元素为 p 的颜色设置为橘色。
clipboard.png
nth-of-type() | 选择指定类型的子元素
:nth-of-type() 这个 CSS 伪类是针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置。
.innerDiv p:nth-of-type(1) {
color: orangered;
}
<div class="innerDiv">
<div>Div1</div>
<p>These are the necessary steps</p>
<p>hiya</p>
<p>
Do <em>not</em> push the brake at the same time as the accelerator.
</p>
<div>Div2</div>
</div>
clipboard.png
:nth-last-of-type() | 在列表末尾选择类型的子元素
:nth-last-of-type(an+b) 这个 CSS 伪类 匹配那些在它之后有 an+b-1 个相同类型兄弟节点的元素，其中 n 为正值或零值。它基本上和 :nth-of-type 一样，只是它从结尾处反序计数，而不是从开头处。
.innerDiv p:nth-last-of-type(1) {
color: orangered;
}
这会选择innerDiv元素中包含的类型为p元素的列表中的最后一个子元素。
<div class="innerDiv">
<p>These are the necessary steps</p>
<p>hiya</p>
<div>Div1</div>
<p>
Do the same.
</p>
<div>Div2</div>
</div>
clipboard.png
:link | 选择一个未访问的超链接
:link伪类选择器是用来选中元素当中的链接。它将会选中所有尚未访问的链接，包括那些已经给定了其他伪类选择器的链接（例如:hover选择器，:active选择器，:visited选择器）。
为了可以正确地渲染链接元素的样式，:link伪类选择器应当放在其他伪类选择器的前面，并且遵循LVHA的先后顺序，即：:link — :visited — :hover — :active。:focus伪类选择器常伴随在:hover伪类选择器左右，需要根据你想要实现的效果确定它们的顺序。
a:link {
color: orangered;
}
<a href="/login">Login<a>
clipboard.png
:checked | 选择一个选中的复选框
:checked CSS 伪类选择器表示任何处于选中状态的radio(<input type="radio">), checkbox (<input type="checkbox">) 或("select") 元素中的option HTML元素("option")。
input:checked {
box-shadow: 0 0 0 3px hotpink;
}
<input type="checkbox" />
clipboard.png
大家都说简历没项目写，我就帮大家找了一个项目，还附赠【搭建教程】。
:valid | 选择一个有效的元素
:valid CSS 伪类表示内容验证正确的<input> 或其他 <form> 元素。这能简单地将校验字段展示为一种能让用户辨别出其输入数据的正确性的样式。
input:valid {
box-shadow: 0 0 0 3px hotpink;
}
clipboard.png
:invalid | 选择一个无效的元素
:invalid CSS 伪类 表示任意内容未通过验证的 <input> 或其他 <form> 元素。
input[type="text"]:invalid {
border-color: red;
}
:lang() | 通过指定的lang值选择一个元素
:lang() CSS 伪类基于元素语言来匹配页面元素。
/* 选取任意的英文（en)段落 */
p:lang(en) {
quotes: '\201C' '\201D' '\2018' '\2019';
}
:not() | 用来匹配不符合一组选择器的元素
CSS 伪类 :not() 用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类（negation pseudo-class）。
来看一个例子：
.innerDiv :not(p) {
color: lightcoral;
}
<div class="innerDiv">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<div>Div 1</div>
<p>Paragraph 3</p>
<div>Div 2</div>
</div>
clipboard.png
Div 1 和 Div 2会被选中，p 不会被选 中。
原文：https://blog.bitsrc.io/css-ps...
代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
今年已经是 2020 了，各位作为时代的弄潮儿，上网冲浪是生活中的不可或缺，丰富的冲浪生活中必不可少的当然是买买买，面对琳琅满目的商品图与文案，用户怎样才能快速抓到重点？或者说，怎么样才能让信息出现在合适的位置？
首先我们要了解浏览信息这个动作的本质和特征，浏览的本质就是大脑通过眼睛去提取信息，是一个传达→解码的过程，在这个过程中又存在一些特性，我们可以利用这些特性去进行一些更的信息传达。
受阅读习惯影响，人们阅读的起始端都是在左侧，结合依据尼尔森等老前辈发布的眼球轨迹研究报告可知，视觉浏览习惯呈「F」型且是不受控的潜意识习惯；同时可以延伸出例如「E」、「Z」等浏览模型，我们可以根据这些视觉模型的特性，结合产品的战略层目标，将信息放置在合适的位置，已达到信息传达率的最大化。
了解了基本的视觉浏览模型，那我们的地基就已经搭建好了，接下来我们来看看地基搞定之后的结构要怎么去布局。
首先我们需要清晰产品的属性，电商平台的本质是物品的交易，因为线上的特殊性，产品中图片与文案对于平台的 GMV 就存在最直接的关系。这个时候，单元布局的轮廓就出来了，就是「商品图+关键词文案」。
同时，不同平台战略方向、发展阶段、团队规模等因素的不同，所针对的用户群体、消费阶层、心智、审美等各个因素都会大不相同，有时候甚至在同一平台中针对不同的活动、不同的品类进行细致的场景划分，产生不同的单元结构以满足商业目的上的需要。
720° 全方位了解平台的属性特征后，我们就可以开始利用这么信息来搭建基本的单元结构了。
例如平台主攻下沉市场，用户群体多为三四线，这个时候用户吸引点在于商品的价格与卖点关键词，这时候我们就可以拉大关键词文案的占比，缩小图片的占比，让他们关注的内容尽可能多的进入他们的眼睛，吸引购买意向模糊的用户点击，增加购买意向明确的用户匹配商品的速度，已达到 GMV 的提升。
简单来说，过程中需要考虑到平台因素所产出的图片尺寸/比例/精致度/是否统一等，与文案搭配所呈现的是否适用当前消费场景及用户心智，是否可以提升用户的转化率，是否可以提升平台的下单率。
单元的架构是多样且复杂的，就像一块七巧板。重点就在于对于产品属性和用户行为、场景、心理等特征的分析，需要权衡各个关键点的重要性，把用户需要看到的信息、我们想让用户看到的信息、用户希望看到的信息以合适的结构状态呈现给他。
我们将大体架构搭建好之后，剩下的就是要把细节元素给点亮，让他们起到一个点睛的效果。
细分一下，其中涉及到的细节元素大致为活动标签、折扣标签、跳转按钮等常规的分子部件，在结构中，图片、商品名称、价格是用户关注的重点，其他的部件则起到辅助刺激的作用。图片和商品名称的大体结构我们在上一步已搭建了，剩下来我们看看这些小部件该如何合理归置。
先从标签说起。整体框架出来了，用户所需要了解的商品信息就已经基本呈现了，这个时候用户心智上更多的主观意向，寻找合适的商品，而标签的出现，更像是一剂兴奋剂，强烈告诉用户：「这个品热度第一！」、「这个品是款！」等我们刺激用户的声音，增强用户查看的欲望。
这个时候疑问来了，那放哪里合适呢？
活动标签，多为显示该商品的热度、促销主题、排名等一些大的状态性的信息，为的是在用户心理层面给这个商品带来更多的好感度，放置的位置可以结合具体场景去分析，可以考虑与商品图进行结合放置。
遵循由上而下滑动的交互原理，我们可知在每个单元的顶部会是滑动浏览时第一被眼睛识别的信息，而且可以利用这个心理去给还没看到具体商品的用户进行一个心理铺垫，比如商品的品质、权威性等，先入为主的进行心理建设，再结合视觉浏览模型，合适的位置就出来了。
次要信息比如倒计时、商品折扣、商品特点等辅助信息，结合布局场景考虑，有的可与图片一起放置增强品质感，有的可与文案一起放置增加决策信息，有的可与价格一起放置，刺激用户进行决策，是很有灵性的一个点睛之笔。
最后是按钮，在这里的按钮可以理解为浏览过程的一个闭环节点，也是一个操作的终结点，是最后的临门一脚。位置当然是在右侧最为合适，降低操作难度，同时也是整个单元的一个视觉终结点，浏览完流程之后决定是否点击跳转。当然，你可以利用你的方式去引导或刺激用户点击，你可以的。
文章来源：优设 作者：阿类杂碎面
为什么大爷大妈们总对排队情有独钟，为什么平常不想要的东西一打折就买一堆……震惊！原来套路你的竟然都是自己的大脑！
如今想要成为一名合格的用户体验设计师，首要就是对目标用户的理解和把控。而为了实现这一目标，掌握一些心理学知识就显得尤为重要。当我们能在设计中合理利用心理学的时候，就离创造出让用户感慨「深得朕心」的体验不远了。
这次要介绍的是设计心理学中与我们日常生活密切相关的认知偏差 (Cognitive bias) ，了解它的基本定义之后再结合相关案例探讨如何在设计中利用认知偏差来创造更好的用户体验。
网络上的定义是这样的：人们在知觉自身、他人或外部环境时，常因自身或情境的原因使得知觉结果出现失真的现象。
简单来说，就是大脑创造了一些快捷方式，在处理信息时自然地去调用这些快捷方式，只是这种操作在快速的同时，也会对我们的决策过程产生危害，比如我们会选择性忽略一些信息，或是自发地对信息进行脑补。这样的认知模式导致我们产生了非理性的偏差。
△ 图：大脑的操作
认知偏差种类丰富，已经被提出的就有几百种，有很多尚未被完全验证。下图总结了现有的认知偏差，它们大概可以分为四类：信息过载，信息的意义不明确，大脑来不及认真作出反应以及大脑存不下所有的记忆。通过这张图，我们可以更清晰地了解不同认知偏差背后的成因。
△ 图：认知偏差宝典
那我们该怎么在设计中利用认知偏差呢？我根据日常工作中经常接触的消费场景和学习场景总结了以下几个方面：
△ 图：章节概览，也叫懒人速读版
作为体验设计师，我们需要为用户的决策创造合适的环境，来引导其按照我们设计的方向去达成他们的目标。
锚定效应
锚定效应（Anchoring）是比较常见的一个被利用在消费场景中的认知偏差。它指的是人在做决定的时候，会在很大程度上依赖于其接触到的信息。
比如商场里原价 2000 现价 500 的商品，原价的存在会让人觉得这件商品的价值就是 2000，现在 500 简直是捡了大便宜。
在体验设计中可以借鉴这种做法，通过前后对比放大来优惠感知，进而促进用户做出有利于我们的决策。
△ 图：利用锚定效应推荐会员套餐，对比差价确实诱人
从众效应
从众效应（Bandwagon Effect）是另外一个常见的用于消费场景的认知偏差，指的是人们做决定时通常会和他人保持一致。
下图是售前页一般的设计技巧，通过展示购买人数和滚动播放购买信息来体现出该商品的热门，让正在犹豫的用户「随大流」下单购买。
基于此，我们在设计中可以营造出一种群体选择的效果来吸引更多的用户。
△ 图：这么多人选择，跟随大家不会错，买它
内群体偏差
前面提到的认知偏差之外，内群体偏差 (ingroup bias) 也一般被用来引导用户决策，它是指人们会在认知上倾向于自己所属的群体。
比如 Booking 在查看评论的区域加入了筛选评论语言这一按钮，虽然设计的本意可能是为了方便用户更好地理解评论内容，但是在真实的使用过程中可以发现，用户更加信任自己所选标签内的评论内容，因为同语言往往意味着来自相同的国家或者相近的文化背景，用户通过这种方式找到一个小群体，然后被影响进而做出与群体内人们更为相似的决策。
△ 图：同胞的评价更可靠
因此在体验设计中利用内群体偏差的关键点在于打造群体归属感，借由小群体的力量影响用户的决策。
引导用户做出于我们有利的决策之外，同样，我们可以利用认知偏差提高用户粘性，增强用户和产品之间的联系，使他们对产品「爱不释手」。
宜家效应
宜家效应 (The Ikea Effect) 是指消费者对于自己投入劳动、情感而创造的物品的价值产生高估的价值判断偏差的现象，消费者对于一个物品付出的劳动（情感）越多，就越容易高估该物品的价值。利用宜家效应提高用户粘性的核心是创造低投入、高回报、高贡献价值的任务，保证用户能够完成任务的基础上贡献自己的价值。
在学习场景中我们可以利用宜家效应提高用户粘性，将用户留下来坚持学习。
首先需要保证用户能够完成任务。懂你英语 ®A⁺ 产品中，我们会在用户设置目标时描述该目标的表现，用户以此选择自己的目标。这种方式下的用户对于任务结果的预见性提高，能清楚的知道如果完成任务会达到什么效果，更能被促使顺利地完成任务。
△ 图：目标展示与贡献积累
其次，用户对产品粘性增强需要能够感知到自己所做出的投入，学习场景下这种投入感知更多体现在知识的累积上。在懂你英语 ®A⁺ 课程中，我们将用户与目标之间的距离设计为学习路径，用户每完成一个阶段的学习便会在路径上明显前进，日积月累下来用户能看到自己前进的印记，清晰感知到自身知识的累积，也就因此对产品有更高的价值感受。
负向偏见
由于学习的「反人性」，学习场景下的用户在体验流程中产生消极情绪的概率要大于其余场景，比如学习效果不好，难以坚持等。此类消极情绪对于学习产品影响很大，是因为负向偏见 (negativity bias) 的存在，人们对不好的事情的记忆比快乐的记忆更加清晰，更经常回忆。
因此在学习场景下我们需要给用户更多的正面积极的反馈来抵消掉负面体验的影响。在懂你英语 ®A⁺ 课程设计中，我们在学习结果页根据用户不同的学习表现给出不同的反馈，即使是偏低的成绩，也依然会给出一个较为积极的反馈，以期鼓励用户坚持学习。
△ 图：做得不好也不要灰心
除了简单抵消掉用户的负面偏见，我们甚至可以通过设计去完全扭转局面，变困境为有趣的体验。最经典例子便是谷歌断网时的小恐龙游戏，不知道有多少人会故意关掉网络来玩这个游戏。
△ 图：谷歌的断网小恐龙
作为设计师我们可以通过了解和利用认知偏差来创造既让用户满意又平衡商业的双赢体验。但由于设计师本身也是人类，与用户拥有同样的思考机制，因此在日常的调研分析和设计的过程中也要警惕认知偏差的影响，不断深入了解用户以及使用科学的测试方法来完善自己的设计，持续迭代反思，不因为某个方案自己倾注了很多心血，就觉得它是最好的。用户可能并不买账呢。
最近设计项目中涉及到「瓷片区」，于是和一些设计伙伴请教了解了一下，在此记录总结一下，也希望可以对大家有些小小的帮助。
听说：美团内部将首页的运营广告位模块称为瓷片位，其可以根据需求变动灵活调整，就像瓷片一样灵活适用，顾名思义，瓷片区也就被叫开来了。
根据下图我们可以了解到，瓷片区在产品中的应用。
瓷片区作为与 Banner、金刚区并行的三大运营板块，都负责着导流的功能。瓷片区较两者更便于在页面中进行布局，可以灵活复用。
在电商产品中，导流指的是通过某种形式，增加对商品/功能的曝光，使自己的用户群去购买或了解感兴趣的商品/功能。导流简化流程：导流入口 → 落地页 → 转化率，设计师需要通过在这个流程中收集的数据，进行复盘反思优化设计。
瓷片区属于运营区，在页面中通常位于用户容易点击的区域。通常为图文混排，常见的类型有：实物类、插画类。
1. 实物类
应用场景：需要对商品/服务有高曝光度的产品类型，如外卖、电商、旅游类等，通过对自有商品/服务的直观展示，达到吸引用户的目的。
优点：识别度高、适配千人千面、元素更换灵活；
缺点：图片质量要求较高；
2. 插画类
应用场景：常见于金融类、虚拟类产品。
优点：高度概括主题的图形，通过插画增加产品的调性和趣味性；
缺点：针对性比较强，难复用，花费时间；
1. 排版
瓷片区常见排版方式：左右排版、上下排版和对角线排版。设计师可以将三种排版方式组合设计，使页面更具有节奏感；
2. 图片
对于电商或商城类产品来说，配图的好坏是影响用户点击率最直观的元素；设计瓷片区时需要考虑全局配图和局部配图的情况：
3. 文字
4. 背景
瓷片区背景常见类型：白色/浅色背景、渐变色背景；设计师根据产品调性及业务需求对背景进行灵活使用，但要遵守以下原则：
文中从四点对瓷片区进行了一个概括性的了解总结，设计要点的话在排版设计中都是需要注意的基础知识所以未多加赘述，以此为自己在项目中遇到的知识点做一次沉淀。
文章来源：优设 作者：木子的小千世界
一转眼，夏天就来了，设计中需要清新又抓人眼球的图片，老板又要求使用各年龄段都喜欢的插画风格，应用场景要广，但是预算又没有那么多，该怎么办呢？这也不是熬夜就能熬出来的，不要烦恼，下面这个网站立马解决你上面所有需求的同时，还能帮助提升你的工作效率，延缓你秃头的时间。
这个创造性超强的插画制作网站就是 BLUSH ，你可以根据自己的想法进行元素的替换，也可以直接使用 8 位网站合作设计师的现有作品，超清新的颜色和多样的搭配空间，绝对会让你十分满意的，无论是做 Banner、海报还是用作文章中的插图都十分合适。最重要的是，可以免费商用！接下来就跟着我一起，走进这个网站吧。
网站内拥有 12 大种类的插画图库，包含人物、城市风景、植物、甜点、涂鸦等等。选择你喜欢或者需要的一类，就可以开始你的创作。操作类似于换装游戏，在各个你需要改变的地方更换你喜欢的元素就可以。如果你要摸清整个网站可以产生多少种搭配的话，可能需要花上你不止一天的时间哦。
从上图可以看出，单在人物上，网站就提供了不同的风格，有像儿童形象的「Friendly ones」，也有极简线条的「Big Shoes」，还有夸张超炫的「Power Moves」等等。接下来，为了更好的理解网站提供的服务和操作的方式，我选取实用多变的「Croods」来演示。
首先在栏目左侧选择「Croods」，就会看到下面这样的界面。最上面是设计师的作品，下面则是可以由你自由创造作品的入口，造型可以选择站着或者坐着，场景可以选择谈话、聚会、公园等等，整体的背景也有五大类供你选择。
这里我选择点击「Peaceful Place」。网站出现的作品很符合现在多数人在家办公的状态，如果你不想自己动手，那直接选择这张图片或者点击「Randomiza」再随机生成一张图片，自己满意之后，点击「Download」便可以获取 PNG 格式的图片，不过，高品质 PNG 和 SVG 格式则需要付费。
当然，你也可以通过改变图片上的各个元素，生成你所需要的场景插画。例如想要一个盘着腿坐在沙发上发消息，和朋友聊天聊的很开心的一个形象，就可以通过下方给予的元素进行个性化定制，把表情改成开心，电脑换成手机，右上方替换成聊天框，最后导出为下图的样子。如果想要多人的场景，在上一步选择多人的场景进入就可以了。
同时，网站也支持下载插件，方便众位设计师在 Figma 中更好的运用。在首页点击右上角的「Get Plugin」进入页面，注册账号就可以顺利安装插件。大家可以根据自己的需要选择下载插件或者直接在网站上在线制作。
最后，不得不提的一点是，网站图库在兼顾多样性和平等性上做了很大的努力，人物的肤色可以随你改变，残疾人也有一席之地，可以选择为人物匹配轮椅，或者给人物戴上假肢，涵盖尽可能多的人物情况和场景。相信这样的网站一定能满足你丰富的设计需求，快去使用吧！
文字来源：优设 作者：山楂
在教程开始之前，我先说一下今天的教程我们会讲哪些部分。首先我们会分析儿童风格的特点、然后在这些特点之上给大家演示绘制一些插画小元素。
我们先来看一下这些海报里，是不是很容易就能分辨出，哪一个是关于儿童主题的画面？
可能刚刚的会比较明显，那这组是不是也同样可以分辨出哪一个儿童感比较强的画面？儿童感它既然能够在这些风格里凸显，它一定有一些特点。那么接下来我会通过几个方面去分析这些特点。
我们要选用一些符合儿童风格的元素。植物是儿童画里出现最常用的元素，动物作为自然界的一份子，当然也非常适合。一些儿童属性的物品。比如书本、棒棒糖等。还有天空的云朵、房子这些儿童画画的时候经常出现的元素，都非常适合儿童画面。
但是一些明显不属于儿童用品的元素就不合适了。比如说口红，口红不会让人联想到儿童，更多是成年女性。骷髅头这种恐怖的物体也不能出现。
那我问一下，眼镜适合吗？如果是这种尖锐的眼镜的话可能不太适合。
但是一旦它的外形变得圆润可爱，就很合适。很多物品也像眼镜一样，只要把外形改变得更符合儿童的气质，就不会显得突兀。
假如某一些物体儿童化特征不明显，而又想让它有儿童感，那应该怎么做呢？加入表情，表情简单可爱，就能表现儿童感的情绪。
每个物体加上表情就会变得可爱。但也正因为这些表情加在了本身没有表情的物体上，所以风格里有一种搞怪感。
我把随机下载的儿童海报拼接在一起，整体分析它们的特点。
儿童插画的海报元素使用的色相比较多，这里随机抽取的海报里，画面都是使用了比较多的颜色，红、黄、蓝、绿基本都用上了。
在饱和度上都偏高，一般保持在 70% 以上。
明度方面，把画面模糊再变黑白，我们可以看到整体画面给我们的感觉是比较亮的，就连中间用了大色块的海报的明度也在 50% 以上。而存在的一些深色也是作为画面的点缀。
那么总结起来，一般是色相选取的颜色比较多、饱和度比较高、明度比较高。我们以这张图为例。
当它的颜色种类变少的时候，画面的活泼程度就会降低。
而饱和度变低后，不仅活泼度降低，这种颜色的风格会趋向于成人化。
画面的颜色变深之后，画面就没有透气感。有一个很合适的成语形容，叫「老气横秋」。就是缺乏朝气的感觉。
那么儿童插画的形体有什么特点？总结起来有两个特点，简单和随意。首先儿童对世界的理解还不够深，能力也不足，往往画岀来的东西都是以概括的形式。
比如儿童画一颗真实的树的时候，去掉很多细节，把一个物体比较有特征的外形表现出来。比如儿童画一颗树可能是这样画的。
其次儿童的能力和经验不够，画画的时候边缘都是比较不平滑的，看起来比较随意。
而且就算本来在他眼中是对称的物体，因为手绘的感觉而看起来歪歪扭扭。
当一个物体简单成平滑的几何形的时候，它是偏向于设计感和现代感的。当它越来越接近于随意感觉的时候，它的儿童特征会更强，同时更亲切。
就像这些作品，虽然是插画师画的，但是却有很强的儿童感，就是这种简单和随意再加上插画师的审美形成的画面。
要注意的是简单和随意的把握，太过随意，商业化的价值就不高了。
儿童海报里的插画虽然每个元素比较简单随意，但是要保持画面比较完整，是需要很多元素的拼凑的。
就像这个幼儿园品牌的元素都特别随意，但是最后呈现的效果却也不错，除了在延伸上花了很多心思之外，还因为它的元素比较多，看起来不至于太单薄。
而这些元素的摆放可以不遵循严格的透视和逻辑，这种方式体现了儿童绘画和成年人严格的绘画原理的不同。
能满足上面的特点的儿童风格有很多，在这里我打算用一种比较简单的绘制风格，来进行操作的演示。
首先我们画一颗简单的树，来看一下这个风格。外形不会追求非常的对称。
就连树干我也是用「画笔工具」和鼠标画的。营造一种随意感。
在这里调整一下最后整体的外形后，我们会发现它的边缘和线条都太顺了。没有手绘的自然感。
所以我们要用到「变形工具」，对边缘进行推拉，这样它的边缘就不会特别光滑了。
最后调整一下尖锐的锚点，树就这么简单地完成了。
大家可能会觉得这个风格过于简单了，我用画动物，去讲解一下其中的细节。首先还是用「钢笔工具」，把形体轮廓和主要部位画出来。 大家是不是觉得画到这里就完成了？其实这个风格比较简单，如果没有一些装饰感的细节的话就会显得太过随意了。所以在这只鸟里，要去想怎么添加一些细节。
首先可以加个腮红。腮红的颜色不一定是红的。像鸟的身体色块面积太大了，需要有装饰，所以画几条羽毛。羽毛的形状太过规矩了，还是需要转曲用「变形工具」调整。
还有尾巴的部分也是需要用线的形式让整体更有细节感。最后都是要用「变形工具」让它的线条有种随意感。
最后的细节在嘴巴上添加，直接画一条直线。其实添加细节就是不要出现一整大块的纯色色块。
对于物体的简化不用太过于死板，比如我们现在看到的这个植物，它可以直接简化成圆形和密集的点的组合。
一开始我是直接用「剪切蒙板」的，但是这样边缘过于光滑了，而且里面的点也被框住，不够美观。于是就把点的分布超出圆形一点。这样看起来就比较有细节了。
而我们通过改变形体，就可以演变出很多种不一样的形态。比如这个物体，我在做的时候想能不能把中间的圆缩小一点 。黑色的点占比再大一点。这样就产生了另外一种植物。
甚至还可以直接去掉中间的圆，把点再放大作为主体。原本的点放大会变得太过随意。所以只能通过画圆形和「变形工具」调整。
这样又可以得到不一样的一颗植物了。这样的演变可以根据画面的需求选取不一样的植物。
所以在这里我已经画好一套常用元素的素材了。以植物动物为主，基本能满足日常设计中的需求了。这套素材会分享给大家，在我们的订阅号后台回复「儿童节素材」就可以下载。这套素材是允许大家商用的。有了素材后，怎么用呢，接下来我将用这套素材演示它能怎么使用。
这些素材可以在画面作为点缀营造气氛。
直接使用这些素材，堆叠成完整的画面。
也可以和图片中的人物或者产品做穿插。
接下来用一个案例演示一下，我是怎么用素材的。这个是学而思的手机端海报的文案，主要有标题部分、课程内容、和二维码等。
首先建立一个手机端尺寸。设置好版心的大小。在这里我做的是下方卡片式的结构。（白色色块部分是海报）
可以先把文案编排进来。首先安排好大的元素，二维码和活动价格。主讲老师和上课时间的小标题，字号大小要保持一致。卡片里的信息就编排完了。
标题是画面最大的字号放在上方，副标题和补充信息和大标题居中。接下来就是要在画面中添加我们的素材了。那么怎么选择呢？首先要定好你要选择的元素范围，不要同时出现太多种类的元素。以植物为主、再加上几个元素点缀是一般不会出错的选择。
首先添加的是面积比较大、块面化比较明显的元素。这里就加了三棵简单的树。
接下来就是添加一些更有装饰感的花花草草。
在添加元素的时候也要注意画面点、线、面的结合。就比如现在我们添加的元素主要是以面和点为主。
虽然树的树干也有线，但是轮廓的线条太「顺」了。
所以要添加「线」的特征更明显一点的元素。
在画面的上方加上适合存在画面上方的元素、比如长颈鹿因为本身比较高，所以没问题。把标题移到适合的位置，加蒲公英作为点缀。最后只剩下中间的部分怎么做出和主题相关联的画面了。
我们还有一个信息可以放在人物的手上。最后一个元素就从海报的主题出发。既然是学习的内容，可以画一本书，放在背影上。元素的拼凑完成了，最后就是细节的添加。
现在画面下方的信息不够突出，是因为卡片和背景都是白色的，所以下方加上一个深色的色块，让信息更显眼。
突出的信息可以变颜色。
背景变成黄白色，最后加上 logo。现在画面好像完成了，但是我最后还发现了一个问题，画面上的颜色饱和度都很高，各种颜色之间碰撞，看起来有点透不过气的感觉。
是因为画面缺少浅色。所以我选了两个花把它变成白色。
现在这个素材使用的案例就完成了。
最后要说明，这一套素材它只是一种风格，我们教程前面有说到的任何一个因素的改变都可以演变成无数的风格。
比如它的颜色搭配也可以变，变成一种更亮眼的颜色。或者说它变得更随意，有笔触的自然感。甚至还可以是画画技法风格变化。也可以为每一个元素都加上眼睛，一种搞怪感就出现了。所以是有无限的可能性的，最重要的是要学以致用。
做好画面还不够，我们画面选择的字体也是很重要的，那么我觉得这几款字体做得都不错。
文章来源：优设 作者：研习设
蓝蓝设计的小编 http://www.lanlanwork.com