实战复盘!拿下 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

相关推荐

  • 盘点5个看起来很「丑」 但很受欢迎的网站设计

    有些网站虽然生得好「丑」,却收获不少的网站粉丝;然而,有些网站界面过於漂亮,甚至漂亮得太过攻击性(影响网站的可用性),会令用户产生一种「可远观而不可亵玩」的感觉。也因此让我们得出一个结论:产品并非要很漂…

    2022年6月25日 建站资讯
    0321
  • 为什么现在网站都长一个样研究人员分析1万个网站后找到了真相。

    在过去的几年里,一些文章和网页设计博客开始提出这样的疑问:“为什么现在所有的网站风格看起来都一个样了?” 这些帖子通常会指出网站一些雷同的设计元素,比如叠加文本的大图片、汉堡式菜单(通常是三行堆积在一起,…

    2022年7月3日 建站资讯
    0202
  • 从点击按钮这个动作谈交互体验  

      友好的页面交互体验,其实要真正地实现,并不难。前提是,页面设计师需要真正地站在使用者体验,尤其是用户使用体验的角度去思考与提炼。 怎麽判定某个按钮交互设计的友好?其实并不复杂: 能够快速地向用户…

    2022年6月25日
    0128
  • 网页设计师的最佳配色工具。

    作为一名网页设计师,我们所做的最重要的选择之一就是颜色选择,如果整体配色错误,那么整版设计稿就废了。例如,红色通常被认为是高能量的颜色,而蓝色则意味着冷静与和平。为了说明这一点,请考虑您可能在销售儿…

    2023年2月14日 SEO操作
    022
  • 必须遵循的色彩理论

    配色是网页设计的基础,最基本的还是色彩理论当中的对比、互补和感染: 1、互补:指的是色彩与色彩之间相互补足的关系。处於色轮当中处於相对位置的色彩,以此作为配色方案会比较和谐。最常见的互补配色分别是三元…

    2022年6月25日
    0174
  •  有直接的线框图後即可展开交互设计?  

      不少的网页设计项目是客户他们直接给予线框图的,对於设计师来说是否就意味着只需要直接根据线框图即可进行设计工作?又或者是充其量优化线框图当中的细节,补充遗漏场景? 其实,线框图不过是客户自身的需…

    2022年6月25日
    0203
  • 我来教你医院网站设计的5个核心内容是什么。

    医院网站设计的策划方案是整个网站设计工作的大纲,对于指导网站设计工作起到指导性作用。所以如果医院网站设计的策划方案出现了错误,那么很可能会影响到后面的实际网站设计工作。 医院网站设计时我们需注意的一点…

    2023年6月15日
    04
  • 网站设计如何改版来提高利润?

    网站设计,如果企业网站做得好,企业在短短几年内就可以改变很多。三年前,移动端占所有互联网流量的10%。今天,它跃升至38%,谷歌已经推出了排名变化,优先考虑移动端网站优化结果页面。买家也改变了。今天的网站…

    2019年10月30日
    0250

联系我们

QQ:951076433

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