实战复盘!拿下 iF 设计奖的 CleanMyMac X 是如何设计出来的。

编者按:这篇文章来自英国资深设计师 Dmitry Novikov,他是著名 Mac 管理类工具 CleanMyMac X 背后的视觉和体验设计师,他将设计的过程和想法发布到他自己的 Behance 当中:

CleanMyMac 可能是 Mac 平台上最常用的 APP 之一,你之前可能在很多地方听到或者看到过这个产品。很幸运我有机会能和 MaCPAw 团队合作,共同完成产品的设计。

在这个过程中,我受益良多。一方面,作为一个系统管理和优化工具,MacPaw
的团队有着超强的执行力和开发能力,这使得他们是非常好的合作对象。另一方面,CleanMyMac X
内部包含有很多不同的功能组件,它们需要以各种各样的方式协同合作,这对我而言也是一个新鲜的设计过程。

我注意到,当我们使用造型不完美的对象更加令人愉悦。无菌的空间和完美的物品,甚至可能会让人产生失真感和排斥感,我们会非常小心,害怕会破坏这种完美的状态。

制作一个被调教到完美的界面并不容易,不过想要赋予界面以自然感,则是更高的挑战。

实战复盘!拿下 iF 设计奖的 CleanMyMac X 是如何设计出来的?

实战复盘!拿下 iF 设计奖的 CleanMyMac X 是如何设计出来的?

由于这个应用当中大量的地方需要用到超椭圆,而这些元素最终都是要转化成为代码的,而这才是整个项目中最无法忽略的一项挑战。

注释:

超椭圆,又因 Gabriel Lamé 而被命名为 Lamé 曲线,是一种类似椭圆的封闭曲线,保留了半长轴和半短轴的几何特征,并围绕它们对称,但整体形状不同。在笛卡尔坐标系中,曲线上所有点 ( x , y ) 的集合满足方程:

实战复盘!拿下 iF 设计奖的 CleanMyMac X 是如何设计出来的?

其中n、a和b是正数,竖线 | | 数字周围表示数字的绝对值。

实战复盘!拿下 iF 设计奖的 CleanMyMac X 是如何设计出来的?

实战复盘!拿下 iF 设计奖的 CleanMyMac X 是如何设计出来的?

实战复盘!拿下 iF 设计奖的 CleanMyMac X 是如何设计出来的?

让整个应用的主界面具有自我描述性是非常重要的,各个分支应用的图标和名称理应清晰地传达含义,并不完全对称的「Scan」扫描按钮超出了 UI 界面的范畴,可以快速的吸引用户的注意力。

实战复盘!拿下 iF 设计奖的 CleanMyMac X 是如何设计出来的?

CleanMyMac X 专注于 3 个核心要素:清理、保护和速度。

实战复盘!拿下 iF 设计奖的 CleanMyMac X 是如何设计出来的?

在设计过程中,我们为每个模块设计了大量的图标,有趣的的是,有很多图标和 UI 元素是半透明的,结合动画来呈现的时候,这些图标元素有清晰的淡入淡出的效果,这些超大的图标有一部分是和插画师 Alexander Ageev 合作来完成的。

实战复盘!拿下 iF 设计奖的 CleanMyMac X 是如何设计出来的?

实战复盘!拿下 iF 设计奖的 CleanMyMac X 是如何设计出来的?

实战复盘!拿下 iF 设计奖的 CleanMyMac X 是如何设计出来的?

在设计过程中,我还为各个不同的模块使用了不同的渐变背景,来方便用户对于不同的模块予以区分。

实战复盘!拿下 iF 设计奖的 CleanMyMac X 是如何设计出来的?

实战复盘!拿下 iF 设计奖的 CleanMyMac X 是如何设计出来的?

同时,我们还创建了许多极具创新性的产品原型,并将它们落地到实际的产品当中去,比如可视化地帮你查看 Mac 存储空间的「空间透镜」功能:

实战复盘!拿下 iF 设计奖的 CleanMyMac X 是如何设计出来的?

实战复盘!拿下 iF 设计奖的 CleanMyMac X 是如何设计出来的?

此外,还考虑到日常使用场景,我还增加了一个位于顶部菜单栏的快速下拉菜单,方便用户无需打开程序直接调用功能:

实战复盘!拿下 iF 设计奖的 CleanMyMac X 是如何设计出来的?

得益于团队协作和强大的开发能力,CleanMyMac X 获得了 iF 和 2020 年红点奖。

实战复盘!拿下 iF 设计奖的 CleanMyMac X 是如何设计出来的?

作者:陈子木

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/233621.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
重蔚重蔚管理团队
上一篇 2023年3月1日 12:48
下一篇 2023年3月1日 12:48

相关推荐

  • 我来教你网站设计有哪些因素需要考虑。

    今天深圳建站公司来分析一下个人建站过程中,究竟有哪些因素需要我们注意的。 第一、网站建设要有创意。那么什么是创意呢?有些设计人员在设计网站创意的时候,花费了很多心思和时间,但是设计出来的网站,虽然很有…

    2023年6月13日
    00
  • 快速提升 UI 设计效果的 6 个小技巧(UI 设计集-10)。

    编者按:在进行 UI 设计的时候,很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。这篇来自Marc Andrew 的文章梳理了 6 个实用性很强的 UI 效果提升小技巧,是系列文章的十三篇,原文最早发布于 marcand…

    2023年3月1日 SEO操作
    05
  • 分享如何套用html模板文件。

    套用HTML模板文件的步骤如下: (图片来源网络,侵删) 1、准备模板文件 创建一个HTML文件,该文件将作为模板,在文件中编写基本的HTML结构,包括DOCTYPE声明、html、head和body标签等。 在head标签中引入CSS样式表…

    2024年6月26日
    03
  • 页面制作使用面包屑需谨记的三件事

    不能替代主要导航系统 面包屑导航在页面制作当中最常被使用,但它只能充当辅助导航系统,而不能替代主要导航系统!因为很多时候它只是用於提升用户访问其他层级,快速地进行定位和链接。 不能将添加到当前页链接 面…

    2022年6月25日
    0118
  • 2009到2017年按钮设计变化的趋势

    按钮虽然是一个小小的设计元素,但在UI设计中却有着非常重要的地位,而且每个界面都少不了它的身影。网页设计风格的流行趋势月月不同,按钮设计似乎也跟随着变化。今天,我们就来看看从2009到2017年按钮设计变化的…

    2022年6月25日 建站资讯
    0132
  • 怎样提升搜索框的存在感?

      1、每页都保留搜索输入框 应该考虑到使用者拥有在每个页面都能够立刻使用到搜索框的许可权,因为你的用户并不可能总是在每个页面轻易找得到他们想要的内容。 2、保持搜索框的简单 设计页面搜索框的时候,必…

    2022年6月25日
    0210
  • 什么行业需要掌握网页设计?

    对于Web设计,您必须首先使用HTML语言。此外,光不会写骨架,它必须写CSS + DIV,所以它必须有CSS。以下是对网页设计需要了解的介绍,希望对您有所帮助。   1.首先,您必须拥有HTML语言   2.光不会写骨架,你必…

    2019年3月28日
    0217
  • 小编教你杭州广告公司推广|网站制作时网页设计的素材。

    网站制作的好处相信大家都知道了。在网站制作中网页设计是很重要的,增加网站的视觉效果、可以提高网站的浏览量、吸引客户等。成功的网站建设离不开好的素材。      背景图片CSS控制背景图片:对于一个网页,我们开…

    2023年6月25日
    00

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息