大家好，我是和你们聊设计的花生~

关于设计师必逛的灵感网站，除了 Pinterest、Behance、追波、优优教程网、站酷、花瓣这些经典酷站，我还向大家推荐过色彩灵感网站 Designspiration 和纯文字图形海报灵感网站 Typo/graphic Posters。

色彩控必看！堪比 Pinterest 的色彩灵感网站 Designspiration
提到设计灵感网站，Pinterest、花瓣、Behance、Dribbble 这些大家都非常熟悉了。

阅读文章 >
创意满满！超7000张海报的灵感网站Typo/graphic Posters
大家好我是花生~ 今天向大家推荐一个专注于文字排版和抽象图形类的海报的设计灵感网站 Typo/graphic Posters。

阅读文章 >
今天继续为大家推荐 5 位值得关注的顶尖设计师个人网站，在里面我们不仅能看到优秀的设计作品，还能更深一步了解其背后的设计逻辑并学习作品呈现技巧，对我们提升设计思维和审美水平非常有帮助，一起来看看吧~

王志弘个人网站
「网站直达」 https://wangzhihong.com/work

相信很多设计师在学习文字排版的时候，都看过或者临摹过王志弘的设计作品。作为书籍装帧设计的大师，王志弘大胆将中国、中国台湾地区、日本和西方文化元素融合在一起，形成古典与现代相结合的独特设计风格，也成为很多设计师学习借鉴的灵感来源。

审美提升必备！这5个顶尖设计师的个人网站你收藏了吗？

如果想全面了解王志弘的书籍装帧设计作品，那去他的个人网站是再好不过的选择了。在个人网站中，我们不仅能收集作品的高清图片，还能通过点击项目名称旁的小箭头，跳转到王志弘 Instagram 官方账号，那里会有关于作品信息的背景介绍和更多的作品细节图片，可以帮助我们更好的了解其作品设计的主题和背景。

审美提升必备！这5个顶尖设计师的个人网站你收藏了吗？

何庭安个人网站
「网站直达」 https://tinganho.info/

何庭安是来自台湾的新锐设计师，作品数度获得纽约 ADC、iF 设计奖、金点设计奖、金蝶奖、亚洲最具影响力设计奖等国际设计大奖，并于世界各国多次开办作品展。知名代表作有汉字动态专案、Type Waterfall、金曲奖 GMA30、捷安特品牌博物馆等。

审美提升必备！这5个顶尖设计师的个人网站你收藏了吗？

何庭安设计的汉字动态专案 Motion Type Project

在何庭安的个人网站中，我们可以看到他对一个设计项目的背景了解和对设计重点的思考，还能学习一套完整的设计流程。多深入了解优秀设计师的设计思路的方法，对提升我们自身设计的专业性和设计作品展示叙述能力都非常有帮助。

审美提升必备！这5个顶尖设计师的个人网站你收藏了吗？

审美提升必备！这5个顶尖设计师的个人网站你收藏了吗？

何庭安设计项目的专案叙述（部分）

ACST Design 设计工作室
「网站直达」 https://www.acstdesign.asia/

ACST Design 是一家独立的设计工作室，创始人是知名台湾设计师汤承勋。汤承勋非常擅长书籍装帧设计，他的作品曾获得包括红点设计概念奖、NEU/NOW Festival、台湾视觉设计金奖、亚太设计奖、国际设计奖（IDA）等多种专业设计大奖。

汤承勋的书籍设计包含很多巧思，也会对书籍主标题字体进行额外设计，使其能更贴合书的内涵气质，其作品无论是文字排版还是字体设计，都非常具有参考学习的价值。

审美提升必备！这5个顶尖设计师的个人网站你收藏了吗？

审美提升必备！这5个顶尖设计师的个人网站你收藏了吗？

佐藤可士和个人网站
「网站直达」 http://kashiwasato.com/

读过《佐藤可士和的超级整理术》这本书的小伙伴估计对这位日本设计师很熟悉了。佐藤可士和是日本设计界具有代表性的创意大师，经手的设计项目范围极广，从产品概念到宣传、互动规划设计、视觉开发、空间设计、设计咨询都有涉及，作品斩获大奖无数。他主要负责过的项目包括优衣库、日本 7-11 便利店、洋马、三井物产、本田轻型汽车“N 系列”的品牌化项目，国立新美术馆标志设计和标识规划，东京都交响乐团标志设计等。

佐藤可士和个人网站收录了大量已落地的商业设计项目，在其中我们不仅可以看到各个行业和各种不同形式的设计作品，还能了解这些品牌项目的设计背景和设计理念，对想进一步提升设计审美和作品专业性的小伙伴是一个相当棒的灵感资源库。

审美提升必备！这5个顶尖设计师的个人网站你收藏了吗？

以上就是今天的推荐，希望能为大家日常找灵感参考提供有用的新渠道，觉得有用的小伙伴记得赶紧用起来~如果大家有关于文章或者设计的任何问题，欢迎在评论区提出或者加入优设官方设计交流群（入群二维码见下方 Banner）和大家一起交流。

Dribbble 平台对于互联网 UI 界面设计有着举足轻重的定位，对 Dribbble 设计的研究会让我们看清设计的方向。

为了保证这篇文章的质量，Dribbble 年度的每个作品都超过 550 赞。在此原则下挑选了 828 件作品，作品总的大小为 2.2G。

总结
从挑选出的 828 件作品中，排名前十的作品中 9 件为 B 端设计，另一件作品也是 B 端产品 C 端化的产物。其中：

B 端界面设计占比 476/828，57.4%；
C 端界面设计占比 180/828，21.7%；
视频动效作品占比 223/828，26.9%；
明眼人都能看出其中的比重关系，B 端设计再次大火，为什么是再次？因为 B 端设计之前火过，只不过没有赶上一个好的时代，在 C 端设计风光的十年里而忽略了其存在。随着 C 端市场饱和与数字化的浪潮下，实体经济、ToB、ToG 的产业再次迎来了它的曙光。视频动效的作品占比也已超过 C 端界面设计，相信今年视频动效作品占比还会再次提升。

Dribbble 年度最佳作品
从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

Dribbble 年度最佳作品来自大家最熟悉的 UI8 团队中的 Tran Mau Tri Tam ✪，作者来自越南西贡，最佳作品截止目前355K浏览量，2933个赞。

为什么看似平平无奇的作品却能获得 Dribbble 年度最佳作品呢？既不是 C 端也不是纯 B 端的作品，更像一个网页与平面的结合体。如果去掉搜索图标、分类图标和按钮，你可以理解它就是一个平面作品，一个字体加几何形体构建的作品，为了丰富画面的层次，让画面更加的活泼采用了多彩加几何色块，让标题阅读有停顿感和呼吸感。faster 底部的横线让它从标题文字中脱颖而出，这种使用线条突出重要信息的设计也是今年Dribbble 设计流行趋势之一。

MetroUI 是 Windows8 的界面设计语言，在 2010 年至 2013 年间曾经风靡一时，那也是移动互联网的发展元年，现在国家推行实体经济、数字化带动 To B、To G 的发展元年，通过几何色块（MetroUI）实现 B 端产品与 C 端设计风格的传承与衔接，你会发现历史总是惊人的相似。最后背景结合今年最流行的微软风，毛玻璃的多彩高斯模糊渐变风，年度作品当之无愧。

最后来看下按钮的设计，正常的按钮要么文字加色块，要么左图标加右文字，它设计成左文本加右图标，更加注重信息的可读性和易读性，也体现 B 端设计重功能和交互体验，视觉点到为止的设计理念。

下面我们来欣赏年度最佳作品里面的流行趋势吧。

1. 易读性（停顿感）

字体三原则：可读性、易识性、易读性。当你同时读一篇文言文和一篇设计文章，肯定设计文章的内容可读性更好。易识性是用在字体设计上，不能过于浮夸的改变字体骨架、形体而不易识别。易读性和每个位设计师都息息相关，因为我们都需要编排文本。当我们小时候写作文时，不会写的文字可以用拼音代替。这时候读者读到拼音时会有停顿感，更加适合用户阅读。

通过给用户制作停顿感来增加用户的易读性。可以在相关联文本后面添加图片、表情、图标来更好的理解文本内容，丰富文本内涵。比如情侣间表达爱意时会输入文本，“我爱你”、“我 Love 你”、“我 ai 你”、“我❤️你”，哪个更加会有情感共鸣呢？不言而喻，相信你心中已经有答案了。

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

1. 曲线

在标题文字上添加曲线来突出重要文案是 2021 Dribbble 最流行的趋势之一，第一个设计目的就是突显文字，其次就是想表现铅笔真实书写的感觉。之前很多带有签名的设计中，签字的文本都是手写体的感觉，手写体对比电脑的机械字体会带有一种人文气息，也会让两者之间产生一种对比、矛盾。

除了突显文本外，曲线还有视觉引导的作用。通过视觉引导让用户按照设计师编排的顺序进行浏览界面。当然还有比这更科学的工具就是眼动仪测试，通过真实用户眼睛浏览界面显示对应的热点图。

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

1. 多彩高斯渐变风

多彩高斯渐变风是从色彩的角度来传达和丰富画面的，多彩高斯渐变风其实是从制造矛盾到平衡矛盾的过程，多彩渐变多为冷暖对比来制造画面的冲突，需要控制冷暖画面的大小来实现平衡。主流的还是以暖色突显为主。多彩渐变主要起到活跃气氛、吸引目光、平衡画面的作用。

多彩高斯渐变还可以结合轻拟物、几何图形、三维等新的组合方式去创新，给用户呈现一种更加新颖的视觉表现形式。最后我们还是要回归到内容上，为了更好的传达信息需要去设计与内容相匹配的视觉风格。

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

B 端界面设计

1. 侧边栏 Sidebar

B 端设计的火爆带动了 B 端相关模块设计，更多的人也愿意尝试 B 端相关模块设计，侧边栏作为产品架构中重要的导航系统，好的侧边栏设计能为用户带来更好的效率。主流侧边栏都做了展开、收起、拖拽等交互效果，也是受限于 PC 屏幕为展示更多数据而腾空间。侧边栏主要承担的功能有导航、分类、自定义筛选、共享、新增等。Dribbble 的 B 端产品设计已经不再是假大空概念设计，而是一套实用美观可落地的设计。

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

1. 仪表盘设计

仪表盘设计是一个很好的隐喻，想象一下开摩托车或汽车主驾驶前面的屏幕，汽车仪表有燃油表、车速表、里程表、水温表、转速表、故障指示灯等。B 端类产品后台界面的仪表盘设计也需要展示一些重要的数据和各种状态，大体分为侧标栏、导航栏、待办任务、个人信息、报表数据、消息中心、快捷入口等。当然最重要的就是报表数据，团队收益、任务进度、转化比例、新增、存量、团队工作时长等都是老板或领导关心的内容。每个公司业务不同、每个人员权限不同，自定义的仪表盘也各有差异。重要的是突显数据和业务状态，需要分层级系统性去思考和设计。

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

1. 流程设计

复杂的事情简单化，简单的事情标准化，标准的事情流程化，流程的事情自动化。流程设计是每一个企业核心功能和业务，可自定义的管理流程系统搭建也是 B 端产品设计的难点，需要对业务高度抽象，让每一个业务人员可自定义的流程才是好的流程设计。

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

1. B 端 C 化

B 端 C 化是 B 端产品设计的视觉表现力慢慢往 C 端产品设计的视觉靠齐，国内 B 端产品界面设计视觉水平还有很大的提高空间。除了视觉上的提升外，由于业务的发展，B 端产品也开始移动化、智能化，国内主流还是通过小程序、H5 来现实 B 端产品 C 端化。

B端产品C端化是自嗨？对不起我想得太简单了！
经常在网上看到「B 端产品 C 端化」的讨论。

阅读文章 >
从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

1. 轻代码化

轻代码化是一种低代码赋能无代码的方式，弥补无代码拓展性差、覆盖场景少的问题。在保有无代码灵活、易用、快捷的同时，又能覆盖低代码使用场景。简单理解就是无需代码开发即可如搭积木般快速、灵活地创造属于你的个性化管理系统，轻松实现多元业务场景的数字化管理。

轻代码化将功能进行打包，升级成全局可以用的配置，技术人员配置好后，业务人员在应用编辑时直接选择使用模版，绑定对应的变量即可使用。

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

界面设计技巧

1. 人文气息

为什么人加色块的组合方式能流行起来？还是 B 端行业流行带动的。B 端讲的更多的是企业对企业。企业对企业除了讲行业解决方案外，还需要传达公司的价值观、使命、愿景。人加色块的组合方式非常适合体现公司的企业文化。对于一家全球化的公司不同肤色的人物组合在一起，这种人文气息和价值观已经就不言而喻了。

当然企业也需要进行营销，抓人眼球。几千年来的遗传证明了，人的大脑对食物、性、动的东西、人脸和眼睛、危险的动物很敏感。人加色块的组合方式也具有抓人眼球营销的功能。真可谓一举两得。

这种风格更适合大公司，国内的一些手机厂商 OPPO、VIVO 等也会通过手机+背景+人物来体现科技与人文的结合，而对于中小型公司产品差异化和行业解决方案展现应该还是重中之重。

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

1. 毛玻璃效果

毛玻璃效果加大了模糊程度，透明效果更加扁平，很好的顺应当下 UI 扁平化的设计趋势。苹果 Mac OS Big Sur 系统的图标、界面中运用了大量毛玻璃和半透明元素，界面更扁平。至于 C4D 三维彩色玻璃的视频教程可以在 B 站搜索“透光艺术-C4D 创建彩色玻璃的 4 个技法”，完全能满足 UI 设计师。当然还有一个好消息就是 Mac 用户可以享有 OC 一年免费的使用权，具体安装购买方法上某宝就可以轻松搞定，真香。

实战案例！「毛玻璃拟态」图标的临摹思路与原创技巧
这篇文章主要分享怎么做一套毛玻璃拟态图标，以及在这基础上如何发散创意。

阅读文章 >
从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

1. 轻拟物

轻拟物这几年一直流行，在 UI 设计中趋于稳定的位置。从写实到扁平再到轻拟物，其实是设计师们一路不断探索的结果。本质就是光影对形体产生的视觉感受。在色彩中对高光、亮面、明暗交界线、暗面、反光（环境光）五个部分的处理。写实三维的图标等设计更适用于简洁的画面中，扁平等设计更适用于复杂一点的界面中，比如 B 端产品界面中的功能图标。轻拟物可使用的范围更广，效果更佳。Sketch、Figma 软件对于渐变、高光、投影、高斯模糊处理已经非常简单且出彩。

大厂都在用的轻拟物设计风格，本文教你四步完成！
上期我们聊到了最近比较流行的轻拟物风格，科普了基础概念，如果你还没读过，可以前往阅读： [link https://www.uisdc.com/light-imitation-style] 本期展开轻拟物的具体技法讲解和演示。

阅读文章 >
从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

1. 简洁设计

简洁设计遵从了密斯·凡德罗的“少即是多”的设计原则，在 B 端产品界面中更加需要简洁设计，我们最熟悉的 Sketch 软件界面已经是相当的简洁了。回到现实当需求功能不断增加，产品界面的编排如何取舍，如何保证界面的简洁是设计师需要深度思考的问题？如何与上级沟通？该功能是否可做可不做？是否需要埋点用数据说话？如果只是一味竞品有我们就需要有，功能不断累加只会让界面越来越重。

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

1. 几何图形

几何图形和几何插画有异曲同工之妙，几何图形多为产品界面和宣传内容的抽象，产品界面的几何图形多为占位符形式，加上色彩和几何色块让其成为一个整体。B 端产品视觉设计 C 端化的进程中，几何图形、几何色彩不失为最好的突破口，相信今年Dribbble B 端产品的视觉设计一定会更上一个台阶。

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

几何图形另一个场景化的地方就是品牌，作为一名 UI 设计师一定会经历从图标到几何图形到品牌设计的过程，品牌设计的技巧基本还是以几何图形为主，至于品牌的内涵需要更深层次的解读。掌握主流品牌设计的技巧对产品定位、品牌宣传打下扎实的基础。

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

1. 暗黑设计

暗黑模式的设计是解决在微弱环境下内容也可以有更高的可读性。随着用户夜晚及深夜使用电子设备时长增大，如何在夜晚这个特定场景下使用更加舒适。合理使用暗黑模式可以减轻眼睛疲劳，提高在夜间使用的可读性。

在设计暗黑主题时，不能为了突显视觉上的逼格，而去使用高饱和度鲜艳的色彩来突显界面的品质感。而应该把舒适度、可读性作为设计的衡量指标。Material Design 给出了暗黑主题的设计准则，即正文和背景之间的对比度应至少为 15.8:1。按照此标准设计，可读性都还不错。这里介绍一个插件“Stark”（Figma、Sketch、XD、Chrome 插件）用来测试界面的对比度。

顶级大厂如何做好暗黑模式设计？来看 Ant Design 的规范文档
近年来暗黑模式的设计趋势开始一点点明显，Ant Design 在这次 4.0 的升级中也对这类暗黑场景化的设计开始进行初步的探索，接下来就让我们一起来看下 Ant Design 这一针对企业级的设计体系是如何设计暗黑模式的。

阅读文章 >
从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

1. 模块化（组件化）

为什么叫模块化，而不叫组件化，组件化更多的利用原子系统从原子、分子、组织、模版、页面来快速的搭建界面，但在 B 端产品设计中基础组件和业务组件的搭建是以提高工作效率为前提，是否有从 0 到 1 搭建 B 端产品组件的经历是设计师一生中最宝贵的经验之一，它能提高设计师的系统化思维、逻辑思维和抽象思维能力。

产品模块化设计就是将产品分成几个部分，也就是几个模块，每一部分都是具有独立功能，具有一致的连接接口和一致的输入、输出接口的单元，相同种类的模块在产品族中可以重用和互换，相关模块的排列组合就可以形成最终的产品。通过模块的组合配置，就可以创建不同需求的产品，满足客户的定制需求 。

为什么我强烈建议你学会使用模块化设计？
风筝KK：模块化设计是将设计分解成小的模块，然后独立设计它，最后再将它们组合成更大的系统，就像小朋友玩的积木一样，由一些简单的零件组成小的模块，然后再组合成各种模型样式。

阅读文章 >
从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

1. 插画

插画作为设计的一大品类，不同的插画师都有自己擅长的风格，本质是都有自己的个性，但是在产品设计中更多是需要共情、共性来讲故事，表达产品理念和价值观。这就需要插画师去尝试并探寻出适合互联网产品设计类的插画风格。设计的本质是旧元素的重新组合，插画不会过时，而是需要结合当下和产品找到最匹配的设计风格。

1. 几何插画

几何插画算是插画简化的一种表现形式，人和物的形态不再写实，而是抽象成几何图形拼凑的感觉，同时保留人物形态的神韵。加上几何色块与人物交互形态的表现，传达出简洁、科技的现代感。难点还是在人物形态的表现上，平时多练习练习速写还是很有必要的。

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

1. 线面插画

线面插画最近一两年非常流行，准确的说是非常适合。首先线面插画主要是由线条和块面组合而成，用块面表现人物形态时某些结构会表现不出来，这时候用线条简单勾勒后，结构就会清晰明了。其次当线面插画运用在界面上时，可以打破界面纯文字或组件化的机械和沉闷感。线面插画的风格提升画面热闹感的同时，还能保持界面的干净整洁。

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

动效

1. 微交互

界面微交互动效会让用户的体验更加精致到位。想要打造优秀的产品设计，微交互和动效设计是绕不开的，UI 界面设计通过微交互反馈告知用户当前正在发生的事情，所处的状态。细微的动效更能调动用户情绪，取悦用户。C 端产品微交互和动效已经很成熟了，一部分功劳来自 iOS 系统原生自带的效果。B 端产品的微交互和动效更多还是在学习海外产品，还需要给前端工程师灌输微交互和动效的设计价值，共同打造产品体验细节。

想做好微交互设计？我总结了这 8 种常见类型！
大家好，我是 Clippp，今天为大家分享的是「微交互设计」。

阅读文章 >
从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

1. Mg 动画

Mg 动画需要很好的节奏感、韵律，每一个场景动画都需要其中的元素进行连接变化，让转场动画更加自然，MG 人物动画通过点线面的动效变化让画面更加有趣、自然，通过粒子效果让特定场景无限循环会让人更加印象深刻。

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

三维

1. 三维图标

MacOS Big Sur 系统图标的更新带动了三维图标的流行，三维图标的应该场景还是需要有较大留白空间的界面，因为三维图标太小后就看不到更多细节。三维图标感觉又回到了拟物化和扁平化哪个更好的问题上？设计师应该保持开放多元的视角。设计本身也在不断的演化融合，存在即合理。合适最重要，它们都会有适合自己的场景和设计价值。

如何从零开始完成一套3Ｄ图标设计？来看大厂的实战案例！
背景 QQ 游戏中心经过设计改版之后，我们重新设定了整体的世界观——多彩的游戏宇宙。

阅读文章 >
从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

1. 轻三维

为什么轻三维在界面设计中占有一席之位？一个是设计师不断追求差异化的产物。另一个是更好的表现内容，并与用户产生共鸣。轻三维的基础模型都是来自手机界面中的各种元素，比如组件、开关、按钮、占位符、图表、几何图形、图标、进度条等，这些都是用户日常使用系统软件常见的元素，通过简单的几何形体建模—打灯光—加材质—渲染—PS调色。难度系数不大但效果很出彩。第一个出彩点是模型带有厚度的倒角，结合灯光渲染的光泽是二维软件不能比拟的。第二个出彩点就是材质自由添加，特别是当下流行的毛玻璃效果，玻璃材质渲染效果更佳。第三个出彩点就是可以加局部灯光，局部的渐变色或环境光更加出彩。

「新拟物化」过时了！此刻你最应该拥抱的是「玻璃拟物化」！
还记得今年年初大家追捧的 新拟物化（Neumorphism）风格嘛？

阅读文章 >
从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

1. P4D（PS+C4D）

P4D 是 PS 加 C4D 的设计表现技法，也是视觉设计的最后一个环节，通过 PS 对 C4D 的渲染图片进行调色，利用 PS 的调色技巧可以很好的解决 C4D 打灯光的瑕疵，还可以利用 PS 强大的合成功能，将渲染图片与图片素材进行合成，来表现画面的视觉度，当然三维软件比较难实现的水、粒子、烟花等效果，也可以通过 PS 的后期合成来实现，这也是 P4D 的强大之处。

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

1. 卡通 IP

卡通 IP 设计最近三四年技术的迭代已经慢慢的走上成熟，卡通 IP 也从传统的纯 PS 手绘技法，转到 C4D 建模—角色绑定—MD衣服制作—OC渲染—PS（静态）/AE（动态）调色。

卡通 IP 火的本质更适合做营销，相比于品牌或 Slogan，卡通 IP 具有亲和力和画面感。随着各种手办行业大热，受互联网大厂影响下，卡通 IP 已经是互联网 B 轮以上公司的标配了。如果团队中没有这样能力的人，也可以通过绘制好二维，一套三维可以选择外包完成。

对于 UI 设计师来说学习是有成本的，暂时并不是必备技能，如果喜欢完全可以学习，从设计差异化的角度来看三维视觉确实有一定的竞争力。

盲盒和NFT背后，是属于设计师的掘金热潮
前段时间冰墩墩的爆火，让本就火热的潮玩手办市场，再次成为瞩目焦点。

阅读文章 >
从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

1. 三维动画

C4D 三维场景动画通过构建实物和场景模拟生活中的现实场景，会让用户体验真实感，三维软件制作动效的最大优势是通过动力学和表达式来模拟真实感，未来在 AR/VR 领域会有更好的发展。相对于界面动效学习成本难度也相对较大。在三维动画中 C4D 软件对于域、动力学还是有一定的优势。

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中，总结出 2022 设计趋势

总结
上一次写 Dribbble 流行趋势还是两年前了，通过两年的沉淀对趋势流行有了更深的认知。十年的互联网行业风风火火，随着最近的互联网裁员潮大家也慢慢的进入到反思层，客观的看待和理解这个真实的世界，曾经的流行趋势也需要慢慢的沉淀下来。

存在即合理，趋势流行稍纵即逝，注定是不长久的，只有大浪淘沙历史遗留下来的风格才能更长久。但我们也不能不去关注，因为哪有什么所谓的创新，只不过是旧元素的重新组合，并符合当下这个时代人的审美需求。香奈儿的“时尚易逝，风格永存”大概就是这个意思吧。

6000 多字的设计流行趋势，希望能帮助设计师度过互联网裁员的寒春。最后希望以后每年坚持输出设计流行趋势。为设计行业奉献微薄之力。

前言
在现如今的社会中，每天都有各式各样的商战。运营设计则是至关重要的一部分。所谓运营设计即是运用完善的设计思维、产品思维和设计技能去完成视觉设计，在保证设计美感的同时，兼顾用户和产品营销的需求，达到流量多、曝光量多、积累口碑等目的。运营活动具有周期较短、业务目标明确、用户群体明确、玩法简单等特点。

运营类活动生命周期较短，常在某一段时间(也可能是周期性的)，一般跟随时节热点或者运营节奏来进行。较短的生命周期给设计、开发、数据等带来较大挑战，那么作为运营设计师怎么才能做出一系列快速、高效、高质的运营设计呢？

如何高效完成运营设计？大厂高手总结了这3个方面！

本文主要从运营设计师，需要什么样的思路、技巧？并明确哪些步骤是可以快速搞定的？哪些内容是需要精修打磨？怎么归类？怎么统一？等内容去引导大家做好运营设计。

灵活把握设计思路、避免陷入程式化
设计师长期处于单向业务线的设计中，往往都会有思维模式固化的特点，每做一个项目，可能需要清楚设计目标、背景、品牌定位、用户人群等等。岂不知一个短短的运营设计，哪有那么多时间去深入了解，我们要做的就是依据项目的重要程度，做思路筛减，灵活运用，了解到哪些是必要的，哪些是非必要的。

我们依据项目的重要性，大致分为四类运营活动：S 级大促活动、A 级节日&平台类主题活动、B 级品类&渠道等日常活动、其他助力玩法&推广类活动等。那么接下来我们考虑以什么样的设计思路去应对这四种不同级别的项目活动。

如何高效完成运营设计？大厂高手总结了这3个方面！

1. S 级大促活动

S 级大促活动，常见的有双十一、年中大促、春运大促等。此类的活动有爆发量高、活动周期较长、促销力度大、出现次数较少等特点。那么此类活动对于无论是产品运营还是设计师都是重中之重，而且 S 级活动往往涉及到的物料输出非常多，包括各个会场、换肤、顶通等等，所以针对每个环节，我们都要做到深入了解，精细打磨。

我们要做的有：

1. 理解活动目标，包括活动效果目标、业务转化目标、品牌形象目标、设计影响力目标等；
2. 明确目标用户，掌握用户行为特征、思想和情感需求，洞悉目标人群的特征才能实现精准的设计触达；
3. 制定设计策略，包括规划设计排期、定义设计风格、设定活动符号、把控节奏点等内容；
4. 细化流程，规避风险，视觉风格定好后，依据关键词，先草图绘制，进行创意联想，避免过早陷入细节，待方案确认后，再进行精细化打磨，按照时间节点，各个端口物料输出；
5. 关注设计结果，总结复盘，要及时了解用户反馈、可量化数据验证，项目结束后做总结和复盘，把项目过程中遇到的问题及时列出，好的经验和方法延用。

如何高效完成运营设计？大厂高手总结了这3个方面！

A 级节日&平台类主题活动

A 级活动，常见的就是节日节点和平台主题类活动，例如春季家装节、回收焕新季等。此类活动一般上线时间为 3-8 天左右，频次相对较高，此类活动可以根据活动属性和项目特点，打造系列化运营设计，既可以保证设计质量又可以节省时间。

我们要做的有：

1. 规划时间、统筹归类，将一年内的 A 级活动，依据活动特征属性，进行归类整理，进而为做出系列化的运营设计做好准备；
2. 确定阶段性设计风格，依据当前设计趋势结合业务熟悉，打造适合业务转化的视觉风格，包括 C4D、插画、酸性、场景合成等；
3. 定义设计语言，包括设计版式、构图、色彩和字体符号等，将此类信息进行明确定义，在设计时，就可以直接使用，也不需要每次投入时间去考虑；
4. 关注数据，及时总结，A 级类活动相对频次较高，所以实时的总结经验教训，为下一次活动做准备是非常有必要，也只有这样，才能使每次的运营设计越做越好；

如何高效完成运营设计？大厂高手总结了这3个方面！

B 级品类&渠道等日常活动

B 级活动，也就是我们所说的日常运营活动。此类活动一般我们打开 app，每日都会看到，常见的有福利日、品类日等主打活动。此类活动有上线周期长、频次短、营销力度小等特点，基本上一个月或一个季度更换一次、有的甚至半年或一年，基本是跟业务及品牌主打相关。此类活动的目的，一方面是为了促活、留存、流量汇聚等，另一方面是为了传达品牌理念，提升业务及品牌形象。

我们要做的有：

1. 深入了解品牌形象和业务属性，根据品牌规范对运营活动进行设计，B 级活动对用户来说，曝光率会比较久。所以我们在设计的时候，尽量依据品牌关键词，选择规范中的品牌色、字体、符号等内容，加深用户对品牌的印象，从而提高知名度和业务转化；
2. 模版规范化、统一处理，针对于 B 级活动，做相应的模版规范，统一视觉样式，是非常有必要的。不但能提高设计效率，同时也能逐渐沉淀出符合产品调性的品牌基因，从而保持产品的一致性；
3. 视觉降噪、简洁处理，B 级活动视觉避免花里胡哨，能够让用户在有限的时间内 Get 最有价值的信息，找到所得，从而实现转化就可以；
4. 版本优化，迭代更新，总所周知，一个 app 要想保证用户留存和拉新，是必须不断升级和改进，那么 B 级运营活动同样也是如此，会伴随着主 app 的设计调性，不断优化迭代。

如何高效完成运营设计？大厂高手总结了这3个方面！

其他助力玩法&推广类活动

除了以上分析三种类别的活动外，我们常见的运营活动还有助力玩法和推广类活动，通常依赖游戏化手段或任务类玩法带来优秀用户体验，有领红包、领劵、抽奖、限时秒杀等形式，从而获得成功拉新转化的一类活动。此类活动有运营感强、行为体验丰富、流程触点多等特点。另外此类活动对产品运营和交互设计的要求比较多，需要对玩法策略和交互逻辑有清晰的设定，那么作为运营设计师我们需要怎么做呢？

我们要做的有：

1. 参与策略制定、提出创意想法，针对玩法推广类活动，在设计前期，我们一定要参与策略制定，能够将自己的一些设计创意和灵感，融入到活动中；
2. 了解玩法逻辑，强化设计价值，当设计玩法确认后，我们一定要配合交互设计师，对玩法中的每个流程逻辑，要有清楚的了解。并对每个流程页面中的内容进行层级分析和强化处理，包括利益点、文案和激励机制等；
3. 市面设计分析，融入自身创意，在开始对活动进行设计的时候，我们首先要对此类玩法市面上的设计进行收集整理，吸取别人的优点，同时将自己的创意融入，最终做出更好的玩法设计；
4. 案例整理，提高复用，当我们做完一系列的玩法活动时，要学会对其进行整理，做成通用模版，从而提高设计复用性，降低设计成本。

如何高效完成运营设计？大厂高手总结了这3个方面！

综上所述，对四类活动进行了一些设计思路分析，其中的思路方法也不是一成不变的，有些点是互通的，这就在于设计师在设计中要学会灵活把握，找到快速有效适合自己的方法，只要有了清晰明了的设计思路，我们做设计的时候才能达到事半功倍的效果。

运营物料规范制定
众所周知，运营设计师的需求内容有专题页、详情页、H5、Banner、闪屏海报等等，分别对应不同的设计要求。我们在运营设计的时候，在输出物料上花费的时间是非常的大。所以运营设计物料做统一性的规范标准是非常有必要的。一般来说我们针对运营物料，需要明确规范的有尺寸大小、图文结构、字体字数、配色、元素等内容；

用一个项目实例来具体说明一下：为 58 同城本地服务运营活动入口的 banner 图，涉及到 APP 和 PC 端。当我们已知素材和文案内容后（如下图左），我们就可以制定其版式结构，包括尺寸大小、字号间距、主视觉等内容（如下图右），那么我们每次设计的时候，只需要更改文案、主视觉和配色即可。

如何高效完成运营设计？大厂高手总结了这3个方面！

以下两张图是按照 banner 规范做出来的效果：

如何高效完成运营设计？大厂高手总结了这3个方面！

另外再举个例子，就是我们的活动页面设计，常见的页面信息结构：首屏+副屏，首屏：主副标题+氛围图，副屏：模块平铺/叠加，我做设计之前就需要对页面中的内容进行布局的规范化，包括位置尺寸等等，有助于我们更清晰的表现画面内容和层级的划分，如下图所示：

如何高效完成运营设计？大厂高手总结了这3个方面！

组件化降低设计成本
对比设计规范来说，组件库更像是一个强大的工具库，是提高工作效率和保证团队协作一致性的基础。组件库作为设计系统的一部分，在运营设计过程中设计师可直接调取，组合构建出新的页面，通过组件库带来的价值主要体现在三个维度：

1. 设计一致性

当我们使用统一的设计模式和组件库，能够在保持基础体验一致的同时，针对业务特性做差异化设计，给用户带来一致体验和品牌感知。在团队中有新成员加入时，也能够快速上手工作。

1. 提高设计效率

我们做运营设计的时候，总会使用到相同的元素和组件，通过组件库的调用能够减少重复性设计时间。当组件设计细节有改动时，只需要改动组件库，所有共用组件库的页面即可实时响应。针对新的业务线也能够快速进行页面搭建，实现设计效率的提升。

1. 高效协同

我们在进行运营设计的时候，可能会涉及到产品、开发及数据等人力侧的支撑，组件库能够随着业务发展不断的优化和完善，在不同的需求和各人力侧之中，能够灵活支撑页面内容进行延展和扩充，从而实现全链路、多场景的高效协同。

以下是我们在做 58 到家的家庭服务运营设计中，部分的组件样式，包括服务列表、弹窗等等。

如何高效完成运营设计？大厂高手总结了这3个方面！

在组件库的构建过程中，我们需要整体思考，明确组件化的设计内容，不断去优化和完善组件细节，包括设计原则、应用场景以及拓展性等。同时组件库需要根据产品的发展不断迭代和创新，才能让它的可持续性特性发挥至最大。

写在最后
设计行业是一个不断发展、推陈出新的行业，新的风格和形式层出不穷。而随着互联网和人工智能的发展，运营设计也在大的时代浪潮下产生着变化。我们需要在新的维度上进行思考，充分调动用户的感官，用更具有创造性的思维完成设计表达，在更丰富的场景下实现多通道的感官设计，创造更新鲜的体验。设计师需要不断学习和成长，为设计行业注入新的活力。

以上是个人在运营设计中的一些经验总结，从设计思路、物料规范和组件化三个方面进行了论述，不足之处请多包涵，同时篇幅有限，关于运营设计的内容无法一次详尽，欢迎大家一起讨论。

作为设计师都会时刻关注设计趋势，以 UI 设计来说每年都会出现很多相关的趋势总结，基本是结合预测和实际相结合的。趋势可以让我们把控设计的方向，带给用户更好的感官体验。

最近黑马哥结合落地产品所呈现出来的设计趋势，进行了这方面的探索，今天以其中之一的趋势-极光风和大家先聊一聊。

极光风趋势的来源
极光（Aurora），是一种绚丽多彩的等离子体（发光）现象，在夜间出现灿烂美丽的光辉。在南极被称为南极光，在北极被称为北极光，视为自然界中最漂亮的奇观之一。（来源于百度百科）

有案例有方法！帮你完全掌握热门的极光风设计趋势

这样的自然奇观被摄影师捕捉到静态的影像中，设计师再结合这样的影像作品，视觉化之后出现在了一些设计作品中。在 2021 年被广泛运用，形成一种流行的视觉风格。在众多的互联网产品设计中，也经常运用这种类似极光的视觉影像风格，称之为 Aurora UI。

有案例有方法！帮你完全掌握热门的极光风设计趋势

在产品设计底层需求获得满足之后，感光体验的提升被重视，视觉感的强化对 UI 设计师来说至关重要。基于不改变本身的结构层，在背景层和装饰性元素上面发挥，使得 Aurora UI 得到了发挥的空间。

有案例有方法！帮你完全掌握热门的极光风设计趋势

富有创意的极光风在背景层和装饰性元素上面发挥得淋漓尽致，助推了其成为 UI 设计趋势的关键，下面就让我们一起来看看落地产品中的 Aurora UI。

UI 场景中的极光风设计
由于在众多落地产品中被广泛运用，形成了近些年影响 UI 设计趋势的风格。极光风和弥散光在表现形式上类似，也有设计师将该风格归类为弥散光，下面就看一下具体的运用场景。

弥散光设计！网易阿里大厂都在用的刷屏级新设计风
这阵子不是有一种设计流行风悄悄刮了起来嘛！

阅读文章 >

1. 强化导航栏设计的视觉感

如果想要强化顶部导航栏的视觉感，通常是利用品牌色作为背景颜色，这样也会显得顶部比重较大。通过白色或者浅灰色作为背景属于比较弱化的处理方式，而极光风的处理形式处于轻重之间的理想状态。不仅可以丰富视觉表现力，也能使得整体风格更加年轻化。

有案例有方法！帮你完全掌握热门的极光风设计趋势

1. 强化个人中心顶部视觉区域

随着互联网用户年轻化的趋势，在配色上面逐步趋近于年轻化，众多产品在个人中心界面的设计上面亦是如此。利用极光风效果呈现出的设计比较符合年轻化的趋势，可以是同色系的饱和度变化，也可以是不同色相的相互融合。利用低饱和度高明度的配色原则，使得整体的视觉感更加轻量化，视觉效果清新自然且通透力更强。

也有基于品牌色结合极光风进行融合，相对单色来说效果更加丰富自然，使得背景的变化更加多样。

有案例有方法！帮你完全掌握热门的极光风设计趋势

1. 丰富背景设计的视觉感

除了在顶部区域进行运用以外，也有一些产品会在背景层面进行强化，相较于白色或者浅灰色的背景来说色彩感更丰富。运用到整个界面背景层相对比较少，在局部背景层上的运用比较多些，可以强化局部模块的视觉感。

有案例有方法！帮你完全掌握热门的极光风设计趋势

1. 点缀弹窗设计局部

极光风的设计表现也会出现在一些局部功能的细节处，比如运用到弹窗的色彩处理中，作为背景局部或者插画部分等的衬托。带来的视觉感更加亲和自然，也不会过度干扰其他元素的呈现。

有案例有方法！帮你完全掌握热门的极光风设计趋势

1. 强化卡片式设计局部

卡片式设计也是近些年运用比较多的设计趋势之一，基本是以白色卡片居多，具有整合信息的好处。在卡片的边缘位置强化色彩，可以使得卡片色彩更加丰富，也有一些电商产品是起到与商品形成色彩呼应的作用。

有案例有方法！帮你完全掌握热门的极光风设计趋势

1. 突出搜索设计的差异化

搜索框的设计在大部分的认知里面都是白色或者浅灰色，也有一些是带有边框的形式，利用低饱和度高明度的配色原则来进行设计，带来的效果更加年轻化。也是一种差异化设计的尝试，打破常规的设计认知。也可以举一反三，在一些按钮或者标签设计中运用。

有案例有方法！帮你完全掌握热门的极光风设计趋势

1. 分类标签的装饰设计

这是一个装饰性的设计尝试，在突出模块分类的当前状态时，通常都会通过装饰元素来进一步强化。可以通过字体粗细、颜色深浅、字体大小和装饰元素来强化，装饰元素除了线段和一些图形元素以外，极光风的背景元素也是一种不错的表现手法。

有案例有方法！帮你完全掌握热门的极光风设计趋势

1. 图标设计中的运用

运用到图标设计中通常是出现在质感类图标，辅助强化图标的色彩感和层次感。有时候无法通过常规的渐变形式达到要求，就可以尝试运用极光风的处理技巧，将颜色通过模糊和剪切蒙版的形式融入到图标中，可以使得图标色彩丰富和强化光影变化。

有案例有方法！帮你完全掌握热门的极光风设计趋势

1. 深色卡片色彩强化

以上案例属于在浅色或者白色的环境中运用，在深色主题中依然会用到极光风进行设计强化。在界面背景和卡片背景中运用，效果也是非常不错的，可以给深色的卡片一些色彩感和丰富度。

有案例有方法！帮你完全掌握热门的极光风设计趋势

1. 作品包装中的背景强化

除了在 UI 设计场景中运用以外，最近发现在设计师作品包装中的运用也是非常普遍，用于背景层的渲染带来的视觉体验度也是非常不错的。在作品包装环节中作为背景运用和局部装饰，也有在封面设计中重点运用，使得作品集紧贴设计趋势，提高作品的打开率。

有案例有方法！帮你完全掌握热门的极光风设计趋势

1. 其他场景中的应用普及

在 UI 场景还有很多运用场景，这里仅为抛砖引玉，无论是作为背景强化还是元素装饰，都能带给用户更加年轻化的感官体验。

除了在 UI 场景中呈现以外，极光风的设计也会出现在更多其它场景中。在 Banner 设计、海报设计、专题页设计等视觉设计层面也是运用广泛，是一个影响范围比较广的设计趋势之一。

有案例有方法！帮你完全掌握热门的极光风设计趋势

实现极光风设计的方法
通过一些线上的案例欣赏和分析，相信大家对于极光风在 UI 场景中运用都有一定的了解，在项目设计中也能轻松尝试。这一类风格从技法实现的角度来说并不难，关键因素在于控制好配色原理，下面就为大家总结几种实现的方法。

方法 01：利用不透明度渐变融合

不透明度渐变在设计中的运用比较普遍，利用的是不透明度从 100%-0% 之间形成渐变，让色彩逐渐消失或者淡化。

画一个圆形，选择径向渐变，渐变两端的颜色选择同一个色相。然后设置中间颜色不透明度为 100%，另一个颜色不透明度设置为 0%，这里颜色适合选择低饱和度的范围。同样的方法反复绘制几个不同颜色的圆形进行组合，即可完成极光风背景设计。

有案例有方法！帮你完全掌握热门的极光风设计趋势

方法 02：利用模糊度变化融合

这个方法是结合了形状和模糊设置（高斯模糊等），绘制几个大小不等的圆形进行排版组合，然后选择所有圆形一起进行模糊设置。形状的绘制上面最好是有大小差异，排版错落有致，这样形成的效果比较富有变化。

在颜色的选择上面需要根据背景的强化程度选择，低饱和度的颜色融合性更高，适合作为弱化性质的背景使用。

有案例有方法！帮你完全掌握热门的极光风设计趋势

方法 03：利用背景模糊融合

背景模糊在 Sketch、Figma 等设计软件中有该功能，是一个影响设计趋势较为常用的功能，特别是在实现玻璃质感和一些质感图标上面非常实用。

在背景层绘制图形，颜色和形状均可自由发挥，然后再绘制一个形状作为调节层，调节层是用于控制模糊效果的。在调节层的形状上面设置一个带有透明度的颜色（必须要带有透明度），然后再设置背景模糊，背景模糊数值的大小决定模糊的程度，不透明度的大小决定整体效果的亮度。

有案例有方法！帮你完全掌握热门的极光风设计趋势

方法 04：利用图片模糊融合

以上的方法都需要进行配色处理，如果色感方面比较薄弱的设计师，也可以挑选一些不错的图片来实现极光风效果。

挑选一张色彩符合要求的图片，然后在 Photoshop 等设计软件中执行高斯模糊，半径值的多少决定了模糊之后的自然度。我们在选择图片的过程中除了整张图片进行操作以外，也可以截取其中的一部分，也许会带来意想不到的效果。

有案例有方法！帮你完全掌握热门的极光风设计趋势

除了这几个方法以外还有更多不一样的实现方法，大家可以根据自己的探索选择最适合自己的方法。根据使用软件的差别选择最简单的形式，根据想要实现的效果选择最灵活的方法，这样才能便于后期的反复调整。

极光风案例实战
有案例有方法！帮你完全掌握热门的极光风设计趋势

有案例有方法！帮你完全掌握热门的极光风设计趋势

有案例有方法！帮你完全掌握热门的极光风设计趋势

小结
研究落地产品的设计细节和视觉趋势，将有助于提高我们对于当前有效设计趋势的把控，而不仅仅只是停留在概念化的预测阶段，而是行之有效的真实案例。

极光风是近些年运用在落地产品中的 UI 设计趋势之一，通过大量案例验证之后的有效方法，希望大家能够掌握并灵活运用到项目设计中。落地产品的 UI 设计趋势还有很多，本次分享的仅为抛砖引玉，后续将和大家探讨更多的有效设计趋势，辅助提高我们的设计能力。

从零做一款产品的时候，需要制定产品的主色。怎么制定呢？

“归纳产品特性和理念-提取关键词-建立情绪版-选择色相-制定色系”，这是很多文章里面归纳出来的几步，使用的时候也有理论依据。但我想说点不一样的。在这个时代，产品五花八门，想用哪一类别的产品一搜一大把，在七麦数据搜索购物类的 APP 榜单，光第一页单榜就有 200 多个。

如何制定产品主色？试试超容易上手的色彩理论取色法

我们模糊一下这张图，你会发现 APP 最终记忆点是色彩。

如何制定产品主色？试试超容易上手的色彩理论取色法

换做在手机看也是一样的，打开你的 APP 列表，快速往下滑去找一个 APP，你会发现它们最终只剩下色彩——“我想找爱奇艺，它在我记忆中是绿色的，刚才快速滑过的红色黄色都不是”。当然，这只是拿来举例，通常你不需要这样去找一个APP。用这个例子只想强调APP主色的意义——它是区别于竞品的第一特征，是调性概括，是一种态度，甚至是你趁手的兵器。

所以当你去确定产品主色的时候，有三种思路：随大众；反着来；搞特殊。

如何制定产品主色？试试超容易上手的色彩理论取色法

随大众

不同的行业发展至今，已经自带色相了。比如电商购物是红黄色、医疗健康是蓝绿色、商务是蓝色…如果我们每次都用产品或者行业特性去推导色相，出来的大多数都是第一种思路。

反着来

使用和竞品色相相差大于 90 度（中差色、对比色、互补色）的，差别较大的就是反着来。这是逆向思维，通过差异较大的色相能让你在一堆颜色同质化的竞品中跳出来。

搞特殊

抖音和 keep 是我心中搞特殊的 top，既不使用行业相同的色相，也不使用相反的色相，而是双色相或双色相叠加。

用我做的小易 APP 来做例子说一下制定色系的过程吧

基于行业与场景确认色相
色相偏移
WCAG 标准验证颜色
色系拓展
基于行业与场景确认色相
小易是一款助力销售的 CRM 产品，主打销售智能化。取色就要看你立足点是“数据智能”还是“销售”了。与数据智能相关的绕不开蓝绿色，与销售系统相关的绕不开橙色。这个产品是内部定制化的，不存在有竞品的情况，因此随大众更容易取得方案的通过。为免出现“这个颜色一点都不科技和智能”的质疑和返工，我非常科学（识相）地选择了蓝色作为主要色相。

如何制定产品主色？试试超容易上手的色彩理论取色法

色相偏移
用 HSB 参数来看，正蓝色的 H 值（色相）是 240。引用优设大课堂态爷的一句话是：要想颜色好看，色相别太正。那么正蓝色就要偏移：往冷色偏移或者往暖色偏移。

这里加入一个空间的概念：假设产品是一个空间，里面主打智能和数据，我设定了大环境偏冷光，所以里面的物体会受冷光的影响。

如何制定产品主色？试试超容易上手的色彩理论取色法

在冷光环境下，蓝色的色相受环境影响，会往冷色偏移。色相偏移 15 度是同类色，偏移 45 度是近似色。我在两者之间取了中间值，约 25 度。对市面上的产品取色进行研究的时候，会发现它们的色值一般在拾色器九宫格的右上格，所以 S 值（饱和度）的取值范围大致在 77%-100%之间，我取了中间偏下的值 89%。B 值（明度）一般为 100%，除了黄绿色相本身明度偏高，则会适当降低明度。

如何制定产品主色？试试超容易上手的色彩理论取色法

WCAG 标准验证颜色
WCAG 是网页无障碍指南其中关于颜色的使用标准，简单来说就是色彩要在页面中达到一定的对比度，才能让人看清。WCAG 用色标准中普通文本与背景对比度不低于 4.5：1，那么对于高亮文字颜色（通常是产品主色）是不是也需要达到这个标准呢。我用几个 APP 进行了测试，下列 APP 的对比度在白色页面中范围是 2.3-4.5。

如何制定产品主色？试试超容易上手的色彩理论取色法

我估计原因有二，一是饱和度太高有点太艳了，二是现在很多 APP 都有暗夜模式，观察这张图上的 APP 颜色情况，可以发现一个颜色在白色背景对比度越低，在黑色背景对比度就越高。且高亮文字使用的频次相比文本文字少，多数伴随色块按钮使用，所以 3-4 是较合适的对比值范围。

如何制定产品主色？试试超容易上手的色彩理论取色法

有个快速计算对比度的网页很好用，输入色值就可以得出结果。

contrast ratio：https://contrast-ratio.com/#%23FF784A-on-white

还有个网站会更直观，输入色值后下面还有网页例子预览效果。

color review：https://color.review

如何制定产品主色？试试超容易上手的色彩理论取色法

我选择的蓝色对比值在白色背景是 3.9，黑色背景是 5.2，在正常范围内。其实小易 APP 大概率不会有暗夜模式，因为需要投入更多的开发资源，浅色模式也不是不能用。在这个考量下，可以抛开黑色背景不考虑，但是话又说回来，做好准备总是没错的。

色系拓展
色系拓展需要拓展两类：中性色和辅助色。

中性色相对来说比较简单，所以放在前面先讲。前面我已经选定主色是#1b7aff，打开拾色器，将明度调为 10%，就可以得到一个深色偏蓝的颜色。用这个作为界面中性色最深的颜色，叠加白色（白色的透明度以 10%作为基础依次递减），得出中性色的色板。

如何制定产品主色？试试超容易上手的色彩理论取色法

我看过很多写得不错的文章，文末会放相关参考的链接。下面的四种选色思路，是根据他们的归纳为基础，加入一点其它的角度来进行辅助色系的选定。

如何制定产品主色？试试超容易上手的色彩理论取色法
如何制定产品主色？试试超容易上手的色彩理论取色法
如何制定产品主色？试试超容易上手的色彩理论取色法
如何制定产品主色？试试超容易上手的色彩理论取色法

看到这里你应该也发现规律了：

选色离不开色彩的理论知识。在理论的基础上不断尝试搭配，组合出不一样的色板。

而且要基于目的来选择搭配，跟画画一样。如果想要画面和谐，就不要出现多组互补色。画面中有一组互补色时，要取两者中间的颜色来劝架，以达到和谐的目的。如果希望画面冲击力强，则相反。基于这样的色彩理论，可以让我们不出错且有依据地搭配出界面的色系。

我的选色
我希望颜色能有更细腻的色相变化，所以我把色环按照 10 度作为基准细化。选择互补辅助色的时候，我没有选正互补色，偏移了 10 度。从黄色到绿色的亮度都很高，所以我的选色更多偏右边。以选取的这六种颜色作为小易的基础色，微调饱和度稍微降低色彩的黑白灰差值。

如何制定产品主色？试试超容易上手的色彩理论取色法

如何制定产品主色？试试超容易上手的色彩理论取色法

参考文章：

如何科学地建立色彩体系？我总结了这5个方面！
最近我在想一个问题：假如设计师负责一款全新的产品，不受已有规范的束缚，我们该如何定义产品的色彩体系呢？

阅读文章 >
如何抛弃惯性思维，重新定义一款产品的主色？
不知道大家有没有听过这么一个故事：某家餐厅销量一直不太好，老板究其原因也没有查明白到底是为啥，明明选址在闹市区，价格也很实惠，就是卖不出去；后来老板请了个 “大师” 帮忙一探究竟，大师说你家盘子颜色不行，换成橙色保准牛X；老板立马认购了一批橙色盘子，从那以后这家餐厅火爆了，王境泽都觉着他

阅读文章 >
授权 W3G 文档，网页无障碍指南（WCAG2.1）翻译版

优设态爷手绘提高班关于色彩的内容（课程链接）