Moonvy 月维,设计素材周刊 #021 期

当前位置:首页>设计文章>UI>Moonvy 月维,设计素材周刊 #021 期

Moonvy 月维,设计素材周刊 #021 期

产品推荐

Figma 倾斜插件

用来制作倾斜和 3D 效果,操作简单功能强大

https://www.figma.com/community/plugin/862059663689780943/Perspective-Toolkit

Moonvy 月维,设计素材周刊 #021 期

Heazy - 在线生成矢量背景纹理

可以根据模板快速生成背景和配色方案,提供比例更换、波浪纹理等设置、描边设置、颜色修改等自定义编辑,支持svg 、png、代码三种导出类型。

https://heazy.studio/

Moonvy 月维,设计素材周刊 #021 期

暗夜代码主题

视觉及其友好的暗夜主题配色,提供两个主题。

  • 单色
  • 月光
https://sequoiatheme.com/

Moonvy 月维,设计素材周刊 #021 期

Moonvy 月维,设计素材周刊 #021 期

手机屏幕尺寸查询

超级全的手机、Pad、电脑屏幕像素及物理尺寸、比例等信息的查询。

https://screensiz.es/

Moonvy 月维,设计素材周刊 #021 期

值得读读

探索用 Figma 做游戏 UI 设计

记得2021年《Figma一站式设计交付》中提到,Figma本身是一个矢量设计软件,所以个人认为Figma比较适用于制作一些偏扁平、卡通的游戏UI风格。

纵观全网Figma基本都是To B 、To C类的产品应用,很少人会往这个游戏这个方向研究了,因此我开启了一段Figma针对扁平类游戏UI设计的探索之旅,结合Figma Config 2022姗姗来迟的AutoLayout 4.0的使用,以英雄联盟鲜明的海克斯科技风格代表性更高。

此次练习设计主要总结了一些设计技巧:

  • 异形的自适应按钮、自适应面板背景(AL4.0绝对定位+约束拉伸)
  • 数字、字母动画(AfterDelay嵌套)

文章链接:https://mp.weixin.qq.com/s/VILa-zhplOZcEda9opENGw

Figma 实例文件链接:

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

Moonvy 月维,设计素材周刊 #021 期

全息图、漏光以及如何构建纯 CSS 着色器

滚动浏览器,位置不同图像的内容光影跟随变化是如何实现的。

模拟镜面反射首先,我们需要考虑光线如何在图像表面从明处传播到暗处。我们需要一个光线最强烈的区域,随着光线的消散逐渐下降到黑暗中。我们将使用渐变来做到这一点。

了解图像混合模式顾名思义,mix-blend-mode将一个元素层中每个像素的颜色与它正下方的层混合在一起。与 GLSL 一样,CSS 为我们提供了一长串可供选择的选项,创建正确的效果意味着知道哪种混合会产生我们需要的结果。但是这些混合模式实际上是做什么的呢?在我们陷入我们的着色器之前,让我们快速浏览一下我们将使用的混合模式。

https://robbowen.digital/wrote-about/css-blend-mode-shaders/

Moonvy 月维,设计素材周刊 #021 期

Figma 的新功能:2022 年 6 月

https://www.figma.com/blog/whats-new-in-figma-june-2022/

Moonvy 月维,设计素材周刊 #021 期
Figma 更改了插件的安装位置,安装可卸载的位置相同
Moonvy 月维,设计素材周刊 #021 期
如果你安装了 FigmaEX 可以在侧边栏完成,搜索、安装和卸载

我们尝试让插件不再有「安装」和「未安装」的概念,需要插件的时候,输入关键字搜索即可。搜索结果里单击即可启动,不需要的插件右键即可「卸载」。

https://mp.weixin.qq.com/s/VyxENV-WczLw48ULCmBWxg

Moonvy 月维,设计素材周刊 #021 期

设计素材

特色矢量插画

难得的细致矢量还免费的插画素材

https://www.figma.com/community/file/1123930848462274399
Moonvy 月维,设计素材周刊 #021 期

品牌视觉指南,设计资源文件

里面收录了一些大品牌的 LOGO 视觉文件,有麦当劳、星巴克、微软、Apple、国家地理等超大品牌的视觉方案,需要注册后下载 PDF 格式文件。

https://brandingstyleguides.com/

Moonvy 月维,设计素材周刊 #021 期

图标动画库

常用图标动画,比如警告的闪烁、关闭按钮的抖动、菜单打开变形为关闭、描边点击变实色填充等效果动画,下载提供 json 和 svg 文件直接可用。

https://useanimations.com/

Moonvy 月维,设计素材周刊 #021 期

3D 抽象插图

一次打包下载,Figma、PNG、SVG等格式。

https://www.ls.graphics/illustrations/bzzzt
Moonvy 月维,设计素材周刊 #021 期

样机模型素材

常用到的 视觉包装设计都有,宣传册、名片、LOGO 展示、衍生品等模型

https://www.ls.graphics/free-mockups
Moonvy 月维,设计素材周刊 #021 期

Feather 在线图标库

图标支持调整尺寸、粗细参数,点击即可下载 SVG 格式到本地。

https://feathericons.com/

该图标库在 Figma 里有图标插件,不过插件里不支持参数的修改。

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

Moonvy 月维,设计素材周刊 #021 期

随便逛逛

GLEEC 网站视觉欣赏

网站设计既表现科技颜色又不俗套

https://gleec.com/
Moonvy 月维,设计素材周刊 #021 期

DG 时装秀,7月9日在米兰

https://altamoda.dolcegabbana.com/en/
Moonvy 月维,设计素材周刊 #021 期

一个关于甲虫的科普网站

https://www.knowyourbeetle.com/

Moonvy 月维,设计素材周刊 #021 期

来自地球的数据

人类所做的一切都会影响我们的生态系统。由于地球上的许多系统都处于临界点,气候数据平台必须具有可访问性和现代化。输入地球 API。

我们从来自美国国家海洋和大气管理局(NOAA)的重要温室气体 CH 4、CO 2、N 2 O 和 SF 6开始。您可以按年和月的间隔查询数据。(从下拉列表中选择不同的排放以查看示例数据集)

https://www.hge.earth/

Moonvy 月维,设计素材周刊 #021 期

在线万花尺 - 齿轮画圈模板

小时候每人必备工具,这个在线的支持修改颜色可以保存图片圈圈尺寸类型也比较多。

https://nathanfriend.io/inspiral-web/

Moonvy 月维,设计素材周刊 #021 期

封面来源:

https://www.behance.net/gallery/110678723/Commercial-Projects-2020-2021

前往左下角「阅读原文」,去博客查看链接和往期

如果觉得我们的内容还不错的话,希望可以把「Moonvy 月维」分享给小伙伴

你的认可是我们更新的最大动力 ❥(^-^)V

Moonvy 月维,设计素材周刊 #021 期

温馨提示:

文章标题:Moonvy 月维,设计素材周刊 #021 期

文章链接:https://www.uied.cn/16165.html

更新时间:2023年04月18日

本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
UI交互设计干货

UI 设计的一致性:改善用户体验的 8 个技巧!

2023-4-18 11:20:33

UI设计干货

Moonvy 月维,设计素材周刊 #022 期

2023-4-18 13:40:15

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索