设计素材周刊 020 期

设计素材周刊 020 期

来自「Moonvy 月维」分享的最新设计素材与资源

🏆 产品推荐

在 Figma 里查看 PDF

Import PDF into Figma ,在 Figma 中插入任何 PDF,并且可以选择加入的页数。

推荐人:Mr.Biscuit

https://www.figma.com/community/widget/1064675123479620100

应用程序图标生成器

上传图片,可以根据标准自动生成不同尺寸,下载即可,省去了手动调整尺寸和导出的复杂流程。

https://appicon.co/#app-icon

平滑 SVG 路径变化的差值

用于在 SVG 路径之间进行变形。在相同 SVG 路径的 X 变体之间平滑变形(即相同的命令,不同的值)。

https://github.com/Minibrams/svg-path-morph


📖 值得读读

2022年 LOGO 趋势报告

我最近被要求回顾过去 20 年的 LogoLounge 趋势报告。它如何塑造了我的设计方式?对我个人有什么影响?我想到了一个我经常使用但其他人很少理解的短语:“知道你是如何到达那里的,比知道你在哪里更重要。”

显然,知道自己在哪里很重要。我并不是建议每个人都迷路(尽管有时这是创作过程的必要部分)。我要说的是,在 20 年和 380,000 个标志之后,它仍然和以往一样重要。这。工作。一个伟大的标志超越了趋势。我说的是核心定义,拉丁词根:trans(跨越)+ scandere(攀登)。

https://www.logolounge.com/articles/2022-logo-trend-report

你如果想看2021、2020、2019、2018等之前的 LOGO 趋势,可以将链接里的「2022」修改为目标年份即可。

色彩无障碍设计(Color Accessibility)之「对比度」的探索

解读无障碍设计的原因和目的

推荐人:leeC

「Color Accessibility」是什么?

WCAG 2.0 (Web Content Accessibility Guideline,Web内容无障碍指南)就是为了帮助设计师创造良好用户体验的。

WCAG 中提到的主要的四种类型的残疾是:

  • 视力障碍(Visual impairments)
  • 听力障碍(Hearing impairments)
  • 运动障碍(Motor impairments)
  • 智力障碍(Intellectual disabilities)

基于此,提出了 「POUR无障碍原则」

  • 易于感知的(Perceivable)
  • 便于操作(Operable)
  • 容易理解的(Understandable)
  • 稳定耐用的(Robust)

颜色的选择属于「易于感知的」无障碍设计范畴。 也就是说,网站/App 的内容应该很容易被看到——尤其是文字和图像,应该有足够高的色彩对比度(high color contrast ratio),使之很容易地从背景中被辨识出来。

https://zhuanlan.zhihu.com/p/29359260?from_voters_page=true


🔬 设计小科普

Figma 批量重命名里的「正则表达式」

正则表达式是对字符串(包括普通字符(例如,a 到z 之间的字母)和特殊字符(称为“元字符”))操作的一种逻辑公式,就是用事先定义好的一些特定字符及这些特定字符的组合,组成一个“规则字符串”,这个“规则字符串”用来表达对字符串的一种过滤逻辑。 正则表达式是一种文本模式,该模式描述在搜索文本时要匹配的一个或多个字符串。

比如更改名称的语法(例如,将“Icon_003”更改为“003_Icon”),并且可以批量方便地完成。

推荐人:Jaylee、草帽

https://help.figma.com/hc/en-us/articles/360039958934-Rename-Layers

SVG 路径数据是如何工作的

路径数据由 6 种类型的指令组成,告诉您的计算机如何绘制形状:

  • MoveTo
  • LineTo
  • 三次贝塞尔曲线
  • 二次贝塞尔曲线
  • 圆弧曲线
  • 闭合路径

这些指令中的每一个都使用字母表中的一个字母作为命令,后面的所有数字都是传递给它的参数。

https://typefully.com/DanHollick/wujrCCG


🎊 设计素材

超级全的图标库

是个图标库集合,也是通用图标框架。FontAwesome、Material Design Icons、DashIcons、Feather Icons、EmojiOne、Noto Emoji 和许多其他开源图标集(100 多个图标集、100,000 多个图标)。图标支持在线修改颜色、尺寸、旋转等参数,设计师复制 SVG 到 设计工具里粘贴即可。

https://icon-sets.iconify.design/

UI 小组件样式集合

https://www.figma.com/community/file/1122657723598718827

3D 模型素材

https://spectrumui.gumroad.com/l/Glass3DIcons

https://ui8.net/ui8/products/3d-icon-pack-finance(限时免费)

3D 人物模型

https://spectrumui.gumroad.com/l/People3DAvatar

https://www.figma.com/community/file/1123979473321994142

拟物透明磨砂模型

限时免费

https://www.shapefest.com/expansions/frosted-glass-isometric-apple-devices

图标动画库

Lottie 动画、图标动画,好看的都是收费的,不过可以多来看看图标动画的方式和动作。同时提供了免费动态图标的下载使用。

https://creattie.com/

动画周期表

武藏野美术大学,赤峰一树的毕业作品 每个元素都做了动画,并提供下载 AE 格式文件。

推荐人:无名的人

http://foxcodex.html.xdomain.jp/index.html


🏖 随便逛逛

在 Figma 完成了在线版「动物森友会」

网页已经把 Figma 变成了摸鱼神器。「小部件」和「地图」配合起来就可以和伙伴在线会友了,就是地图大了多少会有点卡,左上角的跑道不要去,那速度会让你转眼花,上车容易下车难...

地图文件:https://www.figma.com/community/file/1118658708951135857

小部件:https://www.figma.com/community/widget/1117473220251961046/Interactive-Figmaland

咖啡制作过程图标动画欣赏

作者对图标动画的运动轨迹进行的细致的描述

https://dribbble.com/shots/18010031-Morning-Coffee?utm_content=buffer7cd3d&utm_medium=ownedsocial&utm_source=twitter&utm_campaign=buffer

222
222

字体定制工作室

首屏很有创意,衍化文字的变形目标明确主题突出

https://rosettatype.com/?ref=lapaninja

插画艺术

都是成品案例,配色和动画都很棒

https://antoniouve.com/


封面来源:Behance


👍 优秀订阅推荐

「 体验碎周报」,帮助交互设计师成长,由「龙爪槐」创建和更新。

「DEX 周刊」,关于产品、设计、前端、软件等内容的精华资讯,由「丁一」创建和更新。

「科技爱好者周刊」,记录每周值得分享的科技内容。

🎁 福利区

🍭「Figma Section」,9 折购买 ,Figma 设计图管理插件

❤️「Pro Layout Panel」,9折购买 ,Fgiam 超级自动布局,让自动布局使用更高效快捷