谷歌-北方学院培训-第一章android ui

AndroidUI设计MaterialDesign

◆第1章AndroidUI设计入门

◆第2章MaterialDesign基础

◆第3章布局

◆第4章MaterialDesign样式

◆第5章用户界面组件设计

◆第6章动画

◆第7章模式

◆第8章可用性

◆第9章资源◆第10章What'sNew

◆第11章关于UI设计

目录AndroidUI设计入门Part01什么是UE？UE即UserExperience(用户体验)的简称FaceUI创始人朱家明说用户体验是在使用产品或服务中建立的感受,即用户在使用产品过程中建立起来的纯主观的感受。1.1UI概述什么是UI？1.1UI概述UI即UserInterface(用户界面)的简称UIUI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。UI为用户创造了一种新的视觉设计语言，能够遵循优秀设计的经典定则，同时还伴有创新理念和新的科技，给用户最为直观的视觉冲击。

在界面设计中，优秀的设计者能够自然地驾驭各种各样色彩。在事物进入人视线中的先后角度讲，事物的色彩会先于形状对人们产生视觉体验。所以第一眼看上去没有主次之分的界面色彩搭配，或者明暗度搭配不协调的色彩难以给体验着舒适的感觉，难以受到用户的青睐。UI识别性的特点在界面的设计中要尤为重要的，识别性高的图标能够使用户在最短是时间内读懂其传达的内容，同时图标的设计应该为用户提供美的感受。所以设计者在设计中要思考设计的图形要向用户传达的内容，以及设计图形的意图。1.1UI概述一个好的用户界面是用户使用APP提供功能的桥梁和媒介，而用户体验是用户界面的扩展，是艺术与科学的结合，通过设计屏幕界面会使产品或系统更加易用，从而实现界面与功能的完美契合。UI为用户体验中最为直观的体验，也是用户体验的一部分。两者的关系1.1UI概述Google在I/O2014上推出了新的设计语言MaterialDesign。MaterialDesign以现实世界的纸墨为隐喻，强调了阴影和层次，用动画效果代表现实的力反馈，试图把物理世界的规则带回电子界面，实现界面与功能完美契合。而就Android平台而言，MaterialDesign不像此前的Holo风格那样深沉，它更加跳动和富有活力。UI的新生儿-----MaterialDesign1.2AndroidUI设计概述Android是Google推出的一款广受移动应用软件开发者追捧的开源系统，近年来，Android手机的市场占有率一直排名第一。一款应用（APP）最重要的品质是易用性（usability）必须做到让用户知道如何得到它，清楚如何使用它用户是通过用户界面（UI）来操作和浏览你的应用，除此之外的一切元素，都将会在用户界面中反映出来。好的UI设计不仅是让软件变得有个性，有品味，还要让软件的操作变得舒适、简单、自由,充分体现软件的定位和特点，具有良好的用户体验。什么是良好的用户体验？一是贯穿每一个细节二是让用户有所感知三是为用户带来惊喜

此外，良好的用户体验需要设计者进行理智取舍。勇敢地放弃冗余功能，精心体现主题功能，并且让用户感觉到辅助功能真正处于辅助的位置，未曾喧宾夺主1.2AndroidUI设计概述当你对用户和用户需求有了很好的理解，并且想好了应用的外观和工作原理流程时，首先要做的是应用制作而非编程。应用制作是一个持续性的过程，从纸上低度仿真的想法到高保真的设计，从原型到最终产品，这个阶段称为原型设计，是设计过程中必不可少的一步。原型设计的目的是模拟应用的功能。其设计思路和步骤如下：1.框架;2.高保真度的原型;3.概念验证;1.3AndroidUI原型设计1.3.1原型设计框架草图详细功能草图1.框架

绘制框架是将应用的结构展示在纸上的一种好方法。框架就是应用的蓝图。框架易于构建，但并不意味着它可以完全确定用户界面，它只是让你的灵感更具体，更具有可测试性。图纸是原型设计的好地方，在纸上制作的原型设计方便用橡皮擦和铅笔修改。而且用纸和铅笔制作的原型设计也不会受到技术的限制，可以更好的展现你的想法，并与团队成员一起讨论。2.高保真的原型并不是什么都可以用简单的框架来建立原型，如果一些特殊效果并不是你所设想的那样，你就需要自己对其进行设计，并着手准备代码。高保仿真的原型并非一次性原型。有时候可以用可复用组件来制作原型，实现的功能可以用在最终产品中。可复用组件也许能让你在实现阶段节省不少时间，但这不是在项目此阶段优先做的事。最优先的仍然是为最终产品制作最好的用户界面，应该以此来指导决策。3.概念验证有时一款新设计的技术可行性是不确定的。在这种情况下，应执行概念验证（proofofconcept）概念验证是将软件的一部分用充分的细节实现，以此来验证这种方法在实际应用中能否正常工作。

1.3.2原型设计工具1.OmniGraffle和模板

OmniGraffle是一款很强大的框架绘制工具，它具有优秀的用户界面，对Android平台有强大支持和合理的价位。但不适用于Linux和Windows操作系统。OmniGraffle也是Google发布的仅有的几个官方Android模板设计程序之一（从Android设计指南网页下载),模板对用户界面设计细节的绘制作常有帮助,它包括所有标准的Android用户界面组件以及众多有帮助的混合控件，比如说动作条和键盘。

OmniGraffle框架绘制工具WireframeSketcher框架绘制工具WireframeSketcher是一款支持多平台的框架绘制工具，它可以作为插件安装eclipse里面，也可以独立安装。它适用于Linux、Mac和Windows等，也有众多社区支持的Android模板这在绘制框架的过程中能获得极大的帮助。2.WireframeSketcher及模板

Balsamiq（见图1-5）是一个支持多平台的框架绘制工具它既可以运行在浏览器中，也可以作为独立的应用运行在Linux、Mac、Windows操作系统上。同时，它也拥有Android平台上社区提供的模板。3.BalsamiqBalsamiq框架绘制工具1.4AndroidUI设计原则Google为开发者提供了一整套开发范例。虽然这些范例是强制采用，但按照手册来进行开发设计无疑让开发者对Android系统如何运行程序理解得更加清晰，用户的使用体验也能保证完好的一致性。以下原则均是根据Android的官方设计指导文档和项目开发实践整理而来。1.4AndroidUI设计原则1.理解Android的外观和感觉

界面的设计应该是基于这个应用平台的整体风格，这样有利于产品外观的整合。Google在为其所有的产品提供一个一致的视觉体验上投入了非常多的努力，比如Android4.x整体风格简单、平面、干净，注重功能本身而不是形式感。AndroidKitKat的扁平化风格1.4AndroidUI设计原则2.基于心理模型的界面设计用户界面应是基于用户的心理模型，而不是基于工程实现模型。这是设计师把生活中的细节和应用结合的凝聚点，用户的心理模型抓得越准，界面就会越优秀。1.4AndroidUI设计原则3.以用户使用情景的思维方式做界面设计例如微信应用，对于一个社交及即时通讯产品，添加好友的功能是好友汇聚的来源。所以，将这么重要的功能放置在应用程序的哪个位置是非常重要的。微信添加好友界面1.4AndroidUI设计原则4.为不同的设备设计

当设计移动APP的时候，首先要确保它能够在大部分的设备上正常运行。不仅要适用于不同的屏幕尺寸和屏幕方向。也要注意适用于低亮度的屏幕或者是对比度较差的屏幕，以及速度慢的低配置机器。1.4AndroidUI设计原则5.适用Density-independent定义布局

确保UI元素在不同分辨率的Android设备上看起来差不多是提供一致性体验里很重要的一部分。虽然这看起来是一件非常费力的任务，但其实也大可不必通过复杂的像素运算来得出每个按钮，或者字体在每个特定的屏幕上如何显示，可以通过Density-independentpixels的方式定义尺寸，需要确保在每个屏幕上显示的视觉元素的物理尺寸一致1.4AndroidUI设计原则6.为不同的分辨率设计为了在几乎所有的Android设备上清晰地显示应用界面，需要满足四种分辨率：低分辨率（LDPI）中分辨率（MDPI）高分辨率（HDPI）超高分辨率（XHDPI）而一般都从640*960屏幕分辨率开始，然后缩小以适应其他分辨率屏幕。1.4AndroidUI设计原则7.考虑不同的系统版本

许多Android设备将不能够升级到最新的操作系统，而且新的系统也需要很久才能全面占领市场。然而随着设备的更新换代，用户会不满足于过时的应用图标和控件。因此，需要尽可能提供最新的体验。1.4AndroidUI设计原则8.为平板设备设计

如果开发者目的是做一个真正跨多终端的Android应用，那就必须同时考虑Android平板。官方设计指导为平板的UI和界面提供了多窗格布局的设计指导，以满足碎片化设备的统一化体验。1.5AndroidUI设计风格1.拟物化风格2.扁平化风格3.卡片式设计风格4.手绘体风格拟物化风格拟物化风格来源于交互设计中的隐喻的处理手法，所谓隐喻就是使用一个用户熟知的事物来暗喻另一个事物。拟物化的UI可以让用户从视觉上感到美观、亲切，如果设计者能将拟物UI做得逼真漂亮，那就更容易得到用户的青睐。1.拟物化风格扁平化风格“扁平化设计”这个概念在2008年由Google提出，其核心在于放弃一切装饰效果，诸如透视、纹理、渐变等能做出3D效果的元素一概不用。所有元素的边界都干净利落，没有任何羽化渐变。常见的扁平化风格布局有以下几种形式：

①单色效果

②多色效果

③数据可视化效果

④透视效果2.扁平化设计卡片式设计风格卡片是交互信息的承载体通常以矩形的方式呈现，就像信用卡。卡片式设计是在栅格的基础上更进一步将整个页面的内容切割为N个区域，不仅能给人很好的视觉一致性，而且更易于设计上的迭代。3.卡片式设计风格Google的这种卡片式设计一改之前信息显示的杂乱无章，在某种意义上甚至重新定义了信息显示。对于移动设备碎片化的屏幕来说，卡片是完美的设计形式。其优点如下：①卡片能够抓住眼球②卡片是响应式的③卡片易读④卡片是可以共享的而且目前卡片式设计主要来解决三类问题：①信息分类

②导航③任务管理手绘体指的是以手工绘图、速写或手写为元文字素的设计风格，它具有轻松、随意、浪漫幽默等特点。手绘体风