千锋教育-做有情怀、有良心、有品质的IT职业教育机构

当前位置:首页 > 行业动态  >  正文

UI入门基础像素、分辨率和适配的知识总结

时间:2017-11-21 09:57:36     来源:千锋教育杭州校区 作者:千锋

   我们可以在网上看到很多设计相关的文章或者书籍,其中相同的事物在不同的地方可能会有不同的表述,其中有些可能还是相互矛盾的。这就给我们设计师的工作带来了极大的不便,因为没有达成一个统一的标准。其中像素和分辨率就是典型的,可能大家已经看过了很多篇类似的文章,但是还是搞不懂什么是像素,什么是分辨率。那么,小编希望这篇文章可以帮你解决这个困惑。

千锋.jpg

  像素和分辨率的关系

  我觉得很多设计师没有搞懂分辨率和像素的原因是因为没有弄明白什么是英寸。我们小时候家里的电视机会说21寸大彩电,25寸大彩电,29寸大彩电等。包括手机我们也会说4.7英寸,5.0英寸等。但是显示屏毕竟是一个面,而你用英寸来表示一个面,所以在很多人心中会把英寸误以为是一个面积单位,也就是说把英寸看成了是平方英寸。

  而把英寸看成是面积单位的设计师就会对分辨率产生完全不一样的认识。其实这里的英寸是指屏幕对角线的长度,英寸实际上是长度单位。

  分辨率可以分为两种,ppi和dpi:

  ppi:每英寸(长度)所包含的像素点数目。

  dpi:每英寸(长度)所包含点的数目。

  对于dpi,我觉得只要了解就可以了,ppi才是比较重要的。从上面的定义可以看出来其实dpi和ppi的区别并不大,只不过像素(px)是设计师的小设计单位,点(pt)是iOS小的开发单位。

  分辨率换算

  我刚才在前面也说了,设计师对于dpi只要了解即可,真正需要掌握的是ppi。那么ppi可以给我们带来什么样的帮助呢?因为像素的物理尺寸不是的,随着屏幕ppi的不同也会发生相应的变化,了解ppi这个会帮助我们避免犯错。

  适配误区

  适配也是目前来说一些设计师比较头疼的一个问题,有很多小细节需要我们去注意。目前来说,我们给app做界面设计基本上都是750×1334(iPhone6/7/8)的尺寸上做,也就是以2倍图为基准,然后切3倍图对plus和iPhone X进行适配,三倍图适配是我们的重点,所以经常有设计师忽视对iPhone5的尺寸做适配。

  设计风格的把控

  对于适配知识的了解还可以帮助我们去把控产品的设计风格。例如,我们之前在产品首页会倾向于下面的这种排版。这种排版的好处是信息可以充足的展示,可点击区域够大,用户操作方便。但是在做适配的时候就会很困难,特别是iPhone X出来屏幕的进一步拉长,这种单屏适配就会很困难。

  这种首页的设计模式我在以后采用的时候肯定会再三考虑,不是说这种设计模式不好看或者说是可用性差,只是将来做设配的适配会很困难。

  沟通的重要性

  其实这篇文章主要说的是设计师如何通过对像素和分辨率的学习来好的完成适配,那么我觉得适配是一个团队工作,光靠设计师是不够。例如我在上面的例子说到那种首页的布局模式很难进行适配。但是界面的框架不是由UI设计师来决定的,产品经理或者交互设计师在绘制线框图的时候已经确定了整个界面的排版布局。所以说,让UI设计师来参与到前期线框图和原型图的绘制是非常的重要,因为有些问题是必须站在UI设计师的角度来可以看出来的。

  随着UI设计师的日益普及,企业对于UI设计师需求已经不仅仅停留在简单的平面设计上,集设计和代码于一身的全栈UI设计师才是企业不可多得的人才。

  在课程体系方面,千锋教育ui设计课程分为美术基础、平面设计、Web网页设计、移动界面设计、交互设计及工作流程五个部分,千锋的ui设计学科的课程体系能够适应市场需求、紧跟时代技术,完全满足市场对UI设计师的要求,大大地提升了学员的市场竞争力。

相关文章

  • 北京天丰利校区(总部):北京市海淀区宝盛北里西区28号天丰利商城4层
    北京沙河校区:北京市昌平区沙阳路18号北京科技职业技术广场服务楼2层、南区服务楼2层
    咨询电话:400-654-7778 010-82790226-801
    面授课程:Android培训、HTML5培训、UI交互设计培训、PHP培训、JavaEE培训、大数据开发培
                     训、VR/AR混合现实培训、Python培训、iOS培训、好程序员
  • 深圳西部硅谷校区:深圳市宝安区宝安大道5010号深圳西部硅谷A区B座605-619
    深圳大学城校区:深圳市南山区留仙大道1201号大学城创客小镇16栋2楼、3楼
    咨询电话:0755-33582485-801(硅谷校区) 0755-86660670-801(大学城校区)
    面授课程:Android培训、HTML5培训、UI交互设计培训、PHP培训、JavaEE培训、大数据开发培
                     训、VR/AR混合现实培训
  • 上海地址:上海市宝山区同济支路199号智慧七立方3号楼2-4层
    咨询电话:400-627-7899 021-56166283/56166279
    面授课程:PHP培训、Android课程培训、HTML5课程培训、UI交互设计培训、JavaEE培训、iOS课
                     程培训、好程序员
  • 郑州地址:郑州市金水区纬五路21号河南教育综合楼(经纬中学楼)6/7/8层
    咨询电话:0371-55191750 400-654-7778
    面授课程:Android课程培训、HTML5课程培训、UI交互设计培训、JavaEE培训、iOS课程培训
  • 广州地址:广州市天河区元岗路310号智汇park创意园E座5层
    咨询电话:020-22119207 400-654-7778
    面授课程:Android课程培训、HTML5课程培训、iOS课程培训、JavaEE培训
  • 大连地址:大连市甘井子区软件园路6号B5座101室
    咨询电话:0411-39026086 400-654-7778
    面授课程:Android课程培训、HTML5课程培训、JavaEE培训、iOS课程培训
  • 武汉地址:武汉市江夏区藏龙岛杨桥湖大道15号拓创大厦15楼
    咨询电话:027-81772047
    面授课程:Android课程培训、HTML5课程培训、JavaEE培训、iOS课程培训
  • 成都旅游校区:成都市一环路西二段17号四川旅游青羊校区内
    成都华立校区:成都一环路西二段17号华立大厦3楼
    咨询电话:028-83178771 028-61967740
    面授课程:Android课程培训、HTML5课程培训、UI交互设计培训、JavaEE培训、iOS课程培训
  • 校区地址:西安市雁塔区高新六路52号立人科技C座西区4楼
    咨询电话:029-85260160 029-85261030 029-85260960
    面授课程:Android课程培训、HTML5课程培训、JavaEE培训
  • 杭州地址:浙江省杭州市江干区九堡旺田书画城A座4层
    咨询电话:0571-86893632 010-82790226-801
    面授课程:Android课程培训、HTML5课程培训、JavaEE培训、iOS课程培训
  • 青岛校区地址:青岛市市南区金坛路17号青岛职业技术南校区实训楼A4层
    咨询电话:0532-80910752/3 010-82790226-801
    面授课程:Android课程培训、HTML5课程培训、UI交互设计培训、iOS课程培训
  • 千锋动态二维码

    了解千锋动态
    关注千锋教育服务号

  • 千锋互联二维码

    扫码关注千锋互联
    身边的移动开发导师