交互设计基础知识

高度

状态栏+导航栏 高度 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

相关文章

淘宝隐藏优惠券的赚钱逻辑

我们经常会看到一些公众号或者微信群在发放一些“大额隐藏优惠券”,大家应该都有过这样的困惑“这种优惠券到底是真的还是假的”。首先公布答案,这种优惠券是真实存在的,具体怎么领,可以在评论区留言或关注评论区...

淘宝装修教程

对于淘宝店铺来说,完成店铺的装修非常的重要,现在店铺装修分为了电脑端和手机端店铺的装修,在电脑上面操作会更加的方便一点。那么如何装修店铺?1、确定风格想要打造有质感的店铺,让买家感觉到我们的产品都是有...

或因页面改版,淘宝搜索不显示价格

截止中午12点为止,淘宝首页“服饰鞋包”类目,依旧显示不全,一直未空白;同时淘宝搜索结果页,不能显示价格,包括直通车位置;新亮点,淘宝首页导航栏新增“头条”和“淘抢购”版块,二者将是淘宝未来发展重点。...

原型设计:APP下导航如何通过Axure画出来

下导航是APP原型设计中常见的功能,如何快速高效的通过Axure画出来呢?网上有不少文章讲过如何画下导航,要么方法特别复杂,要么步骤并不全面。典型的错误有两个,①使用多个动态面板来嵌套实现下导航。②使...

装个车载导航,淘宝两千元有剩,4S店八千元喊冤没赚

小李买了台车,想装个导航原厂的要8000元,到淘宝一看才2000元,相差4倍之多。大骂4S店黑心。不可否认4S店也靠导航增配这样的手段赚取点利润,但是这种东西出厂就已经很贵了,贵是不是真的有贵的道理呢...