談移動(dòng)設(shè)備的視覺語言創(chuàng)新
2011-08-26 文章來源: 深達(dá)設(shè)計(jì)
當(dāng)你第一眼看到Windows Phone 7界面視覺的那一刻，你的第一感覺是是什么？從沒有過的簡(jiǎn)單極致讓你眼前一亮？還是平面色塊的堆砌讓你不禁失望僅此而已？當(dāng)然，有贊揚(yáng)，必然也有批評(píng)，但是，這些都不是重點(diǎn)，面對(duì)這以Metro命名的全新視覺語言，我更想說的是這種全新語言的誕生帶給我們的啟示。
在WP7里面我們既沒看到Vista透明毛玻璃質(zhì)感，也沒看到Surface的華麗酷炫，完全顛覆了“透明、質(zhì)感加反光”的移動(dòng)設(shè)備界面設(shè)計(jì)潮流，呈現(xiàn)在用戶面前的，是以往從沒看到過的簡(jiǎn)單，簡(jiǎn)單到緊緊是幾個(gè)色塊！難道這是面對(duì)iPhone和Android刻意去標(biāo)新立異、獨(dú)樹一幟？當(dāng)然不是，這既不是刻意回避iPhone的華麗質(zhì)感，也不是標(biāo)榜創(chuàng)新的反其道而行之，原因只有一個(gè)：客觀上的需要。
首先，體驗(yàn)上的核心價(jià)值向內(nèi)容轉(zhuǎn)移，并不意味著形式從此變得不再重要，相反，更需要一種全新的設(shè)計(jì)語言，一種全新的形式去適應(yīng)這種變化。在以往的移動(dòng)設(shè)備體驗(yàn)設(shè)計(jì)中，通用的邏輯法則是通過一個(gè)可映射某個(gè)功能或內(nèi)容的文字、圖形，如icon，為用戶提供一個(gè)通向某個(gè)功能或內(nèi)容的入口，而現(xiàn)在，這個(gè)入口變成了內(nèi)容本身；其次，技術(shù)和硬件的進(jìn)步，促使交互體驗(yàn)?zāi)Ｊ降淖兓l(fā)展，矢量交互模式變?yōu)榭赡?，顯然原有的基于位圖式的用戶界面視覺語言體系不再適應(yīng)這種模式；最后，隨著MS產(chǎn)品和平臺(tái)線的擴(kuò)張，出現(xiàn)了多種風(fēng)格的界面語言，像早期的Winform風(fēng)格以及后面的Aero，顯然缺少一種統(tǒng)一的視覺品牌形象， 因此迫切的需要一種全新的視覺語言體系去統(tǒng)一視覺體驗(yàn)，在這種環(huán)境下，誕生了全新的界面設(shè)計(jì)語言——Metro。
創(chuàng)新的目的并不是與眾不同
視覺傳達(dá)和藝術(shù)創(chuàng)作之間的差別在于：前者的功能性占主導(dǎo)地位。移動(dòng)設(shè)備的界面設(shè)計(jì)在某一方面具有和視覺傳達(dá)一樣的特性，不同的是，比視覺傳達(dá)對(duì)功能性的要求更高，也就是我們所說的是為了解決問題。不能解決問題的設(shè)計(jì)，是與產(chǎn)品割裂的設(shè)計(jì)；制造問題的設(shè)計(jì)，則是無意義的勞動(dòng)。至于風(fēng)格上不管是華麗質(zhì)感加反光還是還是透明漸變加切光，這都不是視覺語言的核心，用戶界面是依附于產(chǎn)品本身功能而存在的，而視覺語言則是和除了產(chǎn)品本身以外的更多因素息息相關(guān)，比如基于構(gòu)建或統(tǒng)一視覺品牌形象的需要或解決某一方面的問題等。
然而在實(shí)際操作過程中，很多人往往會(huì)進(jìn)入一個(gè)誤區(qū)，那就是面對(duì)一個(gè)新的產(chǎn)品需求，絞盡腦汁的去追求讓自己的設(shè)計(jì)是多么的與眾不同，而這種與眾不同，通常又會(huì)簡(jiǎn)單直接的體現(xiàn)在視覺語言的風(fēng)格上，盲目追求華麗的效果、質(zhì)感、反光以及復(fù)雜的顏色漸變，完全忽略了產(chǎn)品本身的特性、用戶的特性以及交互場(chǎng)景和所基于的平臺(tái)特性。比如，眾多用戶對(duì)iPhone趨之若鶩，很大的原因是因?yàn)锳pple自上而下對(duì)完美體驗(yàn)追求的極致，App Store模式則決定了允許龐大的第三方開發(fā)者為自己開發(fā)海量的應(yīng)用，但這不可避免的會(huì)破壞這種完美體驗(yàn)的統(tǒng)一性，于是Apple為解決這個(gè)問題在SDK里搭建了一種針對(duì)iPhone桌面icon的視覺樣式標(biāo)準(zhǔn)，在這種標(biāo)準(zhǔn)下，開發(fā)者只需提供一張圖片，即可以使自己的logo和系統(tǒng)體驗(yàn)保持完美一致。然而，卻時(shí)常會(huì)在App Store里發(fā)現(xiàn)有類似的應(yīng)用，也許這個(gè)開發(fā)者或是設(shè)計(jì)師實(shí)在是太想讓自己的應(yīng)用與眾不同了，但這確是一種風(fēng)險(xiǎn)很大的與眾不同或標(biāo)新立異，因?yàn)樵谝环N體驗(yàn)質(zhì)量及體驗(yàn)統(tǒng)一度已經(jīng)到達(dá)很高水準(zhǔn)的平臺(tái)設(shè)備中，作為應(yīng)用層面的產(chǎn)品，很重要的一個(gè)原則就是要與這種體驗(yàn)保持一致，在這基礎(chǔ)上再突出自己的特點(diǎn)，而完全無原則的突出特點(diǎn)，效果只會(huì)適得其反。
用戶界面的價(jià)值依附于產(chǎn)品本身功能而存在
創(chuàng)新是所有設(shè)計(jì)的生命，卻不是體驗(yàn)設(shè)計(jì)的全部，受原則和條件的制約，視覺語言的創(chuàng)新同樣如此。
坦白講，我非常不想再拿iPhone來做例子，因?yàn)樗械娜嗽谥v移動(dòng)設(shè)備體驗(yàn)的時(shí)候，都會(huì)情不自禁的拿她來做案例，但沒辦法，我和大家一樣情不自禁：）。
還記得2007年1月份iPhone發(fā)布的時(shí)候嗎？是的，當(dāng)看到劃屏解鎖的功能時(shí)，是不是驚呆了？手指輕輕一劃，原來可以這么玩的？其實(shí)，欣喜的并不是劃屏體驗(yàn)上新奇，而是這種新奇并沒有以過多的額外操作負(fù)擔(dān)為代價(jià)。后來，各式各樣的解鎖出現(xiàn)了：畫曲線的解鎖；畫笑臉的解鎖；后來還出了有一個(gè)圓圈滿屏跑的解鎖。但其實(shí)，所有的方案都不是解鎖方法上的變化—即完成從A到B的軌跡從而觸發(fā)解鎖動(dòng)作，變化的是僅僅UI上的視覺體現(xiàn)，最終的結(jié)果，都是去用視覺語言完成操作上的邏輯而已，問題是，雖然所有方案都最終解決了解鎖這個(gè)問題，卻同時(shí)又制造了問題。
移動(dòng)設(shè)備并不等同于手持娛樂設(shè)備，手機(jī)不是PSP，更不是Xbox，不管它有再多的娛樂功能，就目前來說，它最基本的角色，是工具，或者叫手持移動(dòng)通訊設(shè)備終端，那么對(duì)于日常工具，那怕再新奇的體驗(yàn)，最終都會(huì)回歸至它的基本體驗(yàn)或基本應(yīng)用，如果以上不夠通俗易懂的話，我們可以想象：女孩超市出來左手拎著重重的購(gòu)物袋，右手掏出手機(jī)準(zhǔn)備向男友求救的時(shí)候，卻發(fā)現(xiàn)屏幕上正有一亂跑的家伙在考驗(yàn)自己的眼手協(xié)調(diào)能力•••••••
視覺擬物化中的映射關(guān)系
在以iPhone、iPad為代表的移動(dòng)設(shè)備平臺(tái)上，擬物化設(shè)計(jì)這個(gè)概念正在成為一種趨勢(shì)或潮流，對(duì)于擬物化設(shè)計(jì)，我個(gè)人的總結(jié)是：擬物化設(shè)計(jì)的本質(zhì)是把虛擬環(huán)境中產(chǎn)品體驗(yàn)的某一特性在真實(shí)世界中找到一種映射，然后把這種映射通過設(shè)計(jì)語言的歸納在體驗(yàn)中以視覺或交互形式得以體現(xiàn)，從而使產(chǎn)品體驗(yàn)本身更具真實(shí)度和情感化，并且更符合用戶的認(rèn)知心理，因此擬物化設(shè)計(jì)的一個(gè)比較重要的條件，就是這種映射關(guān)系的成立，特別是對(duì)于視覺語言和視覺風(fēng)格而言，這種映射關(guān)系會(huì)顯得尤其重要，否則，就好比簡(jiǎn)單的為創(chuàng)新而創(chuàng)新，結(jié)果就是最終的體驗(yàn)并不能很好的符合用戶的認(rèn)知心理，反而會(huì)增加用戶認(rèn)知負(fù)擔(dān)，更談不上提升產(chǎn)品的體驗(yàn)價(jià)值。
因此，作為用戶體驗(yàn)設(shè)計(jì)中的一部分–視覺語言，本身除了從視覺品牌形象的角度需要?jiǎng)?chuàng)新外，更多的承擔(dān)著為解決問題而創(chuàng)新的責(zé)任，而創(chuàng)新，則是在基于滿足功能需求這個(gè)第一必要條件的前提下，突破原有的條條框框，進(jìn)行重設(shè)計(jì)，絕非僅僅為了通過表現(xiàn)形式去表達(dá)彼此之間簡(jiǎn)單的差異，僅僅圍繞差異而進(jìn)行的創(chuàng)新，是狹隘的創(chuàng)新，同時(shí)也是割裂的設(shè)計(jì)，正所謂勇于標(biāo)新，絕不立異。
來源:Tencent CDC Blog
