惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Martin Fowler
Martin Fowler
V
Visual Studio Blog
有赞技术团队
有赞技术团队
T
Tailwind CSS Blog
B
Blog
I
InfoQ
博客园 - 三生石上(FineUI控件)
阮一峰的网络日志
阮一峰的网络日志
F
Fortinet All Blogs
H
Help Net Security
博客园 - Franky
宝玉的分享
宝玉的分享
博客园 - 司徒正美
C
Check Point Blog
G
Google Developers Blog
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
Jina AI
Jina AI
T
The Blog of Author Tim Ferriss
MongoDB | Blog
MongoDB | Blog
云风的 BLOG
云风的 BLOG
A
About on SuperTechFans
罗磊的独立博客
大猫的无限游戏
大猫的无限游戏
IT之家
IT之家

少数派

派早报:Google 发布 Fitbit Air 等 - 少数派 「新人报到」確認需求,再開始 - 少数派 从 SOLO 独立开发者社区,我看到了越来越多开发者开始做自己的产品 - 少数派 我怎么管理那些"不常做,但总会忘"的生活事项 - 少数派 人形机器人量产元年,数据才是具身智能的“生死线” - 少数派 BuhoLaunchpad 高度还原 Mac 启动台:开发历程与思考 - 少数派 五年陪伴依然不舍,DIY 换壳后让罗技 MX Master 3 继续服役 - 少数派 新玩意 240|少数派的编辑们最近买了啥? - 少数派 一日一技|为什么你应该关闭 iOS 的键盘声音 - 少数派 我做了个插件和 Skills,一键提取任何网站的设计规范 Design.md - 少数派 住在三四线城市的你,该开始录播客了 - 少数派 甘南秘境,大白高国 - 少数派 AI的审美:谁让把我变成川内倫子 - 少数派 返工怎能不烦恼,打工人片单总有一部是你的「嘴替」 - 少数派 为了让「上厕所」更健康,我做了一个小工具 - 少数派 AI + Skill,能够让生成的文章去除 AI 味吗? - 少数派 新玩意|韶音OpenDots ONE 耳夹式耳机 - 少数派 《美满》| 在每一个春天的晚上相爱(362) - 少数派 新玩意|优篮子 PS01 MagSnap 磁吸支架 - 少数派 自我整合手记 | 我开始早睡了:用稳定规则,为自由托底 - 少数派 用龙虾(OpenClaw)两个多月,我最深的12个体会 - 少数派 听歌时间到,12 张你可能错过的 2025 华语乐坛好专辑 - 少数派 承诺能追吗 - 少数派 macOS 26启动台没了? 我做了个不一样的App启动器 - Keboard - 少数派 《四海为家的人》| INTJ对话INTJ(361) - 少数派 你发过的那些黑历史,是时候一次清干净了 - 少数派 新玩意:安安静静玩,越玩越专注:计客密码机 - 少数派 iPad 用户首次体验 Android 平板:vivo Pad6 Pro - 少数派 数据逻辑强 - 少数派 极北行+ | 一路向北,探访日本至北之地 | 001 - 少数派
作为设计师 + 开发者,这是我最想推荐的一个网站 - 少数派
2021-02-10 · via 少数派

Apple Developer 这个网站是我最想推荐给设计师和开发者的网站之一,发现它之后,我获得了很多想要学习但不知道哪里有的内容,和高质量的设计资源/素材,更可喜的是,这些高质量内容完全是免费的

我简要地描述一下它为我带来了什么 —— 如果你也对如下内容感兴趣,那它很可能也可以帮到你。

设计资源

  • 高分辨率的"套壳"模型,可以套在截图上让 App 的截图更好看。
  • 在 App 设计中可使用的 2000 多个图标资源。
  • iOS 和 macOS 的 "UI拆解" 供界面设计与原型设计使用。

教学内容

  • 交互/体验设计理念与教学。
  • 西文字体设计知识。
  • 如何设计 App 的原型。
  • iOS 视觉和触控"流畅丝滑"的秘密。
  • 如何设计图标和符号。
  • iPad 光标背后的设计。

事实上,这只是 Apple Developer 网站的冰山一角。包括手把手引导你做出自己第一个 iOS 程序的交互式教程在内,Apple Developer 为设计师和开发者提供了非常理想的学习内容,而且都可以免费阅读/观看。

在接下来的篇幅,我将讲述如何获取这些资源/学习这些内容。

产品图像|屏幕快照"套壳"

这是我觉得需要的人最多的,并且基础普适,因此第一个讲它。

前几天去商场看到一家学习机构的 App 截图套壳,有明显"纯手动抠图"的痕迹,看起来十分廉价。不禁为这家机构的海报设计师不知道这个资源而感到可惜。

希望这篇文章能让更多人获得这些好的资源 —— 只需复制这个链接,在网页向下滚动,找到"产品图像",你就可以看到 iPhone,iPad,Apple Watch,MacBook 等产品的"套壳",款式型号应有尽有。

App Store Marketing

img

注:请遵守下载前网站显示的协议。

下载完毕后,用 Affinity Designer 或 Photoshop 等兼容 .psd 格式的软件打开就可以得到这些图像。将屏幕快照置于 "Mask" 图层下方,圆角和"刘海"会自动裁好。

你可以通过它,让截图"高级"起来。

img

我也试过一些更方便的手机端"套壳"软件,但是无论是对最新机型的更新速度,还是机身的真实质感,Apple Developer 的官方出品一直是我见过最好的。

在 App 设计中可使用的 2000 多个图标资源

SF Symbol 是 Apple 为开发者提供的图标资源。举个例子,我的 App 需要有一个 "搜索" 按钮的图标,我无需自己花时间设计,Apple 已经为我准备好了各种各样的图标,供我在 App 中使用。这极大的提升了 App 与系统 App 的统一性与美观性,并且降低了开发者的设计时间成本。

img

SF Symbol 的 下载链接

iOS & macOS 的 UI模版

无论设计什么类型的 App,我想如果有 Apple 设计的预置按钮、菜单栏等模版,都会让 App 的 UI 设计事半功倍。此外,Apple 提供的模版本身也是很好的 UI 设计学习素材。

img

你可以通过链接进入资源页面。

Screen Shot 2021-02-10 at 16.22.21.png

无论你常用 Sketch、Keynote,还是 Adobe Photoshop / XD,都能找到可用的资源(如果都持有的话,Sketch 的版本是我体验后感觉最好的)。

设计与开发视频

包括从设计原型、交互,到"好的设计习惯"和"核心理念",这些来自全球开发者大会(WWDC)的视频可谓无所不包。不仅全部高质免费,而且还有中文字幕(甚至一些视频有专门的中文配音)。

Screen Shot 2021-02-10 at 16.36.30.png

所有的视频和"课件"PDF 都可以下载到本地,我专门建立了几个文件夹以收藏和学习这些内容。

通过链接,你可以直接进入按类别索引视频的页面,选择你感兴趣的主题即可 —— 无论是感兴趣 AR/VR,还是机器学习,还是设计,都一定会有所收获。

Topic.png

需要注意的是,Apple Developer 因为每年 6 月会更新许多新的优质内容,一些老的内容会被下架,如果喜欢的某一个视频是来自3年前或更早的,建议下载下来保存。

在这里推荐一些我精选的高质量视频,并附简介。

iOS 视觉和触控"流畅丝滑"的秘密

Designing Fluid Interfaces.png

你是否好奇过为什么 iPhone 总是使用起来很"跟手"?你是否感受到 Android 手机在这两年流畅度也在进步,更加接近 iPhone 了?这背后的原因正是 "非线性动画"。这期视频用浅显易懂的方式,让你理解动效与视觉的设计,明白 iOS 给人"丝滑" 的秘密。

Apple 的核心设计原则

Essential Design Principles.png

这期视频讲述了一些核心设计原则,你会发现"原来 Apple 在数十年前就有设计原则了"、了解到什么是以人为本的 "Human Interface"。无论在哪个时代,学习这些原则,都会让设计师和开发者受益匪浅。

60秒原型设计

做一个 App 听起来很难,但是记录下关于某个 App 的灵感,也许只需 60 秒。这期视频用有趣生动的方式让你只需 60 秒,记录下自己的某个好主意,并且向实现它的方向前进。

60 Second Prototyping.png

UI 字体设计的细节

The details of UI typography.png

什么样的字体是更易读的?什么样的字体适合小屏幕?这期视频讲述了 UI 字体的设计细节,创作者学习它可以做出更好的 App 排版,使用者则可以明白某些文段读起来舒服的背后原因。

App 图标设计

App Icon Design.png

我喜欢把好看的 App 图标放在手机主屏幕的第一页,在遇到功能类似的 App 时,好看的图标设计可能是我选择某一款的原因。了解如何设计好的应用图标,可以让自己在许多地方受益。无论是设计学校社团 / 公众号的图标、工作室的 Logo,还是微信的头像,图标设计的知识都可以融会贯通。

iPad 光标之设计

Design for the iPadOS Pointer.png

iPadOS 更新光标支持的时候,Apple 称他们重新设计了有着数十年历史的光标。在 WWDC20,设计者讲述了 iPad OS 光标设计中的"变量精度"概念是如何将光标体验提升到新的维度。这期视频制作十分精良,并且很可能对于优秀的交互设计师有新的启发。

好设计的品质

The Qualities of Great Design.png

在这期视频,一些世界顶级的设计师讲述了他们对好设计之品质的理解。这些理念可用以对自己的作品进行自省,并启发自己提升对设计的理解。

除此之外,还有许多高质量的视频值得观看,你可以根据前文提供过的 https://developer.apple.com/videos/topics/ 自行寻找感兴趣的内容。

Swift UI 交互式教程

Swift UI.png

Swift UI,可以理解为将"界面设计"和"代码"一体化的一种新的 App 创作方式。这样讲述可能有些抽象或不太精确,不过根据 Swift UI 交互式教程的链接,你会逐步构建一个属于自己的 iOS App,这是一件相当有成就感的事情,并且学习像 Swift UI 这样面向未来的内容,是丰富自己技能或培养爱好的极佳选择。

我在知道 Apple Developer 一年后才逐渐发现它有如此多和好的资源与内容,从简单的屏幕快照"套壳",到设计资源和开发学习,我相信这篇文章中一定会有你需要的部分。

如果你觉得这篇文章还不错,不妨将这篇文章分享给更多人。

注:本篇文章所有和 Apple Developer 相关的图片版权均属于 Apple Inc.