移动应用界面设计的尺寸设置及规范.pdfVIP

【总结】移动应用界面设计的尺寸设置及规范 时间 2014-05-04 15:15:07 青溪 ·札记 原文 http://jinjuan.me/appdesign-sizesetting/ 主题 用户界面设计 移动应用 刚接触移动应用的界面设计， 最先跳入脑海的疑问是： 画布尺寸设计多大 （特 别是 Android ）、图标和字体大小怎么定、需要设计多套设计稿么、如何切图以 配合开发的实现？ 本篇将结合 iOS 和 android 官方的设计规范、 搜集的资料以及工作中的摸索， 来 分享移动应用界面设计中的尺寸规范等问题， 希望能给移动端的新手设计师些许 指引。若有不当之处，欢迎斧正。 一、 android 篇 1、android 分辨率 Android 的多分辨率，一向是设计师和开发者非常头疼的事儿。尽管如此，对 于多分辨造成的复杂问题， 也是大家要优先解决的。 Android 支持多种不同的 dpi 模式： ldpi 、mdpi 、hdpi 、xhdpi 、xxhdpi 、xxxhdpi 注意， ppi 、dpi 是密度单位，不是度量单位 ： * ppi (pixels per inch) ：图像分辨率 （在图像中，每英寸所包含的像素数目） * dpi (dots per inch) ： 打印分辨率 （每英寸所能打印的点数，即打印精度） dpi 主要应用于输出，重点是打印设备上； ppi 对于设计师应该比较熟悉， photoshop 画布的分辨率常设置为 72 像素 /英寸，这个单位其实就是 ppi 。尽管 概念不同，但是对于移动设备的显示屏，可以看作 ppi=dpi 。 ppi 的运算方式是： PPI = √（长度像素数2 + 宽度像素数 2） / 屏幕对角线英 寸数。即：长、宽各自平方之和的开方，再除以屏幕对角线的英寸数。 以 iphone5 为例，其 ppi= √（1136px2 + 640px2 ）/4 in=326ppi （视网膜 Retina 屏） 对于 android 手机，一个不确切的分法是， 720 x 1280 的手机很可能接近 320 dpi （xhdpi 模式）， 480 x 800 的手机很可能接近 240 dpi （hdpi 模式），而 320 x 480 的手机则很接近 160 dpi （mdpi 模式）。 来自友盟指数 2014 年 3 月份的数据（ 戳这里看最新数据 ）： 480 x 800 的手机占比最高为 31.9% ，720 x 1280 的手机占比为 16.5% 位居第二， 而 240 x 320 的手机占比最少为 1.0% 。xxdhpi 模式的高分辨率 1080 x 1920 手机占比也越来越高，目前为 6.1% 。 2、单位换算方法 android 开发中，文字大小的单位是 sp ，非文字的尺寸单位用 dp ，但是我们 在设计稿用的单位是 px 。这些单位如何换算，是设计师、开发者需要了解的关 键。 * dp ：Density-independent pixels ，以 160PPI 屏幕为标准，则 1dp=1px 。dp 和 px 的换算公式 ：dp*ppi/160 = px 。对于 320ppi 的屏幕， 1dp x 320ppi/160 = 2px 。 * sp ：Scale-independent pixels ，它是安卓的字体单位， 以 160PPI 屏幕为标准， 当字体大小为 100% 时， 1sp=1px 。s