8 min read

Vol 31 Reels正式对全球Facebook用户开放、如何管理维护UI图标库

Vol 31 Reels正式对全球Facebook用户开放、如何管理维护UI图标库
Photo by Harpal Singh / Unsplash

🌟焦点更新:

📖 Facebook

关注最近更新的朋友们都知道,从去年开始,Reels是Meta反制TikTok对自己用户侵蚀的产品,最早在2020年从instagram推出,陆陆续续适配到facebook。

经过一年多的迭代,从上周开始,正式在facebook上对全体用户开放,其目的是为了进一步和 TikTok 争夺短视频市场。扎克伯格表示:「到目前为止,Reels 已成为我们增长最快的内容形式,今天我们将向全球所有 Facebook 用户提供它」。

话虽如此,目前Reels产品体现的创新能力比较堪忧,绝大部分仍以对标TikTok为准,但依赖其强大的广告能力,也许能通过帮助创作者实实在在变现,来吸引更多的创作者。


这些产品还有新的迭代:

🐦 Twitter

  1. 正在内测「Report Center」。
  2. Twitter Blue的权益:热门文章,正在内测支持切换时间维度
  3. 正在内测支持1080P的视频上传。
  4. Space正在内测「为你推荐」模块。
  5. 继续内测「合作发帖」,一个帖子可以有两个发布者。

📷 Instagram

  1. 正在内测一个新贴纸:订阅,可以直接订阅作者的付费服务。
  2. 正在内测可以like直播中的评论。
  3. 正在内测可以评论广告post、stories和Reels视频。

🏠 Clubhouse

  1. 上线新功能支持在语音房间开启文字聊天
  2. 内测新的房间:social room,只允许群内的用户好友加入。

☎️ WhatsApp

  1. Mac版客户端正在内测reaction
  2. 移动端正在考虑调整摄像头的打开样式。

💃 TikTok

  1. 正在内测支持创建收藏夹
  2. 正在内测将评论数据和like数据分tab展示
  3. 正在内测查看自己视频时,评论可以自动滚动

🤔 What's more

  1. 抖音上线“发文警示”功能,对可能的负面内容,二次确认是否发送。
  2. tumblr推出去广告会员,4.99刀/月。
  3. Reddit正在内测新的发现页样式,对标Instagram。
  4. Netflix的Fast Laughs(剪辑后的喜剧片段),来到了TV客户端。
  5. 小宇宙播客新增语音评论
  6. QQ音乐推出超级会员,40元/月。
  7. 1password开始支持数字加密钱包

值得关注的新产品:

📖 Screen Sizes

这是它的2.0版本,快速查看所有苹果设备的屏幕尺寸以及核心参数,对app开发非常友好。

Screen Sizes
A complete guide for Apple displays

🎶 谜底黑胶

如同副标题,在桌面添加黑胶唱片小组件,目前仅支持Apple Music。

‎谜底黑胶 - 黑胶唱片小组件
‎谜底黑胶让你边聆听音乐边在手机桌面欣赏黑胶唱片效果,目前仅支持 Apple Music

如何管理维护UI图标库

图标是体现UI质感的重要组成之一,经常能在各设计平台看见设计师po各种图标练习飞机稿。在有限的方框内绘制一个平衡、克制又兼具美感与表现力的图标,是设计师的必修课。而图标库的维护管理同样重要,最近正好在翻新项目的图标库,记录一下重建过程中累积的经验(以下都是客户端场景)

本篇不涉及图标绘制技巧,主要是从图标库管理层面出发。

图标分类

我目前把图标分为三类管理:

  • 通用图标:将箭头、加号等使用频繁的图标抽象出来,基本可以无烦恼交叉用在各个地方。虽然大部分图标都是可以被抽象出来的,但我还是只选取了使用频繁的图标归类为通用。试想一下,这个面板要是容纳80%的APP 图标,以后查找检索起来非常头痛。(比如一个电源图标按钮,不同人认知不一样,既可能叫电源,也可能叫退出。如果要我现在就要穷尽脑力写下所有可能的备注,还是加在功能性图标里跟随功能出现吧。)
  • 功能性图标:像音乐播放器的播放,导航里的特别关心等有强场景指向的图标,更适合按场景区分。交叉使用在别的功能里要注意有没有隐藏的交互问题。(比如以前在使用收藏这个图标时,在动态详情页是一个线框星星和填充星星代表收藏和已收藏,而在操作菜单里,是线框星星和带划线的星星图标代表收藏和取消收藏,这就是跨语境使用图标面临的隐藏的问题之一。)
  • 定制图标:更加定制化的图标,比如分享链接里的logo等。不能交叉使用,也是APP里最少的图标。

关于命名和染色

在有了基础分类后,图标库开始重新命名。图标库是一个随着时间会变得越来越臃肿的东西,我希望命名的规则越简单越好,便于维护:

  • 通用文件夹:放通用图标
  • 功能命名文件夹:以大功能命名,里面有功能性和特殊图标

命名就可以简化为 ic_common_name.svg 和ic_featureName_name.svg(有时候需要再多一个文件夹)

在绘制图标库时,图标最好保持一致的颜色,比如#000000(特殊情况除外)。白色透明底图标在图片预览时不是很方便。移交给客户端时,他们可以根据设计稿为图标染色,这样也保证了图标调用时候规则的一致性。多和你们客户端工程师聊聊,关于提升交接效率他们也有很多想法。

图标的缩放和使用

不管是做新项目还是翻新升级,首先你需要对图标尺寸范围有个全局的估算/统计。比如在即刻APP里,使用最多的图标是24pt,然后是16pt。在音乐播放器和分享卡片里还会有更大尺寸的图标,比如32pt,44pt。

最终我决定以24pt,1.8pt描边作为绘制基础。向下缩放为20pt、16pt图标时,描边为1.5pt、1.2pt。向上缩放32pt、44pt图标时,描边为2.4pt、3.3pt。(与carbon design system的缩放倍数不同,因为通过比较后,16pt图标描边1pt略细,1.2pt刚好。并且24pt的图标1.8pt的描边非常接近线上目前的效果,同时我也希望24pt图标能够更细一点。虽然这样使得所有图标都不是完美对齐像素,但这能保证视觉重量上效果最佳,同时只需要导出一个图标)

图标的使用经常伴随文字出现,中文场景下,14pt的文字与16pt的图标搭配使用更加平衡。

当然,也可以像carbon design system里一样,将icon size、stroke width、padding、live area、Corner radius、type sizes做成表格更加直观。

carbon design system

最后附上两篇关于图标绘制技巧的传送门:

https://www.ibm.com/design/language/iconography/ui-icons/usage

https://ant.design/docs/spec/icon-cn


友情链接

  • 地心引力:关注效率工具与生活方式的周刊,一起脱离重力束缚。
  • 在诗外:Mostly关于如何成为更好的人类,关注自我成长、文化和科技。汝果欲学诗,功夫在诗外。