|
下面的內(nèi)容是在《移動互聯(lián)網(wǎng)沙龍開年篇》做的一點分享，關(guān)于Material Design設(shè)計規(guī)范相關(guān)的,。 作為技術(shù)開發(fā)者需不需要了解設(shè)計規(guī)范,？個人認(rèn)為非常需要，一個交流的需要,，另一就是了解相關(guān)的設(shè)計才能儲備相應(yīng)地知識,，知道UI開發(fā)的方向。這問題非常希望讀者能留言討論,。 Android的設(shè)計風(fēng)格變遷可以劃分到三個時代：
無序時代無序時代是沒有Android設(shè)計規(guī)范的,。無序時代的Android應(yīng)用設(shè)計主要是參考的iOS的設(shè)計規(guī)范及其擬物，以及Windows Phone扁平化的MetroUI,當(dāng)然也有應(yīng)用自成設(shè)計風(fēng)格,。 擬物設(shè)計注重實物的陰影材質(zhì),， 扁平化注重信息的表達。下面兩張圖是擬物實現(xiàn)和MetroUI,。 圖一擬物實現(xiàn) 圖二MetroUI Holo Theme2011年底google發(fā)布了Android 4.0 ,，也就是通常所說的 ICS，同時也發(fā)布了指導(dǎo)性的應(yīng)用設(shè)計規(guī)范《Android Design》,， Holo theme 也是在Android 4.0才定下來的,。雖然在3.0版本就已經(jīng)有了一部分Holo的身影，但是android 3.X的設(shè)備占有率也不高,，Holo在3.0算是嘗試,。《Android Design》只是指導(dǎo)性的規(guī)范，國內(nèi)應(yīng)用使用的不多,。下圖是Holo Theme的表現(xiàn)形式,。Holo也算是扁平化的設(shè)計。 Material Design什么是 Materail DesignGoogle在I/O 2014上推出了新的設(shè)計語言Material Design,。Material Design以現(xiàn)實世界的紙墨為隱喻,，強調(diào)了陰影和層次，用動畫效果代表現(xiàn)實的力反饋,，試圖把物理世界的規(guī)則帶回電子界面,。而就Android 平臺而言，Material Design 不像此前的Holo 風(fēng)格那樣深沉,，它更加跳動和富有活力,。官方給出的解釋： Material design is a comprehensive guide for visual, motion, and interaction design across platforms and devices.  Materail Design的設(shè)計原則Material design有三個設(shè)計原則，也是其核心部分：
Material is the metaphor（隱喻）通過構(gòu)建系統(tǒng)化的動效和空間合理化利用，并將兩個理念合二為一,，構(gòu)成了實體隱喻,。與眾不同的觸感是實體的基礎(chǔ)，這一靈感來自我們對紙墨的研究,。關(guān)于隱喻,，我把分成了兩點： 1、紙和墨信息的承載從石板,、碑材、竹簡,、印章,、動物皮、布帛……最后發(fā)現(xiàn),，如果從簡潔的角度考察,，紙張是最優(yōu)秀的載體。既然沒有辦法完全的在手機上用app完全類比現(xiàn)實世界的邏輯層次,，我們把app規(guī)范到紙片上,，完全類比紙片的邏輯交互層次，這樣不更好嗎,。 Material Design 使用的基本工具來源于印刷設(shè)計,，例如通用于所有頁面的基準(zhǔn)線和刪格。布局排版能夠按比例橫跨不同尺寸的屏幕,，促進UI開發(fā)從根本上幫助你做可擴展的apps,。  2、層次與陰影 Material Design是一個三維空間,，這意味著所有對象具有的x,，y，z三種維度,。 z軸垂直對準(zhǔn)在顯示器的平面上,，朝向觀察者的z軸延伸方向是正方向。材料的每一個片占據(jù)沿著z軸一個位置具有標(biāo)準(zhǔn)1dp厚度,。  三維空間  片層1DP  層次與陰影 Bold, graphic, intentional（視覺設(shè)計） Material Design在基本元素的處理上,，借鑒了傳統(tǒng)的印刷設(shè)計，排版,、網(wǎng)格,、空間、比例、配色,、圖像等基礎(chǔ)的平面設(shè)計規(guī)范,。在這些設(shè)計基礎(chǔ)上下功夫，不但可以愉悅用戶,，而且能夠構(gòu)建出視覺層級,、視覺意義以及視覺聚焦。精心選擇色彩,、圖像,、選擇合乎比例的字體、留白,，力求構(gòu)建出鮮明,、形象的用戶界面，讓用戶沉浸其中,。 1,、用色（Color） 色彩從當(dāng)代建筑、路標(biāo),、人行橫道以及運動場館中獲取靈感,，由此引發(fā)出大膽的顏色表達激活了色彩，與單調(diào)乏味的周邊環(huán)境形成鮮明的對比,。強調(diào)大膽的陰影和高光,。引出意想不到且充滿活力的顏色。  Material Design在用色指導(dǎo)主要包含四方面：  2,、字體（Typography）文字字體在界面設(shè)計的美感中也是重要的一個方面,，google團隊花費了整整一年半的時間開發(fā)出了全新用戶界面字體“Roboto”。“Roboto”字體已經(jīng)是Android 4.0及以后Android版本的默認(rèn)字體,。Material Design中字體又做了改進,。下面是官方建議字體大小。 3,、圖標(biāo)（Icons） 系統(tǒng)圖標(biāo)的設(shè)計要簡潔友好,，有潮流感，有時候也可以設(shè)計的古怪幽默一點,。要把很多含義精簡到一個很簡化的圖標(biāo)上表達出來,，當(dāng)然要保證在這么小的尺寸下，圖標(biāo)的意義仍然是清晰易懂,。 4,、用圖（Imagery） 在material design中，圖像（無論是繪畫還是攝影）都應(yīng)該是組建而成而并非人為策劃的,，看起來神奇并且不顯得過度制作,。這種風(fēng)格樂觀,，愉悅，并且坦率,。這種風(fēng)格比較強調(diào)場景的實質(zhì)性（Materiality）,，質(zhì)感，深度,，讓人意想不到的色彩運用,， 以及對環(huán)境背景的關(guān)注。這些原則都旨在創(chuàng)建目的性強,，美麗又有深度的用戶界面,。 用圖原則如下： Motion provides meaning（動畫，交互）動畫效果可以有效地暗示,、指引用戶,。通過動效，讓物體的變化的更連續(xù),、更平滑,。 動畫的指導(dǎo)主要體現(xiàn)在一下四點：
1、真實的動作（Authentic Motion） Material Design強調(diào)現(xiàn)實生活中積累的交互預(yù)期向數(shù)字空間的移植,，于是設(shè)計指導(dǎo)一方面要求動畫的形式必須具備現(xiàn)實中的運動的關(guān)鍵特征,，同時也要求在界面轉(zhuǎn)換時，如同現(xiàn)實空間那樣,，伴隨動畫動作的發(fā)生,。 2、響應(yīng)式交互（Responsive Interaction） 用戶每一次的觸摸,，點擊都要有相應(yīng),，每一點都是活的。 3,、有意義的轉(zhuǎn)場動畫（Meaningful Transitions） 視圖切換存在轉(zhuǎn)場動畫,。 4、打動用戶的細(xì)節(jié)（Delightful Details）動畫最基本的使用場景是過度效果,，但哪怕是最基本的動畫,，只要恰到好處并足夠出色，同樣能打動用戶,。例如一個菜單圖標(biāo)變成一個箭頭或者是播放控制按鈕,，這種服務(wù)間的無縫切換不僅僅能讓用戶感知,，更是讓完美的細(xì)節(jié)和精湛的設(shè)計充滿你的應(yīng)用。用戶真的會感受到這些小細(xì)節(jié),。 Materail Design怎樣產(chǎn)生的 We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. This is material design. Material Design是蘋果的擬物設(shè)計,、微軟的扁平設(shè)計的延續(xù)。 參考資料 |
|
|
