15 min read

Vol 9 微信视频号的默默更新、UI基础完结篇 - 颜色

Vol 9 微信视频号的默默更新、UI基础完结篇 - 颜色
UNSPLAH - Rodion Kutsaev

😄这些产品有新的迭代:

📩微信

微信最近的更新主要围绕视频号展开:

  • 支持发布最长1小时的视频,超过1分钟的视频不再需要选择哪部分作为前置预览了;
  • 视频大小从原来的1GB限制,提升到2GB;
  • 新增了活动主题,发布视频时可以选择对应活动投稿,可以获得额外的活动流量;
  • 封面支持简单的自由裁切;
  • 视频号内容可以选择作为个人状态了。个人状态也支持对添加照片的模糊处理,模糊效果的设计感还不错。

除此之外,还有以下更新:

  • 推出新的状态:读书,不过无法从微信内部创建需要在微信读书中,选择分享添加。
  • 公众号打赏支持微信豆打赏。(这个很微妙,原有的人民币打赏是不需要经过苹果抽成的,但微信豆充值是需要的,那这意味着?)
  • 看一看改版

📷instagram

ins正在内测个人状态,用户可以设置对好友展示状态,且在24小时后自动消失。
同时在内测「Favorites」,用户可以将其他人添加进自己的Favorites列表中,以获得其他时间线上优先展示的效果。


🐦Twitter

本周的twitter也进行了非常密集的小改动,核心是community的开放:

  • 从2月预告以来,开始开始进入范围测试,集中在iOS和web端,目前仅限邀请进入,这里有个示例,可以看下;
  • community形如国内常见的「圈子」和FB的小组,是供共同兴趣的人讨论交流的地方;
  • 加入community后,你在发布tweet过程中,可以选择向community的用户投稿;
  • 在你的首页,可以刷到来自你加入的community的内容;
  • 在web端,已经有了简单的内容管理措施:支持管理员隐藏不合适的tweet。
    WechatIMG450

除此之外,还有以下更新:

  • 个人主页上支持增加newsletter入口,对应的是1月份收购的Revue的服务。
  • 针对机器人账号,推出了标签功能,可标注哪些账号是机器人账号,来帮助用户更好地管理与其交互的预期,同时遏制部分垃圾机器人账号。
  • 开始大范围测试新的feed流样式,富媒体边对边展示,其实在7月份,海上星光的第一期,就关注过这个改动,现在开始进入大范围测试。

☎️WhatsApp

正在内测允许对特定用户隐藏「Last Seen」信息,即隐藏上次上线时间。此前只能选择对所有人隐藏或不选择。
另一方面,whatsapp正在重新设计对话气泡,主要改变调整气泡的大小和圆角角度。
数据安全上,双端将在数周内正式推出端对端加密的备份功能,用户可以选择备份信息传到google或者iCloud。


🤔️What‘s more

  • QQ邮箱web版正在内测新版UI,对比旧版更加年轻和简洁。
  • 快手全面支持全景4K视频和直播播放,是继8月抖音支持2K播放后,进一步提升高配置播放的短视频平台。
  • 字节推出「悟空浏览器」,押注浏览器下沉市场,口号为「一个能赚钱的浏览器」,主要包含四个功能:
    ** 首页:图文资讯:和今日头条有点重叠
    ** 视频:以中短视频为主,视频源仍是今日头条
    ** 免费小说:源自番茄小说的免费内容
    ** 赚现金:用户通过刷视频和文章即可获得金币,金币兑换可以支付宝提现。
  • 自腾讯会议、钉钉等推出Linxu版本后,飞书也迅速跟进了。
  • 高德打车推出「助老打车」功能,起点自动识别,终点无需填写,上车后和司机沟通,叫车过程只需要点一下。
  • Android 12 Beta 5上,新增加了一项特性:在特定条件下(游戏时充电发热)会限制手机充电来保护电池,最高充到80%。

🌟值得关注的新产品

🍕Cibo

在疫情前,出国旅游吃饭点菜的时候,是翻译软件最用不上的时候,因为菜名很特别,不好翻译,即使翻译了,机翻的含义也很难准确传达菜品的特色。如果菜单上有每个菜品的图片就很比较完美了。
Cibo的做法是通过AR和实况文本,通过扫描菜单,展示网络上该菜品的图片,来帮助你选择,这个解法很有意思。当然,除了图片,基础翻译还是支持的。

‎Cibo - Visual Menu Translator
‎Quickly search for photos of food menu items by selecting them with your camera. When you’re eating at a restaurant abroad it can be tedious to constantly have to search for the menu items to find pictures of what they look like. Cibo makes it easy for you. Just point your camera at the menu and…

📷ZapBG

照片去背景工具,全平台支持。尝试了几张背景复杂,颜色相似的图,确实有点东西。

ZapBG - Remove Backgrounds From Images Easily
Remove backgrounds in just seconds with no learning curve and easily remove backgrounds fast. Like super fast. Our latest AI easily recognizes backgrounds

🎨小画桌

来自Processon团队的新产品,小画桌时轻量化的在线协同白板,全平台适配,全功能可以看这个自我介绍

小画桌-免费在线协作白板
小画桌是一款轻量级的在线实时协作白板,内置音视频加密传输,适用于团队远程会议、头脑风暴、在线授课、UI需求评审等场景,致力提升团队效率。

👀如何为UI制作和谐的颜色系统(Color System)?

原文来自Medium,是作者Priyanka Godbole第三篇关于设计系统的文章,他为企业管理网站EHR改版也进入了尾声。

如果你看了UI基础前两篇的话,现在对UI已经能有个基本概念了。当你看见一个网站页面,或是APP页面,又或是公交车站台的电子屏上的车辆到达信息都是UI(User Interface -用户界面)而这些界面的组成元素其实很简单 - 字体、间距、颜色(还有一些辅助图像,icon或插画)。而今天这篇便是作者的最后一个议题:颜色系统。(本篇仅针对于UI颜色,品牌颜色不在这里讨论)

在这次改版中,作者通过五步减少了40%-75%的老颜色,简化了颜色应用规则。(从图里可以看到老颜色系统实在是太冗余)

1.审查现有系统里的UI颜色

检查颜色对比度,找出现有色板中哪些颜色组合对比太弱,辨识困难,及时将他们踢出色板。
--2021-09-13---11.30.37

在figma上你可以使用这款插件查看对比度:

2.审查UI颜色语义

--2021-09-13---11.48.41
格式塔原理:视觉相似(形状、大小、颜色、纹理)的东西往往被认为是一个整体。

相似颜色的组件容易被看为有着相似的功能。过多的颜色会分散用户的注意力,造成认知负担。标注一下每个颜色的用途,然后问自己一个问题:“我真的需要这么多颜色去表达一个意思吗?”

例子:

  • 链接和按钮都是表达可操作的意思,它们真的需要四种蓝色去表达?我能不能就只用1或者2个蓝色去代表可点击?
  • 边框往往用来盛放组件,内容和模块。所以,它们的作用都是包含内容,真的需要3种不同的灰色去表示边框吗?
一个色板里需要多少颜色?
  • 根据每个颜色的含义,我把蓝色归类为“可点击”。我们原来的系统里有8种蓝色,我只需要2种 —— 一个深蓝色代表点击,一个浅蓝色代表悬浮。立即就把现有的蓝色画板减少了75%。
  • 灰色主要用在:次要文本,输入区边框和次要区域(例如背景)。那么其实我只需要3种灰色就够了,原来包含5种灰色的画板减少了40%。

那么我们有了以下大概概念:
--2021-09-13---12.00.30

3.审查色板里的颜色是否和谐

什么是颜色和谐:同种颜色色相一致,只是亮度和饱和度有区分

HSB色彩模式:Hue-Saturation-Brightness :色相-饱和度-亮度,HSB是最符合认知的颜色模式,比其它任何一种颜色模式更接近人视觉原理的色彩模式,人在辨别颜色时,并不会分解成R,G,B或者C,M,Y,K几种颜色,而是按照色相,饱和度和亮度判断的。

为了使一个色板里的颜色和谐,它们应该来自同一色度。尽管一些细微的差别(例如H:200和H:201)肉眼无法分辨出来,但是这样的差别是毫无意义的。所以统一色度不仅让设计师和开发能更好地记忆颜色,同时为你未来想要扩展画板提供了坚实的基础。

--2021-09-13---12.14.45
从图里可以看出,颜色的hue都不一致。

4.为你的每个色板选择一个色相

首先我为蓝色画板确定色相,蓝色的H值范围在199-210之间(在我为EHR系统改版的例子里)。我决定在这个范围里选择一个色度,这样现有系统的外观和品牌色不会受到影响。首先我将S和B值都固定为100%,创建了H:195,200,205,210的色板。然后在亮度不变(B:100)的情况下,通过调整饱和度得到一个色度的浅色,再通过饱和度不变(S:100)的情况下,通过调整亮度得到一个色度的深色。调整阶度都在5~15之间。

由上可以创建一个颜色映射图,可以更加直观地帮助我们去挑选和对比颜色。由于是为现有系统改版,所以作者选择了和原来颜色选项都比较相近的H:205。根据第二步的决定,我只需从这个色板里选择两个颜色(点击色和悬浮色即可)。

如果你是做一个全新的颜色系统,那么你可以更加自由地为你的品牌挑选颜色。把所有可选项都列出来对比一下吧~

--2021-09-13---12.31.23
例如如果你做的产品很活力,那么像H:190蓝色可能会更适合。

为其它色板做颜色映射

其它色板在纠正色度的时候就简单多了,因为原来的系统里存在的颜色就不多。例如我从红色开始,近似地取了H:0,橙色的色度四舍五入取了H:30。一开始黄色色度取了H:50,紫色色度取了H:250(因为是已存在颜色的中间值),但是应用到UI上以后,我发现H:60和H:270要看上去更适合我们的提醒文案。最后我的新色度基本都是30的倍数(除了蓝色),这是一个巧合,但是确实对记忆有很大帮助。
--2021-09-13---12.41.45

5.为每个色度确定色值

WCAG 颜色对比:web内容无障碍阅读指南里有一套关于颜色对比度的审查准则,现在有许多插件可以直接帮助设计师计算对比度是否能通过标准

从色板里衍生出具体背景文字的色值的方法大致如下:

  1. 简单列出你在第二步中决定的需要用到背景和文字上的颜色用途
  2. 然后视觉检查文字与不同颜色背景的契合度,决定背景的颜色
  3. 根据WCAG颜色对比度审查去决定哪个文字颜色最适合。

--2021-09-13---1.37.49

--2021-09-13---1.39.27

色度不同,饱和度或亮度相同,颜色也是和谐的

在整个UI里,我希望不同色调里的颜色有相同的S或B值(除非这个情况下的色值非常不实用)
--2021-09-13---1.42.24
可以看到右图里的颜色更加和谐

--2021-09-13---1.45.37
但我们也不是为了追求S/B值一致而一致,最终还是要根据视觉效果去调整。

新的颜色系统,简洁明了

6.三个颜色系统应用准则

制定颜色的组合使用场景(文字色,背景色和边框色)

产品里的所有颜色都应该基于它们的应用场景(第二步中提到的语义),例如一个字体颜色不能拿去用作边框颜色,背景颜色不能拿去用做文字颜色。
所以当你确定了颜色系统以后,尽快制定颜色的组合使用场景。
--2021-09-13---1.51.21

派生态的颜色(悬浮态,激活态)

一些派生的状态需要在原来颜色上变浅一点或者暗一点,我发现最好还是不要把这些派生出的颜色加在颜色系统里,因为这样会增加系统里颜色的数量,而且时间久了你很难限制它们不被用到其它地方。(保持精简是设计系统的重要准则
--2021-09-13---1.52.59

U不同组件相同的状态要保持颜色一致

确保你的UI中,不同的组件在相同状态下的颜色是一致的。例如在鼠标悬浮的状态下,我使用蓝色作为所有组件的边框颜色来暗示组件是可点击的。在普通状态下,所有组件的边框颜色都是同一种灰色。
--2021-09-13---1.54.19

总结

  • 最终制定的颜色系统应该是颜色数量精简的,应用规则简单的(利于记忆)
  • 使用颜色时要遵循颜色对比度规则,对齐无障碍设计
  • 制定这样的颜色系统可以同时节省设计师和工程师的工作时间

免费用户可在网站上查阅历史推送,时间会比邮件稍晚一周。

在11期前已经免费订阅的用户,无需任何操作,将继续免费半年(约25期);已经付费的,在此基础顺延。到期后会有相关邮件提醒,如果觉得内容对你有帮助可以选择付费成为🌟星光会员。