Newlearnerの自留地
56.4K subscribers
11.8K photos
30 videos
63 files
8.92K 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
#Web #Design

👩🏻 Transhumans:80 年代科幻、朋克风格的黑白人物插画集

🔗Web | Gumroad

😎 如果你看过《赛博朋克 2077》的动画,那么一定对这些插画不陌生。Transhumans 中这些带着头盔、机械装置的酷男酷女,正是 80 年代科幻、漫画风格的一种缩影

🥳 插画集作者 Pablo Stanley 表示,所有的插画都将开源,以 CC0 许可提供给大家免费使用。他还坚信,借助于技术我们终将会克服当前的身体和精神限制,从而征服死亡,成为「Transhumans」

🧑‍💻 无论你是否认同 Pablo Stanley 的哲学信仰,这套黑白人物插画都十分精美,且免费使用。你可以用它制作许多酷酷的封面,也可以用于自己的文章中,从而感受作者内心的设计激情和对上个世纪朋克摇滚精神的致敬

📘 关联阅读:顔アイコンジェネレーターZ - 在线制作社交平台头像及同类软件

频道:@NewlearnerChannel
Please open Telegram to view this post
VIEW IN TELEGRAM
#Web #Tools #Design

🔬 Scan of the Month:扫描一个新世界

🔗Web

👀 很多朋友可能在各种纪录片中看到了显微镜下面的微观世界,但你知道我们平时熟悉的物体在 X 光 / CT 照射后的图像是什么样子吗?Scan of the Month 就是这样一个帮你打开新世界的网站

👏 本网站由 Lumafield 提供支持,前者是一家由工程师团队组成的公司,他们热衷于解决问题、探索世界,但对于当前的工具感到失望。从 Lego 积木开始,Lumafield 通过 X 光和 CT 扫描了许多常见物品

👍 这些物品涵盖电子产品(AirPods、iPod、相机、Game Boy 等)、生活物品(咖啡机、剃须刀、食品包装等)、玩具、3D 打印等多个品类。对于每个物品,网站都借助扫描画面,为我们层层解析物体构造和用途,可以说是一个非常好的科普网站

😊 网站未来还将持续更新,你可以通过邮件订阅接受最新消息

频道:@NewlearnerChannel
Please open Telegram to view this post
VIEW IN TELEGRAM
#Design #Newsletter

🧑‍🎨 Off-Grid · 分享有趣设计背后的故事

网站

常常好奇一些令人眼前一亮的设计作品是如何创作出来的,通过 Off-Gird 我们可以得到想要的答案

🎨 Off-Grid 有什么

- 设计师亲身分享作品的灵感与创作过程
- 创作者和社区成员的在线交流活动
- 分享优秀设计作品的 Newsletter
- 成为付费会员,接触更多优秀设计师与作品

📖 我感兴趣的精彩故事

🪙 Innovating Web3: Algo's Automated Social Media Newsroom」

Algo 团队搭建了一个 AI Newsroom,通过 AI 将 Web3 的每日数据与新闻可视化,自动化创作成短视频分享

⌨️ How Work Louder is addressing the problem of overstimulation in the modern work environment」

Work Louder 团队设计了一把有趣的键盘,键盘上自带番茄工作法的计时器,帮助 ADHD 用户解决容易分心的问题

🐦 个人感触

我不是设计师,但我看到 Off-Grid 的第一感觉是:「好看」,「好玩」🤣。确实 Off-Grid 目前分享的设计作品大部分以创新、抓眼、有趣来吸引人,接触这些新鲜玩意能让我看到一个更广阔和更美好的世界,给我的日常工作生活带来新鲜感和趣味

Product Hunt 上有人分享他自己想不出如何做设计的时候就去逛 Off-Grid,我觉得大家感到生活无趣的生活也可以去逛逛,看看别人有趣的故事,调节一下自己的心情~

频道:@NewlearnerChannel
#Design #Web #GitHub情报

⭐️ Yesicon:精选全球高品质、开源、免费的矢量图标库

🔗Web

👉 Features

- 包含 18万+ 个高品质的矢量图标
- 收录各开源图标项目,标注原项目地址和开源协议
- 好用的业内搜索和分类,无需跳转到外链
- 一些图标自定义功能
- 可复制、下载为 SVG / PNG 等格式
- 提供主流 Web 前端框架及 CSS 框架代码

😍 Yesicon 可能是我近期最喜欢的聚合网站,作为面向设计师的网站,它本身的 UI 就让人心旷神怡。作者费心收集了数百个开源图标项目,工作量相当巨大

👏 无需跳转外链,网页中已经收集、分类、检索了所有开源项目图标,你可以直接查看、下载它们。Yesicon 还为网页设计师们提供主流 Web 前端框架及 CSS 框架代码,可以说是网页前端的福音了

📘 关联阅读:

1️⃣ Iconbuddy:数量庞大的在线图标库
2️⃣ 盘点一些在线 Icons 图标项目

频道:@NewlearnerChannel
Please open Telegram to view this post
VIEW IN TELEGRAM
#Blog #APPLE #Design

🍎 The secret formula for Apple's rounded corners

🔗Blog

老朋友 Arun Venkatesan 近期又更新了一些有趣的文章,其中一篇是讲述「Apple 和圆角设计」的,分享给大家

📝 文章概述

- 果处是圆角
- 与人亲密,设计愈圆
- 定义并测量圆角
- 果中的圆角计算结果

不可否认的是,Apple 和「圆角」有着许多年的不解之缘。在今天,无论在 iPhone、Mac、Apple Watch、iPad,甚至是 Apple Store,都能看到圆角设计的存在

文章从心理学和 Naoto Fukasawa 设计无印良品的哲学出发,解释了 Apple 为什么要设计成矩形圆角:让人更平静愉悦、让物品离人更近、让使用体验更好

Arun Venkatesan 还设计了一个圆度计算方法:圆度即使用百分比呈现圆弧所在圆的直径除以圆弧所在矩形的较短边得到的值。通过这种办法,AirPods 获得了第一名,Apple Watch、iPhone 紧随其后,而桌面设备均靠后。这基本能够反映出「与人亲密,设计愈圆」这一设计哲学

🧑‍💻 看完之后还是很开心,有人用这样一套理论和计算,解释了为什么 Apple 的某些设计因素让人很「愉悦舒适」。这也是我越来越关注设计内容的原因

📘 关联阅读:What does “Shot on iPhone” mean anymore?

频道:@NewlearnerChannel
Please open Telegram to view this post
VIEW IN TELEGRAM