Android UI设计指南

AndroidAndroidAndroidAndroidUIUIUIUI设计指南（自译）一、图标设计指南创建一个统一的外观和整体的用户界面效果以增加产品的价值，精简的图形样式还能让用户觉得UI更专业。本文提供的信息能帮助你为应用的用户界面的各个部分创建的图标与Android2.X框架的一般样式相匹配。以下的指南将帮助你创建一个完美而且统一的用户体验。下面文档讨论关于Android应用程序常见类型图标的使用详细指南：启动图标启动图标是您的应用程序在设备的主界面和启动窗口的图形表现。菜单图标菜单图标是当用户按菜单按钮时放置于选项菜单中展示给用户的图形元素。状态栏图标状态栏图标用于应用程序在状态栏中的通知。TabTabTabTab图标Tab图标用来表示在一个多选项卡界面的各个选项的图形元素。对话框图标对话框图标是在弹出框中显示，增加互动性。列表视图图标使用列表视图图标是用图形表示列表项，比如说设置这个程序。想更快的创建你的图标，可以导向Android图标模板包。����使用Android图标模板包Android的图标模板包是模板设计、纹理和图层样式的集合，使您更容易的创建在这份文档中符合指南指引的图标。我们建议您下载模板包文档再设计图标。图标模板提供了AdobePhotoshop格式的文档（PSD），以确保在为Android平台创建标准的图标提供层和设计处理。你可以加载模板文件到任何兼容的图片编辑程序，但是你所使用的基于该应用程序的层和处理方式可能会有所不同。����提供密度特定的图标集Android是为多种设备设计的，因此必须提供一系列的图片尺寸和解决方案。当你为应用设计图标时，最重要的是要让你的应用安装在任何设备上都是保持一致的。就你所知道的支持多屏幕文档中，Android平台让你提供的图标能更直接的在任何设备上不管这个设备的尺寸和精度都以同一种方式准确的实现。在一般情况下，推荐的方法是为下表中所列出的广义上的三种屏幕密度各创建一个单独的图标。当应用运行时，Android平台将检查屏幕的规格然后从特定文件中加载适合的图标资源。欲了解关于如何存储特定密度资源信息，请参阅屏幕大小和密度的资源目录。有关如何创建和管理多种密度的图标集的提示，参阅设计师的提示。表1：三个屏幕密度所需要的图标尺寸：图标类型标准尺寸（以像素为单位），广义的屏幕精度低精度(ldpi)中精度(mdpi)高精度(hdpi)启动图标36x36px48x48px72x72px菜单图标36x36px48x48px72x72px状态栏图标(Android2.3以后版本)12wx19hpx(preferred,widthmayvary)16wx25hpx(preferred,widthmayvary)24wx38hpx(preferred,widthmayvary)状态栏图标(Android2.2及之前版本)19x19px25x25px38x38pxTab图标24x24px32x32px48x48px对话图标24x24px32x32px48x48px列表图标24x24px32x32px48x48px����设计师建议这里有几点建议对你为应用程序设计图标或者绘制设备也许有用。这个建议是以AdobePhotoshop或者一种位图和矢量编辑软件为基础的。����图标资源命名规则按字母排列顺序命名文件以便将相关资源规整到一个目录里面，特别是，它有助于使用一个共同的前缀为每个图标类型。例如：资源类型前缀举例图标ic_ic_star.png启动图标ic_launcheric_launcher_calendar.png菜单图标ic_menuic_menu_archive.png状态栏图标ic_stat_notifyic_stat_notify_msg.pngTab图标ic_tabic_tab_recent.png对话图标ic_dialogic_dialog_info.png值得注意的是不必使用任何类型的相同前缀-目的是方便您。创建一个工作文档来整理多精度文件支持多尺寸的屏幕精度一个图标就需要创建多个版本，为了让多个副本文件安全并且容易查找，我们建议在你的工作空间里每个资源文件创建一个资源包。如下：此结构相似的特定精度结构，您将把您的应用资源最终存储为完整资源。因为你的工作环境和应用程序结构类似，你可以快速的决定哪些资源必须拷贝到每个应用程序目录。通过分辨率区分资源同样可以帮助你通过文件名发现多精度是否一致，这点很重要，因为不同精度的相同资源必须使用相同的文件名。以下对比，这是一个典型的应用的资源目录结构：����最好使用矢量图形诸如AdobePhotoshop的图像编辑软件允许使用矢量形状、栅格图层和图层效果相结合。如果可能，使用矢量图形，以便在需要时资源能随意缩放而不会都是细节和边缘清晰度。使用矢量图形也可以很容易的在较小精度的像素边界对其边缘。����以最大尺寸开始你需要针对不同屏幕精度创建不同资源，如表1，最好以大尺寸图标的设计或者所有图标大小的倍数尺寸开始设计。比如，启动图标根据屏幕精度需要72px、48px、36px三种尺寸。如果你以864*864的尺寸开始绘制启动图标，当你创建最终资源的图标尺寸时就能更容易和清晰的调整图标。他同样有益于在高精度的对象中提供被推荐的安全边界的大尺寸增加指引（也称为指南）。继续以上的例子，每条指南，启动图标包含72x72的完整资源包括60x60px（56x56的矩形图标区域）。在864x864的大尺寸中，这相当于在水平和竖直方向上在需要72px的边缘。����缩放时，位图图片需要重新绘制如果缩放图形的话，要从矢量图层进行缩放，而不是位图图层，如果在高精度的环境中，这些位图图层需要重新绘制。比如说在一个中等精度下60x60位图图形的圆要在高分辨下以90x90的大小显示就需要重新绘制。����当保存图像资源时，删除一些没用的资源。为了帮助图像资源尽可能小，可以从文件中删除一些不必要的头文件，如AdobeFireworks的元数据或AdobePhotoshop头文件。删除Photoshop头文件的步骤如下：1.选择文件存储为Web和设备所用格式2.在“存储为web和设备所用格式”面板，预设选择“PNG-24”，设置底下选项仍为“PNG-24”，勾选“透明度”（如果图像含有透明度）3.选择“存储”也可以使用PNG文件的优化工具，如OptiPNG或Pngcrush。����保证不同精度的相应资源使用相同的文件名同样的图标资源文件在每个精度中必须使用同样的文件名，但是要存储在具体精度目录里。这允许系统根据设备屏幕的特点查找并加载适合的资源。出于这个原因，确保资源在每个目录是一致的文件名，而不使用特定的精度后缀名。1.启动图标启动图标是在设备主屏幕和启动窗口代表应用程序的图形。用户打开主屏幕下方的触摸屏的启动图标。启动界面一打开将看到所有安装应用的图标。用户选择一个应用程序，并通过点击启动图标或任何硬件导航控件，如轨迹球或者D-pad打开他。正如你所看到的，在提供多个特性精度图标设备时，你必须创建低精度、中精度和高精度的三种屏幕图标。这将确保图标正确的显示在被安装的设备的应用程序上。可以看看设计师建议这一节的建议如何使用多套图标的问题。����AndroidMarket的应用程序图标如果您在AndroidAndroidAndroidAndroidMarketMarketMarketMarket发布应用程序，你必须提供在开发者平台应用程序上传时的512x512px，高精度的图标。此图标将被用于在AndroidMarket的不同地点，但不会取代你的启动器图标。如何更容易的将高精度图标缩放到512*512的提示和建议，在设计师建议章节中有讲。对于高精度的应用程序图标，在AndroidMarket的信息和规格，请参阅下面的文章：应用程序图形资源（AndroidMarker帮助说明）����Android2.0以后版本启动Android2.0，启动图标就展示在面前，而不是四分之三透视。下面的指南描述了如何设计Android2.0之后版本的启动图标的设计。样式创建启动图标，应遵循以下总体风格的原则。这个准则并不意味着限制你设计图标，而是强调用相同的方法在设备上分享您的图标，如图1简洁时尚符合当下的流行趋势，避免过度使用隐喻。高度简化图标·小尺寸也易于识别，不宜太复杂。·尝试抓住程序的主要特征（例如，用音像表示音乐icon）·使用自然的轮廓和形状，看起来几何化和有机化，不失真实感。·图标采用前视角，几乎没有透视，光源在顶部不光滑但有质感图标应该采用非镜面，有质感的材料。见“材料和颜色”章节，获取更多信息。前视角和顶部光源Android2.0之后版本，Android启动图标采用前视角，几乎没有透视，光源在顶部。注：Android适用于单独的文字标签，当现实启动图标时使用应用程序名称。所以应该避免图标里嵌入文本而不是专注于设计一个独特难忘的图标。尺寸和定位启动图标要有多样化的形状和样式，但又要形成统一的视觉风格，其尺寸和定位也要统一。图2说明了定位图标内资源的各种方式。图标的实际大小应该小于资源的实际边界，以创建一个一致的视觉体验和阴影效果。如果图标是矩形或者接近矩形，图标尺寸应该更小。为了表示推荐大小的图标，图2中的例子每个图片包括了三个不同的指导框。·红色框代表图标的完整尺寸·蓝色框式代表图形尺寸，比图标尺寸小，图形之外的空间用于显示阴影和特殊效果；·橙色框代表当图标为方形时的边框范围。正方形的外框小于其他形状的图标，原因是两种类型图标的达到统一的视觉权重。高精度屏幕的启动图标尺寸：外框：72x72px图标：60x60px方形图标：56x56px中精度屏幕的启动图标尺寸：外框：48x48px图标：40x40px方形图标：38x38px低精度屏幕启动图标尺寸：外框：36x36px图标：30x30px方形图标：28x28px材质和颜色启动图标要有触感、明亮和有质感的材质，即使图标只是简单的形状，但也要尝试一些取之于现实世界的材质来表现。Android启动图标通常由一个大的基本形状，一个中立和主色调组成的较小的形状。图标可能使用一个保持有相当对比度的中性色。如果可能的话，每个图标不使用一个以上的主色。图标应该使用包括一系列暗淡的和基本的的色调。不能用太饱和的色调。启动图标推荐使用的色调如图3，你可以从中选择元素的基础色和高亮色。也可以使用调色板中的颜色和白色到黑色的渐变的叠加。这需要创建该图标从上到下的透视，并保持色彩的不饱和度。可以通过如图4所示的调色板颜色的几种突出材质，组合成如图5所示的组合。为了使您开始设计图标，图标模板包括Photoshop里的材质、颜色、渐变方式的文件（ic_launcher_template/example_materials.psd)）特效启动图标是采用从上往下的透视角度的，通过阴影创建层次感。图标可以使用不同的纹理和灯光效果，但是必须是从上往下的透视角度。为了保持统一性，所以的图标都需要使用相同的阴影效果，如图6所示。注：所有的像素尺寸为中等精度，并应适当的缩放分辨率。1.光影：从上而下，并适应合适的高光细节2.投影：#00000075%透明度；90°投影；距离1px；大小3px3.材质：触感，出现使用现实中的材质（例如图像中的单色噪音）该做什么，不该做什么下面是一些创建应用程序图标时需要考虑的那些“该做和不该做”的例子。Android启动图标该做…·现代、简约、磨砂、触觉和纹理·正面视图，且从上而下的光影，整体性，局限于调色板颜色。Android启动图标不该做…·古董、过于复杂、光泽、平面向量·旋转、裁切、过饱和图标示例以下例子展示Android应用的高精度启动图标。这些图标仅供参考-请不要再使用这些图标����Android1.6及更早版本如下指南描述了如何设计Android1.6及更早版本的启动图标。Android1.6一些版本的图标是采用一个固定角度的简化3D图标。如图8所示的角度：结构·启动图标的底部可以朝上或者朝前