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

推荐订阅源

Cloudbric
Cloudbric
有赞技术团队
有赞技术团队
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
T
Threat Research - Cisco Blogs
L
LangChain Blog
Simon Willison's Weblog
Simon Willison's Weblog
Project Zero
Project Zero
Latest news
Latest news
S
Schneier on Security
Cisco Talos Blog
Cisco Talos Blog
MyScale Blog
MyScale Blog
C
Check Point Blog
IT之家
IT之家
P
Palo Alto Networks Blog
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
C
CERT Recently Published Vulnerability Notes
Scott Helme
Scott Helme
The Hacker News
The Hacker News
C
CXSECURITY Database RSS Feed - CXSecurity.com
G
Google Developers Blog
T
Tor Project blog
T
Threatpost
D
DataBreaches.Net
博客园 - 【当耐特】
酷 壳 – CoolShell
酷 壳 – CoolShell
T
Troy Hunt's Blog
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
Vercel News
Vercel News
云风的 BLOG
云风的 BLOG
NISL@THU
NISL@THU
P
Privacy & Cybersecurity Law Blog
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
C
Cisco Blogs
博客园_首页
S
Securelist
T
The Exploit Database - CXSecurity.com
Last Week in AI
Last Week in AI
量子位
U
Unit 42
Know Your Adversary
Know Your Adversary
Hugging Face - Blog
Hugging Face - Blog
S
Security Affairs
Google Online Security Blog
Google Online Security Blog
Hacker News: Ask HN
Hacker News: Ask HN
Webroot Blog
Webroot Blog
S
SegmentFault 最新的问题
Engineering at Meta
Engineering at Meta
N
News and Events Feed by Topic
P
Proofpoint News Feed
阮一峰的网络日志
阮一峰的网络日志

少数派

派早报: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 - 少数派 万字剖析:千问App深度体验报告(2026) - 少数派 在2026年,如何真正防止别人抄袭你的作品 - 少数派 怎么用 50 块搭个 AI 语音助手?我踩了 3 天坑 - 少数派 YeeroAI:让 AI 对话真正成为知识管理的一部分 - 少数派 爬泰山 - 少数派 「旅图显影」 App 更新:这次,我们补上了一点「手感」 - 少数派 假期出门太折磨?我的 23 条经验帮你规划惬意旅行 - 少数派 工作流会变吗 - 少数派 Claude Opus 4.6 怎么用最省钱?我测了 5 种方案 - 少数派 GPT Image 2 让图文并茂不再稀罕 - 少数派 用户侧出发——什么是AI,我要不要学习? - 少数派 找片、转存、整理、播放一条龙!让你的付费网盘值回票价 - 少数派 欢迎试用!日课一问2.0插件 - 少数派 自己做的MDeditor,原本想购买 Typora 试了两次支付不成功,干脆自己做一个 - 少数派 vibe coding了一个 3MB 的小工具,让 ~/Downloads 彻底告别混乱 - 少数派 因为受不了 Mac 的风扇策略,我做了一个风扇控制工具 - 少数派 别只怪模型 - 少数派 Warp 终端的 AI 功能怎么用?我测了一周的体验 - 少数派 AI 写代码老是出 bug?这 5 个配置我后悔没早知道 - 少数派 「新玩意」苹果出相机可能就这样:Sigma BF + 45mm F2.8 DG Contemporary - 少数派 一个面向2030年的AI操作系统是什么样子的:浅谈cola这款有灵魂的Agent - 少数派 别只看写代码 - 少数派 每天解决10个问题,还是一口气攻坚解决400个? - 少数派 AI 交易机器人怎么搭?我用 Claude 跑了一周实盘 - 少数派 Maptoposter Online:把你爱的城市画成艺术海报 - 少数派 Function Calling 怎么用?我测了 3 个模型发现差距真大 - 少数派 Legend Talk:我做了个 AI 圆桌,让 160 位思想家围着你的问题转 - 少数派 如何找到自己的蓝方?在小县城寻找压力测试 - 少数派 语音输入与软件接口|2026年聊AI时,我们都聊些什么(上) - 少数派 混动已经卖爆,纯电又来补刀——钛7闪充版简直“不讲武德” - 少数派 本月玩什么|朋友收藏、识质存在、沙罗周期 - 少数派 为什么要每天坚持输出? - 少数派 Claude API 挂了好几个小时,你的项目有备用方案吗? - 少数派 Function Calling 没你想的复杂——我用它做了个有点用的工具 - 少数派 登录系统立即播放视频或者图片音乐的软件 - 少数派 我为什么创建 FlipHTML5 下载工具 - 少数派 残局没电?多品牌外设电量统一管理软件EasyBluetooth已支持RTSS游戏内显示以及AIDA64 - 少数派 前往通义路的路 - 少数派 太好看了,媲美Sun的个人导航页,NAS部署星云门户 - 少数派 乌黑嘴唇“一键检测”上线了 - 少数派 派早报:Claude AI 接入多个创意软件生态、FILCO 生产方接手品牌等 - 少数派 【更新】BearCLI、Claude 连接器与 MCP 服务器 - 少数派 记了上千条流水,还是看不懂财务?我做了一个让 AI 读懂账本的工作台 - 少数派 MINI R56 升级原厂 Sport 模式 - 少数派 新玩意 | 一棵柠檬树(仿真版) - 少数派 Momenta的“物理AI”野望,需迈过“含摩量”这道关 - 少数派 网页直接投屏控制手机!NAS一键部署PandaScrcpy,流畅丝滑可远程。 - 少数派 众测|邀你一同探索随身 AI 硬件入口 YoooClaw C·ONE - 少数派 2050大会:分享时间是真诚 参会记 - 少数派 iPad 赋能电影创作:国内首部宣纸手绘长片《燃比娃》的幕后故事 - 少数派 AI的审美:我用 8 个大模型给 100 张旅行照片打分 - 少数派 普通人如何破圈?去参加一个本地协会 - 少数派 把极空间的图标全换了,主题DIY全攻略打造你的专属NAS桌面 - 少数派 电子便签墙,帮你实现便签自由 - 少数派 我如何用三个 CLI 工具取代文档创建需求 - 少数派 原来真的有人可以玩一辈子 - 少数派 社区速递 139 | 派友热议三月买了啥、复古单反尼康 Df 体验 - 少数派 06 作品的赏析与评价 - 少数派 TDS REVIEW|索尼 WF-1000XM6 降噪真无线耳机体验 - 少数派 35.98万起售的第二代腾势D9,我看重的不是堆料,而是不凑合 - 少数派 鼠须管 Squirrel 皮肤配置指北 - 少数派 从watch ultra2换到redmi watch6 - 少数派 派早报:阿里巴巴发布视频生成模型 HappyHorse 1.0 等 - 少数派 别迷信1M - 少数派 家人们天塌了!网盘“大封杀”,多个渠道多条路,NAS部署PanHub - 少数派 AI与人勾心斗角!NAS一键部署AI狼人杀,假日休闲必备。 - 少数派 电商必备!Comfyui工作流批量生图插件,一次生成12张!支持Nano banana pro模型 - 少数派 Comfyui工作流配置Gpt-image-2模型教程,0.03/张 - 少数派 OpenClaw第三方APi怎么配置?可使用Gpt-image-2模型 - 少数派 会员社区话题精选 Ep. 103 - 少数派
设计自适应图标 - 少数派
2017-08-02 · via 少数派

译者注:

Android O 引入了名为「自适应图标」(adaptive icon)的全新应用图标格式。自适应图标可以统一应用图标形状,允许开发者使用新特效,进而使设备的使用体验更为连贯。本文将会阐述自适应图标的工作原理,还会介绍设计自适应图标的一些技巧。

想要了解自适应图标的来龙去脉,参见本系列第一篇文章:《理解 Android 的「自适应图标」》

作者:Nick Butcher

原文链接:Designing Adaptive Icons


基础

大小和形状

自适应图标大小为 108dp * 108dp,但使用遮罩后,最大尺寸为 72dp * 72dp。不同设备可以使用不同遮罩,但遮罩形状均须为凸多边形,且从遮罩中心到边缘的距离不得小于 33dp。

使用不同遮罩的效果如图

由于遮罩形状有最小尺寸,可以以遮罩中心为圆心,作一直径为 66dp 的圆,作为安全区域,以确保内容不会被裁掉。

圆角矩形遮罩内的安全区域

参考线(Keyline)

图标的参考线

形状参考线(keyline shape)是图标设计网格的基本构成,可以帮助你的应用图标与其他图标保持视觉比例统一。形状参考线包括:

  • 圆形,直径 52 dp 或 32 dp;
  • 正方形,44dp * 44dp,圆角半径 4dp;
  • 矩形,52dp * 36dp 或 36dp * 52dp,圆角半径4dp。

本文末附有模板。

图层

自适应图标一般包括前景层和背景层两个图层。二者大小均为 108dp * 108dp。背景层不透明度应为 100%,前景层可以设置其他不透明度。两个图层应以「前景层在上,背景层在下」的方式堆叠。

设计图标时,应将元素置于大于实际显示大小(即遮罩大小)的两个图层中;如此,便可以实现一些很有趣的视觉效果和动画。但实现什么样的效果、何时实现,则要由设备制造商和启动器的开发者来决定。比如说,可以实现视差效果(如图左),也可以分别转换、缩放图层,再应用遮罩,以实现弹跳效果(如图右)。

原本大小为 108dp * 108dp 的图标被遮罩裁切为 72dp * 72dp,每边余下的 18dp 空间可以放置只在动效中呈现的「额外」元素。

设计时的注意事项

创建自适应图标时,Material Design 设计指南中 创建产品图标 部分基本适用。具体来说,图标的元素构成,包括阴影和光泽(finish)都得以保留,但现在,元素可以放置在前景层或背景层,以营造不同效果。

自然,很多图标只需要把商标放在前景,用纯色做背景,就算完工了,效果也不错。这样一来,图标在设备上的显示效果也比较理想。但真正有意思的是,我们可以集思广益,共同发掘新格式中的限制,汇聚奇思妙想,让图标变得更有趣。下面是一些注意事项,以及一些可以开发的点子。

裁切

自适应图标是动态图标,所以你不知道图标会加上什么形状的遮罩。因此,务必将商标等最重要的元素置于安全区内,尽量远离遮罩边缘。

背景锚定

将一些应该出现在前景中的元素置于背景,可以使其动作独立出来。例如,下图计算器图标中,大多数元素都在前景,但绿色块上的等号则位于背景:

将元素置于不同图层上,强调图层结构

如此一来,便能营造一种奇妙的动感:你的视觉会多关注亮色块,而亮色块的移动小于前景元素,能给人以深度感。

把遮罩「遮罩」掉

将遮罩元素置于前景也能创造有趣的效果。试想几种制作 Google Play Store 图标的方式。首先,可以用最「显而易见」的方式,也就是将彩色三角形置于前景,再加上一个白色背景。

「标准」的「彩色前景 + 白色背景」

然而还有另一种方法,就是用彩色背景,和一个白色的三角形遮罩作前景,可以得到相同的静态效果:

另一种方法,彩色背景 + 遮罩前景

这种设计,可以让透过遮罩「露出来」的彩色部分独立于遮罩运动,便可以在运动、缩放时,显示不同的部分。

左为常规构成,右为遮罩作前景

光与影

将光效与阴影置于不同图层,可以产生很奇妙的效果。比方说,可以给前景元素加上长阴影,在遮罩范围内移动时就会更具动感。同样地,光效也可以加到前景,而不是嵌在背景中;例如,可以在前景加一层「光泽」,模拟光源,移动时,因为其位于背景层之上,移动速度也有区别。


示例:前景阴影和(非常浮夸的)光源打在背景层上

注意,这样营造的效果,必须要合乎情理,避免出现阴影与前景元素脱节,或被背景元素遮挡的情况。还要记住,很多图标可能会同时出现,所以,上述光效要谨慎使用,以 Material Design 设计指南 为纲。

藏在后面

你可以将元素置于背景层,使其静止时完全被前景遮挡,仅在运动时显现。

隐藏元素,仅在运动时显现

资源和工具

你可以访问 此链接 ,下载我提供的 Sketch 文件,把它作为模板来创建自适应图标,其中包括图标网格、形状参考线和安全区域。自适应图标以符号(symbol)的形式存在,改变主元素的同时,会更新其他副本,以便预览使用不同遮罩时图标的样式。

如果你使用 Adobe Illustrator,请访问 此链接 下载模板。

我还找到了一些资源,有兴趣的可以看看:

Adaptive Icon Playground

开发自适应图标的过程中,我发现,很多设计细节都是通过观察前景元素和背景元素如何互动、如何运动而产生的。但这些因素还不能确定;我们还要看设备制造商和启动器开发者如何配置、应用自适应图标。为方便大家先做一些了解,我制作了一个测试应用,可以帮助大家在制作图标的同时,心里对图标可能的显示方式有个底:

可以测试不同的遮罩和动效在你的图标上是什么效果

这款应用可以显示设备上安装的所有使用自适应图标的应用。左右划动可以应用视差效果,点按图标则可以应用缩放效果。你可以配置效果强度,还能改变遮罩样式。通过这个工具,你就可以预览你的图标在不同设备上是如何显示、如何运动的。

你可以 在此下载 APK 文件 ,或 在此下载源码 。

自适应,更进一步

希望本文能够帮你了解如何设计自适应图标,并对你有所启发。作为一名用户,我非常期待自己设备上的应用体验更为连贯。但更令我激动的是,我们齐心协力,一定可以发挥无限创意。

如果你是一名开发者,想要制作自适应图标,敬请期待本系列文章第三篇:《应用自适应图标》。