Android和iOS统一UI库,Android和ios设计规范

1.Andriod

A：界面尺寸：480*800,720*1280,1080*1920【单位：像素】

建议取用720*1280

B：APP界面和iphone的基本相同：状态栏，导航栏，主菜单，内容区域

C：使用720*1280时：

状态栏高度为：50px

导航栏高度为：96px

主菜单栏高度为：96px

内容高度为：1038px

Andriod最近几乎去掉了实体键，把功能键移到了屏幕中，当然高度也是一样的96

D：图标尺寸

屏幕：720*1280px

启动图标：48*48dp

操作栏图标：32*32dp

上下文图标：16*16dp

系统通知图标(白色)：24*24dp

最细画笔：不小于2dp

1dp=1px

320*480 像素密度为160

1dp*像素密度/160=实际像素

E：Android上的字体

Droid sans fallback，是谷歌自己的字体，与微软雅黑很像。

2.IOS

A:尺寸及分辨率

4/4s:     640*960px

5/5c/5c:640*1136px

6/6s:     750*1334px

6/6sp:   1242*2208px

状态栏：40px

顶部导航：88px

底部菜单：98px

图标(icon)：40*40px，48*48px，80*80px，128*128px

B：界面基本组成元素

iphone的APP界面一般由四个元素组成：

状态栏(status bar)

导航栏(navigation)

主菜单栏(submenu)

内容区域(content)

状态栏：40px

顶部导航：88px

底部菜单：98px

图标：40*40px，48*48px，80*80px，128*128px

C：图标尺寸

D：字体大小

iphone上的字体英文为：HelveticaNeue。至于中文Mac下用的是黑体，Win下则为华文黑体(最新字体成为黑体-简)

3.关于UI

A:UI的控件概述：

框架UI的元素分为4类：

a：栏：状态栏目和导航栏的结合体。

b：内容视图：应用显示的内容信息，包括相关的交互行为，例如：滚屏，插入，删除等操作进行排序。

c：控制元素：产品行为或显示的信息。

d：临时视图：临时向用户提供重要的信息，或提供额外的功能和选项。

B:UI的布局概述：

1.可点击对象的区域：尺寸不要小于44*44px

2.将重要的内容和功能放在权重高的位置，将重要的元素放在前半屏比较好，对于阅读习惯从左到右的用户来说，更贴近屏幕左侧位置容易引起关注的。

3.利用视觉表现形式的权重和平衡，尺寸较大的元素具有更高的权重，对于尺寸较小的元素来说，更能吸引目光，看上去更加重要。

C:UI的模拟情景概述：

D:UI的手势交互概述：

a：通过点击(tap)

b：通过拖拽：滚屏或移动对象(将从界面的一边移动到另一边)

c：通过滚动(flick)：快速滚屏或移动对象

d：通过一个手指轻扫(swipe)

e：通过双击(double tap)

f：通过双指涨开(pinch open)或闭合(pinch close)

g：通过长按(touch and hold)：在可编辑或可选择的文字上显示放大镜，用来定位光标。

h：通过摇晃(shake)机身可执行撤销或重做的操作。

F：UI的动画概述：

a：漂亮而精致的动画效果遍布于ios各处，它们是应用体验更具动态性，更加吸引人，精细而恰当的动画效果可以

I：传达状态

II：增强用户对于直接操作的感知

III：通过视觉化的方式向用户呈现操作结果

b:尽可能与ios内置的应用的动画模式保持一致，人们已经习惯内置应用当中各种精妙的动画效果，实际上，用户往往会将内置应用当中的动效看作一体验的标准，例如切换视图时的平滑过渡效果，切换横竖屏时的流畅反馈，或是能表现出各种物理效果的滚动屏动画等等，这些都逐渐成为了人们预期当中的一部分。