赞助商
立即赞助

Tubik Studio 是怎么为华为定制整套 UI 图标的?

UI设计3年前 (2021)更新 流光
2.9K 0 0

编者按:一套 UI 界面当中,核的 APP 图标用户每天都接触、常使用的视觉组件交互对象。设图标的时候,用到家熟悉的元素能贴合用户认知,醒目、统一,也足够「隐形」,避免喧宾夺主。今天这篇文章,自著的 Tubik Studio 团队,他们为华为旗下的 EMUI 10 系统设计核心的图标系统,来看看他们的设计程吧。

Tubik Studio 是怎么为华为定制整套 UI 图标的?

我们总不低估一个操系统基础图标,对产品的用和合意的影响。基础图标虽小巧,但是对整个操系统而言,总是极具影响力的,因为他们是用户界面的核心元素,帮助用户快速直观地在系统中定位、浏览、导航。但是,对设计师而言,图标的设计始终是挑战,它看来最为简单,但则为最为艰难的工。

图标需要效,人一目了然,但是要具备良好的可识别性,在传统和创之间达到平衡。这一次,Tubik Studio 设计团队将要给华为的 EMUI 10 来设计图标,而这篇章将会为你揭示背后的设计过程。

这次的项目主由 Sergii Valiukh 、Arthur Avakyan  Polina Taran 负责。这次的设项目从初的探索构思入手,逐渐始绘制草图,探索样式,一直到后打磨,完设。

Tubik Studio 是怎么为华为定制整套 UI 图标的?

项目内容

为华为 EMUI 10 系统的户界面设计基础的图标

客户介绍

我们在 2019 年夏季,收到了来自华为的邀约,这次的项目要重设计 EMUI 这套基于 Android 系统的户界面基础图标,这套图标会来适配华为的舰手机,这些图标将会随着版的系统署到这些手机产当中。我们的任务,是创建总计 54 款符合当潮流趋势的图标,这些图标要够贴合牌和已有户的偏好,并且够吸引的户。

这图标设计项目如今已经在当的华为手机产中应且署好了,最早使这套图标的智手机号为 Mate 30 ,紧接后的是 P40。

Tubik Studio 是怎么为华为定制整套 UI 图标的?

设计过程

在整个操系统中,图标是始终位用户视野以内、最基础的最核心的互元素,通常用户每天同核心的基础 APP 进行互,有时一天达几次,因此它们应当具备良的功能,还应该够美观,给用户带来满感。同时,套图标的设计,也应当够统一,以协的验切到整个 EMUI 的设计系统当中,贴合整的样式特征。

,我们使了一整套图标格系统,应对同需求,在设计的过程中,这套格有助于确保有图标外尺寸的一致性,保证了元素的统一性。

Tubik Studio 是怎么为华为定制整套 UI 图标的?

为了发掘全的视角,我们决定从传统的手绘图标开始,寻重塑图标设计的方法。这些图标涉及到的元素,早已为全球数百万户熟知,要重设计图标外观,并且还要成套且统一,这本身就是一个巨大的挑战。

Tubik Studio 是怎么为华为定制整套 UI 图标的?

如「电话」图标对应的听筒元素、「信息」图标对应的气泡对话框这样的元素,是可全抛弃重创的,我们的真正的切入点是在形态和色彩上寻求解决方案。

越是简单的东西,重塑起来就越难。

在实际的设计过程中,我们尝试了数百计的变体,从全放飞、非规的的外,到极规,大熟知的解决方案,我们都逐一试过。而在色彩上的尝试相对会显得更具有实验性:我们尝试使明亮的紫罗兰色、栗色和浅绿色来进行混搭。

当然,我们很清楚,这样的实验性的作探索过程中的一小,但它必须的,创造新设的种子,寻求确答案的必之。

Tubik Studio 是怎么为华为定制整套 UI 图标的?

设过程,一件趣的事发设「相机」图标的过程中。我们试过很多不同的图标造型,不同的元素,不同的样式,但其中始终一细节不变的,那就右角的小点。这了暗示用户,华的摄模组自徕卡,这色的小点就向其致敬的标识。

Tubik Studio 是怎么为华为定制整套 UI 图标的?

下面的概念设,则强化了图标之间的几何轮廓的差异,从提升图标智能手机屏幕的对比度识别度。

Tubik Studio 是怎么为华为定制整套 UI 图标的?

下一,我们基于几何图形外观差异性,设了多种造型不同但同样优的图标。基于这种风格概念行延伸的过程中,我们会优先考虑圆形的元素。「天气」图标明显既不合圆形也不合方形呈,所以我们使用的云太两种元素的组合。「钱包」图标使用的矩形,然后搭配卡片的组合。尽造型整体相对自由的,但所的图标都遵循图标网格,并且视觉权重尽可能统一。

Tubik Studio 是怎么为华为定制整套 UI 图标的?

色彩样式,我们则加倾向于渐变。色彩渐变,纯扁平的图标显得过于幼稚「古早」,足够的品质感,所以,我们新的图标设,始加入渐变色彩,提升质感。

Tubik Studio 是怎么为华为定制整套 UI 图标的?

不过,终版本当中,我们还保留了图标外部的圆角矩形的外轮廓,然后将图标元素的内径行了当缩减,渐变核的简约几何特征依然整套设的高优先级。

Tubik Studio 是怎么为华为定制整套 UI 图标的?

这套设方案展了整套 UI 界面中,图标这小元素的设所需投入的精力潜的难度。图标足够协调、观、易用还贴合品牌特征、还区别于以往,一件相当不易的事。

Tubik Studio 是怎么为华为定制整套 UI 图标的?

细节里藏魔鬼,任何细小的元素、线条轮廓、色彩的变化都可能会屏幕、被感知到。

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

从少年到大叔,只用了5年,还记得我刚入职的第一份工作的导师和我说:「设计没有什么捷径,有的只是多看、多想、多做,逻辑思...
ui设计
@Daidai丶呆 :本篇文章写写近期看到的比较有趣的话题,「一款好产品,所需具备的条件」。 产品角度 早前有看到张小龙说 :一...
ui设计
每个公司都有着它的独特性,这种独特性是由它的发展历程和特有的服务细节所塑造的,也正是因为这种独特性的存在,设计师总能...
logo设计
生活条件的提升使得大家对于健康的生活方式有了更多的需求。健身类的应用就是帮助力求健康的用户提升生活品质的帮手。借助这...
App设计
想想图标的绘制也是有历史的,从刚开始 ps 用面切法运用布尔运算去切,有时候线条也是用面切面得到。随着线性图标的火爆和普...
ICON
在业务迭代周期内,产品经理和设计师对要做的产品需求和功能点进行需求分析和设计讨论的过程中,有时会出现一些拿捏不定的设...
可用性测试
「是能点还是不能点呢?」这是用户在面对一些操作按钮时,大脑中会迟疑的问题。 按钮越多,做决定的时间就越长。用户必须仔...
ui设计
编者按:看似简单的投影,在高手眼里有千万种变化。不信看看今天这篇文章,让资深设计师教你做投影设计! 在今天的 UI设计中...
APP UI