實戰(zhàn)復(fù)盤!拿下 iF 設(shè)計獎的 CleanMyMac X 是如何設(shè)計出來的?
編者按:這篇文章來自英國資深設(shè)計師 Dmitry Novikov,他是著名 Mac 管理類工具 CleanMyMac X 背后的視覺和體驗設(shè)計師,他將設(shè)計的過程和想法發(fā)布到他自己的 Behance 當(dāng)中:
CleanMyMac 可能是 Mac 平臺上最常用的 APP 之一,你之前可能在很多地方聽到或者看到過這個產(chǎn)品。很幸運我有機會能和 MaCPAw 團隊合作,共同完成產(chǎn)品的設(shè)計。
在這個過程中,我受益良多。一方面,作為一個系統(tǒng)管理和優(yōu)化工具,MacPaw 的團隊有著超強的執(zhí)行力和開發(fā)能力,這使得他們是非常好的合作對象。另一方面,CleanMyMac X 內(nèi)部包含有很多不同的功能組件,它們需要以各種各樣的方式協(xié)同合作,這對我而言也是一個新鮮的設(shè)計過程。
我注意到,當(dāng)我們使用造型不完美的對象更加令人愉悅。無菌的空間和完美的物品,甚至可能會讓人產(chǎn)生失真感和排斥感,我們會非常小心,害怕會破壞這種完美的狀態(tài)。
制作一個被調(diào)教到完美的界面并不容易,不過想要賦予界面以自然感,則是更高的挑戰(zhàn)。
由于這個應(yīng)用當(dāng)中大量的地方需要用到超橢圓,而這些元素最終都是要轉(zhuǎn)化成為代碼的,而這才是整個項目中最無法忽略的一項挑戰(zhàn)。
注釋:
超橢圓,又因 Gabriel Lamé 而被命名為 Lamé 曲線,是一種類似橢圓的封閉曲線,保留了半長軸和半短軸的幾何特征,并圍繞它們對稱,但整體形狀不同。在笛卡爾坐標(biāo)系中,曲線上所有點 ( x , y ) 的集合滿足方程:
![]()
其中n、a和b是正數(shù),豎線 | | 數(shù)字周圍表示數(shù)字的絕對值。
![]()
讓整個應(yīng)用的主界面具有自我描述性是非常重要的,各個分支應(yīng)用的圖標(biāo)和名稱理應(yīng)清晰地傳達含義,并不完全對稱的「Scan」掃描按鈕超出了 UI 界面的范疇,可以快速的吸引用戶的注意力。
CleanMyMac X 專注于 3 個核心要素:清理、保護和速度。
在設(shè)計過程中,我們?yōu)槊總€模塊設(shè)計了大量的圖標(biāo),有趣的的是,有很多圖標(biāo)和 UI 元素是半透明的,結(jié)合動畫來呈現(xiàn)的時候,這些圖標(biāo)元素有清晰的淡入淡出的效果,這些超大的圖標(biāo)有一部分是和插畫師 Alexander Ageev 合作來完成的。
在設(shè)計過程中,我還為各個不同的模塊使用了不同的漸變背景,來方便用戶對于不同的模塊予以區(qū)分。
同時,我們還創(chuàng)建了許多極具創(chuàng)新性的產(chǎn)品原型,并將它們落地到實際的產(chǎn)品當(dāng)中去,比如可視化地幫你查看 Mac 存儲空間的「空間透鏡」功能:
此外,還考慮到日常使用場景,我還增加了一個位于頂部菜單欄的快速下拉菜單,方便用戶無需打開程序直接調(diào)用功能:
得益于團隊協(xié)作和強大的開發(fā)能力,CleanMyMac X 獲得了 iF 和 2020 年紅點獎。
作者:陳子木
想了解更多網(wǎng)站技術(shù)的內(nèi)容,請訪問:網(wǎng)站技術(shù)