Material Design设计规范(一)

快来打我* 2023-10-11 12:12 37阅读 0赞

# Material Design #

## 一、安卓是什么？ ##

> 想象一下，过年同学聚会上，大家把手机都放在饭桌前，除了各种型号的 iPhone 之外，你还能看到什么品牌的手机呢？我猜一定会有 OPPO、VIVO、魅族、小米、华为、三星对吗？也许还有一加、锤子、联想等手机品牌。这些手机全部都是使用了 Android底层构架的设备，也就是我们所说的安卓手机。。再后来，谷歌收购了安卓，有了谷歌母公司的资源，安卓的发展就更加顺风顺水，在2017年全球智能手机市场有85%的设备都使用了安卓系统。可以说当今世界除了苹果的 iOS操作系统之外，几乎全部都是安卓的天下。就连我们周围的一些智能设备、银行的手写签名系统、ATM机等都大量采用了安卓操作系统。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70]

## 二、安卓的尺寸 ##

> 由于安卓是一个野蛮生长的市场，没有如苹果一样严格的硬件生产规范，造成了安卓屏幕尺寸非常杂乱。从下图我们就可以看到，市场上的安卓屏幕尺寸简直是一场噩梦。大小不一的屏幕中，但使用率最高的是720P和1080P。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70 2]△ 安卓主流分辨率表

> 其他的分辨率我们可以使用自适应的方法进行适配。这就是目前安卓设备的主流适配方式。为了方便大家查询每个设备大小的 dp值和 px值，Material Design 为我们准备了一个网站来查询主流安卓设备的尺寸（网址：https://material.io/tools/devices/）。

### 1. DP单位 ###

> Dp 是独立密度像素的简称（Density-independent pixels）。是安卓设备上的基本单位，如同苹果设备上的 pt 一样，dp 与我们建图时的 px单位需要通过分析设备的 PPI值来换算。大家还记得 PPI公式吗？

△ PPI计算公式

> 那如果我们有了一个设备的 ppi值，然后使用公式即可知道这个设备里1dp等于多少像素了：

![在这里插入图片描述][20190923135614658.jpg]

> `dp*ppi/160 = px`

> 计算了一下小米手机2屏幕的PPI，4.3英寸、分辨率1280\*720，PPI = √ (1280 ^ 2 + 720 ^ 2) /4.3= 341.5359…… ≈ 342

> 手机屏幕的PPI当达到一定数值时，人眼就分辨不出颗粒感了。这个数值是多少？按照2010年前苹果公司CEO史蒂夫·乔布斯（Steve Jobs）在iPhone 4发布会上对视网膜技术的介绍：“当你所拿的东西距离你10-12英寸（约25-30厘米）时，它的分辨率只要达到300ppi这个‘神奇数字’（每英寸300个像素点）以上，你的视网膜就无法分辨出像素点了。”（人眼能看到颗粒度的极限)是不是屏幕PPI超过这个数值就没有意义了？即使是做出分辨率的产品，这也要看它的饱和度，渲染度。

## 三、设计方法 ##

*  由于安卓设备ROM设计不相同、屏幕尺寸不相同、而且三大金刚键也不一定存在，所以在这种情况下做设计让设计师很头大。
 *  按照安卓最新的 Material Design规范来进行单独的安卓版界面设计。这个是最花时间的，但是是最规范的。Google 为旗下全线产品提供了一个类似苹果HIG 的设计规范，并且有独特的设计语言。如果公司允许，使用 Material Design来设计安卓版是最好的。比如知乎、印象笔记等产品采用了 Material Design 的设计方式。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70 3]

## 四、什么是Material Design？ ##

> Material Design 不仅仅是安卓阵营产品的设计规范和风格，甚至它鼓励设计师和开发者把这种风格用在苹果设备和 windows设备上。并且希望将其运用到谷歌以后的所有产品中。  
> 作为设计规范，它很包容，却有时又非常严格。使用了 Material Design 的产品给人很强的统一感和秩序感。如果从历史来看的话，Google 的产品从来没有一个正式严格的视觉规范。甚至每个产品线都有自己的设计风格和自己的品牌。但2011年后，拉里佩奇掌握了 Google 的控制权后，他改变了那种过去「程序员主导一切」的情况，他召集了谷歌最好的设计师一起重新设计了所有产品的语言，终于在2014年的 Google I/O 上推出了 Material Design，宣告 Google 重视设计的时代来了。Google旗下的电脑、穿戴设备、电视等设备都可以使用 Material Design 作为视觉规范，甚至 Google 鼓励开发者在 iOS平台也使用 Material Design.

> Google 的 Material Design 并不是简单的扁平设计，而是一种注重卡片式设计、纸张的模拟、使用了强烈对比色彩的设计风格。这种风格形成了独一无二的 Material Design。Material Design 的目标是创建一种优秀的设计原则和科学技术融合的可能性（Create）、并给不同平台带来一致性的体验（Unify）、并且可以在规范的基础上突出设计者自己的品牌性（Customize）。

### 1. Material Design的隐喻 ###

*  Material Design 并不是完全的抽象扁平风格，它从物理现实中学习了诸如质感、投影、加速度、纸张的模拟等隐喻方法，这些都会让 Material Design 更容易被用户理解。其实我们知道Google一直在尝试不同的设计风格，扁平化设计的优势就是信息噪音少，而缺点就是情感传递不足，而 Material Design似 乎是一个很好的解决方案。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70 4]

### 2.设计理念 ###

*  Material Design 的设计中有很多设计理念是需要我们深度学习的，我们要学习这套理论的思维模式，其实就算我们不准备使用 Material Design，对我们的设计思维提高也是一个很有益处的思考过程。
 *  谷歌是这样介绍的：“设计是创造的艺术，我们的目标就是要满足不同的人类需要。人们的需要会随着时间发展，我们的设计，实践，以及理念也要随之提 升。我们在自我挑战，为用户创造了一个可视化语言，它整合了优秀设计的经典原则和科学与技术的创新。这就是Material Design。”

### 学习途径推荐 ###

*  https://www.25xt.com/appdesign/7112.html

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190923135508365.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190923135530113.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20190923135549567.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw==,size_16,color_FFFFFF,t_70
[20190923135614658.jpg]: https://img-blog.csdnimg.cn/20190923135614658.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20190923135628731.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/2019092313564326.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw==,size_16,color_FFFFFF,t_70