MaterialDesign统一AndroidChrome平台的全新设计语言视频教程:http://www.jikexueyuan.com/course/124.html?hmsr=wenku_materialdesign安卓开发教程ios开发教程cocos2dx教程Swift教程手机应用开发游戏开发教程写在前面GoogleI/O2014发布的MaterialDesign将会成为统一AndroidMobile,AndroidTable,Desktop等平台的设计语言规范,对从业人员意义重大,我们正通过互联网的方式将其翻译成中文~我们欢迎每一个人参与进来一起翻译和校对~~到来的朋友请点赞或分享吆喝支持,想做出贡献(翻译或者校对)的话,请加QQ群:137198122,谢谢!
目录MaterialDesign.............................................................................................................................................................................4概述(Introduction)...........................................................................................................................................................4Animation.....................................................................................................................................................................................7真实的动作(AuthenticMotion)......................................................................................................................................7交互响应(ResponsiveInteraction)...............................................................................................................................9有意义的转场动画(MeaningfulTransitions)..............................................................................................................13让用户愉悦的细节(DelightfulDetails).......................................................................................................................17打动用户的细节................................................................................................................................................................17Style............................................................................................................................................................................................18色彩(Color)...............................................................................................................................................................18字体排版(Typography).................................................................................................................................................24图标(Icons)....................................................................................................................................................................32图像(Imagery)....................................................................................................................................................................36Layout.........................................................................................................................................................................................49准则(Principles)............................................................................................................................................................49度量与边框(MetricsandKeylines)..............................................................................................................................59结构(Structure)..............................................................................................................................................................74Components................................................................................................................................................................................88底部窗口(BottomSheets).............................................................................................................................................88按钮(Buttons)................................................................................................................................................................91卡片(Cards).................................................................................................................................................................106纸片(Chips).......................................................................................................................................................................113提示框(Dialogs)...............................................................................................................................................................116分隔线(Dividers)..............................................................................................................................................................120网格(Grids)..................................................................................................................................................................123列表(Lists)...................................................................................................................................................................135列表控制(Listcontrols)..............................................................................................................................................151菜单(Menus)................................................................................................................................................................156进度和动态(ProgressandActivity).................................................................................................................................163滑片(Sliders)...............................................................................................................................................................164Snackbars与Toasts........................................................................................................................................................166副标题(Subheaders)....................................................................................................................................................171开关(Switches)..........................................................................................................................................................173Tabs...................................................................................................................................................................................176选择(Selection).................................................................................................................................................................183工具提示(Tooltips)...........................................................................................................................................................197Patterns......................................................................................................................................................................................200选择(Selection).................................................................................................................................................................200促进的动作(PromotedActions).......................................................................................................................................218设置-Settings.................................................................................................................................................................232搜索(Search).....................................................................................................................................................................234Usability....................................................................................................................................................................................239可达性-Accessibility.....................................................................................................................................................239
Resources..................................................................................................................................................................................240布局模板-LayoutTemplates.........................................................................................................................................240贴片集-StickerSheets...................................................................................................................................................241Roboto字体-RobotoFont............................................................................................................................................242调色板-ColorPalettes...................................................................................................................................................242参与者(按认领章节排序)iceskyslzhenbeiju7heavenJingshacom360arjinmcacelyHaoxiqianglhyqy5vincent4jCodeDivingdonlianggitThatMrLKrisSamanthaChoumarshlucaZeroLufortianwei感谢支持极客学院优设-UISDCUI中国-专业界面设计平台eoeAndroid开发者社区七牛云存储多说评论框GithubJekyllCalibreSemanticUI
MaterialDesign概述(Introduction)我们挑战自我,为用户创造了崭新的视觉设计语言。与此同时,新的设计语言除了遵循经典设计定则,还汲取了最新的科技,秉承了创新的设计理念。这就是原质化设计(MaterialDesign)。这份文档是动态更新的,将会随着我们对MaterialDesign的探索而不断迭代、升级。目标我们希冀创造一种新的视觉设计语言,能够遵循优秀设计的经典定则,同时还伴有创新理念和新的科技。我们希望创造一种独一无二的底层系统,在这个系统的基础之上,构建跨平台和超越设备尺寸的统一体验。遵循基本的移动设计定则,同时支持触摸、语音、鼠标、键盘等输入方式。
设计原则实体感就是(通过设计方式来表达)隐喻通过构建系统化的动效和空间合理化利用,并将两个理念合二为一,构成了实体隐喻。与众不同的触感是实体的基础,这一灵感来自我们对纸墨的研究,但是我们相信,随着科技的进步,应用前景将不可估量。实体的表面和边缘提供基于真实效果的视觉体验,熟悉的触感让用户可以快速地理解和认知。实体的多样性可以让我们呈现出更多反映真实世界的设计效果,但同时又绝不会脱离客观的物理规律。光效、表面质感、运动感这三点是解释物体运动规律、交互方式、空间关系的关键。真实的光效可以解释物体之间的交合关系、空间关系,以及单个物体的运动。
鲜明、形象、深思熟虑新的视觉语言,在基本元素的处理上,借鉴了传统的印刷设计——排版、网格、空间、比例、配色、图像使用——这些基础的平面设计规范。在这些设计基础上下功夫,不但可以愉悦用户,而且能够构建出视觉层级、视觉意义以及视觉聚焦。精心选择色彩、图像、选择合乎比例的字体、留白,力求构建出鲜明、形象的用户界面,让用户沉浸其中。MaterialDesign设计语言强调根据用户行为凸显核心功能,进而为用户提供操作指引。有意义的动画效果动画效果(简称动效)可以有效地暗示、指引用户。动效的设计要根据用户行为而定,能够改变整体设计的触感。
动效应当在独立的场景呈现。通过动效,让物体的变化以更连续、更平滑的方式呈现给用户,让用户能够充分知晓所发生的变化。动效应该是有意义的、合理的,动效的目的是为了吸引用户的注意力,以及维持整个系统的连续性体验。动效反馈需细腻、清爽。转场动效需高效、明晰。Animation真实的动作(AuthenticMotion)感知一个物体有形的部分可以帮助我们理解如何去控制它。观察一个物理的运动可以告诉我们它轻还是重,柔性还是刚性,小还是大。在materialdesign设计规范中,动作不止是呈现着它美丽的一面,它还意味着在空间中的关系、功能以及在整个系统中的趋势。体积和重量(MassandWeight)物理世界中物体拥有质量,所以只有当施加给它们力量的时候才会移动,因此,物体没法在瞬间开始或者结束动作。动画突然开始或者停止,或者在运动时突兀的变化方向,都会使用户感到意外和不和谐的干扰。最佳实践(BestPractices)materialdesign规范中,一个重要方面在于如何在“动作”完整的展现物体的各个真实的特性,譬如优雅、简约、美观和神奇的无缝的用户体验,下面的动画将帮助大家理解这些理念。要:迅速的加速和平滑的减速会感到自然和愉快
不要:线性动作会感到机械,在结束和开始的时候生硬的速度变化意味着物体突然开始运动或停止,这是不贴合现实的。特殊情况:进入和退出的场景当一个物体进入这个场景时,请确保它在最高速度下移动,这个行为模拟了自然移动:一个人进入场景的时候,并不是从场景的边缘开始走入的,而是从更远的地方。当然,一个物体退出这个场景时,需要维持它的速度,缓慢的离开场景,逐渐的进入和缓慢的离开会把用户的注意力吸引到这个动作上,在大多数情况下,这是你希望的效果。要:小球在最大的速度下进入和退出场景,创造了一个确信的过渡效果。不要:快速进入和缓慢离开,不要让用户因速度变化转移注意力。需要做的调整(Makingadjustments)