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