【实践目的】

了解界面设计的基本准则，了解色彩、界面布局的基本原理。掌握Android界面设计器的基本操作，并使用界面设计器设计简单界面。掌握使用布局代码实现简单界面设计。

【实践要求】

  了解和学习界面设计的基本准则和原理；

 掌握Android界面设计器的基本操作；

掌握界面设计的基本布局类型和实现简单界面设计

掌握使用布局代码实现简单界面设计

【任务和要求】

1.  界面设计的基本准则和原理

1.1界面设计色彩原则

1.2 界面设计的布局基本原则

1.3 UI交互设计基本原则

2.使用Android界面设计器设计简单界面

3.使用布局代码实现上述简单界面

【实践过程】

1．界面设计的基本准则和原理

1.1界面设计色彩原则

n 查阅资料叙述界面设计的色彩3要素（属性）以及3者关系。

三要素为明度、纯度、色相。色彩三要素互相影响、互相共存、其中任何应该要素改变都将会影响到原色彩的面貌和性质，引起另外两个要素的改变。

n 查阅资料阐述色相的4中搭配方式，以及搭配的一般原则。

近似色搭配、对比色搭配、互补色搭配、同色系搭配

搭配原则一般为整体色调协调统一、有重点色、并且注意色彩的平衡、调和对立色。

n 查阅资料结合自己的理解，陈述配色原则并举例。

界面设计应该先确定主色调，主色将会占据页面中很大的面积，其他的辅助色都应该以主色为基准进行搭配。这可以保证整体色调的协调统一，重点突出，使作品更加专业、美观。配色时，可以选取一种颜色作为整个界面的重点色，这个颜色可以被运用到焦点图、按钮、图标，或者其他相对重要的元素，使之成为整个页面的焦点。重点色不应该用于主色和背景色等面积较大的色块，应用于强调界面中重要元素的小面积零散色块。

1.2 界面设计的布局基本原则

n  查阅资料并结合自己理解叙述构图的基本原则。

构图是在有限的画面中，将各种元素进行合理的布局与安排，首先要遵循的原则是均衡，即各个元素在布局上保持视觉重量的平衡与匀称，从而使视觉界面具有平衡感和稳定感。第二是对比，通过大小对比、字体对比、粗细对比、疏密对比、曲直对比等形式来突出和强化主题。第三是律动，可以添加有节奏、有规律、跳跃、动感等元素。第四是视点，即视觉中心点或者是视觉焦点视点构图更能表现视觉主题。

n  UI设计中文字排版需要注意哪些？并举例。

在文字排版时，相关部分组织在一起时，应该安排好他们之间的间距与主次，而不是零零散散地随意放置。可以运用对比法则来突出所表达的重点，使主次分明。同时文字排版时，不能随意放置’这会看起来文字杂乱无章，可以使用对齐原则，将这些元素整理成一条线从而串联起来。

1.3 UI交互设计基本原则

n  请叙述交互设计中的一般准则。

交互设计一般准则首先时清晰，界面清晰，常用功能显示出来，高级功能一般会隐藏‘其次是规范，所见即所得，应用联想记忆，同时简化用户操作，保持界面和操作一致，最后是全局原则，操作容易、图标模型真实、减轻用户的记忆负担、避免干扰与打断、关闭或登录时再次确认。

2.使用Android界面设计器设计简单界面

n  在默认ConstraintLayout的布局下，删除默认生成的Hello World

n  设置文本“    欢迎学习移动应用开发”，格式要求：id为tv_title,居中,文本字体24sp。

n  设置文本“用户名”，格式要求：id为tv_username,与tv_title左对齐,文本字体20sp，与tv_title间隔30dp，文本框高度48dp，文字居中，在tv_title下方。

n  设置输入框,格式要求：id为edt_username,与tv_username底部对齐，与tv_username间隔15dp，提示“用户名”

n  设置文本“密  码”，格式要求：id为tv_password,与tv_title左对齐,文本字体20sp，与tv_username间隔20dp，文本框高度48dp，文字居中，在tv_username下方。

n  设置输入框,格式要求：id为edt_password,与tv_password底部对齐，与tv_password间隔15dp，提示“密码”

n  设置按钮“确认”，格式要求：id为btn_OK,与tv_password间距50dp，左边与tv_password对齐，在tv_password下方，文字大小20sp

n  设置按钮“取消”，格式要求：id为btn_cancel,右边与tv_title对齐,底部和btn_OK对齐，文字大小20sp代码：

xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:app="http://schemas.android.com/apk/res-auto"     xmlns:tools="http://schemas.android.com/tools"     android:id="@+id/tv_username"     android:layout_width="match_parent"     android:layout_height="match_parent"     tools:context=".MainActivity">