详析手机端的8PX原理

 

  淘宝网的官方Blog有篇「一张图解释手机端8px原理」,简单来说就是把 iOS 和 Android 放在一起比较。同时探讨 1x、2x、ldpi、mdpi、hdpi、Xhdpi、xxhdpi 的尺寸与分辨率。本文就以我个人角度提出看法。(图片取自 Android – Devices and Displays)

  8px 的文章内容就我的理解是基于「iOS 接口和 Android 接口长得完全一样」的情况下进行开发所写。iOS 和 Android 是两种完全不同的系统,用户操作习惯完全不同,在开发上本来就不应该把这两套做得完全一模一样。退个一百步、就算因为客户预算不足导致接口相同,也没有这么愉快的一套打天下方式。

  屏幕尺寸换算

  先讲最容易理解的 iOS:1x(320x480px)、@2x(640x1136px),就这两种尺寸。顶多留意一下 iPhone4 的 640×960,视签约内容而定,仍属于 @2x 的制图规范。要注意的就是「做大缩小」时所有尺寸单位要是双数,包含距离、坐标、切图等等(字级倒是允许0.5pt)。现在的 Store 审核就算不做 1x 尺寸也能通过,但 iOS 工程师在刻接口时仍就以 1x 为基准,坐标什么的还是要用1x 当单位。所以 UI 在做 @2x 大图时还是乖乖的把所有的数字都设定成双数吧。

  Android 比较麻烦,屏幕尺寸和机种非常多,不可能每种尺寸都出一版 PSD,通常签约时就会载明在「特定某几支手机」一定没问题、其他手机尽量完美运行但不保证。我在做 Android 接口时会出 1.5x、2x、3x 这三种尺寸的切图。1x 的机型已经不多见了,何况 0.75x 的 ldpi?(官方图解上已拿掉ldpi、增加 4x 的xxxhdpi。)(每个国家国情不同,这部份要研究一下当地机型尺寸。)

  dpi 对 UI 来说影响不大,最大的问还是在屏幕尺寸身上。我自己常用的尺寸如下,px 尺寸也许和其他人惯用的不太一样,但无影响,Android 屏幕尺寸本来就很多种,所以才需要 9-patch 来辅助。

  mdpi 160dpi (1x) 480×320

  hdpi 240dpi (1.5x) 800×480

  xhdpi 320dpi (2x) 1280×720

  xxhdpi 480dpi (3x) 1920×1080

  Android 屏幕尺寸

  此部份感谢友人 Takeru 说明。

  为了适应android百花齐放的屏幕分辨率与屏幕尺寸,都是以dpi(Dot peer inch)为基准;

  在Guideline的定义中 http://blog.csdn.net/moruite/article/details/6028547 这边有dpi的计算方法;

  dpi会受到屏幕尺寸实际大小的影响;

  即使同样分辨率在不同的屏幕尺寸中,会得到不同dpi;

  已有网站整理目前各机种的屏幕分辨率和dpi;

  所以当dpi在480~320之间时,系统会以xxhdpi的图档为第一优先;

  至于1920×1080则是目前最常见的分辨率;

  之后,320~240之间,则是以xhdpi的图档为优先,以此类推;

  同样的,在xhdpi中1280×720是最常见的分辨率;

  所以,最初列表中的分辨率为常见的分辨率,并非绝对;

  图档文件夹虽是以dpi作为区隔,都是以一个范围,非单一值;

  (大部份都是以此为标准,当然也有例外,例如:note2);

  图片放大缩小

  为了 iOS 和 Android 总共只出一套psd、不能使用 9-patch 延伸的图片部分,在 1x 情况下都要以 4px 为单位设计,做 2x 图时是以 8px 当单位。所有图片能用向量制作就用向量,设定 4px 是「 为了避免因比例换算产生 0.X px 导致图片模糊失真 」(px 一定是整数、没有小数点),而不是最后的切图产出。切图一样要针对不同分辨率切几套出来,别以为用 4px 当单位、整个 psd 文件放大 2 倍,像素 icon 图就不会糊掉了。

  切图和标示文件不可能共享

  光切图方式就不一样了是要怎么用同一份标示文件?Android 有个独有的切图方式称「9-patch」,可以让切图自动延展。iOS 同样也有延展设计,但标示方式和 Android 不同,我另外开文写这部分。(有的 iOS RD 会要求使用坐标来制作标示文件,但 Android RD 没办法使用坐标。)

  即使是相同的设计也无法使用同一套切图,举个例子:就以按钮来讲,iOS 可以把文字直接和底图上切成一张图,不管是 iPhone 5s 或 iPhone 4 上文字边缘依然锐利。但若希望 Android 每台手机都能看到锐利的文字,底图和文字就要分开,给 RD 的切图就是标了 9-patch 的纯底图一张,文字必需由系统产生才能保持绝对清晰。

  在无法使用内建文字的情况下,Android 底图和文字要分开切、不能使用 9-patch。9-patch 只能延伸底图,如果延伸很长的话,会变成底图很大字还是很小的情况。

  结论

  为了 RD(工程师)好,还是把 iOS 和 Android 分开看待…直接拿 iOS 的切图和标示文件给 Android 的 RD 就等着被退货吧。

  iOS 和 Android 分别设计接口。

  做 1x 再放大给其他尺寸使用最安全。

  做大缩小的情况下所有数值一定要设成双数。

  研究一下如何放大缩小图片无损吧,我有写过教学文。

  iOS、Android 一定要「分开」切图。

  标示文件一定要 iOS、Android 「分开」。

  再强调一次 iOS 接口本来就不应该和 Android 长得一样 。光是实体的 Back 就有差。就某些 RD 的角度会觉得出一版给两家平台使用维护很方便,是 UI 就该仰天长啸「这不优雅~」。

时间: 2024-09-23 21:18:04

详析手机端的8PX原理的相关文章

手机端Web开发中遇到的那些问题

retina 图片兼容 这个 feature 应该不仅仅只关心 手机端, 而且还包括PC, 因为苹果不仅仅在手机端 (从 iphone4 开始), 而且在, MAC 上也使用了 retina. 首先, retina 的意思就是, dpr(device-pixel-ratio)是普通屏幕的两倍. 对比于 CSS 来说就是, 原来在 css 中设置的是 1px , 在实际的屏幕显示时, 也是 1px. 但是, 在 retina 下, css 的 1px 就是实际屏幕的 2px. 这样的结果就是: 有

semi-sync插件崩溃导致MySQL重启故障详析

本文讲的是semi-sync插件崩溃导致MySQL重启故障详析 导读 semi-sync插件崩溃导致MySQL重启的故障分析全过程~ 作者:刘安 现为爱可生高级测试工程师,拥有丰富的自动测试开发经验:曾先后在文思海辉.Splunk担任测试工程师. 一.起因: 在公司测试MySQL高可用组件时发现一个异常.如下: 停止从库,高可用组件将从库自动启动后,主库发生了重启.然而,正常情况下,主库不应发生重启. 二.环境: 1.OS: CentOS release 6.7 (Final): 2.MySQL

web手机端页面如何制作

问题描述 web手机端页面如何制作 以前都是做电脑版的页面,第一次做手机端页面,不知道如何下手,求指教,有没有设么好的书籍推荐,手机端页面要注意什么...谢谢 解决方案 手机端页面收获手机端调试页面[前端] 手机HTML页面制作经验 解决方案二: 手机页面和pc页面的原理是一样的,只是你需要注意交互和尺寸.用bootstrap或者jquery mobile一类的框架 解决方案三: 楼上的,我想问一下手机端web如果不用那些框架该如何做,要设置高度吗?

手机端产品交互设计:手机端产品翻页控件的设计

文章描述:对手机端产品翻页控件做的一些粗浅整理归纳.具体到设计应用中,我们需要根据产品性质.用户操作使用情景.手机和操作平台本身的特性等具体情况来考虑设计使用翻页控件. 翻页控件在很多手机端产品中属于容易被忽视但又不可或缺的一部分,今天就手机端产品翻页控件的分类和使用谈谈自己一些粗浅的看法. 在手机端产品中,翻页控件的展示形式五花八门:以所展示信息内容的性质和用户的使用情境作为维度划分的话,大致可以分为这样几个类型: A:时效类翻页控件 产品所展示的信息在"时效性""关联度&

手机端页面rem宽度自适应脚本

  网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方.重点给大家介绍下rem.有需要的小伙伴可以参考下. 什么是rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对大小就可以实现自适应了,就不用什么媒体查询那些的. 我们的设计图往往宽度是640或者其他尺寸的,不过我建议是用这个尺寸,以640为基准,以小到大,实现自适应,下面实现的比例为1re

横竖屏切换-android app启动时根据是手机端还是Pad端进行横竖屏判断,以及不同布局

问题描述 android app启动时根据是手机端还是Pad端进行横竖屏判断,以及不同布局 如何判断一个app,如果运行在平板上,就横屏展示,如果运行在手机上就竖屏展示.而且在这两个端不允许横竖屏切换.而且MainActivity得长的不一样.意思就是要有两套布局.需要建什么资源文件夹 解决方案 http://jingyan.baidu.com/article/455a9950aa8aaea16627788a.html

html5-求手机端图片上传组件

问题描述 求手机端图片上传组件 最近做了一个基于微信的移动端小项目,目前需要实现一个图片的上传功能,一共需要上传4张图片,目前html自带的文件域虽然可以实现,但四张图片同时提交恐怕会很慢,同时这样做图片上传也没有进度条效果,显得很单调,想在网上找一个上传组件,html5也好,不知道哪位大牛能够给我提供一个移动端兼容性最好的图片上传组件,代码最精简易懂,我后台是用PHP需要开发的,最好有一个完整的案例,我网上找了好多基本上没有看到满意的,求大神帮忙,这个问题困扰我好久了,知道的一定要给我回复,谢

基于zepto或jquery的手机端弹出框成功,失败,加载特效

下载地址: http://download.csdn.net/detail/cometwo/9436014) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maxim

web开发 搜索-手机端如何将个别页面的滑动效果转为单机事件?

问题描述 手机端如何将个别页面的滑动效果转为单机事件? 大神求解!!!请耐心看完!!!不难只是我比较笨,求解.就比如说有1个大的div内嵌5个小的div,每个小的div里有张背景图就变成5个页面,前3页可以上下滑动,第4页只能下滑不能上滑,因为第4页里嵌了一个表单,有一个按钮,点击按钮跳到下一页.我在第四页拦截了滑动事件,结果上下都滑动不了,但是单机按钮怎么显示下一页呢?