新知 Live 回放

「新知 Live」 是深度了解科技话题与工具并与新知探索家交流互动的最佳方式。本期回放是《100 小时后请叫我设计师》栏目的第一次直播活动。

100 小时后请叫我设计师》将从平面设计的概念和历史开始,逐一将设计相关的字体、色彩、排版、工具等等知识点详细解析为你打下扎实的理论知识基础。

📮 前往了解

 

我们在直播回放视频的基础上,为各位整理了内容梗概和知识点,配合时间戳可在视频中直接找到相应内容。

如果你对内容有任何疑问或想法,欢迎在评论区中分享。

直播回放

本期主讲@马马马马马马克思 毕业于美国加州艺术学院平面设计专业,现就职于国内知名互联网公司设计团队。所以不论是在学生阶段,还是参加工作后,他都一直有关注设计风格变化,收集设计工具与资源的习惯。

点击下载课件

内容梗概

在本次直播中,Marcus 围绕「以设计者的视角去看世界」这一主题,与我们一同探讨了如何在日常生活中「有意识地获取信息」,他以电影剪辑手法为切入,用三个例子区别了有意识的获取与无意识的获取。并带领我们在六个实例中感受以设计者的视角去看世界的方式方法。随后,Marcus 通过科技、游戏,甚至美国大选等例子阐述了在日常的观察中保持好奇的重要性。最后,回答了栏目读者提出的「美团体、腾讯体的设计思路是什么?」与「中英混排的原则是什么?」两个问题。

知识点

📍02:46 选择「以设计者的视角去看世界」作为主题的原因

  1. 评论区提到最多的问题,且与第一章内容紧密相关;
  2. 作为爱好者,如何高效的通过作品获得信息、丰富视野,是一个很重要的命题;
  3. 入门设计阶段的爱好者最重要的一件事;
  4. 有意思,可以展开的问题。

📍04:02 分析图片或视频的切入点与方法

以电影的转场剪辑手法为例,J Cut 是一种声音先进、视频后进的剪辑手法;L Cut 则是声音未停止时,视频先行切换。这些细节的剪辑手法可以帮助电影实现更加自然的场景过渡。当了解了这一常用手法时,便可以在观影时观察这一手法的运用、思考运用手法的意义,甚至在自己剪辑视频时尝试使用这一手法。

这个例子脱开了我们一直在讨论的设计,从电影剪辑的角度帮助大家感受如何着手分析图片与视频。

📍06:43 「有意识地获取信息」

Good artists copy, great artists steal. —— Pablo Picasso

毕加索认为,拙劣的艺术家模仿,伟大的艺术家偷取。所谓偷取,并非流于表面的模仿或抄袭,而是对源于内核的精神与理念的继承。作品可能与继承的对象拥有完全不同的外在,但拥有一脉相传的内涵。 以下几个例子则说明了「模仿」与「偷取」、「有意识的获取」与「无意识的获取」的巧妙联系。

📍07:20 小米的品牌重构:小米的品牌重构包含的不只是 Logo 的变化,还包含原研哉的背书、英文字体的变化以及品牌理念的重构。

📍07:45 刘海屏:iPhone 为了放置 Face ID 模组等一系列传感器,在 iPhone X 开始使用刘海屏设计。部分厂商选择「东施效颦」,即使没有传感器需要放置也使用了刘海屏的设计;另一些厂商则选择了挖孔屏等设计。

📍07:20 直角边框:iPhone 在 iPhone 4、iPhone 5 时期使用了直角边框设计,在 iPhone 6 时期开始了圆角边框,在 iPhone 12 时期再次回归了直角边框设计,期间直角边框的三明治结构从玻璃浮于中框变化到了玻璃与中框持平,且优化了边框与玻璃间的过渡。一些厂商在 iPhone 再次使用直角边框后,也使用了直角边框的设计,但未注意边框的过渡处理。

📍10:18 爱奇艺改版分析

发生了怎样的改变:品牌 Logo 简化,主题色彩变化,字体变化。

可能的改变原因:通过字体、颜色与去除边框的 Logo 塑造更年轻的品牌形象;去除边框弱化设计的装饰性,符合设计趋势、优化文字可读性、与竞争对手的 Logo 产生更强的区分。

分析原因的方法:深究改版原因与目的。它处于怎样的环境?它市场竞争的对手是谁?

📍14:22 书亦烧仙草改版分析

发生了怎样的改变:品牌简化,吉祥物代替 Logo,字体变化。

Logo 的分类:Emblems(徽章式), Pictorial marks(图形式), Wordmarks(文字式), Lettermarks(字母式), Abstract Logos(抽象式), Mascot Logos(吉祥物式) 和 Combination Logos(结合式)。

可能的改变原因:通过吉祥物去承载它的形象,兔子形象在或者动物的形象在奶茶的整个品牌中相对少见,且中国用户对于动物形象的认知程度更高。

📍18:14 蒙牛改版分析

发生了怎样的改变:Logo 简化,字体变化,颜色变化。

可能的改变原因:符合「简化」的设计趋势与「扁平化」的审美趋势,提高固定面积的宣传效益。

没有改变太多的原因:消费者对知名品牌 Logo 有非常成熟的认知,大幅调整可能带来巨大风险。

📍24:53 Windows 图标分析

变化趋势:从初代 Windows 符合「窗口」的具象设计变化为 Windows 93 的「旗帜」形象,并在 后续版本中不断具象化,直至 Windows 8 回归。

改变原因:不断具象化的图标设计,表达计算机图形渲染能力增强。Windows 8 回归窗口设计则是对 Metro Design 设计风格的契合,也是一种「数字化的自信」,它原生就是数字化的,而不是一个模拟现实的数字化产品。

Windows 8 设计令人反感的原因:产品本身的不成功;大众审美未彻底接受此类设计风格。

一个问题:为什么微软与他的产品 Windows 公用田字 Logo?

📍32:45 模块排版分析

发生了怎样的改变:发布会的总结环境从文字陈列所有特点转变为了使用模块化排版展示。

改变原因:优化可读性,从繁复枯燥的专业术语到图文结合的表达形式,既保证了信息量,也便于理解特点含义;提高空间利用率,减少了大量留白。

特点:使用数字与文字说明产品特点,用图片进行补充说明。

不同厂商的实践:部分厂商习得了模块排版的精髓,通过侧重文字的描述展示了产品特点;部分厂商则只得其表,文字与图片比例过于均衡,反而失去了重点。

📍39:46 「微软风」视频分析

特点:「微软风」视频是介于现实和虚拟之间,偏向虚拟的制作风格。它并没有很诚实地展示界面,而是在界面之上叠加了丰富的质感与效果,通过意象化的手法达成宣传目的。谷歌则是另一派的代表,它没有过多炫酷的效果,但保持着界面的「诚实」。

评价两极分化的原因:流畅、华丽的动画效果与实际体验产生了较大的偏差。

📍48:16 看科技新闻与提高审美的关系

首先,科技新闻可能是少数派读者的兴趣所在。其次,消费科技产品其实是非常多设计领域的一个聚合品。

以 Opal Camera 为例,首先摄像头本体是一个工业设计,其次可以看到产品的包装设计与产品网页设计,此外还有诸如盒子、衣服、名片色板等完整的品牌视觉形象的设计。通过深挖科技产品及其周边的设计,可以发现产品本身是多种设计的聚合,可以帮助我们高效地看设计。

📍49:49 游戏与提高审美的关系

游戏是「第九艺术」,集合了文学、绘画、雕塑、音乐、舞蹈、建筑、戏剧和电影。

塞尔达通过设计让玩家不再停留在主线,而是愿意探索地图;王者荣耀利用轮廓理论,通过标志性元素保持角色辨识度;光环通过调优实现摇杆畅玩 FPS 游戏;星际争霸通过平衡三个种族实现了玩法与胜率的动态平衡。

保持一种好奇心与观察力,无论是科技还是游戏都可以给我们带来新的发现。

📍49:49 美国大选中的平面设计

林肯默许印有其形象的烟盒贩卖,让烟盒成为了林肯的竞选海报;尼克松用 “一图流” 说服选民赢得了连任;吉米卡特塑造了一个救世主的形象,意思是为失信的白宫带来光明;麦金莱在海报中站在金色硬币之上,展现他发展经济的决心……这些竞选海报,可能没有过多的设计方法,但都找到了选民最想要的东西,并带着明确的目的传达候选人的优势。

特朗普和希拉里竞选中,希拉里的品牌形象非常完整,Logo、字体、品牌应用手册等一应俱全,但连字体都不统一特朗普却取得了竞选的胜利。如果从设计层面去反思,特朗普的品牌其实融入于他本人。他的谈吐等个人形象,比我们设计师设计的精致品牌,更接地气,也更深入人心。

弗罗里达州政府为了节省纸张,方便老年人阅读,设计了蝴蝶型选票。但由于蝴蝶型选票在阅读方式和投票方式上都做出了改变,对于选民来说过于陌生,页面结构难以理解,带来了严重的后果,或许改变了 2000 届总统竞选的结果。

📍59:30 Al Gore 的神奇演讲技巧

Al Gore 在演讲中提及描述碳排放和气温的关系图表时,走上了令人意想不到的升降机,通过虚拟与现实的结合,展现夸张的数据。

📍1:02:31 小结:如何有意识地获取信息

完整地看;

边看边想;

保持好奇。

📍1:03:55 Q&A 1:推测美团体、腾讯体的设计思路

字体是品牌的一部分,它是体现品牌的。即品牌字体的最终目的是即使没有 Logo,也可以识别出内容与品牌的关系。

📍1:05:44 品牌感的具体内涵

以汽车设计为例,即使去除车身的所有 Logo,许多人从车辆的线条与大灯样式即可识别出车辆的品牌;NFT 作品 CYBER SNEARKERS 则在没有使用特斯拉 Logo 的情况下使用金属、直线流线型的设计语言体现了与 Cyber Truck 的关联性。

iPod nano 7 与 Lumia 有着相似的设计元素:彩色的一体性外壳中镶嵌黑色的屏幕。但大多数人并不会认为两者有着过多的联系。因为 Lumia 使用了标志性的聚碳酸酯、2.5D 玻璃;iPod 则传承了惯用的铝合金、Click Wheel。企鹅出版社则通过相似的排版手法提供了延续性与品牌感。

可以从中抽象出品牌感,或许是一个独特的视觉语言,在长期使用的同时可以有一定的演变。

📍1:12:17 让字体具有品牌感的方法

《愤怒的小鸟》使用的字体通过手写风格的字体,和笔画起止时的类似木板破碎笔触处理塑造了品牌感;皇室战争的字体则通过坚硬但又有一点圆滑、不太规则的类似堆砌城墙的石头的笔触描绘品牌感。游戏中的字体会融入游戏中的元素,即字体设计来自于产品本身的

Uber 和 Medium 也多次修改 Logo 与字体来匹配产品定位与品牌形象。Instagram 则通过保留标志性的「i」的写法、「g」「r」的连笔处理等特征。新字体的设计往往是从之前已经存在的一些品牌元素中汲取特点,并进行延伸。

腾讯体汲取了品牌 Logo 略微倾斜的特点与标志性的笔画切角,充分体现了品牌感,但也牺牲了字体作为正文时的可读性;美团体则抓住了排叠的点、横勾等标志性笔画的切角特性。

美团体和腾讯体等品牌特殊字体的设计思路,本质是从现有的品牌里面汲取一些视觉特性,并将特性演化成字体,演化过程可以发散特性,或完全忠于原作。

📍1:22:21 Q&A 2:中英混排的原则

在讨论中英混排的原则前,首先需要确认混排希望达到的目的:若追求阅读舒适度,应该保证一致感;若追求对比度,应该保证区别度。通常情况下,我们追求的是一致感。

一致感的难点在于中、英阅读习惯与组成的不一致。英文阅读是读形状,通过文字长度与高低起伏快速判断字符,中文作为方块字则不可能实现「读形状」;英文每个单词之间是有空格的,中文只有标点,需要自行断句;字母的曲线比较多,汉字的横线竖线比较多;字母字面占比比较平均,汉字则可能极繁极简。读中文的时候是中文的阅读习惯,读英文的时候是英文的阅读习惯,这样的切换带来了停顿感。

优化一致感的方法其一是优化字体的一致性。选择 Noto、苹方等国际化的,在设计时考虑了一致性的字体;或者通过字体搭配实现字体的一致性。字体的搭配需要寻找和谐与共性,例如标点符号的处理、笔画的粗细等。

优化一致感的方法其二是优化内容的一致性。在中英夹杂比较密时,全角标点加空格会带来比半角标点不加空格更多的字间距,为大脑切换阅读习惯提供缓冲,提供更流畅的阅读体验。

若反其道而行之,则可以为中英混排带来对比度,强化文字间的差异。

> 下载 少数派 2.0 客户端、关注 少数派公众号,解锁全新阅读体验 📰

> 实用、好用的 正版软件,少数派为你呈现 🚀