7

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

 2 years ago
source link: https://www.uisdc.com/cleanmymac-x-design
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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

20小时前 编辑: 陈子木作者: Dmitry Novikov点赞 16 评论有奖 阅读本文需 4 分钟

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

延伸阅读:

点赞 16
收藏 8

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK