Material Design從這11個方面打破了我的思維局限

分類:設計 時間:2016-09-24

雨涵_Zoe:這段時間為了研究控件,細看了一下 Material Design ,結果發現了很多創新、好用又有趣的東西。這里主要寫的是 Material Design 給我帶來的打破思維局限的東西,所以每一點都是精挑細選的關鍵點。

官方譯文:

  1. 《中文版來了!新版Material Design 官方動效指南》
  2. 《中文版來了!新版MATERIAL DESIGN 官方動效指南(二)》
  3. 《中文版來了!新版MATERIAL DESIGN 官方動效指南(三)》

學習筆記:

  1. 《學霸的自學筆記!Material Design設計規范學習心得》
  2. 《重磅教程!幫你全面徹底搞定MATERIAL DESIGN的學習筆記》
    ADVERTISEMENT

素材篇:

  1. 《新鮮熱辣!一組實用的MATERIAL DESIGN風格素材!》

實戰教程:

  1. 《重磅改版!網易新聞安卓客戶端MATERIAL DESIGN實戰》

什么是 Material Design:這是谷歌提出的一套集合視覺、交互和前端的界面設計規范,其目標有兩點,一是用視覺形式囊括經典的設計原則,并將將前沿創新和技術可能展現出來,二是以移動端為基礎,將所有尺寸、類型的設備統一起來。

在觸屏為主的時代,懸停狀態要慢慢淡出舞臺

不論是下拉框、按鈕、隱藏菜單……, Material Design 要么完全摒棄了鼠標懸停狀態,要么就只把懸停狀態看作一個無關緊要的視覺反饋。我雖然對懸停效果有些不舍,但也不得不承認,未來是點擊和手勢的時代,懸停已經在慢慢淡出舞臺的路上了。

ADVERTISEMENT

永遠不要以為用戶的設備尺寸是你可以預期的

尤其是那些用大屏的設計師們,不要有僥幸的心理認為在你的屏幕能完整顯示的一頁,在用戶的設備上同樣不需要滾頁。在設備越來越多樣化的未來,滾動條將不是一種選項,而是一種自適應。所以,永遠要讓頁底的控制按鈕浮起來,以適應過矮的屏幕。

陰影的目的不是美觀而是縱深

谷歌向來強調層級概念,這也是它與蘋果相差較明顯的一點。 Material Design 認為,界面不只是平面的,元素之間也可以有縱向的高度差,那么體現這個高度差的方法,就是陰影。 Material Design 的縱向尺寸和平面尺寸都用同一單位(dp),并統一了不同縱向高度所對于的陰影樣式。于是,便創造出了一個層級為堆砌起來的三維世界。

為了易用而確定尺寸

ADVERTISEMENT

界面布局和元素的尺寸究竟是該交互來定還是視覺來定,這是一個爭議性話題。我個人認為,尺寸還是應該先從交互開始,視覺設計如果從美觀上考慮有別的想法,可在此基礎上進行討論修改。因為界面的存在意義不是為了好看,而是為了使用。元素過小、過大、尺寸不統一都會影響到使用,所以這些東西都是交互必須要考慮的。 Material Design 給出了一個32dp(0.508mm)的尺寸限制,規定最小尺寸的按鈕和標簽都有這么高,以保證觸屏的使用舒適度。

隱藏與否取決于必要性,而非空間是否足夠

我承認并且反省,直到昨天,我的做法都是將所有可能用到的東西都擺在界面上,發現看起來過多或放不下時,才將部分通過“更多”圖標等方式隱藏起來。這樣做來其實有很多問題,如果用戶的屏幕足夠大,那么是不是什么東西都不用隱藏了?當然不是這樣,無論界面空間多充足,人的注意力都是有限的。所以 Material Design 主張只將必要的元素(也許只是一兩個)展示出來,其余的全部隱藏。

ADVERTISEMENT

慎用色彩

不知道這是不是又算不小心踏入視覺設計的領地了,色彩確實又是另一個需要視覺設計和交互設計共同探討的話題。很多時候,增加一個色彩或者不增加,對美觀并沒有什么很大的影響,如果是這樣,那么最好不要增加。世界頂尖的設計公司對色彩都是相當吝嗇的,因為界面存在的意義是使用,而為色彩越多,對用戶的干擾越大(可拓展性和品牌識別性也越低)。

讓真正重要且唯一的東西打破既定框架

交互設計如果做的隨意了,結果會很糟糕;但是如果做得嚴謹了,有時候會變得很無聊。我們是可以找到一個突破點,做一些不一樣、打破格局的東西的,但是這個東西必須是真正重要且唯一的東西。這個很好理解,如果只有一個東西不一樣,那么畫面會很有趣,但是如果所有東西都不一樣,就會很混亂了。Material Design 的圓形懸浮按鈕就是一個真正重要且唯一的東西。

彈出框沒必要多復雜

我從沒仔細看過彈出框的標題是什么,雖然我知道大部分彈出框都有標題。很多人如果發現彈出框沒有右上角的“times;”會抱怨,但實際上他們根本不需要那個“times;”,誰都知道在方框之外點一下彈出框就消失了。 Material Design 對彈出框的運用很靈活,如下圖這種情況,彈出框的用處只是增加一段評論而已,那么干脆將標題、確定按鈕和取消按鈕都去掉,這樣使用起來反而更加順暢了。

不是視線追蹤元素,而是元素追蹤視線

我曾在《為熟練用戶而設計》里提過,做設計時應該認真考慮甚至計算用戶的操作步數和移動距離。光是這些也許還不夠,最好是連視線移動都能夠盡量避免,因為二次聚焦也是需要時間的。上面那張圖中,彈出框上的文本區域與彈出框下的評論區域是重合的,這樣設計就避免了用戶多次移動視線。 Material Design 把視線追蹤也運用到了下拉框上,點擊下拉框區域后,選項框完全覆蓋之前的下拉框區域,并且按順序排列的選項會自動滾動,讓默認選項的位置剛好在之前的下拉框區域之上。

慎用卡片

自從iPhone把圓角陰影炒火了之后,在很多地方都出現了濫用情況,這幾年“卡片式”盛行,隱有愈演愈烈之勢。 Material Design 主張將卡片做成明顯的圓角,結合縱深感較強的陰影,這樣就能夠跟其它區域區分開來。但是在信息密集的地方又不提倡使用卡片,因為卡片的邊框會對注意力造成干擾。

讓信息碎片化

我們看任何東西,都很少會老老實實地完整閱讀。在紙上看書的時候,我們往往通過不斷地掃視、翻頁來尋找自己剛興趣的內容詳讀。在瀏覽網頁時,我們也希望能夠一眼在界面上掃到自己感興趣的內容,然后再深入研究。所以,設計師通常只需要拋出一些“引子”,用戶如果感興趣,就可以順著這個引子尋找到他們想要的東西。所有信息展示應該碎片化,注重豐富而不是完整。

紀念碑谷出品的像素完美手冊:

  1. 《值得每個設計師收藏的《完美像素使用手冊》之原理篇》
  2. 《中文版來了!值得每個設計師收藏的《完美像素使用手冊》之細節篇》
  3. 《第三集!值得每個設計師收藏的《完美像素使用手冊》之易用性篇》
  4. 《第四集!值得每個設計師收藏的《完美像素使用手冊》之軟件技巧篇》

原文地址: jianshu

【優設網 原創文章 投稿郵箱:[email protected]


Tags: MaterialDesign

文章來源:http://www.uisdc.com/material-design-break-through



相關文章