• 公司网站建设方案欢迎光临易企网站建设公司
    当前位置£º易企网站建设公司 >> 网站建设 >> 公司网站建设方案 >> 浏览文章

    在谈IOS¡¢安卓¡¢网页设计的UI尺寸题目

    发布时间£º2019年03月22日 文章标签£º网页,设计,尺寸,题目 浏览5022

    各?#21046;?#24149;的分别

    在我们开始诠释细节前£¬我们必须先定义?#33268;?#30340;范畴¡£

    本篇文章重要专注在探究 UI 设计师如何处理各式各样的屏幕种类£»屏幕的大小多变£¬就算大小一样£¬其过细度也有差£¬有的屏幕颗粒很粗£¬有的则细到眼睛看不到个别像素点£¬专业的设计师如何让本身的设计在各?#21046;?#24149;上达到近似的体验呢£¿我们要先从¡¸分辨率¡¹看起¡£

    分辨率¡¢像素密度

    分辨率一词在各种领域的定义有渺小的差别£¬在 UI 设计中£¬我们可以理解成¡¸表?#21046;?#21576;现影像细节的能力¡¹¡£也就是说£¬成像单位越微小¡¢越密集的屏幕£¬分辨?#31034;?#36234;高¡£

    而大多数屏幕的成像单位是像素£¨Pixel£©£¬因此描述密度/分辨率的方法就是抓?#27426;?#22266;定长度£¨通常是英吋£©£¬看看里面塞进了几颗像素点£¬固定长度能塞越多颗£¬就代表这个屏幕的点越细¡£

    这就像我们计算人口密度时£¬会抓出一平方公里的地区£¬然后看看里面塞了多少人£¬就能描述人口密度了¡£

    举个例子£¬如今苹果发表了一支很奇葩的方形手机£¬屏幕长宽都只有一英吋£¬画面大小是 10¡Á10 pixel£¬名?#24179;?#20570;¡¸iPhone Inch¡¹£º

    库克£º¡¸为了进一步与任天国加深合作关系£¬苹果再一次重新发明了手机¡£¡¹

    ¡¸豪口爱哟¡«呜¡«¡«¡«£¡¡¹全场起立鼓掌¡£

    好的£¬这支手机的屏幕长宽都是 1 英吋¡¢长宽各排列了 10 颗像素£¬显然我们假如想描述屏幕有多过细的话£¬可以说£º¡¸屏幕的像素密度是每英吋 10 pixel¡¹£¬或者换句话说£¬¡¸iPhone Inch 的分辨率是 10 ppi¡¹¡£
    等一下£¬ppi 这单位是什么£¿意思就是¡¸Pixels Per Inch£¬每英吋塞进了几颗像素点£¨像素密度£©¡¹¡£

    因为市场?#20174;?#20248;秀£¬反正苹果做什么大家买就对了£»来年苹果?#31995;?#37325;弹手机应用£¬又推出了 s 升级版¡ª¡ª iPhone Inch s£º

    ¡¸这是我们有史以来最好的手机£¬Amazing¡«¡¹库克语毕£¬全场欢呼赓续¡£

    接着播放产?#26041;?#32461;影片¡£

    在上一轮斗争失势遭到明升?#24403;á£?#27814;为影片配音员的 CDO Jony Ive 操着一口迷人的英国腔开始介绍产品£º¡¸??我们经过了彻底地重新设计£¬如今有金色版£¬让每小我的个性能充分表达??¡¹

    看来钱宁兄¡¸re-design¡¹的定义可能和大多数人不太一样¡£

    接着库克把保险营业 Phil 叫上台£¬诠释?#24067;?#37197;置¡£

    ¡¸这是我们史上最好的屏幕£¬像素点的密度提拔到先前的两倍£¬只要你目洨£¬它就是视网膜屏幕£¬让你分辨不出像素点£¬售价只要 $9999¡£¡¹

    好£¬既然长宽的像素点都提拔为两倍来到了 20¡Á20 pixel£¬那我们依照前面的说法£¬这块屏幕分辨?#31034;?#26159; 20 ppi¡£

    OK£¬如今我们都会作运算了£¬让我们临时搁下上面的方块手机£¬回到往日荣光 iPhone 7£¬拿尺来测量看看£º

    这支 iPhone 7 的屏幕宽度是 2.3 吋£¬横向?#24443;?#25490;列了 750 颗 pixel£¬也就是说£¬每英吋塞进了 750/2.3 ¡Ö 326颗 pixel£¬所以我们会说¡¸iPhone 7 的分辨率是 326 ppi¡¹¡£

    关系式如下£º

    ¡÷ 分辨率关系式

    清楚了解何谓分辨率以后£¬如今来看看绘图时的状态吧¡£

    iOS 的 pt 单位

    让我们继承稍早的故事£¬因为苹果又再一次重新发明手机£¬公司里的设计师和工程师可苦了£¬又要做新的 App来上架£¬PM 马上预备好了两代机种给工程师测试£º

    ¡¸好£¬美工网站排名优化£¬你要在画面上放什么东西£¿¡¹工程师一脸不耐烦地说¡£
    ¡¸那个??我不是美??¡¹设计师还没说完£¬就被大吼一声£º
    ¡¸啊£¿你连分辨率都要人教£¬还?#24403;?#36523;是设计师£¡¡¹

    呵呵£¬这工程师肯定南部来的¡£

    ¡¸好啦??我要在画面上放一条分隔线£¬灰色的¡£¡¹
    ¡¸粗细呢£¿¡¹
    ¡¸1 px¡£¡¹
    ¡¸呵呵£¡就?#30340;?#26159;美工£¬说要 1px£¿来£¬你本身看看这是什么¡¹

    怎么会两台手机的画面不一样呢£¿

    原?#35789;?#30001;于候车亭制作厂家£¬当一个屏幕分辨率£¨像素密度£©越高的时候£¬像素点就会越密集¡¢越小颗£¬因此我们使用 px 当单位来做 UI 的话£¬就会发生不同分辨率的屏幕呈现不同的状态£¬那这要怎么解决呢£¿我们继承看下去¡£

    工程师£º¡¸来£¬美工£¬我跟你说£¬我如今跟你讲好一件事£¬你看一下这两支手机的画面¡£¡¹

     

    ¡¸看到左边银色机子的小红点没£¿¡¹
    ¡¸有喔¡«¡¹
    ¡¸如今开始£¬以银色机子的¡º1 颗 px¡»为基准£¬这颗红点的大小£¬就当成新的标准尺寸单位£¬你就叫它¡º1 pt (point, 点)¡»£¬这个点点不管搬到哪里就是那么大£¬我如今把它搬到金色的机子上??¡¹
    ¡¸你看£¬在金色机子上£¬红点为了维持一样的大小£¬他的长/宽就会各涵盖到 2 颗 px£¬所以本来银色机子上¡º1 pt¡»等于¡º1 px¡»£¬但到了屏幕密度两倍的地方£¬¡º1 pt¡»的大小就会代表¡º2 px¡»£¬我们从今以后就不要用px 当单位了£¬如许好不好£¿¡¹
    ¡¸好喔¡«但是我弄懂以后你不能再叫我美工了£¡¡¹
    ¡¸好啦£¡那刚刚的分隔线可以帮我弄粗一点吗£¿¡¹
    ¡¸你要多粗£¿¡¹
    ¡¸就粗¡º一点?#35805;¡£¡¡?br/>¡¸??¡¹

    所以啊£¬一个新单位£ºpt £¨point£©的诞生£¬就是为了解决不同的屏幕上£¬px 大小会变来变去的题目£¬如今先让工程师和设计师领个便当歇息一下£¬我们来看看应用题£º

    由左至右£¬分别为 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 是目前拥有三倍密度屏幕的机种¡£

    好£¬我们回忆一下刚刚的小剧场£º

    工程师在第一个屏幕上放了一颗 1 px 的小红点£¬?#30340;?#20010;大小叫做¡¸1 pt¡¹£¬这个点拿到右边的新机上£¬¡¸大小不变¡¹£¬但长宽变成了 2px£¬所以假如以后用¡¸pt¡¹来当大小单位的话£¬就不用再管那个变来变去的 px 了¡£

    在 iOS 的世界也是这么运作的£¬我们在初代 iPhone 上标出一颗红色的 pixel£¬然后说它的长度£¨或宽度£©叫做¡¸1 pt¡¹£¬这颗红色的点拿到有视网膜屏幕¡¢密度两倍的 iPhone 4 上£¬它的长度就会涵盖了视网膜屏幕上的 2px£»若拿到三倍密度的 Plus 上面£¬猜猜这个小红点的长度会涵盖几 px£¿

    假如你知道为什么会是 3px£¬那恭喜你真的完全弄懂了背后的机制£¬就是如许子而已£¬如今我们来看看 Android¡£

    Android 的 dp 单位

    在 Android 的世界里£¬手机厂牌型号好多好多£¬屏幕大小和密度也是一团乱£»Google 身为?#35752;ö?#24403;然要制定一套规则来金瓯无?#20445;?#26041;法呢£¬就是制订好几个¡¸密度等级¡¹£º

    假如你的屏幕分辨率落在 160 ppi 左右的话(注)£¬我们就称之为¡¸MDPI (中等分辨率)¡¹£»那假如你的屏幕分辨率落在 320 ppi 左右呢£¬就叫做¡¸XHDPI£¬Extra-High (超高分辨率)¡¹??其余按图类推¡£

    注£ºAndroid 用的单位叫 dpi£¬但为了沟通方便£¬我们都?#31449;?#29992; ppi

    接着就跟苹果一样¡£学?#21496;?nbsp;Google 说£¬我们把 MDPI 的屏?#27426;?#20026;基准点£¬它是一倍像素密度£¨?#36132;?#20889;的 1x£©£¬我们在这颗屏幕上挑一颗 pixel£¬把它弄成红色£¬接着把这个小红点移到 XHDPI 的 2x 屏幕上的时候£¬它就会变成涵盖 2px 了£¬所以以后就把这颗小红点的尺寸变成新单位£¬iOS 叫做¡¸pt?#25925;前É£?#22909;£¬那这个新单位我叫它¡¸dp (Density-Independent Pixels)¡¹£¡

    所以£¬iOS 的 pt 和 Android 的 dp 其实是雷同的运作原理£¬使用它当单位来做图¡¢沟通£¬就可以避免使用 px造成的误差了¡£

    网页设计里的 pt 单位

    除了 iOS 和 Android 外£¬假如也有?#21727;?#32593;页设计的同伙£¬可能知道 CSS 里也有 pt 这个单位可以使用£¬但在这里先给结论£ºCSS 的 pt 单位和我们前面所提的iOS pt 其实是没有关系的£¬其运作体例也不雷同£¬所以硬要放在一路想就会永久搞不清楚啦£¡

    pt 这个单位词£¬其实最早源自于传统的铅字印刷£¬是用来透露表现铅字块的尺寸£¬在印刷和平面设计的世界里£¬1 pt = 1/72 英吋?#27426;?nbsp;CSS 之所以有 pt 这个单位£¬其实是要把网页印刷/打印出来的时候用到的¡£

    在网页设计里£¬屏幕表现和实体印刷£¬可以拥有两份不同的 CSS 来决定样式£»风?#23376;?#31168;的网页设计师£¬会分外写一份 CSS£¬在印刷的时候给计算机使用£¨例如拿掉背景图¡¢字体颜色改成灰阶£¬比较省墨水£©£¬而实体世界的字级单位£ºpt 就会在这时派上用场£¬所以其实 CSS 里的 pt 单位江苏人事考试网站£¬不是让你拿来在屏幕上使用的喔£¡

    适合屏幕表现的 CSS 单位有 em¡¢rem¡¢px ??等等£¬有爱好的同伙可以再自行研究¡£

    上一篇£º在建设一个公司网站多少钱
    下一篇£º没有了
    点击数£º  相关搜索£º网页 设计 尺寸 题目
    °²»Õ11Ñ¡5×ßÊÆ