组件 复用 场景 在上一篇文章中，我们通过实例讲述了构建和维护组件库的一些方法和思路：组件库设计指南（一）：组件库的诞生编者按：组件库该如何构建？阅读文章 > 在聊到关于持续维护组件的意义时，我们说到，组件在保证合理性的同时，还需要满足复用性、易用性，以便更好地服务于日常的设计需求。所以在组件维护过程中我们不可避免的需要考虑复用性和易用性二者之间的平衡。此时我们需要思考“如何使一个组件在满足多业务场景需求的同时，又能保证其易用性？一、关于复用性复用性是指组件具备一定的可配置属性以适用不同场景的能力。适应的场景越多，组件的复用性就越高。「可配置」主要体现在以下方面：支持通过替换内容，样式，尺寸等操作改变其状态，以适应不同的场景；支持局部元素展示隐藏，例如商品卡片的标题、说明、标签、价格等可根据接口数据控制展示逻辑；支持多种布局和排列方式，例如商品卡片的左图右文排列、上图下文排列；我们在上一篇文章中的提到的基础样式或组件，例如文字(字号、颜色、对齐方式)、颜色、图标等即是可配置属性，通过这些基础样式预设的变量，来满足各场景的需求。组件的内部元素的可控性越高，其适用的场景就越宽泛。为了满足不同场景的需求，设计师在调用组件时往往需要通过“覆盖层”设置其嵌套逻辑和样式选取，整个过程中所产生的思考与操作成本较高。但相应地，正因为「组件」高度整合了多个可配置属性和变量，组件库的整体规模会相对容易把控，结构也会相对清晰。二、关于易用性易用性是指组件对于使用者的友好程度，即组件的设计能够符合使用者的认知及需求，使用者能通过较低的学习成本、快速上手使用。我们通常需要从以下 4 个指标来度量组件是否易用：结构清晰：组件所包含的所有组成元素是否可视；便利检索：指在文档内查找组件的难易程度，通常与组件命名相关；即拖即用：单一组件用于业务设计所花费的成本；帮助可视：是否容易获取组件使用的提示和帮助。组件内部元素的可控性越低，其适用的场景就越单一。对于使用者来说，可以快速地检索、发现所需样式，并能快速完成调用，也更易于组件的认知和记忆。但要满足多样化的设计需求，所需「组件」的数量需要足够多，组件库的整体规模相对较大，后期更新和维护成本更高。总的来说复用性和易用性是优秀组件必不可少的特性，二者缺一不可，但任何一个极端都不利于构建高效实用的组件库，设计师需要明确组件库的目标并制定规划，针对每一个图标、按钮、组件、模块，考虑如何实现复用性和易用性的平衡。下面将以“Gtech UI Kit (Mob)”组件库当中的实例，来简单阐述我们对于二者平衡的思考，以及我们是如何做的。二、以商品卡片(网格布局)为例以电商 PLP 页面（商品列表）中常见的商品卡片为例，我们知道在列表中每个商品最终呈现在用户面前的内容取决于商家后台的配置。对于承载内容的组件来说，我们在维护时需要结合业务需求考虑诸多问题：例如自适应场景、商品名称的长短限制、卡片内容的布局和排列方式等等...1. 拆解 - 从业务出发，拆解组件的表达结构和所需元素如果对商品卡片进行拆解，最基础的商品卡片通常包含：背景、图片、名称、标签和价格等元素。图片通常以 1:1 的比例展示，无论在什么屏幕宽度下，均保持比例一致；商品名称通常不会超过两行，需要考虑自动布局以适应不同的文本长度和屏幕宽度；标签行通常展示 1-3 个不等，甚至没有的情况，标签组件中需预设足够多的样式支持；价格通常会展示折前价和折后价对比，或仅展示最终售价。当某一组件拆解到足够细分的时候，可拆解出多个可配置属性（即基础样式和组件）可以形成多种组合。依照这些组合，我们可以开始创建组件的工作。2. 组合 - 通用的组件的布局及可配置属性的搭建母组件建立商品卡片的基本结构和内容排列：网格布局以上图下文为主，将所有的元素设置成合适的大小，除图片外的其他内容均以名称、标签、价格的顺序自上而下展示，另外，建议标签和价格元素各自合并成组，以方便后续进行自动布局；选择所有元素，创建为组件；对于网格布局的商品卡片，我们除了一系列的自动布局和尺寸的设置外，需要注意的是新建一个空对象容器、将图片放置其中，以方便固定比例。以上我们就完成了满足上述需求的商品组件，我拆解了一下结构，如下图：按照上述操作，我们完成了一个基础商品组件的创建，我们通常称之为“复用组件”，通过复用组件我们在需求设计时可以根据实际业务场景进行替换图片、替换文字内容、增删元素或者拖拽拉伸均等操作。3. 精细化 - 从多维度，多场景输出子组件的方案和组合精细化是根据实际情况对复用组件进行细分管理，通过对可配置属性的替换，输出多个样式组合即“子组件”；子组件一般根据使用频次和属性分类展示在组件库文档内，以供使用者浏览、使用；如果需要调整某一子组件时，只需进行独立调整，无需改动复用组件，且其他子组件也不会受其影响。这种管理方式的优点诸多不一一赘述，但需要在前期整理、理解和细化时需要花费一点精力。三、思路在整个过程中，我们前期将目标进行拆解细分，中期整合多个属性变量创建可复用组件，最后通过精细化管理，尽可能的在单一组件目录下展示多个样式组合，并通过不同的菜单对其布局、类型、状态等属性进行分类，使之在使用环节能够易于检索、识别、并即拖即用，快速上手。以上是我在整理组件时的思路，抛砖引玉，仅供参考。在实际维护的过程中需要考量不同属性和变量的使用频率。并不是组件整合的属性和变量越多越好，兼容越多的属性和变量往往意味着组件的复杂度越高，对于各个场景的调整成本也越高，反而会增加额外的操作和认知成本，就舍本逐末了。再举个例子，如果设计能够在需求阶段就得知后台配置的商品名称有字数限制的情况的话，我们在创建商品卡片时，可以直接以最极端的场景考虑即可，这样也能减少试错成本，提高维护效率。所以也请大家注意，要结合业务需求和日常工作习惯，找到最适合自己的组件整理维护方案。四、易用性在前，复用性在后实际上，无论何种事物，复杂的逻辑往往是隐藏在看不见的地方，就如同我们日常接触的应用程序一样，展现在用户面前的永远是优秀的界面和体验设计，而其背后往往是开发者无数行代码交织形成的复杂逻辑。组件也是如此：在整理和维护组件的环节，我们需要考虑多种组合场景，衡量这些场景的使用频率，整合出一个或多个高度复用性高的组件，并以此精细化足够多的可供快速使用的子组件。而对于使用环节，我们希望设计师和开发者可以通过浏览设计文档、网页等方式查看所有子组件选项和使用帮助，并能快速选择业务所需的组件，减轻改造组件的成本，以实现更有效率的设计和封装工作。最后，不要盲目追求兼容性和复杂度，适合即是最好。更多组件设计干货：6000字干货！如何用 Figma 搭建系统组件库？组件库是一个强大的提效工具，对于设计师和开发来说有了统一的标准，输出的效率也会大大提高。阅读文章 > 用一篇文章，从零开始帮你用好 Figma 的组件库功能对于设计系统，我们最熟悉和常用的应该就是设计组件了，即 UI kits，包括输入框、按钮、文字、链接、下拉菜单等等。阅读文章 > 欢迎关注作者微信公众号：「Gtech UED」本篇来源：优设网原文地址：https://www.uisdc.com/guide-to-the-design-of-component-library-2
评价 用户 商品 大家好，这里是 TCC 翻译情报局，我是李泽慧。评价是电商网站不可或缺的重要组成部分，巧妙合理的评价模块设计可以帮助用户快速决策，有效提升平台下单转化率。作者通过对比多家热门电商平台的评价模块设计，总结出 10 条小技巧，并且附上了优秀和糟糕的设计案例方便理解，文章内容通俗易懂，案例丰富，一起来学习一下吧！线上用户依赖评价进行购买决策。一起来学习10个体验设计小技巧，看看如何活用用户评论来提升下单转化率吧。更多转化小技巧：增长设计实战！如何用一个公式提升5倍转化率？设计师如何提高转化率？阅读文章 > 做购买决策时，用户将在线评论视为有效的产品信息获取来源。在线场景下，用户不能亲临现场触摸或试用产品，浏览评论就成为帮助用户在下单前了解产品真实使用体验的渠道。但是如果评论的呈现不符合人们的使用习惯和预期，用户可能很难找到能解答自身疑惑的评论，因此不能判断产品是否满足自身的需要从而放弃购买。目前，有浏览评论习惯的用户较之以往正在增加，根据 2021 年的研究所示，超过 99.9%的用户表示他们在线购物时会至少偶尔看下评论，2018 年时，这个用户占比为 97%。2020 年另一个研究显示，当用户可以在商品详情页了解商品评分和评论时，购买转化率是没有提供此类功能产品的 120.3%。在浏览过大量电商网站后，我总结了利用用户评论提升下单转化和用户满意度的 10 个体验设计技巧，并附上了 优秀和糟糕的设计案例对比。浏览过的电商网站包括：亚马逊、Anthropologie、Ann Taylor、Asos、阿迪达斯、百思买（Best Buy）、好士多（Costco）、易趣（eBay）、家得宝（Home Depot）、Kohl’s、Karmaloop、H&M、宜家、L.L.Bean、梅西百货、耐克、Overstock、丝芙兰、塔吉特（Target）、Vitacost、沃尔玛一、提升高评分商品的可见性排序是有效且用户友好的工具，可以提升进入商品列表的几率同时反馈搜索数据。排序或筛选评分最高和最热的产品可以帮助用户在具有相似功能的产品之间评估出大多数用户认为最好的一款，从而帮助做出购买决策。我测评的网站中许多都允许用户通过最高评分、平均分或星级筛选商品，然而，几乎所有网站对筛选结果的排序都不太讲究，评价量少但都是五星评价的商品展示优先级高于评价量多但是混合了正负评的商品。比起这样，排序逻辑更应该考虑平均分和总评论数，这样可以避免让许多只有一个五星评价的商品优先于有许多用户评论的产品展示。优秀案例：Kohl’s 可以通过高评论量和星级筛选产品，这些功能让用户在购物时可以优先浏览评分高的商品。优秀案例：Kohl’s 的产品列表可以按评分高低筛选评价。糟糕案例：Target 让用户可以筛选平均分筛选商品，但是首页顶部展示的很多商品只有一个五星评价，同一星级但有更多评价的商品排序随机，这让用户可能错过热度更高更可靠的商品。糟糕案例：Target 通过平均分排序，同一五星等级中，只有一个评价的商品排在有更多评价的商品前面。二、在商品列表页展示评分当用户不能亲自评估产品质量时，他们就得依赖评分来找到高质量商品。评分应直接包含在产品列表中，特别是如果用户不熟悉网站售卖的产品类型时。几乎所有我测评的网站都在产品列表中展示了评分。当一个商品没有任何评价时就不展示评分或者显示评价数为 0。优秀案例：当产品有评分时就会展示在列表页中。未决策的用户或对商品领域不熟悉的用户可以从评分获取帮助。优秀案例：易趣在商品列表页展示用户评分。糟糕案例：H&M 在商品列表页没有展示评分，评论在商品详情的下面，除非用户滚动至详情页底部，否则很难看到它们。糟糕案例：H&M 在商品列表页没有展示评分。三、在星评旁标注评价数量当多个商品评分接近时（比如都是 4.5 星），看评价数量可以帮助用户推测哪个商品甚至是同件商品的不同颜色或口味更受欢迎。将星级与评价量结合，帮助区分评分近似的商品可以提升用户体验，比如 Vitacost 就是这么做的。优秀案例：Vitacost 将评分与评价量结合展示，帮助评估商品的热度。截图展示了两件评分相近的商品，但用户仍可以通过评价量判断哪个更受欢迎。优秀案例：Vitacost 将评分与评价量结合展示在商品列表中。糟糕案例：Ann Taylor 只有星级没有评价量，这就很难区分哪件商品有更多评价更受欢迎。糟糕案例：Ann Taylor 的商品列表中没有在星级旁显示评价量。四、将评分展示在价格附近在商品详情页，产品名称、评分、价格和操作按钮通常放置在页面上部，以确保可见性。在大多数电商网站上，可以在价格信息附近找到评分，通常展示在价格上方和产品名称下方，评价和其他详细信息，如买家秀等在页面更靠下的位置。沃尔玛的商品详情页中就将评分放在价格上方。但是 Costco 则把用户评论放在另一个 tab 下，这可能使用户做决策时无法及时看到评价。优秀案例：沃尔玛将评分直接展示在价格上方。糟糕案例：Costco 把评价放在后面的 tab 中，影响了评价的可见性。糟糕案例：Costco 的商品详情页中，用户评价在后面的 tab 中展示。五、给评价展示区提供快捷跳转方式将星评做成一个快捷入口，引导用户去看完整评价内容。大多数电商网站都用下划线标注评价数量表示可点击态，我见过两种交互形式用以导航至用户评价：跳转至页面下方的模块或打开一个侧边栏。不管是哪一种，在星评增加一个快捷入口，可以提供更简便的操作体验，并提升评价模块的浏览率。优秀案例：Overstock 的星评内容是可点击的，点击跳转至评论区。糟糕案例：Karmaloop 的评价数（查看一条评价）是可点击的，但点击后不是跳转至评论区，而是常见问题，这与入口文案相矛盾。糟糕案例：Karmaloop 商品详情页的星评内容是可点击的，但没有引导至正确的落地页。六、展示评价总览评价总览是对所有评价的总结，汇总了所有优点缺点。它通常位于商品详情页的用户评论的上方。根据我浏览过的网站，这一部分设计形式最多样。一些网站仅展示评分分布，另外一些像沃尔玛这样的店铺，会基于算法显示最有用和最无用的评价。L.L.Bean 则在评论总览下方展示用户尺码准确度反馈。所有成功的评论总览都用清晰的标签简洁地总结了用户评论，并附上链接方便用户了解更多。优秀案例：亚马逊对每件商品展示评价总览。在评分旁边附上了标签方便理解。每个评价标签点选后都可以筛选出相关评价。此外它还拆解出“商品质量”、“易清洁度”等商品特征的评分情况予以展示。优秀案例：亚马逊在商品详情页展示了评价总览。优秀案例：L.L. Bean 在评价总览下方展示用户对商品尺码的反馈。优秀案例：L.L. Bean 在商品详情页的评论总览下方展示了“用户尺码反馈”。糟糕案例：梅西百货对每件商品展示了评分总览并且为方便理解展示了标签，但遗憾的是标签不可点击，阻碍了用户进一步了解评价详情。糟糕案例：梅西百货商品详情页呈现的标签是不可点击的。七、增加针对评价的搜索、筛选、排序功能在商品评价中查找关心的信息可能很困难，特别是当产品的特性和规格很多样时。丝芙兰使用关键词过滤器（如粉底产品的肤质和肤色）轻松查找相关评价。另一方面，阿迪达斯将评价中最常提到的关键词做成筛选器。这样一来用户无需浏览所有评论就可以快速决定产品是否满足他们的需求，从而节约了用户时间提高了决策效率。优秀案例：丝芙兰将关键词（如粉底产品的肤质肤色）做成了评价筛选器。优秀案例：阿迪达斯将评价中最常提到的关键词做成筛选器。糟糕案例：Asos 让用户很难找到自己关注的评价，因为它没有筛选器，而需要通过点击评价总览或自行搜索关键词来查看。糟糕案例：Asos 评论区没有提供便捷的方法找到相关评价。八、展示用户上传的图片和视频专业的产品图片显示了产品在恰当光线下的最佳角度。它们虽然增加了产品的吸引力，但并没有显示产品在真实环境中的尺寸或外观。用户上传的图片和视频则可以呈现商品在真实环境中的样子。比如在美妆和服饰品类上，用户可以看到产品在其他人身上的效果，因为产品模特可能无法代表用户自身的体型、性别或肤色。优秀案例：家得宝的评论区展示了买家秀，以帮助用户更好了解产品在现实中的样子。优秀案例：亚马逊支持用户上传视频评价糟糕案例：宜家不支持用户上传图片和视频，无法展示产品在家中的样子。大部分宜家家具需要一定技巧进行组装，因为不支持图片和视频评价，宜家失去了让其他用户记录组装过程来指导动手能力弱的用户的机会。九、提供评价人相关信息在产品评论中有时很难找到相关信息，特别是当产品的特性和规格非常多的时候。L.L Bean 就展示了评价人相关信息，比如购买商品选项、评价日期、购买地、评价排名和购买认证等信息。优秀案例：L.L.Bean 展示了评价者相关信息，包括他们购买的商品规格、评价日期、购买地点、评价排名和购买认证。优秀案例：L.L.Bean 在用户评价详情中展示评论者相关信息。糟糕案例：耐克既没有展示评价者相关信息，也没有用户名，反而展示的是一串毫无意义的字符串。十、支持针对评价有用度投票和评论支持其他用户或卖家对评价进行投票和评论，可以提升平台评价的可信度。当评价被标记为有用，对于用户来说是来自之前购买者的可信信息输入。优秀案例：Target 支持卖家回复用户评价。卖家可以帮助解释潜在的疑惑，或者跟进问题并提供解决方案。糟糕案例：Anthropologie 不支持标记无用评价，并且也没有回复评价的功能。小结有效地展示用户评论可以帮助用户做出更明智的决策，通过评价获得转化激励，这已被证明会带来正向影响。以上这些建议是基于一些最热门的电商网站和我自身的观察，但需要注意它们不是固定的规则，且只是构建成功电商网站的一小部分。除了这些建议之外，设计优秀的用户评论区还需要基于用户反馈、目标和任务，因为每个网站都有独特的需求和待解决的问题。另外，持续衡量评价功能并不断迭代是很重要的。如果你有其他构建优秀用户评论区的方法，可以评论在下方。更多转化技巧和方法：如何让电商设计转化率更高？5个心理学技巧帮你轻松搞定！编者按：电商设计中如何快速提高转化率？阅读文章 > 转化率翻5倍！资深设计师需要学会的「分层设计」今天为大家带来一个关于到家精选服务下单转化的项目总结。阅读文章 > 欢迎关注作者微信公众号：「TCC翻译情报局」本篇来源：优设网原文地址：https://www.uisdc.com/10-user-evaluation-design
设计师 组件 功能 上期推荐了一波Figma插件，这期分享10个提高效率的实用技巧~提高200%的效率！13个腾讯设计师常用的Figma插件序言咦，同样是用 Figma，为什么同桌小花早早下班，隔壁二狗岁月静好，而你却在 Figma 中焦头烂额？阅读文章 > 一、快捷键面板｜宝典大全相信很多设计师一定看过一些快捷键操作，但是实际操作起来总是让人摸不着头脑。其实 Figma 提供了一个非常方便的功能，按"Ctrl + Shift + ?" 即可打开快捷键面板查看所有快捷键，有锦囊在手再也不用求助他人啦~二、快速填充｜“嘭嘭嘭”地填充多张图片遇到多个占位符的情况，有多少小伙伴还在一张张重复填充内容-选择图片-浏览并选择……在不使用插件的情况下，其实只要按下“Ctrl + Shift + K”选中多张图片或动图，就可以依次填充进去。三、自动布局｜界面布局的魔法想一下平常工作中遇到的高频但低效的场景，例如“做页面时删除一张图片则其它模块都需要微调好麻烦啊”、“过方案想看不同间距的样式但是一个个调整太浪费时间了”，用 Figma 的自动布局功能就可以解决这些问题，通过搭配使用等距排列、自适应变化等，你就可以完成一个调整细节就会自动影响整个界面的魔法。1. 关于自动布局使用键盘快捷键“Shift+A”即可为一个框架或选择的对象添加自动布局，同时，在右侧边栏会新增一块功能区域，你可以在里面控制自动布局框架的流动方式（选择垂直方向或水平方向的布局）、快速调节对象之间的间距。值得一提的是，自动布局非常好用的一点就是可以“套娃”，嵌套自动布局框架可以组合玩出非常多的花样，比如同个画框内同时存在垂直和水平方向的布局方向等。2. 响应式变化固定大小（fixed content）顾名思义就是“敌变我不变”，不跟随容器任何调整而变化，例如表单里面的头像和 icon；但如果是人为“天降大手”去对元素本身进行调整的话，元素依然会变化。适应内容 (hug contents) 用英文更好理解一些，去“拥抱”变化的内部，当内部是一个只能设计师调整尺寸(即固定大小)的容器，那么外部就会跟随内部发生变化。常用于容器内部包含文本段落，那么整个容器都会跟随文本变化而自适应容器大小。填充容器 (fill container)，即“填满”变化的容器，当容器是一个只能设计师操作尺寸(即固定大小)的容器，那么内部元素就会跟随容器发生变化。但值得注意的是，适应内容和填充容器只可选其一。例如表单长度根据昵称长短变化后，就不能再让表单长度去控制内部变化的适应，禁止套娃。3. 绝对位置很多设计师会遇到元素插入到在自动布局中，会按照自动布局关系自动进行排列，很难灵活调整位置，这时候你就可以绝对位置功能，使项目在自动布局中不占空间，自由定位。4. 负间距以前用 Auto Layout 的处理堆叠效果的内容非常复杂，在今年 Config 2022 功能更新后带来了负间距的功能，通过拖拽间距参数为负数即可完成堆叠的效果，效率翻倍！四、组件技巧｜组件库“瘦身”1. 变体当设计师创建组件库时，运用变体来管理组件的多种类型、尺寸、状态等，优化设计系统的层级关系，那么组件库就会极速瘦身，由原来各个形态的样式变为一个。设计师在调用时也可以更加快速地使用变体组件灵活调整为自己所需要的组件，而无需去逐个查阅组件库。2. 布尔属性布尔属性的作用在于够从设计面板中切换组件内部图层的可见性，设计师可以在着在组件中添加可切换可见性的元素，而无需对图层进行修改。设置后，在设计面板上有用于该图层的显示或隐藏的开关。3. 交换实例属性交换实例属性的作用是使用后不再需要深入图层面板，查找图层来交换实例。例如设计师可以从设计面板的属性中直接完成图标替换。五、交互原型｜实现界面可操作性Figma 最值得称赞的功能之一就是它的可交互原型，当所需页面和交互逻辑都排列好后，就可以像连线游戏一样，将页面串联起来，完成一个可上手操作的 app 啦！Figma 贴心地预置了常见操作触点、运动曲线、运动时间等。有了这些，你就不需要再切换不同的设计软件啦。下面给大家介绍原型动画中的一些关键功能。1. 触发器/交互行为触发器用于定义原型从一个框架到另一个框架的交互方式。你可以使用原型选项卡中的 Trigger 下拉列表进行设置。2. 智能动画利用 Figma 内的智能动画，设计师可以轻松地做出丰富的动画效果，例如开关的切换、tab 的平移、选择器的滑动等。简单来说，设计师只需要制作开始帧和结束帧的设计稿，利用触发器将两者串联后，智能动画会帮助设计师补齐过程中发生的动画，你也可以在这个过程中选择合适的动画曲线让你的动画更具表现力。3. 弹性动画Config 2022 的更新中，Figma 为设计师专门提供了在原型转换中的弹性动画。自带物理属性的弹性动画，让你更容易设计出更流畅、更自然的界面原型。六、Figma Tokens｜设计变量管理者推荐一款叫做“Figma Tokens”的插件，其强大之处在于可以通过可视化以及编码的方式创建并管理各种 tokens，且可以在 Token 之间做一些引用关系或是算法，让各个 Token 串联起来，甚至可以一键导出 json 给你的开发同事。下面来具体安利几个非常厉害的小技巧。1. 别名Figma Tokens 里一个非常好用的功能，你可以用这个功能对使用不同 token 名称，但却用了同一个色值的 token 做引用关系。这样，当你改动你的原始色板的时候，其他被引用的 token 都会随之发生变化。2. 使用数学在构建类型比例或间距比例时需要考虑到比例可能是有关联性的。在 Figma tokens 中，你可以引用已有的一个 token，并使用它进行一些数学运算。例如，你希望 borderWith.medium 引用 borderWith.small，但将其值乘以 2。那么，你可以将以下内容写为 token 的值: ({borderWith.small} * 2)。3. 创建渐变 tokenFigma 本身没有办法做到制作渐变色 token 时引用现有的纯色 token。但是在这个插件当中，设计师可以自由度更高的使用多个已有的纯色 token 作为被引用者。七、小组件｜Figma 工作流拓展前阵子 Figma 更新了一个小功能，FigmaWidgets，说是小功能，但其实一点也不小。利用小组件，你可以在 Figma 内做到很多之前意想不到的事情，比如上传 pdf，添加录音，计时器等等，而且是属于开放式的，所有人都可以参与到小组件的创作并上传至社区，想必不远的未来，这一功能一定会大放异彩。比如近期很火的一直跟随在画面中心的像素小人，或许你可以用它来搭建一个像素风的小游戏。使用小组件进行表态和投票。在 figma 内上传 pdf 等等等等。八、历史版本｜创作时间轴回溯不知道你是否也遇到过这样的问题，当你发现误删了某些元素，一直按“Ctrl + Z”也无法回退，其实你不必重新再做一遍这个元素，你只需要打开历史版本，找到存在该元素的版本，从该版本中复制这个元素回来就 OK 啦。九、FigJam｜灵感爆发集合地ios16 上新了共同编辑备忘录，而 Figma 早早就提供了一个丰富的协作编辑功能：FigJam。使用 FigJam 可以和你需要和你沟通的产品同学快速进行线上沟通，可以使用便利贴快捷记录下你们的灵感，并用一个大大的贴纸表示你对他的想法的赞同，更有非常多丰富的互动玩法，快快去发掘吧。十、Spotlight｜聚焦所有人视线问：设计师在阐述需求的时候，如何聚拢所有人的目光？秘诀就在你头像的下方的“Spotlight”按钮，点击后，可聚焦所有处于当前界面用户的视线跟随你移动。你在设计中是否也遇到过一些提效妙招呢？欢迎在评论区分享给我们，大家一起成为高效的设计师吧！2020年，一定要试试这 17 款超给力的 Figma 插件在世界范围内，Figma 已经作为主流的原型和数字设计软件而存在，和 Adobe XD 和 Sketch 相比，Figma 作为在线工具，有着更强的实时协同功能。阅读文章 > 全是高频神器！B端设计师常用的 7 款 Figma 插件最近打开 Figma，点击我的插件，发现我已经安装了这么多插件...我究竟要用哪一个插件？阅读文章 > 欢迎关注作者微信公众号：「腾讯设计族」本篇来源：优设网原文地址：https://www.uisdc.com/10-figma-skills
动态 用户 的是 好奇心总在驱使着人类进步，从二维到五维空间，从登陆月球到地球以外 930 亿光年的宇宙空间探索，人类的进步永不止步。如今在互联网技术的高速发展下，用户的审美、诉求都在不断提高，同时反向推动设计的进步。近些年，你会发现，更多的设计“动了起来”。今天就带大家来了解一下「动态平面设计」。关于动态设计趋势：腾讯出品！2021-2022设计趋势报告：动态篇前言动态设计（Motion Design）有助于创建令人愉悦且直观的用户界面。阅读文章 > 一、动态平面设计是什么？「动态设计是基于一定的静态基本视觉元素，通过动画软件将其再设计成一种特定时间内，会发生运动和变化的图形结果。」当然在交互设计中，动态平面设计也与界面设计有所交集，被称之为界面动效，这次我们讨论的范围包含了界面之外的应用场景。对于设计师而言，需要去学习及拥抱这一趋势。二、作用1. 提高连贯性让界面元素在用户流程中顺畅地转变与过渡，将用户操作导向期望的任务结果。连续性的动作有助于引导用户完成任务2. 链接场景在转换场景的过程中扮演润滑剂的角色，阐明场景之间的位置、层级与空间的关系。3. 视觉吸引聚焦用户视线，将其注意力放在重要的事情上，从而起到信息传达、提升识别度的作用。三、优势相较于静态平面，更具有感染力，通过增加「删除线」「眼睛的偏移位置」「伸手动作」来强化海报“不要”的情绪。增加动态区域后：设计创意来自@小红书 HE毛蛋与静态平面不同的是，动态平面可在一定时间内给予用户一定的沉浸体验。静态平面也能给予用户沉浸体验，但多数为多张图去表达含义，大家最熟悉的莫过于漫画，或是一些影视作品的分镜，从而达到用户置身于故事情节内的体验目的。动态平面更多的是让用户参与到一种交流活动中，用户可以以自己的选择去导向一种结果，更趋向于一种简单的 RPG（角色扮演）游戏。动起来后的趣味性，也是吸引用户并且加深记忆点的方式，点击按钮的动作对比与方言的结合，使得海报宣传更加生动且亲切，容易增加用户的代入感。创意来自@小红书 HE毛蛋四、类型1. 混合媒体/动画拼贴动画拼贴总给人一种复古 vibe，如同像素风格，拉回到旧时光。「We the people」是由 Netflix 网飞推出的动画，以定格、拼贴、字体等多种艺术形式，讲述了美国的立法史。@Netflix2. 动态字体动态字体通过变形与音乐相结合，可表达字体的性格，或灵动活泼，或成熟稳重。如果是作为品牌的宣传，也能起到展示品牌调性的意图。喜茶联合方正字体所推出的专属字体，在字体斜笔和勾画的弯曲幅度上进行了微调，曲率更克制平滑，使得字体更简洁、年轻态并多了一份亲和力。超实用！设计师必看的5个可变字体资源网站大家好~ 这里是被大暴雨吵得没睡好的花生，当然这并不耽误我和大家继续聊设计。阅读文章 > @喜茶 x 方正字库3. 故障效果故障错位感给人一种身临全数字化氛围中，特别是赛博朋克的影响，给人一种未来感，在科技进步的同时，又有一定的失序感。4. 复古怀旧复古怀旧把人们拉回到文艺复兴时期，用旧物搭配上现代的梗致敬经典。5. 变形变形使动画的转场更有趣且多层次。6. 液体动态液体在光线折射下能使物体产生形变，这种动态形式运用到动态平面中，产生一种独特风格。五、应用范围1. 海报、自媒体等厦门磐基名品中心 The Little 的开业动态海报，结合了「儿童好物」这一主题，使用的图形均以简单的几何形态勾勒出可爱童趣的一面。通过箱子拟人、几何形状的变形及音乐配合达到多元、有趣的表现形式。@地心引力品牌设计通过对平面的「转场」「叠加」「快速切换」等，让用户大致了解其设计风格，适合运用至品牌宣传、个人风格表现等。@by Design style对于突出个性风格越发显著的自媒体时代，每个公众号都想要阅读量 10w+文章，排版设计风格已成重要的辅助。通过采访者相关元素提取到设计排版中，纸板箱印刷字、夜市塑料凳增添了「街头采访」的意味，产生一种轻松随意的交流氛围。@by「设计便利店」公众号2. 品牌 logo① airbnb「airbnb」由 4 个 icon 结合而成，提取了 4 种含义创造出这个新 logo：以人为本，所有的功能都应基于用户痛点出发，以用户使用的满意度为情绪素材；其次由产品所到目的地的 icon 作为创作元素；整个旅程是愉悦的感受，路途中也充满着惊喜，爱也是人文关怀精神的体现；取自 airbnb 首字母「A」。四种图形的融合，成为 airbnb 的 logo。通过动态形式，描述「我们是干什么的」。动态 logo 由小场景到大场景切换，并最终回归到 logo 本身，表达「我们能够定到任何形式的民宿」。弹性圆润的线条给人一种轻松愉悦感，与度假的心情相得益彰。与此同时，品牌表达出能给予用户多种品类选择的含义。@airbnb② Meta（Facebook）品牌 logo 改版也可以通过动态形式表达。去年 Facebook 改名为 Meta。logo 也随之改版，通过一张动态图能清楚知道，扎克伯格希望 Meta 是多种媒体媒介和技术的集成。他表示 Facebook 名字不能包含集团的一切，「元宇宙」概念是以 VR 和 AR 技术构建的超级虚拟世界，在此空间中人们可以开虚拟会议室进行工作、社交和玩游戏，它打破了物理空间的局限性。有很多人将新 logo 解读为「无限」的符号，象征着「元宇宙」中的无限视野。这说对了一半，这里觉得更多的是借鉴了「莫比乌斯带」的概念。「莫比乌斯带」与普通纸带具有两个面（双侧曲面）不同，它只有一个面（单侧曲面），因此它就有了可「无限」运动的意义。莫比乌斯带Meta 的动态 logo 使我们看到了从 2D 转换为 3D 的视角。起先是平面圆环，后来扭曲 180 度，形成 3D 状态，动态的优势是让视觉看见了空间。3. 网页交互网页也是动态效果最常见的地方，特别是品牌类网站。动态交互首先为了提升品牌影响力与调性，再来网站也是用户体验的最直接接触方式，可能产品实物还未见到，网站即变成了初见面的第一印象。@苹果官网对于工具软件型网站来说，动态平面更便于用户去了解产品功能及用途，并给予网站赋予趣味性。@Figma 官网一些纯视觉的动态交互，适合用在个人主页、展会等宣传。上图为鼠标拖动的交互上图为菜单的交互4. 商业广告动态设计商业广告方面也不容小觑。蕉内以圆形、矩形、多边形及圆角矩形为基本元素，象征产品多样性，通过字符的不断变换及延展，让新用户首先了解到其品牌类别（服饰类），再到之后呈现形象人物，并用品牌色点缀身体部位，表示品牌做的是关于内衣的产品。@蕉内diptyque 新产品北京城市限定 PEKIN 宣传片由 PARALLEL STUDIO 制作，比较特别的是全动画的视觉效果，樱花、宫廷与龙的元素穿插其中，优雅且有历史底蕴，契合北京城市限定主题。@diptyque5. 会展宣传2020 台湾设计展主视觉形象由台湾知名设计工作室卵形设计的负责人叶忠宜操刀，以主题「Check in 新竹--人来风」为核心概念，使用「风」「wifi」「竹」「网络」「方向」等概念，提取几何图形符号来诠释「一位客人到达新竹的旅程」生动的动态感。「风」，边界由圆润到尖锐，并以转动的动态形式幻化成新竹兽，网格的拓展让画面更具有延展性，旋起「人来风」。「wifi」，用信号的图标，体现信息的传递与扩散，也是贯穿这一动态主题的媒介之一。「竹」，字体简化成箭头图形，并作为「去往新竹」的方向指引，存在于画面中并可扩大至各种设施应用的指示图形中。2020 台湾设计展 logo 动态第 59 届 2022 金马奖主视觉设计由刘耕名担任视觉统筹，并携手 Bito 设计团队打造。其动态视觉海报在平面状态时，被分为正视图与侧视图，而在 3D 动效海报中，将「59」字型构成金马图腾，通过 90 度翻转时，则变换形态为「金马」两字。「金马」两字以幕后工作人员避免光线反射的黑色服装为底色，呈现喷漆颜料水渍、定位胶带的标记、剧场器材间的磨损刮痕，各种记号形成交错的痕迹。这也体现了他们在幕后兢兢业业地付出，克服无数困难的勇气。“金马 59” 主视觉横版及竖版6. NFT 相关伴随着数字艺术近年来的兴起，很多平面设计大师也开始驻足于此，对于普通数字爱好者来说，也能将自己的创作品发布于 OpenSea（海外）或是国内部分 NFT 平台（NFT 中国等）进行交易。OpenSea 官网《Vogue Taiwan》以「Formosa Love（福尔摩沙之爱）」和「一座岛屿的可能性」为题，邀请平面设计师聂永真打造 2021 年 7 月号的特别版封面。聂永真这幅封面作品以 30 以太币、92,029.20 美金（约人民币 60 万）成交。后续聂永真受台湾地区微风集团的邀请为他们打造了 502 枚 NFT。本系列 NFT 共推出 502 枚，除了 2 枚为特别版，由微风及设计师聂永真分别拥有外，其余 500 枚又以 75%、20%、5%的比例被分为三个等级。以上设计作品版权归品牌和作者所有，更多内容请移步官网 https://www.breezeverse.io/#mint欢迎关注作者微信公众号：「Gtech UED」本篇来源：优设网原文地址：https://www.uisdc.com/dynamic-graphic-design
原型 区域 驾驶员 设计师都知道根据《苹果 iPhone 人机界面设计指南》，手机 UI 的最小点击区域是 44px。但汽车 HMI 的最小点击区域业内却没有定论。考虑到汽车驾驶关系交通安全，点击区域大小与反应时间极为重要。文章的作者 Casper Kessels（德国 Snapp 汽车软件公司设计总监）通过 Figma 制作原型在实车上进行测试，得出了汽车 HMI 最小点击区域的结论。本文译自：https://medium.com/snapp-automotive原文作者：Casper Kessels（德国 Snapp 汽车软件公司设计总监）往期HMI干货：总监出品！车载语音助手设计指南现在的汽车就像智能手机一样有丰富的功能，我们可以在车上导航、听音乐、看视频甚至订酒店。阅读文章 > 我们相信汽车消费软件可以做得更好。因此，我们一直在开发基于 Android Automotive 的信息娱乐系统。期望看到可用性的改进。与物理控制器相比，触摸屏没有材质和位置变化之类的反馈触感。驾驶员必须将视线从路面上转移到屏幕上，以便用手指对准屏幕。而且必须在没有错误的情况下，在尽可能短的时间内完成，避免分心造成交通事故。触控区域的大小是优化这一点的关键。这就是为什么我们进行实验来确定最小触摸区域，这将成为我们设计的基础。一、测试环境我们在 Figma 里创建了 4 个原型，按钮大小分别为 60px、80px、100px 和 120px。物理尺寸分别对应 11 毫米、15 毫米、20 毫米和 23 毫米。4 个原型为了确保结果准确，我们决定在真实道路驾驶来进行测试。汽车的车速等情况对按钮大小也有影响。我们决定把 iPad 放在真车的 HMI 上。当然，在繁忙的城市驾驶时，让驾驶员与原型机进行交互可能会产生交通事故。所以我们把 iPad 放在中间，副驾驶和驾驶员与 iPad 距离一样。然后，注：驾驶员专注于开车，由副驾驶代替驾驶员，与 iPad 上原型进行交互实验。由副驾驶与原型交互，请注意安全驾驶，遵守交通规则。二、测试结果在柏林的不同路面上驾驶之后，我们得出了以下结论：在一定程度上，增加触控区域会产生更好的效果。60px 和 80px 的原型有明显的区别，可以看看 60px 原型的效果：60px 的原型。由副驾驶与原型交互，请注意安全驾驶，遵守交通规则。与 80px 的原型相比，60px 的表现要差得多：80px 的原型，由副驾驶与原型交互，请注意安全驾驶，遵守交通规则。80px 和 100px 之间的差异较小，但并非微不足道。100px 的原型，由副驾驶与原型交互，请注意安全驾驶，遵守交通规则。然而，最大的触控区域并没有产生比 100px 更好的效果。如果一个 100px 的按钮很难点击，那么在 120px 也同样困难。请看下面的极端例子。120px 的原型，由副驾驶与原型交互，请注意安全驾驶，遵守交通规则。我们开车在城市里转了一圈，亲自感受了一下不同之处，最后得出了这样的结果。在理想的情况下，我们应该测量驾驶员的注意力分散指标，比如离开道路的时间等等。幸运的是，已经有许多相关科学实验得出对应结论了。有趣的是，我们的研究结果与汽车界面和其他相关应用领域的学术研究结果也相符。这些结论也表明，随着触摸区域的增大，改善程度也会减弱。结论在实验之后，我们将最小触控区域设置为 80px。HMI 中的每个可交互元素都至少为 80px。对于更高频的交互，我们将最小触控区域定义为 100px。比如，跳过一首歌，或改变空调温度。我们目前正在开发一个高保真的 Android Automotive 原型，来验证这些设计决策。此外，我们正在测试其他使汽车触摸界面更安全的手势，比如滑块和其他可交互元素。我们将继续在这个博客分享我们学到的新知识，敬请期待！本篇来源：优设网原文地址：https://www.uisdc.com/hmi-touch-areas
产品 互联网 客户 1994 年，中国正式接入因特网。将近 30 年的时间，学界普遍认为，经历了三个特征性的阶段。第一阶段“建立信息获取”，互联网作为新兴媒介得到关注，门户类网站和搜索兴起，进入互联网的入口相对集中，信息从“被动接收”到“主动发掘”逐步转化。第二阶段“建立信息传播”，人因属性进一步加强，人人皆可创造信息，以人为主体的信息链传播出现，刺激表达自我和沟通情感。流动的信息、社交化网络成为主流。第三阶段“健全信息场景”，极大的用户量，催生了一系列的网络服务和商业机会，互联网产品变得更加的具体化和场景化。与此同时，移动互联网爆发，4G 技术的成熟，信息的流通进入个人生活的方方面面。互联网的发展从最初的“集中式单向信息分发”到现在的“基于场景化的信息服务“，围绕的始终是“人”这个主体。疫情场景之下，社会生产条件发生了更多微妙的变化。除个人生活消费需求持续得到满足，“线上办公、线上管理”的企业信息服务需求，也成为不可忽视的存在。此类需求以企业团队为使用的主体，呈现强的群体办公协作性，填补上因疫情难以开展的线下工作模式，再次激活了各类产业对于互联网融入的期待。在更早的时候，互联网呈现出的创造能力已经默默牵动着传统产业的变革。各个产业领域积极探索融合可能性，例如在生产、流通、交易过程的效率提升，平台性资源的整合统筹， 洞察新的业务风口和营收模式等等，确实带来过成功的案例。同时，变革也伴随着未知的风险，成本激增让传统企业变得格外谨慎。产业互联网不会是一蹴而就，它依赖很多基础条件的建设，也依赖人们对互联网价值的正确认知。产业互联网不是简单加入互联网的数字化，信息化技术，它不止于在原来的基础上去增加因素，而是从底层逻辑去重塑产业模式。产业互联网也不仅是为互联网企业去扩展范畴，而应是以互联网技术和精神去深化产业的发展方向，以虚心学习的姿态去服务和解决产业的难点，带来真实有效的价值，助力于产业的良性成长。消费互联网（C 端）和产业互联网（B 端），在场景、角色、需求上都存在巨大差异。C 端产品的成功经验，更容易让我们陷入盲目自信，把对“个人用户”的理解方式简单映射到对“企业客户”的理解上。虽然产品服务对象最终仍是落到“人”这个个体，但强烈的专业属性，多环节多角色群体协作性，商业经营特性等，都将导致在“客户采用决策”和“服务体验感受”等基础因素的理解上有着巨大的不同。我们也走过弯路，甚至一度沮丧，质疑设计在整个 B 端产品中存在的价值。作为跟随大趋势转型中的设计者，我们持续思考着这个新课题，也从中慢慢看到巨大的机遇。作为探索 B 端的设计者，我们需要做好一些储备。更多B端设计干货：B端设计师如何体系化了解业务？4个步骤快速搞定！前言接触 B 端设计的小伙伴会发现，很多业务具有角色多，业务场景复杂，功能链路长等特点，所以在工作中会经常遇到以下几个问题： 突然被调配到新业务，拿到一个不熟悉的业务或者新产品，不知如何开展工作？阅读文章 > 一、理解商业运作“商业产品”是向特定客户群体提供能力服务，实现商业盈利的产品。本身具备“使用属性”和“商业属性”。C 端互联网产品服务于个人，使用者具有高的支配权和决策权。在获取成本极低且免费的产品占绝大多数的环境之下，“使用属性”是被提及的第一要素。“产品体验”作为使用的增强剂一直是 C 端产品制胜的法宝，优秀的视觉效果让用户一见钟情，有效有趣的交互模式让用户不亦乐乎，加上对人性欲望的深刻洞察使产品功能变得极具“诱惑力”，最终独占用户尽可能多的投入时间，在用户停留的过程中去实现“商业属性”的变现。B 端盈利目的更加直接，“商业属性”成为关注的第一要素。产品使用者和购买决策者通常为不同的人群，决策者从经营利益出发，思考的是购买成本、运营成本和最大化利己的交换条件。不同决策者因政策环境、行业属性和心态等的不同，需要灵活的与之沟通的手段，厂商的“销售服务”能力是核心。另外，经典商业场景中，货源和客户是极难对应上的，“销售服务”承担起把信息的不对称打通，带来直接盈利转化。销售专员既要深度了解产品的全部能力，又需要掌握错综复杂的社会人脉网络和需求，特别是在重要的 KA 客户层面，优秀的客情关系能极大的助力赢单。在任何产品稀缺，获取困难，单价昂贵，但客户又有明确购买需求的环境下，能连接一切，促成交易的沟通能力必然是非常重要的。所以，在 B 端产品的生命周期中，销售环节传递出的建议往往是产品改善的重要指导方向。二、了解环境变化互联网对传统产业的影响，同样影响着互联网企业对 B 端产品的建设思路，从 AWS、阿里等同质云厂商的发展历程看，平台化机制将越来越深刻的影响 B 端产品的售卖策略。销售专员服务仍然会是商业运作不可或缺的重要一环，为保证健康的客情维系，甚至会孵化出“客户成功”的专业技术部门。在接下来长远的时间里，B 端产品仍需要通过销售专员来连接 KA 客户“人”的情感（产品价值感、服务品质、尊贵身份象征、业务需求满足等），大额商品的购买决策，不会只是一次付费的行为。同时，平台将会分担更多非 KA 客户的销售职能，改变现有销售侧重。首先，平台化后，产品更容易被全面对比。当变得触手可及，有更多的厂商提供到类似的产品能力和服务时，客户的心理就会从“我好像只能选用你“变成“我为什么选用你”。客户在选择产品的时候可考虑的因素变得丰富，这个时候“试用模式”被广泛启用，产品的核心能力需要凸显，“使用属性”中“产品体验”的价值也将有所提升，以作为“销售服务”有利的支撑。我们甚至可以看到 PLG 的形式得到强化，也侧面说明，使用者参与决策，影响决策者购买选择的趋势在加强。和 C 端一样，人性将再次成为产品构建考虑的因素之一；但与 C 端讲究“感官享受”不同，B 端的体验设计一定是以“效率（更好、更快、更省心）”为第一位。“效率”需要层次感的设计，让使用者少想一点，让机器多想一点。本质上工作是令自然人没那么开心的事情，更快的完成任务特别是重复式任务，一定是 B 端产品要解决的基础问题。其次，平台化势必造就标准化。在产品构建初期，由于对行业市场的不了解，以及对于赢单的渴望，产品往往呈现割裂堆叠、体验精分的状态，看似什么都有但都不行。从我们曾主导过的“3D 可视化”案例看，最初觉得“客户根本不懂要什么，我们有能力引导”到懂得“客户也专业，还是出资方，需求尽量满足”，再到思考“客户需求有通用性，能达成标准交付”，再到发现“每个客户觉得他说的才是标准化，我们定义的标准难以成为标准”的一系列过程。没能抓住行业需求核心，让销售、产品和设计一直处于凌乱中。一千个人眼中有一千个哈姆雷特。平台化将让产品的客户触达面更广，意味着我们在经历前期洗礼后，必须明确基本功能和优势卖点，尽快建立产品的标准化和套餐化（可订阅可扩展），过滤客户的冗余需求，好产品绝非万能。同时需要建立更高效的销售和运维的弱参与模式，缓解指数级增长的客户服务；也需要构建起设计组件的标准化，系列产品体验的一致化，以减少产品快速搭建过程的时间消耗和客户使用过程的认知疑惑。再者，定制化的需求也永远不会消失。第二次工业革命，商品的工业化取代了传统的手工艺体系，以包豪斯为代表的现代设计思潮开始关注新型生产力带来的社会变革。工业革命让更多平民能使用上商品，所以如何在提高生产效率的同时带来商品品质提升成为包豪斯在近现代史上不可磨灭的贡献。目前从事 B 端设计，致力于改善传统产业办公效率的同学们，何尝不是类似的先驱呢。但是，工业化生产并不能消灭定制化的需求，这种定制化远不止是为了达成“差异化”。定制化是建立在有效标准化的基础上。《王牌特工》里主角在萨维尔街 H Huntsman & Sons 定制西装，这家店在 1846 年营业至今，比第二次工业革命（19 世纪末）还要古老。劳斯莱斯仍是以“纯手工，定制化打造”为荣，依照客户的合理需求打造专属而尊贵的产品。投入价值是为了得到更广的价值。有人可能觉得 B 端企业级产品不可能达到这样的价值高度，我的理解是互联网还太年轻，我们把定制服务的价值想得太简单。最后，人对信息处理的演化也是设计需要思考的因素，关于“信息过载”和“体验的代际差异”。21 世纪是信息量暴增的时代。以安全产品为例，10 年前的全局防御系统只相当于现在海量安全系统的一小块。攻防对抗升级，渗透形式多样性导致防御手段的多样性，从被动防御到主动防御再到动态防御，同时带来的就是防御平台的精细化。一个企业需要大量产品来应对不同的威胁，而安全运维的人力可能并没有上涨。“信息过载”导致效率低下，B 端产品“信息聚合”“信息可视化”设计是必然的趋势，但现状的可视只是第一步，第二步是信息的倾向，第三步则涉及应对的机制。深入了解使用场景，综合视角，克制功能铺张将是 B 端产品设计的趋势。“体验的代际差异”是指，伴随人们高频使用互联网产品，体验阈值被不断提高。正如电视控制组件，从黑白电视的旋钮开关，到彩电的多功能遥控器，再到互联网电视的简约功能遥控，人与设备的交互方式，基于技术变革产生了演化。如今 B 端产品的使用者也都在使用着安卓系统、苹果系统，他们与 10 年前对产品“可用”的理解有着巨大的变化。当有功能类似、体验更优秀（操作清晰，简单高效）的同类产品出现，即使迁移有成本，也会比以往更具更换的决心。三、全链路视角在 B 端“商业属性”优先的策略下，中短期内“重渠道建设”、“产品功能快速应标”等成为主要的目的，设计远离客户（设计者对行业了解深度不足）。这个客观限制条件之下，控制台的体验打磨很难执行，“经典 UI”设计能输出的价值有限。幸运的是设计陪伴产品经历过一个重要的时刻，让我们意识到在 B 端可能的发展模式。C 端向 B 端转型时业务遇到巨大的不确定性。B 端安全产品对企业系统和网络技术的理解要求高，对行业市场的了解也还存在较多盲区，紧接着一年的时间，尝试多种方向，产品需尽快找到赛道。“产品死，设计也得死”是相当长时间悬在头上的“达摩克利斯之剑”，我们需要为业务生存主动去思考一些事情。设计能做点什么？要不我们协助做“市场研究”？以产品较坚定想探索的某一个方向出发，从主要市场玩家的“基本面分析：国内外发展历程、营收现状、经营杠杆...”到“产品分析：产品线矩阵关系、核心竞争点、收购的战略意图...”，再到“市场分析：市场策略、客户构成、收入结构和留存、渠道分析...”。我们查阅 Gartner/IDC 等行业安全报告、头部产品白皮书和能收罗到的各类财报和新闻，加入设计团队的理解整合成多份报告，辅助产品同事在更完善的情报支撑下做出了关键决策。多次主动贡献的价值得到产品侧的高度认可。此刻，设计者也意识到 B 端设计需要跳出“经典 UI”视角，为更完整的链路视角做好服务。而后，我们主动学习 B 端产品生态全链路包含了哪些环节。我们了解了公/私有云的销售模式，感受销售专员在“收入压力”之下的难处和渴求；了解售中签单的流程转化，让我们更加尊重构建辅助系统的项目专家默默的付出；了解了私有化部署交付过程中的痛点，各类接口的不统一和业务数据与安全数据混建的纠结；了解了售后运维用血汗堆建服务口碑，懂得不负责任的承诺和不靠谱的产品质量带来的惨痛教训。我们也看到在为“腾讯企业安全”大品牌对外发声，战略部、市场部和公关部同事一次次用心的策划。B 端确实是团战模式，从客户的“获取、激活、留存、收入转化到口碑推荐”，各类角色在产品生命周期不同阶段中会有侧重的演绎。以“尽力做好服务”为初衷，“经典 UI”无法企及的广大领域里，还存在多少设计者能去设计增值的地方？自研产品三年时间，从几个到二三十个的发展。设计团队以腾讯云 UI 规范为底座，填充安全 UI 组件。快速学习企业安全领域知识，配合技术型产品、销售型产品同事构建和迭代安全平台。与此同时，我们给自己下了“助力销售”的要求。首先，我们发现安全业务理解的抽象和复杂性，使销售专员难以短时间学习并有效告知客户。于是，我们凭借对业务场景的理解，把部分核心产品通过“短视频”的方式做输出，从销售同事反馈看确实有效。主要规范了两类视频：产品标签视频：从企业获得价值入手，讲该安全产品可以带来什么，目标是客户的决策层。产品功能视频：讲述功能的使用流程，协助客户（相对阅读文档）更快上手，放入控制台的教程体系，目标是客户的运维人员。然后，我们发现代表腾讯产品官方形象的白皮书由于撰写粗糙客户阅读困难，与产品经理、销售专员一起就内容构成、视觉设计和品牌性做了“最佳实践”，实际推动了大量白皮书升级，使有效性和品质提升。也因此得到安全文档建设团队认可，投入到更多类型的文档优化工作中。我们也积极参与到从“商机”到“交付”管理的效能优化系统建设中，在项目管理专家的指导下为销售专员和售后运维同事提供使用更顺手的管理平台。最后，我们必然也有在公有云控制台的“销售转化”上展开研究。“体验不好”是去年经常被客户点名投诉的问题。每被提及，深知我们在 B 端设计资历尚浅，先送上膝盖再跟进原因。实话说，心里是有窃喜的，“体验”问题终于能得到关注。通过工单分析、客户深访和销售专员转述，我们了解到，除确实存在的“引导不足”“流程不畅”等设计问题外，客户表达的也包含对“产品与竞品对比存在能力缺失”、“售后跟进问题处理不及时”、“定制化服务没做到位”、“业务场景化理解有偏差”等多方面问题。原来 B 端企业客户（含购买决策者）理解的“体验”和 C 端使用者理解的“体验”完全不在一个层面。客户反馈是获知产品整体评价的重要形式，“体验”问题涉及产品中多种角色工作范畴，单一角色优化输出难以改变整体产品评价。我们开始在思考是否可以为每种角色找到评定“工作效果”的可测指标，即建立“全链路的度量体系”。我们坚持“度量”不应该做为产品间“客户口碑”的考核，而是检验产品中各环节角色在单个产品的当前生命周期阶段中的职责完善度，以期改善各角色的服务效果（品质），提升客户满意，提高产品整体的品质。我们学习了“ISO25010”、“ISO9126”，头部产商“UES”、“KEI”等，其他垂类“PLUSE”、“HEART”等 14 家企业组织的度量模型，结合腾讯安全现状，最终产出了四个方面的工作。第一，结合之前对产品生态全链路的理解，找到环节中代表性角色，通过多次访谈，以环节角色意见为主，协助梳理出可评价的主观指标和客观指标。比如我们配合“售后服务”“文档建设”构建指标，也建立了“设计效果”评测指标，也尝试促成“产品能力”指标建设（之后，由战略部同事引导建成的“卓越产品”内生指标和外生指标更具科学性）。第二，针对各类角色关注的有效指标，抽取可形成主观性评价的条目，丰富和完善设计原先在做的“产品满意度”系统，使满意度从对“设计”和“功能”的评价扩展到全链路，并且可以针对产品生命周期的不同，选择侧重需要关注的环节进行深度测试。第三，安全线提出“卓越产品”目标后，在核心层领导的大力支持下，构建了满意度“双星”体系，以“宏观满意度”和“微观满意度”两个视角持续赋能产品优化建设，作为外生指标的重要结论性观测指标。“双星”相辅相成，既实现了短期数据变动可视，又实现了关键节点可深挖下钻发掘问题。第四，客户评价属于置后行为，在产品发布之前，需要内部各环节做好质量评测。设计正在构建一套带有安全属性并符合影响满意度关键因素的自检系统，以期提升出品质量。产品（狭义）不是设计的全部，连接产品和客户的服务纽带上存在无数的体验触点，设计者应从中立观望走向和解与学习。从“全链路视角”看，设计能输出的贡献远不止如此，任重而道远。四、回归体验设计“市场研究”、“助力销售”和“度量体系”等工作始终是在主动探索着 B 端设计的边界，此类建设需要在良好信任的基础下，长期进行经营。回归本职，即使大环境上有所限制，作为设计者也无需过于感伤，“戴着脚镣的舞者”同样有机会展现出色的舞姿。在如何做 B 端更好的体验设计上我们不断在尝试。“可视化设计”在 B 端有巨大价值。C 端转型 B 端的早期，曾有前辈敏锐洞察，B 端产品的数据复杂程度远高于 C 端，复杂产品比简单产品在信息的传递上要艰难得多，所以数据需要经过再加工，如果数据信息呈现出时间和空间的属性，那么 3D 可视化或许是不错的解法。之后，我们利用 3D 技术承接到一些企业项目。一方面是以业务场景实例，学习数据可视化中各类信息图的使用规则；一方面也通过项目，努力去了解企业管理视角下对业务的关注核心。这段探索时期对后续的 B 端设计起到了一定指引作用。例如在 B 端安全产品（SOC 安全运营中心）控制台的设计中，我们策划了“态势感知”页面，把多源复杂日志数据做了流向归类，按照攻击链路阶段“配置、扫描、投递、植入”等步骤做了信息可视的推演。在“AI 智能检测”的功能上，产品允许客户自定义规则和脚本，但书写脚本需要极高的专业能力和巨大的编程工作量，在参考了 Scratch 类积木化编程和 Unreal（虚幻）的图形化编程方式后，我们协助产品设计了简单有效的“可视”编辑方式。让日常安全运维的数据和功能操作更直观，较好满足了工作人员的效率需求。我们也从决策者的视角出发，构建出符合其阅读习惯和关注重心的可视化大屏。以更宏观的数据面来展现业务的安全现状，从“漏洞”、“告警”、“内外部攻击”等关键场景去剖析造成现状的因素，让决策者可以快速的掌控形势，制定未来安全的部署策略。在“数据可视化”、“操作可视化”、“流程可视化”的研究过程中，我们仍处在非常稚嫩的阶段，去年参与了 ChinaVis 大会，接触到更多领域内专家学者的深度研究，十分欣喜，持续保持着探索和学习。“可视化设计”是 B 端的特色，“用户多样性”也是一个显著的特征。B 端产品，即使划分出了“使用者”和“决策者”也依然很难达成有效的设计，在我们从事的安全领域，“使用者”更是面目模糊。当前问题，很大程度是出于对使用者这个定义的抽象化，即使是有丰富经验的 B 端产品经理和销售专员加盟，也由于宏观抽象了使用者后，把多类不同使用需求杂糅到了一起，变得难以精准分析哪些需求是真，哪些需求是伪。针对不同使用者的使用场景下，需求可能都为真。设计同样遇到这样的问题，对于使用者我们的理解更加遥远，难以带入同理心和认知体系，最终沦为需求的执行工具。我们曾在一个产品的满意度里洞察到神奇的现象，设计做的越深入则客户满意度越低，暴露出的问题并非说明设计的无用，而很可能是设计方向出了问题。侧面可看出，定位功能时对于使用者的理解存在巨大偏差。“客户精准画像”是我们在投入建设的重点工作。举例，我们会发现某一个安全产品使用者可以分为“内容审核员”、“质检员”、“供应商管理员”，而另外一个安全产品则分为“IT 运维人员”、“安全技术员”、“安全专家”和“IT 管理者”。他们是各自平台的共同使用者，但在使用平台功能时存在不同的侧重。最初他们都被归属在“使用者”这个标签之下，只认为是单一性质角色在不同场景下的需求切换。设计来源于对生活的细致观察。我们需要从客户角度出发，梳理出功能和角色的对应，针对他们的知识程度、工作性质和使用心态等去设计深浅不一，复杂度各异的使用方式，而绝非为了体现产品的专业度一味去加深专业属性的呈现。同一个产品，在不同客户环境下，由于使用者的属性差异（哪怕只有一个使用者，也会有明确的角色标签）提出的问题总是千奇百怪的，当我们逐步去解析使用者，沉淀出各类角色的共性和差异，明确各种功能服务的目的，才可能真正明白，我们到底在为什么人提供服务，应该提供什么程度的服务，实际的服务效果又是如何。B 端产品的复杂性，让“引导体系”建设变得尤为重要。通过画像研究，我们会发现多数产品使用者专业程度并非很高。面对一个不熟悉的复杂系统，当出现使用问题时只有两种处理路径：“自助”或“求助”。B 端往往是付费产品，找“售后”提供人工服务是客户的习惯性选择，但随着平台化普及，公有云产品逐渐成为主流，大量使用者的涌入会使咨询服务的工作量激增。那么，考虑到成本和效率，还是让客户尝试着自己能解决问题吧。在这个事情上，我们除了优化流程减少使用者学习成本，也制定了“引导体系”（最优秀的产品无需引导，在 B 端产品上我们仍需持续努力）。首先，我们充分体验了国内外几家云服务先行者的产品，根据产品的生命周期推导出使用者在“引导体系”中的三个阶段，分别是“1 新手期”、“2 使用期”和“3 迭代期”。① 新手期（解惑）我们提供一种快速开通的引导能力，例如“新手任务”或“虚拟教学”，遵循开箱即用的逻辑，以最小代价协助使用者进入系统了解核心流程和核心能力。② 使用期（辅助）又再细分出三个子阶段“使用前”、“使用中”和“使用后”，“使用前”结合上文提及的“产品功能视频”等手段快速讲解复杂功能的使用方式；“使用中”则进一步在使用者进入编辑状态后适当牵引录入（部分安全产品需要同时在几个控制台联调），并做好各类异常录入提醒；“使用后”是提供一种更持久的可供查阅的方式，例如“知识文档库”、“在线客服系统（需要建设基础问题应答系统）”等更全面的帮助系统。③ 迭代期（提醒）是指“新功能上线”或“对旧有业务逻辑变更后产生了新操作牵引”等产品迭代行为的引导。随后我们也发现，“引导体系”非常庞大，建设时间长久，对于新业务来说也不需要所有环节都马上具备。所以，产品处于不同的生命周期，需要优先补齐的引导模块也就不尽相同，于是我们又针对产品生命周期和引导的模块做了关联研究。目前“引导体系”已有理论框架，落地效果仍需要伴随着业务的发展逐步验证，我们满怀期待并做好不断迭代的准备。B 端设计还有一个痛点，亦是我们努力在寻找突破口的难点，是关于完整的“用户角色代入”。上文提及的“精准画像”研究价值极高，了解使用者画像后可以更好的协助产品定位需求，推理功能和流程设计，但这仍是在一个“虚构拟真”的场景中。C 端产品由于学习成本较低，且多为“日常生活”需求，设计者无需高昂的学习投入就可秒变使用者，所以设计可发挥的主动价值更大。B 端产品（如安全）需要的专业技术能力远高于设计者短期能达成的水平。为了让设计者有可能完成完整的“用户角色代入”，需要精巧的设计测试环境和测试内容。参考人类学领域的“田野调查”研究方法，结合产品正好发起的一次内部测试“试验田”，我们为一个重点产品的重点运维环节，设定了专项局部功能研究。一周的前置学习和规划，两周的“新人上岗”培训和真实运维工作，发现出非常多的产品问题。“我们假定的功能流程原来真实使用者不是这样去用的”，“功能使用者向我们描述的需求原来是跳跃式的”，“原来我们应该在这些地方重点强化甚至为他构建一个独立的功能”......真实运维人员的“勉强”使用让我们非常糟心，他们其实很不爽，但把难用熬成了理所当然，没人可以帮助到他们，只因为他们就只购买了这款产品。“田野调查”的代价是巨大的，在“真实环境的营造”、“真实设计者变真实安全运维人员的学习成本”和“真实的长期投入运维工作”上。但“田野调查”的价值也是巨大的，获取的不再是多层转译的信息，让设计者能身临其境去审视设计的效果，懂得为之服务的使用者最真的感受。只有真正懂得客户，深刻了解行业的设计者才能在 B 端领域产生不可或缺的价值，形成自身的技术壁垒。做可持续的“卓越产品”至少得能拿得出这个气魄吧。未来，“精准画像”仍会是我们能最接近使用者的手段，伴随业务成长，保持与客户沟通，长期服务的设计者也必将更懂产品，也许技术的改进，构建“试验田”的代价也会降低，最终 B 端的设计者能像 C 端的设计一样产出更多的价值。至此，设计创新才开始了萌芽。结而未结写到最后，貌似关于效率型改进还未阐述，B 端设计团队在这点的思考上投入一定是最多的，改进分“设计效能优化”和“产品使用效能优化”。“设计效能优化”行业内有不少文章给出了很好的建议，上文也略有提及；“产品使用效能优化”则需要根据业务类型细致来分析，就留待安全设计的同学们后续再发布思考了。更低的成本和更高的标准化并没能拯救诺基亚。设计者应该去实现“用户”的梦想，从文化中获取火花灵感，从经验中梳理科学的解决方案。本次撰文的目的是希望与 B 端设计者一同面对现实，从更宽的视野去探究 B 端设计的可能性，也探讨设计者职能的转化。文中积累皆来自设计团队多年的尝试（部分研究），感谢团队的辛苦付出，感谢 B 端设计同行的相互帮扶。寒冬很冷，以卓越为目标踏实前行，为更好的产品和更好的自己努力思索吧。参考：《中国互联网的 25 年》新华网http://www.xinhuanet.com/politics/2019-10/18/c_1125123489.htm《让实体经济成为产业互联网的主角》腾讯研究院https://tisi.org/15355欢迎关注作者微信公众号：「腾讯TSD」本篇来源：优设网原文地址：https://www.uisdc.com/design-function-thinking
顾客 信息 注意力 信息爆炸的今天，消费者的注意力越来越稀缺，设计的目的不再仅仅是美观，更要有效。所以在开始动手之前你需要清楚这六点！电商好文：一小时1200张图！当电商设计师把AI画画加入实战，效果太炸了！编者按：AI画画一直是2022年的热门话题，但至今仍鲜有实战案例。阅读文章 > 一、视觉设计需要在信息爆炸的环境中吸引注意力这个时代信息量增长的速度就像是宇宙大爆炸一样迅猛，在如此巨大的信息河流中，每个人都难免会被干扰到。优秀的广告设计有一种神奇的本领——“它们知道怎样能吸引顾客的注意力”。在互联网出现之前，我们获取信息的渠道可能是电视、报纸、杂志、收音机、路牌广告…… 那个时候人们身边的信息来源相对较少，我们还比较愿意去花点时间去阅读它，我还记得我小时候无聊时翻看旧报纸时，就算是报纸上的广告也会一个字一个字的去看一遍，因为这是打发时间的好办法，如果遇到哪些有精美插图的读物，我会翻来覆去看上好几遍。然而，互联网的出现让信息像是插上了翅膀一样飞速增长，看看现在我们身边各种各样的广告牌、电视、电脑、手机，那一块小小的屏幕就像是无底洞一样，可以装下任何东西，信息取之不竭用之不尽。每天在我们所生活的这个世界出现了大量的信息，信息的增长速度绝对是一件近乎恐怖的事情——信息爆炸。信息爆炸表现在五个方面：1、新闻信息飞速增加。2、娱乐信息急剧攀升。3、广告信息铺天盖地。4、科技信息飞速递增。5、个人接受严重“超载”。“相比于爆炸的信息量，我们的时间并没有变多，注意力甚至更少了”相比于与日俱增的信息量，我们的时间并没有变多，我们一天还是 24 个小时，每个小时还是只有 60 分钟。时间非但没有增加，反而变少了！因为我们把本来就不多的时间分给了不同的信息，你可能每天会刷一会抖音，看一下朋友圈，上淘宝看看自己的快递到哪了，下了班放松一下打个游戏、追个剧……不知不觉中你的时间被分割成了无数个碎片。碎片化的信息、碎片化的浏览和阅读、碎片化的时间，碎片化就是我们今天生活状态的一个写照。在这种情况下，不受干扰的做一件事情来变得越来越困难，或许你也想把注意力用在学习上，但你刚刚准备翻开一本书时，你的好友却发来一条微信消息，接下来你很难忍住不看它。当你伸手去点亮屏幕时，你的注意力就像是暴露在了空地上，被各种信息瞄准，各种广告、推送、消息……它们蹦着跳着来吸引你的关注。多数情况下你会乖乖就范，注意力被它们所吸引，马上就忘掉了刚才那个要努力学习的自己，踏上了时间偷偷流逝的奇怪过程中。二、你的“大”战场在一块“小”屏幕上在信息与日俱增的今天，承载信息的主要载体却比以往任何时候都要小。以前我们信息的主要是通过书籍、杂志、报纸、纸张这些载体来传递，在纸张作为信息的主要载体时，人们的注意力专注度是很高的，没有消息弹出、没有信息推送，很少有信息能够干扰到你。随后电视与无线广播加入其中，我们的世界开始变得丰富多彩，有了声音和动画，但是我们还是能够保持专注来看节目或听节目，毕竟信息不是很多，我们还没有学会看一眼就能分辨出哪些是有价值的信息、哪些是无用的广告的本领，一切都东西对于我们还都是新鲜的。电脑出现后，信息就像是长了翅膀一样，飞速增加，各种博客、论坛开始受到追捧。 互联网继报纸、广播、电视之后成为了“第四大众传媒”互联网发展的速度远远超过了前几任媒体。无线电广播问世 38 年后，拥有 5000 万听众，电视诞生 13 年后，拥有同样数量的观众，而互联网从 1993 年对公众开放，到拥有这个数量的用户只花了 4 年时间。获取信息对于我们而言变得容易了很多，敲几下键盘，屏幕上就能找到我们想要的信息。但我们还是要老老实实坐在电脑前，保持一个相对专注的状态，并且使用时间也很长。直到 2007 年 1 月 9 日，乔布斯发布了 iPhone，随后在短短的时间里这个小小的屏幕能干的事情越来越丰富。听音乐、看电影、联络亲朋好友、订票、购物……并且它的使用环境非常便捷，你可以在乘车时候看电影，散步的时候听音乐、躺在床上还不耽误上网购物。然而这所有的功能全都基于那快还没有你手掌大的屏幕。在手机屏幕上，点、按、滑动，所有的操作都在一块几英寸的屏幕上进行，当然即使是阅读也只能在手机屏幕这小小的面积上进行。雪上加霜的是电子屏幕比纸制阅读更加难以进行，因为屏幕的刷新与发光特性会让眼球的疲劳加快。不仅是这些，越来越多的信息都加入了这场注意力的争夺战，这让你的专注度更加难以维系，在查看一些碎片信息的过程中，最长出现的情况是看到一个有兴趣的内容，然后就会沿着主题进而搜索相关的信息，从而注意力越扯越远，形成一种“注意力游离”的状态，半小时的时间变成了一上午的闲逛，到头来也不知道自己做了些什么。所以你要清楚顾客的阅读场景发生了巨大的变化，像这种碎片化的时间已经成为了消费者使用手机的主要场景。各种各样的信息变得越来越多，注意力的争夺变得尤为激烈，消费者在这种情况下越来越没有耐心。从原先一个字一个字读，到一行一行读，再到一屏一屏读。但是我们只能在这一小块屏幕上施展拳脚，毕竟这块小小的屏幕是人们最常用的上网渠道。截止到 2019 年，我国网民规模达到了 8.29 亿，全年新增手机网民 6433 万；网民中使用手机上网的比例高达 98.6%，手机已经成为网民最常用的上网渠道！用 PC 的甚至都可以忽略不计了。上网时间又多少呢？人均每周上网 27.6 个小时！这块小小的屏幕产生出巨大的价值，以天猫 2018 年双十一交易为例，24 个小时创造了 2135 亿的成交金额，而移动端的销售额竟然占了其中的 90%以上！手机上这块小小的屏幕已经成为了移动着的激烈战场。三、你只有 3 秒钟的时间抓住顾客的眼球在“浮躁”盛行的当下，“耐心”或者说是“注意力”渐渐成为了这个时代的稀缺资源。快节奏的生活让时间从来没有像今天一样紧迫，我们不会轻易把自己宝贵的时间交给谁，除非某条信息或某件商品对你来说有很大价值！比如你在面对眼前的广告时，会有一种“麻木”的状态，即使它出现在你眼帘中，你也不会去话时间去关注它，只有看到你关注的信息出现时才会花时间去了解。面临各式各样的商品推销信息，消费者开始学会了一种实用的技能——用最短的时间去找到自己想要的商品。所以绝大多数广告信息不会得到顾客的仔细阅读，甚至都没进入到顾客的眼帘就被顾客本能的杀掉了。人们每天要面临的信息量太多了，有效的设计才会被注意。现在你费尽心思营销你的商品，用尽各种方式证明你的商品有多好，但很多商家往往会漏掉一个最重要的环节：让顾客现在、立刻、马上购买！如果没给出一个立即购买的理由，顾客的反应则是“恩，这个东西看起来确实还不错，以后我可能会买一件试试看。”但是，想让顾客主动记住你、在下次购物时再想起你是非常难的！因为人们在互联网巨大的信息流的裹挟中，已经越来越“健忘”，人们习惯收集各种各样的干货文章还有各种感兴趣的商品，但是收藏后就再也没有打开过，甚至在一段时间后重新翻看我们收藏的信息时，面面相觑感觉从来就没有见过一样。在亿万件商品中，顾客的“健忘”会更加严重，顾客看完后如果觉得“没有必要现在买，等以后非用不可的时候在说吧”，那你的营销是失败的，这就好像是一个经验丰富的推销员在给你介绍了两个小时商品后表示：您不必现在买，什么时候买都一样。多么可笑和愚蠢？你能保证顾客在下次有需要时还能想起你吗？总之，你要记住网络中的消费者普遍具有“健忘”的特点，不要指望他能记住你，如果要成交，最好的时机不是明天，不是后天，而是现在！如何唤起顾客的紧迫感，让顾客立刻下单，这又是一个详细的分支，大家感兴趣的话骉叔后面会单独针对这个方面写一篇。放射状的注意力：注意力，或者说是人们所注意的内容和方式，总会被认为是点状的。点状的注意力特征是长时间专注，比如我们在阅读一本著作时，会把注意力努力控制在这本著作的内容上，尽量避免周围的环境和信息所干扰，即使周围有某些声音的干扰，我们也会把注意力拉回来，让注意力长时间的在“阅读”这件事上。但是，这是传统的阅读注意力的形态，互联网时代的注意力已经不再是点状了！放射状可能能够更加贴切的描述现代人们的注意力形态。请你尝试阅读下面这段话：卡夫卡说人类有两大主罪，所有其他罪恶均和其有关，那就是缺乏耐心和漫不经心。对于不了解卡夫卡的人来说，注意力已经不再是点状，因为这个点跑了。你会很好奇“卡夫卡是谁？我好像听说过，但又不太了解。于是你搜索“卡夫卡”了解到他是一位伟大的小说家，耳熟能详的作品有《变形记》，好像有档节目名字就叫变形记，于是你的又搜索了这两个变形记是否有关联……你有没有注意到？短短的时间，你的注意力已经从原先的一个点，放射出了很多个点，不同的内容，不同的方向……回到我们熟悉的购物过程中，即使我们带着明确目的去购买一件商品，也总是很容易被首页的各种广告把我们的注意力给分散开。你看了半小时的漂亮球鞋，忽然才想起来要买的是啤酒。可能是那双球鞋的图片拍的太漂亮，唤起了你拥有它的欲望，让你离你原来的目的地越来越远。3秒注意力法则：你只有几秒钟的时间抓住顾客的注意力，并且激起他们的兴趣……就像宇宙的大爆炸一样，前几秒、几毫秒特别重要。因为人们在浏览时会先以毫秒级的速度来扫描一下屏幕，然后做出判断，判断哪些是自己想要看的信息、哪些不确定、哪些直接拉进黑名单！注意力的分布还和屏幕的位置有密切的关系。简单来说就是倒三角原则：屏幕上面的信息会得到更多的注意，越往下所获得的注意力也就越少。所以我们商品描述的部分，处于顶端的头图是最被重视的，顾客的注意力大半都在头图的介绍中，而我们重点优化的产品详情介绍，其实是处于相对次要的位置！互联网经济就是注意力经济：互联网经济中，无论是社交、内容、购物、游戏、视频……归根结底就是注意力经济。谁能购在众多信息中争夺到用户的注意力，获取到用户的时间，谁就获得了更多的资本与力量！四、消费者阅读模式的变革决定了设计思路的转变人类感知这个世界的方式可以分为五种：视觉、听觉、嗅觉、味觉、触觉。实验心理学家赤瑞特拉（Treicher）做过一个著名的心理实验，是关于人类获取信息的来源。他通过大量的实验证实：人类获取的信息 83%来自视觉，11%来自听觉，这两个加起来就有 94%。网络带给我们一个视听结合的虚拟空间，也就是说，在网络中只有我们的视觉与听觉在发挥作用，嗅觉、味觉、触觉的信息无法获得。但是其中听觉所占的比例远远低于视觉，因为我们更多地是在“浏览”在“看”而非“听”。我们在浏览时主要是去看图像与文字，图像和文字这两种元素基本上构成了我们的互联网世界。所以视觉是消费者对商品、对品牌判断的最重要依据你在购买衣服时，对这件衣服的面料材质、版型设计、功能特性全部都是通过视觉来获取的，而产品的质量如何？触感是否舒适？有没有特殊的味道？这些信息也只能通过视觉信息去联想，比如你看到面料的特写，会联想它摸起来是一种什么样的触感，穿着是否舒适？是否有弹力？在购买零食时，图片是不是足够漂亮、能够唤醒你的食欲？这肯定是你购买的最关键信息，至于闻起来味道怎么样？口感如何？是否有足够的分量？这些都变得不再重要，因为从图片上你会感觉到“肯定好吃”甚至你的口水都被它挑逗出来了。除了产品，对一个品牌来说，视觉也是我们对它进行判断时最重要的因素：进入店铺后如果看到的是劣质的图片、毫无逻辑的布局、没有任何品牌辨识度的颜色，顾客会心里的好感度与信赖感会迅速降低，以至于怀疑你产品的质量，在你还没开始介绍时已经拒绝了你！这就像是我们对一个陌生人的判断，基本上也都是来源于你能看到的外表。视觉是我们所有感官之首，以前是，现在更是。图片比文字更容易被记住：莱昂内尔 斯坦丁做过一个试验，他请研究对象在 5 天内看了 10000 张图片，每张图片展示 5 秒，之后再向研究对象展示成组的图片时（一张见过的，一张没见过的），他们能记住之前看到过的 70%的图片。试试展示 10000 条广告口号，每条 5 秒钟，一个人在 5 天之后还能记住多少？为什么图片更容易被记住？因为图像给人的信息是具体而具象的，在信息堵塞的今天，大脑会本能的“偷懒”，去避免思考和记忆。所以人的大脑更容易记住具象的信息，这种可视化的图像信息更容易被记住，让信息的记忆成本变得很低，所以我们更愿意去看图，而非看字。就像上面我们提到的实验一样，给你看十张图片，肯定比给你十个英文单词更容易记住。我们总认为顾客会盯着我们的每个广告，去仔细阅读我们的内容，而实际上他们只是在每个页面上瞥一眼，扫过几个关键字，点击一个自己感兴趣的链接，至于其他的部分，顾客通常连看都不看。我们不是阅读，而是扫描，通常我们只是花极少的时间来浏览大部分页面，或者只是扫描一下，寻找能引起我们注意的文字或图片。“用户看起来更像“以 100 公里的速度驶过广告牌”。这是《点石成金》中的一个比喻，而且这是在将近二十年前所提出的，当时的互联网热潮刚刚兴起，信息拥挤的情况还远远不及今日。何况今天信息量爆发式增长。如果以前是“以 100 公里的速度驶过广告牌”，那今天应该至少是“以 300 公里的速度驶过广告牌”人们已经从汽车换成了高铁。所以，顾客可能会对你的那些含蓄的文字、无关紧要的装饰无感并且忽略掉，你应该把心思放在让顾客“驻足观看”上。五、广告图的设计不要让消费者长时间思考现代生活越来越快的生活节奏和爆炸的信息让人们形成了不加思索的思考方式，并且这种现象未来会越来越普遍。——罗伯特恰尔蒂尼思考是购买路上的拦路虎：现在，随便点进一家商城，都不难找到那些充满“创意”的广告，他们通常会有两个特征：广告语都是些华丽漂亮的大词，有时还会用一些聪明的双关语，好像被人一眼看明白就是自己的文案不合格一样。设计形式充满美感，各种点缀元素和绚丽的颜色搭配，但就是没把产品展示的好看。这种设计方式最大的特点是：“充满设计与创意，但第一眼就是没看明白”这就犯了一个普遍的错误，我们前面提到过：顾客并不是盯着我们的每个广告，去仔细阅读我们的内容，实际上他们只是在每个页面上瞥一眼，扫过几个关键字，点击一个领自己感兴趣的链接，至于其他的部分，顾客通常连看都不看。这些信息不够直接了当，不够清晰易懂，顾客必须停顿下来仔细看几遍你的广告才有可能领会其中意义。而在选择点击这件事上，没人会像去写论文一样思考。很多说法规定，让顾客从点击到购买完成，这个过程中的点击几次是最好的，有的规定在三次，有的是四次。其实重要的不是点击的次数，而是每次点击时，顾客需要多少思考？这个点击的动作有多艰难。如果你的点击是让人摸不着头脑，不知道点击的下一步是什么，即使你只需点击一下，也没人去点击。如果你的每一次点击都是毫不费力的、轻松而明确的，那么就不存在必须限制在几次以内。还有一种信息堵塞的情况：总是在很小的面积内塞满各种各样的产品卖点，密密麻麻的文字、各式各样的配图、五花八门的利益点都打包给浏览的顾客。至于如何消化吸收这些信息则完全让顾客自己去思考，这也是一种错误的做法。顾客总是单纯快速浏览，很少去仔细阅读你的广告，所以顾客会选择轻松的关闭网页，重新选择一个读起来毫不费力的页面。所以，你的广告或店铺看起来都应该是不言而喻、一目了然的。六、这些原则不会改变让我们来总结一下，互联网让顾客有了哪些改变：互联网环境中的顾客专注力变得更短，更欢迎一些“小块”的信息，而非大量信息。信息泛滥，注意力却贫乏。这就表示你的广告内容必须与顾客切身相关，了解消费者的需求、渴望，这样才能抓住顾客的注意力，这是销售的第一步。顾客懂得了闪避推销，更能分辨哪些是浮夸的宣传，变得越来越多疑。这意味着你的商品介绍中要给出足够多的“证据”让消费者能够消除这种不信任感。顾客喜欢看图片，因为这样更容易记忆和理解。让顾客思考是一件成本很高的事，请把复杂换成明确易懂。互联网虽然改变了各种生活方式，但是互联网并没有改变人本身。如同劳德·霍普金斯在他的经典著作《科学的广告》中所描述的：“人类的本质是不会变的。从大部分的角度来看，现代人跟凯撒时代的人没什么两样，所以基本的心理学原则依然牢靠，因此，你永远不必将学过的心理学原则全部打破、从新建立。基本的设计原则永远经典，哪怕世事变迁，沧海苍天。尽管技术发展日新月异，但是人本身的变化却非常缓慢。我们依然是只关心与自己有关的信息，至于商家宣传自己的规模有多大，取得了什么样的成就，那些我们都不感兴趣，我们只关注自己能获得什么。就像 Jakob Nielsen 所述：人类大脑的容量不会马上发生变化，所以研究这些人类行为所得到的成果在很长时间内都不会失效。对于顾客来说，20 年前他们遇到的困难，现在同样如此。无论什么时候，去了解你的顾客都是最重要的：无论在传统的报刊上刊登广告，还是在电视上播放广告，或者现在在网页上和手机 app 上展示你的广告。都有一个必不可少的步骤，就是尽可能多的去了解你的顾客！对你的顾客了解的越深入，你的广告也就更具有针对性。不要想着设计一则广告去吸引所有人，把你的商品卖给所有人，那样结果很可能是没人被你吸引，也没人购买你的商品。了解顾客哪些信息？目标顾客的年龄范围是什么？他们是 00 后还是 90 后？有或者是更成熟的 80 后？哪种性别的顾客对你的产品更感兴趣？你的潜在顾客收入水平大概是多少？收入会影响他们的品位和生活习惯。你的潜在顾客教育水平怎样？你用的那些专业术语他们能看懂吗？你的商品是顾客的生活必需品？还是奢侈品？顾客在什么样的场景使用你的产品？怎样使用你的产品？多展示这些场景，增加顾客的代入感。你的顾客觉得最有价值的是什么？便捷、便宜、个性还是品质？顾客除了在你的商店，还会在哪些渠道看到你的信息？你的顾客长期生活在什么地方？有什么明显的气候特点？你的顾客群体有没有独特的群体文化？你的顾客是哪种消费理念？是使用为主的持家型还是重视当下享受的？以上这些问题是一些比较典型的分析方向，我强烈建议你根据用户的特点总结出一个，或多个消费者画像，可以是具有不同性格、不同性别、不同工作性质的多个消费者画像，总之要能够代表你的消费者特点，并且去不断优化和修正。这样你在设计时会有明确的方向性，你可以在进行设计前考虑“这些顾客最关注的是什么？”，设计完成后站在消费者的角度去思考“他们会对这个设计感兴趣吗？”。本篇来源：优设网原文地址：https://www.uisdc.com/law-of-attention
按钮 操作 用户 提到按钮，大部分人印象就是文字加个背景框，并没有太多需要设计的空间。但是作为 B 端设计师，相信很多同学在工作过程中都产生过以下问题：按钮作为最基本的交互单位之一，几乎在每个页面中我们都会使用到。由于不同行业下业务场景的复杂性，很多时候很难直接参照其他产品的按钮进行复用，也无法用一套布置方案复用所有场景，所以作为 B 端设计师需要对按钮控件具备足够的认知，理解其背后的使用逻辑和规范，才能满足多层级跨场景的设计需要。本文结合自身的工作经验，对按钮进行了系统性的整理和总结，希望对各位 B 端设计师同学的日常工作和学习有所帮助。更多按钮设计干货：万字干货！3个维度帮你有理有据做好CTA按钮设计任何设计师都曾经与 CTA 按钮打过交道。阅读文章 > 一、按钮的发展历史在详细介绍按钮前，我们先简单了解下按钮的发展历史。按钮的概念起初是源自现实物理世界的实体按钮，在日常生活中如电源开关、计算器、电话等都是通过实体按钮进行控制，由于其简单直观易操作的特性，即使如今各种电子产品都逐渐发展为触控屏操作，实体按钮依旧被保留了下来。当数字屏诞生后，人机交互设计开始走向数字屏幕后，为方便用户理解，在很长一段时间内设计师都是采用拟物风按钮来暗示用户可执行的操作。伴随着客户端设备升级和开发方式的变更，至 2013 年 Apple 在 iOS7 上第一次采用了扁平化设计，至此按钮样式开始往扁平化发展。随后历经了多年发展，按钮的样式开始层出不穷，但是无论样式如何变更，其背后的体验交互逻辑依旧是物理世界按钮的映射。二、什么是 B 端中的按钮1. 按钮的定义在 B 端设计中什么样的组件可以定义为按钮？我们先来看看国内外设计系统中对按钮组件的定义：总结来说，按钮可以理解为用于承载即时操作和命令的组件。由于 B 端产品业务逻辑复杂、页面流程多，相较于传统意义上的按钮，B 端中的按钮被设定为可复用、规范化的组件，通过对组件元素进行拆解、归纳、重组，将其划分为特定类型的组件方便管理和使用。按钮相较于输入框、选择器、单选框等控件无法进行数据输入，相较于标签、文字提示等控件也无法进行信息浏览，其关键在于「即时性」和「承载操作」，既可单独完成操作，也可与其他控件联动，作为触发操作的行动点。2. 容易与按钮混淆的控件① 标签 Tag虽然同样翻译为标签，但是此处指的是 Tag 标签，而非 Tabs 标签页。标签在样式上与按钮几乎相同，且同样可以添加图标标识和触发操作。两者的区别在于，标签侧重于信息的选择、筛选和分类，而按钮则只是单纯用于触发即时操作，因此很多时候标签会设置不同颜色样式以便信息区分。② 开关 Switch和其他录入控件相比，开关 Switch 最显著的特点便是和按钮一样触发后立即生效，因此很多初级设计师很容易将其与按钮归为一类。其区别是，开关承载的是两种互斥状态的切换，如打开/关闭、显示/隐藏、启用/禁用等，此外由于在视觉上符合用户对现实世界中开关的认知，所以可以直接展示当前项的状态。③ 单选/多选框 Radio/Checkbox单选框和多选框一般用于状态标记，但是无法直接触发操作，所以通常会和按钮配合进行使用。最常见的搭配场景便是在登录页，用户勾选「记住密码」或「自动登录」后标记其状态，再点击按钮进行登录。三、按钮的原子拆解相较于其他组件，按钮的元素构成较为简单，分为内容层和容器层，通过将不同元素进行搭配组合，即可设计出不同类型的按钮类型和按钮状态。内容层：图标和文字自由组合。内容层作为操作引导的核心必须存在。容器层：控制颜色、圆角、描边、投影等样式，有些设计系统下还会加上交互动效，提升用户体验感。四、如何区分按钮类型在查阅大厂的设计规范时，相信以下按钮名称大家应该都不陌生：主按钮、悬浮按钮、图标按钮、危险按钮、下拉按钮、文字按钮、CTA 按钮……很多新手设计师会产生疑惑：为什么要划分如此多的按钮类型？这些按钮间的区别是什么？为什么各家设计系统下按钮分类都不相同，我应该选择哪种作为参考？为了区分好按钮类型，关键要先明确类目划分的边界。这里为了方便大家学习，我从按钮的强调程度和使用场景 2 个维度将按钮进行划分，基本涵盖了常见的按钮类型：1. 依据强调程度划分在同一个页面中往往会存在多个行动点，因此需要将按钮依据强调程度进行划分，确保用户可以依据设计的按钮层级快速找到最需要操作的按钮。常见的按钮强调程度可以分为 3 个层级：高度强调：承载页面上最重要和突出的行动点。为了保证视觉层级最高，通常会采用大面积主色填充或投影增加空间层级的方式进行区分，例如主按钮和 FAB 按钮（悬浮按钮）中度强调：承载仅次于最重要行动点的常规操作。为了避免太过吸引用户注意，通常采用中性色进行描边或填充，也被称之为次按钮。轻度强调：对页面中其他操作补充或可选操作。为了确保视觉上不凸显，通常不会填充背景色，常见于文字按钮和图标按钮。在轻度强调中还可以划分为弱强调（内容填充主色）和不强调（内容填充中性色），由于文字按钮填充中性色难以和正常文本进行区分，所以一般内容填充中性色只会用在图标上。由此我们得到了依据强调程度划分的几个常见按钮类型：主按钮 > 次按钮 > 文字按钮 > 图标按钮。接下来针对每种类型我们来展开说明。（FAB 按钮在 B 端页面中属于特定场景下使用的按钮，不具有通用性，故划分到使用场景中进行讨论）① 主按钮 Primary主按钮代表着页面中的核心操作项，是视觉权重最高的按钮，常用于突出提交、完成、确定等操作。为吸引用户注意，常使用品牌色填充背景引导用户视觉焦点。关于主按钮的使用需要遵循以下 2 个原则：在一个焦点任务中最多只使用一个主按钮。同时存在多个主按钮会让用户失去操作焦点，造成信息干扰。主按钮并非必须使用。如果没有必须突出的操作项，强行添加主按钮反而会打破按钮间的层级关系。② 次按钮 Secondary次按钮是使用最频繁的按钮，当在页面中不确定选择哪种按钮时，使用它往往是最安全的。次按钮通常使用中性色，其样式可以分为描边型和填充型：描边型使用最为广泛，是次按钮首选的样式，而填充型相对特殊，在不同设计系体下会根据业务场景选择是否使用。关于填充型次按钮相较于描边型，早年在 B 端产品中很少会见到使用填充型样式作为次按钮使用的，但是可以发现近几年国内外设计系统如 Arco Design、Marterial 等，开始陆续将填充型次按钮纳入到按钮组件库中。填充型次按钮更多的使用场景是在移动端上，其视觉强调程度弱于主按钮但又高于描边型，可以更好的表达组件的整体性和吸引用户注意。伴随着硬件设备的发展，桌面端和移动端的操作边界开始逐渐模糊，各产品开始追求全生态环境下的统一性。为降低用户在设备切换时的体验隔阂，一套设计系统需要能同时满足多端设备的兼容，而填充型样式更符合其场景需求。最典型的便是 iPadOS 连接鼠标操作时，悬停态下填充型按钮明显比描边型更容易被识别。如何选择次按钮的样式基于以上考虑，在工作中选择次按钮样式时可以参考以下建议：如果当前项目上已经有在使用的开源库，尽量以原有组件库为主。除非自身产品有设备互通的场景或需要同一套设计语言兼顾不同端，否则增加多余的次按钮样式只会更加复杂且影响用户的体验一致性。如果是项目是 0～1 搭建组件库，根据自身业务场景选择其中一种样式使用即可。一般桌面端产品使用描边型，如果产品生态中有移动端，为了保持设计语言的统一更建议采用填充型。此外还需考虑前端修改组件库样式时的开发成本。③ 文字按钮 Text文字按钮适合承载如取消、还原等无需特意强调的操作，通常使用在表格操作栏、表单页等场景。为了和普通文本做区分，提示当前内容可交互，需要加上链接色（一般是蓝色）提醒用户。文字按钮和链接的区别文字按钮和链接（Link）的默认样式一致，在搭建组件库时很容易发生混淆。其区别在于按钮用于发起动作，触发相应的业务逻辑，而链接的作用是导航，作为页面跳转或锚点定位的触点。为了更好地区分，可以在交互样式上进行处理：文字按钮：指针悬停时容器添加背景色。链接：指针悬停时文本添加下划线。④ 图标按钮 Icon图标按钮的视觉层级最弱，但是由于占据空间小，常用于同时展示多个操作项时使用。由于缺少文字解释，单纯的图标可能会造成用户的理解偏差，故建议在指针悬停时加上 Tooltip 的文字提示进行辅助说明，对于特定操作还可加上快捷键指引。2. 依据使用场景划分在依据强调程度划分的基础上，还有部分按钮只应用于在特定的业务场景中，所以各设计系统下的按钮分类会有所不同。以下按钮的应用场景较为频繁，故被单独划分为一类方便交流和管理。① 功能按钮 Function功能按钮顺应用户心智，采用绿色、橙黄色、红色代表了成功、警告、危险三种功能按钮，用户无需浏览按钮内容，直接通过色彩即可识别当前操作可能导致的后果。由于功能按钮的视觉权重往往比主按钮还高，在页面中需谨慎使用，避免对其他页面信息造成干扰。② 虚线按钮 Dashed相较于普通的描边型按钮，虚线按钮只承载传输文件或新增配置项等操作，为方便用户感知，将其描边设计为虚线样式。上传 Upload由于虚线按钮只能支持单纯的触发操作，在很多上传情景下不能满足其业务需求，故逐渐衍生出单独的上传组件，相较于虚线按钮：上传组件支持批量上传通常有更大的交互区域且允许支持拖拽上传，以降低用户的操作门槛搭配展示文件列表，用于对已上传文件进行预览、重新上传、删除等操作③ 幽灵按钮 Ghost顾名思义，幽灵按钮不具备实体性，一般底色为透明，其按钮的内容反色，通常使用在复杂或颜色较深的背景中，例如 banner 图、官网首图等，避免按钮突兀地破坏背景的整体性。由于幽灵按钮使用的场景不固定，因此无须严格遵循现有规范，只要满足其特定场景下的业务需求即可。④ 行为召唤按钮 CTACTA，即“Call to Action”的缩写，意思是行为召唤。该词原本是营销领域的术语，后来逐渐引用至互联网领域中，即目的在于给用户一个明确的反馈：当前事件的操作流程已经完成或即将发起一个新的流程。CTA 按钮之所以会被单独归类，因为当按钮作为吸引用户采取点击行为的载体时，时常在事件操作的最后一步出现，作为产品的关键触点之一，可以有效提高页面或屏幕的转化。也因此当页面中存在多个按钮时，CTA 按钮的优先级往往是最高的，可以通过色彩对比、元素点缀等方式引导用户点击。⑤ 悬浮按钮 FAB悬浮按钮 FAB，即 Floating Action Buttons 的缩写，其特点是会始终悬浮在页面的固定位置，不会随着页面滚动而消失。在 B 端产品中，FAB 按钮更多的使用场景是承载全局性的附属功能，常见操作包括咨询、客服、快捷键、点赞、收藏、分享、回到顶部等。在设计 FAB 按钮时需注意以下要点：不能干扰用户在当前页的正常操作和浏览。尽量放置在页面的固定位置，当操作数过多时可将其他操作下钻至更多按钮中。承载操作须是当前页的全局操作，无须与其他页面元素发生联动即可触发。如不能承载保存、删除、清空等操作。⑥ 下拉菜单 Dropdown按钮组不是单独的按钮类目，而是按钮组的集合体，当多个同级操作项同时出现，但不想占有太多页面空间时使用。通常按钮组会将最关键的主操作露出，其他操作收入更多操作项中。严格来说 下拉菜单 Dropdown 并不属于按钮类型，但因为其使用场景较为频繁且时常用来承载多个按钮操作，故在此处作为单独类型进行讲解。下拉菜单作为操作命令集合使用时，可以简单理解成按钮组：将多个操作按钮收纳到同一菜单下。在使用时有两点需要额外注意：和选择器 Select 的区别选择器 Select 属于录入控件，在基本形态上和 下拉菜单 Dropdown 高度相似，都是通过下拉浮层来容纳更多信息，在实际应用时经常容易被混淆。要区分两种组件，最关键是理解其使用场景：下拉菜单：当页面上的操作命令过多时，用此组件可以收纳操作元素。核心是菜单导航和命令集合选择器：用于一组选项中选择一个或多个数值。核心表单填写和数据筛选样式与操作项的关系当下拉菜单用来承载操作项时，各操作项关联性也会引起下拉菜单样式上的区别，这里用实际的案例辅助大家理解：乍一看似乎都是差不多的样式，在工作中很多设计师也是随机选择其中一种进行使用，但是作为设计师，就是应该从细节之处见真章，每一处设计都应有理有据。简单来说，以上三种组合按钮中的操作关联性是逐渐疏远的，这一点从按钮样式上也可以看出。新建一：合并同类项。突出新建操作本身，更多操作项是新增的数据类型进行区分，减少重复文案的出现。新建二：操作延展。强调的是数据导入的形式，提供更多操作渠道供用户选择。新建三：信息收纳。各操作项之间并没有关联性，只是缓解空间压力或突出使用最频繁的操作。五、按钮的交互状态在了解了以上按钮类型，我们来看看按钮的交互状态。不管哪种按钮类型都会存在相应的交互状态，设计师在交付设计稿时需要将不同状态下的按钮样式进行标注，方便前端开发。在刚开始接触按钮时也曾被一堆状态给乱花了眼，光是理解不同状态的区别已经头大。其实回头来看，开始只要记住 4 种最关键的按钮状态便可满足大部分的使用场景，即按钮的正常态、悬停态、点击态和禁用态。在日常工作中，没有设置聚焦态和加载态并不会影响用户的正常使用，但是加上后可提升用户的产品使用体验，大家可以根据开发成本和实际的业务情况考虑是否加上。1. 正常 Normal/Default按钮的初始状态，即默认情况下的基础样式，此处不多做介绍。2. 悬停 Hover当鼠标指针移入按钮时的状态。为了暗示用户鼠标指针已进入按钮的可交互区域，按钮相较于正常状态在背景色彩等样式上会有明显的区别。悬停态通常还会配合鼠标指针变化辅助用户理解，在前端 CSS 样式表中常用 cursor:pointer，指针变化为伸出食指的手。由于悬停态是由鼠标指针移动引起，故只有设计桌面端产品时需要考虑到，而在移动设备上通过手指操作故按钮不存在悬停的状态。（在 iPadOS 更新至 13.4 版本后开始支持连接键鼠操作，但是在日常工作中很少会出现，此处不予以讨论）3. 激活/点击 Active/Press鼠标点击即按下按钮时的状态。激活态是在悬停态基础上发生变化，鼠标指针样式和悬停态保持一致，按钮背景色发生变化，提示用户已触发点击操作。4. 禁用 Disabled按钮无法操作被锁定时的状态。该状态是为避免用户误操作而设立，如在登录页未完成信息填写时将提交按钮禁用，提示用户无法点击，只有填写完必填字段后才可以点击提交。在鼠标悬停时指针变化为禁用状态，在前端 CSS 样式表中常用 cursor: not-allowed，通常会配合 tooltip 文字解释说明行动点不可用的原因，避免用户疑惑。值得一提的是，禁用按钮并非只有置灰一种样式，只降低色彩饱和度和明度也是禁用按钮的表现手法之一，且相较于置灰更方便用户识别主次按钮。以上是针对不同按钮状态的说明，这里并没有针对不同状态的样式进行详细说明，因为不同的设计体系下可能会采用不同状态样式进行展示。为方便对比，这里将常见组件库中的按钮状态进行了整理：可以发现，除了 TDesign 中描边按钮激活态下增加了中性色填充外，基本按钮状态都是保持着一致的梯度变化。这里以正常态的按钮样式为基准，将悬停和激活状态下的色彩变化进行整理：总结来看，在不同色彩的按钮上按钮状态会按照不同梯度分布：主色（品牌色）按钮色彩梯度从浅到深：激活 〉正常 〉悬停中性色按钮色彩梯度从浅到深：激活 〉悬停 〉正常之所以出现这种情况，主要是因为在搭建产品色彩体系时，品牌色一般会采用色板中间色作为主色（通常是第六个颜色），故不管往浅往深都有更多灵活调整的空间。而背景使用的中性色为了避免干扰视觉层级，通常选择色彩较浅的中性色，因此没有再往下延伸色彩梯度的空间。以上介绍的四种状态建议采用色彩组件库中色卡进行配色，上图标注了不同按钮状态的配色选择，下面是 AntD 和 ArcoD 的色板生成工具地址（关于产品取色未来会专门出一期文章进行讲解）。ArcoDesign Palette 色彩工具： https://arco.design/palette/listAnt Design 色板生成工具：https://ant.design/docs/spec/colors-cn#色板生成工具5. 聚焦 Focus该状态用于指示电脑光标的位置。在有些场景下不操控鼠标，只通过键盘方向或 Tab 切换选择页面元素进行操作，反而是更高效的操作方式。常见的聚焦态按钮样式为增加描边，有的设计系统下会采用和悬停态一样的样式。键盘操控快捷键推荐：「Tab」前进「Shift + Tab」后移「Enter」激活6. 加载 Loading表明用户操作后系统正在处理的状态。由于服务器响应或网络延迟等问题，有时候用户操作完需要间隔一段时间才能响应，加载态可缓解用户的焦虑情绪，避免用户由于未收到反馈而反复操作的情况。六、按钮设计需考虑的因素接下来便到了本文的最关键部分，也是按钮设计中出现最频繁和令人头痛的问题：我的按钮究竟应该放在哪里？在此之前先要理解按钮设计的目标是引导用户采取我们希望用户采取的行动。这就需要尽量帮助用户快速找到需要操作的按钮并了解执行该操作的结果，同时尽可能避免误操作。基于以上目标，我们从用户实际操作路径的视角来梳理按钮设计时应考虑的问题：按钮区在页面中的什么位置——空间位置有多个按钮时采用怎样的阅读顺序更合适——排列顺序按钮采用怎样的样式更合适——视觉样式1. 按钮区的空间位置当用户进入页面时，除了浏览当前页的信息内容还需要寻找接下来可执行操作的可交互区域，即按钮区。除了单纯通过视觉差异区分按钮和页面其他元素外，还需考虑到用户在信息浏览过程中的视觉动线。结合古腾堡法则和格式塔原理，给出以下设计建议：① 放置在用户的浏览路径中在没有其他视觉效果引导时，F 型和 Z 型网页浏览模式可以作为用户视觉动线的基础指导，关于以上 2 种浏览模式网上有太多相关介绍，此处就不再赘述。② 尽可能靠近其所控制或联动的对象将关联性强的信息放在一起，可以降低阅读成本，提高用户的感知效率。2. 多按钮的排列顺序① 保持用户的操作惯性这里先讨论一下开头提到的问题：主操作项放在左边合适还是右边合适？我们先来看看一些案例：可以发现，即使是业内顶尖的互联网公司也并没有遵从同一套确定方案。对于新用户而言，确定按钮的位置对操作时间和错误率影响并没有太大差别。并由此得出更关键的结论：不要轻易改变当前产品中用户已经习惯的按钮位置。在此基础上对于操作项不固定的页面，给大家整理了以下建议：② 同类操作项按组分类最典型的案例便是编辑器类产品的操作项，将同类操作区整理分组，方便用户查找。③ 阅读顺序符合操作预期此处的阅读顺序并非特指从左往右、从上往下，而是依据用户当前视觉动线，优先满足用户预期或操作可能性最大的按钮需要最先被用户发现。考虑到人体工程学操作习惯和操作后果的影响，还需注意一些特定的场景：④ 流程操作遵循方向认知习惯流程属性的按钮如上一步、返回、后退等操作用户习惯在左边，而下一步、前进、更多等操作在右边。⑤ 破坏性操作提升操作门槛如删除或清空按钮，尽可能放置在远离主按钮的位置，甚至可以下钻至更多按钮中，避免误触。3. 按钮的视觉样式在文章开始基于强调程度划分按钮类型时，按钮的视觉样式便是基于其强调程度划分的，页面中越是需要强调的按钮其视觉权重越高。前文中只划分了主按钮、次按钮、文字按钮、图标按钮这 4 种基本类型，此外还可以通过文本粗细、内容量等方式进一步细分。七、关于按钮的其他问题1. 按钮的尺寸按钮的尺寸优先体现在其高度上，而宽度一般根据内容区大小自动适配。通常会将按钮分为大、中、小这三种规格，以满足不同场景下的使用需求。高度大尺寸：通常使用在企业官网、账号登录、导航菜单等场景中。一般高度设置为 40～64px。中尺寸：按钮的默认尺寸，适用在 B 端页面的大部分场景。一般高度设置为 28～40px。小尺寸：常用于气泡弹窗等小型控件中。一般高度设置为 12～28px。宽度关于按钮宽度需要注意的是，由于按钮内容的不固定，同规格按钮可能因为内容量差异引起视觉上的层级误判。故为了减少按钮错综不齐的情况，建议设置按钮最小宽度的界限，一般为 4 个文字+左右内边距。2. 按钮的文案相较于其他方面，似乎大家对产品文案总是保持着“点到为止”的态度，但是并不意味着文案不重要，错误的文案会让用户产生疑惑，严重影响用户体验。相反好的按钮文字甚至可以做到即使不去阅读上下文，单凭按钮文案即可做出正确的判断。在一些关键节点的 CTA 按钮，文案的优化可以带来转化率大幅度的提升。因此关注文案细节也是设计师平时需要考虑的问题。优秀的按钮文案包含以下几个要点：① 内容简洁，删除赘词按钮区域寸土寸金，每一个字都要有其存在的意义，如果删除也不影响信息表达即没必要存在。② 表达清晰，避免产生歧义文字表达清晰，避免使用用户难以理解的专业术语。③ 规范用词，不要出现错别字常见的“登陆&登录”、“收获&收货”、“即时和及时”都是容易打错的词。下方给大家整理了 常见易错的按钮文案表，建议保存收藏。④ 一致的语法表达如统一采用动宾结构：修改价格、提交工单、查看更多等。⑤ 适当的情感化表达结合自身品牌特性，在按钮中融入适当的情感化文案，也是塑造品牌心智的触点之一。3. 按钮的圆角当前市面上主流的互联网产品大多都采用了圆角设计，因为圆角矩形相较于直角更具安全感和亲和力、在相似内容中识别度更高，且圆角对信息的聚焦性更强。同样 B 端设计中通常也会在按钮中加入圆角，方便用户更高效的辨别和获取信息，但是需要注意的是圆角并非越大越好，过大的圆角会导致按钮操作热区的缩窄，更不易被点击触发。如在移动端产品上都是采用手指按压，而桌面端采用鼠标指针单击，相较之下后者对点击按钮的触发精度要求更高，也因此全圆角按钮（也被称为胶囊按钮）更适合在移动端产品上使用。此外按钮的圆角设置还需考虑到产品整体的视觉一致性，在不同场景下都要保证统一的感官体验，如在大尺寸的按钮上圆角的曲率也应设置更大。8000字干货！超全面的 Web 端按钮设计指南按钮是设计界面中常用且重要的组件之一，它在页面中占据的位置不大，却承载着重要的交互操作。阅读文章 > 参考链接https://mp.weixin.qq.com/s/81Xbb2zEHqJS2bABY32ztQhttps://www.zcool.com.cn/article/ZMTI3MzkzMg==.htmlhttps://www.uisdc.com/button-applicationhttps://www.zcool.com.cn/article/ZMTI2MzUwMA==.htmlhttps://www.yuque.com/yovar/bq79sy/ufeuexhttps://uxmovement.com/buttons/why-ok-buttons-in-dialog-boxes-work-best-on-the-right/https://www.woshipm.com/pd/3104897.html本篇来源：优设网原文地址：https://www.uisdc.com/button-design-7
系统 汽车 华为 近期因为工作调度，有时间去对车载 HMI 历史进行研究。文章主要从车载中控的诞生开始讲起，涉及最新的各大品牌车载 HMI 演变路线。汽车作为代步工具距今已有 130 多年的历史。目前，在视觉范围内如此关注车载 HMI 的历史也只是近十年的事情，因为在过去，人们最注重的还是汽车技术的发展。但随着以交通安全为主的自动驾驶技术的不断发展，智能设计和交互设计的重要性才逐渐显现出来。首先来科普一下 HMI （Human Machine Interface）的定义：在汽车领域的交互体验设计（Interation Disign），既然说到人机界面，我们先来看看作为交互设计的车载系统是如何演变的。进阶教程：6000字干货！四大章节掌握HMI车载设计指南（进阶篇）HMI车载设计成为当今的热门行业，本文通过HMI车载交互设计基础、需求分析的要点、创新的交互形式和视觉设计四大章节，帮你掌握HMI车载设计。阅读文章 > 一、车载中控系统的演变1. 以机械按钮为主的车载系统诞生一般来讲，我们把车载中控系统分成两部分，一部分是与汽车驾驶直接相关的汽车驾驶系统，另一部分是与驾驶不直接相关的各类娱乐系统等。存在两者之间的有车载导航系统和各种与地理相关的功能系统，他们与驾驶操作本身没有关联。但汽车作为交通工具，现代人已经越来越离不开电子导航系统。这些车载系统最开始应用到汽车上时的交互载体是按键和表盘。 接下来看看它们都是如何被加入到汽车上来的。① 汽车驾驶系统1886 年，卡尔·本茨获得燃气汽车第一项专利。世界上第一台汽车，除了三个车轮和一张简易沙发外，似乎看不到任何称得上内饰的设计，那会儿对于这样一台新兴的事物来说，它能开动就已经不错了。真正的车载系统的诞生，应该从汽车界的老大哥福特 T 型车开始讲起。亨利·福特在 1908 年发明了 T 型车，还没有中控台面板的概念，仪表分布于车内外各个地方，所有的机械结构均裸露在外，甚至挡杆和手刹都被设计在车门外。除此之外，亨利·福特赢得的另一场胜利是 与乔治·B·塞尔登的专利战。从未制造过汽车的塞尔登拥有“公路发动机”的专利，所有美国汽车制造商都以此为基础向塞尔登支付专利费。福特推翻了塞尔登的专利并打开了美国汽车市场以制造廉价汽车。换句话来说，今天我们普通老百姓能开上家用汽车，是托福特老爷子的福气。② 汽车娱乐系统1910 年，爱立信创始人拉什·马格拉斯·爱立信（Lars Magnus Ericsson）驱车在瑞典街道行驶，他将车停在路边，然后，他的妻子则拿出两个长杆，分别将它们钩在电话线上。爱立信则给电话机插上手柄，然后从运营商处获得信号，在车里进行通话。这便算是最早的车载电话。时间来到 1922 年，雪佛兰与西屋公司合作，打造出了第一款搭载收音机的汽车。这在当时引起极大轰动，导致雪佛兰销量节节攀升。不过，车载收音机刚诞生的时候，也是遭受了很多的质疑，人们觉得它会影响司机的驾驶，甚至当时美国还出台了相应的法律来制约它。后来雪佛兰重新设计收音机的操作逻辑，消除了美国政府的顾虑的同时，也实现了汽车领域早期的“盲操作”。1930 年的意大利，一款名为：Iter Avto 的自动导航系统出现了，屏幕只有 5-7 寸的大小，在那个年代，没有人造卫星，甚至连电脑也还没有发明，更不会有语音提示了，它只是将纸质的路线地图，卷进一个小盒子，随着车辆的行驶自动展开。从当时的角度来看，这套导航系统相当神奇，这或许就是车载导航的雏形。直到今天，这项技术呢，仍然运用于汽车拉力赛中，只不过它换了个名字，叫“路书”。早在 1986 年，别克公司就展现出了惊人的远见。在别克 Riviera 上搭载了第一个触控中控屏，这个搭载 GCC 的系统的 3*4 英寸触控屏，不仅能调节空调温度和收音机，还能显示车辆故障诊断、剩余燃油量和里程信息。另外 80 年代盛行的车载电话也在这时被蓝牙所取代，伴随着空调系统、音响系统的完善，再加上车辆控制的功能越来越多，豪华品牌的中控台终于被各种按键排满，这样不仅看起来不够美观，使用起来也非常繁琐，甚至影响到了行车中的安全性，怎样简化中控，成为一个问题。2. 车载系统跨入有屏时代—以中控屏作为信息交互枢纽① 跨入有屏时代的关键节点2000 年之后，车载中控屏随着 GPS 和电子后视镜技术的出现，以及当时苹果和三星推出的智能手机，这一次人们对这个新技术已经做好了准备，彻底跨入有屏时代，有屏的意义是什么呢？互联网传奇人物，凯文凯利曾经预言到：汽车将成第四空间，车机将成为继电视、电脑、手机后的第四块屏。关键节点一，宝马为 2001 款宝马 7 系引入 iDrive 系统，其（非触摸式）中央显示屏的位置较高，紧邻仪表板，通过一个可以四向控制的主按键与几个快捷键，将 700 多项功能整合其中，大大的简化了中控台实体按键。随后各豪华品牌竞相推出类似的系统，随后实体按键与屏幕的组合占据了中控台的主要位置。关键节点二，2012 年，特斯拉 Model S 的 17 寸中控竖屏横空出世，正如乔布斯当年推出 iPhone4 般惊艳，这可是在那些传统车型上从来没见过的新鲜玩意儿，它的出现让实体按键全部失去意义，标志着汽车内饰正式迈向一个新的时代。② 车载中控屏的演变路线随着自动驾驶的发展，通过观察各个品牌动向，我们可以预见未来汽车将朝着两个不同的方向发展。一方面，汽车会依旧保留驾驶乐趣的体验，让驾驶者能够自主控制，“驾驶”将成为现代人的一种娱乐方式而得以保留；另一方面，汽车会作为一个高度智能的交通工具，为人类提供安全、高效的运输功能，人们用汽车从 A 点到 B 点，在途中可以完全沉浸在自己的世界里，做自己想做的事，这点类似于航天飞船的全自动驾驶系统。车载中控屏会根据汽车的发展方向去发展，归纳总结一下近年来座舱屏幕的演变路线，主要有四大主线和其他支线：主线一：传统派一一仪表屏和娱乐屏分列布置，均为小横屏;主线二：双联屏派一一仪表屏和娱乐屏并列布置，均为横屏;主线三：大竖屏派一一仪表屏和娱乐屏分列布置，娱乐屏是大竖屏;主线四：大电视派一一仪表屏和娱乐屏分列布置，娱乐屏是大横屏;支线一：由双联屏派衍生出的多连屏派;支线二：旋转派。传统派顾名思义，传统派就是传统的车内屏幕布局方式。也是绝大多数传统汽油汽车的屏幕布局形式，传统汽车主要卖点在于驾驶乐趣，那么车载中控大屏完全就是一个多余的设备，车载中控小屏也仅显示极少的必要信息，车载中控大屏对于提升驾驶乐趣毫无用处，从现在的各类超级跑车、小钢炮、硬派越野上，都能得到佐证。值得注意的是，类似奥迪的三块屏，下面一块屏幕其实是开关的替代，因此我个人仍然把它归为传统派。目前，仍在使用传统派布局的主流车企有：大众、丰田、本田、日产、马自达、奥迪...等双联屏派仪表屏和娱乐屏并列布置。真双连屏的创始者是 2013 年上市的上一代奔驰 S 级，并且当上一代奔驰的内饰语言得到广泛认可后，双联屏这一浪潮也对过内外车企产生了不小的影响。很多的自主品牌开始偏向于采用奔驰的双联屏设计，就像在今年上市的长安 UNI-T 不仅外观吸睛，内饰采用液晶仪表盘和中控大屏组成的双屏联动也是科技感满满。此外，小鹏 P7、奔腾 T99 运动版等自主车型也都采用了双联屏的设计。而国外车企方面，通用、宝马.....也对双联屏爱不释手。双联屏的主要优势在于两点，一是视觉冲击力强、二是有科技感但在实际使用方面，双联屏也有两个非常大的缺点。一是双联屏布局下的中控屏一般都是 14：1 的比例，很扁，这就导致在导航界面下能够显示的前方路线非常有限。二是双联屏的中控屏位置其实是比较高比较深的，这就导致驾驶员在触摸操作时手的触及性并不好，经常需要向前移动身体，对驾驶安全有一定的影响。而奔驰在使用双联屏的时候，其实中控屏是不能触摸的，都是依靠方向盘开关，或者下中控区域的触控面板来控制中控屏的内容。所以说这方面，虽然国内的车企在智能座舱方面的整体实力都要强于海外企业，但是也暴露了部分国内车企在人机工程的 Know-how 方面有很长的一段路要走。也正是基于以上两点原因，我个人预计后续采用双联屏设计的车企可能会越来越少，目前看来，短期内可能只有宝马在坚守。大竖屏仪表屏和娱乐屏分列布置，娱乐屏是大竖屏。大竖屏的开拓者毫无疑问是 2012 年上市的特斯拉 Mode S。此后无论是造车新势力（蔚来、小鹏），还是积极拥抱变化的传统势力（沃尔沃 XC90、荣威 RX5）都不约而同的选择了大竖屏。从体验上来说，大竖屏的优势在于：面积比之前的所有类型的屏幕都大，可同时显示的内容多；导航的布局非常好；驾驶员触摸较为方便，开关进展的体验较好；因此我个人认为，正是基于上诉这些原因，奔驰才在最新一代的奔驰 S 上抛弃了双联屏而采用了大竖屏。与此同时，国内某些车型则是走了一些完全相反的道路....当然了，大竖屏也并不是完美，比如：大竖屏整体的布置位置较低，经常需要驾驶员低头；播放视频时，大竖屏的利用率较低；目前，仍然在坚持使用大竖屏的代表车企是蔚来，其新一代 NT2.0 平台仍然在使用与旧版 NT2.0 平台相同的屏幕布局。大横屏仪表屏和娱乐屏分列布置，娱乐屏是大横屏。与大竖屏一样，大横屏流派的开创者仍然是特斯拉（要不怎么说特斯拉在电动车领域的地位高呢）。在我个人看来，特斯拉从大竖屏转变为大电视的原因主要是因为其在 Modle 3 和 Modle Y 上取消了仪表盘，需要依靠大电视的左侧区域显示驾驶信息。与此同时，大电视的布局虽然是横屏，但由于其面积大，在导航界面的显示体验总体也比较好，并且播放视频的利用率很高。有人问，为什么新款 SX 并没有取消仪表屏，不再采用竖屏？答案是竖屏并不利于车载软件适配。况且新款 SX 的车载娱乐系统算力高达 10 Tops，足以游玩一些 3A 大作。既然如此，中控屏做成像电脑显示屏那样的大横屏也是情理之中——总不可能有人觉得用竖屏、窄屏、小屏或不规则屏玩游戏会感觉到舒服吧？总体来看，四条主流路线中，对于电动汽车，我个人认为大电视其实当前的最佳布局，燃油车的最佳布局则是大竖屏。多联屏在多联屏流派中，影响最大的当属是理想 One 了。一般来说，典型的多联屏是在双联屏的基础上再增加一个副驾屏，有的车型还会怎加一块开关屏，从而组成一套完整的前排座舱交互系统。增加的副驾屏可以照顾副驾驶的娱乐需求，而增加的开关屏则可以解决触摸不便的问题。但是双联屏遗留的对地图界面不友好的问题仍然没有能够解决，此外，多联屏最大的缺点就是贵。相比之下，奔驰 EQS 的多联屏则是另外一种形态，更像是把仪表、大电视和副驾驶屏做成一体，解决了副驾驶的美观问题。如果说，上一代奔驰 S 级的内饰是燃油车时代的美学巅峰，那么，EQS 自一出场就拥有这种底气，相信 EQS 的内饰也将成为大学汽车设计专业课堂上的模版典范。旋转派最后咱们来说说我个人眼里另类——比亚迪旋转屏在到底是横屏好用还是竖屏好用这件事上，或许不同的人会有不同的答案，但比亚迪把单选题做成了多选题。我可以转，你爱用哪种模式就用哪种模式。但是，这不代表旋转屏就是完美的。为了保证两种模式均不遮挡空调出风口，比亚迪只能把出风口布置在非常靠下的地方，导致空调吹脸效果受到很大影响。二、新科技：HUD 抬头显示器1. HUD 的诞生：从航空领域到汽车行业HUD（Heads Up Display）抬头显示系统，作为一种综合电子显示设备，可以将车辆的信息，如车速、油耗、发动机转速、导航等，投影到前挡风玻璃上或其他显示介质上，供驾驶者查看，从而减少驾驶者因低头或视线转移而带来的安全隐患。HUD 起源于航空领域, 1988 年通用汽车首次将 HUD 应用在汽车领域。2003 年，宝马成为欧洲车企中第一家配备 HUD 的公司，此后多家整车厂，如奔驰、奥迪、丰田、本田等，也开始推出装配 HUD 的车型。随着 2020 年奔驰新 S 级推出业界首款量产 AR-HUD（增强现实型抬头显示系统），整个 HUD 市场再次按下加速键。2. HUD 的发展现状：W-HUD 为市场主流，AR-HUD 初露锋芒车载 HUD 经历三代升级，成像质量不断优化，信息量持续增加，科技感大幅增强。目前市场上 W-HUD 为主流，AR-HUD 加速落地量产。第一代为 C-HUD（Combiner HUD），组合式抬头显示系统。C-HUD 采用半透明树脂板作为显示介质，具有安装便利的优点，但是成像区域小、显示信息少，由于 C-HUD 是以配件的形式加装在车辆上，在发生事故时容易对驾驶员造成二次伤害。第二代 W-HUD（Windshield HUD）风挡式抬头显示系统，是目前应用最广泛的 HUD，已经实现量产。W-HUD 利用光学反射将行车信息投射到汽车前挡风玻璃上。W-HUD 较 C-HUD 显示范围更大、投影距离更远。第三代 AR-HUD（Augmented Reality HUD）增强现实抬头显示系统，是一种全新的抬头显示技术，和传统的 W-HUD 相比，AR-HUD 投影范围大、信息量多，可以更好地结合 ADAS 采集到的数据，进行场景融合，通过数字图像与真实场景的叠加，增强 HUD 的实用性和科技感。接触过 AR 成像技术的读者可能知道，目前行业主流的 AR 成像技术普遍存在重影眩晕、画面较小、强光倒灌难以看清的小问题，市面上做的比较好的 AR-HUD 是是奔驰和华为。虽说市面上的 AR-HUD 仍显鸡肋，但随着以交通安全为目的自动驾驶得以普及，HUD 就会变得更加可有可无。毕竟如果不用依靠表面上的显示信息，在无需花费全部的注意力的情况下，系统就能在无形之中助力驾驶，对驾驶人来说是更理想的选项。三、汽车大脑：车载操作系统在汽车智能化时代，汽车的动力、内饰与机械性能不再是评估汽车好坏的核心标准，取而代之的是汽车大脑车载操作系统。根据佐思汽研公布的报告，广义上的汽车操作系统分为四类，分别是手机映射系统、ROM 型汽车操作系统、定制型汽车操作系统以及基础汽车操作系统。1. 手机映射系统——Android Auto、CarPlay很容易理解，就是打开手机，通过有线、无线连接车载大屏，将手机中的地图、音乐、社交、语音软件投射到汽车大屏中，可以满足用户多样化需求。车主们常用的 CarPlay、Carlife、Hicar 都属于这一类。在目前已知的车载系统中，手机映射普及率相对较高，只要有汽车大屏与无线功能的汽车，几乎都可以使用手机映射系统。2. ROM 型汽车操作系统——小鹏与蔚来以及宝马、奔驰等通常情况下，像在手机操作系统中的小米 MIUI 一样，在基础操作系统的平台上定制 UI 与个性化功能。造车新势力中的小鹏与蔚来，以及宝马、奔驰等国际品牌，纷纷选择该思路。汽车底层操作系统主要有 QNX、Linux、安卓以及阿里巴巴旗下的 AliOS。这些操作系统包含系统内核、底层驱动等底层组件，等同于手机操作系统中的 iOS、安卓。3. 深度定制车载操作系统——小度车载 OS如今，不少汽车系统还可以深度定制，修改系统内核、实现座舱系统以及自动驾驶平台等。小度车载 OS 就属于深度定制车载操作系统。手机除了屏幕就没有更多显示终端，可汽车不一样，有电池组、发动机、车窗、车门、方向盘等诸多组件，所以需要深度定制。4. 国产车载系统，群雄纷起从基础功能上来看，汽车操作系统其实只有三类，分别是基础系统、定制系统与深度定制系统。在这三大类别中，有许多国产操作系统存在。它们仿效鸿蒙系统，试图在车载系统中打出一片天。① AliOS十年前，中国三大互联网公司百度、阿里巴巴、腾讯作为这波汽车操作系统国产化浪潮中的领头羊，其中最早开始研究的当属阿里巴巴，AliOS 的历史最早可追溯到 2011 年。那时候，鸿蒙系统尚未诞生，苹果 iOS 系统、安卓系统与 Windows Phone 在手机操作系统领域三分天下。阿里巴巴抱着打破垄断的念头，毅然进入该领域，推出 YunOS 操作系统。只可惜由于系统使用人数过低，以及与安卓系统的抄袭纠纷，最终被迫放弃开发。一个失败的手机操作系统，该如何处理研发团队？阿里巴巴想到的法子是转型，向整个物联网领域扩展，把汽车视作了一个重要的物联网切入点。于是在 2016 年，阿里巴巴与上汽集团合作成立了新公司斑马智行，而 YunOS 也摇身一变改名 AliOS，开始在汽车操作系统中大展拳脚。② 小度车载 OS与 AliOS 离奇的身世相比，百度旗下的小度车载 OS 诞生历程相对简单。从五六年前开始，百度就不满足于搜索业务，全力进军 AI 相关产业，而智能汽车正是 AI 重要的落地场景。百度 Apollo 是向汽车行业及自动驾驶领域的合作伙伴提供的软件平台。小度车载 OS，就是智能车联开放平台（Apollo ）的外在形式。囊括了几百家生态合作伙伴，支持上千个车载小程序，智能语音助手连接万物，百度的车载系统在底层系统并未做多少改变，核心在于定制化服务以及个性化交互。③ 腾讯车载小程序腾讯小程序是一套跨 OS、云端轻量化的车载应用开发框架，基于微信小程序的基础，能够让 300 万量级的微信小程序生态以更低成本、更快速地上车。简单来说，腾讯希望通过自己海量的小程序优势，通过数量优势战胜对手，在车载系统领域打造全新的超级 App。④ 华为 HiCar阿里、百度、腾讯，切入方式不同，带来的车载系统生态也各有特色。然而，它们并不是最有希望取得成功的国产车载操作系统。因为，华为也来了。华为觊觎智能汽车市场多年，一开始华为推出了手机映射系统 HiCar，HUAWEI HiCar 将移动设备和汽车连接起来，把手机的应用和服务延展到汽车，实现手机为核心的全场景体验，给消费者创造智慧出行体验。据介绍，华为 HiCar 运用了很多鸿蒙系统的设计元素，某种程度上可以理解为鸿蒙的初级形态。华为鸿蒙车机的主界面由多个卡片式小组件构成，显示的是推荐使用的应用程序与场景。至于鸿蒙系统广为传播的分布式能力，华为支持车机与智慧家庭联动。在车上轻轻一点，家中的智能家居产品也会随之运动。在原理上，华为鸿蒙车载系统基于 Linux 核心打造，属于定制型车载系统。不过，随着华为与长安和宁德时代共同打造的阿维塔推出，华为鸿蒙系统正在朝着深度定制系统迈进。接下来，拥有智能座舱、与自动驾驶系统联动的鸿蒙系统或许会给我们带来惊喜。四、6 大车载系统开源地址Android Auto：https://developers.google.com/cars/design/android-autoios Carplay：https://developer.apple.com/design/human-interface-guidelinesApollo (设计系统暂未开源)：https://developer.apollo.auto/document_cn.htmlAliOS：https://miniapp.alios.cn/index#/document腾讯车载小场景：https://cloud.tencent.com/developer/article/1377214华为车机： https://developer.huawei.com/consumer/cn/doc/distribution最后我想说，从阿里到华为，他们已经向世界证明了中国制造。当前全球汽车产业目前已进入产品价值被重新定义的全新阶段，各种类型的车载系统方案暂时也无法评估优劣。但随着自动驾驶技术的不断发展，以人为本的用户体验成为决定产品成败的关键因素，如何让消费者感受到与众不同的体验成为产品开发工作中的重中之重。车载设计万字干货！从零开始帮你学会 HMI 可用性测试前言这篇文章针对车载行业的可用性测试，我们做一下深入探讨，前面几篇跟下来的读者也都知道我写作的节奏，前面会深入讲解该主题的基础内容，并结合一些我工作中实际案例给予大家去了解，后半部分以实践案例为主，将前面基础知识融入进来，结合案例进行剖析可用性测试，这次文章大纲分为三大内容：可用性基础阅读文章 > 车载设计万字干货！帮你掌握 HMI 设计的知识体系这是我第一篇HMI系列的文章，对于车载的热爱，我的想法就是多去分享一些行业知识，接下来让我们一起追光吧 ～拓展阅读：阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/hmi-design-history
字体 英文 详细介绍 大家好，这里是和你们聊设计的花生~不知不觉已经是 2022 年底了，最近为大家整理了一篇字体合集，包含了我从今年 3 月份开始收集的 9 类高质量的英文字体，涵盖经典、优雅衬线、纤细手写、粗犷笔刷、力量感等不同风格。字体都是免费可商用，能满足设计中绝大部分的需求，并节省设计师寻找免费英文字体的精力。本文有字体风格的详细介绍和安装包下载链接，建议直接收藏，之后需要是直接下载即可~往期回顾：超全整理！设计师必备的3类书法字免费资源（附下载链接）大家好，我是和你们聊设计的花生~之前在社群有小伙伴问有没有免费可商用的毛笔书法字体资源，有肯定是有的，但授人以鱼不如授人以渔，今天除了为大家推荐免费好用的书法字体，还会为分享给大家优质的书法字入门知识和教程，还有免费的资源网站，让你即使没有书法功底也有办法做出好看的书法字体 ~往阅读文章 > 一、经典衬线体包含字体：Cinzel、Cormorant、Playfair Display、Butler、Roboto Slab详细介绍及安装包下载： https://www.uisdc.com/commercially-available-english-font-2英文衬线字体在设计中运用极广，这里的 5 款字体可以作为 Trajan、Garamond、Baskerville、Bodoni 等经典西文衬线体的替代。5 款字体气质各不相同，或庄重正式或优雅精致，可以满足不同的设计需求。二、经典无衬线体包含字体：Roboto、Marcellus、Montserrat、Poppins、Barlow详细介绍及安装包下载： https://www.uisdc.com/commercially-available-english-fontHelvetica、DIN、Optima、Sofia 等西文字体虽然经典，但没有购买版权不能商用。这里为大家推荐的 5 款英文体正好可以作为这些经典无衬线体的替代，字形气质相似且字体质量极高，无论是正文还是大标题都适用。三、纤细手写英文字体包含字体：Dattebayo、England、Sophia Christie、Reading、Cervanttis详细介绍及安装包下载： https://www.uisdc.com/thin-cursive这种字体秀丽灵动，适合作为装饰用在画面中，可以烘托氛围、平衡版式，并打破画满的呆板沉闷，使海报层次丰富有亮点。合适与文艺、青春、音乐及女性相关的主题。四、优雅英文衬线字体包含字体：TheNightWatch、Branic、Areminiscentsmile、NewYork、Qene-G详细介绍及安装包下载： https://www.uisdc.com/poster-design-5这种笔画极具设计感的英文衬线体在今年的海报设计中经常出现，国外设计媒体也预测未来会继续流行。字体风格优雅华丽，装饰性极强，适合以大字号展示，可以作为书籍、网页、海报等的大标题。五、铜版手写体包含字体：Italianno、England hand DB、Exmouth、Dynalight、Bolina详细介绍及安装包下载： https://www.uisdc.com/copperplate-script铜版手写体字形微微向右倾斜，不同的字母间有极细的笔画相互连接，延绵流畅，如同时书法家用钢笔一气呵成写成的，具有音乐韵律般的节奏和美感。字形精致，气质华丽典雅，在明信片、邀请函、红酒包装等设计上有广泛的运用，适合与女性、婚礼、餐饮美食等相关的主题。六、笔刷英文字体包含字体：Forturn、Takota、Good Brush、Shuher、Alinea详细介绍及安装包下载： https://www.uisdc.com/brush-font英文笔刷字体一般是用平头毛刷或者硬头马克笔直接写出来的，笔画粗犷利落，具有力量感，笔头留下的毛糙边缘及飞白也让这种字体更具质感。这种字体非常适合需要表达个性主题的海报，且在海报中通常作为视觉焦点进行处理。七、力量感英文字体包含字体：Theater、Berd、Thunder、SuperLine、Phyco详细介绍及安装包下载： https://www.uisdc.com/design-with-a-sense-of-force这种类型的英文字体最主要的特征就是线条粗重，作为海报主体元素时有很强视觉冲击力。适合大字号的展示，运用在与体育、运动及与男性相关的主题中，突出健壮有力的感觉。八、科技感英文字体包含字体：Aperat、Generic Techno、Liberation For 7 Kicks、XYBER、Arcade详细介绍及安装包下载： https://www.uisdc.com/6-science-and-technology-font这种字体的外形具有显著的几何块面特征，适合机能风、赛博朋克或未来科幻主题，提升画面的氛围感，可以作为海报或作品集的主视觉或装饰元素。九、潮流英文字体包含字体：Facón、Rubik Glitch、Modulor、Ron、Libre Barcode 39 Extended Text详细介绍及安装包下载： https://www.uisdc.com/6-trendy-english-font这种字体高度图形化，看起来更像图案装饰而非字体，但这也让它们比常规的字体更能引起人们的注意。如果放大后作为装饰元素用在酸性潮流海报中，可以有效增加画面的设计感和视觉张力。以上就是今天为大家推荐的 9 类常用英文字体合集，也算是送给大家的 2022 年底礼物啦~我在开始学设计时经常为找免费可商用的英文字体头疼，一是不知道是不是真的免费可商用，二是可商用的又觉得质量不佳。后来发现很多小伙伴也有和我一样的烦恼，于是决定收集和整理我觉得好用英文字体推荐给大家。也欢迎大家关注我的主页，获取更多免费可商用的中英文字体资源。夏花生的优设主页： https://www.uisdc.com/u/165152/home如果你喜欢本期推荐的话记得点赞收藏，也可以转发给身边有需要朋友 。如果有关于本文或者设计的疑问，可以在评论区提出，我会第一时间为大家解答 ~推荐阅读：免费商用！15 款设计师必备的中秋海报标题字体（附下载链接）大家好，我是和你们聊设计的花生~中秋将近，今天为大家推荐 15 款我精心整理的免费可商用字体，它们气质各不相同，质量也非常高，适合作为中秋海报设计的标题字体。阅读文章 > 做字库超简单！字体设计神器Glyphs系列教程（上）如果你想做出属于自己的字库？阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/9-english-font
自己的 设计师 工作 首先，设计是没有办法“速成”的。如果真的有人速成了，那一定是假象。所以，我们对待自己的成长要有耐心才行。本文所讲的，不是那种自媒体话语环境中那种的“7 天速成”、“培训 1 月拿高薪”之类。我想说的是，设计新人如何在刚参加工作的 3-5 年内，获得较为快速的职业成长，或者说打好一个快速成长的职业基础。因为我看到很多设计师，因为各种各样的原因成长速度比较慢。做到大概 P5 的能力后，即便继续死磕下去，也很难突破瓶颈获得下一步的进阶。我在设计领域十几年职场观察中，看到过很多这样的案例。所以本文简要整理了我对这个问题的相关思考，形成了几点建议，相信会对设计新人有所帮助。成为一位优秀的设计师，需要在走出校园参加工作的 3-5 年内，依次完成以下三步。更多成长干货：设计师快速成长有哪些秘诀？我总结了这2个步骤！编者按：自学设计时有哪些方法可以帮你飞速进步？阅读文章 > Step1. 把设计基础打结实在校期间认真把设计基础打牢。基础分为两部分，一个是专业基础，一个是设计思维基础。专业基础：目前高校的设计专业是以设计媒介来划分的，如果学的是视觉传达，那么就好好研究练习一下平面设计基础，点线面构成、色彩搭配控制、板式设计、字体设计、材质把握、画面构图与整体效果的把握等等，尽可能的多看、多学、多练。思维基础：建立一个正确的设计认知，设计即沟通。设计不是为了设计师的自我炫技和耍帅，设计是为了服务雇主的设计目标。为了实现设计目标，我们才需要调动我们的浑身解数与毕生所学。建立好的专业基础才能让自己在以后的工作中走的快一些，建立好的设计思维基础才能让自己在未来的工作中走的远一些。Step2. 进入一个好的设计环境，拿到一些好项目做，是最好的学。但并不是做任何项目都对自己的成长有利。有些垃圾项目，做多了会让自己的设计越做越烂。谨慎选择自己的第一份工作，进入到一个好的成长环境，接触到一些好的设计项目锻炼机会，与优秀的设计师共事，才有可能获得好的成长。设计师在工作前 3 年应该更侧重专业能力的提升，所以做选择的时候应该尽量选择一个好的专业成长环境。同样的一颗盆栽，养在不同的土壤和光线条件下，生长状态完全不同。原研哉 25 岁毕业后进入到的第一家公司是高田修地设计事务所，高田修地（新丑风高田唯的爹）也是一名非常优秀的设计师。庵野秀明能够创作《新世纪福音战士》，也是因为他曾经有在《超时空要塞》、《风之谷》等牛逼项目的锻炼和成长机会。所以，在项目中锻炼自己，在牛逼的项目中才有机会锻炼出牛逼的自己，在傻 X 的项目中可能更大概率只能锻炼出傻 X 的自己。好的成长环境在信息环境、思维环境、项目环境三个方面都应该是好的，这三个方面分别影响一名设计师的视野、思维和行动力的发展。1. 信息环境我们能够看到什么决定了我们可以想到什么，我们可以想到什么决定了我们可以做出什么。我们把能够看到、听到、感受到的东西可以统称为信息输入，这种信息输入来自你所在的行业、公司、团队的视角和视野。设计师需要持续、高频次、多元的信息输入，才有可能刺激设计师大脑的第二次发育。2. 思维环境思维环境，是指你所在的团队/公司里，大家都是怎么思考问题的。大家思考问题的方式会相互影响，最后形成一种思维环境，一种认知和处理问题的统一方式。可能你会觉得思考是个主观的东西，跟选择在哪工作关系不大。但实际上工作几年我们会发现，在不同工作环境工作的人，他们大脑里思考的问题会不一样，思考的方式方法也不一样，更重要的，思维习惯也不一样。设计师在第一份工作需要养成好的思维习惯，懂得好的思考方式，懂得如何独立的做设计批判（Design Critique）。才有可能对上面第一条里拿到的信息进行有价值的思考和加工，才能够加速我们的专业成长和职业发展。3. 项目环境这是最显性的。最好的学习是实践，设计师在第一份工作中能够进入到的项目，能够独立处理的 case，这些情况直接影响到了设计师的发展速度。如果工作第一年时间一直在给别人打杂，没有机会独立做项目的话，这是对自己年轻大脑的实力辜负。这三个方面是相辅相成的，如果都有迅速提升，相信作为一个设计师的洞察力也会有所提升。关于这第二点，我个人的工作经历恰恰是一个很好的反面教材。可能在学校时接私活相对比较顺，我在毕业时选择了做一名自由职业者。在专业方面，更多的是依靠自己个人的学习能力和悟性来成长。作为自由职业者需要很强的自我管理能力，这方面我做的并不好。并且几年之后因为收入压力再重新进入职场时，会有一种从零开始、重新来过的感觉。所以不建议大家一毕业就做 freelancer，除非你的作品已经在网络上得到了认可，并且积累了一定的人脉资源。Step3. 养成好的职业习惯我觉得作为一名设计师，应该培养以下几个职业习惯：1. 保持思维上的勤奋很多设计方案需要在客户或老板觉得已经 OK 的基础上再进一步思考，即便已经没时间再去改进。我们最终交付的设计方案很多时候都是一个折中的相对合理的方案，并不完美。这是正常的，但是设计的过程并不应该就此结束。再多想一点更多的可能性，即便工作中没有时间继续改进实施，但在自己脑袋里面可以做很多工作。可能很快就在下个设计任务中有机会实现你的新想法。2. 与”烂设计”要保持距离我们每天都被不好的设计包围着，对烂设计不能容忍或者习惯接受，要爱憎分明才好。这样可以让自己持续有一个好的设计价值观。我们生活工作中每天都要接触和使用很多设计产品，我们不能因为烂设计遍地都是，就觉得烂的东西也是合理的，甚至觉得也可以模仿或者借鉴。3. 让行动力成为一种习惯设计的过程是一个行动的过程，在动手的过程中去改进，在一版一版的 demo 中去提升，如果可以把“共情——定义——创想——原型——测试——改进”这样的设计流程强化到自己的行为习惯中，那么自然而然就会形成一种强大的设计行动力。4. 保持开阔的视野你能看到什么，决定你能做什么。设计是一门综合学科。充足的知识和技能补给，多元的信息刺激，才会刺激有设计灵感的产生。5. 习惯休息，不要透支自己的身体长期在疲惫状态中做设计，最终只会把自己的才能挥霍掉。设计过程是一个高频脑力消耗的过程，不要持续透支自己，习惯休息，并且要不断强化自己的体能。更科学的管理自己的时间和作息，不熬夜完全也可以做到高效输出。认真、努力生活，会获得更多的能量，来支持你的设计工作。以上，关注我，一起加油！Design，and getting more.欢迎关注作者微信公众号：「柴林的设计笔记」本篇来源：优设网原文地址：https://www.uisdc.com/growth-of-new-designers
世界杯 足球 用户 作为全球最火爆的体育赛事，世界杯由于其独有的稀缺性，被外界誉为四年一次的足球盛宴。根据国际足联主席因凡蒂诺预测，2022 年的卡塔尔世界杯赛事将会吸引到全球超过五十亿人观看，这一人数占全球总人数的比重超过 60%。以往球迷们观看世界杯，更多是通过电视或者央视频、优酷这种传统的互联网视频平台，而在 2022 年这个冬天，抖音花费 10 亿巨资，成为了国内首个获得世界杯直播版权的短视频平台。作为拥有 6 亿日活的抖音，将会如何跨界设计世界杯专题，让亿万球迷能在抖音享受四年一次的足球盛宴，本期设计大侦探，就来全面拆解抖音世界杯专题。往期拆解：世界杯专题！8500字全方位深度拆解懂球帝APP2022 卡塔尔世界杯已经拉开帷幕，相信大家从这周开始，都已经陷入四年一次的狂热的足球氛围中。阅读文章 > 一、栏目入口抖音世界杯的入口在抖音头部一级导航栏最左边，和周边、关注、商城以及推荐并列。世界杯的栏目首页从上至下主要分为 5 个部分，分别是轮播（当日热门赛事以及活动）、金刚区（包含赛程、积分榜、有奖预测和我的主队入口）、比赛直播（当日赛事）、名嘴聊球（签约足球大咖）、赛事热点（热点头条资讯）、热门球星（入驻足球巨星）、世界杯好物（周边商城和抖音生活服务）、重磅热播（抖音自制节目）、大家都在拍（平台用户自创视频）和视频信息流（世界杯专题相关视频）。二、内容策划抖音在内容策划方面，几乎把前央视解说团队都邀请过来了，比如黄健翔、段暄、刘建宏这些家喻户晓的的足球主持人，都在抖音单独负责至少一款足球综艺栏目。除了解说团队，抖音还邀请了众多跨界娱乐综艺大咖，为球迷一口气送上 8 个原创足球综艺节目。从这个版块可以看出，抖音对此次世界杯的重视度之高，就像卡塔尔为了举办世界杯投资 2200 亿美元一样，劣势可以用金钱弥补。1. 内容专题① 观赛指南「观赛指南」是指在一场比赛开打之前，各方媒体对这场比赛进行的赛事分析和预测。足球这项运动，由于充满了竞技性，一场焦点比赛，从赛前到比赛，再到比赛后，都充满了无数话题。而观赛指南，可以为球迷提供完整的比赛情报和指南，为比赛做预热。分组解析「分组解析」是针对世界杯的 8 个小组（世界杯有 32 支参赛球队，分为 8 个小组，每个小组 4 支球队，前两名可以晋级到淘汰赛）进行出线形势分析。作为四年举办一次的比赛，对于每支球队来说，都是非常宝贵的机会，所以关于小组的出线分析也往往是世界杯的热门话题之一。从内容设计看，抖音的分组解析包含了专家预测（名嘴大咖）、小组赛程、历史数据（历史对战记录）、热门球员（小组热门球星）和热门动态（相关的足球资讯）五个内容。赛程解读「赛程解读」就是针对单场比赛进行解读，包含比赛前瞻（专业的足球分析）、专家点评（世界杯专家团，含金量高）、网友热议（精选网友的高质量分析）、近 5 场战绩、球队名单、球员 PK（核心球员）、积分榜以及相关的最新足球资讯。从这个栏目的内容策划看，由于缺少足彩竞彩和有深度的内容，显得中规中矩，稍显严谨，欠缺互动。② 比赛日报「比赛日报」就是根据每天结束的比赛生成当天所有比赛的战报，这个页面包含了直播回放、图文战报、视频集锦、赛况详情、技术统计和积分榜等内容，球迷也可以切换不同的比赛查看当场比赛详细的战报。直播回放「直播回放」对于体育赛事来说非常重要，比如像深夜场的比赛，大部分球迷都很难熬夜观看，这个时候只能通过直播回放来观看比赛。抖音的「直播回放」提供了全场录播回放、全场集锦（分长集锦和短集锦）、球星集锦和精彩时刻集锦，可以满足不同用户的观看需求。③ 热议话题当一场比赛结束以后，话题讨论的热度将会达到最高值，比如阿根廷输给沙特的比赛，全网球迷都在心疼梅西。抖音在「热议话题」的内容设计上，不仅有独立的图文专题页还有白岩松的「白说世界杯」短视频栏目，给球迷带来全方位的内容解读。2. 视频节目① DOU 来世界杯「DOU 来世界杯」是抖音官方自制的视频节目，这个节目合计 29 期，每天更新 1 期，内容非常丰富，包含比赛复盘、每日看点、球星球队故事和赛事预测等。从栏目定位看，这个栏目直接对标曾经央视体育最知名的《天下足球》栏目，更是邀请了主持多年《天下足球》的主持人段暄亲自负责，这不仅可以确保内容质量，还可以帮助抖音赢取众多 80、90 后球迷的好感（国内 80%的 80、90 后球迷都是看着《天下足球》长大的），既卖专业，也卖情怀，一举两得。② 宏哥侃球「宏哥侃球」是资深体育解说员刘建宏独家打造的足球直播综艺，合计 12 期。刘建宏和段暄一样，是央视体育另一个王牌节目《足球之夜》的制片人和主持人，甚至是第一位获得“金话筒奖”的体育节目主持人。从内容定位看，这个栏目主要以刘建宏通过邀约足球名宿和名人明星聊天的形式，为球迷带来不同角度的比赛解读和话题讨论。从嘉宾阵容看，不仅邀请了李明、徐亮、徐云龙这些足球大咖，还邀请了苏醒、姜昆、樊登、大能、隔壁老樊等跨界名人，可谓群星熠熠。③ 黄健翔谈「黄健翔谈」是前央视主持人黄健翔的个人脱口秀节目，合计 24 期。从内容定位看，这个栏目主要是黄健翔针对每日比赛进行看点分析，讲述队伍、球员之间的渊源与故事，专业性较强，差异化低。④ 依然范志毅「依然范志毅」是前国足名宿范志毅打造的直播节目。从内容定位看，这个栏目集合了脱口秀、电竞 PK、国际球星挑战等娱乐内容，其次还会邀请 02 年世界杯国足的众多足球大咖一起聊球。范志毅作为前国足名宿，不仅知名度高，近年来在社交媒体平台也以独特的“范式辣评”成为了众多网友崇拜的偶像，话题热度非常高。⑤ 懂球大会「懂球大会」是以段暄、黄健翔和刘建宏为常驻嘉宾，搭配各路懂球大咖赛前或赛后连线的足球直播节目。从内容定位看，这个节目主打前央视解说铁三角的卖点，再邀请其他足球嘉宾围绕每期的热门话题以直播火热开“吵”的形式为球迷们打造一款直播时代的另类足球节目。⑥ 黄家足球班「黄家足球班」 是黄健翔联手德云社打造的直播节目，合计 12 期。从内容定位看，这个节目把足球的专业性稀释，加入了相声的元素，从而拓宽用户人群，让大众都能看得懂，看得进去，感受到足球的乐趣。⑦ 大咖侃球「大咖侃球」由抖音官方出品。从内容定位看，这个节目主要以邀请体育、文化、财经、商业等领域的名人大咖，围绕世界杯开展泛人文社会热点话题讨的论，旨在打造一个专业又具有趣味性、互动性的世界杯抖音脱口秀。不过这个节目话题宽度太广，目标用户不精准。⑧ Hi！足球少年「Hi！足球少年」是世界杯官方赞助商海信独家打造的一款足球少年选秀节目，通过节目选拔足球热忱最突出的 4 名少年奔赴卡塔尔。这个节目邀请了李明、米卢等国足退役名将，还有柳岩、梁汉文这些娱乐明星，从嘉宾阵容看，这个节目以娱乐选秀为主，目前 8 期节目已全部更新结束。三、比赛数据历时 29 天的世界杯，将会进行 64 场比赛，最终决出冠军、MVP 和金靴奖等。随着互联网泛娱乐的发展，相比过往大家主要通过电视观看比赛这样静态的形式，现在的足球比赛不仅拥有丰富的直播形式，而且每个平台都有自己独特的看球文化。1. 直播间抖音的比赛直播间，功能非常丰富，主要包含六个内容，分别是直播、聊天、阵容、赛况、看点和预测。「直播」就像视频弹幕一样，大家可以畅所欲言的一边看球一边聊天。在底部的聊天窗口，点击「分享」后，不仅可以保存本场比赛即时生成的精彩瞬间，还能邀请好友一起观看比赛直播，互动非常强。「聊天」这个功能，充分利用了抖音的社交属性，通过邀请好有，可以像建立群组一样快速创建一个直播聊天群，非常便捷。这个功能就像一个VIP包厢，为用户提供了一个相对私密的空间，满足不同用户的需求。「阵容」是指当场比赛的出场人员统计，包含首发阵容、球员统计和替补球员等信息，点击球员头像以后，可查看球员当场比赛的数据，包含进球、射门、传球成功率等，非常全面。「赛况」是指当场比赛的详细战况，包含各种技术统计，比如控球率、射门数、传球成功率等。「看点」就是把一场比赛的精彩时刻快速生成GIF，不仅可以作为当场比赛的赛况回放，也降低了用户传播的行动成本，吸引用户分享传播。「预测」就是竞彩，球迷可以通过金币预测当场比赛的胜平负、两队总进球数以及其他话题。① 播放器「播放器」的功能非常丰富，除了弹幕、倍速、视频画质和电视投屏这样的常见功能，抖音还支持多种类型的解说和视角方式。比如同一场比赛可以切换不同的主持人（央视主持人、退役运动员还有粤语主持），还支持球星、无障碍字幕、现场原声、战术机位、场馆全景等四种视角方式，观看体验非常丰富。2. 数据作为一项体育运动，比赛数据的统计分析至关重要。球迷需要查询世界杯的详细赛程、积分榜、射手榜、球队和球员的详细数据。① 赛程「赛程」主要为球迷提供世界杯的详细比赛赛程，用户可以直接预约比赛直播。当球迷预约后，抖音会一键生成比赛海报吸引用户传播，设计得非常巧妙。其次抖音的设计团队非常用心，相比其他产品的「赛程」栏目，他们会用一句简短的话来描述每场比赛的结果或前瞻，让「赛程」这个冰冷的栏目加入了温度。② 积分榜「积分榜」主要为球迷们提供 8 个小组的积分排行详细，包含胜平负场次、进失球数和小组积分。③ 晋级图「晋级图」主要为淘汰赛服务，当小组赛结束以后，每个小组的前两名会进入淘汰赛，球迷可以通过这个图俯瞰世界杯的晋级明细路径。④ 射手榜「射手榜」主要针对球员个人，统计的数据非常全面，包含进球、助攻、射正、关键传球、红牌、黄牌等数据。球员主页「球员主页」就是足球运动员的详情落地页，主要包含六个部分，分别是基础资料（姓名、年龄、身高、体重、位置、身价、效力俱乐部等）、精彩集锦、球员单场表现、球员累计数据、球员赛程和球员百科。⑤ 球队榜「球队榜」和「射手榜」一样，包含进球、助攻、射正、关键传球、红牌、黄牌等数据。球队主页「球队主页」就是参赛球队的详情落地页，主要包含六个部分，分别是基础资料（世界排名、总身价、平均年龄、历届最佳成绩等）、精彩集锦、球队单场表现、球队累计数据、球队赛程、热门球星、球队阵容、历史数据和球队百科。3. 互动从 2014 年开始，世界杯就成了一个全民狂欢的盛宴，可谓全民参与，全民娱乐。由于受政策限制，抖音没有足彩版块，而是通过虚拟金币的形式设计了有奖预测和世界杯乐园、足球答人等游戏。其次为了鼓励用户参与到世界杯的盛宴中，抖音还设计了一套世界杯特效，提升用户的参与度。① 有奖预测「有奖预测」其实就是足球竞彩。足球竞彩作为支撑足球运动发展的重要支柱，也是全民世界杯的主要动力之一。由于国家政策等原因，抖音使用了虚拟的金球币用来作为竞彩的筹码，增加娱乐性。「有奖预测」的页面设计比较简单，头部为用户的钱包（金币和红包数量），主视觉为当前比赛的对阵双方，右上角是活动规则和预测记录，右下角是赚金钱币和预测榜。预测的内容主要是比赛的胜平负、总进球数以及其他根据当前比赛设计的竞彩内容，比如梅西会不会进球，比赛会不会出现头球等。整个预测页面的内容，相对而言比较简单，主要以提升用户参与度和用户拉新为目的。当用户确认预测后，抖音设计了一个用户拉新的功能，只要邀请好友助力就可以获得10万金币，如果是一个新用户，则可以获得3倍奖励。钱包「钱包」的内容主要分为三块，头部是数据板，包含金球币数量、现金金额（金球币可以兑换成现金，提现到自己的银行卡）、奖品数量、优惠券数量和抖音成就（类似勋章）；中间是「金球币抽奖」，用户可以使用金球币进行抽奖，奖品包含足球、优惠券等周边商品；底部是「公益版块」，用户可以使用金球币购买足球等方式助力贫困地区的乡村学校捐建足球场。预测榜抖音统计了全站预测榜的球迷，分为全国榜、本地榜和朋友榜。榜单的设计，能增加球迷的攀比心理，提升用户活跃度。金币游戏世界杯乐园「世界杯乐园」是一款足球游戏，玩法比较简单，用户通过体力可以让角色不断前进获取福利。而用户获取体力的方式需要做任务、看比赛以及邀请好友。足球答人「足球答人」是一款问答竞技类型足球游戏。这款游戏设计得非常有创意，三人随机组队，通过答题的形式模拟足球比赛在线 PK。第一个回答正确的用户会有模拟进球的画面，吸引球迷抢答，其次模拟世界杯的赛制，胜利后可以晋级下一轮，最终决出冠军，非常有趣。② 我的主队每个球迷都有自己喜欢的球队，这支球队就称为「主队」，比如一个喜欢阿根廷的球迷就会把阿根廷看作自己的主队。这种带有鲜明爱恨的元素，也是足球这项运动的魅力之一。用户进入「我的主队」以后，需要设置自己的主队，选定后，将会展示主队的赛况、比赛数据和视频集锦。用户如果更换主队，还需要消耗金币，可见抖音产品团队对球迷的研究足够透彻。通过建立「主队」，不仅可以增加用户的黏度，还能建立关系链接，提升用户的留存率。③ 世界杯好物燃情好物「燃情好物」就是向球迷销售世界杯相关的周边商品，比如世界杯吉祥物、钥匙扣、手办、纪念品等物品。吃喝玩乐世界杯独有的文化就是喝着啤酒看比赛，所以「吃喝玩乐」这个版块接入了抖音的「生活服务」，球迷可以在抖音购买夜宵、小吃、奶茶等，非常方便。④ 大家都在拍为了鼓励用户参与到世界杯的狂欢中，抖音为世界杯专门设计了一套视频特效，用户可以选择喜欢的特效录制，提升用户参与度。四、总结思考1. 商业层作为一个短视频平台，抖音为什么舍得花费巨资打造世界杯栏目，通过此次对抖音世界杯专题的拆解，我认为这是一次对针对 80、90 后群体的二次拉新和激活。从抖音重金邀请前央视主持人阵容看，抖音正在尝试通过世界杯这样能激发球迷情怀的载体把那些边缘用户重新拉回来。「DOU 来世界杯」不仅直接对标央视体育曾经最知名的《天下足球》栏目，甚至连主持人都不变，既卖内容，更卖情怀。像笔者这样以前每周只会打开几次抖音的用户，通过此次世界杯的直播，变成了日均使用超过 6 个小时的重度用户，这在以前简直不敢想象。当然，和四年前的优酷等互联网视频平台面临的情况一样，当世界杯硝烟散完以后，抖音又如何通过高质量的内容留住这部分用户群体，是一个问题。2. 内容层在过去，多数用户对抖音的印象是一个内容质量低劣、靠娱乐搞笑博眼球的短视频平台，但从此次世界杯的内容策划看，抖音不仅诚意十足，一口气推出 8 档原创足球直播节目，更是邀请了众多体育名嘴、知名运动员和跨界嘉宾输出高质量的内容。这对广大球迷来说，实在太过瘾了，已经很久没有这样的足球盛宴。而且相比过去传统的图文时代，加入了短视频传播媒介的世界杯，给了亿万球迷全新的看球体验，切换不同的解说风格、直播视角，在抖音直播间邀上几个好友，就可以一边聊天，一边看球，这样的看球体验，太爽了。3. 体验层抖音产品设计团队对世界杯专题的设计，无论是视觉、交互还是产品体验，都非常用心。比如在「赛程」页面，通过一句简短的赛况描述，不仅丰富了设计形式，还传递了设计的温度（其他的体育产品相比，「赛程」页面更像一个冰冷的机器，除了播报数据，没有任何情感）。还有像「足球答人」这样的游戏，完全以模拟世界杯晋级赛制的形式设计，在我首次试玩的时候，就开始为了“进球”进行“抢答”，最终拿下比赛冠军。这样让用户尖叫的设计，真的让人爱不释手。参考文献：当抖音进军世界杯，TikTok 挖了 NBA 墙角终于，我们都能在抖音看世界杯直播了“抖”来世界杯：流量盛筵，意义几何？欢迎关注作者微信公众号：「设计大侦探」本篇来源：优设网原文地址：https://www.uisdc.com/douyin-world-cup-features
颜色 饱和度 图层 大家好我是态爷，上色是很多同学在学习插画过程中觉得比较难的一部分，今天就和大家分享我的上色思路。我会用例子详细展示如何为一张自然场景的插画上色。往期教程：大神总结！学插画必知的6种构图小技巧构图决定了整体画面的基调，是绘画的一个关键知识点。阅读文章 > 先看一下成品图：这张插画的草图是我之前练习构图的时候画的，比较粗糙，先细化一下。1. 铺底色草图细化完成，接下来是找参考图。参考图的作用是在动笔前对整个画面的构图、造型、色调有一个大概的心理预期。这一步非常重要，不能省略，没有参考图我宁可不动笔。我想画一个蓝天白云下的大草地，有飞机单车，远处还有点雪山，参考图也按这个方向找。通过参考图，我得到了一组基础配色，这一步需要注意的是不要用吸色的方式找颜色。照片的颜色是由一堆杂乱的像素混合而成的，而不同照片的颜色混合也是不一样的。吸色只能吸到一个独立像素点，而不是一个整体的颜色，更谈不上色彩之间的搭配。要用眼睛去看，拿画笔的是人，不是电脑。接下来是进一步确定配色比例。这里有一个比较通用的配色公式「60＋30＋10」，大体分为 2 种：60％背景色＋30％主角＆配角色＋10％点缀色60％主体色＋30％次级色＋10％辅助色这个公式可以根据你自己的情况来调整，比如 70＋25＋5，或 60＋35＋5；而且配色公式不是绝对的，只是辅助手段，不要陷入到教条主义中。在这个画面里，飞机是绝对的主角，所以用大片的蓝天来做衬托；草地的绿色饱和度不能高，绿色不能太纯，否则就抢戏；背景群山混合了更多天空的环境色，整体压成深蓝色，这样背景就能统一成一个蓝色调，然后通过“蓝色—绿色—黄色”的近似色渐变逐渐延展到前景来。提升完善人物的固有色和明暗划分。除了飞机的黄色，其他所有颜色都是低对比度低饱和度，比如骑自行车的人，衣服的颜色基本是直接从背景中提出来的，仅靠自行车和 T 恤的黑以及清晰的外轮廓与背景作分离。然后是背景的初步细化，这一步基本确定背景的层次和颜色。场景的层次变化是很丰富的，可以通过明暗对比、色彩对比、塑造程度、清晰度等的递增递减来表现从远到近的空间感。2. 背景细化接下来开始细化。我的习惯是先从最远处画起，然后逐渐往前推。这样的好处是可以无脑推空间。按塑造程度从 1-10 来说，前景是 9 或 10，那么背景就是 1 或 2。这样就可以很轻松的确定画面内元素的造程度，从而搭建整个空间。这样做的前提必须是对整个画面有了一个明确的思路，并且铺好底色。在这一步的时候，前面找的参考图就全都派上用场了，对着画就完事了。不过在画着的时候记着当时的部分塑造程度是多少，环境色和固有色的比例是多少，让空间意识一直扎根在脑海中。然后是远山的细化。如前面说到的，空间远处的色彩对比度要低才能来开视觉层次。低对比度下的明暗，尽量统一在一个色系里，远处的山甚至都可以不用暖色，直接蓝色偏点紫取个低饱和度，在大色调的对比下可以直接给山地脑补一层棕色。画水下的人物也可以用这个方法。前景草坡的地面虽说层次最丰富塑造最完整，却也不用一根一根草去画出来。只需要把基底颜色做丰富了，加点土块石头，然后在色阶之间加几根冒头的草。就像画头发一样，靠的不是发丝，而是基础的层次。3. 主体细化我在画画的时候习惯把图层整理的比较有条理，最上面是线，接着是明暗，最底下是用来做剪辑蒙版的底色，中间是根据颜色或部位分的固有色。在进行单个部位的塑造时，我可以直接给图层加个 ALPHA 锁定，改起颜色来也很快，后期维护起来特别简便。骑单车的人不是主角，所以只需要在明暗的基础上加一到两个色阶就可以了。图层的分法还是得按画风来定，比如厚涂，我可能就直接一两个图层完事了。飞机的处理也是同理。虽然线和固有色已经分的很清晰了，也不能忘了空间二字。我给下方机翼的暗部加重了颜色，再加一个较强的反光，然后减弱了上方机翼的颜色，这样上机翼-机身-下机翼的空间就能分出来了。到这一步，整个画面就都完成了。4. 整体调色画完之后，我一般会进行一个简单的调色。调色的目的一个是统一色调，再则对整体颜色进行一次大的倾向调整。一般是在图层上方新建一个调整图层，用的是「可选颜色」。先对背景进行一个简单的调整，把暖色部分加一些饱和度，再把绿色往冷了调，目的是让背景色调高度统一，以及进一步突出飞机的黄色。然后是画面整体的一个调整。先用「曲线工具」调整了一下黑白的色阶，再用「可选颜色」让整体暗部偏蓝；然后提亮了黄色部分的明度，再减一点点饱和度，因为暖色饱和度太高容易焦躁；最后再新建一个图层加一点杂色，用「颜色加深」叠上去，为画面增添质感。最后请@麦点盛世刘辉 帮我配了字，完工。以上就是我日常上色的过程分享，希望对正在学习插画的同学们有帮助。「关注我」优设账号： https://www.uisdc.com/u/87222/publish/post微博账号： https://weibo.com/u/6517085292站酷账号： https://www.zcool.com.cn/u/16953096优设大课堂课程： https://xue.uisdc.com/teacher?id=5f35175002a5853cf70fc51d推荐阅读：优设专访插画师态爷：画完100张电影海报后，我终于学会怎么做好一碗蛋炒饭大家好，这里是和你们聊设计的花生~最近非常幸运，有了一次专访插画师态爷的机会。阅读文章 > 听说你不会打光？高手总结了8种常见的打光方法本文梳理了8个常见的打光方式，结合清晰的手绘图例，让知识点一目了然。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/illustration-coloring-process
场景 用户 需求 在产品设计中，我们经常会听到这些声音，“这个设计没有考虑用户的使用场景” “用户行为和场景不匹配”…… 每个人都有说到“场景”一词，但好像我们对于“场景”的理解又不太一样，那么场景到底是指什么呢？理解它又能够帮助到我们做什么？基于场景化的设计又当如何做呢？本文通过以下四个范畴，简要阐述一些场景化设计的一些概念，以帮助我们更好去理解它。更深入的场景化设计干货：万字干货！九大章节帮你掌握场景化设计思维编者按：本文从《无界面交互》一书说起，总结了场景化设计思维的知识点，帮读者掌握场景化设计。阅读文章 > 一、什么是场景化设计1. 什么是场景了解场景化设计前，我们先理解什么是场景，在实际生活中以及各类词条中，对于场景的定义会有些区别。百度百科，场景是电影或戏剧等艺术作品的场面，泛指人、空间、时间和事件构成的情境。梁宁《产品思维 30 讲》，将场景分为两个部分，“场”是时间+空间，“景”是情境和互动，当用户停留在空间的时间里，有情景并让用户产生互动，就是场景。书籍《About Face 4 交互设计精髓》场景是利用故事情节或者情境的叙述，通过叙事的手段方法设计用户目标的交互过程。不难发现，这里对于场景的描述都提到了人、空间，时间，以及要做的事情，大家一下就能联想到了 4w1h 分析法，简单描述就是谁（who），在什么时间（when），什么地点（where），通过什么行为（how），要做什么事件（what），这就组成了一个具体情境，也是我们经常讨论的用户场景，我们也可以简单称之为场景五要素。举个例子：小明早上起来后就去洗手台刷牙，人物小明，时间在早上，地点在洗手台，行为是用牙刷刷牙，目的是清洁口腔，这就是一个完整的场景。2. 什么是场景化设计有了对场景的定义，那么就不难理解什么是场景化设计了。场景化设计就是结合我们的产品需求，通过场景化的思考方式，即场景五要素，针对不同的场景结合需求制定不同的设计目标。二、场景五要素设计案例分析场景不是凭空猜测想象的，它需要有上述提到的 5 个要素中至少 2 个以上才能构成一个情境，下面我们分别从人（who）、时间（when）、地点（where）、行为（how）和目的（what）5 个要素在一些设计案例中的运用。1. 人（who）① 千人千面我们经常听到的千人千面，实质就是针对不同的用户画像，提供精准化的内容，比如头条新闻、微博推荐等，都是结合算法针对不同的用户提供个性化的内容。② RFM 模型基于用户分层，就是将人这个群体要素进行拆解分组，针对不同价值的用户，实现精准的营销策略，从而实现最大的 ROI。③ 为中间用户设计也是基于用户分层，通过用户群体对于系统使用的熟悉情况，从而把用户划分为新手、中间用户和专家，这么做的目的便于我们会把注意力集中在中间用户群体上。因为每个人接触产品时都是新手，但他们很快就会进入到中间用户，所以在产品设计中，我们需要做到既不迎合新手，也不迎合专家，而是把大部分工作和精力放在永久的中间用户上。2. 时间（when）时间也会有不同的类别，比如固定的时间点，或者周期性时间段。饿了么会根据不同时间点，推荐符合该时间的食物，比如在上午、下午、傍晚和深夜推荐的食物都会有一些差异。3. 地点（where）《春秋》写到，橘生淮南则为橘，生于淮北则为枳，说的就是地点会影响最终事物的性质和结果。举个例子，美团会根据用户切换不同城市地点，结合当地提供的服务，智能推送用户可能会用到的功能。当你在上海，猜你可能会需要疫情相关的服务；当你在齐齐哈尔、海拉尔区，猜你可能在旅游，需要查路线；当你在西藏日喀则，那就没有服务了。当然上述举例只是一个狭义的地点，在一些软件设计中，“地点”也有可能是不同硬件的区别，比如用户用安卓手机和 pc 电脑之间的区别。4. 行为（how）行为是用户通过一系列手段，能够达到他们目的工具或方法。行为的手段有很多，我们拿界面设计举例，《交互设计精髓》有一个理论，界面的设计呈现，应当是无限接近用户的心理模型，而不能基于实现模型（也就是开发逻辑）。当表现模型与用户心理模型无限接近，用户的行为也就会越顺畅，能够通过已有认知或习惯完成这个目标；反之，用户操作行为可能卡在了某个节点，或者没有完成自己的目的。所以当设计越接近用户的认知和预期，用户则会感觉容易理解，从而用户行为也符合我们的预判。举例说明，假设我们需要用奶油做一个苹果，希望用户愿意拿起它并愿意吃，应当怎么做呢？我们肯定会在形状、颜色以及气味，让它尽可能和真实场景的苹果更无限接近，这才符合用户对它的期待，最后用户才会愿意拿起并送入到自己的口中。5. 目的（what）在产品设计中，我们也称之为痛点或者爽点。它是一种需要，简单说就是要明白用户要什么。举个例子，因为最近疫情封控，我们需要做一款帮助大家做菜的产品，下面拿我和我老板做饭过程举例说明。我老板的做法过程，第一，我要吃什么，甜的辣的；第二，我需要哪些食材；第三，配上精美的盘子，美美地拍上一张照片。我的做饭流程，第一，冰箱里有什么，什么菜快坏了；第二，这些菜大概组合能够烧出一道什么菜；第三，用一个大盘子盛，这样可以少洗一个碗。简单看我们好像都是为做一顿菜，但目的完全是不一样的。我老板除了要吃上自己喜欢的菜，还有一点精社交的需要；而我嫌做菜麻烦，吃饭就是简单对付，填饱肚子就可以了。所以说同样是做一顿饭菜，两个人的目的（痛点）是完全不一样的，而如果到我们设计出来的产品，没有对用户目的做详尽的了解，最后出来的产品和用户的行为之间可能就是南辕北辙。三、场景化在产品设计中的价值有了上述对场景化的设计案例分析，我们发现场景更多思考的是用户需求。但是我们在做产品时，我们也会有产品需求，即我们要什么。通过对需求是否贴合用户场景，不仅可以帮助我们洞察需求，梳理核心价值点；还能帮助我们理解用户，提升产品体验。1. 洞察需求，梳理核心价值点梳理需求：初期的需求往往比较抽象，以功能为导向，这时候我们可以通过场景化的方法，深刻地理解需求，梳理并挖掘产品的新机会和新功能点。辨别真伪：通过场景化的思考，可以帮助我们筛选哪些是真需求，哪些是伪需求。主次矛盾：理清这些需求的强弱和先后，用户痛点的优先级，先解决和后解决哪些问题。2. 理解用户，提升使用体验① 理解需求上述提到，需求和场景紧密结合的，不存在没有场景的需求，所以设计前一定要先分析需求的价值及合理性，同时对场景作进一步细化和拆解，以便能够输出更加合理的设计方案。② 了解用户如果不了解用户的场景，单纯的纠结于界面设计，就像是盲人摸象，很容易陷入自己的胡乱揣测，导致设计出来的方案不一定符合用户的使用场景。③ 与用户共情把自己变成用户，站在用户立场考虑问题的思维方式。特别是 B 端产品，企业采购产品是为了提高组织关系的效率，产品功能往往强大且复杂，设计师在面对众多的业务需求，会很容易陷入到产品的逻辑规则中，而忽略用户使用过程中的感受。四、如何进行场景化设计理解了什么是场景化设计后，以及场景化设计的价值点后，我们再来看看场景化设计我们又当如何做。通过大量的产品设计实践中，我整理了常用的场景化设计设计步骤，如下 ：1. 列举场景场景梳理的过程中，我们抓大放小，找到核心场景，并描述出用户的主行为路径。然后再对其进行分类细化。便于理解，我们拿小明想要通过某电商平台购买一包虾条举例，主要流程：搜索挑选购买配送评价。当然以上只是大场景，拿第一个搜索场景细化举例，小明（who）在下班（when）回地铁的路上（where），拿起手机点开某拼夕夕 app（how），输入虾条关键词搜索（what）。重点是要通过场景化思考，描述出场景各要素之间的关系，是谁（who）、在什么时间（when）、什么地点（where）、通过什么行为（how）、做了哪些事件（what）。通过对用户场景的描述，将停留在我们脑海中抽象的信息提炼并具体化，更加直观的知道用户在各个场景的状态，发现我们在此之前想不到的一些细节，帮助我们真正了解用户痛点。关于真实场景的获得：以上只是一个简单的购物需求，它与我们日常生活息息相关，一般可以通过模拟或者访谈得到。但也有一些场景不是我们坐在办公室就能想象到的，比如拿 WMS 仓储系统来说，不到现场查看，设计师可能就体会不到现场环境的嘈杂和混乱，所以就不能够再用常规意义的办公环境来设计你的系统。有时为获得更真实的用户信息，躬身入局是一种比较好的做法，到真实现场观察和了解用户，也就是我们所说的田野调查。2. 通过场景挖掘机会点有了上面对场景的列举和描述外，这一步骤就是针对这些细化的场景进行分析和预判，并发现其中的机会点。通过场景化去挖掘机会点，一般有两种方法：基于当前场景寻找机会点通过对上一个场景分析，再结合当前场景预判行为，寻找机会点① 基于当前场景寻找机会点我们拿搜索场景举例，所有的电商平台在搜索输入时，都会提供关键词自动搜索内容展示。好处是可以通过输入的关键词，帮助用户进行整个词语的联想，方便用户直接点击，来提升搜索效率；另一方面也能够给用户提供更多的搜索方向。② 通过对上一个场景分析，再结合当前场景预判用户行为，寻找机会点比如拼多多的关键词自动纠错，在输入“下调”或“xiatiao”时，点击搜索后会将关键词已进行中文转译处理，并提示告知用户转译后的搜索结果，这样避免了用户重新输入再搜索，大大提升了搜索效率。再比如如果用户搜索了虾条没有下单，并且关闭了 app。那么等到用户再次打开 app 的时候，搜索输入框默认显示上一次与虾条相关的内容，一方面可以引起用户的注意，另一方面用户如果需要再搜索，可以快速触发，从而降低输入成本。3. 制定设计策略在制定设计策略前，我们需要考虑达成什么设计目标，只有明确了设计目标后，才可以理性分析存在的机会点，思考选择什么策略去解决。举例说明，我们想要提升淘宝搜索输入框的活跃度，通过用户体验地图（设计策略）在用户搜索中，增加热搜榜、XX 促销……再通过上线做 A/Btest （设计策略）看结果数据。最终我们发现，可以通过增加搜索推荐区域，针对那些不知道搜什么的用户、或者想要随大流的用户，通过一些热搜词汇来可以提升输入框的活跃度。常用的设计策略有很多，比如要分析用户场景或目标，就可以选择卡诺模型、用户体验地图、RFM 模型等；要提升用户活跃指标，可以采用福格行为模型、海盗 AARRR 模型，或者广告界常提到的 AIDA 模型等。用一篇文章，让你掌握能让用户快速增长的AARRR 模型AARRR模型因其掠夺式的增长方式也被称为海盗模型，是Dave McClure 2007提出的，核心就是AARRR漏斗模型，对应客户生命周期帮助大家更好地理解获客和维护客户的原理。阅读文章 > 不管我们采用任何一种设计策略作为指导时，都要先评估其是否合理、合适，确保选择的设计策略与设计目标是一致的。当然在使用过程中，我们也仍需对这些通用的设计策略进行适当的修正修改，使其和我们的业务更匹配。4. 效果验证效果验证就是需要通过一些度量指标，验证我们设计的结果如何，比如上述搜索举例，验证的指标就是搜索效率是否得到了提升。效果验证的度量指标需要结合我们的设计目标，上线后的方案这些指标是否提升或者降低了，是否和我们预判的行为一致。指标标的设立也和产品的特性有关，比如 B 端的产品常常关注效率等指标，是否缩短了操作流程，降低了用户认知等；C 端产品更加商业化，通常会用一些市场化指标，比如用户增长、转化率、GMV 等。五、结语回顾本文，不能发现，场景化设计实质是一种思维方式，它需要我们考虑清楚人、时间、地点和外部环境的关系，在这个关系下，用户会怎么想，以及他会做出什么样的行为。孙子兵法里说：水因地而制流，兵因敌而制胜。如果我们在设计时，也能够因地（场景）制宜，再通过制定合理的设计策略来引导用户，那么最终的设计目标也将会事半功倍。参考文献：Alan Cooper《About Face 4：交互设计精髓》梁宁《产品思维 30 讲》阿里巴巴《U 一点·料 2》本篇来源：优设网原文地址：https://www.uisdc.com/scene-based-design
洋红 色彩 非凡 每年12月初，潘通都会踩着点发布第二年的流行色。而就在昨天，全新的 2023 年度流行色 「非凡洋红」正式发布，正式名称为 Viva Magenta。但是这次年度色的选取逻辑和呈现形式上，又有很多出人意料的点。往期回顾：潘通2023年春夏流行色已发布！这个方法帮你把流行色用起来！大家好，这里是和你们聊设计的花生~9 月初，国际知名色彩权威机构 Pantone 为时尚界发布了 2023 年春夏色彩趋势报告，确定了十大最引人注目的颜色，以及适合时装设计师推出新作时使用的 5 种经典色彩。阅读文章 > 「一个勇敢无畏、令人悸动的色彩……生机勃勃，跃跃欲动……鼓励实验精神和无拘无束的自我表现；一个令人振奋，跨越疆域的色彩……大胆，慧黠及包容一切，Pantone 18-1750 非凡洋红拥抱每一个拥有反叛精神的人。」潘通每年的年度色本身并不只是一个单纯的颜色，作为全球最有影响力的色彩体系，潘通所筛选出来的年度流行色，能够反映当前的色彩审美偏好，而且还会指明一些设计趋势。色彩来源潘通色彩研究所（Pantone Color Institute）行政总监 Leatrice Eiseman 说：「Pantone 18-1750 非凡洋红 出身红色系家族，灵感来自胭脂红，胭脂红是天然染料家族中，最珍贵的染料之一，也是目前世界范围内已知最强烈、最亮眼的天然染料。Pantone 18-1750 非凡洋红源自天然原声性的物质，这种色彩也将我们和原始之物重新连接。它感召自然的力量，刺激我们的心灵，帮助我们构建内在的支撑力。」从某种程度上来说，非凡洋红 这个颜色其实已经在美容产品当中有足够广泛的应用：特征 + 延续很明显，2023 的非凡洋红 和 2022 年的年度色长春花蓝有着非常微妙的关系。「潘通年度代表色的教育性色彩计画史上首度打造一个新色彩，以反映正在发生的全球创新与转型。……这个注入红与紫的新的蓝色调具有的复杂性，正突显了在我们面前展开的广大可能性。」代表着可能性的长春花蓝是一个代表着可能性、介于紫和红之间的色彩，它含有「选择」之意，而 2023 年的非凡洋红无疑是「选择的结果」，放弃紫色而步入更加具有反叛精神，更加激烈的色相。长春花蓝和当下热门的元宇宙有着紧密的关系，电子游戏的持续流行和日益火爆的虚拟数字空间，正是长春花蓝的来源，它既代表了多元融合的虚拟赛博空间，同时也在现实世界中流行，从色相到应用场景，它都有着暧昧而模棱两可的属性。面向 2023 年的非凡洋红则不同，它的洋红色相从长春花蓝中延伸而来，之前似是而非蓝紫色相变成更加笃定的洋红，激烈而明确。其实这种趋势在去年就已经体现出来了。室内设计领域的资深专家 Michelle Ogundehin 就曾在 Dezeen 上发文批评长春花蓝过于温吞，「是时候考虑让年度色更加狂放欢脱一些了」，她在文中写到。「随着虚拟世界，逐渐成为我们日常生活的一部分，我们同样也期望从自然与真实中获得灵感。」—— 潘通色彩研究所行政总监Leatrice Eiseman「我们正在创造一个鼓励实验的动态世界，在实体领域当中运用虚拟激素，壮大我们的心灵和力量，发掘突破以往的各种可能。」——潘通色彩研究所副所长 Laurie Pressman长春花蓝的灵感源于虚拟的元宇宙，而非凡洋红则更进一步，希望从现实世界的自然色彩入手，寻找惠及真实和虚拟两个世界的流行色。人工智能 + 元宇宙这次潘通携手 Huge 借由当下我们所熟知的人工智能工具 Midjourney ，创造出带有 Pantone 18-1750 非凡洋红视觉张力的人工智能艺术品，并打算以此为基础，拓展出带有强烈色彩属性的「洋红元宇宙」（Magentaverse）。这种呈现方式在此之前是没有过的。关于这款AI绘画神器：人工智能快速出图！盘点 4 款人气超高的 AI 绘画神器大家好，我是和你们聊设计的花生~有关注 AI 绘画领域的小伙伴可能注意到，国内已经出现了能直接使用中文提示词生成 AI 图像的工具了，这就进一步降低了我们进入 AI 绘画世界的门槛，对设计师和创意工作者来说无疑是好消息。阅读文章 > 不过有个有意思的事情是，这个拥有着自身「元宇宙」的色彩一点都不「蓝」，很多人都很好奇强力推动元宇宙甚至为公司更名为 Meta 的扎克伯格是怎么想的。VF：「实际上，想想扎克伯格进入洋红元宇宙之后的样子我就笑到停不下来。不过无论如何，起码他身上的灰色T恤的格调会被拉升起来。」品牌合作+应用当然，对于普罗大众而言，元宇宙不够触手可及。所以，在这个「洋红元宇宙」之外，潘通还联合诸多品牌和合作方，在迈阿密巴塞尔艺术展上展出一系列「联名合作款」产品，来呈现这一颜色的独特魅力，其中还包含一个和 Artechouse 共同完成的沉浸式艺术展。潘通和摩托罗拉共同合作完成了一款 motorola edge 30 fusion 联名款，你可以在展览上借助这款手机进入「洋红元宇宙」。此外，潘通还和 Spoonflower 的 6名艺术家共同合作，为非凡洋红定制一系列的配色方案，并且会在 12 月份开启 4 项设计挑战。而著名的滑板鞋品牌 CARIUMA 这回也和潘通一起联名了 6 个款式，2023 年度流行色会直接出现在这些鞋的主体设计当中。当然，大家最在意的还是这个颜色如何在实际的数字设计、印刷品当中使用，官方也给出了相关的参数：当然，潘通还有针对性地推出了各种功不同的色卡和工具，来应对不同设计师的需求：结语 像 非凡洋红 这样饱满又醒目的颜色，在很多设计当中都被用作提亮色，鲜少大面积使用。不过就在此刻，就在当下，大家对于明艳色彩的期盼无疑是极为强烈的，非凡洋红适时的出现，倒是非常符合此刻大家的情绪和对未来的期待，2023 年的视觉设计，应该也会相当明亮精彩。本篇来源：优设网原文地址：https://www.uisdc.com/viva-magenta-2023
产品 业务 客户 前言接触 B 端设计的小伙伴会发现，很多业务具有角色多，业务场景复杂，功能链路长等特点，所以在工作中会经常遇到以下几个问题：突然被调配到新业务，拿到一个不熟悉的业务或者新产品，不知如何开展工作？换了一个新行业，面对一个从 0 —1 的新项目，应当如何熟悉新业务？面对较为复杂的业务，经常和业务方沟通讨论不在一个频道，又不知如何着手。本文将从以下 4 个角度展开探讨，当设计师面对 B 端新业务时，应当如何快速熟悉业务并开展工作。类似方法；什么样的公司值得设计师全情投入？来看总监级的分析！之前分享的关于如何进入大厂的建议里，提过我们要学会利用跳槽这个工具做杠杆，帮助我们进入到更好的平台中，实现职业的升华。阅读文章 > 一、查行业和竞品首先，不要一上来就急着看系统。线上的功能模块只是实现需求和业务目标的手段，并不一定是最优解，能够为客户解决问题的方式有很多，不一定非得是我们提供的互联网服务。所以如果我们一上来就着急走数据看系统，很容易就会把自己的眼界，局限于这些产品的功能界面中。1. 查行业报告首先需要明白自己从事的是一个什么行业，这个行业叫什么，是做消费品的、是酒旅还是建筑地产等。提供企业服务有做 saas 的、有做 Pass 的、有做平台数据对接的、也有本公司自研系统，第一步要建立起对这个行业有一个宏观的认识。通过市面上的这些行业分析报告，可以了解到自己做的业务处在哪一个赛道，另一方面也能大概知道目前所做业务，在市场处在生命周期的哪一个阶段。比如下文就是艾瑞咨询关于中国 SaaS 产品的一个图谱，通过这些图谱不光可以了解我们公司产品所处地位，也能纵向知道公司产品的竞争对手有哪些。比如为企业提供 saas 零售电商服务的就有微盟、有赞、小鹅通等服务工具。想了解这方面资料的同学，可以通过艾瑞咨询查看：https://www.iresearch.com.cn/2. 查行业竞品看竞品不仅是要看产品本身，还要比较它的行业地位，需要了解我们的产品在大背景下，处于一个什么地位，是行业头部，还是在追赶地位。同时，还要关注产品背靠的资源和竞品相比有哪些区别。比如这两年大火的 Scrm 运营工具——微盟的企微助手，背靠的资源就是过去几年通过商城零售产品积累的客户。以及微盟于2022年发布的WOS新商业操作系统中，企微助手与微盟其他产品的超强融合能力。关于行业竞品，需要大家花点时间找一找，也可以通过相关的负责人问一问。这里推荐通过以下两个网站查询：36Kr 企服点评：https://www.36dianping.com/字母点评：https://www.zimudianping.com/#/3. 查公司战略了解公司战略并不是一句虚话，它涉及到你后期负责的业务的发展方向。比如微盟从 2020 年开始提出大客化战略方向，如果你是负责零售这一块的业务，你必须要知道你的客户群体是要以大客为主，大客和小客在需求痛点上是完全不一样的，所以这涉及到我们后期面对这些角色设计上的一些区别。再比如微盟 2022 年新推出的 WOS 新商业操作系统 ，除了提供微盟的标准化产品解决方案外，还可以让更多的生态伙伴产品参与进来共建产品，包括 PaaS 平台，可以满足商家的个性化需求定制。这也会涉及到我们在产品设计，页面框架层搭建的兼容性，需考虑覆盖各类业务、以及产品对外的一致性等。二、看产品和价值看产品，是指看产品的业务文档，而不是看 prd 界面，需要了解产品的核心价值和目标客户群体。这个阶段，需要看产品在什么样的场景下，帮助哪一类客户，解决什么痛点或者问题。这个阶段涉及产品一切的文档资料，包括业务背景、需求文档、宣传文档、产品白皮书、销售资料和公众号等，我们都需要尽可能多的，主动性去找相关资料和数据查看。1. 看产品的专业词汇很多 B 端产品都是服务于很垂直的领域，所以不免涉及到专业领域的一些词汇。比如 CDP 产品，我们在了解这个产品时，需要知道一些基本概念，比如什么是多渠道标签，标签的类型有哪些，什么是文本标签、多值标签、日期标签等；用户分群里的人群包、自定义人群和系统人群，以及常说的圈人条件是指什么。如果我们发现自己的产品还没有整理这些信息，我们可以通过竞品的官网，或者到竞品的用户手册、帮助中心等模块找到这些信息。我们还是拿 CDP 举例，下方就是就是火山引擎和 Growing IO 的帮助文档，熟悉了这些专业词汇，可以让我们可以更快的了解产品，当然如果你有时间，也可以帮助自己的产品去整理这一份文档。2. 看产品的价值怎么去看一个产品的价值点，这个较为复杂，我们可以借用一个工具叫价值主张画布（The Value Proposition Canvas），它可以帮助我们很好的去理解产品和目标群体之间的关系，清楚地描述出产品帮助客户解决了哪些问题，和创造了哪些收益。价值主张画布内容较多，感兴趣的同学可以看一下《价值主张设计》这本书，这里我们简单总结分为「价值地图」与「客户洞察」两个板块。价值地图：描述产品为客户创造的价值，包括产品与服务、创造价值、解决痛点产品服务：我们给客户提供的是一种什么样的产品或服务解决痛点：产品解决了用户的哪些难题创造价值：产品让客户获得哪些好处客户洞察：帮助我们理解客户，包括客户的任务、客户的痛点以及客户的收益客户工作：是指客户利用系统要做哪些工作日常及事项客户痛点：客户在本来工作流程中遇到的问题及阻碍客户收益：指客户通过购买该系统，获得的盈利来源三、理功能及流程1. 理产品功能大图一定要看核心业务或者产品功能的大图，理清业务功能模块、数据之间的来源去向关系，整个平台的数据是怎么流转的，以及最后是怎么形成逻辑闭环的。这时最好多向身边的同事多多请教，避免埋头苦干，可能自己纠结了半天的问题，可能都抵不过同事的一点点拨。比如近两年大火的私域运营工具 SCRM，其核心本质是一个社交化的私域运营工具，其 PC 端功能主要分为 4 块，引流获客 — 促销运营 — 营销转化 — 决策管理，下图就是是微盟企微助手产品功能模块大图。2. 理数据流程业务流程相对是一件相对复杂的事情，不同产品的流程侧重点不一样，有些产品的流程会牵涉多个角色，这个时候需要找到对应产品负责人，要到不同权限角色的账号，因为不同权限角色的账号功能也不一样。有了账号，了解每一个功能菜单帮助客户解决了什么问题后，就可以建数据走流程了。① 找到核心功能模块首先找到该业务的核心功能并熟悉它。比如拿 SCRM 产品举例，微盟企微助手、微伴助手和微盛企微管家都将「活码」这个菜单功能排在头部位置，一方面是从产品的使用频率考虑，另一方面它也是产品的核心功能模块。怎么找到核心功能模块？你可以通过产品的导航、或者产品官网的介绍，找到产品的核心功能模块。② 关注不同角色的工作和 C 端产品不同，B 端产品角色相对固定，我们需要关注有哪些角色、角色之间的协同关系、工作的场景、目的和操作链路。概括起来有以下三个内容：角色信息、工作内容、考核指标。角色信息：包括角色名称、工作职责、能力维度等。比如 SCRM 产品会有老板、运营负责人、员工等角色。工作内容：具体场景、内容描述、目标和期望。比如老板会看整体数据及基本分析结果，运营负责人会维护整个系统的信息和数据分析，包括创建派发任务等，员工更看重任务完成等。考核指标：一般会结合任务而需要完成的考核指标，这个和每个产品的特性有关。③ 体验并感受产品在体验产品的过程中，把自己带入产品的角色中去，用我们专业的眼光走查一遍产品，比如产品的框架设计如何？里面操作流程是否符合用户认知？各功能模块的交互是否一致？是否会有操作的错误的判断可以结合自己的交互走查表，不过仍需注意，不要陷入到产品的细节体验中去，毕竟我们要做的是熟悉各个功能模块。这样的好处，可以避免产品因历史的包袱问题而带来的眼界束缚，完全用一个全新的观念和心态体验新产品。在建数据流转的过程中，我们可以得到一个小白用户对于这个产品的使用体验，在使用的过程中，也可以记录下来自己的行为和感受。对于很多新的产品团队来说，一份新手用户对于产品的认知和体验感受也是一份宝贵的资料，因为等我们真正熟悉业务产品时，很有可能会忽视这些旧问题。在建数据的过程中，可以结合之前相关业务文档一起看，一边走一边了解每个功能模块的前世今生和具体细节，同时产品的数据流转一定也要多走几次，尽可能理清数据业务的流转逻辑。④ 特殊产品仍需和线下实践结合有些特殊化的产品，流程比较复杂，需要亲身经历和体会。比如拿物流的 WMS 仓储系统来说，如果不到现场亲历入库、出库、盘点和分拣等实体操作，光通过系统和文档，很难知道现场作业人员的所思所想，和不同角色所要关注的点。只有亲历了一遍现场以后，才会知道作业环境的嘈杂和混乱，所以有些特殊化的系统，还是需要自己体验走完一遍这个流程比较好，毕竟纸上得来终觉浅，绝知此事要躬行。3. 理交互规范有了对整个产品功能模块的了解，下面就是熟悉产品的交互框架，还有一些组件库。尽可能做到在实际设计时让这些组件做到复用，这样可以帮助我们节省很多时间，也可以避免很多交互上的错误。四、问对人说对话通过前面的一系列自主调研及建数据流转，对我们所要负责的业务有了一个较为清晰的认识，这中间我们也会产生很多问题，不免需要上下游的小伙伴们打交道，怎么和小伙伴沟通讨论仍需掌握一些方法。1. 问对相关业务人我们需要找到业务的关键人，特别是刚去一个新公司面对一个新业务的情况下，这个时候需要了解业务的人员组织架构，找到对应的负责人，当然我们不可能上来就让人家给我讲讲业务和人员架构。找到对应负责人。比如我们可以这么说，不知道你有没有时间，或者你是否能够推荐团队里面的大佬能够给我讲一下，以便我们后续更好的配合及开展工作。问问题不要过于笼统。在和对应的业务产品沟通的时候，你不能直接说，你能不能给我讲讲这个功能或者业务，这个问题太过于概括和开放，对方一下接不住这个问题。如果对方没有做准备，很有可能在他和你讲的过程中，还会涉及一大堆技术和行业词汇。2. 说对话的一些有用技巧把问题整理好，可以集中性的问，不要一个个的去问，以便不停反复占用别用时间，毕竟谁也不喜欢不停地被人打扰。如果是一些抽象复杂的问题，提前发给人家，让对方也有个准备时间。在向别人请教的时候，如果能够带上纸笔作记录更好，以表示对别人的尊重，等到回到自己的工位后，也可以自己画出产品的业务的流转图，加深自己对于产品的理解。如果可以，给别人带上一杯奶茶啥的，毕竟没有人有义务无条件帮助你。相关技巧：超全面！给用户体验设计师的提问清单在用户体验设计师（UX）应该掌握的各项技能中，如何问有意义的问题是一种经常被忽略的技能。阅读文章 > 关于新入职的同事，或者被调到一个新业务时，我们需要向当前业务骨干设计师请教业务问题时，也需要掌握一点说话技巧。我曾在群里看到一位前辈分享过一个表达话术，和大家分享下：总结关于了解业务，我们整体的思考框架是，先整体再局部从大到小，从行业入手了解行业竞品，产品是怎样的商业运转模式，再通过价值主张这个工具，了解产品各个功能模块的价值。找到产品的对应负责人，了解业务或者产品的组织架构，知道产品的核心模块是哪些，清楚不同角色的之间的流转关系是怎样的，将角色之间的流程串联起来，就能够达至了解业务。最后，我们对产品的掌握了解差不多了，其他的非核心模块，可以在后期做项目的时候，一边做一边了解。希望本文对你有所帮助。参考文献Yves Pigneur《价值主张设计》欢迎关注作者微信公众号：「小高杂谈」本篇来源：优设网原文地址：https://www.uisdc.com/systemize-your-business
学员 设计师 老师 这两天世界杯开幕，让吉祥物拉伊卜频频火出圈，相关的话题不仅在微博收获了百万人气，潮玩手办更是成为市场上的香饽饽，销售十分火爆。但在潮玩市场上，吸金能力最强的居然不是这类热门 IP，根据社科院 2021 年的报告，最受欢迎的潮玩盲盒 IP 产品，是设计师的原创 IP，支持率高达 80%。而在另一份权威报告里，提到 2024 年，中国潮玩的市场规模将增至 763 亿元，年增长率高达 29.8%。强悍的吸金能力，也让无数 IP 设计师收获了人生的第一桶金。仅是优设张小哈老师的私信里，就收到过不少征询商用授权的单子。对设计师而言，这是一笔躺赚的生意，仅授权就能拿到一笔不菲的收益，如果是整个 IP 转让，价格高达 10W+潮玩市场的大热，也让无数大厂看到了 IP 的价值，无论是阿里动物园、京东狗还是冬奥会冰墩墩，大家都意识到，一个可爱的 IP 形象是出圈利器，比起广告投放效果好太多了。越来越多的公司需要掌握 IP 设计技能的视觉设计师，也有专业的 IP 设计师岗位：我们有很多学员，也通过这门 IP 设计特训营找到了工作：第一个同学以前从事商务，通过学习这门课，不仅学会 IP 设计，也掌握了职场目前最热门的 C4D 技能。C4D 作为当下的求职刚需加分技能，有多重要无需赘述。这也是这门课如此受欢迎的原因，不仅帮你学会 IP 设计，同时还掌握了 C4D 和 Zbrush 两门软件。更有零基础的同学，学完之后参加了 IP 设计比赛，拿下 3 万元的奖金！现在第三期终于来了！本期是今年最后一次开课，年后需要求职的设计师，给简历上大分的机会别错过了！课程原价 1099 元限时上新特惠价仅需 999 元！官网再送30张100元优惠券，折后价仅需899元！之后立刻恢复原价！移动端扫码报名，网页端右戳报名 https://pro.uisdc.com/detail/p_637c7acfe4b083231ed272e3/8这门课到底有多受欢迎，好评率有多高，直接看学员的真实反馈。零基础也能学！学 IP 最重要的 2 门软件，就是 C4D 和 Zbrush，而零基础的同学最担心的，也是没软件基础。为了解决大家这个问题，小哈老师特意录制了 25 节 C4D 基础课和 14 节 Zbrush 基础课，两门课加起来价值超 400 元，现在报名免费赠送。即使完全零基础，只要按老师的节奏来，也可以从零开始做出一个专属自己的 IP 设计。以下都是零基础学员的真实反馈：原本特别吃力的自学，报课之后不仅坚持了下来，而且还创作了个人 IP，注意旺旺仔的头像哦：连 Zbrush 都没听过，学完课也做出了 IP 模型：所以零基础的同学完全不用担心，毕竟有这么多师兄师姐都过来了，何况课程的安排，本身就是循序渐进的。课程循序渐进，学习没压力！这也是新手自学最容易遇到的问题，不知道从哪里学起，不会设置目标，容易卡在最难的地方导致自学失败。同样来自学员的真实反馈，由于小哈老师是西安交大的建筑系高材生，有着设计师难得的理科思维，整个课程设置循序渐进，非常容易刷，不会弃坑。整个流程严谨规范，从二维到二维，从头部到衣服，每一步都比上一次难一点，但都是可以挑战成功的，日拱一卒，一个月后收获一个完整的 IP 形象。而老师的细心程度，可以说更是这门课最独特的价值，给那些担心没人带的同学吃了一颗定心丸。可能是最细心的老师和最好的学习氛围！记住每个同学的名字和每次作业的不同，指出优点，帮助优化作品，即使结课了，也经常在群里辅导大家。学员的反馈还有太多太多，篇幅所限不一而足，详细的大家可以看次条文章，详细记录了往期学员的结课反馈和作品。性价比超高！对于这门秒杀价不到 900 元的课，你能收获包括不限于：39 节软件基础视频课21 节价值 2000 元的直播课程42 天的名师全时在线答疑1800 天五年无限次直播回看完整的课程内容，请看课程大纲：课程原价 1099 元限时上新特惠价仅需 999 元！官网再送30张100元优惠券，折后价仅需899元！之后立刻恢复原价！移动端扫码报名，网页端右戳报名 https://pro.uisdc.com/detail/p_637c7acfe4b083231ed272e3/8广受好评的小哈老师，不仅是西安交大的高材生，也是知名的跨界设计师和插画师，还著有绘本《创造力的形状》。老师作品：Living in Space 系列：学员作业：课程原价 1099 元限时上新特惠价仅需 999 元！官网再送30张100元优惠券，折后价仅需899元！之后立刻恢复原价！移动端扫码报名，网页端右戳报名 https://pro.uisdc.com/detail/p_637c7acfe4b083231ed272e3/8本篇来源：优设网原文地址：https://www.uisdc.com/ip-course
用户 产品 操作 在如今用户为王的时代，用户体验成为一种新的品牌竞争力。随着技术进步和体验意识的普及，习惯了 C 端产品流畅愉悦的体验，用户对 B 端产品体验的期望也越来越高。B 端 C 化的概念也由此产生，但 B、C 端有着本质区别，C 端的设计思维无法完全复用到 B 端，那是否可以基于 B 端产品特征，融合 C 端体验设计思维，即“B+C”来帮助提升 B 端产品体验呢？本文聚焦在探索如何通过“B+C”的设计思维，提升 B 端产品体验。B端和C端的区别看这篇：从3个方面，详细分析B端和C端的差异化众所周知，无论是在用户群体、产品定位，还是使用场景等方面，B 端产品与 C 端产品都有比较明显的差异。阅读文章 > 一、B、C 端产品定义与差异我们先简单了解下 B、C 端产品各自的定义。B、C 端其实是以使用对象的类型，来代指的产品类型，C 指个人消费者 (Customer) ，B 指组织 (Business) ，这个组织可以是个人、公司、政府或机构，因此 B 端模式也是多样的，除了 B2B，还有 B2C、B2G 等。C 端产品帮助个人解决生活场景中的需求痛点，提供人们消费的物质、信息和情感。常见产品类型有工具类、内容类、社交类、游戏类等，如滴滴、知乎、微信、王者荣耀等。B 端产品帮助组织实现其商业目的，提供商业的工具、方法和服务。常见的产品类型有：CRM 客户关系管理、ERP 企业资源计划、OA 办公等，如企业微信、金蝶、钉钉等。下面我将从产品设计的角度，分析 B、C 端的差异化。1. 设计原则的差异C 端产品主要通过流量转化获得收益，因此人的注意力和使用频率是关键，所以设计原则为“UCD”（User Center Design）以用户为中心的设计。B 端产品主要是为了能高效解决行业业务问题而存在的，所以其设计原则是以效率为中心。2. 功能流程的差异C 端产品主打一个满足用户核心痛点的功能，通过这个核心功能明确产品的特性和定位，附加 N 个增值功能，提高用户粘性，加之创新和趣味性，保持与竞品之间的差异化。B 端产品功能重全面，为的是能满足组织的各种业务需求，组织的业务逻辑通常就是产品逻辑，功能流程也由业务场景转化而来。3. 交互逻辑的差异C 端产品是单线程操作，完成一项任务后才能进行另一项。碎片化的使用场景和广泛的用户群体，使得 C 端产品必须信息简洁、容易上手、操作路径短，否则将会导致用户流失影响收益。B 端产品是多线程操作，支持多个任务并行。交互以优化业务流程，提升用户操作效率为主，关注信息架构，清晰的信息架构能帮助用户在呈网状的功能和交织的流程中，定位到自己所在功能页面，找到所需的有效信息。4. 视觉表现的差异C 端产品视觉设计风格多样，如赛博朋克、孟菲斯、3D、酸性设计等，注重情感化表达和氛围的渲染，加上短视频和直播，让用户沉浸其中。B 端产品视觉服务于功能和信息的传递，视觉元素较为简洁，常用色彩对比的形式，建立内容边界和视觉层次。二、如何用“B+C”思维提升 B 端产品体验无论是在设计原则、功能流程、交互和视觉方面，B 端产品与 C 端产品都有比较明显的差异。基于以上差异，结合 B 端产品特征和 C 端体验设计思维，我们可以从以下三个方面提升 B 端体验：① 视觉—降低认知负荷B 端产品讲究屏效，看得多通常比看的美重要，信息密度高，则屏效高，却也相应的会增加用户的认知负荷，因此我们需要为用户认知减负。② 交互—以用户效率为中心从用户的行为和感知出发，本着以用户为中心的原则提升操作效率。③ 情感—关注情绪感受关注体验过程的“峰”与“终”，提升用户整体的体验感受。下面我将结合实际工作案例，讲述如何用“B+C”的设计思维，提升 B 端产品体验。「案例分享」Speedshop Omnichannel（下面简称为 Omnichannel）是款针对国内及东南亚中小商家，统一管理多渠道商品、订单、交易、会员的 ERP 系统。目前共支持 Lazada、Shopee、Tokopedia、抖音等 7 个渠道，最多可管理 100 个线上店，集订单管理、产品管理、会员管理、聊天、导入导出等功能为一体，服务超 40,000 商家。1. 视觉 — 降低认知负荷对信息的识别和处理是认知负荷的主要来源，在视觉层，我们主要解决的是信息识别带来的负荷，信息识别就是用户看到内容并选择的过程，B 端产品有信息量大，选择多的特点，降低认知负荷也将围绕这两点进行。① 优化信息展示符合用户诉求B 端产品根据用户规模的大小，可以分为大 B (一定规模的中大型企业) 和小 B (小微企业、个人创业)，两者对信息的关注点和诉求不同。表格是 B 端产品最常用的信息展现形式，且能将信息有序、高效、直观的传达给用户，避免信息堆砌带来的认知负荷。比如同样是订单页，大 B 用户的订单数据量庞大，且订单通常是自动流转的，无需手工操作，所以针对大 B 用户，表格信息展示有两个侧重点，一是增加信息密度，二是帮助用户能够快速精准过滤信息。小 B 用户的订单数据量相对较小，且以手工处理为主，所以在展示订单时，可以将关键信息整合，通过将信息进行分层、分组的展示形式，降低单页面信息的复杂度，还可以通过各模块之间字体大小、颜色、图标、间距等手段将信息层次区分开。丰富信息展示维度还可以通过图形化、可视化和视频的形式，丰富信息的内容维度，化抽象为具象，让信息能更高效的传达。在 Omnichannel 中，用户需要完成新手配置后才能使用产品，进入首页看到的是任务型的引导，通过图形辅助任务说明，丰富画面的同时还能增加产品的亲和力。B 端产品由于业务的复杂性和技术的局限性，通常操作没有那么灵活，需要遵守一定的使用规则，传统的做法会通过文字说明的方式传达给用户，面对一长段的规则说明，读几遍还不一定能理解。比如在导入产品时，规则内容多且逻辑复杂，可以将内容可视化，使其易于传达和理解。视频比文字的画面感更丰富，传播的内容也更加具体，在帮助中心，图文的基础上增加视频，帮助用户更高效的获取帮助信息。② 提供个性化配置B 端产品通常包含多种用户角色，每个角色的需求关注点不同，为了满足各角色的需求，单页面信息往往会出现超负荷的情况。我们可以借鉴 C 端的个性化，对于非业务性的功能，允许用户根据自己的需求和工作习惯进行自定义。比如下图，在列表页，我们为用户提供了自定义筛选条件和表格字段的设置。③ 提供有效决策信息由于业务复杂，保障功能的全面，带来的结果通常是操作和选项较多，如果没有任何指引，B 端产品的用户通常无法做出合适的选择。比如下图的添加商品，根据不同的使用场景，产品为用户提供了三种添加商品的方式：只有三个选择，看似没有任何操作难度，但用户面对未知功能时，通常会根据自己过往的工作经验，选择熟悉的功能，这样一来，可能会误增了工作量，因此在设计上，要提供辅助介绍说明，帮助用户决策。我们在此基础上，为第一次使用该功能的用户又做了优化，除了消息提示框，还通过标签强化视觉重点，推荐最适合新用户的选择，添加商品的文案也改的更通俗易懂。2. 交互 — 以用户效率为中心① 提升用户行为效率无论 B 端还是 C 端产品，都有一个共同的体验目标：提升操作效率，高效率意味着用户通过更少的操作，更少的时间完成任务，实现降低成本的目标。在 C 端产品中，常见的提升效率的方式有：1、根据用户行为的流程分析，推荐相应功能；2、聚合用户行为，缩短操作路径；3、转移用户操作成本，让产品承担更多的用户引导、行为判断和行为记忆。我们可以从以上几点切入优化 B 端操作效率。引导用户操作在 C 端产品中，经常会有根据用户的操作行为，产品给出相应的推荐操作，如截屏后，在用微信发信息时，系统会提示是否要发送截图，这种在操作过程中增加相关功能的曝光或引导，提高用户操作效率的同时也不影响流程的顺畅进行。下图是商品管理页，用户首次进入时，可以根据用户触发的操作推荐相关的帮助引导。手动创建商品时，需要完善很多商品信息，可以为经常出错的内容预设提示，先发的避免用户出现错误。在收起/展开菜单栏时，提示快捷键功能。优化任务路径B 端产品中通常会有一个任务关联一些子任务，如果用户在子任务中遇到困难，往往会造成整个任务效率的降低甚至任务中断。比如在手动创建商品的流程中，需要将商品信息推送到渠道线上店才算创建成功，所以在创建商品前，需要完成渠道线上店的创建。针对这种关键子任务，我们可以尝试并行任务，在选择线上店时，增加创建线上店的入口，将任务连贯起来。还可以通过操作的合并，比如保存和添加同步进行，提升整体的任务效率。② 弱化低效感知好的产品体验，不止强调功能，还会在意体验中的感受，设计也可以左右用户感知产品效率的快与慢。等待时间可感知用户对等待的耐受度是有限的，等待时间在 2s 内是相对愉悦的，在时间不可控或时间较长的情况下，我们应尽可能缩短用户的感知时间。比如在下图中，用户完成新手配置后，产品有个加载的过程，通过加载动画和加载步骤的分解，告知用户系统在运行中，缩短感知时间的同时消除用户的负面情绪。容错性设计在产品使用过程中，经常会出现因用户“犯错”而导致的任务中断或失败，这里的“犯错”，通常是因为用户操作偏离产品的使用要求，但这并不是用户的错，人不是精密的仪器，好的体验应该包含这部分“错误”。比如录入数据时，应给予实时的提醒，让用户可以及时更正，而不是等到提交时才抛出错误提示，还有比如在数字输入框中误输入其他字符时，自动帮用户清除等。在涉及对用户影响较大、重要且不可挽回的操作时，给出提示。3. 情感 — 关注情绪感受在整段体验感受中，情绪最强烈和结束时的感受影响着用户对整个体验好与坏的判断，这个现象就是峰终定律，因此我们可以通过关注这些关键时刻，来确保用户对整段体验是感到愉悦的。① 减少负峰消极的情绪，不仅影响用户对产品的体验感受，最终还会落到降低效率上，因此在设计时，我们要考虑减少用户的消极情绪。提供明确反馈用户使用产品的过程就像是与产品进行“对话”，良好明确的反馈能帮助用户理解和使用产品，在工作完成时，应告知用户已完成，出错时，告知用户哪个环节错了，如何改进或提供帮助，不要让用户去猜，而是主动为用户提供解决方案，提供确定感。比如在创建商品的流程中，商品创建完成后要推送到渠道线上店，中间有一段较长时间的等待，在设计时，根据推送中、推送完成、推送失败，分别提供了 3 种对应场景的提示，让用户知道当前任务进展，以及展示相关对应的操作，即使任务失败，用户也知该如何处理，增加用户的控制感。任务中断可回溯在 B 端产品中，经常会出现决策信息多，处理链路长，需反复多次进入任务流程的情况，当任务被迫中断时，用户情绪会受到影响，且用户对未完成或中断的任务往往比已完成的记忆更深刻，针对这类情况，我们需提供可回溯的设计，帮助用户顺利完成任务。比如在将商品推送到渠道线上店时，同步过程中，用户可以离开当前页面进行其他操作，系统会将推送结果展示在列表页，用户可以通过列表页，重新推送或者编辑修改后再推送，直至完成任务。② 结束于正峰在完成任务后，可以触发氛围动效反馈成就，给用户积极的结尾。写在最后以上就是我基于 B 端产品特征，和 C 端产品的体验思维，用“B+C”的设计思维尝试探索优化 B 端产品体验的一些方案尝试。“B+C”的设计思维，其本质是想找到业务与体验的平衡，作为 B 端设计师，好的用户体验一定是与业务紧密结合的，与业务匹配的体验优化才有其意义和价值。欢迎关注作者微信公众号：「Gtech UED」本篇来源：优设网原文地址：https://www.uisdc.com/c-methods-to-b
文章 写文章 设计师 引言9 月份同事小万给我发微信问我“是怎么输出文章的，有好的方法或建议嘛？感觉自己提起写文章没有头绪，不知道怎么去写”。这时，我便开始思考写文章的思路，并且询问周围设计朋友们对于写文章的见解。我想很多设计师多少都会遇到这样的问题：想写文章怕写不好、没有反馈怎么办、写不下去等疑问，其实这是很正常的，记得我在第一次写文章时候也有这样类似的担心。当我们把以上问题克服或进行拆解的话，更多的源自自身过于担心，又或者没有对写文章进行系统学习。所以打开写文章的一个正确方式和系统思路至关重要，我们要学会如何积累文章源头，有了文章方向之后再系统整体思考，输出文章的速度将飞快提升。此篇文章分别以设计师为什么要学会写文章、写文章的误区、文章的思路、模型、持续输出等五部分进行探讨。设计师想做自媒体？我总结了3个上手就用的写作方法！编者按：设计师想发展副业，成为自媒体？阅读文章 > 一、设计师为什么要学会写文章对于输出文章来讲，每个行业都可以作为自己沉淀知识的方式之一，书写文章还可以提升我们的通用能力。无论是对设计师还是所在的部门来讲，都是一件提升影响力的事情，例如公司部门，输出文章可以对外提升部门影响力、营造良好的工作学习氛围、以及打造公司部门 IP；设计师而言，可以为日常工作赋能、挖掘工作中遇到的专业知识，提升专业能力和技能。1. 写文章的优势和发展写文章提高自身的通用能力：学习力、行动力、表达力、营销力。例如工作问题总结和输出时，需要设计师们挖掘设计相关专业知识，前期大量相关专业知识的输入， 从而增强了自身的学习力、促进了行动力；思考的过程中不断的输出，锻炼了内在表达力，直到完成文章并发布公众号、设计网站等，促进了自身营销力，增强了公司部门的影响力。2. 会写文章的设计师在职场中的优势首先，工作专业知识得到巩固和优化；在工作中你学习到、看到、听到的都是一瞬间短暂的内容，我们需要梳理遇到的问题和思考，形成知识框架；反之，久而久之会对零散问题遗忘。例如：情绪版、品牌迭代、体验地图、导航栏、新手引导、金融类 APP 等等，从问题中抓取，并且把这些问题用树状图或思维导图形式输出整理。其次，锻炼逻辑思维：一个项目中，UI 稿完成设计，交给开发进行还原实现，但是还原度非常低，相关人员说需求时间很紧，肯定优先功能走通，有时间的话再去调整界面视觉的实现，希望互相体谅一下。那如果我们把这件事当作文章中的案例，我们也许会以结构化的方式去呈现，并不是直接琐碎去表达；能够通过多维度的思考却能够把一件事情解剖开来，发现本质。这里的批判性思维并不是对问题发出质疑，而是能够多角度客观的看待问题的能力。再次，上下游的体验会更好：如果我们成为一名会写文章的设计师，不仅能把文档、报告写的漂亮；当我们面对的产品、开发、运营等多角色发送邮件时，就可以体现出一个人的文案写作功底，一个会写作的设计师对于文案的处理一定比不会写作的设计师更加细致、便于阅读。最后，提升团队影响力：在团队中被看见也是一种能力，被看见的方式有很多，积极主动，带动氛围、熟练的技能、利他的分享、超众的表达，沉淀输出文章等方式二、写文章时候的误区1. 对输出的文章有较高的预期记得在 2021 年 5 月份我写下第一篇文章时，担心写不好、怕同行人指指点点，现在回头来看这种担心完全是不必要的。最开始作为写文章小白容易犯的第一个误区是对写文章有着较高的预期。例如有的人刚开始写，就想写出阅读量几万+的文章。想要有自己设计师偶像的水平。当然有这样的心态果断写不出来文章，便开始内耗。用一句俗话讲：“还没学会走，就跑起来的了”，所以我们需要慢慢的进行可以练习，便会越来越好。写作是一个熟能生巧的过程。有的人从来没写过东西，本身是一项生疏的技能，想立刻写好文章基本是不可能的。如果一件必然失败的事抱有很高的期望，那么自信心就会被打击的，对于写作小白来说: 缺乏自信是一个很危险的事情，因为很容易就会放弃。2. 看不到反馈，却放弃了第二个误区: 写着写着放弃了。“今天想写就多写点，明天就可以不用写了”。“今天先写到这里吧，明天多写一点”。人一定会犯懒，如果不在状态的时候越来越多，在状态的时候越来越少，那么平均下来写的内容会变少。只有越写越多，才能提高写作能力，如果越写越少，那么就会放弃写作。由此可见提高写作依赖长期的训练，也需要每天坚持一点点；每天都要写一点东西，持续稳定的输出才是硬道理。3. 只愿意写，却不愿意改文章第三个误区是: 只愿意写，却不愿意改文章。发现很现实的现象: 不愿意看自己写的文章多半是接受不了自己写得差。比如你心血来潮，洋洋洒洒地在没有框架、规划和目标的情况下输出了自嗨式一篇文章；再回头重新读时，文章中有不少错误，因为你写的时候正嗨，选择性忽略了这些错误，则不愿意去看自己的文章。因为我们觉得写了多长时间，写了多少字数，来回修改多少遍；还记得一位设计师老师讲他写文章时候的场景，一篇文章明明觉得写好了，修改好了，第二天就会觉得还是有很多地方需调整，其实一篇文章改得多不是因为写得差，而是为了更完美。对于初学者来说，不要只顾着写文章，其实改文章也是提升写作能力的重要方法。改得多了，你会发现：改文章所获得的成就感比写文章带来的成就感更强烈。4. 缺少刻意练习第四个误区是：缺少刻意练习。我们前面说过写文章需要持续的练习，即使写的内容很短没有关系，短内容帮你保持写作手感。小白除了持续练习，也需要可以练习，只有刻意练习，才能知道自己在哪方面的技术薄弱，才能针对性的学习。比如很多人说: 写作很难。就去研究为什么都说写作难，究竟难在哪? 知道难在哪了，再去学习不就更有针对性了，学习就更高效了。在文章输出的时候一定要注意刻意练习，哪里有问题就解决哪里。很多初学者在写作时，写不痛不痒的文章，其实是缺乏刻意练习导致的。如果你一直写不痛不痒的文章，即使你写十年，能力还和现在还是一样。如果不会写故事，那就每天都练习一个自己不会的精句，然后争取在每天的文章里练习写精句，哪里不足，就在哪里努力。刻意练习就是练习的升级。刻意练习让写作更有了目的和意义。三、初识写文章的整体思路对于设计师写作小白来讲，很多人都希望了解文章输出的整体思路或者想了解文章输出系统的流程，这里拿工作中的真实案例来讲。第一、（文章源头）在某周三下班后的地铁上，看到小万的关于如何写文章的问题，我便对此问题记录了起来，思考以怎样的方式可以清楚的解决到她的问题，便有了文章大方向（怎么写文章）；实际工作。实际的工作可能会比较真实比较落地，因为是真实的项目，代入感会很强。设计行业热点。比如说 iPhone14 的发布，因为灵动岛大家都非常的感兴趣，这时，便可以对灵动岛设计上分析。生活兴趣，比如我之前看到的一篇《从垃圾桶到“多入口”，谈谈 B 端设计思考》文章，这位作者因为在厨房打扫卫生，垃圾桶换掉了而引发联想到 B 端产品上来的。让读者觉得有趣，有共鸣，甚至是跟自己的设计专业有联系。经验积累，比如工作五年以上的设计师他会写一些心路历程和职场经验分享。专业书籍的思考，比如我们公司小月写的《六个设计师要懂的视觉心理学知识》。以上五个都可以来自我们的工作和生活。因此我们可以随时记录工作中遇到的问题，以及同事之间讨论的问题进行思考记录下来、主动整理零散的一个信息库，对于某一个问题进行每天收集一点阅读一点，每天写一点，然后自己的思考成为系统的时候，那一篇文章差不多也就出来了。第二、围绕大方向进行聚焦群体和主题，便定主题（设计师如何从 0 到 1 输出文章）第三、对于很多设计师，并没有接受过专业的写作训练，在踏出文章输出内容的第一步，围绕主题大量的输入是非常有必要的，但是并不一定所有的主题都会有大量的文章，那除了文章之外呢，我们还可以去学习课程沉淀自己的思考、询问朋友等。第四、通过相关主题的专业知识输入，我们可以先沉淀自身的思考，然后结合思考罗列文章的大纲或脑图。第五、我们的文章树干完成之后呢，就是为树干去添枝加叶，施肥啦，也就是需要我们把自己的思考用通俗易懂的话去表达清楚，在输出内容的过程中用生活、工作中的例子去佐证，那这颗大树就繁枝叶茂啦。第六、最后就是对我们的大树修剪，对文章中多余、冗杂、错误的词汇进行调整和修改，这样我们的一篇文章就输出了，这里有的人会质疑讲：“不管写的好与不好、深浅吗？”当然要去管，我们输出文章要做到的是“先生产再成交、先完成再完美。”四、设计师即学即用的文章模型以上向你讲完文章的整体思路，想必大家更想知道不同类型的文章该如何去输出呢，今天分别探讨专业名词/工作中遇到的问题、读书复盘、清单小短文、问题回答四种类型的文章，在这里我着重和大家分析第一种类型的文章模型的输出技巧。1. 专业名词/工作中遇到的问题我们工作中的文章该怎么样去输出呢？这里我们将根据两种方式进行探讨，「正序」（一般情况下都是在工作场景中遇到的问题），&「倒序」设计师们在各大设计网站阅读的文章标题去拆解专业名词和文章思路。首先，根据上面我们讲到的文章来源，先从正序的思路去分析文章的源头有哪些？例如工作中遇到的问题：弹窗、导航、趋势、表单、表格等，又或者是同事（如上图）、朋友之前讨论关于专业知识的话题和问题，都可以是我们文章输出的内容。由你工作中听到、看到、思考到的专业知识，通过美化专业名词的标题则成为一篇文章的标题；除此之外，还有你平时在网站上的阅读到的文章，当我们把文章标题进行汇总整理后发现，这些作者们也是从专业名词出发的。例如上图中是我在优设网站上收集关于「孟菲斯」相关的设计文章，把他们的标题放在一起会发现，标题核心为「孟菲斯」周围都是标题的修饰词汇，吸引用户阅读和点击的；总之这个就是为什么我会把「专业名词」和工作中遇到的问题放在一起讲的原因，下图为一篇阅读文章时的分析，去反推文章作者的文章框架，久而久之在写文章思路上也会丰富很多。讲完工作中的问题或专业名词之外呢，还有很多设计类文章是以「项目复盘、功能升级、品牌升级」等内容出现的，那这三种内容又有着怎样的联系呢？这里收集了一些代表性文章和阅读，并对文章内容框架进行分析。（请看下图了解）2. 读书复盘思路：选好书 --- 定（选题）主题-思维导图大纲-填充内容-配图第一、（抛出引子，为什么分享这本书）选择一本好书或自身感兴趣的书籍去阅读第二、定主题，例如这本书的 6 个收获、8 个启发、9 个思考、5 个观点，我们的标题也最好带着这些数字，引起读者好奇。第三、（这本书主要讲什么）大纲介绍第四、观点（观点一、观点二、观点三、观点四...)第五、结合案例和实际输出自身非常感兴趣或有收获的点第六、结语3. 分类清单小短文分类清单体更多像是每一块被切好的蛋糕，在达到一定量或你想要发布文章时就做成了一个大蛋糕。首先，定一个小主题，写短文。例如设计师一定要提升设计思维，写下 10 个为什么；例如每月的思考和复盘，可以针对，对工作的思考、对成长的思考、对设计的思考、对人关系的思考等等。有各个小标题的方式去完成一篇文章。例如：我在 6 月份写下自己的反思和总结（请看下图）4. 问题回答式问题类文章也是比较简单的方式，例如某某问你了什么问题，可以把问题以写信的方式去进行表达和输出。上面是问题，下面是答案。一个个的问题清理出来的。例如我比较喜欢的连岳，他就是以问答的形式去回答粉丝的困惑，一个问题输出一篇文章，至今作者已经把这些问答式文章编写成了书籍。五、如何保持并持续输出文章首先是自我动力，写作是对自己有逻辑沉淀的价值，并想进行下去；其次是外界鼓励，写的东西很小众，关注的人不多，不过读者每次留言里的鼓励、私信里的赞许，都是对我写作爱好的精神激励，这是一种暖暖的正能量；最后，自我沉淀，它成为我在工作生活中的一部分，例如有好的设计项目复盘、精彩的设计故事、好的设计方法、都是可以记录，并系统去输出文章的，就好比如我们先有一个主题（地基）然后不断的在这个地基上进行积累和输出，每天一点点，进步一大步！六、总结以上就是我围绕小万对我提出“如何写文章”的见解和探讨，谢谢大家的阅读，共勉的同时希望可以帮助到你们！本篇来源：优设网原文地址：https://www.uisdc.com/designer-article-writing
资产 需求 组件 对于 B 端数字产品来说，建立一套企业级的 Design Systems 可以提升团队生产力为企业赋能，这当中会沉淀很多设计资产（设计资产指设计体系中的所有产出物）。在有了设计资产后，如何确保使用者能够正确使用？如何维护其良性发展？如何管理设计体系资产？如何建立和谐的资产共创流程？这需要一套完善的、行之有效的更新机制。说到更新，那必然不是 0-1 的过程，而是 1+1>2 的事情。去年我们更新了设计资产 V2.0 版本，随着业务的不断发展，在使用过程中发现基础组件模式需要新的拓展以更灵活的应对业务、发现缺少了组件的应用指南、使用场景等内容以更好的指导使用者、发现图标库缺少统一的管理等问题，因此在我们做了充分的调研和分析之后，启动了 V3.0 版本的更新工作，刚开始我们仅借鉴有赞的更新机制执行更新，但在执行过程中，我们遇到很多现实性的问题，基于此，我们结合团队现状沉淀出了一套完整的更新机制，它更适用于没有专门设计体系团队的中小型团队，在此跟大家分享，希望可以启发你的灵感。在进入正题之前，我们先思考一下，为什么做项目可以从立项到最后稳定运行一步一步执行的那么有条不紊？那是因为在项目的整个生命周期中，有项目经理在利用十分成熟的项目管理知识体系，在指导每一步流程如何执行。那么同理，对于设计资产，它也是一个项目，我们借用项目管理思维去管理它，把更新流程代入到项目管理的闭环，该如何来做？下面从项目管理的五大过程来分享我们每一环节的方案。一、启动过程目的：触发开启、确定范围及周期首先我们需要在启动时明确的核心内容是：什么时候开始更新？以什么样的周期进行更新？更新的范围如何定义？1. 触发开启在项目开启前，需要决定什么时候开始维护设计资产，这个很简单，在一个发版后，就要开始思考下一版本需要做什么了，这跟项目的版本迭代是同理的。所以在开启之前我们就应该要定义好如何做准备工作，如何收集设计资产的需求，这一点是我们一开始没有想清楚，后来在执行过程中总结出来的。对于设计资产需求的收集是一个需要全员(资产建立者及使用者)参与的过程，需求的来源是每一个角色在使用设计资产做项目的过程中遇到的问题，把这些问题进行汇总记录，便形成了可能要做的需求。所以此时要有一个需求池承载这些内容，为确保大家更好的协作，我们在钉钉知识库建立了在线表格「设计资产需求池」用统一的格式提需求，让问题可追溯。2. 确定范围确定范围就像产品做需求管理是一样的，需要对大量的需求进行筛选、归纳、排序等，最终确认每个版本的需求范围。同样，针对需求池中的内容，我们是以月度为时间节点召集相关干系人（也会根据产品的更新频率动态调整为两月一次），对需求池进行定期评审，通过需求决策三角模型来决策是否转化为有效需求，从需求的普适度、拓展性和实现成本三个维度来筛选、归纳、整理需求，然后用采纳、不采纳和待定三个状态来决策是否要做，最后会根据迫切度对需求排出优先级，这样就完成了我们需求范围的定义。然后，针对范围内的需求，进行解决方案的讨论，或许是优化、或许是新增的内容，都需要对提出人的解决方案进行讨论，若方案被大家一致共识 OK，那么方案按其实现；若有人存在异议，则需探讨出更优的方案。总之，是为了得出大家共识的和更优的解决方案，这是建立共同意识的良好时机，也为后续的组件资产使用提前加深印象。3. 确定周期为了使每个人都能与设计资产的进化步调保持一致，它的更新是需要有节奏的、定期执行的。更新周期需要结合项目的实际更新节奏去定义，设计资产作为设计的指导工具，当然是不能很频繁的更新，特别对于 B 端产品来说，大部分是以业务为主，组件的更新多半是一个事后的行为，所以我们暂定的频率是月度进行一次需求评审，根据通用性、复用性这两大指标的重要程度，在组内讨论看是否需要对其更新，会先进行内部文件更新，以季度的时间节点进行一次线上更新需求的评审，以评估是否要进行线上库的更新，实际线上库是时隔一年我们发布了 V3.0 版本。二、规划过程目的：制定计划、明确分工有了节点划分，具体要做的事情该如何去做，应该存在一个流程规范，并且要根据参与角色的不同分别制定。在我们设计资产更新维护过程中主要有以下几个角色和对应要做的事项，具体为：设计共创者：发现问题、输出方案、提出需求、参与讨论、执行验收…前端工程师：发现问题、提出建议、提出需求、参与讨论、开发实现…资产负责人：制定计划、资产维护、组织评审、推进进度、全流程统筹管理…在设计资产维护过程中为确保角色之间的协作能够顺畅的进行，我针对多个角色从需求阶段、设计阶段、开发阶段三个阶段，分别定义了流程图和产出物流转图，需求阶段的流程如下：后续在我们的资产和流程成熟后，会规划把收集需求这一过程开放出去，让更多的角色参与进来。前提是我们已经在公司内做好了设计系统的推广和普及的工作，这是计划下一步要做的事情。因为在项目协作过程中你会发现，除了前端和设计之外，像产品、测试他们都有了解设计系统的需求，如在测试过程中，当他们对一些功能点的交互方式或组件的视觉呈现有疑问时，就会到设计这边来询问，或者有一些建设性的建议等，这些外界的声音我们作为设计系统的构建者应该及时收集，所以后续我们会思考如何更全面的收集需求，让更多的人参与构建。三、执行过程目的：执行工作、确认交付执行过程分为两条线，一是设计侧本地文档更新的执行过程，二是前端侧线上库更新的执行过程。1. 设计侧设计侧的执行是要及时的更新设计稿，根据每月对需求的评审，会按评审频率同步更新本地设计资产文档，也就是我们的 sketch 文档，这份文档更新之后便满足了设计组内做产品设计时可以使用完整的内容。对于设计资产文档的维护单独库对应到人进行一对一负责的，最初为了让大家共同参与进来，在基础组件库的设计时，让每个业务线的设计师单独设计，然后由负责人进行汇总，但这样受限于 sketch 软件本身，遇到一个很繁琐的问题：当组件由不同的人各自在不同的本地文件绘制后，汇总的人没有办法直接 copy 到公用的文档中一键生成可调用的组件插件（不知道使用云文档的团队是否可以直接实现多人对一个文档进行共同编辑，不用本地文档传来传去），所以最终的汇总基本是需要重设计一遍，这样就引起重复工作的问题，在经历了两次这样的流程后，我们对此进行了优化，后续改为每个库由单独的人来负责设计产出，图标库、基础组件库以及可视化组件库都分别由一人负责绘制、上传、对接、更新。2. 前端侧本地设计稿更新之后，需要前端支持进行线上库的更新，线上资产更新需要设计和前端协作完成，这时我们是通过产出设计资产平台文档前端版来进行协作的。这个文档是从使用者的角度进行设计的，按照：基础规范、通用组件两大类进行划分，其中通用组件包含：导航、数据录入、数据展示、数据反馈、其他五大块内容，每个组件元素的内容分为：实例、API 和指南三大模块，其中指南当中包含了：使用场景、组件构成、组件尺寸、交互状态等内容，是一份用来帮助使用者更好的使用组件的指南型文档。线上资产的更新频率以季度为周期（也根据业务产品的迭代频率动态调整），图标库的更新是跟随产品版本按照图标的固定流程进行更新。四、监控过程目的：发现偏差、做好验收开发过程中和完成后，需要对还原度进行监控，验证是否与预期保持一致，这里的做法跟我们项目验收是一样的，检查资产实现的质量，整理到验收文档中与前端对接优化。对于设计验收之前写过一篇复盘小文，感兴趣的可跳转查看。最后一道防线！五步提升 UI 交互验收效率（附验收模板）细节决定成败，这次跟大家聊聊项目开发中最后一个环节，也是考验细节能力的一个环节，即「设计验收」。阅读文章 > 监控过程是上线前的质量把关环节，这个过程中我们也是全员参与的，设计+前端，通过互查、自查、验收的方式对组件进行验收，这个过程也是建立共识的好时机，所以更应该积极推动每个组件干系人积极参与进来。五、收尾过程目的：发布版本、归档复盘在发布版本之前，需要编写更新记录，更新记录我们是维护了两份，一份是线上平台中展示的更新记录，主要由前端编写，内容涉及到组件具体的实现、调用替换等技术修改相关内容，较为细致。另一份是维护在钉钉公共库维护的「设计体系更新表」，此表格的内容更为概括，主要是做功能变更记录，两份文档的更新版本号是保持一致的。所有的工作完成之后，最后，发布版本。每个版本更新后，除了将更新内容同步给核心的使用者以外，还需要将设计资产更新内容进行更广泛的分享，需要主动的引导和推广团队内更多的人去关注和学习设计体系知识，才能使更多人更好的使用起来，才能使其良好且持久的运转，才能收集更多建议以建立更加和谐的资产共创流程。收尾并不是结束，而是代表新的开始。总结这套完整的更新流程是根据今年设计资产从 V2.0 升级到 V3.0 总结而来，整个思路和灵感来源有项目管理知识体系以及 Design Systems 这本书，所有知识都是融会贯通的，我们利用项目管理的思维找到了适合自己团队资产更新的流程，能够适应我们团队的自然工作流程，只有这样团队里的每个人才会具有主动性，大家对设计资产的贡献才能更加均匀。虽然在执行的过程中还是会或多或少的需要一些问题，比如按时间节点迭代不能快速的解决组件当下的问题以更快的应用、大家在业务外需要花费更多的精力参与到共创过程难免积极性会有差异、具有创新性的想法不能及时的被纳入库实现……这需要我们不断的去优化这个小而美的流程，以更好的为团队协作提升效率。流程提供的仅仅是大方向上的指南，具体的执行需要根据实际工作流程随机应变，在此把我们的思路和成果分享给大家，希望大家进行交流学习，路漫漫其修远兮，吾将上下而求索，设计的进步需要不断的反思和沉淀，需要更多的思维碰撞。总之，多读、多看、多学、多分享，步履不停……欢迎关注作者微信公众号：「做设计的小仙草」本篇来源：优设网原文地址：https://www.uisdc.com/design-asset-update
飞翔的企鹅
表哥
在路上
落霞与孤鹜
张大湿
