10 min read

Vol 21 值得关注的年终盘点、设计组件入门(2) —— 用户头像

Vol 21 值得关注的年终盘点、设计组件入门(2) —— 用户头像

这些产品有新的迭代:

🎄年终专题

随着新历年终的来临,各大应用开始一年一度的年终盘点和榜单,为了方便对比,最近几期会整理一些当周发布的年终专题,这期的分别有:


🪆facebook

  • fb正在iOS上内测语音story,发布动画很酷。
  • fb支持了评论隐藏,隐藏后将继续对被隐藏者和朋友可见,其他人不可见。
  • fb watch tab上正在内测支持直接发布视频、或开启直播(入口在右上角)。
  • fb推出了Stars网页商店,stats原本是其直播中的打赏货币,之前支持app内直接购买,现在推出网页版主要是为了规避苹果和谷歌的抽成。
  • fb support开始内测live chat客服(总算),但目前仅针对创作者和账号被封禁的用户。

📷instagram


🐦Twitter

  • tiwtter正在内测新的发现页样式,更加TikTok - like,更强调图片了。
  • twitter持续内测「敏感内容警告」,用户发布时,可以将内容标记为敏感内容,其他用户在feed中不会直接看到内容,而在确认查看后才会展示,警告一次有效。
  • twitter正在内测「合作tweet」,一条tweet可以有两个创作者(或者更多?)。
  • twitter community内测新的「latest」tab,支持查看community内最新的内容。
  • 对未登录的用户,twitter灰度一个新的搜索框,供用户搜索,而不是强制登录。
部分预览图

🛫️Telegram

tg上周发布了8.3版本,带来了许多更新

  • 支持群组管理员设置群组内的内容不被转发、下载、甚至截图。
  • 支持按日期删除特定消息。
  • 新增更详细的设备管理。
  • 在公开的群组以频道身份参与发言(可以理解为匿名的一种方式)。
  • 新的验证码接受方式:验证码将通过电话拨通,号码的后6位即为验证码,这个场景都能有创新,厉害!
  • 还有其他细节更新可以查看完整的更新blog

☎️WhatsApp


💃Tinder

Tinder和Spotify自2016年合作以来,Tinder再一次推出了新的匹配创意:Music Mode
用户可以在划卡片过程中听到对方设定好的代表ta品味的歌曲,通过彼此的音乐品味来提升匹配的准确度。


🎮好说

好说是一款面向游戏玩家的即时社交app,由心动前联合创始人推出。最近的更新中,增加了不少内容,从一开始的discord-like逐步向一个IM靠近了:

  • 增加应用内通讯录,可以添加好友和删除。
  • 支持了好友私聊。
  • 支持分享房间和频道二维码。

🤔what‘s more

  • 微信windows3.4.5版本发布,支持了群聊折叠功能。
  • 继获得支付牌照后, b站内测「小黄车」,开启直播带货测试。
  • 豆瓣应用下架,原因是在安卓9及以下系统版本,当用户切换到「我」tab 时,对用户已经授权使用的手机设备信息,存在获取频次不合理的情况。
  • 淘宝购物车上线好友买单功能。
  • 历经3年,国行版本Apple Watch在上周RC系统版本中正式支持了心电图检测功能
  • Android 12L首个beta版本发布,增加了双栏布局。

值得关注的新产品:

👓Horizon Worlds

FB最新推出的社交 VR 应用,在 Horizon Worlds 中,Oculus用户可以创建一个角色,在虚拟世界中漫游、玩游戏,也可以与其他用户交流。

Horizon Worlds | Virtual Reality Worlds and Communities
Explore Horizon Worlds on Oculus, the most collaborative platform in VR. Our creative tools were built to help you bring your wildest dreams to life.

🔥Google Chrome 2021热门拓展精选

google公布了2021年商店内最热门的13个拓展list。

Voordat u doorgaat

设计组件入门(2) —— 用户头像

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

下面是第二章的翻译归纳,原文传送门《The Design of Avatar》。

by Roman Kamushken

什么是用户头像

用户头像通常会是一张用户资料图片,点击头像可以允许用户前往设置页面更改参数,选项或是编辑个人资料。这是一个非常常见的组件,用法也不算复杂。但也由于用户对头像组件的熟悉,我们在设计的过程中更需要严谨,避免一些不符合预期的交互。

概要

构成原子:

  • 状态
  • 尺寸&颜色
  • 行为暗示
  • 账户状态
  • 消息通知
  • 唤起操作

文字与副标题:

  • 出现在头像一侧
  • 在头像底部

用户体验:

  • 事件
  • 体现进程
  • 选中状态

头像群组

  • 内嵌按钮
  • 内嵌标记
  • 标记悬浮态交互
  • 头像悬浮态交互
  • 展示模板

构成原子

状态

  • 空态
  • 初始态
  • 用户图片
by Roman Kamushken

尺寸&颜色

根据用途的变化,尺寸和配色并没有一个统一的标准。下面是一些常见情况:

  • 24-40dp:APP导航栏,标题头(header)
  • 40-48dp:列表头像,正文内容
  • 56+dp:用户资料,设置
  • 头像填充色:需要具有良好的辨识度

行为暗示

  • 可以暗示一个用户是否在线
  • 可以提供消息提醒
  • 提供额外的图标引导操作
by Roman Kamushken

账户状态

最常见的展示账户状态的做法是在用户头像右下角嵌入一个圆圆的指示器。

  • 绿色是在线,灰色是离线
  • 实心是在线,空心是离线

消息通知

高优先级的通知:实心饱和的颜色

其它情况:柔和的浅色背景

唤起操作

  • 选用合适的图标暗示用户操作结果
  • 选用符合行为预期的颜色
by Roman Kamushken

行为和副标题

为了提供更多的信息,用户头像旁通常会在名字下跟随副标题。主要使用在列表,应用栏,表单里。

大标题用于用户名等重要信息

副标题提供额外信息:状态,最近访客,角色,粉丝量等

by Roman Kamushken

用户体验

事件

你可以在头像旁边加一个圆环暗示该用户发布了新的内容,如果再加上消息提醒的小圆点,这个反馈将显得更加重要。在Instagram里这代表用户发了一条故事(story),而在哔哩哔哩会是你关注的人发布了一条新动态。

by Roman Kamushken

体现进程

圆环的闭合状态也能体现出某个事件的进度

选中状态

头像被选中的时候,加上图标会更加明确

by Roman Kamushken

头像群组

内嵌按钮

当头像堆叠起来时,需要一个额外的按钮提供更多操作(新增、分类、编辑)等。

by Roman Kamushken

内嵌标记

使用显示数字的标记表现堆叠群组未展示的用户数量

标记悬浮态交互

web:鼠标悬停的标记上可以展示更多信息

头像悬浮态交互

web:鼠标悬停在头像上可以展示用户名

展示模板

用户头像经常出现在应用栏上或是在个人主页,设置页以大头像的方式出现,提醒用户这里是编辑入口。

by Roman Kamushken
by Roman Kamushken

相关链接


友情链接

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