博客 (17)

你可能打开了假的工具[捂嘴]

查看你打开工具的图标快捷方式是指向到哪的？

打开属性，点击“打开文件所在的位置”，是不是那个英文名的文件是高亮的？

你可以直接双击打开这个英文工具“wechatdevtools.exe”，确实打开的是上面的 NW.JS 界面，

然后打开中文名的工具“微信web开发者工具.exe”，正常运行。

那么就在这个文件上右键，选择你喜欢的打开方式吧：“固定到开始屏幕”或“固定到任务栏”或“发送到桌面快捷方式”。

附微信web开发者工具下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

项目	尺寸（宽*高）
手机网页/应用	参 iPhone 屏幕分辨率
X展架、易拉宝	60cm x 160cm、80cm x 180cm 等
名片	90mm x 55mm、85mm x 54mm
A4纸	210mm x 297mm 参
三折页	(A4)210mm x 285mm
LED显示屏单元板分辨率	32 x 16（点距1cm的话就是32cm x 16cm）、64 x 32 等

 

分辨率	宽高比值	最简宽高比
7680×4320（8K）	1.777777777777778	16:9
3840×2160（QFHD 4K）	1.777777777777778	16:9
2048×1536（QXGA 2K）	1.333333333333333	4:3
2560×1600（WQXGA 2K）	1.6	8:5
2560×1440（1440p Quad HD 2K）	1.777777777777778	16:9
1920×1080（1080p Full HD）	1.777777777777778	16:9
1680×1050	1.6	8:5
1366×768	1.778645833333333	约16:9
1360×768	1.770833333333333	约16:9
1280×1024	1.25	5:4
1280×800	1.6	8:5
1280×768	1.666666666666667	5:3
1280×720（720p HD）	1.777777777777778	16:9
1024×768	1.333333333333333	4:3
800×600	1.333333333333333	4:3
2436×1125	2.165333333333333	约13:6

附：100 以内整数比值

编者按：本文作者 Nick Babich 在文中介绍了几种 “提高” 加载速度的方法。

当我们设计产品的时候，我们没有办法模拟不同的加载速度。因此如果用户等待太长的时间才能看到内容，并不是我们特意的安排。

网速不稳定，尤其是当我们加载图片或音乐时，时间会较长。在这种情况下，我们不得不考虑在这种间隙向用户展示什么内容才能让他们感觉不枯燥。

加载动图（Spinner）效果不佳

加载 Spinner 并不是暗示加载或思考的正确方式。默认加载图标（例如 iOS 的加载动画效果是从中心点辐射的灰色线条）通常具有消极的含义。它们应用于多种操作系统功能之中，包括设备启动、连接到网络或者加载数据。

人们讨厌只看到加载 Spinner，但是却看不多进度或时间。让用户盯着一个下载进度条或者旋转圈会让跳出率提高。

不确定的等待时间比已知的、有限的等待时间让人觉得更长。你应该给你的用户一个清晰地等待时间。

进度条可以告诉用户这个过程需要花费多长时间，但是一般不太正确。你可以通过一些方法隐藏过程中的延迟，例如你可以在开始的时候让速度显示地快一点，在结尾的时候，显示速度慢一点。进度条不应该中断，否则用户就会认为这个 App 卡住了。

后台操作

在后台操作中包含行为有两个优点——用户可见；在用户真正发出请求时就会加载完毕。当程序在后台运营时，给用户呈现一些其他的内容。一个很好的案例是在 Instagram 中加载图片。用户一旦选择想要分享的图片，就开始加载。

在后台加载图片的过程中，Instagram 邀请用户添加标题和标签，当用户准备按 “分享” 键时，加载过程就完成了，这时候就可以立刻分享图片了。

仿真内容和 Placeholder（占位符）

如果你无法缩短加载时间，那么你应该试图让用户在等待中更高兴一点。可以利用这个时间显示一些临时的信息。为了提高用户的参与度，可以使用仿真内容作为文本和图片。

几点小建议：

1、加载屏幕不应该太亮。不需要太吸引眼球。Facebook 的灰色 Placeholder 就是一个很好的例子。当加载内容时使用模板元素，让用户熟悉将要加载的内容的整体结构。

2、如果要加载图片，你可以在 placeholder 中使用加载图片的主色调。Medium 的图片加载效果比较好。首先加载一个小型的模糊图片，然后转化成一个清晰的大图片。

使用 placeholder 和仿真内容并没有加快加载过程，但是在用户眼中加载速度好像变快了。

分散用户的注意力

为了不让用户在等待时感到枯燥，可以适当分散他们的注意力。你可以使用一些有趣的、始料未及的东西吸引用户的注意力，为 App 加载赢得充足的时间。

动画片可以分散访客的注意力，让他们忽略加载时间。

结论

用户讨厌等待，如果你让用户觉得他们没有等待，那么他们就会喜欢你的 App。一定要让用户觉得 App 的加载时间比他预计的短。

本教程使用的软件版本：

VMware Workstation 12 Pro for Windows

Mac OS X Unlocker for VMware V2.0.6
一个能让虚拟机 VMware 安装 OS X 系统的解锁补丁

OS X 10.10.5 Yosemite (14F27) 懒人版 CDR 镜像
CRC32: C7E1E915
MD5: A76FF6E43058A40182435D274D9EB976
SHA-1: 7DDC194E779B003AFDCF2B7C11BEB6D4443F8D72

安装步骤：

1、安装 VMware Workstation

2、新建虚拟机：选择 典型 - 稍后安装操作系统，当然现在还看不到 Apple Mac OS X，先退出 VMware

3、安装 Unlocker

4、重复第 2 步，选择 Apple Mac OS X，并选择对应的 OS X 版本，后续跟据情况自行配置

5、编辑虚拟机设置 - CD/DVD(SATA) - 使用 ISO 镜像文件 - 浏览 - 所有文件(*.*)，定位到 .cdr 镜像文件

6、开启此虚拟机

7、如果报错：VMware Workstation 不可恢复错误: (vcpu-0)，打开新建虚拟机时指定的位置（默认在 C:\Users\用户名\Documents\Virtual Machines\虚拟机名\），用记事本打开 .vmx 文件，添加一条配置：smc.version = "0"，保存关闭后重新开启虚拟机

8、如果屏幕中央出现一个禁止的图标，那么表示当前版本的 VMware 不支持安装当前版本的 OS X

9、如果在“选择要安装到的磁盘”界面仅列出了镜像文件而无法继续安装，请在窗口顶部的菜单栏中选择 实用工具 - 磁盘工具，选中新建虚拟机时创建的磁盘，切换到“分区”选项卡进行分区操作，简单地可以选择“1 个分区”，点击“应用”、“分区”，退出磁盘工具。现在可以把 OS X 安装在刚刚创建的分区上了

10、继续愉快地安装和使用 OS X 吧！

使用此方法将 OS X 安装到物理磁盘并支持开机直接运行，请参考此文：超详细 （60P）利用虚拟机安装10.9.4（懒人版）到真机教程

原文：http://mathewsanders.com/designing-adaptive-layouts-for-iphone-6-plus/
翻译：叮当当咚当当小胖妞呀

从IOS6开始，苹果公司就一直建议我们使用自适应布局，但是迄今为止，我发现大家都在回避这个问题，考虑的最多的仍然是固定布局。

iPhone 6的上市让人们很难再去逃避自适应布局这个问题，四种屏幕尺寸（如果要支持iPad就要上升到5种）、三种分辨率和转向似乎让着手于自适应布局变得更加简单。

在文章的最后，你应该能流畅使用 storyboards、 约束(constraints)和 size class特性，这三个是Apple为开发和制作自适应布局提供的Xcode工具。

所以下载Xcode6，给自己来杯饮料，留上一个小时的时间，让我们开始吧！

• Storyboards
  • 模拟尺寸
• 约束
  • 头部和尾部空间
  • 横向空间约束
  • 同等宽度约束
  • 纵横比约束
  • 约束管理
    • 添加约束
    • 检查和编辑现有约束
    • 删除约束
  • 布局问题和冲突
    • 错位视图警告
    • 约束缺失错误
• Size Classes
  • 宽度和高度特性
  • 我们的目标…
  • 为通用的size class添加约束
  • 为iPhone纵向布局添加约束
  • 为iPhone横向布局添加约束
  • 编辑助手：设备预览
  • 为iPad布局添加约束
• 使用布局和间隔视图
  • 布局视图样例
  • 间隔视图样例
• 下一步

Storyboards

Xcode中，storyboards可以让你在屏幕上拖动和放置原生对象（例如按钮、图片、文本框和标签）并且定义每个屏幕之间如何连接。

在Xcode专业术语中，可以看到、摸到、互动的用户界面元素，我们称之为 视图（按钮、图片、文本框、标签等等）。

包含并管理所有那些视图的屏幕被称为 视图控制器，我倾向于交替使用这些术语。

当我们在一个storyboard上添加视图控制器的时候，它的纵横比其实跟任何设备都不匹配，事实上，它是一个完美的600pt*600pt的正方形：

这提醒了我们，storyboard屏幕并不代表特定硬件上的屏幕，而是 任何IOS设备的抽象表现。

模拟尺寸

也许你不介意在600pt*600pt的画布上操作，但是在实际大小上操作可能会更有帮助。

我们可以非常方便的在Xcode里改变视图控制器模拟的尺寸和转向：

约束

向你们展示约束的最好方法是实例。

我们先创建一个简单的包含一个屏幕的storyboard（模拟4英寸iPhone的尺寸），再添加两个相邻的正方形。

当我们在竖屏中运行app的时候，这两个正方形完全按照我们的布局排列，当我们变成横屏时，它们仍然忠于自己的坐标：

当我们使用iPhone 6模拟器运行项目的时候，我们可以再一次看到，我们的布局并没有自适应不同的屏幕尺寸，屏幕右边多出了可见的空白区域。

这是由于没有约束，这些对象仍然会按照我们在storyboard上创建的x,y坐标和面积来定位。

所以让我们开始添加约束，看看会对它们有些什么影响。

头部和尾部空间

我们在蓝色方块前添加10pt的头部空间约束，在红色方块后添加10pt的尾部空间约束。

当我们运行项目的时候，约束把蓝色方块固定在屏幕左侧，把红色方块固定在右侧。

横向空间约束

我们在两个方块之间再添加一个10pt的横向空间约束，就像上一个约束一样，这样会让两个方块之间有一个固定的空间。

当我们运行项目的时候，会发现一个意料之外的结果：我们所有的约束都满足了，但是为了满足所有约束，其中一个方块被拉伸了。

这似乎告诉我们这样一件事：除非被告知，否则IOS会尽量让大多数对象都保持“自然”大小。

同等宽度约束

我们添加一个同等宽度约束。

当运行项目的时候，我们可以看到两个方块宽度的增量相同。

纵横比约束

最后，对两个方块添加纵横比约束。

这个约束保证了宽度和高度的比永远是相同的。

当我们运行app的时候，我们可以看到每个方块的宽度在增加，高度也同时在增加。

用iPhone 6模拟器运行项目，覆盖我们之前添加过的约束，你可以看到这两个正方形是如何利用可用空间来拉伸的。

约束管理

现在你已经看到了我们是如何使用约束的，下面我们来介绍一下具体操作。

提示：尽量少使用约束

添加约束的一个要点是试着挑战自己，越少使用约束越好。

虽然我并不认为添加的约束数量能够很大程度上影响IOS的性能，但是越少的使用约束，你的布局就会越好维护。

添加约束

在storyboard中添加约束有三个方法：

1. 约束弹窗也许最好的方法就是选择一个或多个对象，从其中一个弹窗中添加约束。我认为这是个很好的方法，因为可以看到现有约束的范围。如果有一条约束不可用，可能就意味着你需要两个或更多对象来实施这条约束。
2. ctrl + 拖动你可以按住ctrl键，同时拖动到一个对象上（可以是相邻对象、父级对象或者是自身），会出现一个浮层告诉你可以被添加的约束有哪些。这是我最喜欢的添加约束的方法，因为你不需要把你的鼠标移动到大老远的底部再回到对象。
3. 菜单/绑定你也可以选择一个或多个对象，在菜单中点击 editor -> pin来选择约束，这其实是最没有效率的方法，但是如果你发现自己不停的重复添加一种约束，也许为一个或多个选项添加绑定更合理一点。

检查和编辑现有约束

检查视图中应用的约束最简单的办法就是选择视图，切换到Size检查面板。

或者在文档大纲层次面板中切换constant数值。

无论是哪种方法，选择约束可以让你直接更新它。

删除约束

同样的，约束也可以通过高亮+点击删除按钮来删除。

要删除一个视图的所有约束，或者屏幕中的所有约束，在布局问题弹窗中有一条捷径：

布局问题和冲突

当我们在storyboard中添加约束的时候，Xcode总会给出一些关于这些约束的警告或者错误。

有时候这些问题可以忽略不计，但是更多的时候，它们必须被解决。

查看约束警告和错误最好在文档大纲面板中，每个视图控制器会有一个红色或者黄色的icon来表示是不是有布局问题：

错位视图警告

一个比较常见的警告是错位视图警告，如果约束规定这个视图应该在的地方，和这个视图实际在的地方不匹配，那么这种警告随时会出现。

当你转换模拟尺寸或者不小心用鼠标移动了一个视图，这些警告也会出现。

点击一个错位的视图，屏幕上会出现一个虚线框，告诉你约束规定了这个视图应该在的位置。

如果点击警告，会出现一个带有几个选项的浮层，你可以选择让Xcode更新约束来匹配storyboard上的位置，也可以让Xcode更新框架来移动或者拉伸视图，使它们回到约束规定的位置。

缺失约束错误

让我们回到一开始蓝方块和红方块的例子，我们没有添加过一个关于纵向位置的约束，但当我们运行app的时候看起来完全没问题，因为IOS会认为纵向位置就是我们在storyboard上放置的位置，不过为了避免一些意料之外的行为，我们最好还是规定一下。

在 顶部布局向导添加顶部空间约束可以消除一些说不定道不明的约束和错误。

Size Classes

为了在大多数基础布局或者更高级的布局上使用约束，你需要同时使用size classes。

Size classes是一种能够告诉你物理设备宽度和高度的特性。

当我们在storyboard的屏幕上添加对象或者约束时，只有设备符合当前的宽高特性，对象才会显现，约束才会被应用。

这是一个非常有用的方法，它让我们确定了不同设备和转向下布局的变化。

高度和宽度特性

使用 紧凑(compact)、 任意(any)和 正常(regular)这三种的组合，可以让我们确定一些范围内的设备布局。

虽然不能涉及每一个变化（比如不能确定iPhone 6 Plus的竖向模式，也不能让iPad的转向消失），但是大多数的变化都可以确定。

我们说过，介绍size classes最简单的方法是实例，所以让我们看一个例子。

我们的目标…

作为例子，我们做一个Instagram详情页的简单版本，可以适应大屏和转向。

我们的目标是创建一个布局，它可以机智的适应更大的iPhone 6设备（我说的机智，是指只有照片会放大，其他的元素如头像照片仍然不变），并且当设备横屏的时候，图片和元数据会并肩排列，而不是像竖屏时的上下排列。

为通用的size class添加约束

跟之前的例子不同，这次我们不使用模拟尺寸度量，我们使用通用size class的抽象方形布局，这样会使我们记住，为这个size class添加的任何视图和约束，只能是那些添加在任意屏幕尺寸和转向上的视图和约束。

我们需要用到这些约束：

除了必要的空间、间隙和纵横比约束，我们还需要让某些对象排列在顶部或者底部。

现在，在你的storyboard上添加视图和约束吧。做这步的时候，我的storyboard长这样：

注意，现在我们有了所有转向上所需要的元素，但是我没有费心完成每个转向上的布局，下一步我们才会做！

为iPhone纵向布局添加约束

现在，我们把size class切换到 紧凑宽度和 正常高度，这个尺寸特性的组合适用于任何竖屏下的iPhone设备。

如果要切换size classes，点击storyboard中下方的size class标签，选择你想要看到的宽高组合。

注意，当你切换size class时，视图控制器的尺寸会更新来显示新的抽象布局。

最后，你可以重新定位、拉伸视图和添加竖屏上的约束了。这里有一些我添加到竖向布局上的约束：

这是我做到这步时，我的storyboard的样子：

在这个阶段，你可以用任何的iPhone模拟器（3.5、4、4.7或者5.5英寸屏幕）来运行你的项目，看看竖屏情况下的布局是否合理，虽然如果转向成横屏时，布局看上去会一团糟。

注意，我们没有固定图片的宽度，我们只是简单地把图片的左右边缘固定在屏幕两侧。当变为更大的iPhone 6屏幕尺寸时，图片会被拉伸，又因为我们添加了一个固定图片纵横比的约束，所以高度也会同时增加。

为iPhone横向布局添加约束

现在切换size class到 任意宽度和 紧凑高度，这种尺寸特性的组合适用于任何横屏下的iPhone设备，并且会为了满足横屏视图下的目标更新布局。

这次，图片的顶部、左边和底部边缘都被固定在父级视图的边缘。

这个局部另一个有意思的地方是，在评论标签上添加的尾部空间约束。

当图片的约束使得图片变大的时候，这个标签上的约束会使得自身变窄。为了适应这种视图下的文本，文本高度需要增加到两行——的确如此！

下图是我做到这步时storyboard的样子。注意，在文档大纲中，一些约束会稍稍渐隐，这些约束是在竖向视图中我们添加的，它们仍然存在，但是当我们选中当前的宽高特性时，它们不会被应用。

也要注意，当你转换宽高特性时，storyboard会更新以便显示你为那些特性增加的约束。太棒了！

现在运行项目，我们会发现当转向改变时，我们有了一个既适用于横屏又适用于竖屏的布局，更棒的是在转向时，会有一个完美的过渡动画。

我把整个过渡动画放慢，这样你们能看的更加清楚。注意动画中也有层级关系，正由于此，即使在正常布局下视图并没有重叠，我们也需要考虑如何安排视图的层级关系……

编辑助手：设备预览

Xcode另外一个很有用的东西：设备预览助手。你不再需要无数次运行项目来检查你的布局是否正确，你只需要使用编辑助手storyboard预览，选择你想要的所有设备和转向就可以了。

这并不是完美的（比如导航条的颜色在这个例子中缺失了），但是它却是一个很好地选择，它可以让你把你自己的语言切换到双倍长度伪语言，可以在你的storyboard中重复任何文本。

这是我storyboard上的预览助手，它展示了一个3.5英寸横屏和4英寸竖屏的iPhone，你可以看到我还需要再加工加工来适应更长的标签……-_-

为iPad布局添加约束

现在，切换size classes到 正常宽度和 正常高度，这是iPad横屏和竖屏的特性。

就像之前一样，我们重新定位、拉伸我们的视图。对于iPad布局，我决定使用固定尺寸的图片（所以它不会像在iPhone上那样切换横竖屏时会改变大小），元数据都显示在图片底部。

下图是我在重新排列视图并添加了约束之后的storyboard：

到现在为止，我们为某些特别的size class特性添加了约束，但是现在我们要尝试些不同的东西。

由于iPad上会有多余的空间，我们不要仅仅只是重排视图，让我们来加一点额外的内容。对于这个例子来说，我们再加两张图片（也许是在这张主照片之前和之后拍摄的照片）。

这是我的storyboard更新之后的样子：

我原本可以手动输入这些次级图片的宽高，但我没有，取而代之的是我让它们的尺寸变成主图片的某个比例。

这样做的好处是如果我们决定改变主图片的尺寸，布局的其他部分会自动的计算并且更新次级图片的宽高，而不用我们手动输入。

这是一张我截的图，我改变了主图片的宽度约束，可以看到其他的部分也随之更新了。

我没有在iPad模拟器上运行项目并截屏，不过这里有一些横屏和竖屏的效果图：

使用布局和间隔视图

Xcode中有些约束我们可以随时运用，但是对于一些些常见的布局，我们需要一点帮助。

布局视图样例

要把一个视图的边缘固定在父级视图的边缘，或者把它固定在父级视图的正中心是件很简单的事情，~~但是我没有发现简便的方法，让视图固定在离正中心有一段固定距离的地方。~~感谢Jeff Nouwen指出，在把视图固定在中间后，你可以改变constant值来达到你的期望。

理论上来说，我们需要的是一个‘ 中心排列导向’，即任何视图都能水平和垂直居中与父级视图中：

为了实现这个目标，通过现在我们可以使用的约束，我们把我们的视图嵌入一个外层视图（这个外层视图没有背景色，只是为了帮助我们布局而存在），可以把它定位在父级视图的中间。

通过这个方法，你的约束看起来可能像这样：

现在我比较喜欢让我的布局层级尽量平。另外一个不使用外层视图的方法，我叫它 布局视图。

使用这种方法，我倾向于在storyboard中添加一个颜色明亮的视图，然后把它的hidden属性设置为true，你仍然可以在storyboard布局中看到它（虽然稍稍渐隐），但是运行模拟器的时候它不会出现。

现在你在你的视图和布局视图中可以添加 居中排列（align center to center）。

间隔视图样例

之前我们看到了我们是如何固定视图边缘到父级视图边缘的间隙，使得当父级视图变大时，间隙约束也会让视图变大。

但是如果我们想要视图仍然保持原来的大小，在父级视图变大时，视图之间的间隙也变大呢？

理论上来说，我们想要某种类似 同等宽度约束的约束，只不过同等宽度约束是作用在视图上，我们想让它作用在约束上。

此时我们需要添加 间隔视图来帮助我们布局，但由于我们不想在运行app时看到它们，我们会把它们的hidden属性设置为true。

使用这项技术的方法，是为每一个你想要等比增长的间隙添加一个间隔视图，把其他视图的边缘固定在间隔视图的边缘上，然后为所有的间隔视图添加 同等宽度约束。

下一步

现在希望你们已经完全有信心开始探索应用约束的布局了。

不要指望能即刻成功，Xcode是一个非常复杂的工具，除了storyboard和约束之外它还有很多其他功能，有些功能刚开始使用会觉得很神秘和困惑。就像其他复杂的工具一样，在你熟悉它的怪癖之前你还需要一段适应时间，但是我建议你尽早的去熟悉它，因为我预计（至少我希望）下一代设计师会更多地使用Xcode这样的工具而非Photoshop。

如果你是一位创建设计规范的设计师，并想让IOS开发者遵循你的规范，你应该开始考虑和你的设计团队沟通的最好方法。也许你会创建一个视觉语言来描述你想要应用的约束。

我个人认为，设计师应该更多地承担一些他们创建工作上的责任，而不是让一个前端开发人员重新创建设计意图，而设计师只是管理storyboard文件。

如果你发现这个教程上有任何难以理解的地方，或者有错误的敌方，请让我知道，我会尽快更新这篇文章。

方法：
   alert,对话框，OK按钮
   confirm,对话框，OK和Cancel按钮
   prompt,对话框，可输入
   close，关闭当前浏览器窗口
   navigate，在当前窗口中导航到指定的URL资源
   setInterval，设置每隔一定时间调用指定程序代码，毫秒，setInterval("Func()",5000)
   setTimeout,设置经过一定时间后执行一次指定程序代码，毫秒，setTimeout("Func()",5000)
   clearInterval,
   clearTimeout,
   moveTo，将浏览器窗口移动到屏幕上的某个位置
   resizeTo,改变浏览器窗口的大小
   open，打开一个新窗口 window.open("abc.html","_blank","top=0,left=0,width=100,height=200,toolbar=no");
   showModalDialog产生一个模态对话框
   showModelessDialog产生一个非模态对话框窗口
属性：
    closed
    opener
    defaultstatus
    status
    screenTop
    screenLeft
事件：
    onload,onunload,onmouseover,...
对象属性：
    location对象：设置和返回当前网页的URL信息。
        载入一个新的网页：window.location.href="http://g.cn";
        刷新当前页：window.location.reload();
    event对象：获取和设置当前事件的有关信息。
        altKey属性，用于检测事件发生时Alt键是否被按下
        ctrlKey。。。
        shiftKey...
        screenX,screenY设置和返回鼠标相对屏幕顶点的x,y坐标
        offsetX,offsetY设置和返回鼠标相对事件源顶点的x,y坐标
        x,y 设置和返回鼠标相对事件源的父元素顶点x,y坐标
        returnValue设置和返回事件的返回值，一般情况下设置为false
        cancelBubble设置和返回当前事件是否继续向下传递
        srcElement设置和返回事件源对象
        keyCode设置和返回键盘按下或弹起时的键的unicode码
        button检索鼠标动作使用的是哪个按键，1左鍵，2右键，3左右同时
function window_onkeypress()
{
//    alert(window.event.keyCode);
    if(window.event.keyCode==27)
    {
        window.close();
    }
}