第5章-Android界面设计课件.pptx

1、Sketch Sketch 网站网站UIUI设计设计（微课版）主讲老师：主讲老师：05 Android05 Android界面设计界面设计Android界面设计界面设计Sketch网站UI设计目录目录02绘制绘制Android信息界面信息界面01绘制绘制Android音乐播放器界面音乐播放器界面Android界面设计界面设计Sketch网站UI设计绘制Android音乐播放器界面Android界面设计界面设计Sketch网站UI设计组件的编辑使用组件的编辑使用Sketch为用户提供了组件的概念，它可以方便的让用户在多个页面和画板中重复运用某组内容。Android界面设计界面设计Sketch网站

2、UI设计创建组件创建组件传感器不同 要想创建新的组件，只需选中一个组或者几个图层，单击工作界面上方的“创建组件”按钮或者执行“图层创建组件”命令。弹出“创建新的组件”对话框。执行“插入组件”命令，选择想要插入的组件，即可在页面中重复使用该组件。Android界面设计界面设计Sketch网站UI设计更换文本更换文本传感器不同组件被广泛应用到APP界面中，最为常见的是应用到界面的头部和底部。也常常会用作按钮图标元素。此时用户就会希望按钮组件上的文字可以独立编辑，以便实现每个按钮看起来一样，但里面的文本内容各不相同。Android界面设计界面设计Sketch网站UI设计管理组件管理组件传感器不同当用

3、户创建组件后，Sketch会自动的创建一个组件页面，用来保存所有的组件内容，用户可以在该页面中完成对组件的复制删除等操作。当用户同时创建多个组件时，可以执行“图层替换”命令，选择想要替换的组件，可以为现有的组件更换组件。Android界面设计界面设计Sketch网站UI设计操作案例操作案例使用组件工具绘制导航栏使用组件工具绘制导航栏Android界面设计界面设计Sketch网站UI设计应用软件界面应用软件界面 软件界面也称软件UI，是人机交互的重要部分，也是软件带给用户的第一印象，同时还是软件的重要组成部分。Android界面设计界面设计Sketch网站UI设计应用软件界面设计规范应用软件界面

4、设计规范基于Web网页重新设计简单易用简单易用为用户考虑为用户考虑清晰易懂清晰易懂风格一致风格一致操作灵活操作灵活人性化人性化安全防护安全防护规范规范Android界面设计界面设计Sketch网站UI设计软件启动界面设计软件启动界面设计 软件启动界面的作用主要表现为两个方面，一是在软件启动界面中显示软件的代表性标志、版权信息、注册用户、软件版本号等信息；二是在显示软件界面是载入运行软件所需要的文件，避免用户在一种盲目的状态下等待。Android界面设计界面设计Sketch网站UI设计什么什么APP？APP即手机应用程序，也就是安装在智能手机上的软件。可以位浏览者显示更多的个性化元素。Andro

5、id界面设计界面设计Sketch网站UI设计移动移动UI的设计趋势的设计趋势APP的开发和设计选择专注于较少和叫较关键的功能。也是在这样的背景下，真正体验的优秀应用广告和特立独行的导航模式开始出现。Android界面设计界面设计Sketch网站UI设计移动移动UI的设计趋势的设计趋势专注专注用户用户体验体验使用使用模糊模糊背景背景简单的导简单的导航模式航模式大胆而醒目大胆而醒目的文字的文字更简单更简单的配色的配色用户界面的用户界面的情景感知情景感知Android界面设计界面设计Sketch网站UI设计移动移动UI和平面和平面UI的的区别的的区别手机UI的平台主要是手机的APP客户端，而平面UI

6、的范畴则非常广泛，包括绝大部分的UI领域。手机UI的独特性，比如尺寸要求、控件和组件类型使得很多平面设计师需要重新调整审美基础。Android界面设计界面设计Sketch网站UI设计Android系统文字规范设计系统文字规范设计为不同控件引入字体大小上的反差有助于营造有序、易懂的排版效果。但同时在一个界面中使用过多的的不同的字体和大小则会造成混乱。Android设计框架使用有限的字体和大小。Android界面设计界面设计Sketch网站UI设计操作案例操作案例绘制返回或菜单按钮绘制返回或菜单按钮Android界面设计界面设计Sketch网站UI设计Android系统系统UI设计特色设计特色更加

7、简单便捷的操作漂亮的界面Android界面设计界面设计Sketch网站UI设计绘制Android 信息界面Android界面设计界面设计Sketch网站UI设计文本命令文本命令添加文本在插入面板中选择“文本”工具选项或者按快捷键T键。移动光标到页面中，光标变成文本光标时，在页面中任一点单击即可添加文本。用户也可以在页面上单击并拖动鼠标以创建一个固定尺寸的文本框。文本框Android界面设计界面设计Sketch网站UI设计文本检查器文本检查器共享样式编辑文本选中一段文本，在界面的右侧即可看到文本检查器面板。在该面板中可以分别设置文本的字体、字重、对齐、宽、间距和不透明度。用户可能会经常想将多个文

8、本设置为同一样式，共享样式能实现这一点，他们会将分散在不同图层中的文本都保持同步。Android界面设计界面设计Sketch网站UI设计操作案例操作案例使用共享样式绘制界面使用共享样式绘制界面Android界面设计界面设计Sketch网站UI设计文本路径文本路径Sketch支持文本渲染路径。首选创建一个矢量图形和一个文本图层，且文本图层在矢量图形的上面。选中文本框对象，执行“文本路径文字”命令。Android界面设计界面设计Sketch网站UI设计文本转换轮廓文本转换轮廓 在某些特殊情况下，需要将文本转化为矢量图形。例如要制作特殊形状的艺术字时。选中需要转化的文本，执行“图层转化为轮廓”命令。

9、Android界面设计界面设计Sketch网站UI设计操作案例操作案例转化为轮廓绘制界面元素转化为轮廓绘制界面元素Android界面设计界面设计Sketch网站UI设计导出文字导出文字显示器通常是由网格状的像素组成的。当遇到曲线文字的时候，通常会显示锯齿的文字效果。使用子像素抗锯齿效果可以将文字曲线遮住的部分像素稍微变亮一点，在视觉上产生平滑的效果。Android界面设计界面设计Sketch网站UI设计应用样式应用样式阴影阴影内阴影内阴影动感动感模糊模糊高斯高斯模糊模糊放大放大模糊模糊Android界面设计界面设计Sketch网站UI设计混合模式混合模式Sketch中的“混合”与Photoshop等软件中的混合功能相似，都是为了将对象颜色与底层对象的颜色混合，得到更多更丰富的页面效果。Sketch一共为用户提供了16种混合模式，单击检查器面板中“混合”选项，弹出混合模式下拉菜单。谢谢观赏！