<?xml version="1.0" encoding="UTF-8"?>
  <feed xmlns="http://www.w3.org/2005/Atom">
  <title type="html"><![CDATA[下一站Raymond.SEO]]></title>
  <subtitle type="html"><![CDATA[肇庆SEO,肇庆网站优化,肇庆网站推广,肇庆网站策划,肇庆网页设计]]></subtitle>
  <id>http://www.raymod.com/</id>
  <link rel="alternate" type="text/html" href="http://www.raymod.com/" /> 
  <link rel="self" type="application/atom+xml" href="http://www.raymod.com/atom.asp" /> 
  <generator uri="http://www.pjhome.net/" version="2.8">PJBlog3</generator> 
  <updated>2012-05-19T01:53:35+08:00</updated>

  <entry>
	  <title type="html"><![CDATA[Android 环境下的图标设计原则]]></title>
	  <author>
		 <name>raymond</name>
		 <uri>http://www.raymod.com/</uri>
		 <email>ray@zq.gd</email>
	  </author>
	  <category term="" scheme="http://www.raymod.com/default.asp?cateID=6" label="营销" /> 
	  <updated>2012-05-19T01:53:35+08:00</updated>
	  <published>2012-05-19T01:53:35+08:00</published>
		  <summary type="html"><![CDATA[<p><font size="2">创造一个统一外观，感觉完整的用户界面会增加你的产品附加价值。精炼的图形风格也使用户觉得用户界面更加专业。<br />
<br />
本文档提供了一些信息，帮助你如何在应用界面的不同部分创造图标来匹配 Android 2.x框架下的普遍风格。遵守这些原则会辅助你为用户创造一个流畅而统一的体验。<br />
为了使你创建图标的工作进行的更加快速，你可以下载 Android 图标模板包。更多信息请浏览<strong>Android图标模板包的使用</strong>。<br />
Android系统被设计在一系列屏幕尺寸和分辨率不同的设备上运行的。当你为自己的应用设计图标时，必须知道，你的应用有可能在任何设备上安装运行。正如<strong>支持多屏幕</strong>文档中所描述，&nbsp;&nbsp;Android 为你直接提供这样的图标，他们会在任何设备上正确的显示，无论这些设备的屏幕大小和分辨率如何。<br />
一般来说，推荐的方式是为三种普遍的屏幕密度（如表1）中的每一种都创造一套独立的图标。然后，把他们储存在你的应用中特定的资源目录下。当你的应用运行时，Android平台将会检查设备屏幕的特性，从而加载特定密度资源目录下相应的图标。想要了解更多如何存储特定密度资源的信息，请参阅<strong>创造合格屏幕尺寸和密度的办法目录。</strong><br />
Android 设备的屏幕密度基线是中等。因此，一种被推荐的为多种屏幕密度创造图标方式是：<br />
</font></p>
<ul class="litype_1" type="1" sizset="38" sizcache="8">
    <li>首先为基准密度设计图标（看表一为实际的像素尺寸设计的图标）。</li>
    <li>把图标放在你的应用的默认可绘制资源中，然后在 Android 可视化设备（AVD）或者HVGA设备如 T-Mobile G1中运行应用。</li>
    <li>根据需要测试和调整你的基准图标。</li>
    <li sizset="38" sizcache="8">当你对在基准密度下创建的图标感到满意的时候，为其他密度创造副本。
    <ul sizset="38" sizcache="7">
        <li>把基准图标按比例增加为150％，创造一个高密度版本。</li>
        <li>把基准图标按比例缩小为75％，创造一个低密度版本。</li>
    </ul>
    </li>
    <li sizset="41" sizcache="8">把图标放入你的应用的特定密度资源目录中。例如：
    <ul sizset="41" sizcache="7">
        <li>中密度版本在 res/drawable-mdpi/ 目录下运行（或在默认 res/drawable/ 目录下运行）</li>
        <li>高密度版本在 res/drawable-hdpi/目录下运行。</li>
        <li>高密度版本在res/drawable-ldpi/目录下运行。</li>
    </ul>
    </li>
    <li>如果需要，测试和调整高密度和低密度的图标。</li>
</ul>
<p>关于如何创造和管理多密度图标集，参阅<strong>对设计师的小提醒</strong><br />
<strong>表 1.</strong> 对三种普遍屏幕密度中每一种密度的所需要的成品尺寸图标的摘要<br />
<table class="t_table" cellspacing="0">
    <tbody>
        <tr>
            <td>Icon Type</td>
            <td colspan="3">对于普遍的屏幕密度标准版本尺寸(像素表示),</td>
        </tr>
        <tr>
            <td><br />
            &nbsp;</td>
            <td>低密度屏幕<i>(ldpi)</i></td>
            <td>中密度屏幕<i>(mdpi)</i></td>
            <td>高密度屏幕<i>(hdpi)</i></td>
        </tr>
        <tr>
            <td>启动器</td>
            <td>36 x 36 px</td>
            <td>48 x 48 px</td>
            <td>72 x 72 px</td>
        </tr>
        <tr>
            <td>菜单</td>
            <td>36 x 36 px</td>
            <td>48 x 48 px</td>
            <td>72 x 72 px</td>
        </tr>
        <tr>
            <td>状态栏</td>
            <td>24 x 24 px</td>
            <td>32 x 32 px</td>
            <td>48 x 48 px</td>
        </tr>
        <tr>
            <td>标签</td>
            <td>24 x 24 px</td>
            <td>32 x 32 px</td>
            <td>48 x 48 px</td>
        </tr>
        <tr>
            <td>对话</td>
            <td>24 x 24 px</td>
            <td>32 x 32 px</td>
            <td>48 x 48 px</td>
        </tr>
        <tr>
            <td>列表视图 <br />
            &nbsp;</td>
            <td>24 x 24 px</td>
            <td>32 x 32 px</td>
            <td>48 x 48 px</td>
        </tr>
    </tbody>
</table>
启动器图标是一个图形，代表了设备的主页和启动器窗口中的应用。<br />
用户会在点击主页底部的图标中打开启动器。启动器打开，显示所有已经安装应用的图标。他们被以格状排列。用户选择一个应用，通过任何可以得到的硬件导航控制，例如轨迹球点击启动器图标。<br />
用户也可以把一个图标从启动器窗口中拖出来，放在主页上，来更方便的访问应用。再这种情况下，系统会显示你的应用的启动器图标在主页墙纸上的映射。此渲染的映射尺寸与在启动器中渲染的尺寸相同。<br />
系统控制了所有启动器图标的缩放，所以他们被渲染为统一的高和宽。被渲染的启动器图标的实际像素尺寸在随着设备屏幕的像素尺寸和屏幕密度的不同而显示的不同。为了保证你的图标渲染效果最佳，请提供为低密度，中密度和高密度屏幕制作的图标。想得到更多信息，请参阅上面的<strong>提供特定密度图标集</strong>或下面的<strong>为设计师的建议</strong>。<br />
风格你创造启动器图标应该符合以下原则的一般风格。这个准则并不限制你可以做的图标，而是强调你的图标可以在其他设备上共享的普遍的办法。图1提供了例子。<br />
<img height="344" alt="" src="http://img.ucdchina.com/upload/snap/2010-07/b20da96ab4a173b406f23d53917db15d.png" width="340" /><strong>图 1.启动器图标风格的插图</strong><br />
<br />
干净和现代:<br />
&nbsp;</p>
<ul sizset="45" sizcache="7">
    <li>启动器图标应该是现代的，有时有点古怪，但是他们不应该是过时和粗糙的。如果可能的话，你应该避免过度使用象征性的隐喻。</li>
</ul>
<p>简单和标志性的:<br />
&nbsp;</p>
<ul sizset="46" sizcache="7">
    <li>Android启动器图标应该是自然的抽象表现；你的图标应该高度简化和夸张，以至于他们可以在小尺寸时合适显示。你的图标不应该过于复杂。</li>
    <li>尝试用一个简单的部分作为整体的象征性的代表（例如，音乐图标以扬声器作为特征）。</li>
    <li>考虑使用自然轮廓和形状，包括几何的和有机的，与现实（不是照片般的真实）映射。</li>
    <li>你的图标不应该呈现一个对更大的图像不正确的观点。</li>
</ul>
<p>触觉和质感:<br />
&nbsp;</p>
<ul sizset="50" sizcache="7">
    <li>图标应该表现为不平淡的，有质感的材料。更多信息请看下面的材料和色彩。</li>
</ul>
<p>面向前方和顶部照明:<br />
&nbsp;</p>
<ul sizset="51" sizcache="7">
    <li><i>Android 2.0和以后的平台的新规定:</i> Android启动器图标应该面向前方，透视非常小，而且应该顶部照明。</li>
</ul>
<p>此外，注意所有图标应该有独立的文字标签，而不是把文字设计嵌入到图标里面，把努力用在使图标有特色和难忘中去。要看更多Android系统下应用的启动器图标的案例，请参阅<strong>标准</strong>启动器<strong>图标</strong>。<br />
做什么和别做什么以下有一些在你为自己的应用设计一个图标的过程中&ldquo;可以做的的和不要做的&rdquo;例子<br />
<table class="t_table" cellspacing="0" sizset="52" sizcache="8">
    <tbody sizset="52" sizcache="8">
        <tr sizset="52" sizcache="8">
            <td sizset="52" sizcache="8">Android启动器图标是...
            <ul sizset="52" sizcache="7">
                <li>现代的，简约的，不平坦的，有触感，和质感的</li>
                <li>面向前方和顶部明亮，整体而言，色彩在一定的色谱中</li>
            </ul>
            </td>
            <td sizset="54" sizcache="8">Android 启动器图标不是...
            <ul sizset="54" sizcache="7">
                <li>过时的，过分复杂，光滑的，平坦的</li>
                <li>旋转的, 剪裁不正的,过于深色的</li>
            </ul>
            </td>
        </tr>
    </tbody>
</table>
<img height="219" alt="" src="http://img.ucdchina.com/upload/snap/2010-07/0ecb2439bc1f6e987f2013d1ef5c03b0.png" width="600" style="cursor: pointer" /><strong>图 2.</strong> 启动器中&quot;做什么和别做什么&quot;的例子<br />
<br />
质感和颜色启动器的图标应该利用触觉，顶部照明，使用纹理材料。即使你的图标只是一个简单的形状，你应该尝试把它们当做真实世界的材料渲染。<br />
该平台的默认应用中启动器图标用了以下图3所示的材料。 你的图标可以使用这些材料也可以创建新的材料。<br />
Android 启动器图标经常包括由较小的形状组成一个较大的形状，并结合成一个中立的形状和一个中立的颜色。图标可能会使用中性色彩的组合，但保持较高的对比度。如果可能的话，每个图标不应该使用超过一个原色。<br />
启动器的图标应该使用一个又限制的调色板，包含一系列中立的颜色和原色。该图标不应该过分饱和。<br />
推荐的启动器图标调色板应用，如图4所示。你可以使用条侧板中的基本颜色和高亮元素。你可以使用白色到黑色垂直线性渐变叠加一起的调色板的颜色。这产生的印象是，光从顶部照射进来，且保持颜色的低饱和度。<br />
<img height="248" alt="" src="http://img.ucdchina.com/upload/snap/2010-07/c2fbe46f300b6df968250f4a4c0cec42.png" width="515" /><strong>图 3.</strong>你可以用它来创建你的图标的材料的例子.<br />
<br />
<img height="248" alt="" src="http://img.ucdchina.com/upload/snap/2010-07/b109dc3c26caf20f0cd5fe7631bf9dc3.png" width="515" /><strong>图.</strong> 从推荐调色盘中选出的基本和高亮颜色组合形成的材料的例子<br />
<br />
当你从简易的调色盘中取出一个高亮颜色组成材料时，你可以创造如图5所示的材料组成。为了帮助你开始，图标包（<a href="http://androidappdocs.appspot.com/guide/practices/ui_guidelines/icon_design.html#templatespack" target="_blank">icons pack</a>）包括一个Photoshop模板文件（Launcher-icon-template.psd），文件提供了默认的材料，颜色和梯度。 <br />
<img height="303" alt="" src="http://img.ucdchina.com/upload/snap/2010-07/c79b7d3617d16d3c149434c8fdaebdaa.png" width="523" /><strong>5.</strong> 推荐图标调色板.<br />
<br />
尺寸和位置启动器的图标应该使用不同的形状和形式，而且这些必须缩被缩放和定位来创建一致的视觉重量。<br />
图6展示了图标放置在各版本中的不同的方式。至于更详细的描述，就是为了制造一个一致的直觉质量，并允许加入阴影，你应该使图标比实际版本中的范围小一些。如果你的图标是方形或近方形，尺寸应该更小。<br />
&nbsp;</p>
<ul sizset="56" sizcache="7">
    <li>为全版本边界框显示为红色。</li>
    <li>推荐的实际图标边界框显示为蓝色。该图标框的大小比完整版中的尺寸更小，以便有空间包含阴影和特殊的图标处理。</li>
    <li>对于方形图标，推荐的边界框是橙色显示的。为正方形图标框比较小是因为要在两种类型的图表中建立同样的视觉重量。</li>
</ul>
<p>
<table class="t_table" cellspacing="0" sizset="59" sizcache="8">
    <tbody sizset="59" sizcache="8">
        <tr sizset="59" sizcache="8">
            <td sizset="59" sizcache="8">
            <ul class="litype_1" type="1" sizset="60" sizcache="8">
                <li sizset="60" sizcache="8">高密度屏幕(hdpi) 的图标尺寸:
                <ul class="litype_1" type="1" sizset="60" sizcache="7">
                    <li>全版本: 72 x 72 px</li>
                    <li>图标: 60 x 60 px</li>
                    <li>正方形图标: 56 x 56 px</li>
                </ul>
                </li>
            </ul>
            </td>
            <td><img height="108" alt="" src="http://img.ucdchina.com/upload/snap/2010-07/4a305add82320c78cf9b631818fe6739.png" width="433" /></td>
        </tr>
        <tr sizset="63" sizcache="8">
            <td sizset="63" sizcache="8">
            <ul class="litype_1" type="1" sizset="64" sizcache="8">
                <li sizset="64" sizcache="8">中密度屏幕(mdpi) 的图标尺寸:
                <ul class="litype_1" type="1" sizset="64" sizcache="7">
                    <li>全版本: 48 x 48 px</li>
                    <li>图标: 40 x 40 px</li>
                    <li>正方形图标: 38 x 38 px</li>
                </ul>
                </li>
            </ul>
            </td>
            <td><img height="80" alt="" src="http://img.ucdchina.com/upload/snap/2010-07/c07933fb1496e04ad64737d25648c7d3.png" width="410" /></td>
        </tr>
        <tr sizset="67" sizcache="8">
            <td sizset="67" sizcache="8">
            <ul class="litype_1" type="1" sizset="68" sizcache="8">
                <li sizset="68" sizcache="8">低密度屏幕(ldpi) 的图标尺寸:
                <ul class="litype_1" type="1" sizset="68" sizcache="7">
                    <li>全版本: 36 x 36 px</li>
                    <li>图标: 30 x 30 px</li>
                    <li>正方形图标: 28 x 28 px</li>
                </ul>
                </li>
            </ul>
            </td>
            <td><img height="64" alt="" src="http://img.ucdchina.com/upload/snap/2010-07/110136c8d11ffeacac4d409d2d9a4ff2.png" width="450" /><strong>图 6.</strong> 图标版本范围中图标的尺寸和位置.<br />
            &nbsp;</td>
        </tr>
    </tbody>
</table>
使用启动器图标模板Android的图标模板包2.0是一个包含默认图标的材料和颜色调色板的模板。该模板为psd格式，方便Photoshop或相似的图像编辑器编辑。<br />
To get started, fir要开始使用，首先下载 <a href="http://androidappdocs.appspot.com/shareables/icon_templates-v2.0.zip" target="_blank">Android的图标模板包2.0</a>.<br />
一旦你下载了模板包，解压缩，并在Adobe Photoshop或类似的图片编辑器中中打开 Launcher-icon-template.psd ，注意调色板的材料和颜色。您可以使用该模板创建一个启动器的图标作为起点。<br />
在创建您的图标之后，你可以按照以下规范添加阴影效果，作为你创造的合适的图片大小。<br />
<table class="t_table" cellspacing="0" sizset="71" sizcache="8">
    <tbody sizset="71" sizcache="8">
        <tr sizset="71" sizcache="8">
            <td><img height="460" alt="" src="http://img.ucdchina.com/upload/snap/2010-07/1602c24e7583a658ae7561072a07000c.png" width="600" /></td>
            <td sizset="71" sizcache="8">WVGA (高密度) 屏幕的阴影:<br />
            <ul class="litype_1" type="1" sizset="71" sizcache="7">
                <li>效果: 底部阴影</li>
                <li>颜色: #000000</li>
                <li>混合模式: 多重</li>
                <li>不透明度: 75%</li>
                <li>角度: 90&deg;</li>
                <li>距离: 2px</li>
                <li>扩展: 0%</li>
                <li>尺寸: 5px</li>
            </ul>
            </td>
        </tr>
        <tr sizset="79" sizcache="8">
            <td><img height="460" alt="" src="http://img.ucdchina.com/upload/snap/2010-07/507f67e51b756ec291f5d2bceca41526.png" width="600" /></td>
            <td sizset="79" sizcache="8">HVGA (中密度) 屏幕阴影:<br />
            <ul class="litype_1" type="1" sizset="79" sizcache="7">
                <li>效果: 底部阴影</li>
                <li>颜色: #000000</li>
                <li>混合模式: 叠加</li>
                <li>不透明度: 75%</li>
                <li>角度: 90&deg;</li>
                <li>距离: 1px</li>
                <li>扩展: 0%</li>
                <li>尺寸: 3px</li>
            </ul>
            </td>
        </tr>
    </tbody>
</table>
当添加了阴影，图标制作完成后，输出一个格式为PNG的透明文件，以确保您的图标在高密度屏显示大小为72 x72像素和在中密度屏显示大小为48 x48像素。关于为什么你应该为高，中，低密度的屏幕提供不同的启动器版本，参阅<a href="http://androidappdocs.appspot.com/guide/practices/screens_support.html" target="_blank">支持多种屏幕</a>.<br />
菜单图标<br />
菜单图标是一个图形元素，当用户按下菜单按钮时在向用户显示菜单，在弹出菜单里显示。他们是平面展示的。菜单图标元素不能表现为3D或者透视的。<br />
正如<a href="http://androidappdocs.appspot.com/guide/practices/ui_guidelines/icon_design.html#icon-sets" target="_blank">提供特定密度图标集</a>中所描述的,你应该为低，中，和高密度的屏幕制作相应的图标集。这可以确保你的图标在一系列安装你的应用的设备中正常显示。见<a href="http://androidappdocs.appspot.com/guide/practices/ui_guidelines/icon_design.html#screens-table" target="_blank">表1</a> 所建议的为每种密度所创造的图标尺寸。此外，请参阅<a href="http://androidappdocs.appspot.com/guide/practices/ui_guidelines/icon_design.html#design-tips" target="_blank">对设计师建议</a> 中关于如何使用多组图标。<br />
结构</p>
<ul sizset="87" sizcache="7">
    <li>为了保持一致性，所有的菜单图标必须使用相同的原调色板和相同的效果。欲了解更多信息，参阅<a href="http://androidappdocs.appspot.com/guide/practices/ui_guidelines/icon_design.html#menupalette" target="_blank">菜单图标颜色调色板</a> 。</li>
    <li>菜单图标应包括圆角，要保证逻辑正确。例如，在图7中，合理表现圆角的部分是房顶而不是建筑余下的部分。</li>
    <li>所有这个页面上的特定尺寸是建立在一个48x48像素的画板，6像素安全边栏的基础上的。</li>
    <li>图标菜单效果（外发光）在<a href="http://androidappdocs.appspot.com/guide/practices/ui_guidelines/icon_design.html#menulight" target="_blank">灯光，效果，阴影</a> 中被描述，它在必要时可以与6px安全边栏重叠。而基础形状必须始终留在安全边栏内。</li>
    <li><strong>最后的图形必须导出为一个透明的PNG文件。</strong></li>
    <li>在Adobe Photoshop中制作的菜单图标模板可以在图标模板包中得到。</li>
</ul>
<p>
<table class="t_table" cellspacing="0">
    <tbody>
        <tr>
            <td><img height="500" alt="" src="http://img.ucdchina.com/upload/snap/2010-07/fafe1f5dfcdddd010bdf08ff132c59e3.png" width="500" /></td>
            <td><strong>图 7.</strong><br />
            菜单图标中的安全栏和圆角 。 图标尺寸是48x48.<br />
            <br />
            &nbsp;</td>
        </tr>
    </tbody>
</table>
灯光，特效和阴影菜单图标是平的。轻微凹陷和一些其他特效，如下所示，可以创造纵深感。<br />
<table class="t_table" cellspacing="0">
    <tbody>
        <tr>
            <td><img height="354" alt="" src="http://img.ucdchina.com/upload/snap/2010-07/5fbe7563deaee0dbeb8d3f5f7fdefbd4.png" width="350" /></td>
            <td><strong>图 8.菜单图标的灯光，特效和阴影</strong>.<br />
            <table class="t_table" cellspacing="0">
                <tbody>
                    <tr>
                        <td><i>1.</i></td>
                        <td>前部:</td>
                        <td>从原色调色板中挑出颜色填充渐变</td>
                    </tr>
                    <tr>
                        <td><i>2.</i></td>
                        <td>内投影:</td>
                        <td>黑色 | 20 % 不透明度<br />
                        角度90&deg; | 距离 2px<br />
                        大小 2px</td>
                    </tr>
                    <tr>
                        <td><i>3.</i></td>
                        <td>外发光:</td>
                        <td>白色 | 55% 不透明度<br />
                        扩展 10% |大小 3px</td>
                    </tr>
                    <tr>
                        <td><i>5.</i></td>
                        <td>内斜角:</td>
                        <td>深度1%<br />
                        角度 90&deg; | 高度 10&deg;<br />
                        发光白色70%不透明度<br />
                        阴影黑色 25% 不透明度<br />
                        &nbsp;</td>
                    </tr>
                </tbody>
            </table>
            <br />
            <br />
            &nbsp;</td>
        </tr>
    </tbody>
</table>
<table class="t_table" cellspacing="0" sizset="93" sizcache="8">
    <tbody sizset="93" sizcache="8">
        <tr sizset="93" sizcache="8">
            <td>颜色调色盘
            <table class="t_table" cellspacing="0">
                <tbody>
                    <tr>
                        <td><img height="64" alt="" src="http://img.ucdchina.com/upload/snap/2010-07/d2b900c4de245935ea17bc7074b16f43.png" width="64" /></td>
                        <td>白色<br />
                        r 255 | g 255 | b 255<br />
                        用于外发光和斜面的高光。</td>
                    </tr>
                    <tr>
                        <td><img height="64" alt="" src="http://img.ucdchina.com/upload/snap/2010-07/4e4ce9bd10a8da23f0c2f7d8a28bcca6.png" width="64" /></td>
                        <td>渐变填充<br />
                        <i>1:&nbsp;&nbsp;</i>r 163 | g 163 | b 163<br />
                        <i>2:&nbsp;&nbsp;</i>r 120 | g 120 | b 120<br />
                        用作颜色填充。</td>
                    </tr>
                    <tr>
                        <td><img height="64" alt="" src="http://img.ucdchina.com/upload/snap/2010-07/65579882897ef1b0350bedb263c1f64f.png" width="64" /></td>
                        <td>黑色<br />
                        r 0 | g 0 | b 0<br />
                        用于内部阴影和斜面的阴影。</td>
                    </tr>
                </tbody>
            </table>
            </td>
            <td sizset="93" sizcache="8">步骤
            <ul class="litype_1" type="1" sizset="93" sizcache="7">
                <li>使用工具如Adobe Illustrator创建基本形状。</li>
                <li>导入到一个像Adobe Photoshop的工具，把它放置在48x48像素的透明的背景的图像上。注意安全栏。</li>
                <li>增加如图8所描述的效果。</li>
                <li>导出一个48x48像素的透明PNG格式的图标。</li>
            </ul>
            </td>
        </tr>
    </tbody>
</table>
&quot;做这些和不要做这些&quot;在为你的应用做菜单图标时，下面是一些&ldquo;做这些和不要做这些&rdquo;要考虑的例子。<br />
<img height="94" alt="" src="http://img.ucdchina.com/upload/snap/2010-07/48503b4636e7e02c8c461441b04a0866.png" width="522" />状态栏图标用来在状态栏中展示你的应用中的通知，他们与菜单图标非常相似，但是更加小，对比度更高。<br />
正如<a href="http://androidappdocs.appspot.com/guide/practices/ui_guidelines/icon_design.html#icon-sets" target="_blank">提供特定密度图标集</a>中所描述的，您应该为低，中和高密度的屏幕制作独立的图标集。这可以确保你的图标在一系列安装了你的应用的设备中显示正常。见<a href="http://androidappdocs.appspot.com/guide/practices/ui_guidelines/icon_design.html#screens-table" target="_blank">表</a>为每个密度屏幕所建议的尺寸。此外，请参阅<a href="http://androidappdocs.appspot.com/guide/practices/ui_guidelines/icon_design.html#design-tips" target="_blank">对设计师的建议</a>中关于如何创建图标集的描述。<br />
结构</p>
<ul sizset="97" sizcache="7">
    <li>圆角必须始终被应用到基础的形状中和状态栏图标细节中，如图9所示。</li>
    <li>所有这个页面上的特定尺寸是建立在一个25x25像素的画板，2像素安全边栏的基础上的。</li>
    <li>状态栏图标可以在必要时与安全栏左右重叠，但绝不能与安全栏的顶部和底部重叠。</li>
    <li><strong>最后的图形必须导出为一个透明的PNG文件。</strong></li>
    <li>在Adobe Photoshop中制作的菜单图标模板可以在图标模板包中得到。</li>
</ul>
<p>
<table class="t_table" cellspacing="0">
    <tbody>
        <tr>
            <td><img height="497" alt="" src="http://img.ucdchina.com/upload/snap/2010-07/f0cdf4e0b1d63daae8b7635271566902.png" width="500" /></td>
            <td><strong>图 9.</strong><br />
            状态栏图标中的安全栏和圆角 。 图标尺寸是25x25.<br />
            <br />
            &nbsp;</td>
        </tr>
    </tbody>
</table>
灯光，特效和阴影&nbsp;&nbsp;状态栏图标略有凹凸感的，高对比度的，绘制的图形可以加强对小尺寸的清晰度。<br />
<table class="t_table" cellspacing="0">
    <tbody>
        <tr>
            <td><img height="354" alt="" src="http://img.ucdchina.com/upload/snap/2010-07/388032a8f8bf2cdd288d633e5511ebc0.png" width="350" /></td>
            <td><strong>图 10. </strong>状态栏图标的灯光，特效和阴影.<br />
            <table class="t_table" cellspacing="0">
                <tbody>
                    <tr>
                        <td><i>1.</i></td>
                        <td>前部:</td>
                        <td>用原色板种颜色渐变填充</td>
                    </tr>
                    <tr>
                        <td><i>2.</i></td>
                        <td>内部斜角:</td>
                        <td>深度 100% | 方向 向下<br />
                        尺寸0px |角度 90&deg; |<br />
                        角度 30&deg;<br />
                        高光 白色 75% 不透明度<br />
                        阴影 黑色75% 不透明度</td>
                    </tr>
                    <tr>
                        <td><i>3.</i></td>
                        <td>细节:</td>
                        <td>白色</td>
                    </tr>
                    <tr>
                        <td><i>4.</i></td>
                        <td>缺失细节:</td>
                        <td>色板中灰色渐变<br />
                        + 内部斜角: 平滑 | 深度 1% | 方向向下| 大小 0px | 角度 117&deg; | <br />
                        海拔 42&deg; | 高光 白色70% | 无阴影</td>
                    </tr>
                </tbody>
            </table>
            <br />
            <br />
            &nbsp;</td>
        </tr>
    </tbody>
</table>
<table class="t_table" cellspacing="0" sizset="102" sizcache="8">
    <tbody sizset="102" sizcache="8">
        <tr sizset="102" sizcache="8">
            <td>颜色调色板只有状态栏图标相关的手机功能使用全彩色，其他所有状态栏图标应保持单色。
            <table class="t_table" cellspacing="0">
                <tbody>
                    <tr>
                        <td><img height="64" alt="" src="http://img.ucdchina.com/upload/snap/2010-07/374ec1abfb4fa8ff7ccaf68f53b2d471.png" width="64" /></td>
                        <td>白色<br />
                        r 255 | g 255 | b 255<br />
                        用于图标内部细节和斜面的高光。</td>
                    </tr>
                    <tr>
                        <td><img height="64" alt="" src="http://img.ucdchina.com/upload/snap/2010-07/d5c8bfc767bc4538bff0f3c1e7bd5c5b.png" width="64" /></td>
                        <td>灰色渐变<br />
                        <i>1:&nbsp;&nbsp;</i>r 169 | g 169 | b 169<br />
                        <i>2:&nbsp;&nbsp;</i>r 126 | g 126 | b 126<br />
                        用于图标内部缺失细节。</td>
                    </tr>
                    <tr>
                        <td><img height="64" alt="" src="http://img.ucdchina.com/upload/snap/2010-07/2fe1ea804d39de5b84f2de375643a623.png" width="64" /></td>
                        <td>填充渐变<br />
                        <i>1:&nbsp;&nbsp;</i>1 r 105 | g 105 | b 105<br />
                        <i>2:&nbsp;&nbsp;</i>r 10 | g 10 | b 10<br />
                        用于颜色填充.</td>
                    </tr>
                    <tr>
                        <td><img height="64" alt="" src="http://img.ucdchina.com/upload/snap/2010-07/91a40e451c17d406148053174958922d.png" width="64" /></td>
                        <td>黑色<br />
                        r 0 | g 0 | b 0<br />
                        用于斜面的阴影。</td>
                    </tr>
                </tbody>
            </table>
            </td>
            <td sizset="102" sizcache="8">步骤
            <ul class="litype_1" type="1" sizset="102" sizcache="7">
                <li>在Adobe Photoshop的以及类似的工具中，创建25x25像素的透明背景的基础形状的图像。考虑到安全边栏，保持上下2个像素的空白。</li>
                <li>增加如图9所示的圆角。</li>
                <li>增加如图10所示的灯光，特效和阴影。</li>
                <li>输出一个PNG格式的透明图标，大小为25x25 px。</li>
            </ul>
            </td>
        </tr>
    </tbody>
</table>
&quot;做这些和不要做这些&quot;在为你的应用做状态栏图标时，下面是一些&ldquo;做这些和不要做这些&rdquo;要考虑的例子。<br />
<img height="84" alt="" src="http://img.ucdchina.com/upload/snap/2010-07/00024d4164b82064e853bb2d4fc10c84.png" width="519" />标签图标是用来表示在一个多选项界面里的单独的标签元素的图形。每个标签图标有两种状态：未选中和选中。<br />
正如<a href="http://androidappdocs.appspot.com/guide/practices/ui_guidelines/icon_design.html#icon-sets" target="_blank">提供特定密度图标集中所描述的</a>,你应该为低，中，和高密度的屏幕制作相应的独立图标集。这可以确保你的图标在一系列安装你的应用的设备中正常显示。见<a href="http://androidappdocs.appspot.com/guide/practices/ui_guidelines/icon_design.html#screens-table" target="_blank">表1</a>所建议的为每种密度所创造的图标尺寸。此外，请参阅<a href="http://androidappdocs.appspot.com/guide/practices/ui_guidelines/icon_design.html#design-tips" target="_blank">对设计师的建议</a> 中关于如何使用多组图标。<br />
结构</p>
<ul sizset="106" sizcache="7">
    <li>未选定的标签图标和菜单图标具有相同的填充渐变和特效，但没有外部发光。</li>
    <li>被选择的标签图标，看上去像未选择的标签图标，但有一个暗淡的内部阴影，且和对话图标有着相同的前部渐变。</li>
    <li>标签图标有一个 1像素的安全边栏，且安全边栏只应该和抗混淆圆形的边缘重叠。</li>
    <li>此页面上指定的所有尺寸都基于一个大小为32x32像素的画板。在 Photoshop模板内，对边缘栏保持1像素的填充。</li>
    <li><strong>最后的图像必须导出为一个32x32像素的透明PNG文件。</strong></li>
    <li>在Adobe Photoshop制作的标签图标模板可以在标签模板包中得到。</li>
</ul>
<p>
<table class="t_table" cellspacing="0">
    <tbody>
        <tr>
            <td><img height="158" alt="" src="http://img.ucdchina.com/upload/snap/2010-07/1b5ea904d2677ce8a26678e44ce43fe6.png" width="158" /></td>
            <td><strong>图 11. </strong>未选中的标签图标的安全边栏和填充渐变。图标大小为32X32。<br />
            <br />
            &nbsp;</td>
        </tr>
        <tr>
            <td><img height="160" alt="" src="http://img.ucdchina.com/upload/snap/2010-07/706636fb27e3c6db7ae935c81b34b6fd.png" width="158" /></td>
            <td><strong>图 12. </strong>已选中的标签图标的安全边栏和填充渐变。图标大小为32X32。<br />
            <br />
            &nbsp;</td>
        </tr>
    </tbody>
</table>
未选中的标签图标灯光，特效和阴影未选中的标签图标 看上去像以选中的标签图标, 但是有一个微弱的内部阴影, 而且和对话图标有着相同的前部渐变。<br />
<table class="t_table" cellspacing="0">
    <tbody>
        <tr>
            <td><img height="354" alt="" src="http://img.ucdchina.com/upload/snap/2010-07/872495741c2356e2bdd4f77c1c5c9a51.png" width="350" /></td>
            <td><strong>图 13. </strong>未选中的标签图标的灯光，特效和阴影.<br />
            <table class="t_table" cellspacing="0">
                <tbody>
                    <tr>
                        <td><i>1.</i></td>
                        <td>前部:</td>
                        <td>渐变&nbsp;&nbsp;| 角度 90&deg;<br />
                        底部颜色: r 223 | g 223 | b 223<br />
                        顶部颜色: r 249 | g 249 | b 249<br />
                        底部颜色 位置: 0%<br />
                        顶部颜色位置: 75%</td>
                    </tr>
                    <tr>
                        <td><i>2.</i></td>
                        <td>内部投影:</td>
                        <td>黑色 | 10 % 不透明度 | 角度 90&deg; 距离 2px |大小 2px</td>
                    </tr>
                    <tr>
                        <td><i>3.</i></td>
                        <td>内斜面:</td>
                        <td>深度 1% | 方向 向下 | 大小 0px | 角度 90&deg; | 高度 10&deg;<br />
                        高光 白色 70% 不透明度<br />
                        阴影 黑色 25% 不透明度</td>
                    </tr>
                </tbody>
            </table>
            <br />
            <br />
            &nbsp;</td>
        </tr>
    </tbody>
</table>
<table class="t_table" cellspacing="0" sizset="112" sizcache="8">
    <tbody sizset="112" sizcache="8">
        <tr sizset="112" sizcache="8">
            <td sizset="112" sizcache="8">步骤
            <ul class="litype_1" type="1" sizset="112" sizcache="7">
                <li>用如Adobe Illustrator或类似的工具创建基本图形。</li>
                <li>导入到Adobe Photoshop或类似的工具中，把它在32x32像素，透明背景的图片中合适放置。</li>
                <li>如图13，用合适的滤镜增加特效</li>
                <li>把图标导出为一个32x32像素的PNG透明文件。</li>
            </ul>
            </td>
        </tr>
    </tbody>
</table>
被选择的标签图标已选择的标签图标和菜单图标具有相同的填充渐变和特效，但没有外部发光。<br />
<table class="t_table" cellspacing="0">
    <tbody>
        <tr>
            <td><img height="354" alt="" src="http://img.ucdchina.com/upload/snap/2010-07/6aefdd92cdcca274f4dbc392dcc86592.png" width="350" /></td>
            <td><strong>图 14. </strong>被选择的标签图标的灯光，特效和阴影.<br />
            <table class="t_table" cellspacing="0">
                <tbody>
                    <tr>
                        <td><i>1.</i></td>
                        <td>前部:</td>
                        <td>全渐变.</td>
                    </tr>
                    <tr>
                        <td><i>2.</i></td>
                        <td>内部投影:</td>
                        <td>黑色 | 20% 不透明度 | <br />
                        角度 90&deg; | 距离 2px | <br />
                        大小 2px</td>
                    </tr>
                    <tr>
                        <td><i>3.</i></td>
                        <td>内斜角:</td>
                        <td>深度 1% | 角度&nbsp;&nbsp;| 大小 0px | 角度 90&deg; | <br />
                        高度 10&deg;<br />
                        高光 白色 70% 不透明度<br />
                        阴影 黑色 25% 不透明度</td>
                    </tr>
                </tbody>
            </table>
            <br />
            <br />
            &nbsp;</td>
        </tr>
    </tbody>
</table>
<table class="t_table" cellspacing="0" sizset="116" sizcache="8">
    <tbody sizset="116" sizcache="8">
        <tr sizset="116" sizcache="8">
            <td>Color palette
            <table class="t_table" cellspacing="0">
                <tbody>
                    <tr>
                        <td><img height="64" alt="" src="http://img.ucdchina.com/upload/snap/2010-07/4e4ce9bd10a8da23f0c2f7d8a28bcca6.png" width="64" /></td>
                        <td>填充渐变<br />
                        <i>1:&nbsp;&nbsp;</i>r 163 | g 163 | b 163<br />
                        <i>2:&nbsp;&nbsp;</i>r 120 | g 120 | b 120<br />
                        在未选择的表现图表上填充颜色。</td>
                    </tr>
                </tbody>
            </table>
            </td>
            <td sizset="116" sizcache="8">步骤
            <ul class="litype_1" type="1" sizset="116" sizcache="7">
                <li>用如Adobe Illustrator或类似的工具创建基本图形。</li>
                <li>导入到Adobe Photoshop或类似的工具中，把它在32x32像素，透明背景的图片中合适放置。</li>
                <li>如图14，用合适的滤镜增加特效</li>
                <li>把图标导出为一个32x32像素的PNG透明文件。</li>
            </ul>
            </td>
        </tr>
    </tbody>
</table>
对话图标显示在弹出对话框中，并提示用户交互。为了在黑色背景中突出，他们用光线渐变和内部投影效果 .<br />
正如<a href="http://androidappdocs.appspot.com/guide/practices/ui_guidelines/icon_design.html#icon-sets" target="_blank">提供特定密度图标集中所描述的</a>,你应该为低，中，和高密度的屏幕制作相应的独立图标集。这可以确保你的图标在一系列安装你的应用的设备中正常显示。见<a href="http://androidappdocs.appspot.com/guide/practices/ui_guidelines/icon_design.html#screens-table" target="_blank">表1</a>所建议的为每种密度所创造的图标尺寸。此外，请参阅<a href="http://androidappdocs.appspot.com/guide/practices/ui_guidelines/icon_design.html#design-tips" target="_blank">对设计师的建议</a> 中关于如何使用多组图标。<br />
结构</p>
<ul sizset="120" sizcache="7">
    <li>对话图标有一个1 像素的安全边栏。基本图形必须在安全边栏内部合适放置, 但是抗混淆的圆形可以和安全边栏重叠。</li>
    <li>此页面上指定的所有尺寸都基于一个Adobe Photoshop中建立的，大小32x32像素的画板上的。在Phontoshop模板中，对边栏保持保持1像素的填充。</li>
    <li><strong>最后的图片必须导出为一个透明的PNG文件。</strong></li>
    <li>在Adobe Photoshop制作的对话图标模板可以在标签模板包中得到。</li>
</ul>
<p>
<table class="t_table" cellspacing="0">
    <tbody>
        <tr>
            <td><img height="498" alt="" src="http://img.ucdchina.com/upload/snap/2010-07/d4c3f9bd2c59d549de25d790b5564d04.png" width="500" /></td>
            <td><strong>图 15. </strong>对话图标安全边栏和填充渐变.图标大小 is 32x32像素.<br />
            <br />
            &nbsp;</td>
        </tr>
    </tbody>
</table>
灯光，特效和阴影对话图标 是平的且面向前的图片.为了在黑色背景中突出, 他们用了光线渐变和黑色投影。<br />
<table class="t_table" cellspacing="0">
    <tbody>
        <tr>
            <td><img height="354" alt="" src="http://img.ucdchina.com/upload/snap/2010-07/9816ba7e1719471fb4b6053aee6fdcb5.png" width="350" /></td>
            <td><strong>图 16. </strong>对话图标的灯光，特效和阴影.<br />
            <table class="t_table" cellspacing="0">
                <tbody>
                    <tr>
                        <td><i>1.</i></td>
                        <td>前部:</td>
                        <td>渐变叠加 | 角度&nbsp;&nbsp;90&deg;<br />
                        底部色彩: r 223 | g 223 | b 223<br />
                        顶部色彩: r 249 | g 249 | b 249<br />
                        底部色彩位置: 0%<br />
                        顶部色彩位置: 75%</td>
                    </tr>
                    <tr>
                        <td><i>2.</i></td>
                        <td>内部投影:</td>
                        <td>黑色 | 25% 不透明度 | <br />
                        角度 -90&deg; | 距离 1px | 大小 0px</td>
                    </tr>
                </tbody>
            </table>
            <br />
            <br />
            &nbsp;</td>
        </tr>
    </tbody>
</table>
<table class="t_table" cellspacing="0" sizset="124" sizcache="8">
    <tbody sizset="124" sizcache="8">
        <tr sizset="124" sizcache="8">
            <td sizset="124" sizcache="8">步骤
            <ul class="litype_1" type="1" sizset="124" sizcache="7">
                <li>用如Adobe Illustrator或类似的工具创建基本图形。</li>
                <li>导入到Adobe Photoshop或类似的工具中，把它在32x32像素，透明背景的图片中合适放置。</li>
                <li>如图16，用合适的滤镜增加特效</li>
                <li>把图标导出为一个32x32像素的PNG透明文件。</li>
            </ul>
            </td>
        </tr>
    </tbody>
</table>
列表视图图标看起来像 对话图标， 但是他们用了一个光线来源于物体上方的内部投影特效。他们也只用在<a href="http://androidappdocs.appspot.com/reference/android/widget/ListView.html" target="_blank">列表视图</a>中。在包括Android市场应用主屏和在地图应用中的导向屏中使用。<br />
正如<a href="http://androidappdocs.appspot.com/guide/practices/ui_guidelines/icon_design.html#icon-sets" target="_blank">提供特定密度图标集中所描述的</a>,你应该为低，中，和高密度的屏幕制作相应的独立图标集。这可以确保你的图标在一系列安装你的应用的设备中正常显示。见<a href="http://androidappdocs.appspot.com/guide/practices/ui_guidelines/icon_design.html#screens-table" target="_blank">表1</a>所建议的为每种密度所创造的图标尺寸。此外，请参阅<a href="http://androidappdocs.appspot.com/guide/practices/ui_guidelines/icon_design.html#design-tips" target="_blank">对设计师的建议</a> 中关于如何使用多组图标。<br />
结构</p>
<ul sizset="128" sizcache="7">
    <li>列表视图图标通常有一个1 像素的安全边栏。抗混淆的圆形可以和安全边栏重叠。</li>
    <li>此页面上指定的所有尺寸都基于一个Adobe Photoshop中建立的，大小32x32像素的画板上的。在Phontoshop模板中，对边栏保持保持1像素的填充。</li>
    <li><strong>最后的图片必须导出为一个透明的PNG文件。</strong></li>
    <li>在Adobe Photoshop制作的列表视图图标模板可以在标签模板包中得到。</li>
</ul>
<p>
<table class="t_table" cellspacing="0">
    <tbody>
        <tr>
            <td><img height="498" alt="" src="http://img.ucdchina.com/upload/snap/2010-07/97c133cc091c0e23719a053f5a872325.png" width="500" /></td>
            <td><strong>图 17. </strong>列表视图图标的安全边栏和填充渐变. 图标大小 is 32x32。<br />
            <br />
            &nbsp;</td>
        </tr>
    </tbody>
</table>
灯光，特效和阴影列表视图图标是平的且面向前的图片.为了在黑色背景中突出, 他们用了光线渐变和黑色投影。<br />
<table class="t_table" cellspacing="0">
    <tbody>
        <tr>
            <td><img height="354" alt="" src="http://img.ucdchina.com/upload/snap/2010-07/a8c2ab1411c5747dd18b0fbe0952c617.png" width="350" /></td>
            <td><strong>图 18. </strong>列表视图图标的灯光，特效和阴影.<br />
            <table class="t_table" cellspacing="0">
                <tbody>
                    <tr>
                        <td><i>1.</i></td>
                        <td>内部投影：</td>
                        <td>黑色 | 57 % 不透明度 | 角度 120&deg; | 混合模式 正常 | 距离 1px | 大小 1px</td>
                        <td><br />
                        &nbsp;</td>
                    </tr>
                    <tr>
                        <td><i>2.</i></td>
                        <td>背景:</td>
                        <td>黑色 | 标准系统颜色<br />
                        这些图标只在列表视图中使用。</td>
                    </tr>
                    <tr>
                        <td>注意: 列表视图图标在 Photoshop中32x32像素的画板中放置，没有安全边栏。</td>
                    </tr>
                </tbody>
            </table>
            <br />
            <br />
            &nbsp;</td>
        </tr>
    </tbody>
</table>
<table class="t_table" cellspacing="0" sizset="132" sizcache="8">
    <tbody sizset="132" sizcache="8">
        <tr sizset="132" sizcache="8">
            <td sizset="132" sizcache="8">步骤
            <ul class="litype_1" type="1" sizset="132" sizcache="7">
                <li>如图18，用合适的滤镜增加特效</li>
                <li>把图标导出为一个32x32像素的PNG透明文件。</li>
                <li>用如Adobe Illustrator或类似的工具创建基本图形。</li>
                <li>导入到Adobe Photoshop或类似的工具中，把它在32x32像素，透明背景的图片中合适放置。</li>
            </ul>
            </td>
        </tr>
    </tbody>
</table>
这里有一些提示，在你为你的应用创建图标或其他可绘制版本的时候有用。这些提示假设您使用的是Photoshop或类似的光栅图像编辑程序。<br />
用常用的命名习惯为图标版本命名尝试命名文件，当他们按照字母排序的时候，有关的版本将会在一个目录内聚集在一起。特别是它有助于为每个图标类型的使用共同的前缀。 例如:<br />
<table class="t_table" cellspacing="0">
    <tbody>
        <tr>
            <td>版本类型</td>
            <td>前缀</td>
            <td>例子<br />
            &nbsp;</td>
        </tr>
        <tr>
            <td>图标<br />
            &nbsp;</td>
            <td>ic_</td>
            <td>ic_star.png</td>
        </tr>
        <tr>
            <td>发射器图标<br />
            &nbsp;</td>
            <td>ic_launcher</td>
            <td>ic_launcher_calendar.png</td>
        </tr>
        <tr>
            <td>菜单图标</td>
            <td>ic_menu</td>
            <td>ic_menu_archive.png</td>
        </tr>
        <tr>
            <td>状态栏</td>
            <td>ic_stat_sys or ic_stat_notify</td>
            <td>ic_stat_notify_msg.png</td>
        </tr>
        <tr>
            <td>标签图标</td>
            <td>ic_tab</td>
            <td>ic_tab_recent.png</td>
        </tr>
        <tr>
            <td>对话图标</td>
            <td>ic_dialog</td>
            <td>ic_dialog_info.png</td>
        </tr>
    </tbody>
</table>
请注意，你不需要使用任何类型的共享前缀&mdash; 这样做只是为了您的方便。<br />
为制造多密度版本图标，建立一个空间储存文件为不同屏幕密度发展多个版本集意味着制作文件的多个尺寸副本。为了保持文件多个副本的安全和更容易被发现，我们建议您在您的工作空间创建一个目录结构，来组织文件版本。例如:<br />
assets/...&nbsp; &nbsp;&nbsp;&nbsp;ldpi/...&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;_pre_production/...<br />
<br />
<i>working_file</i>.psd <br />
<i>finished_asset</i>.png&nbsp; &nbsp;&nbsp;&nbsp;mdpi/...&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;_pre_production/...<br />
<i>working_file</i>.psd <br />
<i>finished_asset</i>.png&nbsp; &nbsp;&nbsp;&nbsp;hdpi/...&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;_pre_production/...<br />
<i>working_file</i>.psd <br />
<i>finished_asset</i>.png这种结构与特定密度结构相同，你可以在你的应用源文件中存储最终的版本。因为你的工作空间的结构与应用的结构类似，您可以迅速确定哪些版本应该复制到每个应用源文件目录下。为不同密度制作的独立版本可以使你根据密度检测不同的文件名，这非常重要，因为为不同密度制作的对应的版本必须有同样的文件名。<br />
为了做比较，下面是一个典型的应用资源的目录结构：<br />
res/...<br />
&nbsp; &nbsp; drawable-ldpi/...<br />
<i>finished_asset</i>.png&nbsp; &nbsp;&nbsp;&nbsp;drawable-mdpi/...<br />
<i>finished_asset</i>.png&nbsp; &nbsp;&nbsp;&nbsp;drawable-hdpi/...<br />
<i>finished_asset</i>.png首先制作中密度版本r.由于中密度是Android的基线，因此你的设计工作应该从制作中密度版本开始。见上面的<a href="http://androidappdocs.appspot.com/guide/practices/ui_guidelines/icon_design.html#screens-table" target="_blank">表 1</a>，为不同图标类型的实际像素尺寸。如果可能，使用矢量图形或在Photoshop建立路径，使其更容易修改版本尺寸。<br />
<br />
<br />
&nbsp;</p>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.raymod.com/article/yx/109.htm" /> 
	  <id>http://www.raymod.com/default.asp?id=109</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[手机产品设计的禁忌]]></title>
	  <author>
		 <name>raymond</name>
		 <uri>http://www.raymod.com/</uri>
		 <email>ray@zq.gd</email>
	  </author>
	  <category term="" scheme="http://www.raymod.com/default.asp?cateID=3" label="策划" /> 
	  <updated>2012-05-16T18:45:09+08:00</updated>
	  <published>2012-05-16T18:45:09+08:00</published>
		  <summary type="html"><![CDATA[你知道手机UI设计的禁忌吗?<br/><img src="http://www.raymod.com/attachments/month_1205/p201251618376.jpg" border="0" alt=""/><br/>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.raymod.com/article/ck/108.htm" /> 
	  <id>http://www.raymod.com/default.asp?id=108</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[国内类Pinterest网站一览 Pinterest网站谁会笑到最后]]></title>
	  <author>
		 <name>raymond</name>
		 <uri>http://www.raymod.com/</uri>
		 <email>ray@zq.gd</email>
	  </author>
	  <category term="" scheme="http://www.raymod.com/default.asp?cateID=3" label="策划" /> 
	  <updated>2012-04-18T19:45:59+08:00</updated>
	  <published>2012-04-18T19:45:59+08:00</published>
		  <summary type="html"><![CDATA[　　题记：Pinterest名 称由Pin（图钉）+Interest（兴趣）组成，寓意为把自己感兴趣的东西(图片)用图钉钉在钉板（PinBoard）上，让用户不断发现新图片。 Pinterest页面底端自动加载无需翻页功能，让用户不断发现新图片。为用户提供在线收藏和分享Pinterest视觉艺术图片的服务。 <br/><br/> <br/>国内类pinterest一览 <br/><img src="http://www.raymod.com/attachments/month_1204/12012418194543.jpg" border="0" alt=""/><br/><br/><br/>只用了一年的时间，Pinterest一跃成为仅次于TwITter和Facebook的第三大社交网站，而在这股发展潮流的影响之下，国内的网站也纷纷开始跟风，要么建设新的，要么就是在网站下开始Pinterest类型的栏目，到罗宾发稿为止，已经统计国内有30多家类Pinterest模式的网站。那么Pinterest网站是不是真的能够取得成功呢？Pinterest网站是不是也和团购网站一样，最后会有一个大浪淘金的过程？这些问题就让我们拭目以待了。 <br/>本文主要分析Pinterest红火的原因<br/>通过国外对于Pinterest网站的数据分析。我们可以看到从去年9月份到今年2月份，Pinterest新用户人数增加了886%，以每月53% 的速度增长。Pinterest网站的用户平均每天花费在网站上的时间仅仅98分钟，相对于facebook的7小时，tumblr的2.5小时有很大的 差距。是什么原因让Pinterest让人如此痴迷呢？ <br/><br/>简单的设计 <br/>　　简单的设计，方便的使用是Pinterest的特点，用户在收集信息中所需要花费的时间变得非常的少，网站的页面经过了精心的布局，只看到最为 主要的信息。而信息收集的简单也造成了Pinterest网站中图片以及内容制造的速度，这样就可以有一个良性的循环。在Pinterest中，你可以随 心所欲的分享自己想要分享的内容，而不用担心其他的问题。 <br/><br/>便捷的使用 <br/>　　一个插件就可以发表想要发表的内容，这在互联网上是一个伟大的创新，随时随地就可以发表，而不用频繁的登陆，在浏览网页的时候看到喜欢的就可以轻松分享。这样简单的使用方式也是Pinterest赢得很多人喜欢的原因。 <br/><br/><br/><br/>Pinterest的社交性 <br/>　　虽然Pinterest仅仅是一个图片分享网站，但是却又有粉丝的概念，分享其他人想要看到的页面，你就可以收获更多的粉丝，那样的话你就更有兴趣去发布漂亮的图片了，这又是一个良好的循环。任何一个社交性质网站都拥有的激励模式。 <br/><br/><br/>Pinterest类网站在中国的发展 <br/>　　现在国内的Pinterest还很少有比较清晰的发展模式，虽然也有诸如蘑菇街等网站通过淘宝客等模式来获取盈利，但是整体上来 看，Pinterest还没有像电子商务发展的大趋势，看现在这30多家Pinterest网站，基本上是集中在综合分享上，也就是说用户可以随意分享自 己看到的任何内容，而专业性的Pinterest分享也仅仅数家，比如零食控和idsoo。山寨一直是国内互联网的主流，现在的这些网站也仅仅是在走模仿 的道路，但是单纯的模仿却无法把企业做大，虽然Pinterest有着发展的优势，但是如果没有创新的话，势必会倒在发展的过程中，或者是被其他 Pinterest网站取代。 <br/><br/><br/>PS：Pinterest类网站和团购网站其实有共同之处，那就是技术要求不高，入门的门槛非常的低，但是需要极高的运营能力，不然的话很难真正的笑到最后。同质化的竞争模式，不仅仅是拥有产品就可以的，还需要有庞大的用户以及良好的运营模式。<br/>PS:本文图片中的类Pinterest网站为罗宾收集，某些网站可能未被统计到，欢迎各位提供信息，诸如当当网的Pinterest平台何时启用。 ]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.raymod.com/article/ck/107.htm" /> 
	  <id>http://www.raymod.com/default.asp?id=107</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[中国在线旅游行业分布图]]></title>
	  <author>
		 <name>raymond</name>
		 <uri>http://www.raymod.com/</uri>
		 <email>ray@zq.gd</email>
	  </author>
	  <category term="" scheme="http://www.raymod.com/default.asp?cateID=6" label="营销" /> 
	  <updated>2012-03-26T07:22:14+08:00</updated>
	  <published>2012-03-26T07:22:14+08:00</published>
		  <summary type="html"><![CDATA[<p>internet2share整理：中国在线旅游行业分布图</p>
<p><img alt="" src="http://www.raymod.com/attachments/month_1203/d201232672130.jpg" /></p>
<p>&nbsp;</p>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.raymod.com/article/yx/106.htm" /> 
	  <id>http://www.raymod.com/default.asp?id=106</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[iOS App的图标，启动画面及其它]]></title>
	  <author>
		 <name>raymond</name>
		 <uri>http://www.raymod.com/</uri>
		 <email>ray@zq.gd</email>
	  </author>
	  <category term="" scheme="http://www.raymod.com/default.asp?cateID=3" label="策划" /> 
	  <updated>2012-03-18T20:02:01+08:00</updated>
	  <published>2012-03-18T20:02:01+08:00</published>
		  <summary type="html"><![CDATA[<p style="border-top-width: 0px; padding-right: 10px; padding-left: 0px; border-left-width: 0px; font-size: 20px; border-bottom-width: 0px; padding-bottom: 0px; margin: 1em 0px; vertical-align: baseline; color: #716e37; line-height: 25px; padding-top: 0px; background-color: transparent; text-align: left; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">图标的圆角和光晕效果</p>
<p style="border-top-width: 0px; padding-right: 10px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px 0px 1em; vertical-align: baseline; text-indent: 2em; padding-top: 0px; background-color: transparent; text-align: left; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial"><strong style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; font-weight: bold; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px; vertical-align: baseline; padding-top: 0px; background-color: transparent; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">圆角效果。</strong>图标的圆角效果是系统自动加上的，我们不能控制。这也是为什么我们看到的每个图标，其圆角效果是完全相同的。</p>
<p style="border-top-width: 0px; padding-right: 10px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px 0px 1em; vertical-align: baseline; text-indent: 2em; padding-top: 0px; background-color: transparent; text-align: left; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial"><strong style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; font-weight: bold; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px; vertical-align: baseline; padding-top: 0px; background-color: transparent; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">光晕效果。</strong>光晕效果也是系统加上的，和&ldquo;圆角&rdquo;不同的是，光晕效果是一个可选项。我们可以通过设置app的光晕参数（UIPrerenderedIcon），告诉系统是否要为我们的图标打上光晕效果。</p>
<p style="border-top-width: 0px; padding-right: 10px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px 0px 1em; vertical-align: baseline; text-indent: 2em; padding-top: 0px; background-color: transparent; text-align: left; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">总结：1）设计图标时请记得，图标的圆角效果是系统自动加上的，且是我们无法控制的。 2）设计图标前先决定，是否要使用系统内建的&ldquo;光晕效果&rdquo;。</p>
<p style="border-top-width: 0px; padding-right: 10px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px 0px 1em; vertical-align: baseline; text-indent: 2em; padding-top: 0px; background-color: transparent; text-align: left; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">每个图标都有相同的圆角。左边的两个图标有光晕效果，右边的两个没有。<br />
<a href="http://www.xiaweipin.com/wp-content/uploads/2011/04/icon.png" style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; padding-bottom: 0px; margin: 0px; vertical-align: baseline; color: #773100; padding-top: 0px; border-bottom: #773100 1px dotted; background-color: transparent; border-right-width: 0px; text-decoration: none; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial"><img title="圆角和光晕效果" height="67" alt="" src="http://www.xiaweipin.com/wp-content/uploads/2011/04/icon-300x67.png" width="300" border="0" style="border-right: 1px solid; padding-right: 7px; border-top: 1px solid; display: block; padding-left: 7px; float: none; padding-bottom: 7px; margin: 5px auto 0.5em; vertical-align: baseline; border-left: 1px solid; padding-top: 7px; border-bottom: 1px solid; background-color: #d2d0ad; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial" /></a></p>
<p style="border-top-width: 0px; padding-right: 10px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px 0px 1em; vertical-align: baseline; text-indent: 2em; padding-top: 0px; background-color: transparent; text-align: left; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial"><a style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; background-image: url(http://www.cnblogs.com/CuteSoft_Client/CuteEditor/Load.ashx?type=image&amp;file=anchor.gif); padding-bottom: 0px; margin: 0px; vertical-align: baseline; width: 20px; color: rgb(119,49,0); text-indent: 20px; padding-top: 0px; border-bottom: rgb(119,49,0) 1px dotted; height: 20px; background-color: transparent; border-right-width: 0px; text-decoration: none; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial" name="launchimage"></a></p>
<p style="border-top-width: 0px; padding-right: 10px; padding-left: 0px; border-left-width: 0px; font-size: 20px; border-bottom-width: 0px; padding-bottom: 0px; margin: 1em 0px; vertical-align: baseline; color: #716e37; line-height: 25px; padding-top: 0px; background-color: transparent; text-align: left; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">启动画面</p>
<p style="border-top-width: 0px; padding-right: 10px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px 0px 1em; vertical-align: baseline; text-indent: 2em; padding-top: 0px; background-color: transparent; text-align: left; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">我们可以为app设置启动画面，以便在app启动的时候显示。苹果在其开发文档中，很明确地表示：启动画面的作用是给使用者一种错觉，一种app启动很快速的错觉。即，启动画面的初衷不是为了给用户某种&ldquo;视觉上的冲击&rdquo;。所以，苹果建议开发者使用app的&ldquo;空白&rdquo;界面作为启动画面。苹果自己的app就是这样做的。如果我们无视这种约定，而是使用和app界面完全无关的&ldquo;插画&rdquo;作为启动画面（很多app都是这样），那么一般情况下，会有&ldquo;地摊货&rdquo;的嫌疑。虽然大多数的普通用户不清楚启动画面&ldquo;应该&rdquo;是什么样子：或许用户会喜欢有&ldquo;视觉冲击力的&rdquo;插画；或许用户会奇怪为何到了4月，启动画面却仍旧是春节的主题；又或许用户什么感觉也没有。如果一定要使用插画，那么不妨先回答这样一个问题：考虑到苹果开发的app，其启动画面使用的都是朴素的&ldquo;空白&rdquo;界，那么我们的app是否有足够充分的理由，来支持使用插画呢？</p>
<p style="border-top-width: 0px; padding-right: 10px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px 0px 1em; vertical-align: baseline; text-indent: 2em; padding-top: 0px; background-color: transparent; text-align: left; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">如果要让启动画面漂亮，我们可以先让app的界面漂亮；App的界面漂亮，那app的&ldquo;空白&rdquo;界面也就漂亮；App的&ldquo;空白&rdquo;界面漂亮，启动画面也就漂亮了。</p>
<p style="border-top-width: 0px; padding-right: 10px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px 0px 1em; vertical-align: baseline; text-indent: 2em; padding-top: 0px; background-color: transparent; text-align: left; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">系统自带的&ldquo;时钟&rdquo;app。第一张是启动画面：使用的是app的&ldquo;空白&rdquo;界面。第二张是app运行时的截图。<br />
<a href="http://www.xiaweipin.com/wp-content/uploads/2011/04/photo-21.png" style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; padding-bottom: 0px; margin: 0px; vertical-align: baseline; color: #773100; padding-top: 0px; border-bottom: #773100 1px dotted; background-color: transparent; border-right-width: 0px; text-decoration: none; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial"><img title="时钟" height="300" alt="" src="http://www.xiaweipin.com/wp-content/uploads/2011/04/photo-21-200x300.png" width="200" border="0" style="border-right: 1px solid; padding-right: 7px; border-top: 1px solid; display: block; padding-left: 7px; float: none; padding-bottom: 7px; margin: 5px auto 0.5em; vertical-align: baseline; border-left: 1px solid; padding-top: 7px; border-bottom: 1px solid; background-color: #d2d0ad; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial" /></a></p>
<p style="border-top-width: 0px; padding-right: 10px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px 0px 1em; vertical-align: baseline; text-indent: 2em; padding-top: 0px; background-color: transparent; text-align: left; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial"><a href="http://www.xiaweipin.com/wp-content/uploads/2011/04/%E7%85%A7%E7%89%87.png" style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; padding-bottom: 0px; margin: 0px; vertical-align: baseline; color: #773100; padding-top: 0px; border-bottom: #773100 1px dotted; background-color: transparent; border-right-width: 0px; text-decoration: none; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial"><img title="时钟2" height="300" alt="" src="http://www.xiaweipin.com/wp-content/uploads/2011/04/%E7%85%A7%E7%89%87-200x300.png" width="200" border="0" style="border-right: 1px solid; padding-right: 7px; border-top: 1px solid; display: block; padding-left: 7px; float: none; padding-bottom: 7px; margin: 5px auto 0.5em; vertical-align: baseline; border-left: 1px solid; padding-top: 7px; border-bottom: 1px solid; background-color: #d2d0ad; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial" /></a></p>
<p style="border-top-width: 0px; padding-right: 10px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px 0px 1em; vertical-align: baseline; text-indent: 2em; padding-top: 0px; background-color: transparent; text-align: left; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">App的界面漂亮 ＝ App的&ldquo;空白&rdquo;界面漂亮，启动画面也就自然漂亮。比如，Tweetbot的启动画面。<br />
<a href="http://www.xiaweipin.com/wp-content/uploads/2011/04/photo-61.png" style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; padding-bottom: 0px; margin: 0px; vertical-align: baseline; color: #773100; padding-top: 0px; border-bottom: #773100 1px dotted; background-color: transparent; border-right-width: 0px; text-decoration: none; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial"><img title="tweetbot" height="300" alt="" src="http://www.xiaweipin.com/wp-content/uploads/2011/04/photo-61-199x300.png" width="199" border="0" style="border-right: 1px solid; padding-right: 7px; border-top: 1px solid; display: block; padding-left: 7px; float: none; padding-bottom: 7px; margin: 5px auto 0.5em; vertical-align: baseline; border-left: 1px solid; padding-top: 7px; border-bottom: 1px solid; background-color: #d2d0ad; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial" /></a></p>
<p style="border-top-width: 0px; padding-right: 10px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px 0px 1em; vertical-align: baseline; text-indent: 2em; padding-top: 0px; background-color: transparent; text-align: left; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial"><a style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; background-image: url(http://www.cnblogs.com/CuteSoft_Client/CuteEditor/Load.ashx?type=image&amp;file=anchor.gif); padding-bottom: 0px; margin: 0px; vertical-align: baseline; width: 20px; color: rgb(119,49,0); text-indent: 20px; padding-top: 0px; border-bottom: rgb(119,49,0) 1px dotted; height: 20px; background-color: transparent; border-right-width: 0px; text-decoration: none; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial" name="retina"></a></p>
<p style="border-top-width: 0px; padding-right: 10px; padding-left: 0px; border-left-width: 0px; font-size: 20px; border-bottom-width: 0px; padding-bottom: 0px; margin: 1em 0px; vertical-align: baseline; color: #716e37; line-height: 25px; padding-top: 0px; background-color: transparent; text-align: left; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">Retina</p>
<p style="border-top-width: 0px; padding-right: 10px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px 0px 1em; vertical-align: baseline; text-indent: 2em; padding-top: 0px; background-color: transparent; text-align: left; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">iPhone 4和iPod Touch 4有一个新的特性：在屏幕尺寸不变的前提下，分辨率提升一倍（320 x 480 =&gt; 640 x 960）。苹果将这个特性命名为Retina。<br />
<a href="http://www.apple.com.cn/iphone/features/retina-display.html" style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; padding-bottom: 0px; margin: 0px; vertical-align: baseline; color: #773100; padding-top: 0px; border-bottom: #773100 1px dotted; background-color: transparent; border-right-width: 0px; text-decoration: none; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">用苹果的话讲：</a></p>
<blockquote style="border-top-width: 0px; padding-right: 3em; padding-left: 3em; border-bottom-width: 0px; padding-bottom: 0px; margin: 1.5em 0.2em; vertical-align: baseline; border-left: #b9b9b9 1px dotted; color: #646454; line-height: 21px; padding-top: 0px; font-style: italic; background-color: transparent; border-right-width: 0px; outline-width: 0px; outline-style: initial; outline-color: initial; quotes: none">
<p style="border-top-width: 0px; padding-right: 10px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px 0px 1em; vertical-align: baseline; padding-top: 0px; background-color: transparent; text-align: justify; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">Retina显示屏的超高像素密度已超过人眼能分辨的范围。</p>
</blockquote>
<p style="border-top-width: 0px; padding-right: 10px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px 0px 1em; vertical-align: baseline; text-indent: 2em; padding-top: 0px; background-color: transparent; text-align: left; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">Retina对图像设计（图标、启动画面和其它所有像素有关的东西）有什么影响呢？如果我们的app要支持Retina，就要提供高分辨率的（宽x2，高x2）的图片。同时，为了支持没有Retina的设备，仍旧要准备低分辨率的版本。换言之，我们要准备两套图。</p>
<p style="border-top-width: 0px; padding-right: 10px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px 0px 1em; vertical-align: baseline; text-indent: 2em; padding-top: 0px; background-color: transparent; text-align: left; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">针对不同分辨率的图片，苹果规定了一个命名规范：假如一个普通分辨率的图片，文件名是&ldquo;abc.png&rdquo;，那么与其对应的高分辨率的文件名就应该是&ldquo;abc@2x.png&rdquo;，多了&ldquo;@2x&rdquo;。</p>
<p style="border-top-width: 0px; padding-right: 10px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px 0px 1em; vertical-align: baseline; text-indent: 2em; padding-top: 0px; background-color: transparent; text-align: left; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">举一个例子：</p>
<p style="border-top-width: 0px; padding-right: 10px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px 0px 1em; vertical-align: baseline; text-indent: 2em; padding-top: 0px; background-color: transparent; text-align: left; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">Icon.png<br />
<a href="http://www.xiaweipin.com/wp-content/uploads/2011/04/Icon.png" style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; padding-bottom: 0px; margin: 0px; vertical-align: baseline; color: #773100; padding-top: 0px; border-bottom: #773100 1px dotted; background-color: transparent; border-right-width: 0px; text-decoration: none; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial"><img title="Icon" height="57" alt="" src="http://www.xiaweipin.com/wp-content/uploads/2011/04/Icon.png" width="57" border="0" style="border-right: 1px solid; padding-right: 7px; border-top: 1px solid; display: block; padding-left: 7px; float: none; padding-bottom: 7px; margin: 5px auto 0.5em; vertical-align: baseline; border-left: 1px solid; padding-top: 7px; border-bottom: 1px solid; background-color: #d2d0ad; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial" /></a></p>
<p style="border-top-width: 0px; padding-right: 10px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px 0px 1em; vertical-align: baseline; text-indent: 2em; padding-top: 0px; background-color: transparent; text-align: left; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">Icon@2x.png<br />
<a href="http://www.xiaweipin.com/wp-content/uploads/2011/04/Icon@2x.png" style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; padding-bottom: 0px; margin: 0px; vertical-align: baseline; color: #773100; padding-top: 0px; border-bottom: #773100 1px dotted; background-color: transparent; border-right-width: 0px; text-decoration: none; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial"><img title="Icon@2x" height="114" alt="" src="http://www.xiaweipin.com/wp-content/uploads/2011/04/Icon@2x.png" width="114" border="0" style="border-right: 1px solid; padding-right: 7px; border-top: 1px solid; display: block; padding-left: 7px; float: none; padding-bottom: 7px; margin: 5px auto 0.5em; vertical-align: baseline; border-left: 1px solid; padding-top: 7px; border-bottom: 1px solid; background-color: #d2d0ad; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial" /></a></p>
<p style="border-top-width: 0px; padding-right: 10px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px 0px 1em; vertical-align: baseline; text-indent: 2em; padding-top: 0px; background-color: transparent; text-align: left; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">这里需要注意的是，虽然在浏览器中，第二张图片的面积是第一张的4倍，但是在支持Retina的iPhone中，显示的大小是一样的。</p>
<p style="border-top-width: 0px; padding-right: 10px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px 0px 1em; vertical-align: baseline; text-indent: 2em; padding-top: 0px; background-color: transparent; text-align: left; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial"><a style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; background-image: url(http://www.cnblogs.com/CuteSoft_Client/CuteEditor/Load.ashx?type=image&amp;file=anchor.gif); padding-bottom: 0px; margin: 0px; vertical-align: baseline; width: 20px; color: rgb(119,49,0); text-indent: 20px; padding-top: 0px; border-bottom: rgb(119,49,0) 1px dotted; height: 20px; background-color: transparent; border-right-width: 0px; text-decoration: none; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial" name="formatandsize"></a></p>
<p style="border-top-width: 0px; padding-right: 10px; padding-left: 0px; border-left-width: 0px; font-size: 20px; border-bottom-width: 0px; padding-bottom: 0px; margin: 1em 0px; vertical-align: baseline; color: #716e37; line-height: 25px; padding-top: 0px; background-color: transparent; text-align: left; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">格式和尺寸</p>
<p style="border-top-width: 0px; padding-right: 10px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px 0px 1em; vertical-align: baseline; text-indent: 2em; padding-top: 0px; background-color: transparent; text-align: left; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial"><a style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; background-image: url(http://www.cnblogs.com/CuteSoft_Client/CuteEditor/Load.ashx?type=image&amp;file=anchor.gif); padding-bottom: 0px; margin: 0px; vertical-align: baseline; width: 20px; color: rgb(119,49,0); text-indent: 20px; padding-top: 0px; border-bottom: rgb(119,49,0) 1px dotted; height: 20px; background-color: transparent; border-right-width: 0px; text-decoration: none; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial" name="format"></a>图标和启动画面的格式：推荐使用PNG格式，可以是标准的24位颜色（红、绿和蓝各用8位），外加alpha通道的8位。不要在app图标上使用透明色。</p>
<p style="border-top-width: 0px; padding-right: 10px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px 0px 1em; vertical-align: baseline; text-indent: 2em; padding-top: 0px; background-color: transparent; text-align: left; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial"><a style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; background-image: url(http://www.cnblogs.com/CuteSoft_Client/CuteEditor/Load.ashx?type=image&amp;file=anchor.gif); padding-bottom: 0px; margin: 0px; vertical-align: baseline; width: 20px; color: rgb(119,49,0); text-indent: 20px; padding-top: 0px; border-bottom: rgb(119,49,0) 1px dotted; height: 20px; background-color: transparent; border-right-width: 0px; text-decoration: none; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial" name="iconsize"></a>图标的尺寸：苹果有一份完整的文档，列出了app所需的全部图标尺寸，和其各自的使用环境。</p>
<p style="border-top-width: 0px; padding-right: 10px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px 0px 1em; vertical-align: baseline; text-indent: 2em; padding-top: 0px; background-color: transparent; text-align: left; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial"><a href="http://developer.apple.com/library/ios/#qa/qa1686/_index.html" style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; padding-bottom: 0px; margin: 0px; vertical-align: baseline; color: #773100; padding-top: 0px; border-bottom: #773100 1px dotted; background-color: transparent; border-right-width: 0px; text-decoration: none; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">Technical Q&amp;A QA1686: App Icons on iPad and iPhone</a></p>
<ul style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; list-style-image: url(http://www.xiaweipin.com/wp-content/themes/inki_v.2.1/images/asterisk-bullet.png); border-bottom-width: 0px; padding-bottom: 0px; margin: 0px 0px 1em 1.3em; vertical-align: baseline; padding-top: 0px; background-color: transparent; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">
    <li style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0.25em 0px; vertical-align: baseline; padding-top: 0px; background-color: transparent; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">App程序包必须包含以下标记为&ldquo;必须&rdquo;的图标。</li>
    <li style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0.25em 0px; vertical-align: baseline; padding-top: 0px; background-color: transparent; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">图片尺寸的单位是px。</li>
</ul>
<p style="border-top-width: 0px; padding-right: 10px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px 0px 1em; vertical-align: baseline; text-indent: 2em; padding-top: 0px; background-color: transparent; text-align: left; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">表格一：只支持iPhone的app图标要求。</p>
<p>
<table style="padding-right: 0px; padding-left: 0px; font-size: 15px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 0px; margin: 0px 0px 1em; vertical-align: baseline; width: 469px; border-top-style: solid; border-top-color: #898857; padding-top: 0px; border-right-style: solid; border-left-style: solid; border-collapse: collapse; background-color: #d2d0ad; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial; webkit-border-horizontal-spacing: 0px; webkit-border-vertical-spacing: 0px">
    <tbody style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px; vertical-align: baseline; padding-top: 0px; background-color: transparent; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">
        <tr style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px; vertical-align: baseline; padding-top: 0px; background-color: transparent; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">
            <th style="border-right: #898857 1px solid; padding-right: 10px; background-position: 0% 0%; border-top: #898857 1px solid; padding-left: 5px; background-image: url(http://www.xiaweipin.com/wp-content/themes/inki_v.2.1/images/thead-bg.gif); padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-left: #898857 1px solid; color: #ede6a3; padding-top: 4px; border-bottom: #898857 1px solid; background-color: #442611; text-align: center; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">尺寸</th>
            <th style="border-right: #898857 1px solid; padding-right: 10px; background-position: 0% 0%; border-top: #898857 1px solid; padding-left: 5px; background-image: url(http://www.xiaweipin.com/wp-content/themes/inki_v.2.1/images/thead-bg.gif); padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-left: #898857 1px solid; color: #ede6a3; padding-top: 4px; border-bottom: #898857 1px solid; background-color: #442611; text-align: center; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">文件名</th>
            <th style="border-right: #898857 1px solid; padding-right: 10px; background-position: 0% 0%; border-top: #898857 1px solid; padding-left: 5px; background-image: url(http://www.xiaweipin.com/wp-content/themes/inki_v.2.1/images/thead-bg.gif); padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-left: #898857 1px solid; color: #ede6a3; padding-top: 4px; border-bottom: #898857 1px solid; background-color: #442611; text-align: center; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">用途</th>
            <th style="border-right: #898857 1px solid; padding-right: 10px; background-position: 0% 0%; border-top: #898857 1px solid; padding-left: 5px; background-image: url(http://www.xiaweipin.com/wp-content/themes/inki_v.2.1/images/thead-bg.gif); padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-left: #898857 1px solid; color: #ede6a3; padding-top: 4px; border-bottom: #898857 1px solid; background-color: #442611; text-align: center; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">是否必须</th>
            <th style="border-right: #898857 1px solid; padding-right: 10px; background-position: 0% 0%; border-top: #898857 1px solid; padding-left: 5px; background-image: url(http://www.xiaweipin.com/wp-content/themes/inki_v.2.1/images/thead-bg.gif); padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-left: #898857 1px solid; color: #ede6a3; padding-top: 4px; border-bottom: #898857 1px solid; background-color: #442611; text-align: center; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">备注</th>
        </tr>
        <tr style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px; vertical-align: baseline; padding-top: 0px; background-color: transparent; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">512&times;512</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">iTunesArtwork</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">Ad Hoc iTunes</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">可选，但建议加入</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">文件应该是PNG格式，但文件名不要使用.png后缀。</td>
        </tr>
        <tr style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px; vertical-align: baseline; padding-top: 0px; background-color: transparent; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">57&times;57</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">Icon.png</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">iPhone/iPod touch的App Store和主屏幕（Home screen）</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">必须</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">无</td>
        </tr>
        <tr style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px; vertical-align: baseline; padding-top: 0px; background-color: transparent; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">114&times;114</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">Icon@2x.png</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">高分辨率的iPhone 4主屏幕</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">可选，但建议加入</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">无</td>
        </tr>
        <tr style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px; vertical-align: baseline; padding-top: 0px; background-color: transparent; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">72&times;72</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">Icon-72.png</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">主屏幕，为了兼容iPad</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">可选，但建议加入</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">无</td>
        </tr>
        <tr style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px; vertical-align: baseline; padding-top: 0px; background-color: transparent; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">29&times;29</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">Icon-Small.png</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">Spotlight和设置app</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">可选，但建议加入</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">无</td>
        </tr>
        <tr style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px; vertical-align: baseline; padding-top: 0px; background-color: transparent; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">50&times;50</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">Icon-Small-50.png</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">Spotlight，为了兼容iPad</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">如果app有设置程序包，那么建议加入。否则可选，但建议加入。</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">无</td>
        </tr>
        <tr style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px; vertical-align: baseline; padding-top: 0px; background-color: transparent; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">58&times;58</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">Icon-Small@2x.png</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">高分辨率的iPhone 4的Spotlight和设置app</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">如果app有设置程序包，那么建议加入。否则可选，但建议加入。</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">无</td>
        </tr>
    </tbody>
</table>
</p>
<p style="border-top-width: 0px; padding-right: 10px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px 0px 1em; vertical-align: baseline; text-indent: 2em; padding-top: 0px; background-color: transparent; text-align: left; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">表格二：只支持iPad的app图标要求。</p>
<p>
<table style="padding-right: 0px; padding-left: 0px; font-size: 15px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 0px; margin: 0px 0px 1em; vertical-align: baseline; width: 469px; border-top-style: solid; border-top-color: #898857; padding-top: 0px; border-right-style: solid; border-left-style: solid; border-collapse: collapse; background-color: #d2d0ad; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial; webkit-border-horizontal-spacing: 0px; webkit-border-vertical-spacing: 0px">
    <tbody style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px; vertical-align: baseline; padding-top: 0px; background-color: transparent; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">
        <tr style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px; vertical-align: baseline; padding-top: 0px; background-color: transparent; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">
            <th style="border-right: #898857 1px solid; padding-right: 10px; background-position: 0% 0%; border-top: #898857 1px solid; padding-left: 5px; background-image: url(http://www.xiaweipin.com/wp-content/themes/inki_v.2.1/images/thead-bg.gif); padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-left: #898857 1px solid; color: #ede6a3; padding-top: 4px; border-bottom: #898857 1px solid; background-color: #442611; text-align: center; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">尺寸</th>
            <th style="border-right: #898857 1px solid; padding-right: 10px; background-position: 0% 0%; border-top: #898857 1px solid; padding-left: 5px; background-image: url(http://www.xiaweipin.com/wp-content/themes/inki_v.2.1/images/thead-bg.gif); padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-left: #898857 1px solid; color: #ede6a3; padding-top: 4px; border-bottom: #898857 1px solid; background-color: #442611; text-align: center; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">文件名</th>
            <th style="border-right: #898857 1px solid; padding-right: 10px; background-position: 0% 0%; border-top: #898857 1px solid; padding-left: 5px; background-image: url(http://www.xiaweipin.com/wp-content/themes/inki_v.2.1/images/thead-bg.gif); padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-left: #898857 1px solid; color: #ede6a3; padding-top: 4px; border-bottom: #898857 1px solid; background-color: #442611; text-align: center; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">用途</th>
            <th style="border-right: #898857 1px solid; padding-right: 10px; background-position: 0% 0%; border-top: #898857 1px solid; padding-left: 5px; background-image: url(http://www.xiaweipin.com/wp-content/themes/inki_v.2.1/images/thead-bg.gif); padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-left: #898857 1px solid; color: #ede6a3; padding-top: 4px; border-bottom: #898857 1px solid; background-color: #442611; text-align: center; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">是否必须</th>
            <th style="border-right: #898857 1px solid; padding-right: 10px; background-position: 0% 0%; border-top: #898857 1px solid; padding-left: 5px; background-image: url(http://www.xiaweipin.com/wp-content/themes/inki_v.2.1/images/thead-bg.gif); padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-left: #898857 1px solid; color: #ede6a3; padding-top: 4px; border-bottom: #898857 1px solid; background-color: #442611; text-align: center; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">备注</th>
        </tr>
        <tr style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px; vertical-align: baseline; padding-top: 0px; background-color: transparent; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">512&times;512</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">iTunesArtwork</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">Ad Hoc iTunes</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">可选，但建议加入</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">文件应该是PNG格式，但文件名不要使用.png后缀。</td>
        </tr>
        <tr style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px; vertical-align: baseline; padding-top: 0px; background-color: transparent; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">72&times;72</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">Icon-72.png</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">iPad的App Store和主屏幕</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">必须</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">无</td>
        </tr>
        <tr style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px; vertical-align: baseline; padding-top: 0px; background-color: transparent; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">50&times;50</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">Icon-Small-50.png</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">iPad的Spotlight</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">可选，但建议加入。</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">无</td>
        </tr>
        <tr style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px; vertical-align: baseline; padding-top: 0px; background-color: transparent; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">29&times;29</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">Icon-Small.png</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">iPad的设置app</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">如果app有设置程序包，那么建议加入。否则可选，但建议加入。</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">无</td>
        </tr>
    </tbody>
</table>
</p>
<p style="border-top-width: 0px; padding-right: 10px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px 0px 1em; vertical-align: baseline; text-indent: 2em; padding-top: 0px; background-color: transparent; text-align: left; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">表格三：Universal的app图标要求。</p>
<p>
<table style="padding-right: 0px; padding-left: 0px; font-size: 15px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 0px; margin: 0px 0px 1em; vertical-align: baseline; width: 469px; border-top-style: solid; border-top-color: #898857; padding-top: 0px; border-right-style: solid; border-left-style: solid; border-collapse: collapse; background-color: #d2d0ad; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial; webkit-border-horizontal-spacing: 0px; webkit-border-vertical-spacing: 0px">
    <tbody style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px; vertical-align: baseline; padding-top: 0px; background-color: transparent; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">
        <tr style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px; vertical-align: baseline; padding-top: 0px; background-color: transparent; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">
            <th style="border-right: #898857 1px solid; padding-right: 10px; background-position: 0% 0%; border-top: #898857 1px solid; padding-left: 5px; background-image: url(http://www.xiaweipin.com/wp-content/themes/inki_v.2.1/images/thead-bg.gif); padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-left: #898857 1px solid; color: #ede6a3; padding-top: 4px; border-bottom: #898857 1px solid; background-color: #442611; text-align: center; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">尺寸</th>
            <th style="border-right: #898857 1px solid; padding-right: 10px; background-position: 0% 0%; border-top: #898857 1px solid; padding-left: 5px; background-image: url(http://www.xiaweipin.com/wp-content/themes/inki_v.2.1/images/thead-bg.gif); padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-left: #898857 1px solid; color: #ede6a3; padding-top: 4px; border-bottom: #898857 1px solid; background-color: #442611; text-align: center; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">文件名</th>
            <th style="border-right: #898857 1px solid; padding-right: 10px; background-position: 0% 0%; border-top: #898857 1px solid; padding-left: 5px; background-image: url(http://www.xiaweipin.com/wp-content/themes/inki_v.2.1/images/thead-bg.gif); padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-left: #898857 1px solid; color: #ede6a3; padding-top: 4px; border-bottom: #898857 1px solid; background-color: #442611; text-align: center; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">用途</th>
            <th style="border-right: #898857 1px solid; padding-right: 10px; background-position: 0% 0%; border-top: #898857 1px solid; padding-left: 5px; background-image: url(http://www.xiaweipin.com/wp-content/themes/inki_v.2.1/images/thead-bg.gif); padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-left: #898857 1px solid; color: #ede6a3; padding-top: 4px; border-bottom: #898857 1px solid; background-color: #442611; text-align: center; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">是否必须</th>
            <th style="border-right: #898857 1px solid; padding-right: 10px; background-position: 0% 0%; border-top: #898857 1px solid; padding-left: 5px; background-image: url(http://www.xiaweipin.com/wp-content/themes/inki_v.2.1/images/thead-bg.gif); padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-left: #898857 1px solid; color: #ede6a3; padding-top: 4px; border-bottom: #898857 1px solid; background-color: #442611; text-align: center; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">备注</th>
        </tr>
        <tr style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px; vertical-align: baseline; padding-top: 0px; background-color: transparent; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">512&times;512</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">iTunesArtwork</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">Ad Hoc iTunes</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">可选，但建议加入</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">文件应该是PNG格式，但文件名不要使用.png后缀。</td>
        </tr>
        <tr style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px; vertical-align: baseline; padding-top: 0px; background-color: transparent; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">57&times;57</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">Icon.png</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">iPhone/iPod touch的App Store和主屏幕（Home screen）</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">必须</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">无</td>
        </tr>
        <tr style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px; vertical-align: baseline; padding-top: 0px; background-color: transparent; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">114&times;114</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">Icon@2x.png</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">高分辨率的iPhone 4主屏幕</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">可选，但建议加入</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">无</td>
        </tr>
        <tr style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px; vertical-align: baseline; padding-top: 0px; background-color: transparent; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">72&times;72</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">Icon-72.png</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">iPad的App Store和主屏幕</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">必须</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">无</td>
        </tr>
        <tr style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px; vertical-align: baseline; padding-top: 0px; background-color: transparent; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">29&times;29</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">Icon-Small.png</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">iPad和iPhone的设置app，iPhone的Spotlight</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">如果app有设置程序包，那么建议加入。否则可选，但建议加入。</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">无</td>
        </tr>
        <tr style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px; vertical-align: baseline; padding-top: 0px; background-color: transparent; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">50&times;50</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">Icon-Small-50.png</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">iPad的Spotlight</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">可选，但建议加入。</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">无</td>
        </tr>
        <tr style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px; vertical-align: baseline; padding-top: 0px; background-color: transparent; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">58&times;58</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">Icon-Small@2x.png</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">高分辨率的iPhone 4的Spotlight和设置app</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">如果app有设置程序包，那么建议加入。否则可选，但建议加入。</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">无</td>
        </tr>
    </tbody>
</table>
</p>
<p style="border-top-width: 0px; padding-right: 10px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px 0px 1em; vertical-align: baseline; text-indent: 2em; padding-top: 0px; background-color: transparent; text-align: left; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial"><a style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; background-image: url(http://www.cnblogs.com/CuteSoft_Client/CuteEditor/Load.ashx?type=image&amp;file=anchor.gif); padding-bottom: 0px; margin: 0px; vertical-align: baseline; width: 20px; color: rgb(119,49,0); text-indent: 20px; padding-top: 0px; border-bottom: rgb(119,49,0) 1px dotted; height: 20px; background-color: transparent; border-right-width: 0px; text-decoration: none; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial" name="launchimagesize"></a>启动画面的尺寸：</p>
<ul style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; list-style-image: url(http://www.xiaweipin.com/wp-content/themes/inki_v.2.1/images/asterisk-bullet.png); border-bottom-width: 0px; padding-bottom: 0px; margin: 0px 0px 1em 1.3em; vertical-align: baseline; padding-top: 0px; background-color: transparent; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">
    <li style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0.25em 0px; vertical-align: baseline; padding-top: 0px; background-color: transparent; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">尺寸单位是px，宽x高。</li>
    <li style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0.25em 0px; vertical-align: baseline; padding-top: 0px; background-color: transparent; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">iPhone/iPod Touch的启动画面是全尺寸，iPad的则要去掉&ldquo;状态栏&rdquo;（Status bar）的高度（20px）。</li>
    <li style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0.25em 0px; vertical-align: baseline; padding-top: 0px; background-color: transparent; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">iPad的启动画面是分模式的：竖排（portrait）和横排模式（landscape）。</li>
</ul>
<p>
<table style="padding-right: 0px; padding-left: 0px; font-size: 15px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 0px; margin: 0px 0px 1em; vertical-align: baseline; width: 469px; border-top-style: solid; border-top-color: #898857; padding-top: 0px; border-right-style: solid; border-left-style: solid; border-collapse: collapse; background-color: #d2d0ad; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial; webkit-border-horizontal-spacing: 0px; webkit-border-vertical-spacing: 0px">
    <tbody style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px; vertical-align: baseline; padding-top: 0px; background-color: transparent; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">
        <tr style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px; vertical-align: baseline; padding-top: 0px; background-color: transparent; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">
            <th style="border-right: #898857 1px solid; padding-right: 10px; background-position: 0% 0%; border-top: #898857 1px solid; padding-left: 5px; background-image: url(http://www.xiaweipin.com/wp-content/themes/inki_v.2.1/images/thead-bg.gif); padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-left: #898857 1px solid; color: #ede6a3; padding-top: 4px; border-bottom: #898857 1px solid; background-color: #442611; text-align: center; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">尺寸</th>
            <th style="border-right: #898857 1px solid; padding-right: 10px; background-position: 0% 0%; border-top: #898857 1px solid; padding-left: 5px; background-image: url(http://www.xiaweipin.com/wp-content/themes/inki_v.2.1/images/thead-bg.gif); padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-left: #898857 1px solid; color: #ede6a3; padding-top: 4px; border-bottom: #898857 1px solid; background-color: #442611; text-align: center; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">设备</th>
            <th style="border-right: #898857 1px solid; padding-right: 10px; background-position: 0% 0%; border-top: #898857 1px solid; padding-left: 5px; background-image: url(http://www.xiaweipin.com/wp-content/themes/inki_v.2.1/images/thead-bg.gif); padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-left: #898857 1px solid; color: #ede6a3; padding-top: 4px; border-bottom: #898857 1px solid; background-color: #442611; text-align: center; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">模式</th>
        </tr>
        <tr style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px; vertical-align: baseline; padding-top: 0px; background-color: transparent; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">320 x 480</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">低分辨率iPhone/iPod Touch</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">竖排和横排</td>
        </tr>
        <tr style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px; vertical-align: baseline; padding-top: 0px; background-color: transparent; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">640 x 960</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">高分辨率iPhone/iPod Touch</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">竖排和横排</td>
        </tr>
        <tr style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px; vertical-align: baseline; padding-top: 0px; background-color: transparent; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">768 x 1004</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">iPad</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">竖排</td>
        </tr>
        <tr style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px; vertical-align: baseline; padding-top: 0px; background-color: transparent; border-right-width: 0px; border-image: initial; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">1024 x 748</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">iPad</td>
            <td style="padding-right: 10px; padding-left: 5px; border-left-color: #898857; border-bottom-color: #898857; padding-bottom: 4px; margin: 0px; vertical-align: baseline; border-top-style: solid; border-top-color: #898857; padding-top: 4px; border-right-style: solid; border-left-style: solid; background-color: transparent; border-right-color: #898857; border-bottom-style: solid; outline-width: 0px; outline-style: initial; outline-color: initial; background-origin: initial; background-clip: initial">横排</td>
        </tr>
    </tbody>
</table>
</p>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.raymod.com/article/ck/写给设计师的。写下来，就不用每次都说一遍。.htm" /> 
	  <id>http://www.raymod.com/default.asp?id=105</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[手机产品设计中的反馈提示]]></title>
	  <author>
		 <name>raymond</name>
		 <uri>http://www.raymod.com/</uri>
		 <email>ray@zq.gd</email>
	  </author>
	  <category term="" scheme="http://www.raymod.com/default.asp?cateID=3" label="策划" /> 
	  <updated>2012-03-05T02:00:47+08:00</updated>
	  <published>2012-03-05T02:00:47+08:00</published>
		  <summary type="html"><![CDATA[<p>在产品的设计中，&ldquo;反馈&rdquo;是很重要的一个交互特征，它是一种界面输出物，用以给用户正确的引导信息，帮助用户判断和决策。而反馈的形式也是多方面的，视觉、听觉、嗅觉、触觉、正面的、负面的，都是在为用户传递信息。而没有反馈或反馈很差的交互，只会让用户产生失效和无助的负面体验。</p>
<p>&nbsp;</p>
<p>在煤气中加入硫和笨，为的是通过臭味提供危险信号的反馈。地铁里的门在关闭前会发出滴滴的报警声，是用来告知乘客车门将要关闭的信息。这都是生活中无处不在的反馈。</p>
<p>今天要和大家讨论的是在手机产品中，用户在信息交互过程中所得到的反馈形式。<br />
<br class="spacer_" />
&nbsp;</p>
<h2><strong>1.反馈的必要性</strong></h2>
<p>在用户与产品进行交互的过程中, 产品对于用户的每一次行为都要有清晰的、及时的提示和反馈，从而使用户获得操作行为结果的信息。</p>
<p>如果产品不提供任何信息反馈, 那么用户就无法确定自己操作行为的的结果，反馈机制是产品设计中不可或缺的基本元素，它是用户前进道路的指向标。<br />
<br class="spacer_" />
&nbsp;</p>
<h2>2.<strong>反馈的形式</strong></h2>
<p>反馈的形式是多种多样的，在不同的场景不同操作中要选择适合的反馈类型。而在手机产品中更要考虑操作区太小被手指遮挡住的情况，反馈一定要明显，并呈现在可视范围内。下面尝试对手机产品中的反馈形式做一些总结。<br />
<br class="spacer_" />
&nbsp;</p>
<h3><strong>2.1 气球状通知</strong></h3>
<p>气球状通知是一个小型的弹出窗口，用于通知用户出现非关键性问题或控件处于某种特殊情况。</p>
<div><img class="alignnone" height="368" alt="" src="http://mux.baidu.com/img/75/01.jpg" width="560" /></div>
<p>上图中的信息提示是用来解释指向菜单的功能，即该菜单项是做什么的，属于说明类的反馈提示，说明文字应简洁、实用，避免提供用户显而易见的信息，需要设定合理的显示时间。</p>
<p><img class="alignnone" height="368" alt="" src="http://mux.baidu.com/img/75/02.jpg" width="560" /></p>
<p>上图的气球状通知是当选中某一项功能（或方式）时，界面显示该功能对应的简要说明，用来告知用户选中此项功能将要执行的操作是什么，此类反馈通知一般触发后显示3秒钟就自动消失了。此类的反馈通常不会太重要，因为很容易被用户忽略。<br />
<br class="spacer_" />
&nbsp;</p>
<h3><span>2.2 对话框</span></h3>
<p>对话框是最常见的反馈和提示形式，它存在的价值在于要引起用户的高度重视。</p>
<div><img class="alignnone" height="368" alt="" src="http://mux.baidu.com/img/75/03.jpg" width="560" /></div>
<p>上图中的反馈提示是当用户触发某一项操作且需要用户进行再次确定及选择时显示的对话框，此类反馈的方式一般用在较为重要的提示信息上，需要用户进一步操作。操作按钮要尽量突出，确定不会出现死循环和重复操作，提示文字要简练易懂，以减少对文字的阅读压力。</p>
<div><img class="alignnone" height="368" alt="" src="http://mux.baidu.com/img/75/04.jpg" width="560" /></div>
<p>上图的反馈属于过渡类的反馈提示，是通知用户当前界面所处的一种特殊状态，告知用户可以做什么及产品正在做什么。<br />
<br class="spacer_" />
&nbsp;</p>
<h3><strong>2.3 按钮/图标/链接的按下状态</strong></h3>
<p>按钮/图标/链接的按下、选中的反馈效果，在手机产品中一样不能缺少。</p>
<div><img class="alignnone" height="368" alt="" src="http://mux.baidu.com/img/75/05.jpg" width="560" /></div>
<p>上图的例子中当用户按下按钮或图标时，该按钮背景会增加一个按下的指纹，图标背景会变成高光，这种实时的反馈让用户即时直观地看到操作被响应了。<br />
<br class="spacer_" />
&nbsp;</p>
<h3><strong>2.4 声音</strong></h3>
<p>声音同样能为用户提供有用的听觉反馈，但是它不应是唯一的或主要的反馈方式。因为用户的使用场景可能会迫使他们关掉声音。尤其手机的使用环境复杂多样，在地铁、商场等嘈杂的环境，声音的反馈就很容易被忽略。同时，过多的声音反馈也会造成听觉上的噪音，所以声音的反馈不应是主要的反馈方式，并要允许用户关掉声音。<br />
比如iPhone发送短信发送成功后的提示音，按下手机键盘上的按键时的提示音，新浪微博的信息拉取成功后的提示音，后台推送消息的提示音等等，都巧妙的运用了声音反馈。<br />
<br class="spacer_" />
&nbsp;</p>
<h3><strong>2.5 振动</strong></h3>
<p>振动为触觉反馈的一种表现形式，让用户通过触觉来感知产品的反馈及回应。</p>
<div><img class="alignnone" height="368" alt="" src="http://mux.baidu.com/img/75/06.jpg" width="560" /></div>
<p>当我们将手机由声音调到振动时，声音的反馈提示就变成了振动提示。比如当有电话打进来时、接收到新消息时、接通电源充电时的反馈提示都变成了振动。<br />
而有些产品中也可以设置新消息振动提示，打开此开关后，有新消息送达时的提示也就变成了振动提示。<br />
<br class="spacer_" />
&nbsp;</p>
<h3><strong>2.6 动画</strong></h3>
<p>顺滑的动画会给用户提供有意义的反馈，帮助用户直观地了解到操作的结果。</p>
<div><img class="alignnone" height="368" alt="" src="http://mux.baidu.com/img/75/07.jpg" width="560" /></div>
<div><img class="alignnone" height="368" alt="" src="http://mux.baidu.com/img/75/08.jpg" width="560" /></div>
<p>上图的例子都是通过一个显著的动画过程让用户知道操作是如何执行的，把衣服丢进购物车，把照片扔进垃圾箱等等，这些形象的拟物化的动画能够帮助用户清晰地感知到整个操作执行的全过程。</p>
<div><img class="alignnone" height="368" alt="" src="http://mux.baidu.com/img/75/09.jpg" width="560" /></div>
<p>上图中的例子适用在那些会持续很多秒的长流程里，将等待过程采用动画的进度形式显示，展示已完成的进度，并在可能的时候提供解释信息，以减少用户的焦虑。</p>
<p><br class="spacer_" />
&nbsp;</p>
<h3><strong>2.7 灯光</strong></h3>
<p>灯光的提示，在一些特殊环境中有特殊的应用，比如在黑暗的地方或者是用户视线不在手机屏幕上时，灯光的反馈提示就以它独特的闪烁方式引起用户的注意。<br />
手机指示灯大多是用在提示电量不足，即当手机快没电的时候，指示灯会按照一定的频率闪烁红光。还有充电的时候，红色指示灯常亮，充满电之后变成绿色。<br />
还有一些手机的灯光应用在提醒功能里，比如有新消息、未接来电的时候，屏幕会自动亮起提示用户。<br />
<br class="spacer_" />
&nbsp;</p>
<h2><strong>3.反馈的内容</strong></h2>
<h3><strong>3.1 信息</strong></h3>
<p>反馈提示的信息应简洁、实用。避免不带格式的大段文本，避免提供用户显而易见的信息或只是重复屏幕上的文字。</p>
<div><img class="alignnone" height="368" alt="" src="http://mux.baidu.com/img/75/10.jpg" width="560" /></div>
<p>上图中的例子可以看到用户完成操作后给出的清晰的提示信息，告知用户操作的结果。<br />
<br class="spacer_" />
&nbsp;</p>
<h3><strong>3.2 警告</strong></h3>
<p>警告框用于向用户展示对使用程序有重要影响的信息。<br />
警告框浮现在程序中央，覆盖在主程序之上。警告框的外观强调了这样一个事实，它的到来是由于程序或设备的状态发生了重要变动，并不一定是由用户最近的操作导致。</p>
<div><img class="alignnone" height="368" alt="" src="http://mux.baidu.com/img/75/11.jpg" width="560" /></div>
<p>上图中的警告是告知用户当前产品的状态，需要用户引起重视。警告框通常至少有一个按钮，用户点击后即可关闭窗口。警告框上也总会有标题，并展示额外的辅助信息。</p>
<p><br class="spacer_" />
&nbsp;</p>
<h3><strong>3.3 错误</strong></h3>
<p>错误是提示用户操作出现了问题或异常，无法继续执行。</p>
<div><img class="alignnone" height="368" alt="" src="http://mux.baidu.com/img/75/12.jpg" width="560" /></div>
<div><img class="alignnone" height="368" alt="" src="http://mux.baidu.com/img/75/13.jpg" width="560" /></div>
<p>上图中的例子为输入的信息有误，界面给出了相应的错误提示，告知用户为什么操作被中断，以及出现了什么错误。错误信息要尽量准确、通俗易懂，有效的错误提示信息要解释发生的原因，并提供解决方案以使用户能够进行修复。<br />
<br class="spacer_" />
&nbsp;</p>
<h3><strong>3.4 确认</strong></h3>
<p>确认是用于询问用户是否要继续某个操作，让用户进一步对所作的操作进行确定和执行，为用户提供可反悔的可撤销的退路。</p>
<div><img class="alignnone" height="368" alt="" src="http://mux.baidu.com/img/75/14.jpg" width="560" /></div>
<p>上图中的例子是让用户对一些执行结果较危险或不可逆的操作进行二次选择和确认，用户防止用户误操作。</p>
<p><br class="spacer_" />
&nbsp;</p>
<h2><strong>4.反馈的位置</strong></h2>
<h3><strong>4.1 状态栏</strong></h3>
<p>反馈的提示信息在状态栏，因为手机屏幕较小，可利用的空间有限，而放在状态栏则是一种很好的空间利用，但此位置不是很明显，建议只显示重要程度不高的信息提示，如好友消息提示，操作结果提示等次要信息。</p>
<div><img class="alignnone" height="368" alt="" src="http://mux.baidu.com/img/75/15.jpg" width="560" /></div>
<h3><br class="spacer_" />
<strong>4.2 导航栏</strong></h3>
<p>反馈的提示信息在导航栏，此类提示一般为连接状态的展示，临时将导航栏的内容代替为连接状态，表示当前产品正在努力连接网络拉取数据中。此位置适合显示临时的较重要的提示类信息。</p>
<div><img class="alignnone" height="368" alt="" src="http://mux.baidu.com/img/75/16.jpg" width="560" /></div>
<p><br class="spacer_" />
&nbsp;</p>
<h3><strong>4.3 内容区上方</strong></h3>
<p>反馈提示在内容区上方，导航栏下方，通常为拉取新内容，加载新信息的一种快捷方式，默认的提示信息是隐藏的，向下拉界面时才显示对应的提示信息，以引导用户进行操作。此位置的提示需要和内容进行紧密的关联结合。</p>
<div><img class="alignnone" height="368" alt="" src="http://mux.baidu.com/img/75/17.jpg" width="560" /></div>
<p><br class="spacer_" />
&nbsp;</p>
<h3><strong>4.4 屏幕中心</strong></h3>
<p>反馈信息在屏幕中心，通常为整体性的较重要的信息提示，需要引起用户重视的、系统的提示均可以显示在此位置。</p>
<div><img class="alignnone" height="368" alt="" src="http://mux.baidu.com/img/75/18.jpg" width="560" /></div>
<p><br class="spacer_" />
&nbsp;</p>
<h3><strong>4.5 菜单栏上方</strong></h3>
<p>反馈提示在菜单栏上方，此位置基本没有限制，可根据需要灵活使用，可以是产品的整体信息的提示，也可以是界面底部相关内容的提示。</p>
<div><img class="alignnone" height="368" alt="" src="http://mux.baidu.com/img/75/19.jpg" width="560" /></div>
<p><br class="spacer_" />
&nbsp;</p>
<h3><strong>4.6 菜单栏</strong></h3>
<p>反馈信息在菜单栏上，在此位置的显示提示信息的产品较少，因为通常菜单栏都会被菜单占满，不会有位置显示提示信息，可在一些菜单项较少的产品中进行应用。</p>
<div><img class="alignnone" height="384" alt="" src="http://mux.baidu.com/img/75/20.jpg" width="256" /></div>
<p><br class="spacer_" />
&nbsp;</p>
<h3><strong>4.7 跟随手势随机出现</strong></h3>
<p>反馈提示位置随机出现，根据手势或操作的位置临近出现，要注意尽量避免提示文字被遮挡。</p>
<div><img class="alignnone" height="368" alt="" src="http://mux.baidu.com/img/75/21.jpg" width="256" /></div>
<p><br class="spacer_" />
&nbsp;</p>
<h2><strong>5.反馈的时间</strong></h2>
<p><img alt="" src="http://mux.baidu.com/img/75/22.jpg" /></p>
<p>参考网页中的响应时间规律，一般而言，在0.1秒内显示反馈结果用户是可以接受的。1秒是用户保持不间断的思维流的限定时间，如果是超过了0.1秒而少于1秒内没有特别的信息反馈时，用户是会产生疑惑的。<br />
对于长时间的延迟，用户会想在等待完成期间去处理其他事务。所以需要显示将要完成的时间（通常选择进度条或百分比来表示），不然会大大降低用户的期待值。<br />
<br class="spacer_" />
&nbsp;</p>
<h2><strong>6.反馈的设计原则</strong></h2>
<ul>
    <li>为用户交互行为的各个阶段提供积极、即时的反馈予以响应。</li>
    <li>要避免过度的反馈，以免给用户带来不必要的干扰。</li>
    <li>能够及时看到效果，操作简单的成功型提示不需要反馈。</li>
    <li>对提供的反馈要允许用户以最方便快捷的方式完成选择。</li>
    <li>将状态分类（对/错/提/警等）并进行差异化设计。</li>
    <li>不打断用户的意识流，给出的反馈提示要避免遮挡用户可能会去查看或者操作的对象。</li>
</ul>
<p><br class="spacer_" />
&nbsp;</p>
<h2><strong>7.总结</strong></h2>
<p>反馈需要引起用户注意，快速明确地传递操作的结果，不让用户产生迷惑，尤其在手机的操作中，产品需要即时响应用户的手势动作，手势操作虽快速轻便，但没有鼠标按下时嗒嗒声的安全感，也十分受限于设备屏幕的灵敏度，所以即时的、有效的操作反馈是非常重要的。<br />
总结划分的如有不当，还请大家一起来斧正。</p>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.raymod.com/article/ck/104.htm" /> 
	  <id>http://www.raymod.com/default.asp?id=104</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[手机产品设计禁忌]]></title>
	  <author>
		 <name>raymond</name>
		 <uri>http://www.raymod.com/</uri>
		 <email>ray@zq.gd</email>
	  </author>
	  <category term="" scheme="http://www.raymod.com/default.asp?cateID=3" label="策划" /> 
	  <updated>2012-03-05T01:58:05+08:00</updated>
	  <published>2012-03-05T01:58:05+08:00</published>
		  <summary type="html"><![CDATA[在做手机产品设计的过程中，遇到很多看似很小，且很容易被忽略的问题，正是这些小问题，一次次的撩拨用户的耐心，让用户对你的产品心生怨念。刚出道的朋友没有经过实战，对细节注意不多，往往都会遇到类似的问题，强调多次后，觉得不如写下来，给新人共勉。<br/><br/><br/>▣ 1、没有不可点击的效果<br/><br/>一般按钮会有四态，不可点击效果、可点击效果、聚焦状态、按下状态。如果你的按钮此时处于不可用状态，那么一定要灰掉，或者拿掉按钮，否则会给用户误导。<br/><br/>▣ 2、菜单层次太深<br/><br/>菜单项以5~7个为宜，如果有二级菜单，就要注意合理的菜单分类，不能有太多层级的菜单，否则很难预期，也很难找到，寻找和返回都会变得很麻烦。<br/><br/>▣ 3、文字长度不加以限制<br/><br/>手机界面很小，寸土寸金，一页只能显示下6~10个列表，一行只能显示下10~16个字，标题栏的字数以5个以内为宜，标签栏也以2~3个为宜，那么这时候出现文字过长的情况，一定要定义一下处理方式，如果是选择型的，一般是截断或者打点缩略；如果是内容阅读型的，可以折行。但最合理的方式还是精简文字内容，缩短文字长度。<br/><br/>▣ 4、文字表意不明<br/><br/>由于手机是碎片时间、片段式阅读，所以手机界面上的文字表意性要求的更高，更苛刻，一定要在用户瞟到的瞬间，准确的传达信息。除了表意清晰之外，还要求语言精简，避免啰嗦；使用用户的语言而不是程序的语言；产品文案体现产品性格。<br/><br/>▣ 5、交互流程分支太多<br/><br/>做交互的时候一定要有一个任务流程的概念贯穿始终，用户是为了完成某个任务而使用软件的，交互设计师除了关注界面元素、跳转逻辑和交互反馈之外，还要关注用户任务，分得清主要任务和次要人物，给主要任务一个畅通无阻的清晰流程，不要给予太多可能的分支，干扰主要流程。<br/><br/>▣ 6、相关的选项离的很远<br/><br/>相关选项一定要具有操作上的延续性，虽然手机屏幕看起来比电脑屏幕要小的多，但是手机在屏幕上移动的代价，却要比鼠标在电脑上移动的代价大的多，如果手机上相关选选离得很远的话，用户一是容易迷失，找不到下一步操作，二是需要移动手指，到屏幕另一端触发操作。<br/><br/>▣ 7、一次载入太多的数据<br/><br/>流量、电量、速度和稳定性是手机产品的四个硬指标，如果你的应用不能合理的帮助用户节约流量、电量，提升浏览速度和浏览体验，保证应用的稳定性能，就不要谈什么用户体验。你可以利用预加载缓存、批量载入、动态刷新、服务端数据压缩等方式来保证省、快、稳基础体验。<br/><br/>▣ 8、按钮可点击范围比看起来小<br/><br/>我们都知道移动端有个神奇的数字“44”，根据食指最小点触距离7mm、拇指最小点触距离9mm，可以推导出做设计的时候，最小的点触距离是44*32 px。你可以设计一个精美的小图标，但是在定义它的点触大小的时候，却可以做放大处理，但你千万不要设计一个傻大的图标，点触范围却比图标要小，这样会给用户带来明显的误操作挫败感。<br/><br/>▣ 9、标签页跟内容没有从属关系<br/><br/>标签页跟内容需要有很好的联动关系，一般一个界面内有二级标签就足够复杂了，千万不要再有三级标签、四级标签。每个标签页都有自己特有的内容，当切换标签的时候，内容跟着切换。标签页如果是点击切换，内容部分可以整体刷新，标签页如果是滑动切换，内容页也要跟着滑动切换，千万不要一个点、一个滑。<br/><br/>▣ 10、把所有的操作都暴露出来<br/><br/>手机产品交互设计要经历缩减、隐藏、附加、组织的过程，千万不要妄图把什么功能、什么操作都暴露出来，以彰显强大。你需要把自己应用的所有功能所有操作做个优先级设定，那些常用的20%的功能，放在界面的主要位置上，其他80%的操作，放在次要位置或合理归类组织后，隐藏起来就可以了。<br/><br/>▣ 11、没有空数据界面设计<br/><br/>我们在做设计的时候，往往是提供理想化的场景，用户都已经进来了，我们怎么玩。但是，往往应用刚推出的时候，是没有用户的，甚至当应用有了一定用户基础的时候，新进来的用户打开应用的时候，应用仍然可能是一种没有数据的状态，再或者当用户清楚了全部数据，这三种情况下，用户都可能遇到空数据的界面。新手设计师往往不加设计，这时候用户就会看到一个空白界面，茫然失措。有经验的做法就是，提供一个情感化的界面，告诉用户当前没有内容；更具引导性的做法，就是引导用户去执行操作。<br/><br/>▣ 12、用户引导的滥用<br/><br/>去年就预言用户引导将要泛滥，很明显设计部门都喜欢用漂亮的引导界面告诉用户新增的功能或隐藏的应用，但不是所有的应用、所有的功能都需要花哨的引导的。如果是通用的功能、非重点的模块，根本就不需要引导；如果是功能告知，只需呀轻量级的引导；如果是版本更新说明，说明书式的引导可以采用，但是要言简意赅。<br/><br/>▣ 13、无加载中状态<br/><br/>手机产品只要是需要联网，需要交换数据，都需要提供一个加载中状态的，无论是菊花转还是Toast还是对话框，你需要给开发人员一个全局的定义，并且要告知加载中是模态（前台加载）的还是非模态的（后台加载）。且要考虑到加载时间过长、网络开关没有打开、网络不通等情况分别怎么去处理。<br/><br/>▣ 14、未定义Back的逻辑<br/><br/>在为Android做设计的时候，会涉及到硬件交互，其中Back键的使用，是一门学问，Android官方有一些指导原则可以借鉴，但是具体开发的时候，还是会有很多特殊情况，比如单一实例的替换、键盘及一些中间状态，这种情况下，Back可能需要被定义一下，该回到前一个实例（那就需要变成多实例了）还是该回到初始状态（清空输入内容或恢复初始状态）。<br/><br/>▣ 15、无横屏模式的设计<br/><br/>由于横屏模式下，纵向空间变得格外宝贵，导航栏、标签栏、键盘都需要被压扁，横盘模式一定要考虑是简单拉伸适配还是重新设计，如果你的应用不适合在横屏模式下使用，就屏蔽横盘，如果你的应用包括应用widget都需要支持横盘模式（甚至是带侧滑键盘的横屏机器），就需要提供设计方案。如果是S60V5这种竖高的机器，甚至需要重新设计。<br/><br/>作为手机产品交互设计师，利用设计规避问题，提升产品用户体验，把体验转化成价值，是我们所追求的境界。手机产品设计禁忌，是笔者遇到的一些设计问题，欢迎各路高手协同补充遇到的问题，共同避免重复发明轮子。]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.raymod.com/article/ck/103.htm" /> 
	  <id>http://www.raymod.com/default.asp?id=103</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[21个UI界面设计工具及网站]]></title>
	  <author>
		 <name>raymond</name>
		 <uri>http://www.raymod.com/</uri>
		 <email>ray@zq.gd</email>
	  </author>
	  <category term="" scheme="http://www.raymod.com/default.asp?cateID=3" label="策划" /> 
	  <updated>2012-03-05T01:18:36+08:00</updated>
	  <published>2012-03-05T01:18:36+08:00</published>
		  <summary type="html"><![CDATA[<p>本文将介绍一些UI界面与设计使用的元素、软件和网站。内容很丰富，适合用户体验设计师、界面设计师、产品设计师、JS前段开发、手机产品设计以及iPad和平板电脑产品设计等使用。</p>
<p minmax_bound="true"><strong minmax_bound="true">Lumzy</strong></p>
<p minmax_bound="true">官方地址：<span minmax_bound="true" style="color: #3366ff">http://www.lumzy.com/</span></p>
<p minmax_bound="true">Lumzy是一个网站应用和原型界面制作工具。使用Lumzy，您可以轻松创建UI模型并即时发送到客户电脑中。 Lumzy还具有团队协作编辑工具。&nbsp;</p>
<p minmax_bound="true"><img class="fit-image" alt="Lumzy" src="http://static.oschina.net/uploads/img/201103/22085042_Ecyu.jpg" minmax_bound="true" style="width: 498px; height: auto; maxwidth: 600px; minmaxwidth: 498px; minmaxheight: auto" /></p>
<p minmax_bound="true"><strong minmax_bound="true">Mockingbird</strong></p>
<p minmax_bound="true">官方地址：<span minmax_bound="true" style="color: #3366ff">https://gomockingbird.com/</span></p>
<p minmax_bound="true">Mockingbird（中文名：百舌鸟）是一个在线工具，它使您轻松地创建UI界面模型，预览UI，并可以共享你的版面编排效果图。&nbsp;</p>
<p minmax_bound="true"><img class="fit-image" alt="Mockingbird" src="http://static.oschina.net/uploads/img/201103/22085042_e8yj.jpg" minmax_bound="true" style="width: 498px; height: auto; maxwidth: 600px; minmaxwidth: 498px; minmaxheight: auto" /></p>
<p minmax_bound="true"><strong minmax_bound="true">The Pencil Project</strong></p>
<p minmax_bound="true">官方地址：<span minmax_bound="true" style="color: #3366ff">http://pencil.evolus.vn/en-US/Home.aspx</span></p>
<p minmax_bound="true">为设计图表和用户界面图形原型开发的一个自由和开源工具。&nbsp;</p>
<p minmax_bound="true"><img class="fit-image" alt="The Pencil Project" src="http://static.oschina.net/uploads/img/201103/22085042_0Cxg.jpg" minmax_bound="true" style="width: 498px; height: auto; maxwidth: 600px; minmaxwidth: 498px; minmaxheight: auto" /></p>
<p minmax_bound="true"><strong minmax_bound="true">Dojo</strong></p>
<p minmax_bound="true">官方地址：<span minmax_bound="true" style="color: #3366ff">http://dojotoolkit.org/</span></p>
<p minmax_bound="true">Dojo提供了强大的性能并节省您的时间。这是适合经验丰富前端开发者的JS开发工具包。&nbsp;</p>
<p minmax_bound="true"><img class="fit-image" alt="Dojo" src="http://static.oschina.net/uploads/img/201103/22085042_HoOT.jpg" minmax_bound="true" style="width: 498px; height: auto; maxwidth: 600px; minmaxwidth: 498px; minmaxheight: auto" /></p>
<p minmax_bound="true"><strong minmax_bound="true">Mocklinkr</strong></p>
<p minmax_bound="true">官方地址：<span minmax_bound="true" style="color: #3366ff">http://www.mocklinkr.com/</span></p>
<p minmax_bound="true">自定义排版托管工具Mocklinkr，让你不用再担心没有漂亮版面</p>
<p minmax_bound="true"><img class="fit-image" alt="Mocklinkr" src="http://static.oschina.net/uploads/img/201103/22085042_XH5a.jpg" minmax_bound="true" style="width: 498px; height: auto; maxwidth: 600px; minmaxwidth: 498px; minmaxheight: auto" /></p>
<p minmax_bound="true"><strong minmax_bound="true">MockFlow</strong></p>
<p minmax_bound="true">官方地址：<span minmax_bound="true" style="color: #3366ff">http://www.mockflow.com/signup/</span></p>
<p minmax_bound="true">MockFlow是一个在线工具，用户界面设计和协作版面编排工具。&nbsp;</p>
<p minmax_bound="true"><img class="fit-image" alt="MockFlow" src="http://static.oschina.net/uploads/img/201103/22085042_RMjD.jpg" minmax_bound="true" style="width: 498px; height: auto; maxwidth: 600px; minmaxwidth: 498px; minmaxheight: auto" /></p>
<p minmax_bound="true"><strong minmax_bound="true">Serena Prototype Composer</strong></p>
<p minmax_bound="true">官方地址：<span minmax_bound="true" style="color: #3366ff">http://www.serena.com/products/prototype-composer/index.html</span></p>
<p minmax_bound="true">Serena Prototype Composer是制作流程图，模拟程序流程和用户界面设计程序。&nbsp;</p>
<p minmax_bound="true"><img class="fit-image" alt="Serena Prototype Composer" src="http://static.oschina.net/uploads/img/201103/22085043_b0A2.jpg" minmax_bound="true" style="width: 498px; height: auto; maxwidth: 600px; minmaxwidth: 498px; minmaxheight: auto" /></p>
<p minmax_bound="true"><strong minmax_bound="true">Cacoo</strong></p>
<p minmax_bound="true">官方地址：<span minmax_bound="true" style="color: #3366ff">http://cacoo.com/</span></p>
<p minmax_bound="true">Cocoo是一个用户友好的在线绘图工具，允许你创建一个如网站地图，线框，UML和网络图图等。 Cacoo可以免费使用。&nbsp;</p>
<p minmax_bound="true"><img class="fit-image" alt="Cacoo" src="http://static.oschina.net/uploads/img/201103/22085043_Bewm.jpg" minmax_bound="true" style="width: 498px; height: auto; maxwidth: 600px; minmaxwidth: 498px; minmaxheight: auto" /></p>
<p minmax_bound="true"><strong minmax_bound="true">DENIM</strong></p>
<p minmax_bound="true">官方地址：<span minmax_bound="true" style="color: #3366ff">http://dub.washington.edu:2007/denim/</span></p>
<p minmax_bound="true">一个早期非正式的网站和用户界面设计工具&nbsp;</p>
<p minmax_bound="true"><img class="fit-image" alt="DENIM" src="http://static.oschina.net/uploads/img/201103/22085043_Zz9T.jpg" minmax_bound="true" style="width: 498px; height: auto; maxwidth: 600px; minmaxwidth: 498px; minmaxheight: auto" /></p>
<p minmax_bound="true"><strong minmax_bound="true">Hot Gloo</strong></p>
<p minmax_bound="true">官方地址：<span minmax_bound="true" style="color: #3366ff">http://www.hotgloo.com/</span></p>
<p minmax_bound="true">网上应用线框&nbsp;</p>
<p minmax_bound="true"><img class="fit-image" alt="Hot Glo" src="http://static.oschina.net/uploads/img/201103/22085044_OQD7.jpg" minmax_bound="true" style="width: 498px; height: auto; maxwidth: 600px; minmaxwidth: 498px; minmaxheight: auto" /></p>
<p minmax_bound="true"><strong minmax_bound="true">User Interface Design Framework</strong></p>
<p minmax_bound="true">官方地址：<span minmax_bound="true" style="color: #3366ff">http://www.webalys.com/design-interface-application-framework.php</span></p>
<p minmax_bound="true">一个免费提供网页设计师使用的用户界面设计工具。&nbsp;</p>
<p minmax_bound="true"><img class="fit-image" alt="User Interface Design Framework" src="http://static.oschina.net/uploads/img/201103/22085044_5MyK.jpg" minmax_bound="true" style="width: 498px; height: auto; maxwidth: 600px; minmaxwidth: 498px; minmaxheight: auto" /></p>
<p minmax_bound="true"><strong minmax_bound="true">Pattern Tap</strong></p>
<p minmax_bound="true">官方地址：<span minmax_bound="true" style="color: #3366ff">http://patterntap.com/</span></p>
<p minmax_bound="true">可以寻找一些设计资源与模式等。&nbsp;</p>
<p minmax_bound="true"><img class="fit-image" alt="Pattern Tap" src="http://static.oschina.net/uploads/img/201103/22085045_E9pK.jpg" minmax_bound="true" style="width: 498px; height: auto; maxwidth: 600px; minmaxwidth: 498px; minmaxheight: auto" /></p>
<p minmax_bound="true"><strong minmax_bound="true">User Interface Design Patterns</strong></p>
<p minmax_bound="true">官方地址：<span minmax_bound="true" style="color: #3366ff">http://ui-patterns.com/</span></p>
<p minmax_bound="true">提供一些热门的用户UI界面设计模式参考图，分类很详细，如果设计网站或UI界面可以上去找一些资源，很不错。&nbsp;</p>
<p minmax_bound="true"><img class="fit-image" alt="User Interface Design Patterns" src="http://static.oschina.net/uploads/img/201103/22085045_8oPB.jpg" minmax_bound="true" style="width: 498px; height: auto; maxwidth: 600px; minmaxwidth: 498px; minmaxheight: auto" /></p>
<p minmax_bound="true"><strong minmax_bound="true">Patternry</strong></p>
<p minmax_bound="true">官方地址：<span minmax_bound="true" style="color: #3366ff">http://patternry.com/</span></p>
<p minmax_bound="true">Patternry是用户界面设计模式库的目的是帮助解决常见的接口设计问题。</p>
<p minmax_bound="true"><img class="fit-image" alt="Patternry" src="http://static.oschina.net/uploads/img/201103/22085045_3hbB.jpg" minmax_bound="true" style="width: auto; height: auto; maxwidth: 600px; minmaxwidth: auto; minmaxheight: auto" /></p>
<p minmax_bound="true"><strong minmax_bound="true">Mephobox</strong></p>
<p minmax_bound="true">官方地址：<span minmax_bound="true" style="color: #3366ff">http://box.mepholio.com/</span></p>
<p minmax_bound="true">UI设计界面资源欣赏参考网站。&nbsp;</p>
<p minmax_bound="true"><img class="fit-image" alt="Mephobox" src="http://static.oschina.net/uploads/img/201103/22085045_0nBX.jpg" minmax_bound="true" style="width: 498px; height: auto; maxwidth: 600px; minmaxwidth: 498px; minmaxheight: auto" /></p>
<p minmax_bound="true"><strong minmax_bound="true">Android Asset Studio</strong></p>
<p minmax_bound="true">官方地址：<span minmax_bound="true" style="color: #3366ff">http://android-ui-utils.googlecode.com/hg/asset-studio/dist/icons-launcher.html</span></p>
<p minmax_bound="true">可以在线生成图表，只需要输入参数即可&nbsp;</p>
<p minmax_bound="true"><img class="fit-image" alt="Android Asset Studio" src="http://static.oschina.net/uploads/img/201103/22085045_jaNj.jpg" minmax_bound="true" style="width: 498px; height: auto; maxwidth: 600px; minmaxwidth: 498px; minmaxheight: auto" /></p>
<p minmax_bound="true"><strong minmax_bound="true">Mobility</strong></p>
<p minmax_bound="true">官方地址：<span minmax_bound="true" style="color: #3366ff">http://www.fullcreative.com/2010/10/mobility-a-free-set-of-mobile-ui-design-elements/</span></p>
<p minmax_bound="true">移动用户界面设计使用，可以输入参数进行测试，很方便&nbsp;</p>
<p minmax_bound="true"><img class="fit-image" alt="Mobility" src="http://static.oschina.net/uploads/img/201103/22085045_P4dj.jpg" minmax_bound="true" style="width: 498px; height: auto; maxwidth: 600px; minmaxwidth: 498px; minmaxheight: auto" /></p>
<p minmax_bound="true"><strong minmax_bound="true">Android UI Elements Set</strong></p>
<p minmax_bound="true">官方地址：<span minmax_bound="true" style="color: #3366ff">http://www.webdesignshock.com/freebies/free-photoshop-android-interface-gui/</span></p>
<p minmax_bound="true">可以自由设定Android操作系统的用户界面元素。&nbsp;</p>
<p minmax_bound="true"><img class="fit-image" alt="Android UI Elements Set" src="http://static.oschina.net/uploads/img/201103/22085045_1dAn.jpg" minmax_bound="true" style="width: 498px; height: auto; maxwidth: 600px; minmaxwidth: 498px; minmaxheight: auto" /></p>
<p minmax_bound="true"><strong minmax_bound="true">OSX Leopard GUI Set</strong></p>
<p minmax_bound="true">官方地址：<span minmax_bound="true" style="color: #3366ff">http://www.tutorialshock.com/freebie/mac-osx-leopard-gui-set/</span></p>
<p minmax_bound="true">该软件包含一些常用的Photoshop原文件和PNG文件，这些元素都是用来设计GUI界面的素材，通过该软件你可以快速制作出一些出色的界面&nbsp;</p>
<p minmax_bound="true"><img class="fit-image" alt="" src="http://static.oschina.net/uploads/img/201103/22085046_7nzx.jpg" minmax_bound="true" style="width: 498px; height: auto; maxwidth: 600px; minmaxwidth: 498px; minmaxheight: auto" /></p>
<p minmax_bound="true"><strong minmax_bound="true">ALL In One Web Elements Kit</strong></p>
<p minmax_bound="true">官方地址：<span minmax_bound="true" style="color: #3366ff">http://bestblogbox.com/freebies/all-in-one-web-elements-kit/</span></p>
<p minmax_bound="true">网页布局元素大集合,PSD文件。&nbsp;</p>
<p minmax_bound="true"><img class="fit-image" alt="ALL In One Web Elements Ki" src="http://static.oschina.net/uploads/img/201103/22085046_poT0.jpg" minmax_bound="true" style="width: 498px; height: auto; maxwidth: 600px; minmaxwidth: 498px; minmaxheight: auto" /></p>
<p minmax_bound="true"><strong minmax_bound="true">iPad GUI Set</strong></p>
<p minmax_bound="true">官方地址：<span minmax_bound="true" style="color: #3366ff">http://www.teehanlax.com/blog/2010/02/01/ipad-gui-psd/</span></p>
<p minmax_bound="true">iPad平板电脑上设计布局用的元素集合。&nbsp;</p>
<p minmax_bound="true" style="text-align: center"><img class="fit-image" alt="iPad GUI Set" src="http://static.oschina.net/uploads/img/201103/22085046_A85V.jpg" minmax_bound="true" style="width: 498px; height: auto; maxwidth: 600px; minmaxwidth: 498px; minmaxheight: auto" /></p>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.raymod.com/article/ck/102.htm" /> 
	  <id>http://www.raymod.com/default.asp?id=102</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[关于手机界面设计-输出篇]]></title>
	  <author>
		 <name>raymond</name>
		 <uri>http://www.raymod.com/</uri>
		 <email>ray@zq.gd</email>
	  </author>
	  <category term="" scheme="http://www.raymod.com/default.asp?cateID=3" label="策划" /> 
	  <updated>2012-03-03T02:08:07+08:00</updated>
	  <published>2012-03-03T02:08:07+08:00</published>
		  <summary type="html"><![CDATA[继续看图~~<br/><img src="http://www.raymod.com/attachments/month_1203/d2012332734.jpg" border="0" alt=""/><br/><img src="http://www.raymod.com/attachments/month_1203/42012332755.jpg" border="0" alt=""/><br/>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.raymod.com/article/ck/101.htm" /> 
	  <id>http://www.raymod.com/default.asp?id=101</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[关于手机界面设计-出图篇]]></title>
	  <author>
		 <name>raymond</name>
		 <uri>http://www.raymod.com/</uri>
		 <email>ray@zq.gd</email>
	  </author>
	  <category term="" scheme="http://www.raymod.com/default.asp?cateID=5" label="推广" /> 
	  <updated>2012-03-03T02:03:38+08:00</updated>
	  <published>2012-03-03T02:03:38+08:00</published>
		  <summary type="html"><![CDATA[UI关键...请看下图:<br/><img src="http://www.raymod.com/attachments/month_1203/r2012332336.jpg" border="0" alt=""/><br/>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.raymod.com/article/tg/100.htm" /> 
	  <id>http://www.raymod.com/default.asp?id=100</id>
  </entry>	
		
</feed>

