摘要

在第一階段中我們先畫出第一版的UI設計圖，作為後續開發時的參考圖片。
這邊會使用到Figma這項工具來繪製UI，參考了Papaya教室的教學影片，從手繪的草圖開始建立第一版的UI圖。

概念說明

手繪草稿

首先以手繪的方式先畫簡易的草圖。

標出頁面中不同的功能

使用Figma做出初版UI

建立Frame

在Figma中提供許多種不同尺寸的Frame，功能上類似於畫布，也可以自己拉出方塊並轉換為Frame。

這裡我們先拉出Desktop當成標準尺寸，將滑鼠移到左上角工具列中的＃字符號，點選Frame後右手邊就會跳出許多不同尺寸

雙擊畫面左邊的物件名稱就可以更改選取物件的名稱，將目前這個畫面命名為「首頁v1」

接著我們可以透過右手邊功能欄中的「Layout grid」開啟網格功能，方便後續的排版。點擊九宮格的符號可以調整網格的間距跟顏色。

製作頁首

點擊左上工具列中的方塊符號或使用快捷鍵R就會開啟方塊工具，拉出一個長方條放置於Frame上方作為頁首。

接著使用相同的方法在頁首中間拉出搜尋欄。

這時候會發現只要點擊其他地方就會看不出搜尋欄，因此我們使用右側工具欄的「Fill」將搜尋欄設定為白色與第一個方塊區分。

我們也可以用同樣的方法改變頁首的顏色。

最後我們點擊左側的物件管理介面重新命名目前的兩個物件，完成頁首的製作。

製作側邊欄

接下來我們拉出側邊欄留作排版使用，這邊我們希望側邊欄有與頁首相同顏色的邊框以及透明填色，所以使用到右邊工具欄的「Stroke」，選擇邊框的顏色。

使用Component製作文章方塊

在Figma中有一個很重要的功能，就是Component，我們將使用這個功能製作九個文字方塊。

首先，我們在Frame的區域外面拉出一個正方形，並按右鍵找到「Create component」或是使用快捷鍵將方塊製作成Component。

接著我們點擊左側物件管理介面的「Assets」，會發現裡面新增了一個剛剛製作的物件。長按物件拖曳到頁首Frame中新增成為物件。

Components跟一般的複製貼上最大的區別，就是所有從同一個Components製作出來的物件都可以從原始的Component統一編輯。

例如這邊，我們希望將所有的方塊加上希望將所有的方塊疊上一個新方塊，作為之後放置圖片的位置，我們只需要在原始的方塊上疊加，從Component拖曳出來的新方塊就會同步疊加上去。

接著我們透過上面提到的各種方法將方塊的樣式製作成下圖，其中邊框的粗細可以從Stroke中的選項調整。

最後我們使用快捷鍵長按Option，將Frame上的方塊往右邊拖曳，製做出同樣的方塊。

重複同樣的動作製作出九個方塊～

連結子頁面

最後我們要使用Prototype的功能，模擬點擊方塊後連結到子頁面的效果。

首先拉出一個新的Frame並命名為「店家頁面」

接著點擊右側上方的「Prototype」開啟功能頁面

這時候點擊剛剛製造的文章方塊Component，就會發線其又測多了一個藍色的小圈

點擊藍色小圈就可以拉出箭頭，並將箭頭連結到子頁面上。

我們將首頁上方的頁首複製一份放置到子頁面中，在點擊畫面右上角的播放按鈕，就可以預覽我們今天的成果了

參考方法

• 參考資料

  https://www.youtube.com/watch?v=P96TQwsY_VY

本日成果

心得

Figma在製作網頁的UI圖時可以完成許多跳轉特效、模擬網頁的設計，加上介面簡單容易操作，非常適合做為需要UI設計時的輔助工具。