iOS与Android用户界面(UI)设计规范

相信很多人都在开发设计APP时会遇到很多界面上的问题♧♡♂♀♠♣♥❤☜,要以多大千赢官网首页登陆来设计?分辨率是多少?该怎么切图给开发......

下面为大家总结出关于ios◀ ◁ ☀ ☁ 、androidui设计规范技巧以及ios◀ ◁ ☀ ☁ 、Android的设计千赢官网首页登陆和分辨率是多少♧♡♂♀♠♣♥❤☜,希望对大家有所帮助。

iOS

1千赢官网首页登陆及分辨率


设计图单位:像素72dpi。在设计的时候并不是每个千赢官网首页登陆都要做一套♧♡♂♀♠♣♥❤☜,千赢官网首页登陆按自己的手机来设计♧♡♂♀♠♣♥❤☜,比较方便预览效果♧♡♂♀♠♣♥❤☜,一般用640*960或者640*1136的千赢官网首页登陆来设计♧♡♂♀♠♣♥❤☜,现在iPhone 6和Plus出来后有很多人会使用6屏幕千赢官网首页登陆来设计。

如果是我来做的话♧♡♂♀♠♣♥❤☜,我会使用640×1136♧♡♂♀♠♣♥❤☜,对Plus做单独的修改适配♧♡♂♀♠♣♥❤☜,因为Plus的屏幕实在是大了♧♡♂♀♠♣♥❤☜,遵循屏大显示更多内容的原则这里本应该是需要修的了♧♡♂♀♠♣♥❤☜,有更好办法的话希望大家可以分享一下。

Ps:作图的时候尽可能确保都是用形状工具(快捷键 U)画的♧♡♂♀♠♣♥❤☜,这样更方便后期的切图或者千赢官网首页登陆变更。

2界面基本组成元素

iPhone的app界面一般由四个元素组成♧♡♂♀♠♣♥❤☜,分别是:状态栏(status bar)◀ ◁ ☀ ☁ 、导航栏(navigation)◀ ◁ ☀ ☁ 、主菜单栏(submenu)◀ ◁ ☀ ☁ 、内容区域(content)。


PS:在最新的iOS7的风格中♧♡♂♀♠♣♥❤☜,苹果已经开始慢慢弱化状态栏的存在♧♡♂♀♠♣♥❤☜,将状态栏和导航栏合在了一起♧♡♂♀♠♣♥❤☜,但是再怎么变♧♡♂♀♠♣♥❤☜,千赢官网首页登陆高度也还是没有变的♧♡♂♀♠♣♥❤☜,只不过大家在设计iOS7风格的界面的时候多多注意下~

3图标千赢官网首页登陆

4字体大小

iPhone 上的字体英文为: HelveticaNeue 至于中文♧♡♂♀♠♣♥❤☜,Mac下用的是黑体-简♧♡♂♀♠♣♥❤☜,Windows下则为华文黑体♧♡♂♀♠♣♥❤☜,所有字体要用双数字号。

下图是百度移动用户体验部(MUX)做过的一个小调查♧♡♂♀♠♣♥❤☜,可以看出用户在iOS app中可接受的文字大小。


5切图

切图是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: 在出可按的图片切图时需要注意图片的可按区域大小♧♡♂♀♠♣♥❤☜,有时图标很小♧♡♂♀♠♣♥❤☜,实际切出来的放在上面♧♡♂♀♠♣♥❤☜,用手指是按不到的♧♡♂♀♠♣♥❤☜,我们就需要对图片单独处理♧♡♂♀♠♣♥❤☜,拓宽图片的有效区域♧♡♂♀♠♣♥❤☜,这里是拓宽非放大♧♡♂♀♠♣♥❤☜,就是改变画布大小使图片千赢官网首页登陆面积扩大♧♡♂♀♠♣♥❤☜,使图片四周拓宽多余的透明区域 ♧♡♂♀♠♣♥❤☜,从而改变可按大小。

6颜色值问题

iOS颜色值取 RGB各颜色的值比如某个色值♧♡♂♀♠♣♥❤☜,给予IOS开发的色值为 R:12 G:34 B:56 给出的值就是 12,34,56(有时也要根据开发的习惯♧♡♂♀♠♣♥❤☜,有时也用十六进制)

7内部设计

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

2◀ ◁ ☀ ☁ 、单独存在的部件必须是双数千赢官网首页登陆

3◀ ◁ ☀ ☁ 、两倍图以@2x作为命名后缀

4◀ ◁ ☀ ☁ 、充分考虑每个控制按钮在4中状态下的样式♧♡♂♀♠♣♥❤☜,如图:


Android

1千赢官网首页登陆及分辨率Android界面千赢官网首页登陆:480*800◀ ◁ ☀ ☁ 、720*1280◀ ◁ ☀ ☁ 、1080*1920

Android比iPhone的寸尺多了很多套♧♡♂♀♠♣♥❤☜,建议取用720*1280这个千赢官网首页登陆♧♡♂♀♠♣♥❤☜,这个千赢官网首页登陆720*1280中显示完美♧♡♂♀♠♣♥❤☜,在1080*1920中看起来比较清晰♧♡♂♀♠♣♥❤☜,切图后的图片文件大小也适中♧♡♂♀♠♣♥❤☜,应用的内存消耗也不会过高。

2界面基本组成元素

Android的app界面和iPhone的基本相同:状态栏◀ ◁ ☀ ☁ 、导航栏◀ ◁ ☀ ☁ 、主菜单◀ ◁ ☀ ☁ 、内容区域。


Android中我们取用的720*1280的千赢官网首页登陆设计♧♡♂♀♠♣♥❤☜,那我们就说说在这个千赢官网首页登陆下这些元素的千赢官网首页登陆。

状态栏高度为:50px

导航栏高度为:96px

主菜单栏高度为:96px

内容区域高度为:1038px (1280-50-96-96=1038)

Android最近出的手机都几乎去掉了实体键♧♡♂♀♠♣♥❤☜,把功能键移到了屏幕中♧♡♂♀♠♣♥❤☜,当然高度也是和菜单栏一样的:96px

Android 为了在界面上区别于iOS♧♡♂♀♠♣♥❤☜,Android 4.0开始提出的一套HOLO的UI风格♧♡♂♀♠♣♥❤☜,一些app的最新版本都采用了这一风格♧♡♂♀♠♣♥❤☜,这一风格最明显的变化就是将下方的主菜单移到了导航栏下面♧♡♂♀♠♣♥❤☜,这样的方式解决了现在很多手机去除实体键后再屏幕中显示而出现的双底栏的尴尬情景。


3图标千赢官网首页登陆

Android设计规范中♧♡♂♀♠♣♥❤☜, 使用的单位是dp♧♡♂♀♠♣♥❤☜, dp在安卓机上不同的密度转换后的px是不一样的。


4字体大小

Android 上的字体为:Droid sans fallback♧♡♂♀♠♣♥❤☜,是谷歌自己的字体♧♡♂♀♠♣♥❤☜,与微软雅黑很像。

同样♧♡♂♀♠♣♥❤☜,百度移动用户体验部(MUX)的调查中♧♡♂♀♠♣♥❤☜,可以看出用户可接受的文字相应问题。


具体大小♧♡♂♀♠♣♥❤☜,还是那句话♧♡♂♀♠♣♥❤☜,找自己喜欢的app界面♧♡♂♀♠♣♥❤☜,手机截图后放进PS自己对比调节字体大小♧♡♂♀♠♣♥❤☜,切记♧♡♂♀♠♣♥❤☜,一定是高清截图。

5切图

Android设计规范中单位是dp♧♡♂♀♠♣♥❤☜,dp在安卓机上不同的密度转换后的px 是不一样的♧♡♂♀♠♣♥❤☜,所以按照设计图的px转换成dp也是不一样的♧♡♂♀♠♣♥❤☜,这个可以使用转换工具转换♧♡♂♀♠♣♥❤☜,开发一般会有♧♡♂♀♠♣♥❤☜,也有些开发会使用px做单位♧♡♂♀♠♣♥❤☜,因为做了前期的转换工作。

6颜色值问题

Android颜色值取值为十六进制的值 比如一绿色的值♧♡♂♀♠♣♥❤☜,给开发的值为 #5bc43e


来源:学UI网

上一篇: UI设计师应该知道的栅格系统

下一篇: 安徽阜阳市第五人民医院原党委书记、院长程颍谯被查

分享到: 更多