资讯详情

知道做UI设计,这些事你知道吗

2016-01-04 阅读:116 来源:上海跑赢职场
进入>

做一全套的APP设计,无非就是

1.界面设计:设计iOS界面,设计Android界面;

切图:切iOS的2倍图和3倍图,切Android的hdpi,xhdpi,xxhdpi这三个尺寸的图;

2.标注:以px为单位标注iOS界面的尺寸,以dp,sp为单位标Android的尺寸。

iOS/Android

(一)屏幕尺寸

指实际的物理尺寸,为屏幕对角线的测量。

手机尺寸计算方式=对角线尺寸/2.54

目前,iPhone实际屏幕有3.5英寸/4英寸/4.7英寸/5.5英寸的屏幕大小,而为了简单起见,Android把实际屏幕尺寸分为五个广义的大小。

(二)分辨率与像素密度,倍率与逻辑像素

PPI(PixelsPerInch):像素密度,指屏幕上显示的像素个数,单位尺寸内像素点越多,显示的图像就越清楚。Retina屏比普通屏清晰很多,就是因为它的像素密度翻了一倍。它不是一个测量物理大小的单位,这项指标是连接数字世界与物理世界的桥梁。可以有一个2560*1440的屏幕可以跟墙一样大,也可以跟脑袋一样小。就像iPhone3gs的屏幕像素是320×480,iPhone4s的屏幕像素是640×960。刚好两倍,然而两款手机都是3.5英寸的。

DPI(DotsPerInch):指每英寸有多少个显示点

市场上iOS分辨率有:640×960、640×1136、750×1334、1242×2208

目前iOS采用750×1334的分辨率来设计。(iPhone6/6s)

市场上Android主流分辨率有:480×800、720×1280、1080×1920(其他的早该淘汰了,忽略不计)。

目前,Android把像素密度分为了五个广义的大小:

ldpi(low低密度)[0.75倍]~120dpi→1dp=0.75px

mdpi(medium标准密度)[1倍]~160dpi→1x→1dp=1px=1pt→@1x(iPhone3gs)

hdpi(high高密度)[1.5倍]~240dpi(480*800)→1dp=1.5px

(这里240dpi并不一定是480*800的分辨率,同样的屏幕密度可以得到无数种分辨率,只需要改变屏幕尺寸就可以了。相同密度下不同分辨率只是在这个范围内共用一套资源切图而已。设计效果图时不用考虑这些,可以把480*800的分辨率“当成”是在240dpi下的设计。)

xhdpi(extra-high超高密度)[2倍]~320dpi(720*1280)→2x→1dp=2px=1pt→@2x(iPhone4/4s/5/5c/5s/6/6s~326ppi)

目前Android采用720×1280的分辨率来设计。(目前为止720*1280的市场占有率还是比较高。但是由于技术水平的不断提升,今后一定会采用1080*1920的来设计)

(在5种输出的分辨率MDPI,HDPI,XHDPI,XXHDPI,XXXHDPI中按中间值XHDPI设计,让开发进行适配。即以720px*1280px为标准,72像素英寸)

xxhdpi(extra-extra-high超清密度)[3倍]~480dpi(1080*1920)→3x→1dp=3px=1pt→@3x(iPhone6/6splus~401ppi)

(于设计来说,选取一个合适的尺寸作为正常大小和中等屏幕密度,然后向下和向上做小、大、特大和低、高、超高的尺寸与密度。)

(三)单位

PX:像素=DP×(DPI/160)

例如,在一个240dpi的屏幕里,1DP等于1.5PX。

PT:指点,PT用在Apple上,DP用在Android上,本质相同。简而言之,它们能定义独立于设备的像素比的大小,这会包含在不同角色(如设计师与工程师)之间的讨论规则中。

DP(Dip):指独立于设备的像素点。android开发中用于描述尺寸和间距。相当于一种比例换算单位,它可以保证控件在不同密度的屏幕上按照这个比例单位换算显示相同的效果。

SP:和DP、PT用途上来讲不同,工作方式相同,SP表示与比例无关的像素,只是用于描述字号和行距。同时也是为了保证文字在不同密度的屏幕上显示相同的效果。

单位决定了我们的思考方式。在设计和开发过程中,应该尽量使用逻辑像素尺寸来思考界面。设计Android应用时,有的设计师喜欢把画布设为1080×1920,有的喜欢设成720×1280。给出的界面元素尺寸就不统一了。Android的最小点击区域尺寸是48x48dp,这就意味着在xhdpi的设备上,按钮尺寸至少是96x96px。而在xxhdpi设备上,则是144x144px。

无论画布设成多大,我们设计的是基准倍率的界面样式,而且开发人员需要的单位都是逻辑像素。所以为了保证准确高效的沟通,双方都需要以逻辑像素尺寸来描述和理解界面,无论是在标注图还是在日常沟通中。不要再说“底部标签栏的高度是96像素,我是按照xhdpi做的”这样的话了。

(四)切图

iOS的切图需要切二倍图(@2x),三倍图(@3x),命名需要注意,如btn_xxx_xxx@2x,btn_xxx_xxx@3x

(尽量用下划线,命名规则遵照图片类型_分类_用途_状态.png,比如:btn_share_facebook_normal.png)

Android的切图需要切三个尺寸的:hdpi,xhdpi,xxhdpi,但是说起来只需要提供一套切图即可。

(Android切图只吃_,iOS切图则是是-和_都吃,(Web没差)。如果你常遇到切一次图要给多个平台使用,那就用_底线吧)

720*1280下的切图资源基本可以适配其他机型,有些特殊的切图需要单独适配的,比如icon等。

适配480*800机型=720*1280下的切图大小*0.75

适配1080*1920机型=720*1280下的切图大小*1.5

(适配1080*1920的时候,不要单独硬生生的将图标放大1.5倍。这就要求在720*1280下画图的时候,尽量采用矢量图形来画图。比如在720*1280下图图标是48px*48px的时候,适配1080*1920时候,48px*1.5=72px。把矢量图形调整为72px即可。把切图资源给开发,开发会把切图单独放到xxhdpi的文件目录下,就会自动适配1080*1920的了。同样要是适配480*800的,48px*0.75=32px,把切图给开发,开发会把切图资源单独放到hdpi的目录下,就会自动适配的。720*1280下的切图资源,开发是放到xhdpi的目录下的。)

加载全文

免责声明:本站部分内容、图片来自用户自主上传,如果您对本站信息资源版权的归属问题存有异议,请您致信,我们会立即做出答复并及时解决。如果您认为本站有侵犯您权益的行为,请通知我们,我们一定根据实际情况及时处理。

以上是上海跑赢职场为大家整理的有关知道做UI设计,这些事你知道吗的全部内容,更多精彩请访问学习资讯新闻专栏。

相关课程

更多>
2020猎学网广告栏
申请课程免费试听名额

课程顾问24小时内联系您

你好

顾问将于24小时内联系您!

确定
在线咨询 微信咨询 立即报名
申请1对1课程顾问咨询服务
×
你好

顾问将于24小时内联系您!

确定
上海猎学网 >上海跑赢职场 >知道做UI设计,这些事你知道吗