在学习制作ios应用的界面时了解了一些briefs,然后学习了一下.发现网上基本上没有中文教程,就花了几天时间翻译了一下.英语实在渣,翻译的不好请直接提出来.
? ? ? ? –逸文
在学习制作ios应用的界面时了解了一些工具,看到有些地方推荐briefs,然后学习了一下.发现网上基本上没有中文教程,就花了几天时间翻译了一下.英语实在渣,翻译的不好请直接指出来,谢谢!有什么问题或者看不明白的地方也请提出来,谢谢!有些地方实在不会翻译就直接留了原文,大家有懂的话请留言,我会补上.
这是第一次翻译英文文档并发到网上来,希望能对大家有帮助:)
官方源文档在附件里.
这里是briefs的官网:?http://giveabrief.com/ briefs
briefs还有ios的app叫briefs case,教程在这里
简单介绍下briefs是做什么的(网上其他地方摘录):
briefs是mas上最新上架的专业app设计工具，提供了成熟的交互设计功能，堪称移动app上的“axure rp”，设计师可以利用她设计完整的iphone、ipad 应用交互模型，并利用模拟器即时体验设计的成果，或者利用briefslive，将作品同步到装有briefscase的ios 6.0设备里让用户、同事亲身体验你的模型。
briefs提供的场景模式（scene view ）和细节模式（details view）分别负责交互设计和ui设计两个部分，在设计完成后可以在第三个模式（overview）查看整个app的架构。
在场景模式里，主要通过添加actors（按钮，文本段落，文本热点）和actions（触发动作）快速制作交互模型，在这个过程里可以自由插入界面跳转时的transition效果，声效，延时，retina 空间等交互体验辅助特效。
在细节模式里，配合library中丰富的ui控件，可以短时间内构造出任何你想要的ui。
点击软件左上角的“播放”按钮，可以弹出模拟器，即时显示你的模型效果，或者你也可以通过装有briefscase的ios 6 设备来查看模型；briefs目前提供了demo试用版下载，设计师们可以到他们的官网下载体验一番，他在mas的售价为199.99刀。
? ? ? ? ? getting started with briefs
you rock!
谢谢下载briefs！ 现在你已经迈出了为实现你的ios，android，或者mac app创意快速创建原型的第一步。briefs是一个稳定的工具，并且涵盖许多，我们以通过speccing out一个虚构的app-awsmr的登录流程为开始。
getting setup
当你第一次打开briefs的时候，会提示你选择一个模板。这个模板会创建一个包含我们整个登录流程的新的时间轴。briefs能让你在同一个文件里为各式设备进行设计，每一个使用相应的时间轴。在本教程，我们会创建一个iphone的时间轴。选择iphone模板，你的屏幕应该看起来像这样：
跟你的空白画布打下招呼吧!
导入资源
空白的页会有点恐怖，我们包含了你需要用来创建登陆流程的一个已经创建好的资源。在这里下载zip文件。解压缩完文件后你会看到9个不同的资源，标准和retina两种格式（提示：retina资源以@2x结尾）。
你可以通过asset browser（如下所示）使用managed asset folder功能将整个文件夹导入到briefs中。在briefs外面对这些文件做的修改会被关联并自动导入这些修改。对于现成的图片来说，这也是很便捷的方式，因为我们将retina和non-retina的资源合并在一起管理。
打开asset browser，点击上图所示的文件夹按钮。点击有三个点的按钮打开文件对话框。找到你解压的文件夹并点击打开按钮。
创建第一个场景
now it’s time to party。briefs能让你快速开始已经存在的模型。你可以快速的平面化你的屏幕转成png并当做场景的背景属性。让我们现在就完成他。
将bg-1-opening-scene 图片拖到inspector面板的background区域，如下所示。
祝贺，你已经创建了你的第一个场景。然后在开始测试之前，我们还有很多事要做。
添加新的场景
有多种方法添加新的场景到时间轴：（1）点击在左下角导航栏的加号按钮或者（2）按键盘上的n（option + command + n）。你也可以通过按住option(?)键将一张finder里的图片拖到画布上来创建新的场景（这种方法我没试成功过）。这会创建一个新的场景，以finder里的图片为场景背景。同样你可能知道，这种方式的快捷操作同样适合在asset browser里的图片。
试试通过按住option(?)键将bg-2-username-scene资源拖到画布上。这将会自动创建一个以bg-2-username-scene.png为背景的新场景。对bg-3-password-scene重复此操作，你应该会有三个场景在时间轴里。
根据功能来命名场景很有必要。重命名场景检视面板中的每一个场景。你也可以在源列表中双击输入来重命名。第一个场景的名称为start，后续的场景相应的命名为enterusername和enter password。
命名完成后，我们已经准备好了将他们之间的交互流程连接起来。我们将简单的以使用hotspots开始。
创建hotspots并注册actions
我们从一个预制模板开始，最快捷添加的交互的方法是在图片上定义一个可触控并导航到另一个场景的区域。我们将这个可以触控区域叫做热点actors（hotspotactors）。
打开start场景，按住h（shift+command+h）添加一个hotspotactor到画布中。现在拖动并调整actor的大小刚好覆盖场景中username区域，如下所示。
接下来我们要添加一个action 这样就可以点击username区域转到username已填充好的场景。以此模拟用户输入他们的登录信息的动作。添加一个action，右击新创建的hotspot并选择菜单中的add action。
连接action（使用黄色虚线）到场景列表中的enter username场景。我们想要直接转到enter username场景所以确定在弹出菜单中没有设置延迟（delay）或完成动作的时间（duration）。
运行模拟器
现在我们已经连接了两个场景，是时候坐下来看看我们创造的东西了。最快验证事情是否按预期工作的方法是打开briefs模拟器。模拟器允许我们点击原型，验证动画时间并总体上确定事情如我们预期那样工作。模拟器仅仅只是一个检查点，你应该在你的设备上使用我们免费的app运行brief，briefscase，适用于ios和android。
要运行模拟器，选择start场景并点击工具栏左上角的play按钮。一个背景是手机图像的窗口会出现，如下所示：
如果你点击username区域的任何一个地方，下一个场景（enter username）就会出现并显bill@awesome.com。如果没有出现，确定场景是否正确连接并重试上面添加action到hotspot的步骤。
我们还没有完成
祝贺你第一次运行brief。然而，这还不是一个非常令人印象深刻的案例。正如你可以想像，在现实世界里，你并不是简单地点击提交按钮后就立即登录到系统。处理网络请求时经常会有延迟，并且会影响您的app的用户体验。
briefs不是仅仅事hotspot原型设计还可以展示更复杂的交互，比如网络延迟。让我们继续展示一个更精细的登陆流程的画面。将bg-5-signon-scene按住option键并拖到画布。新的场景显示了当系统准备登陆的时候的一个暂停状态。将场景命名为signingin，如下所示：
接下来，我们需要将view youraccount的hotspot连接到signing in场景而不是直接到success场景。（1）点击蓝色action线的圆圈将出现弹出菜单（2）然后拖动弹出菜单右上角的十字线图标到场景列表的signing in场景就会重新注册action。
最后一块要做的交互是实际的延迟。我们希望在短暂的停顿后从signing in场景自动进入success场景。要做到这一点，我们要使用场景action，在场景第一次运行时触发。场景actions可以在场景对应的检视面板中找到，如下所示。
1.从as sceneenters图标拖动
2.选择success场景！将鼠标悬停在场景上然后释放。
3.在action弹出菜单中输入跳转action1.5秒延迟。
现在在设备（或者模拟器）上运行brief在点击view my account按钮后应该会有停顿。模拟网络延迟，现在brief让人开始感觉到这是个真正的app。如果你愿意，你可以为延迟添加不同的值来模拟低带宽