关闭

关闭

关闭

封号提示

内容

首页 Android UI设计指南.pdf

Android UI设计指南.pdf

Android UI设计指南.pdf

上传者: Qiao_da 2012-02-04 评分 0 0 0 0 0 0 暂无简介 简介 举报

简介:本文档为《Android UI设计指南pdf》,可适用于IT/计算机领域,主题内容包含AndroidAndroidAndroidAndroidUIUIUIUI设计指南(自译)一、图标设计指南创建一个统一的外观和整体的用户界面效果以增加符等。

AndroidAndroidAndroidAndroidUIUIUIUI设计指南(自译)一、图标设计指南创建一个统一的外观和整体的用户界面效果以增加产品的价值精简的图形样式还能让用户觉得UI更专业。本文提供的信息能帮助你为应用的用户界面的各个部分创建的图标与AndroidX框架的一般样式相匹配。以下的指南将帮助你创建一个完美而且统一的用户体验。下面文档讨论关于Android应用程序常见类型图标的使用详细指南:启动图标启动图标是您的应用程序在设备的主界面和启动窗口的图形表现。菜单图标菜单图标是当用户按菜单按钮时放置于选项菜单中展示给用户的图形元素。状态栏图标状态栏图标用于应用程序在状态栏中的通知。TabTabTabTab图标Tab图标用来表示在一个多选项卡界面的各个选项的图形元素。对话框图标对话框图标是在弹出框中显示增加互动性。列表视图图标使用列表视图图标是用图形表示列表项比如说设置这个程序。想更快的创建你的图标可以导向Android图标模板包。使用Android图标模板包Android的图标模板包是模板设计、纹理和图层样式的集合使您更容易的创建在这份文档中符合指南指引的图标。我们建议您下载模板包文档再设计图标。图标模板提供了AdobePhotoshop格式的文档(PSD)以确保在为Android平台创建标准的图标提供层和设计处理。你可以加载模板文件到任何兼容的图片编辑程序但是你所使用的基于该应用程序的层和处理方式可能会有所不同。提供密度特定的图标集Android是为多种设备设计的因此必须提供一系列的图片尺寸和解决方案。当你为应用设计图标时最重要的是要让你的应用安装在任何设备上都是保持一致的。就你所知道的支持多屏幕文档中Android平台让你提供的图标能更直接的在任何设备上不管这个设备的尺寸和精度都以同一种方式准确的实现。在一般情况下推荐的方法是为下表中所列出的广义上的三种屏幕密度各创建一个单独的图标。当应用运行时Android平台将检查屏幕的规格然后从特定文件中加载适合的图标资源。欲了解关于如何存储特定密度资源信息请参阅屏幕大小和密度的资源目录。有关如何创建和管理多种密度的图标集的提示参阅设计师的提示。表:三个屏幕密度所需要的图标尺寸:图标类型标准尺寸(以像素为单位)广义的屏幕精度低精度(ldpi)中精度(mdpi)高精度(hdpi)启动图标xpxxpxxpx菜单图标xpxxpxxpx状态栏图标(Android以后版本)wxhpx(preferred,widthmayvary)wxhpx(preferred,widthmayvary)wxhpx(preferred,widthmayvary)状态栏图标(Android及之前版本)xpxxpxxpxTab图标xpxxpxxpx对话图标xpxxpxxpx列表图标xpxxpxxpx设计师建议这里有几点建议对你为应用程序设计图标或者绘制设备也许有用。这个建议是以AdobePhotoshop或者一种位图和矢量编辑软件为基础的。图标资源命名规则按字母排列顺序命名文件以便将相关资源规整到一个目录里面特别是它有助于使用一个共同的前缀为每个图标类型。例如:资源类型前缀举例图标icicstarpng启动图标iclaunchericlaunchercalendarpng菜单图标icmenuicmenuarchivepng状态栏图标icstatnotifyicstatnotifymsgpngTab图标ictabictabrecentpng对话图标icdialogicdialoginfopng值得注意的是不必使用任何类型的相同前缀目的是方便您。创建一个工作文档来整理多精度文件支持多尺寸的屏幕精度一个图标就需要创建多个版本为了让多个副本文件安全并且容易查找我们建议在你的工作空间里每个资源文件创建一个资源包。如下:此结构相似的特定精度结构您将把您的应用资源最终存储为完整资源。因为你的工作环境和应用程序结构类似你可以快速的决定哪些资源必须拷贝到每个应用程序目录。通过分辨率区分资源同样可以帮助你通过文件名发现多精度是否一致这点很重要因为不同精度的相同资源必须使用相同的文件名。以下对比这是一个典型的应用的资源目录结构:最好使用矢量图形诸如AdobePhotoshop的图像编辑软件允许使用矢量形状、栅格图层和图层效果相结合。如果可能使用矢量图形以便在需要时资源能随意缩放而不会都是细节和边缘清晰度。使用矢量图形也可以很容易的在较小精度的像素边界对其边缘。以最大尺寸开始你需要针对不同屏幕精度创建不同资源如表最好以大尺寸图标的设计或者所有图标大小的倍数尺寸开始设计。比如启动图标根据屏幕精度需要px、px、px三种尺寸。如果你以*的尺寸开始绘制启动图标当你创建最终资源的图标尺寸时就能更容易和清晰的调整图标。他同样有益于在高精度的对象中提供被推荐的安全边界的大尺寸增加指引(也称为指南)。继续以上的例子每条指南启动图标包含x的完整资源包括xpx(x的矩形图标区域)。在x的大尺寸中这相当于在水平和竖直方向上在需要px的边缘。缩放时位图图片需要重新绘制如果缩放图形的话要从矢量图层进行缩放而不是位图图层如果在高精度的环境中这些位图图层需要重新绘制。比如说在一个中等精度下x位图图形的圆要在高分辨下以x的大小显示就需要重新绘制。当保存图像资源时删除一些没用的资源。为了帮助图像资源尽可能小可以从文件中删除一些不必要的头文件如AdobeFireworks的元数据或AdobePhotoshop头文件。删除Photoshop头文件的步骤如下:选择文件>存储为Web和设备所用格式在“存储为web和设备所用格式”面板预设选择“PNG”设置底下选项仍为“PNG”勾选“透明度”(如果图像含有透明度)选择“存储”也可以使用PNG文件的优化工具如OptiPNG或Pngcrush。保证不同精度的相应资源使用相同的文件名同样的图标资源文件在每个精度中必须使用同样的文件名但是要存储在具体精度目录里。这允许系统根据设备屏幕的特点查找并加载适合的资源。出于这个原因确保资源在每个目录是一致的文件名而不使用特定的精度后缀名。启动图标启动图标是在设备主屏幕和启动窗口代表应用程序的图形。用户打开主屏幕下方的触摸屏的启动图标。启动界面一打开将看到所有安装应用的图标。用户选择一个应用程序并通过点击启动图标或任何硬件导航控件如轨迹球或者Dpad打开他。正如你所看到的在提供多个特性精度图标设备时你必须创建低精度、中精度和高精度的三种屏幕图标。这将确保图标正确的显示在被安装的设备的应用程序上。可以看看设计师建议这一节的建议如何使用多套图标的问题。AndroidMarket的应用程序图标如果您在AndroidAndroidAndroidAndroidMarketMarketMarketMarket发布应用程序你必须提供在开发者平台应用程序上传时的xpx高精度的图标。此图标将被用于在AndroidMarket的不同地点但不会取代你的启动器图标。如何更容易的将高精度图标缩放到*的提示和建议在设计师建议章节中有讲。对于高精度的应用程序图标在AndroidMarket的信息和规格请参阅下面的文章:应用程序图形资源(AndroidMarker帮助说明)Android以后版本启动Android启动图标就展示在面前而不是四分之三透视。下面的指南描述了如何设计Android之后版本的启动图标的设计。样式创建启动图标应遵循以下总体风格的原则。这个准则并不意味着限制你设计图标而是强调用相同的方法在设备上分享您的图标如图简洁时尚符合当下的流行趋势避免过度使用隐喻。高度简化图标小尺寸也易于识别不宜太复杂。尝试抓住程序的主要特征(例如用音像表示音乐icon)使用自然的轮廓和形状看起来几何化和有机化不失真实感。图标采用前视角几乎没有透视光源在顶部不光滑但有质感图标应该采用非镜面有质感的材料。见“材料和颜色”章节获取更多信息。前视角和顶部光源Android之后版本Android启动图标采用前视角几乎没有透视光源在顶部。注:Android适用于单独的文字标签当现实启动图标时使用应用程序名称。所以应该避免图标里嵌入文本而不是专注于设计一个独特难忘的图标。尺寸和定位启动图标要有多样化的形状和样式但又要形成统一的视觉风格其尺寸和定位也要统一。图说明了定位图标内资源的各种方式。图标的实际大小应该小于资源的实际边界以创建一个一致的视觉体验和阴影效果。如果图标是矩形或者接近矩形图标尺寸应该更小。为了表示推荐大小的图标图中的例子每个图片包括了三个不同的指导框。红色框代表图标的完整尺寸蓝色框式代表图形尺寸比图标尺寸小图形之外的空间用于显示阴影和特殊效果橙色框代表当图标为方形时的边框范围。正方形的外框小于其他形状的图标原因是两种类型图标的达到统一的视觉权重。高精度屏幕的启动图标尺寸:外框:xpx图标:xpx方形图标:xpx中精度屏幕的启动图标尺寸:外框:xpx图标:xpx方形图标:xpx低精度屏幕启动图标尺寸:外框:xpx图标:xpx方形图标:xpx材质和颜色启动图标要有触感、明亮和有质感的材质即使图标只是简单的形状但也要尝试一些取之于现实世界的材质来表现。Android启动图标通常由一个大的基本形状一个中立和主色调组成的较小的形状。图标可能使用一个保持有相当对比度的中性色。如果可能的话每个图标不使用一个以上的主色。图标应该使用包括一系列暗淡的和基本的的色调。不能用太饱和的色调。启动图标推荐使用的色调如图你可以从中选择元素的基础色和高亮色。也可以使用调色板中的颜色和白色到黑色的渐变的叠加。这需要创建该图标从上到下的透视并保持色彩的不饱和度。可以通过如图所示的调色板颜色的几种突出材质组合成如图所示的组合。为了使您开始设计图标图标模板包括Photoshop里的材质、颜色、渐变方式的文件(iclaunchertemplateexamplematerialspsd))特效启动图标是采用从上往下的透视角度的通过阴影创建层次感。图标可以使用不同的纹理和灯光效果但是必须是从上往下的透视角度。为了保持统一性所以的图标都需要使用相同的阴影效果如图所示。注:所有的像素尺寸为中等精度并应适当的缩放分辨率。光影:从上而下并适应合适的高光细节投影:#透明度投影距离px大小px材质:触感出现使用现实中的材质(例如图像中的单色噪音)该做什么不该做什么下面是一些创建应用程序图标时需要考虑的那些“该做和不该做”的例子。Android启动图标该做…现代、简约、磨砂、触觉和纹理正面视图且从上而下的光影整体性局限于调色板颜色。Android启动图标不该做…古董、过于复杂、光泽、平面向量旋转、裁切、过饱和图标示例以下例子展示Android应用的高精度启动图标。这些图标仅供参考请不要再使用这些图标Android及更早版本如下指南描述了如何设计Android及更早版本的启动图标。Android一些版本的图标是采用一个固定角度的简化D图标。如图所示的角度:结构启动图标的底部可以朝上或者朝前启动图标的表面应大部分使用启动图标调色板。使用一个或多个高亮颜色重点强调凸显的特性所有的启动图标必须有圆角使他们看起来友好且简介如图所示。所有指定的尺寸都基于一个xpx的如AdobeIllustrator矢量图形编辑器里图标的画板边界内适合画板的大小。最后使用AdobePhotoshop图像编辑器缩小输出为一个透明的PNG文件不包括背景颜色。在AdobePhotoshop中创建的图标模板都在图标模板包里。高光、特效和阴影启动图标通过使用光影和阴影定义D图标。光源在左前方因此投影在右后方。启动图标调色板白色RGB:用于高亮边缘浅灰渐变RGB:RGB:用在图标前部中灰渐变RGB:RGB:用于图标边缘(阴影部分)深灰渐变RGB:RGB:用于图标的阴影细节部分黑色RGB:作为阴影的基础色步骤:用AdobeIllustrator创建一个基本形状使用“启动图标:结构”这一章所描述的角度。形状和特效应该在xpx的画板里添加深度、形状并创建启动图标结构的圆角添加细节和颜色。渐变为左前方的光源照射。以正确的角度和模糊的效果创建阴影使用像AdobePhotoshop工具导入图标而缩放出适合图像的xpx的透明背景图片。导出透明的x大小的Png文件菜单图标菜单图标是当用户点击菜单按钮出现的属性菜单的一种图形表示。他们的绘制角度是前视图和灰色过度。菜单图标不得以D和其他角度出现。正如“提供特定精度的图标集”这一章所描述为高精度、中精度、低精度屏幕创建特定的图标集。这将确保图标在应用程序的各种设备中正确显示。请看“设计师建议”这一节建议如何创建多设备的图标。最终导出不包括背景颜色的透明的PNGPNGPNGPNG文件的图片。创建图标的AdobePhotoshop文件的模板在“图标模板包”里。提醒:Android与以前的版本相比图标的风格和大小都有所变化图标有一个更大的安全框架图标的内容区域比实际尺寸还小最终的资源并没有改变。调色板更淡一些无外发光效果菜单图标可在深色或浅色背景中呈现Android及更高版本以下指南描述如何为Android及更高版本设计菜单图标尺寸和定位菜单图标可以使用各种形状和样式在同一个资源内部必须创建统一的大小和定位以达到统一的视觉权重。如图所示的资源内部多种方式的位置表示。图标的实际大小比资源的宽度还小以便创建一致的视觉权重。如果图标是正方形或者接近正方形那么图标将会更小。为了表示图标的尺寸如图所示包括了三种不同的指导框红色的框代表完整资源的宽度蓝色的框是推荐的图标的实际外框。这个图标框小于整体资源的宽度目的是让不同图标形状保持一致的视觉权重橙色的框代表当图标为正方形时被推荐的实际宽度。正方形的图标框小于其他图标框为了确保两种类型有统一的视觉权重。高精度屏幕的菜单图标尺寸完整尺寸:xpx图标尺寸:xpx方形图标:xpx中精度屏幕的菜单图标尺寸完整尺寸:xpx图标尺寸:xpx方形图标:xpx低精度屏幕的菜单图标尺寸完整尺寸:xpx图标尺寸:xpx方形图标:xpx样式、颜色和特效菜单图标为平面的、正视图和灰度渐变稍微一点凹陷和其他一点特效如下是为了创建一点深度。当逻辑恰当时菜单图标有圆角。为了保持一致性所有的菜单图标应如图所示使用相同的色调和特效。注:所有的尺寸为中精度因此其他精度的需要缩放到合适尺寸。圆角宽度:恰当的px圆角半径渐变填充:从#ccc到#bbb内阴影:#,不透明度角度距离px大小px内斜面:深度方向:向下大小:px角度:高度:高光模式:#ffffff不透明度阴影模式:#,不透明度该做什么不该做什么以下是一些“该做和不该做”的例子当设计应用程序菜单图标时需要考虑到的图标例子以下展示用于Android平台标准的高精度菜单图标。警:因为这些资源在各个版本之间有可能不同所以不要把这些资源与用于Android平台资源的设计指导中。如果你想使用任何图标和内部绘制资源可以存储本地一些图标副本或者在应用程序资源中绘制然后从应用程序代码中引用本地副本。这样一来即使系统的副本更改了仍能保持图标外观一致。注意以下格子不是完整的。Android及更早版本接下来的指南描述在Android及更早版本如何设计菜单图标。菜单图标在Android及以下版本是以前视图形式展现。菜单图标的元素不能以d视图或者其他视图展示。结构为了保持一致性所有的菜单图标应使用相同的色调和特效。更多信息请查看“色调”章节菜单图标当符合逻辑时带有圆角如图所示符合逻辑的带有圆角的区域是屋顶而不是建筑主体。这个页面的所有特定尺寸为基于xpx的画板带有px的安全间距菜单图标的图层效果(外发光)一些发光、特效和阴影当需要时可以放在px的安全间距里。基础形状都应该放于安全框架里。最后必须以透明的PNGPNGPNGPNG文件输出创建菜单图标的AdobePhotoshop模板在图标模板包里。发光、样式和阴影菜单图标是正视图的轻微的凹陷和一些其他特效如下图所示是为了创建深度效果。前部:使用基础的色调渐变填充内阴影:黑色、不透明度角度、距离:px大小px外发光:白色不透明度扩展大小px内斜面:深度、方向向下、大小px角度、高度高光:白色不透明度阴影:黑色不透明度色调白色RGB:用于外发光和内斜面高光渐变填充RGB:RGB:用于颜色填充黑色RGB:用于内阴影和内斜面阴影步骤用AdobeIllustrator创建一个基本形状形状导出到AdobPhotoshop中缩放到xpx的透明背景中留下安全边框如图增加图层样式导出带有透明度的x的PNG图标状态栏图标状态栏图标用于应用程序在状态栏的信息。正如“提供特定精度图标集”所描述需要创建适用于低、中和高三种精度屏幕的特定图标集。这是确保应用程序在多种设备上能正常显示和安装。参考“设计师建议”章节的建议如何创建多精度图标集。最后应不包括颜色背景导出透明的PNGPNGPNGPNG图标。创建图标所需要的AdobePhotoshop文件模板在“图标模板包”里。警:Android以前版本在装叹了图标的样式和尺寸上有所不同提供所有Android版本支持的开发者必须注意:Android及更高版本的状态栏图标放于drawablehdpiv,drawablemdpiv,和drawableldpiv三个文件中。之前版本的状态栏图标放于drawablehdpi,drawablemdpi,和drawableldpi三个文件中Android及更高版本一些描述在Android及更高版本如何设计状态栏图标大小和位置状态栏图标要使用简单的图像和框架这些图标将缩放在最终资源所在的位置。如图所示多种图标在资源内的位置。图标的实际尺寸比资源尺寸还小。状态栏图标的宽度可能会有一点点的不同。为了指出图标的推荐尺寸图中每个例子都包括两种不同的矩形指导框:红色的框代表资源的完整尺寸蓝色的框代表图标的实际尺寸。图标框的垂直方向的尺寸比实际资源框略小为了让多种图标形状保持视觉权重的一致性高精度屏幕(hdpi)的状态栏图标大小:完整尺寸:wxhpx(首选宽度会有所变化)图标尺寸:wxhpx(首选宽度会有所变化)中精度屏幕(mdpi)的状态栏图标大小:完整尺寸:wxhpx(首选宽度会有所变化)图标尺寸:wxhpx(首选宽度会有所变化)低精度屏幕(ldpi)的状态栏图标大小:完整尺寸:wxhpx(首选宽度会有所变化)图标尺寸:wxhpx(首选宽度会有所变化)样式、色调和特效状态栏图标是平的、亚光的和正视图的。注:所有的像素尺寸都是以中精度表示的因此其他精度的需要适当缩放渐变填充:从#到#内阴影:#ffffff不透明度角度距离px大小px内部内容:内部内容通过减法减去外部形状内部完全透明像素组成。该做什么不该做什么以下是一些创建状态栏图标时的一些“该做和不该做”的例子。图标示例如下展示了在Android平台中标准的高精度的状态栏图标。警:由于这些资源在各个版本中可能有所不同所以不要把这些资源与用于Android平台资源的设计指导中。如果想用任何图标或者内置绘制资源你可以把这些图标存储备份或者在应用程序资源中绘制然后从应用程序代码中引用本地副本。这样一来即使系统的副本更改了仍能保持图标外观一致。注意以下格子不是完整的。Android及更早版本接下来介绍如何设计Android及更早版本的状态栏图标结构圆角必须始终运用于状态栏图标的基本形状如果图的细节图。所有的特定尺寸基于xpx的画板尺寸中并有px的安全边框状态栏图标可以在安全边框范围内重叠左右两边但是顶部和底部不能重叠。最后应以带透明度的PNG文件输出创建状态栏图标所需要的AdobePhotoshop模板在“图标模板包”里发光、特效和阴影状态栏图标有略微凸出高对比度且图片正视图以便能在小尺寸中更清晰的表示前部:使用色调的颜色渐变填充内斜面:深度、方向向下大小px角度高度高光:白色不透明度阴影:黑色不透明度细节:白色不可用细节:色调中的灰色渐变内斜面:平滑、深度、方向向下、大小px、角度、高度、高光白色不透明度、无阴影色调只有一小部分手机的状态栏图标使用全彩其他状态栏图标都使用纯色。白色RGB:用于图标内高光细节灰度渐变RGB:RGB:用于图标内不可用细节填充渐变RGB:RGB:用于颜色填充黑色RGB:用于内斜面阴影步骤用AdobePhotoshop创建一个xpx透明背景的基本形状留出安全边界保持上部和下部都留有px空间增加圆角如图。增加高光、特效和阴影如图导出x的带透明度图标的PNG文件Tab图标Tab图标用于在多个tab界面表示单个tab的图形元素每个tab图标有两种状态:未选中和选中。就像“提供特定精度图标集”所描述的需要创建适用于低、中和高三种精度屏幕的特定图标集。这是确保应用程序在多种设备上能正常显示和安装。参考“设计师建议”章节的建议如何创建多精度图标集。最后应不包括颜色背景导出透明的PNGPNGPNGPNG图标。创建图标所需要的AdobePhotoshop文件模板在“图标模板包”里。警:tab图标的样式在Android与更早版本有大大的不同提供所有Android帮的开发者需要注意:Android及更高版本的tab图标放于drawablehdpiv,drawablemdpiv,anddrawableldpiv三个文件中之前的版本放于drawablehdpi,drawablemdpi,anddrawableldpi三个文件中设置Android:targetSdkVersion或者更高版本在“SDK使用说明”里的“应用程序清单”提供两种Tab状态Tab图标有两种状态:未选中和选中。提供图标多种状态开发者必须为每个图标创建“绘制状态列表”图像使用不同的UI状态就需要不同的XML文件列表。例如一个tab标签分别为“朋友”和“同事”你可以使用如下的小标签:上面列出的XML文件列表需要绘制选中和未选中的两种图标。例如“ictabfriendsxml:”代码Android及之后版本接下来介绍如何设计Android及更高版本的tab图标尺寸和定位Tab图标应使用简单的形状和样式必须放置于最终资源之内。如图所示多种形状的图标在资源内部的位置图标的实际尺寸必须比资源尺寸还小。为了指明图标的推荐尺寸如图每个图标有三种不同的指导框:红色的框代表资源的完整尺寸蓝色框代表图标的实际尺寸图标的实际尺寸比完整尺寸还小并允许特殊图标特殊处理。橙色框代表图标为方形时的推荐框为了使两种类型保持视觉权重的一致性因此方形图标框会比其他两个图标框还小。高精度屏幕(hdpi)的tab图标尺寸:完整尺寸:xpx图标尺寸:xpx中精度屏幕(mdpi)的tab图标尺寸:完整尺寸:xpx图标尺寸:xpx低精度屏幕(ldpi)的tab图标尺寸:完整尺寸:xpx图标尺寸:xpx样式、色调和特效Tab图标是平的、亚光的正视图。Tab图标有两种状态:选中和未选中。图:未选中tab图标的样式和特效注:所有尺寸为中精度图标的尺寸若其他精度请缩放到合适的尺寸。填充颜色:#内部内容:内部内容以减去外部形状并让内部内容完全透明图选中tab图标的样式和特效注:所有尺寸为中精度图标的尺寸若其他精度请缩放到合适的尺寸。填充颜色:#ffffff内部内容:内部内容以减去外部形状并让内部内容完全透明外发光:#,不透明度大小px该做什么不该做什么以下是一些创建tab图标时的一些“该做和不该做”的例子。图标示例如下展示了在Android平台中标准的高精度的状态栏图标。警:由于这些资源在各个版本中可能有所不同所以不要把这些资源与用于Android平台资源的设计指导中。如果想用任何图标或者内置绘制资源你可以把这些图标存储备份或者在应用程序资源中绘制然后从应用程序代码中引用本地副本。这样一来即使系统的副本更改了仍能保持图标外观一致。注意以下图标不是完整的。Android及更早版本接下来介绍如何设计Android及更早版本的tab图标。结构未选中的tab图标渐变填充和特效与菜单图标一致就是少了外发光。选中图标和未选中图标很类似就是有一个更深的内阴影并且前景色和对话图标一致。tab图标有px的安全边框这是避免圆形边缘出现重叠。此页面的所有指定尺寸基于xpx。在Photoshop模板保持四周px的边缘。未选中tabtabtabtab图标发光特效和阴影未选中图标和选中图标类似但有一个更深的内阴影并且填充渐变色与对话图标一致。前景部分:渐变叠加>角度、底部颜色:RGB、顶部颜色:RGB、底部颜色位置:、顶部颜色位置:内阴影:黑色不透明度、角度、距离px、大小px内斜面:深度、方向向下、大小px、角度、高度、高光:白色不透明度、阴影:黑色不透明度步骤用AdobeIllustrator创建基本形状导入这个形状到AdobePhotoshop中并缩放成xpx的透明度图片为为选中状态添加效果如图导出带透明度的x大小的PNG文件选中tabtabtabtab图标选中图标的渐变填充和效果与菜单图标类似但没有外发光前景部分:使用调色板的渐变填充内阴影:黑色不透明度、角度、距离px、大小px内斜面:深度、方向向下、大小px、角度、高度、高光:白色不透明度、阴影:黑色不透明度调色板填充渐变RGB:RGB:在未选中图标上使用颜色填充步骤在AdobeIllustrator中创建基本形状导入到AdobePhotoshop中并缩放到xpx的带透明背景的画板中为选中状态增加特效如图中所示导出x的PNG透明图标文件。对话框图标对话框图标出现在弹出对话框中提示信息的作用。这些图标使用亮颜色的渐变和内阴影以在黑色背景中突出。就像“提供特定精度图标集”所描述的需要创建适用于低、中和高三种精度屏幕的特定图标集。这是确保应用程序在多种设备上能正常显示和安装。参考“设计师建议”章节的建议如何创建多精度图标集。如表所示列出各个精度的图标大小。同样的参考“设计师建议”这一章节建议如何设计多种设备的图标集。表:展示个广泛意义上的屏幕精度的最终对话框图标尺寸低精度屏幕(ldpi)中精度屏幕(mdpi)高精度屏幕(hdpi)xpxxpxxpx最后导出带透明的PNGPNGPNGPNG文件不能有背景颜色。创建图标所需要的AdobePhotoshop文件模板在“图标模板包”里。所有Android版本接下来介绍如何为所有Android版本设计对话框图标。结构对话框图标包括px的安全边界。基本形状应在安全边界以内但圆形可以覆盖安全边界。此页面的所有指定尺寸基于xpx画板中。在Photoshop模板保持四周px的边缘。图:对话框图标以渐变色填充图标大小为x。发光、特效和阴影对话框图标是一个平面的正视图。为了能在黑色背景中有所突出使用了亮一点的渐变和内阴影。前景:渐变填充>角度、底部:RGB、顶部:RGB:、底部颜色位置:、顶部颜色位置:内阴影:黑色、不透明度、角度、距离:px、大小opx步骤在AdobeIllustrator中创建基本形状导出到AdobePhotoshop中缩放到一个透明的xpx大小的画板图像中为合适填充增加特效如图导出x的PNG透明图标文件。列表视图图标列表视图图标类似于对话框图标区别是当在亮的资源背景上使用一个内阴影。这类图标的设计只用于列表视图中比如在设置应用中。就像“提供特定精度图标集”所描述的需要创建适用于低、中和高三种精度屏幕的特定图标集。这是确保应用程序在多种设备上能正常显示和安装。参考“设计师建议”章节的建议如何创建多精度图标集。如表所示列出各个精度的图标大小。同样的参考“设计师建议”这一章节建议如何设计多种设备的图标集。表:展示个广泛意义上的屏幕精度的最终对话框图标尺寸低精度屏幕(ldpi)中精度屏幕(mdpi)高精度屏幕(hdpi)xpxxpxxpx最后导出带透明的PNGPNGPNGPNG文件不能有背景颜色。创建图标所需要的AdobePhotoshop文件模板在“图标模板包”里。所有Android版本接下来介绍如何为所有Android版本设计列表视图图标结构列表视图图标通常由px的安全边界但圆形区域可以在安全边界中重叠。所有指定尺寸基于xpx画板中。在Photoshop模板保持四周px的边缘。发光、特效和阴影列表视图图标在一个内阴影中的正视图平面。由亮色渐变和内阴影组成在黑色背景中更突出。内阴影:黑色、不透明度、角度、混合模式:正常、距离px、大小px背景:黑色、系统标准颜色这些图标只在列表视图中显示。注:列表视图图标在Photoshop中的x的画板中没有安全边界。步骤在AdobeIllustrator中创建基本形状导出到AdobePhotoshop中缩放到一个透明的xpx大小的画板图像中为合适填充增加特效如图导出x的PNG透明图标文件。二、Widget设计指南Widget是在Android时引入的特性之一。Widget可以让用户在主屏幕界面及时了解应用程序显示的重要信息。标准的Android系统内置多个Widget如:模拟时钟、音乐播放器等。用户在主屏幕(HomeScreen)界面的空白区域长按,选择菜单的”小部件”项,即可随意选取所需的部件并显示在主屏幕上此文档介绍了如何设计一个Widget,使得和其它Widget以及主屏幕其它元素保持美观一致Android团队也于此文档介绍了Widget源图的一些设计标准,还有Widget制图的技巧诀窍对于开发Widget的相关信息,可参考开发者指南的AppWidgets章节和AppWidgets博客标准Widget解析典型的AndroidWidget主要有三个组成部分:一个限位框,一个框架,还有Widget的图形控件以及其它元素设计周全的Widget会在限位框边缘框架之间,及框架内边缘Widget的控件之间都保留一些内填充(内补白)Widget的外观被设计得与主屏幕的其它Widget相匹配,并以主屏幕的其它元素为依据对齐它们亦使用标准的阴影效果此文档说明了所有的相关细节纵向WidgetWidgetWidgetWidget的标准尺寸音乐播放器日历照片框横向WidgetWidgetWidgetWidget的标准尺寸设计Widget设置Widget的限位框尺寸要在最小的Widget尺寸中让应用程序的最有用和及时的数据最有效的显示在Widget中。用户将权衡Widget的有用性和是否占用主屏幕的空间所以Widget越小越好。带阴影的框架有内填充且包含图形文字元素的内容内边缘限位框带阴影的框架由内填充且包含图形文字元素的内容内边缘限位框所有Widget必须适应于六个支持Widget尺寸的边界框或者说需要一对适应横向和纵向的尺寸所以当用户切换屏幕方向时Widget看起来要友好些。“标准的Widget尺寸”如图示有种尺寸(种垂直方向和种水平方向)选择一个合适的框架“标准的Widget框架”如图示有种标准框架尺寸这些链接可以下载使用。Widget不一定使用这些框架但如果这样做Widget更能与其他Widget风格上统一。图形上使用标准的阴影效果此外若不使用这些效果“标准Widget阴影”说明了标准Widget使用的Photoshop设置。Widget中有按钮需要有三种状态(正常、按下和选中)可以下载“播放按钮的三种状态的Photoshop文档”来自于音乐播放Widget分析三个标准按钮效果可以使用Photoshop。完成源图的绘制并调整比例和对齐“Widget对齐的技巧和窍门”这一章节介绍了在标准框架内Widget图形的对齐技巧另外还有一些其他Widget的图形技巧。正确的图形文件保存Widget“窗口图形文件格式”介绍了如何正确保存Widget图形文件标准Widget尺寸有种Widget大小基于主屏幕的x(纵向)或者x(横向)的网格单元。这些为个标准控件尺寸的边界框尺寸。典型的Widget内容不要超出这些尺寸的边缘线但是在限位框里填充一个框架正如“设计Widget时”所介绍的。纵向每个单元格为px的宽度、px的高度(如图所示纵向的单元格)三种纵向的Widget尺寸如下:单元格像素xxxxxx横向每个单元格px的宽、px的高三种横向的Widget尺寸如下:单元格像素xxxxxx标准Widget框架针对六种标准Widget框架尺寸中都有一个标准框架你可以点击如图所示的框架下载PSD框架文件通过这个文件来设计你的Widget。docsimageswidgetdesignxWidgetFramePortraitpsddocsimageswidgetdesignxWidgetFramePortraitpsddocsimageswidgetdesignxWidgetFramePortraitpsddocsimageswidgetdesignxWidgetFrameLandscapepsd标准Widget阴影在Widget图层应用阴影特效使用底下的Photoshop图层面板设置与其他标准的AndroidWidget相匹配。Widget绘制技巧诀窍Android团队展示了一些用于对齐Widget图片和标准Widget限位框和框架的技巧使数个Widget以及主屏幕上的其他元素在视觉上对齐除此之外还有一些创建Widget的技巧。使用从AndroidSDK模拟器的屏幕截图工具让你的Widget控件对齐搜索控件和主屏幕上的其他元素的形状和阴影。从全尺寸单元格裁剪Widget的富余部分包括任何填充空间。(底下是xWidget减去xpx的资源)为了减少Widget输出的条状色块应用Photoshop的“添加杂色”来设置图片使用“patch”图片格式技术缩放图片并设置内容区域内填充(查看docsguidedevelopingtoolsdrawpatchhtml)注:当前AndroidWidget模板被设计为用于普通的渐变角度意思是“修补”技术不能用于优化资源尺寸。无论如何“patch”图片格式技术都能设置内容区域的内填充。在某些情况下低精度的设备可能引起视觉带抖动问题。为了解决这个问题应用程序开发人员应该通过“代理”为XML定义绘制资源:这种技术引用下的原始图片“backgroundpng”这种情况下指示设备需要抖动。Widget的图形文件格式保存Widget图片使用合适的透明图片框用PNG格式和位色调三、ActivityandTask设计指南这篇文档主要讲述Android应用框架的核心原则。站在高层来说以用户为中心来设计良好的交互程序对于应用设计者或是开发者来说是非常重要的。下面用例子来阐述了activities和tasks的一些底层原则和机制例如导航多任务activity重用意图和activity栈。这篇文档也着重讨论了一些设计决策针对如何利用好它们去设计你的应用程序UI。这篇文档中的例子均是Android应用程序包括默认应用程序(比如拨号器)、Google应用程序(比如地图)。你可以自己在Android模拟器上或是Android手机上去试验这些例子。如果你使用Android手机试验时可能未提供本文档中的某些例子。再看这篇文档之前请确保您看过本篇中的DesignTips章节。此篇算做是ApplicationFundamentals文档的的一部分(特指TasksandBackStack章节)它对于程序员来说覆盖了整个底层机制。Applications,Activities,ActivityStackandTasks理解Android系统中的四个基本概念对你是很有帮助的它们分别是:ApplicationsActivitiesActivityStackTasksApplications一个Android应用程序其实就是由一个或者多个Activity组成。它们被捆绑在一起并存放进apk文件中这就是Android应用程序。Android中有着丰富的应用程序比如邮件、日历、地图定位、文本消息、联系人、照相机、打电话、音乐播放器系统设置等应用。一般情况下桌面上都会有Android应用程序快捷图标用户可以选择某一个图标来启动应用程序。ActivitiesActivity是Android应用程序的主要组成部分activity可以是你自己创建的当然还可以是其它应用程序中的activity。它们都是在运行时绑定上的以便于应用程序扩展其自身的功能它们一旦组合在一起就会如同一个应用程序一样。每个activity都有其独特的UI、明确的功能诸如打电话、看照片、听音乐等。任何一个应用程序都应至少有一个activity。当使用Android手机时用户在屏幕上一个接一个地滑动或是点击图标启动activity完全不会注意到底层的行为他们体验是无缝的。activity后面有activitytask后面还会有task。Activity可以处理特定的数据类型和接受一相关的动作。每个activity都有其各自的生命周期互不干扰并且它们都可以被用户或者系统独立启动、运行、暂停、恢复运行、停止、重新开始。正因为这个独立性activity可以以不同的方式被其它的activity进行替换。比如打电话的应用程序就包含了四个activity:打电话、联系人列表、查看联系人、添加联系人如下图:打电话联系人列表查看联系人添加联系人下面的应用程序同样也包含了很多activity:邮件查看文件夹、邮件列表、邮件发送邮件和设置邮件账号。日历查看天、星期、月、议程编辑事件、首选项。照相机运行照相机、查看图片列表、图片编辑图片运行录像机查看录像列表和录像。游戏玩游戏和安装游戏。地图查看地图上的位置查看朋友的位置以及他们的详细信息(朋友的位置、状态、照片)。Activity是Android应用中最为突出

用户评论(0)

0/200

精彩专题

上传我的资料

每篇奖励 +2积分

资料评价:

/14
仅支持在线阅读

意见
反馈

立即扫码关注

爱问共享资料微信公众号

返回
顶部