logo资料库

Material Design简体中文版-完整版.pdf

第1页 / 共678页
第2页 / 共678页
第3页 / 共678页
第4页 / 共678页
第5页 / 共678页
第6页 / 共678页
第7页 / 共678页
第8页 / 共678页
资料共678页,剩余部分请下载后查看
概述
概述
环境
Material特性
3D空间中的物件
真实的动作
交互响应
有意义的转场动画
打动用户的细节
色彩
图标
图像
字体排版
准则
度量与边框
结构
底部动作条
按钮
卡片
纸片
提示框
分隔线
网格
列表
列表控制
菜单
选择器
进度和动态
滑块
Snackbars 与 Toasts
副标题
开关
Tabs
文本框
工具提示
数据格式
错误
内容选取
手势
影像处理
抽屉式导航
导览式动画
滚动时的技巧
促进的动作
设置
搜索
滑动更新
可达性
双向性
调色板
布局模板
Roboto 字体
贴片集
更新记录
material_design_zh 目錄 1. 概述 2. Material Design i. 概述 3. What is material? i. 环境 ii. Material特性 iii. 3D空间中的物件 4. Animation i. 真实的动作 ii. 交互响应 iii. 有意义的转场动画 iv. 打动用户的细节 5. Style i. 色彩 ii. 图标 iii. 图像 iv. 字体排版 6. Layout i. 准则 ii. 度量与边框 iii. 结构 7. Components i. 底部动作条 ii. 按钮 iii. 卡片 iv. 纸片 v. 提示框 vi. 分隔线 vii. 网格 viii. 列表 ix. 列表控制 x. 菜单 xi. 选择器 xii. 进度和动态 xiii. 滑块 xiv. Snackbars 与 Toasts xv. 副标题 xvi. 开关 xvii. Tabs xviii. 文本框 xix. 工具提示 8. Patterns i. 数据格式 ii. 错误 iii. 内容选取 iv. 手势 v. 影像处理 vi. 抽屉式导航 vii. 导览式动画 2
material_design_zh viii. 滚动时的技巧 ix. 促进的动作 x. 设置 xi. 搜索 xii. 滑动更新 9. Usability i. 可达性 ii. 双向性 10. Resources i. 调色板 ii. 布局模板 iii. Roboto 字体 iv. 贴片集 11. What's new i. 更新记录 3
material_design_zh Google Material Design简体中文版 本文件整合自Material Design 中文版和 Google Material Design 正體中文版 感谢翻译者们的贡献 概述 4
material_design_zh 概述 我们挑战自我,为用户创造了崭新的视觉设计语言。与此同时,新的设计语言除了遵循经典设计定则,还汲取了最新的科 技,秉承了创新的设计理念。这就是 原质化设计(Material Design) 。这份文档是动态更新的,将会随着我们对 Material Design 的探索而不断迭代、升级。 目标 我们希冀创造一种新的视觉设计语言,能够遵循优秀设计的经典定则,同时还伴有创新理念和新的科技。 我们希望创造一种独一无二的底层系统,在这个系统的基础之上,构建跨平台和超越设备尺寸的统一体验。遵循基本的移动 设计定则,同时支持触摸、语音、鼠标、键盘等输入方式。 概述 5
material_design_zh 设计原则 实体感就是(通过设计方式来表达)隐喻 通过构建系统化的动效和空间合理化利用,并将两个理念合二为一,构成了实体隐喻。与众不同的触感是实体的基础,这一 灵感来自我们对纸墨的研究,但是我们相信,随着科技的进步,应用前景将不可估量。 实体的表面和边缘提供基于真实效果的视觉体验,熟悉的触感让用户可以快速地理解和认知。实体的多样性可以让我们呈现 出更多反映真实世界的设计效果,但同时又绝不会脱离客观的物理规律。 光效、表面质感、运动感这三点是解释物体运动规律、交互方式、空间关系的关键。真实的光效可以解释物体之间的交合关 系、空间关系,以及单个物体的运动。 概述 6
material_design_zh 鲜明、形象、深思熟虑 新的视觉语言,在基本元素的处理上,借鉴了传统的印刷设计——排版、网格、空间、比例、配色、图像使用——这些基础 的平面设计规范。在这些设计基础上下功夫,不但可以愉悦用户,而且能够构建出视觉层级、视觉意义以及视觉聚焦。精心 选择色彩、图像、选择合乎比例的字体、留白,力求构建出鲜明、形象的用户界面,让用户沉浸其中。 Material Design设计语言强调根据用户行为凸显核心功能,进而为用户提供操作指引。 有意义的动画效果 动画效果(简称动效)可以有效地暗示、指引用户。动效的设计要根据用户行为而定,能够改变整体设计的触感。 动效应当在独立的场景呈现。通过动效,让物体的变化以更连续、更平滑的方式呈现给用户,让用户能够充分知晓所发生的 变化。 概述 7
material_design_zh 动效应该是有意义的、合理的,动效的目的是为了吸引用户的注意力,以及维持整个系统的连续性体验。动效反馈需细腻、 清爽。转场动效需高效、明晰。 原文:Introduction 翻译:iceskysl 校对:siton 概述 8
分享到:
收藏