material design 筆記

網(wǎng)上已經(jīng)有大量關于material design設計說明,就乘著這陣東風,寫下最近自己自學的感受。

material design的核心?

直面翻譯就是材料設計,聽說現(xiàn)在中文譯名叫原質化設計了,一翻譯后,不知道怎么都變LOW了,-。-跑題了,核心是:

1.這是一個希望在多平臺,多分辨率下都能統(tǒng)一體驗感受的規(guī)則

2.這是一個希望能模擬真實物理環(huán)境,給予用戶更加簡單易懂的操作邏輯的規(guī)則

到底是什么——紙片

前面說關于核心,更加深入的說,這一切的規(guī)則和內容的載體正是紙片,怎么說,material design就是由紙片構成的,如果當做真實環(huán)境下自己站著看桌上的幾張紙片也可以,只不過紙片是可以隨便拉升大小的,那么這套規(guī)范的一切都可以理解了。

1.真實環(huán)境環(huán)境的紙張自然就有厚度,與投影

2.真實環(huán)境中從桌上拿起紙片時,有物理的高低,越高的自然就會有更大的投影,這也是Z軸的感念,當引入這條十分有趣,離自己越近的紙片當然會越高,也將是內容看的最清晰的,更是關注的焦點。

3.真實環(huán)境中,紙片被按下的波動

4.真實環(huán)境中,拿起一張折疊紙片,要看清其折疊的內容,理所當然的要展開,這正是對應從父界面進入子界面,需要抬升子元素的海拔高度,并展開至整個屏幕,反之亦然。


更多的細節(jié)還有很多,但大多遵循著物理環(huán)境中紙片的原則。

material design為什么要這么設計(優(yōu)點)

其這么設計一直都圍繞著他的核心來(媽蛋,這不是廢話嗎?)

1.為了在多平臺獲得相同的體驗,才使用的卡片式設計

當內容都被規(guī)劃為不同的卡片時, 傳統(tǒng)的框架便會被打破, 相對而言空間利用的方式會得到極大的拓展.不同大小/內容的卡片能夠被方便的放到一個"卡片組"中, 或者說, 同一種大小, 方向的卡片很自然的會被歸結為同一種邏輯類型. (比方說, 對于一個需要分組的集合而言, 合理利用不同類型的卡片比起傳統(tǒng)列表項 + 分割線 + 標題的視覺效率要高太多.Pinterest,花瓣等這類型的圖片展示網(wǎng)站為什么需要用卡片設計,正是因為內容尺寸不一,需要統(tǒng)一)

2.為了更加簡單易懂的操作邏輯的規(guī)則,才模擬物理環(huán)境

就像IOS6之前的擬物,是為了降低用戶在識別門檻,material design大量的模仿物理環(huán)境與操作邏輯不單是為視覺層面,更是希望在交互邏輯層面更加接近物理環(huán)境,進一步降低使用門檻,

問題

還記得說自適應網(wǎng)站設計是為了適應多分辨率才誕生的,為了適應眾多分辨率造成了中庸的設計,現(xiàn)在眾多的自適應網(wǎng)站大多都大同小異,這是一種無奈的選擇,那么material design的卡片設計是否也是谷歌因為了應對安卓的眾多分辨率,做的一個無奈選擇呢?說了這么多,我要開噴啦

1.卡片設計?

卡片式設計對頁面空間的消耗非常大,導致一屏呈現(xiàn)的信息量很小,在內容的展示時會加重視覺負擔,而為了模仿物理環(huán)境,加入了大量的投影,厚度,材質,強化了卡片感,帶來了進一步加劇了內容的分割感,這對設計師是否是一種考驗呢?

2.布局?

如果按照material design規(guī)范來設計,大量的的功能操作集中在上TAB欄,在手機屏幕越來越大的現(xiàn)在,是否會造成操作的負擔呢(網(wǎng)易云音樂按照material design規(guī)范設計的新版本真實無言以對啊),material design的布局方式,感覺更加偏向于閱讀型的,那么重操作的應用該如何設計呢?(對于微信與QQ這種主要功能分類在下便簽欄的應用到時候該如何設計,我持觀望態(tài)度。微信就有過按照安卓規(guī)范設計后走回頭路的先河)

3.懸浮按鈕?

懸浮按鈕作為一個主要功能按鈕,可看到不只一個應用出現(xiàn),上TAB欄的功能按鈕與懸浮按鈕功能重疊(云集,沒錯就是他),這是否是基礎設計的失誤呢?

碎碎念一句,屏幕內容前總有個按鈕擋著,真的很不爽(設計師的玻璃心,其實無所謂)

總結

我不止一次的認為,視覺規(guī)范就是一個人的骨架,至于最后張的好不好看就要看設計師的本事了,但是按照規(guī)范來做設計,至少能張的像個人吧。Matias Duarte這位大神自從來到了谷歌以后,將他當年web os的卡片式設計帶來了,可能多彩的視覺風格也是他帶來了的(畢竟他的著裝風格實在是獨特~。~),讓雜亂的安卓有了自己的視覺規(guī)范,規(guī)范細節(jié)詳細程度,甚至讓我覺得即使不會做設計的人,也能做的很好(我感覺要失業(yè)了)。越來越多的應用正按照這套規(guī)范開發(fā)著,相信安卓的應用會越來越規(guī)范起來,安卓的“雜亂無章”會得到改變。

圖片來自

可樂橙的material design學習筆記? http://www.colachan.com/post/3416

http://www.google.com/design/spec/material-design/introduction.html

更多詳細細節(jié)可以看可樂橙的學習筆記,十分完善和詳細

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容