分类目录归档:界面设计

iOS之苹果设备尺寸及数据

iPhone设备

物理分辨率是硬件所支持的,逻辑分辨率是软件可以达到的。

代数 设备 操作系统 逻辑分辨率(point) 物理分辨率(pixel) 屏幕尺寸(对角线长度) 缩放因子
iPhone
第一代 iPhone 2G iOS 1 320 x 480 480 x 320 3.5寸 1x
第二代 iPhone 3 iOS 2 320 x 480 480 x 320 3.5寸 1x
第三代 iPhone 3GS iOS 3 320 x 480 480 x 320 3.5寸 1x
第四代 iPhone 4 iOS 4 320 x 480 960 × 640 3.5寸 2x
第五代 iPhone 4S iOS 5 320 x 480 960 × 640 3.5寸 2x
第六代 iPhone 5 iOS 6 320 x 568 1136 x 640 4.0寸 2x
第七代 iPhone 5S/5C iOS 7 320 x 568 1136 x 640 4.0寸 2x
第八代 iPhone 6 iOS 8 375 x 667 1334 x 750 4.7寸 2x
第八代 iPhone 6 Plus iOS 8 414 x 736 2208 x 1242 (1920×1080) 5.5寸 3x
第九代 iPhone 6S iOS 9 375 x 667 1334 x 750 4.7寸 2x
第九代 iPhone 6S Plus iOS 9 414 x 736 2208 x 1242 (1920×1080) 5.5寸 3x
iPhone SE iOS 9 320 x 568 1136 x 640 4寸 2x
第十代 iPhone 7 iOS 10 375 x 667 1334 x 750 4.7寸 2x
第十代 iPhone 7 Plus iOS 10 414 x 736 2208 x 1242 (1920×1080) 5.5寸 3x

如图所示:

这里写图片描述

Tips:

机型 屏幕宽高比
iPhone 5 320÷568=0.563
iPhone 6 375÷667=0.562
iPhone 6 Plus 414÷736=0.5625

最终发现iPhone5和6一个小秘密,它们的比例是不变的

iPod设备

设备 操作系统 物理分辨率(pixel) 屏幕尺寸(对角线长度) 缩放因子
iPod Touch 1 iOS 1 480 x 320 3.5寸 1x
iPod Touch 2 iOS 2 480 x 320 3.5寸 1x
iPod Touch 3 iOS 3 480 x 320 3.5寸 1x
iPod Touch 4 iOS 4 960 x 640 3.5寸 2x
iPod Touch 5 iOS 6 1136 x 640 4.0寸 2x
iPod Touch 6 iOS 8 1136 x 640 4.0寸 2x

iPad设备

设备 操作系统 物理分辨率(pixel) 屏幕尺寸(对角线长度) 缩放因子
iPad 1 iOS 3 1024 x 768 9.7寸 1x
iPad 2 iOS 4 1024 x 768 9.7寸 1x
iPad 3 (The New iPad) iOS 5 2048 x 1536 9.7寸 2x
iPad 4 iOS 6 2048 x 1536 9.7寸 2x
iPad Air iOS 7 2048 x 1536 9.7寸 2x
iPad Air 2 iOS 8 2048 x 1536 9.7寸 2x
iPad Pro iOS 9 2732 x 2048 12.9寸 3x
iPad mini iOS 6 1024 x 768 7.9寸 1x
iPad mini 2 iOS 7 2048 x 1536 7.9寸 2x
iPad mini 3 iOS 8 2048 x 1536 7.9寸 2x
iPad mini 4 iOS 9 2048 x 1536 7.9寸 2x

(经常需要查询的设备像素比:转载自 http://blog.csdn.net/scorpio_27/article/details/52297643)

谷歌产品体验设计

对于产品设计方面的文章,自己看的也多了,今天刚好搜到一片谷歌关于产品设计原则的文章。与我的想法不谋而合,追求速度和简单的极致。把链接共享给大家。

原文链接:http://www.google.com/corporate/ux.html

译文链接:http://ucdchina.com/snap/9529

谷歌的愿景

Googl用户体验团队致力于创建有用的(useful)、快速的(fast)、简单的(simple)、有吸引力的(engaging)、创新的 (?innovative)、适合大众的(universal)、有用的(profitable)、漂亮的(beautiful)、值得信赖的 (trustworthy)、个性化的(personable)的应用。

Google用户体验的十大准则

1. 将焦点集中在用户的生活,工作,和他们的梦想上。

Google 用户体验小组努力发现用户的真正需求,包括那些他们自己都无法阐明的需求。有了这些信息,Google就可以创建解决现实问题的产品并激发所有人的创造 力。Google的目标不仅仅是按部就班的工作,而是改善人们的生活。总之,一个精心设计的Google产品在日常生活中是非常有用的。他并不是靠花哨的 视觉效果和技术打动用户的,虽然也有具备这些特性。他不会强迫用户去使用他们不想要的特性,但是他会引导有兴趣的用户自发的去使用他们。他不会入侵别人的 生活,但是回想那些想要探索世界信息、工作的更加快速和便捷、分享想法的用户敞开大门。

继续阅读

网站导航设计模式指南(转载UCD二区)

《写个大家的设计书》《结网》《网站导航设计》这写好书都慢慢融入到了前端开发的阅读范围了,很高兴国内的工程师都开始意识到体验在前端工作中的重要性,相对来说,不是每个公司都会有所谓的“用研”团队,不过接下来的这篇关于导航设计的文章,是对书上知识的一个很好的总结,并且不乏新颖的理念。原文地址:http://ucdchina.com/snap/9203

正文如下:

在网页设计中有一些通用的交互设计模式。网站导航各种各样的通用和大家熟知的设计模式,可以用来作为为网站创建有效地信息架构的基础。这篇指南涵盖了流行的站点导航设计模式。对于每一种网站导航栏设计模式,我们将讨论它的一般特征,它的缺点,以及什么时候使用它最好。

顶部水平栏导航

顶部水平栏导航是当前两种最流行地网站导航菜单设计模式之一。它最常用于网站的主导航菜单,且最通常地放在网站所有页面的网站头的直接上方或直接下方。

继续阅读

一偏关于线框图的文章(转载)

在搜狐上看见的这篇文章。写的非常的言简意赅,并且容易理解。转载一下共享给大家

原帖地址:http://heidixie.blog.sohu.com/159793641.html


这是一篇老生常谈的问题,所以若有人已经了解,请自动忽略好了。这也是在一次和PD的交流培训会上再次提出的老问题:究竟线框图为什么要画,以及如何画。

至于线框图为什么要画,就不在这里聱述了。相信已经有很多人写过类似的文章,当然,如果你还有疑问,可以给我写邮件。

现在就是如何画的问题。 继续阅读

交互设计的方法(转载)

原文出处:http://www.baiduux.com/blog/2010/08/03/interaction_design/comment-page-1/#comment-453

看见这品文章刚好是在我们团队很混乱的时候出现了,天赐良文啊.在公司,我们也对设计越来越重视,可是也苦于没有很好的交互设计规则,导致搞得一团糟.作者的文章应该还是能够对线框图,交互设计这些工作中存在疑虑的开发者一些帮助. 继续阅读

亚洲购物者的类型分析(转载自搜狐财经)

对于想创业做B2C商城的创业者来说,这篇文章或许有参考的必要,浏览了一遍觉得这文章写得不错,把它转载出来给大家共享一下.

原文地址如下:http://business.sohu.com/20100524/n272314189.shtml

文章内容:

看看市场艰难时期那些购物者的表现吧,他们似乎都躲起来了。事实上,他们并不是在躲避那些营销者,他们首先躲避的是他们自己。大把花钱的内疚心理、对经济的不确定和忧虑让购物者们控制住自己购物的急切心理,在这种控制心理的驱使下,他们的购买行为最终被延迟或者取消了。这就是如今零售市场上竞争与以前相比更激烈的原因。在零售市场上,购物者不可避免地面临一个个选择,直到万不得已时才做出购买决策。消费者最终选中某品牌的产品并为之买单,这一刻对于任何品牌而言都是关键的决策瞬间(First Moment of Truth)。 继续阅读