8 min read

Vol 26 来自12个产品的35条更新、为什么开发实现的字体比设计稿小?

Vol 26 来自12个产品的35条更新、为什么开发实现的字体比设计稿小?
Photo by Alexander Andrews / Unsplash

这些产品有新的迭代:

💡
为了方便每一条更新和配图对应,从本期开始会在配图上标注与内容相同的序号,如果有看不清楚的,欢迎到我们网站上查看大图。

📧微信

微信在周末更新了8.0.17版本,其中带来了很多更新和一些内测:

  1. 长语音消息支持断点后继续播放。
  2. 视频号支持悬浮,悬浮后只展示头像和暂停按钮。
  3. 可设置在观看视频号内容时接收新消息提醒,默认状态为打开。
  4. 直播的分享菜单增加投屏。
  5. 小程序首页右上角增加个人信息授权管理。
  6. 看一看中增加「视频」tab。
  7. 群管理中增加仅允许群主和管理员修改群名。
  8. 对话窗口中点击朋友的状态将全屏展示。
  9. 消息发送菜单中增加了音乐类型。
  10. 朋友圈在内测针对刷屏和广告内容的折叠。
  11. 朋友的状态列表支持上下滑动。

☎️WhatsApp

  1. 推出global voice message player,当你在当前聊天 窗口收听语音消息时,退出窗口,将在聊天列表顶部展示播放控件。
  2. 自消息支持reaction之后,设置中增加是否接收Reaction的通知消息。
  3. UWP版本更新了许多UI,主要在圆角和色调上。

📷Instagram

  1. 正在内测stories的上下滑动浏览方式,类似的内测在去年2月也尝试过,不知道这次的结果会如何。
  2. Reels将支持从你的视频中导入音频素材
  3. 在用户的stories数据分析里,正在内测展示你曾提到的人

🐦Twitter

  1. Space录制功能正式对全体host用户开放。
  2. 正在内测主页顶部增加一个搜索框或者搜索icon,根据不同的灰度人群。
  3. 对Tweet的双击点赞持续内测中,现在增加了在手势设置的开关。
  4. NFT关联功能进一步内测,现在已经有了介绍页了。
  5. 正在内测可以在上传的视频内容中tag朋友
  6. 正在内测两款针对Twitter Blue的新限定应用图标:AustraliaDay 和 XGamesAspen

👀微博

  1. 微博生成图片分享时增加支持长图和拼图模式。
  2. 微博网页版上线无障碍模式

📖facebook

  1. 上线了一个隐私中心页面:Privacy Center,用来介绍Facebook将如何保护用户的隐私和技术。
  2. 开始在信息流中内测推广自家的newsletter服务Bulletin的创作者

🌍Google

  1. 正在Android 13上测试12的取色引擎monet的更多取色风格,以帮助系统可以根据壁纸的颜色自动适配主题。
  2. 正在Android 13测试锁屏界面的二维码扫描选项。
  3. 同时还在内测媒体转移播放的功能,当设备靠近另一个设备时,可接力播放音频。

What‘s more

  1. 微光应用上线K歌模式。
  2. 适配M1的Dropbox版本开启内测。
  3. Snapchat发布新版本,带来了快速回复聊天、bitmoji回复、投票、通话功能等更新。
  4. Spotify的clubhouse功能:greenhouse,正在合到应用的主分支。
  5. 苹果收购的听歌识曲服务Shazam推出Chrome浏览器扩展。

值得关注的新产品:

📮mailet

生成一个限时的邮箱地址,用来接收临时的验证而避免后续打扰,即将上线。

Mailet - Create Temporary Emails For Free
Mailet provides you with temporary email addresses that expire after one hour. You can sign up to websites, social media, and read the incoming emails from our UI or API

为什么开发实现的字体比设计稿小?

在设计还原过程中,我们会碰见如下的无效对话:

设计师:为什么XX手机上字号看上去比设计稿小啊?

开发:实现没问题,就是这样的

设计师:哪样的?

开发:手机分辨率问题

设计师:好吧,心里OS:感觉上是硬件层面的问题,想必很难适配吧,不好意思再问了。

所以大家心里模糊地知道,分辨率越高的手机,UI元素都要显得更小。

真的是这样的吗?不同手机上字号显示参差不齐的原因是什么,以及这种情况可以被解决吗?

在VOL10期讨论iPhone 13的时候,就提到屏幕渲染的问题。所以还是拿iPhone来举例:

设计师小娜在设计软件figma里用375*812(iPhone13 mini)的尺寸做了一张设计稿,这就是平常大家口中所谓的一倍图。这张图里的单位应该理解为pt,也就是开发层使用的逻辑单位point。

设计稿做好以后给到iOS开发小王,在代码里写好UI后,软件将这张375*812pt的画布在iPhone 13mini机型渲染成3倍的理想像素图,也就是1170*2532px。

这张理想像素图需要呈现到物理实体,也就是我们的手机上,还要考虑到一个重要的因素PPI(pixels per inch)。也是造成差异的罪魁祸首,设计师所提到的这个字号看上去小,比较的是物理尺寸,也就是现实中给眼睛带来的感受。这张完美的理想像素图落在不同PPI的手机上效果就是不一样。比如人家一厘米的格子里塞100个像素,你只能塞50个像素,那你就需要使用到两厘米的物理单位去实现100像素虚拟单位,所以字体自然视觉上就会显得更大。(且不考虑到有些机型还是非点对点)

PPI越高的机型,字体(UI元素)就一定更大?

iPhone13比iPhone SE 2机型更大,PPI更高,但是字体也更大。做一个简单的数学题:

已知iPhone 13: scale factor=3,PPI=460,

iPhone SE 2nd gen: scale factor=2,PPI=326。

数据来源:iOS resolution

那么一个16pt宽的字体,在两个手机上的物理尺寸是多少?(也就是人肉眼感知的大小)

iPhone 13是:16*3/460=0.104英寸(0.26厘米)

iPhone SE 2nd gen是:16*2/326=0.098英寸(0.25厘米)

下面是一个不严谨的拍照对比,左为iPhone SE 2,右为iPhone 13

答案显而易见,所以字体呈现到手机屏幕上的效果还与scale factor有关。

如何去适配?

由于市面主流手机分辨率千差万别,要做到绝对统一是不太现实,投入产出比很低的。但如果某个机型效果实在太差,工程师可以先读取到机型的PPI(Android工程师小布可以直接读取,但是iOS工程师小王不能直接获取,还需要通过更曲折的手段去拿),反推到开发层,给设计师小娜设计稿的元素乘以倍率(大多数情况都是实现效果偏小)。

番外

小王托腮:之前iOS有道面试题就是如何在手机上画一个1厘米的正方形。


友情链接

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