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