of creating a model of a future product.

創建一個未來產品的模型。

A prototype needs to be created quickly and changed easily

原型需要快速創建並易於改變

because it's likely

因為它很可能

that several versions of a prototype will be required

將需要幾個版本的原型

before the right version is created.

在正確的版本被創建之前。

With each prototype,

隨著每個原型的出現。

a round of user testing is typically performed,

通常會進行一輪用戶測試。

analyzed, and measured,

分析和測量。

and changes are made.

並進行了修改。

To keep costs low and possible interfaces high,

為了保持低成本和可能的高界面。

prototyping software is often used.

經常使用的是原型設計軟件。

With prototyping software, no coding is required.

使用原型設計軟件，不需要編碼。

As you might imagine,

正如你可能想象的那樣。

coding is a complex and time-involved process.

編碼是一個複雜的、涉及時間的過程。

It's not easy to make changes

做出改變是不容易的

and it takes time to develop a quality product.

而且開發一個高質量的產品需要時間。

Eliminating the coding process

消除了編碼過程

is critical to moving quickly and making changes.

是快速行動和做出改變的關鍵。

Prototyping software

原型設計軟件

typically features a drag-and-drop interface,

通常具有一個拖放界面。

often with several pre-configured interface options

通常有幾個預先配置的接口選項

like buttons, search boxes, form elements,

如按鈕、搜索框、表單元素。

navigation bars, and more.

導航欄，以及更多。

You can import graphics like logos and photos.

你可以導入標誌和照片等圖形。

Often, you can add links between prototype screens

通常，你可以在原型螢幕之間添加鏈接

and small animations when something is clicked.

和點擊某些東西時的小動畫。

Let's take a quick peek at some prototyping software

讓我們快速瀏覽一下一些原型設計軟件

to see how this type of software looks and functions.

來看看這類軟件的外觀和功能。

This is Figma.

這就是Figma。

You can sign up for a free account at figma.com.

你可以在figma.com註冊一個免費賬戶。

I wanted to briefly walk you through the kinds of problems

我想簡要地告訴你各種問題的情況

that Figma happens to solve.

Figma恰好可以解決這個問題。

So this is the dashboard.

所以這就是儀表板。

Once you have created an account and logged in,

一旦你創建了一個賬戶並登錄。

you'll see something like this.

你會看到像這樣的東西。

You'll see you'll have the ability

你會看到你將有能力

to create several kinds of files,

創建幾種類型的文件。

so you can create the type of file

所以你可以創建文件的類型

for designs and prototypes.

用於設計和原型。

I'm going to show you one of those in a moment.

我一會兒會給你看其中的一個。

You'll have the ability to create a FigJam file,

你將有能力創建一個FigJam文件。

which, as it says here, is like whiteboards, diagrams,

其中，正如這裡所說的，就像白板，圖表。

sticky notes, that kind of thing.

便條，諸如此類的東西。

I'll show you that in a moment as well.

一會兒我也會給你看。

Or you can import a file from someplace else.

或者你可以從其他地方導入一個文件。

So maybe you have somebody else's Figma file

所以也許你有別人的Figma文件

or you have a file from some other program, like Sketch.

或者你有一個來自其他程序的文件，比如Sketch。

Using the Figma community,

使用Figma社區。

which is over here on the left-hand side,

這是在這裡的左手邊。

I found some examples for us to just briefly take a look at.

我找到了一些例子，讓我們簡單地看一下。

So here's an example of a webpage layout

是以，這裡有一個網頁佈局的例子

that comes from the community.

這來自於社區。

Somebody already designed this for you to take a look at

有人已經為你設計了這個，讓你看一看。

with the intention that you can learn Figma from this

目的是讓你能從這裡學習Figma。

or you can take this in, tweak it a little bit,

或者你可以把這個拿進去，稍微調整一下。

and turn it into a different kind of design.

並把它變成一種不同的設計。

So those of you who are familiar with Photoshop,

是以，那些熟悉Photoshop的人。

you'll notice this might look somewhat familiar.

你會注意到這可能看起來有些熟悉。

We have various types of layers

我們有各種類型的層

and so forth over here on this side.

等在這一邊。

So as I click on things,

所以當我點擊東西的時候。

you can see we are selecting different elements here

你可以看到我們在這裡選擇不同的元素

on the page.

在頁面上。

Okay, there's that tiny emoji up there at the top.

好了，上面有一個小的表情符號，在上面。

You, of course, can zoom in or zoom out,

當然，你可以放大或縮小。

zoom to fit, whatever is best for you.

縮放以適應，無論什麼都是最適合你的。

I'll zoom in a little bit.

我再放大一點。

So for example, here in this box,

是以，舉例來說，在這個盒子裡。

I might want to make some changes to this.

我可能要對此做一些修改。

I can, of course, double-click on this and change the text,

當然，我可以雙擊這個，並改變文本。

"I want to work from home every day,"

"我想每天在家裡工作，"

or whatever changes you wanted to make here.

或任何你想在這裡做的改動。

You could select other elements.

你可以選擇其他元素。

This is a grouping here.

這裡是一個分組。

If we group inside of this, there's a vector diagram,

如果我們在這裡面分組，有一個矢量圖。

there's some text associated with this,

有一些與此相關的文字。

and then there's this little icon here.

然後這裡有這個小圖標。

We could turn off the eyeball

我們可以關閉眼球

that would remove that from view.

這將從視圖中刪除。

We could also select this little guy here,

我們也可以在這裡選擇這個小傢伙。

maybe we get rid of that.

也許我們可以擺脫這種情況。

So we can just continue to make changes here.

是以，我們可以在這裡繼續做出改變。

We can make changes to colors as you see here.

我們可以像你在這裡看到的那樣對顏色進行修改。

The background for this,

這方面的背景。

let me zoom back out again so we can see this.

讓我再次放大，以便我們能看到這個。

The background for the page overall

頁面的整體背景

is this light gray color.

是這種淺灰色的顏色。

We could easily change that background color

我們可以很容易地改變這個背景顏色

to something else.

到別的東西。

Maybe this dark gray.

也許是這種深灰色。

And you'll notice that these are in hexadecimal format.

你會注意到，這些都是十六進制的格式。

We've talked about that other places in the course.

我們已經在課程的其他地方談到了這一點。

So those colors that might come to you

所以那些可能出現在你身上的顏色

from some kind of branding document in hexadecimal format,

來自某種十六進制格式的品牌文件。

you can just type those colors right into Figma

你可以將這些顏色直接輸入Figma中。

and make use of them.

並利用它們。

So this is the kind of thing that you can expect here

是以，這就是你在這裡可以期待的事情

within Figma for laying out webpages.

在Figma內用於佈置網頁。

You have the ability to place shapes,

你有能力放置形狀。

and images, and so forth;

和影像，等等。

you have some basic drawing tools that are available to you;

你有一些基本的繪圖工具，可以使用。

you have some text tools that are available;

你有一些可用的文本工具。

and you can make comments and share these with your team.

你可以發表評論，並與你的團隊分享這些。

Let's take a brief look over here at a FigJam document.

讓我們簡單看一下這裡的FigJam文件。

So this is somewhat the same but also somewhat different.

是以，這有些相同，但也有些不同。

The FigJam functionality, I think,

我認為是FigJam的功能。

would be most used by people

將是人們最常使用的

who are working with user experience.

正在從事用戶體驗工作的人。

In other words, they are researching

換言之，他們正在研究

and planning some kind of document

和規劃某種文件

rather than putting together the actual graphic design

而不是把實際的圖形設計放在一起

or a true interface prototype.

或一個真正的接口原型。

This is from earlier in the process

這是在這個過程的早期

of developing a website or web application.

開發一個網站或網絡應用程序的。

In this case, I'm looking at the consumer journey map here,

在這種情況下，我在這裡看的是消費者旅程圖。

and as we have done before,

而且正如我們以前所做的那樣。

we can zoom in and take a closer look at this.

我們可以放大並仔細看看這個。

So we have an introductory graphic

是以，我們有一個介紹性的圖形

that we have here.

我們這裡有的。

We have the ability to put in information about a persona

我們有能力輸入有關人物的資訊

that we might be working with

我們可能正在與之合作的

and we could make a graph here.

而我們可以在這裡做一個圖。

We have sticky notes

我們有便條貼

that are spanning across these four boxes.

在這四個盒子中橫跨的。

This is a pretty common sort of technique that UX people use

這是用戶體驗人員非常常用的一種技巧

for organizing a customer journey.

用於組織客戶旅程。

So how are people interacting with your product or service

那麼，人們是如何與你的產品或服務互動的呢？

from when they find it,

從他們找到它的時候。

all the way through until they purchase it,

一直到他們購買為止。

and how are they using it

以及他們是如何使用它的

to address problems within their lives?

來解決他們生活中的問題？

So here, we have actions, experience, opportunities,

所以在這裡，我們有行動，有經驗，有機會。

and pain points.

和痛點。

These sticky notes could easily be rearranged.

這些粘性紙條很容易被重新排列。

You just click and drag.

你只需點擊和拖動。

We aren't zoomed in far enough to read what they say.

我們沒有放大到足以閱讀他們所說的內容。

There actually isn't any text on these.

實際上這些上面沒有任何文字。

But as you can expect,

但正如你所料。

you double-click on this and say, "This is a sticky note."

你雙擊這個，然後說，"這是一張便條"。

So there's the sticky note.

所以就有了這張便條。

If we wanted it to be a different color,

如果我們希望它是一個不同的顏色。

we have a few choices.

我們有幾個選擇。

We can pick a different color for our sticky note.

我們可以為我們的便條選擇不同的顏色。

Down here in our tray,

在我們的盤子裡的下面。

we have the ability to click and drag

我們有能力點擊和拖動

and add other ones here.

並在此添加其他的。

We can also click and drag other shapes,

我們還可以點擊並拖動其他形狀。

and, of course, there are many choices of shapes

當然，也有很多形狀的選擇

to choose from.

以供選擇。

That would be useful

這將是有用的

if you were putting together something like a flow chart,

如果你要把類似於流程圖的東西放在一起。

which is a pretty common type of way

這是很常見的一種方式

of planning some kind of functionality

計劃的某種功能

inside of a web application.

在一個網絡應用程序中。

We have the ability to draw on the page,

我們有能力在頁面上繪畫。

so I can

所以我可以

make some kind of drawing here

在這裡做一些圖畫

and it smooths it out for me really nicely.

它為我帶來了非常好的平滑效果。

We have the ability to put in various kinds of stamps.

我們有能力放進各種郵票。

So if I really love this particular sticky note,

所以，如果我真的喜歡這張特別的便條。

I can put hearts on it.

我可以把心放在上面。

We also have the ability to add silly things here.

我們也有能力在這裡添加愚蠢的東西。

These are just stickers and so forth.

這些只是貼紙之類的東西。

And wow, that's a really great idea.

而且，哇，這真是個好主意。

Let's label it as fresh.

讓我們給它貼上新鮮的標籤。

So this is just a very brief overview

所以這只是一個非常簡單的概述

to give you an idea of what Figma is and how it works.

讓你瞭解什麼是Figma以及它是如何工作的。

There are two sides to Figma.

Figma有兩個方面。

Side number one that I'm looking at right here

我在這裡看到的第一面

is this whiteboarding, sticky note, planning,

這就是白板、便條、計劃。

diagramming type of tool, which is called FigJam.

圖解類型的工具，它被稱為FigJam。

And the other side of it

而它的另一面

is more typically used for planning webpages

更加典型地用於規劃網頁

and prototyping site designs,

並對網站設計進行原型設計。

where you can put in

在這裡你可以把

all kinds of pretty elements to the interface,

各種各樣的漂亮元素的界面。

line things up,

排列好的東西。

and truly draw out what a webpage will look like.

並真正畫出一個網頁的樣子。

(upbeat music)

(歡快的音樂)