“我們挑戰(zhàn)自我,為用戶創(chuàng)造了嶄新的視覺設(shè)計(jì)語言”—Google。與此同時(shí),新的設(shè)計(jì)語言除了遵循經(jīng)典設(shè)計(jì)定則,還汲取了最新的科技,秉承了創(chuàng)新的設(shè)計(jì)理念,這就是原質(zhì)化設(shè)計(jì)(Material Design),業(yè)內(nèi)也簡稱MD。谷歌表示,這種設(shè)計(jì)語言旨在為手機(jī)、平板電腦、臺(tái)式機(jī)和“其他平臺(tái)”提供更一致、更廣泛的“外觀和感覺,也就是說這套設(shè)計(jì)規(guī)范本意是解決Android的適配亂象,足夠媲美蘋果的設(shè)計(jì)。
1、Material is the metaphor
谷歌認(rèn)為現(xiàn)實(shí)世界中的材質(zhì)觸感是可以通過紙片的隱喻來表達(dá),通過在設(shè)計(jì)上運(yùn)用符合運(yùn)動(dòng)規(guī)律的動(dòng)畫交互、通過光影打造設(shè)計(jì)層次的關(guān)系可以創(chuàng)造全新的虛擬交互空間,并且這個(gè)空間是符合現(xiàn)實(shí)規(guī)律的。這也就是詳細(xì)文檔中提到的對于紙墨的研究。
2、Bold, graphic, intentional
在視覺上,谷歌不僅要求生動(dòng)形象,更要求設(shè)計(jì)時(shí)要確認(rèn)設(shè)計(jì)的目的,摒棄僅僅為了美觀而設(shè)計(jì),強(qiáng)調(diào)視覺設(shè)計(jì)要為用戶使用提供指引,凸現(xiàn)頁面當(dāng)下的核心功能。文檔中谷歌提到這部分借鑒傳統(tǒng)的印刷設(shè)計(jì)。
3、Motion provides meaning
交互動(dòng)畫的目的就是吸引用戶的注意,表達(dá)當(dāng)下頁面發(fā)生的變化,同時(shí)和對視覺要求一樣,一定要有意義。
谷歌在收掉webOS一票人后,Android也融入了一些卡片的理念。此次的Material Design個(gè)人的看法就是將卡片設(shè)計(jì)進(jìn)一步的規(guī)范,并且擴(kuò)展到整個(gè)系統(tǒng)層面。原來webOS是整個(gè)應(yīng)用被隱喻成了卡片,而Material Design把系統(tǒng)內(nèi)的各種設(shè)計(jì)都規(guī)范成了一種變形的紙片。然后,谷歌在套用現(xiàn)實(shí)中紙墨的物理模型進(jìn)行交互——“既然沒辦法完全在手機(jī)上用app完全模擬現(xiàn)實(shí)世界的邏輯層次,我把a(bǔ)pp規(guī)范到紙片上,完全模擬紙片的邏輯交互層次,還不行嗎?”
(Right Nav的陰影表現(xiàn))
簡而言之,Material Design的紙張?jiān)O(shè)計(jì)首先是將界面集成到紙片上,再通過陰影來區(qū)分多層的紙張,最后進(jìn)一步通過紙片的拼貼提供了多平臺(tái)統(tǒng)一且多樣的交互可能。依據(jù)Material Design 規(guī)范制作的應(yīng)用枚舉幾例,AliExpress、B&H、Fabulous、Google I/O等。
不過項(xiàng)目實(shí)際開發(fā)中,所有的設(shè)計(jì)都是為了輔助產(chǎn)品需求的實(shí)現(xiàn),同時(shí)保證用戶的優(yōu)良體驗(yàn)。如果設(shè)計(jì)僅是為了符合規(guī)范,這也就失去設(shè)計(jì)本質(zhì)的意義。
好不容易打住BBB的節(jié)奏...
下面正式進(jìn)入Google Material Desig 900個(gè)圖標(biāo)的axure元件庫主題。
臨時(shí)去找圖標(biāo)是一件很影響效率的事情,現(xiàn)在有這么一個(gè)機(jī)會(huì)擺在各位產(chǎn)品經(jīng)理們面前,您是選擇要,還是要呢?網(wǎng)上圖標(biāo)元件庫不乏少數(shù),但是要么數(shù)量不夠全面、要么不支持調(diào)整尺寸和顏色,三杠在此匯總一套來自于Google Material Design的實(shí)用Axure圖標(biāo)元件庫,其中一共有900+款的常用的經(jīng)典圖標(biāo)。
這是一套Axure原型設(shè)計(jì)的必備圖標(biāo)組件庫,包含了各類主流APP、網(wǎng)站等各種原型設(shè)計(jì)中需要的大部分圖標(biāo),可用于頁面樣式和布局,基本用了它基本就不再需要其它的圖標(biāo)組件庫了。相信產(chǎn)品經(jīng)理們或即將入行產(chǎn)品的各位童鞋用了這套圖標(biāo)元件庫之后,在原型設(shè)計(jì)時(shí)能夠得心應(yīng)手了,輸出的原型交互稿也會(huì)更逼格滿滿。
本套圖標(biāo)庫的特性:
1. 這是一套矢量的圖標(biāo)庫、可以隨意變化尺寸,不會(huì)出現(xiàn)鋸齒;
2. 支持直接修改顏色或填加漸變風(fēng)格、讓圖標(biāo)更符合你的設(shè)計(jì)風(fēng)格;
3. 支持修改形狀和輪廓,可以最大程度上的發(fā)揮你的創(chuàng)意;
4. 數(shù)量非常龐大,一共900多款,而且分類非常清晰,方便查找和使用。
Material Design 900個(gè)實(shí)用圖標(biāo)的Axure元件庫下載地址:
鏈接: http://pan.baidu.com/s/1ge7JAy3
密碼: 3mo3
作者:三杠(微信公眾號(hào):產(chǎn)品原型邦),不需要企業(yè)背書,獨(dú)立產(chǎn)品經(jīng)理。專注Axure原型設(shè)計(jì)、PRD、交互設(shè)計(jì)等產(chǎn)品經(jīng)理必備技能,期待你我的溝通。
聯(lián)系客服