- [Emmanuel] Any UX project must start from somewhere

- [Emmanuel]任何用戶體驗項目都必須從某處入手

and some research and inspiration

以及一些研究和靈感

is usually the place I start.

通常是我開始的地方。

So for us, we'll assume we're building a purchase flow

是以，對我們來說，我們將假設我們正在建立一個購買流程

that could be used for a fictive company

可用於一個虛構的公司

called H+ Sports Supplements and Active Wear

叫做H+運動補充劑和運動服

and we'll be designing the purchase flow for mobile.

而我們將為移動端設計購買流程。

So let's get some inspiration by researching the web

是以，讓我們通過研究網絡來獲得一些靈感吧

for colors and potential ideas for design.

以瞭解顏色和潛在的設計想法。

Again, feel free to completely use different colors

同樣，請放心地完全使用不同的顏色

and designs for your own project.

併為你自己的項目設計。

So where I usually go is at pinterest.com

所以我通常去的地方是pinterest.com

but you can also use something like Behance or ArtStation

但你也可以使用像Behance或ArtStation這樣的東西。

or any other sites that you find your inspiration.

或任何其他你能找到靈感的網站。

So for example, for me, this is where I go.

是以，例如，對我來說，這是我去的地方。

So let's first do some research.

是以，讓我們首先做一些研究。

So we're going to do a sports company,

所以我們要做一個體育公司。

so let's go ahead and do sports

所以讓我們繼續做運動吧

and because I liked the colors

而且因為我喜歡這些顏色

that usually comes with soccer themes

通常伴隨著足球主題的

and soccer companies and things like that,

和足球公司以及諸如此類的事情。

I tend to go towards soccer

我傾向於選擇足球

and if you scroll down, you're going to find some colors.

如果你向下滾動，你會發現一些顏色。

So what I usually do is scroll on Pinterest

所以我通常做的是在Pinterest上滾動播放

and kind of look at the colors that they're suggesting.

並看一下他們建議的顏色。

So I like this really cool green and blue.

所以我喜歡這種非常酷的綠色和藍色。

This is something that's trendy right now.

這是現在很流行的東西。

You can also find colors like this.

你也可以找到這樣的顏色。

So whatever colors you like, go for it

是以，無論你喜歡什麼顏色，就去做吧

and put them in the Sketch.

並把它們放在素描裡。

And I'm going to show you in a few seconds

而我將在幾秒鐘內向你展示

how we put inspiration in Sketch show.

我們如何把靈感放在素描表演中。

One that I wanted to look for is a little bit down in here

我想找的是這裡的一個小地方

and maybe the designs have changed

也許設計已經改變

or the pictures here have changed

或這裡的圖片已經改變

so let's go for the other one that I've seen here,

所以讓我們去找我在這裡看到的另一個人。

it's very similar to the colors that we're going for.

它與我們要用的顏色非常相似。

So there we go, it's right there.

所以，我們走了，它就在那裡。

So what I usually do is create inside of Sketch

所以我通常做的是在Sketch中創建

an inspiration board.

一個靈感板。

So let's go ahead and do that

是以，讓我們繼續下去，做這件事

and then we'll drag and drop some photos inside of Sketch.

然後我們將在Sketch中拖放一些照片。

So let's go ahead and create a new document.

是以，讓我們繼續前進，創建一個新的文件。

So open Sketch and then click on new document, choose

所以打開Sketch，然後點擊新文檔，選擇

and then click on the little arrow here.

然後點擊這裡的小箭頭。

This is going to show all the pages inside of Sketch, like so

這將顯示Sketch裡面的所有頁面，像這樣

and the first one let's rename it to inspiration.

和第一個，讓我們把它重命名為inspiration。

And what I usually do is create a huge board

而我通常做的是創建一個巨大的董事會

and just drag and drop the images for inspiration.

並只需拖放圖片以獲得靈感。

So you create a new board by doing a

是以，你創建一個新的董事會，通過做一個

and then just click on whatever size

然後只需點擊任何尺寸

but for our case here it's going to be something

但對於我們這裡的情況，它將是一些

that's customized.

那是定製的。

So let's just go in custom

是以，讓我們直接進入自定義

and create custom size.

並創建自定義尺寸。

So my custom size for this one

是以，我對這個人的定製尺寸

and let's just create a brand new preset,

並讓我們創建一個全新的預設。

so inspiration board like this

是以，像這樣的靈感板

and usually I go by a thousand pixels by a thousand pixels.

而通常我都是按一千個像素來計算。

And once you create a custom preset,

而一旦你創建了一個自定義的預設。

this will be available for future use as well.

這也將供今後使用。

So you have it in your custom

是以，你在你的定製中擁有它

so you can go ahead and create this new one and click on it.

所以你可以繼續前進，創建這個新的，並點擊它。

So you got your inspiration board here.

所以你在這裡得到了你的靈感板。

So another shortcut for Sketch is to click on command

所以Sketch的另一個快捷方式是點擊命令

and scroll with your mouse, basically on the Mac,

並用你的滑鼠滾動，基本上在Mac上。

you can also do the same by using a track pad

你也可以通過使用跟蹤墊來做同樣的事情

and scrolling up and down by hitting command and track pad.

並通過敲擊命令和跟蹤墊上下滾動。

So once you have that you'll have your board center as well.

所以一旦你有了這個，你也就有了你的董事會中心。

Another way to a move in Sketch

另一種方式是在Sketch中移動

and this is something that will be useful

這是很有用的東西

once we have multiple boards on our application,

一旦我們的應用程序上有多個板塊。

it's to use shift and then use the track pad

它是使用移位，然後使用跟蹤墊。

or the scroll mouse like so

或者像這樣用滾動滑鼠

and then you can move left and right like that.

然後你就可以像這樣左右移動。

So what we'll do is go back to Pinterest

所以我們要做的是回到Pinterest去

and start dragging images inside of our inspiration board.

並開始在我們的靈感板中拖動圖片。

I'll maximize both so I can drag

我將最大限度地提高這兩點，以便我可以拖動

and drop in between application, like so.

並將其放入應用程序之間，像這樣。

So I want to have the first image on the top

所以我想把第一張圖片放在上面

that I saw somewhere here,

我在這裡的某個地方看到的。

so just click on it,

所以只需點擊它。

drag and drop inside of Sketch

在Sketch中拖放

and then inside of Sketch just move it to wherever you want.

然後在Sketch中把它移到你想去的地方。

And then what you could do is type some notes here.

然後你可以做的是在這裡打一些筆記。

So you can use a shortcut t for text

所以你可以用快捷鍵t來表示文本

and just do something like colors.

而只是做一些類似顏色的事情。

Let me type some notes here like the green

讓我在這裡打出一些說明，如綠色

and blue, dark blue of this image

和藍色，這個影像的深藍色

and just maximize the text

而只是將文本最大化

so you guys can actually see it, like so

所以你們可以真正看到它，就像這樣

and because we're going to have some other things,

而且因為我們會有一些其他的事情。

let's just move it here and there you go.

讓我們把它移到這裡，你就可以了。

So one thing that you'll see

是以，你會看到的一件事是

as you move things around in Sketch,

當你在Sketch中移動東西的時候。

this is not a basic course on Sketch,

這不是一個關於Sketch的基礎課程。

so you may be familiar with this, if you're not,

所以你可能對這個很熟悉，如果你不熟悉的話。

then you'll see that whenever you move things around,

然後你就會看到，每當你移動東西的時候。

you're going to have guides.

你將會有指南。

So are you're going to have like the amount of pixels

是以，你將有像像素的數量

in between each items and so on an so fourth.

在每個項目之間，以此類推，第四次。

This is very useful when you start positioning stuff

當你開始定位東西時，這非常有用

and also aligning stuff.

而且還能對準東西。

Hold on, let me just click on auto, there you go

等一下，讓我點擊一下自動，就可以了。

and then do this, while it's highlighted of course

然後這樣做，當然是在突出顯示的時候

and make sure that we have the right size.

並確保我們有正確的尺寸。

So we're not going to spend too much time

所以我們不打算花太多時間

on the text alignment

關於文本對齊

but this is basically how you put items in here.

但這基本上是你如何把項目放在這裡的。

So the next thing we want to make sure that we save this.

是以，接下來我們要確保我們保存這個。

So let's rename this purchase flow this

是以，讓我們把這個購買流程重新命名為這樣

and I'm going to put it on desktop for my own

我準備把它放在桌面上，供我自己使用。

but you can put it anywhere you want,

但你可以把它放在你想要的任何地方。

there we go.

我們走吧。

So I need few other things for inspiration.

所以我需要一些其他的東西來激發靈感。

So I got colors, I want some shapes.

所以我有顏色，我想要一些形狀。

So you need to find some shapes

所以你需要找到一些形狀

and again, these are all things

而且，這些都是

that you can find for inspiration,

你可以找到靈感的。

you don't want to replicate the exact same thing,

你不希望複製完全相同的東西。

so you want to make sure that you just get inspiration

所以你要確保你能獲得靈感

from this, then start doing some low-level mock-ups

從這一點出發，然後開始做一些低級別的模擬圖

and then do the actual designs.

然後再做實際的設計。

So, one other thing that I search quite often is UI

是以，我經常搜索的另一件事是UI

and if this is a mobile application,

以及如果這是一個移動應用程序。

I'm going to do mobile, like so

我打算做移動，像這樣

and I'm going to find more inspiration from there

我將從那裡找到更多的靈感

and then just scroll and see

然後只是滾動，看到

what are the shapes that you really like

你真正喜歡的形狀是什麼？

or designs that inspire you.

或啟發你的設計。

So for example, one of the designs that I really like

是以，舉例來說，我非常喜歡的一個設計是

is a little bit down further when I first did this search,

是我第一次做這個搜索時，再往下一點。

this one here.

這個在這裡。

I really liked the round shapes

我真的很喜歡那些圓圓的形狀

and the way they did the design here.

以及他們在這裡做設計的方式。

So let me go ahead and drag

所以讓我繼續拖下去

and drop this image as well, like so.

並把這個影像也丟掉，像這樣。

Now this image is really, really big

現在這個影像真的非常非常大

so what I'm going to do

所以我打算做的是

and a little shortcut that you can do in Sketch,

和一個你可以在Sketch中做的小捷徑。

is double click on something and then crop it,

是雙擊一些東西，然後裁剪它。

click on crop and you click the selection you want to crop

單擊 "裁剪"，然後單擊你要裁剪的選項。

and this kind of represents the colors

這就代表了顏色

and the shapes that I like,

和我喜歡的形狀。

so I'm going to crop this.

所以我打算裁剪這個。

So I did my selection and then just crop it like so

所以我做了我的選擇，然後像這樣裁剪它

and then you can just replace the image on your board,

然後你就可以在你的板子上替換影像。

like so.

像這樣。

So I'll put it at the bottom here

所以我把它放在這裡的底部

and it's just option, click to the second text

而這只是選項，請點擊第二個文本

and just put some notes in here, like the shapes

並在這裡寫上一些說明，比如說形狀

and this design, like so.

和這個設計，像這樣。

So one more thing that I did find in my initial research,

是以，還有一件事是我在最初的研究中發現的。

you can go ahead and do products

你可以繼續做產品

because this is going to be an application

因為這將是一個應用程序

that will represent a company that sells products.

這將代表一家銷售產品的公司。

So maybe get some more inspiration around a company

是以，也許可以圍繞一個公司獲得一些更多的靈感

that has mobile application, some UI references

有移動應用的，一些UI參考

and about products.

以及關於產品。

And one other design that I really like, that I found,

還有一個我非常喜歡的設計，是我發現的。

I believe it's a little bit down further,

我相信再往下一點就是了。

it's this one here.

是這裡的這個人。

So I really liked this design,

所以我真的很喜歡這個設計。

I like the way that this is kind of a blog in a application

我喜歡這種方式，這是一種應用中的博客。

but I'd like to use

但我想用

kind of a same similar style for products

種類相同，風格相似的產品

and then you can swipe sideways to the application.

然後你可以向側面滑動到應用程序。

So let's go ahead and drag and drop this image here

是以，讓我們繼續前進，把這個影像拖放到這裡

and then we can close Pinterest

然後我們可以關閉Pinterest

because we're kind of done with our inspiration

因為我們的靈感已經用完了

and I will maximize this here

而我將在這裡最大限度地提高這個

and because this is so big,

而且因為這是個大問題。

let's just resize this one, like so

讓我們調整一下這個的大小，就像這樣

and just put it on top like that

並像這樣把它放在上面

and t's put some notes again.

和T's把一些筆記再次。

So option, click, let's reshape this

所以選項，點擊，讓我們重新塑造這個

and then really like the side scrolling approach.

然後真的很喜歡側面滾動的方式。

So this is how I usually go about finding inspirations,

所以這就是我通常尋找靈感的方法。

I create an inspiration board.

我創建了一個靈感板。

So I directly create an inspiration board inside of Sketch

所以我直接在Sketch裡面創建了一個靈感板

so I can always go back to it.

所以我可以隨時回到它。

So the idea of this exercise is to really find ideas,

所以這個練習的想法是要真正找到想法。

not that you will replicate exactly the same way

不是說你會以完全相同的方式進行復制

but you want to find inspiration for shapes, flows

但你想找到形狀、流向的靈感

and general colors to inspire you in your design.

和一般的顏色來啟發你的設計。

(upbeat music)

(歡快的音樂)