萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 終結擬物化與扁平化之爭!

終結擬物化與扁平化之爭!

   其時的中國,正被各種社會問題所困擾,也引發了學界對於各種”主義”的主張。針對這些主義,胡適闡明了自己的態度 ———— 現在輿論界大危險,就是偏向紙上的學說,不去實地考察中國今日的社會需要究竟是什麼東西……某種社會,到了某時代,受了某種的影響,呈現某種不滿意的現狀。於是有一些有心人,以這種現象,想出某種救濟的法子。

  這是”主義’的原起。主義初起時,大都是一種救時的具體主張。後來這種主張傳播出去,傳播的人要圖簡便,使用一兩個字來代表這種具體的主張,所以叫他做’”某某主義”。

  主張成了主義,便由具體的計劃,變成一個抽象的名詞。……”主義”的大危險,就是能使人心滿意足,自以為尋著包醫百病的”根本解決”,從此用不著費心力去研究這個那個具體問題的解決法了。

終結擬物化與扁平化之爭! 三聯

  這裡搬出這些文字,是想拋玉引磚,借真知來粉飾拙見,談一談眼下產品和設計業界裡的”問題”與”主義”。

  擬物主義 VS 扁平主義?

  眾所周知,自微軟創造出Metro伊始,關於”skeuomorphic(擬物化)”和”flat(扁平化)”的的爭議就未曾間歇過。這一公案,在6月11日蘋果發布iOS7後,更是被推上一個新的高潮。至於這段公案的詳情這裡就不再贅述,看官可隨意Google之。

終結擬物化與扁平化之爭

  這段公案,其核心便在於大眾和業界人士眼中所謂”Skeuomorphic(擬物化)”和”Flat(扁平化)”的對立。”擬物主義”和”扁平主義”各執一端,相持不下,征伐不已。而波及到現實工作中,也經常可以看到很多產品經理或設計師動辄便將”擬物化”和”扁平化”放在嘴邊——”這個太平了,沒什麼質感,不上流”、”這是潮流,現在都追求扁平化”。孔子曰過:”攻乎異端,斯害也已”,對於到底是該繼續堅持擬物主義,還是該追隨扁平主義?下文就來妄談一下,供看官一笑。

  首先,請評判一下,下圖中哪款設計是Skeuomorphic擬物設計?哪款又是Flat扁平設計?

終結擬物化與扁平化之爭

  答案看似是不言而喻的——左圖是Skeuomorphic擬物設計,右圖是Flat扁平設計。

  但是,真的是這樣嗎?這個問題其實是個陷阱,而前面的答案則是不准確的。因為,兩款設計都是Skeuomorphic擬物設計,而只有右圖是Flat扁平設計。為什麼這麼說呢?

  首先我們來看Skeuomorphic擬物設計的概念。

  試譯之——Skeuomorph是一種裝飾手段或設計手法,用於在某個對象上復制來自其他材料或方法所制成對象的形式。例如,在陶器把手上添加模仿金屬鉚釘造型的裝飾,使得原材料為黏土的器皿看起來像是用金屬制成。這一過程可由下圖表示:

終結擬物化與扁平化之爭

  其中,F不僅僅單指狹義的外觀樣式,更多的是指布局、方式、體裁等。

  回頭再看上面的例子,就會發現,兩圖都是對現實中的鐘表所做的模仿,並沒有跳出現實的框架而設計出某種全新的計時形式。不同的是,右圖沒有使用漸變、高光等額外的特效處理,左圖則僅在真實感的模擬上比右圖更近了一步。可見,通常情況下,人們對Skeuomorphic擬物主義和Flat扁平主義的爭論焦點並未跳出表象,而更多是簡單地糾結於視覺層面的特效處理孰優孰劣上。

  這種爭論,往往將兩者簡單粗暴地置於對立面,卻忽視了Skeuomorphic和Flat問題的重點——視覺是服務於產品的,到底該使用Skeuomorphic還是Flat,這個問題應該站在產品層面來考慮。我把這種選擇比喻為漁網和釣線的選擇,用漁網的人指責釣線的簡單單一,用釣線的人指責漁網的復雜粗放,卻都忽視了兩者的目的、使用場景和使用者的差異所在。

終結擬物化與扁平化之爭

  因此,在做設計之前,要先明確好產品的定位,做有針對性的設計,用設計去解決切實的問題,而非僅僅停留在表象去爭論風格的好壞、主義的優劣。

  那麼,什麼才是有針對性的設計?

  為解決問題而設計

  探討上文的問題之前,先來看個例子——

終結擬物化與扁平化之爭

  給出的替代方案,是以機器人代替工人完成重物的遠距離搬送。

終結擬物化與扁平化之爭

  固然這個人形機器人看起來很酷,夠科技,也有人情味,但這是一個好的設計嗎?將設計作品等同於對現實的模擬,其實是一項膚淺而又耗費資源的工作。如果站在實際角度去解決切實的問題,可以得到一個更加扁平高效的方案如下。

終結擬物化與扁平化之爭

  那麼是否就是說,這種扁平化的機器人設計解決方案就是正確的呢?再看下圖。

終結擬物化與扁平化之爭

  顯然,每一種設計風格都是有局限性的。當目的不同時,適用的設計解決方案是不同的,也無法認定一種風格是優於另一種風格的。在有針對性的設計中,設計要解決的問題是最重要的,至於采用哪種視覺語言,應當首先取決於產品要達到的目的,而非時下流行的設計風格。以iOS6和iOS7的”返回”為例——

終結擬物化與扁平化之爭

  iOS6的返回在視覺上更像一個”按”鈕,通過使用更接近真實物理世界觀的陰影、高光和漸變對返回操作區域進行闡釋,給予人一種可以點觸的視覺觀感。

  這一設計所帶來的好處是,通過具有強烈操作暗示(局部范圍的點觸感)和方向暗示(箭頭造型和被箭頭包裹的文字)的擬物手法,降低使用者的學習成本,並提升使用者對操作結果預判的准確度。

  這種設計手段在iPhone尚未淪為街機的那些年頭是非常有價值的,能夠以友好的姿態,使具備任何認知程度的使用者都能快速上手,有利於發展iOS的用戶群體。iOS7的返回,則通過扁平化的處理,在視覺上擺脫了”按”這一動作隱喻,並主要強調一種與整個屏幕更加一體化的方向感。這種改變並非僅僅為了服從整體設計風格的變化,而更多可以解讀為一種適應產品現狀的進化——

  1、從普通屏到retina屏的升級,使原先擬物化的設計需要占用更多的系統資源。屏幕的增大意味著切圖尺寸的增加,切圖尺寸的增加勢必帶來占用系統空間的增長。而在特定尺寸下,需要大量視覺細節的擬物化設計必然會使用到更多的顏色,從而使切圖的數據量成倍增加。

  這一點在屏幕尺寸分化中所帶來的影響是極為嚴重的。而由於扁平化的設計對細節元素的使用更為克制,能夠較好地解決在不同分辨率下的適配問題,而不需要耗費太多的資源(包括系統資源和人力投入資源)。如下圖所模擬的結果,iOS6按鈕切圖的數據量在三種尺寸下成倍增加,而iOS7按鈕切圖的數據量增加並不多。

終結擬物化與扁平化之爭

  2、從3.5英寸屏幕到4英寸屏幕的升級,使得手指完成屏幕左上角點觸操作所需的路徑增長。同時,在iOS6的返回按鈕設計上,實際的點觸響應區域要大於視覺限定的區域,手指即使未能精確點觸到視覺上的按鈕區域,也會觸發返回的動作。

終結擬物化與扁平化之爭

  結合這兩點考慮,顯然在大屏幕上,有明確觸控范圍的點觸樣式不再是一個理想的視覺展現形式,過於強調點觸區域的精確度會在一定程度上增加用戶心理上的疲勞感。反之,iOS7的返回則規避了這一問題,對點觸區域的模糊化處理在一定程度上釋放了用戶的操作壓力。

copyright © 萬盛學電腦網 all rights reserved