12 min read

Vol 22 14个产品的42+项更新、设计组件入门(3) —— 折叠菜单

Vol 22 14个产品的42+项更新、设计组件入门(3) —— 折叠菜单
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,被灰度到的用户可以直接登录。

📱微信

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

📷Instagram

ins有3点小更新

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

内测方面:


🐦Twitter


❓知乎

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

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

☎️whatsApp


🎵TikTok


🤔What‘s More


值得关注的新产品:

☁️Adobe Creative Cloud Express

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

Welcome to Adobe Creative Cloud Express (formerly Adobe Spark)
Adobe Creative Cloud Express is an online and mobile design app. Easily create stunning social graphics, short videos, and web pages that make you stand out on social and beyond.

📦抖音盒子

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

‎抖音盒子-开启潮流生活
‎抖音盒子,是抖音旗下潮流时尚电商平台,围绕风格、时尚、购物,从街头文化到高端时装,从穿搭技巧到彩妆护肤,和千万潮流玩家一起,捕捉全球流行趋势,开启潮流生活。 - 圈内潮人 展现前沿态度 -明星、博主及时尚达人聚集于此,面向不同潮流领域,分享前沿资讯、潮流态度、穿搭心得、单品测评……让你紧跟潮流时事,边看边学成为时尚弄潮儿。 - 多元风格 发现穿搭灵感 -万千潮流风格,这里都有,我们将根据你的喜好,提供个性化的时尚穿搭内容,让你获得每日造型灵感,探寻多元风格。 - 全球好物 愉悦购物体验 -一线奢品大牌、独立设计师品牌、小众潮牌……我们集合来自全球各地的潮流时尚好物,给你轻松愉悦的…

☎️Navi

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

‎Navi - Subtitles & Translation
‎Navi adds subtitles and Live Translation to your FaceTime calls through SharePlay. Enable subtitles and see them on top of the FaceTime video window. The app opens FaceTime up to people with hearing impairments and other disabilities that prevent them from engaging easily in a video call environm…

🕊️Swift Playgrounds 4

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

‎Swift Playgrounds
‎Swift Playgrounds makes it fun to learn to code and build real apps. You solve interactive puzzles in the guided “Get Started with Code” and learn the basics of building apps in “Get Started with Apps.” You experiment with a wide range of challenges and samples that let you explore unique coding ex…

🚪Story Studio

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

‎Story Studio
‎Use the frame-precise trimming, splitting, and timing tools to get your edits just right. Add layers and captions to tell your story, and then Sounds from Snapchat. Try the latest Lens that everyone is talking about, and add smooth transitions from one video to another. When you’re ready to share,…

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

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

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

by Roman Kamushken

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

什么是折叠菜单(Accordion)

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

by Roman Kamushken

概要

组成单位

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

样式&主题

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

用户体验&易用性

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

组成单位

折叠菜单的几种状态

  • 折叠
  • 展开
  • 悬浮
  • 点击
  • 无效
by Roman Kamushken

箭头的使用

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

by Roman Kamushken

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

by Roman Kamushken

辅助图标

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

by Roman Kamushken

样式&主题

展开菜单

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

by Roman Kamushken
by Roman Kamushken

整体菜单

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

by Roman Kamushken

分割菜单

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

by Roman Kamushken

用户体验&易用性

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

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

by Roman Kamushken

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

by Roman Kamushken

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

by Roman Kamushken

手机移动端

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

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

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

by Roman Kamushken

桌面端

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

过滤器

by Roman Kamushken

相关链接

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


友情链接

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