蘋果設(shè)計(jì)的魔鬼細(xì)節(jié):光景設(shè)計(jì)的取舍之道
字體:
大
中
小 發(fā)表日期:2012-02-01 13:28 評論:0 點(diǎn)擊:1927
iPhone 的出現(xiàn)真正讓智能手機(jī)變成了一個(gè)簡單好用的東西,為此蘋果做了大量的工作,盡量讓圖標(biāo)更加生活化和通俗易懂就是其中的重要一點(diǎn)。當(dāng)然,在這一點(diǎn)上其他智能系統(tǒng)也做得非常好。而 iOS 則在光影設(shè)計(jì)上做得更加意味深遠(yuǎn)。
一、圓角圖標(biāo)
圓角圖標(biāo)甚至是 iOS 標(biāo)志性的設(shè)計(jì)元素之一,成為了某種蘋果的風(fēng)格。其實(shí)就現(xiàn)實(shí)生活而言,圓角設(shè)計(jì)非常普遍,比如桌子,行李箱,飯盒等等。只要是矩形物品,都會(huì)設(shè)計(jì)成圓角矩形,否則,尖銳的角可能會(huì)對用戶造成傷害。生活中用戶對圓角矩形接觸更多,圓角矩形傳遞著無害而熟悉的暗示。而直角矩形物品因?yàn)榻佑|很少,則會(huì)讓用戶產(chǎn)生陌生感和不真實(shí)感。設(shè)計(jì)成圖標(biāo)時(shí),用戶的注意力有一部份分散在圖標(biāo)的形狀上,影響圖標(biāo)信息傳遞的效果。
二、微笑曲線
iOS 圖標(biāo)中部都有一條陰影的分界線,這條細(xì)細(xì)的弧線看起來像是一個(gè)“微笑”的標(biāo)志。圖標(biāo)上下明暗對比明顯,塑造成陰影效果。這個(gè)曲線和陰影則傳達(dá)出一個(gè)信息:圖標(biāo)是立體的,不是單一的平面,并且是凸的弧形,并在圖標(biāo)上方光源的照射下呈現(xiàn)出立體的光影效果,讓圖標(biāo)更像一個(gè)真實(shí)的按鈕。
三、底部陰影
iOS 圖標(biāo)還在下邊框增加了陰影的效果,這讓整個(gè)圖標(biāo)比背景屏幕更高一點(diǎn)——換而言之,更像一個(gè)真實(shí)按鈕。同樣是因?yàn)楣庠磥碜杂趫D標(biāo)上方,上邊框的細(xì)線會(huì)將顏色設(shè)計(jì)得偏白色,也更細(xì)一點(diǎn),下邊框則設(shè)計(jì)成黑色,線條會(huì)加粗一點(diǎn)。這樣設(shè)計(jì)也同樣是為了模擬真實(shí)的光影效果。
最后的綜合成果就是讓用戶對圖標(biāo)更為熟悉,符合日常生活經(jīng)驗(yàn),消除用戶的不真實(shí)感和陌生感,將用戶的注意力緊緊抓住在圖標(biāo)信息上,在潛移默化中完成圖標(biāo)信息完整傳達(dá)的任務(wù)。
四、更真實(shí)的圖標(biāo)
但 iOS 的設(shè)計(jì)并非是最真實(shí)的,圖標(biāo)上的信息更多的是抽象的符號(hào)和圖形。而同樣是來自 Apple 的設(shè)計(jì),Mac OS 的圖標(biāo)則充滿了更為精致的細(xì)節(jié)感,不再是千篇一律的平面符號(hào),而是真實(shí)物體。
和Mac OS 一樣,WebOS 系統(tǒng)的中圖標(biāo)在真實(shí)度比iOS走得更遠(yuǎn),其圖標(biāo)也是具有更多的細(xì)節(jié),更復(fù)雜的光影效果。如果說iOS圖標(biāo)的按鈕是立體的,符號(hào)是平面的話。WebOS 系統(tǒng)則對現(xiàn)實(shí)物體進(jìn)行最大程度的擬真,這一點(diǎn)在自帶程序內(nèi)也可以看得出來。
就拿WebOS 系統(tǒng)和 iOS 系統(tǒng)中自帶的計(jì)算器界面設(shè)計(jì)來說,WebOS 系統(tǒng)就更為真實(shí)美觀。iOS 依舊保持了凸形按鈕、光源在前方的設(shè)計(jì)風(fēng)格,WebOS 系統(tǒng)則有幾點(diǎn)不同,每個(gè)按鈕都采用明暗雙線設(shè)計(jì),按鈕邊緣更有真實(shí)的弧度感;按鈕中間顏色亮而四周顏色暗,塑造成按鈕是內(nèi)凹的效果,現(xiàn)實(shí)生活中的計(jì)算器按鈕大部分是內(nèi)凹的,傳達(dá)的設(shè)計(jì)感覺就是按鈕更貼合指尖的弧度,按下的感覺更舒適,讓人更有按下的欲望;WebOS 計(jì)算器按鈕的邊緣采用的黑色線條比 iOS 系統(tǒng)的更粗,傳達(dá)出另一種真實(shí)感:現(xiàn)實(shí)中計(jì)算器的按鈕周圍確實(shí)是有一些空隙,這一點(diǎn)上 iOS 上的單條細(xì)線比之于就失去了真實(shí)感,讓人感覺按鈕周圍的空隙很小,按下去可能需要很用力。在真實(shí)性的舒適用戶體驗(yàn)上,WebOS 做得比 iOS 的更好。
五、為什么 iOS 要這么設(shè)計(jì)?
一個(gè)有趣的問題就出現(xiàn)了,為何一家在 Mac OS 上同樣設(shè)計(jì)出精致真實(shí)感圖標(biāo)的公司,在iOS上的設(shè)計(jì)會(huì)更抽象更保守呢,難道是因?yàn)闃?biāo)準(zhǔn)降低了?也許這個(gè)問題就像另一個(gè)廣為人知的有趣問題一樣:為什么 iOS 剛開始是單任務(wù)系統(tǒng)?我們發(fā)現(xiàn)答案可能是相似的。
——為了節(jié)約。
更真實(shí)意味著更復(fù)雜,意味著對系統(tǒng)資源的占用率更高,意味著更少的資源能直接響應(yīng)用戶的操作,意味著影響了“It just works”的暢快感。用戶在使用中沒有感覺到“就這樣發(fā)生了”的神奇感覺,這就是最大的用戶體驗(yàn)問題。
六、精打細(xì)算的蘋果
Apple 公司平均一年出一款手機(jī),這也意味著在每一款手機(jī)上進(jìn)行了更多的取舍。是系統(tǒng)運(yùn)行更快還是界面更精致,在圖標(biāo)設(shè)計(jì)上蘋果做出了自己審慎的選擇,圖標(biāo)設(shè)計(jì)既有真實(shí)感的一面,也不做得更真實(shí)。簡單的弧線和陰影到達(dá)了立體感的設(shè)計(jì)要求,卻不會(huì)對占據(jù)更多的系統(tǒng)資源,這是一個(gè)劃算的選擇。
iPhone上有很多精心設(shè)計(jì)的工藝,但奔跑再快也無法擺脫地心引力,系統(tǒng)性能在約束著界面表現(xiàn)效果。移動(dòng)設(shè)備對 iOS 的支持遠(yuǎn)遠(yuǎn)比不上強(qiáng)大的桌面系統(tǒng)對 Mac OS 的支持。在蘋果精心設(shè)計(jì)的背后,則是為了最佳用戶體驗(yàn)而進(jìn)行的嚴(yán)格計(jì)算和冷酷取舍。喬布斯如是說:創(chuàng)新意味著對其他 1000 件好的事情說不。
這一點(diǎn),iOS 做到了。這一切,沒有偶然。
而WebOS 在設(shè)計(jì)上超越 iOS 的一瞬間,就被性能約束緊緊拉回了地面,繼而砰然墜地。這很不幸。
七、一個(gè)彩蛋
幾乎所有程序圖標(biāo)的“微笑曲線”都是一個(gè)笑臉,除了一個(gè):時(shí)鐘。
鬧鐘鏡面的“微笑曲線”是和其他圖標(biāo)相反的,邊框的“微笑曲線”則是正常的。不過在我看來,這真是很有意思的事情。

:“在別人貪婪的時(shí)候恐懼,在別人恐懼的時(shí)候貪婪。”
※ ※ ※ 本文純屬【夕陽武士】個(gè)人意見,與【鋼之家鋼鐵博客】立場無關(guān).※ ※ ※
 該日志尚無評論! |