Briefs中文使用教程–翻译官方文档

在学习制作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。如果你愿意，你可以为延迟添加不同的值来模拟低带宽或拥挤的网络条件，而无需编写任何代码。

 

让Actors动起来

动画是当前大部分手机应用体验的关键组件。使用Briefs，我们可以表现很多动画任务从创建的应用来深入的模拟用户期望的本地体验。Our login flow is a little staged at the moment since the userdoesn’t enter any text into the username or password boxes. Further since we’veomitted the software keyboard, we don’t know if we should adjust any elementson screen when the keyboard is presented. Let’s change that.

首先，你会发现在我们的资源文件夹中没有键盘图片。那是因为我们已经在Briefs内建的库中包含标准iOS（和安卓）键盘。它与我们使用预制资源的Asset Browser在同一个面板中。导航到Briefs的库，如下所示：

当你发现iPhone竖屏键盘，将它拖到Start场景上，屏幕的底部边缘。提示：键盘需要在视野之外直到用户点击Username区域。那意味着我们需要修改Username区域上的hotspot来升起键盘，替换跳转到Enter Username场景。

 

移除之前的hotspot并且在Username区域上创建一个新的。现在，当你添加一个action到hotspot，将其连接到键盘actor。现在我们可以使用transform功能lai来使键盘移入场景。因为我们想让键盘刚好在屏幕的底部边缘，我们只需要勾选transform弹出框的bottom框，如下所示：

这会使Username区域被点击时，键盘滑入到相应的位置。使用transform动作你可以设置actor的缩放，旋转，透明度。你甚至可以在点击actor时播放声音。在导航到不同的场景时，transform动作是一个强大的方式来移动屏幕上的项目。正如我们后所讨论，当所有的动作方式一起使用时会非常的强大。

 

要完成交互，添加一个跳转动作到键盘来连接到EnterUsername场景。（提示：在键盘上右击连接到场景列表的EnterUsername场景）在设备上检查我们的工作，当我们点击Username区域时键盘会出现，点击键盘会转到Enter Username场景。

 

我们做一个小的修改来重复EnterUsername场景的流程。当导航到EnterUsername场景时，我们不想让键盘消失，所以我们将键盘添加到画布上的手机屏幕相应位置。最后，我们可以连接键盘的goto动作到Enter Password场景或者我们可以节省点时间调整当前password区域上的hotspot.只要拖动并缩放hotspot覆盖整个键盘就会表现出相同的功能。

 

捕捉错误

到目前为止，我们我们已经模拟了开发者喜欢称之为“快乐途”，意思是我们假设用户总是输入正确的密码并且他们从不在输入所有需要的信息之前尝试点击“Viewyour Account”按钮。Any desire with amonth of experience will tell you we’re living in fairyland.用户会犯错误，坏人会黑进你的系统。任何一个优秀的设计都必须考虑离经叛道的行为并适当的提醒用户。

 

幸运的是Briefs已经在你的模型中实现了这个细节。我们将通过两种方法向您展示错误状态，两者表现出Briefs不同的优势。当用户试图做些秩序外的事情，开始使用我们将要导航到的错误场景。再次，从Asset

folder(资源文件夹)option-drag（按住alt键拖动）bg-4-kaboom-scene 资源到画布。

 

有了这个新的场景，在Start场景的View your Account按钮区域上放置一个hotspot actor。添加一个action从这个新的hotspot到我们刚新创建的error场景。在错误场景，我们想要创建一个hotspot在Dismiss按钮上，连接到初始的Start屏幕，如下所示：

在Enter Username场景重复这个步骤，你就能掌控用户在点击View your Account按钮前不输入username或密码这两个错误案例。

 

然后，这不是理想的流程。第一，如果你想欧诺个Enter Username场景导航到error场景，错误画面不包括输入的用户名。我们可以复制这个场景使用包含username的背景，但是那会变得更复杂如果我们的登录流程改变的话。有一中更好的方式使用actors来模拟错误流程。

 

更好的错误

错误是用户体验中破坏性的部分，但是当事情出错或有意想不到的情况，错误信息还是必要的。当你考虑全局设计时，错误如何显示，包括他们怎么移动到屏幕上对于可视化很重要。设计的良好和优秀之间的差别就是一个精心制作的错误体验。

 

对于Awsmr项目，我们用一个漂亮的交叉淡入淡出动画，让用户知道出了错，不会太唐突。在assetfolder，你会发现一个半透明的错误信息图片，直接拖动到Start场景。看起来像这样：

确认从View your Accounthotspot删除最近的章节中创建的action。要设置action，将error actor稍微便宜屏幕，从hotspot右键拖动一个action到error actor。

我们想要淡入actor，所以我们虚妄action不透明度动画到100%。创建一个opacity action在action弹出框将其设置为100%。设置时间至0.35秒。完成对action的设置，将error actor重新放置到画布的中心。最后，更改默认的不透明度（在Inspector）为0%，所以当场景开始加载时它不会出现在屏幕上。

现在只有在用户在输入密码前点击Viewyour Account按钮error才会动画显示在屏幕上。要关闭它，只需添加一个action到error actor，这样点击它透明度就会回到0%。

 

添加这个错误对话框到更多的场景，只要选择erroractor和chu’fa触发它的hotspot然后按⌘C（或者去菜单中的Edit->Copy）然后将actors粘贴到其他场景。你可能需要重新调整触发错误对话框的hots的位置，但是在复制粘贴之后action应该仍然不变。