刚开始接触UI的时候,遇到最多的就是尺寸问题。 画布应该多大,文字应该多大,界面应该做多少? 弄糊涂真的有点头疼。
废话不多说,希望大家耐心看完以后,再也不用担心尺寸相关的事情了~
iOS篇
1.尺寸和分辨率
iPhone界面尺寸:320x480、640x960、640x1136
iPad界面尺寸:1024x768、2048x1536
(以上单位都是像素,至于分辨率,一般的web UI和mobile UI基本只有72ppi)
当然,设计时不必为每个尺寸都做一套。 尺寸是根据您手机的尺寸设计的,更方便预览效果。 一般采用640x960或640x1136的尺寸进行设计。
在PS中绘图时,一定要使用形状工具(快捷键:U)
画好了,方便以后剪图或者改尺寸~
2. 界面基本元素
iPhone的APP界面一般由四个元素组成,分别是:状态栏、导航栏、主菜单栏和中间的内容区
这里使用了640x960的尺寸设计,下面说说这个尺寸下这些元素的尺寸:
状态栏:就是我们常说的信号、运营商、电池等显示手机状态的区域。 它的高度是:40 px
导航栏:显示当前界面的名称,包含相应的功能或页面跳转按钮,高度:88px
主菜单栏:类似于页面主菜单,提供对整个应用分类内容的快速跳转,高度为:98px
内容区:显示应用提供的相应内容,布局在整个应用中变化最频繁,其高度为:734 px
(等等,我不是在胡说八道:960-40-88-98=734)
iPhone/iPod Touch
第一代、第二代、第三代
iPhone4/iPhone4s
iPhone5/iPhone5C/iPhone5s
至于我们常说的iPhone5/5s的640x11136尺寸,其实就是把中间内容区域的高度提高到:910px
PS 在最新的iOS7风格中,苹果逐渐弱化了状态栏的存在,将状态栏和导航栏合二为一,但是不管怎么改,大小和高度还是一样的,不过iOS7大家还是会设计的再次注意样式界面~
3.字体大小
iPhone上的英文字体是:HelveticaNeue 至于中文,Mac下使用的字体是Helvetica-Jane,Win下是Helvetica Helvetica。
下图是百度用户体验做的一个小调查。 可见,用户可接受的文字大小是以像素为单位的,即PS中文字的像素大小。
PS 多注意一些大公司的数据研究,你会发现很多你根本没有考虑到的问题~
其实还有一个更简单的方法就是找个自己觉得不错的app,把手机截图放到PS里对比调整字体大小~
总之,方法是自己找的,想办法解决问题,自己去实践。 比别人告诉你的还要震撼不是吗~?
安卓篇
1.尺寸和分辨率
Android界面尺寸:480x800、720x1280、1080x1920...(单位:像素)
Android 的套数比 iPhone 多很多。 建议使用 720x1280 的尺寸。 这个尺寸在 720x1280 下完美手机游戏设计界面尺寸,在 1080x1920 下看起来更清晰。 裁剪后的图片文件大小也适中,应用程序的内存消耗不会太高。
2. 界面基本元素
Android APP界面与iPhone基本相同:状态栏、导航栏、导航栏、主菜单栏和中间的内容区。
在Android中,我们使用的是720x1280的尺寸设计,那么我们来说说这个尺寸下这些元素的尺寸:
状态栏高度为:50px
导航栏高度:96 px
主菜单栏高度:96 px
内容区域高度为:1038 px (1280-50-96-96=1038)
Android最近的手机几乎都去掉了物理按键,把功能键搬到了屏幕上。 当然高度和菜单栏一样:96px
PS 写之前翻了很多Android界面尺寸的教程,但是没找到像iOS那样具体的规格,可能是因为Android中这些控件的高度是可以通过程序自定义的~没有具体的size值提到了,于是自己找了安卓设计规范,尺寸是自己在PS里测出来的~~
为了在界面上区别Android和iOS,Android 4.0开始提出HOLO UI风格,部分APP的最新版本采用了HOLO UI风格。
这种风格最明显的变化就是将下方的主菜单移到了导航栏中,解决了很多手机去掉物理按键后屏幕出现双底栏的尴尬局面。
3.字体大小
Android上的字体是:Droid sans fallback,是谷歌自己的字体,和微软雅黑很像。
同样,在百度的用户体验调查中,可以看出用户可接受的文字与问题相对应。
具体大小还是那句话,找到自己喜欢的APP界面,手机截图放到PS里对比调整字体大小(切记,一定要高清截图~)
刚开始接触UI的时候,遇到最多的就是尺寸问题。 画布应该多大,文字应该多大,界面应该做多少? 弄糊涂真的有点头疼。
废话不多说,希望大家耐心看完以后,再也不用担心尺寸相关的事情了~
iOS篇
1.尺寸和分辨率
iPhone界面尺寸:320x480、640x960、640x1136
iPad界面尺寸:1024x768、2048x1536
(以上单位都是像素,至于分辨率,一般的web UI和mobile UI基本只有72ppi)
当然,设计时不必为每个尺寸都做一套。 尺寸是根据您手机的尺寸设计的,更方便预览效果。 一般采用640x960或640x1136的尺寸进行设计。
在PS中绘图时,一定要使用形状工具(快捷键:U)
画好了,方便以后剪图或者改尺寸~
2. 界面基本元素
iPhone的APP界面一般由四个元素组成游戏开发素材,分别是:状态栏、导航栏、主菜单栏和中间的内容区
这里使用了640x960的尺寸设计,下面说说这个尺寸下这些元素的尺寸:
状态栏:就是我们常说的信号、运营商、电池等显示手机状态的区域。 它的高度是:40 px
导航栏:显示当前界面的名称,包含相应的功能或页面跳转按钮,高度:88px
主菜单栏:类似于页面主菜单,提供对整个应用分类内容的快速跳转,高度为:98px
内容区:显示应用提供的相应内容,布局在整个应用中变化最频繁,其高度为:734 px
(等等,我不是在胡说八道:960-40-88-98=734)
iPhone/iPod Touch
第一代、第二代、第三代
iPhone4/iPhone4s
iPhone5/iPhone5C/iPhone5s
至于我们常说的iPhone5/5s的640x11136尺寸,其实就是把中间内容区域的高度提高到:910px
PS 在最新的iOS7风格中,苹果逐渐弱化了状态栏的存在,将状态栏和导航栏合二为一,但是不管怎么改,大小和高度还是一样的,不过iOS7大家还是会设计的再次注意样式界面~
3.字体大小
iPhone上的英文字体是:HelveticaNeue 至于中文,Mac下使用的字体是Helvetica-Jane,Win下是Helvetica Helvetica。
下图是百度用户体验做的一个小调查。 可见开发学习,用户可接受的文字大小是以像素为单位的,即PS中文字的像素大小。
PS 多注意一些大公司的数据研究,你会发现很多你根本没有考虑到的问题~
其实还有一个更简单的方法就是找个自己觉得不错的app,把手机截图放到PS里对比调整字体大小~
总之,方法是自己找的,想办法解决问题,自己去实践。 比别人告诉你的还要震撼不是吗~?
安卓篇
1.尺寸和分辨率
Android界面尺寸:480x800、720x1280、1080x1920...(单位:像素)
Android 的套数比 iPhone 多很多。 建议使用 720x1280 的尺寸。 这个尺寸在 720x1280 下完美,在 1080x1920 下看起来更清晰。 裁剪后的图片文件大小也适中,应用程序的内存消耗不会太高。
2. 界面基本元素
Android APP界面与iPhone基本相同:状态栏、导航栏、导航栏、主菜单栏和中间的内容区。
在Android中,我们使用的是720x1280的尺寸设计,那么我们来说说这个尺寸下这些元素的尺寸:
状态栏高度为:50px
导航栏高度:96 px
主菜单栏高度:96 px
内容区域高度为:1038 px (1280-50-96-96=1038)
Android最近的手机几乎都去掉了物理按键,把功能键搬到了屏幕上。 当然高度和菜单栏一样:96px
PS 写之前翻了很多Android界面尺寸的教程,但是没找到像iOS那样具体的规格,可能是因为Android中这些控件的高度是可以通过程序自定义的~没有具体的size值提到了,于是自己找了安卓设计规范,尺寸是自己在PS里测出来的~~
为了在界面上区别Android和iOS,Android 4.0开始提出HOLO UI风格,部分APP的最新版本采用了HOLO UI风格。
这种风格最明显的变化就是将下方的主菜单移到了导航栏中手机游戏设计界面尺寸,解决了很多手机去掉物理按键后屏幕出现双底栏的尴尬局面。
3.字体大小
Android上的字体是:Droid sans fallback,是谷歌自己的字体,和微软雅黑很像。
同样,在百度的用户体验调查中,可以看出用户可接受的文字与问题相对应。
具体大小还是那句话,找到自己喜欢的APP界面,手机截图放到PS里对比调整字体大小(切记,一定要高清截图~)