0条评论 | 26 views

图像显示所需的概念:


像素:一幅图片的显示就是由许多显示着不同颜色的小方格组成的,这样的小方格就被称为像素,是构成图片的最小单位.但是这个像素的具体大小是多少呢?这需要取决于显示这张图片的具体的物理设备显示一个图片像素点的荧光点的大小.图片文件只是记录着它自身有多少个像素点,每个像素点显示什么颜色,至于它自身物理尺寸有多大,它自身也无法得知,例如一张480*800像素的图片在电脑显示器上显示明显要比在手机屏幕上显示大很多,而这张图片本身并没有改变.只是手机的屏比电脑显示器的屏要精细许多,也就是每一个物理像素点要小许多,密度也就大许多.


分辨率:分为“图像分辨率”与“物理显示分辨率”。它们都是水平像素点数与垂直像素点数的乘积,也就是像素总和数。图像分辨率是指图片文件记录着自身所有的像素数。物理显示分辨率是指物理显示屏水平与垂直能显示的像素数的乘积.有的人说分辨率越高,显示的图片就越清晰,这点是针对物理尺寸相同的情况而言,因为一样的分辨率有可能尺寸可能不一样大,这样光就分辨率来比较清晰度没有可比性.


密度:就是物理设备上单位尺寸里的像素数,当然是密度越大图片显示就越清晰了.


Android系统的长度单位:px:像素,终端上的一个物理像素点,例如,480*800的屏幕在横向有320个象素,在纵向有480个象素。dip(dp):与终端上的物理像素点无关,是一种基于屏幕密度抽象单位,被称作“设备独立像素”,会随着屏幕的密度进行自动的大小调整.sp:比例像素,主要处理字体大小,可以根据用户的字体大小首选项进行缩放.in:英寸,标准长度单位mm:毫米,标准长度单位pt:磅,标准长度单位,1/72英寸
Android屏幕适配:为什么要适配:Android终端的物理尺寸,分辨率的类别众多,可能你为一种终端设计了一套UI符合要求,但是在另一类大小的物理终端上显示就完全不是你想要的。解决办法:针对这种情况,Android提供了一套标准,它将屏幕分为三类,所以当你新建一个Android工程后,工程自动为你创建三个存放不同分辨率,不同密度下的UI的文件夹,如下图:


201203252235114997.png

 

 


三个文件夹下的UI对应不同分辨率及密度的屏幕,对应关系如下:



 
       屏幕类型
 
分辨率 密度 尺寸
drawable-hdpi WVGA 480*800 240
drawable-ldpi QVGA 240*320 120
drawable-mdpi HVGA 320*480 160

这三个文件夹只是告诉Android你设计的UI是针对哪种屏幕分辨率及密度进行设计的,Android终端会在打开应用的时候自动根据终端类型去匹配与文件夹里提供的UI相近分辨率及密度的图片。假设终端屏是WVGA类型的,也就是密度为240,那么程序打开时,会去提取drawable-hdpi文件夹下图片,然后用一个物理像素去显示一个图片像素,因为你把图片是放在drawable-hdpi文件夹下的,也就是告诉Android你设计的UI是针对480*800,密度为240而言的,那么它不会对图片进行放大或缩小操作,正好用一个物理像素去显示一个图片像素。
当图片的密度与屏幕密度相同,则不进行缩放.当图片的密度与屏幕密度不同,则进行缩放。
实验1:针对480*800的屏我设计了一张图片(分辨率是480*100),分别在不同物理分辨率终端下进行显示,看看Android会不会显示不正常。图片如下:

201203252235121244.png



布局文件:

  1. <?xml version="1.0" encoding="utf-8"?>
     
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     
  3.     android:orientation="vertical"
     
  4.     android:layout_width="fill_parent"
     
  5.     android:layout_height="fill_parent"
     
  6.     android:gravity="center"
     
  7.     >
     
  8.      
     
  9.     <ImageView
     
  10.         android:layout_width="wrap_content"
     
  11.         android:layout_height="wrap_content"
     
  12.         android:src="@drawable/density480800"/>
     
  13.      
     
  14. </LinearLayout>
复制代码

假设:这张图片的宽是480像素,高为100像素,我将它放在drawable-hdpi文件夹下,就是告诉Android我的设计意图是针对480*800的Android终端而言的,那么它会在480*800的终端上以一个物理像素去显示一个图片像素,如果将它放在分辨率为240*320的终端上进行显示,如果Android不对显示进行处理的话,还是以一个物理像素去显示一个图片像素,终端必将显示不下这张图片,因为图片像素超过了物理像素个数。

注意:我这里只设计了一张图片,并放置于drawable-hdpi文件夹下,并没有在其它文件夹下放置相应的图片,当Android进行匹配的时候也就只能匹配这张图了。
结果:WVGA屏:对比原图,正好显示下,大小相同
201203252235141112.png



HVGA屏:对比原图,能够显示下,对图片进行了缩小操作.

201203252235154535.png



QVGA屏:对比原图,能够显示下,对图片进行了缩小操作

201203252235163912.png



实验2:针对240*320的屏我设计了一张图片(分辨率为:240*100),分别在不同物理分辨率终端下进行显示,看看Android会不会显示不正常。图片如下:

201203252235171272.png

阅读全文...

日志   

0条评论 | 43 views

创造一个统一外观,感觉完整的用户界面会增加你的产品附加价值。精炼的图形风格也使用户觉得用户界面更加专业。

本文档提供了一些信息,帮助你如何在应用界面的不同部分创造图标来匹配 Android 2.x框架下的普遍风格。遵守这些原则会辅助你为用户创造一个流畅而统一的体验。
为了使你创建图标的工作进行的更加快速,你可以下载 Android 图标模板包。更多信息请浏览Android图标模板包的使用
Android系统被设计在一系列屏幕尺寸和分辨率不同的设备上运行的。当你为自己的应用设计图标时,必须知道,你的应用有可能在任何设备上安装运行。正如支持多屏幕文档中所描述,  Android 为你直接提供这样的图标,他们会在任何设备上正确的显示,无论这些设备的屏幕大小和分辨率如何。
一般来说,推荐的方式是为三种普遍的屏幕密度(如表1)中的每一种都创造一套独立的图标。然后,把他们储存在你的应用中特定的资源目录下。当你的应用运行时,Android平台将会检查设备屏幕的特性,从而加载特定密度资源目录下相应的图标。想要了解更多如何存储特定密度资源的信息,请参阅创造合格屏幕尺寸和密度的办法目录。
Android 设备的屏幕密度基线是中等。因此,一种被推荐的为多种屏幕密度创造图标方式是:

  • 首先为基准密度设计图标(看表一为实际的像素尺寸设计的图标)。
  • 把图标放在你的应用的默认可绘制资源中,然后在 Android 可视化设备(AVD)或者HVGA设备如 T-Mobile G1中运行应用。
  • 根据需要测试和调整你的基准图标。
  • 当你对在基准密度下创建的图标感到满意的时候,为其他密度创造副本。
    • 把基准图标按比例增加为150%,创造一个高密度版本。
    • 把基准图标按比例缩小为75%,创造一个低密度版本。
  • 把图标放入你的应用的特定密度资源目录中。例如:
    • 中密度版本在 res/drawable-mdpi/ 目录下运行(或在默认 res/drawable/ 目录下运行)
    • 高密度版本在 res/drawable-hdpi/目录下运行。
    • 高密度版本在res/drawable-ldpi/目录下运行。
  • 如果需要,测试和调整高密度和低密度的图标。

关于如何创造和管理多密度图标集,参阅对设计师的小提醒
表 1. 对三种普遍屏幕密度中每一种密度的所需要的成品尺寸图标的摘要

Icon Type 对于普遍的屏幕密度标准版本尺寸(像素表示),

 
低密度屏幕(ldpi) 中密度屏幕(mdpi) 高密度屏幕(hdpi)
启动器 36 x 36 px 48 x 48 px 72 x 72 px
菜单 36 x 36 px 48 x 48 px 72 x 72 px
状态栏 24 x 24 px 32 x 32 px 48 x 48 px
标签 24 x 24 px 32 x 32 px 48 x 48 px
对话 24 x 24 px 32 x 32 px 48 x 48 px
列表视图
 
24 x 24 px 32 x 32 px 48 x 48 px
启动器图标是一个图形,代表了设备的主页和启动器窗口中的应用。
用户会在点击主页底部的图标中打开启动器。启动器打开,显示所有已经安装应用的图标。他们被以格状排列。用户选择一个应用,通过任何可以得到的硬件导航控制,例如轨迹球点击启动器图标。
用户也可以把一个图标从启动器窗口中拖出来,放在主页上,来更方便的访问应用。再这种情况下,系统会显示你的应用的启动器图标在主页墙纸上的映射。此渲染的映射尺寸与在启动器中渲染的尺寸相同。
系统控制了所有启动器图标的缩放,所以他们被渲染为统一的高和宽。被渲染的启动器图标的实际像素尺寸在随着设备屏幕的像素尺寸和屏幕密度的不同而显示的不同。为了保证你的图标渲染效果最佳,请提供为低密度,中密度和高密度屏幕制作的图标。想得到更多信息,请参阅上面的提供特定密度图标集或下面的为设计师的建议
风格你创造启动器图标应该符合以下原则的一般风格。这个准则并不限制你可以做的图标,而是强调你的图标可以在其他设备上共享的普遍的办法。图1提供了例子。
图 1.启动器图标风格的插图

干净和现代:
 

  • 启动器图标应该是现代的,有时有点古怪,但是他们不应该是过时和粗糙的。如果可能的话,你应该避免过度使用象征性的隐喻。

简单和标志性的:
 

  • Android启动器图标应该是自然的抽象表现;你的图标应该高度简化和夸张,以至于他们可以在小尺寸时合适显示。你的图标不应该过于复杂。
  • 尝试用一个简单的部分作为整体的象征性的代表(例如,音乐图标以扬声器作为特征)。
  • 考虑使用自然轮廓和形状,包括几何的和有机的,与现实(不是照片般的真实)映射。
  • 你的图标不应该呈现一个对更大的图像不正确的观点。

触觉和质感:
 

  • 图标应该表现为不平淡的,有质感的材料。更多信息请看下面的材料和色彩。

面向前方和顶部照明:
 

  • Android 2.0和以后的平台的新规定: Android启动器图标应该面向前方,透视非常小,而且应该顶部照明。

此外,注意所有图标应该有独立的文字标签,而不是把文字设计嵌入到图标里面,把努力用在使图标有特色和难忘中去。要看更多Android系统下应用的启动器图标的案例,请参阅标准启动器图标
做什么和别做什么以下有一些在你为自己的应用设计一个图标的过程中“可以做的的和不要做的”例子

Android启动器图标是...
  • 现代的,简约的,不平坦的,有触感,和质感的
  • 面向前方和顶部明亮,整体而言,色彩在一定的色谱中
Android 启动器图标不是...
  • 过时的,过分复杂,光滑的,平坦的
  • 旋转的, 剪裁不正的,过于深色的
图 2. 启动器中"做什么和别做什么"的例子

质感和颜色启动器的图标应该利用触觉,顶部照明,使用纹理材料。即使你的图标只是一个简单的形状,你应该尝试把它们当做真实世界的材料渲染。
该平台的默认应用中启动器图标用了以下图3所示的材料。 你的图标可以使用这些材料也可以创建新的材料。
Android 启动器图标经常包括由较小的形状组成一个较大的形状,并结合成一个中立的形状和一个中立的颜色。图标可能会使用中性色彩的组合,但保持较高的对比度。如果可能的话,每个图标不应该使用超过一个原色。
启动器的图标应该使用一个又限制的调色板,包含一系列中立的颜色和原色。该图标不应该过分饱和。
推荐的启动器图标调色板应用,如图4所示。你可以使用条侧板中的基本颜色和高亮元素。你可以使用白色到黑色垂直线性渐变叠加一起的调色板的颜色。这产生的印象是,光从顶部照射进来,且保持颜色的低饱和度。
图 3.你可以用它来创建你的图标的材料的例子.

图. 从推荐调色盘中选出的基本和高亮颜色组合形成的材料的例子

当你从简易的调色盘中取出一个高亮颜色组成材料时,你可以创造如图5所示的材料组成。为了帮助你开始,图标包(icons pack)包括一个Photoshop模板文件(Launcher-icon-template.psd),文件提供了默认的材料,颜色和梯度。
5. 推荐图标调色板.

尺寸和位置启动器的图标应该使用不同的形状和形式,而且这些必须缩被缩放和定位来创建一致的视觉重量。
图6展示了图标放置在各版本中的不同的方式。至于更详细的描述,就是为了制造一个一致的直觉质量,并允许加入阴影,你应该使图标比实际版本中的范围小一些。如果你的图标是方形或近方形,尺寸应该更小。
 

  • 为全版本边界框显示为红色。
  • 推荐的实际图标边界框显示为蓝色。该图标框的大小比完整版中的尺寸更小,以便有空间包含阴影和特殊的图标处理。
  • 对于方形图标,推荐的边界框是橙色显示的。为正方形图标框比较小是因为要在两种类型的图表中建立同样的视觉重量。

  • 高密度屏幕(hdpi) 的图标尺寸:
    • 全版本: 72 x 72 px
    • 图标: 60 x 60 px
    • 正方形图标: 56 x 56 px
  • 中密度屏幕(mdpi) 的图标尺寸:
    • 全版本: 48 x 48 px
    • 图标: 40 x 40 px
    • 正方形图标: 38 x 38 px
  • 低密度屏幕(ldpi) 的图标尺寸:
    • 全版本: 36 x 36 px
    • 图标: 30 x 30 px
    • 正方形图标: 28 x 28 px
图 6. 图标版本范围中图标的尺寸和位置.
 
使用启动器图标模板Android的图标模板包2.0是一个包含默认图标的材料和颜色调色板的模板。该模板为psd格式,方便Photoshop或相似的图像编辑器编辑。
To get started, fir要开始使用,首先下载 Android的图标模板包2.0.
一旦你下载了模板包,解压缩,并在Adobe Photoshop或类似的图片编辑器中中打开 Launcher-icon-template.psd ,注意调色板的材料和颜色。您可以使用该模板创建一个启动器的图标作为起点。
在创建您的图标之后,你可以按照以下规范添加阴影效果,作为你创造的合适的图片大小。
WVGA (高密度) 屏幕的阴影:
  • 效果: 底部阴影
  • 颜色: #000000
  • 混合模式: 多重
  • 不透明度: 75%
  • 角度: 90°
  • 距离: 2px
  • 扩展: 0%
  • 尺寸: 5px
HVGA (中密度) 屏幕阴影:
  • 效果: 底部阴影
  • 颜色: #000000
  • 混合模式: 叠加
  • 不透明度: 75%
  • 角度: 90°
  • 距离: 1px
  • 扩展: 0%
  • 尺寸: 3px
当添加了阴影,图标制作完成后,输出一个格式为PNG的透明文件,以确保您的图标在高密度屏显示大小为72 x72像素和在中密度屏显示大小为48 x48像素。关于为什么你应该为高,中,低密度的屏幕提供不同的启动器版本,参阅支持多种屏幕.
菜单图标
菜单图标是一个图形元素,当用户按下菜单按钮时在向用户显示菜单,在弹出菜单里显示。他们是平面展示的。菜单图标元素不能表现为3D或者透视的。
正如提供特定密度图标集中所描述的,你应该为低,中,和高密度的屏幕制作相应的图标集。这可以确保你的图标在一系列安装你的应用的设备中正常显示。见表1 所建议的为每种密度所创造的图标尺寸。此外,请参阅对设计师建议 中关于如何使用多组图标。
结构

  • 为了保持一致性,所有的菜单图标必须使用相同的原调色板和相同的效果。欲了解更多信息,参阅菜单图标颜色调色板
  • 菜单图标应包括圆角,要保证逻辑正确。例如,在图7中,合理表现圆角的部分是房顶而不是建筑余下的部分。
  • 所有这个页面上的特定尺寸是建立在一个48x48像素的画板,6像素安全边栏的基础上的。
  • 图标菜单效果(外发光)在灯光,效果,阴影 中被描述,它在必要时可以与6px安全边栏重叠。而基础形状必须始终留在安全边栏内。
  • 最后的图形必须导出为一个透明的PNG文件。
  • 在Adobe Photoshop中制作的菜单图标模板可以在图标模板包中得到。

图 7.
菜单图标中的安全栏和圆角 。 图标尺寸是48x48.

 
灯光,特效和阴影菜单图标是平的。轻微凹陷和一些其他特效,如下所示,可以创造纵深感。
图 8.菜单图标的灯光,特效和阴影.
1. 前部: 从原色调色板中挑出颜色填充渐变
2. 内投影: 黑色 | 20 % 不透明度
角度90° | 距离 2px
大小 2px
3. 外发光: 白色 | 55% 不透明度
扩展 10% |大小 3px
5. 内斜角: 深度1%
角度 90° | 高度 10°
发光白色70%不透明度
阴影黑色 25% 不透明度
 


 
颜色调色盘
白色
r 255 | g 255 | b 255
用于外发光和斜面的高光。
渐变填充
1:  r 163 | g 163 | b 163
2:  r 120 | g 120 | b 120
用作颜色填充。
黑色
r 0 | g 0 | b 0
用于内部阴影和斜面的阴影。
步骤
  • 使用工具如Adobe Illustrator创建基本形状。
  • 导入到一个像Adobe Photoshop的工具,把它放置在48x48像素的透明的背景的图像上。注意安全栏。
  • 增加如图8所描述的效果。
  • 导出一个48x48像素的透明PNG格式的图标。
"做这些和不要做这些"在为你的应用做菜单图标时,下面是一些“做这些和不要做这些”要考虑的例子。
状态栏图标用来在状态栏中展示你的应用中的通知,他们与菜单图标非常相似,但是更加小,对比度更高。
正如提供特定密度图标集中所描述的,您应该为低,中和高密度的屏幕制作独立的图标集。这可以确保你的图标在一系列安装了你的应用的设备中显示正常。见为每个密度屏幕所建议的尺寸。此外,请参阅对设计师的建议中关于如何创建图标集的描述。
结构

  • 圆角必须始终被应用到基础的形状中和状态栏图标细节中,如图9所示。
  • 所有这个页面上的特定尺寸是建立在一个25x25像素的画板,2像素安全边栏的基础上的。
  • 状态栏图标可以在必要时与安全栏左右重叠,但绝不能与安全栏的顶部和底部重叠。
  • 最后的图形必须导出为一个透明的PNG文件。
  • 在Adobe Photoshop中制作的菜单图标模板可以在图标模板包中得到。

阅读全文...

营销   

0条评论 | 26 views
你知道手机UI设计的禁忌吗?

策划