VOL 20 手机QQ内测超级QQ秀、设计组件入门（1） —— 导航栏
这些产品有新的迭代：
自上次QQ秀的下架风波，最后证实桌面版QQ秀只是被折叠起来了，现在看起来这个折叠是为了推出第二版QQ秀，目前叫「超级QQ秀」。
据消息，当前正在进行的是删档内测，仅限手Q入口，人物从2D升级到了3D。以下是一些内测图。
不得不说，从视觉上看，个人感觉拉满了，盲测了几个同事，都表示很喜欢这个风格，很期待范围更大的测试和上线。
📧微信
微信公众号编辑端大改版：
- 公众号文章除了群发，还能单独选择「发布」，发布后不会群发给订阅者，但能生成一条永久链接，用于主动分享、菜单栏等地方，接受数据统计，同时这个发布不受次数限制。
- 原有的图文素材库升级为草稿箱：草稿即是未发表的文章，发布后自动转移到历史图文素材中。
- 在用户端，公众号文章默默展示了文章的具体时间，精确到分钟，据说是因为监管。
💃抖音
- Twitter正在准备新年款的桌面icon（仅限会员可用）。
- Twitter将开始禁止违背他人意愿发布的“私人”照片，当然公众人物不含在内。
- Twitter正在内测双击内容点赞。
- Super Follower正式登陆Android平台。
- Twitter正在内测在未关注的用户头像上增加+号，点击可以迅速关注。
🎵Spotify
Spotify正在小范围开放修改App内语言；
Spotify上周发布了2021年终总结，用户可以查看自己的以下音乐数据：
- Your Top Songs 2021
- Your Artists Revealed
- Top Tracks & Artists of 2021
- Best New Podcasts of 2021
- Best Episodes of 2021
- The Best of 2021
- A Look Back at 2021
其中个人感觉最打动人的事在回顾中，穿插了歌手的感谢视频，非常温暖和用心。
🍎Apple
苹果在上周公布了两个榜单，值得关注的：
- App Store年度榜单，相信大家都知道了。
- 最多下载的app和游戏榜单，这个榜单反映了一些问题，可惜这个只有美区的。
🤖️Reddit
Reddit在上周发布了一个大版本，主要关注「real-time」互动，加强实时更新：
- Vote、评论动画：作为社区最具特色的vote功能，新增了可爱的动画；
- 输入提示（Typing Indicators）：类似于聊天窗口常见的「对方正在输入」，reddit的评论框也会有相关提示；
- 正在阅读的人（Reading Indicators）：提示除了你，还有谁正在阅读当前post；
- 新评论提示（New Comment Pill）：用户浏览时的新评论及时通知。
☎️WhatsApp
- WhatsApp正在内测Status的undo功能，用户发布后，可以在数秒内撤回。
- WhatsApp继续内测消息的Reaction功能，对比上次，这次正增加了可以按照表情来查看用户列表的入口。
- WhatsApp的语音消息支持查看音频波纹。
🤔What‘s more
- 豆瓣全部小组回复功能暂停，预计12月17日恢复。
- facebook继续内测语音评论，对比上一阶段提供了变音选项。
- ins在内测类似TikTok的视频评论。
- Messenger正在内测AA收款，预计下周发布。
- B站开启8K视频投稿，但目前仅限Safari和TV端播放。
- Google Photo上线了「相册锁🔒」，用户可以创建一个带密码的私密相册。此前功能仅对pixel用户开放，现在向更多用户支持。
- Android下个月的更新将带来权限变化：当一款App长期闲置时，系统将自动清除为该App授予的所有权限，直到用户重新使用。
值得关注的新产品：
🤖️多克斯doX
腾讯最新推出的社交App，内容页布局和Instagram比较相似，用户可以拍摄有趣短视频和朋友分享，可惜目前仅限邀请加入。
📮竹白
@李奇 团队出品的newsletter发布平台，本土化创新地增加了微信内的订阅体系，上周刚对外发布，整体完成度很高。
✏️Thorn
一款写作工具，如同介绍，无比丝滑。
设计组件入门（1） —— 导航栏
前言
工作中时常会有PM开发同事来问这个控件叫什么名字，除了在一些大平台的设计规范里能看见控件的描述，网上也似乎没有一个特别详尽的整理版本。这次在网上看见一位设计师做了很好的总结。
Roman是Setproduct.com的创始人，为设计师、开发者和组织机构提供非常高质量的figma设计模板。而同时他也是一名有着20多年丰富设计经验的设计师，今年他在为他的电子书《Designing Components》做准备，这本书将从最基础的角度归纳UI设计里的重要角色——组件，目的也是为互联网从业者带来更全面的控件认知理解和创意激发。我阅读了一下他发在网上的前三章，确实写的很清晰，推荐给大家。本文是第一章关于导航栏的介绍，原文有很多配图，但为了篇幅省略了不少配图，只做一个框架翻译。建议最后再去原文《App Bar UI design tips》看一看，他电子书发布的时候我也会在邮件里提一下。
什么是APP Bar？
在平常工作中，大家可能经常能听见导航栏 Navigation Bars，底部栏 Tab Bars（其实就是置底的导航栏）等等名词（统称为应用栏 APP Bar）。简单来说它们就是UI里为当前页面提供最高优先级操作的控件，经常是长条状的，和酒吧里的吧台一样。一般来说，应用栏吸附在屏幕最上面，以给用户提供最便捷的访问途径。
APP Bar内容组成
内容组成：
- 左控制区
- 中间区域
- 右控制区
主题样式：
- 扁平 Flat
- 悬浮 Raised
- 着色 Shaded
- 反色 Inverted
- 透明 Transparent
状态变化：
- 选中态
- 吸附底部
- 滚动时投影
- 背景模糊
- 自适应时隐藏控件
内容组成
左边区域：
- 头像
- 按钮
- 文本
- 图标
行为上可以是：
- 返回
- 关闭
- 菜单
- 其它自定义内容（设置，账户等等）
而在桌面客户端的设计上，由于左区域空间比手机大很多，你更加可以组合一系列视觉元素以提供更多的功能，例如logo，搜索，下拉框，图标，按钮等等。
中间区域：
- 标题（副标题）
- 用户头像（也许还会有用户名）
- Logo
- 分段控件
- 搜索框
- 导航组件（点击区、按钮组、面包屑等）
右边区域：
- 用户头像
- 图标（用作按钮）
- 按钮 （唤起操作）
- 搜索框 （一般是桌面客户端）
- 下拉框 （账户、语言切换）
图标
用图标来当做按钮可以呈现更多的操作（但含义不明的按钮可能会造成困惑和误解），尽可能保证这里是一些常用的操作，且不要使用不符合大众认知的图形符号。而当操作过多的时候，需要一个更多按钮来折叠一些不常用的操作。
按钮
形状上会有方形，圆形和大圆角之分。风格上有填充，悬浮，描边（幽灵按钮）和扁平等等，由按钮的重要性决定它的形态。
样式
- 扁平 —— 简约轻量，通常与背景融合，不带分割线
- 悬浮 —— 悬浮在背景之上，会留下投影
- 着色 —— 通常会带有一个8-12%透明度的固色背景，与品牌色互相呼应
- 反色 —— 在深色模式中，你可能需要高亮颜色对比以便区分header。所以导航部分往往会反转颜色，以更加醒目。
- 透明 —— 在图片背景上非常常见，为了整体的美观
用户体验
显示选中状态 ：导航的信息并非一成不变，而是可以给用户提供更丰富的信息和及时反馈。比如在选择照片的页面，可以在导航上显示用户已经选择了几张图片。
吸附底部：在手机的应用设计里，能看见底部导航栏的广泛应用，这样用户手指能够快捷地访问它们。
甚至，为了和APP保持体验一致，你能够在桌面应用设计里也将导航维持在底部区域。有一些成功的案例：
滚动时投影：在扁平风格的导航里非常常见这种模仿抬起的交互，更加真实和符合逻辑。
背景模糊：一点点模糊的效果也能让界面看上去更精致
自适应时隐藏操作：在从电脑端移植到手机APP的时候，由于空间变得更小，有时候你必须折叠一些操作
相关链接
- Navbar component (React)
- Application bar (Angular)
- iOS App Bars (Figma)
- MobileX App Bars (Figma)