An image to describe post

Photo by Alexander Shatov / Unsplash

这些产品有新的迭代:

🍎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,被灰度到的用户可以直接登录。

An image to describe post


📱微信

  • 微信支付和WeChat Pay HK 上线「 港康码」服务,内地用户也可以申领。
  • 微信支付上线 防骗客服提醒 功能,当用户支付行为可疑时,会接到下述图2的提醒。
  • 微信开始整治 扫码点餐强制关注 公众号问题。

An image to describe post


📷Instagram

ins有 3点小更新

  • 年终回顾
  • 视频回复(以视频形式评论)
  • 资料Embed:资料支持外站引用,同时在 内测用户可以关闭

内测方面:

An image to describe post


🐦Twitter

An image to describe post


❓知乎

知乎开始了8.0版本的迭代进程, 近期内测更新 包括:

  • 强化搜索,把右上角的搜索框下放到默认展开,同事新增「你搜的模块」。
  • 强化时效性内容:新增了一个「正在发生」板块。
  • 关注tab:升级为「动态」,新增了对关注用户的追踪和排序等。

An image to describe post


☎️whatsApp

An image to describe post


🎵TikTok


🤔What‘s More


值得关注的新产品:

☁️Adobe Creative Cloud Express

Adobe推出的面向非专业设计人群的设计工具,通过现有素材,快速制作海报、横幅等素材。

📦抖音盒子

抖音推出的,定位潮流时尚电商平台的购物app

基于SharePlay做的,实现在facetime时实时生成字幕,帮助跨语言和听力弱者。这个作者也是之前介绍的应用Cibo的作者。

🕊️Swift Playgrounds 4

你现在可以用ipad来开发应用了。

🚪Story Studio

由Snapchat团队面向iOS推出的视频创作工具。


设计组件入门(3) —— 折叠菜单

Roman是 Setproduct.com 的创始人,为设计师,开发者和组织机构提供非常高质量的figma设计模板。而同时他也是一名有着20多年丰富设计经验的设计师,今年他在为他的电子书《Designing Components》做准备,这本书将从最基础的角度归纳UI设计里的重要角色——组件,目的也是为各位带来更全面的认知理解和创意激发。

下面是第三章的翻译归纳,原文传送门《 Accordion UI design》。

An image to describe post

by Roman Kamushken

✨这个基础UI系列到此为止,等作者出书了会再通知大家,到时候就可以购买原版了。对我来说是个非常棒的总结,都是值得回顾的细节。如果你觉得基础系列有用或者无用,都可以来我的 即刻动态 下留言喔,期待大家的反馈。

什么是折叠菜单(Accordion)

这个名词翻译过来总觉得不太对劲,展开弹层/可伸缩面板(expansion panel),就翻译为折叠菜单吧。这是一个竖向堆叠选项的面板,用户可以展开和收起。这个控件应用非常广泛,功能强大,能够让主页面保持整洁的同时提供给用户更多功能选项。

An image to describe post

by Roman Kamushken

概要

组成单位

  • UI状态
  • 箭头的使用
  • 辅助图标

样式&主题

  • 折叠展开
  • 整体菜单
  • 分割菜单

用户体验&易用性

  • 副标题
  • 指示性标识
  • 帮助文字
  • 手机移动端/桌面端的区分设计

组成单位

折叠菜单的几种状态

  • 折叠
  • 展开
  • 悬浮
  • 点击
  • 无效

An image to describe post

by Roman Kamushken

箭头的使用

箭头可以放在子菜单的左边和右边,暗示这个菜单是展开还是收起的。比如展开状态里箭头指向上方暗示可收起,折叠状态里箭头指向下方暗示可展开。

An image to describe post

by Roman Kamushken

除了标准的三角箭头,你还可以使用以下箭头样式:

An image to describe post

by Roman Kamushken

辅助图标

你可以选择加入图标让每个子菜单更有意义,但注意不要让信息过载。如果想更加强调每个选项的区别,可以给图标加上不同的颜色。

An image to describe post

by Roman Kamushken

样式&主题

展开菜单

为了和普通状态区分,一个展开的菜单可以通过投射阴影、背景填充、描边来与普通态做出区别。背景填充与品牌色可呼应的浅色,也能让这个状态更加醒目和优雅。

An image to describe post

by Roman Kamushken

An image to describe post

by Roman Kamushken

整体菜单

大部分情况下子菜单都是做为整体设计。使用浅色的分割线区分每个选项,也能够在垂直方向上节省空间。

An image to describe post

by Roman Kamushken

分割菜单

有时候可能会使用间距分割每个子菜单,这会占用更多的垂直空间,所以需要视情况而定。

An image to describe post

by Roman Kamushken

用户体验&易用性

为了让折叠菜单更加易用,你可以使用

副标题:可以更好帮助用户判断他们需要的选项,更好地了解点击后的情况。

An image to describe post

by Roman Kamushken

包含数字的小圆标:同样能提供更多信息,例如在隐藏的子菜单里选择了多少项目。

An image to describe post

by Roman Kamushken

帮助性文字:让用户知道他们在隐藏的子菜单里已经选择/填写了什么内容

An image to describe post

by Roman Kamushken

手机移动端

撑满全屏,作为一个新页面出现。

侧边滑出(导航抽屉),会露出一些下面内容,现在这样的设计比较少见了。

过滤器,出现在页面右边,同样会露出一些下面内容(京东APP的商品筛选)

An image to describe post

by Roman Kamushken

桌面端

侧边菜单,固定在页面左边,非常常见的设计。

过滤器

An image to describe post

by Roman Kamushken

相关链接

感谢你的阅读♪(・ω・)ノ


友情链接

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