Material design系列(1) - 概述

Introduction概述

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. This spec is a living document that will be updated as we continue to develop the tenets and specifics of material design.

我們自我挑戰(zhàn),給我們的用戶創(chuàng)造了一種視覺語言,這個語言遵循了優(yōu)秀設(shè)計的傳統(tǒng)原則以及汲取了新的創(chuàng)新理念和科學(xué)磺浙。這就是原味設(shè)計(Material design).這個說明書會在我們發(fā)展原味設(shè)計的原則和細(xì)節(jié)時不斷進行更新猜极。

Goals目標(biāo)

goal1.png

Create a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science.

創(chuàng)造一門遵循優(yōu)秀設(shè)計的傳統(tǒng)原則摇肌、汲取新科技和創(chuàng)新理念的視覺語言

goal2.png

Develop a single underlying system that allows for a unified experience across platforms and device sizes. Mobile precepts are fundamental, but touch, voice, mouse, and keyboard are all ?rst-class input methods.

我們希望發(fā)展一個簡潔設(shè)計的底層基礎(chǔ)都伪,以提供跨平臺和跨設(shè)備上的統(tǒng)一體驗。遵循移動設(shè)計的準(zhǔn)則昔汉,并同樣支持觸摸督赤、聲音嘁灯、鼠標(biāo)以及鍵盤等輸入方法。

Principles原則

1.png

Material is the metaphor
原味是基本的

A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.
實體的隱喻符合在合理的空間和手勢運動體系上統(tǒng)一的一致的原則躲舌。
實體是接地氣的在觸覺上符合現(xiàn)實的感覺丑婿,受到前沿理論、現(xiàn)有高等科技和腦洞大開的想象力的影響。

Surfaces and edges of the material provide visual cues that are grounded in reality. The use of familiar tactile attributes helps users quickly understand affordances. Yet the flexibility of the material creates new affordances that supercede those in the physical world, without breaking the rules of physics.

實體通過曲面和邊界提供了有真實世界感受的視覺羹奉。使用與生活現(xiàn)實相似的特性幫助用戶快速的理解和感知秒旋。實體設(shè)計的多樣化創(chuàng)造了用戶新的觸覺感受,但這些又不會脫離現(xiàn)實物理的規(guī)則诀拭。

The fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space and in relation to each other. Realistic lighting shows seams, divides space, and indicates moving parts.
光線迁筛、皮膚和運動感是表達(dá)一個東西如何移動、相互作用以及存在于空間當(dāng)中和聯(lián)系其他東西的鑰匙炫加。真實的光線可以展示出物體之間的相互關(guān)系瑰煎、分離關(guān)系和單個物體的運動铺然。

2.png

Bold, graphic, intentional
鮮明俗孝、形象、有內(nèi)涵

The foundational elements of print-based design—typography, grids, space, scale, color, and use of imagery—guide visual treatments. These elements do far more than please the eye. They create hierarchy, meaning, and focus. Deliberate color choices, edge-to-edge imagery, large-scale typography, and intentional white space create a bold and graphic interface that immerse the user in the experience.

這個語言在基礎(chǔ)元素的處理上借鑒了傳統(tǒng)的印刷設(shè)計——排版魄健、網(wǎng)格赋铝、空間、尺寸沽瘦、顏色和圖像使用——是視覺處理的規(guī)范革骨。這些元素為用戶視覺做了很多功夫。他們創(chuàng)造了視覺分層析恋、含義良哲、以及吸引力。精心選擇的色彩助隧、合適的圖像筑凫、合適的字體、以及特意的留白創(chuàng)造了一種鮮明形象的視覺并村。這一切帶給用戶愉悅的體驗巍实。

An emphasis on user actions makes core functionality immediately apparent and provides waypoints for the user.

Material Design 的原則強調(diào)符合用戶的操作習(xí)慣和操作軌跡來進行設(shè)計。

3.png

Motion provides meaning
有意義的動態(tài)效果

Motion respects and reinforces the user as the prime mover. Primary user actions are inflection points that initiate motion, transforming the whole design.
動態(tài)效果尊重并強調(diào)滿足用戶最重要的需求哩牍。動態(tài)設(shè)計能夠根據(jù)用戶行為來改變棚潦。

All action takes place in a single environment. Objects are presented to the user without breaking the continuity of experience even as they transform and reorganize.
全部的動態(tài)效果在獨立的場景下產(chǎn)生,動效應(yīng)該不打斷用戶體驗膝昆,即使是在用戶改變時丸边,物體的變化的方式應(yīng)該連續(xù)、平滑且不明顯荚孵。

Motion is meaningful and appropriate, serving to focus attention and maintain continuity. Feedback is subtle yet clear. Transitions are ef?cient yet coherent.
動態(tài)效果應(yīng)當(dāng)是有意義且合適的妹窖,幫助用戶集中關(guān)注點和維護連續(xù)性。反饋應(yīng)當(dāng)是極其細(xì)節(jié)且清楚的处窥。轉(zhuǎn)場運動同樣要高效且清晰嘱吗。

PS:允許非商業(yè)性轉(zhuǎn)載,轉(zhuǎn)載請注明出處,謝謝.


這里只求真,沒有真理。
微信公眾號:PM范兒

記錄一個不懼撞南墻的野路子產(chǎn)品經(jīng)理的故事.
期待分享和交流~


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末谒麦,一起剝皮案震驚了整個濱河市俄讹,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌绕德,老刑警劉巖患膛,帶你破解...
    沈念sama閱讀 221,635評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異耻蛇,居然都是意外死亡踪蹬,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,543評論 3 399
  • 文/潘曉璐 我一進店門臣咖,熙熙樓的掌柜王于貴愁眉苦臉地迎上來跃捣,“玉大人,你說我怎么就攤上這事夺蛇【纹幔” “怎么了?”我有些...
    開封第一講書人閱讀 168,083評論 0 360
  • 文/不壞的土叔 我叫張陵刁赦,是天一觀的道長娶聘。 經(jīng)常有香客問我,道長甚脉,這世上最難降的妖魔是什么丸升? 我笑而不...
    開封第一講書人閱讀 59,640評論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮牺氨,結(jié)果婚禮上狡耻,老公的妹妹穿的比我還像新娘。我一直安慰自己波闹,他們只是感情好酝豪,可當(dāng)我...
    茶點故事閱讀 68,640評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著精堕,像睡著了一般孵淘。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上歹篓,一...
    開封第一講書人閱讀 52,262評論 1 308
  • 那天瘫证,我揣著相機與錄音,去河邊找鬼庄撮。 笑死背捌,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的洞斯。 我是一名探鬼主播毡庆,決...
    沈念sama閱讀 40,833評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼坑赡,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了么抗?” 一聲冷哼從身側(cè)響起毅否,我...
    開封第一講書人閱讀 39,736評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎蝇刀,沒想到半個月后螟加,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,280評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡吞琐,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,369評論 3 340
  • 正文 我和宋清朗相戀三年捆探,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片站粟。...
    茶點故事閱讀 40,503評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡黍图,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出卒蘸,到底是詐尸還是另有隱情雌隅,我是刑警寧澤,帶...
    沈念sama閱讀 36,185評論 5 350
  • 正文 年R本政府宣布缸沃,位于F島的核電站,受9級特大地震影響修械,放射性物質(zhì)發(fā)生泄漏趾牧。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,870評論 3 333
  • 文/蒙蒙 一肯污、第九天 我趴在偏房一處隱蔽的房頂上張望翘单。 院中可真熱鬧,春花似錦蹦渣、人聲如沸哄芜。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,340評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽认臊。三九已至,卻和暖如春锄奢,著一層夾襖步出監(jiān)牢的瞬間失晴,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,460評論 1 272
  • 我被黑心中介騙來泰國打工拘央, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留涂屁,地道東北人。 一個月前我還...
    沈念sama閱讀 48,909評論 3 376
  • 正文 我出身青樓灰伟,卻偏偏與公主長得像拆又,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,512評論 2 359

推薦閱讀更多精彩內(nèi)容