设计师都知道根据《苹果 iPhone 人机界面设计指南》，手机 UI 的最小点击区域是 44px。但汽车 HMI 的最小点击区域业内却没有定论。考虑到汽车驾驶关系交通安全，点击区域大小与反应时间极为重要。

设计师都知道根据《 苹果 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 原型，来验证这些设计决策。此外，我们正在测试其他使汽车触摸界面更安全的手势，比如滑块和其他可交互元素。我们将继续在这个博客分享我们学到的新知识，敬请期待！

优设C4D全能实战班第18期开课啦！

优设C4D全能实战班第18期开课啦！

大家好，这里是 TCC 翻译情报局，我是李泽慧。评价是电商网站不可或缺的重要组成部分，巧妙合理的评价模块设计可以帮助用户快速决策，有效提升平台下单转化率。作者通过对比多家热门电商平台的评价模块设计，总结出 10 条小技巧，并且附上了优秀和糟糕的设计案例方便理解，文章内容通俗易懂，案例丰富，一起来学习一下吧！

大家好，这里是 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翻译情报局」

大家好，这里是 TCC 翻译情报局，我是李泽慧。评价是电商网站不可或缺的重要组成部分，巧妙合理的评价模块设计可以帮助用户快速决策，有效提升平台下单转化率。作者通过对比多家热门电商平台的评价模块设计，总结出 10 条小技巧，并且附上了优秀和糟糕的设计案例方便理解，文章内容通俗易懂，案例丰富，一起来学习一下吧！

大家好，这里是 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翻译情报局」

优设C4D全能实战班第18期开课啦！

优设C4D全能实战班第18期开课啦！

上期推荐了一波Figma插件，这期分享10个提高效率的实用技巧~提高200%的效率！13个腾讯设计师常用的Figma插件序言 咦，同样是用 Figma，为什么同桌小花早早下班，隔壁二狗岁月静好，而你却在 Figma 中焦头烂额？阅读文章 > 一、快捷键面板｜宝典大全相信很多设计师一定看过一些快捷键操作，但...

上期推荐了一波 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. 创建渐变 token

Figma 本身没有办法做到制作渐变色 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，点击我的插件，发现我已经安装了这么多插件... 我究竟要用哪一个插件？

阅读文章 >

欢迎关注作者微信公众号：「腾讯设计族」

签到的存在不仅可以增加用户的黏性，也是激活用户参与度的关键因素之一。签到按钮在 UI 设计场景中，算是较为常见的一个类型，一个好的签到按钮不仅可以提高用户的关注度，也能激发用户的点击欲。这就是给你的一个关于签到设计的小需求：这个小需求看起来很常见，交互设计也许给你的是签到两个字，也有可能帮你画了一个外框。

签到的存在不仅可以增加用户的黏性，也是激活用户参与度的关键因素之一。签到按钮在 UI 设计场景中，算是较为常见的一个类型，一个好的签到按钮不仅可以提高用户的关注度，也能激发用户的点击欲。

这就是给你的一个关于 签到设计 的小需求：

这个小需求看起来很常见，交互设计也许给你的是签到两个字，也有可能帮你画了一个外框。总归它是显得很普通的，是不是没有一点设计感呢？那我们如何去增加设计感，还要有自己的特色，做出一个差异化的签到按钮呢？

让我们带着这个问题，和黑马哥一起卷起袖子开干吧！

签到功能交互设计分析：

签到功能该怎么设计？从12个方面详细解析！ 本文是关于签到功能的视觉汇总分析。

阅读文章 >

一、签到设计的类型 在开始案例实战之前得先梳理一下关于签到设计的类型，方便我们挑选出最适合当前产品的风格。

1. 纯文字形式

纯文字形式属于最为简单的样式，有直接文字展示、文字带下滑线、文字加箭头等，这个形式不是很建议，缺少设计感和用户关注度。

2. 按钮形式

为了提高签到的点击属性，通常以按钮的形式设计较为稳妥，也就是我们说的签到按钮。按钮通常是带圆角的和全圆角形式，也分为线性外框、面性外框、质感外框等。想要设计得比较突出，通常会在按钮的质感上面进行视觉表现，增加光影质感和纹理图形等装饰。比如：极光风（弥散光）、流体渐变、图形纹理等都是不错的方向。

3. 文字加图标形式

在签到按钮的基础上，进行进一步强化就会配合图标或者图形进行视觉感增强。图标设计的角度出发发挥性也比较大，便于 设计师 做出更多方案。图形的角度可以是 IP 形象的结合，不仅可以提高情感化设计，也能做出差异化的设计方案。

4. 微动效的形式

微动效相较于静态表达来说，自然是要更为突出一些，签到按钮动态形式也是较为常见的存在。如果想要突出签到设计，微动效的表达是不会让你失望的。

5. 特殊造型形式

常规的形式依然离不开按钮的表达，为了打破常规形成差异化的设计，在签到按钮造型上面也是可以进一步深思的。在能够体现出点击属性的前提下，我们可以结合产品属性和业务特征，探索出符合属性范围的造型，也能使得签到设计更有特色。

小结

当我们梳理了一些常见的签到设计类型之后，就可以结合需求选择比较贴合的形式。当然，也可以创造出不一样的设计，下面就和黑马哥一起来演示一下吧！

二、签到按钮设计实战 需求：为一个充电桩产品设计签到按钮，需要体现出产品的服务属性，也要能变得更有特色。

UI 设计师拿到这个需求都会觉得：这个也太简单了。于是就会快速的做出几个样式，虽然毫无设计感可言，但是老板喜欢就可以啦！不过，如果老板不喜欢呢，有没有思考过如何留有后手。

1. 分析总结

无论需求的大小，个人都会先进行一些简单的分析和总结。要知道别人做出来都是啥样式，然后再总结这些设计都有什么方法论。也就是本文开篇总结的一样，虽然很简短，但是总结有助于让自己更有把握。

2. 梳理关键词

关键词梳理可以打开我们的思路，虽然只是一个按钮，但是我们也可以通过关键词发散出更有意思的设计表达。比如充电桩这个产品我们可以梳理出哪些关键词呢？

3. 绘制草图

如果根据关键词都去进行电脑绘制比较耗费时间，先进行一些初步的草图有助于灵感的快速表现。

4. 确定思路

通过草图我们可以发散思维，选择出几个具有代表性的方案进行电脑绘制。这里黑马哥选择了电池这个表达作为示意，不仅可以体现充电的概念，也能体现出设计差异。

5. 绘制初步造型

只要思路确定了，绘制起来就比较快啦！快速把电池的造型绘制出来，然后再结合按钮的特征进行微调，以满足“签到”文案在造型轮廓中的布局。

6. 初步配色

确定造型后进行了初步的配色，利用大色块把整体的配色关系体现出来，这里也要思考动态表达的色彩关系。

7. 质感深入

很多设计师都只是进行简单的层级表达，缺少质感深入的技巧。我们要通过色彩变化体现出造型的结构特征，也要通过光影处理把电池的质感强化出来。

8. 字体处理

大部分情况下对于 UI 设计师来说都会选择一些常规的系统级字体，不过这里作为一个按钮来说我们在字体的选择上面可以突破。这里我选择了阿里妈妈数黑体作为签到的字体，然后也进行了一些质感处理，贴合电池按钮的设计表达。

9. 最终效果

通过对字体和电池造型的绘制，完成了这个不一样的签到按钮。我们再将按钮放到界面场景中看一下，最后结合界面的背景做一下投影等处理，这个关于签到按钮的小需求就搞定啦！

小作业

以上的静态方案算是完成了，这里也给大家布置一些发散的小作业。

如果要做动态表达，你会如何做？ 如果这里要体现签到送礼，不改变当前设计基础的前提下，你会从哪些方面入手？ 欢迎大家进行思考，尝试去完成这个小作业，大家有什么新的想法也可以微信黑马哥进行交流。

三、小结 通过一个关于签到按钮的小需求和大家进行了一些设计交流，设计的思考带有一定的主观性，我们在自己的需求中还需结合实际的情况做出调整。需求不分大小，每一个从自己手中出去的设计方案，我们都要尽力做到最完美，体现出自己的职业态度和设计能力。

本文观点仅作为个人经验表达，如果觉得不错我们互相进步，如有不足欢迎大家留言补充。

欢迎关注作者的微信公众号：「黑马家族」

在上一篇文章中，我们通过实例讲述了构建和维护组件库的一些方法和思路：组件库设计指南（一）：组件库的诞生编者按：组件库该如何构建？阅读文章 > 在聊到关于持续维护组件的意义时，我们说到，组件在保证合理性的同时，还需要满足复用性、易用性，以便更好地服务于日常的设计需求。所以在组件维护过程中我们不可避免的需要考虑...

在上一篇文章中，我们通过实例讲述了构建和维护 组件库 的一些方法和思路：

组件库设计指南（一）：组件库的诞生 编者按：组件库该如何构建？

阅读文章 >

在聊到关于持续维护组件的意义时，我们说到，组件在保证合理性的同时，还需要满足复用性、易用性，以便更好地服务于日常的设计需求。所以在组件维护过程中我们不可避免的需要考虑复用性和易用性二者之间的平衡。此时我们需要思考“如何使一个组件在满足多业务场景需求的同时，又能保证其易用性？

一、关于复用性 复用性是指组件具备一定的可配置属性以适用不同场景的能力。适应的场景越多，组件的复用性就越高。「可配置」主要体现在以下方面：

支持通过替换内容，样式，尺寸等操作改变其状态，以适应不同的场景； 支持局部元素展示隐藏，例如商品卡片的标题、说明、标签、价格等可根据接口数据控制展示逻辑； 支持多种布局和排列方式，例如商品卡片的左图右文排列、上图下文排列； 我们在上一篇文章中的提到的基础样式或组件，例如文字(字号、颜色、对齐方式)、颜色、图标等即是可配置属性，通过这些基础样式预设的变量，来满足各场景的需求。

组件的内部元素的可控性越高，其适用的场景就越宽泛。为了满足不同场景的需求， 设计师 在调用组件时往往需要通过“覆盖层”设置其嵌套逻辑和样式选取，整个过程中所产生的思考与操作成本较高。但相应地，正因为「组件」高度整合了多个可配置属性和变量，组件库的整体规模会相对容易把控，结构也会相对清晰。

二、关于易用性 易用性是指组件对于使用者的友好程度，即组件的设计能够符合使用者的认知及需求，使用者能通过较低的学习成本、快速上手使用。我们通常需要从以下 4 个指标来度量组件是否易用：

结构清晰：组件所包含的所有组成元素是否可视； 便利检索：指在文档内查找组件的难易程度，通常与组件命名相关； 即拖即用：单一组件用于业务设计所花费的成本； 帮助可视：是否容易获取组件使用的提示和帮助。

组件内部元素的可控性越低，其适用的场景就越单一。对于使用者来说，可以快速地检索、发现所需样式，并能快速完成调用，也更易于组件的认知和记忆。但要满足多样化的设计需求，所需「组件」的数量需要足够多，组件库的整体规模相对较大，后期更新和维护成本更高。

总的来说复用性和易用性是优秀组件必不可少的特性，二者缺一不可，但任何一个极端都不利于构建高效实用的组件库，设计师需要明确组件库的目标并制定规划，针对每一个图标、按钮、组件、模块，考虑如何实现复用性和易用性的平衡。

下面将以“Gtech UI Kit (Mob)”组件库当中的实例，来简单阐述我们对于二者平衡的思考，以及我们是如何做的。

二、以商品卡片(网格布局)为例 以电商 PLP 页面（商品列表）中常见的商品卡片为例，我们知道在列表中每个商品最终呈现在用户面前的内容取决于商家后台的配置。对于承载内容的组件来说，我们在维护时需要结合业务需求考虑诸多问题：例如自适应场景、商品名称的长短限制、卡片内容的布局和排列方式等等...

1. 拆解 - 从业务出发，拆解组件的表达结构和所需元素

如果对商品卡片进行拆解，最基础的商品卡片通常包含：背景、图片、名称、标签和价格等元素。

图片通常以 1:1 的比例展示，无论在什么屏幕宽度下，均保持比例一致；

商品名称通常不会超过两行，需要考虑自动布局以适应不同的文本长度和屏幕宽度；

标签行通常展示 1-3 个不等，甚至没有的情况，标签组件中需预设足够多的样式支持；

价格通常会展示折前价和折后价对比，或仅展示最终售价。

当某一组件拆解到足够细分的时候，可拆解出多个可配置属性（即基础样式和组件）可以形成多种组合。依照这些组合，我们可以开始创建组件的工作。

2. 组合 - 通用的组件的布局及可配置属性的搭建母组件

建立商品卡片的基本结构和内容排列：网格布局以上图下文为主，将所有的元素设置成合适的大小，除图片外的其他内容均以名称、标签、价格的顺序自上而下展示，另外，建议标签和价格元素各自合并成组，以方便后续进行自动布局；

选择所有元素，创建为组件；

对于网格布局的商品卡片，我们除了一系列的自动布局和尺寸的设置外，需要注意的是新建一个空对象容器、将图片放置其中，以方便固定比例。

以上我们就完成了满足上述需求的商品组件，我拆解了一下结构，如下图：

按照上述操作，我们完成了一个基础商品组件的创建，我们通常称之为“复用组件”，通过复用组件我们在需求设计时可以根据实际业务场景进行替换图片、替换文字内容、增删元素或者拖拽拉伸均等操作。

3. 精细化 - 从多维度，多场景输出子组件的方案和组合

精细化是根据实际情况对复用组件进行细分管理，通过对可配置属性的替换，输出多个样式组合即“子组件”；子组件一般根据使用频次和属性分类展示在组件库文档内，以供使用者浏览、使用；如果需要调整某一子组件时，只需进行独立调整，无需改动复用组件，且其他子组件也不会受其影响。这种管理方式的优点诸多不一一赘述，但需要在前期整理、理解和细化时需要花费一点精力。

三、思路 在整个过程中，我们前期将目标进行拆解细分，中期整合多个属性变量创建可复用组件，最后通过精细化管理，尽可能的在单一组件目录下展示多个样式组合，并通过不同的菜单对其布局、类型、状态等属性进行分类，使之在使用环节能够易于检索、识别、并即拖即用，快速上手。

以上是我在整理组件时的思路，抛砖引玉，仅供参考。在实际维护的过程中需要考量不同属性和变量的使用频率。并不是组件整合的属性和变量越多越好，兼容越多的属性和变量往往意味着组件的复杂度越高，对于各个场景的调整成本也越高，反而会增加额外的操作和认知成本，就舍本逐末了。

再举个例子，如果设计能够在需求阶段就得知后台配置的商品名称有字数限制的情况的话，我们在创建商品卡片时，可以直接以最极端的场景考虑即可，这样也能减少试错成本，提高维护效率。所以也请大家注意，要结合业务需求和日常工作习惯，找到最适合自己的组件整理维护方案。

四、易用性在前，复用性在后 实际上，无论何种事物，复杂的逻辑往往是隐藏在看不见的地方，就如同我们日常接触的应用程序一样，展现在用户面前的永远是优秀的界面和体验设计，而其背后往往是开发者无数行代码交织形成的复杂逻辑。组件也是如此：

在整理和维护组件的环节，我们需要考虑多种组合场景，衡量这些场景的使用频率，整合出一个或多个高度复用性高的组件，并以此精细化足够多的可供快速使用的子组件。

而对于使用环节，我们希望设计师和开发者可以通过浏览设计文档、网页等方式查看所有子组件选项和使用帮助，并能快速选择业务所需的组件，减轻改造组件的成本，以实现更有效率的设计和封装工作。

最后，不要盲目追求兼容性和复杂度，适合即是最好。

更多组件设计干货：

6000字干货！如何用 Figma 搭建系统组件库？ 组件库是一个强大的提效工具，对于设计师和开发来说有了统一的标准，输出的效率也会大大提高。

阅读文章 >

用一篇文章，从零开始帮你用好 Figma 的组件库功能 对于设计系统，我们最熟悉和常用的应该就是设计组件了，即 UI kits，包括输入框、按钮、文字、链接、下拉菜单等等。

阅读文章 >

欢迎关注作者 微信 公众号：「Gtech UED」

上期推荐了一波Figma插件，这期分享10个提高效率的实用技巧~提高200%的效率！13个腾讯设计师常用的Figma插件序言 咦，同样是用 Figma，为什么同桌小花早早下班，隔壁二狗岁月静好，而你却在 Figma 中焦头烂额？阅读文章 > 一、快捷键面板｜宝典大全相信很多设计师一定看过一些快捷键操作，但...

上期推荐了一波 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. 创建渐变 token

Figma 本身没有办法做到制作渐变色 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，点击我的插件，发现我已经安装了这么多插件... 我究竟要用哪一个插件？

阅读文章 >

欢迎关注作者微信公众号：「腾讯设计族」