Vol 22 14个产品的42+项更新、设计组件入门（3） —— 折叠菜单
这些产品有新的迭代：
🍎Apple
在上周，苹果发布了多平台的正式版系统更新，这里是iOS的重点更新：
- 新增了遗产联系人：指定特定用户作为你的iCloud遗产联系人，属于下架后重新恢复的功能。
- 儿童通信安全：这是一个此前备受争议的功能，争议点参考这里。
- 通知摘要的样式更新。
- 隐私报告：官方的App隐私调用报告上线。
- 健康中的ECG心电图上线：配合WatchOS8.3和S4之后的设备使用（SE除外）。
- Apple Music的声控服务上线：这是一个介于不订阅和常规订阅的中间方案，面向用HomePod等语音控制设备但不想开通常规订阅的用户，价格仅5元/月。
- Apple Music歌单支持搜索。
- 股市：新增查看股票代码所用货币。
- 关于本机中新增维修记录的查询。
- iPhone 13系列拍照时新增微距开关。
还有很对细节改动，这里有两篇完整参考这里和这里
除了系统更新，还有以下更新：
- Apple Pay宁波公交卡上线。
- 苹果官方的产品边框图像更新，且转移到了Apple Design Resource页面。
- 云上贵州正在灰度新域名icloud.com.cn，被灰度到的用户可以直接登录。
📱微信
ins有3点小更新：
- 年终回顾
- 视频回复（以视频形式评论）
- 资料Embed：资料支持外站引用，同时在内测用户可以关闭。
内测方面：
- 支持上传最长60s的stories，土耳其区上线。
- 内测「共同活跃」。
- 10月开始内测评论区「撕逼提示」，现在正式上线了。
- twitter全平台支持视频自动字幕，但过去上传的视频不支持。
- 设置项过多，twitter在内测设置页内的搜索设置。
- twitter在内测新的转发选项「Quote Tweet with reaction」。
- twitter正在内测新的编辑器，类似ins。
❓知乎
知乎开始了8.0版本的迭代进程，近期内测更新包括：
- 强化搜索，把右上角的搜索框下放到默认展开，同事新增「你搜的模块」。
- 强化时效性内容：新增了一个「正在发生」板块。
- 关注tab：升级为「动态」，新增了对关注用户的追踪和排序等。
☎️whatsApp
🎵TikTok
🤔What‘s More
- 轻芒宣布倒闭，并预告推出新产品「阅览室」，首批1250位永久会员售罄。
- 百度网盘青春版今日开启内测。
- facebook上线了新的直播功能：最多可支持4人同时连线。
- Disney+支持SharePlay。
- Spotify在内测支持对播客和节目进行评分了。
- Google Chrome正在内测新的下载UI，和Edge非常相似。
- LINE宣布成立LINE NEXT公司，专注NFT相关技术。
值得关注的新产品：
☁️Adobe Creative Cloud Express
Adobe推出的面向非专业设计人群的设计工具，通过现有素材，快速制作海报、横幅等素材。
📦抖音盒子
抖音推出的，定位潮流时尚电商平台的购物app
☎️Navi
基于SharePlay做的，实现在facetime时实时生成字幕，帮助跨语言和听力弱者。这个作者也是之前介绍的应用Cibo的作者。
🕊️Swift Playgrounds 4
你现在可以用ipad来开发应用了。
🚪Story Studio
由Snapchat团队面向iOS推出的视频创作工具。
设计组件入门（3） —— 折叠菜单
Roman是Setproduct.com的创始人，为设计师，开发者和组织机构提供非常高质量的figma设计模板。而同时他也是一名有着20多年丰富设计经验的设计师，今年他在为他的电子书《Designing Components》做准备，这本书将从最基础的角度归纳UI设计里的重要角色——组件，目的也是为各位带来更全面的认知理解和创意激发。
下面是第三章的翻译归纳，原文传送门《Accordion UI design》。
✨这个基础UI系列到此为止，等作者出书了会再通知大家，到时候就可以购买原版了。对我来说是个非常棒的总结，都是值得回顾的细节。如果你觉得基础系列有用或者无用，都可以来我的即刻动态下留言喔，期待大家的反馈。
什么是折叠菜单（Accordion）
这个名词翻译过来总觉得不太对劲，展开弹层/可伸缩面板（expansion panel），就翻译为折叠菜单吧。这是一个竖向堆叠选项的面板，用户可以展开和收起。这个控件应用非常广泛，功能强大，能够让主页面保持整洁的同时提供给用户更多功能选项。
概要
组成单位
- UI状态
- 箭头的使用
- 辅助图标
样式&主题
- 折叠展开
- 整体菜单
- 分割菜单
用户体验&易用性
- 副标题
- 指示性标识
- 帮助文字
- 手机移动端/桌面端的区分设计
组成单位
折叠菜单的几种状态
- 折叠
- 展开
- 悬浮
- 点击
- 无效
箭头的使用
箭头可以放在子菜单的左边和右边，暗示这个菜单是展开还是收起的。比如展开状态里箭头指向上方暗示可收起，折叠状态里箭头指向下方暗示可展开。
除了标准的三角箭头，你还可以使用以下箭头样式：
辅助图标
你可以选择加入图标让每个子菜单更有意义，但注意不要让信息过载。如果想更加强调每个选项的区别，可以给图标加上不同的颜色。
样式&主题
展开菜单
为了和普通状态区分，一个展开的菜单可以通过投射阴影、背景填充、描边来与普通态做出区别。背景填充与品牌色可呼应的浅色，也能让这个状态更加醒目和优雅。
整体菜单
大部分情况下子菜单都是做为整体设计。使用浅色的分割线区分每个选项，也能够在垂直方向上节省空间。
分割菜单
有时候可能会使用间距分割每个子菜单，这会占用更多的垂直空间，所以需要视情况而定。
用户体验&易用性
为了让折叠菜单更加易用，你可以使用
副标题：可以更好帮助用户判断他们需要的选项，更好地了解点击后的情况。
包含数字的小圆标：同样能提供更多信息，例如在隐藏的子菜单里选择了多少项目。
帮助性文字：让用户知道他们在隐藏的子菜单里已经选择/填写了什么内容
手机移动端
撑满全屏，作为一个新页面出现。
侧边滑出（导航抽屉），会露出一些下面内容，现在这样的设计比较少见了。
过滤器，出现在页面右边，同样会露出一些下面内容（京东APP的商品筛选）
桌面端
侧边菜单，固定在页面左边，非常常见的设计。
过滤器
相关链接
- Accordion component (React)
- Accordions as Expansion panels (Angular)
- Material-X accordions (Figma)
感谢你的阅读♪(･ω･)ﾉ