一、什么是品牌定位？

品牌是如何做到家喻户晓的？举个例子，当有些用户产生搜索需求时，他们的第一想法是“百度一下”，而不是“我要搜索”。百度作为一个品牌，在中国市场已经成为搜索的替代词，反应出品牌对用户心智强大的作用力。

打造强品牌的第一步就是品牌定位。不管是创建新品牌还是更新现有品牌，品牌定位策略会影响业务发展的方方面面，不仅是营销策略，还包括产品开发、用户体验等。

那么，什么是品牌定位？简单讲，品牌定位就是决定企业希望在用户心目中是什么形象的过程。以苹果公司为例。苹果作为一家科技企业，在全球范围内被熟知，并在诸多同类科技公司中独具魅力，受到用户的喜爱与追捧，这不得不得益于成功的品牌定位。

苹果赋予品牌三大内涵：Think Different，Tech that works以及Your privacy is safe with us。这些品牌内涵成功让苹果与其他科技公司形成区隔度，在用户心智中占据独特位置。在用户看来，苹果是与众不同的、走在科技前沿的、创新突破的、隐私安全受保护的，这些品牌形象正是成功定位的结果，必将成为公司强大的品牌资产。

除了能够让用户快速识别、在众多竞品中脱颖而出外，品牌定位还会对定价策略和销量产生影响。如果产品定价更多依据高质量、高品质，同时品牌也将高质量、高品质作为定位点，那么在用户心目中，产品价位会很自然地被合理化。当做购买决策时，用户会被品牌独特内涵吸引，快速促成购买，帮助企业提升市场份额，同时增强用户忠诚度。

二、品牌定位如何做？

品牌定位的基本思路是STP（Segmentation市场细分，Targeting确定目标用户群，Positioning定位），即将整个品类市场中的消费者划分为不同细分人群，识别各类细分人群的特征和需求，并结合竞争情况、企业战略等因素，选择其中一个或多个细分市场进入，形成品牌定位，对每个目标细分市场进行品牌营销。

从中可以看到，市场细分只是手段，定位才是目的，即S+T=P。

Step 1：Segmentation 市场细分

市场细分本质上是根据消费者的差异，将整个市场切分成不同部分。用于细分的维度/标准主要有四方面：地理因素、人口学因素、心理因素和行为因素。

其中，市场细分普遍使用的维度是人口学因素，比如女性消费力、银发经济等，就是按照性别、年龄等维度进行的细分。这一方法简单高效，实用性强，但也存在一个很大的问题，即使用户在这些方面很相似，但内心的诉求可能是完全不同的，导致细分市场内部差异很大，这就违背了细分的初始目的。

为了解决这一问题，市场细分会使用心理因素，从最深层的情感需求出发，确保每一细分群体内部高度相似，而不同群体之间高度区隔。

细分用户情感需求的常用解决方案有Needscope、Censydiam等，通过“个人-归属”和“释放-压抑”两个维度，相互作用，将用户情感需求划分为6个或8个类型，从而实现对某个市场的人群细分。

以Needscope为例。Needscope的心理学基础是荣格的原型理论。荣格认为，原型是天生的倾向，在影响人类行为方面发挥作用。基于此，将人类情感需求划分为六大类：有活力的、充分自信的、有能力的、关怀的、被动的、无忧无虑的。应用于不同品类时，对类型的描述可做调整。

在用Needscope做市场细分时，通常会使用投射工具挖掘用户对品类的需求，形成该品类下用户的情感需求细分。以资讯类APP为例，通过投射工具，挖掘到用户对资讯类产品的情感诉求，可分为：新热/前沿的、权威/信服的、智慧/有思想的、全面/可依赖的、轻松/实用的、愉悦/释放的。

• 新热/前沿的：这类用户希望获得最新、最热的资讯信息，第一时间快速获取，给自己带来“走在前沿的”“领先的”的感受，他们对资讯产品品牌形象的需求中强调“新热”“前沿”“领先”等。
• 权威/公正的：这类用户对资讯的诉求集中在立场上，希望获得客观公正的权威信息，给自己带来“公正的”“客观的”感受，具备这些内涵的品牌形象对他们来说更有吸引力。
• 智慧/有思想的：这类用户的核心情感诉求是“高端”“格调”，希望使用资讯产品带给自己“有思想的”“有智慧的”感受，品牌形象突出“高品质”“有深度”会对他们产生吸引力。
• 全面/可依赖的：这类用户的情感需求强调“安全”“可依赖”“平和”，使用资讯产品与他们较固定的日常生活相匹配，获取“全面”“安全”的信息以便更好融入周边环境，获取内心的平和。
• 轻松/实用的：这类用户看重资讯产品的“实用”价值，希望在“轻松”的状态下获取实用信息，解决问题，带给自己“物有所值”“得力助手”的感受。
• 愉悦/释放的：这类用户追求“无忧无虑”“趣味释放”，希望看资讯让自己感到“有趣”“快乐”“释放”，对于品牌来说，强调“娱乐”“轻松”“释放自我”“有料有趣”对他们来说更有吸引力。

到此，我们便用Needscope对资讯类产品市场做了细分。

Step 2：Targeting 确定目标用户群

在对市场做了细分后，接下来需要确定哪个/哪些细分市场可作为目标人群，主要考虑两个因素：市场份额和竞争环境。

在进行情感需求细分时，通过量化方式可得到每一类细分人群的占比，代表着市场上有多大比例的用户有这一类情感诉求，这就反应了市场份额的大小。还是以资讯产品为例，“轻松/实用的”这一细分市场占比最大，达到22%，说明在目前市场上，大多数用户对资讯产品的诉求是读完有轻松感，内容实用有帮助。

但仅考虑市场份额是不够的，各品牌可能都看到了大的市场份额而纷纷进入，经过时间沉淀还会形成难以撼动的头部品牌，竞争会异常激烈。因此，在选择细分市场时还需考虑竞争环境，这一点可通过Brand Map来直观体现。

在使用Needscope获取用户对品类情感需求的同时，还会了解目前市场上的资讯品牌满足了用户哪些诉求，因此形成每个品牌在不同情感细分领域的得分，得到品牌地图。

通过品牌地图，很容易看到市场份额最大的“轻松/实用的”领域竞品数量多，且有今日头条、腾讯新闻等头部竞品，对于新品牌或者小品牌来说，不再建议切入该领域。对于“愉悦/释放的”这一领域，现有品牌数量适中，并且靠近圆心位置，意味着还未形成极具该特色的品牌，单从竞争角度来说，该细分市场值得考虑。

综合市场份额与品牌地图，便可确定目标细分领域。对于新品牌/小品牌，可以考虑“愉悦/释放的”这一领域，因为市场份额可观（20%），市场还未形成满足程度高的竞品；对于打算更新定位的大品牌来说，品牌本身具备与头部竞品对抗的实力，可以优先选择市场份额大的市场，但需注意定位的跨度，建议选择与现有定位临近的区间。

确定好细分领域也就意味着锁定了目标人群。在做情感需求细分时，会一并了解该用户的人口学特征、产品使用行为等信息，因此，每一细分情感诉求都可以还原到对应的人群。

还是以资讯产品为例，“愉悦/释放的”这一细分市场对应的人群在某些特征上显著高于其他人群，这些明显特征就是品牌后期要去营销的目标群体，如以男性为主，偏年轻，年龄集中在18-24岁，更多分布在一二线城市，偏好B站、知乎等产品。

Step 3：Positioning 定位

按照S+T=P的公式，完成市场细分以及锁定目标人群后，就得到了品牌定位。但这个阶段的定位只是明确了方向，具体到细分领域内部该如何定位，还需进一步深探。

结合资讯产品品牌定位的例子，新品牌确定了“愉悦/释放的”这一细分市场，接下来需要对该细分领域的目标人群和竞品表现做深入挖掘，找到用户未被满足或满足状况不佳的需求，明确本竞品之间的差距与不同，从而获得更精准的定位点。

在了解目标人群时，不再局限于他们使用资讯产品的习惯，还需走进日常，挖掘指导行为的价值观念和态度。

• 画像及态度：人口学特征（性别、年龄、城市级别、家庭月收入等）、生活态度、价值观、品牌观，真实立体地还原品牌营销对象
• 资讯产品使用行为：使用场景、需求、使用产品、频次、时长、路径、满足点及痛点，发现本品在产品力上与竞品的差距，挖掘产品卖点

• 资讯产品品牌态度：对各品牌的认知度、喜爱度、品牌形象认知，发现本品在品牌力上与竞品的差距，挖掘品牌利益点

• 触媒特点：偏爱的触媒渠道、品牌沟通方式/内容、转化效果，帮助品牌找到有效营销渠道和传播形式

到这个阶段，就完成了品牌定位全流程。这些定位理念可以作为品牌发展的牵引思路，指引产品和设计围绕定位的方向深入发展，为目标人群带去更好的使用体验。

三、品牌再定位

市场环境时刻在发生变化，品牌必须通过不断变革来永葆青春，品牌再定位就是实现品牌变革的一种重要方式。

通常来说，品牌再定位有几种可能情况。一是原本定位错误，品牌定位时可能找错了目标人群，也可能没有挖掘到精准需求，导致在后续对品牌监测时，发现品牌健康度、销售情况等与预期差距太大，比如著名的万宝路香烟，最初定位是针对女性，市场业绩表现一般，后来更改策略重新定位为男士香烟，并使用了具有男子汉气概的西部牛仔形象，使得品牌脱颖而出。

定位优势不复存在也是促使品牌再定位的一个因素，这主要因为竞争环境发生了较大变化，新的竞品出现，甚至成长成强劲品牌，这就削弱了本品品牌原有的优势和竞争力，如果坚守原有定位，势必会处于被动挨打的地位。

此外，目标客户群消费动机和需求的改变，也是促使品牌再定位升级的重要动力。

总体来说，品牌定位是一个长期动态的过程，它既是品牌策略的起点，也是最终目的，即精准把握目标用户需求，基于此推动产品和设计迭代，从而牢牢占据用户心智，在与竞品的竞争中脱颖而出，缩短用户决策使用/购买产品路径，促进用户数量/销量等产品核心指标的提升。

作者：设计中台

转载请注明：学UI网》品牌定位，抢占用户心智第一步

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

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

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

一、卡片式设计的定义

1、什么是卡片？

早在互联网时代之前，卡片就出现在了我们生活中的方方面面，如名片、不干胶标签、便利贴、会员卡…等，不管是何种类型的卡片，它都将代表着我们现实生活中的某个特定信息。

卡片指的是含有图片或文本信息的容器，它将我们需要的信息归纳在一起、并形成独立的个体，以至于后续被引用到线上界面中，同样具有非常不错的信息归纳效果。

2、互联网中的卡片式设计

卡片本身就是一个完整的信息区块、并同时承载丰富的互动方式。在UI设计中，个性化和美感兼备的卡片式设计具有很强的易用性，它是一个UI设计组件，将标题、文本内容、图形/图片进行整合并模块化，让信息的表达更加直观、操作也更便捷。

卡片式设计之所以能成为当今比较流行的趋势，是因为它能让界面信息更有层次感，从设计、交互、视觉以及用户体验等各方面来看，都有不错的优点。站在用户角度，即便不太理解卡片的概念（也不需要理解），但能快速知道如何使用它，相对来说，学习成本也是极低的。

二、卡片式设计价值

1、结构清晰

卡片在占用屏幕空间较少的情况下能够将不同大小、不同类型的信息内容按逻辑进行分组呈现，使界面结构更加清晰。相比纯粹的留白或分割线，卡片不仅对信息作出了分割，其本身还是一个独立的容器，让归纳组合后的信息能快速突出重点，将复杂内容简单化处理。

卡片式布局整齐简练，清晰的信息结构有助于用户浏览，方便快速找到自己感兴趣的内容，避免用户产生一种费时或感觉内容超长的恐惧感，还能节省更多的时间成本。最常见的就是信息列表、图文混排等，不仅做到了视觉上的美观，也达到了平衡文字及图片强弱的效果。

2、场景拓展

卡片式设计有利于场景拓展，他能在信息不断增/减的情况下、页面依然能组成一个连贯的整体，在视觉上毫无违和感。例如支付宝在头部插入的广告引流入口、淘宝在节假日增加二层楼…等。

3、空间扩展

卡片式设计一度打破了移动端多为纵向操作、原有传统的列表式布局，在空间有限的移动端设备中，还能很好的利用横向空间。将横向滑动区域的最后一个卡片漏出一小部分（若隐若现才是诱惑），不仅能给予用户更多选择与期待，其空间利用率也得到了很好的扩展，在展示更多内容的情况下依然能保持模块的整体性。

4、突出重点

卡片式设计能很好的通过边界衬托出内容的整体性，特别是在电商类产品中的首页头部、瓷片区、营销引流区将其应用到了极致，即便在卡片数量较多的情况下，用户依然能清晰的感知到内容的归属层级以及重要信息。

5、兼容多端

卡片作为一个容器，它可以自由无限的等比缩放，非常适合响应式设计。在手机、iPad、电脑等屏幕尺寸复杂的情况下，通过放大缩小或增减纵向排列数量的方式配合响应式的断点设计，让同一界面在不同设备之间轻易的创造出一致性的视觉体验。

6、易于操作

卡片给人最直观的感觉就是可以操作，它不用箭头、按钮或超链接等引导性的视觉元素提醒，节省了一定的页面空间，还有着更大的操作热区，无需做到精准点击。卡片式设计很容易融入各种交出手势，如单击、双击、长按、拖动、滑动等，为用户提供更多便捷的操作。

7、跳转流畅

卡片可通过缩放的形式充分利用动画进行页面跳转，例如App Store“Today”频道，点击卡片后直接等比放大至全屏，给用户一种还停留在当前页面的错觉，避免了传统的跳转页面而造成的信息割裂感，流畅丝滑的过渡，给用户更自然的交互体验。

三、常见的卡片式设计样式

1、四周留白

这种类型的卡片在UI设计中最为常见，柔和的圆角、边缘阴影以及四周很自然的留白，让内容模块的存在感更加强烈，整个页面信息的层级也更加清晰。

2、悬浮内容之上

悬浮型卡片并非模态弹窗，与其相比，悬浮卡片不需要主动操作触发，可作为临时控件或长期固定显示，并且比模态弹窗能承载更多信息内容，可通过伸缩来定义卡片中的信息数量，或多、或少、或展示、或隐藏，在页面中非常灵活。

例如高德地图首页，搜索框及右侧的功能入口长期悬浮在地图之上，而下方卡片中的内容会随着高度的伸缩自动调节可展示的数量，非常实用。

3、通栏类型

通栏类型的卡片具有更强的视觉阻断，对区分不同的功能模块有不错的效果，不过这种类型只通过页面背景色保留上下边间、且不会过多，不然页面会显得零散、杂乱。

四、卡片适用场景介绍

1、瀑布流

瀑布流主要正针对图片较多、或以图片为主的内容设计，它最大的优点是无需过于在意图片的高度，最大限度的还原原始图片效果。

卡片式设计的瀑布流对信息的组合、包容性更强，不仅能在单屏区域内显示更多内容，同时又将每组信息组合作出了明确的划分，在不破坏页面整体性的基础上也做到了相对独立，如花瓣、Pinterest就是最好的例子。

2、信息流

信息流的展现方式主要以文字、图片或视频内容为主，是一种较长内容的媒介，不管哪种展现方式，其都需要用户耗费较长时间的滑动、浏览来筛查对自己有用的信息。

卡片式设计将信息进行分块处理，通过阻隔的方式快速告知用户每个卡片的核心内容，便于用户在长时间的滑动过程中也能快速识别重要信息。

3、左/右滑动

卡片式左右滑动组合在音乐、视频类产品中用最为广泛，因内容本身就图片居多，也更适合卡片式设计，相比平铺具有更强的层次感，对用户的吸引力较强，尤其最右侧漏出的一小部分内容营造出神秘的感觉，用户会不由自主的想去滑动以求获取更多信息。

4、优惠卡/券

卡/券设计实际是把生活中的实物映射到了UI设计中，通过模拟实物造型设计成卡片样式，有效降低用户的理解成本，并对其有了更直观的感知，真实感尤为强烈。

5、突发事件/临时提醒

对于用户主动触发或系统临时发起的非固定性内容，利用卡片式设计会让信息布局更灵活、视觉更突出，在不影响用户使用的前提下，可出现在任何位置。

6、部分页面头图

卡片式设计可以将个人中心、个人主页、会员等页面中的关键信息进行概括，并在头部位置进行重点突出，不仅让原本单个的内容形成整体，还能营造出沉浸式的氛围。

五、卡片式设计原则及小技巧

1、一致性原则

为了保持界面设计的一致性，需要将卡片样式纳入设计规范，例如卡片是否通栏、是否需要设定圆角半径、不同场景中卡片大小的划分界限以及圆角数值的确定等，大部分情况下都需要遵循设计规范。

2、功能定位决定卡片形式

在同一产品中，虽然要遵循设计规范以确保一致性的视觉效果，但并非所有页面都适合卡片式设计。

那么，到底是否需要采用卡片形式、使用哪种卡片类型？这还得根据页面内容属性及目标定位来决定。例如社交产品中的临时会话列表、动态圈子使用卡片形式，很浪费纵向空间、甚至会显得很“鸡肋”，用分隔线或间距留白来区分信息组显然更合适；但对于电商类型的产品，利用卡片将不同的商品分隔后又进行归纳，会更容易识别，信息的可读性也会更强。

3、避免过多卡片嵌套

卡片式设计本身就包含了容器与背景的层级表现，为了保持内容的正常展示与用户浏览体验，避免在卡片中嵌套多层卡片，以免信息层级杂/乱而增加用户的视觉负担。

如果再同一卡片中需要再次区分多个信息组，可利用间距留白、分割线或浅色背景等元素属性来区分，依然能达到想要的效果。

4、合理利用横向空间

因为卡片内、外的双向间距留白，在空间有限的移动端设备中，横向空间利用率较低，因此除了合理的减小左右间距外，还可以适当利用左右滑动来扩充横向隐性空间。

例如淘票票首页，在1.5屏的范围内，几乎每个模块都能横向滑动查看更多内容，从用户体验角度出发，这是纵向空间无法比拟的。

5、降低纵向空间的浪费

卡片式设计不是目的，其主要是用来更好的区分信息层级、提升用户浏览体验，因为卡片要作为独立空间的存在，必定会增加上下间距而导致页面拉长，因此，如无必要，不必盲目采用卡片式设计。

例如美团APP的「首页、电商、购物车、我的」4大主功能页面都使用了卡片形式，而「消息」页则采用分割线进行信息分组，试想一下，如果为了统一规范而使用卡片，不仅造成很强的割裂感、还会极大的浪费纵向空间。

6、长文表达不适合卡片

这点不用多说，新闻资讯类产品的内容详情页就是最好的证明，不管其他页面是否采用卡片形式，但详情页并不会跟随形式，一方面可以让同屏展示更多内容、增加空间利用率，另一方面可减少无关元素对用户产生的干扰、给予沉浸式的浏览体验。

7、突出一个核心内容

很多时候，我们总会听到PM说这个很重要、那个也很重要，都需要突出一点，殊不知当什么都突出了也说明什么都没有突出。在单个卡片中，组始终牢记这个准则：一次只突出一个核心信息，以便于用户快速、精准捕捉，切记不可贪多。

六、结语

卡片式设计之所有能快速流行起来且经久不衰， 其主要得益于自身的灵活性，尤其是在跨设备、跨屏幕上有着纯天然的优势，能忽略设备的差异给用户提供更好的服务。卡片并不是简单的样式设计，它是一种自由布局的设计语言，通过多种方式的信息组合、结合丰富的交互操作，给用户创造出极致的使用体验。

信息的呈现方式虽有不同，但最终的目的都是为了服务于内容，卡片式设计只是其中的一种形式而已，在设计过程中，我们需要根据内容结合实际情况作出合理的判断，切勿拘泥于形式而忽略内容本身的重要性。

任何设计风格及展现形式都有可能成为历史，卡片式设计也不会例外，但绝对不是这么快就结束，它依然值得我们去深究，力求打造更好的信息布局、更舒适的用户体验。

原文地址：能量眼球

作者：大漠飞鹰CYSJ

转载请注明：学UI网》卡片式设计 | 掌握这些技法，快速提升界面效果！

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

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

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

一、什么是“有驾在现场”

有驾是百度旗下汽车信息与服务平台，累计用户超5.3亿，致力于为用户提供真实、可靠的看选买车服务，以及为车企和经销商提供从品牌到效果的一站式互联网营销解决方案。

车展对有驾来说是一个流量爆发的大事件，2021年广州车展期间有驾品牌全网曝光累计6.3亿次，创历史新高。而【有驾在现场】是百度有驾历年车展系列活动沉淀下来的品牌IP，已经成为活动固定的品牌标识。

二、借势大事件，打造车展品牌全案

借势车展的关注度与影响力，我们想要通过分析调研总结，对本次车展进行视觉定调，建立品牌识别体系，沉淀专属有驾车展活动的品牌符号和印记；进行线上线下联合推广来打造有驾车展品牌全案，提升有驾的品牌影响力；优化活动体验来为平台进行引流，让用户对有驾产品有更明确的认知。

同时由于车展项目涉及跨部门合作，我们希望可以通过车展品牌全案，统一不同分工输出的设计物料视觉一致性，以达到提质增效的目的。

以打造品牌全案为出发点，我们梳理了以下项目计划。

同时，通过有驾用户画像分析，建立用户标签，分析用户属性及偏好，以更好的触达用户。数据显示有驾APP大部分用户为常驻中高线城市的年轻男性，经历着数字化信息时代的便利，同时也受到更好的教育和各界多元的文化影响，更大胆更容易被新的东西所吸引。

三、分析项目现状总结优化点

根据过往车展项目分析，总结发现存在品牌识别度较弱且没有统一规范、品牌统一性较弱导致用户认知成本较高等问题。

四、提炼品牌关键词

根据用户画像及现状分析，明确业务需求，通过脑暴的形式罗列品牌关键词，基于品牌DNA对有驾车展进行视觉升级需挖掘符合核心用户的语境语言和视觉偏好，提炼出品牌关键词，根据关键词规范可延续的品牌元素，打造清晰的品牌全案以更清晰的指导后续视觉设计工作。

五、视觉定调

根据关键词确定了以赛博朋克风格为视觉基调，通过三维建模搭建北京地标建筑场景，搭配大胆的配色和新颖的元素样式打造潮流个性且具有未来感的视觉画面，匹配车展品牌的创新理念。

同时，在活动玩法方面，通过优化活动玩法，多条件激励用户给予用户沉浸式的体验。

六、建立品牌体系

确定基础视觉调性后，我们通过形色质构来规范和输出有驾车展品牌vi规范，建立有驾车展品牌体系，以提升视觉的产出效率，确保线上线下视觉输出的一致性。

七、品牌LOGO

【有驾在现场】是有驾多年延续下来的品牌基因，本次车展也将继续夯实品牌资产，进行优化升级传递品牌调性。

由于旧版的字体圆角等设计样式相对柔和，不能准确表现本次车展视觉调性。为了传递有驾车展的潮酷、未来感，设计上将旧版文字加粗，圆角调整为直角，并进行一定的倾斜处理，使字体展现更加果断硬朗；同时，我们将部分笔画进行连接，让字体充满动感或速度感；最终的字型效果运用有驾品牌蓝绿色光效以更好的与画面结合。

八、色彩尝试

由于整体风格参考赛博朋克，配色方面基于有驾品牌色进行延展，辅助色起到平衡主色的冲击效果、活跃视觉，释放潮流激情，突出重点模块；元素上尝试渐变色丰富元素样式。

九、组件化通用元素

通过组件化通用元素，不同物料可以快速复用，节约设计成本，解决整个活动的视觉一致性，同时可以沉淀设计资产。

十、车展主KV

根据关键词【未来感】【年轻化】分析适合有驾的设计风格和调性，通过三维建模的画面表现形式，构建充满科技感的赛博朋克画面，打造潮流科技的有驾车展基础场景。

主视觉场景设定为高楼耸立的公路上，有驾跑车向“有驾在现场”北京车展活动现场飞驰。充满速度感的跑车、霓虹灯牌、高楼大厦色调和质感的碰撞，传递出一种直观的科技感，引领新时代年轻用户和有驾一起驶向未来。

根据上述的内容进行车展主kv的场景设定，输出了草图方案。

整个场景围绕“有驾在现场”进行设计，融合车展相关元素，渗透品牌标识。

采用3D和2D相结合的形式，用C4D进行场景搭建，OC渲染器进行灯光材质的渲染，反复修改调整场景布局、元素等，最终输出三维设计图后进行PS后期，输出最终的主视觉。

根据以上内容，输出了对应的车展VI规范。

十一、车展专题页

根据主KV及VI规范进行专题页的延展，部分内容复用过往车展框架模块。

新增了导航栏设计，便于用户快速跳转到感兴趣的内容模块，导航图标大胆创新尝试渐变色融合的配色形式，让扁平的图标有更加丰富的呈现。在保证阅读效果的前提下，标题样式、页面元素及配色上更加潮酷。

十二、集卡分百万 引流活动

过往集卡活动不仅与产品、车展契合度高，并且收益明显，因此本次北京车展活动将复用、优化集卡类活动，让用户沉浸式集卡，从而提升用户活跃及量级。

在玩法方面，本次集卡活动延续过往活动做任务得车卡的主玩法，优化活动体验，新增了合成稀有卡可参与大转盘抽奖的玩法以激励用户集卡，同时设立了车展大众日，在当天进入活动的用户可以获得现金红包，以此来激励用户回流，丰富活动玩法。

集车卡活动的主视觉元素及配色是依据vi规范，保证整体品牌调性的统一；普通靓车卡背景延续主视觉背景，稀有卡尝试不同配色和场景凸显其特殊性。

除了专题页和集卡活动，线上还包括端内社区活动设计，整体视觉调性都与我们输出的车展品牌vi保持统一。

十三、倒计时海报

为了给车展开幕造势，我们尝试复用主KV的三维建筑模型，将倒计时1、2、3与不同视角、不同配色的场景相结合，整体风格和车展主视觉保持一致，输出了三张倒计时海报，丰富了整个项目的宣传内容。

整个车展项目除了线上运营活动、造势海报，还有线下展会宣传物料及其他第三方输出的设计物料，整体视觉调性都是基于我们输出的车展品牌VI进行视觉延展，保持统一性的同时，又各自有不同的视觉传播效果。

十四、总结

【有驾在现场】作为百度有驾车展品牌活动，我们通过未来感、年轻化、体验感三个维度来塑造有驾车展系列活动的品牌调性，搭建了基础风格，建设三维赛博朋克高品质主视觉，视觉元素细节惊喜感打磨，通过优化活动玩法进行引流，沉淀出新的大事件视觉设计思路，打造了有驾车展品牌设计全案。

未来我们的思考不仅仅只局限在视觉的表现上，还要继续挖掘品牌系列化活动的延续性与独特性，同时更要通过合理的情感互动建立和用户的链接，为品牌长线发展提供更多价值。

作者：设计中台

转载请注明：学UI网》有驾在现场 车展品牌全案设计【百度】

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

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

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

我们将产品划分为三个阶段：

1.0：满足了以产品为中心的设计，达成生产售卖通顺闭环；

2.0：满足了以消费者为中心的设计，考虑更多用户体验；

 3.0：加入以人文中心主义的设计，人文感官品牌情怀社区。

那么明确了我们本次升级的方向后，制定了整个产品的框架，底层加入了人文感官品牌情怀的相关因素，再应用到我们现有的业务上，在协同上进行高效的链接，产品到设计，设计与设计，设计到开发。最终形成了我们的前台展现页面。

根据我们的用户画像以及多轮访谈调研， 得知用户的相关正负情绪。生活当中家务工作的角色分配问题，一直是经常出现的一个场景。用户希望通过我们的产品服务，来提升生活的幸福指数！

在以此为前提的背景下，用户希望我们是专业标准化的、省心高效的、温暖温馨的、舒适的、具有亲和力的等等。最终都会期望以更有品质的生活而结尾，那么“品质生活”即为我们需要来传递给用户的情感。

 那么品质生活是什么呢？

其实用户对我们的要求是一款提升生活品质及愉悦感的产品，而非工具。

综上所述，我们确定了以品质生活成为我们的本次设计语言升级的slogan，再结合业务的自身特性，我们进行了详细的拆分后提炼出了以下相关关键词，来满足用户更多的情感诉求。

干净明亮 

居住环境的洁净会带给人更多舒适惬意的感受。首先对品牌色进行了升级，使其更鲜明。也延展与其相匹配的辅助色来打造出完善的色彩体系。

光 

专业 

高效 

用户携带诉求而来，那么减少用户感到麻烦的情绪，对产品的识别清晰、操作便捷提升是最直接影响的。

亲和力 

服务行业需必备的能力，微笑服务也成为了我们的业务情感透传标准。提炼出微笑符号结合我们的实际场景进行运用！

慢生活… 

在对用户的相关情感诉求结合业务进行了落地后，对效率类设计原则也进行了相应的升级。

应用整体架构也是一个应用对外呈现的基础结构，是系统风格的体现形式之一，除了特殊设计诉求，通常情况下，应用需要使用通用的应用架构来保持系统的一致性和用户操作的易用性。

布局不是静态固定的，栅格系统在一个应用内的重要程度不言而喻。我们设定了以4dp / 4pt为基数的栅格系统。

文本作为产品中用户获取信息的主要信息载体，字号大小和字重决定了信息的层级和主次关系。对字号、字重、行高以及组合字体进行了设定，为不同的场景创造了层级分明以及清晰的信息读取体验。

针对页面内容区域的通用元素间距进行了分类。设计师结合具体场景的情况，来调用间距参数的适配逻辑。以此来结合栅格系统进行更好的适应相关视觉元素符号的对应变化。

 圆角参数  

结合业务属性保证亲和力的透传，在产品尽量避免出现锐角图形的设计表达手法。故此针对圆角的大小也进行了系统级别的定义，进行深度统一管理！

语意原则及动效等，并依据相关设计原则产出了组件库。

在多元化的产品时代，时刻关注并满足用户的情绪，是产品能脱颖而出的关键！在建立设计语言手册时从提升用户体验和满足商业价值整体考虑，挖掘流程当中线上线下的触点，多维度思考并总结落地，深度传递品牌理念。

设计语言手册更多时候是一个相对宽泛的阈值，并非组件的固定值，在某些业务场景下能为用户带来增值体验或较高商业价值时，可以被打破。最后，核心就是在搭建语言手册时应思考更多“为什么”这么做！

 作者：58UXD

转载请注明：学UI网》如何通过设计语言手册来传递品牌理念！

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

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

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

视觉调性高端的色彩，通常具有明度低、饱和度低、颜色数量少等特点，所以很多高端的设计都会以深色作为背景色，因为深色更显低调、更具神秘感，所以给人的感觉更高贵。然后以亚金色、银色、桔红色、白色等作为辅助色。

二、科技

想要表现科技感，色彩的整体调性通常会偏冷色系，明暗对比要强，且通常会使用渐变色。比如以深蓝色到蓝色的渐变作为背景色，然后用高饱和度、高亮度的青色和紫色作为辅助色，这时这些辅助色就会非常的跳跃，具有一种发光的效果。

三、时尚

其实所有调性的配色都应该要尽量时尚一点，即使是想表现复古，也不能太土，所以这里所说的时尚特指偏向年轻、潮流的时尚。这种色彩通常具有饱和度高、明度适中、色相对比较大等特点。葱爷这里概括了两类，一类是以纯色作为背景，这种色彩比较适合于品牌设计、网页设计、画册设计等；一类是以渐变色作为背景，这种色彩比较适合于电商设计、广告设计等。

四、酷炫

酷炫是指那种视觉效果特别张扬、甚至是极具个性的色彩搭配，比如近几年比较火的蒸汽波风格、酸性风格、赛博朋克风格、故障风格，其色彩就属于酷炫类的。该类设计通常也是以深色作为背景，图片元素会使用高饱和度且对比很强的渐变色，色彩相对较多。

五、好吃

即让人感觉很有食欲的色彩搭配，这种色彩通常以暖色为主，比如红色、橙色、黄色。饱和度较高、明度较低的组合方式通常用于餐饮行业；而饱和度较低、明度较高的色彩组合通常用于甜点、饮料等行业。

六、夏天

目前正值火热的夏季，所以葱爷专门整理了一些适合表现夏季的好看色彩，该类色彩通常会以蓝色、青色、绿色这种冷色系最为主要颜色，然后以黄色或红色、白色作为辅助色，这种色彩组合会给人清凉、快乐的感觉。

七、清新

小清新的视觉感受为轻松、柔和、淡雅，要达到这样的效果，颜色的明度通常是比较高的，饱和度偏低，常用的颜色有浅青色、浅绿色、浅黄色、粉红色等，在奶茶、女性护肤品的相关设计中比较常见。

八、快乐

快乐是张扬的、是活泼的，所以快乐的色彩饱和度较高、明度不会太低、色彩的种类会比较多，通常也是以暖色为主，但是会搭配冷色一起使用。黄色具有很强的快乐、阳光属性，所以想要表达快乐，黄色通常是少不了的。

九、可爱

跟儿童、年轻女性相关的设计，通常需要表现出可爱的调性，这类色彩通常是用冷色和暖色相互组合，颜色的明度同样不会太低，否则会有压抑的感觉，另外饱和度也不要过高，饱和度稍低一点效果会更柔和一些。

十、健康

想到健康我们立马就会想蓝天白云、青山、绿色的草地和树叶，还有黄色的小野花等等，所以蓝色、绿色、青色、黄色、白色都是常用于表现健康的色彩，红色也可以偶尔作为点缀色加进来。由于健康的调性也是要给人一种舒适、轻松的感觉，所以整体的颜色明度不要太低。

十一、运动

要想让色彩动起来，对比一定要强，可以是色相对比、也可以是明度对比和饱和度对比。橙色和黄色是两个很具活力的的颜色，所以常用于表现运动的设计里。

十二、科幻

这是一些科幻电影、机动游戏的海报设计常用的色彩搭配组合，给人的视觉感受是稳重而大气，科技感和神秘感并存，所以背景色通常也比较暗，喜欢用青色和黄色这种比较亮的颜色作为点缀。

十三、喜庆

在设计节日海报或促销海报时，通常需要表现出喜庆的调性，有些设计师会局限在大红色、黄色、和橙色里，这样搭配出来的色彩容易土，而想要解决这个问题，一方面可以加入冷色搭配使用，另一方面颜色的饱和度和亮度也不要过高。

十四、复古

这类色彩的特点是颜色的饱和度会相对低一点，而且大多数情况下，整体的明度通常也不会太高，常用类比色搭配和对比色搭配。

十五、中国风

具有中国风特色的颜色和色彩组合有很多，葱爷这里仅列举了8个组合。这类色彩同样饱和度不会达到最高，有点复古和充满文化气息的感觉。胭脂（暗红色）、缃色（中黄）、绀青（深蓝色）、黛（褐色）等是中国风常用的颜色。

十六、梦幻

梦幻具有奇妙和神秘的感觉，好像在黑暗中找到了一点曙光，奇遇了惊喜一般，所以大多数情况下，背景色会使用从深色到亮色的渐变。颜色相对会比较丰富，而且以渐变色居多。

十七、女性

女性是温柔的，是感性的，所以该类色彩组合通常为类比色，偶尔会用一点对比色作为点缀，以增加画面的活泼气息，颜色的明度和饱和度都不能太低，当然饱和度最好也不要过高，粉色、紫色是常用于表现女性的色彩。

十八、优雅

优雅可以理解为低调、高级、温和、安静，所以这类色彩的对比通常不会太强，饱和度也会比较低，整体的色彩调性会偏中性，常用卡其色、麻色，还有单色组合及类比色组合。

十九、经典色彩组合

除了以上十八大调性，葱爷还给大家推荐一些经典的配色，很难把它们具体归为哪一类，但是我们在做很多设计时，用上这种配色总能得到不错的效果，比如红黄黑、红白蓝、黄绿黑、等等，在很多平面海报设计中经常能看到。

正文

经常使用爱奇艺刷剧的同学，有没有发现爱奇艺的应用图标又变了。前段时间爱奇艺针对品牌设计进行了较大的调整，最近又悄悄地将应用图标的背景色换成了这种多彩色混合渐变的形式。

针对这个视觉效果估计大家各有看法，我们就不讨论这个话题了，今天黑马哥是来出教程的~O(∩_∩)O~。

这个类似于极光/弥散渐变的风格最近也比较流行，在 UI 场景中的运用也是比较普及的，被运用到应用图标的案例中相对较少。大概的回忆了一下，也有一些产品会使用，特别是比较知名的 Instagram 很早之前就使用了，也成为了流行趋势中的优秀案例之一。

通过极光/弥散渐变（混合渐变）的形式强化应用图标外轮廓背景，不仅可以提高视觉感，也是体现年轻化趋势的一种色彩表现形式。不过渐变中的色彩本身也是关键性的因素，如果色彩不够年轻活泼，带来的效果也是千差万别的。

一、渐变的表现形式

渐变色在我们的设计中是非常普及的，渐变色分为线性渐变、径向渐变、角度渐变、混合渐变、流体渐变等形式。不同的渐变形式可以营造不一样的视觉体验，可以丰富色彩环境、强化光影质感、增强层次感和空间感等。

1、线性渐变

这是最常见的一种渐变方式，具备明确的方向性，由两种或者多种颜色组合形成。相较于单色来说，线性渐变可以使得画面更加丰富，色彩营造出的层次感更强。

2、径向渐变

径向渐变是以中心向外扩散而形成的圆形渐变，可以作为立体感的表现，也可以营造向中心聚拢的光影效果。

3、角度渐变

角度渐变形成类似于雷达扫描的效果，属于运用相对较少的渐变形式。在一些应用图标的外轮廓背景中会被使用，也可以作为营造产品的光影变化。

4、混合渐变

混合渐变就是多种颜色随机混合，色彩形成不均匀的自然弥散开，也可以成为弥散渐变或者极光渐变。是最近比较流行的视觉风格，可以呈现出丰富的色彩变化和随性自然的年轻化趋势，被广泛应用到平面设计、UI 设计、电商设计等众多视觉设计领域。

5、流体渐变

流体渐变就是多种颜色渐变组合，形成带有流动感的视觉效果，通常作为背景来丰富设计的视觉感。也有动态形式的流体渐变，在 APP 和一些屏幕壁纸中出现，带来的感官体验也是非常不错的。

随着视觉感官体验的不断追求，设计师已经不满足于趋于平面化的渐变形式，探索出造型多变、色彩丰富、刺激感官的视觉体验，以更加丰富的表现形式来探索渐变方式。

二、渐变小教程

线性渐变、径向渐变和角度渐变实现起来比较简单，软件自带的渐变属性即可满足。下面重点给大家分享如何实现混合渐变的效果，以后再单独给大家分享关于流体渐变的技巧。

混合渐变顾名思义就是将多种颜色进行混合，形成色彩丰富的过度效果，需要把控的是颜色之间的自然过渡。

方法一：

通过绘制几个不同颜色的形状图形，然后执行高斯模糊形成混合渐变，模糊的参数值要适当大一些，一直到颜色自然过渡为止。

方法二：

如果想要随机性大一些，可以通过画笔工具随意涂抹颜色，这样形成的效果更加随机性。然后再执行高斯模糊将颜色融合，带来自然随性的视觉体验。

三、分享几个案例

不能只是纸上谈兵，只有反复磨练和尝试才会熟能生巧。根据以上的方式黑马哥完成了以下的作品案例，大家也一起来动动手吧！

1、邻近色系易把控

混合渐变技法层面来说并不难，配色是相对具备难度的，很多同学都会因为配色不到位而做不出优秀的作品。针对应用图标设计中的配色来说，邻近色系的搭配是最容易把控的。选择色相范围在 60° 以内的色值，混合出来的色彩排斥感都是比较低的，融合度比较高，能够呈现出比较舒适自然的视觉感官体验。

如果选择了色相角度大于 60° 的色值，只要数值的增减关系控制在 30° 以内都属于可控范围，这时候如果出现较大的色彩排斥感，可以通过降低不透明度来进行视觉平衡。

2、强视觉感还得对比色

虽然邻近色的处理比较容易把控，但是带来的视觉感也是与颜色对比关系成正比的，想要达到强视觉感还得选对比色。色相选择范围在 120°~180° 之间的色值，容易形成较强的视觉张力，通过增加高斯模糊的值才能稍微过度相互之间的色彩排斥感。

3、学会举一反三

今天分享的经验不局限于应用图标的设计范畴，我们要学会将这个技法举一反三，运用到更多的设计场景中。比如在下面作品中的一组信息卡片的设计中，通过混合渐变形成的卡片背景提高了局部的视觉感，配合磨砂玻璃质感的运用，提高了该部分的视觉感官体验。

4、其他作品欣赏

为了辅助大家理解和开拓思维，为大家选择了几个类似的案例作品，希望可以带给大家更多设计灵感。（以下作品版权归属原作者，仅作为学习交流）

四、布置一个小作业

通过对混合渐变实现技巧的学习和案例欣赏，相信大家对于混合渐变有了比较全面的认知。学以致用的目的，下面为大家准备了一个小作业，希望以此来强化大家的理解。

根据以上示意图提供的高保真原型图，以混合渐变的形式增强其作品的视觉感。

以下方案为黑马哥完成的一个示意，大家可以转换思维和调整新的配色方案，输出不一样的全新作品。

作者：黑马青年

转载请注明：学UI网》这个效果原来是这样做出来的

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

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

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

首先，我们一起解读业务场景、身份、及功能；业务场景是全品类综合电商直播间，身份是主播的虚拟助理，直播间的功能是为用户答疑解惑；基于这三个背景，初步勾勒了角色标签，目标是创造一个富含亲和力的虚拟助理形象，来呼应全品类综合直播场景和虚拟助理身份。 

行业洞察

设定架构

最后，结合形象的“内在+外在”的体现，与巴卡罗两大风格要素“曲直+量感”，来塑造亲和力的直播间虚拟助理形象；拆解内在围绕性格/气质/眼神特征，外在围绕形象（体型/面貌/穿搭）、举止与表情三大框架设定形象，共同塑造亲和力和感染力的形象。

01 内在心与神 

解析内在形象对应的两大风格要素-曲直+量感，细分量感的指标是成熟/青春、外向/内向、开朗/稳重的综合值，曲直的指标是热情/冷漠、柔和/刚烈、感性/理性的综合值。而亲和力的内在形象，量感偏小—开朗的性格、青春乐观的心态、以及外向的性格；曲直偏曲—需具备大方热情的气质、柔和的眼神、感性的情感表达，拉近和沟通者的距离，在直播间为用户答疑解惑时，第一次见面也能给所有人留下亲切、可信任的印象。

02 外在形与貌

解析外在形象对应的两大风格要素-曲直+量感，细分量感的指标是大小、轻重、粗细、深浅、宽窄、薄厚、浓淡的综合值，曲直的指标是直曲、冷暖、方圆、硬软的综合值；量感偏小—特征是窄细浅小短薄淡，带来柔和自然；曲直偏曲—特征是圆暖曲软，和用户沟通时圆润舒适，以此来指引亲和形象的设定。  a）形象亲和接下来，外在形象围绕体型/面貌/穿搭三步走框架，搭建亲和力的决策框架。体型

第一步，体型选择胖瘦适中（曲直适中）；肩腰臀比例协调/凹凸有致的X型（量感适中），理想型身材穿什么衣服都好看。

面貌五官

第二步，五官的起点是脸型，选择曲直适中，长短适中的鹅蛋脸（额头与颧骨等距），不挑发型。

确定脸型后，是五官的决策，我们通过洞察发现，许多保持高热度的卡通形象最显著的共同特征就是拥有一双甜美可爱的大眼睛，表情生动亲切，无攻击性。在五官比例上，三庭中的中庭稍长，五眼中两侧较短，注重眼睛神情的表达。因此，在设计初始，我们先以眼睛为中心，再逐一展开眼睛/眉毛/嘴巴/鼻子的设定。

眼睛：定位生动的大眼（量感大）获得生动的神情；眼型结合圆眼+桃花眼（偏曲），上眼皮弧度圆润饱满，自带月牙般微笑感。

眉毛：定位粗细适中（量感适中），眉峰圆润/眉尾自然向下的小挑眉（曲直适中）。

嘴巴：定位小嘴唇（量感小），唇型选择微笑唇，嘴角上扬提升友好度（曲直适中）。

鼻子：定位鼻翼窄小的小鼻（量感小）；鼻型选择鼻头上翘的小翘鼻（曲直适中），搭配鹅蛋脸脸型。

妆容

在妆容上，尝试融入电商热卖元素-火苗，来进行面部彩绘，呼应电商直播间虚拟助理的身份。

头发

五官和妆容确定后，开始做她的头发，长短适中的中长发（量感适中）、发尾微微外卷俏皮柔美（曲直适中）、高颅顶发型蓬松透气。

到这里，咱们面貌的部分就告一段落了，亲和力的五官，并不是说每一个五官都要量感小、曲度适中；咱们围绕业务场景、身份与功能，科学的创造虚拟形象，需注重五官与脸型的比例，和五官之间的相互搭配。

穿搭

第三步，是穿搭的设定，以上体型和面貌量感/曲直的设定，与穿衣风格有着密不可分的关系。我们以修身得体为方向，尝试了优雅的轻熟风、服务型身份的职业装、以及休闲百搭的休闲装-T恤和牛仔裤；因轻熟风的连衣裙便利性差，职业装略过正式有距离感，最终选择休闲装即适用于多品类直播间场景，又给人亲和感拉近距离。

b）举止优雅

根据虚拟助理的六大服务场景，定义优雅的肢体语言，在与和用户交流时，从肢体语言（站姿、手势、头部、眼神、面部表情….)中流露出周到的礼节、细致的行为，给予用户友好的指引与反馈。

c）表情生动

咱们按照场景把基本情绪划分为快乐、伤感两类；欢迎/引导/收到赞的正向行为，表现为快乐的微笑；答不上来问题和收到踩的负向行为，表现为伤感的噘嘴/皱眉，避免使用带有攻击性的（悲痛、愤怒、憎恨）。

‘

写在最后

作者： 富媒体用户体验 

转载请注明：学UI网》百度直播丨塑造亲和力的直播间虚拟助理形象

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

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

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

在七夕期间使用抖音APP点赞时，图标会变成玫瑰花符号，多次点击会出现满屏的玫瑰花，让点赞设计变得更加趣味化。并且与同类竞品在点赞的交互设计细节上产生差异化，给用户带来与节日相关联的，更加丰富的视觉和感官的触动。该设计方案不仅提高产品的调性与用户体验，并且与用户在节日情感上产生更深的共鸣。

二、【飞书】左侧聊天框交互设计探索

飞书作为一个办公协作平台，在解决团队沟通效率方面下足了功夫。鉴于人们在认真阅读某些信息时，通常是从左到右、从上到下的浏览习惯，飞书的聊天信息全都靠左排列也正好印证了这一点，一改往常闲聊时较为随意的习惯，不仅能潜移默化的暗示用户在交流过程中该有的工作态度，还能提高其专注度、以及团队之间的沟通效率。

在使用场景中，用户可以把工作的聊天记录当成文档来看待，减少与工作无关的聊天内容，使得聊天记录就是会议纪要。

用户也可以通过飞书的设置，自由地更改聊天消息的左右排布。使不习惯于左侧聊天排布的用户调整的自由，减少这类型用户的排斥心理反应。

三、【闲鱼】卖闲置图标场景设计

闲鱼将“卖闲置”的驼峰标签栏设计成“电风扇”的动态图标形式，结合近期高温天气，给用户带来心理上凉爽的使用体验。

四、【每平每屋】加入话题圈卡片动效设计

每平每屋的话题圈添加卡片，做成了非常有意思的ip人物拨弄+号的动效。在视觉上起到了强调的作用，也能驱动用户的好奇心和体验心，增加话题圈的点击率和加入率，让加入圈子这件事变得轻松有趣。

五、【Snapchat】角色创建功能应用设计

在Snapchat中角色创建完成后，在相应的应用功能界面，则会替换成用户的专属角色。

如：地图界面、表情包界面、引导界面以及视频流界面。

该设计以专属角色代替用户视角，通过让专属角色深入的参与每一个功能来提高用户粘性，以及用户存在感和归属感。

六、【Snapchat】底部栏故事功能设计

Snapchat将故事视频流设计成了视频“合集”，用户点开视频，通过下滑或者点击创作者的名称来关注或者查看不同的视频合集。视频合集分为xx季xx集，方便用户快速筛选。

另一个不同于普遍的视频功能设计点中，Snapchat将单击视频【暂停】的功能设计成了单击【快进】，视频切换则是左右切换。对于中国用户，需要时间来适应不同的交互习惯。

七、【Gravity】头像装扮设计探索

在Gravity这款社交软件中，用户无法使用设置头像功能，产品将用户系统角色替代照片头像。在软件中模糊用户的头像存在感，使用户发出的内容成为社交重点，塑造一个半匿名社交平台的属性。而角色商城的装扮，则满足了用户头像多样性的选择，同时通过这种方式提高了产品变现的能力。

八、【Gravity】角色场景界面

在Gravity的角色场景界面中，用户可以根据心情、生活、兴趣等场景来切换自己的展示形象。也可以邀请好友进入自己的场景界面，形成一个动态的“朋友圈”，通过切换场景来表示自己最近的状态和生活。动态朋友圈的建立能够增加用户与用户之间的联系，增强用户对平台的粘性。

九、【羊驼日语】首页卡片功能设计

羊驼日语的首页不同于其他APP，摒弃了首页头部banner或者金刚区的设计方法，羊驼日语将动漫风融合进APP的设计风格中，将首页的卡片区动漫人物做主要突出。新颖的设计让用户眼前一亮的同时将思维引导到卡片功能上去，引导用户进行点击，提升学习率。

十、【型影】构图姿势辅助功能设计

如果你拍照总是肢体僵硬，不会摆姿势，那你一定要下载这个APP。

型影APP的构图姿势由创作者提供，内含几千种不同场景不同姿势的构图摆拍。

只需要点击你喜欢的同款照片，打开相机，视频中的辅助线能够帮助你一比一复刻博主同款poss！

作者：黑马青年

转载请注明：学UI网》快来看看这些小功能里面的设计惊喜

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

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

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

几轮信息传播下来，我的好奇心就这么被激起来了。于是到小程序里找到游戏，玩了几把。最直观的感觉就是“确实难度很高”，而且与之前的玩过的游戏还真有点不一样。

一、产品玩法

1、门槛低

本质上来说，《羊了个羊》是一款消消乐游戏。消消乐的特点就是门槛低，没有复杂的操作，用户只要点几下就可以了。第一关太简单了，更多的是为了教学而服务的。也正是因为简单，我不知道“卡槽里的3个相同的卡牌，即使不相邻也是可以消除的”，不过玩了几局后我就明白了。

2、单局时间短

微信小游戏有一个特点就是时间短，用户可以随进随出，单局不会占用太多的用户时间，但是玩起来后也容易上瘾。这似乎与短视频非常相似，本想着只看一个视频，也就3-5分钟，不会浪费太多时间，但是一旦开始了，根本停不下来。

前几天，在我儿子的引导下，玩了一个赛车游戏。刚开始想就玩一局，结果是一局接一局，中秋放假2个晚上都玩到了深夜。

3、难度高

《羊了个羊》与传统的消消乐游戏又有些不同，增加了叠牌设计、卡槽消除玩法。看起来简单，玩起来实际上非常烧脑。

叠牌的玩法就是用户必须要消除上层的卡牌，才能激活下层卡牌。有了消除的先后顺序，就要求用户必须有一定的策略，才可能通关。

卡槽用来放置用户选择的卡牌，卡槽中出现了3个一样图案的卡牌则可以消除，当卡槽满了，也就意味游戏失败。即使卡池上存在3个一样图案的卡牌，但是卡槽中没有了空位，游戏仍然失败。

所以用户不仅要关注卡池中的卡牌层级，还要关注卡槽中卡牌情况。

因此，游戏在宣传方面打出了“通关率只有0.1%”的口号。为什么搞这么高的游戏难度呢？

二、第二关都过不去的难度

任何游戏都必须要有一定的难度，否则用户玩几局就会觉得“缺乏挑战性，没意思”。但是只到第二关的难度，我也是第一次见。这种难度给游戏带了什么呢？

1、话题性带来流量

虽然很多游戏会有获得成就引导分享，或者分享朋友圈、好友圈复活玩法等等，但是用户要么不做分享，或者都是非常被动的分享。而这次用户发朋友圈，或许都是主动而为。

最大的引爆点就是游戏难度，有难度才会有话题性，用户才有分享和互动的欲望，才能引起更多人的关注。而朋友圈、分析文章、短视频各种渠道掀起的话题，肯定为游戏带来相当大的用户流量。

2、用户挑战欲望

如果有人对你说，“有款消消乐游戏挺好玩的，要不要试试？”，你也许只会微微一笑，甚至嗤之以鼻。

但是如果有人对你说，“有款消消乐游戏，你第二关都过不去”。你会怎样？

大概率想“怎么可能呢？我要挑战一下”。用户尝试的欲望就起来了。结果，用户越是挑战不成功，越想挑战。

3、方便广告植入

游戏难度最终是商业化服务的，用户多次尝试后不成功，就会求助道具或者启用一次复活机会。特别是单局已经投入了较多的时间成本，眼看快要成功通关的关键时刻，沉没成本促使大多数用户牺牲30秒的广告时间，换取一次复活的机会。

只要看广告的人越多，钱也就赚得越多，游戏的难度也是为了“如何让玩家看更多广告”而服务的。

4、减少游戏投入

对于游戏这种产品来说，真正的热度应当来自于游戏内容，以及其带给玩家精神层次的愉悦体验、世界观、价值观构筑等方面；而游戏公司通过制作优质内容的游戏，获取商业利益，再持续开发更多游戏吸引更多关注。

所以传统的关卡游戏可能是几十上百关，甚至更多，大家也都习以为常了。随着关卡增加，游戏会慢慢加入新的玩法，吸引用户不断地玩下去，最终让用户长期上瘾。希望像挤奶牛一样，持续性地挖掘用户的价值。

《羊了个羊》则完全反其道而行之。

似乎是考虑到当下小程序游戏非常容易相互模仿。一旦一款游戏火了，之后就会冒出各种相似的游戏，就会面临激烈的竞争。所以《羊了个羊》改变了游戏策略，通过拉高关卡难度，让用户一直停留在第二关（也许有更多关，因为我没有玩过第二关），从而减少游戏的开发成本。

这种更像是快餐模式，不用过多地担心游戏风潮会过去，也不用担心用户流失，毕竟游戏的投入并不高。

而一些当时风靡一时的小游戏，例如“跳一跳”、“打纸飞机”、“旅行青蛙”等，确实在大火之后迅速降温。想想自己这几年也曾经玩过一些小游戏，不过基本上都是“3分钟热度”，玩一段时间就放弃了。

或许这也是《羊了个羊》拔高游戏难度的一个原因吧。

三、关于激励机制

当然，在《羊了个羊》游戏中也有传统游戏必备的激励机制。例如有省区代表队排名，“最强王者”等荣誉勋章称号。但这些激励机制在目前的阶段，似乎并不重要，通关成为了用户最大的目标。用马斯洛需求层次理论来解释就更加合理了，温饱还没解决，谈什么个人荣誉呢？

用户当前最大的需求就是“该如何冲过第二关”。

以上就是我的一些思考，欢迎大家评论区留言交流～

作者：子牧先生

转载请注明：学UI网》火出圈的《羊了个羊》，到底做了什么？

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

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

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