如果你沒(méi)有細(xì)致研究過(guò) iOS 的界面設(shè)計(jì)，那你可能會(huì)覺(jué)得蘋(píng)果的 icon 只是圓角矩形而已。但如果你是業(yè)內(nèi)人士，你就知道它們大有不同，甚至有個(gè)專門(mén)的詞來(lái)表述 ——squircle（方圓形）。工業(yè)設(shè)計(jì)師常常把這個(gè)作為硬件設(shè)計(jì)的核心象征。

自 iOS 7 以來(lái)，App 的圖標(biāo)愈發(fā)復(fù)雜而精致。盡管每個(gè)人都知道蘋(píng)果注重細(xì)節(jié)，然而并不是每個(gè)人都能在這微小變化中發(fā)現(xiàn)其背后復(fù)雜的設(shè)計(jì)邏輯。

一個(gè)小方法，當(dāng)你在 Autodesk 出品的 Alias Studio 中調(diào)整曲線時(shí)，你就會(huì)明白個(gè)中道理 —— 蘋(píng)果公司在硬件和軟件之間達(dá)成了設(shè)計(jì)的一致性。

蘋(píng)果的圖標(biāo)不是圓角矩形，因?yàn)樗鼈兊挠布a(chǎn)品也不是

蘋(píng)果產(chǎn)品以「簡(jiǎn)約」著稱，但「簡(jiǎn)約」并不是「簡(jiǎn)單」。用戶們可能注意不到，但蘋(píng)果硬件產(chǎn)品的設(shè)計(jì)從來(lái)不簡(jiǎn)單。

蘋(píng)果硬件產(chǎn)品的「秘密」就在于 —— 避免相切，并根據(jù)曲率連續(xù)性來(lái)設(shè)計(jì)表面。

從用戶的視角指導(dǎo)細(xì)節(jié)設(shè)計(jì)

下圖是一項(xiàng)對(duì)比，右邊是蘋(píng)果產(chǎn)品。相比較之下差別顯而易見(jiàn)。

右邊的 MacBook Pro 也是一個(gè)帶有兩個(gè)直角表面的產(chǎn)品，它們通過(guò)圓形曲面連接起來(lái)。表面具有不斷變化的曲率，這讓它不會(huì)產(chǎn)生左圖那樣的反光，這也是蘋(píng)果產(chǎn)品讓我愛(ài)它們的原因之一。

為什么會(huì)有所不同？

將曲率可視化成曲率梳，梳子上每一行表示曲線在該點(diǎn)的曲率，可以看到，左圖的曲率是從零開(kāi)始立刻到半徑值，這個(gè)突變就造成了表面的突然亮點(diǎn)。

而在右圖中，曲率是從零開(kāi)始連續(xù)變化的，因此在表面上會(huì)更加平滑。這個(gè)差異在圖標(biāo)中并不容易看出來(lái)，但重點(diǎn)是圖標(biāo)和硬件都采用相同的設(shè)計(jì)語(yǔ)言。這就有點(diǎn)牛逼了~~

▽