IOS用户界面(UI)设计规范图表——APP设计师必看! APP设计理念  ruanjian jiaocheng

 

遇到APP设计问题

相信很多人都在开发设计APP时会遇到很多界面上的问题,要以多大 尺寸来设计?分辨率是多少?该怎么切图给开发……

下面的就分享一点点技巧,但也要给合团队在开发时的习惯。

苹果手机设备界面尺寸

 

IOS用户界面(UI)设计规范图表——APP设计师必看! APP设计理念  ruanjian jiaocheng

设计图单位:像素

设计图分辨率:72像素/英寸

在设计的时候并不是每个尺寸都要做一套,一般用640*1136的尺寸来设计,现在 iPhone 6和Plus出来后有很多人会使用6屏幕尺寸来设计。我习惯使用640*1136,对Plus做单独的修改适配。

Ps:作图的时候尽可能确保各部分元素都是适量图(PS中的“快捷键U”绘制,或者 AI绘制),这样更方便后期的切图或者尺寸变更。

 

苹果手机APP图标尺寸

IOS用户界面(UI)设计规范图表——APP设计师必看! APP设计理念  ruanjian jiaocheng

 

苹果APP上的字体大小

在不同平台的界面设计中规范的字体会有不同,像移动界面的设计就会有固定的字体样式。

以下是在72像素/英寸下的规范

IOS:中文字体华文黑体或者冬青黑体,英文字体HelveticaNeue。

大家注意了,在选用字体大小的时候一定要选择偶数的字号,因为在开发界面的时候, 字号大小换算是要除以二的。

下图是百度移动用户体验部(MUX)做过的一个小调查,可以看出用户在IOS App中可接受的文字大小。

 

IOS用户界面(UI)设计规范图表——APP设计师必看! APP设计理念  ruanjian jiaocheng

 

我在设计中常用的字号

导航主标题字号:38-40px

在内文展示中字号:大的正文字号32px、副文是28px、小字20px

字号的大小需要根据不同类型的App进行设定,如果你有不确定的,就去截取你认为非常的好APP然后去看他的字号(针对你的项目),也可以将你的设计在你的手机里 面进行查看,观察你的字号的大小(自己作为用户,体验自己的设计),注意你的设计尺寸要是你的手机的标准尺寸。

这里推荐2款Photoshop设计效果实时在手机端预览的APP 首推是PS CC2015内置的一款APP——名为Preview。

 

IOS用户界面(UI)设计规范图表——APP设计师必看! APP设计理念  ruanjian jiaocheng

 

上边这货就是Adober CC2015最新更新功能不过只能IOS设备上安装,要有苹果手机或者IPAD 具体怎么安装大家去找万能的百度哈 没有苹果咋办一接下来给你介绍一款安卓可用的APP。

第二款是腾讯开发的一款名为Ps Play的APP。

 

IOS用户界面(UI)设计规范图表——APP设计师必看! APP设计理念  ruanjian jiaocheng

 

上边这货就是腾讯开发的PS设计效果实时在手机端预览的软件,可以在IOS上使用(非常成熟了)。也可以自爱安卓手机上使用(虽然只有一个测试版)具体怎么安装和使用方法大家去找万能的百度哈!

关键的切图

切图是APP设计中的一个重要过程,关系到APP的界面实现,及各种适配性还有各种性能。苹果在没6 Plus前,我们只需要提供两种图,普通图及视网膜屏幕图。

以640*1136(640*960是一样的)做的设计图的话就会好办一点。直接出设计图 上的原大小图标,比如我们命名一个图片叫img-line.png,我们绐开发的图就要改变这个名字叫img-line@2x.png就是在后缀名前加上@2x表示视网膜屏的图,iPhone4的还需要把这个图尺寸按比例缩小50%,得到正真的img-line.png。然后把这两个图移交给开发,iPhone6的图在规范里是与5s使用的是一样的,也是@2x图。有些UI则需要做适当的适配,比如拉长,拉高,这个开发会去做。

对于iPhone 6 plus的话范里绐出的是@3x相信大家也知道是怎么回事,但如果要使用PS放大的话,大家做图的时候就需要使用形状工具来做,放大后还需要仔细微调,这 里就不多做讲解

PS:在出可按的图片切图时需要注意图片的可按区域大小,有时图标很小,实际切出 来的放在上面,用手指是按不到的,我们就需要对图片单独处理,拓宽图片的有效区 域,这里是拓宽非放大,就是改变画布大小使图片尺寸面积扩大,使图片四周拓宽多余 的透明区域,从而改变可按大小。

例子:

 

IOS用户界面(UI)设计规范图表——APP设计师必看! APP设计理念  ruanjian jiaocheng

 

颜色值问题

IOS颜色值取RGB各颜色的值比如某个色值,绐予IOS开发的色值为R:12  G:34  B:56绐出的值就是12,34,56(有时也要根据开发的习惯,有时也用十六进制)。

内部设计

1、 所有能点击的图片不得小于44px (Retina需要88px)。

2、 单独存在的部件必须是双数尺寸。

3、 两倍图以@2x作为命名后缀。

4、 充分考虑每个控制按钮在4中状态下的样式,如图:

 

IOS用户界面(UI)设计规范图表——APP设计师必看! APP设计理念  ruanjian jiaocheng

属性标签:

欢迎留言