- 相關(guān)推薦
美工不是那么好做的雜談
導(dǎo)語(yǔ)：Path那篇文章發(fā)表后，聽(tīng)到的最多的一句是“你丫才美工，你們?nèi)叶际敲拦?”美工=美術(shù)工程師，在我眼里一直都是一個(gè)非常中性的詞匯，說(shuō)Path是美工Team，其實(shí)是在美術(shù)方面表?yè)P(yáng)Path，Path的美術(shù)工程師水準(zhǔn)高是褒義，Path的產(chǎn)品水準(zhǔn)低是貶義。寫(xiě)Path的時(shí)候就想好了要連續(xù)寫(xiě)幾篇關(guān)于用戶體驗(yàn)的文章，上一篇寫(xiě)的動(dòng)畫(huà)，今天以一個(gè)外行人的身份說(shuō)說(shuō)美術(shù)，既然只聊美術(shù)，我會(huì)繼續(xù)沿用美工這個(gè)簡(jiǎn)稱(chēng)，請(qǐng)多包涵。
1、與現(xiàn)實(shí)世界中幾十上百種美術(shù)流派不同，UI設(shè)計(jì)的好壞其實(shí)只有一個(gè)標(biāo)準(zhǔn)，就是讓人在潛意識(shí)里的感覺(jué)是舒服的還是不舒服的。就像在動(dòng)畫(huà)那篇文章里提到的一樣，自然的UI最舒服。
專(zhuān)業(yè)人士們每天爭(zhēng)論著蘋(píng)果的“擬物”、微軟的“扁平”和谷歌的“沒(méi)準(zhǔn)兒”(谷歌自己做的東西還是偏“小清新”的)這些流派到底哪種更好，強(qiáng)納森代替了福斯特爾之后更是傳出了未來(lái)iOS會(huì)逐漸“扁平化”的小道消息，難道市場(chǎng)杯具的Metro UI反倒是未來(lái)的發(fā)展方向?
其實(shí)想明白這事兒，無(wú)關(guān)美學(xué)，無(wú)關(guān)技術(shù)，它就像是一層窗戶紙，只待我們輕輕捅破。
在這件事情上，過(guò)去做的最正確的還是蘋(píng)果(雖不完美，但還是比另外兩頭豬強(qiáng)多了)。如果用動(dòng)畫(huà)那篇文章里的觀點(diǎn)來(lái)類(lèi)比的話，蘋(píng)果的UI設(shè)計(jì)方式就好比是動(dòng)畫(huà)效果里的非勻速運(yùn)動(dòng)，谷歌是勻速的，微軟沒(méi)動(dòng)畫(huà)，所有認(rèn)為Metro UI是未來(lái)可以洗洗睡了。
現(xiàn)在讓我們來(lái)思考一個(gè)場(chǎng)景：
每天起床睜開(kāi)眼，您看到了雪白的墻，透過(guò)潔凈的窗望向窗外，藍(lán)天白云，神清氣爽，一切都是那么的愜意。
等等，您覺(jué)得墻很白，藍(lán)天很藍(lán)，玻璃很透亮。其實(shí)，在您視網(wǎng)膜里的光學(xué)影像以及傳送給您大腦后續(xù)處理的圖片資料中，并不是純白的墻、純藍(lán)的天、純透明的玻璃，對(duì)您這位觀察者來(lái)說(shuō)，這個(gè)世界沒(méi)有純色。
不僅不是純色，墻的顏色還是漸變的(而且不是勻速直線的漸變)。墻上還會(huì)有窗戶的影子，白云看著也像是大號(hào)的棉花糖一般的立體、飽滿、有質(zhì)感。
現(xiàn)實(shí)世界里，沒(méi)有純色，一切都有質(zhì)感、有陰影，沒(méi)有質(zhì)感、沒(méi)有陰影的是“鬼”。
從出生開(kāi)始，我們就在努力適應(yīng)的這個(gè)世界，我們的認(rèn)知越來(lái)越習(xí)慣于周遭的環(huán)境，如果將我們放在一個(gè)純色的、無(wú)質(zhì)感的、無(wú)陰影的世界里，就好像在沒(méi)有動(dòng)畫(huà)的世界里一樣，我們將無(wú)所適從。
看出來(lái)了吧?Windows Phone的Metro UI風(fēng)格其實(shí)就是個(gè)渣，Metro UI完全算不上設(shè)計(jì)流派，以自然的標(biāo)準(zhǔn)來(lái)看，Metro UI的差已是極致。
估計(jì)有人該跟我抬杠了，據(jù)說(shuō)微軟的靈感來(lái)自巴士站的站牌和地鐵的指示牌，為什么站牌和指示牌沒(méi)讓我們不舒服呢?
昨天在公司里小宋又問(wèn)了我一個(gè)問(wèn)題，“聽(tīng)說(shuō)強(qiáng)納森以前是設(shè)計(jì)馬桶的，潔白簡(jiǎn)約的馬桶設(shè)計(jì)，或者純白(黑)的iPhone外觀，都沒(méi)有讓我們不舒服啊!”
這些說(shuō)的都沒(méi)錯(cuò)，但仍然不影響“Metro UI是個(gè)渣，谷歌的小清新只比渣好了那么一點(diǎn)點(diǎn)”這個(gè)事實(shí)。
因?yàn)�，�?dāng)我們看到潔白簡(jiǎn)約的馬桶、純白(黑)的iPhone、公交地鐵的牌子時(shí)，進(jìn)入我們眼睛的是反射光。而當(dāng)我們看手機(jī)、平板、電腦屏幕的App界面時(shí)，進(jìn)入眼睛的是屏幕本身發(fā)出的光線。就這么一點(diǎn)點(diǎn)不同(反射光與屏幕發(fā)光)，卻已是本質(zhì)。
無(wú)論多么簡(jiǎn)約、多么潔白的馬桶，通過(guò)反射光進(jìn)入我們視網(wǎng)膜的影像都不是純色的，它立體、有質(zhì)感、有陰影，如果進(jìn)入我們視網(wǎng)膜的影像是純色、扁平、無(wú)陰影的馬桶，雖然不會(huì)像純色、扁平、無(wú)陰影的人(鬼)一樣嚇我們一大跳，卻仍會(huì)導(dǎo)致我們潛意識(shí)里的不舒服，說(shuō)不出來(lái)，但就是不舒服。
與其說(shuō)消費(fèi)者購(gòu)買(mǎi)Windows Phone的時(shí)候是在用腳投票，還不如說(shuō)是在用潛意識(shí)投票。
想明白這個(gè)道理之后，我就特同情那些高價(jià)購(gòu)買(mǎi)“擼妹”的群體，唉，花了那么多錢(qián)之后，每天還要在潛意識(shí)里不舒服那么多次，多可憐啊。
當(dāng)然如果看了我這篇文章之后，他們就更可憐了，因?yàn)闀?huì)從潛意識(shí)里的不舒服升級(jí)為意識(shí)里的不舒服的。
記住這句話，UI設(shè)計(jì)可以擬物、也可以扁平，可以清新、也可以簡(jiǎn)約，但好的UI設(shè)計(jì)一定是符合自然的，自然的最舒服。
即便是Metro UI，正確的努力方向應(yīng)該是把磁貼作得讓人看著有真實(shí)的公交地鐵牌子的感覺(jué)，而不是傻了吧唧的弄個(gè)完全純色、無(wú)陰影、無(wú)質(zhì)感方塊放在那里，“鬼”啊!
在這里提前做個(gè)預(yù)測(cè)，以微軟官僚們的智商來(lái)看，等到Windows Phone徹底消亡那天，估計(jì)他們也想不明白這個(gè)道理的。
2、只顯示局部界面的設(shè)計(jì)不是符合自然的UI設(shè)計(jì)，在這一點(diǎn)上錯(cuò)的App很多。
在現(xiàn)實(shí)生活中，人們?cè)诳吹饺魏尉植康�、不完整的東西時(shí)，或多或少都會(huì)有點(diǎn)兒不舒服，差別僅在于有的人不舒服的多些，有的人少些。
比如說(shuō)，拉開(kāi)一半的抽屜，半開(kāi)半掩的柜門(mén)，我湊合還能忍，老婆大人一般是會(huì)逼著我趕緊把它弄好。
局部的、不完整的UI其實(shí)或多或少也會(huì)給人的潛意識(shí)里帶來(lái)不舒服，因此這種UI不是符合自然的UI，這種設(shè)計(jì)也不是好設(shè)計(jì)。
在這一點(diǎn)上最2的還是Windows Phone。
記得在一些低分辨率的Windows Phone上，貌似連主界面都是不完整的，右邊一列的磁貼只顯示了一半。
那個(gè)微軟引以為傲的全景視圖，就更牛逼了，讓您的界面永遠(yuǎn)都不可能完整，關(guān)于這事兒您就想想一個(gè)永遠(yuǎn)無(wú)法關(guān)上的柜門(mén)吧。
Path的抽屜式菜單其實(shí)也一般，這種設(shè)計(jì)用來(lái)做Setting還湊合，畢竟基本上不用，主界面之類(lèi)的大家就別玩兒“殘缺之美”了。
特別說(shuō)明，這里說(shuō)的局部的、不完整的指的是界面要素，而非內(nèi)容，List View滾動(dòng)加載更多不再此范圍內(nèi)，滾動(dòng)加載更多就像是從紙筒里拽出更多手紙一樣，沒(méi)什么不自然的。
3、效果圖不等于實(shí)景圖。
在這一點(diǎn)上，原本重災(zāi)區(qū)是房地產(chǎn)，現(xiàn)在變成了UI設(shè)計(jì)。
我見(jiàn)過(guò)的最明顯的例子是樂(lè)Phone和它那奇葩的四葉草界面。
兩年前我給岳父買(mǎi)過(guò)一臺(tái)樂(lè)Phone，給長(zhǎng)輩買(mǎi)手機(jī)，俺當(dāng)然都得負(fù)責(zé)弄好(刷機(jī)、升級(jí)、裝軟件)，把玩了一個(gè)禮拜后，我的最終評(píng)價(jià)是：不好用加不好看。暗自慶幸，虧得岳父原來(lái)用的是諾基亞，要是iPhone俺可就慘了。
去年小米大張旗鼓為MIUI征求設(shè)計(jì)時(shí)，聽(tīng)說(shuō)最終中標(biāo)的是RIGO，google了一下，吃驚的發(fā)現(xiàn)樂(lè)Phone居然是RIGO的設(shè)計(jì)，效果圖幾乎美得讓俺也飆淚了。
正如老羅所說(shuō)，RIGO的確稱(chēng)得上是國(guó)內(nèi)最好的設(shè)計(jì)團(tuán)隊(duì)，Dribbble我上得也不少，即便在Dribbble上，RIGO的很多設(shè)計(jì)圖給我的感覺(jué)也是出類(lèi)拔萃的。
一邊是RIGO那精美的設(shè)計(jì)，一邊是使用過(guò)樂(lè)Phone那真實(shí)的糟爛感受，這tmd都讓我有點(diǎn)兒認(rèn)知失調(diào)了......
后來(lái)是通過(guò)Instagram的圖標(biāo)(參見(jiàn)文章配圖)才想明白了這個(gè)道理。
據(jù)說(shuō)美工界有一句經(jīng)典的話“Every designer should draw a camera icon”，果不其然，Dribbble上最多的就是相機(jī)圖標(biāo)，很多相機(jī)圖標(biāo)在細(xì)節(jié)、質(zhì)感、光影效果上比Instagram的要好得多，很可惜，當(dāng)做成圖標(biāo)大小放到iPhone真機(jī)上時(shí)，均被Instagram秒殺，慘不忍睹。
在相機(jī)圖標(biāo)上，Instagram基本上是無(wú)敵的，原因就在于，即便是縮小到一定的尺寸，放到iPhone真機(jī)上時(shí)，通過(guò)肉眼，我們?nèi)阅芸吹玫絀nstagram團(tuán)隊(duì)想向我們表達(dá)的細(xì)節(jié)，高檔的鏡頭(哪怕是右上角的取景器的玻璃也比大部分相機(jī)圖標(biāo)的鏡頭優(yōu)秀)，柔和的機(jī)身，有質(zhì)感的Insta銅片和4色掛帶。
也就是說(shuō)，作為一款相機(jī)應(yīng)用，Instagram想通過(guò)圖標(biāo)來(lái)告訴您“我是一款很有品質(zhì)的相機(jī)”，它做到了。
有興趣不妨在手機(jī)上裝上一屏幕的相機(jī)應(yīng)用，跟Instagram對(duì)比一下，全秒，無(wú)例外。
自從明白了這個(gè)道理之后，即便是看到一些感覺(jué)很好、認(rèn)為很適合的圖，宋還是會(huì)加到app里在真機(jī)上跑下看看，效果圖我倆可是真心信不過(guò)了。
本以為在小尺寸上展現(xiàn)細(xì)節(jié)是美工們的基本功(我和小宋這么兩個(gè)棒槌都懂了，更何況美術(shù)界的專(zhuān)業(yè)人士們啊)，可惜，翻遍了Dribbble，很多人似乎更熱衷于秀美術(shù)技巧，大圖精致、小圖杯具，害得俺倆“想找個(gè)圖改吧改吧的就當(dāng)成早期版本的圖標(biāo)”這個(gè)比較猥瑣的目標(biāo)都沒(méi)能得逞，唉，點(diǎn)兒背真是不能賴(lài)社會(huì)啊！
4、從App可以看出，相比起國(guó)外的幾個(gè)好Team，國(guó)內(nèi)Team無(wú)論大小，在美術(shù)基本功上有不足的實(shí)在不少。
我從未接受過(guò)任何美術(shù)方面的訓(xùn)練，屬于連豬頭都畫(huà)不出來(lái)的那種，可能是因?yàn)檠劬�算毒辣，在做App的過(guò)程中居然也看出了不少問(wèn)題，改進(jìn)了不少細(xì)節(jié)。搞明白一些東西后(當(dāng)然這些對(duì)于專(zhuān)業(yè)人士來(lái)說(shuō)，應(yīng)該只能算是常識(shí))，很吃驚的發(fā)現(xiàn)，很多國(guó)內(nèi)大大小小的流行應(yīng)用(應(yīng)該都有不少美術(shù)工作者吧?)，居然也在這些方面杯具，讓俺是百思不得姐啊!
隨便舉幾個(gè)例子(我在美術(shù)方面的用詞不準(zhǔn)，請(qǐng)大家多包涵)：
例：整數(shù)倍縮圖。
因?yàn)楹芟矚gPinterest下拉刷新時(shí)的那個(gè)轉(zhuǎn)動(dòng)的圓圈，我讓小宋把圈圈摳下來(lái)用在我們的下拉刷新上，一日，當(dāng)我下拉刷新時(shí)，偶然發(fā)現(xiàn)圓形的上下左右有點(diǎn)兒毛邊(要不是在轉(zhuǎn)動(dòng)，估計(jì)就看不出來(lái)了)，再看看Pinterest，很干凈，趕緊給宋打電話，把這個(gè)給弄好了，經(jīng)這一次，俺也總算是明白了縮圖得按整數(shù)倍。
后來(lái)想想，這應(yīng)該算是美工界最基本的概念了吧?不過(guò)我很奇怪的發(fā)現(xiàn)一些應(yīng)用在此類(lèi)問(wèn)題上居然跟俺們犯了一樣的錯(cuò)誤，竟然還有某大牌和美相關(guān)的App，令人吃驚，這個(gè)就不曬App名了，實(shí)在太丟人。我們沒(méi)有美工還好，厚著臉皮對(duì)外講講還能忍，人家還要在美術(shù)界混下去的不是?
例：陰影。
按理說(shuō)，陰影應(yīng)該是另一個(gè)最基本的美術(shù)技能了吧?很奇怪的是，國(guó)內(nèi)應(yīng)用在這一點(diǎn)上大部分做的都很一般，大公司的大牌應(yīng)用也不例外，難道很多“設(shè)計(jì)師”做不好陰影?
這個(gè)得表?yè)P(yáng)下老羅錘子Team的美術(shù)功力，以我外行的眼光都能看出錘子做的那些圖標(biāo)陰影水平很高。
例：xdpi。
這一點(diǎn)國(guó)內(nèi)App廠商基本上全線杯具，隨便扒開(kāi)一個(gè)apk的資源文件看看，您都會(huì)發(fā)現(xiàn)xdpi目錄下空空如也。微博上有位童鞋專(zhuān)門(mén)糾正我的“美工”這個(gè)詞兒的時(shí)候，告訴我應(yīng)該稱(chēng)呼他“視覺(jué)設(shè)計(jì)師”，我差點(diǎn)兒忍不住回他“安卓上720P的手機(jī)都主流了快tmd一年了，您的視覺(jué)還看不出圖標(biāo)模糊?”
這個(gè)也不用舉例，俺扒過(guò)的apk的實(shí)在是太多，老外的好team一年前就都做了xdpi的圖，國(guó)內(nèi)的全無(wú)，這一條實(shí)在不能忍。
關(guān)于xdpi這個(gè)問(wèn)題，宋曾經(jīng)很認(rèn)真的問(wèn)我“為啥國(guó)內(nèi)軟件都不做xdpi的圖呢?”，我的回答是“咱國(guó)內(nèi)貌似都流行每幾個(gè)月升個(gè)大版本號(hào)，然后再換上整套界面之類(lèi)的，可能都忙著設(shè)計(jì)五套新版界面讓老板挑著爽吧?”。
例：重心。
我對(duì)重心的理解純靠感覺(jué)，對(duì)于宋和我來(lái)說(shuō)，完全缺乏使用工具來(lái)確定各個(gè)圖標(biāo)重心的能力。俺就一招，靠肉眼，覺(jué)得偏了就挪幾個(gè)像素，直到滿意了為止。
重心對(duì)于美術(shù)界來(lái)說(shuō)應(yīng)該也算是個(gè)基本功了吧?
關(guān)于重心，我得說(shuō)下老羅的錘子Logo。且不論錘子的美丑，連我的眼神居然都能看出其重心不穩(wěn)，后來(lái)外面套了個(gè)圈就好多了。這個(gè)我挺不能理解的，錘子Team不是都拿著放大鏡看圖標(biāo)嗎?難道重心是穩(wěn)的?我看錯(cuò)了?
錘子Team的重心問(wèn)題貌似不少，發(fā)布會(huì)之前幾天發(fā)的那幾幅倒計(jì)時(shí)的圖也是一水兒的番茄偏左，很奇怪，幸好宣傳圖是一次性的。
上面提到的那些細(xì)節(jié)，國(guó)外的如Instagram、Pinterest、Tumblr、甚至連Path都能做的很好(要不我說(shuō)Path是美工Team呢)。
問(wèn)下國(guó)內(nèi)的一些“設(shè)計(jì)師”們，您在美術(shù)方面真的做的很好嗎?
【美工不是那么好做的雜談】相關(guān)文章：
招標(biāo)師考試歷史回顧-過(guò)關(guān)不是那么容易03-21
選擇留學(xué)須謹(jǐn)慎-從留學(xué)到海歸不是那么簡(jiǎn)單01-12
住宅平面設(shè)計(jì)雜談03-15
速錄學(xué)習(xí)心得雜談03-06
房產(chǎn)中介經(jīng)紀(jì)人好做嗎03-03
淘寶美工必須學(xué)會(huì)的美工知識(shí)03-18
什么是淘寶美工03-18