美工不是那么好做的雜談

時間：2024-07-18 12:23:31 美工設(shè)計我要投稿

相關(guān)推薦

美工不是那么好做的雜談

　　導(dǎo)語：Path那篇文章發(fā)表后，聽到的最多的一句是“你丫才美工，你們?nèi)叶际敲拦?”美工=美術(shù)工程師，在我眼里一直都是一個非常中性的詞匯，說Path是美工Team，其實是在美術(shù)方面表揚Path，Path的美術(shù)工程師水準(zhǔn)高是褒義，Path的產(chǎn)品水準(zhǔn)低是貶義。寫Path的時候就想好了要連續(xù)寫幾篇關(guān)于用戶體驗的文章，上一篇寫的動畫，今天以一個外行人的身份說說美術(shù)，既然只聊美術(shù)，我會繼續(xù)沿用美工這個簡稱，請多包涵。

　　1、與現(xiàn)實世界中幾十上百種美術(shù)流派不同，UI設(shè)計的好壞其實只有一個標(biāo)準(zhǔn)，就是讓人在潛意識里的感覺是舒服的還是不舒服的。就像在動畫那篇文章里提到的一樣，自然的UI最舒服。

　　專業(yè)人士們每天爭論著蘋果的“擬物”、微軟的“扁平”和谷歌的“沒準(zhǔn)兒”(谷歌自己做的東西還是偏“小清新”的)這些流派到底哪種更好，強納森代替了福斯特爾之后更是傳出了未來iOS會逐漸“扁平化”的小道消息，難道市場杯具的Metro UI反倒是未來的發(fā)展方向?

　　其實想明白這事兒，無關(guān)美學(xué)，無關(guān)技術(shù)，它就像是一層窗戶紙，只待我們輕輕捅破。

　　在這件事情上，過去做的最正確的還是蘋果(雖不完美，但還是比另外兩頭豬強多了)。如果用動畫那篇文章里的觀點來類比的話，蘋果的UI設(shè)計方式就好比是動畫效果里的非勻速運動，谷歌是勻速的，微軟沒動畫，所有認(rèn)為Metro UI是未來可以洗洗睡了。

　　現(xiàn)在讓我們來思考一個場景：

　　每天起床睜開眼，您看到了雪白的墻，透過潔凈的窗望向窗外，藍(lán)天白云，神清氣爽，一切都是那么的愜意。

　　等等，您覺得墻很白，藍(lán)天很藍(lán)，玻璃很透亮。其實，在您視網(wǎng)膜里的光學(xué)影像以及傳送給您大腦后續(xù)處理的圖片資料中，并不是純白的墻、純藍(lán)的天、純透明的玻璃，對您這位觀察者來說，這個世界沒有純色。

　　不僅不是純色，墻的顏色還是漸變的(而且不是勻速直線的漸變)。墻上還會有窗戶的影子，白云看著也像是大號的棉花糖一般的立體、飽滿、有質(zhì)感。

　　現(xiàn)實世界里，沒有純色，一切都有質(zhì)感、有陰影，沒有質(zhì)感、沒有陰影的是“鬼”。

　　從出生開始，我們就在努力適應(yīng)的這個世界，我們的認(rèn)知越來越習(xí)慣于周遭的環(huán)境，如果將我們放在一個純色的、無質(zhì)感的、無陰影的世界里，就好像在沒有動畫的世界里一樣，我們將無所適從。

　　看出來了吧?Windows Phone的Metro UI風(fēng)格其實就是個渣，Metro UI完全算不上設(shè)計流派，以自然的標(biāo)準(zhǔn)來看，Metro UI的差已是極致。

　　估計有人該跟我抬杠了，據(jù)說微軟的靈感來自巴士站的站牌和地鐵的指示牌，為什么站牌和指示牌沒讓我們不舒服呢?

　　昨天在公司里小宋又問了我一個問題，“聽說強納森以前是設(shè)計馬桶的，潔白簡約的馬桶設(shè)計，或者純白(黑)的iPhone外觀，都沒有讓我們不舒服啊!”

　　這些說的都沒錯，但仍然不影響“Metro UI是個渣，谷歌的小清新只比渣好了那么一點點”這個事實。

　　因為，當(dāng)我們看到潔白簡約的馬桶、純白(黑)的iPhone、公交地鐵的牌子時，進(jìn)入我們眼睛的是反射光。而當(dāng)我們看手機、平板、電腦屏幕的App界面時，進(jìn)入眼睛的是屏幕本身發(fā)出的光線。就這么一點點不同(反射光與屏幕發(fā)光)，卻已是本質(zhì)。

　　無論多么簡約、多么潔白的馬桶，通過反射光進(jìn)入我們視網(wǎng)膜的影像都不是純色的，它立體、有質(zhì)感、有陰影，如果進(jìn)入我們視網(wǎng)膜的影像是純色、扁平、無陰影的馬桶，雖然不會像純色、扁平、無陰影的人(鬼)一樣嚇我們一大跳，卻仍會導(dǎo)致我們潛意識里的不舒服，說不出來，但就是不舒服。

　　與其說消費者購買Windows Phone的時候是在用腳投票，還不如說是在用潛意識投票。

　　想明白這個道理之后，我就特同情那些高價購買“擼妹”的群體，唉，花了那么多錢之后，每天還要在潛意識里不舒服那么多次，多可憐啊。

　　當(dāng)然如果看了我這篇文章之后，他們就更可憐了，因為會從潛意識里的不舒服升級為意識里的不舒服的。

　　記住這句話，UI設(shè)計可以擬物、也可以扁平，可以清新、也可以簡約，但好的UI設(shè)計一定是符合自然的，自然的最舒服。

　　即便是Metro UI，正確的努力方向應(yīng)該是把磁貼作得讓人看著有真實的公交地鐵牌子的感覺，而不是傻了吧唧的弄個完全純色、無陰影、無質(zhì)感方塊放在那里，“鬼”啊!

　　在這里提前做個預(yù)測，以微軟官僚們的智商來看，等到Windows Phone徹底消亡那天，估計他們也想不明白這個道理的。

　　2、只顯示局部界面的設(shè)計不是符合自然的UI設(shè)計，在這一點上錯的App很多。

　　在現(xiàn)實生活中，人們在看到任何局部的、不完整的東西時，或多或少都會有點兒不舒服，差別僅在于有的人不舒服的多些，有的人少些。

　　比如說，拉開一半的抽屜，半開半掩的柜門，我湊合還能忍，老婆大人一般是會逼著我趕緊把它弄好。

　　局部的、不完整的UI其實或多或少也會給人的潛意識里帶來不舒服，因此這種UI不是符合自然的UI，這種設(shè)計也不是好設(shè)計。

　　在這一點上最2的還是Windows Phone。

　　記得在一些低分辨率的Windows Phone上，貌似連主界面都是不完整的，右邊一列的磁貼只顯示了一半。

　　那個微軟引以為傲的全景視圖，就更牛逼了，讓您的界面永遠(yuǎn)都不可能完整，關(guān)于這事兒您就想想一個永遠(yuǎn)無法關(guān)上的柜門吧。

　　Path的抽屜式菜單其實也一般，這種設(shè)計用來做Setting還湊合，畢竟基本上不用，主界面之類的大家就別玩兒“殘缺之美”了。

　　特別說明，這里說的局部的、不完整的指的是界面要素，而非內(nèi)容，List View滾動加載更多不再此范圍內(nèi)，滾動加載更多就像是從紙筒里拽出更多手紙一樣，沒什么不自然的。

　　3、效果圖不等于實景圖。

　　在這一點上，原本重災(zāi)區(qū)是房地產(chǎn)，現(xiàn)在變成了UI設(shè)計。

　　我見過的最明顯的例子是樂Phone和它那奇葩的四葉草界面。

　　兩年前我給岳父買過一臺樂Phone，給長輩買手機，俺當(dāng)然都得負(fù)責(zé)弄好(刷機、升級、裝軟件)，把玩了一個禮拜后，我的最終評價是：不好用加不好看。暗自慶幸，虧得岳父原來用的是諾基亞，要是iPhone俺可就慘了。

　　去年小米大張旗鼓為MIUI征求設(shè)計時，聽說最終中標(biāo)的是RIGO，google了一下，吃驚的發(fā)現(xiàn)樂Phone居然是RIGO的設(shè)計，效果圖幾乎美得讓俺也飆淚了。

　　正如老羅所說，RIGO的確稱得上是國內(nèi)最好的設(shè)計團隊，Dribbble我上得也不少，即便在Dribbble上，RIGO的很多設(shè)計圖給我的感覺也是出類拔萃的。

　　一邊是RIGO那精美的設(shè)計，一邊是使用過樂Phone那真實的糟爛感受，這tmd都讓我有點兒認(rèn)知失調(diào)了......

　　后來是通過Instagram的圖標(biāo)(參見文章配圖)才想明白了這個道理。

　　據(jù)說美工界有一句經(jīng)典的話“Every designer should draw a camera icon”，果不其然，Dribbble上最多的就是相機圖標(biāo)，很多相機圖標(biāo)在細(xì)節(jié)、質(zhì)感、光影效果上比Instagram的要好得多，很可惜，當(dāng)做成圖標(biāo)大小放到iPhone真機上時，均被Instagram秒殺，慘不忍睹。

　　在相機圖標(biāo)上，Instagram基本上是無敵的，原因就在于，即便是縮小到一定的尺寸，放到iPhone真機上時，通過肉眼，我們?nèi)阅芸吹玫絀nstagram團隊想向我們表達(dá)的細(xì)節(jié)，高檔的鏡頭(哪怕是右上角的取景器的玻璃也比大部分相機圖標(biāo)的鏡頭優(yōu)秀)，柔和的機身，有質(zhì)感的Insta銅片和4色掛帶。

　　也就是說，作為一款相機應(yīng)用，Instagram想通過圖標(biāo)來告訴您“我是一款很有品質(zhì)的相機”，它做到了。

　　有興趣不妨在手機上裝上一屏幕的相機應(yīng)用，跟Instagram對比一下，全秒，無例外。

　　自從明白了這個道理之后，即便是看到一些感覺很好、認(rèn)為很適合的圖，宋還是會加到app里在真機上跑下看看，效果圖我倆可是真心信不過了。

　　本以為在小尺寸上展現(xiàn)細(xì)節(jié)是美工們的基本功(我和小宋這么兩個棒槌都懂了，更何況美術(shù)界的專業(yè)人士們啊)，可惜，翻遍了Dribbble，很多人似乎更熱衷于秀美術(shù)技巧，大圖精致、小圖杯具，害得俺倆“想找個圖改吧改吧的就當(dāng)成早期版本的圖標(biāo)”這個比較猥瑣的目標(biāo)都沒能得逞，唉，點兒背真是不能賴社會啊！

　　4、從App可以看出，相比起國外的幾個好Team，國內(nèi)Team無論大小，在美術(shù)基本功上有不足的實在不少。

　　我從未接受過任何美術(shù)方面的訓(xùn)練，屬于連豬頭都畫不出來的那種，可能是因為眼睛還算毒辣，在做App的過程中居然也看出了不少問題，改進(jìn)了不少細(xì)節(jié)。搞明白一些東西后(當(dāng)然這些對于專業(yè)人士來說，應(yīng)該只能算是常識)，很吃驚的發(fā)現(xiàn)，很多國內(nèi)大大小小的流行應(yīng)用(應(yīng)該都有不少美術(shù)工作者吧?)，居然也在這些方面杯具，讓俺是百思不得姐啊!

　　隨便舉幾個例子(我在美術(shù)方面的用詞不準(zhǔn)，請大家多包涵)：

　　例：整數(shù)倍縮圖。

　　因為很喜歡Pinterest下拉刷新時的那個轉(zhuǎn)動的圓圈，我讓小宋把圈圈摳下來用在我們的下拉刷新上，一日，當(dāng)我下拉刷新時，偶然發(fā)現(xiàn)圓形的上下左右有點兒毛邊(要不是在轉(zhuǎn)動，估計就看不出來了)，再看看Pinterest，很干凈，趕緊給宋打電話，把這個給弄好了，經(jīng)這一次，俺也總算是明白了縮圖得按整數(shù)倍。

　　后來想想，這應(yīng)該算是美工界最基本的概念了吧?不過我很奇怪的發(fā)現(xiàn)一些應(yīng)用在此類問題上居然跟俺們犯了一樣的錯誤，竟然還有某大牌和美相關(guān)的App，令人吃驚，這個就不曬App名了，實在太丟人。我們沒有美工還好，厚著臉皮對外講講還能忍，人家還要在美術(shù)界混下去的不是?

　　例：陰影。

　　按理說，陰影應(yīng)該是另一個最基本的美術(shù)技能了吧?很奇怪的是，國內(nèi)應(yīng)用在這一點上大部分做的都很一般，大公司的大牌應(yīng)用也不例外，難道很多“設(shè)計師”做不好陰影?

　　這個得表揚下老羅錘子Team的美術(shù)功力，以我外行的眼光都能看出錘子做的那些圖標(biāo)陰影水平很高。

　　例：xdpi。

　　這一點國內(nèi)App廠商基本上全線杯具，隨便扒開一個apk的資源文件看看，您都會發(fā)現(xiàn)xdpi目錄下空空如也。微博上有位童鞋專門糾正我的“美工”這個詞兒的時候，告訴我應(yīng)該稱呼他“視覺設(shè)計師”，我差點兒忍不住回他“安卓上720P的手機都主流了快tmd一年了，您的視覺還看不出圖標(biāo)模糊?”

　　這個也不用舉例，俺扒過的apk的實在是太多，老外的好team一年前就都做了xdpi的圖，國內(nèi)的全無，這一條實在不能忍。

　　關(guān)于xdpi這個問題，宋曾經(jīng)很認(rèn)真的問我“為啥國內(nèi)軟件都不做xdpi的圖呢?”，我的回答是“咱國內(nèi)貌似都流行每幾個月升個大版本號，然后再換上整套界面之類的，可能都忙著設(shè)計五套新版界面讓老板挑著爽吧?”。

　　例：重心。

　　我對重心的理解純靠感覺，對于宋和我來說，完全缺乏使用工具來確定各個圖標(biāo)重心的能力。俺就一招，靠肉眼，覺得偏了就挪幾個像素，直到滿意了為止。

　　重心對于美術(shù)界來說應(yīng)該也算是個基本功了吧?

　　關(guān)于重心，我得說下老羅的錘子Logo。且不論錘子的美丑，連我的眼神居然都能看出其重心不穩(wěn)，后來外面套了個圈就好多了。這個我挺不能理解的，錘子Team不是都拿著放大鏡看圖標(biāo)嗎?難道重心是穩(wěn)的?我看錯了?

　　錘子Team的重心問題貌似不少，發(fā)布會之前幾天發(fā)的那幾幅倒計時的圖也是一水兒的番茄偏左，很奇怪，幸好宣傳圖是一次性的。

　　上面提到的那些細(xì)節(jié)，國外的如Instagram、Pinterest、Tumblr、甚至連Path都能做的很好(要不我說Path是美工Team呢)。

　　問下國內(nèi)的一些“設(shè)計師”們，您在美術(shù)方面真的做的很好嗎?

【美工不是那么好做的雜談】相關(guān)文章：

招標(biāo)師考試歷史回顧-過關(guān)不是那么容易03-21

選擇留學(xué)須謹(jǐn)慎-從留學(xué)到海歸不是那么簡單01-12