实战复盘!拿下 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 是如何设计出来的�?

作者:陈子木

上一篇:王者名望夏侯惇霜北刀皮肤甚么时辰上线 夏侯惇霜北刀皮肤引见
下一篇:异全国归来的我错过了爱情甚么时辰上线 异全国归来的我错过了爱情演员角色引见

欢迎扫描关注我们的微信公众平台!

欢迎扫描关注我们的微信公众平台!