给iOS应用UI设计师和开发者一点建议【Icon】

62 阅读2分钟

写在前面:本文关于iOS应用icon方面的内容, Swift 和 SwiftUI。使用Mac电脑的设计师和开发者才能体验该建议的精妙之处。当然如果你对应用的体积不关心,或者对UI设计师和开发者之间的协作也不关心,那么看到这里就划走吧。 我的目的是为了快,好用,还有可以形成模版方便推广。设计师可以快速出图,开发者可以快速用图,那种高度自定义的背景图和大图不在本次讨论范围,老老实实切图导入即可。

官网和下载链接

如何在你的应用中使用

TO 开发者

sf-symbols都出来这么多年了,5359多个图标,涉及不同行业分类。

  • 单色
  • 多色
  • 设置背景色
  • 前景色
  • 动画
  • 自定义符号集合
  • 能看到每个图标支持的版本情况

截屏2024-06-28 11.11.04.png

最关键的是都是矢量图,系统库自带,可以预览。对于常规的APP来说,基本满足,然后应用体积能缩小1/3。

这里肯定有小伙伴会说,那么其他端怎么办,比如安卓或者小程序,那我只能说,他们还是按照老的路子来。我的这个建议是需要设计师有一定的追求和配合的。

使用示例

let imgView = UIImageView(image: UIImage(systemName: "pencil.tip.crop.circle.fill"))

截屏2024-06-28 11.20.54.png

上面这两个示例是代码引用图片资源和SwiftUI引用图片, 直接引用拖拽的 可自行搜索#imageLiteral

截屏2024-06-28 13.55.32.png

下面这个视频是直接在代码中拖入(系统字符和Assets中的图标都是一样的操作)

总体来说,对开发者来说,用起来还是很爽的。

TO 设计师

使用矢量图已如囊中取物,那么怎么快速的利用一套可高度自定义的模版呢。那就是SF Symbol 可以添加自定义符号集合

首先在mac中下载这个应用,然后高速开发你的设计稿中用到的那些图片的名称,比如Sketch 或者蓝湖的交付文件中,对icon图层的命名就可以写

pencil.tip.crop.circle.fill

在有这个想法之前,和2个设计师沟通过,但是确有截然相反的结果。所以这只是我个人的想法,隔行如隔山,为了保命,🐶护体。 欢迎设计师沟通来帮助我完善这个建议。目的是为了快,好用,还有可以形成模版方便推广