• 以指代步
社交账号登录
  • 首页
  • 博客
  • 模板
  • 源码
  • 壁纸
  • 视频
  • 软件
  • 文库
  • 学习
  • 创作中心
  • 关于我们
  • 招兵买马
  • 联系我们
  • 法律申明
  • 合作招商
  • 注册
  • 粉丝
  • 关注
  • 创作
  • 实战复盘!拿下 iF 设计奖的 CleanMyMac X 是如何设计出来的?

  • 张大湿 2022-06-05 10:30:08 收藏
  • 文章标签: 蝙蝠 图标 椭圆
  • 编者按:这篇文章来自英国资深设计师 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 是如何设计出来的?

    延伸阅读:

    960 万张图只选一张!Netflix 的海量封面图是怎么设计出来的?

    前几年,基于深度学习的设计系统「鹿班」问世,关于 AI 驱动型的工具是否会革掉设计师的命的讨论甚嚣尘上,如今这个场景依然历历在目。

    阅读文章 >

    深扒!连拜登团队都在用的Figma是如何成长起来的?

    相信这几天设计圈和产品圈的同学都在讨论 Figma 封禁大疆的团队帐号这个事儿,经过多轮文章和视频的洗礼,这个事件的始末和性质相信大家已经掰开了揉碎了看明白了。

    阅读文章 >

    电影设计美学!封神的诺兰版《蝙蝠侠》里,导演亲手捏出了蝙蝠车

    诺兰的蝙蝠侠三部曲中的蝙蝠车 Tumbler 可能是蝙蝠车历史上最没蝙蝠特征的蝙蝠车。

    阅读文章 >

    本篇来源:优设网

    原文地址:https://www.uisdc.com/cleanmymac-x-design

    评论
    Artlist模板 广告