前言
泱泱华夏5千年历史，时代的车轮推动着文明的进步，同时也拉动着各朝各代的兴起崩坏。唐风宋韵，明砖清瓦，大多朝代都有着极具特色的美学价值观，很多美学的设计，时至今日已还在影响着现代人的审美并慢慢成为了它们时代的印记。
这个现象也存在于如今的品牌设计中，当然也包括我们的app。比方说我们国内的微信的设计配色（绿白红色），网易云音乐（红白黄色），抖音（黑白红色）等等。。这些国民app都有一套独立完整的美术设计系统，用户往往仅仅看个页面就猜出来是哪个app甚至是哪个大厂的设计。
所以在当今app的市场上，一个app的美术设计系统，往往也决定着这个app在各个时期的命运。甚至可以说在竞争激烈残酷的软件市场没有一个独立完善的设计系统，用户大概率不会看，不想看，导致因为外表就输在了起跑线了。
而Google和苹果两家app阵营的巨头，又分别为了解决这个痛点有着各自的设计系统，Google作为Android阵营的绝对王者主打的就是Material质感设计。Compose作为Google为Android开发页面开发的最新工具包，其核心设计系统自然围绕着Material Design展开。
M3
-
什么是Material Design
Material Design 是一个由 Google 设计师和开发人员构建和支持的设计系统。包括针对 Android、 Flutter 和 Web 的深入的用户体验指导和 UI 组件实现。
-
M3
Material 3是 Google 开源设计系统的最新版本。用Material 3设计和构建漂亮、实用的产品。主要由三部分组成:
基础、样式和组件。每个部分包括设计指南和工具，以帮助您定制和构建Material。
基础
基础由无障碍设计标准，布局和交互状态组成，所有优秀的用户交互页面都离不开它。
-
无障碍设计
无障碍设计使具有不同能力的用户能够跳转、理解和享受 UI。 -
布局
布局是元素的视觉排列。它将注意力引导到屏幕上最重要的信息上，使用户更容易采取行动。 -
交互状态
状态是用于传达组件或交互元素的状态的可视化指示器。
基础部分我们在开始的时候不用深入学习，因为这一块的主要内容是通过设计规范和设计模式在基础上去优化不同用户在不同场景的交互体验。更多是给ui美术设计u工程师在设计的初期提供参考和约束。我们这里先简单了解即可！
样式
样式影响着 UI 的视觉相关，通过样式可以赋予app独特的外观和感觉。样式可以通过改变Material Theme来定制。Material Theme作为设计系统的重要组成部分，又由许多其他系统组成，常见的有Color（颜色）、Typography（排版）、Shape（形状）、Motion（运动）、Elevation（高差）等。
组件
组件是用于创建用户界面的交互式构建块。根据它们的用途，可以将它们组织成五个类别: 操作、容器、导航、选择和文本输入。
-
操作
操作组件帮助用户完成达成目标。例如通过各种按钮的点击实现特定目标。 -
通知
通知组件提供有用的信息。例如未读角标，角度条，snackbar等。 -
容器
容器组件包裹信息和操作。例如列表，卡片，bottom sheet，dialog等 -
导航
导航组件帮助用户跳转。例如导航栏，app bar，搜索栏，抽屉导航栏等 -
选择
选择组件帮助用户明确选择。例如check box，时间选择器，switch，radio button等 -
文本操作
文本组件帮助用户输入和编辑文字。例如text fields。
角色
Google提供Material 3作为最新的设计系统给ui美术设计工程师设计和开发工程师还原设计。这里ui工程师通过figma等工具在Material 3基础的规范和约束下，结合跟品牌和设计理念的相符的样式，最后通过提供的原生组件或者自定义组件来实现整个界面和应用交互。而开发工程师通过Compose等工具来还原设计师提供的设计。
目标
非专业ui设计知识背景下，利用Material Theme Builder或者figma的相应插件来生成基本样式（颜色，主题等）并参考设计图用Compose来实现一些简单的常用页面并。中间可能会用到设计图自动生成Compose代码的中间件relay。
小结
本章简单介绍了Google的最新设计系统Material 3，Material 3和Compose的关系。后面开始从易到难的用Compose来实现各种常见页面，例如登录注册，首页详情等页面。
