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