YouTube 终于换Logo啦!来看背后的设计故事! - 优设网
文章推薦指數: 80 %
徐小马:在过去的十二年里,YouTube 的logo 是由两个过时的元素搅在一起组成的。
YouTube 设计部门负责人Christopher Bettig 说:“我们把单词tube 塞进 ...
YouTube终于换Logo啦!来看背后的设计故事!
收藏
2017-08-31
推荐:程远阅读2.7w评论有奖阅读本文需12分钟
首页设计文章教程详情
徐小马:在过去的十二年里,YouTube的logo是由两个过时的元素搅在一起组成的。
YouTube设计部门负责人ChristopherBettig说:“我们把单词tube塞进了tube里(译者注:tube是管子的意思)。
很奇怪是吧,其实没有人看得懂之前的logo要表达什么。
“在美国,Tube是电视机的俚语,因为以前的电视机里满是vacuumtube(译者注:vacuumtube是真空电子管的意思,一种电子元件)。
但是,无论电视还是真空电子管,都不是世界上最大的视频网站的核心。
现在YouTube每个月都为超过15亿的用户提供服务,它几乎可以通过互联网连接到任何屏幕上。
作者信息:
姓名:BenPopper
介绍:Aspiringdronepilotandparentingrobot.
原文:TheVerge
当下,YouTube正在进行一个史上最大的“变脸”计划。
YouTube的logo已经更新,将重心从单词Tube移到家喻户晓的播放键上。
YouTube的播放键已经成为公司的一个标志。
YouTube还采用了新的字体,配色方案,以及一系列针对桌面端和移动端的重大改进,涉及视觉设计,用户体验和产品功能。
△ 用户体验研究员MelissaSmith在SanBruno,CA的YouTube办公室展示新的移动端应用功能
虽然今天的logo改版是YouTube历史上最重要的事,但它并不是彻头彻尾的,并不像Uber把银色的U改为反转的C一样。
Bettig说:
“这是一个革新,而不是革命。
“
但是,公司也利用这一刻宣布了一系列的新功能,更新计划和正在进行的尝试。
新logo是将这一系列动作拴在一起的捆绳,强调了YouTube从一个单一的视频网站产品朝由跨平台的不同产品组成的平台的转变。
YouTube设计和交互团队在两年前推出他们重新设计的界面时,面临的挑战是如何将众多的产品与不同口味的观众,不同的使用场景结合在一起。
这个在2005年为桌面互联网用户建立的网站现在已经存在于手机,平板电脑,游戏机甚至电视上了。
并且,YouTube不再是一个简单的品牌。
在过去的几年中,它孵化了一系列服务:YouTubeKids,Gaming,Red,TV,和Music。
“我们觉得,由于这些不断新增的服务,原来的logo越来越难以涵盖。
Bettig说:“我们希望设计一些更统一,更有凝聚力的东西,一些一看就是YouTube的东西。
我们希望搭建一种视觉语言,使用户可以轻松识别。
”
Bettig是一名法国人,六年前加入Google,过去三年一直在YouTube。
他主导这次对logo的重新思考。
由于YouTube正在逐步进化为一整套服务,并且已经适应了各种尺寸的屏幕和视频格式,Bettig和他的团队一开始尝试了一个动态的品牌。
“我们有一个让人轻松联想起Y的符号,但它会伴随动效持续变化,并从你在观看的视频中汲取颜色。
它可能从你在观看的频道拉出个人资料配图或频道封面。
所以,这些动态的元素都是相互交叉的。
“
当设计师在工作室的白板上和简单的手机应用原型上做实验时,这个点子很行得通。
Bettig说:“但是当我们把这个点子放在产品里,就会乱七八糟,根本不奏效。
”
△一个布满新logo和应用界面的草图的墙
最后,设计部决定保持简洁。
他们尝试利用原来的logo,基于这个logo多年以来已经代表品牌,深入人心的形象。
“多年以来,播放键作为UI元素,居中出现在每个视频的正面,成了一个非官方的YouTube象征。
“在用户调研中,团队发现用户在识别YouTube时,播放键和YouTube单词本身效果几乎一致。
“播放键自己偷偷发芽了。
”
既然决定采用播放键加文字的方案,设计团队开始着手让它们更现代化。
Bettig说:“之前logo上的文字字体是1903年的AlternateGothicNo.2号,而且被人为调整过,所以有些奇怪的呆板的设计元素。
Tube中的U与You中的U不一样,所以如果你把它们叠起来,会发现并不吻合。
”播放键也有类似的问题,四个圆角并不相同。
对于那些对设计敏感的人来说,这些年来设计在扩展产品和支持新功能上并没有起到作用。
在Bettig三年前来这里时,YouTube还没有设计部。
现在,他和自己的团队有机会规整这些设计了。
△ YouTube的设计师RobertThompson展示了一个记录创意的笔记本
他们决定将原来的字体淘汰,并设计出自己的一套。
他们尝试基于经典的电视和录像带时代风格的字体,和更现代的外观来设计。
最后,他们采用保留了印刷时代的元素。
“我们希望保留一种时代感。
1903年被设计用于手动排版的印刷用字体,如今借助数字化平台继续发光发热,突破了时代局限。
”对于播放按钮的新配色,团队尝试在日常的媒体中寻找方案。
最后他们决定采用#FF0000,Bettig解释到:“看着红色,我们就会联想到一些和视频强联系的事物。
而且,这是一个纯粹的红,是视频中RGB三原色里的红”。
新的字体,logo和配色于今天在YouTube的桌面端、移动端推出。
当前阶段是希望新设计元素能够有效渗透YouTube提供的所有服务中。
Bettig说:“由于我们与主产品的差异,我们该如何在保持扩张的同时清晰的传达品牌,让一个即使在随意浏览应用商店的用户,也能一眼发现YouTube的产品。
“
随着logo的更新,桌面端和移动端应用也都更新了,新版本更符合MaterialDesign的设计美学。
视频观看和导航的设计主管RobertThompson表示:“我们是个高耦合度的网站,这使MaterialDesign成为构建我们设计的绝妙基石。
迁移到MaterialDesign风格意味着每个页面上的投影,线框和表格都会减少。
这有助于提高网站的可读性和舒适度,将舞台留给内容。
”像新的logo一样,向MaterialDesign风格的迁移,有助于给不断增长的应用群搭建一套通用的设计语言。
伴随统一的设计,YouTube也致力于为旗下不同的产品带来一致的功能。
比如今天在移动端上线的变速回放功能,之前只存在于桌面端。
设计团队表示,手机上非常受欢迎的功能很快就会迁移到桌面端,他们已经着手开始做了。
比如移动端的迷你播放器,可让你在浏览内容的同时继续观看正在播放的视频,桌面端的这个功能的已经进入测试环节了。
△ YouTube网站随着时间的推移发生的变化
如果Bettig的挑战是统一YouTube不断增多的应用的外观和风格,产品团队的目标则是即使用户使用产品的方式一直在增多,也要确保他们在YouTube获得最佳的体验。
产品副总裁ManuelBronstein说:“YouTube起航于一个简单的网站和低清晰的视频。
“我们正处于一个人们在移动设备、平板电脑和电视上观看高清视频的时代。
我们必须不断优化人们在不同设备和环境中使用产品的体验。
“
拿视频横宽比举个例子。
当YouTube刚开始时,它只支持横向视频。
但是现在,内容贡献者上传的视频可能是纵向的或方的。
这常带来糟糕的体验,因为纵向的视频只占可用屏幕的一小部分。
YouTube的产品管理副总裁Bronstein说:
“我们都讨厌一个小画面配上两边黑漆漆的背景。
”
正如Bettig和他的团队一样,产品团队第一个想法就是创造一些动态的,让使用场景带来最棒的设计。
他们采用了视差效果,你可以晃动手机来实现在竖着的视频内上下偏移。
Bronstein说:“这个想法阵亡于和用户的首轮接触。
“相反,团队将播放器固定,把几乎整个屏幕提供给原始比例的纵向视频,只在底部留下一个小小的控件,如果用户想要全屏的话可以自行关闭。
如果纵向视频播完后下一个视频是横向的或方的,那么播放界面会自动调整。
△ YouTube的新视频播放器,可以自动适应纵向视频
很多这些改版,从桌面端界面重构到纵向自适应功能,都已作为测试功能推出,推送给一小部分的用户和自愿参加测试的。
与任何大规模的在线服务商一样,在保持稳定飞行的同时更新飞机的部分零件。
YouTube知道自己一定要小心行事,以免惹恼数百万通过创作视频谋生的用户,还有那些会被细微的布局或功能变动触及底线的人。
虽然它们不像闪亮的新logo那么有故事性,但这样的改变往往考虑得更加深远,将YouTube朝着原汁原味的移动端体验持续优化,符合时下大多数用户和YouTube视频服务的交互方式。
当然,YouTube的最终目的是让你看更多的视频,在他的服务里停留更多的时间。
一个功能越简单,就越可能会有人用。
再讲一个今年二月推出的新功能,即用户可以通过双击屏幕来实现快退、快进。
有一小部分用户习惯于双击播放器来查看视频剩余时间,他们讨厌这个总导致他们快进快退的新功能。
主管视频导航设计的Thompson表示:“直到我们大规模投放这个功能后我们才知道这事,听到的都是投诉,完全没有任何积极的反馈。
“当我们停止实验来调整这个功能时,我们被淹没在要求将该功能回归的反馈中。
我们这才知道这个设计还是成功的。
“这个双击手势现在每天被使用数十亿次,上线没多久就超过了播放器进度条的使用频率。
YouTube正在尝试一种移动端浏览视频的新方法。
只需向左滑动,YouTube就会根据推荐算法提供新视频,就像有着数不清的娱乐内容的视频自助餐。
错过一个自己感兴趣的视频?只要右滑即可找回。
对于一个被数十个国家和数十种语言的15亿用户所使用的服务来说,寻找与用户产生共鸣的手势才是团队给产品带来黏性的最佳方式。
“我们正在尝试为所有的应用构建一个统一的语言,通过设计赋予这些应用一致的元素。
“Bronstein说,“我们始终致力于让YouTube更加人性。
”
「最近有哪些值得关注的改版?」
《超过10亿人使用的FACEBOOK改版了,新版的设计细节都在这儿!》
《天猫APP首页迎来史上最大改版,背后的设计过程是这样的!》
《我用目标导向设计法,完成了爱奇艺PC站风云榜的改版设计》
本文来自知乎专栏「非科班设计」,作者徐小马。
【优设网原创文章投稿邮箱:[email protected]】
================明星栏目推荐================
优优教程网:UiiiUiii.com是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。
开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。
设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com
程远
文章7031
人气11464.8w
优设内容总监
+关注作者
点赞
收藏3
复制本文链接
文章为作者独立观点不代表优设网立场,未经允许不得转载。
继续阅读本文相关话题
logo设计改版设计经验分享
全部新视野UI网页平面手绘电商交互产品下载神器职场学手绘学UI
程远
11464.8w人气
7031文章
+关注
查看主页
1Adobe疯狂星期四!200亿美元巨资收购Figma2新鲜出炉!iPhone14官方展示样机素材打包下载
文章目录
文章目录
你即将学会中文字体设计的知识设计的中宫指什么?不懂这个谈字体结构和造型都白搭!2.8w人阅读上一篇你即将学会APPUI的知识富有未来感的柏林之夜APP,是这样设计出来的2.3w人阅读下一篇
发评论!每天赢奖品
点击登录后,在评论区留言,系统会随机派送奖品
2012年成立至今,是国内备受欢迎的设计师平台,提供奖品赞助联系我们
本期奖品
梦幻爱丽丝
已累计诞生161位幸运星
查看获奖名单
发表评论
参与互动,获得铁粉徽章尊享权益查看详情>>
{{moreBtnTxt}}
Wo~本文的评论还空着,快来抢沙发
↓下方为您推荐了一些精彩有趣的文章热评↓
以上留言仅代表用户个人观点,不代表优设立场
评论就这些咯,让大家也知道你的独特见解
立即评论
阅读相关文章
陈子木
2019/06/24阅读7.2w
Logo设计
2019年LOGO设计趋势报告(下)
终于把LogoLounge的这篇LOGO设计趋势报告给翻译完了。
作者BillGardner不仅是资深的LOGO设计师,而且是LOGOLounge的创...
2019设计趋势logo设计8分钟阅读
程远
2018/12/08阅读2.1w
教程
周末福利!帮设计师提高眼界的18个Ted演讲!
遇到瓶颈的时候,这些演讲也许能给你灵感。
一、设计使人快乐的3种方式观看地址:https://www.ted.com/talks/don_norman_on_design_an...
TED提高眼界10分钟阅读
阅文体验设计YUX
2019/08/11阅读4.1w
产品设计
大厂是如何做改版设计的?来看QQ阅读7.0的总结!
本文从设计方向(前期研究、确定设计风格)、规范制定(制定视觉规范、构建视觉组件库)、方案输出(视觉界面呈现)、不足与反思等方面对7.0的视觉改版工作进行了总结回顾。
改版实战改版设计12分钟阅读
程远
2019/01/18阅读5.0w
教程
她为这部电影设计的海报,竟让大师黄海成了绿叶?
@你丫才美工 :想不到强大如设计师黄海,终于也给人当了一回绿叶。
提到「蹬蹬蹬蹬」有人会想到「英特尔」的专用曲,而童心未泯的人,就可能会唱起《千年等一回》。
无论是赵雅芝的《新白...
张渔海报设计5分钟阅读
陈子木
2020/12/02阅读2.4w
神器推荐
2020年12月最新精选设计素材和图库服务
进入12月份,是时候屯一波优质的设计素材,为年底的各大设计项目打好底子,冲一波啊!
免费图库图库网站7分钟阅读
优设推荐官精选热门话题设计干货文章157logo设计文章187设计规范文章206动效设计文章205
{{comTitle}}
{{comSubtitle}}
学手绘学UI
评论
收藏
分享
取消
设计专题
全部专题
专题97.5w位观众阅读已收录18篇持续更新海报设计拍一张照片,就能设计成一张海报拍一张照片就能设计成一张海报,这种技能你想不想要?8.5w人阅读拍一张照片,就能设计成一张海报!5.7w人阅读查看专题专题61.2w位观众阅读已收录24篇持续更新手机摄影掌握拍摄窍门去朋友圈收赞专业摄影师:如何用手机创作一组高质量的朋友圈组照?4.5w人阅读高手带你读经典!我从《纽摄》获得的30条手机摄影启示1.6w人阅读查看专题专题123.8w位观众阅读已收录23篇持续更新表情设计上亿人使用的表情是怎么诞生的?哈哈哈!设计师专用表情包合集(一)15.8w人阅读哈哈哈!设计师专用表情包合集(二)9.1w人阅读查看专题专题137.5w位观众阅读已收录10篇持续更新PSの技巧大全高手奥义操作方法总结省时高效!7个资深设计师常用的PS实用技巧6.0w人阅读谨慎使用!超欠揍的Photoshop使用装腔指南6.3w人阅读查看专题
热门频道
设计专题热门设计知识精挑细选查看专题细节猎人1分钟小短文揣摩设计真谛查看猎人优设读报行业资讯一站知晓查看读报优设琅琊榜顶尖设计作品聚集地查看榜单行业新闻行业大事小事全知道查看新闻设计问答高手大咖在线答疑解惑查看话题
继续阅读
大盘点!互联网产品Logo的分类及特点总结
推荐阅读4.8w
高手出品!快速提升设计感的7个版式小妙招
推荐阅读9.9w
官方复盘!2021全新淘宝品牌Logo升级设计解读
推荐阅读3.4w
蓝湖大咖访谈!专访木仓科技设计总监梁建利
推荐阅读1.6w
优设网uisdc.com
2012年成立至今,是国内极具人气的设计师交流学习平台
看设计文章,学软件教程,找灵感素材,尽在优设网
按Ctrl+D收藏本站返回首页
优设基础训练营
@林雅诺
关于我们
优设是国内极具人气的设计师平台,2012年成立至今,一直专注于设计师的学习成长交流。
我们通过优设网、优优教程网沉淀优质设计知识的同时,更率先试水新媒体领域。
目前旗下媒体矩阵包括:微博@优秀网页设计、微信公众号@优秀网页设计、抖音号@优设PS大神、@优设AI大神等,全网粉丝量过千万。
热门频道
文章专题
热门问答
设计大赛
免费教程
设计导航
设计课程
设计灵感
主编推荐
Banner设计
海报设计
Logo设计
插画绘画
字体设计
支持与服务
联系我们
广告投放
免责声明
作者投稿
友链申请
意见反馈
优设微博
@优秀网页设计380W粉丝!每日更新设计干货@优设强烈推荐!优设官方品牌微博@优优教程网官方微博,海量教程看不完@优设基础训练营零基础入门,带你成为软件高手
官方群
优设官方微信群
01优设25+设计师交流群02优设30+设计师交流群03优设求职招聘群04优设同城交友群05优设私单群06优设学生交流群
07优设UI设计师交流群08优设插画师交流群09优设平面品牌设计师交流群10优设3D设计师交流群11优优教程自学团12优设VIP知识星球交流群
微信扫码添加管理员招财
微信号:uisdc411
严格审核打造高质量交流群
进群会有面试题谢绝打广告
优设微信
每天官微五分钟
一年萌新变大神
扫码关注
1000W
优设新媒体矩阵等你来关注
优设优优教程网优设大课堂设计师导航细节猎人优设训练营
每天官微五分钟一年萌新变大神
扫码关注
每天10篇设计干货300万设计师关注!
访问官方微博
全部文章17644篇UI1657篇网页296篇平面1261篇手绘179篇电商155篇交互670篇产品1794篇下载377篇神器推荐1153篇新视野591篇职场1181篇
设计专题热门设计知识精挑细选细节猎人1分钟小短文揣摩设计真谛优设读报行业资讯一站知晓设计问答高手大咖在线答疑解惑设计圈分享你的观点吧优设琅琊榜顶尖设计作品聚集地行业新闻行业大事小事全知道活动大赛精彩纷呈的设计活动及赛事求职招聘理想岗位等你选设计师心有猛虎细嗅像素
设计导航精选520个设计师网站图书导航高分必读设计书籍大全电商导航全球顶尖电商网站合集色彩导航中日传统色彩一网打尽
优设大课堂名师高徒!专业实战就业优设训练营就业衔接!只教设计真本领优设私房课火什么看这里!好课风向标设计公开课顶尖设计高手免费公开课
学教程3000+免费教程在线观看找灵感每日都有新灵感找软件省时高效的设计神器都在这知识树热门软件零基础入门字体下载最新免费可商用字体
搜索
搜索
灵动岛UI设计规范Behance面试设计趋势样机苹果IP形象设计大赛数据可视化C4D元宇宙B端Logo作品集Figma包装mastergoBlendersketchBanner设计优设字体改版免费商用字体自学指南UI配色设计师爱看的520个网站9个国际顶尖设计网站必备!MasterGo设计资源iOS16太强大!一摁抠图灵动岛!设计师如何评价
近期热门
自学设计却半途而废?让优设和优优来帮你从小白成为专业设计师2.6w设计师在看平面设计作品不出彩?来看高手总结的18个细节!1.8w设计师在看海报设计如何凸显人文气息?用手写中文字体准没错!(附字体下载)2.1w设计师在看猎聘网总监:为什么有人工作才两年,能力远超五年的设计师?2.2w设计师在看这12个常用动效设计方法,很适合用到你的界面里1.6w设计师在看
微信赞赏好内容值得被赞赏学到了,来请作者喝杯咖啡吧程远优设提醒:您的赞赏金额将直接打赏给作者
延伸文章資訊
- 1youtube logo設計理念的評價費用和推薦
youtube logo設計理念的評價費用和推薦,在YOUTUBE、PINTEREST、EDU.TW、DCARD和毛城城MoCity這樣回答,找youtube logo設計理念在 ...
- 2YouTube成立12年後首次更改Logo - iThome
包括YouTube app改版更適合在行動平台使用、可依使用者控制播放速度、播放格式、建議影片、以及網站採用Material Design新設計風格及Dark Theme等。
- 3youtube logo設計理念2022-精選在Youtube/網路影片/Dcard上 ...
圖片全部顯示免費線上Logo設計,商標製作工具– DesignEvo社交媒體Logo. 我們為你提供適合眾多社交平臺的logo設計,包括Facebook, Youtube,Twitter, ...
- 4全球最大影片分享網站YouTube更換新LOGO - 品牌癮
- 5youtube logo設計2022-精選在Youtube/網路影片/Dcard上的 ...
youtube logo設計理念YouTube. Google 新logo(129454) 永寧國小三款90週年校慶LOGO設計理念介紹- Logo設計欣賞– 品牌Logo設計1.