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

相关推荐

  • 我来教你网站设计细节要素,使网站搭建更加简单。

        伴随着网站搭建行业要求性的提升,网站建设也备受关注。网站搭建取决于互联网技术的优点,能够让我们产生更强的发展趋势机遇,还可以给企业事后的宣传策划和普及化产生更强的实际效果。下列详细介绍网站建设...

    2023年6月11日
    00
  • 小编分享自适应网站设计的特点是什么。

    自适应网站顾名思义,网页是自适应显示在不同大小的终端。一旦设计好,它们通常是合适的,允许同一页面自动适应不同的屏幕大小,并根据屏幕宽度自动调整布局。 一、自适应网站的优势 响应式网站设计满足用户在不...

    2023年6月15日
    01
  • 如何拯救尴尬的交互体验?  

      界面设计当中的交互流程出现问题并不罕见,主因当然是无法很好地在兼顾到细节。在界面设计过程当中,大多都是使用宏观框架,要细致到使用用户体验地图、卡片分类等方法去进行细节设计显然并不是那麽显示!...

    2022年6月25日
    0106
  • 什麽是F式网页设计布局?

      F式的网页布局形式,主要是指使用者扫视内容的时候,实现的运动轨迹和字母F相似。这种方式能够让使用者更快(Fast)地去获取资讯内容,因此命名为F式布局。 一般来说,这种方式的网页布局有以下的几个特点...

    2022年6月25日
    0288
  • 移动网页设计有哪些技巧。

    越来越多的消费者选择使用移动客户端浏览企业网站或商场,因此企业对移动用户的关注度越来越高,很多企业都有自己的移动台。我们的目标是用户打开网站,看到一个漂亮的页面,也希望用户能够轻松找到自己想要的信...

    2023年2月22日
    04
  • 选择网页设计公司有哪些注意事项

    选择网页设计公司时注意以下事项,省却了很多不必要的麻烦,网页设计才能真正做好。 1.域名和网站程序是否能取回︰避免因域名和程序拥有权,被逼使用不合意的网页设计公司。 2.网页设计时,如果只提供首页给客户...

    2022年6月13日
    0195
  • 使视觉内容和营销设计流行的方法。

    无论您是在准备您的下一篇博客文章,还是准备制作一个时髦的社交媒体状态,您都应该利用您的视觉设计,把您的所有其他营销内容格式带入生活。无论是一个广告,一个信息图表,或一个详细的指导文章,当您添加支持...

    2023年2月24日
    00
  • 小编分享网页设计如何进行动态内容的平衡。

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

    2023年6月16日
    02

联系我们

QQ:951076433

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