在 2018 年初,Uber 品牌团队开始了品牌重塑工作,探索了成为全球运输和技术公司意味着什么的崭新面貌。一个新的徽标是与定制的无衬线字体(称为 Uber Move)串联在一起开发的。随之而来的是自然发展为通用的图像符号,可以在所有产品,服务和表面上进行扩展。这是对演变和过程的一瞥。

    【Uber图标】去哪儿? Uber的肖像之旅 - 图1

    【Uber图标】去哪儿? Uber的肖像之旅 - 图2

    我们的字体与我们一样独特且易于使用。受到世界上最常用的运输示例的启发,它旨在最大程度地提高其在所有应用程序中的影响力,同时使其易于阅读,可使用且易于识别。它的名字是:Uber Move。” —优步品牌书 2018

    由于排版是我们身份中最明显的部分之一,下一步就是弄清楚如何在我们的 Rider 和 Driver 应用程序中使用它。几乎每当我们使用一个图标时,它就会伴随文本,相互补充。它们配对非常重要。

    【Uber图标】去哪儿? Uber的肖像之旅 - 图3

    【Uber图标】去哪儿? Uber的肖像之旅 - 图4

    我们为图标的构建块使用了诸如 k,g,o 等字母。

    【Uber图标】去哪儿? Uber的肖像之旅 - 图5

    【Uber图标】去哪儿? Uber的肖像之旅 - 图6

    特点:直线,大圆角,笔直帽,平行端子。

    同时,我们的类型和图标从道路和公交标志的形状中反映出我们的原始灵感。我们为他们开发了三组权重。

    【Uber图标】去哪儿? Uber的肖像之旅 - 图7

    【Uber图标】去哪儿? Uber的肖像之旅 - 图8

    我们为 3 种版式权重创建了 3 套核心图标

    我们迭代了这些核心集,以便应用于我们的用户界面。一种设计语言应运而生:简单。仅使用一套图标就几乎没有解释空间,无论何时何地使用什么图标。一个图标集,适用于所有内容。我们将三个图标的权重减少为一。

    我们进行了实验,以确定填充版本(例如上述粗体的版本)最适合浏览情况。它的视觉重量很好地充当了视觉锚点。我们还摆脱了轻量和粗体重量。中等重量的笔触为我们在小型移动设备中提供了更多的像素摆动空间。

    我们的业务需要数千个用户方案的图标。我们必须重新设计现有图标,并以废话的方式设计新图标。我们的乘车客户和合作伙伴不会在乎我们是否拥有品牌重塑,他们需要实用的用户体验来继续他们的生活。

    【Uber图标】去哪儿? Uber的肖像之旅 - 图9

    【Uber图标】去哪儿? Uber的肖像之旅 - 图10

    像图标这样的小视觉锚点使导航指令更可扫描

    要使图标简单,就不能添加细节,除非它无疑是一辆汽车。图标画布只有 24 x 24 像素。它的体积小巧,可以放入按钮中或与其他信息一起使用,以使其更易于扫描。太多的形状和线条无法容纳在画布中。因此,我们绘制的每个像素都必须是有意的,并且所有装饰都应删除。

    【Uber图标】去哪儿? Uber的肖像之旅 - 图11

    【Uber图标】去哪儿? Uber的肖像之旅 - 图12

    我们从旧图标(左)中减少了详细信息的数量

    我们的主要目标是在不受环境影响的情况下为用户提供服务。站在昏暗的人行道上,一个人可以欢呼优步。他们也可能一边看着屏幕,一边在机场自动扶梯上奔跑。为了清晰起见,我们使用基本几何图形构建了图标,并仅将其放置在整数坐标上,以避免出现锯齿现象。它们必须是清晰锐利的图标。

    【Uber图标】去哪儿? Uber的肖像之旅 - 图13

    【Uber图标】去哪儿? Uber的肖像之旅 - 图14

    从基本形状构造的图标

    没有用户愿意学习新的形状和图标。一个图标应该允许多种解释,从而使其他设计师可以将图标重复用于不同的目的。

    【Uber图标】去哪儿? Uber的肖像之旅 - 图15

    【Uber图标】去哪儿? Uber的肖像之旅 - 图16

    我们的图标需要灵活

    仅在达到图标的业务目标后,我们才将其形状进行改进,使其与 Uber 品牌保持一致。例如,我们的图标始终使用 3px 笔划作为一组来传递视觉重量。

    【Uber图标】去哪儿? Uber的肖像之旅 - 图17

    【Uber图标】去哪儿? Uber的肖像之旅 - 图18

    在整个场景中使用 3 像素厚的笔触

    我们还决定在全公司范围内确定角和笔触端子的正方形。这使我们的肖像和版式更加接近。我们仅在较大的倒圆角上使用圆角,并避免软化形状,除非这样做会使图标更易于识别。

    【Uber图标】去哪儿? Uber的肖像之旅 - 图19

    【Uber图标】去哪儿? Uber的肖像之旅 - 图20

    平行于线段盖住端子并保持拐角形状

    奥利弗 · 卢克曼(Oliver Lukman)是我们图标库的主要架构师。他位于阿姆斯特丹,与 Uber 全球办事处的产品经理和设计师紧密合作。他的过程主要包括两个步骤:

    1. 将对象分解为真实的部分。
    2. 找到最基本的几何形状来绘制这些零件。

    以 “赞” 图标为例。竖起大拇指的手包括:可以是矩形的手掌,可以是三角形的拇指,其余的手指为梯形。

    这是这些部分如何组合在一起的方法:

    【Uber图标】去哪儿? Uber的肖像之旅 - 图21

    【Uber图标】去哪儿? Uber的肖像之旅 - 图22

    如何竖起大拇指

    这听起来说起来容易做起来难。当新的图标设计师 Vietanh Nguyen 尝试为微动业务绘制自行车图标时,打开 “显示轮廓” 模式(Figma 和 Illustrator 中的 Cmd + Y)后,他的设计立即被拒绝。

    【Uber图标】去哪儿? Uber的肖像之旅 - 图23

    【Uber图标】去哪儿? Uber的肖像之旅 - 图24

    Vietanh 的图标轮廓(左)更像是恐龙,而不是自行车的框架。

    我们总结了以上所有经验教训,最终完成了新的图标设计:

    • 大纲必须说明一切。使用尽可能少的形状。
    • 该图标在任何地方都必须看起来清晰。将顶点和直线在 24x24 网格内的整数坐标上对齐。
    • 屏幕亮度只有 10%的客户仍然可以识别该图标。尽量使用较粗的笔画。

    【Uber图标】去哪儿? Uber的肖像之旅 - 图25

    【Uber图标】去哪儿? Uber的肖像之旅 - 图26

    仅需四笔,Uber 竖起大拇指图标就很简单

    Uber 的图像学在不断发展。在我们的业务和乘车共享空间中发生了如此多的变化和文化考量之后,图标目录的发展将随着我们的品牌和设计系统而继续增长。

    关注我们的优步设计
    https://medium.com/uber-design/where-to-the-journey-to-ubers-iconography-bf8efd2be446