12 min read

VOL 20 手机QQ内测超级QQ秀、设计组件入门(1) —— 导航栏

VOL 20 手机QQ内测超级QQ秀、设计组件入门(1) —— 导航栏
From ten

这些产品有新的迭代:

🐧QQ

自上次QQ秀的下架风波,最后证实桌面版QQ秀只是被折叠起来了,现在看起来这个折叠是为了推出第二版QQ秀,目前叫「超级QQ秀」。
据消息,当前正在进行的是删档内测,仅限手Q入口,人物从2D升级到了3D。以下是一些内测图。
不得不说,从视觉上看,个人感觉拉满了,盲测了几个同事,都表示很喜欢这个风格,很期待范围更大的测试和上线。


📧微信

微信公众号编辑端大改版

  • 公众号文章除了群发,还能单独选择「发布」,发布后不会群发给订阅者,但能生成一条永久链接,用于主动分享、菜单栏等地方,接受数据统计,同时这个发布不受次数限制。
  • 原有的图文素材库升级为草稿箱:草稿即是未发表的文章,发布后自动转移到历史图文素材中。
  • 在用户端,公众号文章默默展示了文章的具体时间,精确到分钟,据说是因为监管。

💃抖音

  • 抖音正在测试付费短剧,每集最低1元起,购买后可重复观看,没有时间限制。
  • 抖音电商测试送货上门服务。
  • 同时正在内测独立电商App:抖音盒子,定位潮流平台,目前尚未发布。

🐦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

苹果在上周公布了两个榜单,值得关注的:


🤖️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比较相似,用户可以拍摄有趣短视频和朋友分享,可惜目前仅限邀请加入。

‎doX-参与我们的生活
‎如果我能遇到更多像我这样的人我们就一起做各种小事小到尘埃里,散到天空去参与到对方的生活里 在多克斯,做孤而不独的自己

📮竹白

@李奇 团队出品的newsletter发布平台,本土化创新地增加了微信内的订阅体系,上周刚对外发布,整体完成度很高。

竹白 - 专为创作者设计的一站式工具
帮助创作者触达更多紧密且忠实的读者

✏️Thorn

一款写作工具,如同介绍,无比丝滑。

Thorn - 一款简单的写作应用
一款简单的写作应用,无比丝滑的创作体验。

设计组件入门(1) —— 导航栏

by Roman Kamushken

前言

工作中时常会有PM开发同事来问这个控件叫什么名字,除了在一些大平台的设计规范里能看见控件的描述,网上也似乎没有一个特别详尽的整理版本。这次在网上看见一位设计师做了很好的总结。

Roman是Setproduct.com的创始人,为设计师、开发者和组织机构提供非常高质量的figma设计模板。而同时他也是一名有着20多年丰富设计经验的设计师,今年他在为他的电子书《Designing Components》做准备,这本书将从最基础的角度归纳UI设计里的重要角色——组件,目的也是为互联网从业者带来更全面的控件认知理解和创意激发。我阅读了一下他发在网上的前三章,确实写的很清晰,推荐给大家。本文是第一章关于导航栏的介绍,原文有很多配图,但为了篇幅省略了不少配图,只做一个框架翻译。建议最后再去原文《App Bar UI design tips》看一看,他电子书发布的时候我也会在邮件里提一下。

什么是APP Bar?

在平常工作中,大家可能经常能听见导航栏 Navigation Bars,底部栏 Tab Bars(其实就是置底的导航栏)等等名词(统称为应用栏 APP Bar)。简单来说它们就是UI里为当前页面提供最高优先级操作的控件,经常是长条状的,和酒吧里的吧台一样。一般来说,应用栏吸附在屏幕最上面,以给用户提供最便捷的访问途径。

by Roman Kamushken

APP Bar内容组成

内容组成:

  • 左控制区
  • 中间区域
  • 右控制区

主题样式:

  • 扁平 Flat
  • 悬浮 Raised
  • 着色 Shaded
  • 反色 Inverted
  • 透明 Transparent

状态变化:

  • 选中态
  • 吸附底部
  • 滚动时投影
  • 背景模糊
  • 自适应时隐藏控件

内容组成

by Roman Kamushken

左边区域:

  • 头像
  • 按钮
  • 文本
  • 图标

行为上可以是:

  • 返回
  • 关闭
  • 菜单
  • 其它自定义内容(设置,账户等等)

App_Bar_03-min

而在桌面客户端的设计上,由于左区域空间比手机大很多,你更加可以组合一系列视觉元素以提供更多的功能,例如logo,搜索,下拉框,图标,按钮等等。

App_Bar_05-min

中间区域:

  • 标题(副标题)
  • 用户头像(也许还会有用户名)
  • Logo
  • 分段控件
  • 搜索框
  • 导航组件(点击区、按钮组、面包屑等)

App_Bar_08-min
App_Bar_10-min

右边区域:

  • 用户头像
  • 图标(用作按钮)
  • 按钮 (唤起操作)
  • 搜索框 (一般是桌面客户端)
  • 下拉框 (账户、语言切换)

App_Bar_13

图标

用图标来当做按钮可以呈现更多的操作(但含义不明的按钮可能会造成困惑和误解),尽可能保证这里是一些常用的操作,且不要使用不符合大众认知的图形符号。而当操作过多的时候,需要一个更多按钮来折叠一些不常用的操作。

by Roman Kamushken
按钮

形状上会有方形,圆形和大圆角之分。风格上有填充,悬浮,描边(幽灵按钮)和扁平等等,由按钮的重要性决定它的形态。

by Roman Kamushken

样式

  • 扁平 —— 简约轻量,通常与背景融合,不带分割线
  • 悬浮 —— 悬浮在背景之上,会留下投影
  • 着色 —— 通常会带有一个8-12%透明度的固色背景,与品牌色互相呼应
  • 反色 —— 在深色模式中,你可能需要高亮颜色对比以便区分header。所以导航部分往往会反转颜色,以更加醒目。
  • 透明 —— 在图片背景上非常常见,为了整体的美观
by Roman Kamushken

用户体验

显示选中状态 :导航的信息并非一成不变,而是可以给用户提供更丰富的信息和及时反馈。比如在选择照片的页面,可以在导航上显示用户已经选择了几张图片。

by Roman Kamushken

吸附底部:在手机的应用设计里,能看见底部导航栏的广泛应用,这样用户手指能够快捷地访问它们。

by Roman Kamushken

甚至,为了和APP保持体验一致,你能够在桌面应用设计里也将导航维持在底部区域。有一些成功的案例:

by Roman Kamushken

滚动时投影:在扁平风格的导航里非常常见这种模仿抬起的交互,更加真实和符合逻辑。

by Roman Kamushken

背景模糊:一点点模糊的效果也能让界面看上去更精致

by Roman Kamushken

自适应时隐藏操作:在从电脑端移植到手机APP的时候,由于空间变得更小,有时候你必须折叠一些操作

by Roman Kamushken

相关链接


友情链接

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