Name: 網站開發教程--用Figma製作網站的原型 (Web Development Tutorial - Prototyping a site build with Figma)
Uploaded: 2023-01-25T18:00:25.000Z
Duration: 8 min 37 s

情態副詞

A prototype needs to be created quickly and changed easily

that several versions of a prototype will be required

a round of user testing is typically performed,

To keep costs low and possible interfaces high,

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

With prototyping software, no coding is required.

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

coding is a complex and time-involved process.

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

and it takes time to develop a quality product.

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

is critical to moving quickly and making changes.

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

typically features a drag-and-drop interface,

often with several pre-configured interface options

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

like buttons, search boxes, form elements,

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.

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

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

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

I wanted to briefly walk you through the kinds of problems

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

Once you have created an account and logged in,

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

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,

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

Or you can import a file from someplace else.

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

So maybe you have somebody else's Figma file

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

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

which is over here on the left-hand side,

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

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

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

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,

you'll notice this might look somewhat familiar.

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

you can see we are selecting different elements here

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

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

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

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

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

I might want to make some changes to this.

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

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

or whatever changes you wanted to make here.

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

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

We could also select this little guy here,

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

So we can just continue to make changes here.

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

We can make changes to colors as you see here.

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

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

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

We could easily change that background color

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

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

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

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

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

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

from some kind of branding document in hexadecimal format,

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

you can just type those colors right into Figma

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

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

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

字幕列表影片播放

網站開發教程--用Figma製作網站的原型 (Web Development Tutorial - Prototyping a site build with Figma)

process

eliminate

technique

journey