编注:本文为栏目内「持续更新」模块的试读文章。在开始正式更新后内容和形式可能会有所变动。


你好,欢迎来到本期的「持续更新」,你将会看到可以用到实际工作中的新工具,值得参考的关注的新设计,以及对设计领域相关有趣事物的漫游探索。

评论

Facebook 的新名字和新Logo

Facebook 在2021年十月份宣布更名为 Meta,并且随之发布了新的 Logo。

对于 Meta 的 Logo,很多人的第一反应是:视频号倒过来。或许 Meta 设计的时候并没有想到在他们业务进不来的东方还有视频号这东西。(开个玩笑)其实和视频号撞车并不是很大的问题,不仅因为他们之间有所区别(一黄一蓝,一正一反),更因为 ♾️ 意象的图标本来就很多。Google 一下就能看到许多类似的 Logo,其本身的寓意已经被稀释殆尽。

对于 ♾️ 符号的由来,一种理论说它起源于“衔尾蛇(ouroboros)”符号。衔尾蛇象征着无限和生死循环,其形象是蛇或龙咬自己的尾巴。衔尾蛇其实还有很多不同的象征意义,而当中最为人接受的是“无限大”、“循环”等。衔尾蛇亦是宗教及神话中的常见符号,在炼金术中更是重要的徽记。近代,有些心理学家(如卡尔·荣格)认为,衔尾蛇其实反映了人类心理的原型。

这样一个带有神秘和宗教色彩的符号,如果用在一个面向大众的产品中,常会引来大家各种各样的解释。比如这次 Meta Logo 就有被解读为李萨如曲线,视频号的 Logo 也有「蝴蝶效应」等寓意解读。这些寓意更多是用户和旁观者的猜测,让我们来看看 Meta 官方的解释

Unlike traditional brand design processes, we designed this symbol to live in motion and 3D. Drawn from a single line in space using our own Quest technology, the Meta symbol forms a continuous loop that works seamlessly between 2D and 3D contexts. It is designed to be experienced from different perspectives and interacted with. It can resemble an M for “Meta,” and also at times an infinity sign, symbolizing infinite horizons in the metaverse.

意译:与传统的品牌设计流程不同,我们设计这个符号意在其存在于动态和3D空间。Meta 符号是在空间中使用一条线绘制出来的,并且使用了我们的 Quest 技术,它形成了一个在 2D 和 3D 中都可以展现的连续循环。它旨在从不同角度体验并与之互动。它可能类似于“Meta”中的M,有时也是一个无限符号,象征元宇宙中的无限地平线。

这段话解释了 Meta 版♾️符号的本质——一个3D的环,这也是它与其他♾️Logo的不同点。这也和 Meta 未来的业务重点(元宇宙和VR业务)非常贴切。

看了上图这个演示,感觉 Meta Logo 无论逻辑还是差异度都上了一个台阶。同时,这也揭露了一个 Meta Logo 面临的挑战:如何充分地宣传,让观者意识到这个 Logo 的本质和特别之处。毕竟目前大多数的触达场景都是在平面上的,非动态的。不过话也说回来,像 Meta 这个体量的公司,只要坚持使用并保证曝光量,或许能做到独占这个 Logo 形象,尽管在现阶段看来很同质化。​

从 Android 13 中推出的 themed app icon 聊到 Material You

第一次得知 themed app icon,是因为看到独立开发者 drakeet 对于这项功能的吐槽。简而言之,themed app icon (译为:主题化应用图标)让应用的图标匹配用户指定的色彩样式,这项功能需要开发者主动适配。

从Android官方的演示截图来看,桌面上所有的应用图标都变为了同种样式和同样的配色。从可用性角度来看,如此同质化的图标让用户找 App 更困难了。而从开发者的角度来看,付出工作量做好适配后却得到了一个「淹没于其他图标中」的结果,明显就没有动力去适配了。况且,自 Android8 推出的 自适应图标(Adaptive app icon)并未达到完全覆盖,themed app icon 或许也很难达到理想效果。

自适应图标

私以为对 themed app icon 的批判不应离开 Material You,因为 themed app icon 想要达成的只是 Material You 中的一部分。

Material You 设计风格 和 Dynamic Color 的应用

Material You 是谷歌 Material Design 设计语言的第三个大版本,随 Androdi12 面世,其重要特色是所谓的 Dynamic Color,即用户设定的壁纸可以影响全局界面的配色,不仅让系统界面和壁纸浑然一体,还做到了足够的个性化。虽然概念并不新鲜,但其实现效果令人耳目一新,而且设置方式非常简单(只需要设定一个壁纸即可)。为了能够第一时间体验到,我甚至买了一台 Pixel 手机。上手体验后惊叹于这套配色算法的完整性,任何奇怪颜色的壁纸都不会让配色效果变差,尤其是文字可读性保持安全范围内。但是当我看着我花花绿绿的键盘时,我陷入了沉思——这样的设计真的好吗?

开启 Dynamic Color 的 gboard(右)与未开启的(左)

Dynamic Color 在实际应用上确实不完美。首先是界面色彩的不稳定,比如:我手机上的绿色按钮在你手机上却是黄的,原本橙色的壁纸在换壁纸之后却变成了紫色。类似的体验都会让用户在色彩变化后稍有迟疑,感到陌生。如果站在开发者的角度,让用户壁纸的配色覆盖 App 自身的配色会导致品牌感大大下降。

难道 Material You 真的就一无是处了吗?当然不是,当我拿起熟悉的 iPhone 时,面对简洁、规则、稳定的界面时,Material You 的多彩和不规则总让我念念不忘。因为当下的交互界面的「个性化」收敛了许多,无论是 iOS 还是 Android 甚至 Windows 都倾向于使用相对规范和简洁的风格,个性化程度基本停留在了墙纸层面。

恰好最近看了一篇文章 Too many places are STERILE and TORCHED — let’s make them COOL and FUNKY ,其中表述了对「过于完美以至于丧失生机」的事物的批判。

文章中出现的对比图

于是我有了一个猜想:类似 Material You 这种看似不太冷静,色彩和形状都非常丰富的设计,是必然会在合适的时间涌现的。在人类进入工业文明后,我们时常会面临工业与人性平衡性的问题。比如十九世纪末的艺术与工艺运动,卓别林的《摩登时代》都是在强调人性的重要性,而人性本身就是相对自由,多彩的,不受约束的。如果向前看,我们会发现在 Material You 之前对于「UI个性化」的尝试是非常多的。比如诺基亚鼎盛时期的手机中可能会内置多款主题,Windows Media Player 中自带了多款皮肤。

在2022年看这些古早的个性化界面设计,虽然奇怪甚至有些丑,但却充满了趣味性,现在的界面相比之下就有些无聊了。而 Material You 把个性又带回来了,而且是用现代人可以接受的审美以及更低的门槛把个性化带回来了。实际上,在 iOS14 新增了小组件和快捷指令跳转 App 的功能之后,桌面个性化也有了不少 iOS 阵营的玩家,催生了许多桌面美化软件,比如 HandyWidgetSmith 等应用。果然大家被干净却冰冷的风格束缚了一段时间后,个性化的需求愈发热烈。所以,当我们带着这样的背景去看 Material You,它的价值是对当下固化的界面风格作出的大胆尝试,尽管在短时间内其呈现效果必会存在争议,但我很愿意看到这样设计。

关注

【字体】Geely Type:方正字库为吉利汽车打造的新字体 

这是一款由方正字库和 TypeTogether 共同设计的一套字体,会用在吉利汽车的品牌形象以及车机系统银河OS的界面中。其特点在于几乎给所有的直线都加入了些许的弧度,显得很有科技感。

这款字体让我想起了 Ubuntu 系统的字体 Ubuntu Font,也同样拥有弧度的笔划。

比较遗憾的是目前仅有西文部份,在方正字库公众号放出的展示图中可以看出车机界面中的中文字体风格和这款新字体还有些不搭。

【工具】Cleanup.Pictures :去除照片中物体的在线工具

不得不感叹如今 Photoshop 的各个功能逐渐有了更好的替代品。比如在线扣背景的 remove.bg,物体移除工具 TouchRetouch 等。这款 Cleanup.picutre 和 TouchRetouch 类似,可以通过简单的框选移除图片中不需要的物体。

【文章】We Analyzed 425,909 Favicons:Favicon中的细节

Favicon 是浏览器标签页前方的小图标。作者分析了425909个网站的 favicon,其中尺寸,格式,文件尺寸,图片质量各有千秋。一个不起眼的小图标,可以拥有非常多的细节。

【文章】How to optimize button microcopy. 7 suggestions with examples

这是一篇关于交互设计中按钮文案设计的文章。文案作为交互设计中最没有「设计感」的元素,实际上对于用户体验有着非常大的影响。一个经典的案例是删除操作弹窗中的确认按钮文案,应该是「是」还是「删除」?大家可以去体验一下身边的产品和他们的区别。

【图书】《乌龟的壳其实是肋骨》:用拟人的方式讲解生物构造

用拟人的手法认知世界是人与生俱来的习惯,比如我们会把汽车的大灯比做眼睛......《乌龟的壳其实是肋骨》就是一本用拟人的方法讲解生物构造学的书。作者通过绘图展现,用人体演绎动物形体,简单直白地交代了各种生物的特点。在阅读过程中不仅能了解生物的构造,更体会了拟人手法的可用性。

【设计者】Saffron:设计Meta品牌形象的工作室

正是这家成立于2001年的品牌工作室帮助完成了 Facebook 到 Meta 的转变。Saffron曾经也做过 VK 和 Youtube 的品牌设计。

【设计细节】GoodNews社区注册流程中的血书签字

设计社区 GoodNews 的注册流程中最后一个环节是「血书签字」。血液滴下的效果令人感到惊悚,也让签字变的十分困难,下方甚至还不断出现的文字嘲讽我可怜的字体。

很难相信如此戏谑与惊悚的体验是出现在一款现代产品中的。不过走完注册流程后才知道, GoodNews 社区十分重视发言环境,除了社区本身是邀请制,血书的目的也是为了让参与社区的用户们对自己的发言更负责一些。后来了解到血书环节是完全可跳过的,直接按下注册按钮即可,算是在「仪式感」和「舒适的流程」之间做了平衡。

漫游

《控制》中的太古屋与野兽派建筑

《控制》中的场景

最近在玩《控制》这款游戏,其塑造的诡异氛围极其成功,很有制作商 Remedy 的特色。整个游戏场景都是在一个叫做「太古屋」的神秘建筑中进行。在游戏中,太古屋的内部变化多端,是一个无穷无尽的空间,而且它的外观也非常诡异。

《控制》中的太古屋外观

于是我顺藤摸瓜,意外发现其原形是位于纽约的 。这个大楼同样长相诡异,不仅没什么窗户而且通体土黄色。再继续挖掘的过程中发现此种建筑风格为「野兽派(Brutalism)」

野兽派建筑主要流行的时间介于1953年到1967年之间,由功能主义发展而来。其建筑特色,是从不修边幅的钢筋混凝土(或其它材料)的毛糙、沉重、粗野感中寻求形式上的出路。他们看起来是未完工的样子,将相对原始和丑陋的缝隙和结构毫无保留的暴露在外面。

Brutalism 也可以被翻译为粗野主义。这一词汇最早由瑞典建筑师汉斯·阿斯普朗德(Hans Asplund)所起,以描述乌普萨拉的建筑“Villa Göth”(1950年建成)。当时他所用的是瑞典语“nybrutalism”(新粗野主义),后来迈克尔·文特里斯等英格兰建筑师也埰用了这一名称。其概念在英国的史密森夫妇(Alison & Peter Smithson)手上得到进一步发展。建筑评论家雷纳·班海姆在1966年出版《The New Brutalism: Ethic or Aesthetic?》一书,使得这个词汇流传开。来源:wikipedia

每次看到野兽派建筑,我心中总是有些不安和恐惧,因为他们棱角分明,轮廓野蛮,完全没有友好的感觉。但又被这样稀缺而鲜明的建筑风格所吸引,总想多看几眼。这样的建筑特点显然不符合主流的审美趋向,当下的野兽派建筑越来越少了。德意志建筑博物馆也发起了一个叫做 #SOSBRUTALISM 的运动和展览,呼吁保留野兽派风格的建筑,其措辞 「Save the concrete monster」中的「concrete monster(混凝土怪兽)」非常恰当。线上的版本收录了超过 2000 个野兽派风格建筑的信息。

#SOSBRUTALISM 收录地图

根据 Dezeen 杂志的文章Ten significant concrete buildings featured in Chinese Brutalism Today,在国内也有一些野兽派风格的建筑,甚至建成时间都不是很久,比如位于阿那亚的网红建筑「最孤独的图书馆」。

在不断探寻的过程中发现,野兽派风格的建筑也并非都拥有着野蛮的样貌,类似香港中文大学胡忠多媒体图书馆,新加坡珍珠苑等建筑给人的感觉还是比较友好的。

最后,我还幸运地发现了一位热衷拍摄野兽派建筑的摄影师——杨萧(@inhiu),推荐对野兽派建筑有兴趣的大家前往她的网站废墟中的幻境上欣赏。

酸,通感,联觉

你是否对司空见惯的日常用语有过其来源的疑问?无论是古早的「上厕所,下厨房」中不知为何的上下关系,还是新兴词汇「芭比Q了」都有有趣的来源。

这次引起我兴趣的是「酸」,也就是我们通常会说的「我酸了🍋」。通过简单的查找,我在知乎上找到了这样的讨论。

 

具体的答案就留给大家自行发觉了,我想和大家分享的是由「酸」引出的所谓「通感」相关的设计理论。

通感,是一种文学修辞手法,又叫“移觉”,是在描述客观事物时,用形象的语言使感觉转移,将人的视觉、嗅觉、味觉、触觉、听觉等不同感觉互相沟通、交错,彼此挪移转换,将本来表示甲感觉的词语移用来表示乙感觉,使意象更为活泼、新奇的一种修辞格式。现代著名作家钱钟书就有一篇论著《通感》专门讲述了通感作为修辞手法在中国诗文中的应用以及与西洋诗文的对比。

以我个人的猜测,通感并不只是一种修辞手法,它更存在于生活中。比如我们看到醋就能想到酸酸的味道(视觉-味觉);看到一根香蕉也能联想到瑟瑟的手感(视觉-触觉);甚至之前边吃麻辣食物边听歌,在后来听到同一首歌时也能想起麻辣的滋味(听觉-味觉)。这种体验叫做联觉(Synesthesia),指其中一种感觉或认知途径的刺激,导致第二种感觉或认知途径的非自愿经历。

在设计领域中,也有许多动用感官的设计。比如日本设计师原研哉(MUJI 设计总监,武藏野美术大学教授,小米新 Logo 的设计者)就在 2004 年时策划了 “HAPTIC——五感的觉醒”触觉展览。在他的著作《设计中的设计》中有对 “五感” 详细的论述

「HAPTIC——五感的觉醒」触觉展览中的展品

最后我们回到「酸」,说到最近流行的所谓酸性设计,或许也可以通过联觉的理论去理解。

酸性设计风格

所谓酸性设计的命名,实际上来源于六十年代,具有迷幻感的酸性搖滾 (Acid rock) 音乐。也就是说这里面的酸并不是我们味觉上的酸(sour),而是化学上的酸(Acid)。当我们带着 Acid 的概念去看酸性设计,就会发现他们的共性——腐蚀性。酸性设计经常会使用液体和金属的质感,这非常符合酸(Acid)所具有的腐蚀性。