今天想要和大家分享的是一个 Ant Design 的设计资产「列表」。它是企业级产品页面中重要的组成部分，几乎所有的产品都会用到它。
随着企业级产品复杂业务场景的增量，Ant Design 的列表覆盖度也受到了很大的挑战，很多设计师说现有的组件和交互模式无法满足他们的业务场景，导致他们需要重新设计列表，带来了额外的设计和开发成本，同时对于全域产品的体验一致性也带来了挑战。因此，我们决定一探究竟，去看看列表的底层基因到底是什么样子，我们应该如何提高通用性和覆盖度。
表格、列表、卡片列表的区别
在研究列表之前，我们首先将表格、列表、卡片列表这三个资产，从用户的交互行为、使用场景、资产结构三个维度进行了分析，并尝试做了明确的定义和区分，避免后期在使用过程中的概念混淆。
（1）表格的定义
表格通常是以矩阵式布局呈现，强调信息的浏览性，趋向于展示多而复杂的数据。数据按照矩阵布局对齐，方便横纵浏览以及研究数据之间的关系。
（2）列表的定义
列表通常以线性结构呈现，能交互式地展示众多数据结构相同的条目，且扩展性强。通过列表，用户更容易纵向扫读来获取宏观信息，横向浏览来了解单个条目的细节信息并进行相关操作。
（3）卡片式列表的定义
卡片列表通常以网格布局呈现，用于承载数据间相互独立的信息，扩展性大且个性化强。通过卡片列表，用户会更聚焦于单个卡片的概览内容，且很少会进行卡片间的数据对比，而是对单个卡片的数据信息进行查阅，并决定是否进行操作。
列表的构成
在清楚的定义了什么是列表之后，我们开始去思考一个列表的底层结构到底会是什么样？经过几轮的讨论和试错，我们得到了如上图所示三层结构，它们分别是容器层、容器功能层、内容层。
容器层：容器层像一个盒子，它的大小、形状决定了这个容器承载内容的体量，因此我们将列表的容器层默认值定义为一个宽1184px，高为44px的矩形。用户可以根据业务需求调整其高度和宽度。
容器功能层：容器功能层象一个盒子的手提带，用户只要提起这个带子，整个盒子就会被拎起来。也就是说，这个容器功能层是整个列表的全局操作。
内容层：内容层像放入盒子里的各种物件，用户可以根据自己的需求在这个盒子里填满各种东西，并在盒子外面贴上一些标签，来告知盒子里都有些什么，当用户需要查看具体的东西时，就可以打开这个盒子。
通过三个层次的划分，我们可以清晰的定义每个层次的内容及具体的职能是什么，这有利于我们后期面对复杂业务场景和海量信息内容时，可以更好的去归纳和组织信息的呈现，于此同时高度结构化的组织形式也是保持资产内在一致性的关键要素。
模式化设计方法 — 元素穷举
在列表的构成中，我们清晰的定义了列表的底层结构以及其对应的职能，到目前为止，你可以把它想象成是一个空盒子。当然，仅有这样一个空盒子是远远不够的，接下来，我们要在这个有边界的空盒子里合理的规划物件的收纳，以及思考对这个盒子，用户会有哪些操作诉求。因此，我们有了许多新的疑问，例如：
企业级产品通常都会在这个列表中放些什么内容呢？
这些内容是否可以能被抽离出一些共同的特征和展示形式呢？
我们应该如何更好的组织这些内容，提升用户的阅读和操作体验的同时更好的解决通用性和覆盖率的问题呢？
为了解决这些疑惑，我们尝试了很多种方法，最终总结了一个新方法：Ant Design 模式化设计 — 元素穷举。（关于 Ant Design 模式化设计方法详情，请查看此处。）
如上图所示，在元素穷举之前，首先我们尝试思考了一个问题：当用户看到一个列表时，它的浏览顺序和阅读习惯会时什么样子的。通过分析发现，在信息浏览的场景中，通常人们会以从左到右，从上至下的顺序进行信息的浏览。于此同时，人们在获取信息时，更习惯于先了解信息概要，再查看细节，最后作出判断或决策。那么，基于以上两个维度的分析，我们尝试将单个列表条目的内容层进行区块的划分，得到了如下图所示的三个区域：主题区、关键信息区、操作区。
主题区：主要呈现的是一些信息概览，包括标题、时间、备注等信息，用户看到这里就可以快速的对当前列表产生信息的认知。
关键信息区：该区是对列表中详情数据的高度提炼，主要呈现一些关键信息，帮助用户对列表内容进行知悉，辅助其更好的进行下一步的决策与操作。
操作区：基于业务的需求，放置相关的操作按钮，从而达到产品的运作和流转。
在完成区块的划分和具体的职能之后，我们开始思考，每个区域应该要有什么样的元素才能够更好更直接的展示列表信息，在此期间，我们例遍了上百个列表页面，并开展了一次脑爆会，对每个区域的内容进行了元素的穷举。
如上图所示，我们在上百个页面中梳理并抽取了每个区域可能出现的元素，并整理出一些通用性强，覆盖率高的元素进行组件化。保证后期设计师在结合不同场景使用时的拼装和灵活替换。此外，三个区的元素都有各自明显的特征性，例如在主题区中的元素更加简练、概括和基础。而在关键信息区，展示的元素相对更加丰富，如我们会通过 Mini Chart 来向用户展示一些数据信息，通过进度条来向用户展示数据处理进度，通过标签来向用户呈现数据的分类或重要程度等。在操作区，我们也设定了一些展示规则，例如纯字段的展示、图标的展示以及弱化操作的展示方式等等。
梳理完内容层的信息之后，我们也对容器功能层结合业务场景，进行了穷举，赋予了四个常用功能，分别是：排序、勾选、展开和置顶。如上图所示，我们将对条目容器全局性的操作放在了条目的最前面，这有利于对多个条目进行批量操作，于此同时也和尾部的业务操作做一个显著的区分。
基于元素穷举的方法，我们系统全面的梳理了列表在内容层和容器功能层的底层元素，通过这些元素的自由搭配组合，就可以生长出基于业务场景下的不同列表。他们有着相同的底层逻辑和规则，却有着不同的外在视觉和功能。
列表的布局及交互规则
（1）内容层的布局规则
通过元素穷举的方法，我们更清晰的梳理了不同区块可能出现的视觉元素和信息内容，更合理的排布了整体的信息展示顺序。到此为止，我们可以很好的解决内容层的覆盖度问题。但是，我们发现，除了内容层的样式以外，还有很多细节问题有待解决。例如：并不是所有的业务都需要将单个条目分为3个区域。基于这个问题，我们制定了一系列的排布规则，详细的说明内容层三个区域搭配的具体规则，如下图所示。
动态演绎
（2）容器功能层的布局规则
为了保证这四个功能的摆放不影响主题区的信息展示，我们制定了一系列的间距规则，保证在四个功能都存在的场景下，有一个较优的展示方案。具体内容如下动态演示图。
列表的视觉案例
根据以上的交互规则和相关的组件元素，设计师可以根据自己的业务需求进行拼装优化。如下图所示，动态演绎中展示了单行条目的一些规则变化。你可以添加图标、添加Tag；在关键信息区你可以增加进度条等。
当你需要展示的信息较多时，可以对容器层的高度进行扩展，变成双行甚至是多行。如下图所示，动态演绎图中展示了两行的列表是如何展示数据的。
单行列表的展示样式，如下图所示。
总结
以上就是本次分享的全部内容，相信大家看完之后可以理解“表里不一”的概念了。所谓的“表”是指在UI层面的视觉元素表现，我们通过元素穷举的方式，来抽离通用性强、覆盖率高的元素，将这些元素设计成一个个的UI组件，设计师可以根据自己的业务场景自由拼装组合，得到一个幻化万千的的外表。
所谓的“里”指的是资产的内在结构和交互规则，我们可以将其定义为是一个设计公式，其包括了对列表的区块划分、间距规则、响应式规则等。大家可以通过这个公式来制定自己的资产规则，从而保证产品的内在体验一致性，交互一致性，减少用户的学习成本和试错成本。目前整套规则和资产已经在蚂蚁内部的企业级产品开始推行使用了半年，整理来看，设计师通过以上的规则以及相关组件的自由搭配组合，业务场景的覆盖率能够达到80%以上，大大提升了设计的效率，于此同时，结构化的交互逻辑和标准化的组件与开发形成了精准的同步，提升了研发效能，从而促进整个产品研发效率的提升。
最后，感谢你的花费宝贵的时间阅读这篇文章，希望可以给你带来一些启发。我们非常期待设计师体验和使用Ant Design 4.0 的设计资产，同时也能全面了解这些资产背后我们的思考和一些小经验。当你发现我们的设计资产无法满足你的业务场景时，也可以通过这些方法和步骤，创造属于你们团队自己的设计资产。
文章来源：站酷 作者：Ant_Design
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
引人注目的UX设计背后的心理学
每天，您都会在线访问多个网站。他们中的一些给人留下了积极的印象，而另一些则使您在数毫秒内按下了后退按钮。您最终从一个网站购买了产品，而不是从竞争对手那里获得了产品。是什么引导这种行为？您为什么对某些网站感到满意却却避开其他网站？
这样做的主要理由之一是在用户体验设计中实施心理学。您喜欢的网站聘用的UX专家知道如何在与网站交互的每个阶段触发心理反应。在线心理学的使用是成功的，因为我们在人类生存的几个世纪中获得的某些进化特征在我们每天与世界各地的互动中仍然发挥着重要作用。
本文介绍了一些常见的UX元素以及它们背后的心理思维。
有关服务或产品的建议
例如，当您在机票预订网站上时，会在预订完成之前或之后获得有关酒店，餐厅或旅游选项的建议。在许多情况下，如果价格足够诱人，人们就会继续预订酒店或在餐厅预订。当您搜索抵押贷款时，同样适用，并且您还会获得有关债务管理或退休计划的建议。
图片：Skyscanner
这是一种称为“预期设计”的UX创意。目的是根据您在网站上查看的内容来建议您最可能需要的其他内容。这个设计思想是基于当我们在互动中感到被理解时更快乐的心理原理。这在所有领先的电子商务门户网站上也可以看到。
图片：Flipkart
这种UX设计的一种变体是在许多网站上延迟显示弹出框以进行加价销售或潜在客户。这也是可以预见的，因为它基于这样一个事实，即许多用户直到从站点上花费的时间中获得了一定的满意，才会对弹出框的内容不感兴趣。
显着性原则是另一个鼓励用户体验设计决定的心理原则。它说人们将注意力集中在当时与他们最相关的事物上。因此，正在寻找飞往夏威夷的廉价航班的度假者将很高兴看到提供经济实惠的住宿，甚至为他们的旅行提供融资选择。仅登陆页面以读取症状的用户将仅关注页面的内容，而不关注订阅弹出窗口。
限制用户选项
您选择的网站比强迫您跳过五个菜单来查找相同内容的网站更容易找到。这是因为我们发现很难做出决定时，有太多的选择。这是基于希克定律的心理原理：选择的负担。
图片：Apple
最好的UX设计人员了解这一点，并确保用户可以找到所需的信息，产品或服务而不会感到不知所措。
抢眼设计
图片：例如葡萄酒
如果网站或应用程序的设计精美（根据用户的描述），则立即导致对品牌的有利倾向。这是一种心理原理，称为审美可用性效应。如果您的网站漂亮，那么普通用户就会相信它比同一个利基网站的其他功能更实用，更值得信赖。关于吸引力的这种偏见也可以在离线状态下看到，因为研究表明，更具吸引力的人被认为比其他人更有能力和更友好。
此外，引人注目的设计可能使人们忽略网站或应用程序上的其他缺点。顶尖的UX设计人员花费必要的时间来获得任何项目的最佳美学效果也就不足为奇了。
醒目的颜色口音
图片：Paypal
诸如Trustly，PayPal，FreshBooks之类的品牌，以及您日常遇到的许多其他品牌都使用颜色强调点，以使您的眼睛指向CTA按钮，注册表格等。网站上的主要颜色为蓝色时，它们使用绿色，红色或黄色来表示突出这些区域，它会起作用！这些网站的任何访问者都可能会错过页面上的其他内容，但会看到这些部分以独特的口音仔细突出显示。
这是基于赫德维格·冯·雷斯托夫（Hedwig von Restorff）的心理对比原理，即人类更容易记住那些与其周围环境脱颖而出的东西。有趣的是，没有颜色被认为是最有影响力的。UX设计人员只需确定主导的颜色主题，并使用不会混入背景的另一种颜色作为重点选择。
产品差异化价格计划
这也称为“金发姑娘”定价技术。企业使用这种技术来销售“中档”产品。当您四处寻找虚拟主机计划时，您可能会看到更多。提供商通常列出三到五个订阅计划，并将中间计划突出显示为“受欢迎”或“热门”。
图片：Acowebs
许多人立即分析出最昂贵的计划和最便宜的计划，最终选择了所谓的中端计划。这是因为他们将其视为最高价值计划和入门级计划之间的完美中间地带。有趣的是，这些中端计划的价格没有像其他任何人一样受到严格审查，这使得它们成为提供这些品牌的品牌中最赚钱的。
这种定价技术之所以有效，是因为它基于取景的心理原理，该原理强调了人们在做出购买等决策时如何避免极端情况。它还显示了选择的呈现方式如何影响决策过程。
其他领域的更多用户体验设计师正在采用这一原理。现在，各种电子商务商店都提供多层定价结构或提供价格不同的相似产品。大型科技品牌也不例外。他们可能是这一原则的最大受益者之一。因此，下一次您发现自己忽略了中端选项规格，规格稍高但仍低于最贵机型的三星Galaxy设备时，您就知道了！
这是另一个例子。
图片：SEObirth
限时优惠
电子商务网站已经完善了使用限时报价创造产品需求的技巧。一些品牌会声明要约/产品“仅在接下来的X天内可用”，而其他品牌如亚马逊将显示详细信息，例如“仅剩5个库存”。无论哪种样式，两种策略都旨在引起您的相同反应：紧迫感，因为该产品很快将不再可用。
图片：亚马逊
这是基于稀缺性的心理学原理，该原理指出，与到处都有的物品相比，我们倾向于更加重视稀缺或不可用的物品。一个1975年的研究证实了这一原则。研究人员将相同类型的曲奇放在两个罐子中，但是第一个罐子有10个曲奇，而第二个罐子只有两个曲奇。研究参与者对第二个罐子的评价高于第一个罐子。
研究还发现，人们对以前丰富但现在稀缺的产品的评价要比总是稀缺的产品更有价值。经济学专业的学生不会对此感到惊讶，因为可用性的下降总是会触发需求的增长。
除电子商务网站外，其他具有在线形象的品牌也采用稀缺性原则。出售在线课程的企业家强调诸如“仅适用于前10名学生”，“一周内结束”之类的术语。其他人则为采取特定行动的人们提供独家利益，例如提交电子邮件地址，支付服务费用等。 。
当品牌试图销售“限量版”产品时，该原则也可以在离线营销中看到。
UX设计师之所以采用这种技术，是因为他们知道，即使产品或服务没有迫切需求，人们在产品或服务稀缺的情况下也会注意。
推荐书的战略定位
图片：ElegantReports
有没有想过为什么许多产品或服务网站的主页上都有推荐？为什么在做出购买决定之前总是要寻找推荐？这是因为社会证明的心理学原理。
当我们对任何事情都持怀疑态度时，我们会寻求同行的指导。这就是为什么您会发现人们在选择公司之前先在社交媒体上要求评论特定品牌的原因。在1969年社会科学实验强调了这一先天行为。研究表明，如果已经有足够的人参与，人们至少可以说服人们注意某些事情。
除了推荐之外，UX设计师还通过炫耀可信赖的从属关系（例如SEO专家从事的业务或以作家为特色的博客）来结合社会证明原则，订户数量，帖子中的股份数量以及产品的等级或服务，甚至获得的奖励数量。
图片：Acodez
电子商务商店通过显示名为“客户也已购买的商品”的部分来使它更进一步，以突出显示可能会使用户感兴趣的流行产品。
突出赠品
图片：皮特和佩德罗
如果您免费提供某些商品，在线用户现在或将来更有可能从您的品牌购买商品。这是基于互惠的心理原理。这就是为什么许多UX设计师强调任何交易的原因。
如果您要购买新鞋，则更有可能选择在其网站上提供“免费送货”的品牌。同样，您也可以在提供免费指南或免费咨询的登录页面上提交联系方式。
UX设计师结合对比和互惠的心理原理来创建高度转换的页面。
结论
达到既定目标的引人注目的UX设计并非偶然。最好的设计师知道，在线成功的关键是要吸引一般用户群的基本本质，他们会运用心理原理来实现这一目标。人类的在线行为是可以预测的。结合心理学和用户体验设计，您的品牌可以产生更好的结果。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
前言
在这艰难又魔幻的2020年的尾声，有必要系统汇总下关于UI/UX的设计发展方向，为接下来的2021的开篇带个好头。本文在了解这些趋势的同时，分析特点并举例落地实例，来帮助大家启发创意设计工作的思考切入点。
流行趋势跟人们所处的环境密切相关，从最初的方块马赛克——>追求极度写实——>扁平风——>到现在的质感拟物，扁平设计霸屏的这几年，设计风又向更立体、丰富、更有层次感的方向发展，所以说趋势就是一个轮回。设计风格没有绝对的好坏，在审美达到一定疲劳时，就会开始出现新的设计风格。每一个新风格都值得设计师去拆解、思考，本质都是为了提升更好的交互体验。
而在进入下一个十年的过程中，我们对数字产品和体验的依赖将日益增长，预测真正胜出的将会是3D动画和用户界面/用户体验设计的结合设计，5G技术的发展，它将重塑了我们以前无法想象的交互方式，这将是一段充满创意、鼓舞人心的发展阶段。在这里让我们来看看未来那些不可忽视的设计趋势吧。
（注:图片来自网络，均标明出处及作者，若有侵权请告知删除）
1、3D与UI结合
随着且易用的3d软件工具的出现，3D 元素已经开始变得越来越受欢迎，而在这之前，UI界面一直被平面设计所主导。与 2D 不同，它提供了更为逼真的立体效果，从插画、动效、电商到平面视觉，在所有的设计类型中都能找到它，3D现实主义已是各个领域的大势。
圈中也出现了很多免费或付费的3D预设元素及场景组件，帮助3D小白更快地搭建出具有冲击力的视觉组合。
特点：
• 直观感受；
• 立体真实；
• 形态丰富；
▲Izmahsa
▲Mike
▲Tran Mau Tri Tam ✪
▲Vikiiing
▲https://www.awwwards.com/inspiration/3d-hover-number-reveal
实例应用：
各大厂都开始纷纷尝试在产品中加入3D元素，将自家IP立体化，植入到各个品牌静态页面，加深品牌印象渗入。3D技术虽然已经出现有一段时间了，但是为了保证速度和性能表现，较少应用到产品中，随着软件技术的提升，立体渲染产品将开始慢慢运用到更多的界面交互、H5活动中。
▲闲鱼、QQ、花椒直播的3D启动页
▲得物（毒）的3D空间动效
网易云音乐每年的音乐总结报告都追随着的设计潮流，今年还可以自由选择人物形象，增强了用户的主观代入感，以下是每年的设计风格变化：
▲2018-渐变插画、2019-撞色渐变、2020-3D人物场景
▲2020-总结陈词H5
▲总结报告Banner的动效
其中IP立体化最多的当属K12教育领域，除了制作IP周边外，3D效果能适应丰富的运营场景，高度还原现实世界，给小朋友带来最真实的学习互动体验。
▲洪恩识字（3D学习场景）、腾讯开心鼠英语ABCmouse
▲IP在播放儿歌时的互动
值得一提的是今年苹果发布的macOS Big Sur除了玻璃拟态的变化，图标还加入了3D维度的拟物视觉层次。
苹果的 mac OS 的人机交互指南中也明确指出：“图标不仅是装饰性的，而且在与用户交流中起着至关重要的作用，它应该传达应用程序的主要目的并暗示用户体验。”这次扁平化和拟物化的结合，将又要引领一波设计趋势。
2、软渐变（Soft gradients）
过于强烈的渐变不再是趋势，大多数设计师都开始喜欢使用非常简单和微妙的渐变，如果产品的目标用户人群需要轻松温和的视觉环境，那么此风格再适合不过。
软渐变包括背景、阴影、反光，常与线条平面图形结合，应用于界面、网站、图标、icon等设计中。
特点：
• 低调温和
• 微妙渐变
• 清新愉悦
2.1、柔和背景
在设计网站中我们已经看到了许多非常精致，明亮柔和配色方案，混合两种以上的颜色来创造多彩的模糊背景。它使设计看起来非常现代、不打扰、清新而令人愉悦，其中画面内容是主要视觉焦点。
▲Vladimir Gruev
▲Sajon
▲Anton Mikhaltsov
▲Ghani Pradita
实例应用：
▲咔咔、美柚
2.2、柔和阴影
柔和的彩色阴影使UI有了更微妙的深度变化，在图标设计中经常需要渐变或阴影来塑造物体，柔阴影使设计元素更丰富立体，并且它们有助于区分内容之间的层次结构。
▲Ghani Pradita
▲Sèrgi Mi
▲Taro Huang
实例应用：
▲有道数学（已下架）
▲Uki
3、玻璃拟态（Glassmorphism）
去年新拟态掀起了一阵狂热，但这种模拟受到挤压的塑料效果（凹/凸层次感），在用户的阅读性上可能会出现问题，新拟态更适合用在局部的少量元素点缀，无法完整地使用在整套应用程序中。
▲Alexander Plyut
伴随着今年苹果发布的 MacOS Big Sur 操作系统的发布，新的拟物风格正式回归大众视野，整体风格应用了新拟态（Neumorphism）的设计思路，利用大量的毛玻璃质感和大量投影纵深感，能很好的突出前景信息，中和了扁平化图文带来的生硬不立体感。而Big Sur的图标也加入了 3D 质感设计，设计语言更为时尚简洁。苹果设计师 Alan Dye 在发布会上也提到了设计风格转变的原因，主要是希望「降低视觉的复杂度，让用户能够将注意力集中在内容上」。
而的玻璃拟态则更加注重垂直空间 z 轴的使用，背景多鲜艳色彩，在上空使用隔一层高斯模糊的毛玻璃质感，模糊的边界有细微的浅色边框，整体效果就是让元素之间有虚实结合的特殊空间。毛玻璃运用在界面中对关键信息起到强调作用，用户可以看到物体间的层次关系，哪一层在哪一层之上，就像物理空间中真实的玻璃一样。
特点：
• 透气磨砂
• 层级空间
• 简洁拟物
▲引领新拟态风格的Alexander的作品也朝着玻璃拟态变化
▲Kostia Varhatiuk
▲Ghani Pradita
▲Ibrahim emran
▲Queble
实例运用：
▲毛玻璃视觉可追溯到2007年发售的Windows Vista，而当时的 OS X Yosemite 也大量使用了这种设计语言
▲的MacOS Big Sur操作系统
▲图标的变化
4、暗黑模式
暗黑模式是白色界面的相反版本，适用于午夜时分。之前用了很长时间微信的暗黑模式，突然切换成白色界面后，就像吸血鬼见到太阳光般刺眼，果然暗黑模式用久了还是比较舒服的。
暗黑模式和之前经常提到的夜间模式是有区别的，简单来说暗黑模式可以在任何场景下使用，并没有降低对比亮度；夜间模式则专为夜间场景设计，重在降低对比度，以降低在暗光环境下屏幕对人眼的刺激。
特点：
• 突出内容
• 减轻干扰
• 沉浸体验
▲Tom Koszyk
▲Victa Wille
▲Golo
▲https://www.awwwards.com/inspiration/3d-hover-number-reveal
▲Tran Mau Tri Tam ✪
实例应用：
▲有道词典
▲爱范儿（ifanr）
最常使用暗黑模式的车载系统：
▲小度车载
暗黑模式的灵感最早引起大家注意的应该是抖音，在这之前大部分的应用都是白色为主，抖音整体黑色界面带来的沉浸以及轻打扰体验还是很棒的，在这之后也相继出现了以黑色为主的APP设计：
▲MOO音乐(可手动切换颜色模式)
▲Space FM
5、多彩高对比度界面
受Material Design调色板的影响，2020年用户界面趋势的一定不能少了亮色和荧光色的，可以作为主色也可以作为辅色，简约的界面中明亮大胆且对比鲜明的色彩一直都处于增长趋势。荧光色一直是90后喜欢的风格，我个人就非常喜欢荧光色，现在要是谈到该风格的受众主力军可是90后啊。
颜色是为界面添加信息和情绪以及使其看起来美观和吸引人的最有效方式之一，对比鲜明的颜色在白色和黑色界面上都能很快吸引用户的注意力，这种风格已经成为清新、酷炫、数字时代的代名词，而在2021一趋势还将会继续影响UI、平面、广告、插画等领域。
特点：
• 活泼大胆
• 对比鲜明
• 潮流科技
▲Amy Martino
▲Halo Mobile
▲Anastasia
▲Paolo Spazzini
在网站设计中的应用：
▲https://www.theartcenter.nyc/
▲https://www.squadeasy.com/en/
实例应用：
▲GoFun出行
▲开言英语
6、抽象几何元素
从上世纪初开始，抽象构成中的简单几何形状就已经用于视觉艺术中，多用于主背景主题或色彩细节，使用钢笔工具编辑最简单的形状（正方形，圆形、椭圆形），加上不同的颜色或渐变，让设计看起来既规则又有趣。
几何图形可以运用到UI设计中 ，将它们混合在一起以创建马赛克的效果，形成具有品牌意向符号的记忆点。
特点：
• 规则组合
• 品牌印象
• 重复记忆
▲Johnny Nova
▲Vladimir Gruev
实例应用：
最近看到的一组原色视觉刚好融合了高对比度+几何这两种风格，那就是SHINee的正规六辑合辑《‘The Story of Light’》，采用红黄蓝三色加上圆形、正方形、三角形的大块面积来打造画面空间及变化，带来极具视觉冲击的音乐色彩与魅力。
▲专辑的主视觉
当然，几何形状不止用于色彩图案细节，在UI界面布局中经常使用大块面图形，这种设计方法受到越来越多的关注。
7、极简风
极简设计的前身是2010年代中期精巧又花哨的设计，这种设计已经存在很长一段时间了，但在2020年，人们每天需要消化的信息量越来越多，所以现在用户想要尽可能避免“视觉垃圾”，这也是为什么我们会选择更简洁专一的界面。
特点
• 专注信息
• 清晰易用
• 简单操作
▲RonDesignLab
▲Quan
▲BAOLIN
▲Gregory Loshakov
谈到极简主义，就不可避免会涉及到无键趋势，因为按键越少就意味着设计越简洁，而这种简化过的设计将让手势操作和语音交互更为流行。
▲Taras Migulko
▲Gleb Kuznetsov✈
实例应用：
▲夸克浏览器的夸克宝宝
8、将视频应用到UI中
在 2020 年，信息的触达的速度将会变得更快，而视频是很好的载体，各个年龄段的用户都喜欢观看引人入胜的动画，无论是选择通过短视频还是电影的方式来推广产品，都很好地灌输品牌理念，建立与受众群体的关系，加强用户忠诚信任感。
特点：
• 营造氛围
• 类型多样
• 品牌调性
▲Fireart Studio
▲Ehsan Rahimi
实例应用：
▲moo音乐登录页
▲虾米音乐欢迎页
9、插画与3D的界线越来越模糊
艺术插图从2017年开始到现在仍然很流行，几乎适用于任何类型的设计行业，是设计领域中最热的趋势之一。插画的视觉能很好的帮助用户理解产品背后的故事，为了把故事讲好，我们可以创造出一个品牌人物，赋予他人格，为他制造一些故事和冲突，最终帮助我们解决产品问题。这是在产品设计中讲好故事的基础，至于讲故事的方式，在 UI 和 UX 中都有使用，原理一样只是落地方式不同。
在2018年的蜘蛛侠平行宇宙中我们就已经看到了3D与插画的结合，艺术家保留了人物在美式漫画中的的线条笔触，把“手绘”的细节和质感都放大到了荧幕上，在剧中还采用对比强烈的大色块扩大了视觉张力，分分钟把漫画书甩到面前，让人忍不住惊呼，索尼的艺术家们是怎么把片子做得这么酷！
▲3D人物的画笔触感
▲画面光源处由波普圆点组成的背景
▲纸本漫画书中的“声音词”
▲漫画经典线条
▲Entei Ryu在3D建模使用插画质感
▲Minh Pham ✪在ui界面中的尝试
实例应用：
腾讯旗下音乐平台JOOX最近的概念宣传片，从MG、三维、定格、插画多个风格之间来回切换，给我们带来了一个多元的音乐世界。各大视频网站还搜不到，不能直接链接视频地址，喜欢的朋友可以关注微信视频号“UoU_Studio”观看完整视频。
在3D开始迅速发展的阶段，二维与三维之间的界限变得越来越模糊，插画作品也可以具备强互动性，而3D插画与动效的结合提供了一种奇妙的新方法，希望能够看到未来插画更多的可能性。
10、更多的微交互动效
最后一点，还是要强调动效在UI中的的作用，微交互最早出现在 2018 年，让用户更好地理解系统如何工作，并在引导其获得更好的体验方面扮演着非常重要的角色。它们在 UI 设计中决定了一个 App 或网站是普通还是优秀，从点击反馈、加载等待、导航交互等等，为用户界面设计增加了动态性，交互性和直观性。
动效起到的作用：
• 引起人们对应该做什么或接下来将要发生的事情的关注；
• 创造流畅和视觉愉悦的过渡；
• 带给使用者美观的享受；
• 指导我们进行复杂的操作；
• 确认用户使用旅程中的操作。
▲Jakub Antalik
▲Forever D.
▲Kingyo
▲Eugene Paryhin
▲Leo Natsume
▲Taras Migulko
实例应用：
▲GoFun选择车辆后的页面转场动效
结尾：
2020的趋势在满足用户的美学要求上，侧重内容和感情表达，还会根据不同设备载体、新的技术而变化，为用户提供的丰富体验。
借用Adobe设计副总裁 Jamie Myrold 的一句话：如今设计师要思考的，绝不仅仅是设计一款App、网站或设计工具。我们要思考的是人类的需求、用户的需求，打造真正人性化、多元化与包容性的设计。
设计趋势还在快速增长变化，有些趋势总能长期霸屏，未来还将迎来更多新技术，每个设计人员都可以找到自己喜欢的方向，不管哪种趋势，最重要的是如何学习并合理地运用到产品中，以产生最大的设计商业价值。
文章来源：UI中国 作者：_阿丹a_
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
Loading动画，在现在的设计中已经是一个必须要考虑的系统元素，它能减缓用户等待焦虑的心态，也能用来作为品牌透传，增加曝光。
那关于loading动画相关知识，我觉得对于设计师来说是有必要去了解的，所以我找到了这篇优秀文章，让大家能够深入了解loading动画，透过现象看本质，学以致用。
图片来源：Domaso
在用户心目中，优秀的应用、工具、网站都应该是制作精良且能快速响应他们需求的产品。
举一个真实的例子：最近我们新发布了一个用户评价的应用，第一个版本并不完美，loading延迟在2-3秒。
你猜怎么着？
很多人认为这3秒是一个故障。在实际开发中，你可能要面对龟速的网络，没有优化的代码，操作时间长或数据处理太多等问题。因此，App的运行速度可能没有用户预期中的那么快。虽然早期用户可能会给你的产品第二次机会，但绝大多数人会立即退出它。
除非你的产品界面对用户的行为提供了明确的即时反馈。刚才发生了什么？是操作错误还是在等待服务器的请求？用户需要等待多长时间才能正常使用这个工具或网站？用户为什么要等待呢?
让我们一起深入了解Loading动画：
对于这种类型的反馈，设计师会使用进度条、loading示意图、预loading、或旋转器。它们向用户解释什么时间发生了什么或正在loading的过程，以减少用户的心理焦虑。
你觉得设计师是从什么时候开始考虑加上这种反馈的？
我很惊讶的看到关于Nielsen Norman的一篇文章，提到响应时间和loading动画是在1993年（参考1985年的资料）：
如果计算机无法提供快速响应，则应该以百分比的形式向用户提供持续反馈。【Myers 1985 论文，“计算机-人机界面百分比进度指标的重要性”】
显示进度的三个主要优点：向用户保证系统没有崩溃且正在处理他们的问题；告诉用户还需要等待多久时间，让用户能腾出时间来做其他的事而不只是干等；甚至可以向用户提供一些可以阅读和查看的内容，减少等待的焦虑。— Jakob Nielsen, on January 1, 1993
自从Web 1.0以来，几乎每个网站都有loading状态，用户可以注意到当页面内容正在loading时，这些Loading动画活跃的身影。
在2007年的时候，网站的Loading形式大概是下面这张图上的样子：
2007年时的Loading
在那个年代，你可以找到像Firewoks(2007)、Flash (2008) 或者Loading GIF Generator （2009）这样的工具来做这些 loading动画。
到了2010年，随着CSS3的迅猛发展，出现了很多教程教大家如何做CSS3动画，也能找到大量的loading 动画预设包。设计师也可以在Ps cs5中做这种loading动画，这个在10年前是非常流行的。
在那时，Loading动画更像是web的专属问题，因为页面loading确实是一个问题。在2010年的时候，很多Flash网页都做了一些很有创意的loading动画：
30个创意Flash loading案例（https://web3mantra.com/2010/09/08/30-creative-flash-preloaders-examples/）
渐渐地，设计师们开始不满足于简单的进度条和旋转Loading，到2014年-2016年的时候，变得更加关注这块的设计。所以，你能发现更多关于loading教程，免费的Loading设计资源，插件和开源项目。
2016年出现的Material Design loading(http://www.qooqee.com/news/muse-preloader-widget-tips)
设计趋势和方法已经发生了变化，但向用户提供有效反馈的原则依然需要遵循。
优秀loading动画所具备的特征
在一个完美的世界里，loading动画应该：
如果你的工具或网站工作的足够快，那就是非常完美的。或者至少要使得它们的速度符合用户的预期，显示好看的loading动画只是一个缓兵之计，等待太久了一样会惹恼用户。所以，首先应该是解决内容的loading问题。
它可以是一条简单的文本信息，告知大致的等待时间，也可以是可视化的图形来表示。总共上传了多少文件？更新需要多少分钟？已经进行到了什么阶段？这些体验上的设计细节都可以给用户预期并减少焦虑。
宇航员数据loadingby Cream M.
一些应用的loading过程，通常让用户不大容易理解。一个好的Loading动画，应该要告知用户等待的原因以及等待的背后软件正在做什么：
文件获取动画 by Vinoth
让我们说回我的案例，那个反馈工具软件。当我们的等待时间超过1秒时，我们决定给这段等待时间增加一段解释。动画说明应用目前正在处理截图资源，这清晰的表明，我们的工具没有崩溃，它只是正在处理请求：
好的loading动画
可以放一个有趣的动画来吸引人，让用户的眼睛始终保持忙碌。
动画来源：Alex Kunchevsky
这与上面提到的一点非常相关，如果你在等待的过程中发现了一些能够吸引用户注意力的东西，那么感觉上时间就会过得更快。它可以是一个引人注目的色彩搭配，有趣的想法，或者是一个什么特别的东西。
蛋糕loading by Pierre Kleinhouse
如果用户在用你的应用或者网站时会有一段等待时间，为什么不机智的利用好这段时间呢？我不建议仅仅只是为了做loading而做一个loading动画或者去在动画里使用一些心理学技巧。我觉得最好是将品牌的声音融入整个Loading动画中，让它成为一个非常重要的设计细节：
BCG的车票应用动画 by Antonin
细节可以做出精彩
虽然有些人可能会认为Loading只是一个很小的UI细节，但它其实也有许多类型和变化。一般来说，我把loading动画分为几类，进度条，无限循环的loading图和骨架图。
当可以明确loading时间时使用，进度条可以通过数字或视觉化的形式来表现。
有数字进度的，有时也称为百分比指示符。他们可以简单直接，也可以很有创意，需要对你的用户业务表达更有效：
一个app loading页 by Nguyen Tran
你也可以找到有趣的进度条和循环动画结合的loading图。
Loading动画by Dragonlady
进度条背后的主要思想是显示一个操作将花费多长时间以及目前所处的状态。根据UI需求的不同，进度条也可以是线性的，没有百分比的形式。
想想Gmail，它没有显示进度百分比，但是用户同样可以感觉到加载的进度。下面是两个简单而又创意的例子：
Gamil loading和一个创意loading动画 by Allen Zhang
当loading的时间是未知的时候来使用，它可以是默认的旋转图，也可以是一些创意动画，显示应用正在做一些事情。
计算loading图标 by Hoang Nguyen
创意性loading动画一样可以与业务紧密相关，并帮助支持品牌发声。请思考下那些应用会使用这种loading动画？
LittlePin Spinner by Daniel Sofinet
无限循环动画要求用户在上传或执行某些操作时等待，但不要求具体需要多久时间，它们可能会非常简单或非常有创意。
Loading cat by domaso. So cute!
Infinity by Eszter Balogh. 看起来非常有趣，但是你并不想他们永远不停下来。
如你所见，如今的loading动画不仅仅只是一个系统状态的UI元素。
骨架动画展示了loading页面的变化过程，你可以把它理解为开始是一些页面占位图，逐步加载上一些可见的图片，文本和其他内容。
这个词最早出现在Luke Wroblewski 的文章中，Luke建议使用骨架动画来获得更好的loading体验。这个想法得到了其他设计师的支持，并在Facebook、Linkedln、YouTube, Google Drive 等用户界面中得到了应用。
举个栗子，如果你使用的是网页设计工具Figma，你会在页面顶部看到一个进度条，同时还在逐步loadingUI：首先你会看到占位符，然后才是可用数据：
Figma UI
除了这篇文章中所展示的一些优秀案例和Dribbble上的设计概念，在目前大多数应用中，你可能能看到还是一个默认的Loading。
有一段时间，简单的Loading被大众所推崇，因为他们对于性能的影响最小（尤其是对于web）。使用默认的或开源的loading要容易的多，不需要设计师和开发花心思来设计和实现它。
如果你正在开发MVP或者项目的第一个版本，那么使用简单的或者开源的loading动画更符合逻辑。在这个阶段，即使把loading动画做的再怎么有创意，也并不会对你的产品有多么大的帮助，如果它不能解决真正的需求。
一些简单的loading动画案例
有趣的是，在2016-2019年，我们可以看到非常多精心的loading动画。注重细节，日益成熟的设计公司，更好的科技环境，更方便的设计工具，这些都使得loading动画变得更加富有创造性。如果你浏览Dribbble，能找到非常多超赞的Loading动画，所以这也成了展现自己设计能力的一种方式。
即使在我们只有5人的初创公司里，我们也会考虑更好的用户体验，让我们用户等待的体验更愉快。否则，我们做的反馈工具可能会失去用户，没有人希望失去用户。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
我们已经或多或少看过一些优秀作品，也知道了一些设计方法和技巧，了解到了一些相关的理论知识，自己也做过一些项目或者是练习，总体来说都掌握了一定的设计能力；但是设计师想要拥有更多的资源（指薪资、工作机会等等）或者是想职业进阶，除了一定的设计能力之外是远远不够的。
设计师还需要掌握更多的能力，才能让自己成长提升，并且拥有他人无法取代的价值。我通过自己的经历和整理收集，发现目前如今不同阶段的设计师对待同一个问题不同的角度以及特征，如下图所示：
不难发现，当大家还是初级设计师的时候，刚刚接触设计行业，我们更多的是去观察、学习、临摹一些“好看”的作品，熟练地使用设计软件和提升设计技法，最后的是自己做出来的产品是否漂亮美观，最重要的是客户/老板是否会买单，而自己无法清晰地定义自己设计的产品价值，也不能很好表达出自己的想法和观点。所以产品走向会根据老板/客户的水准来定义，轮到自己表达只是支支吾吾，最后只是做为执行无休止地改改改。一切由老板/客户说的算，无法清晰地了解自己产品的定位，缺乏表达观点的能力，缺乏一定的审美，作为执行角色无休止加班成为了初级设计师最大的痛点。
而经过一段时间的学习和工作后，逐渐转型成为中级设计师后，有了一定的设计技法和软件使用熟练度，有了一定的审美和视觉表现能力，平台规模合作团队也逐渐变大，基本能满足老板/客户/业务方提出的需求。开始学习一些设计相关理论，开始拆解自己或别人产品的交互架构，更多地开始关注用户体验起来，也会融入品牌元素到自己的产品当中，为自己的产品做情感化设计和制定设计规范，会组织一些专业语言和业务沟通以及陈述自己的产品。但是如何从众多的设计方案中找到最优的方案来解决问题，如何更多地体现产品的价值，产品利益链如何形成商业闭环，如何在团队/设计圈体现自己个人的价值，如何提升自己的个人影响力，成为了中级设计师这阶段的痛点。
通过三年五年的沉淀，成为高级设计师后，形成了自己独有的一套方法论和设计思维，能熟练地拆解每款产品和定义产品，视觉表现层已经完全能驾驭，能清晰地阐述自己的设计思路和结论，产品用户体验层也有了一定的经验和方法，在团队中或者设计圈有自己一定的个人影响力，更多地会在工作中思考产品带来的社会价值和商业价值，会用不同的思维去思考产品的各个维度，找到最优的方法解决问题，会把固有的利益链转换成商业闭环，提升用户转化率等等。而这阶段的设计师的主要痛点就是面临着团队管理和沟通，朝着资深设计师和设计专家转型，以及如何为平台带来的利益价值考核等等问题。
资深设计师或者设计专家这里不谈，因为这阶段所思考的问题大都和设计无关了。通过上述不难发现，每个阶段的设计师都有各自的特征和痛点，虽然其中都包含着设计相关的能力，但是随着阶段的进阶设计相关的能力占比逐渐变少，更多的是其他的能力增长，所以设计师除了设计以外其他能力的重要程度显而易见，那么我们来看看除了设计以外，设计师应该掌握其他什么能力。
思考能力作为首要的能力，不仅仅是设计师，其他职业一样需要这个能力，这里所涵盖的面太广泛了也说不了，这里主要针对三点来讲：核心竞争力、批判思维和分析能力。思考分为两个层面：自我层面的和业务层面的思考；自我层面的思考就是要通过深度剖析自我，发掘自己处于哪个阶段，有什么长处和不足，自己想要什么，需要往怎样的方向发展；而业务层面的则是要需要思考业务产品的结构框架、用户体验、商业价值等等等等，前者更加关注自身的成长，后者更加关注业务的成长。
· 核心竞争力
核心竞争力就是有与别人不一样的竞争力，想要做到别人无法替代你的地步，就要有自己个人核心的竞争力。如果你会做一张 Banner，我也会做一张 Banner，你会搞一个页面，我也会搞一个页面，那么你这个人就成为了可有可无的螺丝钉，唯一的优势就是年轻能拼能熬，等你熬锈了老了，随时可以换一颗新的螺丝钉来取代你的位置。所以不管什么阶段，我们要深度剖析自己，认清自己的优势劣势，并采取相应的措施。
剖析自己的核心竞争力给大家一个大致思路，从异样性和共通性入手。自己周围或多或少有团队，条件不足的话现在网络各大平台都很发达，也能融入一些设计圈子中，和不同的人对比寻找自己的核心竞争力。异样性是当前的优势，找出其中的优点，不断地放大深造，变成你的核心竞争力，而和别人不一样的缺点找出来摒弃改正；共通性就是和大家一样的地方，可以看作是伪劣势，因为诸多共通性中总有你最喜欢最擅长的一个，将它单独拿出来不断扩大，逐渐就拉开了差异性，慢慢就转化成你的核心竞争力了，而大家都有的缺点，你把它纠正了，就成为你的核心竞争力了。
来举一个栗子：小王是一名工作了3年的设计师，研究生毕业，由于公司的原因平时工作最多接触的就是一些运营图 banner，也有过很多品牌 VI 的经验，逐渐自己在视觉表现上有自己一定的见解和想法，也更加感兴趣做视觉表现的东西。
那么他的共通性就有：1.工作3年之久；2.研究生毕业；3.视觉表现能力强也更感兴趣；4.做过品牌 VI 的经验；5.有自己的见解和想法。
由此推断出小王的共通性是：1.工作经验丰富；2.视觉表现力强；3.有想法和见解；
异样性是：1.学历优势；2.品牌 VI 相关经验
那么小王可以保持自己学历优势下，可以继续深造品牌 VI 相关，逐渐转型成为高学历的品牌 VI 设计师，那么学历和很多品牌 VI 的经验就是小王的核心竞争力；也可以通过热爱去学习 C4D 动效等软件继续增强自己视觉表现力，配合自己丰富的工作经验逐渐转型成高学历的创意艺术设计师，然后通过将自己的想法见解通过分享会、文章等模式产出，将这一点升级成个人影响力，那么综合下来更加优秀的视觉表现力、丰富的工作经验和个人影响力也会逐渐变成小王的核心竞争力。
只有通过不同维度深度地剖析自己，找到自己的共通和异样点，清晰自己的价值定位，然后制定出适合自己成长目标和方案，不断放大增加自己的核心竞争力，成为不可取代的那个人。
· 批判思维
批判思维是一名设计师必须具备的思维能力，我们不仅仅要学会批判别人的作品，还要学会自我批判。这里不是指无脑的批判（之前遇到过一个实习生刚进到公司里，就把之前所有人做的东西全部批判了一遍，重点是只说产品好看与否，完全不顾及平台一致性商业价值用户体验等等，最后只批判却没有任何实质性的建议，颇有一种指点江山的感觉，然后后面再也没见到过他了），这里是指在自己通过批判别人或自我的方案，不断地优化纠正，最后产出最优质的方案，这是批判思维的出发点。
不同的人有不同的经历，看待问题的维度是多种多样的，所以一个方案产出后，通过不同的人思考后的结果是最好的解决方案。这也印证了波克定理：只有在争辩中，才可能诞生最好的主意和最好的决定。所以当设计师接到产品交互给到的原型图后，不要上手就做图，要通过自己经验和想法去看待原型图，然后提出更加优质的方案进行讨论，如果你的方案更加优质，那么不仅是产品的质量得到了优化，你个人的经验也得到了沉淀，下次遇到相同的场景就可以拿出来复用，直到遇到更好的方案。
唯一注意的事项就是注意沟通的方法，这里后文会提到，比你资历高的人提出的观点更加具有建设性，在毫无头绪没有创新的情况下就听比你更有经验的人的；遇到比你资历低的人提出的观点也不要嗤之以鼻，抓取其中有用的点，没准是一个新的思维方向；总之，有数据说数据，没数据举案例，没案例讲观点，如果连观点都没有的话，照着大佬说的话做就是了。
· 分析能力
分析能力也是设计师必须掌握的能力之一，无论你是创意艺术设计师，还是用户体验设计师，譬如一张 Banner 氛围传递或者文案排版，譬如插画的配色或者场景搭建，譬如产品的布局结构或者用户体验，这些都需要有一定的分析能力。通过拆解改版/竞品/参照产品等，明确产品的最终目的、商业价值等等，有了这些准备后才能对自己的产品进行设计或者改版。而分析产品可以以用户体验五要素的角度来分析，分别是：战略层、范围层、结构层、框架层和表现层，具体相关的文章站酷、PM 社区、36氪等等都搜的到，这里不再细说；之前在分析产品的时候发现有些产品强行套用这五个要素进去不适用，因为有些产品的页面它不存在战略层或者范围层的东西，所以我总结归纳了三个角度来分析产品。
案例就用淘抢购 v4.1 页面（已上线）来讲，三个角度主要是：表现层、用户体验层和价值层。表现层主要就是产品页面的配色、布局结构之类的；用户体验层就是产品的心智透出、交互流程之类的；价值层就是产品深度的价值体现了，比如商业价值、社会价值和用户留存率之类的；大致可以套用这个公式去思考：为什么这里会用这种表现形式，它想要表达怎样的效果，它要达到怎样的最终目的，如果是自己去设计会怎样做。举例：因为淘宝规范为卡片式设计，在视觉表现上要统一，所以淘抢购 v4.1 的业务目的是统一视觉样式，并且它需要给用户产生一种“商品很便宜快去抢购再不抢购就没了”的心智认知，它的最终目的是引导用户去商品 Detail 页面购买商品和提高商品的点击率，这样通过协调关系形成平台、商家和用户之间的利益链商业闭环。
想要提升自己的分析能力除了项目和时间的沉淀外，更多的时候需要自己平时的积累，站酷等平台有很多优秀的作品，作者会把自己设计的分析和思路写出来，我们可以看看别人的想法是否值得借鉴，然后再去分析一下，最后思考如果是自己的话会怎么去做；其次做设计的时候带着同理心去做，把自己当作用户去看待自己的产品，通过不断的积累提升自己对产品的敏锐度，将一些产品的隐性问题挖掘出来；另外可以多看一些好的设计分析书，比如《U一点料1、2》、《以匠心 致设计》等等，将学到的分析方法代入自己的产品或作品中，逐渐分析能力就增强了。
规划能力是日常工作生活中所需要掌握的能力，主要讲业务规划和职业生涯规划，业务规划能力应对的是我们工作中处理业务所需要具备的能力，而职业生涯规划应对的是我们整个人生职业生涯规划的能力。掌握这个能力后前者会给我们带来业务处理效率上的提升，后者给我们带来整个人生有益的好处，所以这个能力非常重要。
· 业务规划
很多时候我们还在有条不紊地处理某个需求，心想着下班去吃个饭买水果回家洗澡睡觉的时候，突然来了一个紧急的需求，就把我们整天的计划给打乱了，火急火燎地处理完这个需求，然后又把之前的需求做了，最后加班改改改导致整个计划泡汤了。工作中遇到这样的情况很多很多，处理方法有很多种，最经典的就是四象限法则，把事情的紧急重要程度分为：重要且紧急、紧急不重要、重要不紧急和不重要且不紧急四个象限。
很多时候都是道理我们都懂，可是一遇到情况依旧手忙脚乱，根本原因是没有认真地把它代入自己的工作生活当中。画一个象限表，把自己今天所要处理的事务陈列出来五分钟都不需要，一开始可能因为事情不多就没坚持下去，一旦养成习惯后，将来遇到多种紧急情况突发的时候就能认识到这个习惯给你带来的好处了，所谓养兵千日，用兵一时就是这个道理。
在做业务需求的时候，可能会碰到有些需求价值高，有些需求价值低但又很紧急，不知道怎么处理之间的关系，我们依旧可以套用四象限法则来制定一个四象限表：价值高且紧急、紧急但价值低、价值高不紧急和价值低不紧急。什么是价值高的需求呢，就是能让你有充分思考和分析的需求，比如某个页面的改版；价值低的需求则是相对不怎么需要思考和分析的需求，比如根据已有的规范改个颜色之类的。在时间的优先级前，价值高的需求大于价值低的，最后剩下的就是价值不高且不紧急的。因为我们无法拒绝需求，需求来了肯定要是做的，工作不是爱好可以有多种选择性，但我们要学会将需求分解成不同类型的，对自己有成长沉淀的需求那可以作为最高优先级去处理，留够充裕的时间去思考分析，然后沉淀经验稳定提升。
· 职业生涯规划
这个在大学期间就学过相关的课程，只不过当时并没有太深的感触，而是等工作以后才知道这项能力的重要性，它相当于关系着你每个阶段的里程碑，当成游戏中的成就任务也不为过，还是自己设定的成就任务。某个阶段想要达成什么样的目标，想要获得怎样的成就，都是要自己一步一步慢慢规划并且完成出来的。
因为我遇到过几个非常努力的人，努力到让人心悸的地步，每天除去吃饭睡觉工作时间就是在努力学习，到最后还是很迷茫，不知道做什么，不知道如何体现自己的价值。这类没有目的的努力的人是很可怕的，他们努力得没有错，但是这样下去没有成效的努力会让他们觉得努力并没什么用，然后逐渐开始产生抱怨、泄气和放弃等负面情绪。
举个例子来说明：如果你刚毕业，给自己制定的长远的职业生涯规划是在工作3～5年后进到大厂工作提升自己，那么所拆分下来就需要一些项目工作经验和优秀的作品，再拆分下来就是如何做出优秀的作品，细分到最后就是作品当中的元素，比如图标排版布局之类的，那么就制定一段时间内的练习就按照各类元素去做，比如图标画两个星期，APP 设计排版布局练习两个星期，插画练习画两个星期，这样坚持下来就组成一个完整的项目作品了，以此类推。有了规划目标并且在自我驱动的推动下，逐渐实现自己的职业目标。
执行能力是指自我在工作&学习中执行的能力，执行能力为一个设计师最主要的核心技能，一切的能力都凌驾于这个基础之上；哪怕你再能说会道，能赋予你的设计各种价值，能给予你的设计各种环境，但这些都是第二步，第一步就是你的设计表现达到期望值，如若第一步稿子都不好看，那么没人愿意会听你叙述的。前文已经提及到了，设计师在初级至中级阶段的时候大多数注重的就是表现手法，如同学说话一样，表现手法可以看作是汉语拼音，然后才是组成一个个字，最后组成一句完整的话语。
· 自我执行力
提升自我执行的能力我大致分为两个步骤：看和做。
首先先来说看，看其实是提高自己审美的一个过程，通过看一些平台网站的优秀设计作品，久而久之自己的审美能力才会提高，然而看分下来一种是带有目的性和不带有目的性的。不带有目的性地去看是在自己有空余或学习时间，通过浏览设计网站采集学习一些你觉得好看的作品；采集是一个很好的习惯，我觉得是每个设计师必须养成的习惯，把自己平时觉得好的表现形式收集起来，等到某一天需要用到的时候，脑海中对当前场景会有一定的印象，再根据印象去寻找采集到的作品，能很大程度上节省自己脑爆的时间，哪怕没有采集或者文件丢失，自己的脑中大致也会有一个雏形方向。而带有目的性地看是指针对某一个模块去搜集整理，比如今天我需要做一个关于内容的模块，那么我就会去寻找一些做内容的产品设计，搜集到的各类关于内容的表现手法，然后结合自己的经验和分析，找出最适合自己产品的一种。
仅仅看是不够的，在看过之后我们需要动手尝试才能算真正地沉淀自己所看到、学到的东西。做设计最忌讳的就是“眼高手低或者眼低手高”这种状态，有了审美但表现手法跟不上，或者说表现手法有但是审美跟不上。一定要在自己吸收了一定的审美后，通过自己的尝试去做出来，才能真正的沉淀到自己的大脑当中，变成自己的表现手法之一。最后通过大量的积累，结合对商业需求的判断形成设计策略，才能从容应对不同的产品需求，哪怕你今天做金融相关的产品，还是明天做电商的产品，后天又改做工具类产品，一旦形成了自己不同的应对策略，才能做到真正意义上的游刃有余。
很多时候我们只关注到鱼的大小、鱼的肉质是否鲜美那20%层面的东西，往往忽视了80%最重要的捕鱼技巧和方法；看到的只是产品是否好看，交互是否流畅，体验是否良好，没有往更深层次地去想这个产品的商业背景是什么，设计师为什么要这样设计，如果换做自己的话会去怎么做；毕竟我们所做的一切训练、思考都是为了更好地为工作服务，就如同脱离了商业背景以后，有些设计就只是单纯的炫技，并没有解决问题的价值，而设计师的工作核心就是解决问题，所以我们要结合作品的背景、价值等因素，去看、去做、去学相应的表现手法才是自我执行的核心所在。
表达能力是设计师除去执行能力外第二重要的能力，小到平日里的沟通对接，大到述职晋升面试，都离不开表达能力的支持。有些设计师经常面试怎么都过不了关，我本以为是作品集的问题，可是看完之后作品方面完全没有什么问题，具体了解后才知道是在面试过程当中不知如何阐述自己的作品和思路或者在阐述过程中由于紧张等因素导致表达断断续续不顺畅，面试官就会觉得这个人不靠谱然后 PASS，明明做图很优秀却输在了表达上，这种情况就很憋屈。在广告公司中，一个 LOGO 或者广告视频往往只是赠品，出售的却是这个品牌VI的故事；如果一个设计师不懂得怎么阐述自己的业务，不懂得怎么推销自己的方案，不懂得拓宽自己的个人影响力，就单纯的只会执行作图的话，那么这名设计师是不合格的。网传有一个段子“一个公司的工资排名规律：用 Word 的不如用 Excel 的，用 Excel 的不如用 PPT 的，用 PPT 的不如讲 PPT 的，讲 PPT 的不如听 PPT 的，听 PPT 的不如听汇报的，听汇报的不如决定的，决定的不如签字的”，由此可见表达能力在职场中的重要性。
· 业务表达
业务表达是指在自己工作的过程当中，对自己的设计方案进行阐述。大部分设计师会遇到一个困扰，当设计稿做完以后就不知道怎么去表达自己的设计理念，被业务方/面试官/老板提出质疑时，比如：“你这产品的设计为什么要用红色？”、“聊天信息这块儿为什么要用小气泡的样式？”，往往不知道怎么去说，有一种当时就觉得好看所以这样做了，也没有去想那么多的感觉，或者其他优秀的作品/竞品是这样做的，我也就这样做了；那么结果往往就是自己的专业性遭到质疑，然后转变成业务方/老板进行设计主导，形成“改来改去还是第一版好”这样类似的恶性循环中。
那么如何提升自己的业务表达能力呢？首先设计师要提升在设计领域的专业度，通过学习吸纳设计相关的知识，然后代入自己的设计当中去试着阐述设计稿，准备工作先做到位，收集相关的数据，掌握相对应的设计理论，先说服自己再去说服别人。比如：“通过色彩心理学得知，红色能带给人兴奋、激动、热情等积极情绪，而我们产品所需要透出的氛围是热情的、积极向上的，相对应地激发出用户的正向情绪，所以我这里使用红色。”、“根据近半年数据研究得出，产品聊天信息模块使用过程当中女性用户占总用户数的85.9%，而小气泡样式相对比其他样式更能迎合女性用户群体的喜好，通过 A/B 测试结果得出，使用小气泡样式后数据上涨了15%左右，所以聊天信息模块整体改版成小气泡的样式。”
通过自己前期的准备（设计理论知识补充、用户调研、数据测试等），将自己的设计理念表达出来，主导整个设计的方向，必要时可以理性地坚持自己的设计方案，毕竟无论是老板还是业务方，出发点都是希望自己的产品能做到最好最完善，只要你给出数据支撑和专业性的建议，他们一定都会采纳接受的，而最后你的能力和专业性也得到了对应的认可。
· 书面表达
我本人是强烈建议在能力达到一定程度的时候，通过写作来检视自己成果的。因为往往很多东西自己是明白的，但是写出来让其他人看懂是另外一种能力了。自己一段时间的职业经验总结、对设计的见解看法、自己独特的设计思维、一本书的读后感等等都可以通过书面表达出来，某个知识理论难的不是学习，而是将它教授出去，因为只有你想要把某件事说明白，阐述得其他人都能看懂，那么首先你要对这件事理解得很透彻，然后通过自己的经验和见解，转化成通俗的语言说给别人听。最好的状态就是与你同样级别的人你能与他用专业术语对话，级别比你低的人你能把理论转换成他能听懂的语言进行交流，这样才算是对理论概念理解透彻到位。
大家也明白，学习最有效的方法不是输入而是输出，设计也是一样的。在学习某种理论方法后，通过书面表达出自己的见解和想法，并代入到相应的例子当中，做到举一反三才能算是真正的学到了这个知识点。
· 述职
述职一般出现在晋升报告或者面试当中，“诸侯朝于天子曰述职，述职者，述所职也。”述职可以说是工作报告中的总结性报告。向自己的老板述职是为了升职加薪，向面试官述职是为了获取更好的工作机会；工作成果有了，但是述职做不好的话，在老板/面试官眼里你就做了无成效的工作，述职没有想象的那么简单，但是也没有那么难，很多人都会经历两个述职的误区，这些误区我经历过也看到过，所以总结出来警醒大家。
一、把述职当作流水账
把述职当作流水账是很多新人容易犯的错误，当述职的时候，有的人就会陈列出自己今年做了多少多少工作：“我今年改版了 XXX 模块”、“我设计了 XXX 的首页”、“我通过调查研究自主推导改版了 XXX 模块并落地成功”等等，这时候你的老板/面试官会心里会想：“所以呢？”“然后呢？”，工作结果固然重要，但是决定你能否晋升/录用的，不仅仅是把你做的工作进行流水账般的描述就够了的。
二、把述职当作邀功大会
这个误区相对来说更高端一些，述职的时候有的人常常会像邀功一样：“我今年通过改版了 XXX 模块，导致用户量从50%上涨到了80%”、“通过调查研究改版了 XXX 模块，最后通过 A/B 测试发现数据上涨了5%，最后落地全部实施新的设计方案”，这些看似阐述了产品的背景、自己做了什么以及结果，但是往往来说还是不够的，以上统统可以归为无效述职。
你做了什么重要吗？没那么重要，重要的是你带了什么样的价值。述职所需要你做的，老板/面试官所想要了解的就是：分析为什么产品之前数据会那么低？你是通过那些方法得出解决方案的？为什么那么多种解决方案里你要选择这一种？你这样的方法能否沉淀成体系？如果换一个人来按照你的方法做是否可以得到同样的效果？有效述职也就是决定你能向上一步的，是把你在工作中的感性认知上升到理性规律的归纳总结的能力体现。
· SCQA 模型
SCQA 模型是一个“结构化表达”工具，是麦肯锡咨询顾问芭芭拉·明托在《金字塔原理》中提出的，而这个模型可以套用在业务表达、书面表达以及述职任何场景当中；S是指场景(Situation)，C是指冲突(Complication),Q是指问题(Question)，A是指解决方案(Answer)。
无论你是在向业务方/老板阐述方案做工作汇报，还是自己写作梳理都可以用到这个模型；S场景陈述的通常是大家都熟悉的事、普遍认同的事、事情发生的背景。由此切入既不突兀交代了事情背景又容易让大家产生共鸣，产生代入感，然后引出冲突C。Q是其中发现的问题，最后A给出相对应的解决方案，是对Q的回答也是接下来我们要阐述的内容。整个结构其实是形成良好的沟通氛围，然后带出冲突和疑问，最后提供可行的解决方案。
我们熟知的广告词经常使用这个套路：
得了灰指甲——描述场景【S】
一个传染两——发生了冲突【C】
问我怎么办？——提出问题【Q】
马上用亮甲！——给出解决方案【A】
这个模型无论作为演讲的开场白，作为向业务方/老板阐述设计方案的开场，还是作为一篇文章的序言都是屡试不爽的。S场景需要让对方产生共鸣，必须让对方产生一种：“是的，你说的好有道理”的反应，只有场景被认同了才能继续故事的发展，这时候打破你给对方营造的安全感，制造C冲突，相继提出Q问题，共同确认面临的一个问题，然后你给出你的A解决方案，而这个解决方案就是你整个叙述的核心和中心思想。
比如你要向业务方/老板阐述你的设计方案，就可以这样来描述：“在 XXv2.0 版本上线后（交代场景），收集了近半年以来的数据发现，女性用户相对减少了20%（发生冲突），为什么会减少20%的女性用户（提出疑问），根据我的调查研究发现原因是改版后整个产品色调偏男性化，由于我们产品的受众群体大多是女性用户，男女比例为1:3，所以在 v.2.1 的改版中我将整个产品色调改为偏女性化的方向（给出解决方案）”。
同样，我写这个章节的思路就可以这样理解：设计师们工作中通常会面临述职、面试以及写文章等情况（交代场景），但是往往很多设计师不知道如何去表达，思路也不是很清晰，导致述职无效、面试失败等情况（发生冲突），要如何避免这种情况发生？如何锻炼自己的表达能力？（提出疑问），那就要多通过 SCQA 模型在生活工作中去练习表达（给出解决方案）。
最后是生活能力，设计不是工作的全部，工作不是生活的全部，我们应该过好自己的生活，产品设计都是从生活中获得灵感和启发的，我们如何对待自己的生活，我们就会得到怎样的反馈。多陪伴下自己的家人、培养一个兴趣爱好、保持学习新鲜事物的动力等等，成为一个有趣的灵魂。往往设计师能从多样化的生活中发现灵感和启发，也能从生活中找到不同用户的痛点和感知；如何做一名好的设计师，就是带着同理心去做设计，如何带着同理心做设计，就是将自己当作用户，而用户是融入到生活中的。下面我就来例举两个通过生活中的启发改变产品设计的例子。
· 用户拥有感
在购买星巴克的时候，为什么服务员要把顾客的名字写在杯子上呢？难道仅仅是为了分辨嘛？像其他奶茶店一样贴一张打印好的便签不就好了么？去宜家购置家具的时候，为什么要让顾客自己亲手组装家具？可口可乐为什么可以定制自己城市的易拉罐？因为这一切都是要给用户塑造拥有感，人是一种很不理性的生物，只要先拿到一个东西，就会觉得自己拥有这个东西，就不想放掉它了，这就是拥有感最根本的示范。从心理学的角度来说这被称为禀赋效应，意思就是我们对于自己所拥有东西的价值往往会看得更重。这就是为什么小时候玩的玩具、收集的画册、穿的衣服都已经没什么用了，我们还要留着当纪念的原因。因为我们的人性对于拥有感非常执着，对于自己得到的东西非常迷恋，当我们觉得要失去它的时候，会有一种损失感，觉得很不舍，会觉得心里很难受，这就是禀赋效应在我们身上发生了最明显的效果。
而这样的营销策略被用到产品设计当中，例如前段时间很火的软件 Zepeto，每个人都不一样的生成图片洗刷着我们的朋友圈；例如每年年末的账单、网易云音乐总结等等，账单它只是一份账单，根据不同用户生成不同的账单，也就赋予了不同的意义；又例如各种 H5 性格测试生成的分享卡等等，这些都是产品设计中从生活中营销案例中汲取经验的体现。
· 线下导购转线上
每当我们去到商场线下商店的时候，导购员和我们素未谋面，但是却可以通过我们的大致年龄、穿着、性别等因素推断我们需要什么样的产品，然后向我们推销对应的产品，如若刚好触动我们的需求，于是我们就会发生购买这个行为。生活中线下导购的方式也被运用到线上导购的产品中，同样平台和用户素未谋面，可是可以通过掌握大数据，分析用户近半年、近一个月的购买和浏览商品的数据，结合相对应季节等因素推送给用户所需要的产品。比如我平时经常浏览一些潮牌个性的衣物，现在正值冬季，想买一件冬季穿的棉衣，那么当我打开淘宝的时候，系统会推送一些潮牌大衣等冬季衣物在首页，我正好有这个需求又符合我的口味爱好，自然而然就会点进去购买了。
有一条创业准则是这样说的：“如果有点儿闲钱，还有点时间，但又找不到商机，最好的办法就是去闹市、电梯、小区人流量最高的那个大门口，端杯茶，静静的听人们抱怨。”，谷歌、苹果公司的设计思维首当其冲的就是带着同理心去设计、去制定设计策略，同理心来源于生活，而这一切只有设计师把自己的生活经营好，才能从当中获得启发和感悟，然后代入自己的设计理念当中，设计出真正能根本解决问题的产品。
其次偶尔会从网上看到或者听说 XX 设计师猝死，XX 设计师检验出 XX 疾病等等，每每看到此类消息都会感到痛心，工作不是生活的全部，如果连自己的工作和生活都处理不好的话，那么说明这个人生活能力真的很糟糕。如果一个人整天筋疲力尽打不起精神，那么他的工作会做得好嘛？所以在这请求大家合理安排好工作时间，劳逸结合，多锻炼身体，多花些时间陪伴父母、家人，这样才能带着健康的身心去工作，从而取得更好的工作成果，形成一个良性的循环。你怎样对待生活，生活就会怎样对待你。
以上是我总结的除设计之外设计师需要掌握的技能，如果将这些比喻成大树的话，设计能力是大树的根部，是设计师立足的根本；而执行能力则是这根树的枝干，是支撑设计师全部的基础；表达能力是树枝，撑起设计师的整个世界；思考能力则是树叶花果，是设计师综合的产物；大地就是生活能力，当设计师的产物（物质、地位等）“落地”时，滋养着大地，大地越“肥沃”，越能催生出茂盛的枝叶；而规划能力就是一位辛勤的园丁，什么时候需要浇水，什么时候需要修剪枝叶，都是由园丁来承担。
想要跑赢别人，首先得跑过那个跑得最快的自己。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
蓝蓝设计的小编 http://www.lanlanwork.com
