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