交互设计基础知识
高度
状态栏+导航栏 高度 128px,1px分割线,共129px,
列表内小图标大小 58*58px 圆角为12px
板块与板块之间的间隔为70px(如果状态栏+导航栏有1px分割线的话距离为69px)
列表高度为86px
字体
iPhone的系统字体,在设计稿中最接近的中文字体为黑体-简 英文写作Heiti SC 英文字体为helvetica Regular
导航字体 中体 样式:浑厚 34px
列表类字体 细体 样式:浑厚 34px
边距
上下不限制
左右距离手机屏幕边缘 左右各30px
列表内图标上下左右间距30px
以iPhone5通知中页面为例
板块说明文字 26px 细体 浑厚 与板块距离18px
列表类标对一级标题说明 24px 细体 浑厚 与一级文字距离8px
列表高度(包含1px分割线)100px
以iPhone5的APP Store 更新页面为例
导航上返回/更新的字体:33px 细体 浑厚(没错就是33px —_—|||);箭头与屏幕边框距离为16px
控件一级菜单栏内tab切换:580x58px(包括2px描边) tab里字体:24px 细体 浑厚
搜索框:608x56px;圆角12px;搜索框内字体:28px 细体 浑厚
更新列表内图标: 128x128px ;圆角:30px
列表高度(列表不包括向下1px分割线):168px,所以icon距离列表20px
列表内文字:28px 细体 浑厚;说明性文字:24px 细体 浑厚
列表内部按钮大小92x52px ,包含2px描边,字体大小28px 细体 浑厚
tabbar下部菜单:高度 98px(包含顶部1px分割线);字体20px 细体 浑厚
更新通知红点大小: 36x36px 红点内数字 helvetica Regular 24px
屏幕像素尺寸与物理尺寸
pixels per inch 每英寸上像素点数量,iPhone3gs和iPhone4s屏幕大小同为3.5英寸。但是iPhone4s是将一个像素分为了4个像素。
也 就是说按原本的尺寸设计适合只需要建立320x480px的画布(iPhone 3gs),视网膜屏出现以后就是将宽和高都乘以2倍。640x960px(iPhone 4s)由于图片从大放小效果不会受到影响,但从小放大就会出现质量偏差,所以设计师们会以大尺寸为设计标准。这样适配各个屏幕尺寸比较省时。
开发者在xcode上开发的屏幕选择和设计师是不一样的,他们只需要选择手机的物理尺寸即可如下图:
这里有一个pt的概念,下面是引用《通俗易懂!超全面的移动端尺寸基础知识科普指南》的一段文字:
1倍:1pt=1dp=1px(mdpi、iPhone 3gs)
1.5倍:1pt=1dp=1.5px(hdpi)
2倍:1pt=1dp=2px(xhdpi、iPhone 4s/5/6)
3倍:1pt=1dp=3px(xxhdpi、iPhone 6)
4倍:1pt=1dp=4px(xxxhdpi)
当前页加载方式,框架加载优先
分布加载:优先加载占用资源少的内容,如框架,文字,再加载网路资源多的,如图片
懒加载:长列表,用户下滑达到某个点后自动加载更多内容
预加载:提前加载,如闪屏时候提前加载首页内容
智能加载:在不同网络下生成不一样的界面,网络差隐藏信息。主动判断网路,提供不同质量图片
缓存加载:针对无网络,让用户仍能看到缓存在本地有用信息,一般在主界面都会使用缓存,需要有缓存清理入口和机制。
加载样式:
状态栏加载:淘宝
导航栏加载:来往
界面加载:今日头条
工具栏加载:IOS邮件
幻灯片式引导:功能性+故事型 3-5个界面
浮层式引导:带箭头,3S自动消失,半透明
遮罩式引导:比较强势引导,遮罩层半透明,需要确认和退出按钮
嵌入式引导:初始状态,清空状态(淘宝购物车),出错状态
互动式引导:较为隐蔽,如:语音输入说明
多媒体引导
通知:
通知中心:android状态栏通知系统自带。ios本身不带,通过覆盖状态栏方式实现通知设计
顶部横幅(QQ)
ALert(打断程度最大,不推荐使用)
Toast
标识(小红点)
硬件辅助:声音,LED,震动
字体:
IOS 中文 黑体-简 Heiti SC 英文 Helvetica(Neue)
Android 中文 Droid Serif 英文 Roboto
常见字号:22 18 14 12 9dp
按钮状态:normal press disable
键盘样式:default ASCIICapable NumberPad PhonePad URL EmailAddress NumberPhonePad NumbeAndPunctuation