1. Sketch UI设计网——产品UI设计学习交流平台首页
  2. ARTUI

译·雅虎平昌冬奥会专题iCON设计——ARTUI用户体验设计学院

译·雅虎平昌冬奥会专题iCON设计——ARTUI用户体验设计学院

你可能已经看了多场韩国平昌冬奥会的精彩比赛,我有机会与雅虎合作创建他们自己的平台上使用的图标版本,我很高兴能够分享我的设计过程。

顺便说一句,平昌奥运会有自己的超棒图标集,然而,雅虎决定设计属于自己的图标,因为他们需要小尺寸(比如20px)。

从了解运动开始

我都没有见过几次雪,对冬季运动更是毫无头绪,甚至不知道还有这么多运动存在。译·雅虎平昌冬奥会专题iCON设计——ARTUI用户体验设计学院

译·雅虎平昌冬奥会专题iCON设计——ARTUI用户体验设计学院

所以我首先进行了彻底的研究,我观看了很多2014年冬季奥运会的比赛,以获得每项运动的背景。因为这个项目涉及人物,而且要适用于小尺寸,因此图标必须足够简单,所以我要找到准确的姿势来表示每项运动。

建立根本

当我对一项运动有了足够的了解,我就开始分析每项运动的最有代表性姿势,目标是建立起姿势与运动之间的联系,轻松的辨识出是哪项运动。

雅虎有一个很好的人体图标设计系统,我进行了一些调整,以创建一个比例和简化解刨指南。

译·雅虎平昌冬奥会专题iCON设计——ARTUI用户体验设计学院

捕捉姿势

为了让你了解这个过程,我将以“滑雪”为例。通常我会根据参考文件随意的绘制一堆图标,然后选取较好的一个。

译·雅虎平昌冬奥会专题iCON设计——ARTUI用户体验设计学院

对于这项运动,当运动员做出高难度/优雅的动作时,我们大脑更会记住这些动作或姿势。

此时,我与客户一起讨论了这些想法,我也得到了很多反馈。

小提示

· 不要将自己关起来做设计,保持讨论,分析别人的反馈;

· 从低保真开始探索设计方向;

译·雅虎平昌冬奥会专题iCON设计——ARTUI用户体验设计学院

译·雅虎平昌冬奥会专题iCON设计——ARTUI用户体验设计学院

译·雅虎平昌冬奥会专题iCON设计——ARTUI用户体验设计学院

风格发展与延伸

在我们确定运动的标志性姿势后,Ryan(设计总监)强调了图标的功用与用于区分的风格特征。

译·雅虎平昌冬奥会专题iCON设计——ARTUI用户体验设计学院

初稿太单调而且不够流畅,经过几次迭代修改后,Ryan提到我们可以在锥形的腿上得到流畅与运动感。

我们最终通过使用锥形的腿和流体形状来更好的表达各项运动。我们还利用空白来更清晰的表现一些细节。下面是花样滑冰的图标,我们也尽量将这些原则用于所有图标。

译·雅虎平昌冬奥会专题iCON设计——ARTUI用户体验设计学院

数字化

在我完成草图并且雅虎对其满意后,我转到Illustrator进行数字化绘制。在设计软件里调整细节更轻松简单。

译·雅虎平昌冬奥会专题iCON设计——ARTUI用户体验设计学院

最后结果

我们花了2周的时间共同完成这个图标集。此图标集目前正在其搜索平台中使用。我希望通过分享这个过程,可以激励一些热爱图标的人开始学习并制作一些图标。

译·雅虎平昌冬奥会专题iCON设计——ARTUI用户体验设计学院

译·雅虎平昌冬奥会专题iCON设计——ARTUI用户体验设计学院

译·雅虎平昌冬奥会专题iCON设计——ARTUI用户体验设计学院

译·雅虎平昌冬奥会专题iCON设计——ARTUI用户体验设计学院

工具

· Procreate + iPad + Apple Pencil

· Adobe Illustrator

· Macbook Pro 15

原文 https://medium.com/budi-brain/designing-yahoos-winter-olympics-icons-75ccdafacc3d

译·雅虎平昌冬奥会专题iCON设计——ARTUI用户体验设计学院

湖南长沙 · ARTUI2018最新开班

2018春季交互/UI设计精品小班招募中

3月中上旬开课

名额所剩不多

查看详情 >>

译·雅虎平昌冬奥会专题iCON设计——ARTUI用户体验设计学院

添加 “小U” 可微信报名

译·雅虎平昌冬奥会专题iCON设计——ARTUI用户体验设计学院

原文始发于微信公众号(ARTUI用户体验设计中心):译·雅虎平昌冬奥会专题iCON设计——ARTUI用户体验设计学院

文章来自互联网,转载请注明:https://www.sketchui.net/10223.html

发表评论

电子邮件地址不会被公开。