领先的互联网解决方案提供商!

深圳 : 0755-2101 0201 广州 : 020-8092 8113 东莞 : 0769-3326 0066 <<<全国分公司
  • 网站建设
  • SEO推广
  • 客户案例
  • 联系我们
  • 扫描添加微信

    30秒获取报价:

    提交您的电话,免费赠送一年维护及关键词排名

  • 联系人*
  • 手机号*
  • 在谈IOS、安卓、网页设计的UI尺寸题目

    您现在的位置:首页 > 新闻中心 > 推广常识
    作者:http://www.xkwl.net网站建设SEO 发布于:2019-4-15 21:53:03 点击量:

    文章概要:

    在我们开始诠释细节前,我们必须先定义讨论的范畴。本篇文章重要专注在探究 UI 设计师如何处理各式各样的屏幕种类;屏幕的大小多变,就算大小一样,其过细度也有差,有的屏幕颗粒很粗,有的


    详细内容:

    在我们开始诠释细节前,我们必须先定义讨论的范畴。

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

    分辨率、像素密度

    分辨率一词在各种领域的定义有渺小的差别,在 UI 设计中,我们可以理解成「表现器呈现影像细节的能力」。也就是说,成像单位越微小、越密集的屏幕,分辨率就越高。

    而大多数屏幕的成像单位是像素(Pixel),因此描述密度/分辨率的方法就是抓一段固定长度(通常是英吋),看看里面塞进了几颗像素点,固定长度能塞越多颗,就代表这个屏幕的点越细。

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

    举个例子,如今苹果发表了一支很奇葩的方形手机,屏幕长宽都只有一英吋,画面大小是 10×10 pixel,名称叫做「iPhone Inch」:

    库克:「为了进一步与任天国加深合作关系,苹果再一次重新发明了手机。」

    「豪口爱哟~呜~~~!」全场起立鼓掌。

    好的,这支手机的屏幕长宽都是 1 英吋、长宽各排列了 10 颗像素,显然我们假如想描述屏幕有多过细的话,可以说:「屏幕的像素密度是每英吋 10 pixel」,或者换句话说,「iPhone Inch 的分辨率是 10 ppi」。
    等一下,ppi 这单位是什么?意思就是「Pixels Per Inch,每英吋塞进了几颗像素点(像素密度)」。

    因为市场反应优秀,反正苹果做什么大家买就对了;来年苹果老调重弹手机应用,又推出了 s 升级版—— iPhone Inch s:

    「这是我们有史以来最好的手机,Amazing~」库克语毕,全场欢呼赓续。

    接着播放产品介绍影片。

    在上一轮斗争失势遭到明升暗贬,沦为影片配音员的 CDO Jony Ive 操着一口迷人的英国腔开始介绍产品:「??我们经过了彻底地重新设计,如今有金色版,让每小我的个性能充分表达??」

    看来钱宁兄「re-design」的定义可能和大多数人不太一样。

    接着库克把保险营业 Phil 叫上台,诠释硬件配置。

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

    好,既然长宽的像素点都提拔为两倍来到了 20×20 pixel,那我们依照前面的说法,这块屏幕分辨率就是 20 ppi。

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

    这支 iPhone 7 的屏幕宽度是 2.3 吋,横向统共排列了 750 颗 pixel,也就是说,每英吋塞进了 750/2.3 ≈ 326颗 pixel,所以我们会说「iPhone 7 的分辨率是 326 ppi」。

    关系式如下:

    △ 分辨率关系式

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

    iOS 的 pt 单位

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

    「好,美工网站排名优化,你要在画面上放什么东西?」工程师一脸不耐烦地说。
    「那个??我不是美??」设计师还没说完,就被大吼一声:
    「啊?你连分辨率都要人教,还说本身是设计师!」

    呵呵,这工程师肯定南部来的。

    「好啦??我要在画面上放一条分隔线,灰色的。」
    「粗细呢?」
    「1 px。」
    「呵呵!就说你是美工,说要 1px?来,你本身看看这是什么」

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

    原来是由于候车亭制作厂家,当一个屏幕分辨率(像素密度)越高的时候,像素点就会越密集、越小颗,因此我们使用 px 当单位来做 UI 的话,就会发生不同分辨率的屏幕呈现不同的状态,那这要怎么解决呢?我们继承看下去。

    工程师:「来,美工,我跟你说,我如今跟你讲好一件事,你看一下这两支手机的画面。」

     

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

    所以啊,一个新单位: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 的小红点,说那个大小叫做「1 pt」,这个点拿到右边的新机上,「大小不变」,但长宽变成了 2px,所以假如以后用「pt」来当大小单位的话,就不用再管那个变来变去的 px 了。

    在 iOS 的世界也是这么运作的,我们在初代 iPhone 上标出一颗红色的 pixel,然后说它的长度(或宽度)叫做「1 pt」,这颗红色的点拿到有视网膜屏幕、密度两倍的 iPhone 4 上,它的长度就会涵盖了视网膜屏幕上的 2px;若拿到三倍密度的 Plus 上面,猜猜这个小红点的长度会涵盖几 px?

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

    Android 的 dp 单位

    在 Android 的世界里,手机厂牌型号好多好多,屏幕大小和密度也是一团乱;Google 身为教主,当然要制定一套规则来金瓯无缺,方法呢,就是制订好几个「密度等级」:

    假如你的屏幕分辨率落在 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 ??等等,有爱好的同伙可以再自行研究。


    上一篇: 四会做网站建设公司-在LuckyMall的配置文件的shop.php文件中配置
    下一篇: 没有了! 相关文章:
    2019-04-15 【润通现货】,润通现货那里比较好呢
    2019-04-15 如何使用极速建站功能
    2019-04-15 如何使用产品导航模块(产品分类)
    2019-04-15 各大搜索引擎收录指引
    2019-04-15 如何更换网站主题
    2019-04-15 网站建设的前期预备工作
    2019-04-15 如何获得企业网站建设的成功?
    2019-04-15 网站建设设计环节要投客户所好,不要干扰客户体验
    2019-04-15 新站的SEO应如何操作?
    2019-04-15 中小企业的“自媒体+手机站”运营要牢牢把握这几点!
    2019-04-15 在谈IOS、安卓、网页设计的UI尺寸题目
    2019-04-15 导航栏目在网站内部跳转实现体例
    2019-04-15 济南网站制作之给如何进行后期完美
    2019-04-15 易企网站要留住用户就必须围绕四个中间
    2019-04-15 解读公司网站建设的需要性与紧张性
    2019-04-15 UI设计中,用户界面按钮的几种基本类型一
    2019-04-14 怎样实现小程序+PC+wap+微信公众号网站建设一体化同步?
    2019-04-14 如何做一个网站才能吊的起客户的胃口
    2019-04-14 好的营销型网站效果必须调研结合策划
    2019-04-14 高端网站选择专业建站公司的几个优点
    相关分类:
  • 公司新闻
  • 常见问题
  • 行业新闻
  • 网站推广
  • 网站推广
  • 网站建设
  • 推广常识
  • IT教程
  • SEO优化
  • 网站开发
  • 客户案例
  • 解决方案
  • CMS
  • 其他城市分类:

    天河seo网站推广公司

    龙华做建网站百度推广优化公司

    宝安网站建设-宝安网站推广SEO优化公司-宝安做建网站公司

    南山网站建设-南山网站推广百度优化公司-南山做建网站的公司

    【钟祥地区】钟祥网站建设-钟祥SEO网站推广-钟祥做建网站网络公司

    龙岗SEO-龙岗网站推广公司-龙岗关键词seo优化排名公司

    广州白云花都网站建设SEO优化推广

    万词霸屏-万词霸屏招商代理加盟

    北京seo-北京网站推广优化公司

    上海网站推广优化seo公司-上海关键词百度排名公司

    天津seo-天津百度关键词优化排名-天津网站推广公司

    重庆网站推广优化公司-重庆seo优化排名

    合肥seo-安徽合肥芜湖蚌埠阜阳淮南网站推广seo公司

    福州SEO-厦门网站推广-泉州百度优化公司

    莆田seo-漳州网站推广公司-宁德三明南平龙岩seo优化

    佛山seo-中山网站推广-珠海网络推广公司-佛山网站优化

    惠州江门汕头湛江seo网站推广优化公司

    广东肇庆茂名揭阳梅州清远网站seo推广公司-赠送企业网站!

    阳江韶关河源seo公司-云浮汕尾潮州网站推广优化公司

    台山阳春顺德网站推广公司-惠东博罗海丰开平陆丰seo优化公司

    南宁seo-南宁网站推广公司

    柳州桂林玉林梧州seo公司-专业网站推广优化

    贵州seo-贵阳网站推广-西部seo优化公司

    甘肃网站推广公司- 兰州seo优化

    海南seo-海口网站推广-三亚seo公司

    黑龙江网站推广公司-哈尔滨seo

    河南网站seo公司优化推广服务地区:许昌平顶山安阳焦作商丘开封濮阳周口信阳驻马店漯河!

    宁夏银川SEO-吴忠石嘴山中卫固原网站推广优化公司!

    内蒙古 呼和浩特包头赤峰鄂尔多斯-专业seo优化网站推广公司!

    青海seo-西宁网站推广优化公司

    青岛网络推广-青岛seo-青岛网站优化服务企业!

    烟台网站推广优化-潍坊seo公司-临沂淄博济宁seo-待客户如家人!

    山东泰安聊城威海枣庄德州seo公司

    齐鲁网站seo推广优化服务城市:日照东营菏泽滨州莱芜章丘垦利诸城寿光龙口

    山西seo-太原SEO-太原网站推广公司

    临汾大同seo-运城晋中seo公司-长治网络推广公司

    西安seo-西安网络推广-西安seo优化公司

    渭南汉中SEO-榆林延安安康SEO优化公司

    四川地区网站seo优化推广排名城市:宜宾自贡乐山泸州达州内江遂宁攀枝花眉山广安

    新疆SEO-乌鲁木齐seo-新疆网站推广优化公司

    曲靖大理网络推广-红河玉溪seo公司-丽江文山网站优化

    杭州seo-杭州网络推广公司-杭州百度优化-杭州网站关键词优化排名

    宁波seo-宁波seo优化公司

    温州seo-温州网站推广-温州百度优化公司

    提交您的电话,免费赠送一年维护及关键词排名

  • 联系人*
  • 手机号*
    1. 首页
    2. 网站建设
    3. 网站推广
    4. 软件开发
    5. 案例展示
    6. 关于我们
    7. 联系我们

      扫码添加微信咨询

    Copyright 2008-2018 深圳市信科网络科技有限公司 Shenzhen Sinco Network Co., Ltd 严禁抄袭模仿本站 违者依法追究责任! 粤ICP备14083186号-3

  • 深圳公司
    电话 : 0755-2101 0201
    手机 : 136 3165 7619
    地址 : 深圳市龙华新区东环一路旭日大厦ll08室
  • 广州分公司
    电话 : 020-8092 8113
    手机 : 135 3988 3715
    地址 : 广州市海珠区宝岗大道268号中新大厦1912
  • 东莞分公司
    电话 : 0769-3331 9353
    手机 : 137 1719 8162
    地址 : 东莞市南城区鸿福路83号曼哈顿广场2409
  • 武汉分公司
    电话 : 027-8355 8661
    手机 : 182 4491 9118
    地址 : 武汉市东西湖区金银湖路18号财富大厦30E
  • 上海分公司
    电话 : 021-3113 7661
    手机 : 132 6719 9217
    地址 : 上海市闸北区江场西路299弄中铁广场堡尼大厦2131
  • 拨打电话
  • 添加微信
  • QQ咨询