得知互动
标题: 移动端美工画布设计尺寸多少合适【前端】 [打印本页]
作者: swmozowtfl 时间: 2015-5-27 22:07
标题: 移动端美工画布设计尺寸多少合适【前端】
不保证100%准确性，但是欢迎探讨。
- b% a/ E, n8 C
6 I& c0 v5 ~* f& ?% s此文主要针对于没有移动端经验的前端设计师，所以会尽量写的浅显易懂简单粗暴，技术型的**座勿喷~~~! @$ }6 _6 D& g( _3 u# P$ _
以下讨论暂时不涉及响应式开发。3 P5 m6 a0 R1 b$ u5 K6 J
! Q4 g+ [8 c- J' z4 W" F% d伸手党以及没耐心的请直接下翻至懒人部分。
, z" y* N# ]4 H r
1 Y; q, X0 l/ `: J; b. J6 {------------------------------------------------------我是华丽的分割线------------------------------------------------------------
7 z* S0 {6 `; ~8 \$ L8 K% r% ]' I7 A4 e* e8 E
前端或美工在设计时通常会在psd里设定美工稿的画布尺寸。以pc端的网站为例，美工的psd的设计稿的宽度通常为1002px或者1200px。设定这个宽度的原因很简单，因为对于大部分的pc端用户而言，1440*900是主流台式机的分辨率（1440是宽度），1366*768是主流的笔记本电脑分辨率（1366是宽度）。
/ L2 h7 G9 X: @& v+ g1 I那么psd即使是1200px的宽度，也不会在1440和1366的主流电脑上产生横向滚动条，并且网站居中后还会左右留白，视觉效果非常好。
: K4 ^5 U9 M( G, H1 p& v3 o7 K" k: z- f6 s: S9 g
一句话总结，1002或者1200的psd宽度，将会在绝大部分的主流台式机和笔记本电脑上完美兼容。
4 h1 m! [8 I* f' h& q, J1 [1 G7 m$ P# V8 s6 K& n" @6 J D( H
以上道理非常简单，相信大部分技术人员也都明白，那么接下来进行一个小小的扫盲，就是1200px的画布尺寸究竟在pc端是如何被解析的，单纯的是因为显示器大小不一样吗？还是显示器的分辨率不一样？其实都不是，根本原因是在于浏览器会对于你的画布尺寸进行二次解析，而pc端浏览器解析的其中一个重要依据就是你的显示器的分辨率，而显示器默认的分辨率通常又和你的显示器的尺寸大小有关。% M. Q, _# s# J1 B* v
（显示器尺寸决定显示器默认分辨率，显示器分辨率决定浏览器解析像素）。
, e8 I" E' h( a3 j% y- Z+ e: @: q8 j4 t; o1 V7 y
那么理清了这个思路后我们可以得出一个结论，就是pc端的画布尺寸将会在浏览器根据你的显示器分辨率进行1:1的等比解析。
/ B4 a* \* x& y5 j h( ^% ~8 A; W% m, ?7 U; Z" U
. K; }* D6 K! l
-------------------------------------------------------我是华丽的分割线------------------------------------------------------
- R8 m' v: F. \, n
) g6 v! `1 [8 M7 r% W) i9 C0 q: \+ S* |/ c3 q5 m
* E' z; Z" [$ ^( q( ?# V/ |
废话说完理清思路之后，我们来说一说移动端。7 ]( C3 F8 J$ S, H) U0 M7 K+ K& l
3 G% a+ j1 F0 x) i6 S3 m2 g! j8 Z- U. X+ d1 h0 D# K8 z
移动端和pc端的本质区别就是pc端的浏览器解析宽度是和web端的画布宽度进行1:1的解析的。 但是移动端却不是1:1解析的，具体这个比例是多少牵涉到移动端一个独有的参数：像素密度。) v! O2 O7 M: }! n5 T3 F
; x5 S ~" [/ G U
大家在买手机的时候都会看到这样一个英文单词：PPI ，这个单词相信很多人都见过，就是指的像素密度。
+ z3 ?6 j7 `& s: f为防止概念过于抽象，我们仍旧举例说明，以iphone5的参数为例，ip5主屏分辨率：1136x640像素（640是宽度），主屏尺寸：4.0英寸，像素密度：320ppi。具体计算公式为：
9 D- @$ g! e7 T
- ~ F: [! e- W: X) g. W4 k. N$ t8 i
/ s( X3 r2 D; p( N7 \( y5 R# W9 Z1 z
当像ppi为320ppi的时候移动端浏览器是如何解析宽度的呢？已经不是pc端1:1的等比解析了，而是1:2的比例解析（为什么是1:2随后再说）。1200像素宽度的画布将会在320ppi的手机上自动被放大2倍，成为2400像素的宽度。但是ip5的宽度却只有640而已，所以1200像素的画布将会在手机上出现巨长的滚动条。（请再次理清一个思路，这个像素或者分辨率是最后是通过浏览器进行二次解析的，所以手机上640的像素的实际宽度是不等同于pc端640的像素的实际宽度，两者都被各自平台的浏览器进行了二次解析，所以跨平台进行横向对比是没有意义的）。具体多少ppi会放大多少倍数的计算公式如下：, _0 D/ h4 E. H; x b) d
. A" a5 D4 ]; {7 V% w" |7 i# P6 t- y( q3 N6 b" J
* c; b- h% N) G7 B$ F以下是苹果常见机型和安卓旗舰机型：
! w) p! F' Q: p. \/ T: u" m
4 t) W: o3 ~# k: ?2 d" l& `9 R
2 ~2 Q5 z! o. d3 ~, Z大家可以比较明了的看出来，320的宽度乘以放大倍数之后基本正好等于主屏宽度或者略小于主屏宽度。
5 ~! K: N0 Q+ Y4 f+ F2 U1 I6 v2 |& F* q1 g) |8 N2 F% o! t1 ~# v
在ios平台之上，苹果把ppi稳定在了326左右，同样也意味着苹果把手机端的放大倍数给稳定在了2倍上下，而这个326ppi就是苹果声称的“视网膜屏”。换句话说，开发者在ios平台进行开发的话，ios平台本身的规范性为开发者规避了很多兼容性的风险。
* N; ^% l3 B9 l而反之安卓呢？各种百花齐放，各种分辨率、各种ppi参差不齐，开发者想在安卓平台上面做到完美兼容？恐怕只有一个解决方案了：“呵呵~”1 ] n: ~0 ?( j% h$ w0 G
以上只是从前端的一个小小的角度衡量ios和安卓平台在于开发者的本质区别，接下来我们进入正题。. J- {/ `3 |: b1 U2 @$ C
. w/ M, e1 v7 K( Z0 C
# P/ f- R' W6 @5 V
0 a+ K3 l, L' e8 S; `# P& ~而反之安卓呢？各种百花齐放，各种分辨率、各种ppi参差不齐，开发者想在安卓平台上面做到完美兼容？恐怕只有一个解决方案了：“呵呵~”
8 R5 f0 F# R. O# m; E8 H以上只是从前端的一个小小的角度衡量ios和安卓平台在于开发者的本质区别，接下来我们进入正题。
3 N) y/ V! @( H: e3 n$ z( }: g' H0 T B$ d i* s) D$ n
+ g4 l. W& G/ G+ D/ h1 q1 |$ w* I↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓懒人直接看这里↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓8 N/ O/ [( \' q8 t
: i. [$ w! v5 k" z, _8 a
& _4 l! k* }6 s i3 Z c, n
有没有一种移动端的web前端尺寸能够比较简单粗暴的解决问题呢？其实还是有的，那就是大家看到了我上面的表格有写到“320像素”。这个320像素的尺寸一方面能够满足所有ios手机端的web展示，另一方面在安卓端展示时，被放大后虽然左右会有留白（针对于高ppi），但是整体来说不会影响大体的展示效果，不会出现滚动条等及其恶劣的影响用户体验的情况（至少我可以接收左右留白）。
2 t% D; R* M. L- r0 a F) k$ C. [' W
1 Q& a$ l$ T4 p1 F0 G+ f& ?一句话概括：320的宽度的画布在苹果手机上完美兼容；在安卓手机上大部分兼容，越是好的安卓手机，ppi越高，左右留白可能越多。
6 X$ ^. \( e! N7 G. [$ i' O, i: `
320宽度的好处：简单粗暴，一套前端方案解决所有问题，虽然并不那么完美，但是属于可接受范围之内。/ A/ w" [$ m8 o% T, h
320宽度的坏处：所有的图片都会被强行扩放到2倍以上，导致图片失真，ppi越大，失真越严重；且个别安卓机型展示时左右留白可能会比较大。+ k# m' T$ V$ R V* \ o
/ V) f' r$ X- R4 M) P# H" r不过图片失真我个人真不觉得一定是个坏事，就目前而言国内大部分用户流量还是以2g和3g网络为主，4g根本没有普及，wifi也基本仅限于家里。所以大部分用户的流量和加载速度是个大问题，当你真的把普通图片换成高清大图，换来的代价可能是用户加载时间需要再多个三五秒，你可以想象一下，有几个人会盯着一个loading看5秒还不退出？别那么看得起互联网用户的耐心。7 E+ }8 o3 z3 x$ e9 z; M$ |
反之高清图片和普通图片被压缩在一个5寸的手机屏幕上进行展示的时候可能只有一平方厘米那么大，除非你仔细看，否则高清图片和普通图片在5寸屏幕上实际显示的差异恐怕还真不是一眼就能看的出来的。# w9 ~! Q, X* ?$ w
. Q- z# ^% {8 \; [, l--------------------------------------------------------响应式开发---------------------------------------------------------+ O, G; l' J3 ?8 ]
纯百分比做不是不行，而是局限性太大，另外一种思路就比较暴力了：: a3 K9 O$ O4 ` {5 q# }2 g3 u/ o4 c6 o# ^
/ K# K4 v/ ^( D @1 U7 a. x$ Q9 O
当检测到是ios平台时，执行paln a，
# ` T5 Z; e! C/ Q当检测到是小米4时，执行paln b，
4 V5 J# Z) V8 C" C* f1 Y0 p当检测到是魅族4时，执行paln c，
, W% Z1 t3 H0 d' \3 F/ W" a0 z当检测到是note4时，执行paln d，
/ [) b2 G) H7 k) C以此类推......
6 y6 G! C6 p! Q+ L/ `大体上有个四五种方案基本上安卓上面常见的情况也就都被概况了，但是工程量就得增加四五倍了。而且即使增加了四五倍的工作量，你仍然无法完美解决所有情况，所以**座的开发者看到安卓请绕行，真爱生命，远离安卓。不要忘了，这才是项目初期做个前端而已，中后期时候安卓的弊端才会真的让你欲哭无泪。
5 M/ l0 {- ^; C$ @ k3 K3 K, G' V+ r4 i$ e0 c
( N: Q+ U5 z# }: q-----------------------------------------------------------补充一下----------------------------------------------------------
( E6 O1 j: M Z% x5 J2 H. k) M9 ~$ G5 f' V
移动端浏览器很给力，各种css3和html5大胆的用就行，ie6系的问题将一去不复返~~
- j, L, c% R1 N7 `8 e3 L" r: G+ f
原文地址：http://qf100站长论坛/news/297 转载请注明出处。
' ^; {1 p' z* _% e. ? N
; [) X- B @! }" Q# H) _& p搜外论坛原创作者：青峰在线
0 A% p1 `5 n+ x1 i# t! A8 ^! P
% x. L) p- H- A" ?日期：2015-01-28
作者: tohme 时间: 2015-6-18 12:57
呵呵 放心 如我算错 你以后来砸我的帖子 呵呵
作者: seazvyt 时间: 2015-6-18 13:00
真的 好久都没有这么笑了~ 好开心哦
作者: wwzcdenleclv 时间: 2015-6-18 13:01
你还想说什么啊....
作者: seazvyt 时间: 2015-6-18 13:13
这日子没法过了....
作者: wwdu926a 时间: 2015-6-18 13:20
老大,我好崇拜你哟
作者: tohme 时间: 2015-7-26 21:02
现在做什么网站好？
作者: bqtklouu 时间: 2015-7-26 21:11
朕要午休了..............
作者: GoodyFouppy 时间: 2015-7-26 21:12
我怎么说那?~!
作者: tohme 时间: 2015-7-26 21:21
呵呵 你想就来嘛～～
| 欢迎光临 得知互动 (https://bbs.dezhifl.com/) |
Powered by Discuz! X3.4 |
