设计素材周刊 019 期

设计素材周刊 019 期

来自「Moonvy 月维」分享的最新设计素材与资源
设计素材周刊 138 期
设计素材周刊 137 期
设计素材周刊 136 期
设计素材周刊 135 期
设计素材周刊 134 期
设计素材周刊 133 期
设计素材周刊 132 期
设计素材周刊 131 期
设计素材周刊 130 期
设计素材周刊 129 期
设计素材周刊 128 期
设计素材周刊 127 期
设计素材周刊 126 期
设计素材周刊 125 期
设计素材周刊 124 期
设计素材周刊 123 期
设计素材周刊 122 期
设计素材周刊 121 期
设计素材周刊 120 期
设计素材周刊 119 期
设计素材周刊 118 期
设计素材周刊 117 期
设计素材周刊 116 期
设计素材周刊 115 期
设计素材周刊 114 期
设计素材周刊 113 期
设计素材周刊 112 期
设计素材周刊 111 期
设计素材周刊 110 期
设计素材周刊 109 期
设计素材周刊 108 期
设计素材周刊 107 期
设计素材周刊 106 期
设计素材周刊 105 期
设计素材周刊 104 期
设计素材周刊 103 期
设计素材周刊 102 期
设计素材周刊 101 期
设计素材周刊 100 期
设计素材周刊 099 期
设计素材周刊 098 期
设计素材周刊 097 期
设计素材周刊 096 期
设计素材周刊 095 期
设计素材周刊 094 期
设计素材周刊 093 期
设计素材周刊 092 期
设计素材周刊 091 期
设计素材周刊 090 期
设计素材周刊 089 期
设计素材周刊 088 期
设计素材周刊 087 期
设计素材周刊 086 期
设计素材周刊 085 期
设计素材周刊 084 期
设计素材周刊 083 期
设计素材周刊 082 期
设计素材周刊 081 期
设计素材周刊 080 期
设计素材周刊 079 期
设计素材周刊 078 期
设计素材周刊 077 期
设计素材周刊 076 期
设计素材周刊 075 期
设计素材周刊 074 期
设计素材周刊 073 期
设计素材周刊 072 期
设计素材周刊 071 期
设计素材周刊 070 期
设计素材周刊 069 期
设计素材周刊 068 期
设计素材周刊 067 期
设计素材周刊 066 期
设计素材周刊 065 期
设计素材周刊 064 期
设计素材周刊 063 期
设计素材周刊 062 期
设计素材周刊 061 期
设计素材周刊 060 期
设计素材周刊 059 期
设计素材周刊 058 期
设计素材周刊 057 期
设计素材周刊 056 期
设计素材周刊 055 期
设计素材周刊 054 期
设计素材周刊 053 期
设计素材周刊 052 期
设计素材周刊 051 期
设计素材周刊 050 期
设计素材周刊 049 期
设计素材周刊 048 期
设计素材周刊 047 期
设计素材周刊 046 期
设计素材周刊 045 期
设计素材周刊 044 期
设计素材周刊 043 期
设计素材周刊 042 期
设计素材周刊 041 期
设计素材周刊 040 期
设计素材周刊 039 期
设计素材周刊 038 期
设计素材周刊 037 期
设计素材周刊 036 期
设计素材周刊 035 期
设计素材周刊 034 期
设计素材周刊 033 期
设计素材周刊 032 期
设计素材周刊 031 期
设计素材周刊 030 期
设计素材周刊 029 期
设计素材周刊 028 期
设计素材周刊 027 期
设计素材周刊 026 期
设计素材周刊 025 期
设计素材周刊 024 期
设计素材周刊 023 期
设计素材周刊 022 期
设计素材周刊 021 期
设计素材周刊 020 期
设计素材周刊 019 期
设计素材周刊 018 期
设计素材周刊 017 期
设计素材周刊 016 期
设计素材周刊 015 期
设计素材周刊 014 期
设计素材周刊 013 期
设计素材周刊 012 期
设计素材周刊 011 期
设计素材周刊 010 期
设计素材周刊 009 期
设计素材周刊 008 期
设计素材周刊 007 期
设计素材周刊 006 期
设计素材周刊 005 期
设计素材周刊 004 期
设计素材周刊 003 期
设计素材周刊 002 期
设计素材周刊 001 期

📰 设计资讯

Dalle-mini - 输入文字自动生成图像

之前介绍过革命性的 AI 图像生成工具 Dall·E 2,一般人现在还没法体验,但现在有了一个根据其论文打造的开源工具 Dalle mini,让大家都可以试一试,虽然和 Dall·E 2 比效果差很多,不过还是非常神奇。

实例配图内容为:“A painting of a fox sitting in a field at sunrise in the style of Claude Monet” (克劳德-莫奈风格的日出时分坐在田野中的狐狸画作),你可以翻译工具把你想要的画面的描述翻译成英文,输入Dalle mini等待一会就可以得到结果了。

https://huggingface.co/spaces/dalle-mini/dalle-mini

Sky Office 虚拟办公室

超级好玩,还提供「共享屏幕」「白板」「实时聊天」集成了很多办公需要的场景,像玩游戏一样在工作。

https://sky-office.co/


🏆 产品推荐

Macaron - 创建维护 Web 组件的开源 UI 设计工具

通过视觉的方式创建组件,将它们与任何框架或原始 HTML/JavaScript 一起使用。 涉及到了部分代码知识,对于设计师上手难度颇高。

https://macaron-elements.com/

GitHub 色彩工具 Primer Prism

GitHub 的试验工具,使用调色工具,加速颜色主题的创建

暗模式不再是一个不错的功能。这是一种期待。然而,对于许多团队来说,实施暗模式仍然是一项艰巨的任务。

为深色界面创建调色板并不像反转颜色那么简单,如果您的团队计划多个主题,复杂性会增加。许多人发现自己使用了杂乱无章的颜色工具的组合,这可能是一种痛苦的体验。

GitHub 暗模式(于 2020 年 12 月在 GitHub Universe 上亮相)是反复试验、复制和粘贴以及在 Figma 文件(超过 370,000 层!)中来回反复的结果。

在推出深色模式几个月后,我们开始研究深色高对比度主题,以提供一个最大限度提高易读性的选项。在设计这个新主题时,我们着手通过构建一个实验工具来改进我们的工作流程,以解决我们在设计原始深色调色板时遇到的一些挑战。

我们称我们的实验色彩工具Primer Prism

https://primer.style/prism/local/a1fd0d5b-da4a-4690-8841-f4b8e865572e/scale/fcf10168-0449-482e-b0ef-5ea6161c5f2c

Mesh - 渐变弥散生成器

提供了一些配色模板,在模板基础上可以自由的重新配色和调整控制点以及位置,支持导出 PNG 格式。

Figam 里有个相同功能的插件 Mesh gradientsMesh Gradient

https://meshgradient.com/

Figma 插件 - 批量替换多个本文内容

框选多个图层,在一起编辑文本内容,修改更快、更容易,还提供搜索、查找和替换、制作编号列表...等功能

https://www.figma.com/community/plugin/1042878342391996546


📖 值得读读

Figma 中新增的弹簧动画,运动背后的机制

https://www.figma.com/blog/how-we-built-spring-animations/

质量、刚度和阻尼

就像行星轨道或飞盘的飞行一样,弹簧动画可以分解为特定的公式,概述物体如何受到外力的影响。弹簧动画有三个主要变量:质量、刚度和阻尼。在我们继续之前,让我们定义所有三个:

  • 质量: 无论大小,所有物理对象都有质量。物体的质量 (m) 越大,它就越重,加速所需的力也越大。(这两种现象是下式中“F”和“a”的来源。)力、质量和加速度之间的关系由牛顿公式定义:F = m * a

  • 刚度: 刚度是弹簧独有的特性。如果您以前拉过弹簧,您就会知道拉得越远,它的抵抗力就越强。胡克定律很好地总结了这一点,其中“k”是一个常数,表示弹簧的“刚度”程度:F = -k * x**

  • 阻尼: 物理物体最终会因摩擦而停止。就像高速公路上的风或穿着袜子在铺有地毯的地板上打滑一样,物体移动得越快(下面等式中的“v”,“速度”的简写),它遇到的阻力就越大。(想想力量,但施加在相反的方向)。为了确定物体停止的速度,我们使用常数 b:F = -b * v

Figma 的弹簧设置面板
Figma 的弹簧设置面板

大厂项目复盘

收集阿里、腾讯、字节跳动、百度、京东、vivo、小米、58同城、滴滴等他们的项目复盘文章

https://www.yuque.com/weijin_is_wiki/ykf0s9

如何扩大您作为设计师的战略影响力

http://beforweb.com/node/1119

优先考虑您的目标,并使用它们来优化您的输出。 通过改变(以及当事情破裂时)设定正确的基调。 使用数据作为发现、优先排序和评估的工具。 确保每个人都在看你的长期地图——不仅仅是你。


🔬 设计小科普

对抗 JPEG 的「色带」

了解 JPEG 格式压缩的工作原理与解决办法

如果您曾经尝试将照片保存为 JPEG 格式,您可能知道 JPEG 看起来有多糟糕。这种格式数十年的统治导致大多数互联网用户对称为“JPEG 伪影”的效果过敏

毫无疑问,没有人愿意与其他人分享这样的烂摊子。如果你问我这张图片到底有什么问题,我可能会说它看起来非常接近原版:没有明显的颜色偏移,所有物体都是可区分的。但是,我想说有两个主要问题:

  1. 软渐变看起来像单独的块或带。这就是为什么它被称为色带。这在天空中尤其明显,但在地面上也可以看到。
  2. 尖锐物体(看屋顶)和其他微小元素周围存在寄生虫颜色渐变。这种效果称为振铃。

让我向你展示一些魔法。我想分别应用这些效果。

https://uploadcare.com/blog/fighting-jpeg-color-banding/


🎊 设计素材

最新的 iOS 16 UI 素材

iOS 16 系统还没正式发布,设计图组件就已经出来了,给这次的发布速度点赞❤️

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

设计参考素材 - APP 界面库

Mobbin 提供国外 APP 的界面截图,50,000 多个可搜索的移动应用屏幕截图库,节省数小时的 UI 和 UX 研究。

https://mobbin.com/

Reshot - 免费图标、插图、图片集合素材库

提供大量精美的矢量图标、插图及图片素材,并支持搜索查找。

推荐人:小斌PPT、无名的人

https://www.reshot.com/

3D 素材集合

是个集合文件,有不少 3D 场景和人物,还包含一些常用图标的 3D,都是 PNG 格式的大图。

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

矢量绘制 MacOS 图标

这个翻页的形状和效果绘制的很细节也有质感

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


🏖 随便逛逛

可爱到爆炸的小游戏,太细节了,记得打开音乐

推荐人:李俊

https://www.choonsikdiary.com/

Apple 细节,A4 PDF 文件与物理 A4 显示尺寸相同

Apple 一直在认真对待这个 DPI 问题。打开 A4 大小的 PDF 并将其与物理 A4 纸张进行比较,结果是窗口尺寸与实际物理 A4 尺寸相同。

https://twitter.com/nishuang/status/1539771710655823872?s=21&t=R9N1WGKkazdG4bS6HUEffA

耕阡陌2022水果包装系列插画

苹果; 樱桃; 牛油果; 石榴; 无花果; 柑橘; 百香果; 山竹; 芒果; 释迦果; 火龙果; 水蜜桃;

https://www.behance.net/gallery/139956127/2022-Fruit-Packaging-Series-Illustrations-2022?utm_source=extension&utm_medium=click&utm_campaign=muzli

插画欣赏
插画欣赏

Figma 2022 年 6 月 6 日至 7 日 服务中断的事后分析

https://www.figma.com/blog/postmortem-service-disruptions-on-june-6-and-7-2022/

8位键盘,用复古开关做键盘?

https://hackaday.io/project/185991-the-8bit-keyboard


封面来源:Behance


👍 优秀订阅推荐

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

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

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

🎁 福利区

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

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