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

dgnsg142026-07-21 19:32:22

编者按 :这篇文章来自英国资深设计师 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 是如何设计出来的?

作者 :陈子木

上一篇:黑帽锥尾鹦鹉的体型,黑帽锥尾鹦鹉的豢养编制
下一篇:环颈鹦鹉的简介,环颈鹦鹉的产地
相关文章