当前位置:丝路教程网 > UI设计 > UI教程 >

app界面设计之手机屏幕

2018-02-05 16:43 来源: 丝路教程网 分类: UI教程
191 作者:丝路教程网

[导读] UI设计做app界面设计的时候,首先要做的的是什么?估计很多UI设计学习的初学者会觉得app界面设计的第一步准备是做做设计素材的搜集,或者是app界面主题风格的设定。其实,不然。很

  UI设计做app界面设计的时候,首先要做的的是什么?估计很多UI设计学习的初学者会觉得app界面设计的第一步准备是做做设计素材的搜集,或者是app界面主题风格的设定。其实,不然。很多ui设计的初学者往往会忽略手机屏幕的分析。也就是,app界面设计匹配手机屏幕的部分。有些同学却认为这是在后期部分才考虑的。其实不然。

  在这里,首先问下UI设计的同学们,做app界面设计要了解手机屏幕那些参数?仅仅是屏幕尺寸吗?

  其实,我们在平时设计app界面的时候,关于手机的很多参数被我们忽略了。

  例如:手机的分辨率、网点密度、视网膜屏幕等等。

  一、屏幕尺寸:

  关于手机屏幕尺寸的问题,很多UI设计的学习者都会有或多或少的了解。

  手机常见屏幕尺寸有3.5寸、4.3寸、4.7寸、5.5寸。

app界面设计的第一步:了解手机屏幕

  小编决定在今天的ui设计分享中再梳理下关于APP界面设计尺寸。算是一个关于app设计尺寸的补充吧!

  APPLE APP STORE ICON:512 x 512 PX

  IPHONE 4 App Icon:114 x 114 PX

  IPHONE 3GS App Icon:57 x 57 PX

  —————————————————————–

  IPHONE 5 App UI:1136 * 640PX (设计时,高度还需要减去状态栏40PX)

  IPHONE 4 App UI:960 * 640PX (设计时,高度还需要减去状态栏40PX)

  IPHONE 3GS App UI:480*320PX

  —————————————————————–

  iPad 3:2048 x 1536PX (2倍于iPad2)

  iPad 2:1024 x 768PX

  —————————————————————–

  Android Phone App Icon:512 x 512 PX

  Android Phone App UI:

  240x320PX

  320x480PX

  480x800PX

  480x854PX

  540x960PX (例如:HTC Sensation XE)

  Android Tablet App UI:

  600x1024PX

  720x1280PX

  800x1280PX

  注意:

  因为Android设计单位是dp,而1dp等于1.5px。

  所以在平时在线ui设计app界面的时候,你的设计稿以px为单位的情况下,元素尺寸需要是1.5的倍数,才可以在Android手机显示清晰图片。

  二、像素Pixel

  什么是像素点?或许对于一些ui设计的同学来讲会觉得很疑惑,为什么要这么深入了解手机的深层次参数。你看下去你就懂了。

  我们用放大镜看显示屏,发现图像是由一个个小点组成的,这些小点就是像素点。(如图1-8所示)像素是图像的基本采样单位。像素不是一个确定的物理量,因为像素点的物理大小是不确定的。像素也不是一个具体的点或者小方块(尽管可以用点和小方块来呈现),而是一个抽象概念。

  第一次着手做ui设计关于游戏app界面设计,我们发现制定的视觉规范基本在输出后普遍存在偏差。可能有时候这种几个像素的位置偏移并不被大多数用户在意,但是对我们而言,视觉规范就会成为只是设计师自我参考的数据,而不是实际线上产品的最终效果,这令人感到相当恼火。

  然而这些偏差很大原因与像素有关!

app界面设计的第一步:了解手机屏幕

  三、分辨率Resolution

  分辨率是屏幕像素的数量。一般用屏宽像素数乘以屏高像素数表示。(如图1-9所示)描述iPhone6的屏幕分辨率是750×1334。就是由750列、1334行的像素点组成的。每个点发出不同颜色的光,构成我们所看到的画面。在PC时代,分辨率越高,意味着屏幕越大,因为PC具有固定的PPI。在智能手机的屏幕就不是如此了,因为手机的像素密度是不一样的。

app界面设计的第一步:了解手机屏幕

  ( iPhone 6的像素排列)

app界面设计的第一步:了解手机屏幕

  (iPhone4s、iphone5像素排列)

  四:网点密度DPI

  在纸质媒介时代,我们常用网点密度(Dot Per Inch)来描述印刷品的打印精度。DPI常用于“设备参数”描述(比如扫描仪、打印机),例如,我设置了打印分辨率为96DPI,那么机器在打印过程中,每英寸(inch)的长度,打印了96个点(dot),打印机在每英寸内打印的墨点越多,图片看起来越精细。这种概念也带入到PC时代的Windows,Windows的默认DPI为96。

  五、像素密度PPI

  像素密度(Pixel Per Inch)常用于“屏幕显示”的描述,用来表示每英寸像素点数量。(如图1-10所示)在Photoshop中设定某图的分辨率为72PPI,那么,当图片对应到现实尺度中,屏幕将以每英寸72个像素(pixel)的方式来显示。PPI数值高的显示屏幕,画面看起来也更加细腻。

app界面设计的第一步:了解手机屏幕

  关于网点密度和像素密度的相关理论,很多在线ui设计的同学尽管对其了解,但是也不知道了解之后对app界面设计有何作用。所以,如果今天全部都是屏幕的乏味理论,估计对同学在线ui设计也没什么作用。那今天的在线ui设计分享,旧跟你们说一些实际的。

  为什么app界面设计与网点密度和像素密度有关?如何在ui设计的时候应用这个这个知识点?

  我们看手机屏幕的时候,发现有的低端手机屏幕有很强的颗粒感,能看到明显的一颗颗像素点。而有的高端手机屏幕显示非常顺滑,凑近屏幕看,也几乎看不到屏幕的像素点。为什么屏幕会有这样的显示差别?造成这种差别的原因就是网点密度和像素密度。如果你平时了解关于手机屏幕的相关参数问题,在app界面设计出现合视觉差别的时候,会斟酌从手机网点密度和像素密度方面进行调节,以实现自己想要的设计效果。

app界面设计的第一步:了解手机屏幕

  六、逻辑分辨率与像素倍率

  物理分辨率是硬件所支持的分辨率,逻辑分辨率是软件可以达到的分辨率。逻辑分辨率乘以一个倍率得到物理分辨率,这个倍率叫做像素倍率。例如,苹果Retina屏定义了2倍率(iPhone 6plus为3倍后面章节会具体分析)以iPhone4S为例,逻辑分辨率为320×480倍率为@2x,得到物理分辨率640×960。

app界面设计的第一步:了解手机屏幕

  ( iOS设备屏幕参数表)

  在线ui设计的时候,你会看到文件名有的带@2x、@3x字样,有的不带。其中不带的用在普通屏上,带@2x、@3x的分别用在2倍率和3倍率的Retina屏幕上。

  七、视网膜屏幕

  在线ui设计的时候,关于app界面设计,视觉视觉效果十分重要。那么怎样才能给予用户做舒适的视觉效果。

  关于手机视网膜屏幕是什么?在线ui设计当中怎么应用这个知识点?

  所谓视网膜屏,是指人眼在正常观察距离(iPhone定义为10英寸,iPad定义为15英寸)下,视网膜已经无法分辨单个像素,不再出现像素颗粒感,仅能观察到如丝般细腻的画面。可以理解为超高分辨率屏幕。

app界面设计的第一步:了解手机屏幕

  所以在app界面设计的时候,同学们可以根据视网膜屏幕来设定app界面的尺寸和可实现的分辨率,以达到最佳的视觉效果。

app界面设计的第一步:了解手机屏幕

  (PPI计算公式)

  还是哪一句,今天的在线ui设计分享就来点实际的。下面看看平时手机界面是如何应用这个公式?

  例如iPhone 4s屏幕分辨率为640×960像素,(如图1-14所示)屏幕尺寸为3.5英寸。代入公式PPI=√(640²+360²) / 4,结果为326PPI,大于300PPI,符合“视网膜屏幕”的特征。

app界面设计的第一步:了解手机屏幕

  总结:

  今天的ui设计分享,前面所涉及的手机屏幕参数都是一般参数,对于不同手机来讲,各参数当中又是不同的。

  例如:常见手机屏幕规格都是不同的

app界面设计的第一步:了解手机屏幕

  从以上数据来看,目前国内绝大多数热门手机都已经使用视网膜(Retina)屏幕。大部分手机屏幕都在4寸以上。大屏幕、高分辨率的手机已经成为市场的主流。

app界面设计的第一步:了解手机屏幕
app界面设计的第一步:了解手机屏幕

  从以上的数据统计来看,有如下分辨率是需要考虑设计。

  iOS系统:640×1136、640×960、750×1334、2208×1242,iPad的分辨率是2048×1536,不在本书的讨论范围内。

  Android系统:720×1280、480×800、480×854、540×960、1080×1920这么多分辨率都需要考虑,是不是要出多套界面设计方案?答案是不用,我们只需要考虑设计适配即可。在后面的第10章《设计适配》章节中,会介绍如何设计一套方案适用与多个分辨率。

  所以,ui设计的同学们,在做app界面设计的时候,首先要对手机屏幕有一定的了解,这样在遇到相关界面设计问题的时候可以针对手机屏幕来解决,另外,针对手机屏幕参数进行app界面设计,使得app界面更加专业,视觉效果更佳!


免责声明:

丝路教程网的部分文章信息来源于网络以及网友投稿,本网站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,如权利人发现存在误传其作品情形,请及时与本站联系。

app界面设计之手机屏幕

的相关文章
Copyright © 2008-2017 blog.silucg.com 丝路教程网 版权所有 网站地图
点击这里给我发消息
丝路教育