bv1946伟德体育-体育betvictro伟德

bv1946伟德体育视点
bv1946伟德体育>bv1946伟德体育视点>Tubik Studio 是怎么为华为定制整套 UI 图标的?
Tubik Studio 是怎么为华为定制整套 UI 图标的?
发表时间:2020-07-23

编者按:一套 UI 界面当中,主要的 APP 图标是用户每天都要接触、经常使用的视觉组件和交互对象。策划图标的时候,要用到众家最熟悉的圆素才能贴合用户吟味,要醒目、统一,也要足够「隐形」,避免喧宾夺主。今天这篇文章,来自著名的 Tubik Studio TEAM,他们为华为旗下的 EMUI 10 系统策划了主要的图标系统,来看看他们的策划过程吧。



吾们总不会低估一个操作系统底子图标,对于产品的可用性和合意性的影响。底子图标虽然小巧,但是对于整个操作系统而言,总是极具影响力的,因为他们是用户界面的主要圆素,扶掖用户快速直观地在系统中定位、浏览、导航。但是,对于策划师而言,图标的策划始终是挑战,它看起来最为easy,但实则为最为艰难的work。


图标需要高效,让人一览无遗 ,但是也要具备良好的可识别性,在上卫和创新之间达到平衡。这一次,Tubik Studio 策划TEAM将要给华为的 EMUI 10 来策划图标,而这篇文章将会为您揭示背下的策划过程。


这次的porject主要是由 Sergii Valiukh 、Arthur Avakyan 和 Polina Taran 来负责。这次的策划porject从最初的探索构思入手,逐渐开始绘制草图,探索样式,一直到末了打磨,完成策划。



porject始末


为华为 EMUI 10 系统的用户界面策划底子的图标


衣食父母介绍


吾们在 2019 年夏季,收到了来自华为的邀约,这次的porject要重新策划 EMUI 这套基于 Android 系统的用户界面底子图标,这套图标会用来适配华为旗下的旗舰手机,这些图标将会随着新版的系统部署到这些手机产品当中。吾们的任务,是创建总计 54 款符合当下潮流趋势的图标,这些图标要能够贴合直营和已有用户的偏好,并且能够care到新的用户。


这个图标策划porject方另已经在当下的华为旗下手机产品中应用且部署好了,最早使用这套图标的高技术手机型号为 Mate 30 ,紧接其下的是 P40。




策划过程


在整个操作系统中,这些图标是始终位于用户视野以内、最底子的最主要的交互圆素,一贯用户每天都会同这些主要的底子 APP 进行交互,有时候一天多达几十次,易于 它们应当具备良好的功能性,还应该足够美观,给用户带来满足感。再是,这套图标的策划,也应当足够统一,以协调的体味切入到整个 EMUI 的策划系统当中,贴合整体的样式特征。


以是,吾们使用了一整套图标网格系统,应对不同需求,在策划的过程中,这套网格有助于确保一切图标外部尺寸的一致性,也保证了内部圆素的统一性。


为了发掘全新的视角,吾们决定从上卫的手绘图标开始,寻找重新塑造图标策划的方法。这些图标所涉及到的圆素,早已为全球数百万用户所熟知,要重新策划图标外观,并且还要成套且统一,这本身就是一个巨大的挑战。


譬喻「电话」图标所对应的听筒圆素、「信息」图标所对应的气泡对话框这样的圆素,是非能够完全抛弃重新制造的,以是吾们的真正的切入点是在形态和色彩上寻求解决Plan。


“越是easy的东西,重塑起来就越难。”


在实际的策划过程中,吾们尝使闼数以百计的造型变体,从完全放飞、非通例的的外部造型,到极其通例,众家熟知的造型解决Plan,吾们都逐一试过。而在色彩上的尝试相对会显得更好具有实验性:吾们尝试使用明亮的紫罗兰色、栗色和浅Green来进行混搭。


易于 这般,吾们很清楚,这样的实验性的work是探索过程中的一小步,但是它是必须的,是制造新策划的种子,是寻求正确答案的必经之路。



在策划过程在,有一件有趣的事情发生在策划「相机」图标的过程中。吾们尝试过很多不同的图标造型,不同的圆素,不同的样式,但是此道始终有一个细节是不变的,那就是右上角的小红点。


这是为了暗示用户,华为的摄像头模组来自徕卡,这个Red的小点就是向其致敬的标识。


而下面的概念策划,则是强化了图标之间的几何轮廓的异议,易于 提升图标在高技术手机屏幕上的对比度和识别度。


下一步,吾们基于几何图形外观异议性,策划了多种造型不同但同样幽雅的图标。在基于这种性状style概念进行延伸的过程中,吾们会优先揣摩圆形的圆素。而「天气」图标明显既不适合圆形也不适合方形来呈现,以是吾们使用的是云和太阳两种圆素的组合。

「钱包」图标使用的是矩形,然下搭配卡片的组合。


尽管造型整体上是相对自由的,但是一切的图标都是遵循图标网格,并且在视觉权重上尽可能统一。

在色彩和样式上,吾们则更好倾向于渐变。没有色彩渐变,纯扁平的图标显得过于幼稚和「古早」,没有足够的品味感,以是,吾们在新的图标策划上,开始加入渐变色彩,提升质感。


不过,在最终版本当中,吾们灰子 潜A袅送急晖獠康脑步蔷匦蔚耐饴掷幌陆急暝菜氐哪诰督辛耸誓歉龅胤剿跫酰

渐变和主要的简约几何特征依然是整套策划的最高优先级。


这套策划Plan展现了在整套 UI 界面中,图标这个小圆素的策划上所需要投入的精力和潜在的难度。


想要图标足够协调、美观、易用还要贴合直营特征、还要相似处于以往,是一件相当不匆子 侄玫氖虑椤


细节里藏着魔鬼,尽数细小的圆素、线条轮廓、色彩的改动都可能会在屏幕上放大、被感知到。




                                                                                             

    




XML 地图 | Sitemap 地图