人物肖像速写_去哪儿? 优步肖像之旅

人物肖像速写

In early 2018, the Uber brand team started a rebranding exercise, exploring a fresh take on what it means to be a global transportation and technology company. A new logo was developed in tandem with a bespoke sans-serif typeface called Uber Move. What followed was a natural progression towards universal symbols of iconography that could scale across all products, services, and surfaces. Here’s a glimpse into the evolution and processes.

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

With typography being one of the most visible parts of our identity, the next step was to figure out how to use it in our Rider and Driver apps. Almost every time we use an icon, it will be accompanied by text, reinforcing each other. It is important that they pair well.

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

Image for post
We used letters such as k, g, o, etc for the icons’ building blocks.
我们为图标的构建块使用了诸如k,g,o等字母。
Image for post
Characteristics: straight lines, generous rounding, straight caps, parallel terminals.
特点:直线,大圆角,笔直,平行端子。

Side by side, our types and icons reflect our original inspiration from the shape of roadway and transit signs. We developed three sets of weights for them.

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

Image for post
We created 3 sets of core icons for the 3 typography weights
我们为3种印刷权重创建了3套核心图标

We iterated these core sets in order to apply to our user interfaces. A design language emerged: Simple. Having just one set would leave little room for interpretation when and where to use what icon. One icon set, for everything. We reduced three icon weights into one.

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

We experimented to determine that the filled version (such as the ones for the Bold weight above) worked best for glanceability. Its visual weight served well as a visual anchor. We also got rid of the Light and Bold weights. The strokes on the Medium weight gave us more pixel wiggle room in small mobile devices.

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

简单 (Simple)

Our lines of business require icons for thousands of user scenarios. We have to redesign existing icons and design new ones in a no-nonsense way. Our ride customers and partners would not care whether we just had a rebrand or not, they need a functional user experience to move on with their lives.

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

Image for post
Small visual anchors like icons made navigation instruction more scannable
较小的视觉锚点(例如图标)使导航指令更可扫描

To make an icon simple is not by adding details until it is unmistakably a car. An icon canvas is only 24 by 24 pixels. Its small size allows it to fit inside a button or to accompany other information to make them more scannable. Too many shapes and lines will not fit into the canvas. Therefore, every pixel we draw must be intentional and all decorations should be removed.

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

Image for post
We reduced the number of details from our old icon (left)
我们从旧图标(左)中减少了详细信息的数量

形式跟随功能 (Form follows function)

Our main goal was to serve users regardless of environmental conditions. A person could hail a Uber ride while standing on a dim lit sidewalk. They could also be running down an airport escalator while looking at the screen. Aiming for clarity, we constructed our icons using basic geometry and placing points only on whole-number coordinates to avoid anti-aliasing. They must be sharp and crisp icons.

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

Image for post
Icons constructed from basic shapes
从基本形状构造的图标

No users want to learn new shapes and icons if they don’t have to. One icon should allow multiple interpretations, making it possible for other designers to reuse an icon for different purposes.

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

Image for post
Our icons need to be flexible
我们的图标需要灵活

Only after achieving the icon’s business goal, we refined its shapes to be uniform with the Uber brand. For example, our icons consistently used the 3px stroke to deliver visual weight as a set.

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

Image for post
Use the 3px-thick strokes across the set
在整个场景中使用3像素厚的笔触

We also made a company-wide decision to shape corners and stroke terminals square. This brought our iconography and typography even closer together. We only use rounded corners on larger rounding and avoid softening shapes unless doing so makes the icon more recognizable.

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

Image for post
Cap the terminals parallel to the line segment and keep the corners shape
将端子平行于线段盖上并保持拐角形状

新图标请求 (New icon request)

Oliver Lukman is the main architect of our icon library. Based in Amsterdam, he works closely with product managers and designers across Uber global offices. His process has two main steps:

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

  1. Break the object down to real-life parts.

    将对象分解为真实的部分。
  2. Find the most basic geometric shapes to draw those parts.

    找到最基本的几何形状来绘制这些部分。

Take the Like icon as an example. A thumbed up hand consists of: the palm which can be a rectangle, the thumb which can be a triangle, and the remaining fingers as a trapezoid.

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

Here’s how these parts come together:

这些部分如何组合在一起:

Image for post
How to make a thumbs up hand
如何竖起大拇指

This sounds easier said than done. When a new icon designer, Vietanh Nguyen, attempted to draw a bicycle icon for the micro-mobility business, his design was immediately rejected after turning on the Show Outlines mode (Cmd+Y in Figma and Illustrator).

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

Image for post
Vietanh’s icon outlines (left) resembles a dinosaur more than the frame of a bicycle.
Vietanh的图标轮廓(左)比起车架更像恐龙。

We finalize new icon designs with all the lessons learned above:

我们根据以上所有经验教训完成了新的图标设计:

  • The outline must speak for itself. Use the fewest shapes possible.

    大纲必须说明一切。 使用尽可能少的形状。

  • The icon must look sharp anywhere. Align vertices and lines on whole-number coordinates within the 24x24 grids.

    该图标在任何地方都必须看起来清晰 。 将顶点和直线在24x24网格内的整数坐标上对齐。

  • A customer in hurry with 10% screen brightness can still recognize the icon. Use thick stroke as much as possible.

    屏幕亮度只有10%的客户仍然可以识别该图标 。 尽可能使用粗笔。

Image for post
Just 4 strokes, an Uber thumbs up icon is straightforward
仅需四笔,Uber竖起大拇指图标就很简单

Iconography at Uber is constantly evolving. With so much change and cultural considerations in our business and the ride-sharing space, the evolution of our icon catalog will continue to grow with our brand and design systems.

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

Follow us on Uber Design.

关注我们的优步设计 。

翻译自: https://medium.com/uber-design/where-to-the-journey-to-ubers-iconography-bf8efd2be446

人物肖像速写

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/274345.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

hp-ux锁定用户密码_我们如何简化925移动应用程序的用户入门— UX案例研究

hp-ux锁定用户密码Prologue: While this is fundamentally a showcase of our process in the hopes of helping others, it’s also a story about the realism of limitations when working with clients and how we ultimately were able to deliver a product the client w…

微信公众号无需二次登录_您无需两次解决问题-您需要一个设计系统

微信公众号无需二次登录重点 (Top highlight)The design system concept can be differently defined according to each person’s background. Designers may say that a design system is a style guide while developers may say it is UI standards, or specs, or even as…

视觉工程师面试指南_选择正确视觉效果的终极指南

视觉工程师面试指南When it comes to effective data visualization, the very first and also the most critical step is to select the right graph/visual for the data that you want to present. With a wide range of visualization software that is available offerin…

问题反馈模板_使用此模板可获得更好,更有价值的UX反馈

问题反馈模板Feedback is an important part of UX design. To improve the work you do you need to be able to give and receive feedback. Receiving valuable feedback is for a very large part up to you.反馈是UX设计的重要组成部分。 为了改进您的工作,您需…

iofd:文件描述符_文字很重要:谈论设计时18个有意义的描述符

iofd:文件描述符As designers, many of us think we’re just visual creatures. But creating visuals is only half of the job. The other half is verbal communication — actually talking about design. Whether we’re showcasing our own work, giving or receiving c…

保护程序猿滴眼睛-----修改VS 2008 编辑器颜色 (修改 chrome浏览器的背景色)

前几天更改了 chrome 的背景色后,虽然有些地方看起来不和谐,想百度的首页,显示出了大快的图片区域,但是,整体感觉这个颜色设置真的对眼睛有一定保护作用。。。 所以,再顺便修改一下 经常用的 vs2008 编辑器…

数据可视化 信息可视化_可视化哲学的黎明

数据可视化 信息可视化Note: this is the foreword of the book Data Visualization in Society (Amsterdam University Press, 2020)注意:这是《 社会中的数据可视化 》一书的前言 (阿姆斯特丹大学出版社,2020年) Geographer John Pickles once wrote …

HTTP 错误 404.2 - Not Found 由于 Web 服务器上的“ISAPI 和 CGI 限制”列表设置,无法提供您请求的页面...

详细错误:HTTP 错误 404.2 - Not Found. 由于 Web 服务器上的“ISAPI 和 CGI 限制”列表设置,无法提供您请求的页面. 出现环境:win7 IIS7.0 解决办法:IIS的根节点->右侧“ISAPI和CGI限制”->把禁止的DotNet版本项设置为允许…

重口味动漫_每种口味的图标样式

重口味动漫The icons are, without a doubt, one of the most used graphic elements today in the interface design of digital products. And to make this statement with some degree of certainty, we do not even need a very robust statistical analysis. Just rememb…

从头开始vue创建项目_我正在以设计师的身份开始一个被动的收入项目。 从头开始。...

从头开始vue创建项目Do you ever read an article on Medium (or elsewhere) about passive income, side projects and big money making blogs? When I read such an article it looks like it is easy to do yourself if you just put in the work. To see if that is the …

Exaple2_1(显示转换)

public class Example2_1{ public static void main(String arg[]){ char ca; System.out.println(""c"unicode:"(int)c); System.out.println(":"); for(int i(int)c;i<c25;i){ System.out.println(""(char)i); } }}转载于…

英国文化影响管理风格_文化如何影响用户体验

英国文化影响管理风格重点 (Top highlight)The Internet makes the world a smaller place. You can make money or gain users outside of your demographic with a digital product or service easier than a physical business. But, is selling the exact same design of t…

element ui 空格_空格是您的UI朋友。 大量使用它。

element ui 空格Originally published at marcandrew.me on July 30th, 2020.最初于 2020 年7月30日 在 marcandrew.me 上 发布 。 Ah good old White Space. One of the simplest things to add to your designs to improve both your UIs, and user experience. Let me shar…

qt 设计师缩放_重新设计缩放体验

qt 设计师缩放With the COVID-19 pandemic hitting countries across the world, a lot of people have now switched to video meetings. Be it for your official meetings, webinars, entertainment sessions — video meetings are the new normal. We saw these video mee…

安卓应用部件_设计应用程序小部件的痛苦和喜悦

安卓应用部件Some people say widgets are a thing of the past, but recently we faced a market for which this was one of the main features users were asking for. A bit of googling showed there are not a lot of useful articles covering widget design (most info…

ux设计中的各种地图_UX设计中的空白

ux设计中的各种地图UX设计中的空白是什么&#xff1f; (What is white space in UX design?) This article will help you learn about white space and why it so important in UX design.本文将帮助您了解空白以及为什么空白在UX设计中如此重要。 White space is a very us…

ux设计中的各种地图_如何在UX设计中使用颜色

ux设计中的各种地图Color is the mother tongue of the subconscious.颜色是潜意识的母语。 — Carl Jung—荣格 Color has more to say than meets the eye. As a building block of visual language, color highlights, guides attention, and unifies elements. In UX, co…

《Two Dozen Short Lessons in Haskell》学习(十八) - 交互式键盘输入和屏幕输出

《Two Dozen Short Lessons in Haskell》&#xff08;Copyright © 1995, 1996, 1997 by Rex Page&#xff0c;有人翻译为Haskell二十四学时教程&#xff0c;该书如果不用于赢利&#xff0c;可以任意发布&#xff0c;但需要保留他们的copyright&#xff09;这本书是学习 Ha…

figma设计_Figma中简单,可重复使用的设计系统

figma设计Putting together a design system may seem like an unnecessary hassle. It’s often easier to jump straight into designing things without having to worry about styles, components, or libraries. Some might even argue that when it comes to smaller pro…

Teach Yourself Java 2 in 21 Days 书中样例代码实践

找了好几书JAVA的书&#xff0c;看了几章&#xff0c;都看不下去。 我觉得适合《Teach Yourself Java 2 in 21 Days》&#xff08;Rogers Cadenhead Laura Lemay&#xff09;还是适合我的。 孙卫琴那本&#xff0c;我感觉就罗嗦多了没到我点子上。 接口&#xff0c;抽象类这些内…