Newlearnerの自留地
56.2K subscribers
11.7K photos
30 videos
63 files
8.86K links
🆕 不定期推送 IT 相关资讯,欢迎关注!

👥 博客群&投稿群&交流群: @NewlearnerGroup

📩 投稿请私信 @newlearner_pm_bot

🔍 频道内容关键词索引 Bot: @newlearner_search_bot

* 未经授权或标注来源,不得转载本频道内容
Download Telegram
#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
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
#Web #Design

🏠 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 Slides2019 年来 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
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
#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
#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
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
#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