15112321255

全流程数字营销策略

Article/文章

记录成长点滴 分享您我感悟

再谈IOS、安卓、网页设计的UI尺寸问题

发表时间:2018-08-14 18:59

文章来源:正千网络

标签:UI设计

分享:

浏览次数:7023

各种屏幕的分别在我们开始解释细节前,我们必须先定义讨论的范畴。本篇文章主要专注在探讨 UI 设计师如何处理各式各样的屏幕种类;屏幕的大小多变,就算大小一样,其细致度也有差,有的屏幕颗粒很粗,有的则细到眼睛看不到个别像素点,专业的设计师如何让自己的设计在各种屏幕上达到近似的体验呢?我们要先从「分辨率」看起。分辨率、像素密度分辨率一词在各种领域的定义有细微的差别,在 UI 设计中,我们可以理解成「显示器呈现影像细节的能力」。也就是说,成像单位越细小、越密集的屏幕,分辨率就越高。而大多数屏幕的成像单位是像素(Pixel),因此描述密度/分辨率的方法就是抓一段固定长度(通常是英吋),看看里面塞进了几颗像素点,固定长度能塞越多颗,就代表这个屏幕的点越细。这就像我们计算人口密度时,会抓出一平方公里的地区,然后看看里面塞了多少人,就能描述人口密度了。举个例子,现在苹果发表了一支很奇葩的方形手机,屏幕长宽都只有一英吋,画面大小是 10×10 pixel,名称叫做「iPhone Inch」:
移动UI设计尺寸规范
库克:「为了进一步与任天堂加深合作关系,苹果再一次重新发明了手机。」「豪口爱哟~呜~~~!」全场起立鼓掌。移动UI设计尺寸
好的,这支手机的屏幕长宽都是 1 英吋、长宽各排列了 10 颗像素,显然我们如果想描述屏幕有多细致的话,可以说:「屏幕的像素密度是每英吋 10 pixel」,或者换句话说,「iPhone Inch 的分辨率是 10 ppi」。
等一下,ppi 这单位是什么?意思就是「Pixels Per Inch,每英吋塞进了几颗像素点(像素密度)」。由于市场反应良好,反正苹果做什么大家买就对了;来年苹果老调重弹,又推出了 s 升级版—— iPhone Inch s:
APP界面设计尺寸
「这是我们有史以来最好的手机,Amazing~」库克语毕,全场欢呼不断。接着播放产品介绍影片。在上一轮斗争失势遭到明升暗贬,沦为影片配音员的 CDO Jony Ive 操着一口迷人的英国腔开始介绍产品:「⋯⋯我们经过了彻底地重新设计,现在有金色版,让每个人的个性能充分表达⋯⋯」看来钱宁兄「re-design」的定义可能和大多数人不太一样。接着库克把保险业务 Phil 叫上台,解释硬件配置。「这是我们史上最好的屏幕,像素点的密度提升到先前的两倍,只要你目洨,它就是视网膜屏幕,让你分辨不出像素点,售价只要 $9999。」安卓UI设计尺寸规范
好,既然长宽的像素点都提升为两倍来到了 20×20 pixel,那我们依照前面的说法,这块屏幕分辨率就是 20 ppi。OK,现在我们都会作运算了,让我们暂且搁下上面的方块手机,回到昔日荣光 iPhone 7,拿尺来测量看看:
IOS界面设计尺寸
这支 iPhone 7 的屏幕宽度是 2.3 吋,横向总共排列了 750 颗 pixel,也就是说,每英吋塞进了 750/2.3 ≈ 326颗 pixel,所以我们会说「iPhone 7 的分辨率是 326 ppi」。关系式如下:
AppUI设计尺寸规范
△ 分辨率关系式清楚了解何谓分辨率以后,现在来看看绘图时的状况吧。iOS 的 pt 单位让我们继续稍早的故事,由于苹果又再一次重新发明手机,公司里的设计师和工程师可苦了,又要做新的 App来上架,PM 立刻准备好了两代机种给工程师测试:
AppUI设计尺寸
「好,美工,你要在画面上放什么东西?」工程师一脸不耐烦地说。
「那个⋯⋯我不是美⋯⋯」设计师还没说完,就被大吼一声:
「啊?你连分辨率都要人教,还说自己是设计师!」呵呵,这工程师一定南部来的。「好啦⋯⋯我要在画面上放一条分隔线,灰色的。」
「粗细呢?」
「1 px。」
「呵呵!就说你是美工,说要 1px?来,你自己看看这是什么」
手机端界面设计尺寸
怎么会两台手机的画面不一样呢?原来是因为,当一个屏幕分辨率(像素密度)越高的时候,像素点就会越密集、越小颗,因此我们使用 px 当单位来做 UI 的话,就会发生不同分辨率的屏幕呈现不同的状况,那这要怎么解决呢?我们继续看下去。工程师:「来,美工,我跟你说,我现在跟你讲好一件事,你看一下这两支手机的画面。」移动端UI设计知识
 UI设计尺寸单位「看到左边银色机子的小红点没?」
「有喔~」
「现在开始,以银色机子的『1 颗 px』为基准,这颗红点的大小,就当成新的标准尺寸单位,你就叫它『1 pt (point, 点)』,这个点点不管搬到哪里就是那么大,我现在把它搬到金色的机子上⋯⋯」
「你看,在金色机子上,红点为了维持一样的大小,他的长/宽就会各涵盖到 2 颗 px,所以原本银色机子上『1 pt』等于『1 px』,但到了屏幕密度两倍的地方,『1 pt』的大小就会代表『2 px』,我们从今以后就不要用px 当单位了,这样好不好?」
「好喔~但是我弄懂以后你不能再叫我美工了!」
「好啦!那刚刚的分隔线可以帮我弄粗一点吗?」
「你要多粗?」
「就粗『一点』啊!」
「⋯⋯」所以啊,一个新单位:pt (point)的诞生,就是为了解决不同的屏幕上,px 大小会变来变去的问题,现在先让工程师和设计师领个便当休息一下,我们来看看应用题:移动UI界面尺寸单位知识
由左至右,分别为 iPhone 第一代、iPhone 4,与 iPhone 6 Plus苹果推出第一代 iPhone 一直到现在的 iPhone 7,屏幕的「像素密度」有两次大变化(注意是密度变化喔!我们在这里不管屏幕的大小),第一次是在 iPhone 4 的时候,屏幕尺寸不变,但像素密度变成两倍,来到了 326 ppi,贾伯斯称呼其为「视网膜屏幕(Retina Display)」。而第二次是 iPhone 6 推出时,也一并出现了大尺寸的iPhone 6 Plus,Plus 不只是大,而且像素密度还变成了三倍,目前苹果所有的产品里,只有 iPhone 6/7 Plus 拥有三倍密度的屏幕。细心的你可能发现 Plus 401 ppi 明明就不是初代iPhone 163 ppi 的三倍,那怎么会说是三倍密呢?这个为了避免你吸收来不及,先保留待下次解释,总之你先记住,iPhone 6/7 Plus 是目前拥有三倍密度屏幕的机种。好,我们回忆一下刚刚的小剧场:
移动UI尺寸单位知识
工程师在第一个屏幕上放了一颗 1 px 的小红点,说那个大小叫做「1 pt」,这个点拿到右边的新机上,「大小不变」,但长宽变成了 2px,所以如果以后用「pt」来当大小单位的话,就不用再管那个变来变去的 px 了。在 iOS 的世界也是这么运作的,我们在初代 iPhone 上标出一颗红色的 pixel,然后说它的长度(或宽度)叫做「1 pt」,这颗红色的点拿到有视网膜屏幕、密度两倍的 iPhone 4 上,它的长度就会涵盖了视网膜屏幕上的 2px;若拿到三倍密度的 Plus 上面,猜猜这个小红点的长度会涵盖几 px?如果你知道为什么会是 3px,那恭喜你真的完全弄懂了背后的机制,就是这样子而已,现在我们来看看 Android。Android 的 dp 单位在 Android 的世界里,手机厂牌型号好多好多,屏幕大小和密度也是一团乱;Google 身为教主,当然要制订一套规则来一统天下,方法呢,就是制定好几个「密度等级」:
UI尺寸单位知识
如果你的屏幕分辨率落在 160 ppi 左右的话(注),我们就称之为「MDPI (中等分辨率)」;那如果你的屏幕分辨率落在 320 ppi 左右呢,就叫做「XHDPI,Extra-High (超高分辨率)」⋯⋯其余按图类推。注:Android 用的单位叫 dpi,但为了沟通方便,我们都还是用 ppi接着就跟苹果一样。学人精 Google 说,我们把 MDPI 的屏幕定为基准点,它是一倍像素密度(上头写的 1x),我们在这颗屏幕上挑一颗 pixel,把它弄成红色,接着把这个小红点移到 XHDPI 的 2x 屏幕上的时候,它就会变成涵盖 2px 了,所以以后就把这颗小红点的尺寸变成新单位,iOS 叫做「pt」是吧?好,那这个新单位我叫它「dp (Density-Independent Pixels)」!所以,iOS 的 pt 和 Android 的 dp 其实是相同的运作原理,使用它当单位来做图、沟通,就可以避免使用 px造成的偏差了。网页设计里的 pt 单位除了 iOS 和 Android 外,如果也有接触网页设计的朋友,可能知道 CSS 里也有 pt 这个单位可以使用,但在这里先给结论:CSS 的 pt 单位和我们前面所提的iOS pt 其实是没有关系的,其运作方式也不相同,所以硬要放在一起想就会永远搞不清楚啦!pt 这个单位词,其实最早源自于传统的铅字印刷,是用来表示铅字块的尺寸,在印刷和平面设计的世界里,1 pt = 1/72 英吋;而 CSS 之所以有 pt 这个单位,其实是要把网页印刷/打印出来的时候用到的。在网页设计里,屏幕显示和实体印刷,可以拥有两份不同的 CSS 来决定样式;习惯良好的网页设计师,会特别写一份 CSS,在印刷的时候给计算机使用(例如拿掉背景图、字体颜色改成灰阶,比较省墨水),而实体世界的字级单位:pt 就会在这时派上用场,所以其实 CSS 里的 pt 单位,不是让你拿来在屏幕上使用的喔!适合屏幕显示的 CSS 单位有 em、rem、px ⋯⋯等等,有兴趣的朋友可以再自行研究。 

该文章由网络转载,如有侵权请联系我司删除!

相关案例查看更多

填写您的项目需求:

*请认真填写需求信息,我们会在24小时内与您取得联系。