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

相关推荐

  • 小编分享网页设计如何进行动态内容的平衡。

    一个具动态内容的网站需要网页设计支持,具有基于角色访问专用内容或访问个人数据,如个性化定价或推荐产品,成员门户需要更高级别的安全性,例如SSL加密;交互式功能,如论坛,在线聊天或表单;支付网关或安全访问在…

    2023年6月16日
    08
  • 如何赋予产品设计更多「惊喜感」?

    在日常的设计工作中,设计师很多时都陷入一种「千篇一律的平淡式」苦恼中,觉得类似的产品基本都是差不多的信息架构、布局风格、界面元素等等,毫无新意。如何赋予产品设计更多「惊喜感」?相比盲目追求「为了不一样…

    2022年6月25日
    0155
  • 我来分享杭州定制网站设计优点包含什么。

    定制网站设计,根据客户的具体要求和企业的具体特点,进行专业策划版面和功能,量身定制设计可以充分展示企业风采,实现企业电子商务功能需求的专业网站。而模板网站制作,是用户登录到服务商的在线共用平台,选择…

    2023年6月18日
    06
  • 网页设计规范:设计网站需要添加弹窗吗?

    网站是否加入弹窗框,应该是很多站长犹豫不决的事情。一方面,弹窗框的出现,在某程度上会降低网站的用户体验;另一方面,弹窗框又会给网站提升网站转化率。那麽,网站设计时需要加入弹窗设计吗? 网页设计规范 网站…

    2022年6月25日
    0277
  • 什麽是分屏设计

      习惯使用一栏式来进行网页设计,若果能够合理地将网页一分为二,会让用户感到更加新鲜。简单来说,将网页当中并排的两栏呈现不同的资讯,是分屏式设计的最突出的特点。两边的资讯可以包含相同类型的元素,也…

    2022年6月25日
    0116
  • 网页设计知识点:紫色运用於网页设计时需要注意哪些问题

    在自然界中,紫色并没有其他色相的颜色那麽常见;在设计中,紫色也是使用频率相对较低的色彩。正因为这种颜色的稀缺性和独特气质,使得他在欧洲一度成为皇族和贵族的限定色。 网页设计知识点 作为一种大胆而个性十足…

    2022年6月20日 建站资讯
    0267
  • 高转化率的按钮应告知用户做什麽  

    界面设计当中的每一个按钮都会包含着一个文本指令,用来告诉用户这个按钮的功能。因此,按钮上的文本要尽量地保证直观而简洁,并且需要使用符合整个网站风格的语音、语调。 其次,你需要注重反馈。当用户点击按钮的…

    2022年6月25日
    0105
  • 教你网站设计中需要具体考虑的方面是什么。

    在互联网高速发展的今天,公司网站成为公司发展业务和提高在线形象的标配,网站设计就显得越来越重要。网站设计中更具体要考虑哪些方面,具体方面有以下几个方面: 1、网站实践的内容 有些网站建设公司,设计出来的…

    2023年6月15日
    02

联系我们

QQ:951076433

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