【总结】移动应用界面设计的尺寸设置及规范_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
【总结】移动应用界面设计的尺寸设置及规范
上传于|0|0|文档简介
&&移动应用界面设计的尺寸设置及规范
阅读已结束，如果下载本文需要使用2下载券
想免费下载本文？
定制HR最喜欢的简历
下载文档到电脑，查找使用更方便
还剩5页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢Android应用Icon大小在不同分辨率下定义-展翅飞翔
可以按照手机屏幕的标准把800x480理解为hdpi，480x320为mdpi，320x240为ldpi，根据最新的数据显示，Android所有手机中hdpi和mdpi占有九成以上的比例；系统版本，到今天2.1～2.3的比例也是绝对比例，所有我们可以以这个为依据来做相应的适配，对于这些数据，需要随时注意，特别是在Android有新版本推出后的几个月里，市场的变动相应的会活动一些，值得注意的是这个比例只是现在的一些数据，可能之后也会有些变动，所以需要事实根据新的市场环境进行适配。因为现在Android又添加了xhdpi（类似iPhone4的960x640的分辨率）的支持，假如我们在设计有（xhdpihdpi/mdpi/ldpi）四套不同dpi的图片资源时，因为之前提到以mdpi为蓝本做第一个dpi的设计，相应的我们把mdpi的比例设定为1，相应的不同dpi的图片资源尺寸的比例关系可以是xhdpi：hdpi：mdpi：ldpi等于2：1.5：1：0.75，也就是说，第一套图为mdpi的资源图片，xhpi可以大小调整到200%，hdpi可以调整到150%，ldpi则是75%；对于Android平台来说，不同分辨率下Icon的大小设计有着不同的要求，对于目前主流的HDPI即WVGA级别来说，通常hdpi的应用icon大小为72x72，而标准的mdpi即hvga为48x48，对于目前HTC和Motorola推出的一些QVGA的使用了ldpi，图标为32x32，常见的Android图标大小设计规范如下表所示:温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
天生我材必有用!
每个人都有自己的长处,只要我们认识到自己的兴趣所在并不断发展下去,不在乎外在的评价,只拥有一个真实的自我,那么我们会成功的,即使失败,我们也问心无愧。
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
&&&& &?xml&version="1.0"&encoding="utf-8"&?&& &&
&resources&& &&
&color&name="white"&#ffffff&/color&&!--白色&--&& &&
&color&name="ivory"&#fffff0&/color&&!--象牙色&--&& &&
&color&name="lightyellow"&#ffffe0&/color&&!--亮黄色&--&& &&
&color&name="yellow"&#ffff00&/color&&!--黄色&--&& &&
&color&name="snow"&#fffafa&/color&&!--雪白色&--&& &&
&color&name="floralwhite"&#fffaf0&/color&&!--花白色&--&& &&
&color&name="lemonchiffon"&#fffacd&/color&&!--柠檬绸色&--&& &&
&color&name="cornsilk"&#fff8dc&/color&&!--米绸色&--&& &&
&color&name="seaShell"&#fff5ee&/color&&!--海贝色&--&& &&
&color&name="lavenderblush"&#fff0f5&/color&&!--淡紫红&--&& &&
&color&name="papayawhip"&#ffefd5&/color&&!--番木色&--&& &&
&color&name="blanchedalmond"&#ffebcd&/color&&!--白杏色&--&& &&
&color&name="mistyrose"&#ffe4e1&/color&&!--浅玫瑰色&--&& &&
&color&name="bisque"&#ffe4c4&/color&&!--桔黄色&--&& &&
&color&name="moccasin"&#ffe4b5&/color&&!--鹿皮色&--&& &&
&color&name="navajowhite"&#ffdead&/color&&!--纳瓦白&--&& &&
&color&name="peachpuff"&#ffdab9&/color&&!--桃色&--&& &&
&color&name="gold"&#ffd700&/color&&!--金色&--&& &&
&color&name="pink"&#ffc0cb&/color&&!--粉红色&--&& &&
&color&name="lightpink"&#ffb6c1&/color&&!--亮粉红色&--&& &&
&color&name="orange"&#ffa500&/color&&!--橙色&--&& &&
&color&name="lightsalmon"&#ffa07a&/color&&!--亮肉色&--&& &&
&color&name="darkorange"&#ff8c00&/color&&!--暗桔黄色&--&& &&
&color&name="coral"&#ff7f50&/color&&!--珊瑚色&--&& &&
&color&name="hotpink"&#ff69b4&/color&&!--热粉红色&--&& &&
&color&name="tomato"&#ff6347&/color&&!--西红柿色&--&& &&
&color&name="orangered"&#ff4500&/color&&!--红橙色&--&& &&
&color&name="deeppink"&#ff1493&/color&&!--深粉红色&--&& &&
&color&name="fuchsia"&#ff00ff&/color&&!--紫红色&--&& &&
&color&name="magenta"&#ff00ff&/color&&!--红紫色&--&& &&
&color&name="red"&#ff0000&/color&&!--红色&--&& &&
&color&name="oldlace"&#fdf5e6&/color&&!--老花色&--&& &&
&color&name="lightgoldenrodyellow"&#fafad2&/color&&!--亮金黄色&--&& &&
&color&name="linen"&#faf0e6&/color&&!--亚麻色&--&& &&
&color&name="antiquewhite"&#faebd7&/color&&!--古董白&--&& &&
&color&name="salmon"&#fa8072&/color&&!--鲜肉色&--&& &&
&color&name="ghostwhite"&#f8f8ff&/color&&!--幽灵白&--&& &&
&color&name="mintcream"&#f5fffa&/color&&!--薄荷色&--&& &&
&color&name="whitesmoke"&#f5f5f5&/color&&!--烟白色&--&& &&
&color&name="beige"&#f5f5dc&/color&&!--米色&--&& &&
&color&name="wheat"&#f5deb3&/color&&!--浅黄色&--&& &&
&color&name="sandybrown"&#f4a460&/color&&!--沙褐色&--&& &&
&color&name="azure"&#f0ffff&/color&&!--天蓝色&--&& &&
&color&name="honeydew"&#f0fff0&/color&&!--蜜色&--&& &&
&color&name="aliceblue"&#f0f8ff&/color&&!--艾利斯兰&--&& &&
&color&name="khaki"&#f0e68c&/color&&!--黄褐色&--&& &&
&color&name="lightcoral"&#f08080&/color&&!--亮珊瑚色&--&& &&
&color&name="palegoldenrod"&#eee8aa&/color&&!--苍麒麟色&--&& &&
&color&name="violet"&#ee82ee&/color&&!--紫罗兰色&--&& &&
&color&name="darksalmon"&#e9967a&/color&&!--暗肉色&--&& &&
&color&name="lavender"&#e6e6fa&/color&&!--淡紫色&--&& &&
&color&name="lightcyan"&#e0ffff&/color&&!--亮青色&--&& &&
&color&name="burlywood"&#deb887&/color&&!--实木色&--&& &&
&color&name="plum"&#dda0dd&/color&&!--洋李色&--&& &&
&color&name="gainsboro"&#dcdcdc&/color&&!--淡灰色&--&& &&
&color&name="crimson"&#dc143c&/color&&!--暗深红色&--&& &&
&color&name="palevioletred"&#db7093&/color&&!--苍紫罗兰色&--&& &&
&color&name="goldenrod"&#daa520&/color&&!--金麒麟色&--&& &&
&color&name="orchid"&#da70d6&/color&&!--淡紫色&--&& &&
&color&name="thistle"&#d8bfd8&/color&&!--蓟色&--&& &&
&color&name="lightgray"&#d3d3d3&/color&&!--亮灰色&--&& &&
&color&name="lightgrey"&#d3d3d3&/color&&!--亮灰色&--&& &&
&color&name="tan"&#d2b48c&/color&&!--茶色&--&& &&
&color&name="chocolate"&#d2691e&/color&&!--巧可力色&--&& &&
&color&name="peru"&#cd853f&/color&&!--秘鲁色&--&& &&
&color&name="indianred"&#cd5c5c&/color&&!--印第安红&--&& &&
&color&name="mediumvioletred"&#c71585&/color&&!--中紫罗兰色&--&& &&
&color&name="silver"&#c0c0c0&/color&&!--银色&--&& &&
&color&name="darkkhaki"&#bdb76b&/color&&!--暗黄褐色&--&& &&
&color&name="rosybrown"&#bc8f8f&/color&&!--褐玫瑰红&--&& &&
&color&name="mediumorchid"&#ba55d3&/color&&!--中粉紫色&--&& &&
&color&name="darkgoldenrod"&#b8860b&/color&&!--暗金黄色&--&& &&
&color&name="firebrick"&#b22222&/color&&!--火砖色&--&& &&
&color&name="powderblue"&#b0e0e6&/color&&!--粉蓝色&--&& &&
&color&name="lightsteelblue"&#b0c4de&/color&&!--亮钢兰色&--&& &&
&color&name="paleturquoise"&#afeeee&/color&&!--苍宝石绿&--&& &&
&color&name="greenyellow"&#adff2f&/color&&!--黄绿色&--&& &&
&color&name="lightblue"&#add8e6&/color&&!--亮蓝色&--&& &&
&color&name="darkgray"&#a9a9a9&/color&&!--暗灰色&--&& &&
&color&name="darkgrey"&#a9a9a9&/color&&!--暗灰色&--&& &&
&color&name="brown"&#a52a2a&/color&&!--褐色&--&& &&
&color&name="sienna"&#a0522d&/color&&!--赭色&--&& &&
&color&name="darkorchid"&#9932cc&/color&&!--暗紫色&--&& &&
&color&name="palegreen"&#98fb98&/color&&!--苍绿色&--&& &&
&color&name="darkviolet"&#9400d3&/color&&!--暗紫罗兰色&--&& &&
&color&name="mediumpurple"&#9370db&/color&&!--中紫色&--&& &&
&color&name="lightgreen"&#90ee90&/color&&!--亮绿色&--&& &&
&color&name="darkseagreen"&#8fbc8f&/color&&!--暗海兰色&--&& &&
&color&name="saddlebrown"&#8b4513&/color&&!--重褐色&--&& &&
&color&name="darkmagenta"&#8b008b&/color&&!--暗洋红&--&& &&
&color&name="darkred"&#8b0000&/color&&!--暗红色&--&& &&
&color&name="blueviolet"&#8a2be2&/color&&!--紫罗兰蓝色&--&& &&
&color&name="lightskyblue"&#87cefa&/color&&!--亮天蓝色&--&& &&
&color&name="skyblue"&#87ceeb&/color&&!--天蓝色&--&& &&
&color&name="gray"&#808080&/color&&!--灰色&--&& &&
&color&name="grey"&#808080&/color&&!--灰色&--&& &&
&color&name="olive"&#808000&/color&&!--橄榄色&--&& &&
&color&name="purple"&#800080&/color&&!--紫色&--&& &&
&color&name="maroon"&#800000&/color&&!--粟色&--&& &&
&color&name="aquamarine"&#7fffd4&/color&&!--碧绿色&--&& &&
&color&name="chartreuse"&#7fff00&/color&&!--黄绿色&--&& &&
&color&name="lawngreen"&#7cfc00&/color&&!--草绿色&--&& &&
&color&name="mediumslateblue"&#7b68ee&/color&&!--中暗蓝色&--&& &&
&color&name="lightslategray"&#778899&/color&&!--亮蓝灰&--&& &&
&color&name="lightslategrey"&#778899&/color&&!--亮蓝灰&--&& &&
&color&name="slategray"&#708090&/color&&!--灰石色&--&& &&
&color&name="slategrey"&#708090&/color&&!--灰石色&--&& &&
&color&name="olivedrab"&#6b8e23&/color&&!--深绿褐色&--&& &&
&color&name="slateblue"&#6a5acd&/color&&!--石蓝色&--&& &&
&color&name="dimgray"&#696969&/color&&!--暗灰色&--&& &&
&color&name="dimgrey"&#696969&/color&&!--暗灰色&--&& &&
&color&name="mediumaquamarine"&#66cdaa&/color&&!--中绿色&--&& &&
&color&name="cornflowerblue"&#6495ed&/color&&!--菊兰色&--&& &&
&color&name="cadetblue"&#5f9ea0&/color&&!--军兰色&--&& &&
&color&name="darkolivegreen"&#556b2f&/color&&!--暗橄榄绿&--&& &&
&color&name="indigo"&#4b0082&/color&&!--靛青色&--&& &&
&color&name="mediumturquoise"&#48d1cc&/color&&!--中绿宝石&--&& &&
&color&name="darkslateblue"&#483d8b&/color&&!--暗灰蓝色&--&& &&
&color&name="steelblue"&#4682b4&/color&&!--钢兰色&--&& &&
&color&name="royalblue"&#4169e1&/color&&!--皇家蓝&--&& &&
&color&name="turquoise"&#40e0d0&/color&&!--青绿色&--&& &&
&color&name="mediumseagreen"&#3cb371&/color&&!--中海蓝&--&& &&
&color&name="limegreen"&#32cd32&/color&&!--橙绿色&--&& &&
&color&name="darkslategray"&#2f4f4f&/color&&!--暗瓦灰色&--&& &&
&color&name="darkslategrey"&#2f4f4f&/color&&!--暗瓦灰色&--&& &&
&color&name="seagreen"&#2e8b57&/color&&!--海绿色&--&& &&
&color&name="forestgreen"&#228b22&/color&&!--森林绿&--&& &&
&color&name="lightseagreen"&#20b2aa&/color&&!--亮海蓝色&--&& &&
&color&name="dodgerblue"&#1e90ff&/color&&!--闪兰色&--&& &&
&color&name="midnightblue"&#191970&/color&&!--中灰兰色&--&& &&
&color&name="aqua"&#00ffff&/color&&!--浅绿色&--&& &&
&color&name="cyan"&#00ffff&/color&&!--青色&--&& &&
&color&name="springgreen"&#00ff7f&/color&&!--春绿色&--&& &&
&color&name="lime"&#00ff00&/color&&!--酸橙色&--&& &&
&color&name="mediumspringgreen"&#00fa9a&/color&&!--中春绿色&--&& &&
&color&name="darkturquoise"&#00ced1&/color&&!--暗宝石绿&--&& &&
&color&name="deepskyblue"&#00bfff&/color&&!--深天蓝色&--&& &&
&color&name="darkcyan"&#008b8b&/color&&!--暗青色&--&& &&
&color&name="teal"&#008080&/color&&!--水鸭色&--&& &&
&color&name="green"&#008000&/color&&!--绿色&--&& &&
&color&name="darkgreen"&#006400&/color&&!--暗绿色&--&& &&
&color&name="blue"&#0000ff&/color&&!--蓝色&--&& &&
&color&name="mediumblue"&#0000cd&/color&&!--中兰色&--&& &&
&color&name="darkblue"&#00008b&/color&&!--暗蓝色&--&& &&
&color&name="navy"&#000080&/color&&!--海军色&--&& &&
&color&name="black"&#000000&/color&&!--黑色&--&& &&
&/resources&&&
Icon大小：
阅读(1460)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
loftPermalink:'',
id:'fks_',
blogTitle:'Android系统中自带的图标&一些预定义样式&参考颜色值',
blogAbstract:' \r\n原文：
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}天极传媒：天极网全国分站
您现在的位置：
& &&浅谈Android系统的图标设计规范
浅谈Android系统的图标设计规范天极网软件频道 09:43
　　更多精彩相关文章推荐：
　　目前移动平台的竞争日益激烈，友好的可以帮助提高用户体验满意度，图标Icon是用户界面中一个重要的组成部分，今天我们来研究和学习一下Android系统的图标设计规范。在探讨Android的icon设计之前，我们有必要先了解Android的界面是如何适配多样化屏幕的。
　　适配性
　　由于同一个UI元素(如100 x100像素的图片)在高精度的屏幕上要比低精度的屏幕上看起来要小，为了让这两个屏幕上的图片看起来效果差不多，可以采用以下两种方法：　　程序将图片进行缩放，但是效果较差。　　为这两个精度屏幕的各提供一个图片。
　　但是屏幕的参数多样化，如果为每一个精度的屏幕都设计一套icon，工作量大并且不能满足程序的兼容性要求，势必要对屏幕的分级，如在160dpi和180dpi的手机屏幕上采用同一套icon，当这套icon在240dpi效果满足不了设计要求，就需要另做一套稍大些的icon。
　　在Android 1.5以及更早的版本中，只支持3.2″ 屏幕上的HVGA (320×480)分辨率，开发人员也不需要考虑界面的适配性问题。从Android 1.6之后，平台支持多种尺寸和分辨率的设备，这也就意味着开发人员在设计时要考虑到屏幕的多样性。
　　为了简化设计并且兼容更多的手机屏幕，平台依照尺寸和分辨率对屏幕进行了区分：
　　三种尺寸：大，中，小。　　三种精度：高(hdpi)，中(mdpi)和低(ldpi)。
　　程序可以为这三种尺寸的屏幕提供默认资源，如有需要，还可以为各种精度的屏幕提供资源。在运行时，系统会根据屏幕布局加载正确尺寸或者精度的图片。
　　Android支持的屏幕
　　Android程序为最佳显示效果提供了三种方法：
　　1.图片缩放
　　基于当前屏幕的精度，平台自动加载任何未经缩放的限定尺寸和精度的图片。如果图片不匹配，平台会加载默认资源并且在放大或者缩小之后可以满足当前界面的显示要求。例如，当前为高精度屏幕，平台会加载高精度资源(如图片)，如果没有，平台会将中精度资源缩放至高精度。
　　2.自动定义像素尺寸和位置
　　如果程序不支持多种精度屏幕，平台会自动定义像素绝对位置和尺寸值等，这样就能保证元素能和精度160的屏幕上一样能显示出同样尺寸的效果。例如，要让WVGA高精度屏幕和传统的HVGA 屏幕一样显示同样尺寸的图片，当程序不支持时，系统会对程序慌称屏幕分辨率为320×533，在(10，10)到(100，100)的区域内绘制图形完成之后，系统会将图形放大到(15，15)到(150，150)的屏幕显示区域。
　　3.兼容更大尺寸的屏幕
　　当前屏幕超过程序所支持屏幕的上限时，定义supports-screens元素，这样超出显示的基准线时，平台在此显示黑色的背景图。例如，WVGA 中精度屏幕上，如程序不支持这样的大屏幕，系统会谎称是一个320×480的，多余的显示区域会被填充成黑色。
　　但为了达到最佳的显示效果，最好的方法还是设计多套图片。那就有必要对于所有的屏幕依据精度值进行分级(高中低)，之后再设计三套icon：
　　先为主流的中精度屏幕(HVGA)设计一套icon，确定图片的像素尺寸。
　　为高精度屏幕将图片放大到150%，为低精度屏幕将图片缩小至75%。
　　将这三套资源放置到程序的三个文件夹下 ：res/drawable-mdpi/ 、res/drawable-hdpi/、 res/drawable-ldpi/。程序在运行时，平台会根据屏幕的精度调取合适的icon。
　　设计指南
　　Android标准icon
　　Launcher Icon是程序主界面上的功能图标，Android对于各个icon的风格有一定的要求：
　　符合当下的流行，避免过度使用隐喻。
　　高度简化和夸张，小尺寸图标也能易于识别，不宜太复杂。
　　尝试抓住程序的主要特征，比如音像作为音乐的icon。
　　使用自然的轮廓和形状，看起来几何化和有机化，不失真实感。
　　Icon采用前视角，几乎没有透视，光源在顶部。
　　不光滑但富有质感。
　　正确和错误的icon
　　另外，所有的icon都有文字标签，不要在设计时把文字也放到icon中。
　　Launcher Icon通常是一个较大的标准图标中包含一个小图标，使用一个中性色彩和一个主要色彩，并保持高度的对比，不宜过度饱和。
　　推荐色值
　　尺寸和定位
　　Launcher icons要有多样化的形状和样式，但又要形成统一的视觉风格，其尺寸和定位也用统一：
　　(Full Asset)红色边框为图标尺寸
　　(Icon)蓝色边框是图形尺寸，比图标尺寸稍小，图形之外的空间用于显示阴影和特殊效果。
　　(Square Icon)橙色边框是另外一种图形尺寸。两种类型的图形尺寸可以达到统一的视觉权重。
　　Icon dimensions for high-density (hdpi) screens:
　　Full Asset: 72 x 72 px
　　Icon: 60 x 60 px
　　Square Icon: 56 x 56 px
　　Icon Dimensions for medium-density (mdpi) screens:
　　Full Asset: 48 x 48 px
　　Icon: 40 x 40 px
　　Square Icon: 38 x 3
　　Icon Dimensions for low-density (ldpi) screens:
　　Full Asset: 36 x 36 px
　　Icon: 30 x 30 px
　　Square Icon: 28 x 28 px
　　Android的标准图标模板，在此基础上绘制icon，后期机上阴影效果。
　　WVGA (高精度) 屏幕的阴影:
　　Effect: Drop Shadow　　Color: #000000　　Blend Mode: Multiply　　Opacity: 75%　　Angle: 90°　　Distance: 2px　　Spread: 0%　　Size: 5px
　　另外，还有Menu icon 、Status bar icon 、Tab icon、 Dialog icon 和List view icon等，今后我们会再介绍。
　　最后顺带介绍一点iPhone图标的设计建议。
　　iPhone对于icon的设计建议：富有吸引力和可识别性。由于app软件可供全球的用户下载，所以在设计时，也要考虑到用户不同的文化背景。
　　程序icon的设计：
　　57×57像素，直角。
　　无发光效果。
　　无透明度。
　　将图片命名为Icon.png，放置在程序的资源包中，iPhone os会自动生成一个icon。
　　iPhone的icon设计就这么简单，iPhone的屏幕只有320×480像素，所以程序没有适配性问题。
　　参考文章：
　　《Icon Design Guidelines, Android 2.0》
　　《iPhone human interface guidelines》
（作者：闪吧 zystoo 译责任编辑：杨玲）
天极新媒体&最酷科技资讯扫码赢大奖
* 网友发言均非本站立场，本站不在评论栏推荐任何网店、经销商，谨防上当受骗！
Win10系统在Win8的基础上对界面、特性以及跨平台方面做了诸多优化。
手机整机DIY企业级
pc软件手机软件