#Android #Design #Marvin的灵感随笔
🔵 以MDGram为例,聊聊Material Design
💡 引言
前几天,作为长期Apple用户的我破天荒的买了一台安卓备用机——Pixel 4。买这台机器,一方面是为了充值自己的Google信仰,另一方面也是体验一下原生安卓和它优秀的设计。
当然,拿到一台机器最重要的肯定是先下载Telegram。从Google Play下载的官方版本的颜值实在是没眼看,于是我按照群友意见下载了MDGram这款App。
但用过一阵之后,这款处处“遵循”着Material Design设计规范的App,却给我一种华而不实的感觉。于是,我决定以此为契机,好好的看一看这个Material Design,和MDGram的问题:
一、设计规范?规范了,但没完全规范
1. 第一个问题就是,Material Design的大部分设计是「指示」性的,而并非是「内容」性的,例如:
在Google Mail App中,只有菜单栏采用了Material Design的设计风格。
这与Material Design的元素样式有关:在Material Design中,运用了大量的,类似于「超大R角」等样式的设计。但这种风格真的是为了呈现内容吗?并非如此,这种设计风格就不是作为内容元素而存在的,而是作为指示元素。
例如,你在街边看到一个超大的,五颜六色的广告牌,那么广告牌上可能只有几个大字。但是如果这个五颜六色的霓虹灯广告牌上是一堆正文,大多数人就读不下去了。因此如果Material Design被错误的强调视觉元素,那么就会导致喧宾夺主。
2. 由于其指示属性,Material Design的配色饱和度都比较低。并且在同一个Color Pack中,Google 为了更加明确的视觉引导,于是将其中的颜色设置的差别很大。这就导致了如果错误的用在信息显示上,就会给人一种眼睛很难受的感觉。
二、为什么MDGram看起来很难受?
主要的原因是,MDGram并没有真正理解Material Design的设计规范。
例如,在MDGram的界面中,信息气泡作为内容,就不应该使用Material Design的Color Pack,而应该使用类似于灰色/蓝色/白色的背景;
而「+」号和「🎤 」 符号 ,则可以使用Material Design中较为浅色的颜色。在顶部的信息栏也不应使用Material Design的颜色。
同样的,现在很多宣称自己遵循了Material Design设计规则的App其实都没有真正理解如何使用Material Design(至少在我用的这些App中有这些问题)
再来看一个范例(图二):Google Mail,这个App对于Material Design的设计规范是比较遵守的:底部的信息栏作为指示标识,遵循了Material design的设计理念,让人一眼就能识别到不同的信息——Mailbox/Meeting;而在顶部的邮件显示区域,并没有花里胡哨的使用什么圆角矩形,而是单纯的信息的合理堆叠
三、后记
在研究完MDGram之后,我还查阅了一下Material Design 的官方设计规范:链接
在这个规范中,里面大量的提到了如何应用Material Design去设计一些指示性内容的设计规范,例如按钮的样式、菜单栏选择的样式等等。但是对于如何处理内容信息却很少提到(也有可能是我没看到)。这无疑为想要使用Material Design作为设计规范的软件增加了难度,也是目前Material Design的一个问题。
频道:@NewlearnerChannel
💡 引言
前几天,作为长期Apple用户的我破天荒的买了一台安卓备用机——Pixel 4。买这台机器,一方面是为了充值自己的Google信仰,另一方面也是体验一下原生安卓和它优秀的设计。
当然,拿到一台机器最重要的肯定是先下载Telegram。从Google Play下载的官方版本的颜值实在是没眼看,于是我按照群友意见下载了MDGram这款App。
但用过一阵之后,这款处处“遵循”着Material Design设计规范的App,却给我一种华而不实的感觉。于是,我决定以此为契机,好好的看一看这个Material Design,和MDGram的问题:
一、设计规范?规范了,但没完全规范
1. 第一个问题就是,Material Design的大部分设计是「指示」性的,而并非是「内容」性的,例如:
在Google Mail App中,只有菜单栏采用了Material Design的设计风格。
这与Material Design的元素样式有关:在Material Design中,运用了大量的,类似于「超大R角」等样式的设计。但这种风格真的是为了呈现内容吗?并非如此,这种设计风格就不是作为内容元素而存在的,而是作为指示元素。
例如,你在街边看到一个超大的,五颜六色的广告牌,那么广告牌上可能只有几个大字。但是如果这个五颜六色的霓虹灯广告牌上是一堆正文,大多数人就读不下去了。因此如果Material Design被错误的强调视觉元素,那么就会导致喧宾夺主。
2. 由于其指示属性,Material Design的配色饱和度都比较低。并且在同一个Color Pack中,Google 为了更加明确的视觉引导,于是将其中的颜色设置的差别很大。这就导致了如果错误的用在信息显示上,就会给人一种眼睛很难受的感觉。
二、为什么MDGram看起来很难受?
主要的原因是,MDGram并没有真正理解Material Design的设计规范。
例如,在MDGram的界面中,信息气泡作为内容,就不应该使用Material Design的Color Pack,而应该使用类似于灰色/蓝色/白色的背景;
而「+」号和「🎤 」 符号 ,则可以使用Material Design中较为浅色的颜色。在顶部的信息栏也不应使用Material Design的颜色。
同样的,现在很多宣称自己遵循了Material Design设计规则的App其实都没有真正理解如何使用Material Design(至少在我用的这些App中有这些问题)
再来看一个范例(图二):Google Mail,这个App对于Material Design的设计规范是比较遵守的:底部的信息栏作为指示标识,遵循了Material design的设计理念,让人一眼就能识别到不同的信息——Mailbox/Meeting;而在顶部的邮件显示区域,并没有花里胡哨的使用什么圆角矩形,而是单纯的信息的合理堆叠
三、后记
在研究完MDGram之后,我还查阅了一下Material Design 的官方设计规范:链接
在这个规范中,里面大量的提到了如何应用Material Design去设计一些指示性内容的设计规范,例如按钮的样式、菜单栏选择的样式等等。但是对于如何处理内容信息却很少提到(也有可能是我没看到)。这无疑为想要使用Material Design作为设计规范的软件增加了难度,也是目前Material Design的一个问题。
频道:@NewlearnerChannel
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
#Goods #Web #Design #buybuybuy
🛒 Goods.wtf:这啥好东西?
🔗:Web
📼 上周作周总结时,我和大家分享了 Teenage Engineering 价值 $1,500 的录音机,认为它复古而现代,小巧又精致。好的设计总能第一时间抓住人的眼球,Goods.wtf 就是这样一个收集「好设计」商品的网页
🎨 那么什么是「好设计」呢,我认为它没有一个死板的定义,但总有一些大家所共识的特点:看起来舒服、高级,保持克制、不化简为繁。即便你不买,单单打开网页看到这些商品,也是一种视觉上的享受
💡 网页对收录在内的商品进行了简单的分类,并列举了一些 Top brands,美中不足的是搜索功能的缺失。你在其中能够看到 Apple、Leica、Nothing、Sonos、Bellroy、Nike、Logitech、DJI、Belkin 等经常出现在频道的品牌
👀 但最让我喜欢的,是它对自己不熟悉领域的启发。几乎不需要花什么成本,我就能轻易了解到科技之外的衣食住行品牌和产品。我一直相信,在对某类产品进行消费前,即使不买,也要去了解该品类的「好东西」是什么
💼 之前买包类产品时,我常常找不到适合自己的背包。相信通过这个网站,我能够了解未知的品牌,并从他们的产品中不断筛选,直到找到让自己满意的产品。也希望这个网站能够帮助你迅速认识和了解一些新品牌,助力你未来的选购!
📘 关联阅读:Nendo - 简约为本,不失创意的设计室
* 标题灵感来自于 WHAT THE GOLF?(这啥高尔夫?),该游戏公司近期推出的新作 WHAT THE CAR? 同样值得一玩
频道:@NewlearnerChannel
🛒 Goods.wtf:这啥好东西?
🔗:Web
📼 上周作周总结时,我和大家分享了 Teenage Engineering 价值 $1,500 的录音机,认为它复古而现代,小巧又精致。好的设计总能第一时间抓住人的眼球,Goods.wtf 就是这样一个收集「好设计」商品的网页
🎨 那么什么是「好设计」呢,我认为它没有一个死板的定义,但总有一些大家所共识的特点:看起来舒服、高级,保持克制、不化简为繁。即便你不买,单单打开网页看到这些商品,也是一种视觉上的享受
💡 网页对收录在内的商品进行了简单的分类,并列举了一些 Top brands,美中不足的是搜索功能的缺失。你在其中能够看到 Apple、Leica、Nothing、Sonos、Bellroy、Nike、Logitech、DJI、Belkin 等经常出现在频道的品牌
👀 但最让我喜欢的,是它对自己不熟悉领域的启发。几乎不需要花什么成本,我就能轻易了解到科技之外的衣食住行品牌和产品。我一直相信,在对某类产品进行消费前,即使不买,也要去了解该品类的「好东西」是什么
💼 之前买包类产品时,我常常找不到适合自己的背包。相信通过这个网站,我能够了解未知的品牌,并从他们的产品中不断筛选,直到找到让自己满意的产品。也希望这个网站能够帮助你迅速认识和了解一些新品牌,助力你未来的选购!
📘 关联阅读:Nendo - 简约为本,不失创意的设计室
* 标题灵感来自于 WHAT THE GOLF?(这啥高尔夫?),该游戏公司近期推出的新作 WHAT THE CAR? 同样值得一玩
频道:@NewlearnerChannel
#Web #Design
🏠 Rooms.xyz:在线打造像素化 3D 房间
🔗:Web
👾 从去年开始,上帝视角的三维房间就流行起来。设计师将它作为自己的主页,导航到不同项目;外设厂商将它作为宣传图,展示自己的外设在房间中的效果
🤖 相信随着 AI 的发展,目前出图更加方便。今天要介绍的项目 Rooms 则可以让你在线搭建这样的 3D 房间,并把控所有细节
🚪 你可以在空白房间摆放玩具、家电、绿植、家具装修、人物等系统预设物品,也可以对它们进行像素化修改或是自己从零手搓一个物品
💡 不止如此,Rooms 对每个物品的样式、摆放位置、触发行为都给出了很详细的自定义选项,你甚至可以通过编程来进行设计
👀 用户登录即可编辑并保存自己的小屋设计,你也可以参观学习其他人的成品。无论是社交 po 图,还是作为文章插图,这样的 3D 房间都让人赏心悦目
📘 关联阅读:
1️⃣ My Room in 3D:在线参观 3D 房间
2️⃣ Sombras:自定义模块排列,设计投影图案
3️⃣ Jesse Zhou 和他的「拉面店」个人主页
频道:@NewlearnerChannel
🏠 Rooms.xyz:在线打造像素化 3D 房间
🔗:Web
👾 从去年开始,上帝视角的三维房间就流行起来。设计师将它作为自己的主页,导航到不同项目;外设厂商将它作为宣传图,展示自己的外设在房间中的效果
🤖 相信随着 AI 的发展,目前出图更加方便。今天要介绍的项目 Rooms 则可以让你在线搭建这样的 3D 房间,并把控所有细节
🚪 你可以在空白房间摆放玩具、家电、绿植、家具装修、人物等系统预设物品,也可以对它们进行像素化修改或是自己从零手搓一个物品
💡 不止如此,Rooms 对每个物品的样式、摆放位置、触发行为都给出了很详细的自定义选项,你甚至可以通过编程来进行设计
👀 用户登录即可编辑并保存自己的小屋设计,你也可以参观学习其他人的成品。无论是社交 po 图,还是作为文章插图,这样的 3D 房间都让人赏心悦目
📘 关联阅读:
1️⃣ My Room in 3D:在线参观 3D 房间
2️⃣ Sombras:自定义模块排列,设计投影图案
3️⃣ Jesse Zhou 和他的「拉面店」个人主页
频道:@NewlearnerChannel
#Web #Design
🍱 Bento Grids:Bento 风格的产品宣传图在线合集
🔗:Web
🍎 2020 年以来,Apple 一直坚持使用「Bento」风格的 PPT,将这个展示风格做了大力宣传。「Bento」风格其实也就是像便当一样一格格排布,既保证了直观性,也兼顾了信息密度
🎨 自此之后,采用这种风格的网页设计 / 产品宣传 PPT 就越来越多。它们之中有些是拙劣的模仿、邯郸学步,有些则值得学习和参考。Bento Grids 就是这么一个 Bento 大全网站
💡 在 Bento Grids 中,你可以根据图形设计 / 网页设计来进行简单的筛选。遇到感兴趣的设计后,点开项目,可以从底部快速获取相关信息、并访问对应的 source
🍣「Bento」风格大火,是因为它站在了时代的审美上,同时又能很好地传递信息。个人信息展示页 Bento 的走红,同样能够佐证这一点
📘 关联阅读:
1️⃣ Bento:快捷个人主页
2️⃣ Apple Summary Slides:2019 年来 Apple 发布会 PPT 汇总
频道:@NewlearnerChannel
🍱 Bento Grids:Bento 风格的产品宣传图在线合集
🔗:Web
🍎 2020 年以来,Apple 一直坚持使用「Bento」风格的 PPT,将这个展示风格做了大力宣传。「Bento」风格其实也就是像便当一样一格格排布,既保证了直观性,也兼顾了信息密度
🎨 自此之后,采用这种风格的网页设计 / 产品宣传 PPT 就越来越多。它们之中有些是拙劣的模仿、邯郸学步,有些则值得学习和参考。Bento Grids 就是这么一个 Bento 大全网站
💡 在 Bento Grids 中,你可以根据图形设计 / 网页设计来进行简单的筛选。遇到感兴趣的设计后,点开项目,可以从底部快速获取相关信息、并访问对应的 source
🍣「Bento」风格大火,是因为它站在了时代的审美上,同时又能很好地传递信息。个人信息展示页 Bento 的走红,同样能够佐证这一点
📘 关联阅读:
1️⃣ Bento:快捷个人主页
2️⃣ Apple Summary Slides:2019 年来 Apple 发布会 PPT 汇总
频道:@NewlearnerChannel
#Web #Tools #Design
🏞 Jellylade:又一个 Mockup 图片 / 截图生成网站
🔗:Web
👉 Features
- 自定义生成图片尺寸,适配多种主流社交平台
- 支持对截图、浏览器页面和 Apple 等电子产品屏幕进行 Mockup
- 丰富的自定义选项,包含截图位置、样式、圆角、阴影、背景、渐变等
- 支持一键下载生成图片,保存为 JPG / PNG
👀 在我看来,Jellylade 是对 Shots.so 的高度「致敬」。但自定义程度稍有欠缺,支持的电子产品类别以及 Mockup 视角也更少。同时,它不支持 SVG 和复制生成的图片
🧑💻 但它依然是目前截图生成网站的第一梯队,借鉴来了大部分好设计和好功能,也能够满足我的大部分需求。Shots.so 一直在内测,如果它哪天开始收费,自己的需求又不足以付费支持,那么可以使用 Jellylade 作为一个平替
📘 关联阅读:Shots.so - 制作精美的 Mockup 图片 / 截图
频道:@NewlearnerChannel
🏞 Jellylade:又一个 Mockup 图片 / 截图生成网站
🔗:Web
👉 Features
- 自定义生成图片尺寸,适配多种主流社交平台
- 支持对截图、浏览器页面和 Apple 等电子产品屏幕进行 Mockup
- 丰富的自定义选项,包含截图位置、样式、圆角、阴影、背景、渐变等
- 支持一键下载生成图片,保存为 JPG / PNG
👀 在我看来,Jellylade 是对 Shots.so 的高度「致敬」。但自定义程度稍有欠缺,支持的电子产品类别以及 Mockup 视角也更少。同时,它不支持 SVG 和复制生成的图片
📘 关联阅读:Shots.so - 制作精美的 Mockup 图片 / 截图
频道:@NewlearnerChannel
Please open Telegram to view this post
VIEW IN TELEGRAM
#Design #Photos #Web
🏞 日本传统色:365 种日本传统色和它们背后的典故
🔗:Web
🌸 我们之前和大家介绍过几个中国传统色相关项目,近日看推发现有网友整理了日本传统色,于是想要和大家分享。以下部分内容来自作者
🎨 日本人自古以来便擅于从各种日常之中获得色彩的灵感,并以纤细的视角赋予各种色彩独一无二的地位,并更进一步应用于绘画、工艺、织染甚至于文学与诗歌上
🎑 于是我们可以从平安时代的女性们身上,看见和服的典雅配色;从日式庭园中,一窥白山绿水的调和色彩;在千年古城的堂奥里,看见代表昔日风华的金灿色泽
💡「日本传统色」便是在长远的历史中一路累积而来。这里罗列了 365 种颜色,可以看到每种颜色背后的典故
👀 最后我要继续推荐自己关注的一位 Bilibili UP 主 长期洗涤Longwashing,他们的每期视频都会介绍某种主题的色彩搭配,并给出很多具有高级感的 Demo。我个人非常喜欢这种视频方式,也欢迎大家去了解更多
* 颜色数据均来源于 暦生活
📘 关联阅读:
1️⃣ Chinese-Colors:提供各种中国的传统颜色的名称
2️⃣ Tone:从自然摄影中,找到你的色彩灵感
频道:@NewlearnerChannel
🏞 日本传统色:365 种日本传统色和它们背后的典故
🔗:Web
🌸 我们之前和大家介绍过几个中国传统色相关项目,近日看推发现有网友整理了日本传统色,于是想要和大家分享。以下部分内容来自作者
🎨 日本人自古以来便擅于从各种日常之中获得色彩的灵感,并以纤细的视角赋予各种色彩独一无二的地位,并更进一步应用于绘画、工艺、织染甚至于文学与诗歌上
🎑 于是我们可以从平安时代的女性们身上,看见和服的典雅配色;从日式庭园中,一窥白山绿水的调和色彩;在千年古城的堂奥里,看见代表昔日风华的金灿色泽
💡「日本传统色」便是在长远的历史中一路累积而来。这里罗列了 365 种颜色,可以看到每种颜色背后的典故
👀 最后我要继续推荐自己关注的一位 Bilibili UP 主 长期洗涤Longwashing,他们的每期视频都会介绍某种主题的色彩搭配,并给出很多具有高级感的 Demo。我个人非常喜欢这种视频方式,也欢迎大家去了解更多
* 颜色数据均来源于 暦生活
📘 关联阅读:
1️⃣ Chinese-Colors:提供各种中国的传统颜色的名称
2️⃣ Tone:从自然摄影中,找到你的色彩灵感
频道:@NewlearnerChannel
#People #Design #APPLE #Blog #Books
🎨 Jim Nielsen 和他的 Apple 系统图标库
Jim Nielsen 是一位设计师、前端工程师,他的博客我很早就加入了素材库,一直咕咕至今。恰好近期看到一份 Newsletter 介绍了他的项目,今天就来填上这个坑
🏠 Blog
Jim Nielsen 从 2012 年开始在互联网进行博客写作,一直到今天还保持着几天一更的高频率,博文篇幅普遍不长。在他的博客中,前端知识、图标设计、读书笔记都是常客,时不时也会有兴趣、生活、思考相关的内容
你可以通过 RSS 订阅 Jim Nielsen 的博客
🍎 Apple 图标库
• iOS
• macOS
• watchOS
苹果图标库是让 Jim Nielsen 名声大噪的项目,其中包含了数百个不同应用、不同 Apple 平台的图标。作者为这些图标进行了简单的分类与搜索支持,点进每一个图标,你也能够看到该图标对应应用的相关信息
美中不足的是作者并没有收集每个软件的历史图标,不过能够理解,这是不小的工作量。通过精心设计的图标,我们也能顺便了解一些新软件
📚 The App Icon Book
这是几年前风靡全网的一本书籍,收集了 Apple 系统的一些应用图标,Jim Nielsen 的图标库项目在其中也起到了关键作用
未来书籍的内容还会继续更新,如果你也是苹果应用开发者,可以通过官网投递自己的软件和图标
💡「XXX 和 TA 的 XXX」专题旨在挖掘一些不那么大众的开发者、设计师、生活爱好者,并和大家分享他们的作品。大家可以通过 #People 这个 Tag 阅读本专题的往期内容
频道:@NewlearnerChannel
🎨 Jim Nielsen 和他的 Apple 系统图标库
Jim Nielsen 是一位设计师、前端工程师,他的博客我很早就加入了素材库,一直咕咕至今。恰好近期看到一份 Newsletter 介绍了他的项目,今天就来填上这个坑
🏠 Blog
Jim Nielsen 从 2012 年开始在互联网进行博客写作,一直到今天还保持着几天一更的高频率,博文篇幅普遍不长。在他的博客中,前端知识、图标设计、读书笔记都是常客,时不时也会有兴趣、生活、思考相关的内容
你可以通过 RSS 订阅 Jim Nielsen 的博客
🍎 Apple 图标库
• iOS
• macOS
• watchOS
苹果图标库是让 Jim Nielsen 名声大噪的项目,其中包含了数百个不同应用、不同 Apple 平台的图标。作者为这些图标进行了简单的分类与搜索支持,点进每一个图标,你也能够看到该图标对应应用的相关信息
美中不足的是作者并没有收集每个软件的历史图标,不过能够理解,这是不小的工作量。通过精心设计的图标,我们也能顺便了解一些新软件
📚 The App Icon Book
这是几年前风靡全网的一本书籍,收集了 Apple 系统的一些应用图标,Jim Nielsen 的图标库项目在其中也起到了关键作用
未来书籍的内容还会继续更新,如果你也是苹果应用开发者,可以通过官网投递自己的软件和图标
💡「XXX 和 TA 的 XXX」专题旨在挖掘一些不那么大众的开发者、设计师、生活爱好者,并和大家分享他们的作品。大家可以通过 #People 这个 Tag 阅读本专题的往期内容
频道:@NewlearnerChannel
#Design #Twitter #Web #Newsletters
🐦 Recent Design:快速查看近期 Twitter 上的设计相关推文
🔗:Web | Twitter
近期 Recent Design 在互联网大火起来,刚好也有一些想说说的,就写下这个推送。这个网页是澳大利亚设计公司 Rejiggle 创办的分项,旨在收集 Twitter 或其他平台上一些不错的设计内容
打开网页,设计比较简单,每天更新内容也不多,很克制。Info 里面写道:We take pride in our selections and strongly value quality over quantity.
设计内容展示的方式是图片,标注了作者和 source,你可以直接点击右下角的 Twitter 小标查看来源
🕊 这或许就是我离不开 Twitter 的一个原因,虽然我基本不发推,但即使根据系统推荐也能看到不少高素质的设计作品、摄影作品分享。对我来讲,Twitter 是一个可进行筛选的 RSS
🤘 最后,让我分享一下自己关注的一些设计相关推主和 Newsletters
• Arun Venkatesan
• Basic Apple Guy
• Neil Sardesai
• shimizu
• DEX 周刊
• Dine Digest
• Anyway.FM
• 龙爪槐守望者
• 月维素材周刊
频道:@NewlearnerChannel
🐦 Recent Design:快速查看近期 Twitter 上的设计相关推文
🔗:Web | Twitter
近期 Recent Design 在互联网大火起来,刚好也有一些想说说的,就写下这个推送。这个网页是澳大利亚设计公司 Rejiggle 创办的分项,旨在收集 Twitter 或其他平台上一些不错的设计内容
打开网页,设计比较简单,每天更新内容也不多,很克制。Info 里面写道:We take pride in our selections and strongly value quality over quantity.
设计内容展示的方式是图片,标注了作者和 source,你可以直接点击右下角的 Twitter 小标查看来源
• Arun Venkatesan
• Basic Apple Guy
• Neil Sardesai
• shimizu
• DEX 周刊
• Dine Digest
• Anyway.FM
• 龙爪槐守望者
• 月维素材周刊
频道:@NewlearnerChannel
Please open Telegram to view this post
VIEW IN TELEGRAM
#Design #Web
⭐️ Iconbuddy:数量庞大的在线图标库
🔗:Web
👉 Features
- 收录超过 180k 开源 icons 图标
- 完备的分类和搜索功能
- 丰富的自定义,可指定图标颜色、背景颜色(渐变色)等
- 支持 SVG / PNG / WEBP / JSX / VUE / BASE64 等多种形式导出
🤖 Iconbuddy 可能是我见过最大的图标库项目,收录了大量的 icons。无论你是专业设计师还是爱好者,都能够从中找到你想要的图标
🐕 上述功能无需登录,均可免费获得。不过如果你想自定义自己的一套图标集,或是进行图标集分享、更深度的自定义,那么就需要注册账号并登录
💡 官方表示,在未来还会推出功能强大的 API,更加方便网页开发者和设计师进行调用,尽请期待
📘 关联阅读:盘点一些在线 Icons 图标项目
频道:@NewlearnerChannel
⭐️ Iconbuddy:数量庞大的在线图标库
🔗:Web
👉 Features
- 收录超过 180k 开源 icons 图标
- 完备的分类和搜索功能
- 丰富的自定义,可指定图标颜色、背景颜色(渐变色)等
- 支持 SVG / PNG / WEBP / JSX / VUE / BASE64 等多种形式导出
🤖 Iconbuddy 可能是我见过最大的图标库项目,收录了大量的 icons。无论你是专业设计师还是爱好者,都能够从中找到你想要的图标
🐕 上述功能无需登录,均可免费获得。不过如果你想自定义自己的一套图标集,或是进行图标集分享、更深度的自定义,那么就需要注册账号并登录
💡 官方表示,在未来还会推出功能强大的 API,更加方便网页开发者和设计师进行调用,尽请期待
📘 关联阅读:盘点一些在线 Icons 图标项目
频道:@NewlearnerChannel
#App #Design
💻 在 App 中学习 UI 基础和 SwiftUI —— SixD
🏅 SixD 由杨昊伦设计与开发,荣膺 Apple WWDC23 Swift Student Challenge 奖项。
SixD (SwiftUI & Interaction Design)的作者开发了这款App来源于他自己的一个愿景:「创造一个设计师与开发者之间的桥梁」。
在Six D中可以:
1️⃣ 通过交互式指南学习 UI 设计基础:
在这个部分中,我们将扮演着一个 UI 设计师的身份,在软件的一步步引导中帮助开发者 Nina 来完善他的论坛 App。在扮演的同时,也能学习到很多 UI 相关的知识。
例如,如何利用 SwiftUI 调整可读性,改变背景颜色、强调颜色,如何对齐元素,改变图标,改变字体设置、层级、间距,圆角、边距。而有趣的是,作者在 macOS、iPadOS 上仿照了 Swift Playground 的界面,在页面的右侧显示一个实时的按照代码进行调整的手机,让学习者能随时看到调整前后的变化。
还有一点值得去夸赞的,就是其在第五章中特别提到了辅助功能、身心障碍人群,并引导着 Nina 打开了动态字体、旁白、辅助功能标签。
2️⃣ 在 SwiftUI Lab 中学习每个元素(例如颜色、字体、组建布局、导航、选择器等内容)的使用和 SwiftUI 代码,除此之外,App 还支持学习 Apple 的一些偏门 API 们的使用,例如 AR Quick Look,MapKit,PencilKit 等内容。
3️⃣ 浏览全部 SF Symbols,并通过自然描述搜索它们
在这一点上可以看出开发者确实用心在做,不过我不太清楚具体的开发逻辑,但是应该是没有用神经网络引擎去训练,因为按照 App Store 中描述的“Share”确实可以找到分享标识,但是用“Arrow to the left“却没有在库中找到任何东西。所以我认为是开发者给大部分icon手动加了一些label。
总的来说,这款 App 对我来说真的很有意思,是少有的、真正的为了某个愿景而做出来的App。虽然这款 App 目前看起来还很粗糙,但我在其中找到了一些有趣的点,例如这款 App 中渗透了 Apple 「人人可编程」的愿景,把一些复杂的 UI 设计术语融入到游戏的一个个小章节中。
说实话,我作为一个完全没有学过编程的人,在我看到游戏最后的「Congratulations!」的时候,心里却产生了一种“设计一个软件真有趣”的想法。
🔗 最后补充一下 App 的 App Store 链接,现在这款App已经支持了 iOS、iPadOS、macOS 三端:App Store | 开发者的个人官网
频道:@NewlearnerChannel
💻 在 App 中学习 UI 基础和 SwiftUI —— SixD
🏅 SixD 由杨昊伦设计与开发,荣膺 Apple WWDC23 Swift Student Challenge 奖项。
SixD (SwiftUI & Interaction Design)的作者开发了这款App来源于他自己的一个愿景:「创造一个设计师与开发者之间的桥梁」。
在Six D中可以:
1️⃣ 通过交互式指南学习 UI 设计基础:
在这个部分中,我们将扮演着一个 UI 设计师的身份,在软件的一步步引导中帮助开发者 Nina 来完善他的论坛 App。在扮演的同时,也能学习到很多 UI 相关的知识。
例如,如何利用 SwiftUI 调整可读性,改变背景颜色、强调颜色,如何对齐元素,改变图标,改变字体设置、层级、间距,圆角、边距。而有趣的是,作者在 macOS、iPadOS 上仿照了 Swift Playground 的界面,在页面的右侧显示一个实时的按照代码进行调整的手机,让学习者能随时看到调整前后的变化。
还有一点值得去夸赞的,就是其在第五章中特别提到了辅助功能、身心障碍人群,并引导着 Nina 打开了动态字体、旁白、辅助功能标签。
2️⃣ 在 SwiftUI Lab 中学习每个元素(例如颜色、字体、组建布局、导航、选择器等内容)的使用和 SwiftUI 代码,除此之外,App 还支持学习 Apple 的一些偏门 API 们的使用,例如 AR Quick Look,MapKit,PencilKit 等内容。
3️⃣ 浏览全部 SF Symbols,并通过自然描述搜索它们
在这一点上可以看出开发者确实用心在做,不过我不太清楚具体的开发逻辑,但是应该是没有用神经网络引擎去训练,因为按照 App Store 中描述的“Share”确实可以找到分享标识,但是用“Arrow to the left“却没有在库中找到任何东西。所以我认为是开发者给大部分icon手动加了一些label。
总的来说,这款 App 对我来说真的很有意思,是少有的、真正的为了某个愿景而做出来的App。虽然这款 App 目前看起来还很粗糙,但我在其中找到了一些有趣的点,例如这款 App 中渗透了 Apple 「人人可编程」的愿景,把一些复杂的 UI 设计术语融入到游戏的一个个小章节中。
说实话,我作为一个完全没有学过编程的人,在我看到游戏最后的「Congratulations!」的时候,心里却产生了一种“设计一个软件真有趣”的想法。
🔗 最后补充一下 App 的 App Store 链接,现在这款App已经支持了 iOS、iPadOS、macOS 三端:App Store | 开发者的个人官网
频道:@NewlearnerChannel