2014年7月17日 星期四

Google Material Design UI

    Google的企業風格是開放的,它從網路搜尋業務起家,而search這個動作本身就代表了一種無邊無際、天馬行空的行為,我們在開放的世界中搜索既有的事物,組合不同的關鍵字便會攀藤牽絲的拉扯出不同的結果,這種沒有限制的關鍵字想像在無限制範圍裏所傳回的搜索結果,帶給我們的是更多資訊與創意的揮灑空間,沒有人會希望自己的搜索範圍是有限制的,因此在這樣開放的風格理念下,塑造出Google開放的文化,也為Google帶來無限的活力和源源不斷的創新產品。

開放所帶來的問題:碎片化

但是這種不加約束的開放文化若不僅限於內部員工而惠及所有的上下游廠商,那麼只會帶來災難與麻煩,體現在開放的Android系統上,就是硬體差異化與版本碎片化的現象,長期以來這個問題不但困擾著廠商與APP開發人員,也給消費者帶來麻煩,因為每支Android手機從系統版本、介面外觀、內置程式到螢幕尺寸都不一樣,而且也不保證所有的APP都可以相容的在不同的手機上執行。依據去年2013年的統計資料http://opensignal.com/reports/fragmentation-2013/,Android 的碎片化仍非常嚴重:
產品型號碎片化
http://cdn3.techbang.com.tw/system/images/130239/original/0604d727dec0b7e6d181a6665017acc3.jpg?1375692327
製造商碎片化
http://cdn2.techbang.com.tw/system/images/130240/original/7758f3f911e15a09ca48f1ec13efd745.jpg?1375692328
作業系統碎片化
http://cdn2.techbang.com.tw/system/images/130242/original/219a6466988e0328fb4543cac0c7c7fd.jpg?1375692328
螢幕尺寸碎片化
    其實Google也一直在試著解決這些碎片化的現象,他們採取的方式是:
  1. 推出官方版Nexus系列的手機,提供消費者一種長期的、可支援直接升級OS的手機。
  2. 從Android 4.3 (Jelly Bean)版本開始,可透過Play商店提供獨立系統應用進行升級。
  3. 推出獨立的APP來對不同的系統進行輔助性升級,例如官方的Android鍵盤、日曆、語音搜索和Chrome流覽器等50多款Android APP,所有的使用者都可以透過Play商店安裝,而無需等待Google發佈新的系統版本更新。
依據一份最新的2014年2月的資料顯示,似乎碎片化問題在Google的努力下已逐漸在疏緩中,但是2014年2月的數據顯示仍有20%比例還在使用Android 2.3版本;最近在Google宣示將切入穿戴市場與智慧型汽車市場之後,這類碎片化現象將是Android系統企待解決的問題,因為穿戴設備與智慧汽車都需要與手機進行整合,碎片化的現象將會導致Android系統在這些領域的整合上寸步難行。
https://lh3.googleusercontent.com/6oCnVnvSvVejLqk75CeWEdvWKtYjebTqfYTwS0cUryJ5s1vqeAQPV_qxH3WZMsYTPRHF45inLwUKJtYxP5SnDhIBSqg7mdXzZqh4i4ktlDBuG50mtmN2RChG5gL6SCjrlQ

除了碎片化,還有UI的混亂和無序

    Apple很早便開始針對系統的UI訂定了嚴格的標準與規範(您可以參考這份二百多頁的https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/MobileHIG.pdf),從公司內部到全球各地的開發者,都要對遵循他們的設計原則,因此,在iOS的世界裏,我們很容易就經由標準化的UI與操作而辨視出Apple的產品,久而久之便習慣並固守於其介面操作而無法自拔;從最早iPhone的複雜的擬真介面,一直到目前簡約的扁平化設計,iOS的介面外觀雖然經過更改,但Apple仍能僅守UI的統一原則,在所有Apple設備上維持UI與UX的連續性來黏住使用者。
 而Android不但有著硬體與系統上的碎片化問題,在UI介面上也是混亂到難以體現出Android的風格,手機廠商們不但可以訂製不同型號的專屬介面,為數更為眾多的APP開發者們,也在完全開放沒有任何限制和審核機制的環境下,隨意按照自己的想法來設計應用以及介面外觀,因此,用戶們完全無法在Android設備上得到連續一貫的使用體驗,這種UI無法整合的現象,在Google欲將Android推向物聯網、穿戴設備、Android TV、智慧汽車等市場領域之後,問題逐漸顯現出來形成極大的阻力,因為使用者無法在不同的設備轉換與整合上,得到統一且連貫的UI體驗。
 

Material Design的由來

    為了解決UI的混亂問題,Google在今年6月剛剛結束的開發者大會上,提出了「Material Design UI」的設計語言,它是一套同時適用於Android、iOS、Web等各種平台,且同時能適用於手機、平板、電視、電腦螢幕等不同裝置的跨平台/裝置的設計規則。
  這個由Google主管設計的副總裁Matias Duarte所主導開發的設計,最早idea的觸發是來自於一個有趣的問題:有一天同事Jon Wiley(他是負責Google搜尋介面的設計師)在使用Google Now時,他忍不住問道,「當我滑動卡片的時候,他們下面是什麼東西啊?」這個有些天真的問題啟發了Duarte而思考出Material Design的設計風格,並按照這個思路繼續思考下去,卡片的材質是怎樣的?卡片是什麼顏色的?人們是怎樣拿起卡片的?最終,Duarte 帶領一群設計師按照這個方向探索,並將其稱為「Material Design」。
 Material Design並不強調模擬實際真實的「Material」外觀,相反的,它所要表現的是不同的材質物料擁有不同的透光效應以及陰影表現,若將它們堆疊起來,也會產生凹凸起浮的立體感受,如果我們將這些材料轉換為手機螢幕上平面的畫素,並去除了複雜的肌理材質表現,只要關心它的質感、層次、深度、和其他物體的疊放邏輯,就可以將簡單的平面向量圖案予人實物的操作直覺,僅管它們並沒有實物的材質與紋理。








關於Matias Duarte這個人

    1996年畢業於美國馬里蘭大學,主修Computer science,副修藝術和藝術史,他畢業後就從事遊戲軟體相關的設計工作,並且在2007年在Palm擔任人機交互與用戶體驗副總裁與webOS UI設計負責人,設計出了廣受業界讚譽的 webOS,獨創的卡片式介面讓蘋果與 Google 的多工介面都受其啟發,他也因而開始受人注目並且擁有「移動用戶體驗設計大師」的封號;而在Palm 被 HP 併購後,他轉而加入了Google擔任Android設計副總裁,在自我介紹中他是這樣描述自己的目標:
To create great products that make people smile. 創造能夠讓微笑的偉大產品。」
http://ausdroid.net/wp-content/uploads/2014/07/786250203674489635.jpg
    在結束Google的開發者大會之後,近日他在接受媒體的訪談時,又提出頗為大膽且另人深思的觀點:
移動作為概念已然終結 - 並非移動設備壽終正寢,而應該是「為不同設備開發獨立的應用」。
Duarte的想法在於,舊有的移動設備應用開發方式已不再符合時代需求,他主張淡化設備本身的Native屬性,運用跨平台的Web技術與理念等,只需要開發一款應用就能運行在不同設備上,如此一來,設備的角色功能其實只是一塊塊不同大小的螢幕而已。

Material Design的設計理念

  Google在http://www.google.com/design/spec/material-design/introduction.html(Design Material的說明介紹網站)是這麼介紹Material Design:   









  在更深入瞭解之前,我們先看看這段Design Material的影片,它展現了Design Material的簡單、單純、色彩豐色及立體感的特色。

Design Material設計的九大原則

Google發佈的這篇PDF檔:http://www.google.com/design/material-design.pdf 說明了Design Material的九大原則,由於原文相當的精簡有些難以體會,因此我在翻譯時額外增加一些自已的想法和說明進去。

1)所謂「材料」僅是一種譬喻(Material is the Metaphor)

材料的譬喻是歸納自一個合理空間以及物體動作的一種理論,我們所謂的「材料」是以現實的觸感為基礎,靈感來自於現實中紙張和墨水的啟發,也揉入了夢境中的想像和魔法。

2)直觀且自然的物體表面(Surfaces are intuitive and natural)

    表面」和「邊緣」這兩個要素是人類眼睛感知實體物件的一種視覺線索,注入熟悉的觸覺屬性,可以讓這些物件在人類腦海中映射到實際物體並且很快的感受到物體動作帶來的啟示。
2-730x1096

3)空間維度的改變提供了交互作用的感受(Dimensionality affords interaction)

    光線、表面和移動是表現物體之間如何交互作用的基礎,利用模擬真實的光線來表現出物體的接縫線、分割面以及動態感的表現。
3-730x1096

4)一種自適應的設計(One adaptive design)

    只需要單一一套包含了物件的交互作用與空間等的設計系統,就能在相同的設計基礎上,應用於不同的設備表現出不同的樣式,它會自動依據設備螢幕調整大小並且呈現適合的動態效果,且每個物件的色調、圖示、階層關係和相對空間仍然保持不變。
(ps. 關於「自適應設計」可參考本人之前的知識文件:ResponsiveWeb)
4-730x1096

5)內容要大膽、圖示化以及帶有強烈意圖(Content is bold, graphic, and intentional)

透過大膽的設計來營造出物件的層次、意涵以及強調的重點,精心的色彩搭配、無邊線的圖像佈局、開闊的排版以及利用可以展現意圖感的白色空間來突顯物件的淡入及淺出。
5-730x1096

6)利用顏色、表面和圖示可以強調物體的動作(Color, surface, and iconography emphasize actions)

    與使用者互動是用戶體驗設計的本質,物件的基本動作是整個設計中的轉折點,這些簡單的動作就能強調出主要的功能,並且立刻就能讓使用者明白要作什麼。
6-730x1096

7)物件的變化是由使用者所引發(Users initiate change)

人機介面藉由與使用者的互動來取得改變的動能,使用者所進行一連串觸摸螢幕的動作,是一種主動的引導並且讓物件產生被動的交互作用。
7-730x1096

8)在螢幕這個公共舞台上,物件動作需要更精心的設計(Animation is choreographed on a shared stage)

由於物件都在同一個螢幕環境中動作,因此連續與一貫性對於使用者體驗非常的重要,尤其當物件改變了形式或重新組織時,更要注意是否仍然保有原先的體驗。
8-730x1096

9)物件的動作都是有含意的(Motion provides meaning)

    應賦予物件的每個動件意義及適當性,它不但要吸引使用者注意,也要能讓整體的操作保有連貫性,給予使用者的互動回饋不需要特別突顯但要讓他們有清楚的感受,物件或畫面的切換應有效率且協調。
9-730x1096.


Design Material的相關資源

Design Material不止適用於移動設備,它也能套用在任何的軟體或網站上,Google針對Material Design的教學及說明網站是:http://www.google.com/design,此外也有提供了相關的資源及範例可供下載,這些檔案是向量圖檔,必須用Adobe Illustrator來開啟。
(有分為Mobile、Tablet、Desktop和使用於開發設計階段的Whiteframes)
(有Structural Elements、Containers、UI Elements)










沒有留言:

張貼留言